@vibesdotdev/forge 0.0.0-stage → 1.0.0-rc.5

package/dist/svelte/components/KanbanBoard.svelte

@@ -0,0 +1,1265 @@
+<script lang="ts">
+	import LabelChip from './LabelChip.svelte';
+	import UserChip from './UserChip.svelte';
+	import type { KanbanColumn, KanbanCard } from '../../presentation.js';
+	import { createDragClickGuard } from '../drag-click-guard.js';
+
+	/**
+	 * KanbanBoard — fluid responsive columns with drag-and-drop support, visual drop
+	 * indicators, mobile-friendly column tabs, accessible keyboard/touch status
+	 * movement, and column-level quick actions.
+	 */
+	interface Props {
+		columns: KanbanColumn[];
+		cards: KanbanCard[];
+		/** Builds a destination href for a card (renders as a link when present). */
+		hrefFor?: (card: KanbanCard) => string;
+		/** Click handler for a card (used when `hrefFor` is absent). */
+		onCardClick?: (card: KanbanCard) => void;
+		/** Emitted when a card is moved to another column via drag-drop or menu. */
+		onCardMove?: (event: {
+			cardId: string;
+			fromColumnId: string;
+			toColumnId: string;
+			targetIndex?: number;
+		}) => void;
+		/** Quick-add card trigger on a column header. */
+		onAddCard?: (columnId: string) => void;
+		/** Rapid inline card creation directly at column bottom. */
+		onInlineAddCard?: (event: { columnId: string; title: string }) => void;
+		/** Emitted when sorting cards in a column. */
+		onSortColumn?: (event: { columnId: string; criteria: 'priority' | 'date' | 'title' }) => void;
+		/** Emitted when moving all cards from one column to another. */
+		onMoveAllCards?: (event: { fromColumnId: string; toColumnId: string }) => void;
+		/** Emitted when archiving all cards in a column. */
+		onArchiveColumnCards?: (columnId: string) => void;
+		/** Whether completed cards should be collapsed/hidden in final columns. */
+		hideCompleted?: boolean;
+		/** Toggle handler for hiding/showing completed cards. */
+		onToggleHideCompleted?: () => void;
+		/** Enable HTML5 drag-and-drop. Defaults to true. */
+		draggable?: boolean;
+		class?: string;
+	}
+
+	let {
+		columns,
+		cards,
+		hrefFor,
+		onCardClick,
+		onCardMove,
+		onAddCard,
+		onInlineAddCard,
+		onSortColumn,
+		onMoveAllCards,
+		onArchiveColumnCards,
+		hideCompleted = false,
+		onToggleHideCompleted,
+		draggable = true,
+		class: className = ''
+	}: Props = $props();
+
+	let grouped = $derived.by(() => {
+		const map = new Map<string, KanbanCard[]>();
+		for (const col of columns) map.set(col.id, []);
+		for (const card of cards) {
+			if (!map.has(card.columnId)) map.set(card.columnId, []);
+			map.get(card.columnId)!.push(card);
+		}
+		return map;
+	});
+
+	// Mobile view state: 'all' or specific column.id
+	let activeMobileTab = $state<string>('all');
+
+	// Inline composer and column menu state
+	let activeComposerColumnId = $state<string | null>(null);
+	let composerTitle = $state('');
+	let openColumnMenuId = $state<string | null>(null);
+
+	// Drag-and-drop state with click discriminator
+	let draggingCard = $state<KanbanCard | null>(null);
+	let dragOverColumnId = $state<string | null>(null);
+	let dragOverCardId = $state<string | null>(null);
+	// The click that ends a drag is not a click; the guard's settle timer is cleared on destroy.
+	const dragClick = createDragClickGuard();
+
+	function cardIdentifier(card: KanbanCard): string {
+		return card.id ?? String(card.number);
+	}
+
+	function handleDragStart(e: DragEvent, card: KanbanCard) {
+		if (!draggable) return;
+		dragClick.begin();
+		draggingCard = card;
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = 'move';
+			e.dataTransfer.setData('text/plain', cardIdentifier(card));
+		}
+	}
+
+	function handleDragEnd() {
+		draggingCard = null;
+		dragOverColumnId = null;
+		dragOverCardId = null;
+		dragClick.end();
+	}
+
+	function handleCardClick(card: KanbanCard) {
+		if (dragClick.suppressesClick) return;
+		onCardClick?.(card);
+	}
+
+	function handleDragOverColumn(e: DragEvent, columnId: string) {
+		if (!draggingCard) return;
+		e.preventDefault();
+		if (e.dataTransfer) {
+			e.dataTransfer.dropEffect = 'move';
+		}
+		if (dragOverColumnId !== columnId) {
+			dragOverColumnId = columnId;
+		}
+	}
+
+	function handleDragLeaveColumn(e: DragEvent, columnId: string) {
+		const related = e.relatedTarget;
+		const columnEl = e.currentTarget;
+		if (!(related instanceof Node) || !(columnEl instanceof Node) || !columnEl.contains(related)) {
+			if (dragOverColumnId === columnId) {
+				dragOverColumnId = null;
+			}
+		}
+	}
+
+	function handleCardDragOver(e: DragEvent, card: KanbanCard) {
+		if (!draggingCard) return;
+		e.preventDefault();
+		dragOverCardId = cardIdentifier(card);
+	}
+
+	function handleCardDragLeave(card: KanbanCard) {
+		if (dragOverCardId === cardIdentifier(card)) {
+			dragOverCardId = null;
+		}
+	}
+
+	function handleDrop(e: DragEvent, targetColumnId: string) {
+		e.preventDefault();
+		if (!draggingCard) return;
+
+		const cardToMove = draggingCard;
+		const fromColumnId = cardToMove.columnId;
+		const cardId = cardIdentifier(cardToMove);
+
+		handleDragEnd();
+
+		if (fromColumnId !== targetColumnId) {
+			onCardMove?.({
+				cardId,
+				fromColumnId,
+				toColumnId: targetColumnId
+			});
+		}
+	}
+
+	function handleSelectMove(card: KanbanCard, targetColumnId: string) {
+		if (!targetColumnId || targetColumnId === card.columnId) return;
+		onCardMove?.({
+			cardId: cardIdentifier(card),
+			fromColumnId: card.columnId,
+			toColumnId: targetColumnId
+		});
+	}
+
+	function openComposer(columnId: string) {
+		activeComposerColumnId = columnId;
+		composerTitle = '';
+		openColumnMenuId = null;
+	}
+
+	function closeComposer() {
+		activeComposerColumnId = null;
+		composerTitle = '';
+	}
+
+	function submitComposer(columnId: string) {
+		const title = composerTitle.trim();
+		if (!title) return;
+		if (onInlineAddCard) {
+			onInlineAddCard({ columnId, title });
+			composerTitle = '';
+		} else if (onAddCard) {
+			onAddCard(columnId);
+			closeComposer();
+		}
+	}
+
+	function handleComposerKeyDown(e: KeyboardEvent, columnId: string) {
+		if (e.key === 'Enter' && !e.shiftKey) {
+			e.preventDefault();
+			submitComposer(columnId);
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			closeComposer();
+		}
+	}
+</script>
+
+<div class={`forge-kanban-root ${className}`}>
+	<!-- Mobile column tabs -->
+	<div class="forge-kanban__mobile-tabs" role="tablist" aria-label="Kanban columns">
+		<button
+			type="button"
+			role="tab"
+			class="forge-kanban__tab"
+			class:forge-kanban__tab--active={activeMobileTab === 'all'}
+			aria-selected={activeMobileTab === 'all'}
+			onclick={() => (activeMobileTab = 'all')}
+		>
+			All <span class="forge-kanban__tab-badge">{cards.length}</span>
+		</button>
+		{#each columns as column (column.id)}
+			{@const count = grouped.get(column.id)?.length ?? 0}
+			<button
+				type="button"
+				role="tab"
+				class="forge-kanban__tab"
+				class:forge-kanban__tab--active={activeMobileTab === column.id}
+				aria-selected={activeMobileTab === column.id}
+				onclick={() => (activeMobileTab = column.id)}
+			>
+				<span
+					class="forge-kanban__tab-dot"
+					style:background-color={column.color ?? 'var(--muted-foreground)'}
+				></span>
+				{column.label}
+				<span class="forge-kanban__tab-badge">{count}</span>
+			</button>
+		{/each}
+	</div>
+
+	<!-- Kanban board columns -->
+	<div class="forge-kanban" class:forge-kanban--dragging={draggingCard !== null}>
+		{#each columns as column (column.id)}
+			{@const colCards = grouped.get(column.id) ?? []}
+			{@const isTarget = dragOverColumnId === column.id && draggingCard?.columnId !== column.id}
+			{@const isHiddenOnMobile = activeMobileTab !== 'all' && activeMobileTab !== column.id}
+			{@const isFinalCol = column.isFinal || column.id === 'done' || column.id === 'cancelled' || column.id === 'closed'}
+			{@const shouldCollapse = isFinalCol && hideCompleted}
+
+			<section
+				class="forge-kanban__column"
+				class:forge-kanban__column--target={isTarget}
+				class:forge-kanban__column--mobile-hidden={isHiddenOnMobile}
+				class:forge-kanban__column--collapsed={shouldCollapse}
+				ondragover={(e) => handleDragOverColumn(e, column.id)}
+				ondragleave={(e) => handleDragLeaveColumn(e, column.id)}
+				ondrop={(e) => handleDrop(e, column.id)}
+				aria-label={column.label}
+			>
+				<header class="forge-kanban__col-head">
+					<span
+						class="forge-kanban__col-dot"
+						style:background-color={column.color ?? 'var(--muted-foreground)'}
+					></span>
+					<span class="forge-kanban__col-label">{column.label}</span>
+					<span class="forge-kanban__col-count">{colCards.length}</span>
+
+					<div class="forge-kanban__col-actions">
+						{#if onAddCard || onInlineAddCard}
+							<button
+								type="button"
+								class="forge-kanban__col-add"
+								title={`Add card to ${column.label}`}
+								aria-label={`Add card to ${column.label}`}
+								onclick={() => openComposer(column.id)}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="forge-kanban__col-add-icon"
+								>
+									<line x1="12" y1="5" x2="12" y2="19"></line>
+									<line x1="5" y1="12" x2="19" y2="12"></line>
+								</svg>
+							</button>
+						{/if}
+
+						<div class="forge-kanban__menu-anchor">
+							<button
+								type="button"
+								class="forge-kanban__col-menu-btn"
+								title="List actions"
+								aria-label="List actions"
+								onclick={(e) => {
+									e.stopPropagation();
+									openColumnMenuId = openColumnMenuId === column.id ? null : column.id;
+								}}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="forge-kanban__col-menu-icon"
+								>
+									<circle cx="12" cy="12" r="1"></circle>
+									<circle cx="19" cy="12" r="1"></circle>
+									<circle cx="5" cy="12" r="1"></circle>
+								</svg>
+							</button>
+
+							{#if openColumnMenuId === column.id}
+								<div class="forge-kanban__col-menu" role="menu">
+									<div class="forge-kanban__col-menu-header">List actions</div>
+									<button
+										type="button"
+										class="forge-kanban__col-menu-item"
+										onclick={() => {
+											onSortColumn?.({ columnId: column.id, criteria: 'priority' });
+											openColumnMenuId = null;
+										}}
+									>
+										Sort by priority
+									</button>
+									<button
+										type="button"
+										class="forge-kanban__col-menu-item"
+										onclick={() => {
+											onSortColumn?.({ columnId: column.id, criteria: 'title' });
+											openColumnMenuId = null;
+										}}
+									>
+										Sort by title
+									</button>
+									<button
+										type="button"
+										class="forge-kanban__col-menu-item"
+										onclick={() => {
+											onSortColumn?.({ columnId: column.id, criteria: 'date' });
+											openColumnMenuId = null;
+										}}
+									>
+										Sort by newest
+									</button>
+									<div class="forge-kanban__col-menu-divider"></div>
+									{#if onArchiveColumnCards}
+										<button
+											type="button"
+											class="forge-kanban__col-menu-item forge-kanban__col-menu-item--archive"
+											onclick={() => {
+												onArchiveColumnCards?.(column.id);
+												openColumnMenuId = null;
+											}}
+										>
+											Archive all cards in list
+										</button>
+									{/if}
+								</div>
+							{/if}
+						</div>
+					</div>
+				</header>
+
+				<div class="forge-kanban__cards">
+					{#if shouldCollapse && colCards.length > 0}
+						<div class="forge-kanban__completed-summary">
+							<div class="forge-kanban__completed-icon">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+									<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+									<polyline points="22 4 12 14.01 9 11.01"></polyline>
+								</svg>
+							</div>
+							<span class="forge-kanban__completed-text">{colCards.length} completed {colCards.length === 1 ? 'card' : 'cards'} hidden</span>
+							{#if onToggleHideCompleted}
+								<button
+									type="button"
+									class="forge-kanban__completed-toggle-btn"
+									onclick={onToggleHideCompleted}
+								>
+									Show cards
+								</button>
+							{/if}
+						</div>
+					{:else}
+						{#each colCards as card (cardIdentifier(card))}
+							{@const isCardBeingDragged = draggingCard && cardIdentifier(draggingCard) === cardIdentifier(card)}
+							{@const isOverCard = dragOverCardId === cardIdentifier(card) && !isCardBeingDragged}
+
+							{#if isOverCard && isTarget}
+								<div class="forge-kanban__drop-placeholder" aria-hidden="true">
+									<span>Drop here</span>
+								</div>
+							{/if}
+
+							<div
+								class="forge-kanban__card-wrapper"
+								class:forge-kanban__card-wrapper--over={isOverCard}
+								role="listitem"
+								ondragover={(e) => handleCardDragOver(e, card)}
+								ondragleave={() => handleCardDragLeave(card)}
+							>
+								{#snippet cardInner()}
+									<div class="forge-kanban__card-header">
+										<span class="forge-kanban__card-title">{card.title}</span>
+										{#if card.priority}
+											<span
+												class="forge-kanban__priority-badge"
+												class:forge-kanban__priority-badge--urgent={card.priority === 'urgent'}
+												class:forge-kanban__priority-badge--high={card.priority === 'high'}
+												class:forge-kanban__priority-badge--medium={card.priority === 'medium'}
+												class:forge-kanban__priority-badge--low={card.priority === 'low'}
+											>
+												{card.priority}
+											</span>
+										{/if}
+									</div>
+
+									{#if card.description}
+										<p class="forge-kanban__card-desc">{card.description}</p>
+									{/if}
+
+									<div class="forge-kanban__card-meta">
+										{#if card.number > 0}
+											<span class="forge-kanban__card-number">#{card.number}</span>
+										{/if}
+										{#if card.repositoryName}
+											<span class="forge-kanban__card-repo">{card.repositoryName}</span>
+										{/if}
+										<span class="forge-kanban__card-spacer"></span>
+										{#if card.labels && card.labels.length > 0}
+											{#each card.labels as label (label.name)}
+												<LabelChip {label} />
+											{/each}
+										{/if}
+										{#if card.assignee}
+											<UserChip user={card.assignee} size="xs" />
+										{/if}
+									</div>
+								{/snippet}
+
+								<div
+									class="forge-kanban__card"
+									class:forge-kanban__card--dragging={isCardBeingDragged}
+									class:forge-kanban__card--urgent={card.priority === 'urgent'}
+									class:forge-kanban__card--high={card.priority === 'high'}
+									class:forge-kanban__card--medium={card.priority === 'medium'}
+									role="button"
+									tabindex="0"
+									aria-roledescription="draggable card"
+									draggable={draggable}
+									ondragstart={(e) => handleDragStart(e, card)}
+									ondragend={handleDragEnd}
+									onclick={() => handleCardClick(card)}
+									onkeydown={(e) => {
+										if (e.key === 'Enter' || e.key === ' ') {
+											e.preventDefault();
+											handleCardClick(card);
+										}
+									}}
+								>
+									{#if hrefFor}
+										<a class="forge-kanban__card-body" href={hrefFor(card)}>
+											{@render cardInner()}
+										</a>
+									{:else}
+										<div class="forge-kanban__card-body">
+											{@render cardInner()}
+										</div>
+									{/if}
+
+									<!-- Accessible & Mobile Quick-Move Action -->
+									{#if onCardMove}
+										<div class="forge-kanban__card-footer">
+											<label class="forge-kanban__move-label">
+												<span class="sr-only">Move {card.title} to status</span>
+												<select
+													class="forge-kanban__move-select"
+													value=""
+													onclick={(e) => e.stopPropagation()}
+													onchange={(e) => {
+														handleSelectMove(card, e.currentTarget.value);
+														e.currentTarget.value = '';
+													}}
+												>
+													<option value="" disabled>Move…</option>
+													{#each columns as col}
+														<option value={col.id} disabled={col.id === card.columnId}>
+															{col.label}
+														</option>
+													{/each}
+												</select>
+											</label>
+										</div>
+									{/if}
+								</div>
+							</div>
+						{/each}
+
+						{#if isTarget && colCards.length > 0 && !dragOverCardId}
+							<div class="forge-kanban__drop-placeholder" aria-hidden="true">
+								<span>Drop here</span>
+							</div>
+						{/if}
+
+						{#if colCards.length === 0}
+							{#if isTarget}
+								<div class="forge-kanban__drop-placeholder forge-kanban__drop-placeholder--empty" aria-hidden="true">
+									<span>Drop card here</span>
+								</div>
+							{:else}
+								<div class="forge-kanban__column-empty">
+									<span>No items</span>
+								</div>
+							{/if}
+						{/if}
+					{/if}
+				</div>
+
+				<!-- Inline "+ Add a card" Composer -->
+				{#if onInlineAddCard || onAddCard}
+					<footer class="forge-kanban__col-footer">
+						{#if activeComposerColumnId === column.id}
+							<div class="forge-kanban__composer">
+								<textarea
+									class="forge-kanban__composer-input"
+									placeholder="Enter a title for this card…"
+									bind:value={composerTitle}
+									rows="2"
+									autofocus
+									onkeydown={(e) => handleComposerKeyDown(e, column.id)}
+								></textarea>
+								<div class="forge-kanban__composer-actions">
+									<button
+										type="button"
+										class="forge-kanban__composer-submit"
+										disabled={!composerTitle.trim()}
+										onclick={() => submitComposer(column.id)}
+									>
+										Add card
+									</button>
+									<button
+										type="button"
+										class="forge-kanban__composer-cancel"
+										onclick={closeComposer}
+										title="Cancel (Esc)"
+										aria-label="Cancel adding card"
+									>
+										<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+											<line x1="18" y1="6" x2="6" y2="18"></line>
+											<line x1="6" y1="6" x2="18" y2="18"></line>
+										</svg>
+									</button>
+								</div>
+							</div>
+						{:else}
+							<button
+								type="button"
+								class="forge-kanban__add-card-btn"
+								onclick={() => openComposer(column.id)}
+							>
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5">
+									<line x1="12" y1="5" x2="12" y2="19"></line>
+									<line x1="5" y1="12" x2="19" y2="12"></line>
+								</svg>
+								Add a card
+							</button>
+						{/if}
+					</footer>
+				{/if}
+			</section>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.forge-kanban-root {
+		width: 100%;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	/* Mobile column selector tabs */
+	.forge-kanban__mobile-tabs {
+		display: none;
+		gap: 0.375rem;
+		overflow-x: auto;
+		padding-bottom: 0.25rem;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	@media (max-width: 768px) {
+		.forge-kanban__mobile-tabs {
+			display: flex;
+		}
+	}
+
+	.forge-kanban__tab {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--muted-foreground);
+		background: var(--muted, rgba(127, 127, 127, 0.08));
+		border: 1px solid var(--border, rgba(127, 127, 127, 0.2));
+		border-radius: 9999px;
+		white-space: nowrap;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.forge-kanban__tab:hover {
+		color: var(--foreground);
+		border-color: var(--foreground);
+	}
+
+	.forge-kanban__tab--active {
+		color: var(--primary-foreground, #fff);
+		background: var(--primary, #2563eb);
+		border-color: var(--primary, #2563eb);
+	}
+
+	.forge-kanban__tab-dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		flex-shrink: 0;
+	}
+
+	.forge-kanban__tab-badge {
+		font-size: 0.6875rem;
+		padding: 0.0625rem 0.375rem;
+		border-radius: 9999px;
+		background: rgba(0, 0, 0, 0.12);
+	}
+
+	.forge-kanban__tab--active .forge-kanban__tab-badge {
+		background: rgba(255, 255, 255, 0.25);
+	}
+
+	/* Kanban board container — strictly contains horizontal scroll */
+	.forge-kanban {
+		display: flex;
+		gap: 1rem;
+		overflow-x: auto;
+		padding-bottom: 0.75rem;
+		align-items: stretch;
+		width: 100%;
+		min-width: 0;
+		scroll-snap-type: x mandatory;
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: thin;
+		scrollbar-color: var(--border, rgba(127, 127, 127, 0.25)) transparent;
+	}
+
+	.forge-kanban::-webkit-scrollbar {
+		height: 8px;
+	}
+
+	.forge-kanban::-webkit-scrollbar-thumb {
+		background: var(--border, rgba(127, 127, 127, 0.25));
+		border-radius: 4px;
+	}
+
+	.forge-kanban__column {
+		flex: 1 1 18rem;
+		min-width: 17.5rem;
+		max-width: 24rem;
+		background: var(--muted, rgba(127, 127, 127, 0.06));
+		border: 1px solid var(--border, rgba(127, 127, 127, 0.15));
+		border-radius: 0.625rem;
+		display: flex;
+		flex-direction: column;
+		transition: border-color 0.15s ease, background 0.15s ease;
+		scroll-snap-align: start;
+		max-height: calc(100vh - 200px);
+	}
+
+	@media (max-width: 768px) {
+		.forge-kanban__column {
+			flex: 0 0 88vw;
+			min-width: 0;
+			max-width: none;
+		}
+
+		.forge-kanban__column--mobile-hidden {
+			display: none;
+		}
+	}
+
+	.forge-kanban__column--target {
+		border-color: var(--primary, #2563eb);
+		background: color-mix(in srgb, var(--primary, #2563eb) 8%, var(--muted, rgba(127, 127, 127, 0.06)));
+		outline: 2px dashed var(--primary, #2563eb);
+		outline-offset: -2px;
+	}
+
+	.forge-kanban__col-head {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		padding: 0.625rem 0.75rem;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		border-bottom: 1px solid var(--border, rgba(127, 127, 127, 0.15));
+		flex-shrink: 0;
+	}
+
+	.forge-kanban__col-dot {
+		width: 0.6rem;
+		height: 0.6rem;
+		border-radius: 9999px;
+		flex: 0 0 auto;
+	}
+
+	.forge-kanban__col-label {
+		flex: 1 1 auto;
+		color: var(--foreground);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.forge-kanban__col-count {
+		color: var(--muted-foreground);
+		font-weight: 500;
+		font-size: 0.75rem;
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+		background: rgba(127, 127, 127, 0.12);
+	}
+
+	.forge-kanban__col-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		margin-left: 0.25rem;
+	}
+
+	.forge-kanban__col-add {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 0.375rem;
+		border: 1px solid transparent;
+		background: transparent;
+		color: var(--muted-foreground);
+		cursor: pointer;
+		transition: all 0.12s ease;
+	}
+
+	.forge-kanban__col-add:hover {
+		color: var(--foreground);
+		background: rgba(127, 127, 127, 0.15);
+		border-color: var(--border, rgba(127, 127, 127, 0.2));
+	}
+
+	.forge-kanban__col-add-icon {
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+
+	.forge-kanban__menu-anchor {
+		position: relative;
+	}
+
+	.forge-kanban__col-menu-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 0.375rem;
+		border: 1px solid transparent;
+		background: transparent;
+		color: var(--muted-foreground);
+		cursor: pointer;
+		transition: all 0.12s ease;
+	}
+
+	.forge-kanban__col-menu-btn:hover {
+		color: var(--foreground);
+		background: rgba(127, 127, 127, 0.15);
+		border-color: var(--border, rgba(127, 127, 127, 0.2));
+	}
+
+	.forge-kanban__col-menu-icon {
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+
+	.forge-kanban__col-menu {
+		position: absolute;
+		top: calc(100% + 4px);
+		right: 0;
+		z-index: 50;
+		min-width: 13rem;
+		background: var(--card, #fff);
+		border: 1px solid var(--border, rgba(127, 127, 127, 0.2));
+		border-radius: 0.5rem;
+		padding: 0.375rem;
+		box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	.forge-kanban__col-menu-header {
+		font-size: 0.6875rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--muted-foreground);
+		padding: 0.25rem 0.5rem;
+	}
+
+	.forge-kanban__col-menu-item {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		padding: 0.375rem 0.5rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--foreground);
+		background: transparent;
+		border: none;
+		border-radius: 0.25rem;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.12s ease;
+	}
+
+	.forge-kanban__col-menu-item:hover {
+		background: var(--muted, rgba(127, 127, 127, 0.12));
+	}
+
+	.forge-kanban__col-menu-item--archive {
+		color: #ef4444;
+	}
+
+	.forge-kanban__col-menu-item--archive:hover {
+		background: rgba(239, 68, 68, 0.1);
+	}
+
+	.forge-kanban__col-menu-divider {
+		height: 1px;
+		background: var(--border, rgba(127, 127, 127, 0.15));
+		margin: 0.25rem 0;
+	}
+
+	/* Card list with internal vertical scroll */
+	.forge-kanban__cards {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding: 0.625rem;
+		overflow-y: auto;
+		flex: 1 1 auto;
+		min-height: 6rem;
+		scrollbar-width: thin;
+		scrollbar-color: var(--border, rgba(127, 127, 127, 0.2)) transparent;
+	}
+
+	.forge-kanban__cards::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	.forge-kanban__cards::-webkit-scrollbar-thumb {
+		background: var(--border, rgba(127, 127, 127, 0.2));
+		border-radius: 3px;
+	}
+
+	.forge-kanban__card-wrapper {
+		transition: transform 0.12s ease;
+	}
+
+	.forge-kanban__card-wrapper--over {
+		border-top: 2px solid var(--primary, #2563eb);
+		padding-top: 0.25rem;
+	}
+
+	.forge-kanban__drop-placeholder {
+		min-height: 3.5rem;
+		border: 2px dashed var(--primary, #2563eb);
+		border-radius: 0.5rem;
+		background: color-mix(in srgb, var(--primary, #2563eb) 8%, transparent);
+		margin: 0.25rem 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.75rem;
+		color: var(--primary, #2563eb);
+		font-weight: 500;
+	}
+
+	.forge-kanban__drop-placeholder--empty {
+		min-height: 5rem;
+	}
+
+	.forge-kanban__card {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		text-align: left;
+		background: var(--card, var(--background, #fff));
+		border: 1px solid var(--border, rgba(127, 127, 127, 0.2));
+		border-radius: 0.5rem;
+		cursor: grab;
+		color: inherit;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+		transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
+		user-select: none;
+		outline: none;
+	}
+
+	.forge-kanban__card:focus-visible {
+		border-color: var(--primary, #2563eb);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #2563eb) 35%, transparent);
+	}
+
+	.forge-kanban__card:active {
+		cursor: grabbing;
+	}
+
+	.forge-kanban__card:hover {
+		border-color: var(--primary, #2563eb);
+		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
+	}
+
+	.forge-kanban__card--dragging {
+		opacity: 0.45;
+		border-style: dashed;
+		border-color: var(--primary, #2563eb);
+		transform: rotate(1.5deg) scale(1.02);
+		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+	}
+
+	.forge-kanban__card--urgent {
+		border-left: 3px solid #ef4444;
+	}
+
+	.forge-kanban__card--high {
+		border-left: 3px solid #f59e0b;
+	}
+
+	.forge-kanban__card--medium {
+		border-left: 3px solid #3b82f6;
+	}
+
+	.forge-kanban__card--low {
+		border-left: 3px solid #94a3b8;
+	}
+
+	.forge-kanban__card-body {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+		padding: 0.625rem 0.75rem;
+		width: 100%;
+		text-align: left;
+		background: transparent;
+		border: none;
+		color: inherit;
+		font: inherit;
+		text-decoration: none;
+		cursor: inherit;
+	}
+
+	.forge-kanban__card-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 0.5rem;
+	}
+
+	.forge-kanban__card-title {
+		font-size: 0.84rem;
+		font-weight: 600;
+		line-height: 1.3;
+		color: var(--foreground);
+		overflow-wrap: anywhere;
+	}
+
+	.forge-kanban__priority-badge {
+		font-size: 0.65rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.025em;
+		padding: 0.0625rem 0.35rem;
+		border-radius: 0.25rem;
+		background: var(--muted, rgba(127, 127, 127, 0.15));
+		color: var(--muted-foreground);
+		flex-shrink: 0;
+	}
+
+	.forge-kanban__priority-badge--urgent {
+		background: color-mix(in srgb, #ef4444 15%, transparent);
+		color: #ef4444;
+	}
+
+	.forge-kanban__priority-badge--high {
+		background: color-mix(in srgb, #f59e0b 15%, transparent);
+		color: #f59e0b;
+	}
+
+	.forge-kanban__priority-badge--medium {
+		background: color-mix(in srgb, #3b82f6 15%, transparent);
+		color: #3b82f6;
+	}
+
+	.forge-kanban__priority-badge--low {
+		background: color-mix(in srgb, #94a3b8 15%, transparent);
+		color: #94a3b8;
+	}
+
+	.forge-kanban__card-desc {
+		font-size: 0.75rem;
+		color: var(--muted-foreground);
+		line-height: 1.35;
+		margin: 0;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	.forge-kanban__card-meta {
+		display: flex;
+		align-items: center;
+		gap: 0.35rem;
+		flex-wrap: wrap;
+		padding-top: 0.125rem;
+	}
+
+	.forge-kanban__card-number {
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: var(--muted-foreground);
+	}
+
+	.forge-kanban__card-repo {
+		font-size: 0.6875rem;
+		color: var(--muted-foreground);
+		background: rgba(127, 127, 127, 0.08);
+		padding: 0.0625rem 0.3125rem;
+		border-radius: 0.25rem;
+	}
+
+	.forge-kanban__card-spacer {
+		flex: 1 1 auto;
+	}
+
+	.forge-kanban__card-footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: 0.25rem 0.625rem 0.375rem;
+		border-top: 1px solid var(--border, rgba(127, 127, 127, 0.08));
+	}
+
+	.forge-kanban__move-label {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.forge-kanban__move-select {
+		appearance: none;
+		-webkit-appearance: none;
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: 0.25rem;
+		font-size: 0.6875rem;
+		color: var(--muted-foreground);
+		padding: 0.125rem 0.375rem;
+		cursor: pointer;
+		transition: all 0.12s ease;
+	}
+
+	.forge-kanban__move-select:hover,
+	.forge-kanban__move-select:focus {
+		color: var(--foreground);
+		background: rgba(127, 127, 127, 0.1);
+		border-color: var(--border, rgba(127, 127, 127, 0.2));
+		outline: none;
+	}
+
+	.forge-kanban__column-empty {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 4rem;
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		border: 1px dashed var(--border, rgba(127, 127, 127, 0.2));
+		border-radius: 0.375rem;
+		background: rgba(127, 127, 127, 0.03);
+	}
+
+	/* Completed summary card */
+	.forge-kanban__completed-summary {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 1.5rem 1rem;
+		border-radius: 0.5rem;
+		background: rgba(16, 185, 129, 0.06);
+		border: 1px dashed rgba(16, 185, 129, 0.25);
+		text-align: center;
+	}
+
+	.forge-kanban__completed-icon {
+		width: 2rem;
+		height: 2rem;
+		border-radius: 9999px;
+		background: rgba(16, 185, 129, 0.15);
+		color: #10b981;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.forge-kanban__completed-text {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--muted-foreground);
+	}
+
+	.forge-kanban__completed-toggle-btn {
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: #10b981;
+		background: transparent;
+		border: 1px solid rgba(16, 185, 129, 0.3);
+		border-radius: 0.375rem;
+		padding: 0.25rem 0.625rem;
+		cursor: pointer;
+		transition: all 0.15s ease;
+	}
+
+	.forge-kanban__completed-toggle-btn:hover {
+		background: rgba(16, 185, 129, 0.12);
+	}
+
+	/* Inline Composer */
+	.forge-kanban__col-footer {
+		padding: 0.375rem 0.5rem 0.5rem;
+		border-top: 1px solid var(--border, rgba(127, 127, 127, 0.1));
+		flex-shrink: 0;
+	}
+
+	.forge-kanban__add-card-btn {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		width: 100%;
+		padding: 0.4rem 0.625rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--muted-foreground);
+		background: transparent;
+		border: none;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: all 0.12s ease;
+		text-align: left;
+	}
+
+	.forge-kanban__add-card-btn:hover {
+		color: var(--foreground);
+		background: rgba(127, 127, 127, 0.1);
+	}
+
+	.forge-kanban__composer {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+		padding: 0.5rem;
+		background: var(--card, #fff);
+		border: 1px solid var(--primary, #2563eb);
+		border-radius: 0.5rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+	}
+
+	.forge-kanban__composer-input {
+		width: 100%;
+		border: none;
+		outline: none;
+		background: transparent;
+		font-size: 0.8125rem;
+		color: var(--foreground);
+		resize: none;
+		line-height: 1.35;
+		font-family: inherit;
+	}
+
+	.forge-kanban__composer-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	.forge-kanban__composer-submit {
+		background: var(--primary, #2563eb);
+		color: #fff;
+		border: none;
+		border-radius: 0.25rem;
+		padding: 0.25rem 0.625rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		cursor: pointer;
+		transition: opacity 0.12s ease;
+	}
+
+	.forge-kanban__composer-submit:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.forge-kanban__composer-cancel {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		background: transparent;
+		border: none;
+		border-radius: 0.25rem;
+		color: var(--muted-foreground);
+		cursor: pointer;
+		transition: all 0.12s ease;
+	}
+
+	.forge-kanban__composer-cancel:hover {
+		color: var(--foreground);
+		background: rgba(127, 127, 127, 0.15);
+	}
+</style>