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-21 06:46:42 +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/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';