feat(shared-ui, todo): add cross-type drag & drop system with tag enrichment

Implement a two-layer DnD system in @manacore/shared-ui/dnd that coexists with svelte-dnd-action (same-type reordering): - Layer 1 (Pointer Events): dragSource + dropTarget actions for cross-type drags (e.g. Tag → Task). Mobile-first with long-press (300ms) and haptic feedback. - Layer 2 (Passive Overlay): passiveDropZone action detects when svelte-dnd-action drags hover over external targets (e.g. Task → Tag pill, Task → Trash zone). - DragPreview: floating pill that follows the finger/cursor during Layer 1 drags. - ActionZone: auto-appearing drop zones (trash, archive) during any drag. Integrate into Todo app: - TagStrip pills: draggable (dragSource) + accept tasks (passiveDropZone) - TaskList items: accept tags (dropTarget) + register drags for passive layer - ViewColumn + FokusLayout: register svelte-dnd-action drags for passive layer - Layout: DragPreview + ActionZone (trash) added, tasks enriched with resolved label objects from shared tags so tag badges actually render on TaskItem. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-05-15 06:41:08 +02:00 · 2026-04-01 21:00:25 +02:00 · 2026-04-01 21:00:25 +02:00 · 8409f8a8a2
commit 8409f8a8a2
parent 6dc259d743
16 changed files with 1343 additions and 297 deletions
--- a/apps/todo/apps/web/src/lib/components/TagStrip.svelte
+++ b/apps/todo/apps/web/src/lib/components/TagStrip.svelte
@ -5,6 +5,16 @@
 	import { DotsThree, Plus, X } from '@manacore/shared-icons';
 	import TagStripModal from './TagStripModal.svelte';
 	import { t } from 'svelte-i18n';
+	import { dragSource, passiveDropZone } from '@manacore/shared-ui/dnd';
+	import type { DragPayload, TaskDragData } from '@manacore/shared-ui/dnd';
+	import { tasksStore } from '$lib/stores/tasks.svelte';
+	import { taskCollection, type LocalTask } from '$lib/data/local-store';
+
+	interface Props {
+		bottomOffset?: string;
+	}
+
+	let { bottomOffset = '72px' }: Props = $props();

 	const tagsCtx: { readonly value: Tag[] } = getContext('tags');
 	const activeTagFilter: { readonly ids: string[]; set(ids: string[]): void } =
@ -12,6 +22,17 @@

 	let showModal = $state(false);

+	// ── DnD: assign tag when task is dropped on tag pill ────
+	async function handleTaskDropOnTag(tagId: string, payload: DragPayload) {
+		const taskData = payload.data as TaskDragData;
+		const task = await taskCollection.get(taskData.id);
+		if (!task) return;
+		const currentLabels: string[] = (task.metadata as { labelIds?: string[] })?.labelIds ?? [];
+		if (!currentLabels.includes(tagId)) {
+			tasksStore.updateLabels(taskData.id, [...currentLabels, tagId]);
+		}
+	}
+
 	function handleTagClick(tagId: string) {
 		const current = activeTagFilter.ids;
 		if (current.includes(tagId)) {
@ -42,7 +63,7 @@
 	const hasTags = $derived(tagsCtx.value.length > 0);
 </script>

-<div class="tag-strip-wrapper">
+<div class="tag-strip-wrapper" style="--tag-strip-bottom: {bottomOffset}">
 	<div class="tag-strip-container">
 		<!-- Clear Filter Button (always rendered to prevent layout shift) -->
 		<button
@ -75,6 +96,15 @@
 					onclick={() => handleTagClick(tag.id)}
 					title={tag.name}
 					style="--tag-color: {tag.color || '#8b5cf6'}"
+					use:dragSource={{
+						type: 'tag',
+						data: () => ({ id: tag.id, name: tag.name, color: tag.color || '#8b5cf6' }),
+					}}
+					use:passiveDropZone={{
+						accepts: ['task'],
+						onDrop: (payload) => handleTaskDropOnTag(tag.id, payload),
+						highlightClass: 'tag-drop-highlight',
+					}}
 				>
 					<span class="tag-dot"></span>
 					<span class="tag-name">{tag.name}</span>
@ -100,7 +130,7 @@
 <style>
 	.tag-strip-wrapper {
 		position: fixed;
-		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
+		bottom: calc(var(--tag-strip-bottom, 72px) + env(safe-area-inset-bottom, 0px));
 		left: 0;
 		right: 0;
 		z-index: 49;
@ -272,6 +302,45 @@
 		font-weight: 500;
 	}

+	/* DnD: Tag is being dragged */
+	:global(.tag-pill.mana-drag-source-active) {
+		opacity: 0.5;
+		transform: scale(0.95) !important;
+	}
+
+	/* DnD: Task hovering over tag pill */
+	.tag-drop-highlight {
+		transform: scale(1.15) !important;
+		background: var(--tag-color) !important;
+		border-color: var(--tag-color) !important;
+		box-shadow: 0 0 16px color-mix(in srgb, var(--tag-color) 40%, transparent) !important;
+	}
+
+	.tag-drop-highlight .tag-dot {
+		background-color: white !important;
+	}
+
+	.tag-drop-highlight .tag-name {
+		color: white !important;
+	}
+
+	/* DnD: Success flash after drop */
+	:global(.tag-pill.mana-passive-zone-success) {
+		animation: tag-drop-success 400ms ease-out;
+	}
+
+	@keyframes tag-drop-success {
+		0% {
+			transform: scale(1.2);
+		}
+		50% {
+			transform: scale(0.95);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
 	/* Responsive */
 	@media (max-width: 640px) {
 		.tag-strip-wrapper {
--- a/apps/todo/apps/web/src/lib/components/TaskList.svelte
+++ b/apps/todo/apps/web/src/lib/components/TaskList.svelte
@ -16,6 +16,12 @@
 		Trash,
 	} from '@manacore/shared-icons';
 	import { TodoEvents } from '@manacore/shared-utils/analytics';
+	import {
+		dropTarget,
+		registerSvelteActionDrag,
+		clearSvelteActionDrag,
+	} from '@manacore/shared-ui/dnd';
+	import type { DragPayload, TagDragData } from '@manacore/shared-ui/dnd';

 	// Context menu state
 	let contextMenuVisible = $state(false);
@ -188,8 +194,13 @@

 	const flipDurationMs = 200;

-	function handleDndConsider(e: CustomEvent<{ items: Task[] }>) {
+	function handleDndConsider(e: CustomEvent<{ items: Task[]; info: { id: string } }>) {
 		items = e.detail.items;
+		// Inform passive drop zones that a task is being dragged
+		registerSvelteActionDrag({
+			type: 'task',
+			data: { id: e.detail.info.id, title: '' },
+		});
 	}

 	function handleDndFinalize(e: CustomEvent<{ items: Task[]; info: { id: string } }>) {
@ -223,6 +234,9 @@
 		setTimeout(() => {
 			dropInProgress = false;
 		}, 1000);
+
+		// Clear passive drop zone state
+		clearSvelteActionDrag();
 	}

 	async function handleToggleComplete(task: Task) {
@ -236,6 +250,23 @@
 	async function handleDelete(taskId: string) {
 		await tasksStore.deleteTask(taskId);
 	}
+
+	// ── DnD Layer 1: handle tag dropped onto a task ─────────
+	function handleTagDrop(task: Task, payload: DragPayload) {
+		const tagData = payload.data as TagDragData;
+		const currentLabels: string[] = (task.metadata as { labelIds?: string[] })?.labelIds ?? [];
+		if (!currentLabels.includes(tagData.id)) {
+			tasksStore.updateLabels(task.id, [...currentLabels, tagData.id]);
+		}
+	}
+
+	function tagNotAlreadyOnTask(task: Task) {
+		return (payload: DragPayload) => {
+			const tagData = payload.data as TagDragData;
+			const currentLabels: string[] = (task.metadata as { labelIds?: string[] })?.labelIds ?? [];
+			return !currentLabels.includes(tagData.id);
+		};
+	}
 </script>

 {#if enableDragDrop}
@ -257,7 +288,14 @@
 				<div class="dnd-shadow-placeholder"></div>
 			{:else}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div oncontextmenu={(e) => handleContextMenu(e, task)}>
+				<div
+					oncontextmenu={(e) => handleContextMenu(e, task)}
+					use:dropTarget={{
+						accepts: ['tag'],
+						onDrop: (payload) => handleTagDrop(task, payload),
+						canDrop: tagNotAlreadyOnTask(task),
+					}}
+				>
 					<TaskItem
 						{task}
 						{showCompleted}
@ -282,7 +320,14 @@
 	<div class="task-list">
 		{#each tasks as task (task.id)}
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div oncontextmenu={(e) => handleContextMenu(e, task)}>
+			<div
+				oncontextmenu={(e) => handleContextMenu(e, task)}
+				use:dropTarget={{
+					accepts: ['tag'],
+					onDrop: (payload) => handleTagDrop(task, payload),
+					canDrop: tagNotAlreadyOnTask(task),
+				}}
+			>
 				<TaskItem
 					{task}
 					{showCompleted}
@ -368,4 +413,33 @@
 		background: rgba(139, 92, 246, 0.1);
 		border-color: rgba(139, 92, 246, 0.4);
 	}
+
+	/* Tag-on-Task drop target hover */
+	:global(.mana-drop-target-hover) {
+		outline: 2px solid var(--color-primary, #8b5cf6);
+		outline-offset: -2px;
+		border-radius: 0.375rem;
+		background: rgba(139, 92, 246, 0.06);
+		transition: all 0.15s ease;
+	}
+
+	:global(.dark .mana-drop-target-hover) {
+		background: rgba(139, 92, 246, 0.12);
+	}
+
+	/* Brief success pulse after tag assigned */
+	:global(.mana-drop-target-success) {
+		animation: drop-success-pulse 400ms ease-out;
+	}
+
+	@keyframes drop-success-pulse {
+		0% {
+			outline-color: #10b981;
+			background: rgba(16, 185, 129, 0.1);
+		}
+		100% {
+			outline-color: transparent;
+			background: transparent;
+		}
+	}
 </style>
--- a/apps/todo/apps/web/src/lib/components/board-views/FokusLayout.svelte
+++ b/apps/todo/apps/web/src/lib/components/board-views/FokusLayout.svelte
@ -10,6 +10,7 @@
 	import { tasksStore } from '$lib/stores/tasks.svelte';
 	import { todoSettings } from '$lib/stores/settings.svelte';
 	import { X, DotsSixVertical } from '@manacore/shared-icons';
+	import { registerSvelteActionDrag, clearSvelteActionDrag } from '@manacore/shared-ui/dnd';

 	interface Props {
 		columns: GroupedColumn[];
@ -89,6 +90,10 @@

 	function handleDndConsider(columnId: string, e: CustomEvent<DndEvent<Task>>) {
 		localTasksByColumn = { ...localTasksByColumn, [columnId]: e.detail.items };
+		registerSvelteActionDrag({
+			type: 'task',
+			data: { id: e.detail.info.id, title: '' },
+		});
 	}

 	function handleDndFinalize(
@ -107,6 +112,7 @@
 		}

 		localTasksByColumn = { ...localTasksByColumn, [columnId]: newItems };
+		clearSvelteActionDrag();
 	}

 	function handleAddTask(column: GroupedColumn, title: string) {
--- a/apps/todo/apps/web/src/lib/components/board-views/ViewColumn.svelte
+++ b/apps/todo/apps/web/src/lib/components/board-views/ViewColumn.svelte
@ -6,6 +6,7 @@
 	import QuickAddTaskInline from '../kanban/QuickAddTaskInline.svelte';
 	import ViewColumnHeader from './ViewColumnHeader.svelte';
 	import { tasksStore } from '$lib/stores/tasks.svelte';
+	import { registerSvelteActionDrag, clearSvelteActionDrag } from '@manacore/shared-ui/dnd';

 	interface Props {
 		column: GroupedColumn;
@ -47,6 +48,10 @@

 	function handleDndConsider(e: CustomEvent<DndEvent<Task>>) {
 		localTasks = e.detail.items;
+		registerSvelteActionDrag({
+			type: 'task',
+			data: { id: e.detail.info.id, title: '' },
+		});
 	}

 	function handleDndFinalize(e: CustomEvent<DndEvent<Task>>) {
@ -66,6 +71,7 @@
 		}

 		localTasks = newItems;
+		clearSvelteActionDrag();
 	}

 	function handleToggleComplete(task: Task) {
--- a/apps/todo/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
@ -35,6 +35,7 @@
 	import { linkLocalStore, linkMutations } from '@manacore/shared-links';
 	import { theme } from '$lib/stores/theme';
 	import TagStrip from '$lib/components/TagStrip.svelte';
+	import { DragPreview, ActionZone } from '@manacore/shared-ui/dnd';
 	import {
 		THEME_DEFINITIONS,
 		DEFAULT_THEME_VARIANTS,
@ -59,13 +60,34 @@
 	import type { LocalBoardView } from '$lib/data/local-store';
 	import { useAllTasks, useAllBoardViews } from '$lib/data/task-queries';
 	import SyncIndicator from '$lib/components/SyncIndicator.svelte';
-	import { List, X } from '@manacore/shared-icons';
 	import { createMinimizedPagesContext } from '$lib/stores/minimized-pages.svelte';

 	// Live queries — auto-update when IndexedDB changes (local writes, sync, other tabs)
-	const allTasks = useAllTasks();
+	const rawTasks = useAllTasks();
 	const allTags = useAllSharedTags();

+	// ─── Enrich tasks with resolved labels from shared tags ──
+	const allTasks = {
+		get value() {
+			const tagMap = new Map(allTags.value.map((t) => [t.id, t]));
+			return rawTasks.value.map((task) => {
+				const labelIds: string[] = (task.metadata as { labelIds?: string[] })?.labelIds ?? [];
+				if (labelIds.length === 0) return task;
+				const labels = labelIds
+					.map((id) => tagMap.get(id))
+					.filter((t): t is NonNullable<typeof t> => t != null)
+					.map((t) => ({
+						id: t.id,
+						userId: t.userId,
+						name: t.name,
+						color: t.color,
+						createdAt: t.createdAt,
+					}));
+				return { ...task, labels };
+			});
+		},
+	};
+
 	// ─── Board View Management ──────────────────────────────
 	const boardViews = useAllBoardViews();

@ -83,10 +105,14 @@
 		},
 	};

+	// Minimized pages context (layout owns state, page syncs via context)
+	const minimizedPages = createMinimizedPagesContext();
+
 	// Provide data to child components via Svelte context
 	setContext('tasks', allTasks);
 	setContext('tags', allTags);
 	setContext('activeTagFilter', activeTagFilter);
+	setContext('minimizedPages', minimizedPages);
 	setContext('activeView', {
 		get value() {
 			return activeView;
@ -174,15 +200,12 @@
 		}
 	}

-	// PillNav collapsed state (controlled by FAB)
-	let isPillNavCollapsed = $state(true);
-
 	// FilterStrip visibility (toggle via Filter button in PillNav)
 	let isFilterStripVisible = $derived(!todoSettings.filterStripCollapsed);

-	// Minimized page tabs add extra height to the bottom bar stack
-	let hasMinimizedTabs = $derived(minimizedPagesStore.hasPages);
-	const MINIMIZED_TABS_HEIGHT = 36; // px
+	// BottomStack computes these offsets automatically
+	let pillNavOffset = $state('0px');
+	let tagStripOffset = $state('72px');

 	// Use theme store's isDark directly
 	let isDark = $derived(theme.isDark);
@ -291,16 +314,6 @@
 		}
 	}

-	// Toggle PillNav visibility (called by FAB)
-	function handlePillNavToggle() {
-		isPillNavCollapsed = !isPillNavCollapsed;
-		try {
-			localStorage?.setItem('todo-pillnav-collapsed', String(isPillNavCollapsed));
-		} catch {
-			// localStorage not available or quota exceeded
-		}
-	}
-
 	function handleToggleTheme() {
 		theme.toggleMode();
 	}
@ -375,16 +388,6 @@
 		if ($page.url.pathname === '/' && userSettings.startPage && userSettings.startPage !== '/') {
 			goto(userSettings.startPage, { replaceState: true });
 		}
-
-		// Initialize PillNav collapsed state from localStorage
-		try {
-			const savedPillNavCollapsed = localStorage?.getItem('todo-pillnav-collapsed');
-			if (savedPillNavCollapsed === 'false') {
-				isPillNavCollapsed = false;
-			}
-		} catch {
-			// localStorage not available
-		}
 	}
 </script>

@ -410,96 +413,23 @@

 			<!-- UI Elements (hidden in immersive mode) -->
 			{#if !todoSettings.immersiveModeEnabled}
-				<!-- PillNav (shown/hidden via FAB) -->
-				{#if !isPillNavCollapsed}
-					<PillNavigation
-						items={navItems}
-						currentPath={$page.url.pathname}
-						appName="Todo"
-						homeRoute="/"
-						onToggleTheme={handleToggleTheme}
-						{isDark}
-						showThemeToggle={true}
-						showThemeVariants={true}
-						{themeVariantItems}
-						{currentThemeVariantLabel}
-						themeMode={theme.mode}
-						onThemeModeChange={handleThemeModeChange}
-						showLanguageSwitcher={true}
-						{languageItems}
-						{currentLanguageLabel}
-						showLogout={authStore.isAuthenticated}
-						onLogout={handleLogout}
-						loginHref="/login"
-						primaryColor="#8b5cf6"
-						showAppSwitcher={true}
-						{appItems}
-						{userEmail}
-						settingsHref="/settings"
-						manaHref="/mana"
-						profileHref="/profile"
-						allAppsHref="/apps"
-						themesHref="/themes"
-						spiralHref="/spiral"
-						helpHref="/help"
-						onOpenInPanel={handleOpenInPanel}
-						ariaLabel="Hauptnavigation"
-						{spotlightActions}
+				<!-- BottomStack: computes offsets for the entire bottom bar stack -->
+				<BottomStack
+					pillNavVisible={true}
+					tagStripVisible={isFilterStripVisible}
+					bind:pillNavOffset
+					bind:tagStripOffset
+				>
+					<MinimizedTabs
+						pages={minimizedPages.pages}
+						onRestore={(id) => minimizedPages.restore(id)}
+						onRemove={(id) => minimizedPages.remove(id)}
+						onMaximize={(id) => minimizedPages.maximize(id)}
+						onAdd={() => minimizedPages.togglePicker()}
 					/>
+				</BottomStack>

-					<!-- Tag strip (toggled via Tags pill) -->
-					{#if isFilterStripVisible}
-						<TagStrip />
-					{/if}
-				{/if}
-
-				<!-- Minimized Page Tabs (between PillNav and QuickInputBar) -->
-				{#if hasMinimizedTabs}
-					<div
-						class="minimized-tabs-bar"
-						style="--tabs-bottom: {(() => {
-							let offset = 16;
-							if (!isPillNavCollapsed) offset += 68;
-							if (!isPillNavCollapsed && isFilterStripVisible) offset += 50;
-							return `${offset}px`;
-						})()}"
-					>
-						<div class="minimized-tabs-inner">
-							{#each minimizedPagesStore.pages as pg (pg.id)}
-								<div
-									class="minimized-tab"
-									role="button"
-									tabindex="0"
-									onclick={() => {
-										window.dispatchEvent(new CustomEvent('restore-page', { detail: pg.id }));
-									}}
-								>
-									<span class="minimized-tab-dot" style="background-color: {pg.color}"></span>
-									<span class="minimized-tab-title">{pg.title}</span>
-									<button
-										class="minimized-tab-close"
-										onclick={(e) => {
-											e.stopPropagation();
-											window.dispatchEvent(new CustomEvent('remove-page', { detail: pg.id }));
-										}}
-										title="Schließen"
-									>
-										<X size={10} />
-									</button>
-								</div>
-							{/each}
-							<button
-								class="minimized-tab-add"
-								onclick={() => window.dispatchEvent(new CustomEvent('toggle-page-picker'))}
-								title="Neue Seite hinzufügen"
-							>
-								<Plus size={14} />
-							</button>
-						</div>
-					</div>
-				{/if}
-
-				<!-- Global Quick Input Bar -->
+				<!-- 1. QuickInputBar (always at bottom) -->
 				{#if $page.url.pathname === '/'}
 					<QuickInputBar
 						onSearch={handleSearch}
@ -514,40 +444,60 @@
 						deferSearch={true}
 						locale={$locale || 'de'}
 						appIcon="todo"
-						hasFabRight={true}
-						bottomOffset={(() => {
-							let offset = 16;
-							if (!isPillNavCollapsed) offset += 68;
-							if (!isPillNavCollapsed && isFilterStripVisible) offset += 50;
-							if (hasMinimizedTabs) offset += MINIMIZED_TABS_HEIGHT;
-							return `${offset}px`;
-						})()}
+						bottomOffset="16px"
 					/>
 				{/if}

-				<!-- FAB to toggle PillNav visibility -->
-				<button
-					class="pillnav-fab"
-					style="--fab-bottom: {(() => {
-						let offset = 20;
-						if (!isPillNavCollapsed) offset += 68;
-						if (!isPillNavCollapsed && isFilterStripVisible) offset += 50;
-						if (hasMinimizedTabs) offset += MINIMIZED_TABS_HEIGHT;
-						return `${offset}px`;
-					})()}"
-					onclick={handlePillNavToggle}
-					title={isPillNavCollapsed ? 'Navigation anzeigen' : 'Navigation ausblenden'}
-					aria-label={isPillNavCollapsed ? 'Navigation anzeigen' : 'Navigation ausblenden'}
-					data-umami-event="pillnav-toggle"
-				>
-					{#if isPillNavCollapsed}
-						<!-- Menu icon -->
-						<List size="48" weight="bold" />
-					{:else}
-						<!-- Close icon -->
-						<X size="48" weight="bold" />
-					{/if}
-				</button>
+				<!-- 2. PillNav (above InputBar, always visible) -->
+				<PillNavigation
+					items={navItems}
+					currentPath={$page.url.pathname}
+					appName="Todo"
+					homeRoute="/"
+					onToggleTheme={handleToggleTheme}
+					{isDark}
+					showThemeToggle={true}
+					showThemeVariants={true}
+					{themeVariantItems}
+					{currentThemeVariantLabel}
+					themeMode={theme.mode}
+					onThemeModeChange={handleThemeModeChange}
+					showLanguageSwitcher={true}
+					{languageItems}
+					{currentLanguageLabel}
+					showLogout={authStore.isAuthenticated}
+					onLogout={handleLogout}
+					loginHref="/login"
+					primaryColor="#8b5cf6"
+					showAppSwitcher={true}
+					{appItems}
+					{userEmail}
+					settingsHref="/settings"
+					manaHref="/mana"
+					profileHref="/profile"
+					allAppsHref="/apps"
+					themesHref="/themes"
+					spiralHref="/spiral"
+					helpHref="/help"
+					onOpenInPanel={handleOpenInPanel}
+					ariaLabel="Hauptnavigation"
+					{spotlightActions}
+					bottomOffset={pillNavOffset}
+				/>
+
+				<!-- 3. TagStrip (above PillNav) -->
+				{#if isFilterStripVisible}
+					<TagStrip bottomOffset={tagStripOffset} />
+				{/if}
+
+				<!-- DnD: floating preview + action zones -->
+				<DragPreview />
+				<ActionZone
+					accepts={['task']}
+					onDrop={(payload) => tasksStore.deleteTask(payload.data.id)}
+					variant="danger"
+					label="Löschen"
+				/>
 			{/if}

 			<!-- Immersive Mode Toggle (always visible) -->
@ -670,149 +620,4 @@
 			padding-bottom: calc(100px + env(safe-area-inset-bottom));
 		}
 	}
-
-	/* FAB to toggle PillNav — sits right next to the centered QuickInputBar */
-	.pillnav-fab {
-		position: fixed;
-		bottom: calc(var(--fab-bottom, 16px) + env(safe-area-inset-bottom, 0px));
-		/* Anchor to center, then offset by half of InputBar max-width (350px) + gap */
-		left: calc(50% + 350px + 0.75rem);
-		width: 56px;
-		height: 56px;
-		border-radius: 50%;
-		background: var(--color-surface-elevated-2);
-		border: 1px solid var(--color-border);
-		box-shadow: var(--shadow-xl);
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 1002;
-		transition: all 0.2s ease;
-	}
-
-	/* On narrower screens, FAB sits at the right edge of the padded input area */
-	@media (max-width: 900px) {
-		.pillnav-fab {
-			left: auto;
-			right: 1rem;
-		}
-	}
-
-	.pillnav-fab:hover {
-		transform: scale(1.05);
-	}
-
-	.pillnav-fab:active {
-		transform: scale(0.95);
-	}
-
-	.pillnav-fab :global(svg) {
-		color: var(--color-foreground);
-	}
-
-	/* ── Minimized Page Tabs Bar ─────────────────────────── */
-	.minimized-tabs-bar {
-		position: fixed;
-		bottom: calc(var(--tabs-bottom, 16px) + env(safe-area-inset-bottom, 0px));
-		left: 50%;
-		transform: translateX(-50%);
-		z-index: 1001;
-	}
-
-	.minimized-tabs-inner {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.3rem 0.5rem;
-		background: var(--color-surface-elevated, #fffef5);
-		border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
-		border-radius: 0.625rem;
-		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-		overflow-x: auto;
-		scrollbar-width: none;
-	}
-	:global(.dark) .minimized-tabs-inner {
-		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
-	}
-	.minimized-tabs-inner::-webkit-scrollbar {
-		display: none;
-	}
-
-	.minimized-tab {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.25rem 0.5rem;
-		background: transparent;
-		border: none;
-		border-radius: 0.3rem;
-		cursor: pointer;
-		transition: all 0.15s;
-		white-space: nowrap;
-		flex-shrink: 0;
-		font-family: inherit;
-	}
-	.minimized-tab:hover {
-		background: rgba(0, 0, 0, 0.05);
-	}
-	:global(.dark) .minimized-tab:hover {
-		background: rgba(255, 255, 255, 0.08);
-	}
-
-	.minimized-tab-dot {
-		width: 0.5rem;
-		height: 0.5rem;
-		border-radius: 9999px;
-		flex-shrink: 0;
-	}
-
-	.minimized-tab-title {
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: var(--color-muted-foreground, #6b7280);
-	}
-
-	.minimized-tab-close {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 16px;
-		height: 16px;
-		border: none;
-		background: transparent;
-		color: var(--color-muted-foreground, #d1d5db);
-		border-radius: 0.125rem;
-		cursor: pointer;
-		padding: 0;
-		transition: all 0.15s;
-		opacity: 0.5;
-	}
-	.minimized-tab-close:hover {
-		opacity: 1;
-		background: rgba(0, 0, 0, 0.06);
-	}
-	:global(.dark) .minimized-tab-close:hover {
-		background: rgba(255, 255, 255, 0.08);
-	}
-
-	.minimized-tab-add {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		border-radius: 0.3rem;
-		border: none;
-		background: transparent;
-		color: var(--color-muted-foreground, #9ca3af);
-		cursor: pointer;
-		flex-shrink: 0;
-		transition: all 0.15s;
-		opacity: 0.6;
-	}
-	.minimized-tab-add:hover {
-		opacity: 1;
-		color: var(--color-primary, #8b5cf6);
-	}
 </style>
--- a/packages/shared-ui/package.json
+++ b/packages/shared-ui/package.json
@ -26,6 +26,11 @@
 			"svelte": "./src/organisms/index.ts",
 			"types": "./src/organisms/index.ts",
 			"default": "./src/organisms/index.ts"
+		},
+		"./dnd": {
+			"svelte": "./src/dnd/index.ts",
+			"types": "./src/dnd/index.ts",
+			"default": "./src/dnd/index.ts"
 		}
 	},
 	"scripts": {
--- a/packages/shared-ui/src/dnd/ActionZone.svelte
+++ b/packages/shared-ui/src/dnd/ActionZone.svelte
@ -0,0 +1,202 @@
+<script lang="ts">
+	/**
+	 * Drop zone that appears when a drag is active (Layer 1 or Layer 2).
+	 *
+	 * Slides in from the bottom during any drag, acts as a drop target
+	 * for actions like delete, archive, etc.
+	 *
+	 * Usage:
+	 *   <ActionZone
+	 *     accepts={['task', 'card']}
+	 *     onDrop={(payload) => deleteItem(payload.data.id)}
+	 *     variant="danger"
+	 *     label="Löschen"
+	 *   />
+	 */
+
+	import { dragState } from './drag-state.svelte';
+	import { dropTarget } from './drop-target';
+	import { passiveDropZone } from './passive-drop';
+	import type { DragPayload, DragType } from './types';
+	import { Trash, Archive, FolderOpen } from '@manacore/shared-icons';
+
+	interface Props {
+		accepts: DragType[];
+		onDrop: (payload: DragPayload) => void;
+		canDrop?: (payload: DragPayload) => boolean;
+		variant?: 'danger' | 'warning' | 'info' | 'success';
+		label?: string;
+		icon?: typeof Trash;
+	}
+
+	let { accepts, onDrop, canDrop, variant = 'danger', label = '', icon }: Props = $props();
+
+	const visible = $derived(dragState.anyDragActive);
+
+	const iconComponent = $derived(
+		icon ?? (variant === 'danger' ? Trash : variant === 'warning' ? Archive : FolderOpen)
+	);
+
+	// The zone is both a Layer 1 drop target and a Layer 2 passive zone
+	function handleDrop(payload: DragPayload) {
+		onDrop(payload);
+	}
+</script>
+
+{#if visible}
+	<div
+		class="action-zone variant-{variant}"
+		use:dropTarget={{
+			accepts,
+			onDrop: handleDrop,
+			canDrop,
+		}}
+		use:passiveDropZone={{
+			accepts,
+			onDrop: handleDrop,
+			canDrop,
+			highlightClass: 'action-zone-active',
+		}}
+		role="button"
+		tabindex="-1"
+	>
+		<svelte:component this={iconComponent} size={20} weight="bold" />
+		{#if label}
+			<span class="action-label">{label}</span>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.action-zone {
+		position: fixed;
+		bottom: calc(120px + env(safe-area-inset-bottom, 0px));
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 60;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem 1.5rem;
+		border-radius: 9999px;
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		transition: all 0.2s ease;
+		animation: action-zone-in 200ms ease-out;
+		cursor: default;
+	}
+
+	@keyframes action-zone-in {
+		from {
+			opacity: 0;
+			transform: translateX(-50%) translateY(20px) scale(0.9);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(-50%) translateY(0) scale(1);
+		}
+	}
+
+	.action-label {
+		font-size: 0.875rem;
+		font-weight: 600;
+		white-space: nowrap;
+	}
+
+	/* Variants */
+	.variant-danger {
+		background: rgba(239, 68, 68, 0.15);
+		border: 1.5px solid rgba(239, 68, 68, 0.3);
+		color: #ef4444;
+	}
+
+	.variant-warning {
+		background: rgba(245, 158, 11, 0.15);
+		border: 1.5px solid rgba(245, 158, 11, 0.3);
+		color: #f59e0b;
+	}
+
+	.variant-info {
+		background: rgba(59, 130, 246, 0.15);
+		border: 1.5px solid rgba(59, 130, 246, 0.3);
+		color: #3b82f6;
+	}
+
+	.variant-success {
+		background: rgba(16, 185, 129, 0.15);
+		border: 1.5px solid rgba(16, 185, 129, 0.3);
+		color: #10b981;
+	}
+
+	/* Hover state (when item is over the zone) */
+	:global(.action-zone.mana-drop-target-hover),
+	:global(.action-zone.action-zone-active) {
+		transform: translateX(-50%) scale(1.1);
+	}
+
+	:global(.variant-danger.mana-drop-target-hover),
+	:global(.variant-danger.action-zone-active) {
+		background: rgba(239, 68, 68, 0.3);
+		border-color: rgba(239, 68, 68, 0.6);
+		box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
+	}
+
+	:global(.variant-warning.mana-drop-target-hover),
+	:global(.variant-warning.action-zone-active) {
+		background: rgba(245, 158, 11, 0.3);
+		border-color: rgba(245, 158, 11, 0.6);
+		box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
+	}
+
+	:global(.variant-info.mana-drop-target-hover),
+	:global(.variant-info.action-zone-active) {
+		background: rgba(59, 130, 246, 0.3);
+		border-color: rgba(59, 130, 246, 0.6);
+		box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
+	}
+
+	:global(.variant-success.mana-drop-target-hover),
+	:global(.variant-success.action-zone-active) {
+		background: rgba(16, 185, 129, 0.3);
+		border-color: rgba(16, 185, 129, 0.6);
+		box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
+	}
+
+	/* Success flash after drop */
+	:global(.action-zone.mana-drop-target-success),
+	:global(.action-zone.mana-passive-zone-success) {
+		animation: action-success 400ms ease-out;
+	}
+
+	@keyframes action-success {
+		0% {
+			transform: translateX(-50%) scale(1.15);
+		}
+		50% {
+			transform: translateX(-50%) scale(0.95);
+		}
+		100% {
+			transform: translateX(-50%) scale(1);
+		}
+	}
+
+	:global(.dark) .variant-danger {
+		background: rgba(239, 68, 68, 0.2);
+		border-color: rgba(239, 68, 68, 0.4);
+	}
+
+	:global(.dark) .variant-warning {
+		background: rgba(245, 158, 11, 0.2);
+		border-color: rgba(245, 158, 11, 0.4);
+	}
+
+	:global(.dark) .variant-info {
+		background: rgba(59, 130, 246, 0.2);
+		border-color: rgba(59, 130, 246, 0.4);
+	}
+
+	:global(.dark) .variant-success {
+		background: rgba(16, 185, 129, 0.2);
+		border-color: rgba(16, 185, 129, 0.4);
+	}
+</style>
--- a/packages/shared-ui/src/dnd/DragPreview.svelte
+++ b/packages/shared-ui/src/dnd/DragPreview.svelte
@ -0,0 +1,98 @@
+<script lang="ts">
+	/**
+	 * Floating drag preview that follows the pointer during Layer 1 drags.
+	 *
+	 * Place this once in your app layout:
+	 *   <DragPreview />
+	 *
+	 * It reads from dragState and renders a small pill showing what's being dragged.
+	 */
+
+	import { dragState } from './drag-state.svelte';
+	import type { TagDragData } from './types';
+
+	const OFFSET_X = 12;
+	const OFFSET_Y = -20;
+
+	const tagData = $derived(
+		dragState.activeDrag?.type === 'tag' ? (dragState.activeDrag.data as TagDragData) : null
+	);
+
+	const style = $derived(
+		dragState.isDragging
+			? `left:${dragState.pointerX + OFFSET_X}px;top:${dragState.pointerY + OFFSET_Y}px;`
+			: ''
+	);
+</script>
+
+{#if dragState.isDragging}
+	<div class="drag-preview" {style}>
+		{#if tagData}
+			<span class="tag-dot" style="background-color: {tagData.color}"></span>
+			<span class="tag-name">{tagData.name}</span>
+		{:else if dragState.activeDrag}
+			<span class="generic-label">{dragState.activeDrag.type}</span>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.drag-preview {
+		position: fixed;
+		z-index: 9999;
+		pointer-events: none;
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		border-radius: 9999px;
+		background: rgba(255, 255, 255, 0.95);
+		backdrop-filter: blur(12px);
+		-webkit-backdrop-filter: blur(12px);
+		border: 1px solid rgba(0, 0, 0, 0.12);
+		box-shadow:
+			0 8px 24px -4px rgba(0, 0, 0, 0.15),
+			0 2px 6px -1px rgba(0, 0, 0, 0.1);
+		font-size: 0.8125rem;
+		font-weight: 600;
+		white-space: nowrap;
+		transform: scale(1.05);
+		animation: drag-preview-in 150ms ease-out;
+	}
+
+	:global(.dark) .drag-preview {
+		background: rgba(30, 30, 30, 0.95);
+		border-color: rgba(255, 255, 255, 0.15);
+	}
+
+	@keyframes drag-preview-in {
+		from {
+			opacity: 0;
+			transform: scale(0.8);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1.05);
+		}
+	}
+
+	.tag-dot {
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+
+	.tag-name {
+		color: var(--color-foreground, #1a1a1a);
+	}
+
+	:global(.dark) .tag-name {
+		color: var(--color-foreground, #e5e5e5);
+	}
+
+	.generic-label {
+		color: var(--color-muted-foreground, #6b7280);
+		text-transform: capitalize;
+	}
+</style>
--- a/packages/shared-ui/src/dnd/README.md
+++ b/packages/shared-ui/src/dnd/README.md
@ -0,0 +1,142 @@
+# Cross-Type Drag & Drop System
+
+Shared DnD system for ManaCore apps. Enables dragging items between different
+component types (e.g. Tag onto Task, Task onto Trash zone).
+
+Designed to coexist with `svelte-dnd-action` which handles same-type reordering.
+
+## Architecture
+
+Two layers:
+
+- **Layer 1 (Pointer Events):** For items NOT managed by svelte-dnd-action.
+  Tag pills in the TagStrip use `dragSource` to become draggable, TaskItems use
+  `dropTarget` to accept tags. Works on mouse, touch, and pen via Pointer Events.
+
+- **Layer 2 (Passive Overlay):** For items already managed by svelte-dnd-action.
+  When a Task is being reordered via svelte-dnd-action, `passiveDropZone` detects
+  if the pointer hovers over a Tag pill or ActionZone and fires the appropriate
+  action on drop. No conflict with existing DnD.
+
+## Usage
+
+### Make an element draggable (Layer 1)
+
+```svelte
+<script>
+  import { dragSource } from '@manacore/shared-ui/dnd';
+</script>
+
+<button use:dragSource={{
+  type: 'tag',
+  data: () => ({ id: tag.id, name: tag.name, color: tag.color }),
+}}>
+  {tag.name}
+</button>
+```
+
+- Desktop: drag starts after 5px mouse movement
+- Mobile: drag starts after 300ms long-press (with haptic feedback)
+
+### Make an element a drop target (Layer 1)
+
+```svelte
+<script>
+  import { dropTarget } from '@manacore/shared-ui/dnd';
+</script>
+
+<div use:dropTarget={{
+  accepts: ['tag'],
+  onDrop: (payload) => assignTag(item.id, payload.data.id),
+  canDrop: (payload) => !item.tagIds.includes(payload.data.id),
+}}>
+  {item.title}
+</div>
+```
+
+CSS class `mana-drop-target-hover` is added during hover,
+`mana-drop-target-success` briefly after a successful drop.
+
+### React to svelte-dnd-action drags (Layer 2)
+
+```svelte
+<script>
+  import { passiveDropZone, registerSvelteActionDrag, clearSvelteActionDrag } from '@manacore/shared-ui/dnd';
+</script>
+
+<!-- In your svelte-dnd-action handlers: -->
+<div
+  use:dndzone={{ items, type: 'task-dnd' }}
+  onconsider={(e) => {
+    items = e.detail.items;
+    registerSvelteActionDrag({ type: 'task', data: { id: e.detail.info.id } });
+  }}
+  onfinalize={(e) => {
+    // ... normal handling ...
+    clearSvelteActionDrag();
+  }}
+>
+
+<!-- On external targets (e.g. tag pills): -->
+<button use:passiveDropZone={{
+  accepts: ['task'],
+  onDrop: (payload) => assignTag(tag.id, payload.data.id),
+  highlightClass: 'my-highlight-class',
+}}>
+```
+
+### Floating preview + action zones
+
+Place once in your app layout:
+
+```svelte
+<script>
+  import { DragPreview, ActionZone } from '@manacore/shared-ui/dnd';
+</script>
+
+<DragPreview />
+<ActionZone
+  accepts={['task']}
+  onDrop={(payload) => deleteItem(payload.data.id)}
+  variant="danger"
+  label="Delete"
+/>
+```
+
+`ActionZone` auto-shows/hides when any drag is active.
+Variants: `danger`, `warning`, `info`, `success`.
+
+## Drag Types
+
+| Type | Used by |
+|------|---------|
+| `tag` | Tag pills (TagStrip, PillTagSelector) |
+| `task` | Todo tasks (TaskList, Kanban) |
+| `card` | Cards app |
+| `photo` | Photos app |
+| `file` | Storage app |
+| `event` | Calendar events |
+| `link` | uLoad links |
+| `contact` | Contacts |
+
+## CSS Classes
+
+| Class | When |
+|-------|------|
+| `mana-drag-source-active` | On the source element during drag |
+| `mana-drop-target-hover` | On drop target while valid item hovers |
+| `mana-drop-target-success` | Brief flash after successful drop |
+| `mana-passive-zone-hover` | On passive zone while item hovers |
+| `mana-passive-zone-success` | Brief flash after successful passive drop |
+
+## Files
+
+| File | Purpose |
+|------|---------|
+| `types.ts` | DragType, payload interfaces, option types |
+| `drag-state.svelte.ts` | Global reactive state (Svelte 5 runes) |
+| `drag-source.ts` | `use:dragSource` action (Pointer Events) |
+| `drop-target.ts` | `use:dropTarget` action |
+| `passive-drop.ts` | `use:passiveDropZone` action (Layer 2) |
+| `DragPreview.svelte` | Floating drag ghost |
+| `ActionZone.svelte` | Trash/archive drop zone |
--- a/packages/shared-ui/src/dnd/drag-source.ts
+++ b/packages/shared-ui/src/dnd/drag-source.ts
@ -0,0 +1,151 @@
+/**
+ * Svelte action: use:dragSource
+ *
+ * Makes an element draggable via pointer events.
+ * Works on mouse, touch, and pen — no polyfills needed.
+ *
+ * Desktop: drag starts after moving past moveThreshold (default 5px).
+ * Mobile:  drag starts after long-press (default 300ms).
+ *
+ * Usage:
+ *   <button use:dragSource={{ type: 'tag', data: () => ({ id, name, color }) }}>
+ */
+
+import type { DragSourceOptions } from './types';
+import { startDrag, updatePointer, endDrag } from './drag-state.svelte';
+
+const DEFAULT_LONG_PRESS_MS = 300;
+const DEFAULT_MOVE_THRESHOLD = 5;
+
+export function dragSource(node: HTMLElement, options: DragSourceOptions) {
+	let opts = options;
+
+	let startX = 0;
+	let startY = 0;
+	let isDragging = false;
+	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
+	let isTouch = false;
+
+	// Prevent native drag (images, links)
+	function handleNativeDragStart(e: Event) {
+		if (isDragging) e.preventDefault();
+	}
+
+	function handlePointerDown(e: PointerEvent) {
+		if (opts.disabled) return;
+		// Only primary button (left click / single touch)
+		if (e.button !== 0) return;
+
+		startX = e.clientX;
+		startY = e.clientY;
+		isTouch = e.pointerType === 'touch';
+
+		// Capture pointer so we get events even when leaving the element
+		node.setPointerCapture(e.pointerId);
+
+		if (isTouch) {
+			// Touch: wait for long-press
+			longPressTimer = setTimeout(() => {
+				beginDrag(e.clientX, e.clientY);
+				// Haptic feedback if available
+				if (navigator.vibrate) navigator.vibrate(30);
+			}, opts.longPressMs ?? DEFAULT_LONG_PRESS_MS);
+		}
+
+		document.addEventListener('pointermove', handlePointerMove);
+		document.addEventListener('pointerup', handlePointerUp);
+		document.addEventListener('pointercancel', handlePointerCancel);
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (isDragging) {
+			e.preventDefault();
+			updatePointer(e.clientX, e.clientY);
+			return;
+		}
+
+		const dx = e.clientX - startX;
+		const dy = e.clientY - startY;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		if (isTouch) {
+			// On touch, moving before long-press fires → cancel
+			if (distance > 10 && longPressTimer) {
+				clearTimeout(longPressTimer);
+				longPressTimer = null;
+				cleanup();
+			}
+		} else {
+			// Mouse: start drag after threshold
+			const threshold = opts.moveThreshold ?? DEFAULT_MOVE_THRESHOLD;
+			if (distance >= threshold) {
+				beginDrag(e.clientX, e.clientY);
+			}
+		}
+	}
+
+	function beginDrag(x: number, y: number) {
+		isDragging = true;
+		const payload = { type: opts.type, data: opts.data() };
+		startDrag(payload);
+		updatePointer(x, y);
+
+		// Add dragging class to source element
+		node.classList.add('mana-drag-source-active');
+		// Prevent text selection during drag
+		document.body.style.userSelect = 'none';
+		document.body.style.webkitUserSelect = 'none';
+	}
+
+	function handlePointerUp(e: PointerEvent) {
+		if (isDragging) {
+			// Final position
+			updatePointer(e.clientX, e.clientY);
+			// Dispatch custom event so dropTargets can finalize
+			document.dispatchEvent(
+				new CustomEvent('mana-drag-drop', {
+					detail: { x: e.clientX, y: e.clientY },
+				})
+			);
+			endDrag();
+		}
+		cleanup();
+	}
+
+	function handlePointerCancel(_e: PointerEvent) {
+		if (isDragging) {
+			endDrag();
+		}
+		cleanup();
+	}
+
+	function cleanup() {
+		isDragging = false;
+		if (longPressTimer) {
+			clearTimeout(longPressTimer);
+			longPressTimer = null;
+		}
+		node.classList.remove('mana-drag-source-active');
+		document.body.style.userSelect = '';
+		document.body.style.webkitUserSelect = '';
+		document.removeEventListener('pointermove', handlePointerMove);
+		document.removeEventListener('pointerup', handlePointerUp);
+		document.removeEventListener('pointercancel', handlePointerCancel);
+	}
+
+	node.addEventListener('pointerdown', handlePointerDown);
+	node.addEventListener('dragstart', handleNativeDragStart);
+	// Hint: touch-action none prevents browser scroll during drag
+	node.style.touchAction = 'none';
+
+	return {
+		update(newOptions: DragSourceOptions) {
+			opts = newOptions;
+		},
+		destroy() {
+			cleanup();
+			node.removeEventListener('pointerdown', handlePointerDown);
+			node.removeEventListener('dragstart', handleNativeDragStart);
+		},
+	};
+}
--- a/packages/shared-ui/src/dnd/drag-state.svelte.ts
+++ b/packages/shared-ui/src/dnd/drag-state.svelte.ts
@ -0,0 +1,114 @@
+/**
+ * Global reactive drag state.
+ *
+ * Shared between dragSource, dropTarget, passiveDropZone, and UI components
+ * (DragPreview, ActionZone) so they can coordinate visuals.
+ */
+
+import type { DragPayload, DragType } from './types';
+
+// ── State ───────────────────────────────────────────────────
+
+/** The item currently being dragged (Layer 1: pointer-events system). */
+let activeDrag = $state<DragPayload | null>(null);
+
+/** Current pointer position during drag (screen coordinates). */
+let pointerX = $state(0);
+let pointerY = $state(0);
+
+/** The ID of the drop target currently being hovered. */
+let hoveredTargetId = $state<string | null>(null);
+
+/**
+ * Whether a svelte-dnd-action drag is in progress (Layer 2).
+ * Set by passiveDropZone when it detects aria-grabbed elements.
+ */
+let svelteActionDragActive = $state(false);
+
+/**
+ * Payload inferred from svelte-dnd-action drag (for passiveDropZone).
+ * Set via registerSvelteActionDrag() from the app.
+ */
+let svelteActionPayload = $state<DragPayload | null>(null);
+
+// ── Accessors ───────────────────────────────────────────────
+
+export const dragState = {
+	get activeDrag() {
+		return activeDrag;
+	},
+	get pointerX() {
+		return pointerX;
+	},
+	get pointerY() {
+		return pointerY;
+	},
+	get hoveredTargetId() {
+		return hoveredTargetId;
+	},
+	get isDragging() {
+		return activeDrag !== null;
+	},
+	get svelteActionDragActive() {
+		return svelteActionDragActive;
+	},
+	get svelteActionPayload() {
+		return svelteActionPayload;
+	},
+	/** True if ANY drag is happening (Layer 1 or Layer 2). */
+	get anyDragActive() {
+		return activeDrag !== null || svelteActionDragActive;
+	},
+};
+
+// ── Mutations ───────────────────────────────────────────────
+
+export function startDrag(payload: DragPayload) {
+	activeDrag = payload;
+}
+
+export function updatePointer(x: number, y: number) {
+	pointerX = x;
+	pointerY = y;
+}
+
+export function setHoveredTarget(id: string | null) {
+	hoveredTargetId = id;
+}
+
+export function endDrag() {
+	activeDrag = null;
+	hoveredTargetId = null;
+}
+
+/**
+ * Called by app code to inform the passive layer that a svelte-dnd-action
+ * drag has started, along with the payload of the dragged item.
+ *
+ * Usage in TaskList:
+ *   onconsider={(e) => {
+ *     registerSvelteActionDrag({ type: 'task', data: { id: e.detail.info.id } });
+ *   }}
+ *   onfinalize={(e) => {
+ *     clearSvelteActionDrag();
+ *   }}
+ */
+export function registerSvelteActionDrag(payload: DragPayload) {
+	svelteActionDragActive = true;
+	svelteActionPayload = payload;
+}
+
+export function clearSvelteActionDrag() {
+	svelteActionDragActive = false;
+	svelteActionPayload = null;
+	hoveredTargetId = null;
+}
+
+/**
+ * Check whether a given drag type is currently active (either layer).
+ */
+export function isTypeBeingDragged(type: DragType): boolean {
+	if (activeDrag?.type === type) return true;
+	if (svelteActionPayload?.type === type) return true;
+	return false;
+}
--- a/packages/shared-ui/src/dnd/drop-target.ts
+++ b/packages/shared-ui/src/dnd/drop-target.ts
@ -0,0 +1,107 @@
+/**
+ * Svelte action: use:dropTarget
+ *
+ * Registers an element as a drop target for Layer 1 (pointer-events) drags.
+ * Handles hover detection via the global drag state and listens for
+ * the 'mana-drag-drop' custom event fired by dragSource.
+ *
+ * Usage:
+ *   <div use:dropTarget={{
+ *     accepts: ['tag'],
+ *     onDrop: (payload) => assignTag(task.id, payload.data.id),
+ *     canDrop: (p) => !task.labelIds.includes(p.data.id),
+ *   }}>
+ */
+
+import type { DropTargetOptions, DragPayload } from './types';
+import { dragState, setHoveredTarget } from './drag-state.svelte';
+
+let targetCounter = 0;
+
+export function dropTarget(node: HTMLElement, options: DropTargetOptions) {
+	let opts = options;
+	const targetId = `drop-target-${++targetCounter}`;
+
+	node.dataset.manaDropTarget = targetId;
+
+	let isHovering = false;
+
+	function accepts(payload: DragPayload | null): boolean {
+		if (!payload || opts.disabled) return false;
+		if (!opts.accepts.includes(payload.type)) return false;
+		if (opts.canDrop && !opts.canDrop(payload)) return false;
+		return true;
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (!dragState.isDragging) return;
+
+		const payload = dragState.activeDrag;
+		if (!payload || !accepts(payload)) return;
+
+		const rect = node.getBoundingClientRect();
+		const inside =
+			e.clientX >= rect.left &&
+			e.clientX <= rect.right &&
+			e.clientY >= rect.top &&
+			e.clientY <= rect.bottom;
+
+		if (inside && !isHovering) {
+			isHovering = true;
+			node.classList.add('mana-drop-target-hover');
+			setHoveredTarget(targetId);
+			opts.onHover?.(payload);
+		} else if (!inside && isHovering) {
+			isHovering = false;
+			node.classList.remove('mana-drop-target-hover');
+			setHoveredTarget(null);
+			opts.onLeave?.();
+		}
+	}
+
+	function handleDrop(_e: CustomEvent<{ x: number; y: number }>) {
+		if (!isHovering) return;
+
+		const payload = dragState.activeDrag;
+		if (!payload || !accepts(payload)) {
+			resetHover();
+			return;
+		}
+
+		opts.onDrop(payload);
+		resetHover();
+
+		// Brief success flash
+		node.classList.add('mana-drop-target-success');
+		setTimeout(() => node.classList.remove('mana-drop-target-success'), 400);
+	}
+
+	function resetHover() {
+		isHovering = false;
+		node.classList.remove('mana-drop-target-hover');
+		setHoveredTarget(null);
+		opts.onLeave?.();
+	}
+
+	// Also reset when drag ends without drop on this target
+	function handleDragEnd() {
+		if (isHovering) resetHover();
+	}
+
+	document.addEventListener('pointermove', handlePointerMove);
+	document.addEventListener('mana-drag-drop', handleDrop as EventListener);
+	// dragSource fires pointerup → endDrag, but in case of cancel:
+	document.addEventListener('pointercancel', handleDragEnd);
+
+	return {
+		update(newOptions: DropTargetOptions) {
+			opts = newOptions;
+		},
+		destroy() {
+			resetHover();
+			document.removeEventListener('pointermove', handlePointerMove);
+			document.removeEventListener('mana-drag-drop', handleDrop as EventListener);
+			document.removeEventListener('pointercancel', handleDragEnd);
+		},
+	};
+}
--- a/packages/shared-ui/src/dnd/index.ts
+++ b/packages/shared-ui/src/dnd/index.ts
@ -0,0 +1,32 @@
+// Types
+export type {
+	DragType,
+	DragPayload,
+	TagDragData,
+	TaskDragData,
+	DragSourceOptions,
+	DropTargetOptions,
+	PassiveDropZoneOptions,
+	ActionZoneProps,
+} from './types';
+
+// Actions
+export { dragSource } from './drag-source';
+export { dropTarget } from './drop-target';
+export { passiveDropZone } from './passive-drop';
+
+// State
+export {
+	dragState,
+	startDrag,
+	endDrag,
+	updatePointer,
+	setHoveredTarget,
+	registerSvelteActionDrag,
+	clearSvelteActionDrag,
+	isTypeBeingDragged,
+} from './drag-state.svelte';
+
+// Components
+export { default as DragPreview } from './DragPreview.svelte';
+export { default as ActionZone } from './ActionZone.svelte';
--- a/packages/shared-ui/src/dnd/passive-drop.ts
+++ b/packages/shared-ui/src/dnd/passive-drop.ts
@ -0,0 +1,116 @@
+/**
+ * Svelte action: use:passiveDropZone
+ *
+ * Layer 2: Detects when a svelte-dnd-action drag hovers over this element.
+ *
+ * svelte-dnd-action uses pointer events internally. We listen to global
+ * pointermove and use elementFromPoint to check if the pointer is over
+ * this zone. When the pointer is released over the zone, we fire onDrop.
+ *
+ * The app must call registerSvelteActionDrag(payload) when a
+ * svelte-dnd-action drag starts (in the onconsider handler) and
+ * clearSvelteActionDrag() when it ends (in onfinalize).
+ *
+ * Usage:
+ *   <button use:passiveDropZone={{
+ *     accepts: ['task'],
+ *     onDrop: (payload) => assignTag(tag.id, payload.data.id),
+ *     highlightClass: 'tag-drop-highlight',
+ *   }}>
+ */
+
+import type { PassiveDropZoneOptions, DragPayload } from './types';
+import { dragState, setHoveredTarget, clearSvelteActionDrag } from './drag-state.svelte';
+
+let zoneCounter = 0;
+
+export function passiveDropZone(node: HTMLElement, options: PassiveDropZoneOptions) {
+	let opts = options;
+	const zoneId = `passive-zone-${++zoneCounter}`;
+	let isHovering = false;
+
+	node.dataset.manaPassiveZone = zoneId;
+
+	function getPayload(): DragPayload | null {
+		return dragState.svelteActionPayload;
+	}
+
+	function accepts(payload: DragPayload | null): boolean {
+		if (!payload || opts.disabled) return false;
+		if (!opts.accepts.includes(payload.type)) return false;
+		if (opts.canDrop && !opts.canDrop(payload)) return false;
+		return true;
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (!dragState.svelteActionDragActive) {
+			if (isHovering) resetHover();
+			return;
+		}
+
+		const payload = getPayload();
+		if (!accepts(payload)) return;
+
+		// Check if pointer is over this element
+		// pointer-events: none on the dragged ghost means elementFromPoint
+		// can see through to our zone
+		const rect = node.getBoundingClientRect();
+		const inside =
+			e.clientX >= rect.left &&
+			e.clientX <= rect.right &&
+			e.clientY >= rect.top &&
+			e.clientY <= rect.bottom;
+
+		if (inside && !isHovering) {
+			isHovering = true;
+			if (opts.highlightClass) node.classList.add(opts.highlightClass);
+			node.classList.add('mana-passive-zone-hover');
+			setHoveredTarget(zoneId);
+		} else if (!inside && isHovering) {
+			resetHover();
+		}
+	}
+
+	function handlePointerUp(_e: PointerEvent) {
+		if (!isHovering) return;
+
+		const payload = getPayload();
+		if (!payload || !accepts(payload)) {
+			resetHover();
+			return;
+		}
+
+		// Fire the drop action
+		opts.onDrop(payload);
+
+		// Clear the svelte-dnd-action drag state so the item returns quietly
+		clearSvelteActionDrag();
+		resetHover();
+
+		// Brief success flash
+		node.classList.add('mana-passive-zone-success');
+		setTimeout(() => node.classList.remove('mana-passive-zone-success'), 400);
+	}
+
+	function resetHover() {
+		isHovering = false;
+		if (opts.highlightClass) node.classList.remove(opts.highlightClass);
+		node.classList.remove('mana-passive-zone-hover');
+		setHoveredTarget(null);
+	}
+
+	// Use capture phase to see pointer events before svelte-dnd-action
+	document.addEventListener('pointermove', handlePointerMove, true);
+	document.addEventListener('pointerup', handlePointerUp, true);
+
+	return {
+		update(newOptions: PassiveDropZoneOptions) {
+			opts = newOptions;
+		},
+		destroy() {
+			resetHover();
+			document.removeEventListener('pointermove', handlePointerMove, true);
+			document.removeEventListener('pointerup', handlePointerUp, true);
+		},
+	};
+}
--- a/packages/shared-ui/src/dnd/types.ts
+++ b/packages/shared-ui/src/dnd/types.ts
@ -0,0 +1,92 @@
+/**
+ * Cross-type Drag & Drop system for ManaCore.
+ *
+ * Two layers:
+ *  - Layer 1 (dragSource + dropTarget): Pointer-events based, for dragging items
+ *    that are NOT already managed by svelte-dnd-action (e.g. Tag pills).
+ *  - Layer 2 (passiveDropZone): Overlays on top of svelte-dnd-action drags,
+ *    detecting when an already-dragged item hovers over an external target
+ *    (e.g. dragging a Task onto a Tag pill or Trash zone).
+ */
+
+// ── Drag types ──────────────────────────────────────────────
+
+export type DragType = 'tag' | 'task' | 'card' | 'photo' | 'file' | 'event' | 'link' | 'contact';
+
+export interface DragPayload<T = Record<string, unknown>> {
+	type: DragType;
+	data: T;
+}
+
+// ── Tag-specific payloads ───────────────────────────────────
+
+export interface TagDragData {
+	id: string;
+	name: string;
+	color: string;
+}
+
+export interface TaskDragData {
+	id: string;
+	title: string;
+}
+
+// ── dragSource options ──────────────────────────────────────
+
+export interface DragSourceOptions {
+	/** What kind of item is being dragged. */
+	type: DragType;
+	/** Returns the payload data. Called at drag start so it's always fresh. */
+	data: () => Record<string, unknown>;
+	/** Milliseconds to hold before drag starts on touch (default: 300). */
+	longPressMs?: number;
+	/** Pixels the pointer must move before drag starts on mouse (default: 5). */
+	moveThreshold?: number;
+	/** Whether dragging is currently disabled. */
+	disabled?: boolean;
+}
+
+// ── dropTarget options ──────────────────────────────────────
+
+export interface DropTargetOptions {
+	/** Which drag types this target accepts. */
+	accepts: DragType[];
+	/** Called when an accepted item is dropped on this target. */
+	onDrop: (payload: DragPayload) => void;
+	/** Called while an accepted item hovers over this target. */
+	onHover?: (payload: DragPayload) => void;
+	/** Called when a dragged item leaves this target. */
+	onLeave?: () => void;
+	/** Return false to reject the drop (e.g. tag already assigned). */
+	canDrop?: (payload: DragPayload) => boolean;
+	/** Whether this target is currently disabled. */
+	disabled?: boolean;
+}
+
+// ── passiveDropZone options ─────────────────────────────────
+
+export interface PassiveDropZoneOptions {
+	/** Which drag types this zone reacts to (from svelte-dnd-action drags). */
+	accepts: DragType[];
+	/** Called when an item is dropped on this zone. */
+	onDrop: (payload: DragPayload) => void;
+	/** Return false to reject the drop. */
+	canDrop?: (payload: DragPayload) => boolean;
+	/** CSS class applied while a valid item hovers over this zone. */
+	highlightClass?: string;
+	/** Whether this zone is currently disabled. */
+	disabled?: boolean;
+}
+
+// ── ActionZone props ────────────────────────────────────────
+
+export interface ActionZoneProps {
+	/** Which drag types trigger this zone to appear. */
+	accepts: DragType[];
+	/** Called when an item is dropped on this zone. */
+	onDrop: (payload: DragPayload) => void;
+	/** Visual variant. */
+	variant?: 'danger' | 'warning' | 'info' | 'success';
+	/** Label text shown in the zone. */
+	label?: string;
+}
--- a/packages/shared-ui/src/index.ts
+++ b/packages/shared-ui/src/index.ts
@ -233,5 +233,32 @@ export type {
 	GlobalErrorHandlerTranslations,
 } from './toast';

+// Bottom Stack
+export { BottomStack, MinimizedTabs } from './bottom-stack';
+export type { MinimizedPage, MinimizedTabsCallbacks } from './bottom-stack';
+
 // Actions
 export { focusTrap } from './actions';
+
+// Drag & Drop
+export {
+	dragSource,
+	dropTarget,
+	passiveDropZone,
+	dragState,
+	registerSvelteActionDrag,
+	clearSvelteActionDrag,
+	isTypeBeingDragged,
+	DragPreview,
+	ActionZone,
+} from './dnd';
+export type {
+	DragType,
+	DragPayload,
+	TagDragData,
+	TaskDragData,
+	DragSourceOptions,
+	DropTargetOptions,
+	PassiveDropZoneOptions,
+	ActionZoneProps,
+} from './dnd';