diff --git a/src/lib/features/feeds/components/Composer.svelte b/src/lib/features/feeds/components/Composer.svelte
index fdca1a4..4209d8c 100644
--- a/src/lib/features/feeds/components/Composer.svelte
+++ b/src/lib/features/feeds/components/Composer.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
 	import { validatePostText, MAX_POST_GRAPHEMES } from '../domain/compose';
 	import { createPost } from '../data/queries.svelte';
+	import MentionTextarea from './MentionTextarea.svelte';
 
 	interface Props {
 		/** Called after a successful post (e.g. to dismiss an overlay composer). */
 		onSuccess?: () => void;
+		/** Unique per mounted instance — the inline and overlay composers coexist. */
+		idPrefix?: string;
 	}
 
-	let { onSuccess }: Props = $props();
+	let { onSuccess, idPrefix = 'composer' }: Props = $props();
 
 	let text = $state('');
 	let submitting = $state(false);
@@ -34,14 +37,7 @@
 </script>
 
 <form class="composer" onsubmit={submit}>
-	<textarea
-		class="composer__input"
-		name="text"
-		rows="3"
-		placeholder="wuts on ur mind?? ✨"
-		bind:value={text}
-		maxlength="3000"
-	></textarea>
+	<MentionTextarea bind:value={text} placeholder="wuts on ur mind?? ✨" {idPrefix} />
 
 	<div class="composer__bar">
 		{#if error}
@@ -66,21 +62,6 @@
 		box-shadow: var(--twinkl-glow);
 	}
 
-	.composer__input {
-		width: 100%;
-		resize: vertical;
-		border: 1px solid var(--twinkl-border);
-		border-radius: 0.4rem;
-		background: var(--twinkl-bg-soft);
-		padding: 0.6rem;
-		color: var(--twinkl-fg);
-		font-family: inherit;
-	}
-
-	.composer__input:focus {
-		outline: 2px solid var(--twinkl-accent);
-	}
-
 	.composer__bar {
 		display: flex;
 		align-items: center;
diff --git a/src/lib/features/feeds/components/ComposerOverlay.svelte b/src/lib/features/feeds/components/ComposerOverlay.svelte
index 92663a2..7748cf7 100644
--- a/src/lib/features/feeds/components/ComposerOverlay.svelte
+++ b/src/lib/features/feeds/components/ComposerOverlay.svelte
@@ -71,7 +71,7 @@
 		>
 			<h2 id="composer-overlay-title" class="overlay__title">new post ✨</h2>
 			<button class="overlay__close" type="button" aria-label="close" onclick={close}>✕</button>
-			<Composer onSuccess={close} />
+			<Composer onSuccess={close} idPrefix="overlay-composer" />
 		</div>
 	</div>
 {/if}
diff --git a/src/lib/features/feeds/components/MentionTextarea.svelte b/src/lib/features/feeds/components/MentionTextarea.svelte
new file mode 100644
index 0000000..c28992a
--- /dev/null
+++ b/src/lib/features/feeds/components/MentionTextarea.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { ActorSuggestions, type ActorSuggestion } from '$lib/ui';
+	import { mentionQueryAt, applyMention, type MentionQuery } from '../domain/mentions';
+
+	interface Props {
+		value: string;
+		placeholder?: string;
+		rows?: number;
+		autofocus?: boolean;
+		/** DOM id prefix for the suggestion listbox's aria wiring. */
+		idPrefix: string;
+	}
+
+	let { value = $bindable(), placeholder, rows = 3, autofocus = false, idPrefix }: Props = $props();
+
+	let el = $state<HTMLTextAreaElement | null>(null);
+	let suggest = $state<ReturnType<typeof ActorSuggestions> | null>(null);
+	let mention = $state<MentionQuery | null>(null);
+
+	/** Re-derive the in-progress mention from the caret after any caret move. */
+	function refresh() {
+		mention = el ? mentionQueryAt(el.value, el.selectionStart ?? 0) : null;
+	}
+
+	function onKeydown(event: KeyboardEvent) {
+		// The listbox gets first refusal so Enter picks instead of newlining.
+		if (suggest?.handleKeydown(event)) return;
+	}
+
+	function onFocusOut(event: FocusEvent) {
+		const next = event.relatedTarget;
+		if (next instanceof Node && event.currentTarget instanceof Node) {
+			if (event.currentTarget.contains(next)) return;
+		}
+		suggest?.dismiss();
+		mention = null;
+	}
+
+	async function pick(suggestion: ActorSuggestion) {
+		if (!el || !mention) return;
+		const caret = el.selectionStart ?? value.length;
+		const applied = applyMention(value, mention.start, caret, suggestion.handle);
+		value = applied.text;
+		mention = null;
+		// Re-place the caret after the inserted handle once the DOM has the new value.
+		await tick();
+		el.focus();
+		el.setSelectionRange(applied.caret, applied.caret);
+	}
+</script>
+
+<div class="mention" onfocusout={onFocusOut}>
+	<!-- svelte-ignore a11y_autofocus -->
+	<textarea
+		bind:this={el}
+		class="mention__input"
+		{rows}
+		{placeholder}
+		bind:value
+		maxlength="3000"
+		{autofocus}
+		role="combobox"
+		aria-expanded={suggest?.isOpen() ?? false}
+		aria-controls="{idPrefix}-suggestions"
+		aria-autocomplete="list"
+		aria-activedescendant={suggest?.activeDescendant()}
+		oninput={refresh}
+		onclick={refresh}
+		onkeyup={refresh}
+		onkeydown={onKeydown}
+	></textarea>
+
+	<ActorSuggestions bind:this={suggest} query={mention?.query ?? ''} onPick={pick} {idPrefix} />
+</div>
+
+<style>
+	.mention {
+		position: relative;
+		/* Keys the suggestion listbox rows and ghost slot offsets. */
+		--row-h: 3rem;
+	}
+
+	.mention__input {
+		box-sizing: border-box;
+		display: block;
+		width: 100%;
+		resize: vertical;
+		border: 1px solid var(--twinkl-border);
+		border-radius: 0.4rem;
+		background: var(--twinkl-bg-soft);
+		padding: 0.6rem;
+		color: var(--twinkl-fg);
+		font-family: inherit;
+	}
+
+	.mention__input:focus {
+		outline: 2px solid var(--twinkl-accent);
+	}
+</style>
diff --git a/src/lib/features/feeds/components/ReplyComposer.svelte b/src/lib/features/feeds/components/ReplyComposer.svelte
index 9887bc9..c212cf6 100644
--- a/src/lib/features/feeds/components/ReplyComposer.svelte
+++ b/src/lib/features/feeds/components/ReplyComposer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { validatePostText, MAX_POST_GRAPHEMES } from '../domain/compose';
 	import { createReply, createQuote } from '../data/queries.svelte';
+	import MentionTextarea from './MentionTextarea.svelte';
 	import type { FeedPost } from '../domain/types';
 
 	interface Props {
@@ -58,15 +59,7 @@
 		<strong>@{subject.author.handle}</strong>
 	</div>
 
-	<!-- svelte-ignore a11y_autofocus -->
-	<textarea
-		class="reply-composer__input"
-		rows="3"
-		{placeholder}
-		bind:value={text}
-		maxlength="3000"
-		autofocus
-	></textarea>
+	<MentionTextarea bind:value={text} {placeholder} autofocus idPrefix="reply-composer" />
 
 	<div class="reply-composer__bar">
 		{#if error}
@@ -103,21 +96,6 @@
 		color: var(--twinkl-fg-muted);
 	}
 
-	.reply-composer__input {
-		width: 100%;
-		resize: vertical;
-		border: 1px solid var(--twinkl-border);
-		border-radius: 0.4rem;
-		background: var(--twinkl-bg-soft);
-		padding: 0.5rem;
-		color: var(--twinkl-fg);
-		font-family: inherit;
-	}
-
-	.reply-composer__input:focus {
-		outline: 2px solid var(--twinkl-accent);
-	}
-
 	.reply-composer__bar {
 		display: flex;
 		align-items: center;
diff --git a/src/lib/features/feeds/domain/mentions.test.ts b/src/lib/features/feeds/domain/mentions.test.ts
new file mode 100644
index 0000000..504f82b
--- /dev/null
+++ b/src/lib/features/feeds/domain/mentions.test.ts
@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { mentionQueryAt, applyMention } from './mentions';
+
+describe('mentionQueryAt', () => {
+	it('detects a mention at the start of the text', () => {
+		expect(mentionQueryAt('@tom', 4)).toEqual({ start: 0, query: 'tom' });
+	});
+
+	it('detects a mention mid-text after whitespace', () => {
+		expect(mentionQueryAt('hi @anna', 8)).toEqual({ start: 3, query: 'anna' });
+	});
+
+	it('detects a bare @ with an empty query', () => {
+		expect(mentionQueryAt('hey @', 5)).toEqual({ start: 4, query: '' });
+	});
+
+	it('allows dots and hyphens in the query', () => {
+		expect(mentionQueryAt('@tom.bsky-dev.social', 20)).toEqual({
+			start: 0,
+			query: 'tom.bsky-dev.social'
+		});
+	});
+
+	it('detects a mention after a newline or opening bracket', () => {
+		expect(mentionQueryAt('line\n@tom', 9)).toEqual({ start: 5, query: 'tom' });
+		expect(mentionQueryAt('(@tom', 5)).toEqual({ start: 1, query: 'tom' });
+	});
+
+	it('rejects an email-style @ embedded in a word', () => {
+		expect(mentionQueryAt('mail me at tom@example.com', 26)).toBeNull();
+	});
+
+	it('rejects when the caret has left the mention (whitespace after query)', () => {
+		expect(mentionQueryAt('@tom said hi', 12)).toBeNull();
+	});
+
+	it('only considers text before the caret', () => {
+		expect(mentionQueryAt('@tom', 2)).toEqual({ start: 0, query: 't' });
+	});
+
+	it('returns null with no @ present or at caret 0', () => {
+		expect(mentionQueryAt('hello', 5)).toBeNull();
+		expect(mentionQueryAt('@tom', 0)).toBeNull();
+	});
+
+	it('returns null for an out-of-range caret', () => {
+		expect(mentionQueryAt('@tom', 9)).toBeNull();
+	});
+});
+
+describe('applyMention', () => {
+	it('replaces the partial query with the handle and a trailing space', () => {
+		const result = applyMention('hi @an', 3, 6, 'anna.test');
+		expect(result.text).toBe('hi @anna.test ');
+		expect(result.caret).toBe(14);
+	});
+
+	it('preserves text after the caret', () => {
+		const result = applyMention('hi @an bye', 3, 6, 'anna.test');
+		expect(result.text).toBe('hi @anna.test  bye');
+		expect(result.caret).toBe(14);
+	});
+
+	it('works on a bare @', () => {
+		const result = applyMention('@', 0, 1, 'tom.test');
+		expect(result.text).toBe('@tom.test ');
+		expect(result.caret).toBe(10);
+	});
+});
diff --git a/src/lib/features/feeds/domain/mentions.ts b/src/lib/features/feeds/domain/mentions.ts
new file mode 100644
index 0000000..3cbfa33
--- /dev/null
+++ b/src/lib/features/feeds/domain/mentions.ts
@@ -0,0 +1,49 @@
+/**
+ * Caret-aware @mention detection for the composer typeahead. Framework-free;
+ * the actual mention→DID resolution happens at post time via RichText facet
+ * detection (`data/interactions.ts`) — this only decides when to show the
+ * suggestion listbox and how to splice a picked handle back into the text.
+ */
+
+/** Characters a handle query may contain (matches atproto handle syntax). */
+const QUERY_CHARS = /^[a-zA-Z0-9.-]*$/;
+
+export interface MentionQuery {
+	/** Index of the `@` sigil in the text. */
+	start: number;
+	/** The partial handle typed so far (without the `@`). */
+	query: string;
+}
+
+/**
+ * Find the @mention being typed at the caret, if any. The `@` must start the
+ * text or follow whitespace/an opening bracket — `email@example.com` is not a
+ * mention — and everything between it and the caret must be handle-shaped.
+ */
+export function mentionQueryAt(text: string, caret: number): MentionQuery | null {
+	if (caret < 1 || caret > text.length) return null;
+	const upToCaret = text.slice(0, caret);
+	const start = upToCaret.lastIndexOf('@');
+	if (start === -1) return null;
+	if (start > 0 && !/[\s([{]/.test(upToCaret[start - 1])) return null;
+	const query = upToCaret.slice(start + 1);
+	if (!QUERY_CHARS.test(query)) return null;
+	return { start, query };
+}
+
+/**
+ * Replace the in-progress `@query` (from `start` to `caret`) with the picked
+ * handle plus a trailing space, returning the new text and caret position.
+ */
+export function applyMention(
+	text: string,
+	start: number,
+	caret: number,
+	handle: string
+): { text: string; caret: number } {
+	const inserted = `@${handle} `;
+	return {
+		text: text.slice(0, start) + inserted + text.slice(caret),
+		caret: start + inserted.length
+	};
+}
diff --git a/src/lib/ui/ActorSuggestions.svelte b/src/lib/ui/ActorSuggestions.svelte
new file mode 100644
index 0000000..0e8b11e
--- /dev/null
+++ b/src/lib/ui/ActorSuggestions.svelte
@@ -0,0 +1,421 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { searchActors, type ActorSuggestion } from './typeahead';
+
+	interface Props {
+		/** Live query text; below `minLength` (trimmed) the listbox closes. */
+		query: string;
+		/** Called with the chosen suggestion; the host owns applying it. */
+		onPick: (suggestion: ActorSuggestion) => void;
+		/** DOM id prefix so the host input can wire aria-controls/activedescendant. */
+		idPrefix: string;
+		minLength?: number;
+	}
+
+	let { query, onPick, idPrefix, minLength = 2 }: Props = $props();
+
+	let suggestions = $state<ActorSuggestion[]>([]);
+	let highlighted = $state(-1);
+
+	/**
+	 * A rejected suggestion mid-flight: the user kept typing instead of picking
+	 * it, so it flies away and explodes. `slot` is the listbox index it occupied
+	 * (rows are fixed-height, so slot → top offset), and the fly vector/spin are
+	 * randomized per ghost via CSS custom properties.
+	 */
+	interface Ghost {
+		id: number;
+		slot: number;
+		suggestion: ActorSuggestion;
+		flyX: number;
+		flyY: number;
+		spin: number;
+		delay: number;
+		exploded: boolean;
+	}
+	let ghosts = $state<Ghost[]>([]);
+	let ghostSeq = 0;
+
+	const DEBOUNCE_MS = 250;
+	const FLY_MS = 500;
+	const EXPLODE_MS = 400;
+
+	let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+	let inFlight: AbortController | undefined;
+	let requestSeq = 0;
+	let ghostTimers: ReturnType<typeof setTimeout>[] = [];
+
+	function ghostTimeout(fn: () => void, ms: number) {
+		const timer = setTimeout(() => {
+			ghostTimers = ghostTimers.filter((t) => t !== timer);
+			fn();
+		}, ms);
+		ghostTimers.push(timer);
+	}
+
+	function launchGhosts(rejected: ActorSuggestion[]) {
+		const launched: Ghost[] = rejected.map((suggestion, slot) => ({
+			id: ghostSeq++,
+			slot,
+			suggestion,
+			flyX: (Math.random() < 0.5 ? -1 : 1) * (140 + Math.random() * 220),
+			flyY: -60 - Math.random() * 200,
+			spin: (Math.random() < 0.5 ? -1 : 1) * (180 + Math.random() * 420),
+			delay: slot * 45,
+			exploded: false
+		}));
+		ghosts.push(...launched);
+		for (const ghost of launched) {
+			// Timeline is timer-driven (not animationend) so cleanup is guaranteed
+			// even under prefers-reduced-motion, where the global rule collapses
+			// every animation to ~0ms and the ghost is simply gone at once.
+			ghostTimeout(() => {
+				const g = ghosts.find((g) => g.id === ghost.id);
+				if (g) g.exploded = true;
+			}, ghost.delay + FLY_MS);
+			ghostTimeout(
+				() => {
+					ghosts = ghosts.filter((g) => g.id !== ghost.id);
+				},
+				ghost.delay + FLY_MS + EXPLODE_MS
+			);
+		}
+	}
+
+	/** Replace the visible list; anything currently shown counts as rejected. */
+	function replaceSuggestions(next: ActorSuggestion[]) {
+		if (suggestions.length > 0) launchGhosts(suggestions);
+		suggestions = next;
+		highlighted = -1;
+	}
+
+	function scheduleSearch(value: string) {
+		clearTimeout(debounceTimer);
+		inFlight?.abort();
+		const trimmed = value.trim();
+		if (trimmed.length < minLength) {
+			replaceSuggestions([]);
+			return;
+		}
+		debounceTimer = setTimeout(async () => {
+			const ctrl = new AbortController();
+			inFlight = ctrl;
+			const seq = ++requestSeq;
+			const actors = await searchActors(trimmed, 5, ctrl.signal);
+			// Stale or aborted responses must not clobber (or ghost) newer state.
+			if (seq !== requestSeq || ctrl.signal.aborted) return;
+			replaceSuggestions(actors);
+		}, DEBOUNCE_MS);
+	}
+
+	// The query prop drives the whole search lifecycle; hosts just bind text.
+	// Only `query` may be a tracked read here: scheduleSearch reaches
+	// replaceSuggestions, which reads AND writes `suggestions`/`ghosts` — tracked,
+	// that read-then-write self-invalidates the effect into an infinite loop.
+	$effect(() => {
+		const value = query;
+		untrack(() => scheduleSearch(value));
+	});
+
+	$effect(() => () => {
+		clearTimeout(debounceTimer);
+		inFlight?.abort();
+		for (const timer of ghostTimers) clearTimeout(timer);
+		ghostTimers = [];
+	});
+
+	/** Quiet close (pick/escape/blur) — no rejection theatrics. */
+	export function dismiss() {
+		clearTimeout(debounceTimer);
+		inFlight?.abort();
+		requestSeq++;
+		suggestions = [];
+		highlighted = -1;
+	}
+
+	/** Reactive when read from a host template (suggestions is $state). */
+	export function isOpen(): boolean {
+		return suggestions.length > 0;
+	}
+
+	/** The aria-activedescendant id for the host input, if a row is highlighted. */
+	export function activeDescendant(): string | undefined {
+		return highlighted >= 0 ? `${idPrefix}-option-${highlighted}` : undefined;
+	}
+
+	function pick(suggestion: ActorSuggestion) {
+		dismiss();
+		onPick(suggestion);
+	}
+
+	/**
+	 * Keyboard nav for the host input/textarea. Returns true when the event was
+	 * consumed (already preventDefault-ed) so hosts can skip their own handling —
+	 * e.g. a textarea must not insert a newline on an Enter that picked a row.
+	 */
+	export function handleKeydown(event: KeyboardEvent): boolean {
+		// IME candidate navigation uses the same keys; let the composition own them.
+		if (event.isComposing) return false;
+		if (event.key === 'Escape') {
+			if (suggestions.length === 0) return false;
+			event.preventDefault();
+			dismiss();
+			return true;
+		}
+		if (suggestions.length === 0) return false;
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			highlighted = (highlighted + 1) % suggestions.length;
+			return true;
+		}
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			highlighted = highlighted <= 0 ? suggestions.length - 1 : highlighted - 1;
+			return true;
+		}
+		if (event.key === 'Enter' && highlighted >= 0) {
+			event.preventDefault();
+			pick(suggestions[highlighted]);
+			return true;
+		}
+		return false;
+	}
+</script>
+
+{#if suggestions.length > 0}
+	<ul class="suggest__listbox" id="{idPrefix}-suggestions" role="listbox" aria-label="suggestions">
+		{#each suggestions as suggestion, i (suggestion.did)}
+			<li role="presentation">
+				<button
+					type="button"
+					role="option"
+					id="{idPrefix}-option-{i}"
+					class="suggest__option"
+					class:suggest__option--active={i === highlighted}
+					aria-selected={i === highlighted}
+					onmousedown={(e) => e.preventDefault()}
+					onclick={() => pick(suggestion)}
+				>
+					{#if suggestion.avatar}
+						<img
+							class="suggest__avatar"
+							src={suggestion.avatar}
+							alt=""
+							referrerpolicy="no-referrer"
+							loading="lazy"
+						/>
+					{:else}
+						<span class="suggest__avatar suggest__avatar--fallback">☆</span>
+					{/if}
+					<span class="suggest__who">
+						<span class="suggest__name">{suggestion.displayName}</span>
+						<span class="suggest__handle">@{suggestion.handle}</span>
+					</span>
+				</button>
+			</li>
+		{/each}
+	</ul>
+{/if}
+
+{#if ghosts.length > 0}
+	<div class="suggest__ghosts" aria-hidden="true">
+		{#each ghosts as ghost (ghost.id)}
+			<div
+				class="suggest__ghost"
+				class:suggest__ghost--exploded={ghost.exploded}
+				style="--slot: {ghost.slot}; --fly-x: {ghost.flyX}px; --fly-y: {ghost.flyY}px; --spin: {ghost.spin}deg; --delay: {ghost.delay}ms;"
+			>
+				{#if !ghost.exploded}
+					<div class="suggest__ghost-row suggest__option">
+						{#if ghost.suggestion.avatar}
+							<img
+								class="suggest__avatar"
+								src={ghost.suggestion.avatar}
+								alt=""
+								referrerpolicy="no-referrer"
+							/>
+						{:else}
+							<span class="suggest__avatar suggest__avatar--fallback">☆</span>
+						{/if}
+						<span class="suggest__who">
+							<span class="suggest__name">{ghost.suggestion.displayName}</span>
+							<span class="suggest__handle">@{ghost.suggestion.handle}</span>
+						</span>
+					</div>
+				{:else}
+					<div class="suggest__boom">
+						{#each Array.from({ length: 6 }), p (p)}
+							<span class="suggest__spark suggest__spark--{p}">✦</span>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	/* Hosts must be position:relative and may override --row-h. */
+	.suggest__listbox {
+		position: absolute;
+		z-index: 2;
+		top: calc(100% + 0.25rem);
+		right: 0;
+		left: 0;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		overflow: hidden;
+		border: 1px solid var(--twinkl-border);
+		border-radius: 0.4rem;
+		background: var(--twinkl-surface);
+		box-shadow: var(--twinkl-glow);
+	}
+
+	.suggest__option {
+		display: flex;
+		width: 100%;
+		height: var(--row-h, 3rem);
+		align-items: center;
+		gap: 0.5rem;
+		border: none;
+		background: transparent;
+		padding: 0 0.6rem;
+		color: var(--twinkl-fg);
+		font-family: inherit;
+		font-size: 0.85rem;
+		text-align: left;
+		cursor: pointer;
+	}
+
+	.suggest__option--active,
+	.suggest__option:hover {
+		background: color-mix(in srgb, var(--twinkl-accent) 22%, transparent);
+	}
+
+	.suggest__avatar {
+		width: 1.75rem;
+		height: 1.75rem;
+		flex: none;
+		border-radius: 50%;
+		border: 1px solid var(--twinkl-border);
+		object-fit: cover;
+	}
+
+	.suggest__avatar--fallback {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--twinkl-bg-soft);
+		color: var(--twinkl-accent);
+	}
+
+	.suggest__who {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+		line-height: 1.2;
+	}
+
+	.suggest__name,
+	.suggest__handle {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.suggest__handle {
+		font-size: 0.75rem;
+		color: var(--twinkl-fg-muted);
+	}
+
+	/* ---- rejected-suggestion theatrics ------------------------------------ */
+
+	.suggest__ghosts {
+		position: absolute;
+		z-index: 3;
+		top: calc(100% + 0.25rem);
+		right: 0;
+		left: 0;
+		pointer-events: none;
+	}
+
+	.suggest__ghost {
+		position: absolute;
+		top: calc(var(--slot) * var(--row-h, 3rem));
+		right: 0;
+		left: 0;
+		height: var(--row-h, 3rem);
+	}
+
+	.suggest__ghost-row {
+		cursor: default;
+		border-radius: 0.4rem;
+		background: var(--twinkl-surface);
+		box-shadow: var(--twinkl-glow);
+		animation: suggest-fly-away 0.5s cubic-bezier(0.3, -0.2, 0.7, 0.4) var(--delay) both;
+	}
+
+	@keyframes suggest-fly-away {
+		0% {
+			transform: translate(0, 0) rotate(0deg) scale(1);
+			opacity: 1;
+		}
+		100% {
+			transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--spin)) scale(0.4);
+			opacity: 0.9;
+		}
+	}
+
+	.suggest__boom {
+		position: absolute;
+		top: 50%;
+		/* Detonate where the flight ended. */
+		left: calc(50% + var(--fly-x));
+		margin-top: var(--fly-y);
+	}
+
+	.suggest__spark {
+		position: absolute;
+		color: var(--twinkl-accent);
+		font-size: 0.9rem;
+		text-shadow: var(--twinkl-glow);
+		animation: suggest-spark 0.4s ease-out both;
+	}
+
+	@keyframes suggest-spark {
+		0% {
+			transform: translate(0, 0) scale(1.4);
+			opacity: 1;
+		}
+		100% {
+			transform: translate(var(--spark-x), var(--spark-y)) scale(0.2);
+			opacity: 0;
+		}
+	}
+
+	.suggest__spark--0 {
+		--spark-x: 1.6rem;
+		--spark-y: -1rem;
+	}
+	.suggest__spark--1 {
+		--spark-x: -1.5rem;
+		--spark-y: -1.3rem;
+	}
+	.suggest__spark--2 {
+		--spark-x: 1.2rem;
+		--spark-y: 1.2rem;
+	}
+	.suggest__spark--3 {
+		--spark-x: -1.4rem;
+		--spark-y: 0.9rem;
+	}
+	.suggest__spark--4 {
+		--spark-x: 0.2rem;
+		--spark-y: -1.8rem;
+	}
+	.suggest__spark--5 {
+		--spark-x: -0.2rem;
+		--spark-y: 1.7rem;
+	}
+</style>
diff --git a/src/lib/ui/LoginScreen.svelte b/src/lib/ui/LoginScreen.svelte
index 8694f8c..f18bb75 100644
--- a/src/lib/ui/LoginScreen.svelte
+++ b/src/lib/ui/LoginScreen.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { searchActors, type ActorSuggestion } from './typeahead';
+	import ActorSuggestions from './ActorSuggestions.svelte';
+	import type { ActorSuggestion } from './typeahead';
 
 	interface Props {
 		/** Optional error message to show above the form. */
@@ -13,128 +14,22 @@
 	let { error = null, onSubmit, busy = false }: Props = $props();
 
 	let handle = $state('');
-	let suggestions = $state<ActorSuggestion[]>([]);
-	let highlighted = $state(-1);
-
-	/**
-	 * A rejected suggestion mid-flight: the user kept typing instead of picking
-	 * it, so it flies away and explodes. `slot` is the listbox index it occupied
-	 * (rows are fixed-height, so slot → top offset), and the fly vector/spin are
-	 * randomized per ghost via CSS custom properties.
-	 */
-	interface Ghost {
-		id: number;
-		slot: number;
-		suggestion: ActorSuggestion;
-		flyX: number;
-		flyY: number;
-		spin: number;
-		delay: number;
-		exploded: boolean;
-	}
-	let ghosts = $state<Ghost[]>([]);
-	let ghostSeq = 0;
-
-	const DEBOUNCE_MS = 250;
-	const FLY_MS = 500;
-	const EXPLODE_MS = 400;
-
-	let debounceTimer: ReturnType<typeof setTimeout> | undefined;
-	let inFlight: AbortController | undefined;
-	let requestSeq = 0;
-
-	function launchGhosts(rejected: ActorSuggestion[]) {
-		const launched: Ghost[] = rejected.map((suggestion, slot) => ({
-			id: ghostSeq++,
-			slot,
-			suggestion,
-			flyX: (Math.random() < 0.5 ? -1 : 1) * (140 + Math.random() * 220),
-			flyY: -60 - Math.random() * 200,
-			spin: (Math.random() < 0.5 ? -1 : 1) * (180 + Math.random() * 420),
-			delay: slot * 45,
-			exploded: false
-		}));
-		ghosts.push(...launched);
-		for (const ghost of launched) {
-			// Timeline is timer-driven (not animationend) so cleanup is guaranteed
-			// even under prefers-reduced-motion, where the global rule collapses
-			// every animation to ~0ms and the ghost is simply gone at once.
-			setTimeout(() => {
-				const g = ghosts.find((g) => g.id === ghost.id);
-				if (g) g.exploded = true;
-			}, ghost.delay + FLY_MS);
-			setTimeout(
-				() => {
-					ghosts = ghosts.filter((g) => g.id !== ghost.id);
-				},
-				ghost.delay + FLY_MS + EXPLODE_MS
-			);
-		}
-	}
-
-	/** Replace the visible list; anything currently shown counts as rejected. */
-	function replaceSuggestions(next: ActorSuggestion[]) {
-		if (suggestions.length > 0) launchGhosts(suggestions);
-		suggestions = next;
-		highlighted = -1;
-	}
-
-	function scheduleSearch(query: string) {
-		clearTimeout(debounceTimer);
-		inFlight?.abort();
-		const trimmed = query.trim();
-		if (trimmed.length < 2) {
-			replaceSuggestions([]);
-			return;
-		}
-		debounceTimer = setTimeout(async () => {
-			const ctrl = new AbortController();
-			inFlight = ctrl;
-			const seq = ++requestSeq;
-			const actors = await searchActors(trimmed, 5, ctrl.signal);
-			// Stale or aborted responses must not clobber (or ghost) newer state.
-			if (seq !== requestSeq || ctrl.signal.aborted) return;
-			replaceSuggestions(actors);
-		}, DEBOUNCE_MS);
-	}
-
-	function dismiss() {
-		// Quiet close (pick/escape/blur) — no rejection theatrics.
-		clearTimeout(debounceTimer);
-		inFlight?.abort();
-		requestSeq++;
-		suggestions = [];
-		highlighted = -1;
-	}
+	// Searched only on user input — a programmatic set (picking a suggestion)
+	// must not re-open the listbox for the handle that was just picked.
+	let query = $state('');
+	let suggest = $state<ReturnType<typeof ActorSuggestions> | null>(null);
 
 	function pick(suggestion: ActorSuggestion) {
 		handle = suggestion.handle;
-		dismiss();
+		query = '';
 	}
 
 	function onInput(event: Event) {
-		scheduleSearch((event.currentTarget as HTMLInputElement).value);
+		query = (event.currentTarget as HTMLInputElement).value;
 	}
 
 	function onKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape') {
-			if (suggestions.length > 0) {
-				event.preventDefault();
-				dismiss();
-			}
-			return;
-		}
-		if (suggestions.length === 0) return;
-		if (event.key === 'ArrowDown') {
-			event.preventDefault();
-			highlighted = (highlighted + 1) % suggestions.length;
-		} else if (event.key === 'ArrowUp') {
-			event.preventDefault();
-			highlighted = highlighted <= 0 ? suggestions.length - 1 : highlighted - 1;
-		} else if (event.key === 'Enter' && highlighted >= 0) {
-			event.preventDefault();
-			pick(suggestions[highlighted]);
-		}
+		suggest?.handleKeydown(event);
 	}
 
 	function onFocusOut(event: FocusEvent) {
@@ -142,14 +37,14 @@
 		if (next instanceof Node && event.currentTarget instanceof Node) {
 			if (event.currentTarget.contains(next)) return;
 		}
-		dismiss();
+		suggest?.dismiss();
 	}
 
 	function submit(event: SubmitEvent) {
 		event.preventDefault();
 		const trimmed = handle.trim();
 		if (!trimmed || busy) return;
-		dismiss();
+		suggest?.dismiss();
 		onSubmit(trimmed);
 	}
 </script>
@@ -172,10 +67,10 @@
 			autocomplete="off"
 			placeholder="tom.myspace.social"
 			role="combobox"
-			aria-expanded={suggestions.length > 0}
+			aria-expanded={suggest?.isOpen() ?? false}
 			aria-controls="handle-suggestions"
 			aria-autocomplete="list"
-			aria-activedescendant={highlighted >= 0 ? `handle-option-${highlighted}` : undefined}
+			aria-activedescendant={suggest?.activeDescendant()}
 			bind:value={handle}
 			oninput={onInput}
 			onkeydown={onKeydown}
@@ -183,77 +78,7 @@
 			required
 		/>
 
-		{#if suggestions.length > 0}
-			<ul class="login__listbox" id="handle-suggestions" role="listbox" aria-label="suggestions">
-				{#each suggestions as suggestion, i (suggestion.did)}
-					<li role="presentation">
-						<button
-							type="button"
-							role="option"
-							id="handle-option-{i}"
-							class="login__option"
-							class:login__option--active={i === highlighted}
-							aria-selected={i === highlighted}
-							onmousedown={(e) => e.preventDefault()}
-							onclick={() => pick(suggestion)}
-						>
-							{#if suggestion.avatar}
-								<img
-									class="login__avatar"
-									src={suggestion.avatar}
-									alt=""
-									referrerpolicy="no-referrer"
-									loading="lazy"
-								/>
-							{:else}
-								<span class="login__avatar login__avatar--fallback">☆</span>
-							{/if}
-							<span class="login__who">
-								<span class="login__name">{suggestion.displayName}</span>
-								<span class="login__handle">@{suggestion.handle}</span>
-							</span>
-						</button>
-					</li>
-				{/each}
-			</ul>
-		{/if}
-
-		{#if ghosts.length > 0}
-			<div class="login__ghosts" aria-hidden="true">
-				{#each ghosts as ghost (ghost.id)}
-					<div
-						class="login__ghost"
-						class:login__ghost--exploded={ghost.exploded}
-						style="--slot: {ghost.slot}; --fly-x: {ghost.flyX}px; --fly-y: {ghost.flyY}px; --spin: {ghost.spin}deg; --delay: {ghost.delay}ms;"
-					>
-						{#if !ghost.exploded}
-							<div class="login__ghost-row login__option">
-								{#if ghost.suggestion.avatar}
-									<img
-										class="login__avatar"
-										src={ghost.suggestion.avatar}
-										alt=""
-										referrerpolicy="no-referrer"
-									/>
-								{:else}
-									<span class="login__avatar login__avatar--fallback">☆</span>
-								{/if}
-								<span class="login__who">
-									<span class="login__name">{ghost.suggestion.displayName}</span>
-									<span class="login__handle">@{ghost.suggestion.handle}</span>
-								</span>
-							</div>
-						{:else}
-							<div class="login__boom">
-								{#each Array.from({ length: 6 }), p (p)}
-									<span class="login__spark login__spark--{p}">✦</span>
-								{/each}
-							</div>
-						{/if}
-					</div>
-				{/each}
-			</div>
-		{/if}
+		<ActorSuggestions bind:this={suggest} {query} onPick={pick} idPrefix="handle" />
 	</div>
 
 	<button class="login__button" type="submit" disabled={busy}>
@@ -325,169 +150,6 @@
 		outline: 2px solid var(--twinkl-accent);
 	}
 
-	.login__listbox {
-		position: absolute;
-		z-index: 2;
-		top: calc(100% + 0.25rem);
-		right: 0;
-		left: 0;
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		overflow: hidden;
-		border: 1px solid var(--twinkl-border);
-		border-radius: 0.4rem;
-		background: var(--twinkl-surface);
-		box-shadow: var(--twinkl-glow);
-	}
-
-	.login__option {
-		display: flex;
-		width: 100%;
-		height: var(--row-h);
-		align-items: center;
-		gap: 0.5rem;
-		border: none;
-		background: transparent;
-		padding: 0 0.6rem;
-		color: var(--twinkl-fg);
-		font-family: inherit;
-		font-size: 0.85rem;
-		text-align: left;
-		cursor: pointer;
-	}
-
-	.login__option--active,
-	.login__option:hover {
-		background: color-mix(in srgb, var(--twinkl-accent) 22%, transparent);
-	}
-
-	.login__avatar {
-		width: 1.75rem;
-		height: 1.75rem;
-		flex: none;
-		border-radius: 50%;
-		border: 1px solid var(--twinkl-border);
-		object-fit: cover;
-	}
-
-	.login__avatar--fallback {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		background: var(--twinkl-bg-soft);
-		color: var(--twinkl-accent);
-	}
-
-	.login__who {
-		display: flex;
-		min-width: 0;
-		flex-direction: column;
-		line-height: 1.2;
-	}
-
-	.login__name,
-	.login__handle {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	.login__handle {
-		font-size: 0.75rem;
-		color: var(--twinkl-fg-muted);
-	}
-
-	/* ---- rejected-suggestion theatrics ------------------------------------ */
-
-	.login__ghosts {
-		position: absolute;
-		z-index: 3;
-		top: calc(100% + 0.25rem);
-		right: 0;
-		left: 0;
-		pointer-events: none;
-	}
-
-	.login__ghost {
-		position: absolute;
-		top: calc(var(--slot) * var(--row-h));
-		right: 0;
-		left: 0;
-		height: var(--row-h);
-	}
-
-	.login__ghost-row {
-		cursor: default;
-		border-radius: 0.4rem;
-		background: var(--twinkl-surface);
-		box-shadow: var(--twinkl-glow);
-		animation: login-fly-away 0.5s cubic-bezier(0.3, -0.2, 0.7, 0.4) var(--delay) both;
-	}
-
-	@keyframes login-fly-away {
-		0% {
-			transform: translate(0, 0) rotate(0deg) scale(1);
-			opacity: 1;
-		}
-		100% {
-			transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--spin)) scale(0.4);
-			opacity: 0.9;
-		}
-	}
-
-	.login__boom {
-		position: absolute;
-		top: 50%;
-		/* Detonate where the flight ended. */
-		left: calc(50% + var(--fly-x));
-		margin-top: var(--fly-y);
-	}
-
-	.login__spark {
-		position: absolute;
-		color: var(--twinkl-accent);
-		font-size: 0.9rem;
-		text-shadow: var(--twinkl-glow);
-		animation: login-spark 0.4s ease-out both;
-	}
-
-	@keyframes login-spark {
-		0% {
-			transform: translate(0, 0) scale(1.4);
-			opacity: 1;
-		}
-		100% {
-			transform: translate(var(--spark-x), var(--spark-y)) scale(0.2);
-			opacity: 0;
-		}
-	}
-
-	.login__spark--0 {
-		--spark-x: 1.6rem;
-		--spark-y: -1rem;
-	}
-	.login__spark--1 {
-		--spark-x: -1.5rem;
-		--spark-y: -1.3rem;
-	}
-	.login__spark--2 {
-		--spark-x: 1.2rem;
-		--spark-y: 1.2rem;
-	}
-	.login__spark--3 {
-		--spark-x: -1.4rem;
-		--spark-y: 0.9rem;
-	}
-	.login__spark--4 {
-		--spark-x: 0.2rem;
-		--spark-y: -1.8rem;
-	}
-	.login__spark--5 {
-		--spark-x: -0.2rem;
-		--spark-y: 1.7rem;
-	}
-
 	.login__button {
 		margin-top: 0.5rem;
 		cursor: pointer;
diff --git a/src/lib/ui/index.ts b/src/lib/ui/index.ts
index 5ca5715..4428344 100644
--- a/src/lib/ui/index.ts
+++ b/src/lib/ui/index.ts
@@ -11,6 +11,8 @@ export { default as SideNav } from './SideNav.svelte';
 export { default as AppShell } from './AppShell.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as ComingSoon } from './ComingSoon.svelte';
+export { default as ActorSuggestions } from './ActorSuggestions.svelte';
+export type { ActorSuggestion } from './typeahead';
 export type { NavFeed } from './types';
 // The image lightbox (`./lightbox`) is deliberately NOT re-exported here: it is
 // ~4k lines and is only ever loaded lazily (root layout `onMount`) so it gets
diff --git a/src/lib/ui/typeahead.ts b/src/lib/ui/typeahead.ts
index e5891d1..1682023 100644
--- a/src/lib/ui/typeahead.ts
+++ b/src/lib/ui/typeahead.ts
@@ -1,8 +1,9 @@
 /**
  * Actor typeahead over https://typeahead.waow.tech — a public, unauthenticated,
- * CORS-enabled drop-in for `app.bsky.actor.searchActorsTypeahead`. Used by the
- * login screen only, so it deliberately bypasses the authed agent/query cache:
- * there is no session yet when it runs.
+ * CORS-enabled drop-in for `app.bsky.actor.searchActorsTypeahead`. Backs both
+ * the login screen and the composer @mention typeahead, so it deliberately
+ * bypasses the authed agent/query cache: on the login screen there is no
+ * session yet when it runs.
  */
 
 export interface ActorSuggestion {