From 40e3607678addaa2fe3ccee3e75d71286c94cc0d Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 31 Dec 2025 13:16:54 -0800
Subject: [PATCH 01/83] update add files copy and go to next step on just one
 file

---
 .../create-project-version/stages/AddFilesStage.vue  |  7 +++++++
 .../ui/src/components/base/DropzoneFileInput.vue     | 12 +++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index 04623601b1..23a2a9f802 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -7,6 +7,8 @@
 				:accept="acceptFileFromProjectType(projectV2.project_type)"
 				:max-size="524288000"
 				@change="handleNewFiles"
+				primary-prompt="Upload primary and supporting files"
+				secondary-prompt="Drag and drop files or click to browse"
 			/>
 		</template>
 
@@ -110,6 +112,7 @@ const {
 	setPrimaryFile,
 	setInferredVersionData,
 	editingVersion,
+	modal,
 } = injectManageVersionContext()
 
 const addDetectedData = async () => {
@@ -149,6 +152,10 @@ function handleNewFiles(newFiles: File[]) {
 	if (primaryFileIndex !== null) {
 		if (primaryFileIndex) setPrimaryFile(primaryFileIndex)
 	}
+
+	if (newFiles.length === 1) {
+		modal.value?.nextStage()
+	}
 }
 
 function handleRemoveFile(index: number) {
diff --git a/packages/ui/src/components/base/DropzoneFileInput.vue b/packages/ui/src/components/base/DropzoneFileInput.vue
index 616ac6dcb6..ad6185f913 100644
--- a/packages/ui/src/components/base/DropzoneFileInput.vue
+++ b/packages/ui/src/components/base/DropzoneFileInput.vue
@@ -46,9 +46,9 @@
 </template>
 
 <script setup lang="ts">
-import { FolderUpIcon } from '@modrinth/assets'
-import { fileIsValid } from '@modrinth/utils'
-import { ref } from 'vue'
+import { FolderUpIcon } from '@modrinth/assets';
+import { fileIsValid } from '@modrinth/utils';
+import { ref } from 'vue';
 
 const fileInput = ref<HTMLInputElement | null>(null)
 
@@ -58,7 +58,6 @@ const emit = defineEmits<{
 
 const props = withDefaults(
 	defineProps<{
-		prompt?: string
 		primaryPrompt?: string | null
 		secondaryPrompt?: string | null
 		multiple?: boolean
@@ -69,9 +68,8 @@ const props = withDefaults(
 		size?: 'small' | 'standard'
 	}>(),
 	{
-		prompt: 'Drag and drop files or click to browse',
-		primaryPrompt: 'Drag and drop files or click to browse',
-		secondaryPrompt: 'You can try to drag files or folder or click this area to select it',
+		primaryPrompt: 'Drop files here or click to upload',
+		secondaryPrompt: 'Only supported file types will be accepted',
 		size: 'standard',
 	},
 )

From 312490b3945efbc84838a42420fbb453119c0c84 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 31 Dec 2025 13:40:30 -0800
Subject: [PATCH 02/83] rename and reorder stages

---
 ...denciesStage.vue => DependenciesStage.vue} |  0
 .../{AddDetailsStage.vue => DetailsStage.vue} |  0
 ...ironmentStage.vue => EnvironmentStage.vue} |  0
 .../{AddLoadersStage.vue => LoadersStage.vue} |  0
 ...cVersionsStage.vue => McVersionsStage.vue} |  0
 .../stages/MetadataStage.vue                  |  0
 .../{add-files.ts => add-files-stage.ts}      |  0
 ...c-versions.ts => add-mc-versions-stage.ts} |  6 ++--
 ...-dependencies.ts => dependencies-stage.ts} |  4 +--
 .../{add-details.ts => details-stage.ts}      | 12 +++----
 ...dd-environment.ts => environment-stage.ts} |  6 ++--
 .../src/providers/version/stages/index.ts     | 32 +++++++++----------
 .../{add-loaders.ts => loaders-stage.ts}      |  6 ++--
 13 files changed, 33 insertions(+), 33 deletions(-)
 rename apps/frontend/src/components/ui/create-project-version/stages/{AddDependenciesStage.vue => DependenciesStage.vue} (100%)
 rename apps/frontend/src/components/ui/create-project-version/stages/{AddDetailsStage.vue => DetailsStage.vue} (100%)
 rename apps/frontend/src/components/ui/create-project-version/stages/{AddEnvironmentStage.vue => EnvironmentStage.vue} (100%)
 rename apps/frontend/src/components/ui/create-project-version/stages/{AddLoadersStage.vue => LoadersStage.vue} (100%)
 rename apps/frontend/src/components/ui/create-project-version/stages/{AddMcVersionsStage.vue => McVersionsStage.vue} (100%)
 create mode 100644 apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
 rename apps/frontend/src/providers/version/stages/{add-files.ts => add-files-stage.ts} (100%)
 rename apps/frontend/src/providers/version/stages/{add-mc-versions.ts => add-mc-versions-stage.ts} (89%)
 rename apps/frontend/src/providers/version/stages/{add-dependencies.ts => dependencies-stage.ts} (87%)
 rename apps/frontend/src/providers/version/stages/{add-details.ts => details-stage.ts} (81%)
 rename apps/frontend/src/providers/version/stages/{add-environment.ts => environment-stage.ts} (89%)
 rename apps/frontend/src/providers/version/stages/{add-loaders.ts => loaders-stage.ts} (90%)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddDependenciesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
similarity index 100%
rename from apps/frontend/src/components/ui/create-project-version/stages/AddDependenciesStage.vue
rename to apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
similarity index 100%
rename from apps/frontend/src/components/ui/create-project-version/stages/AddDetailsStage.vue
rename to apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddEnvironmentStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/EnvironmentStage.vue
similarity index 100%
rename from apps/frontend/src/components/ui/create-project-version/stages/AddEnvironmentStage.vue
rename to apps/frontend/src/components/ui/create-project-version/stages/EnvironmentStage.vue
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddLoadersStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
similarity index 100%
rename from apps/frontend/src/components/ui/create-project-version/stages/AddLoadersStage.vue
rename to apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddMcVersionsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
similarity index 100%
rename from apps/frontend/src/components/ui/create-project-version/stages/AddMcVersionsStage.vue
rename to apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/frontend/src/providers/version/stages/add-files.ts b/apps/frontend/src/providers/version/stages/add-files-stage.ts
similarity index 100%
rename from apps/frontend/src/providers/version/stages/add-files.ts
rename to apps/frontend/src/providers/version/stages/add-files-stage.ts
diff --git a/apps/frontend/src/providers/version/stages/add-mc-versions.ts b/apps/frontend/src/providers/version/stages/add-mc-versions-stage.ts
similarity index 89%
rename from apps/frontend/src/providers/version/stages/add-mc-versions.ts
rename to apps/frontend/src/providers/version/stages/add-mc-versions-stage.ts
index 3e141e7fec..dd059bf9ad 100644
--- a/apps/frontend/src/providers/version/stages/add-mc-versions.ts
+++ b/apps/frontend/src/providers/version/stages/add-mc-versions-stage.ts
@@ -2,13 +2,13 @@ import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'
 
-import AddMcVersionsStage from '~/components/ui/create-project-version/stages/AddMcVersionsStage.vue'
+import McVersionsStage from '~/components/ui/create-project-version/stages/McVersionsStage.vue'
 
 import type { ManageVersionContextValue } from '../manage-version-modal'
 
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-mc-versions',
-	stageContent: markRaw(AddMcVersionsStage),
+	stageContent: markRaw(McVersionsStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit game versions' : 'Add game versions'),
 	skip: (ctx) =>
 		(ctx.inferredVersionData.value?.game_versions?.length ?? 0) > 0 || ctx.editingVersion.value,
@@ -28,7 +28,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 
 export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'from-details-mc-versions',
-	stageContent: markRaw(AddMcVersionsStage),
+	stageContent: markRaw(McVersionsStage),
 	title: 'Edit game versions',
 	nonProgressStage: true,
 	leftButtonConfig: (ctx) => ({
diff --git a/apps/frontend/src/providers/version/stages/add-dependencies.ts b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
similarity index 87%
rename from apps/frontend/src/providers/version/stages/add-dependencies.ts
rename to apps/frontend/src/providers/version/stages/dependencies-stage.ts
index c5f730df2a..afa1765505 100644
--- a/apps/frontend/src/providers/version/stages/add-dependencies.ts
+++ b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
@@ -2,13 +2,13 @@ import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'
 
-import AddDependenciesStage from '~/components/ui/create-project-version/stages/AddDependenciesStage.vue'
+import DependenciesStage from '~/components/ui/create-project-version/stages/DependenciesStage.vue'
 
 import type { ManageVersionContextValue } from '../manage-version-modal'
 
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-dependencies',
-	stageContent: markRaw(AddDependenciesStage),
+	stageContent: markRaw(DependenciesStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit dependencies' : 'Add dependencies'),
 	skip: (ctx) => ctx.projectType.value === 'modpack',
 	leftButtonConfig: (ctx) =>
diff --git a/apps/frontend/src/providers/version/stages/add-details.ts b/apps/frontend/src/providers/version/stages/details-stage.ts
similarity index 81%
rename from apps/frontend/src/providers/version/stages/add-details.ts
rename to apps/frontend/src/providers/version/stages/details-stage.ts
index 51877005db..26d51c0ac2 100644
--- a/apps/frontend/src/providers/version/stages/add-details.ts
+++ b/apps/frontend/src/providers/version/stages/details-stage.ts
@@ -1,14 +1,14 @@
-import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
-import type { StageConfigInput } from '@modrinth/ui'
-import { markRaw } from 'vue'
+import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets';
+import type { StageConfigInput } from '@modrinth/ui';
+import { markRaw } from 'vue';
 
-import AddDetailsStage from '~/components/ui/create-project-version/stages/AddDetailsStage.vue'
 
-import type { ManageVersionContextValue } from '../manage-version-modal'
+import DetailsStage from '~/components/ui/create-project-version/stages/DetailsStage.vue';
+import type { ManageVersionContextValue } from '../manage-version-modal';
 
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-details',
-	stageContent: markRaw(AddDetailsStage),
+	stageContent: markRaw(DetailsStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit details' : 'Add details'),
 	leftButtonConfig: (ctx) =>
 		ctx.editingVersion.value
diff --git a/apps/frontend/src/providers/version/stages/add-environment.ts b/apps/frontend/src/providers/version/stages/environment-stage.ts
similarity index 89%
rename from apps/frontend/src/providers/version/stages/add-environment.ts
rename to apps/frontend/src/providers/version/stages/environment-stage.ts
index 0f5ad47378..8f7b20b3b3 100644
--- a/apps/frontend/src/providers/version/stages/add-environment.ts
+++ b/apps/frontend/src/providers/version/stages/environment-stage.ts
@@ -2,13 +2,13 @@ import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'
 
-import AddEnvironmentStage from '~/components/ui/create-project-version/stages/AddEnvironmentStage.vue'
+import EnvironmentStage from '~/components/ui/create-project-version/stages/EnvironmentStage.vue'
 
 import type { ManageVersionContextValue } from '../manage-version-modal'
 
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-environment',
-	stageContent: markRaw(AddEnvironmentStage),
+	stageContent: markRaw(EnvironmentStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit environment' : 'Add environment'),
 	skip: (ctx) =>
 		ctx.noEnvironmentProject.value ||
@@ -30,7 +30,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 
 export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'from-details-environment',
-	stageContent: markRaw(AddEnvironmentStage),
+	stageContent: markRaw(EnvironmentStage),
 	title: 'Edit environment',
 	nonProgressStage: true,
 	leftButtonConfig: (ctx) => ({
diff --git a/apps/frontend/src/providers/version/stages/index.ts b/apps/frontend/src/providers/version/stages/index.ts
index 1e034ad131..6459bad360 100644
--- a/apps/frontend/src/providers/version/stages/index.ts
+++ b/apps/frontend/src/providers/version/stages/index.ts
@@ -1,30 +1,30 @@
 import { stageConfig as addChangelogStageConfig } from './add-changelog'
-import { stageConfig as addDependenciesStageConfig } from './add-dependencies'
-import { stageConfig as addDetailsStageConfig } from './add-details'
+import { stageConfig as addFilesStageConfig } from './add-files-stage'
+import {
+	stageConfig as addMcVersionsStageConfig,
+	fromDetailsStageConfig as fromDetailsMcVersionsStageConfig,
+} from './add-mc-versions-stage'
+import { stageConfig as addDependenciesStageConfig } from './dependencies-stage'
+import { stageConfig as addDetailsStageConfig } from './details-stage'
 import {
-	fromDetailsStageConfig as editEnvironmentStageConfig,
 	stageConfig as addEnvironmentStageConfig,
-} from './add-environment'
-import { stageConfig as addFilesStageConfig } from './add-files'
+	fromDetailsStageConfig as fromDetailsEnvironmentStageConfig,
+} from './environment-stage'
 import {
-	fromDetailsStageConfig as editLoadersStageConfig,
 	stageConfig as addLoadersStageConfig,
-} from './add-loaders'
-import {
-	fromDetailsStageConfig as editMcVersionsStageConfig,
-	stageConfig as addMcVersionsStageConfig,
-} from './add-mc-versions'
+	fromDetailsStageConfig as fromDetailsLoadersStageConfig,
+} from './loaders-stage'
 
 export const stageConfigs = [
 	addFilesStageConfig,
-	addDetailsStageConfig,
 	addLoadersStageConfig,
 	addMcVersionsStageConfig,
 	addEnvironmentStageConfig,
 	addDependenciesStageConfig,
-	addChangelogStageConfig,
+	addDetailsStageConfig, // to be renamed metadata stage
+	addChangelogStageConfig, // to be renamed details stage
 	// Non-progress stages for editing from details page
-	editLoadersStageConfig,
-	editMcVersionsStageConfig,
-	editEnvironmentStageConfig,
+	fromDetailsLoadersStageConfig,
+	fromDetailsMcVersionsStageConfig,
+	fromDetailsEnvironmentStageConfig,
 ]
diff --git a/apps/frontend/src/providers/version/stages/add-loaders.ts b/apps/frontend/src/providers/version/stages/loaders-stage.ts
similarity index 90%
rename from apps/frontend/src/providers/version/stages/add-loaders.ts
rename to apps/frontend/src/providers/version/stages/loaders-stage.ts
index d4f2f61f92..874c6821ac 100644
--- a/apps/frontend/src/providers/version/stages/add-loaders.ts
+++ b/apps/frontend/src/providers/version/stages/loaders-stage.ts
@@ -2,13 +2,13 @@ import { LeftArrowIcon, RightArrowIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'
 
-import AddLoadersStage from '~/components/ui/create-project-version/stages/AddLoadersStage.vue'
+import LoadersStage from '~/components/ui/create-project-version/stages/LoadersStage.vue'
 
 import type { ManageVersionContextValue } from '../manage-version-modal'
 
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-loaders',
-	stageContent: markRaw(AddLoadersStage),
+	stageContent: markRaw(LoadersStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit loaders' : 'Add loaders'),
 	skip: (ctx) =>
 		ctx.noLoadersProject.value ||
@@ -30,7 +30,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 
 export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'from-details-loaders',
-	stageContent: markRaw(AddLoadersStage),
+	stageContent: markRaw(LoadersStage),
 	title: 'Edit loaders',
 	nonProgressStage: true,
 	leftButtonConfig: (ctx) => ({

From c4c278245d1284eb3f70c100bfb0717b3fb5a418 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 31 Dec 2025 15:58:58 -0800
Subject: [PATCH 03/83] add metadata stage and update details stage

---
 .vscode/settings.json                         |   2 +-
 .../stages/AddChangelogStage.vue              |  23 --
 .../stages/AddFilesStage.vue                  |  11 +-
 .../stages/DependenciesStage.vue              |   6 +-
 .../stages/DetailsStage.vue                   | 239 ++----------------
 .../stages/MetadataStage.vue                  | 221 ++++++++++++++++
 .../providers/version/manage-version-modal.ts |   5 +
 .../version/stages/add-files-stage.ts         |   4 +-
 .../src/providers/version/stages/index.ts     |  34 +--
 ...versions-stage.ts => mc-versions-stage.ts} |   0
 .../version/stages/metadata-stage.ts          |  34 +++
 11 files changed, 313 insertions(+), 266 deletions(-)
 delete mode 100644 apps/frontend/src/components/ui/create-project-version/stages/AddChangelogStage.vue
 rename apps/frontend/src/providers/version/stages/{add-mc-versions-stage.ts => mc-versions-stage.ts} (100%)
 create mode 100644 apps/frontend/src/providers/version/stages/metadata-stage.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 243953fd4e..23c66ecb22 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,7 +13,7 @@
 	},
 	"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
 	"[vue]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[typescript]": {
 		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddChangelogStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddChangelogStage.vue
deleted file mode 100644
index 45d4944688..0000000000
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddChangelogStage.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-	<div class="w-full">
-		<MarkdownEditor
-			v-model="draftVersion.changelog"
-			:on-image-upload="onImageUpload"
-			:max-height="500"
-		/>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { MarkdownEditor } from '@modrinth/ui'
-
-import { useImageUpload } from '~/composables/image-upload.ts'
-import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
-
-const { draftVersion } = injectManageVersionContext()
-
-async function onImageUpload(file: File) {
-	const response = await useImageUpload(file, { context: 'version' })
-	return response.url
-}
-</script>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index 23a2a9f802..ece69601fb 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -1,6 +1,8 @@
 <template>
 	<div class="flex w-full flex-col gap-4 sm:w-[512px]">
-		<template v-if="!(filesToAdd.length || draftVersion.existing_files?.length)">
+		<template
+			v-if="handlingNewFiles || !(filesToAdd.length || draftVersion.existing_files?.length)"
+		>
 			<DropzoneFileInput
 				aria-label="Upload file"
 				multiple
@@ -109,6 +111,7 @@ const {
 	draftVersion,
 	filesToAdd,
 	existingFilesToDelete,
+	handlingNewFiles,
 	setPrimaryFile,
 	setInferredVersionData,
 	editingVersion,
@@ -143,7 +146,8 @@ watch(
 	() => addDetectedData(),
 )
 
-function handleNewFiles(newFiles: File[]) {
+async function handleNewFiles(newFiles: File[]) {
+	handlingNewFiles.value = true
 	// detect primary file if no primary file is set
 	const primaryFileIndex = primaryFile.value ? null : detectPrimaryFileIndex(newFiles)
 
@@ -154,8 +158,11 @@ function handleNewFiles(newFiles: File[]) {
 	}
 
 	if (newFiles.length === 1) {
+		await addDetectedData()
 		modal.value?.nextStage()
 	}
+
+	handlingNewFiles.value = false
 }
 
 function handleRemoveFile(index: number) {
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
index c8878cc7ce..8de5dc6e08 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
@@ -4,7 +4,7 @@
 			<span class="font-semibold text-contrast">Add dependency</span>
 			<div class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 p-4">
 				<div class="grid gap-2.5">
-					<span class="font-semibold text-contrast">Project <span class="text-red">*</span></span>
+					<span class="font-semibold text-contrast">Project</span>
 					<DependencySelect v-model="newDependencyProjectId" />
 				</div>
 
@@ -90,7 +90,7 @@ import {
 	injectNotificationManager,
 	injectProjectPageContext,
 } from '@modrinth/ui'
-import type { DropdownOption } from '@modrinth/ui/src/components/base/Combobox.vue'
+import type { ComboboxOption } from '@modrinth/ui/src/components/base/Combobox.vue'
 
 import DependencySelect from '~/components/ui/create-project-version/components/DependencySelect.vue'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
@@ -113,7 +113,7 @@ const newDependencyProjectId = ref<string>()
 const newDependencyType = ref<Labrinth.Versions.v2.DependencyType>('required')
 const newDependencyVersionId = ref<string | null>(null)
 
-const newDependencyVersions = ref<DropdownOption<string>[]>([])
+const newDependencyVersions = ref<ComboboxOption<string>[]>([])
 
 const projectsFetchLoading = ref(false)
 const suggestedDependencies = ref<
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
index 988d064585..b695704d63 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-6 sm:w-[512px]">
+	<div class="flex w-full flex-col gap-6">
 		<div class="flex flex-col gap-2">
 			<span class="font-semibold text-contrast">
 				Version type <span class="text-red">*</span>
@@ -36,237 +36,36 @@
 				maxlength="256"
 			/>
 		</div>
-
-		<template v-if="!noLoadersProject && (inferredVersionData?.loaders?.length || editingVersion)">
-			<div class="flex flex-col gap-1">
-				<div class="flex items-center justify-between">
-					<span class="font-semibold text-contrast">
-						{{ usingDetectedLoaders ? 'Detected loaders' : 'Loaders' }}
-					</span>
-
-					<ButtonStyled type="transparent" size="standard">
-						<button
-							v-tooltip="isModpack ? 'Modpack versions cannot be edited' : undefined"
-							:disabled="isModpack"
-							@click="editLoaders"
-						>
-							<EditIcon />
-							Edit
-						</button>
-					</ButtonStyled>
-				</div>
-
-				<div
-					class="flex flex-col gap-1.5 gap-y-4 rounded-xl border border-solid border-surface-5 p-3 py-4"
-				>
-					<div class="flex flex-wrap gap-2">
-						<template
-							v-for="loader in draftVersionLoaders.map((selectedLoader) =>
-								loaders.find((loader) => selectedLoader === loader.name),
-							)"
-						>
-							<TagItem
-								v-if="loader"
-								:key="`loader-${loader.name}`"
-								class="border !border-solid border-surface-5 hover:no-underline"
-								:style="`--_color: var(--color-platform-${loader.name})`"
-							>
-								<div v-html="loader.icon"></div>
-								{{ formatCategory(loader.name) }}
-							</TagItem>
-						</template>
-
-						<span v-if="!draftVersion.loaders.length">No loaders selected.</span>
-					</div>
-				</div>
-			</div>
-		</template>
-
-		<template v-if="inferredVersionData?.game_versions?.length || editingVersion">
-			<div class="flex flex-col gap-1">
-				<div class="flex items-center justify-between">
-					<span class="font-semibold text-contrast">
-						{{ usingDetectedVersions ? 'Detected versions' : 'Versions' }}
-					</span>
-
-					<ButtonStyled type="transparent" size="standard">
-						<button
-							v-tooltip="isModpack ? 'Modpack versions cannot be edited' : undefined"
-							:disabled="isModpack"
-							@click="editVersions"
-						>
-							<EditIcon />
-							Edit
-						</button>
-					</ButtonStyled>
-				</div>
-
-				<div
-					class="flex max-h-56 flex-col gap-1.5 gap-y-4 overflow-y-auto rounded-xl border border-solid border-surface-5 p-3 py-4"
-				>
-					<div class="flex flex-wrap gap-2">
-						<TagItem
-							v-for="version in draftVersion.game_versions"
-							:key="version"
-							class="border !border-solid border-surface-5 hover:no-underline"
-						>
-							{{ version }}
-						</TagItem>
-
-						<span v-if="!draftVersion.game_versions.length">No versions selected.</span>
-					</div>
-				</div>
-			</div>
-		</template>
-
-		<template
-			v-if="
-				!noEnvironmentProject &&
-				((!editingVersion && inferredVersionData?.environment) ||
-					(editingVersion && draftVersion.environment))
-			"
-		>
-			<div class="flex flex-col gap-1">
-				<div class="flex items-center justify-between">
-					<span class="font-semibold text-contrast"> Environment </span>
-
-					<ButtonStyled type="transparent" size="standard">
-						<button @click="editEnvironment">
-							<EditIcon />
-							Edit
-						</button>
-					</ButtonStyled>
-				</div>
-
-				<div class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
-					<div v-if="draftVersion.environment" class="flex flex-col gap-1">
-						<div class="font-semibold text-contrast">
-							{{ environmentCopy.title }}
-						</div>
-						<div class="text-sm font-medium">{{ environmentCopy.description }}</div>
-					</div>
-
-					<span v-else class="text-sm font-medium">No environment has been set.</span>
-				</div>
+		<div class="flex flex-col gap-2">
+			<span class="font-semibold text-contrast"> Version changlog </span>
+
+			<div class="w-full">
+				<MarkdownEditor
+					v-model="draftVersion.changelog"
+					:on-image-upload="onImageUpload"
+					:max-height="500"
+				/>
 			</div>
-		</template>
+		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { EditIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Chips,
-	defineMessages,
-	ENVIRONMENTS_COPY,
-	TagItem,
-	useVIntl,
-} from '@modrinth/ui'
-import { formatCategory } from '@modrinth/utils'
+import { Chips } from '@modrinth/ui'
 
 import { useGeneratedState } from '~/composables/generated'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
-const {
-	draftVersion,
-	inferredVersionData,
-	projectType,
-	editingVersion,
-	noLoadersProject,
-	noEnvironmentProject,
-	modal,
-} = injectManageVersionContext()
+const { draftVersion } = injectManageVersionContext()
 
 const generatedState = useGeneratedState()
-const loaders = computed(() => generatedState.value.loaders)
-const isModpack = computed(() => projectType.value === 'modpack')
 
-const draftVersionLoaders = computed(() =>
-	[
-		...new Set([...draftVersion.value.loaders, ...(draftVersion.value.mrpack_loaders ?? [])]),
-	].filter((loader) => loader !== 'mrpack'),
-)
+import { MarkdownEditor } from '@modrinth/ui'
 
-const editLoaders = () => {
-	modal.value?.setStage('from-details-loaders')
-}
-const editVersions = () => {
-	modal.value?.setStage('from-details-mc-versions')
-}
-const editEnvironment = () => {
-	modal.value?.setStage('from-details-environment')
-}
-
-const usingDetectedVersions = computed(() => {
-	if (!inferredVersionData.value?.game_versions) return false
-
-	const versionsMatch =
-		draftVersion.value.game_versions.length === inferredVersionData.value.game_versions.length &&
-		draftVersion.value.game_versions.every((version) =>
-			inferredVersionData.value?.game_versions?.includes(version),
-		)
-
-	return versionsMatch
-})
-
-const usingDetectedLoaders = computed(() => {
-	if (!inferredVersionData.value?.loaders) return false
-
-	const loadersMatch =
-		draftVersion.value.loaders.length === inferredVersionData.value.loaders.length &&
-		draftVersion.value.loaders.every((loader) =>
-			inferredVersionData.value?.loaders?.includes(loader),
-		)
+import { useImageUpload } from '~/composables/image-upload.ts'
 
-	return loadersMatch
-})
-
-const { formatMessage } = useVIntl()
-
-const noEnvironmentMessage = defineMessages({
-	title: {
-		id: 'version.environment.none.title',
-		defaultMessage: 'No environment set',
-	},
-	description: {
-		id: 'version.environment.none.description',
-		defaultMessage: 'The environment for this version has not been specified.',
-	},
-})
-
-const unknownEnvironmentMessage = defineMessages({
-	title: {
-		id: 'version.environment.unknown.title',
-		defaultMessage: 'Unknown environment',
-	},
-	description: {
-		id: 'version.environment.unknown.description',
-		defaultMessage: 'The environment: "{environment}" is not recognized.',
-	},
-})
-
-const environmentCopy = computed(() => {
-	if (!draftVersion.value.environment) {
-		return {
-			title: formatMessage(noEnvironmentMessage.title),
-			description: formatMessage(noEnvironmentMessage.description),
-		}
-	}
-
-	const envCopy = ENVIRONMENTS_COPY[draftVersion.value.environment]
-	if (envCopy) {
-		return {
-			title: formatMessage(envCopy.title),
-			description: formatMessage(envCopy.description),
-		}
-	}
-
-	return {
-		title: formatMessage(unknownEnvironmentMessage.title),
-		description: formatMessage(unknownEnvironmentMessage.description, {
-			environment: draftVersion.value.environment,
-		}),
-	}
-})
+async function onImageUpload(file: File) {
+	const response = await useImageUpload(file, { context: 'version' })
+	return response.url
+}
 </script>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index e69de29bb2..8e752d1bbf 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -0,0 +1,221 @@
+<template>
+	<div class="flex flex-col gap-6 sm:w-[512px]">
+		<!-- TODO add files list here -->
+
+		<template v-if="!noLoadersProject">
+			<div class="flex flex-col gap-1">
+				<div class="flex items-center justify-between">
+					<span class="font-semibold text-contrast">
+						{{ usingDetectedLoaders ? 'Detected loaders' : 'Loaders' }}
+					</span>
+
+					<ButtonStyled type="transparent" size="standard">
+						<button
+							v-tooltip="isModpack ? 'Modpack versions cannot be edited' : undefined"
+							:disabled="isModpack"
+							@click="editLoaders"
+						>
+							<EditIcon />
+							Edit
+						</button>
+					</ButtonStyled>
+				</div>
+
+				<div
+					class="flex flex-col gap-1.5 gap-y-4 rounded-xl border border-solid border-surface-5 p-3 py-4"
+				>
+					<div class="flex flex-wrap gap-2">
+						<template
+							v-for="loader in draftVersionLoaders.map((selectedLoader) =>
+								loaders.find((loader) => selectedLoader === loader.name),
+							)"
+						>
+							<TagItem
+								v-if="loader"
+								:key="`loader-${loader.name}`"
+								class="border !border-solid border-surface-5 hover:no-underline"
+								:style="`--_color: var(--color-platform-${loader.name})`"
+							>
+								<div v-html="loader.icon"></div>
+								{{ formatCategory(loader.name) }}
+							</TagItem>
+						</template>
+
+						<span v-if="!draftVersion.loaders.length">No loaders selected.</span>
+					</div>
+				</div>
+			</div>
+		</template>
+
+		<div class="flex flex-col gap-1">
+			<div class="flex items-center justify-between">
+				<span class="font-semibold text-contrast">
+					{{ usingDetectedVersions ? 'Detected versions' : 'Versions' }}
+				</span>
+
+				<ButtonStyled type="transparent" size="standard">
+					<button
+						v-tooltip="isModpack ? 'Modpack versions cannot be edited' : undefined"
+						:disabled="isModpack"
+						@click="editVersions"
+					>
+						<EditIcon />
+						Edit
+					</button>
+				</ButtonStyled>
+			</div>
+
+			<div
+				class="flex max-h-56 flex-col gap-1.5 gap-y-4 overflow-y-auto rounded-xl border border-solid border-surface-5 p-3 py-4"
+			>
+				<div class="flex flex-wrap gap-2">
+					<TagItem
+						v-for="version in draftVersion.game_versions"
+						:key="version"
+						class="border !border-solid border-surface-5 hover:no-underline"
+					>
+						{{ version }}
+					</TagItem>
+
+					<span v-if="!draftVersion.game_versions.length">No versions selected.</span>
+				</div>
+			</div>
+		</div>
+
+		<template v-if="!noEnvironmentProject">
+			<div class="flex flex-col gap-1">
+				<div class="flex items-center justify-between">
+					<span class="font-semibold text-contrast"> Environment </span>
+
+					<ButtonStyled type="transparent" size="standard">
+						<button @click="editEnvironment">
+							<EditIcon />
+							Edit
+						</button>
+					</ButtonStyled>
+				</div>
+
+				<div class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
+					<div v-if="draftVersion.environment" class="flex flex-col gap-1">
+						<div class="font-semibold text-contrast">
+							{{ environmentCopy.title }}
+						</div>
+						<div class="text-sm font-medium">{{ environmentCopy.description }}</div>
+					</div>
+
+					<span v-else class="text-sm font-medium">No environment has been set.</span>
+				</div>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { EditIcon } from '@modrinth/assets'
+import { ButtonStyled, defineMessages, ENVIRONMENTS_COPY, TagItem, useVIntl } from '@modrinth/ui'
+import { formatCategory } from '@modrinth/utils'
+
+import { useGeneratedState } from '~/composables/generated'
+import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
+
+const {
+	draftVersion,
+	inferredVersionData,
+	projectType,
+	noLoadersProject,
+	noEnvironmentProject,
+	modal,
+} = injectManageVersionContext()
+
+const generatedState = useGeneratedState()
+const loaders = computed(() => generatedState.value.loaders)
+const isModpack = computed(() => projectType.value === 'modpack')
+
+const draftVersionLoaders = computed(() =>
+	[
+		...new Set([...draftVersion.value.loaders, ...(draftVersion.value.mrpack_loaders ?? [])]),
+	].filter((loader) => loader !== 'mrpack'),
+)
+
+const editLoaders = () => {
+	modal.value?.setStage('from-details-loaders')
+}
+const editVersions = () => {
+	modal.value?.setStage('from-details-mc-versions')
+}
+const editEnvironment = () => {
+	modal.value?.setStage('from-details-environment')
+}
+
+const usingDetectedVersions = computed(() => {
+	if (!inferredVersionData.value?.game_versions) return false
+
+	const versionsMatch =
+		draftVersion.value.game_versions.length === inferredVersionData.value.game_versions.length &&
+		draftVersion.value.game_versions.every((version) =>
+			inferredVersionData.value?.game_versions?.includes(version),
+		)
+
+	return versionsMatch
+})
+
+const usingDetectedLoaders = computed(() => {
+	if (!inferredVersionData.value?.loaders) return false
+
+	const loadersMatch =
+		draftVersion.value.loaders.length === inferredVersionData.value.loaders.length &&
+		draftVersion.value.loaders.every((loader) =>
+			inferredVersionData.value?.loaders?.includes(loader),
+		)
+
+	return loadersMatch
+})
+
+const { formatMessage } = useVIntl()
+
+const noEnvironmentMessage = defineMessages({
+	title: {
+		id: 'version.environment.none.title',
+		defaultMessage: 'No environment set',
+	},
+	description: {
+		id: 'version.environment.none.description',
+		defaultMessage: 'The environment for this version has not been specified.',
+	},
+})
+
+const unknownEnvironmentMessage = defineMessages({
+	title: {
+		id: 'version.environment.unknown.title',
+		defaultMessage: 'Unknown environment',
+	},
+	description: {
+		id: 'version.environment.unknown.description',
+		defaultMessage: 'The environment: "{environment}" is not recognized.',
+	},
+})
+
+const environmentCopy = computed(() => {
+	if (!draftVersion.value.environment) {
+		return {
+			title: formatMessage(noEnvironmentMessage.title),
+			description: formatMessage(noEnvironmentMessage.description),
+		}
+	}
+
+	const envCopy = ENVIRONMENTS_COPY[draftVersion.value.environment]
+	if (envCopy) {
+		return {
+			title: formatMessage(envCopy.title),
+			description: formatMessage(envCopy.description),
+		}
+	}
+
+	return {
+		title: formatMessage(unknownEnvironmentMessage.title),
+		description: formatMessage(unknownEnvironmentMessage.description, {
+			environment: draftVersion.value.environment,
+		}),
+	}
+})
+</script>
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index c5ad6ab0ea..1f1c955aa4 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -64,6 +64,7 @@ export interface ManageVersionContextValue {
 	projectType: Ref<Labrinth.Projects.v2.ProjectType | undefined>
 	dependencyProjects: Ref<Record<string, Labrinth.Projects.v3.Project>>
 	dependencyVersions: Ref<Record<string, Labrinth.Versions.v3.Version>>
+	handlingNewFiles: Ref<boolean>
 
 	// Stage management
 	stageConfigs: StageConfigInput<ManageVersionContextValue>[]
@@ -143,6 +144,7 @@ export function createManageVersionContext(
 	const draftVersion = ref<Labrinth.Versions.v3.DraftVersion>(structuredClone(EMPTY_DRAFT_VERSION))
 	const filesToAdd = ref<Labrinth.Versions.v3.DraftVersionFile[]>([])
 	const existingFilesToDelete = ref<Labrinth.Versions.v3.VersionFileHash['sha1'][]>([])
+	const handlingNewFiles = ref(false)
 	const inferredVersionData = ref<InferredVersionInfo>()
 	const dependencyProjects = ref<Record<string, Labrinth.Projects.v3.Project>>({})
 	const dependencyVersions = ref<Record<string, Labrinth.Versions.v3.Version>>({})
@@ -418,6 +420,8 @@ export function createManageVersionContext(
 				return editingVersion.value ? 'Edit environment' : 'Add environment'
 			case 'add-changelog':
 				return editingVersion.value ? 'Edit changelog' : 'Add changelog'
+				case 'metadata':
+				return 'Edit metadata'
 			default:
 				return 'Next'
 		}
@@ -442,6 +446,7 @@ export function createManageVersionContext(
 		projectType,
 		dependencyProjects,
 		dependencyVersions,
+		handlingNewFiles,
 
 		// Stage management
 		stageConfigs,
diff --git a/apps/frontend/src/providers/version/stages/add-files-stage.ts b/apps/frontend/src/providers/version/stages/add-files-stage.ts
index 9867dd57ce..da245d2096 100644
--- a/apps/frontend/src/providers/version/stages/add-files-stage.ts
+++ b/apps/frontend/src/providers/version/stages/add-files-stage.ts
@@ -22,7 +22,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 				onClick: () => ctx.modal.value?.hide(),
 			}
 
-		if (!hasFiles) return null
+		if (!hasFiles || ctx.handlingNewFiles.value) return null
 
 		return {
 			label: 'Cancel',
@@ -42,7 +42,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 				disabled: ctx.isSubmitting.value,
 			}
 
-		if (!hasFiles) return null
+		if (!hasFiles || ctx.handlingNewFiles.value) return null
 
 		return {
 			label: ctx.getNextLabel(),
diff --git a/apps/frontend/src/providers/version/stages/index.ts b/apps/frontend/src/providers/version/stages/index.ts
index 6459bad360..d814ad4627 100644
--- a/apps/frontend/src/providers/version/stages/index.ts
+++ b/apps/frontend/src/providers/version/stages/index.ts
@@ -1,28 +1,32 @@
-import { stageConfig as addChangelogStageConfig } from './add-changelog'
 import { stageConfig as addFilesStageConfig } from './add-files-stage'
+import { stageConfig as dependenciesStageConfig } from './dependencies-stage'
+import { stageConfig as detailsStageConfig } from './details-stage'
 import {
-	stageConfig as addMcVersionsStageConfig,
-	fromDetailsStageConfig as fromDetailsMcVersionsStageConfig,
-} from './add-mc-versions-stage'
-import { stageConfig as addDependenciesStageConfig } from './dependencies-stage'
-import { stageConfig as addDetailsStageConfig } from './details-stage'
-import {
-	stageConfig as addEnvironmentStageConfig,
+	stageConfig as environmentStageConfig,
 	fromDetailsStageConfig as fromDetailsEnvironmentStageConfig,
 } from './environment-stage'
 import {
-	stageConfig as addLoadersStageConfig,
 	fromDetailsStageConfig as fromDetailsLoadersStageConfig,
+	stageConfig as loadersStageConfig,
 } from './loaders-stage'
+import {
+	fromDetailsStageConfig as fromDetailsMcVersionsStageConfig,
+	stageConfig as mcVersionsStageConfig,
+} from './mc-versions-stage'
+import {
+	stageConfig as metadataStageConfig,
+} from './metadata-stage'
+
 
 export const stageConfigs = [
 	addFilesStageConfig,
-	addLoadersStageConfig,
-	addMcVersionsStageConfig,
-	addEnvironmentStageConfig,
-	addDependenciesStageConfig,
-	addDetailsStageConfig, // to be renamed metadata stage
-	addChangelogStageConfig, // to be renamed details stage
+	loadersStageConfig,
+	mcVersionsStageConfig,
+	environmentStageConfig,
+	dependenciesStageConfig,
+	metadataStageConfig,
+	detailsStageConfig,
+
 	// Non-progress stages for editing from details page
 	fromDetailsLoadersStageConfig,
 	fromDetailsMcVersionsStageConfig,
diff --git a/apps/frontend/src/providers/version/stages/add-mc-versions-stage.ts b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
similarity index 100%
rename from apps/frontend/src/providers/version/stages/add-mc-versions-stage.ts
rename to apps/frontend/src/providers/version/stages/mc-versions-stage.ts
diff --git a/apps/frontend/src/providers/version/stages/metadata-stage.ts b/apps/frontend/src/providers/version/stages/metadata-stage.ts
new file mode 100644
index 0000000000..ca92f812e0
--- /dev/null
+++ b/apps/frontend/src/providers/version/stages/metadata-stage.ts
@@ -0,0 +1,34 @@
+import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets';
+import type { StageConfigInput } from '@modrinth/ui';
+import { markRaw } from 'vue';
+import MetadataStage from '~/components/ui/create-project-version/stages/MetadataStage.vue';
+import type { ManageVersionContextValue } from '../manage-version-modal';
+
+export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
+	id: 'metadata',
+	stageContent: markRaw(MetadataStage),
+	title: 'Metadata',
+	leftButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? {
+					label: 'Cancel',
+					icon: XIcon,
+					onClick: () => ctx.modal.value?.hide(),
+				}
+			: {
+					label: 'Back',
+					icon: LeftArrowIcon,
+					onClick: () => ctx.modal.value?.prevStage(),
+				},
+	rightButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? {
+					...ctx.saveButtonConfig(),
+				}
+			: {
+					label: ctx.getNextLabel(),
+					icon: RightArrowIcon,
+					iconPosition: 'after',
+					onClick: () => ctx.modal.value?.nextStage(),
+				},
+}

From 36a0e88301a682c3d781838d3e6f4b42e97a780b Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 31 Dec 2025 16:36:33 -0800
Subject: [PATCH 04/83] implement files inside metadata stage

---
 .../components/VersionFileRow.vue             |  4 +-
 .../components/ViewOnlyFileRow.vue            | 41 ++++++++++
 .../stages/MetadataStage.vue                  | 82 ++++++++++++++++++-
 .../version/stages/add-files-stage.ts         | 40 ++++++++-
 .../version/stages/environment-stage.ts       |  6 +-
 .../src/providers/version/stages/index.ts     |  3 +-
 .../providers/version/stages/loaders-stage.ts |  6 +-
 .../version/stages/mc-versions-stage.ts       |  6 +-
 packages/assets/generated-icons.ts            |  2 +
 packages/assets/icons/file-plus.svg           | 18 ++++
 10 files changed, 194 insertions(+), 14 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue
 create mode 100644 packages/assets/icons/file-plus.svg

diff --git a/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue b/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
index 49b6a75cc1..85b91111fc 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
@@ -68,7 +68,7 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { ArrowLeftRightIcon, CheckIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, Combobox, injectProjectPageContext } from '@modrinth/ui'
-import type { DropdownOption } from '@modrinth/ui/src/components/base/Combobox.vue'
+import type { ComboboxOption } from '@modrinth/ui/src/components/base/Combobox.vue'
 import { acceptFileFromProjectType } from '@modrinth/utils'
 
 const { projectV2 } = injectProjectPageContext()
@@ -98,7 +98,7 @@ const versionTypes = [
 	{ class: 'text-sm', value: 'dev-jar', label: 'Dev JAR' },
 	{ class: 'text-sm', value: 'javadoc-jar', label: 'Javadoc JAR' },
 	{ class: 'text-sm', value: 'signature', label: 'Signature' },
-].filter(Boolean) as DropdownOption<Labrinth.Versions.v3.FileType | 'primary'>[]
+].filter(Boolean) as ComboboxOption<Labrinth.Versions.v3.FileType | 'primary'>[]
 
 function emitFileTypeChange() {
 	if (selectedType.value === 'primary') emit('setPrimaryFile')
diff --git a/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue b/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue
new file mode 100644
index 0000000000..2902b477d4
--- /dev/null
+++ b/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue
@@ -0,0 +1,41 @@
+<template>
+	<div
+		class="flex items-center justify-between gap-2 rounded-xl bg-button-bg px-4 py-2 text-button-text"
+	>
+		<div class="flex items-center gap-2 overflow-hidden">
+			<FileIcon v-if="isPrimary" class="text-lg" />
+			<FilePlusIcon v-else class="text-lg" />
+
+			<span v-tooltip="name" class="overflow-hidden text-ellipsis whitespace-nowrap font-medium">
+				{{ name }}
+			</span>
+
+			<TagItem class="shrink-0 border !border-solid border-surface-5">
+				{{ isPrimary ? 'Primary' : fileTypeLabels[fileType ?? 'unknown'] }}
+			</TagItem>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { FileIcon, FilePlusIcon } from '@modrinth/assets'
+import { TagItem } from '@modrinth/ui'
+
+const { name, isPrimary, fileType } = defineProps<{
+	name: string
+	isPrimary?: boolean
+	fileType?: Labrinth.Versions.v3.FileType | 'primary'
+}>()
+
+const fileTypeLabels: Record<Labrinth.Versions.v3.FileType | 'primary', string> = {
+	primary: 'Primary',
+	unknown: 'Other',
+	'required-resource-pack': 'Required RP',
+	'optional-resource-pack': 'Optional RP',
+	'sources-jar': 'Sources JAR',
+	'dev-jar': 'Dev JAR',
+	'javadoc-jar': 'Javadoc JAR',
+	signature: 'Signature',
+}
+</script>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 8e752d1bbf..7abc6e60b2 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -1,6 +1,37 @@
 <template>
 	<div class="flex flex-col gap-6 sm:w-[512px]">
-		<!-- TODO add files list here -->
+		<div class="flex flex-col gap-1">
+			<div class="flex items-center justify-between">
+				<span class="font-semibold text-contrast"> Uploaded files </span>
+
+				<ButtonStyled type="transparent" size="standard">
+					<button @click="editFiles">
+						<EditIcon />
+						Edit
+					</button>
+				</ButtonStyled>
+			</div>
+			<div class="flex flex-col gap-2.5">
+				<ViewOnlyFileRow
+					v-if="primaryFile"
+					:key="primaryFile.name"
+					:name="primaryFile.name"
+					:is-primary="true"
+				/>
+				<ViewOnlyFileRow
+					v-for="file in supplementaryNewFiles"
+					:key="file.file.name"
+					:name="file.file.name"
+					:file-type="file.fileType"
+				/>
+				<ViewOnlyFileRow
+					v-for="file in supplementaryExistingFiles"
+					:key="file.filename"
+					:name="file.filename"
+					:file-type="file.file_type"
+				/>
+			</div>
+		</div>
 
 		<template v-if="!noLoadersProject">
 			<div class="flex flex-col gap-1">
@@ -117,6 +148,7 @@ import { formatCategory } from '@modrinth/utils'
 
 import { useGeneratedState } from '~/composables/generated'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
+import ViewOnlyFileRow from '../components/ViewOnlyFileRow.vue'
 
 const {
 	draftVersion,
@@ -125,6 +157,7 @@ const {
 	noLoadersProject,
 	noEnvironmentProject,
 	modal,
+	filesToAdd,
 } = injectManageVersionContext()
 
 const generatedState = useGeneratedState()
@@ -146,6 +179,9 @@ const editVersions = () => {
 const editEnvironment = () => {
 	modal.value?.setStage('from-details-environment')
 }
+const editFiles = () => {
+	modal.value?.setStage('from-details-files')
+}
 
 const usingDetectedVersions = computed(() => {
 	if (!inferredVersionData.value?.game_versions) return false
@@ -171,6 +207,50 @@ const usingDetectedLoaders = computed(() => {
 	return loadersMatch
 })
 
+interface PrimaryFile {
+	name: string
+	fileType?: string
+	existing?: boolean
+}
+
+const primaryFile = computed<PrimaryFile | null>(() => {
+	const existingPrimaryFile = draftVersion.value.existing_files?.[0]
+	if (existingPrimaryFile) {
+		return {
+			name: existingPrimaryFile.filename,
+			fileType: existingPrimaryFile.file_type,
+			existing: true,
+		}
+	}
+
+	const addedPrimaryFile = filesToAdd.value[0]
+	if (addedPrimaryFile) {
+		return {
+			name: addedPrimaryFile.file.name,
+			fileType: addedPrimaryFile.fileType,
+			existing: false,
+		}
+	}
+
+	return null
+})
+
+const supplementaryNewFiles = computed(() => {
+	if (primaryFile.value?.existing) {
+		return filesToAdd.value
+	} else {
+		return filesToAdd.value.slice(1)
+	}
+})
+
+const supplementaryExistingFiles = computed(() => {
+	if (primaryFile.value?.existing) {
+		return draftVersion.value.existing_files?.slice(1)
+	} else {
+		return draftVersion.value.existing_files
+	}
+})
+
 const { formatMessage } = useVIntl()
 
 const noEnvironmentMessage = defineMessages({
diff --git a/apps/frontend/src/providers/version/stages/add-files-stage.ts b/apps/frontend/src/providers/version/stages/add-files-stage.ts
index da245d2096..17cea05237 100644
--- a/apps/frontend/src/providers/version/stages/add-files-stage.ts
+++ b/apps/frontend/src/providers/version/stages/add-files-stage.ts
@@ -1,4 +1,4 @@
-import { RightArrowIcon, XIcon } from '@modrinth/assets'
+import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'
 
@@ -54,3 +54,41 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	},
 	nonProgressStage: (ctx) => ctx.editingVersion.value,
 }
+
+export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
+	id: 'from-details-files',
+	stageContent: markRaw(AddFilesStage),
+	title: 'Edit files',
+	nonProgressStage: true,
+	leftButtonConfig: (ctx) => {
+		const hasFiles =
+			ctx.filesToAdd.value.length !== 0 ||
+			(ctx.draftVersion.value.existing_files?.length ?? 0) !== 0
+
+		return {
+			label: 'Back',
+			icon: LeftArrowIcon,
+			disabled: !hasFiles,
+			onClick: () => ctx.modal.value?.setStage('metadata'),
+		}
+	},
+	rightButtonConfig: (ctx) => {
+		const hasFiles =
+			ctx.filesToAdd.value.length !== 0 ||
+			(ctx.draftVersion.value.existing_files?.length ?? 0) !== 0
+
+		return ctx.editingVersion.value
+			? {
+					...ctx.saveButtonConfig(),
+					label: 'Save files',
+					disabled: !hasFiles || ctx.isSubmitting.value,
+				}
+			: {
+					label: "Add details",
+					icon: RightArrowIcon,
+					iconPosition: 'after',
+					disabled: !hasFiles,
+					onClick: () => ctx.modal.value?.setStage("add-details"),
+				}
+	},
+}
diff --git a/apps/frontend/src/providers/version/stages/environment-stage.ts b/apps/frontend/src/providers/version/stages/environment-stage.ts
index 8f7b20b3b3..8415b1b5b6 100644
--- a/apps/frontend/src/providers/version/stages/environment-stage.ts
+++ b/apps/frontend/src/providers/version/stages/environment-stage.ts
@@ -37,7 +37,7 @@ export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue>
 		label: 'Back',
 		icon: LeftArrowIcon,
 		disabled: !ctx.draftVersion.value.environment,
-		onClick: () => ctx.modal.value?.setStage('add-details'),
+		onClick: () => ctx.modal.value?.setStage('metadata'),
 	}),
 	rightButtonConfig: (ctx) =>
 		ctx.editingVersion.value
@@ -46,10 +46,10 @@ export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue>
 					disabled: !ctx.draftVersion.value.environment,
 				}
 			: {
-					label: ctx.getNextLabel(2),
+					label: "Add details",
 					icon: RightArrowIcon,
 					iconPosition: 'after',
 					disabled: !ctx.draftVersion.value.environment,
-					onClick: () => ctx.modal.value?.setStage(2),
+					onClick: () => ctx.modal.value?.setStage("add-details"),
 				},
 }
diff --git a/apps/frontend/src/providers/version/stages/index.ts b/apps/frontend/src/providers/version/stages/index.ts
index d814ad4627..da1072a0d6 100644
--- a/apps/frontend/src/providers/version/stages/index.ts
+++ b/apps/frontend/src/providers/version/stages/index.ts
@@ -1,4 +1,4 @@
-import { stageConfig as addFilesStageConfig } from './add-files-stage'
+import { stageConfig as addFilesStageConfig, fromDetailsStageConfig as fromDetailsFilesStageConfig } from './add-files-stage'
 import { stageConfig as dependenciesStageConfig } from './dependencies-stage'
 import { stageConfig as detailsStageConfig } from './details-stage'
 import {
@@ -31,4 +31,5 @@ export const stageConfigs = [
 	fromDetailsLoadersStageConfig,
 	fromDetailsMcVersionsStageConfig,
 	fromDetailsEnvironmentStageConfig,
+	fromDetailsFilesStageConfig
 ]
diff --git a/apps/frontend/src/providers/version/stages/loaders-stage.ts b/apps/frontend/src/providers/version/stages/loaders-stage.ts
index 874c6821ac..2a221f150f 100644
--- a/apps/frontend/src/providers/version/stages/loaders-stage.ts
+++ b/apps/frontend/src/providers/version/stages/loaders-stage.ts
@@ -37,7 +37,7 @@ export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue>
 		label: 'Back',
 		icon: LeftArrowIcon,
 		disabled: ctx.draftVersion.value.loaders.length === 0,
-		onClick: () => ctx.modal.value?.setStage('add-details'),
+		onClick: () => ctx.modal.value?.setStage('metadata'),
 	}),
 	rightButtonConfig: (ctx) =>
 		ctx.editingVersion.value
@@ -46,10 +46,10 @@ export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue>
 					disabled: ctx.draftVersion.value.loaders.length === 0,
 				}
 			: {
-					label: ctx.getNextLabel(2),
+					label: "Add details",
 					icon: RightArrowIcon,
 					iconPosition: 'after',
 					disabled: ctx.draftVersion.value.loaders.length === 0,
-					onClick: () => ctx.modal.value?.setStage(2),
+					onClick: () => ctx.modal.value?.setStage("add-details"),
 				},
 }
diff --git a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
index dd059bf9ad..265835d606 100644
--- a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
+++ b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
@@ -35,7 +35,7 @@ export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue>
 		label: 'Back',
 		icon: LeftArrowIcon,
 		disabled: ctx.draftVersion.value.game_versions.length === 0,
-		onClick: () => ctx.modal.value?.setStage('add-details'),
+		onClick: () => ctx.modal.value?.setStage('metadata'),
 	}),
 	rightButtonConfig: (ctx) =>
 		ctx.editingVersion.value
@@ -44,10 +44,10 @@ export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue>
 					disabled: ctx.draftVersion.value.game_versions.length === 0,
 				}
 			: {
-					label: ctx.getNextLabel(2),
+					label: "Add details",
 					icon: RightArrowIcon,
 					iconPosition: 'after',
 					disabled: ctx.draftVersion.value.game_versions.length === 0,
-					onClick: () => ctx.modal.value?.setStage(2),
+					onClick: () => ctx.modal.value?.setStage("add-details"),
 				},
 }
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index 4b77cf76ea..49053e1e8a 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -73,6 +73,7 @@ import _FileIcon from './icons/file.svg?component'
 import _FileArchiveIcon from './icons/file-archive.svg?component'
 import _FileCodeIcon from './icons/file-code.svg?component'
 import _FileImageIcon from './icons/file-image.svg?component'
+import _FilePlusIcon from './icons/file-plus.svg?component'
 import _FileTextIcon from './icons/file-text.svg?component'
 import _FilterIcon from './icons/filter.svg?component'
 import _FilterXIcon from './icons/filter-x.svg?component'
@@ -299,6 +300,7 @@ export const FileIcon = _FileIcon
 export const FileArchiveIcon = _FileArchiveIcon
 export const FileCodeIcon = _FileCodeIcon
 export const FileImageIcon = _FileImageIcon
+export const FilePlusIcon = _FilePlusIcon
 export const FileTextIcon = _FileTextIcon
 export const FilterIcon = _FilterIcon
 export const FilterXIcon = _FilterXIcon
diff --git a/packages/assets/icons/file-plus.svg b/packages/assets/icons/file-plus.svg
new file mode 100644
index 0000000000..5601a9b681
--- /dev/null
+++ b/packages/assets/icons/file-plus.svg
@@ -0,0 +1,18 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-file-plus"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+  <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+  <path d="M9 15h6" />
+  <path d="M12 18v-6" />
+</svg>

From 59ab8026b5c12af27305c7f283da697fb377e47a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sun, 4 Jan 2026 13:16:03 -0700
Subject: [PATCH 05/83] use regular prettier instead of prettier eslint

---
 .vscode/settings.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 23c66ecb22..d4d338f6dc 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,21 +11,21 @@
 		"source.fixAll.eslint": "explicit",
 		"source.organizeImports": "always"
 	},
-	"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"[vue]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[typescript]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[javascript]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[scss]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[css]": {
-		"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[rust]": {
 		"editor.defaultFormatter": "rust-lang.rust-analyzer"

From 29bb86cf6e664e8db65ff687d9c37ddf157bb508 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sun, 4 Jan 2026 13:37:18 -0700
Subject: [PATCH 06/83] remove changelog stage config

---
 .../providers/version/stages/add-changelog.ts | 36 -------------------
 1 file changed, 36 deletions(-)
 delete mode 100644 apps/frontend/src/providers/version/stages/add-changelog.ts

diff --git a/apps/frontend/src/providers/version/stages/add-changelog.ts b/apps/frontend/src/providers/version/stages/add-changelog.ts
deleted file mode 100644
index 9d5252abd5..0000000000
--- a/apps/frontend/src/providers/version/stages/add-changelog.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { LeftArrowIcon, PlusIcon, SaveIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
-import type { StageConfigInput } from '@modrinth/ui'
-import { markRaw } from 'vue'
-
-import AddChangelogStage from '~/components/ui/create-project-version/stages/AddChangelogStage.vue'
-
-import type { ManageVersionContextValue } from '../manage-version-modal'
-
-export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
-	id: 'add-changelog',
-	stageContent: markRaw(AddChangelogStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit changelog' : 'Add changelog'),
-	leftButtonConfig: (ctx) =>
-		ctx.editingVersion.value
-			? {
-					label: 'Cancel',
-					icon: XIcon,
-					onClick: () => ctx.modal.value?.hide(),
-				}
-			: {
-					label: 'Back',
-					icon: LeftArrowIcon,
-					onClick: () => ctx.modal.value?.prevStage(),
-				},
-	rightButtonConfig: (ctx) => ({
-		label: ctx.editingVersion.value ? 'Save changes' : 'Create version',
-		icon: ctx.isSubmitting.value ? SpinnerIcon : ctx.editingVersion.value ? SaveIcon : PlusIcon,
-		iconPosition: 'before',
-		iconClass: ctx.isSubmitting.value ? 'animate-spin' : undefined,
-		color: 'green',
-		disabled: ctx.isSubmitting.value,
-		onClick: () =>
-			ctx.editingVersion.value ? ctx.handleSaveVersionEdits() : ctx.handleCreateVersion(),
-	}),
-	nonProgressStage: (ctx) => ctx.editingVersion.value,
-}

From 35302a254b21ba62036761cc5b3ad0c54a61a058 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sun, 4 Jan 2026 19:51:42 -0700
Subject: [PATCH 07/83] save button on details stage

---
 .../providers/version/stages/details-stage.ts | 36 +++++++++----------
 .../version/stages/metadata-stage.ts          | 10 +++---
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/apps/frontend/src/providers/version/stages/details-stage.ts b/apps/frontend/src/providers/version/stages/details-stage.ts
index 26d51c0ac2..160e275969 100644
--- a/apps/frontend/src/providers/version/stages/details-stage.ts
+++ b/apps/frontend/src/providers/version/stages/details-stage.ts
@@ -1,10 +1,10 @@
-import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets';
-import type { StageConfigInput } from '@modrinth/ui';
-import { markRaw } from 'vue';
+import { LeftArrowIcon, XIcon } from '@modrinth/assets'
+import type { StageConfigInput } from '@modrinth/ui'
+import { markRaw } from 'vue'
 
-
-import DetailsStage from '~/components/ui/create-project-version/stages/DetailsStage.vue';
-import type { ManageVersionContextValue } from '../manage-version-modal';
+import { PlusIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
+import DetailsStage from '~/components/ui/create-project-version/stages/DetailsStage.vue'
+import type { ManageVersionContextValue } from '../manage-version-modal'
 
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-details',
@@ -22,19 +22,15 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 					icon: LeftArrowIcon,
 					onClick: () => ctx.modal.value?.prevStage(),
 				},
-	rightButtonConfig: (ctx) =>
-		ctx.editingVersion.value
-			? {
-					...ctx.saveButtonConfig(),
-					disabled:
-						ctx.draftVersion.value.version_number.trim().length === 0 || ctx.isSubmitting.value,
-				}
-			: {
-					label: ctx.getNextLabel(),
-					icon: RightArrowIcon,
-					iconPosition: 'after',
-					disabled: ctx.draftVersion.value.version_number.trim().length === 0,
-					onClick: () => ctx.modal.value?.nextStage(),
-				},
+	rightButtonConfig: (ctx) => ({
+		label: ctx.editingVersion.value ? 'Save changes' : 'Create version',
+		icon: ctx.isSubmitting.value ? SpinnerIcon : ctx.editingVersion.value ? SaveIcon : PlusIcon,
+		iconPosition: 'before',
+		iconClass: ctx.isSubmitting.value ? 'animate-spin' : undefined,
+		color: 'green',
+		disabled: ctx.isSubmitting.value,
+		onClick: () =>
+			ctx.editingVersion.value ? ctx.handleSaveVersionEdits() : ctx.handleCreateVersion(),
+	}),
 	nonProgressStage: (ctx) => ctx.editingVersion.value,
 }
diff --git a/apps/frontend/src/providers/version/stages/metadata-stage.ts b/apps/frontend/src/providers/version/stages/metadata-stage.ts
index ca92f812e0..caa027c505 100644
--- a/apps/frontend/src/providers/version/stages/metadata-stage.ts
+++ b/apps/frontend/src/providers/version/stages/metadata-stage.ts
@@ -1,8 +1,8 @@
-import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets';
-import type { StageConfigInput } from '@modrinth/ui';
-import { markRaw } from 'vue';
-import MetadataStage from '~/components/ui/create-project-version/stages/MetadataStage.vue';
-import type { ManageVersionContextValue } from '../manage-version-modal';
+import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
+import type { StageConfigInput } from '@modrinth/ui'
+import { markRaw } from 'vue'
+import MetadataStage from '~/components/ui/create-project-version/stages/MetadataStage.vue'
+import type { ManageVersionContextValue } from '../manage-version-modal'
 
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'metadata',

From 4792e04ece214b539abaf7ba34e48489405c0d7e Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 09:58:55 -0700
Subject: [PATCH 08/83] update edit buttons in versions table

---
 .../stages/MetadataStage.vue                  |  3 +-
 .../pages/[type]/[id]/settings/versions.vue   | 37 ++++---------------
 .../src/pages/[type]/[id]/versions.vue        | 37 ++++---------------
 3 files changed, 18 insertions(+), 59 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 7abc6e60b2..d5df6541b0 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="flex flex-col gap-6 sm:w-[512px]">
-		<div class="flex flex-col gap-1">
+		<div v-if="!editingVersion" class="flex flex-col gap-1">
 			<div class="flex items-center justify-between">
 				<span class="font-semibold text-contrast"> Uploaded files </span>
 
@@ -158,6 +158,7 @@ const {
 	noEnvironmentProject,
 	modal,
 	filesToAdd,
+	editingVersion,
 } = injectManageVersionContext()
 
 const generatedState = useGeneratedState()
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/versions.vue b/apps/frontend/src/pages/[type]/[id]/settings/versions.vue
index fb5c9ee8ff..353dc60607 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/versions.vue
@@ -44,14 +44,8 @@
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
 							},
 							{
-								id: 'edit-changelog',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-changelog'),
-							},
-							{
-								id: 'edit-dependencies',
-								action: () =>
-									handleOpenEditVersionModal(version.id, project.id, 'add-dependencies'),
-								shown: project.project_type !== 'modpack',
+								id: 'edit-metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
 							},
 							{
 								id: 'edit-files',
@@ -69,13 +63,9 @@
 							<InfoIcon aria-hidden="true" />
 							Edit details
 						</template>
-						<template #edit-dependencies>
+						<template #edit-metadata>
 							<BoxIcon aria-hidden="true" />
-							Edit dependencies
-						</template>
-						<template #edit-changelog>
-							<AlignLeftIcon aria-hidden="true" />
-							Edit changelog
+							Edit metadata
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
@@ -145,16 +135,10 @@
 								shown: !!currentMember,
 							},
 							{
-								id: 'edit-changelog',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-changelog'),
+								id: 'edit-metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
 								shown: !!currentMember,
 							},
-							{
-								id: 'edit-dependencies',
-								action: () =>
-									handleOpenEditVersionModal(version.id, project.id, 'add-dependencies'),
-								shown: !!currentMember && project.project_type !== 'modpack',
-							},
 							{
 								id: 'edit-files',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
@@ -202,13 +186,9 @@
 							<InfoIcon aria-hidden="true" />
 							Edit details
 						</template>
-						<template #edit-dependencies>
+						<template #edit-metadata>
 							<BoxIcon aria-hidden="true" />
-							Edit dependencies
-						</template>
-						<template #edit-changelog>
-							<AlignLeftIcon aria-hidden="true" />
-							Edit changelog
+							Edit metadata
 						</template>
 						<template #delete>
 							<TrashIcon aria-hidden="true" />
@@ -301,7 +281,6 @@
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
 import {
-	AlignLeftIcon,
 	BoxIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index f2398bd6cb..c0f80b6d26 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -85,14 +85,8 @@
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
 							},
 							{
-								id: 'edit-changelog',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-changelog'),
-							},
-							{
-								id: 'edit-dependencies',
-								action: () =>
-									handleOpenEditVersionModal(version.id, project.id, 'add-dependencies'),
-								shown: project.project_type !== 'modpack',
+								id: 'edit-metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
 							},
 							{
 								id: 'edit-files',
@@ -110,13 +104,9 @@
 							<InfoIcon aria-hidden="true" />
 							Edit details
 						</template>
-						<template #edit-dependencies>
+						<template #edit-metadata>
 							<BoxIcon aria-hidden="true" />
-							Edit dependencies
-						</template>
-						<template #edit-changelog>
-							<AlignLeftIcon aria-hidden="true" />
-							Edit changelog
+							Edit metadata
 						</template>
 					</OverflowMenu>
 				</ButtonStyled>
@@ -186,16 +176,10 @@
 								shown: !!currentMember,
 							},
 							{
-								id: 'edit-changelog',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-changelog'),
+								id: 'edit-metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
 								shown: !!currentMember,
 							},
-							{
-								id: 'edit-dependencies',
-								action: () =>
-									handleOpenEditVersionModal(version.id, project.id, 'add-dependencies'),
-								shown: !!currentMember && project.project_type !== 'modpack',
-							},
 							{
 								id: 'edit-files',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
@@ -243,13 +227,9 @@
 							<InfoIcon aria-hidden="true" />
 							Edit details
 						</template>
-						<template #edit-dependencies>
+						<template #edit-metadata>
 							<BoxIcon aria-hidden="true" />
-							Edit dependencies
-						</template>
-						<template #edit-changelog>
-							<AlignLeftIcon aria-hidden="true" />
-							Edit changelog
+							Edit metadata
 						</template>
 						<template #delete>
 							<TrashIcon aria-hidden="true" />
@@ -281,7 +261,6 @@
 
 <script setup>
 import {
-	AlignLeftIcon,
 	BoxIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,

From f90fabc7a57ff201f26e1b628eeced8e6ef75865 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 11:12:25 -0700
Subject: [PATCH 09/83] add collapse environment selector

---
 .../environment/EnvironmentSelector.vue       | 83 ++++++++++++-------
 1 file changed, 52 insertions(+), 31 deletions(-)

diff --git a/packages/ui/src/components/project/settings/environment/EnvironmentSelector.vue b/packages/ui/src/components/project/settings/environment/EnvironmentSelector.vue
index f5ddc6c59f..5aab0d7d8e 100644
--- a/packages/ui/src/components/project/settings/environment/EnvironmentSelector.vue
+++ b/packages/ui/src/components/project/settings/environment/EnvironmentSelector.vue
@@ -271,38 +271,59 @@ const simulateSave = ref(false)
 					}}</span>
 				</span>
 			</LargeRadioButton>
-			<div
-				v-if="suboptions"
-				class="pl-8"
-				role="radiogroup"
-				:aria-label="formatMessage(subOptionLabel, { option: formatMessage(title) })"
-			>
-				<LargeRadioButton
-					v-for="(
-						{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
-					) in suboptions"
-					:key="`env-option-${key}-${suboptionKey}`"
-					class="!w-full mt-2"
-					:class="{
-						'opacity-50': currentOuterOption !== key,
-					}"
-					:selected="currentSubOption === suboptionKey"
-					:disabled="disabled"
-					@select="
-						() => {
-							currentOuterOption = key
-							currentSubOption = suboptionKey
-						}
-					"
+			<Transition name="suboptions">
+				<div
+					v-if="Object.keys(suboptions).length > 0 && currentOuterOption === key"
+					class="pl-8 suboptions-container"
+					role="radiogroup"
+					:aria-label="formatMessage(subOptionLabel, { option: formatMessage(title) })"
 				>
-					<span class="flex flex-col">
-						<span>{{ formatMessage(suboptionTitle) }}</span>
-						<span v-if="suboptionDescription" class="text-sm text-secondary">{{
-							formatMessage(suboptionDescription)
-						}}</span>
-					</span>
-				</LargeRadioButton>
-			</div>
+					<LargeRadioButton
+						v-for="(
+							{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
+						) in suboptions"
+						:key="`env-option-${key}-${suboptionKey}`"
+						class="!w-full mt-2"
+						:selected="currentSubOption === suboptionKey"
+						:disabled="disabled"
+						@select="
+							() => {
+								currentOuterOption = key
+								currentSubOption = suboptionKey
+							}
+						"
+					>
+						<span class="flex flex-col">
+							<span>{{ formatMessage(suboptionTitle) }}</span>
+							<span v-if="suboptionDescription" class="text-sm text-secondary">{{
+								formatMessage(suboptionDescription)
+							}}</span>
+						</span>
+					</LargeRadioButton>
+				</div>
+			</Transition>
 		</template>
 	</div>
 </template>
+
+<style scoped>
+.suboptions-container {
+	overflow: hidden;
+}
+
+.suboptions-enter-active,
+.suboptions-leave-active {
+	transition:
+		opacity 0.2s ease,
+		transform 0.2s ease,
+		max-height 0.2s ease;
+	max-height: 500px;
+}
+
+.suboptions-enter-from,
+.suboptions-leave-to {
+	opacity: 0;
+	transform: translateY(-8px);
+	max-height: 0;
+}
+</style>

From ff29b598b43f1ce8771eacc9caaa92fde318aa79 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 11:12:57 -0700
Subject: [PATCH 10/83] implement dependencies list in metadata step

---
 .../components/AddedDependencyRow.vue         |  5 +-
 .../components/DependenciesList.vue           | 56 +++++++++++++++++++
 .../stages/DependenciesStage.vue              | 40 +++++--------
 .../stages/MetadataStage.vue                  | 31 +++++++++-
 .../providers/version/manage-version-modal.ts |  6 +-
 .../version/stages/dependencies-stage.ts      | 23 ++++++++
 .../src/providers/version/stages/index.ts     | 18 +++---
 7 files changed, 141 insertions(+), 38 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue

diff --git a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
index 680d62893b..b79fc9266c 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
@@ -22,7 +22,7 @@
 			{{ versionName }}
 		</span>
 
-		<div class="flex items-center justify-end gap-1">
+		<div v-if="!hideRemove" class="flex items-center justify-end gap-1">
 			<ButtonStyled size="standard" :circular="true">
 				<button aria-label="Remove file" class="!shadow-none" @click="emitRemove">
 					<XIcon aria-hidden="true" />
@@ -42,12 +42,13 @@ const emit = defineEmits<{
 	(e: 'remove'): void
 }>()
 
-const { projectId, name, icon, dependencyType, versionName } = defineProps<{
+const { projectId, name, icon, dependencyType, versionName, hideRemove } = defineProps<{
 	projectId: string
 	name?: string
 	icon?: string
 	dependencyType: Labrinth.Versions.v2.DependencyType
 	versionName?: string
+	hideRemove?: boolean
 }>()
 
 function emitRemove() {
diff --git a/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue b/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
new file mode 100644
index 0000000000..f614f9a395
--- /dev/null
+++ b/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
@@ -0,0 +1,56 @@
+<template>
+	<div v-if="addedDependencies.length" class="5 flex flex-col gap-2">
+		<template v-for="(dependency, index) in addedDependencies">
+			<AddedDependencyRow
+				v-if="dependency"
+				:key="index"
+				:project-id="dependency.projectId"
+				:name="dependency.name"
+				:icon="dependency.icon"
+				:dependency-type="dependency.dependencyType"
+				:version-name="dependency.versionName"
+				:hideRemove="disableRemove"
+				@remove="disableRemove ? undefined : () => removeDependency(index)"
+			/>
+		</template>
+		<span v-if="!addedDependencies.length"> No dependencies added. </span>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
+import AddedDependencyRow from './AddedDependencyRow.vue'
+
+const { disableRemove } = defineProps<{
+	disableRemove?: boolean
+}>()
+
+const { draftVersion, dependencyProjects, dependencyVersions, projectsFetchLoading } =
+	injectManageVersionContext()
+
+const addedDependencies = computed(() =>
+	(draftVersion.value.dependencies || [])
+		.map((dep) => {
+			if (!dep.project_id) return null
+
+			const dependencyProject = dependencyProjects.value[dep.project_id]
+			const versionName = dependencyVersions.value[dep.version_id || '']?.name ?? ''
+
+			if (!dependencyProject && projectsFetchLoading.value) return null
+
+			return {
+				projectId: dep.project_id,
+				name: dependencyProject?.name,
+				icon: dependencyProject?.icon_url,
+				dependencyType: dep.dependency_type,
+				versionName,
+			}
+		})
+		.filter(Boolean),
+)
+
+const removeDependency = (index: number) => {
+	if (!draftVersion.value.dependencies) return
+	draftVersion.value.dependencies.splice(index, 1)
+}
+</script>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
index 8de5dc6e08..909a236c5c 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
@@ -33,7 +33,7 @@
 						/>
 					</div>
 
-					<ButtonStyled>
+					<ButtonStyled color="green">
 						<button
 							class="self-start"
 							:disabled="!newDependencyProjectId"
@@ -62,21 +62,7 @@
 
 		<div v-if="addedDependencies.length" class="flex flex-col gap-4">
 			<span class="font-semibold text-contrast">Added dependencies</span>
-			<div class="5 flex flex-col gap-2">
-				<template v-for="(dependency, index) in addedDependencies">
-					<AddedDependencyRow
-						v-if="dependency"
-						:key="index"
-						:project-id="dependency.projectId"
-						:name="dependency.name"
-						:icon="dependency.icon"
-						:dependency-type="dependency.dependencyType"
-						:version-name="dependency.versionName"
-						@remove="() => removeDependency(index)"
-					/>
-				</template>
-				<span v-if="!addedDependencies.length"> No dependencies added. </span>
-			</div>
+			<DependenciesList />
 		</div>
 	</div>
 </template>
@@ -95,12 +81,22 @@ import type { ComboboxOption } from '@modrinth/ui/src/components/base/Combobox.v
 import DependencySelect from '~/components/ui/create-project-version/components/DependencySelect.vue'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
-import AddedDependencyRow from '../components/AddedDependencyRow.vue'
+import DependenciesList from '../components/DependenciesList.vue'
 import SuggestedDependencies from '../components/SuggestedDependencies/SuggestedDependencies.vue'
 
 const { addNotification } = injectNotificationManager()
 const { labrinth } = injectModrinthClient()
 
+const {
+	draftVersion,
+	dependencyProjects,
+	dependencyVersions,
+	getProject,
+	getVersion,
+	projectsFetchLoading,
+} = injectManageVersionContext()
+const { projectV2: project } = injectProjectPageContext()
+
 const errorNotification = (err: any) => {
 	addNotification({
 		title: 'An error occurred',
@@ -115,7 +111,6 @@ const newDependencyVersionId = ref<string | null>(null)
 
 const newDependencyVersions = ref<ComboboxOption<string>[]>([])
 
-const projectsFetchLoading = ref(false)
 const suggestedDependencies = ref<
 	Array<Labrinth.Versions.v3.Dependency & { name?: string; icon?: string; versionName?: string }>
 >([])
@@ -140,10 +135,6 @@ watch(newDependencyProjectId, async () => {
 	}
 })
 
-const { draftVersion, dependencyProjects, dependencyVersions, getProject, getVersion } =
-	injectManageVersionContext()
-const { projectV2: project } = injectProjectPageContext()
-
 const getSuggestedDependencies = async () => {
 	try {
 		suggestedDependencies.value = []
@@ -268,11 +259,6 @@ const addDependency = (dependency: Labrinth.Versions.v3.Dependency) => {
 	newDependencyProjectId.value = undefined
 }
 
-const removeDependency = (index: number) => {
-	if (!draftVersion.value.dependencies) return
-	draftVersion.value.dependencies.splice(index, 1)
-}
-
 const handleAddSuggestedDependency = (dependency: Labrinth.Versions.v3.Dependency) => {
 	draftVersion.value.dependencies?.push({
 		project_id: dependency.project_id,
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index d5df6541b0..7b026b0e94 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -116,7 +116,12 @@
 		<template v-if="!noEnvironmentProject">
 			<div class="flex flex-col gap-1">
 				<div class="flex items-center justify-between">
-					<span class="font-semibold text-contrast"> Environment </span>
+					<span
+						class="font-semibold text-contrast"
+						v-tooltip="'Pre-filled from a previous similar version'"
+					>
+						Environment
+					</span>
 
 					<ButtonStyled type="transparent" size="standard">
 						<button @click="editEnvironment">
@@ -138,6 +143,26 @@
 				</div>
 			</div>
 		</template>
+
+		<div class="flex flex-col gap-1">
+			<div class="flex items-center justify-between">
+				<span class="font-semibold text-contrast"> Dependencies </span>
+
+				<ButtonStyled type="transparent" size="standard">
+					<button @click="editDependencies">
+						<EditIcon />
+						Edit
+					</button>
+				</ButtonStyled>
+			</div>
+
+			<div v-if="draftVersion.dependencies?.length" class="flex flex-col gap-4">
+				<DependenciesList />
+			</div>
+			<div v-else class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
+				<span class="text-sm font-medium">No dependencies added.</span>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -148,6 +173,7 @@ import { formatCategory } from '@modrinth/utils'
 
 import { useGeneratedState } from '~/composables/generated'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
+import DependenciesList from '../components/DependenciesList.vue'
 import ViewOnlyFileRow from '../components/ViewOnlyFileRow.vue'
 
 const {
@@ -183,6 +209,9 @@ const editEnvironment = () => {
 const editFiles = () => {
 	modal.value?.setStage('from-details-files')
 }
+const editDependencies = () => {
+	modal.value?.setStage('from-details-dependencies')
+}
 
 const usingDetectedVersions = computed(() => {
 	if (!inferredVersionData.value?.game_versions) return false
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index 1f1c955aa4..08fd254bda 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -64,6 +64,7 @@ export interface ManageVersionContextValue {
 	projectType: Ref<Labrinth.Projects.v2.ProjectType | undefined>
 	dependencyProjects: Ref<Record<string, Labrinth.Projects.v3.Project>>
 	dependencyVersions: Ref<Record<string, Labrinth.Versions.v3.Version>>
+	projectsFetchLoading: Ref<boolean>
 	handlingNewFiles: Ref<boolean>
 
 	// Stage management
@@ -148,6 +149,8 @@ export function createManageVersionContext(
 	const inferredVersionData = ref<InferredVersionInfo>()
 	const dependencyProjects = ref<Record<string, Labrinth.Projects.v3.Project>>({})
 	const dependencyVersions = ref<Record<string, Labrinth.Versions.v3.Version>>({})
+	const projectsFetchLoading = ref(false)
+
 	const isSubmitting = ref(false)
 
 	const projectType = computed<Labrinth.Projects.v2.ProjectType>(() => {
@@ -420,7 +423,7 @@ export function createManageVersionContext(
 				return editingVersion.value ? 'Edit environment' : 'Add environment'
 			case 'add-changelog':
 				return editingVersion.value ? 'Edit changelog' : 'Add changelog'
-				case 'metadata':
+			case 'metadata':
 				return 'Edit metadata'
 			default:
 				return 'Next'
@@ -447,6 +450,7 @@ export function createManageVersionContext(
 		dependencyProjects,
 		dependencyVersions,
 		handlingNewFiles,
+		projectsFetchLoading,
 
 		// Stage management
 		stageConfigs,
diff --git a/apps/frontend/src/providers/version/stages/dependencies-stage.ts b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
index afa1765505..845fbeeabf 100644
--- a/apps/frontend/src/providers/version/stages/dependencies-stage.ts
+++ b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
@@ -34,3 +34,26 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 				},
 	nonProgressStage: (ctx) => ctx.editingVersion.value,
 }
+
+export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
+	id: 'from-details-dependencies',
+	stageContent: markRaw(DependenciesStage),
+	title: 'Edit dependencies',
+	nonProgressStage: true,
+	leftButtonConfig: (ctx) => ({
+		label: 'Back',
+		icon: LeftArrowIcon,
+		onClick: () => ctx.modal.value?.setStage('metadata'),
+	}),
+	rightButtonConfig: (ctx) =>
+		ctx.editingVersion.value
+			? {
+					...ctx.saveButtonConfig(),
+				}
+			: {
+					label: 'Add details',
+					icon: RightArrowIcon,
+					iconPosition: 'after',
+					onClick: () => ctx.modal.value?.setStage('add-details'),
+				},
+}
diff --git a/apps/frontend/src/providers/version/stages/index.ts b/apps/frontend/src/providers/version/stages/index.ts
index da1072a0d6..675e428d1d 100644
--- a/apps/frontend/src/providers/version/stages/index.ts
+++ b/apps/frontend/src/providers/version/stages/index.ts
@@ -1,5 +1,11 @@
-import { stageConfig as addFilesStageConfig, fromDetailsStageConfig as fromDetailsFilesStageConfig } from './add-files-stage'
-import { stageConfig as dependenciesStageConfig } from './dependencies-stage'
+import {
+	stageConfig as addFilesStageConfig,
+	fromDetailsStageConfig as fromDetailsFilesStageConfig,
+} from './add-files-stage'
+import {
+	stageConfig as dependenciesStageConfig,
+	fromDetailsStageConfig as fromDetailsDependenciesStageConfig,
+} from './dependencies-stage'
 import { stageConfig as detailsStageConfig } from './details-stage'
 import {
 	stageConfig as environmentStageConfig,
@@ -13,10 +19,7 @@ import {
 	fromDetailsStageConfig as fromDetailsMcVersionsStageConfig,
 	stageConfig as mcVersionsStageConfig,
 } from './mc-versions-stage'
-import {
-	stageConfig as metadataStageConfig,
-} from './metadata-stage'
-
+import { stageConfig as metadataStageConfig } from './metadata-stage'
 
 export const stageConfigs = [
 	addFilesStageConfig,
@@ -31,5 +34,6 @@ export const stageConfigs = [
 	fromDetailsLoadersStageConfig,
 	fromDetailsMcVersionsStageConfig,
 	fromDetailsEnvironmentStageConfig,
-	fromDetailsFilesStageConfig
+	fromDetailsFilesStageConfig,
+	fromDetailsDependenciesStageConfig,
 ]

From 49160059d680afcffc5a4ad4492365aecf92fd75 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 11:37:24 -0700
Subject: [PATCH 11/83] move dependencies into provider

---
 .../components/AddedDependencyRow.vue         |   2 +-
 .../components/DependenciesList.vue           |   2 +-
 .../SuggestedDependency.vue                   |   6 +-
 .../stages/DependenciesStage.vue              |  90 +--------------
 .../stages/MetadataStage.vue                  |  18 +++
 .../providers/version/manage-version-modal.ts | 107 ++++++++++++++++++
 6 files changed, 131 insertions(+), 94 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
index b79fc9266c..f660c9a9fb 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
@@ -9,7 +9,7 @@
 				{{ name || 'Unknown Project' }}
 			</span>
 
-			<TagItem class="shrink-0 border !border-solid border-surface-5">
+			<TagItem class="shrink-0 border !border-solid border-surface-5 capitalize">
 				{{ dependencyType }}
 			</TagItem>
 		</div>
diff --git a/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue b/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
index f614f9a395..f33c02cdd4 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
@@ -10,7 +10,7 @@
 				:dependency-type="dependency.dependencyType"
 				:version-name="dependency.versionName"
 				:hideRemove="disableRemove"
-				@remove="disableRemove ? undefined : () => removeDependency(index)"
+				@remove="() => removeDependency(index)"
 			/>
 		</template>
 		<span v-if="!addedDependencies.length"> No dependencies added. </span>
diff --git a/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue b/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue
index c3e21f1c3e..bf4a3db4b2 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependency.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex items-center justify-between gap-2 rounded-xl bg-button-bg px-4 py-1 text-button-text"
+		class="flex items-center justify-between gap-2 rounded-xl border-2 border-dashed border-surface-5 px-4 py-1 text-button-text"
 	>
 		<div class="grid max-w-[75%] grid-cols-[auto_1fr_auto] items-center gap-2">
 			<Avatar v-if="icon" :src="icon" alt="dependency-icon" size="20px" :no-shadow="true" />
@@ -9,7 +9,7 @@
 				{{ name || 'Unknown Project' }}
 			</span>
 
-			<TagItem class="shrink-0 border !border-solid border-surface-5">
+			<TagItem class="shrink-0 border !border-solid border-surface-5 capitalize">
 				{{ dependencyType }}
 			</TagItem>
 		</div>
@@ -23,7 +23,7 @@
 		</span>
 
 		<div class="flex items-center justify-end gap-1">
-			<ButtonStyled size="standard" :circular="true">
+			<ButtonStyled size="standard" :circular="true" type="transparent">
 				<button aria-label="Add dependency" class="!shadow-none" @click="emitAddSuggestion">
 					<PlusIcon aria-hidden="true" />
 				</button>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
index 909a236c5c..e6b957f206 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
@@ -74,7 +74,6 @@ import {
 	Combobox,
 	injectModrinthClient,
 	injectNotificationManager,
-	injectProjectPageContext,
 } from '@modrinth/ui'
 import type { ComboboxOption } from '@modrinth/ui/src/components/base/Combobox.vue'
 
@@ -91,11 +90,9 @@ const {
 	draftVersion,
 	dependencyProjects,
 	dependencyVersions,
-	getProject,
-	getVersion,
 	projectsFetchLoading,
+	suggestedDependencies,
 } = injectManageVersionContext()
-const { projectV2: project } = injectProjectPageContext()
 
 const errorNotification = (err: any) => {
 	addNotification({
@@ -111,10 +108,6 @@ const newDependencyVersionId = ref<string | null>(null)
 
 const newDependencyVersions = ref<ComboboxOption<string>[]>([])
 
-const suggestedDependencies = ref<
-	Array<Labrinth.Versions.v3.Dependency & { name?: string; icon?: string; versionName?: string }>
->([])
-
 // reset to defaults when select different project
 watch(newDependencyProjectId, async () => {
 	newDependencyVersionId.value = null
@@ -135,87 +128,6 @@ watch(newDependencyProjectId, async () => {
 	}
 })
 
-const getSuggestedDependencies = async () => {
-	try {
-		suggestedDependencies.value = []
-
-		if (!draftVersion.value.game_versions?.length || !draftVersion.value.loaders?.length) {
-			return
-		}
-
-		try {
-			const versions = await labrinth.versions_v3.getProjectVersions(project.value.id, {
-				loaders: draftVersion.value.loaders,
-			})
-
-			// Get the most recent matching version and extract its dependencies
-			if (versions.length > 0) {
-				const mostRecentVersion = versions[0]
-				for (const dep of mostRecentVersion.dependencies) {
-					suggestedDependencies.value.push({
-						project_id: dep.project_id,
-						version_id: dep.version_id,
-						dependency_type: dep.dependency_type,
-						file_name: dep.file_name,
-					})
-				}
-			}
-		} catch (error: any) {
-			console.error(`Failed to get versions for project ${project.value.id}:`, error)
-		}
-
-		for (const dep of suggestedDependencies.value) {
-			try {
-				if (dep.project_id) {
-					const proj = await getProject(dep.project_id)
-					dep.name = proj.name
-					dep.icon = proj.icon_url
-				}
-
-				if (dep.version_id) {
-					const version = await getVersion(dep.version_id)
-					dep.versionName = version.name
-				}
-			} catch (error: any) {
-				console.error(`Failed to fetch project/version data for dependency:`, error)
-			}
-		}
-	} catch (error: any) {
-		errorNotification(error)
-	}
-}
-
-onMounted(() => {
-	getSuggestedDependencies()
-})
-
-watch(
-	draftVersion,
-	async (draftVersion) => {
-		const deps = draftVersion.dependencies || []
-
-		for (const dep of deps) {
-			if (dep?.project_id) {
-				try {
-					await getProject(dep.project_id)
-				} catch (error: any) {
-					errorNotification(error)
-				}
-			}
-
-			if (dep?.version_id) {
-				try {
-					await getVersion(dep.version_id)
-				} catch (error: any) {
-					errorNotification(error)
-				}
-			}
-		}
-		projectsFetchLoading.value = false
-	},
-	{ immediate: true, deep: true },
-)
-
 const addedDependencies = computed(() =>
 	(draftVersion.value.dependencies || [])
 		.map((dep) => {
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 7b026b0e94..002165c928 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -144,6 +144,11 @@
 			</div>
 		</template>
 
+		<SuggestedDependencies
+			:suggested-dependencies="suggestedDependencies"
+			@on-add-suggestion="handleAddSuggestedDependency"
+		/>
+
 		<div class="flex flex-col gap-1">
 			<div class="flex items-center justify-between">
 				<span class="font-semibold text-contrast"> Dependencies </span>
@@ -171,9 +176,12 @@ import { EditIcon } from '@modrinth/assets'
 import { ButtonStyled, defineMessages, ENVIRONMENTS_COPY, TagItem, useVIntl } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
 
+import type { Labrinth } from '@modrinth/api-client'
+
 import { useGeneratedState } from '~/composables/generated'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 import DependenciesList from '../components/DependenciesList.vue'
+import SuggestedDependencies from '../components/SuggestedDependencies/SuggestedDependencies.vue'
 import ViewOnlyFileRow from '../components/ViewOnlyFileRow.vue'
 
 const {
@@ -185,6 +193,7 @@ const {
 	modal,
 	filesToAdd,
 	editingVersion,
+	suggestedDependencies,
 } = injectManageVersionContext()
 
 const generatedState = useGeneratedState()
@@ -328,4 +337,13 @@ const environmentCopy = computed(() => {
 		}),
 	}
 })
+
+const handleAddSuggestedDependency = (dependency: Labrinth.Versions.v3.Dependency) => {
+	if (!draftVersion.value.dependencies) draftVersion.value.dependencies = []
+	draftVersion.value.dependencies.push({
+		project_id: dependency.project_id,
+		version_id: dependency.version_id,
+		dependency_type: dependency.dependency_type,
+	})
+}
 </script>
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index 08fd254bda..4e19fcc199 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -55,6 +55,12 @@ export type VersionStage =
 	| 'from-details-mc-versions'
 	| 'from-details-environment'
 
+export type SuggestedDependency = Labrinth.Versions.v3.Dependency & {
+	name?: string
+	icon?: string
+	versionName?: string
+}
+
 export interface ManageVersionContextValue {
 	// State
 	draftVersion: Ref<Labrinth.Versions.v3.DraftVersion>
@@ -66,6 +72,7 @@ export interface ManageVersionContextValue {
 	dependencyVersions: Ref<Record<string, Labrinth.Versions.v3.Version>>
 	projectsFetchLoading: Ref<boolean>
 	handlingNewFiles: Ref<boolean>
+	suggestedDependencies: Ref<SuggestedDependency[]>
 
 	// Stage management
 	stageConfigs: StageConfigInput<ManageVersionContextValue>[]
@@ -150,6 +157,7 @@ export function createManageVersionContext(
 	const dependencyProjects = ref<Record<string, Labrinth.Projects.v3.Project>>({})
 	const dependencyVersions = ref<Record<string, Labrinth.Versions.v3.Version>>({})
 	const projectsFetchLoading = ref(false)
+	const suggestedDependencies = ref<SuggestedDependency[]>([])
 
 	const isSubmitting = ref(false)
 
@@ -301,6 +309,104 @@ export function createManageVersionContext(
 		return version
 	}
 
+	// Watch draft version dependencies to fetch project/version data
+	watch(
+		draftVersion,
+		async (version) => {
+			const deps = version.dependencies || []
+
+			for (const dep of deps) {
+				if (dep?.project_id) {
+					try {
+						await getProject(dep.project_id)
+					} catch (error: any) {
+						addNotification({
+							title: 'An error occurred',
+							text: error.data ? error.data.description : error,
+							type: 'error',
+						})
+					}
+				}
+
+				if (dep?.version_id) {
+					try {
+						await getVersion(dep.version_id)
+					} catch (error: any) {
+						addNotification({
+							title: 'An error occurred',
+							text: error.data ? error.data.description : error,
+							type: 'error',
+						})
+					}
+				}
+			}
+			projectsFetchLoading.value = false
+		},
+		{ immediate: true, deep: true },
+	)
+
+	// Watch loaders to fetch suggested dependencies
+	watch(
+		() => draftVersion.value.loaders,
+		async (loaders) => {
+			try {
+				suggestedDependencies.value = []
+
+				if (!loaders?.length) {
+					return
+				}
+
+				const projectId = draftVersion.value.project_id
+				if (!projectId) return
+
+				try {
+					const versions = await labrinth.versions_v3.getProjectVersions(projectId, {
+						loaders,
+					})
+
+					// Get the most recent matching version and extract its dependencies
+					if (versions.length > 0) {
+						const mostRecentVersion = versions[0]
+						for (const dep of mostRecentVersion.dependencies) {
+							suggestedDependencies.value.push({
+								project_id: dep.project_id,
+								version_id: dep.version_id,
+								dependency_type: dep.dependency_type,
+								file_name: dep.file_name,
+							})
+						}
+					}
+				} catch (error: any) {
+					console.error(`Failed to get versions for project ${projectId}:`, error)
+				}
+
+				for (const dep of suggestedDependencies.value) {
+					try {
+						if (dep.project_id) {
+							const proj = await getProject(dep.project_id)
+							dep.name = proj.name
+							dep.icon = proj.icon_url
+						}
+
+						if (dep.version_id) {
+							const version = await getVersion(dep.version_id)
+							dep.versionName = version.name
+						}
+					} catch (error: any) {
+						console.error(`Failed to fetch project/version data for dependency:`, error)
+					}
+				}
+			} catch (error: any) {
+				addNotification({
+					title: 'An error occurred',
+					text: error.data ? error.data.description : error,
+					type: 'error',
+				})
+			}
+		},
+		{ immediate: true },
+	)
+
 	// Submission handlers
 	async function handleCreateVersion() {
 		const version = toRaw(draftVersion.value)
@@ -451,6 +557,7 @@ export function createManageVersionContext(
 		dependencyVersions,
 		handlingNewFiles,
 		projectsFetchLoading,
+		suggestedDependencies,
 
 		// Stage management
 		stageConfigs,

From d35f4902d8bb71bf48534f598ccfa23c59a7b557 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 11:47:52 -0700
Subject: [PATCH 12/83] add suggested dependencies to metadata stage

---
 .../SuggestedDependencies.vue                 | 66 ++++++-------------
 .../stages/DependenciesStage.vue              | 10 +--
 .../stages/MetadataStage.vue                  | 24 +++++--
 .../providers/version/manage-version-modal.ts | 13 ++++
 .../version/stages/dependencies-stage.ts      |  2 +-
 5 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependencies.vue b/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependencies.vue
index f92ed38347..0220e2c6a2 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependencies.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/SuggestedDependencies/SuggestedDependencies.vue
@@ -1,27 +1,24 @@
 <template>
-	<div v-if="visibleDependencies.length" class="flex flex-col gap-4">
-		<span class="font-semibold text-contrast">Suggested dependencies</span>
-		<div class="flex flex-col gap-2">
-			<template v-for="(dependency, index) in visibleDependencies">
-				<SuggestedDependency
-					v-if="dependency"
-					:key="index"
-					:project-id="dependency.project_id"
-					:name="dependency.name"
-					:icon="dependency.icon"
-					:dependency-type="dependency.dependency_type"
-					:version-name="dependency.versionName"
-					@on-add-suggestion="
-						() =>
-							handleAddSuggestion({
-								dependency_type: dependency.dependency_type,
-								project_id: dependency.project_id,
-								version_id: dependency.version_id,
-							})
-					"
-				/>
-			</template>
-		</div>
+	<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-2">
+		<template v-for="(dependency, index) in visibleSuggestedDependencies">
+			<SuggestedDependency
+				v-if="dependency"
+				:key="index"
+				:project-id="dependency.project_id"
+				:name="dependency.name"
+				:icon="dependency.icon"
+				:dependency-type="dependency.dependency_type"
+				:version-name="dependency.versionName"
+				@on-add-suggestion="
+					() =>
+						handleAddSuggestion({
+							dependency_type: dependency.dependency_type,
+							project_id: dependency.project_id,
+							version_id: dependency.version_id,
+						})
+				"
+			/>
+		</template>
 	</div>
 </template>
 
@@ -32,28 +29,7 @@ import { injectManageVersionContext } from '~/providers/version/manage-version-m
 
 import SuggestedDependency from './SuggestedDependency.vue'
 
-export interface SuggestedDependency extends Labrinth.Versions.v3.Dependency {
-	icon?: string
-	name?: string
-	versionName?: string
-}
-
-const props = defineProps<{
-	suggestedDependencies: SuggestedDependency[]
-}>()
-
-const { draftVersion } = injectManageVersionContext()
-
-const visibleDependencies = computed<SuggestedDependency[]>(() =>
-	props.suggestedDependencies
-		.filter(
-			(dep) =>
-				!draftVersion.value.dependencies?.some(
-					(d) => d.project_id === dep.project_id && d.version_id === dep.version_id,
-				),
-		)
-		.sort((a, b) => (a.name || '').localeCompare(b.name || '')),
-)
+const { visibleSuggestedDependencies } = injectManageVersionContext()
 
 const emit = defineEmits<{
 	(e: 'onAddSuggestion', dependency: Labrinth.Versions.v3.Dependency): void
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
index e6b957f206..cafbb0d48d 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
@@ -55,10 +55,10 @@
 			</div>
 		</div>
 
-		<SuggestedDependencies
-			:suggested-dependencies="suggestedDependencies"
-			@on-add-suggestion="handleAddSuggestedDependency"
-		/>
+		<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-4">
+			<span class="font-semibold text-contrast">Suggested dependencies</span>
+			<SuggestedDependencies @on-add-suggestion="handleAddSuggestedDependency" />
+		</div>
 
 		<div v-if="addedDependencies.length" class="flex flex-col gap-4">
 			<span class="font-semibold text-contrast">Added dependencies</span>
@@ -91,7 +91,7 @@ const {
 	dependencyProjects,
 	dependencyVersions,
 	projectsFetchLoading,
-	suggestedDependencies,
+	visibleSuggestedDependencies,
 } = injectManageVersionContext()
 
 const errorNotification = (err: any) => {
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 002165c928..78cb209631 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -144,12 +144,24 @@
 			</div>
 		</template>
 
-		<SuggestedDependencies
-			:suggested-dependencies="suggestedDependencies"
-			@on-add-suggestion="handleAddSuggestedDependency"
-		/>
+		<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-1">
+			<div class="flex items-center justify-between">
+				<span class="font-semibold text-contrast"> Suggested dependencies </span>
 
-		<div class="flex flex-col gap-1">
+				<ButtonStyled type="transparent" size="standard">
+					<button @click="editDependencies">
+						<EditIcon />
+						Edit
+					</button>
+				</ButtonStyled>
+			</div>
+			<SuggestedDependencies @on-add-suggestion="handleAddSuggestedDependency" />
+		</div>
+
+		<div
+			v-if="!visibleSuggestedDependencies.length || draftVersion.dependencies?.length"
+			class="flex flex-col gap-1"
+		>
 			<div class="flex items-center justify-between">
 				<span class="font-semibold text-contrast"> Dependencies </span>
 
@@ -193,7 +205,7 @@ const {
 	modal,
 	filesToAdd,
 	editingVersion,
-	suggestedDependencies,
+	visibleSuggestedDependencies,
 } = injectManageVersionContext()
 
 const generatedState = useGeneratedState()
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index 4e19fcc199..ac3c58db9d 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -73,6 +73,7 @@ export interface ManageVersionContextValue {
 	projectsFetchLoading: Ref<boolean>
 	handlingNewFiles: Ref<boolean>
 	suggestedDependencies: Ref<SuggestedDependency[]>
+	visibleSuggestedDependencies: ComputedRef<SuggestedDependency[]>
 
 	// Stage management
 	stageConfigs: StageConfigInput<ManageVersionContextValue>[]
@@ -198,6 +199,17 @@ export function createManageVersionContext(
 	// Computed state
 	const editingVersion = computed(() => Boolean(draftVersion.value.version_id))
 
+	const visibleSuggestedDependencies = computed<SuggestedDependency[]>(() =>
+		suggestedDependencies.value
+			.filter(
+				(dep) =>
+					!draftVersion.value.dependencies?.some(
+						(d) => d.project_id === dep.project_id && d.version_id === dep.version_id,
+					),
+			)
+			.sort((a, b) => (a.name || '').localeCompare(b.name || '')),
+	)
+
 	// Version management methods
 	function newDraftVersion(
 		projectId: string,
@@ -558,6 +570,7 @@ export function createManageVersionContext(
 		handlingNewFiles,
 		projectsFetchLoading,
 		suggestedDependencies,
+		visibleSuggestedDependencies,
 
 		// Stage management
 		stageConfigs,
diff --git a/apps/frontend/src/providers/version/stages/dependencies-stage.ts b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
index 845fbeeabf..d5e033d2cb 100644
--- a/apps/frontend/src/providers/version/stages/dependencies-stage.ts
+++ b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
@@ -10,7 +10,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-dependencies',
 	stageContent: markRaw(DependenciesStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit dependencies' : 'Add dependencies'),
-	skip: (ctx) => ctx.projectType.value === 'modpack',
+	skip: (ctx) => ctx.projectType.value === 'modpack' || !!ctx.suggestedDependencies.value?.length,
 	leftButtonConfig: (ctx) =>
 		ctx.editingVersion.value
 			? {

From 66d5ed1f1b8a583f2b62359c61b85de3c81ab782 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 12:19:08 -0700
Subject: [PATCH 13/83] pnpm prepr

---
 .../create-project-version/components/DependenciesList.vue | 3 ++-
 .../ui/create-project-version/stages/AddFilesStage.vue     | 2 +-
 .../ui/create-project-version/stages/DetailsStage.vue      | 7 ++-----
 .../ui/create-project-version/stages/MetadataStage.vue     | 6 +++---
 .../frontend/src/providers/version/stages/details-stage.ts | 4 ++--
 apps/frontend/src/providers/version/stages/index.ts        | 6 +++---
 .../src/providers/version/stages/metadata-stage.ts         | 2 ++
 packages/ui/src/components/base/DropzoneFileInput.vue      | 6 +++---
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue b/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
index f33c02cdd4..6e4744b201 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/DependenciesList.vue
@@ -9,7 +9,7 @@
 				:icon="dependency.icon"
 				:dependency-type="dependency.dependencyType"
 				:version-name="dependency.versionName"
-				:hideRemove="disableRemove"
+				:hide-remove="disableRemove"
 				@remove="() => removeDependency(index)"
 			/>
 		</template>
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
+
 import AddedDependencyRow from './AddedDependencyRow.vue'
 
 const { disableRemove } = defineProps<{
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index ece69601fb..c856cb5c55 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -8,9 +8,9 @@
 				multiple
 				:accept="acceptFileFromProjectType(projectV2.project_type)"
 				:max-size="524288000"
-				@change="handleNewFiles"
 				primary-prompt="Upload primary and supporting files"
 				secondary-prompt="Drag and drop files or click to browse"
+				@change="handleNewFiles"
 			/>
 		</template>
 
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
index b695704d63..0dd2133609 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
@@ -51,19 +51,16 @@
 </template>
 
 <script lang="ts" setup>
-import { Chips } from '@modrinth/ui'
+import { Chips, MarkdownEditor  } from '@modrinth/ui'
 
 import { useGeneratedState } from '~/composables/generated'
+import { useImageUpload } from '~/composables/image-upload.ts'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
 const { draftVersion } = injectManageVersionContext()
 
 const generatedState = useGeneratedState()
 
-import { MarkdownEditor } from '@modrinth/ui'
-
-import { useImageUpload } from '~/composables/image-upload.ts'
-
 async function onImageUpload(file: File) {
 	const response = await useImageUpload(file, { context: 'version' })
 	return response.url
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 78cb209631..57fcb9dfc2 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -117,8 +117,8 @@
 			<div class="flex flex-col gap-1">
 				<div class="flex items-center justify-between">
 					<span
-						class="font-semibold text-contrast"
 						v-tooltip="'Pre-filled from a previous similar version'"
+						class="font-semibold text-contrast"
 					>
 						Environment
 					</span>
@@ -184,14 +184,14 @@
 </template>
 
 <script lang="ts" setup>
+import type { Labrinth } from '@modrinth/api-client'
 import { EditIcon } from '@modrinth/assets'
 import { ButtonStyled, defineMessages, ENVIRONMENTS_COPY, TagItem, useVIntl } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
 
-import type { Labrinth } from '@modrinth/api-client'
-
 import { useGeneratedState } from '~/composables/generated'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
+
 import DependenciesList from '../components/DependenciesList.vue'
 import SuggestedDependencies from '../components/SuggestedDependencies/SuggestedDependencies.vue'
 import ViewOnlyFileRow from '../components/ViewOnlyFileRow.vue'
diff --git a/apps/frontend/src/providers/version/stages/details-stage.ts b/apps/frontend/src/providers/version/stages/details-stage.ts
index 160e275969..c63c004a60 100644
--- a/apps/frontend/src/providers/version/stages/details-stage.ts
+++ b/apps/frontend/src/providers/version/stages/details-stage.ts
@@ -1,9 +1,9 @@
-import { LeftArrowIcon, XIcon } from '@modrinth/assets'
+import { LeftArrowIcon, PlusIcon, SaveIcon, SpinnerIcon,XIcon  } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'
 
-import { PlusIcon, SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import DetailsStage from '~/components/ui/create-project-version/stages/DetailsStage.vue'
+
 import type { ManageVersionContextValue } from '../manage-version-modal'
 
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
diff --git a/apps/frontend/src/providers/version/stages/index.ts b/apps/frontend/src/providers/version/stages/index.ts
index 675e428d1d..165c5b94cb 100644
--- a/apps/frontend/src/providers/version/stages/index.ts
+++ b/apps/frontend/src/providers/version/stages/index.ts
@@ -1,15 +1,15 @@
 import {
-	stageConfig as addFilesStageConfig,
 	fromDetailsStageConfig as fromDetailsFilesStageConfig,
+	stageConfig as addFilesStageConfig,
 } from './add-files-stage'
 import {
-	stageConfig as dependenciesStageConfig,
 	fromDetailsStageConfig as fromDetailsDependenciesStageConfig,
+	stageConfig as dependenciesStageConfig,
 } from './dependencies-stage'
 import { stageConfig as detailsStageConfig } from './details-stage'
 import {
-	stageConfig as environmentStageConfig,
 	fromDetailsStageConfig as fromDetailsEnvironmentStageConfig,
+	stageConfig as environmentStageConfig,
 } from './environment-stage'
 import {
 	fromDetailsStageConfig as fromDetailsLoadersStageConfig,
diff --git a/apps/frontend/src/providers/version/stages/metadata-stage.ts b/apps/frontend/src/providers/version/stages/metadata-stage.ts
index caa027c505..ac2fc47459 100644
--- a/apps/frontend/src/providers/version/stages/metadata-stage.ts
+++ b/apps/frontend/src/providers/version/stages/metadata-stage.ts
@@ -1,7 +1,9 @@
 import { LeftArrowIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'
+
 import MetadataStage from '~/components/ui/create-project-version/stages/MetadataStage.vue'
+
 import type { ManageVersionContextValue } from '../manage-version-modal'
 
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
diff --git a/packages/ui/src/components/base/DropzoneFileInput.vue b/packages/ui/src/components/base/DropzoneFileInput.vue
index ad6185f913..484f62669f 100644
--- a/packages/ui/src/components/base/DropzoneFileInput.vue
+++ b/packages/ui/src/components/base/DropzoneFileInput.vue
@@ -46,9 +46,9 @@
 </template>
 
 <script setup lang="ts">
-import { FolderUpIcon } from '@modrinth/assets';
-import { fileIsValid } from '@modrinth/utils';
-import { ref } from 'vue';
+import { FolderUpIcon } from '@modrinth/assets'
+import { fileIsValid } from '@modrinth/utils'
+import { ref } from 'vue'
 
 const fileInput = ref<HTMLInputElement | null>(null)
 

From 70875149e625f7ffebfdf41815acd60bab83da50 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 14:32:38 -0700
Subject: [PATCH 14/83] fix unused var

---
 .../ui/create-project-version/stages/DetailsStage.vue        | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
index 0dd2133609..dead60693f 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
@@ -51,16 +51,13 @@
 </template>
 
 <script lang="ts" setup>
-import { Chips, MarkdownEditor  } from '@modrinth/ui'
+import { Chips, MarkdownEditor } from '@modrinth/ui'
 
-import { useGeneratedState } from '~/composables/generated'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
 const { draftVersion } = injectManageVersionContext()
 
-const generatedState = useGeneratedState()
-
 async function onImageUpload(file: File) {
 	const response = await useImageUpload(file, { context: 'version' })
 	return response.url

From 88ef41952bcad16fe8c5ae83f9e28712b8aca3ea Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 14:46:40 -0700
Subject: [PATCH 15/83] Revert "add collapse environment selector"

This reverts commit f90fabc7a57ff201f26e1b628eeced8e6ef75865.
---
 .../environment/EnvironmentSelector.vue       | 83 +++++++------------
 1 file changed, 31 insertions(+), 52 deletions(-)

diff --git a/packages/ui/src/components/project/settings/environment/EnvironmentSelector.vue b/packages/ui/src/components/project/settings/environment/EnvironmentSelector.vue
index 5aab0d7d8e..f5ddc6c59f 100644
--- a/packages/ui/src/components/project/settings/environment/EnvironmentSelector.vue
+++ b/packages/ui/src/components/project/settings/environment/EnvironmentSelector.vue
@@ -271,59 +271,38 @@ const simulateSave = ref(false)
 					}}</span>
 				</span>
 			</LargeRadioButton>
-			<Transition name="suboptions">
-				<div
-					v-if="Object.keys(suboptions).length > 0 && currentOuterOption === key"
-					class="pl-8 suboptions-container"
-					role="radiogroup"
-					:aria-label="formatMessage(subOptionLabel, { option: formatMessage(title) })"
+			<div
+				v-if="suboptions"
+				class="pl-8"
+				role="radiogroup"
+				:aria-label="formatMessage(subOptionLabel, { option: formatMessage(title) })"
+			>
+				<LargeRadioButton
+					v-for="(
+						{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
+					) in suboptions"
+					:key="`env-option-${key}-${suboptionKey}`"
+					class="!w-full mt-2"
+					:class="{
+						'opacity-50': currentOuterOption !== key,
+					}"
+					:selected="currentSubOption === suboptionKey"
+					:disabled="disabled"
+					@select="
+						() => {
+							currentOuterOption = key
+							currentSubOption = suboptionKey
+						}
+					"
 				>
-					<LargeRadioButton
-						v-for="(
-							{ title: suboptionTitle, description: suboptionDescription }, suboptionKey
-						) in suboptions"
-						:key="`env-option-${key}-${suboptionKey}`"
-						class="!w-full mt-2"
-						:selected="currentSubOption === suboptionKey"
-						:disabled="disabled"
-						@select="
-							() => {
-								currentOuterOption = key
-								currentSubOption = suboptionKey
-							}
-						"
-					>
-						<span class="flex flex-col">
-							<span>{{ formatMessage(suboptionTitle) }}</span>
-							<span v-if="suboptionDescription" class="text-sm text-secondary">{{
-								formatMessage(suboptionDescription)
-							}}</span>
-						</span>
-					</LargeRadioButton>
-				</div>
-			</Transition>
+					<span class="flex flex-col">
+						<span>{{ formatMessage(suboptionTitle) }}</span>
+						<span v-if="suboptionDescription" class="text-sm text-secondary">{{
+							formatMessage(suboptionDescription)
+						}}</span>
+					</span>
+				</LargeRadioButton>
+			</div>
 		</template>
 	</div>
 </template>
-
-<style scoped>
-.suboptions-container {
-	overflow: hidden;
-}
-
-.suboptions-enter-active,
-.suboptions-leave-active {
-	transition:
-		opacity 0.2s ease,
-		transform 0.2s ease,
-		max-height 0.2s ease;
-	max-height: 500px;
-}
-
-.suboptions-enter-from,
-.suboptions-leave-to {
-	opacity: 0;
-	transform: translateY(-8px);
-	max-height: 0;
-}
-</style>

From 7f6b8547e67ac150a69c3907db08a40cbd64bdb5 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 14:52:08 -0700
Subject: [PATCH 16/83] hide resource pack loader only when its the only loader

---
 apps/frontend/src/providers/version/manage-version-modal.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index ac3c58db9d..f7f48c1cee 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -507,7 +507,9 @@ export function createManageVersionContext(
 	}
 
 	// Stage visibility computeds (inlined)
-	const noLoadersProject = computed(() => projectType.value === 'resourcepack')
+	const noLoadersProject = computed(
+		() => draftVersion.value.loaders.length === 1 && draftVersion.value.loaders[0] === 'minecraft',
+	)
 	const noEnvironmentProject = computed(
 		() => projectType.value !== 'mod' && projectType.value !== 'modpack',
 	)

From b84f0327d29ff5faee81240a9d4ddefe015029fc Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 15:15:45 -0700
Subject: [PATCH 17/83] fix no dependencies for modpack

---
 .../stages/MetadataStage.vue                  | 63 ++++++++++---------
 .../providers/version/manage-version-modal.ts | 21 ++++---
 2 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 57fcb9dfc2..7b9d730384 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -144,42 +144,44 @@
 			</div>
 		</template>
 
-		<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-1">
-			<div class="flex items-center justify-between">
-				<span class="font-semibold text-contrast"> Suggested dependencies </span>
+		<template v-if="!noDependenciesProject">
+			<div v-if="visibleSuggestedDependencies.length" class="flex flex-col gap-1">
+				<div class="flex items-center justify-between">
+					<span class="font-semibold text-contrast"> Suggested dependencies </span>
 
-				<ButtonStyled type="transparent" size="standard">
-					<button @click="editDependencies">
-						<EditIcon />
-						Edit
-					</button>
-				</ButtonStyled>
+					<ButtonStyled type="transparent" size="standard">
+						<button @click="editDependencies">
+							<EditIcon />
+							Edit
+						</button>
+					</ButtonStyled>
+				</div>
+				<SuggestedDependencies @on-add-suggestion="handleAddSuggestedDependency" />
 			</div>
-			<SuggestedDependencies @on-add-suggestion="handleAddSuggestedDependency" />
-		</div>
 
-		<div
-			v-if="!visibleSuggestedDependencies.length || draftVersion.dependencies?.length"
-			class="flex flex-col gap-1"
-		>
-			<div class="flex items-center justify-between">
-				<span class="font-semibold text-contrast"> Dependencies </span>
+			<div
+				v-if="!visibleSuggestedDependencies.length || draftVersion.dependencies?.length"
+				class="flex flex-col gap-1"
+			>
+				<div class="flex items-center justify-between">
+					<span class="font-semibold text-contrast"> Dependencies </span>
 
-				<ButtonStyled type="transparent" size="standard">
-					<button @click="editDependencies">
-						<EditIcon />
-						Edit
-					</button>
-				</ButtonStyled>
-			</div>
+					<ButtonStyled type="transparent" size="standard">
+						<button @click="editDependencies">
+							<EditIcon />
+							Edit
+						</button>
+					</ButtonStyled>
+				</div>
 
-			<div v-if="draftVersion.dependencies?.length" class="flex flex-col gap-4">
-				<DependenciesList />
-			</div>
-			<div v-else class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
-				<span class="text-sm font-medium">No dependencies added.</span>
+				<div v-if="draftVersion.dependencies?.length" class="flex flex-col gap-4">
+					<DependenciesList />
+				</div>
+				<div v-else class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
+					<span class="text-sm font-medium">No dependencies added.</span>
+				</div>
 			</div>
-		</div>
+		</template>
 	</div>
 </template>
 
@@ -202,6 +204,7 @@ const {
 	projectType,
 	noLoadersProject,
 	noEnvironmentProject,
+	noDependenciesProject,
 	modal,
 	filesToAdd,
 	editingVersion,
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index f7f48c1cee..e8f79ad137 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -84,6 +84,7 @@ export interface ManageVersionContextValue {
 	editingVersion: ComputedRef<boolean>
 	noLoadersProject: ComputedRef<boolean>
 	noEnvironmentProject: ComputedRef<boolean>
+	noDependenciesProject: ComputedRef<boolean>
 
 	// Stage helpers
 	getNextLabel: (currentIndex?: number | null) => string
@@ -303,6 +304,15 @@ export function createManageVersionContext(
 		return inferred
 	}
 
+	// Stage visibility computeds (inlined)
+	const noLoadersProject = computed(
+		() => draftVersion.value.loaders.length === 1 && draftVersion.value.loaders[0] === 'minecraft',
+	)
+	const noEnvironmentProject = computed(
+		() => projectType.value !== 'mod' && projectType.value !== 'modpack',
+	)
+	const noDependenciesProject = computed(() => projectType.value === 'modpack')
+
 	const getProject = async (projectId: string) => {
 		if (dependencyProjects.value[projectId]) {
 			return dependencyProjects.value[projectId]
@@ -325,6 +335,7 @@ export function createManageVersionContext(
 	watch(
 		draftVersion,
 		async (version) => {
+			if (noDependenciesProject.value) return
 			const deps = version.dependencies || []
 
 			for (const dep of deps) {
@@ -361,6 +372,7 @@ export function createManageVersionContext(
 	watch(
 		() => draftVersion.value.loaders,
 		async (loaders) => {
+			if (noDependenciesProject.value) return
 			try {
 				suggestedDependencies.value = []
 
@@ -506,14 +518,6 @@ export function createManageVersionContext(
 		isSubmitting.value = false
 	}
 
-	// Stage visibility computeds (inlined)
-	const noLoadersProject = computed(
-		() => draftVersion.value.loaders.length === 1 && draftVersion.value.loaders[0] === 'minecraft',
-	)
-	const noEnvironmentProject = computed(
-		() => projectType.value !== 'mod' && projectType.value !== 'modpack',
-	)
-
 	// Dynamic next button label
 	function getNextLabel(currentIndex: number | null = null) {
 		const currentStageIndex = currentIndex ? currentIndex : modal.value?.currentStageIndex || 0
@@ -583,6 +587,7 @@ export function createManageVersionContext(
 		editingVersion,
 		noLoadersProject,
 		noEnvironmentProject,
+		noDependenciesProject,
 
 		// Stage helpers
 		getNextLabel,

From 19a8b2054f5aa886098cfa1961abdf997b0a6103 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 19:08:11 -0700
Subject: [PATCH 18/83] add breadcrumbs with hide breadcrumb option

---
 .../CreateProjectVersionModal.vue             |  9 ++++-
 .../version/stages/add-files-stage.ts         |  4 +-
 .../version/stages/dependencies-stage.ts      |  2 +-
 .../version/stages/environment-stage.ts       |  9 ++++-
 .../providers/version/stages/loaders-stage.ts |  8 +++-
 .../version/stages/mc-versions-stage.ts       |  9 ++++-
 .../src/components/base/MultiStageModal.vue   | 40 ++++++++++++++++++-
 7 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
index 98fa4f8632..592ea81e57 100644
--- a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
+++ b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
@@ -1,5 +1,10 @@
 <template>
-	<MultiStageModal ref="modal" :stages="ctx.stageConfigs" :context="ctx" />
+	<MultiStageModal
+		ref="modal"
+		:stages="ctx.stageConfigs"
+		:context="ctx"
+		:breadcrumbs="!editingVersion"
+	/>
 </template>
 
 <script setup lang="ts">
@@ -22,7 +27,7 @@ const modal = useTemplateRef<ComponentExposed<typeof MultiStageModal>>('modal')
 const ctx = createManageVersionContext(modal)
 provideManageVersionContext(ctx)
 
-const { newDraftVersion } = ctx
+const { newDraftVersion, editingVersion } = ctx
 
 const { projectV2 } = injectProjectPageContext()
 const { addNotification } = injectNotificationManager()
diff --git a/apps/frontend/src/providers/version/stages/add-files-stage.ts b/apps/frontend/src/providers/version/stages/add-files-stage.ts
index 17cea05237..f6aa9390a3 100644
--- a/apps/frontend/src/providers/version/stages/add-files-stage.ts
+++ b/apps/frontend/src/providers/version/stages/add-files-stage.ts
@@ -84,11 +84,11 @@ export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue>
 					disabled: !hasFiles || ctx.isSubmitting.value,
 				}
 			: {
-					label: "Add details",
+					label: 'Add details',
 					icon: RightArrowIcon,
 					iconPosition: 'after',
 					disabled: !hasFiles,
-					onClick: () => ctx.modal.value?.setStage("add-details"),
+					onClick: () => ctx.modal.value?.setStage('add-details'),
 				}
 	},
 }
diff --git a/apps/frontend/src/providers/version/stages/dependencies-stage.ts b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
index d5e033d2cb..080f599921 100644
--- a/apps/frontend/src/providers/version/stages/dependencies-stage.ts
+++ b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
@@ -10,7 +10,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-dependencies',
 	stageContent: markRaw(DependenciesStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit dependencies' : 'Add dependencies'),
-	skip: (ctx) => ctx.projectType.value === 'modpack' || !!ctx.suggestedDependencies.value?.length,
+	skip: true,
 	leftButtonConfig: (ctx) =>
 		ctx.editingVersion.value
 			? {
diff --git a/apps/frontend/src/providers/version/stages/environment-stage.ts b/apps/frontend/src/providers/version/stages/environment-stage.ts
index 8415b1b5b6..d2b78363df 100644
--- a/apps/frontend/src/providers/version/stages/environment-stage.ts
+++ b/apps/frontend/src/providers/version/stages/environment-stage.ts
@@ -10,6 +10,11 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-environment',
 	stageContent: markRaw(EnvironmentStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit environment' : 'Add environment'),
+	hideBreadcrumbTitle: (ctx) =>
+		Boolean(
+			ctx.modal.value &&
+			ctx.stageConfigs[ctx.modal.value.currentStageIndex].id !== 'add-environment',
+		),
 	skip: (ctx) =>
 		ctx.noEnvironmentProject.value ||
 		(!ctx.editingVersion.value && !!ctx.inferredVersionData.value?.environment) ||
@@ -46,10 +51,10 @@ export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue>
 					disabled: !ctx.draftVersion.value.environment,
 				}
 			: {
-					label: "Add details",
+					label: 'Add details',
 					icon: RightArrowIcon,
 					iconPosition: 'after',
 					disabled: !ctx.draftVersion.value.environment,
-					onClick: () => ctx.modal.value?.setStage("add-details"),
+					onClick: () => ctx.modal.value?.setStage('add-details'),
 				},
 }
diff --git a/apps/frontend/src/providers/version/stages/loaders-stage.ts b/apps/frontend/src/providers/version/stages/loaders-stage.ts
index 2a221f150f..ff61dd9aa5 100644
--- a/apps/frontend/src/providers/version/stages/loaders-stage.ts
+++ b/apps/frontend/src/providers/version/stages/loaders-stage.ts
@@ -10,6 +10,10 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-loaders',
 	stageContent: markRaw(LoadersStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit loaders' : 'Add loaders'),
+	hideBreadcrumbTitle: (ctx) =>
+		Boolean(
+			ctx.modal.value && ctx.stageConfigs[ctx.modal.value.currentStageIndex].id !== 'add-loaders',
+		),
 	skip: (ctx) =>
 		ctx.noLoadersProject.value ||
 		(ctx.inferredVersionData.value?.loaders?.length ?? 0) > 0 ||
@@ -46,10 +50,10 @@ export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue>
 					disabled: ctx.draftVersion.value.loaders.length === 0,
 				}
 			: {
-					label: "Add details",
+					label: 'Add details',
 					icon: RightArrowIcon,
 					iconPosition: 'after',
 					disabled: ctx.draftVersion.value.loaders.length === 0,
-					onClick: () => ctx.modal.value?.setStage("add-details"),
+					onClick: () => ctx.modal.value?.setStage('add-details'),
 				},
 }
diff --git a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
index 265835d606..117412a63d 100644
--- a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
+++ b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
@@ -10,6 +10,11 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-mc-versions',
 	stageContent: markRaw(McVersionsStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit game versions' : 'Add game versions'),
+	hideBreadcrumbTitle: (ctx) =>
+		Boolean(
+			ctx.modal.value &&
+			ctx.stageConfigs[ctx.modal.value?.currentStageIndex].id !== 'add-mc-versions',
+		),
 	skip: (ctx) =>
 		(ctx.inferredVersionData.value?.game_versions?.length ?? 0) > 0 || ctx.editingVersion.value,
 	leftButtonConfig: (ctx) => ({
@@ -44,10 +49,10 @@ export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue>
 					disabled: ctx.draftVersion.value.game_versions.length === 0,
 				}
 			: {
-					label: "Add details",
+					label: 'Add details',
 					icon: RightArrowIcon,
 					iconPosition: 'after',
 					disabled: ctx.draftVersion.value.game_versions.length === 0,
-					onClick: () => ctx.modal.value?.setStage("add-details"),
+					onClick: () => ctx.modal.value?.setStage('add-details'),
 				},
 }
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index 730eaf8b70..3e4cb136e3 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -8,8 +8,29 @@
 		:close-on-click-outside="false"
 	>
 		<template #title>
-			<div class="flex flex-wrap items-center gap-1 text-secondary">
-				<span class="text-lg font-bold text-contrast sm:text-xl">{{ resolvedTitle }}</span>
+			<div class="grow w-min flex flex-wrap items-center gap-1 text-secondary">
+				<template v-if="breadcrumbs && !resolveCtxFn(currentStage.nonProgressStage, context)">
+					<template v-for="(stage, index) in breadcrumbStages" :key="stage.id">
+						<div class="flex">
+							<button
+								class="bg-transparent active:scale-95 font-bold text-secondary p-0"
+								:class="{
+									'!text-contrast font-bold': resolveCtxFn(currentStage.id, context) === stage.id,
+									'font-bold': resolveCtxFn(currentStage.id, context) !== stage.id,
+								}"
+								@click="setStage(stage.id)"
+							>
+								{{ resolveCtxFn(stage.title, context) }}
+							</button>
+							<ChevronRightIcon
+								v-if="index < breadcrumbStages.length - 1"
+								class="h-5 w-5 text-secondary"
+								stroke-width="3"
+							/>
+						</div>
+					</template>
+				</template>
+				<span v-else class="text-lg font-bold text-contrast sm:text-xl">{{ resolvedTitle }}</span>
 			</div>
 		</template>
 
@@ -58,6 +79,7 @@
 </template>
 
 <script lang="ts">
+import { ChevronRightIcon } from '@modrinth/assets'
 import { ButtonStyled, NewModal } from '@modrinth/ui'
 import type { Component } from 'vue'
 import { computed, ref, useTemplateRef } from 'vue'
@@ -80,6 +102,7 @@ export interface StageConfigInput<T> {
 	title: MaybeCtxFn<T, string>
 	skip?: MaybeCtxFn<T, boolean>
 	nonProgressStage?: MaybeCtxFn<T, boolean>
+	hideBreadcrumbTitle?: MaybeCtxFn<T, boolean>
 	leftButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
 	rightButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
 }
@@ -93,6 +116,8 @@ export function resolveCtxFn<T, R>(value: MaybeCtxFn<T, R>, ctx: T): R {
 const props = defineProps<{
 	stages: StageConfigInput<T>[]
 	context: T
+	breadcrumbs?: boolean
+	fitContent?: boolean
 }>()
 
 const modal = useTemplateRef<InstanceType<typeof NewModal>>('modal')
@@ -106,6 +131,17 @@ function hide() {
 	modal.value?.hide()
 }
 
+// Stages that are not skipped (visible in breadcrumbs)
+const breadcrumbStages = computed(() => {
+	return props.stages.filter((stage) => {
+		const skip =
+			resolveCtxFn(stage.skip, props.context) ||
+			resolveCtxFn(stage.nonProgressStage, props.context) ||
+			resolveCtxFn(stage.hideBreadcrumbTitle, props.context)
+		return !skip
+	})
+})
+
 const setStage = (indexOrId: number | string) => {
 	let index: number = 0
 	if (typeof indexOrId === 'number') {

From 3ec485995f1634ca4521ef3a2305345652d9e2a0 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 20:10:58 -0700
Subject: [PATCH 19/83] wider stages

---
 .../ui/create-project-version/stages/AddFilesStage.vue          | 2 +-
 .../ui/create-project-version/stages/DependenciesStage.vue      | 2 +-
 .../ui/create-project-version/stages/EnvironmentStage.vue       | 2 +-
 .../ui/create-project-version/stages/LoadersStage.vue           | 2 +-
 .../ui/create-project-version/stages/McVersionsStage.vue        | 2 +-
 .../ui/create-project-version/stages/MetadataStage.vue          | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index c856cb5c55..55cc9da1bf 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex w-full flex-col gap-4 sm:w-[512px]">
+	<div class="flex w-full flex-col gap-4 sm:w-[562px]">
 		<template
 			v-if="handlingNewFiles || !(filesToAdd.length || draftVersion.existing_files?.length)"
 		>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
index cafbb0d48d..7788296e67 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex w-full max-w-full flex-col gap-6 sm:w-[512px]">
+	<div class="flex w-full max-w-full flex-col gap-6 sm:w-[562px]">
 		<div class="flex flex-col gap-4">
 			<span class="font-semibold text-contrast">Add dependency</span>
 			<div class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 p-4">
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/EnvironmentStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/EnvironmentStage.vue
index f115f6c0b0..b39ae2d021 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/EnvironmentStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/EnvironmentStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="sm:w-[512px]">
+	<div class="sm:w-[562px]">
 		<EnvironmentSelector v-model="draftVersion.environment" />
 	</div>
 </template>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
index ce8d9230f3..583606be79 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="space-y-6 sm:w-[512px]">
+	<div class="space-y-6 sm:w-[562px]">
 		<LoaderPicker
 			v-model="draftVersion.loaders"
 			:loaders="generatedState.loaders"
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
index 06376d1876..0c0bfa3b99 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-6 sm:w-[512px]">
+	<div class="flex flex-col gap-6 sm:w-[562px]">
 		<McVersionPicker v-model="draftVersion.game_versions" :game-versions="gameVersions" />
 		<div v-if="draftVersion.game_versions.length" class="space-y-1">
 			<div class="flex items-center justify-between">
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 7b9d730384..1cdcbf6712 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-6 sm:w-[512px]">
+	<div class="flex flex-col gap-6 sm:w-[562px]">
 		<div v-if="!editingVersion" class="flex flex-col gap-1">
 			<div class="flex items-center justify-between">
 				<span class="font-semibold text-contrast"> Uploaded files </span>

From 7610956ece89a219697cd5a8a5c072284d660655 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 20:40:12 -0700
Subject: [PATCH 20/83] add proper horizonal scroll breadcrumbs

---
 .../stages/AddFilesStage.vue                  |   2 +-
 .../stages/DependenciesStage.vue              |   2 +-
 .../stages/EnvironmentStage.vue               |   2 +-
 .../stages/LoadersStage.vue                   |   2 +-
 .../stages/McVersionsStage.vue                |   2 +-
 .../stages/MetadataStage.vue                  |   2 +-
 .../version/stages/add-files-stage.ts         |   2 +-
 .../version/stages/environment-stage.ts       |   5 -
 .../providers/version/stages/loaders-stage.ts |   4 -
 .../version/stages/mc-versions-stage.ts       |   5 -
 .../src/components/base/MultiStageModal.vue   | 152 ++++++++++++++----
 packages/ui/src/components/modal/NewModal.vue |   2 +-
 12 files changed, 126 insertions(+), 56 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index 55cc9da1bf..c856cb5c55 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex w-full flex-col gap-4 sm:w-[562px]">
+	<div class="flex w-full flex-col gap-4 sm:w-[512px]">
 		<template
 			v-if="handlingNewFiles || !(filesToAdd.length || draftVersion.existing_files?.length)"
 		>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
index 7788296e67..cafbb0d48d 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex w-full max-w-full flex-col gap-6 sm:w-[562px]">
+	<div class="flex w-full max-w-full flex-col gap-6 sm:w-[512px]">
 		<div class="flex flex-col gap-4">
 			<span class="font-semibold text-contrast">Add dependency</span>
 			<div class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 p-4">
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/EnvironmentStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/EnvironmentStage.vue
index b39ae2d021..f115f6c0b0 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/EnvironmentStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/EnvironmentStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="sm:w-[562px]">
+	<div class="sm:w-[512px]">
 		<EnvironmentSelector v-model="draftVersion.environment" />
 	</div>
 </template>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
index 583606be79..ce8d9230f3 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="space-y-6 sm:w-[562px]">
+	<div class="space-y-6 sm:w-[512px]">
 		<LoaderPicker
 			v-model="draftVersion.loaders"
 			:loaders="generatedState.loaders"
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
index 0c0bfa3b99..06376d1876 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-6 sm:w-[562px]">
+	<div class="flex flex-col gap-6 sm:w-[512px]">
 		<McVersionPicker v-model="draftVersion.game_versions" :game-versions="gameVersions" />
 		<div v-if="draftVersion.game_versions.length" class="space-y-1">
 			<div class="flex items-center justify-between">
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 1cdcbf6712..7b9d730384 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-6 sm:w-[562px]">
+	<div class="flex flex-col gap-6 sm:w-[512px]">
 		<div v-if="!editingVersion" class="flex flex-col gap-1">
 			<div class="flex items-center justify-between">
 				<span class="font-semibold text-contrast"> Uploaded files </span>
diff --git a/apps/frontend/src/providers/version/stages/add-files-stage.ts b/apps/frontend/src/providers/version/stages/add-files-stage.ts
index f6aa9390a3..4bbc60e2f7 100644
--- a/apps/frontend/src/providers/version/stages/add-files-stage.ts
+++ b/apps/frontend/src/providers/version/stages/add-files-stage.ts
@@ -52,7 +52,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 			onClick: () => ctx.modal.value?.nextStage(),
 		}
 	},
-	nonProgressStage: (ctx) => ctx.editingVersion.value,
+	nonProgressStage: (ctx) => ctx.editingVersion.value || ctx.filesToAdd.value.length === 0,
 }
 
 export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
diff --git a/apps/frontend/src/providers/version/stages/environment-stage.ts b/apps/frontend/src/providers/version/stages/environment-stage.ts
index d2b78363df..30fe85413f 100644
--- a/apps/frontend/src/providers/version/stages/environment-stage.ts
+++ b/apps/frontend/src/providers/version/stages/environment-stage.ts
@@ -10,11 +10,6 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-environment',
 	stageContent: markRaw(EnvironmentStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit environment' : 'Add environment'),
-	hideBreadcrumbTitle: (ctx) =>
-		Boolean(
-			ctx.modal.value &&
-			ctx.stageConfigs[ctx.modal.value.currentStageIndex].id !== 'add-environment',
-		),
 	skip: (ctx) =>
 		ctx.noEnvironmentProject.value ||
 		(!ctx.editingVersion.value && !!ctx.inferredVersionData.value?.environment) ||
diff --git a/apps/frontend/src/providers/version/stages/loaders-stage.ts b/apps/frontend/src/providers/version/stages/loaders-stage.ts
index ff61dd9aa5..9a9091cbbf 100644
--- a/apps/frontend/src/providers/version/stages/loaders-stage.ts
+++ b/apps/frontend/src/providers/version/stages/loaders-stage.ts
@@ -10,10 +10,6 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-loaders',
 	stageContent: markRaw(LoadersStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit loaders' : 'Add loaders'),
-	hideBreadcrumbTitle: (ctx) =>
-		Boolean(
-			ctx.modal.value && ctx.stageConfigs[ctx.modal.value.currentStageIndex].id !== 'add-loaders',
-		),
 	skip: (ctx) =>
 		ctx.noLoadersProject.value ||
 		(ctx.inferredVersionData.value?.loaders?.length ?? 0) > 0 ||
diff --git a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
index 117412a63d..85bfcafebc 100644
--- a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
+++ b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
@@ -10,11 +10,6 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-mc-versions',
 	stageContent: markRaw(McVersionsStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit game versions' : 'Add game versions'),
-	hideBreadcrumbTitle: (ctx) =>
-		Boolean(
-			ctx.modal.value &&
-			ctx.stageConfigs[ctx.modal.value?.currentStageIndex].id !== 'add-mc-versions',
-		),
 	skip: (ctx) =>
 		(ctx.inferredVersionData.value?.game_versions?.length ?? 0) > 0 || ctx.editingVersion.value,
 	leftButtonConfig: (ctx) => ({
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index 3e4cb136e3..cb8d090c9c 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -8,28 +8,50 @@
 		:close-on-click-outside="false"
 	>
 		<template #title>
-			<div class="grow w-min flex flex-wrap items-center gap-1 text-secondary">
-				<template v-if="breadcrumbs && !resolveCtxFn(currentStage.nonProgressStage, context)">
-					<template v-for="(stage, index) in breadcrumbStages" :key="stage.id">
-						<div class="flex">
-							<button
-								class="bg-transparent active:scale-95 font-bold text-secondary p-0"
-								:class="{
-									'!text-contrast font-bold': resolveCtxFn(currentStage.id, context) === stage.id,
-									'font-bold': resolveCtxFn(currentStage.id, context) !== stage.id,
-								}"
-								@click="setStage(stage.id)"
+			<!-- hard coded max width for breadcrumbs for now, real fix is to define max width on stage config, and pass it down to stage content + header -->
+			<div class="grow w-min max-w-[460px]">
+				<div
+					v-if="breadcrumbs && !resolveCtxFn(currentStage.nonProgressStage, context)"
+					class="relative w-full"
+				>
+					<div
+						class="pointer-events-none absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-bg-raised to-transparent z-10 transition-opacity duration-200"
+						:class="showLeftShadow ? 'opacity-100' : 'opacity-0'"
+					/>
+					<div
+						ref="breadcrumbScroller"
+						class="flex w-full overflow-x-auto overflow-y-hidden scrollbar-hide py-3 pr-6"
+						@wheel.prevent="onBreadcrumbWheel"
+						@scroll="updateScrollShadows"
+					>
+						<template v-for="(stage, index) in breadcrumbStages" :key="stage.id">
+							<div
+								:ref="(el) => setBreadcrumbRef(stage.id, el as HTMLElement | null)"
+								class="flex w-max"
 							>
-								{{ resolveCtxFn(stage.title, context) }}
-							</button>
-							<ChevronRightIcon
-								v-if="index < breadcrumbStages.length - 1"
-								class="h-5 w-5 text-secondary"
-								stroke-width="3"
-							/>
-						</div>
-					</template>
-				</template>
+								<button
+									class="bg-transparent active:scale-95 font-bold text-secondary p-0 w-max"
+									:class="{
+										'!text-contrast font-bold': resolveCtxFn(currentStage.id, context) === stage.id,
+										'font-bold': resolveCtxFn(currentStage.id, context) !== stage.id,
+									}"
+									@click="setStage(stage.id)"
+								>
+									{{ resolveCtxFn(stage.title, context) }}
+								</button>
+								<ChevronRightIcon
+									v-if="index < breadcrumbStages.length - 1"
+									class="h-5 w-5 text-secondary"
+									stroke-width="3"
+								/>
+							</div>
+						</template>
+					</div>
+					<div
+						class="pointer-events-none absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-bg-raised to-transparent z-10 transition-opacity duration-200"
+						:class="showRightShadow ? 'opacity-100' : 'opacity-0'"
+					/>
+				</div>
 				<span v-else class="text-lg font-bold text-contrast sm:text-xl">{{ resolvedTitle }}</span>
 			</div>
 		</template>
@@ -82,7 +104,7 @@
 import { ChevronRightIcon } from '@modrinth/assets'
 import { ButtonStyled, NewModal } from '@modrinth/ui'
 import type { Component } from 'vue'
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue'
 
 export interface StageButtonConfig {
 	label?: string
@@ -102,7 +124,6 @@ export interface StageConfigInput<T> {
 	title: MaybeCtxFn<T, string>
 	skip?: MaybeCtxFn<T, boolean>
 	nonProgressStage?: MaybeCtxFn<T, boolean>
-	hideBreadcrumbTitle?: MaybeCtxFn<T, boolean>
 	leftButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
 	rightButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
 }
@@ -131,17 +152,6 @@ function hide() {
 	modal.value?.hide()
 }
 
-// Stages that are not skipped (visible in breadcrumbs)
-const breadcrumbStages = computed(() => {
-	return props.stages.filter((stage) => {
-		const skip =
-			resolveCtxFn(stage.skip, props.context) ||
-			resolveCtxFn(stage.nonProgressStage, props.context) ||
-			resolveCtxFn(stage.hideBreadcrumbTitle, props.context)
-		return !skip
-	})
-})
-
 const setStage = (indexOrId: number | string) => {
 	let index: number = 0
 	if (typeof indexOrId === 'number') {
@@ -229,6 +239,71 @@ const progressValue = computed(() => {
 	return totalCount > 0 ? (completedCount / totalCount) * 100 : 0
 })
 
+const breadcrumbScroller = ref<HTMLElement | null>(null)
+const breadcrumbRefs = ref<Map<string, HTMLElement>>(new Map())
+const showLeftShadow = ref(false)
+const showRightShadow = ref(false)
+
+function setBreadcrumbRef(stageId: string, el: HTMLElement | null) {
+	if (el) breadcrumbRefs.value.set(stageId, el)
+	else breadcrumbRefs.value.delete(stageId)
+}
+
+function scrollToCurrentBreadcrumb() {
+	const stage = currentStage.value
+	if (!stage || !breadcrumbScroller.value) return
+
+	const el = breadcrumbRefs.value.get(stage.id)
+	if (!el) return
+
+	nextTick(() => {
+		breadcrumbScroller.value?.scrollTo({
+			left: el.offsetLeft - 50,
+			behavior: 'smooth',
+		})
+	})
+}
+
+function updateScrollShadows() {
+	const el = breadcrumbScroller.value
+	if (!el) {
+		showLeftShadow.value = false
+		showRightShadow.value = false
+		return
+	}
+
+	showLeftShadow.value = el.scrollLeft > 0
+	showRightShadow.value = el.scrollLeft < el.scrollWidth - el.clientWidth - 1
+}
+
+function onBreadcrumbWheel(e: WheelEvent) {
+	if (!breadcrumbScroller.value) return
+
+	const el = breadcrumbScroller.value
+	const canScrollHorizontally = el.scrollWidth > el.clientWidth
+
+	if (canScrollHorizontally) {
+		el.scrollLeft += e.deltaY
+	}
+}
+
+// Stages that are not skipped (visible in breadcrumbs)
+const breadcrumbStages = computed(() => {
+	return props.stages.filter((stage) => {
+		const skip =
+			resolveCtxFn(stage.skip, props.context) || resolveCtxFn(stage.nonProgressStage, props.context)
+		return !skip
+	})
+})
+
+watch([breadcrumbStages, currentStageIndex], () => nextTick(() => updateScrollShadows()), {
+	immediate: true,
+})
+
+watch(currentStageIndex, () => {
+	scrollToCurrentBreadcrumb()
+})
+
 const emit = defineEmits<{
 	(e: 'refresh-data' | 'hide'): void
 }>()
@@ -264,4 +339,13 @@ progress::-webkit-progress-value {
 progress::-moz-progress-bar {
 	@apply bg-contrast;
 }
+
+.scrollbar-hide {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+	display: none;
+}
 </style>
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index fe4d10fb42..cc88e7664c 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -25,7 +25,7 @@
 				<div
 					v-if="!hideHeader"
 					data-tauri-drag-region
-					class="grid grid-cols-[auto_min-content] items-center gap-12 p-6 border-solid border-0 border-b-[1px] border-divider max-w-full"
+					class="grid grid-cols-[auto_min-content] items-center gap-4 p-6 border-solid border-0 border-b-[1px] border-divider max-w-full"
 				>
 					<div class="flex text-wrap break-words items-center gap-3 min-w-0">
 						<slot name="title">

From 316a100c6bb101167d3ac99a6f854361338a682f Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 20:44:15 -0700
Subject: [PATCH 21/83] fix titles

---
 apps/frontend/src/providers/version/stages/add-files-stage.ts | 4 ++--
 .../src/providers/version/stages/dependencies-stage.ts        | 2 +-
 apps/frontend/src/providers/version/stages/details-stage.ts   | 4 ++--
 .../src/providers/version/stages/environment-stage.ts         | 2 +-
 apps/frontend/src/providers/version/stages/loaders-stage.ts   | 2 +-
 .../src/providers/version/stages/mc-versions-stage.ts         | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/providers/version/stages/add-files-stage.ts b/apps/frontend/src/providers/version/stages/add-files-stage.ts
index 4bbc60e2f7..2ed9230820 100644
--- a/apps/frontend/src/providers/version/stages/add-files-stage.ts
+++ b/apps/frontend/src/providers/version/stages/add-files-stage.ts
@@ -9,7 +9,8 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-files',
 	stageContent: markRaw(AddFilesStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit files' : 'Add files'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit files' : 'Files'),
+	nonProgressStage: (ctx) => ctx.editingVersion.value,
 	leftButtonConfig: (ctx) => {
 		const hasFiles =
 			ctx.filesToAdd.value.length !== 0 ||
@@ -52,7 +53,6 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 			onClick: () => ctx.modal.value?.nextStage(),
 		}
 	},
-	nonProgressStage: (ctx) => ctx.editingVersion.value || ctx.filesToAdd.value.length === 0,
 }
 
 export const fromDetailsStageConfig: StageConfigInput<ManageVersionContextValue> = {
diff --git a/apps/frontend/src/providers/version/stages/dependencies-stage.ts b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
index 080f599921..0f00343134 100644
--- a/apps/frontend/src/providers/version/stages/dependencies-stage.ts
+++ b/apps/frontend/src/providers/version/stages/dependencies-stage.ts
@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-dependencies',
 	stageContent: markRaw(DependenciesStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit dependencies' : 'Add dependencies'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit dependencies' : 'Dependencies'),
 	skip: true,
 	leftButtonConfig: (ctx) =>
 		ctx.editingVersion.value
diff --git a/apps/frontend/src/providers/version/stages/details-stage.ts b/apps/frontend/src/providers/version/stages/details-stage.ts
index c63c004a60..4dcd19ba86 100644
--- a/apps/frontend/src/providers/version/stages/details-stage.ts
+++ b/apps/frontend/src/providers/version/stages/details-stage.ts
@@ -1,4 +1,4 @@
-import { LeftArrowIcon, PlusIcon, SaveIcon, SpinnerIcon,XIcon  } from '@modrinth/assets'
+import { LeftArrowIcon, PlusIcon, SaveIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import type { StageConfigInput } from '@modrinth/ui'
 import { markRaw } from 'vue'
 
@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-details',
 	stageContent: markRaw(DetailsStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit details' : 'Add details'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit details' : 'Details'),
 	leftButtonConfig: (ctx) =>
 		ctx.editingVersion.value
 			? {
diff --git a/apps/frontend/src/providers/version/stages/environment-stage.ts b/apps/frontend/src/providers/version/stages/environment-stage.ts
index 30fe85413f..31a1207f12 100644
--- a/apps/frontend/src/providers/version/stages/environment-stage.ts
+++ b/apps/frontend/src/providers/version/stages/environment-stage.ts
@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-environment',
 	stageContent: markRaw(EnvironmentStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit environment' : 'Add environment'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit environment' : 'Environment'),
 	skip: (ctx) =>
 		ctx.noEnvironmentProject.value ||
 		(!ctx.editingVersion.value && !!ctx.inferredVersionData.value?.environment) ||
diff --git a/apps/frontend/src/providers/version/stages/loaders-stage.ts b/apps/frontend/src/providers/version/stages/loaders-stage.ts
index 9a9091cbbf..3da96629da 100644
--- a/apps/frontend/src/providers/version/stages/loaders-stage.ts
+++ b/apps/frontend/src/providers/version/stages/loaders-stage.ts
@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-loaders',
 	stageContent: markRaw(LoadersStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit loaders' : 'Add loaders'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit loaders' : 'Loaders'),
 	skip: (ctx) =>
 		ctx.noLoadersProject.value ||
 		(ctx.inferredVersionData.value?.loaders?.length ?? 0) > 0 ||
diff --git a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
index 85bfcafebc..dd09f2aeac 100644
--- a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
+++ b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
@@ -9,7 +9,7 @@ import type { ManageVersionContextValue } from '../manage-version-modal'
 export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-mc-versions',
 	stageContent: markRaw(McVersionsStage),
-	title: (ctx) => (ctx.editingVersion.value ? 'Edit game versions' : 'Add game versions'),
+	title: (ctx) => (ctx.editingVersion.value ? 'Edit game versions' : 'Game versions'),
 	skip: (ctx) =>
 		(ctx.inferredVersionData.value?.game_versions?.length ?? 0) > 0 || ctx.editingVersion.value,
 	leftButtonConfig: (ctx) => ({

From 81dd02dc47c1f34e699853780fd6f0f9d014f163 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 21:10:06 -0700
Subject: [PATCH 22/83] handle save version in version page

---
 .../CreateProjectVersionModal.vue             |  6 +++-
 .../pages/[type]/[id]/version/[version].vue   | 36 ++++++++++++++++++-
 .../providers/version/manage-version-modal.ts |  3 ++
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
index 592ea81e57..76b58d447e 100644
--- a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
+++ b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
@@ -22,9 +22,13 @@ import {
 	provideManageVersionContext,
 } from '~/providers/version/manage-version-modal'
 
+const emit = defineEmits<{
+	(e: 'save'): void
+}>()
+
 const modal = useTemplateRef<ComponentExposed<typeof MultiStageModal>>('modal')
 
-const ctx = createManageVersionContext(modal)
+const ctx = createManageVersionContext(modal, () => emit('save'))
 provideManageVersionContext(ctx)
 
 const { newDraftVersion, editingVersion } = ctx
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index 62399f4a49..c81ff1cd95 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -2,6 +2,11 @@
 <!-- TODO: Remove this^after converting to composition API. -->
 <template>
 	<div v-if="version" class="version-page">
+		<CreateProjectVersionModal
+			v-if="currentMember"
+			ref="createProjectVersionModal"
+			@save="handleVersionSaved"
+		/>
 		<ConfirmModal
 			v-if="currentMember"
 			ref="modal_confirm"
@@ -140,7 +145,7 @@
 					</nuxt-link>
 				</ButtonStyled>
 			</div>
-			<div v-else class="input-group">
+			<div v-else class="input-group mt-2">
 				<ButtonStyled v-if="primaryFile && !currentMember" color="brand">
 					<a
 						v-tooltip="primaryFile.filename + ' (' + formatBytes(primaryFile.size) + ')'"
@@ -163,6 +168,24 @@
 						Report
 					</button>
 				</ButtonStyled>
+				<ButtonStyled v-if="currentMember">
+					<button @click="handleOpenEditVersionModal(version.id, project.id, 'add-details')">
+						<InfoIcon aria-hidden="true" />
+						Edit details
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="currentMember">
+					<button @click="handleOpenEditVersionModal(version.id, project.id, 'metadata')">
+						<BoxIcon aria-hidden="true" />
+						Edit metadata
+					</button>
+				</ButtonStyled>
+				<ButtonStyled v-if="currentMember">
+					<button @click="handleOpenEditVersionModal(version.id, project.id, 'add-files')">
+						<FileIcon aria-hidden="true" />
+						Edit files
+					</button>
+				</ButtonStyled>
 				<ButtonStyled>
 					<button
 						v-if="
@@ -629,6 +652,7 @@ import {
 	EditIcon,
 	FileIcon,
 	HashIcon,
+	InfoIcon,
 	PlusIcon,
 	ReportIcon,
 	RightArrowIcon,
@@ -655,6 +679,7 @@ import { Multiselect } from 'vue-multiselect'
 
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
+import CreateProjectVersionModal from '~/components/ui/create-project-version/CreateProjectVersionModal.vue'
 import FileInput from '~/components/ui/FileInput.vue'
 import Modal from '~/components/ui/Modal.vue'
 import Categories from '~/components/ui/search/Categories.vue'
@@ -672,11 +697,13 @@ export default defineNuxtComponent({
 		Checkbox,
 		ChevronRightIcon,
 		Categories,
+		CreateProjectVersionModal,
 		DownloadIcon,
 		EditIcon,
 		TrashIcon,
 		StarIcon,
 		FileIcon,
+		InfoIcon,
 		ReportIcon,
 		SaveIcon,
 		XIcon,
@@ -966,6 +993,13 @@ export default defineNuxtComponent({
 	methods: {
 		formatBytes,
 		formatCategory,
+		handleOpenEditVersionModal(versionId, projectId, stageId) {
+			if (!this.currentMember) return
+			this.$refs.createProjectVersionModal?.openEditVersionModal(versionId, projectId, stageId)
+		},
+		async handleVersionSaved() {
+			this.$router.go(0) // reload page for new data
+		},
 		async onImageUpload(file) {
 			const response = await useImageUpload(file, { context: 'version' })
 
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index e8f79ad137..e8aee974be 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -145,6 +145,7 @@ export const [injectManageVersionContext, provideManageVersionContext] =
 
 export function createManageVersionContext(
 	modal: ShallowRef<ComponentExposed<typeof MultiStageModal> | null>,
+	onSave?: () => void,
 ): ManageVersionContextValue {
 	const { labrinth } = injectModrinthClient()
 	const { addNotification } = injectNotificationManager()
@@ -448,6 +449,7 @@ export function createManageVersionContext(
 				type: 'success',
 			})
 			await refreshVersions()
+			onSave?.()
 		} catch (err: any) {
 			addNotification({
 				title: 'An error occurred',
@@ -508,6 +510,7 @@ export function createManageVersionContext(
 				type: 'success',
 			})
 			await refreshVersions()
+			onSave?.()
 		} catch (err: any) {
 			addNotification({
 				title: 'An error occurred',

From 6514d0c14e29c0003cf9ab1c9b6e249bcee4250c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 5 Jan 2026 21:48:11 -0700
Subject: [PATCH 23/83] remove box shadow

---
 packages/assets/styles/defaults.scss | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/assets/styles/defaults.scss b/packages/assets/styles/defaults.scss
index 8c3c5a5381..6162c185ac 100644
--- a/packages/assets/styles/defaults.scss
+++ b/packages/assets/styles/defaults.scss
@@ -61,9 +61,6 @@ textarea,
 	font-weight: var(--font-weight-medium);
 	transition: box-shadow 0.1s ease-in-out;
 	min-height: 36px;
-	box-shadow:
-		var(--shadow-inset-sm),
-		0 0 0 0 transparent;
 	border: none;
 	outline: none;
 

From 4f4c1c6fc0919d2dc7bef10c15940b26263aa127 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 10:03:31 -0700
Subject: [PATCH 24/83] add notification provider to storybook

---
 packages/ui/.storybook/preview.ts | 62 +++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 40323653fa..1ca27f483a 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -6,13 +6,21 @@ import { withThemeByClassName } from '@storybook/addon-themes'
 import type { Preview } from '@storybook/vue3-vite'
 import { setup } from '@storybook/vue3-vite'
 import FloatingVue from 'floating-vue'
+import { defineComponent, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
+import NotificationPanel from '../src/components/nav/NotificationPanel.vue'
 
 import {
 	buildLocaleMessages,
 	createMessageCompiler,
 	type CrowdinMessages,
 } from '../src/composables/i18n'
+import {
+	AbstractWebNotificationManager,
+	provideNotificationManager,
+	type NotificationPanelLocation,
+	type WebNotification,
+} from '../src/providers'
 
 // Load locale messages from the UI package's locales
 // @ts-ignore
@@ -31,6 +39,42 @@ const i18n = createI18n({
 	messages: buildLocaleMessages(localeModules),
 })
 
+class StorybookNotificationManager extends AbstractWebNotificationManager {
+	private readonly state = ref<WebNotification[]>([])
+	private readonly locationState = ref<NotificationPanelLocation>('right')
+
+	public getNotificationLocation(): NotificationPanelLocation {
+		return this.locationState.value
+	}
+
+	public setNotificationLocation(location: NotificationPanelLocation): void {
+		this.locationState.value = location
+	}
+
+	public getNotifications(): WebNotification[] {
+		return this.state.value
+	}
+
+	protected addNotificationToStorage(notification: WebNotification): void {
+		this.state.value.push(notification)
+	}
+
+	protected removeNotificationFromStorage(id: string | number): void {
+		const index = this.state.value.findIndex((n) => n.id === id)
+		if (index > -1) {
+			this.state.value.splice(index, 1)
+		}
+	}
+
+	protected removeNotificationFromStorageByIndex(index: number): void {
+		this.state.value.splice(index, 1)
+	}
+
+	protected clearAllNotificationsFromStorage(): void {
+		this.state.value.splice(0)
+	}
+}
+
 setup((app) => {
 	app.use(i18n)
 	app.use(FloatingVue, {
@@ -56,6 +100,14 @@ setup((app) => {
 	}
 })
 
+// Wrapper component that provides notification manager context
+const NotificationManagerProvider = defineComponent({
+	setup(_, { slots }) {
+		provideNotificationManager(new StorybookNotificationManager())
+		return () => slots.default?.()
+	},
+})
+
 const preview: Preview = {
 	parameters: {
 		controls: {
@@ -74,6 +126,16 @@ const preview: Preview = {
 			},
 			defaultTheme: 'dark',
 		}),
+		// Wrap stories with notification manager provider
+		(story) => ({
+			components: { story, NotificationManagerProvider, NotificationPanel },
+			template: /*html*/ `
+				<NotificationManagerProvider>
+					<NotificationPanel />
+					<story />
+				</NotificationManagerProvider>
+			`,
+		}),
 	],
 }
 

From a9ed630a59a19a95ad8bcebd059f092c0a3c6678 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 10:04:48 -0700
Subject: [PATCH 25/83] add drop area for versions to drop file right into page

---
 .../CreateProjectVersionModal.vue             |  10 +-
 .../stages/AddFilesStage.vue                  | 100 +-----------------
 .../providers/version/manage-version-modal.ts |  97 ++++++++++++++++-
 packages/ui/src/components/base/DropArea.vue  |  72 +++++++++----
 .../ui/src/stories/base/DropArea.stories.ts   |  38 ++++++-
 5 files changed, 197 insertions(+), 120 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
index 76b58d447e..7fdd89c88d 100644
--- a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
+++ b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
@@ -5,16 +5,19 @@
 		:context="ctx"
 		:breadcrumbs="!editingVersion"
 	/>
+	<DropArea :accept="acceptFileFromProjectType(projectV2.project_type)" @change="handleDropArea" />
 </template>
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import {
+	DropArea,
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
 	MultiStageModal,
 } from '@modrinth/ui'
+import { acceptFileFromProjectType } from '@modrinth/utils'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 import {
@@ -31,7 +34,7 @@ const modal = useTemplateRef<ComponentExposed<typeof MultiStageModal>>('modal')
 const ctx = createManageVersionContext(modal, () => emit('save'))
 provideManageVersionContext(ctx)
 
-const { newDraftVersion, editingVersion } = ctx
+const { newDraftVersion, editingVersion, handleNewFiles } = ctx
 
 const { projectV2 } = injectProjectPageContext()
 const { addNotification } = injectNotificationManager()
@@ -75,6 +78,11 @@ function openCreateVersionModal(
 	modal.value?.show()
 }
 
+function handleDropArea(files: FileList) {
+	openCreateVersionModal()
+	handleNewFiles(Array.from(files))
+}
+
 defineExpose({
 	openEditVersionModal,
 	openCreateVersionModal,
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index c856cb5c55..c91228552c 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -76,7 +76,7 @@
 							:editing-version="editingVersion"
 							:on-remove="() => handleRemoveFile(idx + (primaryFile?.existing ? 0 : 1))"
 							@set-file-type="(type) => (versionFile.fileType = type)"
-							@set-primary-file="handleSetPrimaryFile(idx + (primaryFile?.existing ? 0 : 1))"
+							@set-primary-file="setPrimaryFile(idx + (primaryFile?.existing ? 0 : 1))"
 						/>
 					</div>
 				</div>
@@ -90,7 +90,6 @@
 </template>
 
 <script lang="ts" setup>
-import type { Labrinth } from '@modrinth/api-client'
 import {
 	Admonition,
 	defineMessages,
@@ -113,76 +112,15 @@ const {
 	existingFilesToDelete,
 	handlingNewFiles,
 	setPrimaryFile,
-	setInferredVersionData,
 	editingVersion,
-	modal,
+	primaryFile,
+	handleNewFiles,
 } = injectManageVersionContext()
 
-const addDetectedData = async () => {
-	if (editingVersion.value) return
-
-	const primaryFile = filesToAdd.value[0]?.file
-	if (!primaryFile) return
-
-	try {
-		const inferredData = await setInferredVersionData(primaryFile, projectV2.value)
-		const mappedInferredData: Partial<Labrinth.Versions.v3.DraftVersion> = {
-			...inferredData,
-			name: inferredData.name || '',
-		}
-
-		draftVersion.value = {
-			...draftVersion.value,
-			...mappedInferredData,
-		}
-	} catch (err) {
-		console.error('Error parsing version file data', err)
-	}
-}
-
-// add detected data when the primary file changes
-watch(
-	() => filesToAdd.value[0]?.file,
-	() => addDetectedData(),
-)
-
-async function handleNewFiles(newFiles: File[]) {
-	handlingNewFiles.value = true
-	// detect primary file if no primary file is set
-	const primaryFileIndex = primaryFile.value ? null : detectPrimaryFileIndex(newFiles)
-
-	newFiles.forEach((file) => filesToAdd.value.push({ file }))
-
-	if (primaryFileIndex !== null) {
-		if (primaryFileIndex) setPrimaryFile(primaryFileIndex)
-	}
-
-	if (newFiles.length === 1) {
-		await addDetectedData()
-		modal.value?.nextStage()
-	}
-
-	handlingNewFiles.value = false
-}
-
 function handleRemoveFile(index: number) {
 	filesToAdd.value.splice(index, 1)
 }
 
-function detectPrimaryFileIndex(files: File[]): number {
-	const extensionPriority = ['.jar', '.zip', '.litemod', '.mrpack', '.mrpack-primary']
-
-	for (const ext of extensionPriority) {
-		const matches = files.filter((file) => file.name.toLowerCase().endsWith(ext))
-		if (matches.length > 0) {
-			const shortest = matches.reduce((a, b) => (a.name.length < b.name.length ? a : b))
-			return files.indexOf(shortest)
-		}
-	}
-
-	return 0
-}
-
 function handleRemoveExistingFile(sha1: string) {
 	existingFilesToDelete.value.push(sha1)
 	draftVersion.value.existing_files = draftVersion.value.existing_files?.filter(
@@ -190,38 +128,6 @@ function handleRemoveExistingFile(sha1: string) {
 	)
 }
 
-function handleSetPrimaryFile(index: number) {
-	setPrimaryFile(index)
-}
-
-interface PrimaryFile {
-	name: string
-	fileType?: string
-	existing?: boolean
-}
-
-const primaryFile = computed<PrimaryFile | null>(() => {
-	const existingPrimaryFile = draftVersion.value.existing_files?.[0]
-	if (existingPrimaryFile) {
-		return {
-			name: existingPrimaryFile.filename,
-			fileType: existingPrimaryFile.file_type,
-			existing: true,
-		}
-	}
-
-	const addedPrimaryFile = filesToAdd.value[0]
-	if (addedPrimaryFile) {
-		return {
-			name: addedPrimaryFile.file.name,
-			fileType: addedPrimaryFile.fileType,
-			existing: false,
-		}
-	}
-
-	return null
-})
-
 const supplementaryNewFiles = computed(() => {
 	if (primaryFile.value?.existing) {
 		return filesToAdd.value
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index 78181b369a..f9bdc4ef76 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -61,6 +61,12 @@ export type SuggestedDependency = Labrinth.Versions.v3.Dependency & {
 	versionName?: string
 }
 
+export interface PrimaryFile {
+	name: string
+	fileType?: string
+	existing?: boolean
+}
+
 export interface ManageVersionContextValue {
 	// State
 	draftVersion: Ref<Labrinth.Versions.v3.DraftVersion>
@@ -74,6 +80,7 @@ export interface ManageVersionContextValue {
 	handlingNewFiles: Ref<boolean>
 	suggestedDependencies: Ref<SuggestedDependency[]>
 	visibleSuggestedDependencies: ComputedRef<SuggestedDependency[]>
+	primaryFile: ComputedRef<PrimaryFile | null>
 
 	// Stage management
 	stageConfigs: StageConfigInput<ManageVersionContextValue>[]
@@ -99,6 +106,7 @@ export interface ManageVersionContextValue {
 	) => Promise<InferredVersionInfo>
 	getProject: (projectId: string) => Promise<Labrinth.Projects.v3.Project>
 	getVersion: (versionId: string) => Promise<Labrinth.Versions.v3.Version>
+	handleNewFiles: (newFiles: File[]) => Promise<void>
 
 	// Submission methods
 	handleCreateVersion: () => Promise<void>
@@ -149,7 +157,7 @@ export function createManageVersionContext(
 ): ManageVersionContextValue {
 	const { labrinth } = injectModrinthClient()
 	const { addNotification } = injectNotificationManager()
-	const { refreshVersions } = injectProjectPageContext()
+	const { refreshVersions, projectV2 } = injectProjectPageContext()
 
 	// State
 	const draftVersion = ref<Labrinth.Versions.v3.DraftVersion>(structuredClone(EMPTY_DRAFT_VERSION))
@@ -338,6 +346,91 @@ export function createManageVersionContext(
 		return version
 	}
 
+	// Primary file computed
+	const primaryFile = computed<PrimaryFile | null>(() => {
+		const existingPrimaryFile = draftVersion.value.existing_files?.[0]
+		if (existingPrimaryFile) {
+			return {
+				name: existingPrimaryFile.filename,
+				fileType: existingPrimaryFile.file_type,
+				existing: true,
+			}
+		}
+
+		const addedPrimaryFile = filesToAdd.value[0]
+		if (addedPrimaryFile) {
+			return {
+				name: addedPrimaryFile.file.name,
+				fileType: addedPrimaryFile.fileType,
+				existing: false,
+			}
+		}
+
+		return null
+	})
+
+	// File handling helpers
+	function detectPrimaryFileIndex(files: File[]): number {
+		const extensionPriority = ['.jar', '.zip', '.litemod', '.mrpack', '.mrpack-primary']
+
+		for (const ext of extensionPriority) {
+			const matches = files.filter((file) => file.name.toLowerCase().endsWith(ext))
+			if (matches.length > 0) {
+				const shortest = matches.reduce((a, b) => (a.name.length < b.name.length ? a : b))
+				return files.indexOf(shortest)
+			}
+		}
+
+		return 0
+	}
+
+	const addDetectedData = async () => {
+		if (editingVersion.value) return
+
+		const primaryFileData = filesToAdd.value[0]?.file
+		if (!primaryFileData) return
+
+		try {
+			const inferredData = await setInferredVersionData(primaryFileData, projectV2.value)
+			const mappedInferredData: Partial<Labrinth.Versions.v3.DraftVersion> = {
+				...inferredData,
+				name: inferredData.name || '',
+			}
+
+			draftVersion.value = {
+				...draftVersion.value,
+				...mappedInferredData,
+			}
+		} catch (err) {
+			console.error('Error parsing version file data', err)
+		}
+	}
+
+	async function handleNewFiles(newFiles: File[]) {
+		handlingNewFiles.value = true
+		// detect primary file if no primary file is set
+		const primaryFileIndex = primaryFile.value ? null : detectPrimaryFileIndex(newFiles)
+
+		newFiles.forEach((file) => filesToAdd.value.push({ file }))
+
+		if (primaryFileIndex !== null) {
+			if (primaryFileIndex) setPrimaryFile(primaryFileIndex)
+		}
+
+		if (newFiles.length === 1 && !editingVersion.value) {
+			await addDetectedData()
+			modal.value?.nextStage()
+		}
+
+		handlingNewFiles.value = false
+	}
+
+	// add detected data when the primary file changes
+	watch(
+		() => filesToAdd.value[0]?.file,
+		() => addDetectedData(),
+	)
+
 	// Watch draft version dependencies to fetch project/version data
 	watch(
 		draftVersion,
@@ -586,6 +679,7 @@ export function createManageVersionContext(
 		projectsFetchLoading,
 		suggestedDependencies,
 		visibleSuggestedDependencies,
+		primaryFile,
 
 		// Stage management
 		stageConfigs,
@@ -608,6 +702,7 @@ export function createManageVersionContext(
 		setInferredVersionData,
 		getProject,
 		getVersion,
+		handleNewFiles,
 		handleCreateVersion,
 		handleSaveVersionEdits,
 	}
diff --git a/packages/ui/src/components/base/DropArea.vue b/packages/ui/src/components/base/DropArea.vue
index 76ae142692..f7bcbf1bbf 100644
--- a/packages/ui/src/components/base/DropArea.vue
+++ b/packages/ui/src/components/base/DropArea.vue
@@ -14,6 +14,9 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { injectNotificationManager } from '../../providers'
+
+const { addNotification } = injectNotificationManager()
 
 const props = withDefaults(
 	defineProps<{
@@ -27,7 +30,6 @@ const props = withDefaults(
 const emit = defineEmits(['change'])
 
 const dropAreaRef = ref<HTMLDivElement>()
-const fileAllowed = ref(false)
 
 const hideDropArea = () => {
 	if (dropAreaRef.value) {
@@ -36,29 +38,61 @@ const hideDropArea = () => {
 }
 
 const handleDrop = (event: DragEvent) => {
+	event.preventDefault()
 	hideDropArea()
-	if (event.dataTransfer && event.dataTransfer.files && fileAllowed.value) {
-		emit('change', event.dataTransfer.files)
+
+	const files = event.dataTransfer?.files
+	if (!files || files.length === 0) return
+
+	const file = files[0]
+
+	if (!matchesAccept({ getAsFile: () => file } as DataTransferItem, props.accept)) {
+		addNotification({
+			title: 'Invalid file',
+			text: `The file "${file.name}" is not a valid file type for this project.`,
+			type: 'error',
+		})
+		return
 	}
+
+	emit('change', files)
+}
+
+function matchesAccept(file: DataTransferItem, accept?: string): boolean {
+	if (!accept || accept.trim() === '') return true
+
+	const fileType = file.type // e.g. "image/png"
+	const fileName = file.getAsFile()?.name.toLowerCase() ?? ''
+
+	return accept
+		.split(',')
+		.map((t) => t.trim().toLowerCase())
+		.some((token) => {
+			// .png, .jpg
+			if (token.startsWith('.')) {
+				return fileName.endsWith(token)
+			}
+
+			// image/*
+			if (token.endsWith('/*')) {
+				const base = token.slice(0, -1) // "image/"
+				return fileType.startsWith(base)
+			}
+
+			// image/png
+			return fileType === token
+		})
 }
 
 const allowDrag = (event: DragEvent) => {
-	const file = event.dataTransfer?.items[0]
-	if (
-		file &&
-		props.accept
-			.split(',')
-			.reduce((acc, t) => acc || file.type.startsWith(t) || file.type === t || t === '*', false)
-	) {
-		fileAllowed.value = true
-		event.dataTransfer.dropEffect = 'copy'
-		event.preventDefault()
-		if (dropAreaRef.value) {
-			dropAreaRef.value.style.visibility = 'visible'
-		}
-	} else {
-		fileAllowed.value = false
-		hideDropArea()
+	const item = event.dataTransfer?.items?.[0]
+	if (!item || item.kind !== 'file') return
+
+	event.preventDefault()
+	event.dataTransfer!.dropEffect = 'copy'
+
+	if (dropAreaRef.value) {
+		dropAreaRef.value.style.visibility = 'visible'
 	}
 }
 
diff --git a/packages/ui/src/stories/base/DropArea.stories.ts b/packages/ui/src/stories/base/DropArea.stories.ts
index 863852ac72..6e158f3b71 100644
--- a/packages/ui/src/stories/base/DropArea.stories.ts
+++ b/packages/ui/src/stories/base/DropArea.stories.ts
@@ -12,7 +12,7 @@ export default meta
 export const Default: StoryObj = {
 	render: () => ({
 		components: { DropArea },
-		template: `
+		template: /*html*/ `
 			<DropArea accept="*" @change="(files) => console.log('Files dropped:', files)">
 				<div class="p-8 border-2 border-dashed border-divider rounded-lg text-center">
 					<p class="text-secondary">Drag and drop files anywhere on the page</p>
@@ -26,7 +26,7 @@ export const Default: StoryObj = {
 export const ImagesOnly: StoryObj = {
 	render: () => ({
 		components: { DropArea },
-		template: `
+		template: /*html*/ `
 			<DropArea accept="image/*" @change="(files) => console.log('Images dropped:', files)">
 				<div class="p-8 border-2 border-dashed border-divider rounded-lg text-center">
 					<p class="text-secondary">Drop images here</p>
@@ -36,3 +36,37 @@ export const ImagesOnly: StoryObj = {
 		`,
 	}),
 }
+
+export const AcceptMods: StoryObj = {
+	render: () => ({
+		components: { DropArea },
+		template: /*html*/ `
+			<DropArea
+				accept=".jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip,.sig,.asc,.gpg,application/pgp-signature,application/pgp-keys"
+				@change="(files) => console.log('Mod files dropped:', files)"
+			>
+				<div class="p-8 border-2 border-dashed border-divider rounded-lg text-center">
+					<p class="text-secondary">Drop mod files here</p>
+					<p class="text-sm text-secondary mt-2">Accepts .jar, .zip, .litemod, and signature files (.sig, .asc, .gpg)</p>
+				</div>
+			</DropArea>
+		`,
+	}),
+}
+
+export const AcceptImages: StoryObj = {
+	render: () => ({
+		components: { DropArea },
+		template: /*html*/ `
+			<DropArea
+				accept="image/png,image/jpeg,image/gif,image/webp,image/svg+xml"
+				@change="(files) => console.log('Image files dropped:', files)"
+			>
+				<div class="p-8 border-2 border-dashed border-divider rounded-lg text-center">
+					<p class="text-secondary">Drop image files here</p>
+					<p class="text-sm text-secondary mt-2">Accepts PNG, JPEG, GIF, WebP, and SVG images</p>
+				</div>
+			</DropArea>
+		`,
+	}),
+}

From a3b062e507ced16efa66ffcbf323606c4f103339 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 10:11:14 -0700
Subject: [PATCH 26/83] fix mobile versions table buttons overflowing

---
 packages/ui/src/components/project/ProjectPageVersions.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index c6b18bdf63..f73792a460 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -198,7 +198,9 @@
 						</div>
 					</div>
 				</div>
-				<div class="flex items-start justify-end gap-1 sm:items-center z-[1]">
+				<div
+					class="flex items-start justify-end gap-1 sm:items-center z-[1] max-[400px]:flex-col max-[400px]:justify-start"
+				>
 					<slot name="actions" :version="version"></slot>
 				</div>
 				<div v-if="showFiles" class="tag-list pointer-events-none relative z-[1] col-span-full">

From 23363536b359eccad0c62f7c54d45a11f939c986 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 10:14:41 -0700
Subject: [PATCH 27/83] pnpm prepr

---
 packages/ui/.storybook/preview.ts            | 4 ++--
 packages/ui/src/components/base/DropArea.vue | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 1ca27f483a..2c3f329bcb 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -8,8 +8,8 @@ import { setup } from '@storybook/vue3-vite'
 import FloatingVue from 'floating-vue'
 import { defineComponent, ref } from 'vue'
 import { createI18n } from 'vue-i18n'
-import NotificationPanel from '../src/components/nav/NotificationPanel.vue'
 
+import NotificationPanel from '../src/components/nav/NotificationPanel.vue'
 import {
 	buildLocaleMessages,
 	createMessageCompiler,
@@ -17,8 +17,8 @@ import {
 } from '../src/composables/i18n'
 import {
 	AbstractWebNotificationManager,
-	provideNotificationManager,
 	type NotificationPanelLocation,
+	provideNotificationManager,
 	type WebNotification,
 } from '../src/providers'
 
diff --git a/packages/ui/src/components/base/DropArea.vue b/packages/ui/src/components/base/DropArea.vue
index f7bcbf1bbf..c486f6ece9 100644
--- a/packages/ui/src/components/base/DropArea.vue
+++ b/packages/ui/src/components/base/DropArea.vue
@@ -14,6 +14,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+
 import { injectNotificationManager } from '../../providers'
 
 const { addNotification } = injectNotificationManager()

From 4db5a570a57835a162896478869d9827ee99d7fb Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 10:29:18 -0700
Subject: [PATCH 28/83] fix drop file opening modal in wrong stage

---
 .../create-project-version/CreateProjectVersionModal.vue  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
index 7fdd89c88d..d62fed1b85 100644
--- a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
+++ b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
@@ -78,9 +78,11 @@ function openCreateVersionModal(
 	modal.value?.show()
 }
 
-function handleDropArea(files: FileList) {
-	openCreateVersionModal()
-	handleNewFiles(Array.from(files))
+async function handleDropArea(files: FileList) {
+	newDraftVersion(projectV2.value.id, null)
+	modal.value?.setStage(0)
+	await handleNewFiles(Array.from(files))
+	modal.value?.show()
 }
 
 defineExpose({

From 976b8c67c1727a882f4407ef2f111767ea4d7b2d Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 10:38:12 -0700
Subject: [PATCH 29/83] implement invalid file for dropping files

---
 .../CreateProjectVersionModal.vue             | 10 ++++-
 .../src/components/base/DropzoneFileInput.vue | 43 +++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
index d62fed1b85..c918fe974a 100644
--- a/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
+++ b/apps/frontend/src/components/ui/create-project-version/CreateProjectVersionModal.vue
@@ -4,8 +4,13 @@
 		:stages="ctx.stageConfigs"
 		:context="ctx"
 		:breadcrumbs="!editingVersion"
+		@hide="() => (modalOpen = false)"
+	/>
+	<DropArea
+		v-if="!modalOpen"
+		:accept="acceptFileFromProjectType(projectV2.project_type)"
+		@change="handleDropArea"
 	/>
-	<DropArea :accept="acceptFileFromProjectType(projectV2.project_type)" @change="handleDropArea" />
 </template>
 
 <script setup lang="ts">
@@ -30,6 +35,7 @@ const emit = defineEmits<{
 }>()
 
 const modal = useTemplateRef<ComponentExposed<typeof MultiStageModal>>('modal')
+const modalOpen = ref(false)
 
 const ctx = createManageVersionContext(modal, () => emit('save'))
 provideManageVersionContext(ctx)
@@ -76,6 +82,7 @@ function openCreateVersionModal(
 	newDraftVersion(projectV2.value.id, version)
 	modal.value?.setStage(stageId ?? 0)
 	modal.value?.show()
+	modalOpen.value = true
 }
 
 async function handleDropArea(files: FileList) {
@@ -83,6 +90,7 @@ async function handleDropArea(files: FileList) {
 	modal.value?.setStage(0)
 	await handleNewFiles(Array.from(files))
 	modal.value?.show()
+	modalOpen.value = true
 }
 
 defineExpose({
diff --git a/packages/ui/src/components/base/DropzoneFileInput.vue b/packages/ui/src/components/base/DropzoneFileInput.vue
index 484f62669f..b9a8a791ad 100644
--- a/packages/ui/src/components/base/DropzoneFileInput.vue
+++ b/packages/ui/src/components/base/DropzoneFileInput.vue
@@ -50,6 +50,10 @@ import { FolderUpIcon } from '@modrinth/assets'
 import { fileIsValid } from '@modrinth/utils'
 import { ref } from 'vue'
 
+import { injectNotificationManager } from '../../providers'
+
+const { addNotification } = injectNotificationManager()
+
 const fileInput = ref<HTMLInputElement | null>(null)
 
 const emit = defineEmits<{
@@ -76,11 +80,50 @@ const props = withDefaults(
 
 const files = ref<File[]>([])
 
+function matchesAccept(file: File, accept?: string): boolean {
+	if (!accept || accept.trim() === '') return true
+
+	const fileType = file.type // e.g. "image/png"
+	const fileName = file.name.toLowerCase()
+
+	return accept
+		.split(',')
+		.map((t) => t.trim().toLowerCase())
+		.some((token) => {
+			// .png, .jpg
+			if (token.startsWith('.')) {
+				return fileName.endsWith(token)
+			}
+
+			// image/*
+			if (token.endsWith('/*')) {
+				const base = token.slice(0, -1) // "image/"
+				return fileType.startsWith(base)
+			}
+
+			// image/png
+			return fileType === token
+		})
+}
+
 function addFiles(incoming: FileList, shouldNotReset = false) {
 	if (!shouldNotReset || props.shouldAlwaysReset) {
 		files.value = Array.from(incoming)
 	}
 
+	// Filter out files that don't match the accept prop
+	const invalidFiles = files.value.filter((file) => !matchesAccept(file, props.accept))
+	if (invalidFiles.length > 0) {
+		for (const file of invalidFiles) {
+			addNotification({
+				title: 'Invalid file',
+				text: `The file "${file.name}" is not a valid file type for this project.`,
+				type: 'error',
+			})
+		}
+		files.value = files.value.filter((file) => matchesAccept(file, props.accept))
+	}
+
 	const validationOptions = {
 		maxSize: props.maxSize ?? undefined,
 		alertOnInvalid: true,

From 72e41bdbe63de3ad910f56bbf6d3aae622df8ce1 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 10:45:34 -0700
Subject: [PATCH 30/83] allow horizontal scroll on breadcrumbs

---
 packages/ui/src/components/base/MultiStageModal.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index cb8d090c9c..bae3d6065a 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -283,7 +283,9 @@ function onBreadcrumbWheel(e: WheelEvent) {
 	const canScrollHorizontally = el.scrollWidth > el.clientWidth
 
 	if (canScrollHorizontally) {
-		el.scrollLeft += e.deltaY
+		// Support both horizontal and vertical scroll input
+		const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY
+		el.scrollLeft += delta
 	}
 }
 

From 8a53fa03d6ccee3d205ef5a9395499848167d318 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 11:08:34 -0700
Subject: [PATCH 31/83] update infer.js as best as possible

---
 apps/frontend/src/helpers/infer.js | 524 ++++++++++++++++++++---------
 1 file changed, 356 insertions(+), 168 deletions(-)

diff --git a/apps/frontend/src/helpers/infer.js b/apps/frontend/src/helpers/infer.js
index e2ad37a897..775d9e2e88 100644
--- a/apps/frontend/src/helpers/infer.js
+++ b/apps/frontend/src/helpers/infer.js
@@ -3,8 +3,121 @@ import yaml from 'js-yaml'
 import JSZip from 'jszip'
 import { satisfies } from 'semver'
 
+// Pack format to Minecraft version mappings
+// See: https://minecraft.wiki/w/Pack_format
+
+// Resource pack format history (full table including development versions)
+const RESOURCE_PACK_FORMATS = {
+	1: { min: '1.6.1', max: '1.8.9' },
+	2: { min: '1.9', max: '1.10.2' },
+	3: { min: '1.11', max: '1.12.2' },
+	4: { min: '1.13', max: '1.14.4' },
+	5: { min: '1.15', max: '1.16.1' },
+	6: { min: '1.16.2', max: '1.16.5' },
+	7: { min: '1.17', max: '1.17.1' },
+	8: { min: '1.18', max: '1.18.2' },
+	9: { min: '1.19', max: '1.19.2' },
+	11: { min: '22w42a', max: '22w44a' },
+	12: { min: '1.19.3', max: '1.19.3' },
+	13: { min: '1.19.4', max: '1.19.4' },
+	14: { min: '23w14a', max: '23w16a' },
+	15: { min: '1.20', max: '1.20.1' },
+	16: { min: '23w31a', max: '23w31a' },
+	17: { min: '23w32a', max: '1.20.2-pre1' },
+	18: { min: '1.20.2', max: '1.20.2' },
+	19: { min: '23w42a', max: '23w42a' },
+	20: { min: '23w43a', max: '23w44a' },
+	21: { min: '23w45a', max: '23w46a' },
+	22: { min: '1.20.3', max: '1.20.4' },
+	24: { min: '24w03a', max: '24w04a' },
+	25: { min: '24w05a', max: '24w05b' },
+	26: { min: '24w06a', max: '24w07a' },
+	28: { min: '24w09a', max: '24w10a' },
+	29: { min: '24w11a', max: '24w11a' },
+	30: { min: '24w12a', max: '24w12a' },
+	31: { min: '24w13a', max: '1.20.5-pre3' },
+	32: { min: '1.20.5', max: '1.20.6' },
+	33: { min: '24w18a', max: '24w20a' },
+	34: { min: '1.21', max: '1.21.1' },
+	35: { min: '24w33a', max: '24w33a' },
+	36: { min: '24w34a', max: '24w35a' },
+	37: { min: '24w36a', max: '24w36a' },
+	38: { min: '24w37a', max: '24w37a' },
+	39: { min: '24w38a', max: '24w39a' },
+	40: { min: '24w40a', max: '24w40a' },
+	41: { min: '1.21.2-pre1', max: '1.21.2-pre2' },
+	42: { min: '1.21.2', max: '1.21.3' },
+	43: { min: '24w44a', max: '24w44a' },
+	44: { min: '24w45a', max: '24w45a' },
+	45: { min: '24w46a', max: '24w46a' },
+	46: { min: '1.21.4', max: '1.21.4' },
+}
+
+// Data pack format history (full table including development versions)
+const DATA_PACK_FORMATS = {
+	4: { min: '1.13', max: '1.14.4' },
+	5: { min: '1.15', max: '1.16.1' },
+	6: { min: '1.16.2', max: '1.16.5' },
+	7: { min: '1.17', max: '1.17.1' },
+	8: { min: '1.18', max: '1.18.1' },
+	9: { min: '1.18.2', max: '1.18.2' },
+	10: { min: '1.19', max: '1.19.3' },
+	11: { min: '23w03a', max: '23w05a' },
+	12: { min: '1.19.4', max: '1.19.4' },
+	13: { min: '23w12a', max: '23w14a' },
+	14: { min: '23w16a', max: '23w17a' },
+	15: { min: '1.20', max: '1.20.1' },
+	16: { min: '23w31a', max: '23w31a' },
+	17: { min: '23w32a', max: '1.20.2-pre1' },
+	18: { min: '1.20.2', max: '1.20.2' },
+	19: { min: '23w40a', max: '23w40a' },
+	20: { min: '23w41a', max: '23w41a' },
+	21: { min: '23w42a', max: '23w42a' },
+	22: { min: '23w43a', max: '23w44a' },
+	23: { min: '23w45a', max: '23w46a' },
+	24: { min: '1.20.3-pre1', max: '1.20.3-pre1' },
+	25: { min: '1.20.3-pre2', max: '1.20.3-pre4' },
+	26: { min: '1.20.3', max: '1.20.4' },
+	27: { min: '23w51a', max: '23w51b' },
+	28: { min: '24w03a', max: '24w04a' },
+	29: { min: '24w05a', max: '24w05b' },
+	30: { min: '24w06a', max: '24w06a' },
+	31: { min: '24w07a', max: '24w07a' },
+	32: { min: '24w09a', max: '24w10a' },
+	33: { min: '24w11a', max: '24w11a' },
+	34: { min: '24w12a', max: '24w12a' },
+	35: { min: '24w13a', max: '24w13a' },
+	36: { min: '24w14a', max: '24w14a' },
+	37: { min: '1.20.5-pre1', max: '1.20.5-pre1' },
+	38: { min: '1.20.5-pre2', max: '1.20.5-pre3' },
+	39: { min: '1.20.5-pre4', max: '1.20.5-rc3' },
+	40: { min: '1.20.5-rc4', max: '1.20.5-rc4' },
+	41: { min: '1.20.5', max: '1.20.6' },
+	42: { min: '24w18a', max: '24w19b' },
+	43: { min: '24w20a', max: '24w20a' },
+	44: { min: '24w21a', max: '24w21b' },
+	45: { min: '1.21-pre1', max: '1.21-pre1' },
+	46: { min: '1.21-pre2', max: '1.21-pre4' },
+	47: { min: '1.21-rc1', max: '1.21-rc1' },
+	48: { min: '1.21', max: '1.21.1' },
+	49: { min: '24w33a', max: '24w33a' },
+	50: { min: '24w34a', max: '24w35a' },
+	51: { min: '24w36a', max: '24w36a' },
+	52: { min: '24w37a', max: '24w37a' },
+	53: { min: '24w38a', max: '24w38a' },
+	54: { min: '24w39a', max: '24w39a' },
+	55: { min: '24w40a', max: '24w40a' },
+	56: { min: '1.21.2-pre1', max: '1.21.2-pre2' },
+	57: { min: '1.21.2', max: '1.21.3' },
+	58: { min: '24w44a', max: '24w44a' },
+	59: { min: '24w45a', max: '24w45a' },
+	60: { min: '24w46a', max: '24w46a' },
+	61: { min: '1.21.4', max: '1.21.4' },
+}
+
 export const inferVersionInfo = async function (rawFile, project, gameVersions) {
 	function versionType(number) {
+		if (!number) return 'release'
 		if (number.includes('alpha')) {
 			return 'alpha'
 		} else if (
@@ -218,12 +331,18 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 		'plugin.yml': (file) => {
 			const metadata = yaml.load(file)
 
+			// Check for Folia support
+			const loaders = []
+			if (metadata['folia-supported'] === true) {
+				loaders.push('folia')
+			}
+			// We don't know which fork of Bukkit users are using otherwise
+
 			return {
 				name: `${project.title} ${metadata.version}`,
 				version_number: metadata.version,
 				version_type: versionType(metadata.version),
-				// We don't know which fork of Bukkit users are using
-				loaders: [],
+				loaders,
 				game_versions: gameVersions
 					.filter(
 						(x) => x.version.startsWith(metadata['api-version']) && x.version_type === 'release',
@@ -269,6 +388,22 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 				loaders: ['velocity'],
 			}
 		},
+		// Sponge plugin (8+)
+		'META-INF/sponge_plugins.json': (file) => {
+			const metadata = JSON.parse(file)
+			const plugin = metadata.plugins?.[0]
+
+			if (!plugin) {
+				return {}
+			}
+
+			return {
+				name: plugin.version ? `${project.title} ${plugin.version}` : '',
+				version_number: plugin.version,
+				version_type: versionType(plugin.version),
+				loaders: ['sponge'],
+			}
+		},
 		// Modpacks
 		'modrinth.index.json': (file) => {
 			const metadata = JSON.parse(file)
@@ -298,15 +433,19 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 			}
 		},
 		// Resource Packs + Data Packs
-		'pack.mcmeta': (file) => {
+		'pack.mcmeta': async (file, zip) => {
 			const metadata = JSON.parse(file)
 
 			function getRange(versionA, versionB) {
 				const startingIndex = gameVersions.findIndex((x) => x.version === versionA)
 				const endingIndex = gameVersions.findIndex((x) => x.version === versionB)
 
+				if (startingIndex === -1 || endingIndex === -1) {
+					return []
+				}
+
 				const final = []
-				const filterOnlyRelease = gameVersions[startingIndex].version_type === 'release'
+				const filterOnlyRelease = gameVersions[startingIndex]?.version_type === 'release'
 
 				for (let i = startingIndex; i >= endingIndex; i--) {
 					if (gameVersions[i].version_type === 'release' || !filterOnlyRelease) {
@@ -317,184 +456,222 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 				return final
 			}
 
+			function getVersionsFromPackFormat(packFormat, formatMap) {
+				const mapping = formatMap[packFormat]
+				if (!mapping) {
+					return []
+				}
+				return getRange(mapping.min, mapping.max)
+			}
+
+			function getVersionsFromFormatRange(minFormat, maxFormat, formatMap) {
+				// Find all versions between minFormat and maxFormat
+				const allVersions = []
+				for (let format = minFormat; format <= maxFormat; format++) {
+					const versions = getVersionsFromPackFormat(format, formatMap)
+					for (const version of versions) {
+						if (!allVersions.includes(version)) {
+							allVersions.push(version)
+						}
+					}
+				}
+				return allVersions
+			}
+
+			function getGameVersionsFromPackMeta(packMeta, formatMap) {
+				const pack = packMeta.pack
+				if (!pack) return []
+
+				// Check for supported_formats (array of [min, max] or object with min_inclusive/max_inclusive)
+				if (pack.supported_formats) {
+					if (Array.isArray(pack.supported_formats)) {
+						// Array format: [minFormat, maxFormat]
+						const [minFormat, maxFormat] = pack.supported_formats
+						return getVersionsFromFormatRange(minFormat, maxFormat, formatMap)
+					} else if (typeof pack.supported_formats === 'object') {
+						// Object format: { min_inclusive: X, max_inclusive: Y }
+						const minFormat = pack.supported_formats.min_inclusive
+						const maxFormat = pack.supported_formats.max_inclusive
+						if (minFormat !== undefined && maxFormat !== undefined) {
+							return getVersionsFromFormatRange(minFormat, maxFormat, formatMap)
+						}
+					}
+				}
+
+				// Check for min_format and max_format (older format range spec)
+				if (pack.min_format !== undefined && pack.max_format !== undefined) {
+					return getVersionsFromFormatRange(pack.min_format, pack.max_format, formatMap)
+				}
+
+				// Fall back to pack_format
+				if (pack.pack_format !== undefined) {
+					return getVersionsFromPackFormat(pack.pack_format, formatMap)
+				}
+
+				return []
+			}
+
+			// Check for assets/ directory (resource pack) or data/ directory (data pack)
+			const hasAssetsDir = zip.file(/^assets\//)?.[0] !== undefined
+			const hasDataDir = zip.file(/^data\//)?.[0] !== undefined
+
+			// Detect vanilla shaders
+			const hasVanillaShaders = await (async () => {
+				// Check for assets/*/shaders directory
+				const shaderDirs = zip.file(/^assets\/[^/]+\/shaders\//)
+				if (shaderDirs && shaderDirs.length > 0) {
+					return true
+				}
+				// Check for shader files (.fsh, .vsh, .glsl)
+				const shaderFiles = zip.file(/\.(fsh|vsh|glsl)$/)
+				return shaderFiles && shaderFiles.length > 0
+			})()
+
 			const loaders = []
 			let newGameVersions = []
 
-			if (project.actualProjectType === 'mod') {
+			// Data pack detection: has data/ directory
+			if (
+				hasDataDir &&
+				(project.actualProjectType === 'mod' || project.actualProjectType === 'datapack')
+			) {
+				loaders.push('datapack')
+				newGameVersions = getGameVersionsFromPackMeta(metadata, DATA_PACK_FORMATS)
+			}
+			// Resource pack detection: has assets/ directory
+			else if (
+				hasAssetsDir &&
+				(project.actualProjectType === 'resourcepack' || project.actualProjectType === 'shader')
+			) {
+				if (hasVanillaShaders && project.actualProjectType === 'shader') {
+					loaders.push('vanilla')
+				} else {
+					loaders.push('minecraft')
+				}
+				newGameVersions = getGameVersionsFromPackMeta(metadata, RESOURCE_PACK_FORMATS)
+			}
+			// Fallback to old behavior based on project type
+			else if (project.actualProjectType === 'mod') {
 				loaders.push('datapack')
+				newGameVersions = getGameVersionsFromPackMeta(metadata, DATA_PACK_FORMATS)
+			} else if (project.actualProjectType === 'resourcepack') {
+				loaders.push('minecraft')
+				newGameVersions = getGameVersionsFromPackMeta(metadata, RESOURCE_PACK_FORMATS)
+			}
 
-				switch (metadata.pack.pack_format) {
-					case 4:
-						newGameVersions = getRange('1.13', '1.14.4')
-						break
-					case 5:
-						newGameVersions = getRange('1.15', '1.16.1')
-						break
-					case 6:
-						newGameVersions = getRange('1.16.2', '1.16.5')
-						break
-					case 7:
-						newGameVersions = getRange('1.17', '1.17.1')
-						break
-					case 8:
-						newGameVersions = getRange('1.18', '1.18.1')
-						break
-					case 9:
-						newGameVersions.push('1.18.2')
-						break
-					case 10:
-						newGameVersions = getRange('1.19', '1.19.3')
-						break
-					case 11:
-						newGameVersions = getRange('23w03a', '23w05a')
-						break
-					case 12:
-						newGameVersions.push('1.19.4')
-						break
-					default:
+			return {
+				loaders,
+				game_versions: newGameVersions,
+			}
+		},
+	}
+
+	// Additional detection functions that need to scan multiple files
+	const multiFileInferFunctions = {
+		// Legacy texture pack (pre-1.6.1)
+		legacyTexturePack: async (zip) => {
+			const packTxt = zip.file('pack.txt')
+			if (!packTxt) return null
+
+			// Check for legacy texture pack files/directories
+			const legacyIndicators = [
+				'font.txt',
+				'particles.png',
+				'achievement/',
+				'armor/',
+				'art/',
+				'environment/',
+				'font/',
+				'gui/',
+				'item/',
+				'lang/',
+				'misc/',
+				'mob/',
+				'textures/',
+				'title/',
+			]
+
+			const hasLegacyContent = legacyIndicators.some((indicator) => {
+				if (indicator.endsWith('/')) {
+					return zip.file(new RegExp(`^${indicator}`))?.length > 0
 				}
+				return zip.file(indicator) !== null
+			})
+
+			if (!hasLegacyContent) return null
+
+			// Legacy texture packs are compatible with a1.2.2 to 1.5.2
+			// We'll return versions from 1.0 to 1.5.2 (as older alpha/beta versions may not be in gameVersions)
+			const legacyVersions = gameVersions
+				.filter((v) => {
+					const version = v.version
+					// Match 1.0 through 1.5.2
+					if (version.match(/^1\.[0-4](\.\d+)?$/) || version.match(/^1\.5(\.[0-2])?$/)) {
+						return true
+					}
+					return false
+				})
+				.map((v) => v.version)
+
+			return {
+				loaders: ['minecraft'],
+				game_versions: legacyVersions,
 			}
+		},
 
-			if (project.actualProjectType === 'resourcepack') {
-				loaders.push('minecraft')
+		// Shader pack (OptiFine/Iris)
+		shaderPack: async (zip) => {
+			const shadersDir = zip.file(/^shaders\//)
+			if (!shadersDir || shadersDir.length === 0) return null
+
+			const loaders = []
 
-				switch (metadata.pack.pack_format) {
-					case 1:
-						newGameVersions = getRange('1.6.1', '1.8.9')
-						break
-					case 2:
-						newGameVersions = getRange('1.9', '1.10.2')
-						break
-					case 3:
-						newGameVersions = getRange('1.11', '1.12.2')
-						break
-					case 4:
-						newGameVersions = getRange('1.13', '1.14.4')
-						break
-					case 5:
-						newGameVersions = getRange('1.15', '1.16.1')
-						break
-					case 6:
-						newGameVersions = getRange('1.16.2', '1.16.5')
-						break
-					case 7:
-						newGameVersions = getRange('1.17', '1.17.1')
-						break
-					case 8:
-						newGameVersions = getRange('1.18', '1.18.2')
-						break
-					case 9:
-						newGameVersions = getRange('1.19', '1.19.2')
-						break
-					case 11:
-						newGameVersions = getRange('22w42a', '22w44a')
-						break
-					case 12:
-						newGameVersions.push('1.19.3')
-						break
-					case 13:
-						newGameVersions.push('1.19.4')
-						break
-					case 14:
-						newGameVersions = getRange('23w14a', '23w16a')
-						break
-					case 15:
-						newGameVersions = getRange('1.20', '1.20.1')
-						break
-					case 16:
-						newGameVersions.push('23w31a')
-						break
-					case 17:
-						newGameVersions = getRange('23w32a', '1.20.2-pre1')
-						break
-					case 18:
-						newGameVersions.push('1.20.2')
-						break
-					case 19:
-						newGameVersions.push('23w42a')
-						break
-					case 20:
-						newGameVersions = getRange('23w43a', '23w44a')
-						break
-					case 21:
-						newGameVersions = getRange('23w45a', '23w46a')
-						break
-					case 22:
-						newGameVersions = getRange('1.20.3', '1.20.4')
-						break
-					case 24:
-						newGameVersions = getRange('24w03a', '24w04a')
-						break
-					case 25:
-						newGameVersions = getRange('24w05a', '24w05b')
-						break
-					case 26:
-						newGameVersions = getRange('24w06a', '24w07a')
-						break
-					case 28:
-						newGameVersions = getRange('24w09a', '24w10a')
-						break
-					case 29:
-						newGameVersions.push('24w11a')
-						break
-					case 30:
-						newGameVersions.push('24w12a')
-						break
-					case 31:
-						newGameVersions = getRange('24w13a', '1.20.5-pre3')
-						break
-					case 32:
-						newGameVersions = getRange('1.20.5', '1.20.6')
-						break
-					case 33:
-						newGameVersions = getRange('24w18a', '24w20a')
-						break
-					case 34:
-						newGameVersions = getRange('1.21', '1.21.1')
-						break
-					case 35:
-						newGameVersions.push('24w33a')
-						break
-					case 36:
-						newGameVersions = getRange('24w34a', '24w35a')
-						break
-					case 37:
-						newGameVersions.push('24w36a')
-						break
-					case 38:
-						newGameVersions.push('24w37a')
-						break
-					case 39:
-						newGameVersions = getRange('24w38a', '24w39a')
-						break
-					case 40:
-						newGameVersions.push('24w40a')
-						break
-					case 41:
-						newGameVersions = getRange('1.21.2-pre1', '1.21.2-pre2')
-						break
-					case 42:
-						newGameVersions = getRange('1.21.2', '1.21.3')
-						break
-					case 43:
-						newGameVersions.push('24w44a')
-						break
-					case 44:
-						newGameVersions.push('24w45a')
-						break
-					case 45:
-						newGameVersions.push('24w46a')
-						break
-					case 46:
-						newGameVersions.push('1.21.4')
-						break
-					default:
+			// Check for Iris-specific features in shaders.properties
+			const shaderProps = zip.file('shaders/shaders.properties')
+			if (shaderProps) {
+				const propsText = await shaderProps.async('text')
+				if (
+					propsText.includes('iris.features.required') ||
+					propsText.includes('iris.features.optional')
+				) {
+					loaders.push('iris')
 				}
 			}
 
+			// If no specific loader detected, it could be OptiFine or Iris
+			if (loaders.length === 0) {
+				loaders.push('optifine', 'iris')
+			}
+
 			return {
 				loaders,
-				game_versions: newGameVersions,
+				// No reliable way to detect MC versions for shader packs
+				game_versions: [],
+			}
+		},
+
+		// NilLoader mod
+		nilLoaderMod: async (zip) => {
+			const nilModFiles = zip.file(/\.nilmod\.css$/)
+			if (!nilModFiles || nilModFiles.length === 0) return null
+
+			return {
+				loaders: ['nilloader'],
+				game_versions: [],
+			}
+		},
+
+		// Java Agent
+		javaAgent: async (zip) => {
+			const manifest = zip.file('META-INF/MANIFEST.MF')
+			if (!manifest) return null
+
+			const manifestText = await manifest.async('text')
+			if (!manifestText.includes('Premain-Class:')) return null
+
+			return {
+				loaders: ['java-agent'],
+				game_versions: [],
 			}
 		},
 	}
@@ -503,6 +680,7 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 
 	const zip = await zipReader.loadAsync(rawFile)
 
+	// First, try the standard file-based detection
 	for (const fileName in inferFunctions) {
 		const file = zip.file(fileName)
 
@@ -511,4 +689,14 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 			return inferFunctions[fileName](text, zip)
 		}
 	}
+
+	// Then, try multi-file detection functions
+	for (const funcName in multiFileInferFunctions) {
+		const result = await multiFileInferFunctions[funcName](zip)
+		if (result !== null) {
+			return result
+		}
+	}
+
+	return {}
 }

From 9bfce8b5fcd20a776ab6f602f0176fe385369ee8 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 11:19:18 -0700
Subject: [PATCH 32/83] add create version button uploading version state

---
 .../src/providers/version/manage-version-modal.ts    | 12 ++++++++++++
 .../src/providers/version/stages/details-stage.ts    |  6 +++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index f9bdc4ef76..38d70a60eb 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -85,6 +85,7 @@ export interface ManageVersionContextValue {
 	// Stage management
 	stageConfigs: StageConfigInput<ManageVersionContextValue>[]
 	isSubmitting: Ref<boolean>
+	isUploading: Ref<boolean>
 	modal: ShallowRef<ComponentExposed<typeof MultiStageModal> | null>
 
 	// Computed state
@@ -171,6 +172,8 @@ export function createManageVersionContext(
 	const suggestedDependencies = ref<SuggestedDependency[]>([])
 
 	const isSubmitting = ref(false)
+	const isUploading = ref(false)
+	let uploadingTimeout: ReturnType<typeof setTimeout> | null = null
 
 	const projectType = computed<Labrinth.Projects.v2.ProjectType>(() => {
 		const primaryFile = filesToAdd.value[0]?.file
@@ -536,6 +539,12 @@ export function createManageVersionContext(
 		const version = toRaw(draftVersion.value)
 		const files = toRaw(filesToAdd.value)
 		isSubmitting.value = true
+		isUploading.value = false
+
+		// Show "Uploading version" after 5 seconds
+		uploadingTimeout = setTimeout(() => {
+			isUploading.value = true
+		}, 5000)
 
 		if (noEnvironmentProject.value) version.environment = undefined
 
@@ -556,6 +565,8 @@ export function createManageVersionContext(
 				type: 'error',
 			})
 		}
+		if (uploadingTimeout) clearTimeout(uploadingTimeout)
+		isUploading.value = false
 		isSubmitting.value = false
 	}
 
@@ -684,6 +695,7 @@ export function createManageVersionContext(
 		// Stage management
 		stageConfigs,
 		isSubmitting,
+		isUploading,
 		modal,
 
 		// Computed
diff --git a/apps/frontend/src/providers/version/stages/details-stage.ts b/apps/frontend/src/providers/version/stages/details-stage.ts
index 4dcd19ba86..cfd8a4b0f4 100644
--- a/apps/frontend/src/providers/version/stages/details-stage.ts
+++ b/apps/frontend/src/providers/version/stages/details-stage.ts
@@ -23,7 +23,11 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 					onClick: () => ctx.modal.value?.prevStage(),
 				},
 	rightButtonConfig: (ctx) => ({
-		label: ctx.editingVersion.value ? 'Save changes' : 'Create version',
+		label: ctx.editingVersion.value
+			? 'Save changes'
+			: ctx.isUploading.value
+				? 'Uploading version'
+				: 'Create version',
 		icon: ctx.isSubmitting.value ? SpinnerIcon : ctx.editingVersion.value ? SaveIcon : PlusIcon,
 		iconPosition: 'before',
 		iconClass: ctx.isSubmitting.value ? 'animate-spin' : undefined,

From aab15c0f3a6d080d8bf54062ab1a22dd28ff4c42 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 11:27:02 -0700
Subject: [PATCH 33/83] add extractVersionFromFilename for resource pack and
 datapack

---
 apps/frontend/src/helpers/infer.js | 56 ++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/apps/frontend/src/helpers/infer.js b/apps/frontend/src/helpers/infer.js
index 775d9e2e88..abc85980de 100644
--- a/apps/frontend/src/helpers/infer.js
+++ b/apps/frontend/src/helpers/infer.js
@@ -131,6 +131,44 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 		}
 	}
 
+	/**
+	 * Extracts version number from a filename.
+	 * Handles patterns like:
+	 * - "Bare Bones 1.21.11.zip" -> "1.21.11"
+	 * - "FA+All_Extensions-v1.7.zip" -> "1.7"
+	 * - "FreshAnimations_v1.10.3.zip" -> "1.10.3"
+	 * - "LowOnFire v1.21.1158.zip" -> "1.21.1158"
+	 * - "Dramatic Skys Demo 1.5.3.36.2.zip" -> "1.5.3.36.2"
+	 */
+	function extractVersionFromFilename(filename) {
+		if (!filename) return null
+
+		// Remove file extension
+		const baseName = filename.replace(/\.(zip|jar)$/i, '')
+
+		// Try to match version patterns:
+		// 1. "v" followed by version number (v1.2.3)
+		// 2. Version number at the end after separator (space, hyphen, underscore)
+		// Pattern matches version-like strings: digits separated by dots, possibly with additional segments
+		const versionPatterns = [
+			// Match "v1.2.3" or "V1.2.3" style versions
+			/[_\-\s]v(\d+(?:\.\d+)*(?:\.\d+)?)$/i,
+			// Match version at end after space/separator: "Name 1.2.3"
+			/[_\-\s](\d+(?:\.\d+)+)$/,
+			// Match version with 'v' anywhere: "Name-v1.2.3-extra" (less strict)
+			/[_\-\s]v(\d+(?:\.\d+)*)/i,
+		]
+
+		for (const pattern of versionPatterns) {
+			const match = baseName.match(pattern)
+			if (match && match[1]) {
+				return match[1]
+			}
+		}
+
+		return null
+	}
+
 	function getGameVersionsMatchingSemverRange(range, gameVersions) {
 		if (!range) {
 			return []
@@ -559,7 +597,13 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 				newGameVersions = getGameVersionsFromPackMeta(metadata, RESOURCE_PACK_FORMATS)
 			}
 
+			// Try to extract version from filename
+			const versionNum = extractVersionFromFilename(rawFile.name)
+
 			return {
+				name: versionNum ? `${project.title} ${versionNum}` : undefined,
+				version_number: versionNum || undefined,
+				version_type: versionType(versionNum),
 				loaders,
 				game_versions: newGameVersions,
 			}
@@ -613,7 +657,13 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 				})
 				.map((v) => v.version)
 
+			// Try to extract version from filename
+			const versionNum = extractVersionFromFilename(rawFile.name)
+
 			return {
+				name: versionNum ? `${project.title} ${versionNum}` : undefined,
+				version_number: versionNum || undefined,
+				version_type: versionType(versionNum),
 				loaders: ['minecraft'],
 				game_versions: legacyVersions,
 			}
@@ -643,7 +693,13 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 				loaders.push('optifine', 'iris')
 			}
 
+			// Try to extract version from filename
+			const versionNum = extractVersionFromFilename(rawFile.name)
+
 			return {
+				name: versionNum ? `${project.title} ${versionNum}` : undefined,
+				version_number: versionNum || undefined,
+				version_type: versionType(versionNum),
 				loaders,
 				// No reliable way to detect MC versions for shader packs
 				game_versions: [],

From f3a8119931e0bd79a6951c51082441402ab06f6a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 11:31:13 -0700
Subject: [PATCH 34/83] allow jars for datapack project

---
 packages/utils/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index b536d89b11..46d2ef6080 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -334,7 +334,7 @@ export const acceptFileFromProjectType = (projectType) => {
 		case 'shader':
 			return `.zip,application/zip,${commonTypes}`
 		case 'datapack':
-			return `.zip,application/zip,${commonTypes}`
+			return `.jar,.zip,.litemod,application/java-archive,application/x-java-archive,application/zip,${commonTypes}`
 		case 'modpack':
 			return `.mrpack,application/x-modrinth-modpack+zip,application/zip,${commonTypes}`
 		default:

From f500bb946b9bcfb6239f10fc19646d1c5a692b79 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 11:36:15 -0700
Subject: [PATCH 35/83] detect multiple loaders when possible

---
 apps/frontend/src/helpers/infer.js | 45 +++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/helpers/infer.js b/apps/frontend/src/helpers/infer.js
index abc85980de..75374227b0 100644
--- a/apps/frontend/src/helpers/infer.js
+++ b/apps/frontend/src/helpers/infer.js
@@ -732,11 +732,54 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 		},
 	}
 
+	// Mod loader metadata files that can coexist in a single jar
+	const multiLoaderFiles = [
+		'META-INF/neoforge.mods.toml',
+		'META-INF/mods.toml',
+		'fabric.mod.json',
+		'quilt.mod.json',
+	]
+
 	const zipReader = new JSZip()
 
 	const zip = await zipReader.loadAsync(rawFile)
 
-	// First, try the standard file-based detection
+	// Check for multi-loader jars (mods that support multiple loaders)
+	const detectedLoaderFiles = multiLoaderFiles.filter((fileName) => zip.file(fileName) !== null)
+
+	if (detectedLoaderFiles.length > 1) {
+		// Multi-loader jar detected - combine results
+		const results = []
+		for (const fileName of detectedLoaderFiles) {
+			const file = zip.file(fileName)
+			if (file !== null) {
+				const text = await file.async('text')
+				const result = await inferFunctions[fileName](text, zip)
+				if (result && Object.keys(result).length > 0) {
+					results.push(result)
+				}
+			}
+		}
+
+		if (results.length > 0) {
+			// Merge results: combine loaders, use first valid version info, merge game versions
+			const combinedLoaders = [...new Set(results.flatMap((r) => r.loaders || []))]
+			const allGameVersions = [...new Set(results.flatMap((r) => r.game_versions || []))]
+
+			// Use version info from the first result that has it
+			const primaryResult = results.find((r) => r.version_number) || results[0]
+
+			return {
+				name: primaryResult.name,
+				version_number: primaryResult.version_number,
+				version_type: primaryResult.version_type,
+				loaders: combinedLoaders,
+				game_versions: allGameVersions,
+			}
+		}
+	}
+
+	// Standard single-loader detection
 	for (const fileName in inferFunctions) {
 		const file = zip.file(fileName)
 

From add15a2a3180a8f0a149fb82fd6d87c3286945b6 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 11:43:17 -0700
Subject: [PATCH 36/83] iris means compatible with optifine too

---
 apps/frontend/src/helpers/infer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/helpers/infer.js b/apps/frontend/src/helpers/infer.js
index 75374227b0..c7253dee04 100644
--- a/apps/frontend/src/helpers/infer.js
+++ b/apps/frontend/src/helpers/infer.js
@@ -684,7 +684,7 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 					propsText.includes('iris.features.required') ||
 					propsText.includes('iris.features.optional')
 				) {
-					loaders.push('iris')
+					loaders.push('iris', 'optifine')
 				}
 			}
 

From dc31cc4dc2b6bb10fca7b916269ac967ec46a039 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 12:16:26 -0700
Subject: [PATCH 37/83] infer environment on loader change as well

---
 .../providers/version/manage-version-modal.ts | 54 ++++++++++++++-----
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index 38d70a60eb..50b8d33fd8 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -279,29 +279,37 @@ export function createManageVersionContext(
 		}
 	}
 
-	async function setInferredVersionData(
-		file: File,
-		project: Labrinth.Projects.v2.Project,
-	): Promise<InferredVersionInfo> {
-		const inferred = (await inferVersionInfo(
-			file,
-			project,
-			tags.value.gameVersions,
-		)) as InferredVersionInfo
-
+	async function inferEnvironmentFromVersions(
+		projectId: string,
+		loaders: string[],
+	): Promise<Labrinth.Projects.v3.Environment | undefined> {
 		try {
-			const versions = await labrinth.versions_v3.getProjectVersions(project.id, {
-				loaders: inferred.loaders ?? [],
+			const versions = await labrinth.versions_v3.getProjectVersions(projectId, {
+				loaders,
 			})
 
 			if (versions.length > 0) {
 				const mostRecentVersion = versions[0]
 				const version = await labrinth.versions_v3.getVersion(mostRecentVersion.id)
-				inferred.environment = version.environment !== 'unknown' ? version.environment : undefined
+				return version.environment !== 'unknown' ? version.environment : undefined
 			}
 		} catch (error) {
 			console.error('Error fetching versions for environment inference:', error)
 		}
+		return undefined
+	}
+
+	async function setInferredVersionData(
+		file: File,
+		project: Labrinth.Projects.v2.Project,
+	): Promise<InferredVersionInfo> {
+		const inferred = (await inferVersionInfo(
+			file,
+			project,
+			tags.value.gameVersions,
+		)) as InferredVersionInfo
+
+		inferred.environment = await inferEnvironmentFromVersions(project.id, inferred.loaders ?? [])
 
 		const noLoaders = !inferred.loaders?.length
 
@@ -471,6 +479,26 @@ export function createManageVersionContext(
 		{ immediate: true, deep: true },
 	)
 
+	// Watch loaders to infer environment if not set
+	watch(
+		() => draftVersion.value.loaders,
+		async (loaders) => {
+			if (noEnvironmentProject.value) return
+			if (draftVersion.value.environment) return
+			if (!loaders?.length) return
+
+			const projectId = draftVersion.value.project_id
+			if (!projectId) return
+
+			const environment = await inferEnvironmentFromVersions(projectId, loaders)
+			if (environment && !draftVersion.value.environment) {
+				console.log('Inferred environment:', environment)
+				draftVersion.value.environment = environment
+				inferredVersionData.value = { ...inferredVersionData.value, environment }
+			}
+		},
+	)
+
 	// Watch loaders to fetch suggested dependencies
 	watch(
 		() => draftVersion.value.loaders,

From 92a0f4015c8be22998d7d65e6d8f13a9283d9a96 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 12:22:05 -0700
Subject: [PATCH 38/83] add tooltip

---
 .../create-project-version/stages/MetadataStage.vue  | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 7b9d730384..01a3965230 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -116,12 +116,10 @@
 		<template v-if="!noEnvironmentProject">
 			<div class="flex flex-col gap-1">
 				<div class="flex items-center justify-between">
-					<span
-						v-tooltip="'Pre-filled from a previous similar version'"
-						class="font-semibold text-contrast"
-					>
-						Environment
-					</span>
+					<div class="flex items-center gap-2">
+						<span class="font-semibold text-contrast"> Environment </span>
+						<UnknownIcon v-tooltip="'Pre-filled from a previous similar version'" />
+					</div>
 
 					<ButtonStyled type="transparent" size="standard">
 						<button @click="editEnvironment">
@@ -187,7 +185,7 @@
 
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
-import { EditIcon } from '@modrinth/assets'
+import { EditIcon, UnknownIcon } from '@modrinth/assets'
 import { ButtonStyled, defineMessages, ENVIRONMENTS_COPY, TagItem, useVIntl } from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
 

From d76fbe1caeac038dfe38cc33c4ed4faa3bdee321 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 18:04:33 -0700
Subject: [PATCH 39/83] prevent navigate forward when cannot go to next step

---
 .../version/stages/add-files-stage.ts         |  6 ++++
 .../version/stages/environment-stage.ts       |  1 +
 .../providers/version/stages/loaders-stage.ts |  1 +
 .../version/stages/mc-versions-stage.ts       |  1 +
 .../src/components/base/MultiStageModal.vue   | 34 ++++++++++++++++---
 5 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/providers/version/stages/add-files-stage.ts b/apps/frontend/src/providers/version/stages/add-files-stage.ts
index 2ed9230820..6d483d5ef8 100644
--- a/apps/frontend/src/providers/version/stages/add-files-stage.ts
+++ b/apps/frontend/src/providers/version/stages/add-files-stage.ts
@@ -11,6 +11,12 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	stageContent: markRaw(AddFilesStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit files' : 'Files'),
 	nonProgressStage: (ctx) => ctx.editingVersion.value,
+	cannotNavigateForward: (ctx) => {
+		const hasFiles =
+			ctx.filesToAdd.value.length !== 0 ||
+			(ctx.draftVersion.value.existing_files?.length ?? 0) !== 0
+		return !hasFiles || ctx.handlingNewFiles.value
+	},
 	leftButtonConfig: (ctx) => {
 		const hasFiles =
 			ctx.filesToAdd.value.length !== 0 ||
diff --git a/apps/frontend/src/providers/version/stages/environment-stage.ts b/apps/frontend/src/providers/version/stages/environment-stage.ts
index 31a1207f12..7aa32ef1dd 100644
--- a/apps/frontend/src/providers/version/stages/environment-stage.ts
+++ b/apps/frontend/src/providers/version/stages/environment-stage.ts
@@ -14,6 +14,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 		ctx.noEnvironmentProject.value ||
 		(!ctx.editingVersion.value && !!ctx.inferredVersionData.value?.environment) ||
 		(ctx.editingVersion.value && !!ctx.draftVersion.value.environment),
+	cannotNavigateForward: (ctx) => !ctx.draftVersion.value.environment,
 	leftButtonConfig: (ctx) => ({
 		label: 'Back',
 		icon: LeftArrowIcon,
diff --git a/apps/frontend/src/providers/version/stages/loaders-stage.ts b/apps/frontend/src/providers/version/stages/loaders-stage.ts
index 3da96629da..4ffa3521c1 100644
--- a/apps/frontend/src/providers/version/stages/loaders-stage.ts
+++ b/apps/frontend/src/providers/version/stages/loaders-stage.ts
@@ -14,6 +14,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 		ctx.noLoadersProject.value ||
 		(ctx.inferredVersionData.value?.loaders?.length ?? 0) > 0 ||
 		ctx.editingVersion.value,
+	cannotNavigateForward: (ctx) => ctx.draftVersion.value.loaders.length === 0,
 	leftButtonConfig: (ctx) => ({
 		label: 'Back',
 		icon: LeftArrowIcon,
diff --git a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
index dd09f2aeac..fe31db648d 100644
--- a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
+++ b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
@@ -12,6 +12,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit game versions' : 'Game versions'),
 	skip: (ctx) =>
 		(ctx.inferredVersionData.value?.game_versions?.length ?? 0) > 0 || ctx.editingVersion.value,
+	cannotNavigateForward: (ctx) => ctx.draftVersion.value.game_versions.length === 0,
 	leftButtonConfig: (ctx) => ({
 		label: 'Back',
 		icon: LeftArrowIcon,
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index bae3d6065a..9c08a74c92 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -8,8 +8,7 @@
 		:close-on-click-outside="false"
 	>
 		<template #title>
-			<!-- hard coded max width for breadcrumbs for now, real fix is to define max width on stage config, and pass it down to stage content + header -->
-			<div class="grow w-min max-w-[460px]">
+			<div class="grow w-min max-w-[95%]">
 				<div
 					v-if="breadcrumbs && !resolveCtxFn(currentStage.nonProgressStage, context)"
 					class="relative w-full"
@@ -20,21 +19,23 @@
 					/>
 					<div
 						ref="breadcrumbScroller"
-						class="flex w-full overflow-x-auto overflow-y-hidden scrollbar-hide py-3 pr-6"
+						class="flex gap-1 w-full overflow-x-auto overflow-y-hidden scrollbar-hide py-3 pr-6"
 						@wheel.prevent="onBreadcrumbWheel"
 						@scroll="updateScrollShadows"
 					>
 						<template v-for="(stage, index) in breadcrumbStages" :key="stage.id">
 							<div
 								:ref="(el) => setBreadcrumbRef(stage.id, el as HTMLElement | null)"
-								class="flex w-max"
+								class="flex w-max gap-1"
 							>
 								<button
 									class="bg-transparent active:scale-95 font-bold text-secondary p-0 w-max"
 									:class="{
 										'!text-contrast font-bold': resolveCtxFn(currentStage.id, context) === stage.id,
 										'font-bold': resolveCtxFn(currentStage.id, context) !== stage.id,
+										'opacity-50 cursor-not-allowed': cannotNavigateToStage(index),
 									}"
+									:disabled="cannotNavigateToStage(index)"
 									@click="setStage(stage.id)"
 								>
 									{{ resolveCtxFn(stage.title, context) }}
@@ -124,6 +125,7 @@ export interface StageConfigInput<T> {
 	title: MaybeCtxFn<T, string>
 	skip?: MaybeCtxFn<T, boolean>
 	nonProgressStage?: MaybeCtxFn<T, boolean>
+	cannotNavigateForward?: MaybeCtxFn<T, boolean>
 	leftButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
 	rightButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
 }
@@ -298,6 +300,30 @@ const breadcrumbStages = computed(() => {
 	})
 })
 
+// Check if navigation to a breadcrumb stage is allowed
+// Navigation backwards is always allowed, but forward navigation requires all intermediate stages to allow it
+function cannotNavigateToStage(breadcrumbIndex: number): boolean {
+	const targetStage = breadcrumbStages.value[breadcrumbIndex]
+	if (!targetStage) return false
+
+	const targetStageIndex = props.stages.findIndex((s) => s.id === targetStage.id)
+	if (targetStageIndex === -1) return false
+
+	// Always allow navigating to current or previous stages
+	if (targetStageIndex <= currentStageIndex.value) return false
+
+	// For forward navigation, check all stages between current and target
+	for (let i = currentStageIndex.value; i < targetStageIndex; i++) {
+		const stage = props.stages[i]
+		if (stage.skip && resolveCtxFn(stage.skip, props.context)) continue
+		if (resolveCtxFn(stage.cannotNavigateForward, props.context)) {
+			return true
+		}
+	}
+
+	return false
+}
+
 watch([breadcrumbStages, currentStageIndex], () => nextTick(() => updateScrollShadows()), {
 	immediate: true,
 })

From 63f9e3b629462deed861d4a67b4742ef27bcfcea Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 18:17:37 -0700
Subject: [PATCH 40/83] larger breadcrumb click targets

---
 packages/ui/src/components/base/MultiStageModal.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index 9c08a74c92..5063d4f4d4 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -19,17 +19,17 @@
 					/>
 					<div
 						ref="breadcrumbScroller"
-						class="flex gap-1 w-full overflow-x-auto overflow-y-hidden scrollbar-hide py-3 pr-6"
+						class="flex w-full overflow-x-auto overflow-y-hidden scrollbar-hide pr-6"
 						@wheel.prevent="onBreadcrumbWheel"
 						@scroll="updateScrollShadows"
 					>
 						<template v-for="(stage, index) in breadcrumbStages" :key="stage.id">
 							<div
 								:ref="(el) => setBreadcrumbRef(stage.id, el as HTMLElement | null)"
-								class="flex w-max gap-1"
+								class="flex w-max items-center"
 							>
 								<button
-									class="bg-transparent active:scale-95 font-bold text-secondary p-0 w-max"
+									class="bg-transparent active:scale-95 font-bold text-secondary p-0 w-max py-3 px-1"
 									:class="{
 										'!text-contrast font-bold': resolveCtxFn(currentStage.id, context) === stage.id,
 										'font-bold': resolveCtxFn(currentStage.id, context) !== stage.id,

From cfb6cba3026ad9812f97ab4c8e4996cd00a40245 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 18:18:41 -0700
Subject: [PATCH 41/83] hide loaders and mc versions stage until files added

---
 apps/frontend/src/providers/version/stages/loaders-stage.ts   | 1 +
 .../src/providers/version/stages/mc-versions-stage.ts         | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/providers/version/stages/loaders-stage.ts b/apps/frontend/src/providers/version/stages/loaders-stage.ts
index 4ffa3521c1..9ff7013c61 100644
--- a/apps/frontend/src/providers/version/stages/loaders-stage.ts
+++ b/apps/frontend/src/providers/version/stages/loaders-stage.ts
@@ -13,6 +13,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	skip: (ctx) =>
 		ctx.noLoadersProject.value ||
 		(ctx.inferredVersionData.value?.loaders?.length ?? 0) > 0 ||
+		!ctx.primaryFile.value ||
 		ctx.editingVersion.value,
 	cannotNavigateForward: (ctx) => ctx.draftVersion.value.loaders.length === 0,
 	leftButtonConfig: (ctx) => ({
diff --git a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
index fe31db648d..7c2cecb599 100644
--- a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
+++ b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
@@ -11,7 +11,9 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	stageContent: markRaw(McVersionsStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit game versions' : 'Game versions'),
 	skip: (ctx) =>
-		(ctx.inferredVersionData.value?.game_versions?.length ?? 0) > 0 || ctx.editingVersion.value,
+		(ctx.inferredVersionData.value?.game_versions?.length ?? 0) > 0 ||
+		!ctx.primaryFile.value ||
+		ctx.editingVersion.value,
 	cannotNavigateForward: (ctx) => ctx.draftVersion.value.game_versions.length === 0,
 	leftButtonConfig: (ctx) => ({
 		label: 'Back',

From 8ea2aa42f4adddce125c5b00551f3946f174869b Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 18:59:01 -0700
Subject: [PATCH 42/83] fix max width in header

---
 .../stages/AddFilesStage.vue                       |  2 +-
 .../stages/DependenciesStage.vue                   |  2 +-
 .../create-project-version/stages/LoadersStage.vue |  2 +-
 .../stages/McVersionsStage.vue                     |  2 +-
 .../stages/MetadataStage.vue                       |  2 +-
 .../src/providers/version/stages/details-stage.ts  |  1 +
 .../ui/src/components/base/MultiStageModal.vue     | 14 ++++++++++++--
 7 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index c91228552c..cae71b1dee 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex w-full flex-col gap-4 sm:w-[512px]">
+	<div class="flex w-full flex-col gap-4">
 		<template
 			v-if="handlingNewFiles || !(filesToAdd.length || draftVersion.existing_files?.length)"
 		>
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
index cafbb0d48d..568ebfa63f 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex w-full max-w-full flex-col gap-6 sm:w-[512px]">
+	<div class="flex w-full max-w-full flex-col gap-6">
 		<div class="flex flex-col gap-4">
 			<span class="font-semibold text-contrast">Add dependency</span>
 			<div class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 p-4">
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
index ce8d9230f3..5ac5cdfbdd 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/LoadersStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="space-y-6 sm:w-[512px]">
+	<div class="space-y-6">
 		<LoaderPicker
 			v-model="draftVersion.loaders"
 			:loaders="generatedState.loaders"
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
index 06376d1876..d28345b782 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/McVersionsStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-6 sm:w-[512px]">
+	<div class="flex flex-col gap-6">
 		<McVersionPicker v-model="draftVersion.game_versions" :game-versions="gameVersions" />
 		<div v-if="draftVersion.game_versions.length" class="space-y-1">
 			<div class="flex items-center justify-between">
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 01a3965230..9f0d8cd92f 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-6 sm:w-[512px]">
+	<div class="flex flex-col gap-6">
 		<div v-if="!editingVersion" class="flex flex-col gap-1">
 			<div class="flex items-center justify-between">
 				<span class="font-semibold text-contrast"> Uploaded files </span>
diff --git a/apps/frontend/src/providers/version/stages/details-stage.ts b/apps/frontend/src/providers/version/stages/details-stage.ts
index cfd8a4b0f4..6de8558c35 100644
--- a/apps/frontend/src/providers/version/stages/details-stage.ts
+++ b/apps/frontend/src/providers/version/stages/details-stage.ts
@@ -10,6 +10,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	id: 'add-details',
 	stageContent: markRaw(DetailsStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit details' : 'Details'),
+	maxWidth: '744px',
 	leftButtonConfig: (ctx) =>
 		ctx.editingVersion.value
 			? {
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index 5063d4f4d4..3cc2a9c4c9 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -8,7 +8,7 @@
 		:close-on-click-outside="false"
 	>
 		<template #title>
-			<div class="grow w-min max-w-[95%]">
+			<div class="grow w-min" :style="{ maxWidth: `calc(${resolvedMaxWidth}-48px)` }">
 				<div
 					v-if="breadcrumbs && !resolveCtxFn(currentStage.nonProgressStage, context)"
 					class="relative w-full"
@@ -64,7 +64,9 @@
 			class="w-full h-1 appearance-none border-none absolute top-0 left-0"
 		></progress>
 
-		<component :is="currentStage?.stageContent" />
+		<div :class="`sm:w-[${resolvedMaxWidth}]`">
+			<component :is="currentStage?.stageContent" />
+		</div>
 
 		<template #actions>
 			<div
@@ -128,6 +130,8 @@ export interface StageConfigInput<T> {
 	cannotNavigateForward?: MaybeCtxFn<T, boolean>
 	leftButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
 	rightButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
+	/** Max width for the modal content and header defined in px (e.g., '460px', '600px'). Defaults to '460px'. */
+	maxWidth?: MaybeCtxFn<T, string>
 }
 
 export function resolveCtxFn<T, R>(value: MaybeCtxFn<T, R>, ctx: T): R {
@@ -226,6 +230,12 @@ const nonProgressStage = computed(() => {
 	return resolveCtxFn(stage.nonProgressStage, props.context)
 })
 
+const resolvedMaxWidth = computed(() => {
+	const stage = currentStage.value
+	if (!stage?.maxWidth) return '512px'
+	return resolveCtxFn(stage.maxWidth, props.context)
+})
+
 const progressValue = computed(() => {
 	const isProgressStage = (stage: StageConfigInput<T>) => {
 		if (resolveCtxFn(stage.nonProgressStage, props.context)) return false

From 3ba913568098bf89348d2d6bcc622f73fde8df0a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 19:07:12 -0700
Subject: [PATCH 43/83] fix add files from metadata step jumping steps

---
 apps/frontend/src/providers/version/manage-version-modal.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index 50b8d33fd8..967b34dc3b 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -428,7 +428,11 @@ export function createManageVersionContext(
 			if (primaryFileIndex) setPrimaryFile(primaryFileIndex)
 		}
 
-		if (newFiles.length === 1 && !editingVersion.value) {
+		if (
+			filesToAdd.value.length === 1 &&
+			!editingVersion.value &&
+			modal.value?.currentStageIndex === 0
+		) {
 			await addDetectedData()
 			modal.value?.nextStage()
 		}

From 63e689c13c60fb6353e7bd3fdd0d385cda28fe2a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 19:23:15 -0700
Subject: [PATCH 44/83] define width in NewModal instead

---
 .../src/components/base/MultiStageModal.vue   | 89 +++++++++----------
 packages/ui/src/components/modal/NewModal.vue | 17 +++-
 2 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index 3cc2a9c4c9..1aac10ae98 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -6,55 +6,54 @@
 		:on-hide="onModalHide"
 		:closable="true"
 		:close-on-click-outside="false"
+		:width="resolvedMaxWidth"
 	>
 		<template #title>
-			<div class="grow w-min" :style="{ maxWidth: `calc(${resolvedMaxWidth}-48px)` }">
+			<div
+				v-if="breadcrumbs && !resolveCtxFn(currentStage.nonProgressStage, context)"
+				class="relative w-full"
+			>
+				<div
+					class="pointer-events-none absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-bg-raised to-transparent z-10 transition-opacity duration-200"
+					:class="showLeftShadow ? 'opacity-100' : 'opacity-0'"
+				/>
 				<div
-					v-if="breadcrumbs && !resolveCtxFn(currentStage.nonProgressStage, context)"
-					class="relative w-full"
+					ref="breadcrumbScroller"
+					class="flex w-full overflow-x-auto overflow-y-hidden scrollbar-hide pr-6"
+					@wheel.prevent="onBreadcrumbWheel"
+					@scroll="updateScrollShadows"
 				>
-					<div
-						class="pointer-events-none absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-bg-raised to-transparent z-10 transition-opacity duration-200"
-						:class="showLeftShadow ? 'opacity-100' : 'opacity-0'"
-					/>
-					<div
-						ref="breadcrumbScroller"
-						class="flex w-full overflow-x-auto overflow-y-hidden scrollbar-hide pr-6"
-						@wheel.prevent="onBreadcrumbWheel"
-						@scroll="updateScrollShadows"
-					>
-						<template v-for="(stage, index) in breadcrumbStages" :key="stage.id">
-							<div
-								:ref="(el) => setBreadcrumbRef(stage.id, el as HTMLElement | null)"
-								class="flex w-max items-center"
+					<template v-for="(stage, index) in breadcrumbStages" :key="stage.id">
+						<div
+							:ref="(el) => setBreadcrumbRef(stage.id, el as HTMLElement | null)"
+							class="flex w-max items-center"
+						>
+							<button
+								class="bg-transparent active:scale-95 font-bold text-secondary p-0 w-max py-3 px-1"
+								:class="{
+									'!text-contrast font-bold': resolveCtxFn(currentStage.id, context) === stage.id,
+									'font-bold': resolveCtxFn(currentStage.id, context) !== stage.id,
+									'opacity-50 cursor-not-allowed': cannotNavigateToStage(index),
+								}"
+								:disabled="cannotNavigateToStage(index)"
+								@click="setStage(stage.id)"
 							>
-								<button
-									class="bg-transparent active:scale-95 font-bold text-secondary p-0 w-max py-3 px-1"
-									:class="{
-										'!text-contrast font-bold': resolveCtxFn(currentStage.id, context) === stage.id,
-										'font-bold': resolveCtxFn(currentStage.id, context) !== stage.id,
-										'opacity-50 cursor-not-allowed': cannotNavigateToStage(index),
-									}"
-									:disabled="cannotNavigateToStage(index)"
-									@click="setStage(stage.id)"
-								>
-									{{ resolveCtxFn(stage.title, context) }}
-								</button>
-								<ChevronRightIcon
-									v-if="index < breadcrumbStages.length - 1"
-									class="h-5 w-5 text-secondary"
-									stroke-width="3"
-								/>
-							</div>
-						</template>
-					</div>
-					<div
-						class="pointer-events-none absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-bg-raised to-transparent z-10 transition-opacity duration-200"
-						:class="showRightShadow ? 'opacity-100' : 'opacity-0'"
-					/>
+								{{ resolveCtxFn(stage.title, context) }}
+							</button>
+							<ChevronRightIcon
+								v-if="index < breadcrumbStages.length - 1"
+								class="h-5 w-5 text-secondary"
+								stroke-width="3"
+							/>
+						</div>
+					</template>
 				</div>
-				<span v-else class="text-lg font-bold text-contrast sm:text-xl">{{ resolvedTitle }}</span>
+				<div
+					class="pointer-events-none absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-bg-raised to-transparent z-10 transition-opacity duration-200"
+					:class="showRightShadow ? 'opacity-100' : 'opacity-0'"
+				/>
 			</div>
+			<span v-else class="text-lg font-bold text-contrast sm:text-xl">{{ resolvedTitle }}</span>
 		</template>
 
 		<progress
@@ -64,9 +63,7 @@
 			class="w-full h-1 appearance-none border-none absolute top-0 left-0"
 		></progress>
 
-		<div :class="`sm:w-[${resolvedMaxWidth}]`">
-			<component :is="currentStage?.stageContent" />
-		</div>
+		<component :is="currentStage?.stageContent" />
 
 		<template #actions>
 			<div
@@ -232,7 +229,7 @@ const nonProgressStage = computed(() => {
 
 const resolvedMaxWidth = computed(() => {
 	const stage = currentStage.value
-	if (!stage?.maxWidth) return '512px'
+	if (!stage?.maxWidth) return '560px'
 	return resolveCtxFn(stage.maxWidth, props.context)
 })
 
diff --git a/packages/ui/src/components/modal/NewModal.vue b/packages/ui/src/components/modal/NewModal.vue
index cc88e7664c..1243800ae6 100644
--- a/packages/ui/src/components/modal/NewModal.vue
+++ b/packages/ui/src/components/modal/NewModal.vue
@@ -20,7 +20,14 @@
 			]"
 			@click="() => (closeOnClickOutside && closable ? hide() : {})"
 		/>
-		<div class="modal-container experimental-styles-within" :class="{ shown: visible }">
+		<div
+			class="modal-container experimental-styles-within"
+			:class="{ shown: visible }"
+			:style="{
+				'--_max-width': maxWidth,
+				'--_width': width,
+			}"
+		>
 			<div class="modal-body flex flex-col bg-bg-raised rounded-2xl">
 				<div
 					v-if="!hideHeader"
@@ -130,6 +137,10 @@ const props = withDefaults(
 		mergeHeader?: boolean
 		scrollable?: boolean
 		maxContentHeight?: string
+		/** Max width for the modal (e.g., '460px', '600px'). Defaults to '60rem'. */
+		maxWidth?: string
+		/** Width for the modal body (e.g., '460px', '600px'). */
+		width?: string
 	}>(),
 	{
 		type: true,
@@ -147,6 +158,8 @@ const props = withDefaults(
 		// TODO: migrate all modals to use scrollable and remove this prop
 		scrollable: false,
 		maxContentHeight: '70vh',
+		maxWidth: undefined,
+		width: undefined,
 	},
 )
 
@@ -315,7 +328,7 @@ function handleKeyDown(event: KeyboardEvent) {
 		max-width: min(var(--_max-width, 60rem), calc(100% - 2 * var(--gap-lg)));
 		overflow-y: hidden;
 		overflow-x: hidden;
-		width: fit-content;
+		width: var(--_width, fit-content);
 		pointer-events: auto;
 		scale: 0.97;
 

From 4a01b56d6d87141ab8788035fe8617e4e12881bb Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 19:51:34 -0700
Subject: [PATCH 45/83] disable remove dependency in metadata stage

---
 .../ui/create-project-version/components/AddedDependencyRow.vue | 2 +-
 .../ui/create-project-version/stages/MetadataStage.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
index f660c9a9fb..c05602d122 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex items-center justify-between gap-2 rounded-xl bg-button-bg px-4 py-1 text-button-text"
+		class="flex h-11 items-center justify-between gap-2 rounded-xl bg-button-bg px-4 py-1 text-button-text"
 	>
 		<div class="grid max-w-[75%] grid-cols-[auto_1fr_auto] items-center gap-2">
 			<Avatar v-if="icon" :src="icon" alt="dependency-icon" size="20px" :no-shadow="true" />
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 9f0d8cd92f..285a7e5b30 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -173,7 +173,7 @@
 				</div>
 
 				<div v-if="draftVersion.dependencies?.length" class="flex flex-col gap-4">
-					<DependenciesList />
+					<DependenciesList disableRemove />
 				</div>
 				<div v-else class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
 					<span class="text-sm font-medium">No dependencies added.</span>

From 797e17a17247c6acdb13832349e46f9cf90906f6 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 19:55:35 -0700
Subject: [PATCH 46/83] switch metadata and details buttons positions

---
 .../src/pages/[type]/[id]/settings/versions.vue  |  8 ++++----
 .../src/pages/[type]/[id]/version/[version].vue  | 12 ++++++------
 apps/frontend/src/pages/[type]/[id]/versions.vue | 16 ++++++++--------
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id]/settings/versions.vue b/apps/frontend/src/pages/[type]/[id]/settings/versions.vue
index 353dc60607..91c16dc1ba 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/versions.vue
@@ -39,14 +39,14 @@
 						class="hover:!bg-button-bg [&>svg]:!text-green"
 						:dropdown-id="`${baseDropdownId}-edit-${version.id}`"
 						:options="[
-							{
-								id: 'edit-details',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
-							},
 							{
 								id: 'edit-metadata',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
 							},
+							{
+								id: 'edit-details',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
+							},
 							{
 								id: 'edit-files',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index c81ff1cd95..cf03409c60 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -168,18 +168,18 @@
 						Report
 					</button>
 				</ButtonStyled>
-				<ButtonStyled v-if="currentMember">
-					<button @click="handleOpenEditVersionModal(version.id, project.id, 'add-details')">
-						<InfoIcon aria-hidden="true" />
-						Edit details
-					</button>
-				</ButtonStyled>
 				<ButtonStyled v-if="currentMember">
 					<button @click="handleOpenEditVersionModal(version.id, project.id, 'metadata')">
 						<BoxIcon aria-hidden="true" />
 						Edit metadata
 					</button>
 				</ButtonStyled>
+				<ButtonStyled v-if="currentMember">
+					<button @click="handleOpenEditVersionModal(version.id, project.id, 'add-details')">
+						<InfoIcon aria-hidden="true" />
+						Edit details
+					</button>
+				</ButtonStyled>
 				<ButtonStyled v-if="currentMember">
 					<button @click="handleOpenEditVersionModal(version.id, project.id, 'add-files')">
 						<FileIcon aria-hidden="true" />
diff --git a/apps/frontend/src/pages/[type]/[id]/versions.vue b/apps/frontend/src/pages/[type]/[id]/versions.vue
index c0f80b6d26..3eb1de8956 100644
--- a/apps/frontend/src/pages/[type]/[id]/versions.vue
+++ b/apps/frontend/src/pages/[type]/[id]/versions.vue
@@ -80,14 +80,14 @@
 						class="hover:!bg-button-bg"
 						:dropdown-id="`${baseDropdownId}-edit-${version.id}`"
 						:options="[
-							{
-								id: 'edit-details',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
-							},
 							{
 								id: 'edit-metadata',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
 							},
+							{
+								id: 'edit-details',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
+							},
 							{
 								id: 'edit-files',
 								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-files'),
@@ -171,13 +171,13 @@
 							},
 							{ divider: true, shown: !!currentMember },
 							{
-								id: 'edit-details',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
+								id: 'edit-metadata',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
 								shown: !!currentMember,
 							},
 							{
-								id: 'edit-metadata',
-								action: () => handleOpenEditVersionModal(version.id, project.id, 'metadata'),
+								id: 'edit-details',
+								action: () => handleOpenEditVersionModal(version.id, project.id, 'add-details'),
 								shown: !!currentMember,
 							},
 							{

From 02916cfbb177a6097ab925d1bedfa13a9d907263 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 19:57:14 -0700
Subject: [PATCH 47/83] fix remove button spacing

---
 .../ui/create-project-version/components/AddedDependencyRow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
index c05602d122..3611341551 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
@@ -24,7 +24,7 @@
 
 		<div v-if="!hideRemove" class="flex items-center justify-end gap-1">
 			<ButtonStyled size="standard" :circular="true">
-				<button aria-label="Remove file" class="!shadow-none" @click="emitRemove">
+				<button aria-label="Remove file" class="-mr-2 !shadow-none" @click="emitRemove">
 					<XIcon aria-hidden="true" />
 				</button>
 			</ButtonStyled>

From eb7c0a0334eaa8193fa71528748592d5ee77bf40 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 20:18:27 -0700
Subject: [PATCH 48/83] do not allow duplicate suggested dependencies

---
 .../providers/version/manage-version-modal.ts | 64 ++++++++-----------
 1 file changed, 27 insertions(+), 37 deletions(-)

diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index 967b34dc3b..c1dc258075 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -212,16 +212,21 @@ export function createManageVersionContext(
 	// Computed state
 	const editingVersion = computed(() => Boolean(draftVersion.value.version_id))
 
-	const visibleSuggestedDependencies = computed<SuggestedDependency[]>(() =>
-		suggestedDependencies.value
-			.filter(
-				(dep) =>
-					!draftVersion.value.dependencies?.some(
-						(d) => d.project_id === dep.project_id && d.version_id === dep.version_id,
-					),
-			)
-			.sort((a, b) => (a.name || '').localeCompare(b.name || '')),
-	)
+	const visibleSuggestedDependencies = computed<SuggestedDependency[]>(() => {
+		const seen = new Set<string>()
+		return suggestedDependencies.value
+			.filter((dep) => {
+				const key = `${dep.project_id ?? ''}:${dep.version_id ?? ''}`
+				if (seen.has(key)) return false
+				seen.add(key)
+				return !draftVersion.value.dependencies?.some(
+					(d) =>
+						d.project_id === dep.project_id ||
+						(d.project_id === dep.project_id && d.version_id === dep.version_id),
+				)
+			})
+			.sort((a, b) => (a.name || '').localeCompare(b.name || ''))
+	})
 
 	// Version management methods
 	function newDraftVersion(
@@ -454,28 +459,15 @@ export function createManageVersionContext(
 			const deps = version.dependencies || []
 
 			for (const dep of deps) {
-				if (dep?.project_id) {
-					try {
-						await getProject(dep.project_id)
-					} catch (error: any) {
-						addNotification({
-							title: 'An error occurred',
-							text: error.data ? error.data.description : error,
-							type: 'error',
-						})
-					}
-				}
-
-				if (dep?.version_id) {
-					try {
-						await getVersion(dep.version_id)
-					} catch (error: any) {
-						addNotification({
-							title: 'An error occurred',
-							text: error.data ? error.data.description : error,
-							type: 'error',
-						})
-					}
+				try {
+					if (dep?.project_id) await getProject(dep.project_id)
+					if (dep?.version_id) await getVersion(dep.version_id)
+				} catch (error: any) {
+					addNotification({
+						title: 'Could not fetch dependency data',
+						text: error.data ? error.data.description : error,
+						type: 'error',
+					})
 				}
 			}
 			projectsFetchLoading.value = false
@@ -511,9 +503,7 @@ export function createManageVersionContext(
 			try {
 				suggestedDependencies.value = []
 
-				if (!loaders?.length) {
-					return
-				}
+				if (!loaders?.length) return
 
 				const projectId = draftVersion.value.project_id
 				if (!projectId) return
@@ -557,7 +547,7 @@ export function createManageVersionContext(
 				}
 			} catch (error: any) {
 				addNotification({
-					title: 'An error occurred',
+					title: 'Could not fetch suggested dependencies',
 					text: error.data ? error.data.description : error,
 					type: 'error',
 				})
@@ -592,7 +582,7 @@ export function createManageVersionContext(
 			onSave?.()
 		} catch (err: any) {
 			addNotification({
-				title: 'An error occurred',
+				title: 'Could not create project version',
 				text: err.data ? err.data.description : err,
 				type: 'error',
 			})

From 47712526cc396e853e5e4764094173966581d203 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 21:54:43 -0700
Subject: [PATCH 49/83] fix version detection for fabric minecraft version
 semvar

---
 apps/frontend/src/helpers/infer.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/helpers/infer.js b/apps/frontend/src/helpers/infer.js
index c7253dee04..101944e64b 100644
--- a/apps/frontend/src/helpers/infer.js
+++ b/apps/frontend/src/helpers/infer.js
@@ -174,9 +174,11 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 			return []
 		}
 		const ranges = Array.isArray(range) ? range : [range]
+		// Normalize ranges: strip trailing hyphens from version numbers used by Fabric for prerelease matching (e.g., ">=1.21.11-" -> ">=1.21.11")
+		const normalizedRanges = ranges.map((r) => r.replace(/(\d)-(\s|$)/g, '$1$2'))
 		return gameVersions.filter((version) => {
 			const semverVersion = version.split('.').length === 2 ? `${version}.0` : version // add patch version if missing (e.g. 1.16 -> 1.16.0)
-			return ranges.some((v) => satisfies(semverVersion, v))
+			return normalizedRanges.some((v) => satisfies(semverVersion, v))
 		})
 	}
 

From 7f8405b827d48e0768067fbbc2b2d2d6b44fb470 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 6 Jan 2026 22:23:57 -0700
Subject: [PATCH 50/83] better verion number detection based on filename

---
 apps/frontend/src/helpers/infer.js | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/apps/frontend/src/helpers/infer.js b/apps/frontend/src/helpers/infer.js
index 101944e64b..87aee37451 100644
--- a/apps/frontend/src/helpers/infer.js
+++ b/apps/frontend/src/helpers/infer.js
@@ -133,30 +133,20 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 
 	/**
 	 * Extracts version number from a filename.
-	 * Handles patterns like:
-	 * - "Bare Bones 1.21.11.zip" -> "1.21.11"
-	 * - "FA+All_Extensions-v1.7.zip" -> "1.7"
-	 * - "FreshAnimations_v1.10.3.zip" -> "1.10.3"
-	 * - "LowOnFire v1.21.1158.zip" -> "1.21.1158"
-	 * - "Dramatic Skys Demo 1.5.3.36.2.zip" -> "1.5.3.36.2"
 	 */
 	function extractVersionFromFilename(filename) {
 		if (!filename) return null
 
 		// Remove file extension
-		const baseName = filename.replace(/\.(zip|jar)$/i, '')
+		let baseName = filename.replace(/\.(zip|jar)$/i, '')
+
+		// Remove explicit MC version markers: mc followed by version (e.g., +mc1.21.11, -mc1.21, _mc1.21.4)
+		baseName = baseName.replace(/[+_-]mc\d+\.\d+(?:\.\d+)?/gi, '')
 
-		// Try to match version patterns:
-		// 1. "v" followed by version number (v1.2.3)
-		// 2. Version number at the end after separator (space, hyphen, underscore)
-		// Pattern matches version-like strings: digits separated by dots, possibly with additional segments
 		const versionPatterns = [
-			// Match "v1.2.3" or "V1.2.3" style versions
-			/[_\-\s]v(\d+(?:\.\d+)*(?:\.\d+)?)$/i,
-			// Match version at end after space/separator: "Name 1.2.3"
-			/[_\-\s](\d+(?:\.\d+)+)$/,
-			// Match version with 'v' anywhere: "Name-v1.2.3-extra" (less strict)
-			/[_\-\s]v(\d+(?:\.\d+)*)/i,
+			/[_\-\s]v(\d+(?:\.\d+)*)/i, // Match version with 'v' anywhere: "Name-v1.2.3-extra" (less strict)
+			/[_\-\s]r(\d+(?:\.\d+)*)/i, // Match version with 'r' anywhere: "Name-r1.2.3-extra" (less strict)
+			/[_\-\s](\d+(?:\.\d+)+)$/, // Match version at end after space/separator: "Name 1.2.3"
 		]
 
 		for (const pattern of versionPatterns) {

From 5d0499fb048140c1546dfc4fdd6f4ac62abddd6d Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 08:56:42 -0700
Subject: [PATCH 51/83] show resource pack loader but uneditable

---
 .../stages/MetadataStage.vue                  | 84 ++++++++++---------
 .../providers/version/manage-version-modal.ts |  5 --
 .../providers/version/stages/loaders-stage.ts |  1 -
 3 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 285a7e5b30..79155dd736 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -33,50 +33,54 @@
 			</div>
 		</div>
 
-		<template v-if="!noLoadersProject">
-			<div class="flex flex-col gap-1">
-				<div class="flex items-center justify-between">
-					<span class="font-semibold text-contrast">
-						{{ usingDetectedLoaders ? 'Detected loaders' : 'Loaders' }}
-					</span>
+		<div class="flex flex-col gap-1">
+			<div class="flex items-center justify-between">
+				<span class="font-semibold text-contrast">
+					{{ usingDetectedLoaders ? 'Detected loaders' : 'Loaders' }}
+				</span>
 
-					<ButtonStyled type="transparent" size="standard">
-						<button
-							v-tooltip="isModpack ? 'Modpack versions cannot be edited' : undefined"
-							:disabled="isModpack"
-							@click="editLoaders"
-						>
-							<EditIcon />
-							Edit
-						</button>
-					</ButtonStyled>
-				</div>
+				<ButtonStyled type="transparent" size="standard">
+					<button
+						v-tooltip="
+							isModpack
+								? 'Modpack loaders cannot be edited'
+								: isResourcePack
+									? 'Resource pack loaders cannot be edited'
+									: undefined
+						"
+						:disabled="isModpack || isResourcePack"
+						@click="editLoaders"
+					>
+						<EditIcon />
+						Edit
+					</button>
+				</ButtonStyled>
+			</div>
 
-				<div
-					class="flex flex-col gap-1.5 gap-y-4 rounded-xl border border-solid border-surface-5 p-3 py-4"
-				>
-					<div class="flex flex-wrap gap-2">
-						<template
-							v-for="loader in draftVersionLoaders.map((selectedLoader) =>
-								loaders.find((loader) => selectedLoader === loader.name),
-							)"
+			<div
+				class="flex flex-col gap-1.5 gap-y-4 rounded-xl border border-solid border-surface-5 p-3 py-4"
+			>
+				<div class="flex flex-wrap gap-2">
+					<template
+						v-for="loader in draftVersionLoaders.map((selectedLoader) =>
+							loaders.find((loader) => selectedLoader === loader.name),
+						)"
+					>
+						<TagItem
+							v-if="loader"
+							:key="`loader-${loader.name}`"
+							class="border !border-solid border-surface-5 hover:no-underline"
+							:style="`--_color: var(--color-platform-${loader.name})`"
 						>
-							<TagItem
-								v-if="loader"
-								:key="`loader-${loader.name}`"
-								class="border !border-solid border-surface-5 hover:no-underline"
-								:style="`--_color: var(--color-platform-${loader.name})`"
-							>
-								<div v-html="loader.icon"></div>
-								{{ formatCategory(loader.name) }}
-							</TagItem>
-						</template>
-
-						<span v-if="!draftVersion.loaders.length">No loaders selected.</span>
-					</div>
+							<div v-html="loader.icon"></div>
+							{{ formatCategory(loader.name) }}
+						</TagItem>
+					</template>
+
+					<span v-if="!draftVersion.loaders.length">No loaders selected.</span>
 				</div>
 			</div>
-		</template>
+		</div>
 
 		<div class="flex flex-col gap-1">
 			<div class="flex items-center justify-between">
@@ -200,7 +204,6 @@ const {
 	draftVersion,
 	inferredVersionData,
 	projectType,
-	noLoadersProject,
 	noEnvironmentProject,
 	noDependenciesProject,
 	modal,
@@ -212,6 +215,7 @@ const {
 const generatedState = useGeneratedState()
 const loaders = computed(() => generatedState.value.loaders)
 const isModpack = computed(() => projectType.value === 'modpack')
+const isResourcePack = computed(() => projectType.value === 'resourcepack')
 
 const draftVersionLoaders = computed(() =>
 	[
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index c1dc258075..a767fbd484 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -90,7 +90,6 @@ export interface ManageVersionContextValue {
 
 	// Computed state
 	editingVersion: ComputedRef<boolean>
-	noLoadersProject: ComputedRef<boolean>
 	noEnvironmentProject: ComputedRef<boolean>
 	noDependenciesProject: ComputedRef<boolean>
 
@@ -336,9 +335,6 @@ export function createManageVersionContext(
 	}
 
 	// Stage visibility computeds (inlined)
-	const noLoadersProject = computed(
-		() => draftVersion.value.loaders.length === 1 && draftVersion.value.loaders[0] === 'minecraft',
-	)
 	const noEnvironmentProject = computed(
 		() => projectType.value !== 'mod' && projectType.value !== 'modpack',
 	)
@@ -722,7 +718,6 @@ export function createManageVersionContext(
 
 		// Computed
 		editingVersion,
-		noLoadersProject,
 		noEnvironmentProject,
 		noDependenciesProject,
 
diff --git a/apps/frontend/src/providers/version/stages/loaders-stage.ts b/apps/frontend/src/providers/version/stages/loaders-stage.ts
index 9ff7013c61..23720f5ead 100644
--- a/apps/frontend/src/providers/version/stages/loaders-stage.ts
+++ b/apps/frontend/src/providers/version/stages/loaders-stage.ts
@@ -11,7 +11,6 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	stageContent: markRaw(LoadersStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit loaders' : 'Loaders'),
 	skip: (ctx) =>
-		ctx.noLoadersProject.value ||
 		(ctx.inferredVersionData.value?.loaders?.length ?? 0) > 0 ||
 		!ctx.primaryFile.value ||
 		ctx.editingVersion.value,

From 9f5761cf1091c79345a54f097ef1eef659f7c6c2 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 11:01:58 -0700
Subject: [PATCH 52/83] remove vanilla shader detection

---
 apps/frontend/src/helpers/infer.js | 30 +++++-------------------------
 1 file changed, 5 insertions(+), 25 deletions(-)

diff --git a/apps/frontend/src/helpers/infer.js b/apps/frontend/src/helpers/infer.js
index 87aee37451..d28de3909f 100644
--- a/apps/frontend/src/helpers/infer.js
+++ b/apps/frontend/src/helpers/infer.js
@@ -544,42 +544,22 @@ export const inferVersionInfo = async function (rawFile, project, gameVersions)
 			// Check for assets/ directory (resource pack) or data/ directory (data pack)
 			const hasAssetsDir = zip.file(/^assets\//)?.[0] !== undefined
 			const hasDataDir = zip.file(/^data\//)?.[0] !== undefined
-
-			// Detect vanilla shaders
-			const hasVanillaShaders = await (async () => {
-				// Check for assets/*/shaders directory
-				const shaderDirs = zip.file(/^assets\/[^/]+\/shaders\//)
-				if (shaderDirs && shaderDirs.length > 0) {
-					return true
-				}
-				// Check for shader files (.fsh, .vsh, .glsl)
-				const shaderFiles = zip.file(/\.(fsh|vsh|glsl)$/)
-				return shaderFiles && shaderFiles.length > 0
-			})()
+			const hasZipExtension = rawFile.name.toLowerCase().endsWith('.zip')
 
 			const loaders = []
 			let newGameVersions = []
 
 			// Data pack detection: has data/ directory
-			if (
-				hasDataDir &&
-				(project.actualProjectType === 'mod' || project.actualProjectType === 'datapack')
-			) {
+			if (hasDataDir && hasZipExtension) {
 				loaders.push('datapack')
 				newGameVersions = getGameVersionsFromPackMeta(metadata, DATA_PACK_FORMATS)
 			}
 			// Resource pack detection: has assets/ directory
-			else if (
-				hasAssetsDir &&
-				(project.actualProjectType === 'resourcepack' || project.actualProjectType === 'shader')
-			) {
-				if (hasVanillaShaders && project.actualProjectType === 'shader') {
-					loaders.push('vanilla')
-				} else {
-					loaders.push('minecraft')
-				}
+			else if (hasAssetsDir && hasZipExtension) {
+				loaders.push('minecraft')
 				newGameVersions = getGameVersionsFromPackMeta(metadata, RESOURCE_PACK_FORMATS)
 			}
+
 			// Fallback to old behavior based on project type
 			else if (project.actualProjectType === 'mod') {
 				loaders.push('datapack')

From 50b9e3f4f7a97c17ce92fab1378e0105c18a16de Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 11:45:46 -0700
Subject: [PATCH 53/83] refactor: break up large infer.js into ts and modules

---
 apps/frontend/package.json                    |   2 +
 apps/frontend/src/helpers/infer.js            | 773 ------------------
 apps/frontend/src/helpers/infer/constants.ts  | 111 +++
 apps/frontend/src/helpers/infer/index.ts      |   4 +
 apps/frontend/src/helpers/infer/infer.ts      | 114 +++
 .../src/helpers/infer/loader-parsers.ts       | 260 ++++++
 .../src/helpers/infer/multi-file-detectors.ts | 143 ++++
 .../src/helpers/infer/pack-parsers.ts         | 162 ++++
 .../src/helpers/infer/version-ranges.ts       |  89 ++
 .../src/helpers/infer/version-utils.ts        |  56 ++
 .../pages/[type]/[id]/version/[version].vue   |   2 +-
 pnpm-lock.yaml                                | 240 +++---
 12 files changed, 1038 insertions(+), 918 deletions(-)
 delete mode 100644 apps/frontend/src/helpers/infer.js
 create mode 100644 apps/frontend/src/helpers/infer/constants.ts
 create mode 100644 apps/frontend/src/helpers/infer/index.ts
 create mode 100644 apps/frontend/src/helpers/infer/infer.ts
 create mode 100644 apps/frontend/src/helpers/infer/loader-parsers.ts
 create mode 100644 apps/frontend/src/helpers/infer/multi-file-detectors.ts
 create mode 100644 apps/frontend/src/helpers/infer/pack-parsers.ts
 create mode 100644 apps/frontend/src/helpers/infer/version-ranges.ts
 create mode 100644 apps/frontend/src/helpers/infer/version-utils.ts

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 2e90cdf980..3ebbb72635 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -19,7 +19,9 @@
 		"@nuxtjs/i18n": "^9.0.0",
 		"@types/dompurify": "^3.0.5",
 		"@types/iso-3166-2": "^1.0.4",
+		"@types/js-yaml": "^4.0.9",
 		"@types/node": "^20.1.0",
+		"@types/semver": "^7.7.1",
 		"autoprefixer": "^10.4.19",
 		"glob": "^10.2.7",
 		"nuxt": "^3.20.2",
diff --git a/apps/frontend/src/helpers/infer.js b/apps/frontend/src/helpers/infer.js
deleted file mode 100644
index d28de3909f..0000000000
--- a/apps/frontend/src/helpers/infer.js
+++ /dev/null
@@ -1,773 +0,0 @@
-import { parse as parseTOML } from '@ltd/j-toml'
-import yaml from 'js-yaml'
-import JSZip from 'jszip'
-import { satisfies } from 'semver'
-
-// Pack format to Minecraft version mappings
-// See: https://minecraft.wiki/w/Pack_format
-
-// Resource pack format history (full table including development versions)
-const RESOURCE_PACK_FORMATS = {
-	1: { min: '1.6.1', max: '1.8.9' },
-	2: { min: '1.9', max: '1.10.2' },
-	3: { min: '1.11', max: '1.12.2' },
-	4: { min: '1.13', max: '1.14.4' },
-	5: { min: '1.15', max: '1.16.1' },
-	6: { min: '1.16.2', max: '1.16.5' },
-	7: { min: '1.17', max: '1.17.1' },
-	8: { min: '1.18', max: '1.18.2' },
-	9: { min: '1.19', max: '1.19.2' },
-	11: { min: '22w42a', max: '22w44a' },
-	12: { min: '1.19.3', max: '1.19.3' },
-	13: { min: '1.19.4', max: '1.19.4' },
-	14: { min: '23w14a', max: '23w16a' },
-	15: { min: '1.20', max: '1.20.1' },
-	16: { min: '23w31a', max: '23w31a' },
-	17: { min: '23w32a', max: '1.20.2-pre1' },
-	18: { min: '1.20.2', max: '1.20.2' },
-	19: { min: '23w42a', max: '23w42a' },
-	20: { min: '23w43a', max: '23w44a' },
-	21: { min: '23w45a', max: '23w46a' },
-	22: { min: '1.20.3', max: '1.20.4' },
-	24: { min: '24w03a', max: '24w04a' },
-	25: { min: '24w05a', max: '24w05b' },
-	26: { min: '24w06a', max: '24w07a' },
-	28: { min: '24w09a', max: '24w10a' },
-	29: { min: '24w11a', max: '24w11a' },
-	30: { min: '24w12a', max: '24w12a' },
-	31: { min: '24w13a', max: '1.20.5-pre3' },
-	32: { min: '1.20.5', max: '1.20.6' },
-	33: { min: '24w18a', max: '24w20a' },
-	34: { min: '1.21', max: '1.21.1' },
-	35: { min: '24w33a', max: '24w33a' },
-	36: { min: '24w34a', max: '24w35a' },
-	37: { min: '24w36a', max: '24w36a' },
-	38: { min: '24w37a', max: '24w37a' },
-	39: { min: '24w38a', max: '24w39a' },
-	40: { min: '24w40a', max: '24w40a' },
-	41: { min: '1.21.2-pre1', max: '1.21.2-pre2' },
-	42: { min: '1.21.2', max: '1.21.3' },
-	43: { min: '24w44a', max: '24w44a' },
-	44: { min: '24w45a', max: '24w45a' },
-	45: { min: '24w46a', max: '24w46a' },
-	46: { min: '1.21.4', max: '1.21.4' },
-}
-
-// Data pack format history (full table including development versions)
-const DATA_PACK_FORMATS = {
-	4: { min: '1.13', max: '1.14.4' },
-	5: { min: '1.15', max: '1.16.1' },
-	6: { min: '1.16.2', max: '1.16.5' },
-	7: { min: '1.17', max: '1.17.1' },
-	8: { min: '1.18', max: '1.18.1' },
-	9: { min: '1.18.2', max: '1.18.2' },
-	10: { min: '1.19', max: '1.19.3' },
-	11: { min: '23w03a', max: '23w05a' },
-	12: { min: '1.19.4', max: '1.19.4' },
-	13: { min: '23w12a', max: '23w14a' },
-	14: { min: '23w16a', max: '23w17a' },
-	15: { min: '1.20', max: '1.20.1' },
-	16: { min: '23w31a', max: '23w31a' },
-	17: { min: '23w32a', max: '1.20.2-pre1' },
-	18: { min: '1.20.2', max: '1.20.2' },
-	19: { min: '23w40a', max: '23w40a' },
-	20: { min: '23w41a', max: '23w41a' },
-	21: { min: '23w42a', max: '23w42a' },
-	22: { min: '23w43a', max: '23w44a' },
-	23: { min: '23w45a', max: '23w46a' },
-	24: { min: '1.20.3-pre1', max: '1.20.3-pre1' },
-	25: { min: '1.20.3-pre2', max: '1.20.3-pre4' },
-	26: { min: '1.20.3', max: '1.20.4' },
-	27: { min: '23w51a', max: '23w51b' },
-	28: { min: '24w03a', max: '24w04a' },
-	29: { min: '24w05a', max: '24w05b' },
-	30: { min: '24w06a', max: '24w06a' },
-	31: { min: '24w07a', max: '24w07a' },
-	32: { min: '24w09a', max: '24w10a' },
-	33: { min: '24w11a', max: '24w11a' },
-	34: { min: '24w12a', max: '24w12a' },
-	35: { min: '24w13a', max: '24w13a' },
-	36: { min: '24w14a', max: '24w14a' },
-	37: { min: '1.20.5-pre1', max: '1.20.5-pre1' },
-	38: { min: '1.20.5-pre2', max: '1.20.5-pre3' },
-	39: { min: '1.20.5-pre4', max: '1.20.5-rc3' },
-	40: { min: '1.20.5-rc4', max: '1.20.5-rc4' },
-	41: { min: '1.20.5', max: '1.20.6' },
-	42: { min: '24w18a', max: '24w19b' },
-	43: { min: '24w20a', max: '24w20a' },
-	44: { min: '24w21a', max: '24w21b' },
-	45: { min: '1.21-pre1', max: '1.21-pre1' },
-	46: { min: '1.21-pre2', max: '1.21-pre4' },
-	47: { min: '1.21-rc1', max: '1.21-rc1' },
-	48: { min: '1.21', max: '1.21.1' },
-	49: { min: '24w33a', max: '24w33a' },
-	50: { min: '24w34a', max: '24w35a' },
-	51: { min: '24w36a', max: '24w36a' },
-	52: { min: '24w37a', max: '24w37a' },
-	53: { min: '24w38a', max: '24w38a' },
-	54: { min: '24w39a', max: '24w39a' },
-	55: { min: '24w40a', max: '24w40a' },
-	56: { min: '1.21.2-pre1', max: '1.21.2-pre2' },
-	57: { min: '1.21.2', max: '1.21.3' },
-	58: { min: '24w44a', max: '24w44a' },
-	59: { min: '24w45a', max: '24w45a' },
-	60: { min: '24w46a', max: '24w46a' },
-	61: { min: '1.21.4', max: '1.21.4' },
-}
-
-export const inferVersionInfo = async function (rawFile, project, gameVersions) {
-	function versionType(number) {
-		if (!number) return 'release'
-		if (number.includes('alpha')) {
-			return 'alpha'
-		} else if (
-			number.includes('beta') ||
-			number.match(/[^A-z](rc)[^A-z]/) || // includes `rc`
-			number.match(/[^A-z](pre)[^A-z]/) // includes `pre`
-		) {
-			return 'beta'
-		} else {
-			return 'release'
-		}
-	}
-
-	/**
-	 * Extracts version number from a filename.
-	 */
-	function extractVersionFromFilename(filename) {
-		if (!filename) return null
-
-		// Remove file extension
-		let baseName = filename.replace(/\.(zip|jar)$/i, '')
-
-		// Remove explicit MC version markers: mc followed by version (e.g., +mc1.21.11, -mc1.21, _mc1.21.4)
-		baseName = baseName.replace(/[+_-]mc\d+\.\d+(?:\.\d+)?/gi, '')
-
-		const versionPatterns = [
-			/[_\-\s]v(\d+(?:\.\d+)*)/i, // Match version with 'v' anywhere: "Name-v1.2.3-extra" (less strict)
-			/[_\-\s]r(\d+(?:\.\d+)*)/i, // Match version with 'r' anywhere: "Name-r1.2.3-extra" (less strict)
-			/[_\-\s](\d+(?:\.\d+)+)$/, // Match version at end after space/separator: "Name 1.2.3"
-		]
-
-		for (const pattern of versionPatterns) {
-			const match = baseName.match(pattern)
-			if (match && match[1]) {
-				return match[1]
-			}
-		}
-
-		return null
-	}
-
-	function getGameVersionsMatchingSemverRange(range, gameVersions) {
-		if (!range) {
-			return []
-		}
-		const ranges = Array.isArray(range) ? range : [range]
-		// Normalize ranges: strip trailing hyphens from version numbers used by Fabric for prerelease matching (e.g., ">=1.21.11-" -> ">=1.21.11")
-		const normalizedRanges = ranges.map((r) => r.replace(/(\d)-(\s|$)/g, '$1$2'))
-		return gameVersions.filter((version) => {
-			const semverVersion = version.split('.').length === 2 ? `${version}.0` : version // add patch version if missing (e.g. 1.16 -> 1.16.0)
-			return normalizedRanges.some((v) => satisfies(semverVersion, v))
-		})
-	}
-
-	function getGameVersionsMatchingMavenRange(range, gameVersions) {
-		if (!range) {
-			return []
-		}
-		const ranges = []
-
-		while (range.startsWith('[') || range.startsWith('(')) {
-			let index = range.indexOf(')')
-			const index2 = range.indexOf(']')
-			if (index === -1 || (index2 !== -1 && index2 < index)) {
-				index = index2
-			}
-			if (index === -1) break
-			ranges.push(range.substring(0, index + 1))
-			range = range.substring(index + 1).trim()
-			if (range.startsWith(',')) {
-				range = range.substring(1).trim()
-			}
-		}
-
-		if (range) {
-			ranges.push(range)
-		}
-
-		const LESS_THAN_EQUAL = /^\(,(.*)]$/
-		const LESS_THAN = /^\(,(.*)\)$/
-		const EQUAL = /^\[(.*)]$/
-		const GREATER_THAN_EQUAL = /^\[(.*),\)$/
-		const GREATER_THAN = /^\((.*),\)$/
-		const BETWEEN = /^\((.*),(.*)\)$/
-		const BETWEEN_EQUAL = /^\[(.*),(.*)]$/
-		const BETWEEN_LESS_THAN_EQUAL = /^\((.*),(.*)]$/
-		const BETWEEN_GREATER_THAN_EQUAL = /^\[(.*),(.*)\)$/
-
-		const semverRanges = []
-
-		for (const range of ranges) {
-			let result
-			if ((result = range.match(LESS_THAN_EQUAL))) {
-				semverRanges.push(`<=${result[1]}`)
-			} else if ((result = range.match(LESS_THAN))) {
-				semverRanges.push(`<${result[1]}`)
-			} else if ((result = range.match(EQUAL))) {
-				semverRanges.push(`${result[1]}`)
-			} else if ((result = range.match(GREATER_THAN_EQUAL))) {
-				semverRanges.push(`>=${result[1]}`)
-			} else if ((result = range.match(GREATER_THAN))) {
-				semverRanges.push(`>${result[1]}`)
-			} else if ((result = range.match(BETWEEN))) {
-				semverRanges.push(`>${result[1]} <${result[2]}`)
-			} else if ((result = range.match(BETWEEN_EQUAL))) {
-				semverRanges.push(`>=${result[1]} <=${result[2]}`)
-			} else if ((result = range.match(BETWEEN_LESS_THAN_EQUAL))) {
-				semverRanges.push(`>${result[1]} <=${result[2]}`)
-			} else if ((result = range.match(BETWEEN_GREATER_THAN_EQUAL))) {
-				semverRanges.push(`>=${result[1]} <${result[2]}`)
-			}
-		}
-		return getGameVersionsMatchingSemverRange(semverRanges, gameVersions)
-	}
-
-	const simplifiedGameVersions = gameVersions
-		.filter((it) => it.version_type === 'release')
-		.map((it) => it.version)
-
-	const inferFunctions = {
-		// NeoForge
-		'META-INF/neoforge.mods.toml': (file) => {
-			const metadata = parseTOML(file, { joiner: '\n' })
-			if (!metadata.mods || metadata.mods.length === 0) {
-				return {}
-			}
-
-			const neoForgeDependency = Object.values(metadata.dependencies)
-				.flat()
-				.find((dependency) => dependency.modId === 'neoforge')
-			if (!neoForgeDependency) {
-				return {}
-			}
-
-			// https://docs.neoforged.net/docs/gettingstarted/versioning/#neoforge
-			const mcVersionRange = neoForgeDependency.versionRange
-				.replace('-beta', '')
-				.replace(/(\d+)(?:\.(\d+))?(?:\.(\d+)?)?/g, (_match, major, minor) => {
-					return `1.${major}${minor ? '.' + minor : ''}`
-				})
-			const gameVersions = getGameVersionsMatchingMavenRange(mcVersionRange, simplifiedGameVersions)
-
-			const versionNum = metadata.mods[0].version
-			return {
-				name: `${project.title} ${versionNum}`,
-				version_number: versionNum,
-				loaders: ['neoforge'],
-				version_type: versionType(versionNum),
-				game_versions: gameVersions,
-			}
-		},
-		// Forge 1.13+
-		'META-INF/mods.toml': async (file, zip) => {
-			const metadata = parseTOML(file, { joiner: '\n' })
-
-			if (metadata.mods && metadata.mods.length > 0) {
-				let versionNum = metadata.mods[0].version
-
-				// ${file.jarVersion} -> Implementation-Version from manifest
-				const manifestFile = zip.file('META-INF/MANIFEST.MF')
-				if (metadata.mods[0].version.includes('${file.jarVersion}') && manifestFile !== null) {
-					const manifestText = await manifestFile.async('text')
-					const regex = /Implementation-Version: (.*)$/m
-					const match = manifestText.match(regex)
-					if (match) {
-						versionNum = versionNum.replace('${file.jarVersion}', match[1])
-					}
-				}
-
-				let gameVersions = []
-				const mcDependencies = Object.values(metadata.dependencies)
-					.flat()
-					.filter((dependency) => dependency.modId === 'minecraft')
-
-				if (mcDependencies.length > 0) {
-					gameVersions = getGameVersionsMatchingMavenRange(
-						mcDependencies[0].versionRange,
-						simplifiedGameVersions,
-					)
-				}
-
-				return {
-					name: `${project.title} ${versionNum}`,
-					version_number: versionNum,
-					version_type: versionType(versionNum),
-					loaders: ['forge'],
-					game_versions: gameVersions,
-				}
-			} else {
-				return {}
-			}
-		},
-		// Old Forge
-		'mcmod.info': (file) => {
-			const metadata = JSON.parse(file)
-
-			return {
-				name: metadata.version ? `${project.title} ${metadata.version}` : '',
-				version_number: metadata.version,
-				version_type: versionType(metadata.version),
-				loaders: ['forge'],
-				game_versions: simplifiedGameVersions.filter((version) =>
-					version.startsWith(metadata.mcversion),
-				),
-			}
-		},
-		// Fabric
-		'fabric.mod.json': (file) => {
-			const metadata = JSON.parse(file)
-
-			return {
-				name: `${project.title} ${metadata.version}`,
-				version_number: metadata.version,
-				loaders: ['fabric'],
-				version_type: versionType(metadata.version),
-				game_versions: metadata.depends
-					? getGameVersionsMatchingSemverRange(metadata.depends.minecraft, simplifiedGameVersions)
-					: [],
-			}
-		},
-		// Quilt
-		'quilt.mod.json': (file) => {
-			const metadata = JSON.parse(file)
-
-			return {
-				name: `${project.title} ${metadata.quilt_loader.version}`,
-				version_number: metadata.quilt_loader.version,
-				loaders: ['quilt'],
-				version_type: versionType(metadata.quilt_loader.version),
-				game_versions: metadata.quilt_loader.depends
-					? getGameVersionsMatchingSemverRange(
-							metadata.quilt_loader.depends.find((x) => x.id === 'minecraft')
-								? metadata.quilt_loader.depends.find((x) => x.id === 'minecraft').versions
-								: [],
-							simplifiedGameVersions,
-						)
-					: [],
-			}
-		},
-		// Bukkit + Other Forks
-		'plugin.yml': (file) => {
-			const metadata = yaml.load(file)
-
-			// Check for Folia support
-			const loaders = []
-			if (metadata['folia-supported'] === true) {
-				loaders.push('folia')
-			}
-			// We don't know which fork of Bukkit users are using otherwise
-
-			return {
-				name: `${project.title} ${metadata.version}`,
-				version_number: metadata.version,
-				version_type: versionType(metadata.version),
-				loaders,
-				game_versions: gameVersions
-					.filter(
-						(x) => x.version.startsWith(metadata['api-version']) && x.version_type === 'release',
-					)
-					.map((x) => x.version),
-			}
-		},
-		// Paper 1.19.3+
-		'paper-plugin.yml': (file) => {
-			const metadata = yaml.load(file)
-
-			return {
-				name: `${project.title} ${metadata.version}`,
-				version_number: metadata.version,
-				version_type: versionType(metadata.version),
-				loaders: ['paper'],
-				game_versions: gameVersions
-					.filter(
-						(x) => x.version.startsWith(metadata['api-version']) && x.version_type === 'release',
-					)
-					.map((x) => x.version),
-			}
-		},
-		// Bungeecord + Waterfall
-		'bungee.yml': (file) => {
-			const metadata = yaml.load(file)
-
-			return {
-				name: `${project.title} ${metadata.version}`,
-				version_number: metadata.version,
-				version_type: versionType(metadata.version),
-				loaders: ['bungeecord'],
-			}
-		},
-		// Velocity
-		'velocity-plugin.json': (file) => {
-			const metadata = JSON.parse(file)
-
-			return {
-				name: `${project.title} ${metadata.version}`,
-				version_number: metadata.version,
-				version_type: versionType(metadata.version),
-				loaders: ['velocity'],
-			}
-		},
-		// Sponge plugin (8+)
-		'META-INF/sponge_plugins.json': (file) => {
-			const metadata = JSON.parse(file)
-			const plugin = metadata.plugins?.[0]
-
-			if (!plugin) {
-				return {}
-			}
-
-			return {
-				name: plugin.version ? `${project.title} ${plugin.version}` : '',
-				version_number: plugin.version,
-				version_type: versionType(plugin.version),
-				loaders: ['sponge'],
-			}
-		},
-		// Modpacks
-		'modrinth.index.json': (file) => {
-			const metadata = JSON.parse(file)
-
-			const loaders = []
-			if ('forge' in metadata.dependencies) {
-				loaders.push('forge')
-			}
-			if ('neoforge' in metadata.dependencies) {
-				loaders.push('neoforge')
-			}
-			if ('fabric-loader' in metadata.dependencies) {
-				loaders.push('fabric')
-			}
-			if ('quilt-loader' in metadata.dependencies) {
-				loaders.push('quilt')
-			}
-
-			return {
-				name: `${project.title} ${metadata.versionId}`,
-				version_number: metadata.versionId,
-				version_type: versionType(metadata.versionId),
-				loaders,
-				game_versions: gameVersions
-					.filter((x) => x.version === metadata.dependencies.minecraft)
-					.map((x) => x.version),
-			}
-		},
-		// Resource Packs + Data Packs
-		'pack.mcmeta': async (file, zip) => {
-			const metadata = JSON.parse(file)
-
-			function getRange(versionA, versionB) {
-				const startingIndex = gameVersions.findIndex((x) => x.version === versionA)
-				const endingIndex = gameVersions.findIndex((x) => x.version === versionB)
-
-				if (startingIndex === -1 || endingIndex === -1) {
-					return []
-				}
-
-				const final = []
-				const filterOnlyRelease = gameVersions[startingIndex]?.version_type === 'release'
-
-				for (let i = startingIndex; i >= endingIndex; i--) {
-					if (gameVersions[i].version_type === 'release' || !filterOnlyRelease) {
-						final.push(gameVersions[i].version)
-					}
-				}
-
-				return final
-			}
-
-			function getVersionsFromPackFormat(packFormat, formatMap) {
-				const mapping = formatMap[packFormat]
-				if (!mapping) {
-					return []
-				}
-				return getRange(mapping.min, mapping.max)
-			}
-
-			function getVersionsFromFormatRange(minFormat, maxFormat, formatMap) {
-				// Find all versions between minFormat and maxFormat
-				const allVersions = []
-				for (let format = minFormat; format <= maxFormat; format++) {
-					const versions = getVersionsFromPackFormat(format, formatMap)
-					for (const version of versions) {
-						if (!allVersions.includes(version)) {
-							allVersions.push(version)
-						}
-					}
-				}
-				return allVersions
-			}
-
-			function getGameVersionsFromPackMeta(packMeta, formatMap) {
-				const pack = packMeta.pack
-				if (!pack) return []
-
-				// Check for supported_formats (array of [min, max] or object with min_inclusive/max_inclusive)
-				if (pack.supported_formats) {
-					if (Array.isArray(pack.supported_formats)) {
-						// Array format: [minFormat, maxFormat]
-						const [minFormat, maxFormat] = pack.supported_formats
-						return getVersionsFromFormatRange(minFormat, maxFormat, formatMap)
-					} else if (typeof pack.supported_formats === 'object') {
-						// Object format: { min_inclusive: X, max_inclusive: Y }
-						const minFormat = pack.supported_formats.min_inclusive
-						const maxFormat = pack.supported_formats.max_inclusive
-						if (minFormat !== undefined && maxFormat !== undefined) {
-							return getVersionsFromFormatRange(minFormat, maxFormat, formatMap)
-						}
-					}
-				}
-
-				// Check for min_format and max_format (older format range spec)
-				if (pack.min_format !== undefined && pack.max_format !== undefined) {
-					return getVersionsFromFormatRange(pack.min_format, pack.max_format, formatMap)
-				}
-
-				// Fall back to pack_format
-				if (pack.pack_format !== undefined) {
-					return getVersionsFromPackFormat(pack.pack_format, formatMap)
-				}
-
-				return []
-			}
-
-			// Check for assets/ directory (resource pack) or data/ directory (data pack)
-			const hasAssetsDir = zip.file(/^assets\//)?.[0] !== undefined
-			const hasDataDir = zip.file(/^data\//)?.[0] !== undefined
-			const hasZipExtension = rawFile.name.toLowerCase().endsWith('.zip')
-
-			const loaders = []
-			let newGameVersions = []
-
-			// Data pack detection: has data/ directory
-			if (hasDataDir && hasZipExtension) {
-				loaders.push('datapack')
-				newGameVersions = getGameVersionsFromPackMeta(metadata, DATA_PACK_FORMATS)
-			}
-			// Resource pack detection: has assets/ directory
-			else if (hasAssetsDir && hasZipExtension) {
-				loaders.push('minecraft')
-				newGameVersions = getGameVersionsFromPackMeta(metadata, RESOURCE_PACK_FORMATS)
-			}
-
-			// Fallback to old behavior based on project type
-			else if (project.actualProjectType === 'mod') {
-				loaders.push('datapack')
-				newGameVersions = getGameVersionsFromPackMeta(metadata, DATA_PACK_FORMATS)
-			} else if (project.actualProjectType === 'resourcepack') {
-				loaders.push('minecraft')
-				newGameVersions = getGameVersionsFromPackMeta(metadata, RESOURCE_PACK_FORMATS)
-			}
-
-			// Try to extract version from filename
-			const versionNum = extractVersionFromFilename(rawFile.name)
-
-			return {
-				name: versionNum ? `${project.title} ${versionNum}` : undefined,
-				version_number: versionNum || undefined,
-				version_type: versionType(versionNum),
-				loaders,
-				game_versions: newGameVersions,
-			}
-		},
-	}
-
-	// Additional detection functions that need to scan multiple files
-	const multiFileInferFunctions = {
-		// Legacy texture pack (pre-1.6.1)
-		legacyTexturePack: async (zip) => {
-			const packTxt = zip.file('pack.txt')
-			if (!packTxt) return null
-
-			// Check for legacy texture pack files/directories
-			const legacyIndicators = [
-				'font.txt',
-				'particles.png',
-				'achievement/',
-				'armor/',
-				'art/',
-				'environment/',
-				'font/',
-				'gui/',
-				'item/',
-				'lang/',
-				'misc/',
-				'mob/',
-				'textures/',
-				'title/',
-			]
-
-			const hasLegacyContent = legacyIndicators.some((indicator) => {
-				if (indicator.endsWith('/')) {
-					return zip.file(new RegExp(`^${indicator}`))?.length > 0
-				}
-				return zip.file(indicator) !== null
-			})
-
-			if (!hasLegacyContent) return null
-
-			// Legacy texture packs are compatible with a1.2.2 to 1.5.2
-			// We'll return versions from 1.0 to 1.5.2 (as older alpha/beta versions may not be in gameVersions)
-			const legacyVersions = gameVersions
-				.filter((v) => {
-					const version = v.version
-					// Match 1.0 through 1.5.2
-					if (version.match(/^1\.[0-4](\.\d+)?$/) || version.match(/^1\.5(\.[0-2])?$/)) {
-						return true
-					}
-					return false
-				})
-				.map((v) => v.version)
-
-			// Try to extract version from filename
-			const versionNum = extractVersionFromFilename(rawFile.name)
-
-			return {
-				name: versionNum ? `${project.title} ${versionNum}` : undefined,
-				version_number: versionNum || undefined,
-				version_type: versionType(versionNum),
-				loaders: ['minecraft'],
-				game_versions: legacyVersions,
-			}
-		},
-
-		// Shader pack (OptiFine/Iris)
-		shaderPack: async (zip) => {
-			const shadersDir = zip.file(/^shaders\//)
-			if (!shadersDir || shadersDir.length === 0) return null
-
-			const loaders = []
-
-			// Check for Iris-specific features in shaders.properties
-			const shaderProps = zip.file('shaders/shaders.properties')
-			if (shaderProps) {
-				const propsText = await shaderProps.async('text')
-				if (
-					propsText.includes('iris.features.required') ||
-					propsText.includes('iris.features.optional')
-				) {
-					loaders.push('iris', 'optifine')
-				}
-			}
-
-			// If no specific loader detected, it could be OptiFine or Iris
-			if (loaders.length === 0) {
-				loaders.push('optifine', 'iris')
-			}
-
-			// Try to extract version from filename
-			const versionNum = extractVersionFromFilename(rawFile.name)
-
-			return {
-				name: versionNum ? `${project.title} ${versionNum}` : undefined,
-				version_number: versionNum || undefined,
-				version_type: versionType(versionNum),
-				loaders,
-				// No reliable way to detect MC versions for shader packs
-				game_versions: [],
-			}
-		},
-
-		// NilLoader mod
-		nilLoaderMod: async (zip) => {
-			const nilModFiles = zip.file(/\.nilmod\.css$/)
-			if (!nilModFiles || nilModFiles.length === 0) return null
-
-			return {
-				loaders: ['nilloader'],
-				game_versions: [],
-			}
-		},
-
-		// Java Agent
-		javaAgent: async (zip) => {
-			const manifest = zip.file('META-INF/MANIFEST.MF')
-			if (!manifest) return null
-
-			const manifestText = await manifest.async('text')
-			if (!manifestText.includes('Premain-Class:')) return null
-
-			return {
-				loaders: ['java-agent'],
-				game_versions: [],
-			}
-		},
-	}
-
-	// Mod loader metadata files that can coexist in a single jar
-	const multiLoaderFiles = [
-		'META-INF/neoforge.mods.toml',
-		'META-INF/mods.toml',
-		'fabric.mod.json',
-		'quilt.mod.json',
-	]
-
-	const zipReader = new JSZip()
-
-	const zip = await zipReader.loadAsync(rawFile)
-
-	// Check for multi-loader jars (mods that support multiple loaders)
-	const detectedLoaderFiles = multiLoaderFiles.filter((fileName) => zip.file(fileName) !== null)
-
-	if (detectedLoaderFiles.length > 1) {
-		// Multi-loader jar detected - combine results
-		const results = []
-		for (const fileName of detectedLoaderFiles) {
-			const file = zip.file(fileName)
-			if (file !== null) {
-				const text = await file.async('text')
-				const result = await inferFunctions[fileName](text, zip)
-				if (result && Object.keys(result).length > 0) {
-					results.push(result)
-				}
-			}
-		}
-
-		if (results.length > 0) {
-			// Merge results: combine loaders, use first valid version info, merge game versions
-			const combinedLoaders = [...new Set(results.flatMap((r) => r.loaders || []))]
-			const allGameVersions = [...new Set(results.flatMap((r) => r.game_versions || []))]
-
-			// Use version info from the first result that has it
-			const primaryResult = results.find((r) => r.version_number) || results[0]
-
-			return {
-				name: primaryResult.name,
-				version_number: primaryResult.version_number,
-				version_type: primaryResult.version_type,
-				loaders: combinedLoaders,
-				game_versions: allGameVersions,
-			}
-		}
-	}
-
-	// Standard single-loader detection
-	for (const fileName in inferFunctions) {
-		const file = zip.file(fileName)
-
-		if (file !== null) {
-			const text = await file.async('text')
-			return inferFunctions[fileName](text, zip)
-		}
-	}
-
-	// Then, try multi-file detection functions
-	for (const funcName in multiFileInferFunctions) {
-		const result = await multiFileInferFunctions[funcName](zip)
-		if (result !== null) {
-			return result
-		}
-	}
-
-	return {}
-}
diff --git a/apps/frontend/src/helpers/infer/constants.ts b/apps/frontend/src/helpers/infer/constants.ts
new file mode 100644
index 0000000000..b9cf2ea59c
--- /dev/null
+++ b/apps/frontend/src/helpers/infer/constants.ts
@@ -0,0 +1,111 @@
+// Pack format to Minecraft version mappings
+// See: https://minecraft.wiki/w/Pack_format
+
+// Resource pack format history (full table including development versions)
+export const RESOURCE_PACK_FORMATS = {
+	1: { min: '1.6.1', max: '1.8.9' },
+	2: { min: '1.9', max: '1.10.2' },
+	3: { min: '1.11', max: '1.12.2' },
+	4: { min: '1.13', max: '1.14.4' },
+	5: { min: '1.15', max: '1.16.1' },
+	6: { min: '1.16.2', max: '1.16.5' },
+	7: { min: '1.17', max: '1.17.1' },
+	8: { min: '1.18', max: '1.18.2' },
+	9: { min: '1.19', max: '1.19.2' },
+	11: { min: '22w42a', max: '22w44a' },
+	12: { min: '1.19.3', max: '1.19.3' },
+	13: { min: '1.19.4', max: '1.19.4' },
+	14: { min: '23w14a', max: '23w16a' },
+	15: { min: '1.20', max: '1.20.1' },
+	16: { min: '23w31a', max: '23w31a' },
+	17: { min: '23w32a', max: '1.20.2-pre1' },
+	18: { min: '1.20.2', max: '1.20.2' },
+	19: { min: '23w42a', max: '23w42a' },
+	20: { min: '23w43a', max: '23w44a' },
+	21: { min: '23w45a', max: '23w46a' },
+	22: { min: '1.20.3', max: '1.20.4' },
+	24: { min: '24w03a', max: '24w04a' },
+	25: { min: '24w05a', max: '24w05b' },
+	26: { min: '24w06a', max: '24w07a' },
+	28: { min: '24w09a', max: '24w10a' },
+	29: { min: '24w11a', max: '24w11a' },
+	30: { min: '24w12a', max: '24w12a' },
+	31: { min: '24w13a', max: '1.20.5-pre3' },
+	32: { min: '1.20.5', max: '1.20.6' },
+	33: { min: '24w18a', max: '24w20a' },
+	34: { min: '1.21', max: '1.21.1' },
+	35: { min: '24w33a', max: '24w33a' },
+	36: { min: '24w34a', max: '24w35a' },
+	37: { min: '24w36a', max: '24w36a' },
+	38: { min: '24w37a', max: '24w37a' },
+	39: { min: '24w38a', max: '24w39a' },
+	40: { min: '24w40a', max: '24w40a' },
+	41: { min: '1.21.2-pre1', max: '1.21.2-pre2' },
+	42: { min: '1.21.2', max: '1.21.3' },
+	43: { min: '24w44a', max: '24w44a' },
+	44: { min: '24w45a', max: '24w45a' },
+	45: { min: '24w46a', max: '24w46a' },
+	46: { min: '1.21.4', max: '1.21.4' },
+}
+
+// Data pack format history (full table including development versions)
+export const DATA_PACK_FORMATS = {
+	4: { min: '1.13', max: '1.14.4' },
+	5: { min: '1.15', max: '1.16.1' },
+	6: { min: '1.16.2', max: '1.16.5' },
+	7: { min: '1.17', max: '1.17.1' },
+	8: { min: '1.18', max: '1.18.1' },
+	9: { min: '1.18.2', max: '1.18.2' },
+	10: { min: '1.19', max: '1.19.3' },
+	11: { min: '23w03a', max: '23w05a' },
+	12: { min: '1.19.4', max: '1.19.4' },
+	13: { min: '23w12a', max: '23w14a' },
+	14: { min: '23w16a', max: '23w17a' },
+	15: { min: '1.20', max: '1.20.1' },
+	16: { min: '23w31a', max: '23w31a' },
+	17: { min: '23w32a', max: '1.20.2-pre1' },
+	18: { min: '1.20.2', max: '1.20.2' },
+	19: { min: '23w40a', max: '23w40a' },
+	20: { min: '23w41a', max: '23w41a' },
+	21: { min: '23w42a', max: '23w42a' },
+	22: { min: '23w43a', max: '23w44a' },
+	23: { min: '23w45a', max: '23w46a' },
+	24: { min: '1.20.3-pre1', max: '1.20.3-pre1' },
+	25: { min: '1.20.3-pre2', max: '1.20.3-pre4' },
+	26: { min: '1.20.3', max: '1.20.4' },
+	27: { min: '23w51a', max: '23w51b' },
+	28: { min: '24w03a', max: '24w04a' },
+	29: { min: '24w05a', max: '24w05b' },
+	30: { min: '24w06a', max: '24w06a' },
+	31: { min: '24w07a', max: '24w07a' },
+	32: { min: '24w09a', max: '24w10a' },
+	33: { min: '24w11a', max: '24w11a' },
+	34: { min: '24w12a', max: '24w12a' },
+	35: { min: '24w13a', max: '24w13a' },
+	36: { min: '24w14a', max: '24w14a' },
+	37: { min: '1.20.5-pre1', max: '1.20.5-pre1' },
+	38: { min: '1.20.5-pre2', max: '1.20.5-pre3' },
+	39: { min: '1.20.5-pre4', max: '1.20.5-rc3' },
+	40: { min: '1.20.5-rc4', max: '1.20.5-rc4' },
+	41: { min: '1.20.5', max: '1.20.6' },
+	42: { min: '24w18a', max: '24w19b' },
+	43: { min: '24w20a', max: '24w20a' },
+	44: { min: '24w21a', max: '24w21b' },
+	45: { min: '1.21-pre1', max: '1.21-pre1' },
+	46: { min: '1.21-pre2', max: '1.21-pre4' },
+	47: { min: '1.21-rc1', max: '1.21-rc1' },
+	48: { min: '1.21', max: '1.21.1' },
+	49: { min: '24w33a', max: '24w33a' },
+	50: { min: '24w34a', max: '24w35a' },
+	51: { min: '24w36a', max: '24w36a' },
+	52: { min: '24w37a', max: '24w37a' },
+	53: { min: '24w38a', max: '24w38a' },
+	54: { min: '24w39a', max: '24w39a' },
+	55: { min: '24w40a', max: '24w40a' },
+	56: { min: '1.21.2-pre1', max: '1.21.2-pre2' },
+	57: { min: '1.21.2', max: '1.21.3' },
+	58: { min: '24w44a', max: '24w44a' },
+	59: { min: '24w45a', max: '24w45a' },
+	60: { min: '24w46a', max: '24w46a' },
+	61: { min: '1.21.4', max: '1.21.4' },
+}
diff --git a/apps/frontend/src/helpers/infer/index.ts b/apps/frontend/src/helpers/infer/index.ts
new file mode 100644
index 0000000000..3a2702ae3a
--- /dev/null
+++ b/apps/frontend/src/helpers/infer/index.ts
@@ -0,0 +1,4 @@
+// Public API exports
+export { inferVersionInfo } from './infer'
+export type { InferredVersionInfo } from './infer'
+export { extractVersionDetailsFromFilename } from './version-utils'
diff --git a/apps/frontend/src/helpers/infer/infer.ts b/apps/frontend/src/helpers/infer/infer.ts
new file mode 100644
index 0000000000..10ec1fef2e
--- /dev/null
+++ b/apps/frontend/src/helpers/infer/infer.ts
@@ -0,0 +1,114 @@
+import JSZip from 'jszip'
+import { createLoaderParsers } from './loader-parsers'
+import { createMultiFileDetectors } from './multi-file-detectors'
+import { createPackParser } from './pack-parsers'
+
+type GameVersion = { version: string; version_type: string }
+type Project = { title: string; actualProjectType?: string }
+type RawFile = File | (Blob & { name: string })
+
+export interface InferredVersionInfo {
+	name?: string
+	version_number?: string
+	version_type?: 'alpha' | 'beta' | 'release'
+	loaders?: string[]
+	game_versions?: string[]
+}
+
+/**
+ * Main function to infer version information from a file.
+ * Analyzes mod loaders, packs, and other Minecraft-related file formats.
+ */
+export const inferVersionInfo = async function (
+	rawFile: RawFile,
+	project: Project,
+	gameVersions: GameVersion[],
+): Promise<InferredVersionInfo> {
+	const simplifiedGameVersions = gameVersions
+		.filter((it) => it.version_type === 'release')
+		.map((it) => it.version)
+
+	// Mod loader metadata files that can coexist in a single jar
+	const multiLoaderFiles = [
+		'META-INF/neoforge.mods.toml',
+		'META-INF/mods.toml',
+		'fabric.mod.json',
+		'quilt.mod.json',
+	]
+
+	const zipReader = new JSZip()
+	const zip = await zipReader.loadAsync(rawFile)
+
+	// Create parser instances
+	const loaderParsers = createLoaderParsers(project, gameVersions, simplifiedGameVersions)
+	const packParser = createPackParser(project, gameVersions, rawFile)
+	const multiFileDetectors = createMultiFileDetectors(project, gameVersions, rawFile)
+
+	// Add pack.mcmeta parser to the inference functions
+	const inferFunctions = {
+		...loaderParsers,
+		'pack.mcmeta': packParser,
+	}
+
+	// Check for multi-loader jars (mods that support multiple loaders)
+	const detectedLoaderFiles = multiLoaderFiles.filter((fileName) => zip.file(fileName) !== null)
+
+	if (detectedLoaderFiles.length > 1) {
+		// Multi-loader jar detected - combine results
+		const results: InferredVersionInfo[] = []
+		for (const fileName of detectedLoaderFiles) {
+			const file = zip.file(fileName)
+			if (file !== null) {
+				const text = await file.async('text')
+				const parser = inferFunctions[fileName as keyof typeof inferFunctions]
+				if (parser) {
+					const result = await parser(text, zip)
+					if (result && Object.keys(result).length > 0) {
+						results.push(result)
+					}
+				}
+			}
+		}
+
+		if (results.length > 0) {
+			// Merge results: combine loaders, use first valid version info, merge game versions
+			const combinedLoaders = [...new Set(results.flatMap((r) => r.loaders || []))]
+			const allGameVersions = [...new Set(results.flatMap((r) => r.game_versions || []))]
+
+			// Use version info from the first result that has it
+			const primaryResult = results.find((r) => r.version_number) || results[0]
+
+			return {
+				name: primaryResult.name,
+				version_number: primaryResult.version_number,
+				version_type: primaryResult.version_type,
+				loaders: combinedLoaders,
+				game_versions: allGameVersions,
+			}
+		}
+	}
+
+	// Standard single-loader detection
+	for (const fileName in inferFunctions) {
+		const file = zip.file(fileName)
+
+		if (file !== null) {
+			const text = await file.async('text')
+			const parser = inferFunctions[fileName as keyof typeof inferFunctions]
+			if (parser) {
+				return await parser(text, zip)
+			}
+		}
+	}
+
+	// Then, try multi-file detection functions
+	for (const funcName in multiFileDetectors) {
+		const detector = multiFileDetectors[funcName as keyof typeof multiFileDetectors]
+		const result = await detector(zip)
+		if (result !== null) {
+			return result
+		}
+	}
+
+	return {}
+}
diff --git a/apps/frontend/src/helpers/infer/loader-parsers.ts b/apps/frontend/src/helpers/infer/loader-parsers.ts
new file mode 100644
index 0000000000..10bce5aa6f
--- /dev/null
+++ b/apps/frontend/src/helpers/infer/loader-parsers.ts
@@ -0,0 +1,260 @@
+import { parse as parseTOML } from '@ltd/j-toml'
+import yaml from 'js-yaml'
+import type JSZip from 'jszip'
+import {
+	getGameVersionsMatchingMavenRange,
+	getGameVersionsMatchingSemverRange,
+} from './version-ranges'
+import { versionType } from './version-utils'
+
+type GameVersion = { version: string; version_type: string }
+type Project = { title: string; actualProjectType?: string }
+type InferResult = {
+	name?: string
+	version_number?: string
+	version_type?: 'alpha' | 'beta' | 'release'
+	loaders?: string[]
+	game_versions?: string[]
+}
+
+/**
+ * Creates the inferFunctions object containing all mod loader parsers.
+ */
+export function createLoaderParsers(
+	project: Project,
+	gameVersions: GameVersion[],
+	simplifiedGameVersions: string[],
+) {
+	return {
+		// NeoForge
+		'META-INF/neoforge.mods.toml': (file: string): InferResult => {
+			const metadata = parseTOML(file, { joiner: '\n' }) as any
+			if (!metadata.mods || metadata.mods.length === 0) {
+				return {}
+			}
+
+			const neoForgeDependency = Object.values(metadata.dependencies)
+				.flat()
+				.find((dependency: any) => dependency.modId === 'neoforge')
+			if (!neoForgeDependency) {
+				return {}
+			}
+
+			// https://docs.neoforged.net/docs/gettingstarted/versioning/#neoforge
+			const mcVersionRange = (neoForgeDependency as any).versionRange
+				.replace('-beta', '')
+				.replace(
+					/(\d+)(?:\.(\d+))?(?:\.(\d+)?)?/g,
+					(_match: string, major: string, minor: string) => {
+						return `1.${major}${minor ? '.' + minor : ''}`
+					},
+				)
+			const newGameVersions = getGameVersionsMatchingMavenRange(
+				mcVersionRange,
+				simplifiedGameVersions,
+			)
+
+			const versionNum = metadata.mods[0].version
+			return {
+				name: `${project.title} ${versionNum}`,
+				version_number: versionNum,
+				loaders: ['neoforge'],
+				version_type: versionType(versionNum),
+				game_versions: newGameVersions,
+			}
+		},
+		// Forge 1.13+
+		'META-INF/mods.toml': async (file: string, zip: JSZip): Promise<InferResult> => {
+			const metadata = parseTOML(file, { joiner: '\n' }) as any
+
+			if (metadata.mods && metadata.mods.length > 0) {
+				let versionNum = metadata.mods[0].version
+
+				// ${file.jarVersion} -> Implementation-Version from manifest
+				const manifestFile = zip.file('META-INF/MANIFEST.MF')
+				if (metadata.mods[0].version.includes('${file.jarVersion}') && manifestFile !== null) {
+					const manifestText = await manifestFile.async('text')
+					const regex = /Implementation-Version: (.*)$/m
+					const match = manifestText.match(regex)
+					if (match) {
+						versionNum = versionNum.replace('${file.jarVersion}', match[1])
+					}
+				}
+
+				let newGameVersions: string[] = []
+				const mcDependencies = Object.values(metadata.dependencies)
+					.flat()
+					.filter((dependency: any) => dependency.modId === 'minecraft')
+
+				if (mcDependencies.length > 0) {
+					newGameVersions = getGameVersionsMatchingMavenRange(
+						(mcDependencies[0] as any).versionRange,
+						simplifiedGameVersions,
+					)
+				}
+
+				return {
+					name: `${project.title} ${versionNum}`,
+					version_number: versionNum,
+					version_type: versionType(versionNum),
+					loaders: ['forge'],
+					game_versions: newGameVersions,
+				}
+			} else {
+				return {}
+			}
+		},
+		// Old Forge
+		'mcmod.info': (file: string): InferResult => {
+			const metadata = JSON.parse(file) as any
+
+			return {
+				name: metadata.version ? `${project.title} ${metadata.version}` : '',
+				version_number: metadata.version,
+				version_type: versionType(metadata.version),
+				loaders: ['forge'],
+				game_versions: simplifiedGameVersions.filter((version) =>
+					version.startsWith(metadata.mcversion),
+				),
+			}
+		},
+		// Fabric
+		'fabric.mod.json': (file: string): InferResult => {
+			const metadata = JSON.parse(file) as any
+
+			return {
+				name: `${project.title} ${metadata.version}`,
+				version_number: metadata.version,
+				loaders: ['fabric'],
+				version_type: versionType(metadata.version),
+				game_versions: metadata.depends
+					? getGameVersionsMatchingSemverRange(metadata.depends.minecraft, simplifiedGameVersions)
+					: [],
+			}
+		},
+		// Quilt
+		'quilt.mod.json': (file: string): InferResult => {
+			const metadata = JSON.parse(file) as any
+
+			return {
+				name: `${project.title} ${metadata.quilt_loader.version}`,
+				version_number: metadata.quilt_loader.version,
+				loaders: ['quilt'],
+				version_type: versionType(metadata.quilt_loader.version),
+				game_versions: metadata.quilt_loader.depends
+					? getGameVersionsMatchingSemverRange(
+							metadata.quilt_loader.depends.find((x: any) => x.id === 'minecraft')
+								? metadata.quilt_loader.depends.find((x: any) => x.id === 'minecraft').versions
+								: [],
+							simplifiedGameVersions,
+						)
+					: [],
+			}
+		},
+		// Bukkit + Other Forks
+		'plugin.yml': (file: string): InferResult => {
+			const metadata = yaml.load(file) as any
+
+			// Check for Folia support
+			const loaders = []
+			if (metadata['folia-supported'] === true) {
+				loaders.push('folia')
+			}
+			// We don't know which fork of Bukkit users are using otherwise
+
+			return {
+				name: `${project.title} ${metadata.version}`,
+				version_number: metadata.version,
+				version_type: versionType(metadata.version),
+				loaders,
+				game_versions: gameVersions
+					.filter(
+						(x) => x.version.startsWith(metadata['api-version']) && x.version_type === 'release',
+					)
+					.map((x) => x.version),
+			}
+		},
+		// Paper 1.19.3+
+		'paper-plugin.yml': (file: string): InferResult => {
+			const metadata = yaml.load(file) as any
+
+			return {
+				name: `${project.title} ${metadata.version}`,
+				version_number: metadata.version,
+				version_type: versionType(metadata.version),
+				loaders: ['paper'],
+				game_versions: gameVersions
+					.filter(
+						(x) => x.version.startsWith(metadata['api-version']) && x.version_type === 'release',
+					)
+					.map((x) => x.version),
+			}
+		},
+		// Bungeecord + Waterfall
+		'bungee.yml': (file: string): InferResult => {
+			const metadata = yaml.load(file) as any
+
+			return {
+				name: `${project.title} ${metadata.version}`,
+				version_number: metadata.version,
+				version_type: versionType(metadata.version),
+				loaders: ['bungeecord'],
+			}
+		},
+		// Velocity
+		'velocity-plugin.json': (file: string): InferResult => {
+			const metadata = JSON.parse(file) as any
+
+			return {
+				name: `${project.title} ${metadata.version}`,
+				version_number: metadata.version,
+				version_type: versionType(metadata.version),
+				loaders: ['velocity'],
+			}
+		},
+		// Sponge plugin (8+)
+		'META-INF/sponge_plugins.json': (file: string): InferResult => {
+			const metadata = JSON.parse(file) as any
+			const plugin = metadata.plugins?.[0]
+
+			if (!plugin) {
+				return {}
+			}
+
+			return {
+				name: plugin.version ? `${project.title} ${plugin.version}` : '',
+				version_number: plugin.version,
+				version_type: versionType(plugin.version),
+				loaders: ['sponge'],
+			}
+		},
+		// Modpacks
+		'modrinth.index.json': (file: string): InferResult => {
+			const metadata = JSON.parse(file) as any
+
+			const loaders = []
+			if ('forge' in metadata.dependencies) {
+				loaders.push('forge')
+			}
+			if ('neoforge' in metadata.dependencies) {
+				loaders.push('neoforge')
+			}
+			if ('fabric-loader' in metadata.dependencies) {
+				loaders.push('fabric')
+			}
+			if ('quilt-loader' in metadata.dependencies) {
+				loaders.push('quilt')
+			}
+
+			return {
+				name: `${project.title} ${metadata.versionId}`,
+				version_number: metadata.versionId,
+				version_type: versionType(metadata.versionId),
+				loaders,
+				game_versions: gameVersions
+					.filter((x) => x.version === metadata.dependencies.minecraft)
+					.map((x) => x.version),
+			}
+		},
+	}
+}
diff --git a/apps/frontend/src/helpers/infer/multi-file-detectors.ts b/apps/frontend/src/helpers/infer/multi-file-detectors.ts
new file mode 100644
index 0000000000..772bed6e01
--- /dev/null
+++ b/apps/frontend/src/helpers/infer/multi-file-detectors.ts
@@ -0,0 +1,143 @@
+import type JSZip from 'jszip'
+import { extractVersionFromFilename, versionType } from './version-utils'
+
+type GameVersion = { version: string; version_type: string }
+type Project = { title: string }
+type RawFile = { name: string }
+type InferResult = {
+	name?: string
+	version_number?: string
+	version_type?: 'alpha' | 'beta' | 'release'
+	loaders?: string[]
+	game_versions?: string[]
+}
+
+/**
+ * Creates multi-file detection functions that scan multiple files in a zip.
+ */
+export function createMultiFileDetectors(
+	project: Project,
+	gameVersions: GameVersion[],
+	rawFile: RawFile,
+) {
+	return {
+		// Legacy texture pack (pre-1.6.1)
+		legacyTexturePack: async (zip: JSZip): Promise<InferResult | null> => {
+			const packTxt = zip.file('pack.txt')
+			if (!packTxt) return null
+
+			// Check for legacy texture pack files/directories
+			const legacyIndicators = [
+				'font.txt',
+				'particles.png',
+				'achievement/',
+				'armor/',
+				'art/',
+				'environment/',
+				'font/',
+				'gui/',
+				'item/',
+				'lang/',
+				'misc/',
+				'mob/',
+				'textures/',
+				'title/',
+			]
+
+			const hasLegacyContent = legacyIndicators.some((indicator) => {
+				if (indicator.endsWith('/')) {
+					return zip.file(new RegExp(`^${indicator}`))?.length > 0
+				}
+				return zip.file(indicator) !== null
+			})
+
+			if (!hasLegacyContent) return null
+
+			// Legacy texture packs are compatible with a1.2.2 to 1.5.2
+			// We'll return versions from 1.0 to 1.5.2 (as older alpha/beta versions may not be in gameVersions)
+			const legacyVersions = gameVersions
+				.filter((v) => {
+					const version = v.version
+					// Match 1.0 through 1.5.2
+					if (version.match(/^1\.[0-4](\.\d+)?$/) || version.match(/^1\.5(\.[0-2])?$/)) {
+						return true
+					}
+					return false
+				})
+				.map((v) => v.version)
+
+			// Try to extract version from filename
+			const versionNum = extractVersionFromFilename(rawFile.name)
+
+			return {
+				name: versionNum ? `${project.title} ${versionNum}` : undefined,
+				version_number: versionNum || undefined,
+				version_type: versionType(versionNum),
+				loaders: ['minecraft'],
+				game_versions: legacyVersions,
+			}
+		},
+
+		// Shader pack (OptiFine/Iris)
+		shaderPack: async (zip: JSZip): Promise<InferResult | null> => {
+			const shadersDir = zip.file(/^shaders\//)
+			if (!shadersDir || shadersDir.length === 0) return null
+
+			const loaders: string[] = []
+
+			// Check for Iris-specific features in shaders.properties
+			const shaderProps = zip.file('shaders/shaders.properties')
+			if (shaderProps) {
+				const propsText = await shaderProps.async('text')
+				if (
+					propsText.includes('iris.features.required') ||
+					propsText.includes('iris.features.optional')
+				) {
+					loaders.push('iris', 'optifine')
+				}
+			}
+
+			// If no specific loader detected, it could be OptiFine or Iris
+			if (loaders.length === 0) {
+				loaders.push('optifine', 'iris')
+			}
+
+			// Try to extract version from filename
+			const versionNum = extractVersionFromFilename(rawFile.name)
+
+			return {
+				name: versionNum ? `${project.title} ${versionNum}` : undefined,
+				version_number: versionNum || undefined,
+				version_type: versionType(versionNum),
+				loaders,
+				// No reliable way to detect MC versions for shader packs
+				game_versions: [],
+			}
+		},
+
+		// NilLoader mod
+		nilLoaderMod: async (zip: JSZip): Promise<InferResult | null> => {
+			const nilModFiles = zip.file(/\.nilmod\.css$/)
+			if (!nilModFiles || nilModFiles.length === 0) return null
+
+			return {
+				loaders: ['nilloader'],
+				game_versions: [],
+			}
+		},
+
+		// Java Agent
+		javaAgent: async (zip: JSZip): Promise<InferResult | null> => {
+			const manifest = zip.file('META-INF/MANIFEST.MF')
+			if (!manifest) return null
+
+			const manifestText = await manifest.async('text')
+			if (!manifestText.includes('Premain-Class:')) return null
+
+			return {
+				loaders: ['java-agent'],
+				game_versions: [],
+			}
+		},
+	}
+}
diff --git a/apps/frontend/src/helpers/infer/pack-parsers.ts b/apps/frontend/src/helpers/infer/pack-parsers.ts
new file mode 100644
index 0000000000..935df62406
--- /dev/null
+++ b/apps/frontend/src/helpers/infer/pack-parsers.ts
@@ -0,0 +1,162 @@
+import type JSZip from 'jszip'
+import { DATA_PACK_FORMATS, RESOURCE_PACK_FORMATS } from './constants'
+import { extractVersionFromFilename, versionType } from './version-utils'
+
+type GameVersion = { version: string; version_type: string }
+type Project = { title: string; actualProjectType?: string }
+type RawFile = { name: string }
+type InferResult = {
+	name?: string
+	version_number?: string
+	version_type?: 'alpha' | 'beta' | 'release'
+	loaders?: string[]
+	game_versions?: string[]
+}
+
+/**
+ * Helper function to get a range of game versions between two versions.
+ */
+function getRange(versionA: string, versionB: string, gameVersions: GameVersion[]): string[] {
+	const startingIndex = gameVersions.findIndex((x) => x.version === versionA)
+	const endingIndex = gameVersions.findIndex((x) => x.version === versionB)
+
+	if (startingIndex === -1 || endingIndex === -1) {
+		return []
+	}
+
+	const final = []
+	const filterOnlyRelease = gameVersions[startingIndex]?.version_type === 'release'
+
+	for (let i = startingIndex; i >= endingIndex; i--) {
+		if (gameVersions[i].version_type === 'release' || !filterOnlyRelease) {
+			final.push(gameVersions[i].version)
+		}
+	}
+
+	return final
+}
+
+/**
+ * Gets game versions from a single pack format number.
+ */
+function getVersionsFromPackFormat(
+	packFormat: number,
+	formatMap: Record<number, { min: string; max: string }>,
+	gameVersions: GameVersion[],
+): string[] {
+	const mapping = formatMap[packFormat]
+	if (!mapping) {
+		return []
+	}
+	return getRange(mapping.min, mapping.max, gameVersions)
+}
+
+/**
+ * Gets game versions from a pack format range (min to max inclusive).
+ */
+function getVersionsFromFormatRange(
+	minFormat: number,
+	maxFormat: number,
+	formatMap: Record<number, { min: string; max: string }>,
+	gameVersions: GameVersion[],
+): string[] {
+	// Find all versions between minFormat and maxFormat
+	const allVersions: string[] = []
+	for (let format = minFormat; format <= maxFormat; format++) {
+		const versions = getVersionsFromPackFormat(format, formatMap, gameVersions)
+		for (const version of versions) {
+			if (!allVersions.includes(version)) {
+				allVersions.push(version)
+			}
+		}
+	}
+	return allVersions
+}
+
+/**
+ * Gets game versions from pack.mcmeta metadata.
+ */
+function getGameVersionsFromPackMeta(
+	packMeta: any,
+	formatMap: Record<number, { min: string; max: string }>,
+	gameVersions: GameVersion[],
+): string[] {
+	const pack = packMeta.pack
+	if (!pack) return []
+
+	// Check for supported_formats (array of [min, max] or object with min_inclusive/max_inclusive)
+	if (pack.supported_formats) {
+		if (Array.isArray(pack.supported_formats)) {
+			// Array format: [minFormat, maxFormat]
+			const [minFormat, maxFormat] = pack.supported_formats
+			return getVersionsFromFormatRange(minFormat, maxFormat, formatMap, gameVersions)
+		} else if (typeof pack.supported_formats === 'object') {
+			// Object format: { min_inclusive: X, max_inclusive: Y }
+			const minFormat = pack.supported_formats.min_inclusive
+			const maxFormat = pack.supported_formats.max_inclusive
+			if (minFormat !== undefined && maxFormat !== undefined) {
+				return getVersionsFromFormatRange(minFormat, maxFormat, formatMap, gameVersions)
+			}
+		}
+	}
+
+	// Check for min_format and max_format (older format range spec)
+	if (pack.min_format !== undefined && pack.max_format !== undefined) {
+		return getVersionsFromFormatRange(pack.min_format, pack.max_format, formatMap, gameVersions)
+	}
+
+	// Fall back to pack_format
+	if (pack.pack_format !== undefined) {
+		return getVersionsFromPackFormat(pack.pack_format, formatMap, gameVersions)
+	}
+
+	return []
+}
+
+/**
+ * Creates the pack.mcmeta parser function.
+ */
+export function createPackParser(project: Project, gameVersions: GameVersion[], rawFile: RawFile) {
+	return async (file: string, zip: JSZip): Promise<InferResult> => {
+		const metadata = JSON.parse(file) as any
+
+		// Check for assets/ directory (resource pack) or data/ directory (data pack)
+		const hasAssetsDir = zip.file(/^assets\//)?.[0] !== undefined
+		const hasDataDir = zip.file(/^data\//)?.[0] !== undefined
+		const hasZipExtension = rawFile.name.toLowerCase().endsWith('.zip')
+
+		const loaders: string[] = []
+		let newGameVersions: string[] = []
+
+		// Data pack detection: has data/ directory
+		if (hasDataDir && hasZipExtension) {
+			loaders.push('datapack')
+			newGameVersions = getGameVersionsFromPackMeta(metadata, DATA_PACK_FORMATS, gameVersions)
+		}
+		// Resource pack detection: has assets/ directory
+		else if (hasAssetsDir && hasZipExtension) {
+			loaders.push('minecraft')
+			newGameVersions = getGameVersionsFromPackMeta(metadata, RESOURCE_PACK_FORMATS, gameVersions)
+		}
+
+		// Fallback to old behavior based on project type
+		else if (project.actualProjectType === 'mod') {
+			loaders.push('datapack')
+			newGameVersions = getGameVersionsFromPackMeta(metadata, DATA_PACK_FORMATS, gameVersions)
+		} else if (project.actualProjectType === 'resourcepack') {
+			loaders.push('minecraft')
+			newGameVersions = getGameVersionsFromPackMeta(metadata, RESOURCE_PACK_FORMATS, gameVersions)
+		}
+
+		// Try to extract version from filename
+		const versionNum = extractVersionFromFilename(rawFile.name)
+
+		return {
+			name: versionNum ? `${project.title} ${versionNum}` : undefined,
+			version_number: versionNum || undefined,
+			version_type: versionType(versionNum),
+			loaders,
+			game_versions: newGameVersions,
+		}
+	}
+}
diff --git a/apps/frontend/src/helpers/infer/version-ranges.ts b/apps/frontend/src/helpers/infer/version-ranges.ts
new file mode 100644
index 0000000000..0b5d101137
--- /dev/null
+++ b/apps/frontend/src/helpers/infer/version-ranges.ts
@@ -0,0 +1,89 @@
+import { satisfies } from 'semver'
+
+type GameVersion = { version: string; version_type: string }
+
+/**
+ * Returns game versions that match a semver range or array of ranges.
+ */
+export function getGameVersionsMatchingSemverRange(
+	range: string | string[] | undefined,
+	gameVersions: string[],
+): string[] {
+	if (!range) {
+		return []
+	}
+	const ranges = Array.isArray(range) ? range : [range]
+	// Normalize ranges: strip trailing hyphens from version numbers used by Fabric for prerelease matching (e.g., ">=1.21.11-" -> ">=1.21.11")
+	const normalizedRanges = ranges.map((r) => r.replace(/(\d)-(\s|$)/g, '$1$2'))
+	return gameVersions.filter((version) => {
+		const semverVersion = version.split('.').length === 2 ? `${version}.0` : version // add patch version if missing (e.g. 1.16 -> 1.16.0)
+		return normalizedRanges.some((v) => satisfies(semverVersion, v))
+	})
+}
+
+/**
+ * Returns game versions that match a Maven-style version range.
+ */
+export function getGameVersionsMatchingMavenRange(
+	range: string | undefined,
+	gameVersions: string[],
+): string[] {
+	if (!range) {
+		return []
+	}
+	const ranges = []
+
+	while (range.startsWith('[') || range.startsWith('(')) {
+		let index = range.indexOf(')')
+		const index2 = range.indexOf(']')
+		if (index === -1 || (index2 !== -1 && index2 < index)) {
+			index = index2
+		}
+		if (index === -1) break
+		ranges.push(range.substring(0, index + 1))
+		range = range.substring(index + 1).trim()
+		if (range.startsWith(',')) {
+			range = range.substring(1).trim()
+		}
+	}
+
+	if (range) {
+		ranges.push(range)
+	}
+
+	const LESS_THAN_EQUAL = /^\(,(.*)]$/
+	const LESS_THAN = /^\(,(.*)\)$/
+	const EQUAL = /^\[(.*)]$/
+	const GREATER_THAN_EQUAL = /^\[(.*),\)$/
+	const GREATER_THAN = /^\((.*),\)$/
+	const BETWEEN = /^\((.*),(.*)\)$/
+	const BETWEEN_EQUAL = /^\[(.*),(.*)]$/
+	const BETWEEN_LESS_THAN_EQUAL = /^\((.*),(.*)]$/
+	const BETWEEN_GREATER_THAN_EQUAL = /^\[(.*),(.*)\)$/
+
+	const semverRanges = []
+
+	for (const range of ranges) {
+		let result
+		if ((result = range.match(LESS_THAN_EQUAL))) {
+			semverRanges.push(`<=${result[1]}`)
+		} else if ((result = range.match(LESS_THAN))) {
+			semverRanges.push(`<${result[1]}`)
+		} else if ((result = range.match(EQUAL))) {
+			semverRanges.push(`${result[1]}`)
+		} else if ((result = range.match(GREATER_THAN_EQUAL))) {
+			semverRanges.push(`>=${result[1]}`)
+		} else if ((result = range.match(GREATER_THAN))) {
+			semverRanges.push(`>${result[1]}`)
+		} else if ((result = range.match(BETWEEN))) {
+			semverRanges.push(`>${result[1]} <${result[2]}`)
+		} else if ((result = range.match(BETWEEN_EQUAL))) {
+			semverRanges.push(`>=${result[1]} <=${result[2]}`)
+		} else if ((result = range.match(BETWEEN_LESS_THAN_EQUAL))) {
+			semverRanges.push(`>${result[1]} <=${result[2]}`)
+		} else if ((result = range.match(BETWEEN_GREATER_THAN_EQUAL))) {
+			semverRanges.push(`>=${result[1]} <${result[2]}`)
+		}
+	}
+	return getGameVersionsMatchingSemverRange(semverRanges, gameVersions)
+}
diff --git a/apps/frontend/src/helpers/infer/version-utils.ts b/apps/frontend/src/helpers/infer/version-utils.ts
new file mode 100644
index 0000000000..5dc3b82d30
--- /dev/null
+++ b/apps/frontend/src/helpers/infer/version-utils.ts
@@ -0,0 +1,56 @@
+/**
+ * Determines the version type based on the version string.
+ */
+export function versionType(number: string | null | undefined): 'alpha' | 'beta' | 'release' {
+	if (!number) return 'release'
+	if (number.includes('alpha')) {
+		return 'alpha'
+	} else if (
+		number.includes('beta') ||
+		number.match(/[^A-z](rc)[^A-z]/) || // includes `rc`
+		number.match(/[^A-z](pre)[^A-z]/) // includes `pre`
+	) {
+		return 'beta'
+	} else {
+		return 'release'
+	}
+}
+
+/**
+ * Extracts version number from a filename.
+ */
+export function extractVersionFromFilename(filename: string | null | undefined): string | null {
+	if (!filename) return null
+
+	// Remove file extension
+	let baseName = filename.replace(/\.(zip|jar)$/i, '')
+
+	// Remove explicit MC version markers: mc followed by version (e.g., +mc1.21.11, -mc1.21, _mc1.21.4)
+	baseName = baseName.replace(/[+_-]mc\d+\.\d+(?:\.\d+)?/gi, '')
+
+	const versionPatterns = [
+		/[_\-\s]v(\d+(?:\.\d+)*)/i, // Match version with 'v' anywhere: "Name-v1.2.3-extra" (less strict)
+		/[_\-\s]r(\d+(?:\.\d+)*)/i, // Match version with 'r' anywhere: "Name-r1.2.3-extra" (less strict)
+		/[_\-\s](\d+(?:\.\d+)+)$/, // Match version at end after space/separator: "Name 1.2.3"
+	]
+
+	for (const pattern of versionPatterns) {
+		const match = baseName.match(pattern)
+		if (match && match[1]) {
+			return match[1]
+		}
+	}
+
+	return null
+}
+
+/**
+ * Extracts version details from a filename (public API).
+ */
+export function extractVersionDetailsFromFilename(filename: string | null | undefined) {
+	const versionNum = extractVersionFromFilename(filename)
+	return {
+		versionNumber: versionNum || undefined,
+		versionType: versionType(versionNum),
+	}
+}
diff --git a/apps/frontend/src/pages/[type]/[id]/version/[version].vue b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
index cf03409c60..0f5deea163 100644
--- a/apps/frontend/src/pages/[type]/[id]/version/[version].vue
+++ b/apps/frontend/src/pages/[type]/[id]/version/[version].vue
@@ -685,7 +685,7 @@ import Modal from '~/components/ui/Modal.vue'
 import Categories from '~/components/ui/search/Categories.vue'
 import { useImageUpload } from '~/composables/image-upload.ts'
 import { acceptFileFromProjectType } from '~/helpers/fileUtils.js'
-import { inferVersionInfo } from '~/helpers/infer.js'
+import { inferVersionInfo } from '~/helpers/infer'
 import { createDataPackVersion } from '~/helpers/package.js'
 import { reportVersion } from '~/utils/report-helpers.ts'
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cde5a1f37a..fb2f2e2234 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -149,7 +149,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
+        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.8.8(@vue/compiler-core@3.5.26)(vue@3.5.26(typescript@5.9.3))
@@ -158,22 +158,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+        version: 0.5.7(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@taijased/vue-render-tracker':
         specifier: ^1.0.7
         version: 1.0.7(vue@3.5.26(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.3(vite@6.4.1(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
+        version: 6.0.3(vite@6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.23(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@1.21.7)
+        version: 9.39.2(jiti@2.6.1)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.7.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.7.2)
+        version: 2.7.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.7.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -191,7 +191,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^6.0.0
-        version: 6.4.1(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+        version: 6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.1
@@ -365,16 +365,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxtjs/i18n':
         specifier: ^9.0.0
-        version: 9.5.6(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@2.6.1))(magicast@0.5.1)(rollup@4.54.0)(vue@3.5.26(typescript@5.9.3))
+        version: 9.5.6(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@1.21.7))(magicast@0.5.1)(rollup@4.54.0)(vue@3.5.26(typescript@5.9.3))
       '@types/dompurify':
         specifier: ^3.0.5
         version: 3.2.0
       '@types/iso-3166-2':
         specifier: ^1.0.4
         version: 1.0.4
+      '@types/js-yaml':
+        specifier: ^4.0.9
+        version: 4.0.9
       '@types/node':
         specifier: ^20.1.0
         version: 20.19.27
+      '@types/semver':
+        specifier: ^7.7.1
+        version: 7.7.1
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.23(postcss@8.5.6)
@@ -383,7 +389,7 @@ importers:
         version: 10.5.0
       nuxt:
         specifier: ^3.20.2
-        version: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+        version: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -3517,6 +3523,9 @@ packages:
   '@types/sax@1.2.7':
     resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==}
 
+  '@types/semver@7.7.1':
+    resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
+
   '@types/stats.js@0.17.4':
     resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
 
@@ -8773,6 +8782,9 @@ packages:
   vue-component-type-helpers@3.2.1:
     resolution: {integrity: sha512-gKV7XOkQl4urSuLHNY1tnVQf7wVgtb/mKbRyxSLWGZUY9RK7aDPhBenTjm+i8ZFe0zC2PZeHMPtOZXZfyaFOzQ==}
 
+  vue-component-type-helpers@3.2.2:
+    resolution: {integrity: sha512-x8C2nx5XlUNM0WirgfTkHjJGO/ABBxlANZDtHw2HclHtQnn+RFPTnbjMJn8jHZW4TlUam0asHcA14lf1C6Jb+A==}
+
   vue-confetti-explosion@1.0.2:
     resolution: {integrity: sha512-80OboM3/6BItIoZ6DpNcZFqGpF607kjIVc5af56oKgtFmt5yWehvJeoYhkzYlqxrqdBe0Ko4Ie3bWrmLau+dJw==}
     engines: {node: '>=12'}
@@ -9802,11 +9814,11 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7))':
+  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       '@eslint/core': 0.17.0
     optionalDependencies:
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
 
   '@eslint/config-array@0.21.1':
     dependencies:
@@ -10196,9 +10208,9 @@ snapshots:
 
   '@intlify/shared@11.2.8': {}
 
-  '@intlify/unplugin-vue-i18n@6.0.8(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@2.6.1))(rollup@4.54.0)(typescript@5.9.3)(vue-i18n@10.0.8(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))':
+  '@intlify/unplugin-vue-i18n@6.0.8(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@1.21.7))(rollup@4.54.0)(typescript@5.9.3)(vue-i18n@10.0.8(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
       '@intlify/bundle-utils': 10.0.1(vue-i18n@10.0.8(vue@3.5.26(typescript@5.9.3)))
       '@intlify/shared': 11.2.8
       '@intlify/vue-i18n-extensions': 8.0.0(@intlify/shared@11.2.8)(@vue/compiler-dom@3.5.26)(vue-i18n@10.0.8(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))
@@ -10448,7 +10460,7 @@ snapshots:
     dependencies:
       '@nuxt/kit': 4.2.2(magicast@0.5.1)
       execa: 8.0.1
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
     transitivePeerDependencies:
       - magicast
 
@@ -10493,7 +10505,7 @@ snapshots:
       sirv: 3.0.2
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.15
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vite-plugin-inspect: 11.3.3(@nuxt/kit@4.2.2(magicast@0.5.1))(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
       vite-plugin-vue-tracer: 1.2.0(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       which: 5.0.0
@@ -10504,36 +10516,36 @@ snapshots:
       - utf-8-validate
       - vue
 
-  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.2
-      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/eslint-plugin': 8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@1.21.7))
+      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@2.6.1))
       eslint-flat-config-utils: 0.4.0
-      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@1.21.7))
-      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@2.6.1))
       globals: 15.15.0
       local-pkg: 0.5.1
       pathe: 1.1.2
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
     transitivePeerDependencies:
       - '@typescript-eslint/utils'
       - eslint-import-resolver-node
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -10589,7 +10601,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/nitro-server@3.20.2(db0@0.3.4)(ioredis@5.8.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(typescript@5.9.3)(xml2js@0.6.2)':
+  '@nuxt/nitro-server@3.20.2(db0@0.3.4)(ioredis@5.8.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(typescript@5.9.3)(xml2js@0.6.2)':
     dependencies:
       '@nuxt/devalue': 2.0.2
       '@nuxt/kit': 3.20.2(magicast@0.5.1)
@@ -10607,7 +10619,7 @@ snapshots:
       klona: 2.0.6
       mocked-exports: 0.1.1
       nitropack: 2.12.9(xml2js@0.6.2)
-      nuxt: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+      nuxt: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
       pathe: 2.0.3
       pkg-types: 2.3.0
       radix3: 1.1.2
@@ -10678,7 +10690,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/vite-builder@3.20.2(@types/node@20.19.27)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.30.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)':
+  '@nuxt/vite-builder@3.20.2(@types/node@20.19.27)(eslint@9.39.2(jiti@1.21.7))(lightningcss@1.30.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)':
     dependencies:
       '@nuxt/kit': 3.20.2(magicast@0.5.1)
       '@rollup/plugin-replace': 6.0.3(rollup@4.54.0)
@@ -10699,7 +10711,7 @@ snapshots:
       magic-string: 0.30.21
       mlly: 1.8.0
       mocked-exports: 0.1.1
-      nuxt: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+      nuxt: 3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
       ohash: 2.0.11
       pathe: 2.0.3
       perfect-debounce: 2.0.0
@@ -10710,9 +10722,9 @@ snapshots:
       std-env: 3.10.0
       ufo: 1.6.1
       unenv: 2.0.0-rc.24
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vite-node: 5.2.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
-      vite-plugin-checker: 0.12.0(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))
+      vite-plugin-checker: 0.12.0(eslint@9.39.2(jiti@1.21.7))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))
       vue: 3.5.26(typescript@5.9.3)
       vue-bundle-renderer: 2.2.0
     transitivePeerDependencies:
@@ -10740,11 +10752,11 @@ snapshots:
       - vue-tsc
       - yaml
 
-  '@nuxtjs/i18n@9.5.6(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@2.6.1))(magicast@0.5.1)(rollup@4.54.0)(vue@3.5.26(typescript@5.9.3))':
+  '@nuxtjs/i18n@9.5.6(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@1.21.7))(magicast@0.5.1)(rollup@4.54.0)(vue@3.5.26(typescript@5.9.3))':
     dependencies:
       '@intlify/h3': 0.6.1
       '@intlify/shared': 10.0.8
-      '@intlify/unplugin-vue-i18n': 6.0.8(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@2.6.1))(rollup@4.54.0)(typescript@5.9.3)(vue-i18n@10.0.8(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))
+      '@intlify/unplugin-vue-i18n': 6.0.8(@vue/compiler-dom@3.5.26)(eslint@9.39.2(jiti@1.21.7))(rollup@4.54.0)(typescript@5.9.3)(vue-i18n@10.0.8(vue@3.5.26(typescript@5.9.3)))(vue@3.5.26(typescript@5.9.3))
       '@intlify/utils': 0.13.0
       '@miyaneee/rollup-plugin-json5': 1.2.0(rollup@4.54.0)
       '@nuxt/kit': 3.20.2(magicast@0.5.1)
@@ -11488,22 +11500,10 @@ snapshots:
       storybook: 10.1.11(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       type-fest: 2.19.0
       vue: 3.5.26(typescript@5.9.3)
-      vue-component-type-helpers: 3.2.1
+      vue-component-type-helpers: 3.2.2
 
   '@stripe/stripe-js@7.9.0': {}
 
-  '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      estraverse: 5.3.0
-      picomatch: 4.0.3
-    transitivePeerDependencies:
-      - supports-color
-      - typescript
-
   '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -11515,7 +11515,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
       - typescript
-    optional: true
 
   '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.5)':
     dependencies:
@@ -11867,6 +11866,8 @@ snapshots:
     dependencies:
       '@types/node': 20.19.27
 
+  '@types/semver@7.7.1': {}
+
   '@types/stats.js@0.17.4': {}
 
   '@types/three@0.172.0':
@@ -11897,22 +11898,6 @@ snapshots:
     dependencies:
       '@types/node': 20.19.27
 
-  '@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.51.0
-      '@typescript-eslint/type-utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.51.0
-      eslint: 9.39.2(jiti@1.21.7)
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.3.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/eslint-plugin@8.51.0(@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -11929,18 +11914,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 8.51.0
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.51.0
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.51.0
@@ -11971,18 +11944,6 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
-      ts-api-utils: 2.3.0(typescript@5.9.3)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/type-utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.51.0
@@ -12012,17 +11973,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      '@typescript-eslint/scope-manager': 8.51.0
-      '@typescript-eslint/types': 8.51.0
-      '@typescript-eslint/typescript-estree': 8.51.0(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -12137,7 +12087,7 @@ snapshots:
       '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
       '@rolldown/pluginutils': 1.0.0-beta.58
       '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.28.5)
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
@@ -12147,16 +12097,16 @@ snapshots:
       vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)
       vue: 3.5.26(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.3(vite@6.4.1(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.3(vite@6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.53
-      vite: 6.4.1(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
 
   '@vitejs/plugin-vue@6.0.3(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.53
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
 
   '@vitest/browser-playwright@4.0.16(playwright@1.57.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1))(vitest@4.0.16)':
@@ -13747,10 +13697,10 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
+  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
-      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7))
-      eslint: 9.39.2(jiti@1.21.7)
+      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
+      eslint: 9.39.2(jiti@2.6.1)
       find-up-simple: 1.0.1
 
   eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)):
@@ -13768,12 +13718,12 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@typescript-eslint/types': 8.51.0
       comment-parser: 1.4.1
       debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
       is-glob: 4.0.3
       minimatch: 10.1.1
@@ -13781,18 +13731,18 @@ snapshots:
       stable-hash-x: 0.2.0
       unrs-resolver: 1.11.1
     optionalDependencies:
-      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
+  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
       debug: 4.4.3
       escape-string-regexp: 4.0.0
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       espree: 10.4.0
       esquery: 1.7.0
       parse-imports-exports: 0.2.4
@@ -13810,12 +13760,12 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
-  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@1.21.7)):
+  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.2
       comment-parser: 1.4.1
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       jsdoc-type-pratt-parser: 4.8.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
@@ -13834,20 +13784,20 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-turbo@2.7.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.7.2):
+  eslint-plugin-turbo@2.7.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.7.2):
     dependencies:
       dotenv: 16.0.3
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       turbo: 2.7.2
 
-  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@1.21.7)):
+  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
       ci-info: 4.3.1
       clean-regexp: 1.0.0
       core-js-compat: 3.47.0
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       esquery: 1.7.0
       globals: 15.15.0
       indent-string: 4.0.0
@@ -13874,16 +13824,16 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.51.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@1.21.7)):
+  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      eslint: 9.39.2(jiti@1.21.7)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      eslint: 9.39.2(jiti@2.6.1)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.7.3
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -15869,16 +15819,16 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2):
+  nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2):
     dependencies:
       '@dxup/nuxt': 0.2.2(magicast@0.5.1)
       '@nuxt/cli': 3.31.3(cac@6.7.14)(magicast@0.5.1)
       '@nuxt/devtools': 3.1.1(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
       '@nuxt/kit': 3.20.2(magicast@0.5.1)
-      '@nuxt/nitro-server': 3.20.2(db0@0.3.4)(ioredis@5.8.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(typescript@5.9.3)(xml2js@0.6.2)
+      '@nuxt/nitro-server': 3.20.2(db0@0.3.4)(ioredis@5.8.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(typescript@5.9.3)(xml2js@0.6.2)
       '@nuxt/schema': 3.20.2
       '@nuxt/telemetry': 2.6.6(magicast@0.5.1)
-      '@nuxt/vite-builder': 3.20.2(@types/node@20.19.27)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.30.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)
+      '@nuxt/vite-builder': 3.20.2(@types/node@20.19.27)(eslint@9.39.2(jiti@1.21.7))(lightningcss@1.30.2)(magicast@0.5.1)(nuxt@3.20.2(@parcel/watcher@2.5.1)(@types/node@20.19.27)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rollup@4.54.0)(sass@1.97.1)(terser@5.44.1)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.26(typescript@5.9.3))(yaml@2.8.2)
       '@unhead/vue': 2.1.1(vue@3.5.26(typescript@5.9.3))
       '@vue/shared': 3.5.26
       c12: 3.3.3(magicast@0.5.1)
@@ -18040,12 +17990,12 @@ snapshots:
   vite-dev-rpc@1.1.0(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
     dependencies:
       birpc: 2.9.0
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vite-hot-client: 2.1.0(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
 
   vite-hot-client@2.1.0(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)):
     dependencies:
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
 
   vite-node@5.2.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
@@ -18067,7 +18017,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.12.0(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3)):
+  vite-plugin-checker@0.12.0(eslint@9.39.2(jiti@1.21.7))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3)):
     dependencies:
       '@babel/code-frame': 7.27.1
       chokidar: 4.0.3
@@ -18076,10 +18026,10 @@ snapshots:
       picomatch: 4.0.3
       tiny-invariant: 1.3.3
       tinyglobby: 0.2.15
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vscode-uri: 3.1.0
     optionalDependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       optionator: 0.9.4
       typescript: 5.9.3
       vue-tsc: 2.2.12(typescript@5.9.3)
@@ -18094,7 +18044,7 @@ snapshots:
       perfect-debounce: 2.0.0
       sirv: 3.0.2
       unplugin-utils: 0.3.1
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vite-dev-rpc: 1.1.0(vite@7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2))
     optionalDependencies:
       '@nuxt/kit': 4.2.2(magicast@0.5.1)
@@ -18108,7 +18058,7 @@ snapshots:
       magic-string: 0.30.21
       pathe: 2.0.3
       source-map-js: 1.2.1
-      vite: 7.3.0(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
+      vite: 7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2)
       vue: 3.5.26(typescript@5.9.3)
 
   vite-svg-loader@5.1.0(vue@3.5.26(typescript@5.9.3)):
@@ -18128,7 +18078,7 @@ snapshots:
       sass: 1.97.1
       terser: 5.44.1
 
-  vite@6.4.1(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
+  vite@6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
@@ -18139,15 +18089,15 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.19.27
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.6.1
       lightningcss: 1.30.2
       sass: 1.97.1
       terser: 5.44.1
       yaml: 2.8.2
 
-  vite@6.4.1(@types/node@20.19.27)(jiti@2.6.1)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
+  vite@7.3.0(@types/node@20.19.27)(jiti@1.21.7)(lightningcss@1.30.2)(sass@1.97.1)(terser@5.44.1)(yaml@2.8.2):
     dependencies:
-      esbuild: 0.25.12
+      esbuild: 0.27.2
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.6
@@ -18156,7 +18106,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.19.27
       fsevents: 2.3.3
-      jiti: 2.6.1
+      jiti: 1.21.7
       lightningcss: 1.30.2
       sass: 1.97.1
       terser: 5.44.1
@@ -18337,6 +18287,8 @@ snapshots:
 
   vue-component-type-helpers@3.2.1: {}
 
+  vue-component-type-helpers@3.2.2: {}
+
   vue-confetti-explosion@1.0.2(vue@3.5.26(typescript@5.9.3)):
     dependencies:
       vue: 3.5.26(typescript@5.9.3)
@@ -18375,10 +18327,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
+  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1

From 115ee589b6c493581c2332054ba610ded8967c21 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 11:54:01 -0700
Subject: [PATCH 54/83] remove duplicated types

---
 apps/frontend/src/helpers/infer/constants.ts  |  4 +--
 apps/frontend/src/helpers/infer/index.ts      |  1 -
 apps/frontend/src/helpers/infer/infer.ts      | 12 +++----
 .../src/helpers/infer/loader-parsers.ts       | 33 +++++++------------
 .../src/helpers/infer/multi-file-detectors.ts | 23 +++----------
 .../src/helpers/infer/pack-parsers.ts         | 14 ++------
 .../src/helpers/infer/version-ranges.ts       |  2 --
 7 files changed, 26 insertions(+), 63 deletions(-)

diff --git a/apps/frontend/src/helpers/infer/constants.ts b/apps/frontend/src/helpers/infer/constants.ts
index b9cf2ea59c..571a97f4dd 100644
--- a/apps/frontend/src/helpers/infer/constants.ts
+++ b/apps/frontend/src/helpers/infer/constants.ts
@@ -46,7 +46,7 @@ export const RESOURCE_PACK_FORMATS = {
 	44: { min: '24w45a', max: '24w45a' },
 	45: { min: '24w46a', max: '24w46a' },
 	46: { min: '1.21.4', max: '1.21.4' },
-}
+} as const
 
 // Data pack format history (full table including development versions)
 export const DATA_PACK_FORMATS = {
@@ -108,4 +108,4 @@ export const DATA_PACK_FORMATS = {
 	59: { min: '24w45a', max: '24w45a' },
 	60: { min: '24w46a', max: '24w46a' },
 	61: { min: '1.21.4', max: '1.21.4' },
-}
+} as const
diff --git a/apps/frontend/src/helpers/infer/index.ts b/apps/frontend/src/helpers/infer/index.ts
index 3a2702ae3a..500de80813 100644
--- a/apps/frontend/src/helpers/infer/index.ts
+++ b/apps/frontend/src/helpers/infer/index.ts
@@ -1,4 +1,3 @@
-// Public API exports
 export { inferVersionInfo } from './infer'
 export type { InferredVersionInfo } from './infer'
 export { extractVersionDetailsFromFilename } from './version-utils'
diff --git a/apps/frontend/src/helpers/infer/infer.ts b/apps/frontend/src/helpers/infer/infer.ts
index 10ec1fef2e..5938da7b67 100644
--- a/apps/frontend/src/helpers/infer/infer.ts
+++ b/apps/frontend/src/helpers/infer/infer.ts
@@ -3,9 +3,11 @@ import { createLoaderParsers } from './loader-parsers'
 import { createMultiFileDetectors } from './multi-file-detectors'
 import { createPackParser } from './pack-parsers'
 
-type GameVersion = { version: string; version_type: string }
-type Project = { title: string; actualProjectType?: string }
-type RawFile = File | (Blob & { name: string })
+export type GameVersion = { version: string; version_type: string }
+
+export type Project = { title: string; actualProjectType?: string }
+
+export type RawFile = File | (Blob & { name: string })
 
 export interface InferredVersionInfo {
 	name?: string
@@ -39,12 +41,10 @@ export const inferVersionInfo = async function (
 	const zipReader = new JSZip()
 	const zip = await zipReader.loadAsync(rawFile)
 
-	// Create parser instances
 	const loaderParsers = createLoaderParsers(project, gameVersions, simplifiedGameVersions)
 	const packParser = createPackParser(project, gameVersions, rawFile)
 	const multiFileDetectors = createMultiFileDetectors(project, gameVersions, rawFile)
 
-	// Add pack.mcmeta parser to the inference functions
 	const inferFunctions = {
 		...loaderParsers,
 		'pack.mcmeta': packParser,
@@ -54,7 +54,6 @@ export const inferVersionInfo = async function (
 	const detectedLoaderFiles = multiLoaderFiles.filter((fileName) => zip.file(fileName) !== null)
 
 	if (detectedLoaderFiles.length > 1) {
-		// Multi-loader jar detected - combine results
 		const results: InferredVersionInfo[] = []
 		for (const fileName of detectedLoaderFiles) {
 			const file = zip.file(fileName)
@@ -75,7 +74,6 @@ export const inferVersionInfo = async function (
 			const combinedLoaders = [...new Set(results.flatMap((r) => r.loaders || []))]
 			const allGameVersions = [...new Set(results.flatMap((r) => r.game_versions || []))]
 
-			// Use version info from the first result that has it
 			const primaryResult = results.find((r) => r.version_number) || results[0]
 
 			return {
diff --git a/apps/frontend/src/helpers/infer/loader-parsers.ts b/apps/frontend/src/helpers/infer/loader-parsers.ts
index 10bce5aa6f..b0d821a233 100644
--- a/apps/frontend/src/helpers/infer/loader-parsers.ts
+++ b/apps/frontend/src/helpers/infer/loader-parsers.ts
@@ -1,22 +1,13 @@
 import { parse as parseTOML } from '@ltd/j-toml'
 import yaml from 'js-yaml'
 import type JSZip from 'jszip'
+import type { GameVersion, InferredVersionInfo, Project } from './infer'
 import {
 	getGameVersionsMatchingMavenRange,
 	getGameVersionsMatchingSemverRange,
 } from './version-ranges'
 import { versionType } from './version-utils'
 
-type GameVersion = { version: string; version_type: string }
-type Project = { title: string; actualProjectType?: string }
-type InferResult = {
-	name?: string
-	version_number?: string
-	version_type?: 'alpha' | 'beta' | 'release'
-	loaders?: string[]
-	game_versions?: string[]
-}
-
 /**
  * Creates the inferFunctions object containing all mod loader parsers.
  */
@@ -27,7 +18,7 @@ export function createLoaderParsers(
 ) {
 	return {
 		// NeoForge
-		'META-INF/neoforge.mods.toml': (file: string): InferResult => {
+		'META-INF/neoforge.mods.toml': (file: string): InferredVersionInfo => {
 			const metadata = parseTOML(file, { joiner: '\n' }) as any
 			if (!metadata.mods || metadata.mods.length === 0) {
 				return {}
@@ -64,7 +55,7 @@ export function createLoaderParsers(
 			}
 		},
 		// Forge 1.13+
-		'META-INF/mods.toml': async (file: string, zip: JSZip): Promise<InferResult> => {
+		'META-INF/mods.toml': async (file: string, zip: JSZip): Promise<InferredVersionInfo> => {
 			const metadata = parseTOML(file, { joiner: '\n' }) as any
 
 			if (metadata.mods && metadata.mods.length > 0) {
@@ -105,7 +96,7 @@ export function createLoaderParsers(
 			}
 		},
 		// Old Forge
-		'mcmod.info': (file: string): InferResult => {
+		'mcmod.info': (file: string): InferredVersionInfo => {
 			const metadata = JSON.parse(file) as any
 
 			return {
@@ -119,7 +110,7 @@ export function createLoaderParsers(
 			}
 		},
 		// Fabric
-		'fabric.mod.json': (file: string): InferResult => {
+		'fabric.mod.json': (file: string): InferredVersionInfo => {
 			const metadata = JSON.parse(file) as any
 
 			return {
@@ -133,7 +124,7 @@ export function createLoaderParsers(
 			}
 		},
 		// Quilt
-		'quilt.mod.json': (file: string): InferResult => {
+		'quilt.mod.json': (file: string): InferredVersionInfo => {
 			const metadata = JSON.parse(file) as any
 
 			return {
@@ -152,7 +143,7 @@ export function createLoaderParsers(
 			}
 		},
 		// Bukkit + Other Forks
-		'plugin.yml': (file: string): InferResult => {
+		'plugin.yml': (file: string): InferredVersionInfo => {
 			const metadata = yaml.load(file) as any
 
 			// Check for Folia support
@@ -175,7 +166,7 @@ export function createLoaderParsers(
 			}
 		},
 		// Paper 1.19.3+
-		'paper-plugin.yml': (file: string): InferResult => {
+		'paper-plugin.yml': (file: string): InferredVersionInfo => {
 			const metadata = yaml.load(file) as any
 
 			return {
@@ -191,7 +182,7 @@ export function createLoaderParsers(
 			}
 		},
 		// Bungeecord + Waterfall
-		'bungee.yml': (file: string): InferResult => {
+		'bungee.yml': (file: string): InferredVersionInfo => {
 			const metadata = yaml.load(file) as any
 
 			return {
@@ -202,7 +193,7 @@ export function createLoaderParsers(
 			}
 		},
 		// Velocity
-		'velocity-plugin.json': (file: string): InferResult => {
+		'velocity-plugin.json': (file: string): InferredVersionInfo => {
 			const metadata = JSON.parse(file) as any
 
 			return {
@@ -213,7 +204,7 @@ export function createLoaderParsers(
 			}
 		},
 		// Sponge plugin (8+)
-		'META-INF/sponge_plugins.json': (file: string): InferResult => {
+		'META-INF/sponge_plugins.json': (file: string): InferredVersionInfo => {
 			const metadata = JSON.parse(file) as any
 			const plugin = metadata.plugins?.[0]
 
@@ -229,7 +220,7 @@ export function createLoaderParsers(
 			}
 		},
 		// Modpacks
-		'modrinth.index.json': (file: string): InferResult => {
+		'modrinth.index.json': (file: string): InferredVersionInfo => {
 			const metadata = JSON.parse(file) as any
 
 			const loaders = []
diff --git a/apps/frontend/src/helpers/infer/multi-file-detectors.ts b/apps/frontend/src/helpers/infer/multi-file-detectors.ts
index 772bed6e01..5fdee21477 100644
--- a/apps/frontend/src/helpers/infer/multi-file-detectors.ts
+++ b/apps/frontend/src/helpers/infer/multi-file-detectors.ts
@@ -1,17 +1,7 @@
 import type JSZip from 'jszip'
+import type { GameVersion, InferredVersionInfo, Project, RawFile } from './infer'
 import { extractVersionFromFilename, versionType } from './version-utils'
 
-type GameVersion = { version: string; version_type: string }
-type Project = { title: string }
-type RawFile = { name: string }
-type InferResult = {
-	name?: string
-	version_number?: string
-	version_type?: 'alpha' | 'beta' | 'release'
-	loaders?: string[]
-	game_versions?: string[]
-}
-
 /**
  * Creates multi-file detection functions that scan multiple files in a zip.
  */
@@ -22,7 +12,7 @@ export function createMultiFileDetectors(
 ) {
 	return {
 		// Legacy texture pack (pre-1.6.1)
-		legacyTexturePack: async (zip: JSZip): Promise<InferResult | null> => {
+		legacyTexturePack: async (zip: JSZip): Promise<InferredVersionInfo | null> => {
 			const packTxt = zip.file('pack.txt')
 			if (!packTxt) return null
 
@@ -66,7 +56,6 @@ export function createMultiFileDetectors(
 				})
 				.map((v) => v.version)
 
-			// Try to extract version from filename
 			const versionNum = extractVersionFromFilename(rawFile.name)
 
 			return {
@@ -79,7 +68,7 @@ export function createMultiFileDetectors(
 		},
 
 		// Shader pack (OptiFine/Iris)
-		shaderPack: async (zip: JSZip): Promise<InferResult | null> => {
+		shaderPack: async (zip: JSZip): Promise<InferredVersionInfo | null> => {
 			const shadersDir = zip.file(/^shaders\//)
 			if (!shadersDir || shadersDir.length === 0) return null
 
@@ -102,7 +91,6 @@ export function createMultiFileDetectors(
 				loaders.push('optifine', 'iris')
 			}
 
-			// Try to extract version from filename
 			const versionNum = extractVersionFromFilename(rawFile.name)
 
 			return {
@@ -110,13 +98,12 @@ export function createMultiFileDetectors(
 				version_number: versionNum || undefined,
 				version_type: versionType(versionNum),
 				loaders,
-				// No reliable way to detect MC versions for shader packs
 				game_versions: [],
 			}
 		},
 
 		// NilLoader mod
-		nilLoaderMod: async (zip: JSZip): Promise<InferResult | null> => {
+		nilLoaderMod: async (zip: JSZip): Promise<InferredVersionInfo | null> => {
 			const nilModFiles = zip.file(/\.nilmod\.css$/)
 			if (!nilModFiles || nilModFiles.length === 0) return null
 
@@ -127,7 +114,7 @@ export function createMultiFileDetectors(
 		},
 
 		// Java Agent
-		javaAgent: async (zip: JSZip): Promise<InferResult | null> => {
+		javaAgent: async (zip: JSZip): Promise<InferredVersionInfo | null> => {
 			const manifest = zip.file('META-INF/MANIFEST.MF')
 			if (!manifest) return null
 
diff --git a/apps/frontend/src/helpers/infer/pack-parsers.ts b/apps/frontend/src/helpers/infer/pack-parsers.ts
index 935df62406..2aaf9e1383 100644
--- a/apps/frontend/src/helpers/infer/pack-parsers.ts
+++ b/apps/frontend/src/helpers/infer/pack-parsers.ts
@@ -1,18 +1,8 @@
 import type JSZip from 'jszip'
 import { DATA_PACK_FORMATS, RESOURCE_PACK_FORMATS } from './constants'
+import type { GameVersion, InferredVersionInfo, Project, RawFile } from './infer'
 import { extractVersionFromFilename, versionType } from './version-utils'
 
-type GameVersion = { version: string; version_type: string }
-type Project = { title: string; actualProjectType?: string }
-type RawFile = { name: string }
-type InferResult = {
-	name?: string
-	version_number?: string
-	version_type?: 'alpha' | 'beta' | 'release'
-	loaders?: string[]
-	game_versions?: string[]
-}
-
 /**
  * Helper function to get a range of game versions between two versions.
  */
@@ -117,7 +107,7 @@ function getGameVersionsFromPackMeta(
  * Creates the pack.mcmeta parser function.
  */
 export function createPackParser(project: Project, gameVersions: GameVersion[], rawFile: RawFile) {
-	return async (file: string, zip: JSZip): Promise<InferResult> => {
+	return async (file: string, zip: JSZip): Promise<InferredVersionInfo> => {
 		const metadata = JSON.parse(file) as any
 
 		// Check for assets/ directory (resource pack) or data/ directory (data pack)
diff --git a/apps/frontend/src/helpers/infer/version-ranges.ts b/apps/frontend/src/helpers/infer/version-ranges.ts
index 0b5d101137..a26548eb6f 100644
--- a/apps/frontend/src/helpers/infer/version-ranges.ts
+++ b/apps/frontend/src/helpers/infer/version-ranges.ts
@@ -1,7 +1,5 @@
 import { satisfies } from 'semver'
 
-type GameVersion = { version: string; version_type: string }
-
 /**
  * Returns game versions that match a semver range or array of ranges.
  */

From 8264ad215f03289de0ed3a9414087b09627b663f Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 12:09:00 -0700
Subject: [PATCH 55/83] add fill missing from file name step

---
 apps/frontend/src/helpers/infer/infer.ts | 65 +++++++++++++++---------
 1 file changed, 42 insertions(+), 23 deletions(-)

diff --git a/apps/frontend/src/helpers/infer/infer.ts b/apps/frontend/src/helpers/infer/infer.ts
index 5938da7b67..6c1a860826 100644
--- a/apps/frontend/src/helpers/infer/infer.ts
+++ b/apps/frontend/src/helpers/infer/infer.ts
@@ -2,6 +2,7 @@ import JSZip from 'jszip'
 import { createLoaderParsers } from './loader-parsers'
 import { createMultiFileDetectors } from './multi-file-detectors'
 import { createPackParser } from './pack-parsers'
+import { extractVersionDetailsFromFilename } from './version-utils'
 
 export type GameVersion = { version: string; version_type: string }
 
@@ -17,6 +18,31 @@ export interface InferredVersionInfo {
 	game_versions?: string[]
 }
 
+/**
+ * Fills in missing version information from the filename if not already present.
+ */
+function fillMissingFromFilename(
+	result: InferredVersionInfo,
+	filename: string,
+	projectTitle: string,
+): InferredVersionInfo {
+	const filenameDetails = extractVersionDetailsFromFilename(filename)
+
+	if (!result.version_number && filenameDetails.versionNumber) {
+		result.version_number = filenameDetails.versionNumber
+	}
+
+	if (!result.version_type) {
+		result.version_type = filenameDetails.versionType
+	}
+
+	if (!result.name && result.version_number) {
+		result.name = `${projectTitle} ${result.version_number}`
+	}
+
+	return result
+}
+
 /**
  * Main function to infer version information from a file.
  * Analyzes mod loaders, packs, and other Minecraft-related file formats.
@@ -30,14 +56,6 @@ export const inferVersionInfo = async function (
 		.filter((it) => it.version_type === 'release')
 		.map((it) => it.version)
 
-	// Mod loader metadata files that can coexist in a single jar
-	const multiLoaderFiles = [
-		'META-INF/neoforge.mods.toml',
-		'META-INF/mods.toml',
-		'fabric.mod.json',
-		'quilt.mod.json',
-	]
-
 	const zipReader = new JSZip()
 	const zip = await zipReader.loadAsync(rawFile)
 
@@ -50,9 +68,14 @@ export const inferVersionInfo = async function (
 		'pack.mcmeta': packParser,
 	}
 
-	// Check for multi-loader jars (mods that support multiple loaders)
+	// Multi-loader detection
+	const multiLoaderFiles = [
+		'META-INF/neoforge.mods.toml',
+		'META-INF/mods.toml',
+		'fabric.mod.json',
+		'quilt.mod.json',
+	]
 	const detectedLoaderFiles = multiLoaderFiles.filter((fileName) => zip.file(fileName) !== null)
-
 	if (detectedLoaderFiles.length > 1) {
 		const results: InferredVersionInfo[] = []
 		for (const fileName of detectedLoaderFiles) {
@@ -62,27 +85,23 @@ export const inferVersionInfo = async function (
 				const parser = inferFunctions[fileName as keyof typeof inferFunctions]
 				if (parser) {
 					const result = await parser(text, zip)
-					if (result && Object.keys(result).length > 0) {
-						results.push(result)
-					}
+					if (result && Object.keys(result).length > 0) results.push(result)
 				}
 			}
 		}
-
 		if (results.length > 0) {
-			// Merge results: combine loaders, use first valid version info, merge game versions
 			const combinedLoaders = [...new Set(results.flatMap((r) => r.loaders || []))]
 			const allGameVersions = [...new Set(results.flatMap((r) => r.game_versions || []))]
-
 			const primaryResult = results.find((r) => r.version_number) || results[0]
 
-			return {
+			const mergedResult = {
 				name: primaryResult.name,
 				version_number: primaryResult.version_number,
 				version_type: primaryResult.version_type,
 				loaders: combinedLoaders,
 				game_versions: allGameVersions,
 			}
+			return fillMissingFromFilename(mergedResult, rawFile.name, project.title)
 		}
 	}
 
@@ -94,19 +113,19 @@ export const inferVersionInfo = async function (
 			const text = await file.async('text')
 			const parser = inferFunctions[fileName as keyof typeof inferFunctions]
 			if (parser) {
-				return await parser(text, zip)
+				const result = await parser(text, zip)
+				return fillMissingFromFilename(result, rawFile.name, project.title)
 			}
 		}
 	}
 
-	// Then, try multi-file detection functions
-	for (const funcName in multiFileDetectors) {
-		const detector = multiFileDetectors[funcName as keyof typeof multiFileDetectors]
+	// Multi-file detection functions
+	for (const detector of Object.values(multiFileDetectors)) {
 		const result = await detector(zip)
 		if (result !== null) {
-			return result
+			return fillMissingFromFilename(result, rawFile.name, project.title)
 		}
 	}
 
-	return {}
+	return fillMissingFromFilename({}, rawFile.name, project.title)
 }

From b77223c570d1d080f3a38c41115f9fd7e43ccba5 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 12:24:06 -0700
Subject: [PATCH 56/83] pnpm prepr

---
 .../ui/create-project-version/stages/MetadataStage.vue          | 2 +-
 apps/frontend/src/helpers/infer/index.ts                        | 2 +-
 apps/frontend/src/helpers/infer/infer.ts                        | 1 +
 apps/frontend/src/helpers/infer/loader-parsers.ts               | 1 +
 apps/frontend/src/helpers/infer/multi-file-detectors.ts         | 1 +
 apps/frontend/src/helpers/infer/pack-parsers.ts                 | 1 +
 6 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 79155dd736..45a9e1cd45 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -177,7 +177,7 @@
 				</div>
 
 				<div v-if="draftVersion.dependencies?.length" class="flex flex-col gap-4">
-					<DependenciesList disableRemove />
+					<DependenciesList disable-remove />
 				</div>
 				<div v-else class="flex flex-col gap-1.5 gap-y-4 rounded-xl bg-surface-2 p-3 py-4">
 					<span class="text-sm font-medium">No dependencies added.</span>
diff --git a/apps/frontend/src/helpers/infer/index.ts b/apps/frontend/src/helpers/infer/index.ts
index 500de80813..580ff8af00 100644
--- a/apps/frontend/src/helpers/infer/index.ts
+++ b/apps/frontend/src/helpers/infer/index.ts
@@ -1,3 +1,3 @@
-export { inferVersionInfo } from './infer'
 export type { InferredVersionInfo } from './infer'
+export { inferVersionInfo } from './infer'
 export { extractVersionDetailsFromFilename } from './version-utils'
diff --git a/apps/frontend/src/helpers/infer/infer.ts b/apps/frontend/src/helpers/infer/infer.ts
index 6c1a860826..9bda8a8049 100644
--- a/apps/frontend/src/helpers/infer/infer.ts
+++ b/apps/frontend/src/helpers/infer/infer.ts
@@ -1,4 +1,5 @@
 import JSZip from 'jszip'
+
 import { createLoaderParsers } from './loader-parsers'
 import { createMultiFileDetectors } from './multi-file-detectors'
 import { createPackParser } from './pack-parsers'
diff --git a/apps/frontend/src/helpers/infer/loader-parsers.ts b/apps/frontend/src/helpers/infer/loader-parsers.ts
index b0d821a233..2db8574838 100644
--- a/apps/frontend/src/helpers/infer/loader-parsers.ts
+++ b/apps/frontend/src/helpers/infer/loader-parsers.ts
@@ -1,6 +1,7 @@
 import { parse as parseTOML } from '@ltd/j-toml'
 import yaml from 'js-yaml'
 import type JSZip from 'jszip'
+
 import type { GameVersion, InferredVersionInfo, Project } from './infer'
 import {
 	getGameVersionsMatchingMavenRange,
diff --git a/apps/frontend/src/helpers/infer/multi-file-detectors.ts b/apps/frontend/src/helpers/infer/multi-file-detectors.ts
index 5fdee21477..bb5d06c3f9 100644
--- a/apps/frontend/src/helpers/infer/multi-file-detectors.ts
+++ b/apps/frontend/src/helpers/infer/multi-file-detectors.ts
@@ -1,4 +1,5 @@
 import type JSZip from 'jszip'
+
 import type { GameVersion, InferredVersionInfo, Project, RawFile } from './infer'
 import { extractVersionFromFilename, versionType } from './version-utils'
 
diff --git a/apps/frontend/src/helpers/infer/pack-parsers.ts b/apps/frontend/src/helpers/infer/pack-parsers.ts
index 2aaf9e1383..97d645d3c6 100644
--- a/apps/frontend/src/helpers/infer/pack-parsers.ts
+++ b/apps/frontend/src/helpers/infer/pack-parsers.ts
@@ -1,4 +1,5 @@
 import type JSZip from 'jszip'
+
 import { DATA_PACK_FORMATS, RESOURCE_PACK_FORMATS } from './constants'
 import type { GameVersion, InferredVersionInfo, Project, RawFile } from './infer'
 import { extractVersionFromFilename, versionType } from './version-utils'

From 02f981c54a81a29b87f3bd47fc6c6ba27b8eddc5 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 12:46:31 -0700
Subject: [PATCH 57/83] fix neoforge loader parse failing and not adding
 neoforge loader

---
 .../src/helpers/infer/loader-parsers.ts       | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/apps/frontend/src/helpers/infer/loader-parsers.ts b/apps/frontend/src/helpers/infer/loader-parsers.ts
index 2db8574838..206d708d0d 100644
--- a/apps/frontend/src/helpers/infer/loader-parsers.ts
+++ b/apps/frontend/src/helpers/infer/loader-parsers.ts
@@ -21,34 +21,38 @@ export function createLoaderParsers(
 		// NeoForge
 		'META-INF/neoforge.mods.toml': (file: string): InferredVersionInfo => {
 			const metadata = parseTOML(file, { joiner: '\n' }) as any
-			if (!metadata.mods || metadata.mods.length === 0) {
-				return {}
-			}
 
-			const neoForgeDependency = Object.values(metadata.dependencies)
-				.flat()
-				.find((dependency: any) => dependency.modId === 'neoforge')
-			if (!neoForgeDependency) {
-				return {}
+			let versionNum = metadata.mods?.[0]?.version || ''
+			let newGameVersions: string[] = []
+
+			if (metadata.dependencies) {
+				const neoForgeDependency = Object.values(metadata.dependencies)
+					.flat()
+					.find((dependency: any) => dependency.modId === 'neoforge')
+
+				if (neoForgeDependency) {
+					try {
+						// https://docs.neoforged.net/docs/gettingstarted/versioning/#neoforge
+						const mcVersionRange = (neoForgeDependency as any).versionRange
+							.replace('-beta', '')
+							.replace(
+								/(\d+)(?:\.(\d+))?(?:\.(\d+)?)?/g,
+								(_match: string, major: string, minor: string) => {
+									return `1.${major}${minor ? '.' + minor : ''}`
+								},
+							)
+						newGameVersions = getGameVersionsMatchingMavenRange(
+							mcVersionRange,
+							simplifiedGameVersions,
+						)
+					} catch {
+						// Ignore parsing errors, just leave game_versions empty
+					}
+				}
 			}
 
-			// https://docs.neoforged.net/docs/gettingstarted/versioning/#neoforge
-			const mcVersionRange = (neoForgeDependency as any).versionRange
-				.replace('-beta', '')
-				.replace(
-					/(\d+)(?:\.(\d+))?(?:\.(\d+)?)?/g,
-					(_match: string, major: string, minor: string) => {
-						return `1.${major}${minor ? '.' + minor : ''}`
-					},
-				)
-			const newGameVersions = getGameVersionsMatchingMavenRange(
-				mcVersionRange,
-				simplifiedGameVersions,
-			)
-
-			const versionNum = metadata.mods[0].version
 			return {
-				name: `${project.title} ${versionNum}`,
+				name: versionNum ? `${project.title} ${versionNum}` : '',
 				version_number: versionNum,
 				loaders: ['neoforge'],
 				version_type: versionType(versionNum),

From 8ee09a9d15c10da1cf6bafc44403317bc1735c67 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 13:56:50 -0700
Subject: [PATCH 58/83] add missing pack formats

---
 apps/frontend/src/helpers/infer/constants.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/apps/frontend/src/helpers/infer/constants.ts b/apps/frontend/src/helpers/infer/constants.ts
index 571a97f4dd..db388b6c55 100644
--- a/apps/frontend/src/helpers/infer/constants.ts
+++ b/apps/frontend/src/helpers/infer/constants.ts
@@ -1,6 +1,8 @@
 // Pack format to Minecraft version mappings
 // See: https://minecraft.wiki/w/Pack_format
 
+// NOTE: This needs to be continuously updated as new versions are released.
+
 // Resource pack format history (full table including development versions)
 export const RESOURCE_PACK_FORMATS = {
 	1: { min: '1.6.1', max: '1.8.9' },
@@ -46,6 +48,11 @@ export const RESOURCE_PACK_FORMATS = {
 	44: { min: '24w45a', max: '24w45a' },
 	45: { min: '24w46a', max: '24w46a' },
 	46: { min: '1.21.4', max: '1.21.4' },
+	55: { min: '1.21.5', max: '1.21.5' },
+	63: { min: '1.21.6', max: '1.21.6' },
+	64: { min: '1.21.7', max: '1.21.8' },
+	69.0: { min: '1.21.9', max: '1.21.10' },
+	75: { min: '1.21.11', max: '1.21.11' },
 } as const
 
 // Data pack format history (full table including development versions)
@@ -108,4 +115,9 @@ export const DATA_PACK_FORMATS = {
 	59: { min: '24w45a', max: '24w45a' },
 	60: { min: '24w46a', max: '24w46a' },
 	61: { min: '1.21.4', max: '1.21.4' },
+	71: { min: '1.21.5', max: '1.21.5' },
+	80: { min: '1.21.6', max: '1.21.6' },
+	81: { min: '1.21.7', max: '1.21.8' },
+	88.0: { min: '1.21.9', max: '1.21.10' },
+	94.1: { min: '1.21.11', max: '1.21.11' },
 } as const

From 91b8d57cb2a2f80636a39f2ecac0a852d7427f36 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 14:13:35 -0700
Subject: [PATCH 59/83] handle new pack format

---
 .../src/helpers/infer/pack-parsers.ts         | 163 +++++++++++++++---
 1 file changed, 138 insertions(+), 25 deletions(-)

diff --git a/apps/frontend/src/helpers/infer/pack-parsers.ts b/apps/frontend/src/helpers/infer/pack-parsers.ts
index 97d645d3c6..6267eb9e88 100644
--- a/apps/frontend/src/helpers/infer/pack-parsers.ts
+++ b/apps/frontend/src/helpers/infer/pack-parsers.ts
@@ -4,6 +4,64 @@ import { DATA_PACK_FORMATS, RESOURCE_PACK_FORMATS } from './constants'
 import type { GameVersion, InferredVersionInfo, Project, RawFile } from './infer'
 import { extractVersionFromFilename, versionType } from './version-utils'
 
+type PackFormat = number | [number] | [number, number]
+
+/**
+ * Normalizes a pack format to [major, minor] tuple. See https://minecraft.wiki/w/Pack.mcmeta
+ * - Single integer: [major, 0] for min, [major, Infinity] for max
+ * - Array [major]: [major, 0] for min, [major, Infinity] for max
+ * - Array [major, minor]: returns as-is
+ */
+function normalizePackFormat(format: PackFormat, isMax: boolean): [number, number] {
+	if (Array.isArray(format)) {
+		if (format.length === 1) {
+			return isMax ? [format[0], Infinity] : [format[0], 0]
+		}
+		return [format[0], format[1]]
+	}
+	return isMax ? [format, Infinity] : [format, 0]
+}
+
+/**
+ * Compares two pack formats [major, minor].
+ * Returns: -1 if a < b, 0 if equal, 1 if a > b
+ */
+function comparePackFormats(a: [number, number], b: [number, number]): number {
+	if (a[0] !== b[0]) return a[0] - b[0]
+	return a[1] - b[1]
+}
+
+/**
+ * Checks if a format number falls within the min/max range.
+ */
+function isFormatInRange(
+	format: number,
+	minFormat: [number, number],
+	maxFormat: [number, number],
+): boolean {
+	// Check if the major version matches
+	if (format < minFormat[0] || format > maxFormat[0]) {
+		return false
+	}
+
+	// If major version is exactly min or max, we need to check minor version
+	// For entries in our map, we treat them as [major, 0]
+	const formatTuple: [number, number] = [format, 0]
+
+	// If the format has a decimal (like 69.0, 88.0), extract it
+	const formatStr = format.toString()
+	if (formatStr.includes('.')) {
+		const [maj, min] = formatStr.split('.').map(Number)
+		formatTuple[0] = maj
+		formatTuple[1] = min
+	}
+
+	return (
+		comparePackFormats(formatTuple, minFormat) >= 0 &&
+		comparePackFormats(formatTuple, maxFormat) <= 0
+	)
+}
+
 /**
  * Helper function to get a range of game versions between two versions.
  */
@@ -44,28 +102,43 @@ function getVersionsFromPackFormat(
 
 /**
  * Gets game versions from a pack format range (min to max inclusive).
+ * Supports both integer and [major, minor] format specifications.
  */
 function getVersionsFromFormatRange(
-	minFormat: number,
-	maxFormat: number,
+	minFormat: PackFormat,
+	maxFormat: PackFormat,
 	formatMap: Record<number, { min: string; max: string }>,
 	gameVersions: GameVersion[],
 ): string[] {
-	// Find all versions between minFormat and maxFormat
+	const normalizedMin = normalizePackFormat(minFormat, false)
+	const normalizedMax = normalizePackFormat(maxFormat, true)
+
+	// Get all format numbers from the map that fall within the range
 	const allVersions: string[] = []
-	for (let format = minFormat; format <= maxFormat; format++) {
-		const versions = getVersionsFromPackFormat(format, formatMap, gameVersions)
-		for (const version of versions) {
-			if (!allVersions.includes(version)) {
-				allVersions.push(version)
+	const formatNumbers = Object.keys(formatMap)
+		.map(Number)
+		.sort((a, b) => a - b)
+
+	for (const format of formatNumbers) {
+		if (isFormatInRange(format, normalizedMin, normalizedMax)) {
+			const versions = getVersionsFromPackFormat(format, formatMap, gameVersions)
+			for (const version of versions) {
+				if (!allVersions.includes(version)) {
+					allVersions.push(version)
+				}
 			}
 		}
 	}
+
 	return allVersions
 }
 
 /**
  * Gets game versions from pack.mcmeta metadata.
+ * Supports multiple format specifications:
+ * - min_format + max_format: Can be integers or [major, minor] arrays (since 25w31a)
+ * - supported_formats: Single int, array of ints, or { min_inclusive, max_inclusive }
+ * - pack_format: Single format number (legacy)
  */
 function getGameVersionsFromPackMeta(
 	packMeta: any,
@@ -75,28 +148,68 @@ function getGameVersionsFromPackMeta(
 	const pack = packMeta.pack
 	if (!pack) return []
 
-	// Check for supported_formats (array of [min, max] or object with min_inclusive/max_inclusive)
-	if (pack.supported_formats) {
-		if (Array.isArray(pack.supported_formats)) {
-			// Array format: [minFormat, maxFormat]
-			const [minFormat, maxFormat] = pack.supported_formats
-			return getVersionsFromFormatRange(minFormat, maxFormat, formatMap, gameVersions)
-		} else if (typeof pack.supported_formats === 'object') {
-			// Object format: { min_inclusive: X, max_inclusive: Y }
-			const minFormat = pack.supported_formats.min_inclusive
-			const maxFormat = pack.supported_formats.max_inclusive
-			if (minFormat !== undefined && maxFormat !== undefined) {
-				return getVersionsFromFormatRange(minFormat, maxFormat, formatMap, gameVersions)
+	// Check for min_format and max_format (25w31a+ format)
+	// These can be: int (e.g., 82), [int] (e.g., [82]), or [major, minor] (e.g., [88, 0])
+	if (pack.min_format !== undefined && pack.max_format !== undefined) {
+		return getVersionsFromFormatRange(pack.min_format, pack.max_format, formatMap, gameVersions)
+	}
+
+	// Check for supported_formats
+	if (pack.supported_formats !== undefined) {
+		const formats = pack.supported_formats
+
+		// Single integer: major version
+		if (typeof formats === 'number') {
+			return getVersionsFromPackFormat(formats, formatMap, gameVersions)
+		}
+
+		// Array of integers or [min, max] range
+		if (Array.isArray(formats)) {
+			if (
+				formats.length === 2 &&
+				typeof formats[0] === 'number' &&
+				typeof formats[1] === 'number'
+			) {
+				// Could be [major, minor] or [minMajor, maxMajor]
+				// Based on context, if both are close (within ~50), treat as major version range
+				// Otherwise, treat as [major, minor]
+				if (Math.abs(formats[1] - formats[0]) < 50) {
+					// Likely a major version range like [42, 45]
+					return getVersionsFromFormatRange(formats[0], formats[1], formatMap, gameVersions)
+				}
+			}
+
+			// Array of major versions
+			const allVersions: string[] = []
+			for (const format of formats) {
+				if (typeof format === 'number') {
+					const versions = getVersionsFromPackFormat(format, formatMap, gameVersions)
+					for (const version of versions) {
+						if (!allVersions.includes(version)) {
+							allVersions.push(version)
+						}
+					}
+				}
 			}
+			return allVersions
 		}
-	}
 
-	// Check for min_format and max_format (older format range spec)
-	if (pack.min_format !== undefined && pack.max_format !== undefined) {
-		return getVersionsFromFormatRange(pack.min_format, pack.max_format, formatMap, gameVersions)
+		// Object format: { min_inclusive, max_inclusive }
+		if (
+			typeof formats === 'object' &&
+			formats.min_inclusive !== undefined &&
+			formats.max_inclusive !== undefined
+		) {
+			return getVersionsFromFormatRange(
+				formats.min_inclusive,
+				formats.max_inclusive,
+				formatMap,
+				gameVersions,
+			)
+		}
 	}
 
-	// Fall back to pack_format
+	// Fall back to pack_format (legacy single format)
 	if (pack.pack_format !== undefined) {
 		return getVersionsFromPackFormat(pack.pack_format, formatMap, gameVersions)
 	}

From 3a426cdf3b7fa4adcfb850c4712faac7c246c38a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 14:27:41 -0700
Subject: [PATCH 60/83] pnpm prepr

---
 apps/frontend/src/helpers/infer/loader-parsers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/helpers/infer/loader-parsers.ts b/apps/frontend/src/helpers/infer/loader-parsers.ts
index 206d708d0d..8d0fbbbffa 100644
--- a/apps/frontend/src/helpers/infer/loader-parsers.ts
+++ b/apps/frontend/src/helpers/infer/loader-parsers.ts
@@ -22,7 +22,7 @@ export function createLoaderParsers(
 		'META-INF/neoforge.mods.toml': (file: string): InferredVersionInfo => {
 			const metadata = parseTOML(file, { joiner: '\n' }) as any
 
-			let versionNum = metadata.mods?.[0]?.version || ''
+			const versionNum = metadata.mods?.[0]?.version || ''
 			let newGameVersions: string[] = []
 
 			if (metadata.dependencies) {

From ae8f5bac467b39b3e551a7a847794d6726d2222e Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 15:22:16 -0700
Subject: [PATCH 61/83] add another regex where it is version in anywhere in
 filename

---
 apps/frontend/src/helpers/infer/version-utils.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/frontend/src/helpers/infer/version-utils.ts b/apps/frontend/src/helpers/infer/version-utils.ts
index 5dc3b82d30..2e8f36f3d7 100644
--- a/apps/frontend/src/helpers/infer/version-utils.ts
+++ b/apps/frontend/src/helpers/infer/version-utils.ts
@@ -32,6 +32,7 @@ export function extractVersionFromFilename(filename: string | null | undefined):
 		/[_\-\s]v(\d+(?:\.\d+)*)/i, // Match version with 'v' anywhere: "Name-v1.2.3-extra" (less strict)
 		/[_\-\s]r(\d+(?:\.\d+)*)/i, // Match version with 'r' anywhere: "Name-r1.2.3-extra" (less strict)
 		/[_\-\s](\d+(?:\.\d+)+)$/, // Match version at end after space/separator: "Name 1.2.3"
+		/(\d+\.\d+(?:\.\d+)*)/, // Match any version pattern x.x or x.x.x.x...: "Name1.2.3extra"
 	]
 
 	for (const pattern of versionPatterns) {

From 972d77edd8ad909bca85c3c48a41eaa13f2c7138 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 15:55:57 -0700
Subject: [PATCH 62/83] only show resource pack or data pack options for
 filetype on datapack project

---
 .../components/VersionFileRow.vue             | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue b/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
index 85b91111fc..3bc1de11b7 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
@@ -70,8 +70,10 @@ import { ArrowLeftRightIcon, CheckIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, Combobox, injectProjectPageContext } from '@modrinth/ui'
 import type { ComboboxOption } from '@modrinth/ui/src/components/base/Combobox.vue'
 import { acceptFileFromProjectType } from '@modrinth/utils'
+import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
 const { projectV2 } = injectProjectPageContext()
+const { projectType } = injectManageVersionContext()
 
 const emit = defineEmits<{
 	(e: 'setPrimaryFile', file?: File): void
@@ -89,16 +91,29 @@ const { name, isPrimary, onRemove, initialFileType, editingVersion } = definePro
 const selectedType = ref<Labrinth.Versions.v3.FileType | 'primary'>(initialFileType || 'unknown')
 const primaryFileInput = ref<HTMLInputElement>()
 
-const versionTypes = [
-	!editingVersion && { class: 'text-sm', value: 'primary', label: 'Primary' },
-	{ class: 'text-sm', value: 'unknown', label: 'Other' },
-	{ class: 'text-sm', value: 'required-resource-pack', label: 'Required RP' },
-	{ class: 'text-sm', value: 'optional-resource-pack', label: 'Optional RP' },
-	{ class: 'text-sm', value: 'sources-jar', label: 'Sources JAR' },
-	{ class: 'text-sm', value: 'dev-jar', label: 'Dev JAR' },
-	{ class: 'text-sm', value: 'javadoc-jar', label: 'Javadoc JAR' },
-	{ class: 'text-sm', value: 'signature', label: 'Signature' },
-].filter(Boolean) as ComboboxOption<Labrinth.Versions.v3.FileType | 'primary'>[]
+const isDatapackProject = computed(() => projectType.value === 'datapack')
+
+const versionTypes = computed(
+	() =>
+		[
+			!editingVersion && { class: 'text-sm', value: 'primary', label: 'Primary' },
+			{ class: 'text-sm', value: 'unknown', label: 'Other' },
+			isDatapackProject.value && {
+				class: 'text-sm',
+				value: 'required-resource-pack',
+				label: 'Required RP',
+			},
+			isDatapackProject.value && {
+				class: 'text-sm',
+				value: 'optional-resource-pack',
+				label: 'Optional RP',
+			},
+			{ class: 'text-sm', value: 'sources-jar', label: 'Sources JAR' },
+			{ class: 'text-sm', value: 'dev-jar', label: 'Dev JAR' },
+			{ class: 'text-sm', value: 'javadoc-jar', label: 'Javadoc JAR' },
+			{ class: 'text-sm', value: 'signature', label: 'Signature' },
+		].filter(Boolean) as ComboboxOption<Labrinth.Versions.v3.FileType | 'primary'>[],
+)
 
 function emitFileTypeChange() {
 	if (selectedType.value === 'primary') emit('setPrimaryFile')

From 8bc9f5387b49d5a9a7f67a51f2f9d6c12e4a1809 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 7 Jan 2026 18:09:33 -0700
Subject: [PATCH 63/83] add redundant zip folder check

---
 .../providers/version/manage-version-modal.ts | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index a767fbd484..bc95554d6b 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -100,10 +100,6 @@ export interface ManageVersionContextValue {
 	// Version methods
 	newDraftVersion: (projectId: string, version?: Labrinth.Versions.v3.DraftVersion | null) => void
 	setPrimaryFile: (index: number) => void
-	setInferredVersionData: (
-		file: File,
-		project: Labrinth.Projects.v2.Project,
-	) => Promise<InferredVersionInfo>
 	getProject: (projectId: string) => Promise<Labrinth.Projects.v3.Project>
 	getVersion: (versionId: string) => Promise<Labrinth.Versions.v3.Version>
 	handleNewFiles: (newFiles: File[]) => Promise<void>
@@ -283,6 +279,26 @@ export function createManageVersionContext(
 		}
 	}
 
+	async function checkRedundantZipFolder(file: File): Promise<boolean> {
+		const fileName = file.name.toLowerCase()
+		if (!fileName.endsWith('.zip')) return false
+
+		const zip = await JSZip.loadAsync(file)
+		const entries = Object.keys(zip.files).map((e) => e.toLowerCase())
+		const filtered = entries.filter((e) => !e.startsWith('__macosx/') && !e.endsWith('.ds_store'))
+
+		const hasRootEntries = filtered.some((e) => !e.includes('/'))
+		if (hasRootEntries) return false
+
+		const topLevelFolders = new Set(filtered.map((e) => e.split('/')[0]).filter(Boolean))
+		if (topLevelFolders.size !== 1) return false
+
+		const [folderName] = [...topLevelFolders]
+		const zipBaseName = file.name.replace(/\.zip$/i, '').toLowerCase()
+
+		return folderName === zipBaseName
+	}
+
 	async function inferEnvironmentFromVersions(
 		projectId: string,
 		loaders: string[],
@@ -329,6 +345,14 @@ export function createManageVersionContext(
 			inferred.loaders = ['minecraft']
 		}
 
+		if (await checkRedundantZipFolder(file)) {
+			addNotification({
+				title: 'Redundant top-level folder detected',
+				text: `The uploaded ZIP file "${file.name}" contains a single top-level folder. Consider re-zipping the contents without this extra folder to ensure proper functionality.`,
+				type: 'warning',
+			})
+		}
+
 		inferredVersionData.value = inferred
 
 		return inferred
@@ -728,7 +752,6 @@ export function createManageVersionContext(
 		// Methods
 		newDraftVersion,
 		setPrimaryFile,
-		setInferredVersionData,
 		getProject,
 		getVersion,
 		handleNewFiles,

From e1d6b6e72eef30acadfd09667ae459b4a98fffb1 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 8 Jan 2026 11:51:26 -0700
Subject: [PATCH 64/83] reject RP and DP if has redundant folder

---
 .../stages/AddFilesStage.vue                  |  11 +-
 .../providers/version/manage-version-modal.ts | 111 +++++++++++-------
 2 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index cae71b1dee..46b144af73 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -25,11 +25,7 @@
 						:is-primary="true"
 						:editing-version="editingVersion"
 						:on-remove="undefined"
-						@set-primary-file="
-							(file) => {
-								if (file && !editingVersion) filesToAdd[0] = { file }
-							}
-						"
+						@set-primary-file="(file) => file && replacePrimaryFile(file)"
 					/>
 				</div>
 				<span>
@@ -76,7 +72,7 @@
 							:editing-version="editingVersion"
 							:on-remove="() => handleRemoveFile(idx + (primaryFile?.existing ? 0 : 1))"
 							@set-file-type="(type) => (versionFile.fileType = type)"
-							@set-primary-file="setPrimaryFile(idx + (primaryFile?.existing ? 0 : 1))"
+							@set-primary-file="() => swapPrimaryFile(idx + (primaryFile?.existing ? 0 : 1))"
 						/>
 					</div>
 				</div>
@@ -111,7 +107,8 @@ const {
 	filesToAdd,
 	existingFilesToDelete,
 	handlingNewFiles,
-	setPrimaryFile,
+	swapPrimaryFile,
+	replacePrimaryFile,
 	editingVersion,
 	primaryFile,
 	handleNewFiles,
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index bc95554d6b..8ae11a1a91 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -99,10 +99,11 @@ export interface ManageVersionContextValue {
 
 	// Version methods
 	newDraftVersion: (projectId: string, version?: Labrinth.Versions.v3.DraftVersion | null) => void
-	setPrimaryFile: (index: number) => void
+	handleNewFiles: (newFiles: File[]) => Promise<void>
+	swapPrimaryFile: (index: number) => void
+	replacePrimaryFile: (file: File) => Promise<void>
 	getProject: (projectId: string) => Promise<Labrinth.Projects.v3.Project>
 	getVersion: (versionId: string) => Promise<Labrinth.Versions.v3.Version>
-	handleNewFiles: (newFiles: File[]) => Promise<void>
 
 	// Submission methods
 	handleCreateVersion: () => Promise<void>
@@ -233,15 +234,52 @@ export function createManageVersionContext(
 		filesToAdd.value = []
 		existingFilesToDelete.value = []
 		inferredVersionData.value = undefined
-		// projectType.value = undefined
 	}
 
-	function setPrimaryFile(index: number) {
+	async function handleNewFiles(newFiles: File[]) {
+		handlingNewFiles.value = true
+		// detect primary file if no primary file is set
+		const primaryFileIndex = primaryFile.value ? null : detectPrimaryFileIndex(newFiles)
+
+		newFiles.forEach((file) => filesToAdd.value.push({ file }))
+
+		if (primaryFileIndex !== null) {
+			if (primaryFileIndex) swapPrimaryFile(primaryFileIndex)
+		}
+
+		if (
+			filesToAdd.value.length === 1 &&
+			!editingVersion.value &&
+			modal.value?.currentStageIndex === 0
+		) {
+			if (await rejectOnRedundantWrappedZip(filesToAdd.value[0].file)) return
+
+			await addDetectedData()
+			modal.value?.nextStage()
+		}
+
+		handlingNewFiles.value = false
+	}
+
+	async function replacePrimaryFile(file: File) {
+		console.log('Replacing primary file with', file)
+		if (file && !editingVersion.value) {
+			console.log('switing')
+			filesToAdd.value[0] = { file }
+		}
+		if (await rejectOnRedundantWrappedZip(file)) return
+		await addDetectedData()
+	}
+
+	async function swapPrimaryFile(index: number) {
 		const files = filesToAdd.value
 		if (index <= 0 || index >= files.length) return
 		files[0].fileType = 'unknown'
 		files[index].fileType = 'unknown'
 		;[files[0], files[index]] = [files[index], files[0]]
+
+		if (await rejectOnRedundantWrappedZip(files[0].file)) return
+		await addDetectedData()
 	}
 
 	const tags = useGeneratedState()
@@ -279,7 +317,7 @@ export function createManageVersionContext(
 		}
 	}
 
-	async function checkRedundantZipFolder(file: File): Promise<boolean> {
+	async function checkRedundantWrappedZip(file: File): Promise<boolean> {
 		const fileName = file.name.toLowerCase()
 		if (!fileName.endsWith('.zip')) return false
 
@@ -294,9 +332,28 @@ export function createManageVersionContext(
 		if (topLevelFolders.size !== 1) return false
 
 		const [folderName] = [...topLevelFolders]
-		const zipBaseName = file.name.replace(/\.zip$/i, '').toLowerCase()
 
-		return folderName === zipBaseName
+		// Check if the inner folder contents indicate a datapack or resource pack
+		const innerEntries = filtered.map((e) => e.substring(folderName.length + 1))
+		const hasPackMcmeta = hasFile(innerEntries, 'pack.mcmeta')
+		const hasAssets = hasDir(innerEntries, 'assets')
+		const hasData = hasDir(innerEntries, 'data')
+
+		return hasPackMcmeta && (hasAssets || hasData)
+	}
+
+	async function rejectOnRedundantWrappedZip(file: File): Promise<boolean> {
+		if (await checkRedundantWrappedZip(file)) {
+			newDraftVersion(projectV2.value.id)
+			modal.value?.setStage('add-files')
+			addNotification({
+				title: 'Invalid ZIP structure',
+				text: `The uploaded ZIP file "${file.name}" contains a redundant top-level folder. Please re-zip the contents directly without the extra folder layer.`,
+				type: 'error',
+			})
+			return true
+		}
+		return false
 	}
 
 	async function inferEnvironmentFromVersions(
@@ -345,14 +402,6 @@ export function createManageVersionContext(
 			inferred.loaders = ['minecraft']
 		}
 
-		if (await checkRedundantZipFolder(file)) {
-			addNotification({
-				title: 'Redundant top-level folder detected',
-				text: `The uploaded ZIP file "${file.name}" contains a single top-level folder. Consider re-zipping the contents without this extra folder to ensure proper functionality.`,
-				type: 'warning',
-			})
-		}
-
 		inferredVersionData.value = inferred
 
 		return inferred
@@ -442,35 +491,6 @@ export function createManageVersionContext(
 		}
 	}
 
-	async function handleNewFiles(newFiles: File[]) {
-		handlingNewFiles.value = true
-		// detect primary file if no primary file is set
-		const primaryFileIndex = primaryFile.value ? null : detectPrimaryFileIndex(newFiles)
-
-		newFiles.forEach((file) => filesToAdd.value.push({ file }))
-
-		if (primaryFileIndex !== null) {
-			if (primaryFileIndex) setPrimaryFile(primaryFileIndex)
-		}
-
-		if (
-			filesToAdd.value.length === 1 &&
-			!editingVersion.value &&
-			modal.value?.currentStageIndex === 0
-		) {
-			await addDetectedData()
-			modal.value?.nextStage()
-		}
-
-		handlingNewFiles.value = false
-	}
-
-	// add detected data when the primary file changes
-	watch(
-		() => filesToAdd.value[0]?.file,
-		() => addDetectedData(),
-	)
-
 	// Watch draft version dependencies to fetch project/version data
 	watch(
 		draftVersion,
@@ -751,7 +771,8 @@ export function createManageVersionContext(
 
 		// Methods
 		newDraftVersion,
-		setPrimaryFile,
+		swapPrimaryFile,
+		replacePrimaryFile,
 		getProject,
 		getVersion,
 		handleNewFiles,

From 1fb4bf616063594ff07521ada6908d2ee4b31ab3 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 8 Jan 2026 12:00:14 -0700
Subject: [PATCH 65/83] fix hide stage in breadcrumb

---
 .../src/providers/version/stages/environment-stage.ts    | 1 +
 .../src/providers/version/stages/loaders-stage.ts        | 5 ++---
 .../src/providers/version/stages/mc-versions-stage.ts    | 6 +++---
 packages/ui/src/components/base/MultiStageModal.vue      | 9 ++++++---
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/frontend/src/providers/version/stages/environment-stage.ts b/apps/frontend/src/providers/version/stages/environment-stage.ts
index 7aa32ef1dd..b548d79c1d 100644
--- a/apps/frontend/src/providers/version/stages/environment-stage.ts
+++ b/apps/frontend/src/providers/version/stages/environment-stage.ts
@@ -14,6 +14,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 		ctx.noEnvironmentProject.value ||
 		(!ctx.editingVersion.value && !!ctx.inferredVersionData.value?.environment) ||
 		(ctx.editingVersion.value && !!ctx.draftVersion.value.environment),
+	hideStageInBreadcrumb: (ctx) => !ctx.primaryFile.value || ctx.handlingNewFiles.value,
 	cannotNavigateForward: (ctx) => !ctx.draftVersion.value.environment,
 	leftButtonConfig: (ctx) => ({
 		label: 'Back',
diff --git a/apps/frontend/src/providers/version/stages/loaders-stage.ts b/apps/frontend/src/providers/version/stages/loaders-stage.ts
index 23720f5ead..3e036bcc34 100644
--- a/apps/frontend/src/providers/version/stages/loaders-stage.ts
+++ b/apps/frontend/src/providers/version/stages/loaders-stage.ts
@@ -11,9 +11,8 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	stageContent: markRaw(LoadersStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit loaders' : 'Loaders'),
 	skip: (ctx) =>
-		(ctx.inferredVersionData.value?.loaders?.length ?? 0) > 0 ||
-		!ctx.primaryFile.value ||
-		ctx.editingVersion.value,
+		(ctx.inferredVersionData.value?.loaders?.length ?? 0) > 0 || ctx.editingVersion.value,
+	hideStageInBreadcrumb: (ctx) => !ctx.primaryFile.value || ctx.handlingNewFiles.value,
 	cannotNavigateForward: (ctx) => ctx.draftVersion.value.loaders.length === 0,
 	leftButtonConfig: (ctx) => ({
 		label: 'Back',
diff --git a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
index 7c2cecb599..06355040fb 100644
--- a/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
+++ b/apps/frontend/src/providers/version/stages/mc-versions-stage.ts
@@ -11,9 +11,9 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 	stageContent: markRaw(McVersionsStage),
 	title: (ctx) => (ctx.editingVersion.value ? 'Edit game versions' : 'Game versions'),
 	skip: (ctx) =>
-		(ctx.inferredVersionData.value?.game_versions?.length ?? 0) > 0 ||
-		!ctx.primaryFile.value ||
-		ctx.editingVersion.value,
+		(ctx.inferredVersionData.value?.game_versions?.length ?? 0) > 0 || !ctx.primaryFile.value,
+	hideStageInBreadcrumb: (ctx) => !ctx.primaryFile.value || ctx.handlingNewFiles.value,
+
 	cannotNavigateForward: (ctx) => ctx.draftVersion.value.game_versions.length === 0,
 	leftButtonConfig: (ctx) => ({
 		label: 'Back',
diff --git a/packages/ui/src/components/base/MultiStageModal.vue b/packages/ui/src/components/base/MultiStageModal.vue
index 1aac10ae98..d5ee0dd096 100644
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -123,6 +123,7 @@ export interface StageConfigInput<T> {
 	stageContent: Component
 	title: MaybeCtxFn<T, string>
 	skip?: MaybeCtxFn<T, boolean>
+	hideStageInBreadcrumb?: MaybeCtxFn<T, boolean>
 	nonProgressStage?: MaybeCtxFn<T, boolean>
 	cannotNavigateForward?: MaybeCtxFn<T, boolean>
 	leftButtonConfig: MaybeCtxFn<T, StageButtonConfig | null>
@@ -301,9 +302,11 @@ function onBreadcrumbWheel(e: WheelEvent) {
 // Stages that are not skipped (visible in breadcrumbs)
 const breadcrumbStages = computed(() => {
 	return props.stages.filter((stage) => {
-		const skip =
-			resolveCtxFn(stage.skip, props.context) || resolveCtxFn(stage.nonProgressStage, props.context)
-		return !skip
+		const visibleStep =
+			!resolveCtxFn(stage.skip, props.context) &&
+			!resolveCtxFn(stage.nonProgressStage, props.context) &&
+			!resolveCtxFn(stage.hideStageInBreadcrumb, props.context)
+		return visibleStep
 	})
 })
 

From be119c601ece93d296812a451932daf6f9eb86a0 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 8 Jan 2026 12:25:39 -0700
Subject: [PATCH 66/83] add snapshot group key in case no release version.
 brings out 26.1 snapshots

---
 .../components/McVersionPicker.vue                     | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue b/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
index 575617a68d..cc5438de2f 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
@@ -147,9 +147,15 @@ function groupVersions(gameVersions: GameVersion[]) {
 	)
 
 	const getGroupKey = (v: string) => v.split('.').slice(0, 2).join('.')
+
+	const getSnapshotGroupKey = (v: string) => {
+		const cleanVersion = v.split('-')[0]
+		return cleanVersion.split('.').slice(0, 2).join('.')
+	}
+
 	const groups: Record<string, string[]> = {}
 
-	let currentGroupKey = getGroupKey(gameVersions.find((v) => v.major)?.version || '')
+	let currentGroupKey = getSnapshotGroupKey(gameVersions.find((v) => v.major)?.version || '')
 
 	gameVersions.forEach((gameVersion) => {
 		if (gameVersion.version_type === 'release') {
@@ -157,6 +163,8 @@ function groupVersions(gameVersions: GameVersion[]) {
 			if (!groups[currentGroupKey]) groups[currentGroupKey] = []
 			groups[currentGroupKey].push(gameVersion.version)
 		} else {
+			if (!currentGroupKey) currentGroupKey = getSnapshotGroupKey(gameVersion.version)
+
 			const key = `${currentGroupKey} ${DEV_RELEASE_KEY}`
 			if (!groups[key]) groups[key] = []
 			groups[key].push(gameVersion.version)

From b3331f359079011a3ab9d063126a13b091ca7b09 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 8 Jan 2026 14:46:50 -0700
Subject: [PATCH 67/83] pnpm prepr

---
 .../ui/create-project-version/components/VersionFileRow.vue      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue b/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
index 3bc1de11b7..e7689a75f5 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
@@ -70,6 +70,7 @@ import { ArrowLeftRightIcon, CheckIcon, XIcon } from '@modrinth/assets'
 import { ButtonStyled, Combobox, injectProjectPageContext } from '@modrinth/ui'
 import type { ComboboxOption } from '@modrinth/ui/src/components/base/Combobox.vue'
 import { acceptFileFromProjectType } from '@modrinth/utils'
+
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
 const { projectV2 } = injectProjectPageContext()

From 4c65973d8ba39616490f6c7745d1430454de8720 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 8 Jan 2026 14:56:44 -0700
Subject: [PATCH 68/83] open in group if has something selected

---
 .../components/LoaderPicker.vue               | 13 ++++++++++
 .../components/McVersionPicker.vue            | 25 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/LoaderPicker.vue b/apps/frontend/src/components/ui/create-project-version/components/LoaderPicker.vue
index d20af86444..7a037fd12d 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/LoaderPicker.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/LoaderPicker.vue
@@ -118,4 +118,17 @@ function groupLoaders(loaders: Labrinth.Tags.v2.Loader[]) {
 }
 
 const groupedLoaders = computed(() => groupLoaders(loaders))
+
+onMounted(() => {
+	if (selectedLoaders.value.length === 0) return
+
+	// Find the first group that contains any of the selected loaders
+	const groups = groupedLoaders.value
+	for (const [groupName, loadersInGroup] of Object.entries(groups)) {
+		if (loadersInGroup.some((loader) => selectedLoaders.value.includes(loader.name))) {
+			loaderGroup.value = groupName as GroupLabels
+			break
+		}
+	}
+})
 </script>
diff --git a/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue b/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
index cc5438de2f..8387f72363 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/McVersionPicker.vue
@@ -66,7 +66,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import { SearchIcon } from '@modrinth/assets'
 import { ButtonStyled, Chips } from '@modrinth/ui'
 import { useMagicKeys } from '@vueuse/core'
-import { computed, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 
 type GameVersion = Labrinth.Tags.v2.GameVersion
 
@@ -213,4 +213,27 @@ function compareGroupKeys(a: string, b: string) {
 function searchFilter(gameVersion: Labrinth.Tags.v2.GameVersion) {
 	return gameVersion.version.toLowerCase().includes(searchQuery.value.toLowerCase())
 }
+
+onMounted(async () => {
+	if (props.modelValue.length === 0) return
+
+	// Open non-release tab if any non-release versions are selected
+	const hasNonReleaseVersions = props.gameVersions.some(
+		(v) => props.modelValue.includes(v.version) && v.version_type !== 'release',
+	)
+
+	if (hasNonReleaseVersions) {
+		versionType.value = 'all'
+	}
+
+	await nextTick()
+	const firstSelectedVersion = allVersionsFlat.value.find((v) => props.modelValue.includes(v))
+	if (firstSelectedVersion) {
+		const buttons = Array.from(document.querySelectorAll('button'))
+		const element = buttons.find((btn) => btn.textContent?.trim() === firstSelectedVersion)
+		if (element) {
+			element.scrollIntoView({ behavior: 'smooth', block: 'center' })
+		}
+	}
+})
 </script>

From 2728d89851221fda579cca0aedbc0775d136cd5f Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 8 Jan 2026 15:06:07 -0700
Subject: [PATCH 69/83] fix resource pack loader uneditable if accidentally
 selected on different project type

---
 .../stages/MetadataStage.vue                   | 18 ++++++++++++++++--
 .../providers/version/manage-version-modal.ts  |  2 +-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
index 45a9e1cd45..4ae56a09a1 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/MetadataStage.vue
@@ -190,7 +190,14 @@
 <script lang="ts" setup>
 import type { Labrinth } from '@modrinth/api-client'
 import { EditIcon, UnknownIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, ENVIRONMENTS_COPY, TagItem, useVIntl } from '@modrinth/ui'
+import {
+	ButtonStyled,
+	defineMessages,
+	ENVIRONMENTS_COPY,
+	injectProjectPageContext,
+	TagItem,
+	useVIntl,
+} from '@modrinth/ui'
 import { formatCategory } from '@modrinth/utils'
 
 import { useGeneratedState } from '~/composables/generated'
@@ -212,10 +219,17 @@ const {
 	visibleSuggestedDependencies,
 } = injectManageVersionContext()
 
+const { projectV2 } = injectProjectPageContext()
+
 const generatedState = useGeneratedState()
 const loaders = computed(() => generatedState.value.loaders)
 const isModpack = computed(() => projectType.value === 'modpack')
-const isResourcePack = computed(() => projectType.value === 'resourcepack')
+const isResourcePack = computed(
+	() =>
+		projectType.value === 'resourcepack' &&
+		(projectV2.value?.project_type === 'resourcepack' ||
+			projectV2.value?.project_type === 'project'),
+)
 
 const draftVersionLoaders = computed(() =>
 	[
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index 8ae11a1a91..fc48ace159 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -189,7 +189,7 @@ export function createManageVersionContext(
 		if (loaders.some((loader) => PROJECT_TYPE_LOADERS.datapack.includes(loader))) {
 			return 'datapack'
 		}
-		if (loaders.some((loader) => PROJECT_TYPE_LOADERS.resourcepack.includes(loader))) {
+		if (loaders.length === 1 && loaders[0] === 'minecraft') {
 			return 'resourcepack'
 		}
 		if (loaders.some((loader) => PROJECT_TYPE_LOADERS.shader.includes(loader))) {

From 64fcfe6eaa75e35e8fc22923016b35ea734add55 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 8 Jan 2026 17:40:56 -0700
Subject: [PATCH 70/83] add new environment tags

---
 .../project/ProjectPageVersions.vue           |  32 +++--
 .../project/ProjectSidebarCompatibility.vue   |  90 +--------------
 .../settings/environment/environments.ts      | 109 +++++++++++++++---
 3 files changed, 111 insertions(+), 120 deletions(-)

diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index f73792a460..9ebb07663f 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -155,23 +155,17 @@
 									</TagItem>
 								</div>
 							</div>
-							<div
-								v-if="hasMultipleEnvironments"
-								v-tooltip="
-									ENVIRONMENTS_COPY[version.environment || 'unknown']?.description
-										? formatMessage(ENVIRONMENTS_COPY[version.environment || 'unknown'].description)
-										: undefined
-								"
-								class="flex items-center"
-							>
-								<TagItem class="z-[1] text-center">
-									<component :is="ENVIRONMENTS_COPY[version.environment || 'unknown']?.icon" />
-									{{
-										ENVIRONMENTS_COPY[version.environment || 'unknown']?.title
-											? formatMessage(ENVIRONMENTS_COPY[version.environment || 'unknown'].title)
-											: ''
-									}}
-								</TagItem>
+							<div v-if="hasMultipleEnvironments" class="flex items-center">
+								<div class="flex flex-wrap gap-1">
+									<TagItem
+										v-for="(tag, tagIdx) in getEnvironmentTags(version.environment)"
+										:key="`env-tag-${tagIdx}`"
+										class="z-[1] text-center"
+									>
+										<component :is="tag.icon" />
+										{{ formatMessage(tag.label) }}
+									</TagItem>
+								</div>
 							</div>
 						</div>
 						<div
@@ -237,7 +231,7 @@ import {
 	type GameVersionTag,
 	type Version,
 } from '@modrinth/utils'
-import { computed, type Ref, ref } from 'vue'
+import { computed, ref, type Ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useRelativeTime } from '../../composables'
@@ -246,7 +240,7 @@ import { commonMessages } from '../../utils/common-messages'
 import AutoLink from '../base/AutoLink.vue'
 import TagItem from '../base/TagItem.vue'
 import { Pagination, VersionChannelIndicator, VersionFilterControl } from '../index'
-import { ENVIRONMENTS_COPY } from './settings/environment/environments'
+import { getEnvironmentTags } from './settings/environment/environments'
 
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
diff --git a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
index a213cca65f..658e377a0a 100644
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -29,9 +29,9 @@
 		<section v-if="showEnvironments" class="flex flex-col gap-2">
 			<h3 class="text-primary text-base m-0">{{ formatMessage(messages.environments) }}</h3>
 			<div class="flex flex-wrap gap-1">
-				<TagItem v-for="tag in primaryEnvironmentTags" :key="`environment-tag-${tag.message.id}`">
+				<TagItem v-for="(tag, tagIdx) in primaryEnvironmentTags" :key="`environment-tag-${tagIdx}`">
 					<component :is="tag.icon" />
-					{{ formatMessage(tag.message) }}
+					{{ formatMessage(tag.label) }}
 				</TagItem>
 			</div>
 		</section>
@@ -88,16 +88,12 @@
 import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
 import type { EnvironmentV3, GameVersionTag, PlatformTag, ProjectV3Partial } from '@modrinth/utils'
 import { formatCategory, getVersionsToDisplay } from '@modrinth/utils'
-import { type Component, computed } from 'vue'
+import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
-import {
-	defineMessage,
-	defineMessages,
-	type MessageDescriptor,
-	useVIntl,
-} from '../../composables/i18n'
+import { defineMessages, useVIntl } from '../../composables/i18n'
 import TagItem from '../base/TagItem.vue'
+import { getEnvironmentTags } from './settings/environment/environments'
 
 const { formatMessage } = useVIntl()
 const router = useRouter()
@@ -133,82 +129,8 @@ const primaryEnvironment = computed<EnvironmentV3 | undefined>(() =>
 	props.v3Metadata?.environment?.find((x) => x !== 'unknown'),
 )
 
-type EnvironmentTag = {
-	icon: Component
-	message: MessageDescriptor
-	environments: EnvironmentV3[]
-}
-
-const environmentTags: EnvironmentTag[] = [
-	{
-		icon: ClientIcon,
-		message: defineMessage({
-			id: `project.about.compatibility.environments.client-side`,
-			defaultMessage: 'Client-side',
-		}),
-		environments: [
-			'client_only',
-			'client_only_server_optional',
-			'client_or_server',
-			'client_or_server_prefers_both',
-		],
-	},
-	{
-		icon: ServerIcon,
-		message: defineMessage({
-			id: `project.about.compatibility.environments.server-side`,
-			defaultMessage: 'Server-side',
-		}),
-		environments: [
-			'server_only',
-			'server_only_client_optional',
-			'client_or_server',
-			'client_or_server_prefers_both',
-		],
-	},
-	{
-		icon: ServerIcon,
-		message: defineMessage({
-			id: `project.about.compatibility.environments.dedicated-servers-only`,
-			defaultMessage: 'Dedicated servers only',
-		}),
-		environments: ['dedicated_server_only'],
-	},
-	{
-		icon: UserIcon,
-		message: defineMessage({
-			id: `project.about.compatibility.environments.singleplayer-only`,
-			defaultMessage: 'Singleplayer only',
-		}),
-		environments: ['singleplayer_only'],
-	},
-	{
-		icon: UserIcon,
-		message: defineMessage({
-			id: `project.about.compatibility.environments.singleplayer`,
-			defaultMessage: 'Singleplayer',
-		}),
-		environments: ['server_only'],
-	},
-	{
-		icon: MonitorSmartphoneIcon,
-		message: defineMessage({
-			id: `project.about.compatibility.environments.client-and-server`,
-			defaultMessage: 'Client and server',
-		}),
-		environments: [
-			'client_and_server',
-			'client_only_server_optional',
-			'server_only_client_optional',
-			'client_or_server_prefers_both',
-		],
-	},
-]
-
 const primaryEnvironmentTags = computed(() => {
-	return primaryEnvironment.value
-		? environmentTags.filter((x) => x.environments.includes(primaryEnvironment.value ?? 'unknown'))
-		: []
+	return getEnvironmentTags(primaryEnvironment.value)
 })
 
 const messages = defineMessages({
diff --git a/packages/ui/src/components/project/settings/environment/environments.ts b/packages/ui/src/components/project/settings/environment/environments.ts
index cc67c47899..a74f4baafe 100644
--- a/packages/ui/src/components/project/settings/environment/environments.ts
+++ b/packages/ui/src/components/project/settings/environment/environments.ts
@@ -1,12 +1,15 @@
 import type { Labrinth } from '@modrinth/api-client'
-import { ClientIcon, MonitorSmartphoneIcon, ServerIcon, UserIcon } from '@modrinth/assets'
+import { ClientIcon, ServerIcon, UserIcon } from '@modrinth/assets'
 import type { Component } from 'vue'
 
 import { defineMessage, type MessageDescriptor } from '../../../../composables/i18n'
 
 export const ENVIRONMENTS_COPY: Record<
 	Labrinth.Projects.v3.Environment,
-	{ title: MessageDescriptor; description: MessageDescriptor; icon?: Component }
+	{
+		title: MessageDescriptor
+		description: MessageDescriptor
+	}
 > = {
 	client_only: {
 		title: defineMessage({
@@ -18,19 +21,17 @@ export const ENVIRONMENTS_COPY: Record<
 			defaultMessage:
 				'All functionality is done client-side and is compatible with vanilla servers.',
 		}),
-		icon: ClientIcon,
 	},
 	server_only: {
 		title: defineMessage({
 			id: 'project.environment.server-only.title',
-			defaultMessage: 'Server-side only',
+			defaultMessage: 'Server-side only, works in singleplayer too',
 		}),
 		description: defineMessage({
 			id: 'project.environment.server-only.description',
 			defaultMessage:
 				'All functionality is done server-side and is compatible with vanilla clients.',
 		}),
-		icon: ServerIcon,
 	},
 	singleplayer_only: {
 		title: defineMessage({
@@ -42,7 +43,6 @@ export const ENVIRONMENTS_COPY: Record<
 			defaultMessage:
 				'Only functions in Singleplayer or when not connected to a Multiplayer server.',
 		}),
-		icon: UserIcon,
 	},
 	dedicated_server_only: {
 		title: defineMessage({
@@ -54,67 +54,61 @@ export const ENVIRONMENTS_COPY: Record<
 			defaultMessage:
 				'All functionality is done server-side and is compatible with vanilla clients.',
 		}),
-		icon: ServerIcon,
 	},
 	client_and_server: {
 		title: defineMessage({
 			id: 'project.environment.client-and-server.title',
-			defaultMessage: 'Client and server',
+			defaultMessage: 'Client and server, required on both',
 		}),
 		description: defineMessage({
 			id: 'project.environment.client-and-server.description',
 			defaultMessage:
 				'Has some functionality on both the client and server, even if only partially.',
 		}),
-		icon: MonitorSmartphoneIcon,
 	},
 	client_only_server_optional: {
 		title: defineMessage({
 			id: 'project.environment.client-only-server-optional.title',
-			defaultMessage: 'Client and server',
+			defaultMessage: 'Client and server, optional on server',
 		}),
 		description: defineMessage({
 			id: 'project.environment.client-only-server-optional.description',
 			defaultMessage:
 				'Has some functionality on both the client and server, even if only partially.',
 		}),
-		icon: MonitorSmartphoneIcon,
 	},
 	server_only_client_optional: {
 		title: defineMessage({
 			id: 'project.environment.server-only-client-optional.title',
-			defaultMessage: 'Client and server',
+			defaultMessage: 'Client and server, optional on client',
 		}),
 		description: defineMessage({
 			id: 'project.environment.server-only-client-optional.description',
 			defaultMessage:
 				'Has some functionality on both the client and server, even if only partially.',
 		}),
-		icon: MonitorSmartphoneIcon,
 	},
 	client_or_server: {
 		title: defineMessage({
 			id: 'project.environment.client-or-server.title',
-			defaultMessage: 'Client and server',
+			defaultMessage: 'Client and server, optional on both',
 		}),
 		description: defineMessage({
 			id: 'project.environment.client-or-server.description',
 			defaultMessage:
 				'Has some functionality on both the client and server, even if only partially.',
 		}),
-		icon: MonitorSmartphoneIcon,
 	},
 	client_or_server_prefers_both: {
 		title: defineMessage({
 			id: 'project.environment.client-or-server-prefers-both.title',
-			defaultMessage: 'Client and server',
+			defaultMessage: 'Client and server, best when installed on both',
 		}),
 		description: defineMessage({
 			id: 'project.environment.client-or-server-prefers-both.description',
 			defaultMessage:
 				'Has some functionality on both the client and server, even if only partially.',
 		}),
-		icon: MonitorSmartphoneIcon,
 	},
 	unknown: {
 		title: defineMessage({
@@ -127,3 +121,84 @@ export const ENVIRONMENTS_COPY: Record<
 		}),
 	},
 }
+
+export const ENVIRONMENT_TAG_LABELS = {
+	client: defineMessage({
+		id: 'project.environment.tag.client',
+		defaultMessage: 'Client',
+	}),
+	server: defineMessage({
+		id: 'project.environment.tag.server',
+		defaultMessage: 'Server',
+	}),
+	singleplayer: defineMessage({
+		id: 'project.environment.tag.singleplayer',
+		defaultMessage: 'Singleplayer',
+	}),
+	clientOptional: defineMessage({
+		id: 'project.environment.tag.client-optional',
+		defaultMessage: 'Client optional',
+	}),
+	serverOptional: defineMessage({
+		id: 'project.environment.tag.server-optional',
+		defaultMessage: 'Server optional',
+	}),
+} as const
+
+export function getEnvironmentTags(
+	environment?: Labrinth.Projects.v3.Environment,
+): Array<{ icon: Component; label: MessageDescriptor }> {
+	if (!environment || environment === 'unknown') {
+		return []
+	}
+
+	switch (environment) {
+		case 'client_only':
+			return [{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.client }]
+
+		case 'server_only':
+			return [
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.server },
+				{ icon: UserIcon, label: ENVIRONMENT_TAG_LABELS.singleplayer },
+			]
+
+		case 'singleplayer_only':
+			return [{ icon: UserIcon, label: ENVIRONMENT_TAG_LABELS.singleplayer }]
+
+		case 'dedicated_server_only':
+			return [{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.server }]
+
+		case 'client_and_server':
+			return [
+				{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.client },
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.server },
+			]
+
+		case 'client_only_server_optional':
+			return [
+				{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.client },
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.serverOptional },
+			]
+
+		case 'server_only_client_optional':
+			return [
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.server },
+				{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.clientOptional },
+			]
+
+		case 'client_or_server':
+			return [
+				{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.clientOptional },
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.serverOptional },
+			]
+
+		case 'client_or_server_prefers_both':
+			return [
+				{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.clientOptional },
+				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.serverOptional },
+			]
+
+		default:
+			return []
+	}
+}

From 02df537c9284d02fc21c83c4e8f7ed830d938bdd Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 8 Jan 2026 17:48:48 -0700
Subject: [PATCH 71/83] add unknown and not applicable environment tags

---
 .../settings/environment/environments.ts      | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/project/settings/environment/environments.ts b/packages/ui/src/components/project/settings/environment/environments.ts
index a74f4baafe..f63ea4ddd7 100644
--- a/packages/ui/src/components/project/settings/environment/environments.ts
+++ b/packages/ui/src/components/project/settings/environment/environments.ts
@@ -143,15 +143,19 @@ export const ENVIRONMENT_TAG_LABELS = {
 		id: 'project.environment.tag.server-optional',
 		defaultMessage: 'Server optional',
 	}),
+	unknown: defineMessage({
+		id: 'project.environment.tag.unknown',
+		defaultMessage: 'Unknown',
+	}),
+	notApplicable: defineMessage({
+		id: 'project.environment.tag.not-applicable',
+		defaultMessage: 'N/A',
+	}),
 } as const
 
 export function getEnvironmentTags(
 	environment?: Labrinth.Projects.v3.Environment,
-): Array<{ icon: Component; label: MessageDescriptor }> {
-	if (!environment || environment === 'unknown') {
-		return []
-	}
-
+): Array<{ icon: Component | null; label: MessageDescriptor }> {
 	switch (environment) {
 		case 'client_only':
 			return [{ icon: ClientIcon, label: ENVIRONMENT_TAG_LABELS.client }]
@@ -198,7 +202,10 @@ export function getEnvironmentTags(
 				{ icon: ServerIcon, label: ENVIRONMENT_TAG_LABELS.serverOptional },
 			]
 
+		case 'unknown':
+			return [{ label: ENVIRONMENT_TAG_LABELS.unknown, icon: null }]
+
 		default:
-			return []
+			return [{ label: ENVIRONMENT_TAG_LABELS.notApplicable, icon: null }]
 	}
 }

From 62780d94cbc399a2645a9eb504ff4ccbff08e41e Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 8 Jan 2026 17:56:51 -0700
Subject: [PATCH 72/83] pnpm prepr

---
 .../project/ProjectPageVersions.vue           |  2 +-
 packages/ui/src/locales/en-US/index.json      | 51 ++++++++++---------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/packages/ui/src/components/project/ProjectPageVersions.vue b/packages/ui/src/components/project/ProjectPageVersions.vue
index 9ebb07663f..f433f31347 100644
--- a/packages/ui/src/components/project/ProjectPageVersions.vue
+++ b/packages/ui/src/components/project/ProjectPageVersions.vue
@@ -231,7 +231,7 @@ import {
 	type GameVersionTag,
 	type Version,
 } from '@modrinth/utils'
-import { computed, ref, type Ref } from 'vue'
+import { computed, type Ref, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useRelativeTime } from '../../composables'
diff --git a/packages/ui/src/locales/en-US/index.json b/packages/ui/src/locales/en-US/index.json
index e48de6d9da..9346e240c4 100644
--- a/packages/ui/src/locales/en-US/index.json
+++ b/packages/ui/src/locales/en-US/index.json
@@ -593,24 +593,6 @@
   "project.about.compatibility.environments": {
     "defaultMessage": "Supported environments"
   },
-  "project.about.compatibility.environments.client-and-server": {
-    "defaultMessage": "Client and server"
-  },
-  "project.about.compatibility.environments.client-side": {
-    "defaultMessage": "Client-side"
-  },
-  "project.about.compatibility.environments.dedicated-servers-only": {
-    "defaultMessage": "Dedicated servers only"
-  },
-  "project.about.compatibility.environments.server-side": {
-    "defaultMessage": "Server-side"
-  },
-  "project.about.compatibility.environments.singleplayer": {
-    "defaultMessage": "Singleplayer"
-  },
-  "project.about.compatibility.environments.singleplayer-only": {
-    "defaultMessage": "Singleplayer only"
-  },
   "project.about.compatibility.game.minecraftJava": {
     "defaultMessage": "Minecraft: Java Edition"
   },
@@ -681,13 +663,13 @@
     "defaultMessage": "Has some functionality on both the client and server, even if only partially."
   },
   "project.environment.client-and-server.title": {
-    "defaultMessage": "Client and server"
+    "defaultMessage": "Client and server, required on both"
   },
   "project.environment.client-only-server-optional.description": {
     "defaultMessage": "Has some functionality on both the client and server, even if only partially."
   },
   "project.environment.client-only-server-optional.title": {
-    "defaultMessage": "Client and server"
+    "defaultMessage": "Client and server, optional on server"
   },
   "project.environment.client-only.description": {
     "defaultMessage": "All functionality is done client-side and is compatible with vanilla servers."
@@ -699,13 +681,13 @@
     "defaultMessage": "Has some functionality on both the client and server, even if only partially."
   },
   "project.environment.client-or-server-prefers-both.title": {
-    "defaultMessage": "Client and server"
+    "defaultMessage": "Client and server, best when installed on both"
   },
   "project.environment.client-or-server.description": {
     "defaultMessage": "Has some functionality on both the client and server, even if only partially."
   },
   "project.environment.client-or-server.title": {
-    "defaultMessage": "Client and server"
+    "defaultMessage": "Client and server, optional on both"
   },
   "project.environment.dedicated-server-only.description": {
     "defaultMessage": "All functionality is done server-side and is compatible with vanilla clients."
@@ -717,13 +699,13 @@
     "defaultMessage": "Has some functionality on both the client and server, even if only partially."
   },
   "project.environment.server-only-client-optional.title": {
-    "defaultMessage": "Client and server"
+    "defaultMessage": "Client and server, optional on client"
   },
   "project.environment.server-only.description": {
     "defaultMessage": "All functionality is done server-side and is compatible with vanilla clients."
   },
   "project.environment.server-only.title": {
-    "defaultMessage": "Server-side only"
+    "defaultMessage": "Server-side only, works in singleplayer too"
   },
   "project.environment.singleplayer-only.description": {
     "defaultMessage": "Only functions in Singleplayer or when not connected to a Multiplayer server."
@@ -731,6 +713,27 @@
   "project.environment.singleplayer-only.title": {
     "defaultMessage": "Singleplayer only"
   },
+  "project.environment.tag.client": {
+    "defaultMessage": "Client"
+  },
+  "project.environment.tag.client-optional": {
+    "defaultMessage": "Client optional"
+  },
+  "project.environment.tag.not-applicable": {
+    "defaultMessage": "N/A"
+  },
+  "project.environment.tag.server": {
+    "defaultMessage": "Server"
+  },
+  "project.environment.tag.server-optional": {
+    "defaultMessage": "Server optional"
+  },
+  "project.environment.tag.singleplayer": {
+    "defaultMessage": "Singleplayer"
+  },
+  "project.environment.tag.unknown": {
+    "defaultMessage": "Unknown"
+  },
   "project.environment.unknown.description": {
     "defaultMessage": "The environment for this version could not be determined."
   },

From f2a1f5feef894df421d0dea375f9a34ed1f343c8 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sat, 10 Jan 2026 11:28:50 -0700
Subject: [PATCH 73/83] use shared constant on labels

---
 .../components/VersionFileRow.vue             | 21 +++++++++++--------
 .../components/ViewOnlyFileRow.vue            | 12 +----------
 .../providers/version/manage-version-modal.ts | 11 ++++++++++
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue b/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
index e7689a75f5..bc74a25977 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/VersionFileRow.vue
@@ -71,7 +71,10 @@ import { ButtonStyled, Combobox, injectProjectPageContext } from '@modrinth/ui'
 import type { ComboboxOption } from '@modrinth/ui/src/components/base/Combobox.vue'
 import { acceptFileFromProjectType } from '@modrinth/utils'
 
-import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
+import {
+	fileTypeLabels,
+	injectManageVersionContext,
+} from '~/providers/version/manage-version-modal'
 
 const { projectV2 } = injectProjectPageContext()
 const { projectType } = injectManageVersionContext()
@@ -97,22 +100,22 @@ const isDatapackProject = computed(() => projectType.value === 'datapack')
 const versionTypes = computed(
 	() =>
 		[
-			!editingVersion && { class: 'text-sm', value: 'primary', label: 'Primary' },
-			{ class: 'text-sm', value: 'unknown', label: 'Other' },
+			!editingVersion && { class: 'text-sm', value: 'primary', label: fileTypeLabels.primary },
+			{ class: 'text-sm', value: 'unknown', label: fileTypeLabels.unknown },
 			isDatapackProject.value && {
 				class: 'text-sm',
 				value: 'required-resource-pack',
-				label: 'Required RP',
+				label: fileTypeLabels['required-resource-pack'],
 			},
 			isDatapackProject.value && {
 				class: 'text-sm',
 				value: 'optional-resource-pack',
-				label: 'Optional RP',
+				label: fileTypeLabels['optional-resource-pack'],
 			},
-			{ class: 'text-sm', value: 'sources-jar', label: 'Sources JAR' },
-			{ class: 'text-sm', value: 'dev-jar', label: 'Dev JAR' },
-			{ class: 'text-sm', value: 'javadoc-jar', label: 'Javadoc JAR' },
-			{ class: 'text-sm', value: 'signature', label: 'Signature' },
+			{ class: 'text-sm', value: 'sources-jar', label: fileTypeLabels['sources-jar'] },
+			{ class: 'text-sm', value: 'dev-jar', label: fileTypeLabels['dev-jar'] },
+			{ class: 'text-sm', value: 'javadoc-jar', label: fileTypeLabels['javadoc-jar'] },
+			{ class: 'text-sm', value: 'signature', label: fileTypeLabels.signature },
 		].filter(Boolean) as ComboboxOption<Labrinth.Versions.v3.FileType | 'primary'>[],
 )
 
diff --git a/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue b/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue
index 2902b477d4..203206bcc1 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue
@@ -21,21 +21,11 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { FileIcon, FilePlusIcon } from '@modrinth/assets'
 import { TagItem } from '@modrinth/ui'
+import { fileTypeLabels } from '~/providers/version/manage-version-modal'
 
 const { name, isPrimary, fileType } = defineProps<{
 	name: string
 	isPrimary?: boolean
 	fileType?: Labrinth.Versions.v3.FileType | 'primary'
 }>()
-
-const fileTypeLabels: Record<Labrinth.Versions.v3.FileType | 'primary', string> = {
-	primary: 'Primary',
-	unknown: 'Other',
-	'required-resource-pack': 'Required RP',
-	'optional-resource-pack': 'Optional RP',
-	'sources-jar': 'Sources JAR',
-	'dev-jar': 'Dev JAR',
-	'javadoc-jar': 'Javadoc JAR',
-	signature: 'Signature',
-}
 </script>
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index fc48ace159..da00976bc7 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -145,6 +145,17 @@ const PROJECT_TYPE_LOADERS: Record<string, readonly string[]> = {
 	modpack: ['mrpack'],
 } as const
 
+export const fileTypeLabels: Record<Labrinth.Versions.v3.FileType | 'primary', string> = {
+	primary: 'Primary',
+	unknown: 'Other',
+	'required-resource-pack': 'Required RP',
+	'optional-resource-pack': 'Optional RP',
+	'sources-jar': 'Sources JAR',
+	'dev-jar': 'Dev JAR',
+	'javadoc-jar': 'Javadoc JAR',
+	signature: 'Signature',
+}
+
 export const [injectManageVersionContext, provideManageVersionContext] =
 	createContext<ManageVersionContextValue>('CreateProjectVersionModal')
 

From 939485672c96c67329f53545ef47d31012f7d849 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sat, 10 Jan 2026 11:42:01 -0700
Subject: [PATCH 74/83] use ref for timeout

---
 apps/frontend/src/providers/version/manage-version-modal.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index da00976bc7..e23ab61f5d 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -180,7 +180,7 @@ export function createManageVersionContext(
 
 	const isSubmitting = ref(false)
 	const isUploading = ref(false)
-	let uploadingTimeout: ReturnType<typeof setTimeout> | null = null
+	let uploadingTimeout: Ref<ReturnType<typeof setTimeout> | null> = ref(null)
 
 	const projectType = computed<Labrinth.Projects.v2.ProjectType>(() => {
 		const primaryFile = filesToAdd.value[0]?.file
@@ -615,7 +615,7 @@ export function createManageVersionContext(
 		isUploading.value = false
 
 		// Show "Uploading version" after 5 seconds
-		uploadingTimeout = setTimeout(() => {
+		uploadingTimeout.value = setTimeout(() => {
 			isUploading.value = true
 		}, 5000)
 
@@ -638,7 +638,7 @@ export function createManageVersionContext(
 				type: 'error',
 			})
 		}
-		if (uploadingTimeout) clearTimeout(uploadingTimeout)
+		if (uploadingTimeout.value) clearTimeout(uploadingTimeout.value)
 		isUploading.value = false
 		isSubmitting.value = false
 	}

From bb3030918fd5a3845aebb1f073f3e87e898f0454 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sat, 10 Jan 2026 11:42:43 -0700
Subject: [PATCH 75/83] remove console logs

---
 apps/frontend/src/providers/version/manage-version-modal.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index e23ab61f5d..f965dd8d44 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -273,9 +273,7 @@ export function createManageVersionContext(
 	}
 
 	async function replacePrimaryFile(file: File) {
-		console.log('Replacing primary file with', file)
 		if (file && !editingVersion.value) {
-			console.log('switing')
 			filesToAdd.value[0] = { file }
 		}
 		if (await rejectOnRedundantWrappedZip(file)) return
@@ -539,7 +537,6 @@ export function createManageVersionContext(
 
 			const environment = await inferEnvironmentFromVersions(projectId, loaders)
 			if (environment && !draftVersion.value.environment) {
-				console.log('Inferred environment:', environment)
 				draftVersion.value.environment = environment
 				inferredVersionData.value = { ...inferredVersionData.value, environment }
 			}

From 7d470cf8bab1a619a443712a48ae886dcad31774 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sat, 10 Jan 2026 12:09:00 -0700
Subject: [PATCH 76/83] remove box shadow only for cm-content

---
 packages/assets/styles/defaults.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/assets/styles/defaults.scss b/packages/assets/styles/defaults.scss
index 6162c185ac..3031cb534b 100644
--- a/packages/assets/styles/defaults.scss
+++ b/packages/assets/styles/defaults.scss
@@ -61,6 +61,9 @@ textarea,
 	font-weight: var(--font-weight-medium);
 	transition: box-shadow 0.1s ease-in-out;
 	min-height: 36px;
+	box-shadow:
+		var(--shadow-inset-sm),
+		0 0 0 0 transparent;
 	border: none;
 	outline: none;
 
@@ -83,6 +86,7 @@ textarea,
 
 .cm-content {
 	white-space: pre-wrap !important;
+  box-shadow: none;
 }
 
 input[type='number'] {

From 249eca55f3729cbd34e1e67f19aaa812530c75df Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Sat, 10 Jan 2026 19:46:40 +0000
Subject: [PATCH 77/83] feat: xhr upload + fix wrangler prettierignore

---
 apps/frontend/.prettierignore                 |  1 +
 .../components/ViewOnlyFileRow.vue            |  1 +
 .../stages/AddFilesStage.vue                  | 20 ++++++-
 .../stages/UploadingStage.vue                 | 31 +++++++++++
 .../providers/version/manage-version-modal.ts | 48 ++++++++++++----
 .../src/providers/version/stages/index.ts     |  2 +
 .../version/stages/uploading-stage.ts         | 18 ++++++
 .../api-client/src/core/abstract-client.ts    | 26 +++++++--
 .../src/core/abstract-upload-client.ts        |  4 +-
 .../src/modules/labrinth/versions/v3.ts       | 27 +++------
 .../src/platform/xhr-upload-client.ts         | 14 ++++-
 packages/api-client/src/types/upload.ts       | 55 ++++++++++++++++---
 12 files changed, 199 insertions(+), 48 deletions(-)
 create mode 100644 apps/frontend/src/components/ui/create-project-version/stages/UploadingStage.vue
 create mode 100644 apps/frontend/src/providers/version/stages/uploading-stage.ts

diff --git a/apps/frontend/.prettierignore b/apps/frontend/.prettierignore
index b16cc9509d..3e5316e292 100644
--- a/apps/frontend/.prettierignore
+++ b/apps/frontend/.prettierignore
@@ -2,6 +2,7 @@
 **/dist
 **/.output
 **/.data
+**/.wrangler
 src/generated/**
 src/locales/**
 src/public/news/feed
diff --git a/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue b/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue
index 203206bcc1..899a67533d 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/ViewOnlyFileRow.vue
@@ -21,6 +21,7 @@
 import type { Labrinth } from '@modrinth/api-client'
 import { FileIcon, FilePlusIcon } from '@modrinth/assets'
 import { TagItem } from '@modrinth/ui'
+
 import { fileTypeLabels } from '~/providers/version/manage-version-modal'
 
 const { name, isPrimary, fileType } = defineProps<{
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index 46b144af73..ee1de96833 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -1,5 +1,21 @@
 <template>
 	<div class="flex w-full flex-col gap-4">
+		<div v-if="isUploading && filesToAdd.length > 0" class="rounded-lg bg-bg-raised p-4">
+			<div class="mb-2 flex justify-between text-sm">
+				<span class="font-semibold">Uploading files...</span>
+				<span class="text-secondary">
+					{{ Math.round(uploadProgress.progress * 100) }}% -
+					{{ formatBytes(uploadProgress.loaded) }} / {{ formatBytes(uploadProgress.total) }}
+				</span>
+			</div>
+			<div class="h-2 w-full rounded-full bg-button-bg">
+				<div
+					class="h-2 rounded-full bg-brand transition-all duration-300"
+					:style="{ width: `${uploadProgress.progress * 100}%` }"
+				></div>
+			</div>
+		</div>
+
 		<template
 			v-if="handlingNewFiles || !(filesToAdd.length || draftVersion.existing_files?.length)"
 		>
@@ -93,7 +109,7 @@ import {
 	injectProjectPageContext,
 	useVIntl,
 } from '@modrinth/ui'
-import { acceptFileFromProjectType } from '@modrinth/utils'
+import { acceptFileFromProjectType, formatBytes } from '@modrinth/utils'
 
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
@@ -112,6 +128,8 @@ const {
 	editingVersion,
 	primaryFile,
 	handleNewFiles,
+	isUploading,
+	uploadProgress,
 } = injectManageVersionContext()
 
 function handleRemoveFile(index: number) {
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/UploadingStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/UploadingStage.vue
new file mode 100644
index 0000000000..53d16047e7
--- /dev/null
+++ b/apps/frontend/src/components/ui/create-project-version/stages/UploadingStage.vue
@@ -0,0 +1,31 @@
+<template>
+	<div class="flex w-full flex-col items-center justify-center gap-6 py-8">
+		<div class="text-center">
+			<h3 class="text-lg font-semibold text-contrast">Uploading version</h3>
+			<p class="mt-1 text-secondary">Please wait while your files are being uploaded...</p>
+		</div>
+
+		<div class="w-full max-w-md">
+			<div class="mb-2 flex justify-between text-sm">
+				<span class="font-semibold">{{ Math.round(uploadProgress.progress * 100) }}%</span>
+				<span class="text-secondary">
+					{{ formatBytes(uploadProgress.loaded) }} / {{ formatBytes(uploadProgress.total) }}
+				</span>
+			</div>
+			<div class="h-2 w-full rounded-full bg-button-bg">
+				<div
+					class="h-2 rounded-full bg-brand transition-all duration-300 ease-out"
+					:style="{ width: `${uploadProgress.progress * 100}%` }"
+				></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { formatBytes } from '@modrinth/utils'
+
+import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
+
+const { uploadProgress } = injectManageVersionContext()
+</script>
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index f965dd8d44..c1782d38f9 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -1,4 +1,4 @@
-import type { Labrinth } from '@modrinth/api-client'
+import type { Labrinth, UploadProgress } from '@modrinth/api-client'
 import { SaveIcon, SpinnerIcon } from '@modrinth/assets'
 import {
 	createContext,
@@ -86,6 +86,7 @@ export interface ManageVersionContextValue {
 	stageConfigs: StageConfigInput<ManageVersionContextValue>[]
 	isSubmitting: Ref<boolean>
 	isUploading: Ref<boolean>
+	uploadProgress: Ref<UploadProgress>
 	modal: ShallowRef<ComponentExposed<typeof MultiStageModal> | null>
 
 	// Computed state
@@ -180,7 +181,7 @@ export function createManageVersionContext(
 
 	const isSubmitting = ref(false)
 	const isUploading = ref(false)
-	let uploadingTimeout: Ref<ReturnType<typeof setTimeout> | null> = ref(null)
+	const uploadProgress = ref<UploadProgress>({ loaded: 0, total: 0, progress: 0 })
 
 	const projectType = computed<Labrinth.Projects.v2.ProjectType>(() => {
 		const primaryFile = filesToAdd.value[0]?.file
@@ -609,17 +610,29 @@ export function createManageVersionContext(
 		const version = toRaw(draftVersion.value)
 		const files = toRaw(filesToAdd.value)
 		isSubmitting.value = true
-		isUploading.value = false
+		isUploading.value = true
 
-		// Show "Uploading version" after 5 seconds
-		uploadingTimeout.value = setTimeout(() => {
-			isUploading.value = true
-		}, 5000)
+		// Reset progress and navigate to uploading stage
+		uploadProgress.value = { loaded: 0, total: 0, progress: 0 }
+		modal.value?.setStage('uploading')
 
 		if (noEnvironmentProject.value) version.environment = undefined
 
 		try {
-			await labrinth.versions_v3.createVersion(version, files, projectType.value ?? null)
+			const uploadHandle = labrinth.versions_v3.createVersion(
+				version,
+				files,
+				projectType.value ?? null,
+			)
+
+			// Subscribe to progress updates
+			uploadHandle.onProgress((progress) => {
+				uploadProgress.value = progress
+			})
+
+			// Wait for upload to complete
+			await uploadHandle.promise
+
 			modal.value?.hide()
 			addNotification({
 				title: 'Project version created',
@@ -629,13 +642,14 @@ export function createManageVersionContext(
 			await refreshVersions()
 			onSave?.()
 		} catch (err: any) {
+			// On failure, go back to details stage and show error
+			modal.value?.setStage('add-details')
 			addNotification({
 				title: 'Could not create project version',
 				text: err.data ? err.data.description : err,
 				type: 'error',
 			})
 		}
-		if (uploadingTimeout.value) clearTimeout(uploadingTimeout.value)
 		isUploading.value = false
 		isSubmitting.value = false
 	}
@@ -647,6 +661,12 @@ export function createManageVersionContext(
 
 		isSubmitting.value = true
 
+		// Reset progress if we have files to upload
+		if (files.length > 0) {
+			isUploading.value = true
+			uploadProgress.value = { loaded: 0, total: 0, progress: 0 }
+		}
+
 		if (noEnvironmentProject.value) version.environment = undefined
 
 		try {
@@ -673,7 +693,13 @@ export function createManageVersionContext(
 			await labrinth.versions_v3.modifyVersion(version.version_id, data)
 
 			if (files.length > 0) {
-				await labrinth.versions_v3.addFilesToVersion(version.version_id, files)
+				const uploadHandle = labrinth.versions_v3.addFilesToVersion(version.version_id, files)
+
+				uploadHandle.onProgress((progress) => {
+					uploadProgress.value = progress
+				})
+
+				await uploadHandle.promise
 			}
 
 			// Delete files that were marked for deletion
@@ -698,6 +724,7 @@ export function createManageVersionContext(
 				type: 'error',
 			})
 		}
+		isUploading.value = false
 		isSubmitting.value = false
 	}
 
@@ -766,6 +793,7 @@ export function createManageVersionContext(
 		stageConfigs,
 		isSubmitting,
 		isUploading,
+		uploadProgress,
 		modal,
 
 		// Computed
diff --git a/apps/frontend/src/providers/version/stages/index.ts b/apps/frontend/src/providers/version/stages/index.ts
index 165c5b94cb..62c103d883 100644
--- a/apps/frontend/src/providers/version/stages/index.ts
+++ b/apps/frontend/src/providers/version/stages/index.ts
@@ -20,6 +20,7 @@ import {
 	stageConfig as mcVersionsStageConfig,
 } from './mc-versions-stage'
 import { stageConfig as metadataStageConfig } from './metadata-stage'
+import { stageConfig as uploadingStageConfig } from './uploading-stage'
 
 export const stageConfigs = [
 	addFilesStageConfig,
@@ -29,6 +30,7 @@ export const stageConfigs = [
 	dependenciesStageConfig,
 	metadataStageConfig,
 	detailsStageConfig,
+	uploadingStageConfig,
 
 	// Non-progress stages for editing from details page
 	fromDetailsLoadersStageConfig,
diff --git a/apps/frontend/src/providers/version/stages/uploading-stage.ts b/apps/frontend/src/providers/version/stages/uploading-stage.ts
new file mode 100644
index 0000000000..229fb8652f
--- /dev/null
+++ b/apps/frontend/src/providers/version/stages/uploading-stage.ts
@@ -0,0 +1,18 @@
+import type { StageConfigInput } from '@modrinth/ui'
+import { markRaw } from 'vue'
+
+import UploadingStage from '~/components/ui/create-project-version/stages/UploadingStage.vue'
+
+import type { ManageVersionContextValue } from '../manage-version-modal'
+
+export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
+	id: 'uploading',
+	stageContent: markRaw(UploadingStage),
+	title: 'Uploading',
+	maxWidth: '500px',
+	hideStageInBreadcrumb: true,
+	skip: (ctx) => !ctx.isUploading.value,
+	leftButtonConfig: () => null,
+	rightButtonConfig: () => null,
+	nonProgressStage: true,
+}
diff --git a/packages/api-client/src/core/abstract-client.ts b/packages/api-client/src/core/abstract-client.ts
index 4763fc2f54..42429d3ae3 100644
--- a/packages/api-client/src/core/abstract-client.ts
+++ b/packages/api-client/src/core/abstract-client.ts
@@ -248,16 +248,32 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 	 * Build context for an upload request
 	 *
 	 * Sets metadata.isUpload = true so features can detect uploads.
+	 * Supports both single file uploads and FormData uploads.
 	 */
 	protected buildUploadContext(
 		url: string,
 		path: string,
 		options: UploadRequestOptions,
 	): RequestContext {
-		const metadata: UploadMetadata = {
-			isUpload: true,
-			file: options.file,
-			onProgress: options.onProgress,
+		let metadata: UploadMetadata
+		let body: File | Blob | FormData
+
+		if ('formData' in options && options.formData) {
+			metadata = {
+				isUpload: true,
+				formData: options.formData,
+				onProgress: options.onProgress,
+			}
+			body = options.formData
+		} else if ('file' in options && options.file) {
+			metadata = {
+				isUpload: true,
+				file: options.file,
+				onProgress: options.onProgress,
+			}
+			body = options.file
+		} else {
+			throw new Error('Upload options must include either file or formData')
 		}
 
 		return {
@@ -266,7 +282,7 @@ export abstract class AbstractModrinthClient extends AbstractUploadClient {
 			options: {
 				...options,
 				method: 'POST',
-				body: options.file,
+				body,
 			},
 			attempt: 1,
 			startTime: Date.now(),
diff --git a/packages/api-client/src/core/abstract-upload-client.ts b/packages/api-client/src/core/abstract-upload-client.ts
index b0c75cee8e..5f3974ea73 100644
--- a/packages/api-client/src/core/abstract-upload-client.ts
+++ b/packages/api-client/src/core/abstract-upload-client.ts
@@ -12,9 +12,9 @@ import type { UploadHandle, UploadRequestOptions } from '../types/upload'
  */
 export abstract class AbstractUploadClient {
 	/**
-	 * Upload a file with progress tracking
+	 * Upload a file or FormData with progress tracking
 	 * @param path - API path (e.g., '/fs/create')
-	 * @param options - Upload options including file, api, version
+	 * @param options - Upload options including file or formData, api, version
 	 * @returns UploadHandle with promise, onProgress chain, and cancel method
 	 */
 	abstract upload<T = void>(path: string, options: UploadRequestOptions): UploadHandle<T>
diff --git a/packages/api-client/src/modules/labrinth/versions/v3.ts b/packages/api-client/src/modules/labrinth/versions/v3.ts
index 71c3231c2f..91dea2c6e8 100644
--- a/packages/api-client/src/modules/labrinth/versions/v3.ts
+++ b/packages/api-client/src/modules/labrinth/versions/v3.ts
@@ -1,4 +1,5 @@
 import { AbstractModule } from '../../../core/abstract-module'
+import type { UploadHandle } from '../../../types/upload'
 import type { Labrinth } from '../types'
 
 export class LabrinthVersionsV3Module extends AbstractModule {
@@ -136,11 +137,11 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 	 * ```
 	 */
 
-	public async createVersion(
+	public createVersion(
 		draftVersion: Labrinth.Versions.v3.DraftVersion,
 		versionFiles: Labrinth.Versions.v3.DraftVersionFile[],
 		projectType: Labrinth.Projects.v2.ProjectType | null = null,
-	): Promise<Labrinth.Versions.v3.Version> {
+	): UploadHandle<Labrinth.Versions.v3.Version> {
 		const formData = new FormData()
 
 		const files = versionFiles.map((vf) => vf.file)
@@ -185,18 +186,12 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 			formData.append(fileParts[i], new Blob([file]), file.name)
 		})
 
-		const newVersion = await this.client.request<Labrinth.Versions.v3.Version>(`/version`, {
+		return this.client.upload<Labrinth.Versions.v3.Version>(`/version`, {
 			api: 'labrinth',
 			version: 3,
-			method: 'POST',
-			body: formData,
+			formData,
 			timeout: 60 * 5 * 1000,
-			headers: {
-				'Content-Type': '',
-			},
 		})
-
-		return newVersion
 	}
 
 	/**
@@ -251,10 +246,10 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		})
 	}
 
-	public async addFilesToVersion(
+	public addFilesToVersion(
 		versionId: string,
 		versionFiles: Labrinth.Versions.v3.DraftVersionFile[],
-	): Promise<Labrinth.Versions.v3.Version> {
+	): UploadHandle<Labrinth.Versions.v3.Version> {
 		const formData = new FormData()
 
 		const files = versionFiles.map((vf) => vf.file)
@@ -276,15 +271,11 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 			formData.append(fileParts[i], new Blob([file]), file.name)
 		})
 
-		return this.client.request<Labrinth.Versions.v3.Version>(`/version/${versionId}/file`, {
+		return this.client.upload<Labrinth.Versions.v3.Version>(`/version/${versionId}/file`, {
 			api: 'labrinth',
 			version: 2,
-			method: 'POST',
-			body: formData,
+			formData,
 			timeout: 60 * 5 * 1000,
-			headers: {
-				'Content-Type': '',
-			},
 		})
 	}
 }
diff --git a/packages/api-client/src/platform/xhr-upload-client.ts b/packages/api-client/src/platform/xhr-upload-client.ts
index 59e5355f3b..2988b01445 100644
--- a/packages/api-client/src/platform/xhr-upload-client.ts
+++ b/packages/api-client/src/platform/xhr-upload-client.ts
@@ -27,12 +27,18 @@ export abstract class XHRUploadClient extends AbstractModrinthClient {
 
 		const url = this.buildUrl(path, baseUrl, options.version)
 
+		// For FormData uploads, don't set Content-Type (let browser set multipart boundary)
+		// For file uploads, use application/octet-stream
+		const isFormData = 'formData' in options && options.formData instanceof FormData
+		const defaultHeaders = isFormData
+			? this.buildDefaultHeaders()
+			: { ...this.buildDefaultHeaders(), 'Content-Type': 'application/octet-stream' }
+
 		const mergedOptions: UploadRequestOptions = {
 			retry: false, // default: don't retry uploads
 			...options,
 			headers: {
-				...this.buildDefaultHeaders(),
-				'Content-Type': 'application/octet-stream',
+				...defaultHeaders,
 				...options.headers,
 			},
 		}
@@ -121,7 +127,9 @@ export abstract class XHRUploadClient extends AbstractModrinthClient {
 				xhr.setRequestHeader(key, value)
 			}
 
-			xhr.send(metadata.file)
+			// Send either FormData or file depending on what was provided
+			const data = 'formData' in metadata ? metadata.formData : metadata.file
+			xhr.send(data)
 			abortController.signal.addEventListener('abort', () => xhr.abort())
 		})
 	}
diff --git a/packages/api-client/src/types/upload.ts b/packages/api-client/src/types/upload.ts
index e8ec45bfe1..6c90cdfb6b 100644
--- a/packages/api-client/src/types/upload.ts
+++ b/packages/api-client/src/types/upload.ts
@@ -13,29 +13,66 @@ export interface UploadProgress {
 }
 
 /**
- * Options for upload requests (matches request() style)
- *
- * Extends RequestOptions but excludes body and method since those
- * are determined by the upload itself.
+ * Base options for upload requests
  */
-export interface UploadRequestOptions extends Omit<RequestOptions, 'body' | 'method'> {
-	/** File or Blob to upload */
-	file: File | Blob
+interface BaseUploadRequestOptions extends Omit<RequestOptions, 'body' | 'method'> {
 	/** Callback for progress updates */
 	onProgress?: (progress: UploadProgress) => void
 }
 
 /**
- * Metadata attached to upload contexts
+ * Options for single file upload requests
+ */
+export interface FileUploadRequestOptions extends BaseUploadRequestOptions {
+	/** File or Blob to upload */
+	file: File | Blob
+	formData?: never
+}
+
+/**
+ * Options for FormData upload requests
+ *
+ * Used for multipart uploads (e.g., version file uploads) that need
+ * to send metadata alongside files.
+ */
+export interface FormDataUploadRequestOptions extends BaseUploadRequestOptions {
+	/** FormData containing files and metadata */
+	formData: FormData
+	file?: never
+}
+
+/**
+ * Options for upload requests - either a single file or FormData
+ */
+export type UploadRequestOptions = FileUploadRequestOptions | FormDataUploadRequestOptions
+
+/**
+ * Metadata attached to file upload contexts
  *
  * Features can check `context.metadata?.isUpload` to detect uploads.
  */
-export interface UploadMetadata extends Record<string, unknown> {
+export interface FileUploadMetadata extends Record<string, unknown> {
 	isUpload: true
 	file: File | Blob
+	formData?: never
 	onProgress?: (progress: UploadProgress) => void
 }
 
+/**
+ * Metadata attached to FormData upload contexts
+ */
+export interface FormDataUploadMetadata extends Record<string, unknown> {
+	isUpload: true
+	formData: FormData
+	file?: never
+	onProgress?: (progress: UploadProgress) => void
+}
+
+/**
+ * Metadata attached to upload contexts - either file or FormData
+ */
+export type UploadMetadata = FileUploadMetadata | FormDataUploadMetadata
+
 /**
  * Handle returned from upload operations
  *

From ef780120d66ee99d17f9d8a7cad9bc3de785f811 Mon Sep 17 00:00:00 2001
From: "Calum H. (IMB11)" <contact@cal.engineer>
Date: Sat, 10 Jan 2026 19:59:05 +0000
Subject: [PATCH 78/83] fix: upload content type fix

---
 .../api-client/src/modules/labrinth/versions/v3.ts   |  4 ++--
 .../api-client/src/platform/xhr-upload-client.ts     | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/api-client/src/modules/labrinth/versions/v3.ts b/packages/api-client/src/modules/labrinth/versions/v3.ts
index 91dea2c6e8..914b030de7 100644
--- a/packages/api-client/src/modules/labrinth/versions/v3.ts
+++ b/packages/api-client/src/modules/labrinth/versions/v3.ts
@@ -183,7 +183,7 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		formData.append('data', JSON.stringify(data))
 
 		files.forEach((file, i) => {
-			formData.append(fileParts[i], new Blob([file]), file.name)
+			formData.append(fileParts[i], file, file.name)
 		})
 
 		return this.client.upload<Labrinth.Versions.v3.Version>(`/version`, {
@@ -268,7 +268,7 @@ export class LabrinthVersionsV3Module extends AbstractModule {
 		formData.append('data', JSON.stringify({ file_types: fileTypeMap }))
 
 		files.forEach((file, i) => {
-			formData.append(fileParts[i], new Blob([file]), file.name)
+			formData.append(fileParts[i], file, file.name)
 		})
 
 		return this.client.upload<Labrinth.Versions.v3.Version>(`/version/${versionId}/file`, {
diff --git a/packages/api-client/src/platform/xhr-upload-client.ts b/packages/api-client/src/platform/xhr-upload-client.ts
index 2988b01445..de7dd9c233 100644
--- a/packages/api-client/src/platform/xhr-upload-client.ts
+++ b/packages/api-client/src/platform/xhr-upload-client.ts
@@ -30,15 +30,19 @@ export abstract class XHRUploadClient extends AbstractModrinthClient {
 		// For FormData uploads, don't set Content-Type (let browser set multipart boundary)
 		// For file uploads, use application/octet-stream
 		const isFormData = 'formData' in options && options.formData instanceof FormData
-		const defaultHeaders = isFormData
-			? this.buildDefaultHeaders()
-			: { ...this.buildDefaultHeaders(), 'Content-Type': 'application/octet-stream' }
+		const baseHeaders = this.buildDefaultHeaders()
+		// Remove Content-Type for FormData so browser can set multipart/form-data with boundary
+		if (isFormData) {
+			delete baseHeaders['Content-Type']
+		} else {
+			baseHeaders['Content-Type'] = 'application/octet-stream'
+		}
 
 		const mergedOptions: UploadRequestOptions = {
 			retry: false, // default: don't retry uploads
 			...options,
 			headers: {
-				...defaultHeaders,
+				...baseHeaders,
 				...options.headers,
 			},
 		}

From 045c1ea13612daaf64efdaf53937047fb18aa44c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sat, 10 Jan 2026 15:00:42 -0700
Subject: [PATCH 79/83] fix dependencies version width

---
 .../create-project-version/components/AddedDependencyRow.vue   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
index 3611341551..9ce2ffd62b 100644
--- a/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
+++ b/apps/frontend/src/components/ui/create-project-version/components/AddedDependencyRow.vue
@@ -17,7 +17,8 @@
 		<span
 			v-if="versionName"
 			v-tooltip="versionName"
-			class="max-w-[35%] truncate whitespace-nowrap font-medium"
+			class="truncate whitespace-nowrap font-medium"
+			:class="!hideRemove ? 'max-w-[35%]' : 'max-w-[50%]'"
 		>
 			{{ versionName }}
 		</span>

From d96b03b0ac2cec99890df8554d9154496ee5510b Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sat, 10 Jan 2026 15:30:50 -0700
Subject: [PATCH 80/83] fix already added dependencies logic

---
 .../stages/DependenciesStage.vue              | 13 ++++----
 .../providers/version/manage-version-modal.ts | 33 ++++++++++++-------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
index 568ebfa63f..f20964dce4 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DependenciesStage.vue
@@ -152,12 +152,13 @@ const addedDependencies = computed(() =>
 const addDependency = (dependency: Labrinth.Versions.v3.Dependency) => {
 	if (!draftVersion.value.dependencies) draftVersion.value.dependencies = []
 
-	// already added
-	if (
-		draftVersion.value.dependencies.find(
-			(d) => d.project_id === dependency.project_id && d.version_id === dependency.version_id,
-		)
-	) {
+	const alreadyAdded = draftVersion.value.dependencies.some((existing) => {
+		if (existing.project_id !== dependency.project_id) return false
+		if (!existing.version_id && !dependency.version_id) return true
+		return existing.version_id === dependency.version_id
+	})
+
+	if (alreadyAdded) {
 		addNotification({
 			title: 'Dependency already added',
 			text: 'You cannot add the same dependency twice.',
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index f965dd8d44..0e4863e64e 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -220,19 +220,27 @@ export function createManageVersionContext(
 	const editingVersion = computed(() => Boolean(draftVersion.value.version_id))
 
 	const visibleSuggestedDependencies = computed<SuggestedDependency[]>(() => {
-		const seen = new Set<string>()
-		return suggestedDependencies.value
-			.filter((dep) => {
-				const key = `${dep.project_id ?? ''}:${dep.version_id ?? ''}`
-				if (seen.has(key)) return false
-				seen.add(key)
-				return !draftVersion.value.dependencies?.some(
-					(d) =>
-						d.project_id === dep.project_id ||
-						(d.project_id === dep.project_id && d.version_id === dep.version_id),
-				)
+		const existingDeps = draftVersion.value.dependencies ?? []
+		const seenKeys = new Set<string>()
+
+		const isDuplicateSuggestion = (dep: SuggestedDependency) => {
+			const key = `${dep.project_id ?? ''}:${dep.version_id ?? ''}`
+			if (seenKeys.has(key)) return true
+			seenKeys.add(key)
+			return false
+		}
+
+		const isAlreadyAdded = (dep: SuggestedDependency) =>
+			existingDeps.some((existing) => {
+				if (existing.project_id !== dep.project_id) return false
+				if (!existing.version_id && !dep.version_id) return true
+				return existing.version_id === dep.version_id
 			})
-			.sort((a, b) => (a.name || '').localeCompare(b.name || ''))
+
+		return suggestedDependencies.value
+			.filter((dep) => !isDuplicateSuggestion(dep))
+			.filter((dep) => !isAlreadyAdded(dep))
+			.sort((a, b) => (a.name ?? '').localeCompare(b.name ?? ''))
 	})
 
 	// Version management methods
@@ -544,6 +552,7 @@ export function createManageVersionContext(
 	)
 
 	// Watch loaders to fetch suggested dependencies
+	// Gets the most recent version that matches loaders and suggests its dependencies
 	watch(
 		() => draftVersion.value.loaders,
 		async (loaders) => {

From bfcb17ebcd0eb894edf5fe6ff5a0e04e507e910a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sun, 11 Jan 2026 09:25:29 -0700
Subject: [PATCH 81/83] add changelog minheight

---
 .../ui/create-project-version/stages/DetailsStage.vue     | 2 +-
 packages/ui/src/components/base/MarkdownEditor.vue        | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
index dead60693f..6aa337c5c8 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue
@@ -43,7 +43,7 @@
 				<MarkdownEditor
 					v-model="draftVersion.changelog"
 					:on-image-upload="onImageUpload"
-					:max-height="500"
+					:min-height="150"
 				/>
 			</div>
 		</div>
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index e8b6bc09ee..7a91a31a7c 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -270,7 +270,7 @@
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { markdown } from '@codemirror/lang-markdown'
 import { Compartment, EditorState } from '@codemirror/state'
-import { EditorView, keymap, placeholder as cm_placeholder } from '@codemirror/view'
+import { placeholder as cm_placeholder, EditorView, keymap } from '@codemirror/view'
 import {
 	AlignLeftIcon,
 	BoldIcon,
@@ -315,6 +315,7 @@ const props = withDefaults(
 		placeholder?: string
 		maxLength?: number
 		maxHeight?: number
+		minHeight?: number
 	}>(),
 	{
 		modelValue: '',
@@ -324,6 +325,7 @@ const props = withDefaults(
 		placeholder: 'Write something...',
 		maxLength: undefined,
 		maxHeight: undefined,
+		minHeight: undefined,
 	},
 )
 
@@ -360,9 +362,9 @@ onMounted(() => {
 			border: 'none',
 		},
 		'.cm-content': {
+			minHeight: props.minHeight ? `${props.minHeight}px` : '200px',
 			marginBlockEnd: '0.5rem',
 			padding: '0.5rem',
-			minHeight: '200px',
 			caretColor: 'var(--color-contrast)',
 			width: '100%',
 		},
@@ -609,9 +611,9 @@ watch(
 									border: 'none',
 								},
 								'.cm-content': {
+									minHeight: props.minHeight ? `${props.minHeight}px` : '200px',
 									marginBlockEnd: '0.5rem',
 									padding: '0.5rem',
-									minHeight: '200px',
 									caretColor: 'var(--color-contrast)',
 									width: '100%',
 									opacity: newValue ? 0.6 : 1,

From fc64b80657123d5d3cfef7ad746b8f6d2c16074f Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sun, 11 Jan 2026 09:40:39 -0700
Subject: [PATCH 82/83] set progress percentage on button

---
 .../stages/AddFilesStage.vue                  | 18 +----------
 .../stages/UploadingStage.vue                 | 31 -------------------
 .../providers/version/manage-version-modal.ts |  3 --
 .../providers/version/stages/details-stage.ts |  2 +-
 .../src/providers/version/stages/index.ts     |  2 --
 .../version/stages/uploading-stage.ts         | 18 -----------
 packages/assets/styles/defaults.scss          |  2 +-
 .../ui/src/components/base/MarkdownEditor.vue |  2 +-
 8 files changed, 4 insertions(+), 74 deletions(-)
 delete mode 100644 apps/frontend/src/components/ui/create-project-version/stages/UploadingStage.vue
 delete mode 100644 apps/frontend/src/providers/version/stages/uploading-stage.ts

diff --git a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
index ee1de96833..cdc3fc5d79 100644
--- a/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
+++ b/apps/frontend/src/components/ui/create-project-version/stages/AddFilesStage.vue
@@ -1,21 +1,5 @@
 <template>
 	<div class="flex w-full flex-col gap-4">
-		<div v-if="isUploading && filesToAdd.length > 0" class="rounded-lg bg-bg-raised p-4">
-			<div class="mb-2 flex justify-between text-sm">
-				<span class="font-semibold">Uploading files...</span>
-				<span class="text-secondary">
-					{{ Math.round(uploadProgress.progress * 100) }}% -
-					{{ formatBytes(uploadProgress.loaded) }} / {{ formatBytes(uploadProgress.total) }}
-				</span>
-			</div>
-			<div class="h-2 w-full rounded-full bg-button-bg">
-				<div
-					class="h-2 rounded-full bg-brand transition-all duration-300"
-					:style="{ width: `${uploadProgress.progress * 100}%` }"
-				></div>
-			</div>
-		</div>
-
 		<template
 			v-if="handlingNewFiles || !(filesToAdd.length || draftVersion.existing_files?.length)"
 		>
@@ -109,7 +93,7 @@ import {
 	injectProjectPageContext,
 	useVIntl,
 } from '@modrinth/ui'
-import { acceptFileFromProjectType, formatBytes } from '@modrinth/utils'
+import { acceptFileFromProjectType } from '@modrinth/utils'
 
 import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
 
diff --git a/apps/frontend/src/components/ui/create-project-version/stages/UploadingStage.vue b/apps/frontend/src/components/ui/create-project-version/stages/UploadingStage.vue
deleted file mode 100644
index 53d16047e7..0000000000
--- a/apps/frontend/src/components/ui/create-project-version/stages/UploadingStage.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-	<div class="flex w-full flex-col items-center justify-center gap-6 py-8">
-		<div class="text-center">
-			<h3 class="text-lg font-semibold text-contrast">Uploading version</h3>
-			<p class="mt-1 text-secondary">Please wait while your files are being uploaded...</p>
-		</div>
-
-		<div class="w-full max-w-md">
-			<div class="mb-2 flex justify-between text-sm">
-				<span class="font-semibold">{{ Math.round(uploadProgress.progress * 100) }}%</span>
-				<span class="text-secondary">
-					{{ formatBytes(uploadProgress.loaded) }} / {{ formatBytes(uploadProgress.total) }}
-				</span>
-			</div>
-			<div class="h-2 w-full rounded-full bg-button-bg">
-				<div
-					class="h-2 rounded-full bg-brand transition-all duration-300 ease-out"
-					:style="{ width: `${uploadProgress.progress * 100}%` }"
-				></div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { formatBytes } from '@modrinth/utils'
-
-import { injectManageVersionContext } from '~/providers/version/manage-version-modal'
-
-const { uploadProgress } = injectManageVersionContext()
-</script>
diff --git a/apps/frontend/src/providers/version/manage-version-modal.ts b/apps/frontend/src/providers/version/manage-version-modal.ts
index 90aa9a157a..1b448065e8 100644
--- a/apps/frontend/src/providers/version/manage-version-modal.ts
+++ b/apps/frontend/src/providers/version/manage-version-modal.ts
@@ -623,7 +623,6 @@ export function createManageVersionContext(
 
 		// Reset progress and navigate to uploading stage
 		uploadProgress.value = { loaded: 0, total: 0, progress: 0 }
-		modal.value?.setStage('uploading')
 
 		if (noEnvironmentProject.value) version.environment = undefined
 
@@ -651,8 +650,6 @@ export function createManageVersionContext(
 			await refreshVersions()
 			onSave?.()
 		} catch (err: any) {
-			// On failure, go back to details stage and show error
-			modal.value?.setStage('add-details')
 			addNotification({
 				title: 'Could not create project version',
 				text: err.data ? err.data.description : err,
diff --git a/apps/frontend/src/providers/version/stages/details-stage.ts b/apps/frontend/src/providers/version/stages/details-stage.ts
index 6de8558c35..a499fd0923 100644
--- a/apps/frontend/src/providers/version/stages/details-stage.ts
+++ b/apps/frontend/src/providers/version/stages/details-stage.ts
@@ -27,7 +27,7 @@ export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
 		label: ctx.editingVersion.value
 			? 'Save changes'
 			: ctx.isUploading.value
-				? 'Uploading version'
+				? `Uploading version ${Math.round(ctx.uploadProgress.value.progress * 100)}%`
 				: 'Create version',
 		icon: ctx.isSubmitting.value ? SpinnerIcon : ctx.editingVersion.value ? SaveIcon : PlusIcon,
 		iconPosition: 'before',
diff --git a/apps/frontend/src/providers/version/stages/index.ts b/apps/frontend/src/providers/version/stages/index.ts
index 62c103d883..165c5b94cb 100644
--- a/apps/frontend/src/providers/version/stages/index.ts
+++ b/apps/frontend/src/providers/version/stages/index.ts
@@ -20,7 +20,6 @@ import {
 	stageConfig as mcVersionsStageConfig,
 } from './mc-versions-stage'
 import { stageConfig as metadataStageConfig } from './metadata-stage'
-import { stageConfig as uploadingStageConfig } from './uploading-stage'
 
 export const stageConfigs = [
 	addFilesStageConfig,
@@ -30,7 +29,6 @@ export const stageConfigs = [
 	dependenciesStageConfig,
 	metadataStageConfig,
 	detailsStageConfig,
-	uploadingStageConfig,
 
 	// Non-progress stages for editing from details page
 	fromDetailsLoadersStageConfig,
diff --git a/apps/frontend/src/providers/version/stages/uploading-stage.ts b/apps/frontend/src/providers/version/stages/uploading-stage.ts
deleted file mode 100644
index 229fb8652f..0000000000
--- a/apps/frontend/src/providers/version/stages/uploading-stage.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { StageConfigInput } from '@modrinth/ui'
-import { markRaw } from 'vue'
-
-import UploadingStage from '~/components/ui/create-project-version/stages/UploadingStage.vue'
-
-import type { ManageVersionContextValue } from '../manage-version-modal'
-
-export const stageConfig: StageConfigInput<ManageVersionContextValue> = {
-	id: 'uploading',
-	stageContent: markRaw(UploadingStage),
-	title: 'Uploading',
-	maxWidth: '500px',
-	hideStageInBreadcrumb: true,
-	skip: (ctx) => !ctx.isUploading.value,
-	leftButtonConfig: () => null,
-	rightButtonConfig: () => null,
-	nonProgressStage: true,
-}
diff --git a/packages/assets/styles/defaults.scss b/packages/assets/styles/defaults.scss
index 3031cb534b..fd09de5124 100644
--- a/packages/assets/styles/defaults.scss
+++ b/packages/assets/styles/defaults.scss
@@ -86,7 +86,7 @@ textarea,
 
 .cm-content {
 	white-space: pre-wrap !important;
-  box-shadow: none;
+	box-shadow: none;
 }
 
 input[type='number'] {
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index 7a91a31a7c..5da338b691 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -270,7 +270,7 @@
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { markdown } from '@codemirror/lang-markdown'
 import { Compartment, EditorState } from '@codemirror/state'
-import { placeholder as cm_placeholder, EditorView, keymap } from '@codemirror/view'
+import { EditorView, keymap, placeholder as cm_placeholder } from '@codemirror/view'
 import {
 	AlignLeftIcon,
 	BoldIcon,

From 57925663249eeef3cc8c1e77cda87dab5e0513c5 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sun, 11 Jan 2026 09:52:58 -0700
Subject: [PATCH 83/83] add legacy fabric detection logic

---
 .../src/helpers/infer/loader-parsers.ts       | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/helpers/infer/loader-parsers.ts b/apps/frontend/src/helpers/infer/loader-parsers.ts
index 8d0fbbbffa..365664b90a 100644
--- a/apps/frontend/src/helpers/infer/loader-parsers.ts
+++ b/apps/frontend/src/helpers/infer/loader-parsers.ts
@@ -118,14 +118,26 @@ export function createLoaderParsers(
 		'fabric.mod.json': (file: string): InferredVersionInfo => {
 			const metadata = JSON.parse(file) as any
 
+			const detectedGameVersions = metadata.depends
+				? getGameVersionsMatchingSemverRange(metadata.depends.minecraft, simplifiedGameVersions)
+				: []
+			const loaders: string[] = []
+
+			// Detect 1.3-1.13 -> legacy-fabric
+			const hasLegacyVersions = detectedGameVersions.some((version) => {
+				const match = version.match(/^1\.(\d+)/)
+				return match && parseInt(match[1]) >= 3 && parseInt(match[1]) <= 13
+			})
+
+			if (hasLegacyVersions) loaders.push('legacy-fabric')
+			else loaders.push('fabric')
+
 			return {
 				name: `${project.title} ${metadata.version}`,
 				version_number: metadata.version,
-				loaders: ['fabric'],
+				loaders,
 				version_type: versionType(metadata.version),
-				game_versions: metadata.depends
-					? getGameVersionsMatchingSemverRange(metadata.depends.minecraft, simplifiedGameVersions)
-					: [],
+				game_versions: detectedGameVersions,
 			}
 		},
 		// Quilt