fix(hover-card): maiden name false positive, placeholder on non-empty editor, card persistence

- PersonHoverCard: alias is compared against both `lastName` and `displayName`
  before showing as maiden name — prevents false positive when alias is stored
  as the full current name (e.g. "Maria Schmidt" ≠ "Schmidt" but name unchanged)
- PersonMentionEditor: data-placeholder was set statically so the CSS ::before
  rule showed the placeholder on any blur even with content; now a $effect
  toggles the attribute based on editor.isEmpty
- TranscriptionReadView: hovering onto the card itself cancels the 150ms close
  timer so the card stays open while reading it; leaving the card closes it
  immediately — onmouseenter/onmouseleave wired through PersonHoverCard props
- hoverCardPosition: removed scrollX/scrollY offset since the card is now
  position:fixed (scroll is already baked into getBoundingClientRect coords)
- MentionDropdown: raised z-index from z-20 to z-50 to render above the hover card
- vite.config.ts: pre-bundle Tiptap packages to avoid HMR waterfall on first load

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/components/MentionDropdown.svelte

@@ -111,7 +111,7 @@ function selectItem(item: Person) {
 	unauthenticated users.
 -->
 <div
-	class="fixed z-20 w-72 overflow-hidden rounded-sm border border-line bg-surface shadow-lg"
+	class="fixed z-50 w-72 overflow-hidden rounded-sm border border-line bg-surface shadow-lg"
 	role="listbox"
 	aria-label={m.person_mention_btn_label()}
 	style:top={position.top}

frontend/src/lib/components/PersonHoverCard.svelte

@@ -11,15 +11,30 @@ type Props = {
 	cardId: string;
 	position: { top: number; left: number };
 	state: LoadState;
+	onmouseenter?: () => void;
+	onmouseleave?: () => void;
 };
 
-let { personId, cardId, position, state }: Props = $props();
+let { personId, cardId, position, state, onmouseenter, onmouseleave }: Props = $props();
 
 const FAMILY_REL_TYPES: ReadonlySet<RelationshipDTO['relationType']> = new Set([
 	'PARENT_OF',
 	'SPOUSE_OF',
 	'SIBLING_OF'
 ]);
+
+function relationLabel(type: RelationshipDTO['relationType']): string {
+	switch (type) {
+		case 'PARENT_OF':
+			return m.relation_parent_of();
+		case 'SPOUSE_OF':
+			return m.relation_spouse_of();
+		case 'SIBLING_OF':
+			return m.relation_sibling_of();
+		default:
+			return m.relation_other();
+	}
+}
 const NOTES_MAX = 120;
 
 const familyChips = $derived(
@@ -79,9 +94,11 @@ const ariaBusy = $derived(state.status === 'loading');
 	aria-live="polite"
 	aria-label={ariaLabel}
 	aria-busy={ariaBusy ? 'true' : undefined}
-	style:position="absolute"
+	style:position="fixed"
 	style:top={`${position.top}px`}
 	style:left={`${position.left}px`}
+	onmouseenter={onmouseenter}
+	onmouseleave={onmouseleave}
 >
 	{#if state.status === 'loading'}
 		<div
@@ -108,7 +125,7 @@ const ariaBusy = $derived(state.status === 'loading');
 				{#if dateRange}
 					<div class="dates" data-testid="person-hover-card-dates">{dateRange}</div>
 				{/if}
-				{#if state.person.alias}
+				{#if state.person.alias && state.person.alias !== state.person.lastName && state.person.alias !== state.person.displayName}
 					<div class="maiden" data-testid="person-hover-card-maiden">
 						{m.person_born_name_prefix()}
 						{state.person.alias}
@@ -118,7 +135,10 @@ const ariaBusy = $derived(state.status === 'loading');
 			{#if familyChips.length > 0}
 				<div class="chips" data-testid="person-hover-card-chips">
 					{#each familyChips as chip (chip.id)}
-						<span class="chip">{chip.relatedPersonDisplayName}</span>
+						<span class="chip">
+							<span class="chip-type">{relationLabel(chip.relationType)}</span>
+							{chip.relatedPersonDisplayName}
+						</span>
 					{/each}
 				</div>
 			{/if}
@@ -230,6 +250,9 @@ const ariaBusy = $derived(state.status === 'loading');
 }
 
 .chip {
+	display: flex;
+	align-items: center;
+	gap: 4px;
 	font-size: 12px;
 	background-color: var(--c-accent-bg);
 	color: var(--c-ink);
@@ -237,6 +260,15 @@ const ariaBusy = $derived(state.status === 'loading');
 	padding: 2px 10px;
 }
 
+.chip-type {
+	font-weight: 600;
+	opacity: 0.7;
+}
+
+.chip-type::after {
+	content: ':';
+}
+
 .notes {
 	font-size: 13px;
 	color: var(--c-ink-2);

frontend/src/lib/components/PersonMentionEditor.svelte

@@ -224,7 +224,6 @@ onMount(() => {
 				role: 'textbox',
 				'aria-multiline': 'true',
 				'aria-label': m.transcription_editor_aria_label(),
-				...(placeholder ? { 'data-placeholder': placeholder } : {}),
 				class: [
 					'min-h-[120px] px-1 py-2.5',
 					'font-serif text-base leading-relaxed text-ink',
@@ -255,6 +254,20 @@ onDestroy(() => {
 	editor?.destroy();
 });
 
+// Keep the data-placeholder attribute in sync with actual emptiness so the
+// placeholder CSS only fires when there is no content (not just on blur).
+$effect(() => {
+	if (!editor || !placeholder) return;
+	void value; // track value as dependency so this re-runs on content changes
+	const inner = editorEl?.querySelector('.tiptap-editor-inner') as HTMLElement | null;
+	if (!inner) return;
+	if (editor.isEmpty) {
+		inner.setAttribute('data-placeholder', placeholder);
+	} else {
+		inner.removeAttribute('data-placeholder');
+	}
+});
+
 // Keep editor in sync with the reactive `disabled` prop. Tiptap's setEditable
 // flips contenteditable on the inner DOM and stops accepting input — matches
 // the textarea's old `disabled` semantics for keyboard users (WCAG 2.1.1).

frontend/src/lib/components/TranscriptionReadView.svelte

@@ -93,13 +93,28 @@ function getOrFetchHoverData(personId: string): Promise<HoverData | null> {
 function currentViewport() {
 	return {
 		viewportWidth: window.innerWidth,
-		viewportHeight: window.innerHeight,
-		scrollX: window.scrollX,
-		scrollY: window.scrollY
+		viewportHeight: window.innerHeight
 	};
 }
 
+let closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+function scheduleCardClose() {
+	closeTimer = setTimeout(() => {
+		activeCard = null;
+		closeTimer = null;
+	}, 150);
+}
+
+function cancelCardClose() {
+	if (closeTimer !== null) {
+		clearTimeout(closeTimer);
+		closeTimer = null;
+	}
+}
+
 async function handleMentionEnter(event: Event) {
+	cancelCardClose();
 	const link = event.target as HTMLAnchorElement;
 	const personId = link.dataset.personId;
 	if (!personId) return;
@@ -140,7 +155,11 @@ async function handleMentionEnter(event: Event) {
 function handleMentionLeave(event: Event) {
 	const link = event.target as HTMLAnchorElement;
 	link.removeAttribute('aria-describedby');
-	activeCard = null;
+	if (event.type === 'mouseleave') {
+		scheduleCardClose();
+	} else {
+		activeCard = null;
+	}
 }
 
 /**
@@ -231,6 +250,8 @@ function attachMentionHandlers(node: HTMLElement) {
 		cardId={activeCard.cardId}
 		position={activeCard.position}
 		state={activeCard.state}
+		onmouseenter={cancelCardClose}
+		onmouseleave={() => { activeCard = null; }}
 	/>
 {/if}