birdclaw 0.6.0 → 0.7.0

package/src/components/MarkdownViewer.tsx

@@ -1,17 +1,47 @@
-import { Fragment, type ReactNode, useState } from "react";
+import {
+	Fragment,
+	type MouseEventHandler,
+	type ReactNode,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
 import { formatCompactNumber, formatShortTimestamp } from "#/lib/present";
 import type { PeriodDigestContext } from "#/lib/period-digest";
+import type { ProfileAnalysisContext } from "#/lib/profile-analysis";
+import { renderTweetPlainText } from "#/lib/tweet-render";
 import type { ProfileRecord } from "#/lib/types";
 import { cx, tweetLinkClass, tweetMentionClass } from "#/lib/ui";
 import { safeHttpUrl } from "#/lib/url-safety";
 import { AvatarChip } from "./AvatarChip";
 import { ProfilePreview } from "./ProfilePreview";
 
+type CitationTweet = PeriodDigestContext["tweets"][number];
+type CitationContext = PeriodDigestContext | ProfileAnalysisContext;
+type VerticalBounds = { top: number; bottom: number };
+
 type InlineLookup = {
-	tweetsById: Map<string, PeriodDigestContext["tweets"][number]>;
+	tweetsById: Map<string, CitationTweet>;
 	profilesByHandle: Map<string, ProfileRecord>;
 };
 
+function nearestVerticalClipBounds(element: HTMLElement): VerticalBounds {
+	let top = 0;
+	let bottom = window.innerHeight;
+	for (
+		let current = element.parentElement;
+		current;
+		current = current.parentElement
+	) {
+		const style = window.getComputedStyle(current);
+		if (!/(auto|scroll|hidden|clip)/.test(style.overflowY)) continue;
+		const rect = current.getBoundingClientRect();
+		top = Math.max(top, rect.top);
+		bottom = Math.min(bottom, rect.bottom);
+	}
+	return { top, bottom };
+}
+
 function normalizeTweetReference(value: string) {
 	return value
 		.trim()
@@ -20,13 +50,35 @@ function normalizeTweetReference(value: string) {
 		.replace(/^tweet_/, "");
 }
 
+function isNumericTweetReference(value: string) {
+	return /^\d{12,25}$/.test(normalizeTweetReference(value));
+}
+
 function tweetReferencesFromToken(token: string) {
 	return Array.from(token.matchAll(/\b(?:tweet_)?[A-Za-z0-9_:-]{3,}\b/g))
 		.map((match) => match[0])
 		.filter((value) => value.startsWith("tweet_") || /^\d{12,25}$/.test(value));
 }
 
-function trailingReadableBounds(value: string) {
+function adjacentParenthesizedTweetReferences(value: string, cursor: number) {
+	const references: string[] = [];
+	let nextCursor = cursor;
+	while (nextCursor < value.length) {
+		const match =
+			/^\s+\((?:\s*(?:tweet_[A-Za-z0-9_:-]+|\d{12,25})\s*,?)+\)/.exec(
+				value.slice(nextCursor),
+			);
+		if (!match) break;
+		references.push(...tweetReferencesFromToken(match[0]));
+		nextCursor += match[0].length;
+	}
+	return { references, cursor: nextCursor };
+}
+
+function trailingReadableBounds(
+	value: string,
+	options: { preferClause?: boolean } = {},
+) {
 	let start = 0;
 	for (const separator of [". ", "? ", "! ", "; ", ": "]) {
 		const index = value.lastIndexOf(separator);
@@ -46,7 +98,10 @@ function trailingReadableBounds(value: string) {
 		}
 	}
 
-	if (clauseStart > start || end - start > 140) {
+	if (
+		options.preferClause !== false &&
+		(clauseStart > start || end - start > 140)
+	) {
 		while (clauseStart < end && /\s/.test(value[clauseStart] ?? "")) {
 			clauseStart += 1;
 		}
@@ -60,47 +115,108 @@ function trimBullet(value: string) {
 	return value.replace(/^[-*]\s+/, "");
 }
 
-function getTweetUrl(tweet: PeriodDigestContext["tweets"][number]) {
+function skipRedundantSourceWords(value: string, cursor: number) {
+	const match = /^((?:\s+source\b)+)(?=\s*(?:[.,;:!?)]|$))/i.exec(
+		value.slice(cursor),
+	);
+	return match ? cursor + match[0].length : cursor;
+}
+
+function getTweetUrl(tweet: CitationTweet) {
 	return tweet.url || `https://x.com/${tweet.author}/status/${tweet.id}`;
 }
 
+function getFallbackTweetUrl(tweetId: string) {
+	return `https://x.com/i/status/${normalizeTweetReference(tweetId)}`;
+}
+
+function TweetSourceLink({
+	children,
+	href,
+	onClick,
+}: {
+	children: ReactNode;
+	href: string;
+	onClick?: MouseEventHandler<HTMLAnchorElement>;
+}) {
+	return (
+		<a
+			className="rounded-sm px-0.5 text-[var(--accent)] hover:bg-[var(--accent-soft)] hover:no-underline"
+			href={href}
+			onClick={onClick}
+			rel="noreferrer"
+			target="_blank"
+		>
+			{children}
+		</a>
+	);
+}
+
 function TweetPreviewToken({
 	tweet,
 	children,
 }: {
-	tweet: PeriodDigestContext["tweets"][number];
+	tweet: CitationTweet;
 	children: ReactNode;
 }) {
 	const [open, setOpen] = useState(false);
+	const [placeAbove, setPlaceAbove] = useState(false);
+	const shellRef = useRef<HTMLSpanElement | null>(null);
+	const cardRef = useRef<HTMLSpanElement | null>(null);
+
+	useLayoutEffect(() => {
+		if (!open) return;
+		const updatePlacement = () => {
+			const shell = shellRef.current;
+			if (!shell) return;
+			const shellRect = shell.getBoundingClientRect();
+			const card = cardRef.current;
+			const cardRect = card?.getBoundingClientRect();
+			const cardHeight = Math.max(
+				card?.offsetHeight ?? 0,
+				cardRect?.height ?? 0,
+				220,
+			);
+			const bounds = nearestVerticalClipBounds(shell);
+			const belowSpace = bounds.bottom - shellRect.bottom;
+			const aboveSpace = shellRect.top - bounds.top;
+			setPlaceAbove(belowSpace < cardHeight + 18 && aboveSpace >= belowSpace);
+		};
+		updatePlacement();
+		const frame = window.requestAnimationFrame(updatePlacement);
+		return () => window.cancelAnimationFrame(frame);
+	}, [open]);
 
 	function closePreview() {
 		setOpen(false);
 	}
 
+	const previewText = renderTweetPlainText(tweet.text, tweet.entities ?? {});
+
 	return (
 		<span
+			ref={shellRef}
 			className="relative inline align-baseline"
 			onBlur={closePreview}
 			onFocus={() => setOpen(true)}
 			onPointerEnter={() => setOpen(true)}
 			onPointerLeave={closePreview}
 		>
-			<a
-				className="rounded-sm px-0.5 text-[var(--accent)] hover:bg-[var(--accent-soft)] hover:no-underline"
+			<TweetSourceLink
 				href={getTweetUrl(tweet)}
 				onClick={(event) => {
 					closePreview();
 					event.currentTarget.blur();
 				}}
-				rel="noreferrer"
-				target="_blank"
 			>
 				{children}
-			</a>
+			</TweetSourceLink>
 			<span
+				ref={cardRef}
 				aria-hidden={!open}
 				className={cx(
-					"absolute left-1/2 top-[calc(100%+10px)] z-40 w-[360px] -translate-x-1/2 rounded-2xl border border-[var(--line)] bg-[var(--bg-elevated)] p-3 text-left text-[14px] leading-[1.4] text-[var(--ink)] shadow-[0_14px_40px_var(--shadow-strong)]",
+					"absolute left-1/2 z-40 w-[360px] -translate-x-1/2 rounded-2xl border border-[var(--line)] bg-[var(--bg-elevated)] p-3 text-left text-[14px] leading-[1.4] text-[var(--ink)] shadow-[0_14px_40px_var(--shadow-strong)]",
+					placeAbove ? "bottom-[calc(100%+10px)]" : "top-[calc(100%+10px)]",
 					open ? "block" : "hidden",
 				)}
 			>
@@ -120,7 +236,7 @@ function TweetPreviewToken({
 					</span>
 				</span>
 				<span className="line-clamp-6 whitespace-pre-wrap [overflow-wrap:anywhere]">
-					{tweet.text}
+					{previewText}
 				</span>
 				<span className="mt-2 flex gap-3 text-[12px] text-[var(--ink-soft)]">
 					<span>{tweet.source}</span>
@@ -134,10 +250,103 @@ function TweetPreviewToken({
 	);
 }
 
-function additionalCitationLinks(
-	tweets: Array<PeriodDigestContext["tweets"][number]>,
+function additionalDirectCitationLinks(references: string[], key: string) {
+	return references.slice(1).flatMap((reference, index) => [
+		index === 0 ? " " : ", ",
+		<TweetSourceLink
+			key={`${key}-direct-source-${String(index + 2)}`}
+			href={getFallbackTweetUrl(reference)}
+		>
+			{`source ${String(index + 2)}`}
+		</TweetSourceLink>,
+	]);
+}
+
+function splitReadableForSourceLinks(value: string, count: number) {
+	if (count < 2) return null;
+	const separators = Array.from(
+		value.matchAll(/,\s+and\s+|,\s+or\s+|;\s+|,\s+|\s+and\s+|\s+or\s+/g),
+	);
+	if (separators.length < count - 1) return null;
+
+	const selected = separators.slice(-(count - 1));
+	const parts: Array<{ text: string; separatorAfter: string }> = [];
+	let cursor = 0;
+	for (const separator of selected) {
+		const index = separator.index;
+		if (index === undefined) return null;
+		const text = value.slice(cursor, index);
+		if (!text.trim()) return null;
+		parts.push({ text, separatorAfter: separator[0] });
+		cursor = index + separator[0].length;
+	}
+
+	const lastText = value.slice(cursor);
+	if (!lastText.trim()) return null;
+	parts.push({ text: lastText, separatorAfter: "" });
+	return parts.length === count ? parts : null;
+}
+
+function linkedCitationParts(
+	readable: string,
+	tweets: CitationTweet[],
 	key: string,
 ) {
+	const parts = splitReadableForSourceLinks(readable, tweets.length);
+	if (!parts) {
+		const tweet = tweets[0];
+		if (!tweet) return [];
+		return [
+			<TweetPreviewToken key={key} tweet={tweet}>
+				{readable}
+			</TweetPreviewToken>,
+			...additionalCitationLinks(tweets, key),
+		];
+	}
+	return parts.flatMap((part, index) => {
+		const tweet = tweets[index];
+		if (!tweet) return [];
+		return [
+			<TweetPreviewToken key={`${key}-part-${String(index)}`} tweet={tweet}>
+				{part.text}
+			</TweetPreviewToken>,
+			part.separatorAfter,
+		];
+	});
+}
+
+function linkedDirectCitationParts(
+	readable: string,
+	references: string[],
+	key: string,
+) {
+	const parts = splitReadableForSourceLinks(readable, references.length);
+	if (!parts) {
+		const reference = references[0];
+		if (!reference) return [];
+		return [
+			<TweetSourceLink key={key} href={getFallbackTweetUrl(reference)}>
+				{readable}
+			</TweetSourceLink>,
+			...additionalDirectCitationLinks(references, key),
+		];
+	}
+	return parts.flatMap((part, index) => {
+		const reference = references[index];
+		if (!reference) return [];
+		return [
+			<TweetSourceLink
+				key={`${key}-direct-part-${String(index)}`}
+				href={getFallbackTweetUrl(reference)}
+			>
+				{part.text}
+			</TweetSourceLink>,
+			part.separatorAfter,
+		];
+	});
+}
+
+function additionalCitationLinks(tweets: CitationTweet[], key: string) {
 	return tweets.slice(1).flatMap((tweet, index) => [
 		index === 0 ? " " : ", ",
 		<TweetPreviewToken key={`${key}-source-${String(index + 2)}`} tweet={tweet}>
@@ -146,10 +355,7 @@ function additionalCitationLinks(
 	]);
 }
 
-function fallbackCitationLinks(
-	tweets: Array<PeriodDigestContext["tweets"][number]>,
-	key: string,
-) {
+function fallbackCitationLinks(tweets: CitationTweet[], key: string) {
 	return tweets.flatMap((tweet, index) => [
 		index === 0 ? "" : ", ",
 		<TweetPreviewToken
@@ -163,7 +369,7 @@ function fallbackCitationLinks(
 
 function linkTrailingCitationText(
 	nodes: ReactNode[],
-	tweets: Array<PeriodDigestContext["tweets"][number]>,
+	tweets: CitationTweet[],
 	key: string,
 ) {
 	const tweet = tweets[0];
@@ -187,7 +393,9 @@ function linkTrailingCitationText(
 		return true;
 	}
 
-	const bounds = trailingReadableBounds(last);
+	const bounds = trailingReadableBounds(last, {
+		preferClause: tweets.length === 1,
+	});
 	if (!bounds) return false;
 
 	const before = last.slice(0, bounds.start);
@@ -195,10 +403,32 @@ function linkTrailingCitationText(
 	const trailing = last.slice(bounds.end);
 	nodes[nodes.length - 1] = before;
 	nodes.push(
-		<TweetPreviewToken key={key} tweet={tweet}>
-			{readable}
-		</TweetPreviewToken>,
-		...additionalCitationLinks(tweets, key),
+		...linkedCitationParts(readable, tweets, key),
+		/^\s*$/.test(trailing) ? "" : trailing,
+	);
+	return true;
+}
+
+function linkTrailingDirectCitationText(
+	nodes: ReactNode[],
+	references: string[],
+	key: string,
+) {
+	const reference = references[0];
+	if (!reference) return false;
+	const last = nodes.at(-1);
+	if (typeof last !== "string") return false;
+	const bounds = trailingReadableBounds(last, {
+		preferClause: references.length === 1,
+	});
+	if (!bounds) return false;
+
+	const before = last.slice(0, bounds.start);
+	const readable = last.slice(bounds.start, bounds.end);
+	const trailing = last.slice(bounds.end);
+	nodes[nodes.length - 1] = before;
+	nodes.push(
+		...linkedDirectCitationParts(readable, references, key),
 		/^\s*$/.test(trailing) ? "" : trailing,
 	);
 	return true;
@@ -213,17 +443,14 @@ function renderInline(text: string, lookup: InlineLookup) {
 
 	while ((match = pattern.exec(text))) {
 		const token = match[0];
+		const tokenKey = `${token}-${String(match.index)}`;
 		if (match.index > cursor) {
 			nodes.push(text.slice(cursor, match.index));
 		}
 		cursor = match.index + token.length;
 
 		if (token.startsWith("**") && token.endsWith("**")) {
-			nodes.push(
-				<strong key={`${token}-${String(match.index)}`}>
-					{token.slice(2, -2)}
-				</strong>,
-			);
+			nodes.push(<strong key={tokenKey}>{token.slice(2, -2)}</strong>);
 			continue;
 		}
 
@@ -235,7 +462,7 @@ function renderInline(text: string, lookup: InlineLookup) {
 			nodes.push(
 				href ? (
 					<a
-						key={`${token}-${String(match.index)}`}
+						key={tokenKey}
 						className={tweetLinkClass}
 						href={href}
 						rel="noreferrer"
@@ -254,19 +481,14 @@ function renderInline(text: string, lookup: InlineLookup) {
 			const profile = lookup.profilesByHandle.get(token.slice(1).toLowerCase());
 			nodes.push(
 				profile ? (
-					<ProfilePreview
-						key={`${token}-${String(match.index)}`}
-						profile={profile}
-					>
+					<ProfilePreview key={tokenKey} profile={profile}>
 						<span className={tweetMentionClass}>{token}</span>
 					</ProfilePreview>
 				) : (
 					<a
-						key={`${token}-${String(match.index)}`}
+						key={tokenKey}
 						className={tweetMentionClass}
-						href={`https://x.com/${token.slice(1)}`}
-						rel="noreferrer"
-						target="_blank"
+						href={`/profiles/${encodeURIComponent(token.slice(1))}`}
 					>
 						{token}
 					</a>
@@ -275,23 +497,55 @@ function renderInline(text: string, lookup: InlineLookup) {
 			continue;
 		}
 
-		const references = tweetReferencesFromToken(token);
+		const isParenthesizedTweetRef =
+			token.startsWith("(") && token.endsWith(")");
+		let references = tweetReferencesFromToken(token);
+		if (isParenthesizedTweetRef) {
+			const adjacent = adjacentParenthesizedTweetReferences(text, cursor);
+			const groupedReferences = [...references, ...adjacent.references];
+			if (
+				adjacent.references.length > 0 &&
+				groupedReferences.every(isNumericTweetReference)
+			) {
+				references = groupedReferences;
+				cursor = adjacent.cursor;
+				pattern.lastIndex = cursor;
+			}
+		}
 		const resolvedTweets = references.map((reference) =>
 			lookup.tweetsById.get(normalizeTweetReference(reference)),
 		);
 		const allReferencesResolved =
 			references.length > 0 && resolvedTweets.every(Boolean);
-		const tweets = resolvedTweets.filter(
-			(tweet): tweet is PeriodDigestContext["tweets"][number] => Boolean(tweet),
+		const tweets = resolvedTweets.filter((tweet): tweet is CitationTweet =>
+			Boolean(tweet),
 		);
 		const tweet = tweets[0];
-		const isParenthesizedTweetRef =
-			token.startsWith("(") && token.endsWith(")");
 		if (
 			isParenthesizedTweetRef &&
 			references.length > 1 &&
 			!allReferencesResolved
 		) {
+			if (references.every(isNumericTweetReference)) {
+				const cursorAfterSourceWords = skipRedundantSourceWords(text, cursor);
+				if (linkTrailingDirectCitationText(nodes, references, tokenKey)) {
+					cursor = cursorAfterSourceWords;
+					continue;
+				}
+				nodes.push(
+					...references.flatMap((reference, index) => [
+						index === 0 ? "" : ", ",
+						<TweetSourceLink
+							key={`${tokenKey}-direct-${String(index)}`}
+							href={getFallbackTweetUrl(reference)}
+						>
+							{`source ${String(index + 1)}`}
+						</TweetSourceLink>,
+					]),
+				);
+				cursor = cursorAfterSourceWords;
+				continue;
+			}
 			nodes.push(token);
 			continue;
 		}
@@ -299,28 +553,45 @@ function renderInline(text: string, lookup: InlineLookup) {
 			tweet &&
 			isParenthesizedTweetRef &&
 			allReferencesResolved &&
-			linkTrailingCitationText(nodes, tweets, `${token}-${String(match.index)}`)
+			linkTrailingCitationText(nodes, tweets, tokenKey)
 		) {
+			cursor = skipRedundantSourceWords(text, cursor);
 			continue;
 		}
 		if (tweet && isParenthesizedTweetRef && allReferencesResolved) {
+			nodes.push(...fallbackCitationLinks(tweets, tokenKey));
+			cursor = skipRedundantSourceWords(text, cursor);
+			continue;
+		}
+		if (tweet) {
 			nodes.push(
-				...fallbackCitationLinks(tweets, `${token}-${String(match.index)}`),
+				<TweetPreviewToken key={tokenKey} tweet={tweet}>
+					{isParenthesizedTweetRef ? "source" : token}
+				</TweetPreviewToken>,
 			);
+		} else if (
+			isParenthesizedTweetRef &&
+			references.length === 1 &&
+			isNumericTweetReference(references[0] ?? "")
+		) {
+			const cursorAfterSourceWords = skipRedundantSourceWords(text, cursor);
+			if (linkTrailingDirectCitationText(nodes, references, tokenKey)) {
+				cursor = cursorAfterSourceWords;
+				continue;
+			}
+			nodes.push(
+				<TweetSourceLink
+					key={`${tokenKey}-direct`}
+					href={getFallbackTweetUrl(references[0])}
+				>
+					source
+				</TweetSourceLink>,
+			);
+			cursor = cursorAfterSourceWords;
 			continue;
+		} else {
+			nodes.push(token);
 		}
-		nodes.push(
-			tweet ? (
-				<TweetPreviewToken
-					key={`${token}-${String(match.index)}`}
-					tweet={tweet}
-				>
-					{isParenthesizedTweetRef ? "source" : token}
-				</TweetPreviewToken>
-			) : (
-				token
-			),
-		);
 	}
 
 	if (cursor < text.length) {
@@ -336,14 +607,109 @@ function renderInline(text: string, lookup: InlineLookup) {
 	));
 }
 
-function buildLookup(context?: PeriodDigestContext | null): InlineLookup {
-	const tweetsById = new Map<string, PeriodDigestContext["tweets"][number]>();
+function isProfileAnalysisContext(
+	context: CitationContext,
+): context is ProfileAnalysisContext {
+	return "conversations" in context && "profile" in context;
+}
+
+function addLookupTweet(
+	tweetsById: Map<string, CitationTweet>,
+	profilesByHandle: Map<string, ProfileRecord>,
+	tweet: CitationTweet,
+) {
+	const normalized = normalizeTweetReference(tweet.id);
+	tweetsById.set(normalized, tweet);
+	tweetsById.set(`tweet_${normalized}`, tweet);
+	profilesByHandle.set(tweet.author.toLowerCase(), tweet.authorProfile);
+}
+
+function syntheticProfileForConversationTweet(
+	tweet: ProfileAnalysisContext["conversations"][number],
+): ProfileRecord {
+	return {
+		id: tweet.profileId,
+		handle: tweet.author,
+		displayName: tweet.name || tweet.author,
+		bio: tweet.bio,
+		followersCount: tweet.followersCount,
+		avatarHue: 210,
+		avatarUrl: tweet.avatarUrl,
+		createdAt: tweet.createdAt,
+	};
+}
+
+function profileAnalysisTweetToCitation(
+	tweet: ProfileAnalysisContext["tweets"][number],
+	profile: ProfileRecord,
+): CitationTweet {
+	return {
+		id: tweet.id,
+		url: tweet.url,
+		source: "authored",
+		author: profile.handle,
+		name: profile.displayName,
+		authorProfile: profile,
+		createdAt: tweet.createdAt,
+		text: tweet.text,
+		entities: tweet.entities,
+		likeCount: tweet.likeCount,
+		liked: false,
+		bookmarked: false,
+		needsReply: false,
+	};
+}
+
+function conversationTweetToCitation(
+	tweet: ProfileAnalysisContext["conversations"][number],
+): CitationTweet {
+	const authorProfile = syntheticProfileForConversationTweet(tweet);
+	return {
+		id: tweet.id,
+		url: tweet.url,
+		source: "mentions",
+		author: tweet.author,
+		name: tweet.name || tweet.author,
+		authorProfile,
+		createdAt: tweet.createdAt,
+		text: tweet.text,
+		entities: tweet.entities,
+		likeCount: tweet.likeCount,
+		liked: false,
+		bookmarked: false,
+		needsReply: false,
+	};
+}
+
+function buildLookup(context?: CitationContext | null): InlineLookup {
+	const tweetsById = new Map<string, CitationTweet>();
 	const profilesByHandle = new Map<string, ProfileRecord>();
-	for (const tweet of context?.tweets ?? []) {
-		const normalized = normalizeTweetReference(tweet.id);
-		tweetsById.set(normalized, tweet);
-		tweetsById.set(`tweet_${normalized}`, tweet);
-		profilesByHandle.set(tweet.author.toLowerCase(), tweet.authorProfile);
+	if (!context) {
+		return { tweetsById, profilesByHandle };
+	}
+	if (isProfileAnalysisContext(context)) {
+		profilesByHandle.set(context.profile.handle.toLowerCase(), context.profile);
+		for (const profile of context.profiles ?? []) {
+			profilesByHandle.set(profile.handle.toLowerCase(), profile);
+		}
+		for (const tweet of context.tweets) {
+			addLookupTweet(
+				tweetsById,
+				profilesByHandle,
+				profileAnalysisTweetToCitation(tweet, context.profile),
+			);
+		}
+		for (const tweet of context.conversations) {
+			addLookupTweet(
+				tweetsById,
+				profilesByHandle,
+				conversationTweetToCitation(tweet),
+			);
+		}
+		return { tweetsById, profilesByHandle };
+	}
+	for (const tweet of context.tweets) {
+		addLookupTweet(tweetsById, profilesByHandle, tweet);
 	}
 	return { tweetsById, profilesByHandle };
 }
@@ -354,7 +720,7 @@ export function MarkdownViewer({
 	className,
 }: {
 	markdown: string;
-	context?: PeriodDigestContext | null;
+	context?: CitationContext | null;
 	className?: string;
 }) {
 	const lookup = buildLookup(context);
@@ -370,7 +736,7 @@ export function MarkdownViewer({
 		if (listItems.length === 0) return;
 		nodes.push(
 			<ul
-				className="my-3 flex list-disc flex-col gap-2 pl-5 marker:text-[var(--ink-soft)]"
+				className="my-2.5 flex list-disc flex-col gap-1.5 pl-5 first:mt-0 marker:text-[var(--ink-soft)]"
 				key={`list-${String(nodes.length)}`}
 			>
 				{listItems.map((item, index) => (
@@ -391,7 +757,7 @@ export function MarkdownViewer({
 			flushList();
 			nodes.push(
 				<h3
-					className="mt-6 mb-2 text-[14px] font-bold uppercase tracking-wide text-[var(--ink-soft)]"
+					className="mt-5 mb-1.5 text-[14px] font-bold uppercase tracking-wide text-[var(--ink-soft)] first:mt-0"
 					key={`h3-${String(nodes.length)}`}
 				>
 					{renderInline(trimmed.slice(4), lookup)}
@@ -403,7 +769,7 @@ export function MarkdownViewer({
 			flushList();
 			nodes.push(
 				<h2
-					className="mt-7 mb-2 text-[18px] font-bold text-[var(--ink)]"
+					className="mt-6 mb-2 text-[18px] font-bold text-[var(--ink)] first:mt-0"
 					key={`h2-${String(nodes.length)}`}
 				>
 					{renderInline(trimmed.slice(3), lookup)}
@@ -415,7 +781,7 @@ export function MarkdownViewer({
 			flushList();
 			nodes.push(
 				<h1
-					className="mt-2 mb-3 text-[20px] font-bold text-[var(--ink)]"
+					className="mt-0 mb-2.5 text-[20px] font-bold text-[var(--ink)]"
 					key={`h1-${String(nodes.length)}`}
 				>
 					{renderInline(trimmed.slice(2), lookup)}
@@ -430,7 +796,7 @@ export function MarkdownViewer({
 		flushList();
 		nodes.push(
 			<p
-				className="my-3 whitespace-pre-wrap [overflow-wrap:anywhere]"
+				className="my-2.5 whitespace-pre-wrap first:mt-0 [overflow-wrap:anywhere]"
 				key={`p-${String(nodes.length)}`}
 			>
 				{renderInline(trimmed, lookup)}
@@ -442,7 +808,7 @@ export function MarkdownViewer({
 	return (
 		<article
 			className={cx(
-				"max-w-none px-4 py-4 text-[15px] leading-7 text-[var(--ink)]",
+				"max-w-none px-4 py-3 text-[15px] leading-[1.55] text-[var(--ink)]",
 				className,
 			)}
 		>