Release: 0.4.4

.github/workflows/quality.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup Biome
         uses: biomejs/setup-biome@v2
         with:
-          version: 2.1.3
+          version: 2.2.4
       - name: Run Biome
         run: biome ci --diagnostic-level=error .
   test:

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.1.3/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
 	"files": {
 		"ignoreUnknown": true
 	},

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "beatmapper",
-	"version": "0.4.3",
+	"version": "0.4.4",
 	"type": "module",
 	"private": true,
 	"packageManager": "yarn@4.9.2",
@@ -14,74 +14,74 @@
 		"test": "vitest"
 	},
 	"dependencies": {
-		"@ark-ui/react": "^5.18.3",
-		"@fontsource-variable/inconsolata": "^5.2.6",
+		"@ark-ui/react": "^5.23.0",
+		"@fontsource-variable/inconsolata": "^5.2.7",
 		"@fontsource-variable/oswald": "^5.2.6",
 		"@fontsource-variable/raleway": "^5.2.6",
-		"@react-spring/three": "^10.0.1",
-		"@react-spring/web": "^10.0.1",
-		"@react-three/drei": "^10.6.1",
+		"@react-spring/three": "^10.0.2",
+		"@react-spring/web": "^10.0.2",
+		"@react-three/drei": "^10.7.5",
 		"@react-three/fiber": "^9.3.0",
 		"@react-three/postprocessing": "^3.0.4",
-		"@reduxjs/toolkit": "^2.8.2",
-		"@std/collections": "jsr:^1.1.2",
+		"@reduxjs/toolkit": "^2.9.0",
+		"@standard-schema/spec": "^1.0.0",
+		"@std/collections": "jsr:^1.1.3",
 		"@std/media-types": "jsr:^1.1.0",
-		"@std/path": "jsr:^1.1.1",
+		"@std/path": "jsr:^1.1.2",
 		"@std/random": "jsr:^0.1.2",
-		"@std/text": "jsr:^1.0.15",
-		"@tanstack/react-form": "^1.18.0",
-		"@tanstack/react-pacer": "^0.14.0",
-		"@tanstack/react-query": "^5.84.1",
-		"@tanstack/react-router": "^1.130.12",
-		"@tanstack/react-router-devtools": "^1.130.13",
+		"@std/text": "jsr:^1.0.16",
+		"@tanstack/react-form": "^1.19.5",
+		"@tanstack/react-pacer": "^0.16.2",
+		"@tanstack/react-query": "^5.87.4",
+		"@tanstack/react-router": "^1.131.36",
+		"@tanstack/react-router-devtools": "^1.131.36",
 		"@tanstack/react-table": "^8.21.3",
-		"@zag-js/color-utils": "^1.21.1",
-		"@zag-js/file-utils": "^1.21.1",
-		"bsmap": "^2.2.8",
+		"@zag-js/color-utils": "^1.22.1",
+		"@zag-js/file-utils": "^1.22.1",
+		"bsmap": "^2.2.9",
 		"date-fns": "^4.1.0",
 		"fflate": "^0.8.2",
 		"file-saver": "^2.0.5",
 		"idb": "^8.0.3",
-		"lucide-react": "^0.536.0",
+		"lucide-react": "^0.543.0",
 		"react": "^19.1.1",
 		"react-dom": "^19.1.1",
 		"react-redux": "^9.2.0",
 		"redux-state-sync": "^3.1.4",
 		"redux-undo": "^1.1.0",
-		"rehype-expressive-code": "^0.41.3",
 		"three": "^0.174.0",
 		"three-stdlib": "^2.36.0",
-		"unstorage": "^1.16.1",
+		"unstorage": "^1.17.1",
 		"valibot": "^1.1.0",
 		"waveform-data": "^4.5.2"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "2.1.3",
-		"@pandacss/dev": "^1.0.0",
-		"@pandacss/preset-base": "^1.0.0",
-		"@standard-schema/spec": "^1.0.0",
-		"@tanstack/router-cli": "^1.130.15",
-		"@tanstack/router-plugin": "^1.130.15",
-		"@tanstack/virtual-file-routes": "^1.129.7",
+		"@biomejs/biome": "2.2.4",
+		"@pandacss/dev": "^1.3.0",
+		"@pandacss/preset-base": "^1.3.0",
+		"@tanstack/router-cli": "^1.131.36",
+		"@tanstack/router-plugin": "^1.131.36",
+		"@tanstack/virtual-file-routes": "^1.131.2",
 		"@types/file-saver": "^2.0.7",
-		"@types/node": "^22.17.0",
-		"@types/react": "^19.1.9",
-		"@types/react-dom": "^19.1.7",
+		"@types/node": "^22.18.1",
+		"@types/react": "^19.1.12",
+		"@types/react-dom": "^19.1.9",
 		"@types/redux-state-sync": "^3.1.10",
 		"@types/three": "^0.174.0",
 		"@velite/plugin-vite": "^0.0.1",
-		"@vite-pwa/assets-generator": "^1.0.0",
-		"@vitejs/plugin-react": "^4.7.0",
-		"concurrently": "^9.2.0",
-		"lefthook": "^1.12.2",
+		"@vite-pwa/assets-generator": "^1.0.1",
+		"@vitejs/plugin-react": "^5.0.2",
+		"concurrently": "^9.2.1",
+		"lefthook": "^1.12.4",
 		"mdx": "^0.3.1",
+		"rehype-expressive-code": "^0.41.3",
 		"rehype-github-alerts": "^4.1.1",
 		"rehype-slug": "^6.0.0",
 		"remark-gfm": "^4.0.1",
 		"typescript": "^5.9.2",
-		"velite": "^0.2.4",
-		"vite": "^7.0.6",
-		"vite-plugin-pwa": "^1.0.2",
+		"velite": "^0.3.0",
+		"vite": "^7.1.5",
+		"vite-plugin-pwa": "^1.0.3",
 		"vitest": "^3.2.4"
 	},
 	"resolutions": {

src/components/app/compositions/file-upload.tsx

@@ -9,13 +9,13 @@ import { useAppDispatch, useAppSelector } from "$/store/hooks";
 import { selectSongIds } from "$/store/selectors";
 
 export function LocalFileUpload({ filename, children, ...rest }: ComponentProps<typeof FileUpload> & { filename: string }) {
-	const { data: currentFile, isSuccess } = useLocalFileQuery(filename, {
+	const { data: currentFiles, isSuccess } = useLocalFileQuery(filename, {
 		queryKeySuffix: "picker",
 		transform: (file) => (file ? [file] : []),
 	});
 
 	return (
-		<FileUpload {...rest} key={`${filename}.${isSuccess}`} files={currentFile}>
+		<FileUpload {...rest} key={`${filename}.${isSuccess}`} acceptedFiles={currentFiles}>
 			{children}
 		</FileUpload>
 	);
@@ -48,5 +48,3 @@ export function MapArchiveFileUpload({ onFileAccept, ...rest }: ComponentProps<t
 		</FileUpload>
 	);
 }
-
-export default MapArchiveFileUpload;

src/components/app/constants.ts

@@ -20,7 +20,7 @@ export const EDITOR_TOASTER = createToaster({
 	max: 1,
 });
 
-export const SONG_FILE_ACCEPT_TYPE: FileMimeType[] = ["audio/ogg"];
+export const SONG_FILE_ACCEPT_TYPE: FileMimeType[] = ["audio/ogg", "application/ogg"];
 export const COVER_ART_FILE_ACCEPT_TYPE: FileMimeType[] = ["image/jpeg", "image/png"];
 export const MAP_ARCHIVE_FILE_ACCEPT_TYPE: FileMimeType[] = ["application/zip", "application/x-zip-compressed", "application/octet-stream"];
 
@@ -41,8 +41,9 @@ export const ENVIRONMENT_COLLECTION = createListCollection({
 });
 
 export const VERSION_COLLECTION = createListCollection({
-	items: ["1", "2", "3", "4"],
-	itemToString: (item) => ["1.5.0", "2.6.0", "3.3.0", "4.1.0"][Number.parseInt(item) - 1],
+	items: ["4", "3", "2", "1"].map((x, i) => ({ value: x, index: i })),
+	itemToString: (item) => ["v4", "v3", "v2", "v1"][item.index],
+	isItemDisabled: (item) => item.value === "1",
 });
 
 export const SNAPPING_INCREMENT_LIST_COLLECTION = createListCollection({
@@ -72,16 +73,15 @@ export function createBeatmapListCollection({ beatmapIds }: BeatmapListCollectio
 
 interface BeatmapCharacteristicListCollection {
 	beatmaps: App.IBeatmap[];
-	currentBeatmap?: App.IBeatmap;
 }
-export function createBeatmapCharacteristicListCollection({ beatmaps, currentBeatmap }: BeatmapCharacteristicListCollection) {
+export function createBeatmapCharacteristicListCollection({ beatmaps }: BeatmapCharacteristicListCollection) {
 	return createListCollection({
 		items: CHARACTERISTIC_COLLECTION.items,
 		itemToString: (item) => CharacteristicRename[item.value],
 		isItemDisabled: (item) => {
 			const withMatchingCharacteristic = beatmaps.filter((beatmap) => beatmap.characteristic === item.value);
 			if (withMatchingCharacteristic.length >= DIFFICULTY_COLLECTION.size) return true;
-			return currentBeatmap?.characteristic === item.value;
+			return false;
 		},
 	});
 }

src/components/app/forms/create-beatmap.tsx

@@ -12,6 +12,11 @@ import { useAppSelector } from "$/store/hooks";
 import { selectAllBeatmaps, selectBeatmapById } from "$/store/selectors";
 import type { BeatmapId, SongId } from "$/types";
 
+const SCHEMA = object({
+	characteristic: CharacteristicNameSchema,
+	difficulty: DifficultyNameSchema,
+});
+
 interface Props {
 	dialog?: UseDialogContext;
 	sid: SongId;
@@ -25,14 +30,13 @@ function CreateBeatmapForm({ dialog, sid, bid, onSubmit: afterCreate, children }
 
 	const Form = useAppForm({
 		defaultValues: {
-			characteristic: "" as CharacteristicName,
-			difficulty: "" as DifficultyName,
+			characteristic: null as unknown as CharacteristicName,
+			difficulty: null as unknown as DifficultyName,
 		},
 		validators: {
-			onChange: object({
-				characteristic: CharacteristicNameSchema,
-				difficulty: DifficultyNameSchema,
-			}),
+			onMount: SCHEMA,
+			onChange: SCHEMA,
+			onSubmit: SCHEMA,
 		},
 		onSubmit: async ({ value }) => {
 			const withMatchingCharacteristic = beatmaps.filter((beatmap) => beatmap.characteristic === value.characteristic);
@@ -60,14 +64,14 @@ function CreateBeatmapForm({ dialog, sid, bid, onSubmit: afterCreate, children }
 
 	const selectedCharacteristic = useStore(Form.store, (state) => state.values.characteristic);
 
-	const CHARACTERISTIC_LIST_COLLECTION = useMemo(() => createBeatmapCharacteristicListCollection({ beatmaps, currentBeatmap }), [beatmaps, currentBeatmap]);
+	const CHARACTERISTIC_LIST_COLLECTION = useMemo(() => createBeatmapCharacteristicListCollection({ beatmaps }), [beatmaps]);
 	const DIFFICULTY_LIST_COLLECTION = useMemo(() => createBeatmapDifficultyListCollection({ beatmaps, currentBeatmap, selectedCharacteristic: selectedCharacteristic }), [beatmaps, currentBeatmap, selectedCharacteristic]);
 
 	return (
 		<Form.AppForm>
 			<Form.Root>
-				<Form.AppField name="characteristic">{(ctx) => <ctx.RadioButtonGroup label="Beatmap Characteristic" collection={CHARACTERISTIC_LIST_COLLECTION} />}</Form.AppField>
-				<Form.AppField name="difficulty">{(ctx) => <ctx.RadioButtonGroup label="Beatmap Difficulty" collection={DIFFICULTY_LIST_COLLECTION} />}</Form.AppField>
+				<Form.AppField name="characteristic">{(ctx) => <ctx.RadioButtonGroup label="Beatmap Characteristic" required collection={CHARACTERISTIC_LIST_COLLECTION} />}</Form.AppField>
+				<Form.AppField name="difficulty">{(ctx) => <ctx.RadioButtonGroup label="Beatmap Difficulty" required collection={DIFFICULTY_LIST_COLLECTION} />}</Form.AppField>
 				<Form.Submit>
 					<Form.Subscribe>{(ctx) => children({ id: ctx.values.difficulty })}</Form.Subscribe>
 				</Form.Submit>

src/components/app/forms/create-map.tsx

@@ -11,6 +11,19 @@ import { addSong } from "$/store/actions";
 import { useAppDispatch, useAppSelector } from "$/store/hooks";
 import { selectSongIds, selectUsername } from "$/store/selectors";
 
+const SCHEMA = object({
+	name: pipe(string(), minLength(1)),
+	subName: pipe(string()),
+	artistName: pipe(string(), minLength(1)),
+	bpm: pipe(number(), gtValue(0)),
+	offset: pipe(
+		number(),
+		transform((input) => (Number.isNaN(input) ? undefined : input)),
+	),
+	characteristic: CharacteristicNameSchema,
+	difficulty: DifficultyNameSchema,
+});
+
 interface Props {
 	dialog?: UseDialogContext;
 }
@@ -35,30 +48,21 @@ function CreateMapForm({ dialog }: Props) {
 			difficulty: "Easy" as DifficultyName,
 		},
 		validators: {
-			onChange: object({
-				name: pipe(string(), minLength(1)),
-				subName: pipe(string()),
-				artistName: pipe(string(), minLength(1)),
-				bpm: pipe(number(), gtValue(0)),
-				offset: pipe(
-					number(),
-					transform((input) => (Number.isNaN(input) ? undefined : input)),
-				),
-				characteristic: CharacteristicNameSchema,
-				difficulty: DifficultyNameSchema,
-			}),
+			onMount: SCHEMA,
+			onChange: SCHEMA,
+			onSubmit: SCHEMA,
 		},
 		onSubmit: async ({ value }) => {
-			if (!coverArtFile) {
+			if (!songFile) {
 				return APP_TOASTER.create({
 					type: "error",
-					description: "Please select a cover art file first",
+					description: "Please select a song file first",
 				});
 			}
-			if (!songFile) {
+			if (!coverArtFile) {
 				return APP_TOASTER.create({
 					type: "error",
-					description: "Please select a song file first",
+					description: "Please select a cover art file first",
 				});
 			}
 
@@ -93,12 +97,12 @@ function CreateMapForm({ dialog }: Props) {
 		<Form.AppForm>
 			<Form.Row>
 				<Field label="Song File">
-					<FileUpload accept={SONG_FILE_ACCEPT_TYPE} files={songFile ? [songFile] : []} onFileAccept={(details) => setSongFile(details.files[0])}>
+					<FileUpload accept={SONG_FILE_ACCEPT_TYPE} acceptedFiles={songFile ? [songFile] : []} onFileAccept={(details) => setSongFile(details.files[0])}>
 						Audio File
 					</FileUpload>
 				</Field>
 				<Field label="Cover Art File">
-					<FileUpload accept={COVER_ART_FILE_ACCEPT_TYPE} files={coverArtFile ? [coverArtFile] : []} onFileAccept={(details) => setCoverArtFile(details.files[0])}>
+					<FileUpload accept={COVER_ART_FILE_ACCEPT_TYPE} acceptedFiles={coverArtFile ? [coverArtFile] : []} onFileAccept={(details) => setCoverArtFile(details.files[0])}>
 						Image File
 					</FileUpload>
 				</Field>

src/components/app/forms/import-map.tsx

@@ -2,7 +2,7 @@ import type { UseDialogContext } from "@ark-ui/react/dialog";
 import { useCallback } from "react";
 import { Fragment } from "react/jsx-runtime";
 
-import MapArchiveFileUpload from "$/components/app/compositions/file-upload";
+import { MapArchiveFileUpload } from "$/components/app/compositions/file-upload";
 import { List, Text } from "$/components/ui/compositions";
 import { useAppSelector } from "$/store/hooks";
 import { selectProcessingImport } from "$/store/selectors";

src/components/app/forms/update-beatmap.tsx

@@ -4,7 +4,7 @@ import { CharacteristicRename, DifficultyRename, EnvironmentAllNameSchema } from
 import type { CharacteristicName, DifficultyName } from "bsmap/types";
 import { DotIcon } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
-import { array, number, object, pipe, string, transform } from "valibot";
+import { array, minValue, number, object, pipe, string, transform } from "valibot";
 
 import { APP_TOASTER, createColorSchemeCollection, ENVIRONMENT_COLLECTION } from "$/components/app/constants";
 import { CreateBeatmapForm } from "$/components/app/forms";
@@ -17,6 +17,20 @@ import { selectBeatmapById, selectBeatmaps, selectColorSchemeIds } from "$/store
 import type { BeatmapId, SongId } from "$/types";
 import { HStack, Stack, Wrap } from "$:styled-system/jsx";
 
+const SCHEMA = object({
+	lightshowId: string(),
+	noteJumpSpeed: pipe(number(), minValue(0)),
+	startBeatOffset: number(),
+	environmentName: EnvironmentAllNameSchema,
+	colorSchemeName: string(),
+	mappers: array(string()),
+	lighters: array(string()),
+	customLabel: pipe(
+		string(),
+		transform((input) => (input === "" ? undefined : input)),
+	),
+});
+
 interface Props {
 	sid: SongId;
 	bid: BeatmapId;
@@ -42,19 +56,9 @@ function UpdateBeatmapForm({ sid, bid }: Props) {
 			customLabel: savedVersion.customLabel ?? "",
 		},
 		validators: {
-			onChange: object({
-				lightshowId: string(),
-				noteJumpSpeed: number(),
-				startBeatOffset: number(),
-				environmentName: EnvironmentAllNameSchema,
-				colorSchemeName: string(),
-				mappers: array(string()),
-				lighters: array(string()),
-				customLabel: pipe(
-					string(),
-					transform((input) => (input === "" ? undefined : input)),
-				),
-			}),
+			onMount: SCHEMA,
+			onChange: SCHEMA,
+			onSubmit: SCHEMA,
 		},
 		onSubmit: async ({ value, formApi }) => {
 			dispatch(
@@ -117,7 +121,7 @@ function UpdateBeatmapForm({ sid, bid }: Props) {
 
 	return (
 		<Form.AppForm>
-			{status === "blocked" && <AlertDialogProvider value={isDirtyAlert} render={() => `You have unsaved changes! Are you sure you want to leave this page?\n\n(You tweaked a value for the "${bid}" beatmap)`} onSubmit={proceed} onCancel={reset} />}
+			{status === "blocked" && <AlertDialogProvider value={isDirtyAlert} render={() => <Text>You have unsaved changes! Are you sure you want to leave this page? (You tweaked a value for the "{bid}" beatmap)</Text>} onSubmit={proceed} onCancel={reset} />}
 			<Form.Root size="sm">
 				<Stack gap={1}>
 					<Heading rank={3}>{savedVersion.customLabel ?? bid}</Heading>