feat: update links for improved accessibility

packages/api/src/features/agent/service.ts

@@ -946,11 +946,13 @@ export const agentService = {
 
 			await getThread({ id: input.id, userId: input.userId });
 
-			await db.delete(schema.agentAttachment).where(eq(schema.agentAttachment.threadId, input.id));
-			await db
-				.update(schema.agentThread)
-				.set({ status: "deleted", deletedAt: new Date() })
-				.where(and(eq(schema.agentThread.id, input.id), eq(schema.agentThread.userId, input.userId)));
+			await Promise.all([
+				db.delete(schema.agentAttachment).where(eq(schema.agentAttachment.threadId, input.id)),
+				db
+					.update(schema.agentThread)
+					.set({ status: "deleted", deletedAt: new Date() })
+					.where(and(eq(schema.agentThread.id, input.id), eq(schema.agentThread.userId, input.userId))),
+			]);
 
 			try {
 				await getStorageService().delete(`uploads/${input.userId}/agent/${input.id}`);

packages/email/package.json

@@ -9,6 +9,7 @@
 	},
 	"scripts": {
 		"dev": "email dev --dir src/templates --port 3002",
+		"doctor": "react-doctor",
 		"typecheck": "tsgo --noEmit",
 		"test": "vitest run --passWithNoTests",
 		"test:coverage": "vitest run --coverage --passWithNoTests",
@@ -27,6 +28,7 @@
 		"@types/nodemailer": "^8.0.0",
 		"@types/react": "^19.2.15",
 		"@typescript/native-preview": "7.0.0-dev.20260526.1",
+		"react-doctor": "^0.2.6",
 		"typescript": "^6.0.3"
 	}
 }

packages/pdf/package.json

@@ -15,6 +15,7 @@
 		"#react-pdf-renderer": "@react-pdf/renderer"
 	},
 	"scripts": {
+		"doctor": "react-doctor",
 		"typecheck": "tsgo --noEmit",
 		"test": "vitest run --passWithNoTests",
 		"test:coverage": "vitest run --coverage --passWithNoTests",
@@ -38,6 +39,7 @@
 		"@reactive-resume/config": "workspace:*",
 		"@types/react": "^19.2.15",
 		"@typescript/native-preview": "7.0.0-dev.20260526.1",
+		"react-doctor": "^0.2.6",
 		"typescript": "^6.0.3"
 	}
 }

packages/pdf/src/context.tsx

@@ -1,7 +1,7 @@
 import type { ResumeData } from "@reactive-resume/schema/resume/data";
 import type { ReactNode } from "react";
 import type { SectionTitleResolver } from "./section-title";
-import { createContext, use } from "react";
+import { createContext, use, useMemo } from "react";
 import { isRTL } from "@reactive-resume/utils/locale";
 
 type RenderContextValue = ResumeData & {
@@ -19,8 +19,12 @@ export type RenderProviderProps = {
 
 export const RenderProvider = ({ data, resolveSectionTitle, children }: RenderProviderProps) => {
 	const rtl = isRTL(data.metadata.page.locale);
+	const contextValue = useMemo<RenderContextValue>(
+		() => ({ ...data, resolveSectionTitle, rtl }),
+		[data, resolveSectionTitle, rtl],
+	);
 
-	return <RenderContext.Provider value={{ ...data, resolveSectionTitle, rtl }}>{children}</RenderContext.Provider>;
+	return <RenderContext.Provider value={contextValue}>{children}</RenderContext.Provider>;
 };
 
 export const useRender = (): RenderContextValue => {

packages/pdf/src/templates/shared/context.tsx

@@ -10,7 +10,7 @@ import type {
 	TemplateStyleSlot,
 	TemplateStyleSlots,
 } from "./types";
-import { createContext, use } from "react";
+import { createContext, use, useMemo } from "react";
 
 type TemplateContextValue = {
 	styles: TemplateStyleSlots;
@@ -60,9 +60,12 @@ export const TemplateProvider = ({
 	features = EMPTY_FEATURES,
 	children,
 }: TemplateProviderProps) => {
-	return (
-		<TemplateContext.Provider value={{ styles, featureStyles, colors, features }}>{children}</TemplateContext.Provider>
+	const contextValue = useMemo<TemplateContextValue>(
+		() => ({ styles, featureStyles, colors, features }),
+		[colors, featureStyles, features, styles],
 	);
+
+	return <TemplateContext.Provider value={contextValue}>{children}</TemplateContext.Provider>;
 };
 
 export const TemplatePlacementProvider = ({

packages/pdf/src/templates/shared/primitives.tsx

@@ -4,17 +4,11 @@ import type { StyleInput } from "./styles";
 import { Icon as PhosphorIcon } from "phosphor-icons-react-pdf/dynamic";
 import { Link as PdfLink, Text as PdfText, View } from "../../renderer";
 import { useTemplateIconSlot, useTemplateStyle } from "./context";
+import { safeTextStyle } from "./safe-text-style";
 import { composeLinkStyles, composeStyles } from "./styles";
 
 const asStyleInput = (style: unknown): StyleInput => style as StyleInput;
 
-export const safeTextStyle = {
-	minWidth: 0,
-	maxWidth: "100%",
-	flexShrink: 1,
-	overflow: "hidden",
-} satisfies Style;
-
 export const Div = ({ style, ...props }: ComponentProps<typeof View>) => {
 	const divStyle = useTemplateStyle("div");
 

packages/pdf/src/templates/shared/rich-text-html.ts

@@ -72,9 +72,11 @@ const tryConvertPseudoBulletParagraph = (paragraphInnerHtml: string): string | n
 	const cleaned = stripEmptyInlineWrappers(paragraphInnerHtml);
 	if (!/<br\b/i.test(cleaned)) return null;
 
-	const segments = splitByBreaks(cleaned)
-		.map((segment) => segment.trim())
-		.filter((segment) => segment.length > 0);
+	const segments: string[] = [];
+	for (const segment of splitByBreaks(cleaned)) {
+		const trimmed = segment.trim();
+		if (trimmed.length > 0) segments.push(trimmed);
+	}
 
 	if (segments.length < 2) return null;
 	if (!segments.every((segment) => PSEUDO_BULLET_LEAD.test(segment))) return null;

packages/pdf/src/templates/shared/rich-text.tsx

@@ -5,7 +5,6 @@ import { Html } from "react-pdf-html";
 import { useRender } from "../../context";
 import { Text as PdfText, View } from "../../renderer";
 import { useTemplateStyle } from "./context";
-import { safeTextStyle } from "./primitives";
 import { convertPseudoBulletParagraphs, normalizeRichTextHtml, richTextMarkClassName } from "./rich-text-html";
 import { renderRichTextParagraph, toRichTextStyleArray } from "./rich-text-renderers";
 import {
@@ -15,6 +14,7 @@ import {
 	resolveRichTextBodyLineHeight,
 	stripRichTextVerticalMargins,
 } from "./rich-text-spacing";
+import { safeTextStyle } from "./safe-text-style";
 import { composeStyles, mergeLinkStyles, mergeStyles } from "./styles";
 
 const richListItemContentStackStyle = {

packages/pdf/src/templates/shared/safe-text-style.ts

@@ -0,0 +1,8 @@
+import type { Style } from "@react-pdf/types";
+
+export const safeTextStyle = {
+	minWidth: 0,
+	maxWidth: "100%",
+	flexShrink: 1,
+	overflow: "hidden",
+} satisfies Style;

packages/ui/package.json

@@ -11,6 +11,7 @@
 	},
 	"scripts": {
 		"shadcn": "shadcn",
+		"doctor": "react-doctor",
 		"typecheck": "tsgo --noEmit",
 		"test": "vitest run --passWithNoTests",
 		"test:coverage": "vitest run --coverage --passWithNoTests",
@@ -43,6 +44,7 @@
 		"@types/react-dom": "^19.2.3",
 		"@typescript/native-preview": "7.0.0-dev.20260526.1",
 		"postcss": "^8.5.15",
+		"react-doctor": "^0.2.6",
 		"tailwindcss": "^4.3.0",
 		"typescript": "^6.0.3"
 	}

packages/ui/src/components/badge.test.tsx

@@ -32,8 +32,8 @@ describe("Badge", () => {
 	});
 
 	it("supports a custom render function", () => {
-		render(<Badge render={(props) => <a {...props} href="/x" />}>link</Badge>);
-		const anchor = screen.getByRole("link", { name: "link" });
+		render(<Badge render={(props) => <a {...props} href="/x" aria-label="View profile" />}>View profile</Badge>);
+		const anchor = screen.getByRole("link", { name: "View profile" });
 		expect(anchor).toBeInTheDocument();
 	});
 });

packages/ui/src/components/form.tsx

@@ -18,9 +18,10 @@ type FormItemProps = React.ComponentProps<"div"> & { hasError?: boolean };
 
 function FormItem({ className, hasError = false, ...props }: FormItemProps) {
 	const id = React.useId();
+	const contextValue = React.useMemo<FormItemContextValue>(() => ({ id, hasError }), [hasError, id]);
 
 	return (
-		<FormItemContext.Provider value={{ id, hasError }}>
+		<FormItemContext.Provider value={contextValue}>
 			<div data-slot="form-item" className={cn("grid gap-1.5", className)} {...props} />
 		</FormItemContext.Provider>
 	);

packages/ui/src/components/input-group.tsx

@@ -49,7 +49,6 @@ function InputGroupAddon({
 			className={cn(inputGroupAddonVariants({ align }), className)}
 			onKeyDown={(e) => {
 				if (!(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
-				// Only respond to Space or Enter
 				if (e.key !== " " && e.key !== "Enter") return;
 				if (!(e.target as HTMLElement).closest("button")) {
 					e.preventDefault();

packages/ui/src/components/sidebar.tsx

@@ -268,6 +268,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
 
 	return (
 		<button
+			type="button"
 			data-sidebar="rail"
 			data-slot="sidebar-rail"
 			aria-label="Toggle Sidebar"

packages/ui/src/hooks/use-confirm.tsx

@@ -61,8 +61,10 @@ export function ConfirmDialogProvider({ children }: { children: React.ReactNode
 		setState((prev) => ({ ...prev, open: false, resolve: null }));
 	}, [state.resolve]);
 
+	const contextValue = React.useMemo<ConfirmContextType>(() => ({ confirm }), [confirm]);
+
 	return (
-		<ConfirmContext.Provider value={{ confirm }}>
+		<ConfirmContext.Provider value={contextValue}>
 			{children}
 
 			<AlertDialog open={state.open} onOpenChange={(open) => !open && handleCancel()}>

packages/ui/src/hooks/use-controlled-state.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 
 interface CommonControlledStateProps<T> {
 	value?: T;
@@ -13,19 +13,17 @@ export function useControlledState<T, Rest extends unknown[] = []>(
 	props: UseControlledStateProps<T, Rest>,
 ): readonly [T, (next: T, ...args: Rest) => void] {
 	const { value, defaultValue, onChange } = props;
+	const isControlled = value !== undefined;
 
-	const [state, setInternalState] = useState<T>(value !== undefined ? value : (defaultValue as T));
-
-	useEffect(() => {
-		if (value !== undefined) setInternalState(value);
-	}, [value]);
+	const [internalState, setInternalState] = useState<T>(value !== undefined ? value : (defaultValue as T));
+	const state = isControlled ? (value as T) : internalState;
 
 	const setState = useCallback(
 		(next: T, ...args: Rest) => {
-			setInternalState(next);
+			if (!isControlled) setInternalState(next);
 			onChange?.(next, ...args);
 		},
-		[onChange],
+		[isControlled, onChange],
 	);
 
 	return [state, setState] as const;

packages/ui/src/hooks/use-mobile.tsx

@@ -1,20 +1,25 @@
-import { useEffect, useState } from "react";
+import { useRef, useState, useSyncExternalStore } from "react";
 
 const MOBILE_BREAKPOINT = 768;
 const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
 
 export function useIsMobile() {
-	const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+	const [mediaQueryList] = useState(() => (typeof window === "undefined" ? null : window.matchMedia(MOBILE_QUERY)));
+	const latestMatchesRef = useRef(mediaQueryList?.matches ?? false);
 
-	useEffect(() => {
-		const mql = window.matchMedia(MOBILE_QUERY);
-		const onChange = (e: MediaQueryListEvent) => {
-			setIsMobile(e.matches);
-		};
-		mql.addEventListener("change", onChange);
-		setIsMobile(mql.matches);
-		return () => mql.removeEventListener("change", onChange);
-	}, []);
+	return useSyncExternalStore(
+		(onStoreChange) => {
+			if (!mediaQueryList) return () => {};
 
-	return !!isMobile;
+			const handleChange = (event: MediaQueryListEvent | { matches: boolean }) => {
+				latestMatchesRef.current = event.matches;
+				onStoreChange();
+			};
+
+			mediaQueryList.addEventListener("change", handleChange);
+			return () => mediaQueryList.removeEventListener("change", handleChange);
+		},
+		() => latestMatchesRef.current,
+		() => false,
+	);
 }

packages/ui/src/hooks/use-prompt.tsx

@@ -96,8 +96,10 @@ export function PromptDialogProvider({ children }: { children: React.ReactNode }
 		[handleConfirm],
 	);
 
+	const contextValue = React.useMemo<PromptContextType>(() => ({ prompt }), [prompt]);
+
 	return (
-		<PromptContext.Provider value={{ prompt }}>
+		<PromptContext.Provider value={contextValue}>
 			{children}
 
 			<AlertDialog open={state.open} onOpenChange={(open) => !open && handleCancel()}>