Bump the monthly-npm-updates group with 16 updates

.devcontainer/devcontainer.json

@@ -14,7 +14,8 @@
 				"biomejs.biome",
 				"bradlc.vscode-tailwindcss",
 				"davidanson.vscode-markdownlint",
-				"naumovs.color-highlight"
+				"naumovs.color-highlight",
+				"typescriptteam.native-preview"
 			]
 		}
 	},

.vscode/settings.json

@@ -6,6 +6,8 @@
         "source.organizeImports.biome": "explicit"
     },
     "files.autoSave": "off",
+    "js/ts.experimental.useTsgo": true,
+    "js/ts.tsdk.path": "./node_modules/typescript",
     "workbench.colorTheme": "GitHub Light Default",
     "[markdown]": {
         "editor.defaultFormatter": "DavidAnson.vscode-markdownlint"

__tests__/Speednote.test.tsx

@@ -380,18 +380,21 @@ test.each([
 		inputContent: "a".repeat(100),
 		inputTitle: "Long",
 	},
-])("able to get the share note in the proper format $constraint", async ({
-	inputTitle,
-	inputContent,
-	expectedEncodedTitle,
-	expectedEncodedContent,
-}) => {
-	const url = generateShareNoteUrl(inputTitle, inputContent);
-
-	expect(url).toStrictEqual(
-		`${window.location.href}?title=${expectedEncodedTitle}&content=${expectedEncodedContent}`,
-	);
-});
+])(
+	"able to get the share note in the proper format $constraint",
+	async ({
+		inputTitle,
+		inputContent,
+		expectedEncodedTitle,
+		expectedEncodedContent,
+	}) => {
+		const url = generateShareNoteUrl(inputTitle, inputContent);
+
+		expect(url).toStrictEqual(
+			`${window.location.href}?title=${expectedEncodedTitle}&content=${expectedEncodedContent}`,
+		);
+	},
+);
 
 // Note: I'd like to be able to test the navigation back to the `/` path, but
 // JSDOM doesn't support it, so it's ok. At the end, it's tested by Playwright as well,
@@ -468,16 +471,15 @@ test.each([
 		name: "invalid content only",
 		url: "?title=RW5jaGFudGVk&content=123",
 	},
-])("able to handle various formats of shared note url ($name)", async ({
-	url,
-	expectedTitle,
-	expectedContent,
-}) => {
-	renderWithProviders(url);
-
-	const { content, title } = await assertEditor();
-	expect(title).toHaveValue(expectedTitle);
-	expect(content).toHaveValue(expectedContent);
-	expect(title).toHaveAttribute("readOnly");
-	expect(content).toHaveAttribute("readOnly");
-});
+])(
+	"able to handle various formats of shared note url ($name)",
+	async ({ url, expectedTitle, expectedContent }) => {
+		renderWithProviders(url);
+
+		const { content, title } = await assertEditor();
+		expect(title).toHaveValue(expectedTitle);
+		expect(content).toHaveValue(expectedContent);
+		expect(title).toHaveAttribute("readOnly");
+		expect(content).toHaveAttribute("readOnly");
+	},
+);

app/editor/external-note-action.tsx

@@ -1,4 +1,4 @@
-import { useId, useState } from "react";
+import { type MouseEventHandler, useId, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "~/button";
 import { NoteStore } from "~/editor/store";
@@ -24,6 +24,10 @@ export const ExternalNoteAction = ({ onSave }: ExternalNoteActionProps) => {
 	const labelId = useId();
 	const [generatedUrl, setGeneratedUrl] = useState("");
 
+	const handleSelectURL: MouseEventHandler<HTMLTextAreaElement> = (e) => {
+		e.currentTarget.select();
+	};
+
 	const handleShareNote = async () => {
 		// Save the note initially, so that we're sure that the changes are committed.
 		await onSave();
@@ -64,7 +68,7 @@ export const ExternalNoteAction = ({ onSave }: ExternalNoteActionProps) => {
 							aria-labelledby={labelId}
 							className="text-[0.5rem]"
 							id={inputId}
-							onClick={({ currentTarget }) => currentTarget.select()}
+							onClick={handleSelectURL}
 							readOnly
 							type="generic"
 							value={generatedUrl}

app/editor/internal-note-action.tsx

@@ -30,7 +30,7 @@ export const InternalNoteAction = ({ onSave }: InternalNoteActionProps) => {
 		toast.info("Note cleared!");
 	};
 
-	const handleFreezeNote = async (nextValue: boolean) => {
+	const handleFreezeNote = (nextValue: boolean) => async () => {
 		setFrozen(nextValue);
 		await onSave();
 
@@ -54,7 +54,7 @@ export const InternalNoteAction = ({ onSave }: InternalNoteActionProps) => {
 				Clear content
 			</Button>
 
-			<Button onClick={() => handleFreezeNote(!isFrozen)}>
+			<Button onClick={handleFreezeNote(!isFrozen)}>
 				{isFrozen ? "Unfreeze note" : "Freeze note"}
 			</Button>
 

app/editor/note-editor.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { type ChangeEventHandler, useEffect } from "react";
 import { ExternalNoteAction } from "~/editor/external-note-action";
 import { setNotes } from "~/editor/indexed-db";
 import { InternalNoteAction } from "~/editor/internal-note-action";
@@ -42,11 +42,18 @@ const TitleEditor = () => {
 	const title = useNoteStore((state) => state.title);
 	const isFrozen = useNoteStore((state) => state.isFrozen);
 
+	const handleTitleChange: ChangeEventHandler<
+		HTMLTextAreaElement,
+		HTMLTextAreaElement
+	> = ({ currentTarget: { value } }) => {
+		setTitle(value, Date.now());
+	};
+
 	return (
 		<section>
 			<Input
 				aria-label="Note title"
-				onChange={({ currentTarget: { value } }) => setTitle(value, Date.now())}
+				onChange={handleTitleChange}
 				placeholder="Enter a title"
 				readOnly={isFrozen}
 				type="title"
@@ -60,13 +67,18 @@ const ContentEditor = () => {
 	const content = useNoteStore((state) => state.content);
 	const isFrozen = useNoteStore((state) => state.isFrozen);
 
+	const handleContentChange: ChangeEventHandler<
+		HTMLTextAreaElement,
+		HTMLTextAreaElement
+	> = ({ currentTarget: { value } }) => {
+		setContent(value, Date.now());
+	};
+
 	return (
 		<section>
 			<Input
 				aria-label="Note content"
-				onChange={({ currentTarget: { value } }) =>
-					setContent(value, Date.now())
-				}
+				onChange={handleContentChange}
 				placeholder="Start writing. Progress saves automatically."
 				readOnly={isFrozen}
 				type="content"

app/header.tsx

@@ -12,7 +12,7 @@ export const Header = () => {
 		<header className="flex justify-end gap-2">
 			<Button
 				aria-label="Color mode switch"
-				onClick={() => toggleColorTheme()}
+				onClick={toggleColorTheme}
 				variant="secondary"
 			>
 				{isDark ? "Lighten" : "Darken"}

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.4.4/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.5.6/schema.json",
 	"assist": {
 		"actions": {
 			"source": {
@@ -50,7 +50,7 @@
 					"level": "error"
 				}
 			},
-			"recommended": true,
+			"preset": "recommended",
 			"style": {
 				"noInferrableTypes": "error",
 				"noParameterAssign": "error",

package.json

@@ -16,43 +16,36 @@
 		"e2e-ci": "pnpm build && PRODUCTION_READY=1 pnpm e2e"
 	},
 	"dependencies": {
-		"@biomejs/biome": "2.5.2",
-		"@fontsource-variable/inter": "5.2.8",
-		"@playwright/test": "1.61.1",
-		"@tailwindcss/vite": "4.3.2",
+		"@biomejs/biome": "2.5.6",
+		"@fontsource-variable/inter": "5.3.0",
+		"@playwright/test": "1.62.0",
+		"@tailwindcss/vite": "4.3.3",
 		"@tanstack/react-store": "0.11.0",
 		"@testing-library/dom": "10.4.1",
-		"@testing-library/jest-dom": "6.9.1",
+		"@testing-library/jest-dom": "7.0.0",
 		"@testing-library/react": "16.3.2",
 		"@testing-library/user-event": "^14.6.1",
-		"@types/node": "26.1.0",
+		"@types/node": "26.1.2",
 		"@types/react": "19.2.17",
 		"@types/react-dom": "19.2.3",
-		"@vitejs/plugin-react": "6.0.3",
-		"@vitest/coverage-v8": "4.1.9",
+		"@vitejs/plugin-react": "6.0.4",
+		"@vitest/coverage-v8": "4.1.10",
 		"clsx": "^2.1.1",
 		"dexie": "4.4.4",
 		"fake-indexeddb": "6.2.5",
-		"jsdom": "29.1.1",
-		"postcss": "^8.5.16",
-		"react": "19.2.7",
-		"react-dom": "19.2.7",
+		"jsdom": "30.0.1",
+		"postcss": "^8.5.24",
+		"react": "19.2.8",
+		"react-dom": "19.2.8",
 		"react-textarea-autosize": "^8.5.9",
 		"sonner": "2.0.7",
 		"tailwind-merge": "3.6.0",
-		"tailwindcss": "4.3.2",
-		"typescript": "6.0.3",
+		"tailwindcss": "4.3.3",
+		"typescript": "7.0.2",
 		"valibot": "1.4.2",
-		"vite": "8.1.2",
+		"vite": "8.1.5",
 		"vite-plugin-pwa": "1.3.0",
-		"vitest": "4.1.9"
+		"vitest": "4.1.10"
 	},
-	"packageManager": "pnpm@10.28.1",
-	"pnpm": {
-		"onlyBuiltDependencies": [
-			"@biomejs/biome",
-			"@tailwindcss/oxide",
-			"esbuild"
-		]
-	}
+	"packageManager": "pnpm@11.22.0"
 }

playwright.config.ts

@@ -63,24 +63,6 @@ export default defineConfig({
 				...devices["Pixel 7"],
 			},
 		},
-		{
-			name: "Desktop Chrome HiDPI",
-			use: {
-				...devices["Desktop Chrome HiDPI"],
-			},
-		},
-		{
-			name: "Desktop Firefox HiDPI",
-			use: {
-				...devices["Desktop Firefox HiDPI"],
-			},
-		},
-		{
-			name: "Desktop Edge HiDPI",
-			use: {
-				...devices["Desktop Edge HiDPI"],
-			},
-		},
 	],
 	reporter: [["list"], ["html"]],
 	testDir: "e2e",