build(#10336): update dependencies

185 files changed, 2695 insertions, 555 deletions

diff --git a/packages/frontend/src/components/MkAbuseReport.stories.ts b/packages/frontend/src/components/MkAbuseReport.stories.ts
index 7d97a6e7bc..dac1b27938 100644
--- a/packages/frontend/src/components/MkAbuseReport.stories.ts
+++ b/packages/frontend/src/components/MkAbuseReport.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkAbuseReport,
 } satisfies Meta<typeof MkAbuseReport>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkAbuseReport,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkAbuseReport v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAbuseReport v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkAbuseReportWindow.stories.ts b/packages/frontend/src/components/MkAbuseReportWindow.stories.ts
index 76ab111f46..acaf171e9f 100644
--- a/packages/frontend/src/components/MkAbuseReportWindow.stories.ts
+++ b/packages/frontend/src/components/MkAbuseReportWindow.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkAbuseReportWindow,
 } satisfies Meta<typeof MkAbuseReportWindow>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkAbuseReportWindow,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkAbuseReportWindow v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAbuseReportWindow v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkAchievements.stories.ts b/packages/frontend/src/components/MkAchievements.stories.ts
index 8220dbcbb8..492358ebc4 100644
--- a/packages/frontend/src/components/MkAchievements.stories.ts
+++ b/packages/frontend/src/components/MkAchievements.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkAchievements,
 } satisfies Meta<typeof MkAchievements>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkAchievements,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkAchievements v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAchievements v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkAsUi.stories.ts b/packages/frontend/src/components/MkAsUi.stories.ts
index 6965f41036..b27668655f 100644
--- a/packages/frontend/src/components/MkAsUi.stories.ts
+++ b/packages/frontend/src/components/MkAsUi.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkAsUi,
 } satisfies Meta<typeof MkAsUi>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkAsUi,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkAsUi v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAsUi v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkAutocomplete.stories.ts b/packages/frontend/src/components/MkAutocomplete.stories.ts
index f2bc0b8374..2242bfde39 100644
--- a/packages/frontend/src/components/MkAutocomplete.stories.ts
+++ b/packages/frontend/src/components/MkAutocomplete.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkAutocomplete,
 } satisfies Meta<typeof MkAutocomplete>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkAutocomplete,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkAutocomplete v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAutocomplete v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkAvatars.stories.ts b/packages/frontend/src/components/MkAvatars.stories.ts
index 2892691933..71a40e5cc4 100644
--- a/packages/frontend/src/components/MkAvatars.stories.ts
+++ b/packages/frontend/src/components/MkAvatars.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkAvatars,
 } satisfies Meta<typeof MkAvatars>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkAvatars,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkAvatars v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAvatars v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkButton.stories.impl.ts b/packages/frontend/src/components/MkButton.stories.impl.ts
index 94bf1e39b2..228af8f919 100644
--- a/packages/frontend/src/components/MkButton.stories.impl.ts
+++ b/packages/frontend/src/components/MkButton.stories.impl.ts
@@ -1,13 +1,27 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-default-export */
+/* eslint-disable import/no-duplicates */
 import { StoryObj } from '@storybook/vue3';
 import MkButton from './MkButton.vue';
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkButton,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkButton v-bind="$props">Text</MkButton>',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkButton v-bind="props">Text</MkButton>',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkButton.stories.ts b/packages/frontend/src/components/MkButton.stories.ts
index c3da0d1a46..c85ce89e18 100644
--- a/packages/frontend/src/components/MkButton.stories.ts
+++ b/packages/frontend/src/components/MkButton.stories.ts
@@ -6,16 +6,30 @@ const meta = {
 	component: MkButton,
 } satisfies Meta<typeof MkButton>;
 export default meta;
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-default-export */
+/* eslint-disable import/no-duplicates */
 import { StoryObj } from '@storybook/vue3';
 import MkButton from './MkButton.vue';
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkButton,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkButton v-bind="$props">Text</MkButton>',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkButton v-bind="props">Text</MkButton>',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkCaptcha.stories.ts b/packages/frontend/src/components/MkCaptcha.stories.ts
index f6d0648d89..78db7287ae 100644
--- a/packages/frontend/src/components/MkCaptcha.stories.ts
+++ b/packages/frontend/src/components/MkCaptcha.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkCaptcha,
 } satisfies Meta<typeof MkCaptcha>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkCaptcha,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkCaptcha v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkCaptcha v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkChannelFollowButton.stories.ts b/packages/frontend/src/components/MkChannelFollowButton.stories.ts
index 461d6f2fda..8c7c31c56a 100644
--- a/packages/frontend/src/components/MkChannelFollowButton.stories.ts
+++ b/packages/frontend/src/components/MkChannelFollowButton.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkChannelFollowButton,
 } satisfies Meta<typeof MkChannelFollowButton>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkChannelFollowButton,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkChannelFollowButton v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkChannelFollowButton v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkChannelPreview.stories.ts b/packages/frontend/src/components/MkChannelPreview.stories.ts
index 9ad2fe84a0..aedeba1104 100644
--- a/packages/frontend/src/components/MkChannelPreview.stories.ts
+++ b/packages/frontend/src/components/MkChannelPreview.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkChannelPreview,
 } satisfies Meta<typeof MkChannelPreview>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkChannelPreview,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkChannelPreview v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkChannelPreview v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkChart.stories.ts b/packages/frontend/src/components/MkChart.stories.ts
index 5cd72a4805..d42adbe992 100644
--- a/packages/frontend/src/components/MkChart.stories.ts
+++ b/packages/frontend/src/components/MkChart.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkChart,
 } satisfies Meta<typeof MkChart>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkChart,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkChart v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkChart v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkChartLegend.stories.ts b/packages/frontend/src/components/MkChartLegend.stories.ts
index ff21636c3b..482f10c31f 100644
--- a/packages/frontend/src/components/MkChartLegend.stories.ts
+++ b/packages/frontend/src/components/MkChartLegend.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkChartLegend,
 } satisfies Meta<typeof MkChartLegend>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkChartLegend,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkChartLegend v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkChartLegend v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkChartTooltip.stories.ts b/packages/frontend/src/components/MkChartTooltip.stories.ts
index 69555e9dd1..49cccaa5b4 100644
--- a/packages/frontend/src/components/MkChartTooltip.stories.ts
+++ b/packages/frontend/src/components/MkChartTooltip.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkChartTooltip,
 } satisfies Meta<typeof MkChartTooltip>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkChartTooltip,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkChartTooltip v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkChartTooltip v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkCheckbox.stories.ts b/packages/frontend/src/components/MkCheckbox.stories.ts
index 4cfed26091..315ba320ad 100644
--- a/packages/frontend/src/components/MkCheckbox.stories.ts
+++ b/packages/frontend/src/components/MkCheckbox.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkCheckbox,
 } satisfies Meta<typeof MkCheckbox>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkCheckbox,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkCheckbox v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkCheckbox v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkClickerGame.stories.ts b/packages/frontend/src/components/MkClickerGame.stories.ts
index 750b979f6c..7b8f5165ff 100644
--- a/packages/frontend/src/components/MkClickerGame.stories.ts
+++ b/packages/frontend/src/components/MkClickerGame.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkClickerGame,
 } satisfies Meta<typeof MkClickerGame>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkClickerGame,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkClickerGame v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkClickerGame v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkClipPreview.stories.ts b/packages/frontend/src/components/MkClipPreview.stories.ts
index 02ec124cf7..a941c36120 100644
--- a/packages/frontend/src/components/MkClipPreview.stories.ts
+++ b/packages/frontend/src/components/MkClipPreview.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkClipPreview,
 } satisfies Meta<typeof MkClipPreview>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkClipPreview,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkClipPreview v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkClipPreview v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkCode.core.stories.ts b/packages/frontend/src/components/MkCode.core.stories.ts
index 9498e4160d..dc47abb6b1 100644
--- a/packages/frontend/src/components/MkCode.core.stories.ts
+++ b/packages/frontend/src/components/MkCode.core.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkCode_core,
 } satisfies Meta<typeof MkCode_core>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkCode_core,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkCode_core v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkCode_core v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkCode.stories.ts b/packages/frontend/src/components/MkCode.stories.ts
index 5d9ebec74d..94b8af9cde 100644
--- a/packages/frontend/src/components/MkCode.stories.ts
+++ b/packages/frontend/src/components/MkCode.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkCode,
 } satisfies Meta<typeof MkCode>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkCode,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkCode v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkCode v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkContainer.stories.ts b/packages/frontend/src/components/MkContainer.stories.ts
index 5d8b4891c8..3b2da66f25 100644
--- a/packages/frontend/src/components/MkContainer.stories.ts
+++ b/packages/frontend/src/components/MkContainer.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkContainer,
 } satisfies Meta<typeof MkContainer>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkContainer,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkContainer v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkContainer v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkContextMenu.stories.ts b/packages/frontend/src/components/MkContextMenu.stories.ts
index 46b8ae124f..37cc68c7b4 100644
--- a/packages/frontend/src/components/MkContextMenu.stories.ts
+++ b/packages/frontend/src/components/MkContextMenu.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkContextMenu,
 } satisfies Meta<typeof MkContextMenu>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkContextMenu,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkContextMenu v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkContextMenu v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkCropperDialog.stories.ts b/packages/frontend/src/components/MkCropperDialog.stories.ts
index 9e3808eae2..a4ccf146c1 100644
--- a/packages/frontend/src/components/MkCropperDialog.stories.ts
+++ b/packages/frontend/src/components/MkCropperDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkCropperDialog,
 } satisfies Meta<typeof MkCropperDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkCropperDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkCropperDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkCropperDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkCwButton.stories.ts b/packages/frontend/src/components/MkCwButton.stories.ts
index 16e1b03217..67d60052fe 100644
--- a/packages/frontend/src/components/MkCwButton.stories.ts
+++ b/packages/frontend/src/components/MkCwButton.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkCwButton,
 } satisfies Meta<typeof MkCwButton>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkCwButton,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkCwButton v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkCwButton v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDateSeparatedList.stories.ts b/packages/frontend/src/components/MkDateSeparatedList.stories.ts
index 3d5b27e0c0..f0f203b717 100644
--- a/packages/frontend/src/components/MkDateSeparatedList.stories.ts
+++ b/packages/frontend/src/components/MkDateSeparatedList.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDateSeparatedList,
 } satisfies Meta<typeof MkDateSeparatedList>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDateSeparatedList,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDateSeparatedList v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDateSeparatedList v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDialog.stories.ts b/packages/frontend/src/components/MkDialog.stories.ts
index 9af7dad32c..194e2c9cb3 100644
--- a/packages/frontend/src/components/MkDialog.stories.ts
+++ b/packages/frontend/src/components/MkDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDialog,
 } satisfies Meta<typeof MkDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDigitalClock.stories.ts b/packages/frontend/src/components/MkDigitalClock.stories.ts
index cfe65bcfc7..c99020c9ea 100644
--- a/packages/frontend/src/components/MkDigitalClock.stories.ts
+++ b/packages/frontend/src/components/MkDigitalClock.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDigitalClock,
 } satisfies Meta<typeof MkDigitalClock>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDigitalClock,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDigitalClock v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDigitalClock v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDonation.stories.ts b/packages/frontend/src/components/MkDonation.stories.ts
index b63ccc23e0..7157b7e82b 100644
--- a/packages/frontend/src/components/MkDonation.stories.ts
+++ b/packages/frontend/src/components/MkDonation.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDonation,
 } satisfies Meta<typeof MkDonation>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDonation,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDonation v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDonation v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDrive.file.stories.ts b/packages/frontend/src/components/MkDrive.file.stories.ts
index 56b007cbea..17ba8df806 100644
--- a/packages/frontend/src/components/MkDrive.file.stories.ts
+++ b/packages/frontend/src/components/MkDrive.file.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDrive_file,
 } satisfies Meta<typeof MkDrive_file>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDrive_file,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDrive_file v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDrive_file v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDrive.folder.stories.ts b/packages/frontend/src/components/MkDrive.folder.stories.ts
index 7c5514a292..74b810e314 100644
--- a/packages/frontend/src/components/MkDrive.folder.stories.ts
+++ b/packages/frontend/src/components/MkDrive.folder.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDrive_folder,
 } satisfies Meta<typeof MkDrive_folder>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDrive_folder,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDrive_folder v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDrive_folder v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDrive.navFolder.stories.ts b/packages/frontend/src/components/MkDrive.navFolder.stories.ts
index cc7d937883..50272c4d8a 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.stories.ts
+++ b/packages/frontend/src/components/MkDrive.navFolder.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDrive_navFolder,
 } satisfies Meta<typeof MkDrive_navFolder>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDrive_navFolder,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDrive_navFolder v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDrive_navFolder v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDrive.stories.ts b/packages/frontend/src/components/MkDrive.stories.ts
index d80015a579..3038312c39 100644
--- a/packages/frontend/src/components/MkDrive.stories.ts
+++ b/packages/frontend/src/components/MkDrive.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDrive,
 } satisfies Meta<typeof MkDrive>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDrive,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDrive v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDrive v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.stories.ts b/packages/frontend/src/components/MkDriveFileThumbnail.stories.ts
index 2efa600aa1..6da7aab8c4 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.stories.ts
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDriveFileThumbnail,
 } satisfies Meta<typeof MkDriveFileThumbnail>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDriveFileThumbnail,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDriveFileThumbnail v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDriveFileThumbnail v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDriveSelectDialog.stories.ts b/packages/frontend/src/components/MkDriveSelectDialog.stories.ts
index 00d23ad8f3..b665516de6 100644
--- a/packages/frontend/src/components/MkDriveSelectDialog.stories.ts
+++ b/packages/frontend/src/components/MkDriveSelectDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDriveSelectDialog,
 } satisfies Meta<typeof MkDriveSelectDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDriveSelectDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDriveSelectDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDriveSelectDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkDriveWindow.stories.ts b/packages/frontend/src/components/MkDriveWindow.stories.ts
index c2054de123..b0f13f562a 100644
--- a/packages/frontend/src/components/MkDriveWindow.stories.ts
+++ b/packages/frontend/src/components/MkDriveWindow.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkDriveWindow,
 } satisfies Meta<typeof MkDriveWindow>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkDriveWindow,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkDriveWindow v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkDriveWindow v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkEmojiPicker.section.stories.ts b/packages/frontend/src/components/MkEmojiPicker.section.stories.ts
index 567ab0ca06..141a55f59b 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.stories.ts
+++ b/packages/frontend/src/components/MkEmojiPicker.section.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkEmojiPicker_section,
 } satisfies Meta<typeof MkEmojiPicker_section>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkEmojiPicker_section,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkEmojiPicker_section v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkEmojiPicker_section v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkEmojiPicker.stories.ts b/packages/frontend/src/components/MkEmojiPicker.stories.ts
index 5811d0d1ec..5980c9a471 100644
--- a/packages/frontend/src/components/MkEmojiPicker.stories.ts
+++ b/packages/frontend/src/components/MkEmojiPicker.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkEmojiPicker,
 } satisfies Meta<typeof MkEmojiPicker>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkEmojiPicker,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkEmojiPicker v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkEmojiPicker v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.stories.ts b/packages/frontend/src/components/MkEmojiPickerDialog.stories.ts
index dad27b0d50..db0900340b 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.stories.ts
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkEmojiPickerDialog,
 } satisfies Meta<typeof MkEmojiPickerDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkEmojiPickerDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkEmojiPickerDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkEmojiPickerDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkEmojiPickerWindow.stories.ts b/packages/frontend/src/components/MkEmojiPickerWindow.stories.ts
index 39c5ca2b04..f56e5369a8 100644
--- a/packages/frontend/src/components/MkEmojiPickerWindow.stories.ts
+++ b/packages/frontend/src/components/MkEmojiPickerWindow.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkEmojiPickerWindow,
 } satisfies Meta<typeof MkEmojiPickerWindow>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkEmojiPickerWindow,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkEmojiPickerWindow v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkEmojiPickerWindow v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkFeaturedPhotos.stories.ts b/packages/frontend/src/components/MkFeaturedPhotos.stories.ts
index 9f4f2506bc..4894999903 100644
--- a/packages/frontend/src/components/MkFeaturedPhotos.stories.ts
+++ b/packages/frontend/src/components/MkFeaturedPhotos.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkFeaturedPhotos,
 } satisfies Meta<typeof MkFeaturedPhotos>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkFeaturedPhotos,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkFeaturedPhotos v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkFeaturedPhotos v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkFileCaptionEditWindow.stories.ts b/packages/frontend/src/components/MkFileCaptionEditWindow.stories.ts
index c8f731bab9..da29eb06cf 100644
--- a/packages/frontend/src/components/MkFileCaptionEditWindow.stories.ts
+++ b/packages/frontend/src/components/MkFileCaptionEditWindow.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkFileCaptionEditWindow,
 } satisfies Meta<typeof MkFileCaptionEditWindow>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkFileCaptionEditWindow,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkFileCaptionEditWindow v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkFileCaptionEditWindow v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkFileListForAdmin.stories.ts b/packages/frontend/src/components/MkFileListForAdmin.stories.ts
index 9f3b261005..a3fe97ee30 100644
--- a/packages/frontend/src/components/MkFileListForAdmin.stories.ts
+++ b/packages/frontend/src/components/MkFileListForAdmin.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkFileListForAdmin,
 } satisfies Meta<typeof MkFileListForAdmin>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkFileListForAdmin,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkFileListForAdmin v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkFileListForAdmin v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkFlashPreview.stories.ts b/packages/frontend/src/components/MkFlashPreview.stories.ts
index 951863c697..a87b58c7f9 100644
--- a/packages/frontend/src/components/MkFlashPreview.stories.ts
+++ b/packages/frontend/src/components/MkFlashPreview.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkFlashPreview,
 } satisfies Meta<typeof MkFlashPreview>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkFlashPreview,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkFlashPreview v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkFlashPreview v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkFoldableSection.stories.ts b/packages/frontend/src/components/MkFoldableSection.stories.ts
index da65def88c..20eab42e71 100644
--- a/packages/frontend/src/components/MkFoldableSection.stories.ts
+++ b/packages/frontend/src/components/MkFoldableSection.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkFoldableSection,
 } satisfies Meta<typeof MkFoldableSection>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkFoldableSection,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkFoldableSection v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkFoldableSection v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkFolder.stories.ts b/packages/frontend/src/components/MkFolder.stories.ts
index c426a66112..7086d2c6f7 100644
--- a/packages/frontend/src/components/MkFolder.stories.ts
+++ b/packages/frontend/src/components/MkFolder.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkFolder,
 } satisfies Meta<typeof MkFolder>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkFolder,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkFolder v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkFolder v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkFollowButton.stories.ts b/packages/frontend/src/components/MkFollowButton.stories.ts
index 0e61cb36dc..8b4ed2acf9 100644
--- a/packages/frontend/src/components/MkFollowButton.stories.ts
+++ b/packages/frontend/src/components/MkFollowButton.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkFollowButton,
 } satisfies Meta<typeof MkFollowButton>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkFollowButton,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkFollowButton v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkFollowButton v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkForgotPassword.stories.ts b/packages/frontend/src/components/MkForgotPassword.stories.ts
index 4976670c9e..50a82ec105 100644
--- a/packages/frontend/src/components/MkForgotPassword.stories.ts
+++ b/packages/frontend/src/components/MkForgotPassword.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkForgotPassword,
 } satisfies Meta<typeof MkForgotPassword>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkForgotPassword,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkForgotPassword v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkForgotPassword v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkFormDialog.stories.ts b/packages/frontend/src/components/MkFormDialog.stories.ts
index b63991185a..7388e075cc 100644
--- a/packages/frontend/src/components/MkFormDialog.stories.ts
+++ b/packages/frontend/src/components/MkFormDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkFormDialog,
 } satisfies Meta<typeof MkFormDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkFormDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkFormDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkFormDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkGalleryPostPreview.stories.ts b/packages/frontend/src/components/MkGalleryPostPreview.stories.ts
index fc6b7ec0d9..6b354e02b3 100644
--- a/packages/frontend/src/components/MkGalleryPostPreview.stories.ts
+++ b/packages/frontend/src/components/MkGalleryPostPreview.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkGalleryPostPreview,
 } satisfies Meta<typeof MkGalleryPostPreview>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkGalleryPostPreview,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkGalleryPostPreview v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkGalleryPostPreview v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkGoogle.stories.ts b/packages/frontend/src/components/MkGoogle.stories.ts
index 1c15e263e2..046b4bd652 100644
--- a/packages/frontend/src/components/MkGoogle.stories.ts
+++ b/packages/frontend/src/components/MkGoogle.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkGoogle,
 } satisfies Meta<typeof MkGoogle>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkGoogle,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkGoogle v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkGoogle v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkHeatmap.stories.ts b/packages/frontend/src/components/MkHeatmap.stories.ts
index 17bf874d0f..1782029bfc 100644
--- a/packages/frontend/src/components/MkHeatmap.stories.ts
+++ b/packages/frontend/src/components/MkHeatmap.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkHeatmap,
 } satisfies Meta<typeof MkHeatmap>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkHeatmap,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkHeatmap v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkHeatmap v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkImageViewer.stories.ts b/packages/frontend/src/components/MkImageViewer.stories.ts
index 19d50af615..8276b916af 100644
--- a/packages/frontend/src/components/MkImageViewer.stories.ts
+++ b/packages/frontend/src/components/MkImageViewer.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkImageViewer,
 } satisfies Meta<typeof MkImageViewer>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkImageViewer,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkImageViewer v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkImageViewer v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.stories.ts b/packages/frontend/src/components/MkImgWithBlurhash.stories.ts
index 6694a4aaf9..b2693395ba 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.stories.ts
+++ b/packages/frontend/src/components/MkImgWithBlurhash.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkImgWithBlurhash,
 } satisfies Meta<typeof MkImgWithBlurhash>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkImgWithBlurhash,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkImgWithBlurhash v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkImgWithBlurhash v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkInfo.stories.ts b/packages/frontend/src/components/MkInfo.stories.ts
index 886af9af8b..99e46f95e7 100644
--- a/packages/frontend/src/components/MkInfo.stories.ts
+++ b/packages/frontend/src/components/MkInfo.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkInfo,
 } satisfies Meta<typeof MkInfo>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkInfo,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkInfo v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkInfo v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkInput.stories.ts b/packages/frontend/src/components/MkInput.stories.ts
index e372115748..6234735409 100644
--- a/packages/frontend/src/components/MkInput.stories.ts
+++ b/packages/frontend/src/components/MkInput.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkInput,
 } satisfies Meta<typeof MkInput>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkInput,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkInput v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkInput v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkInstanceCardMini.stories.ts b/packages/frontend/src/components/MkInstanceCardMini.stories.ts
index eeb72cd796..919948e64e 100644
--- a/packages/frontend/src/components/MkInstanceCardMini.stories.ts
+++ b/packages/frontend/src/components/MkInstanceCardMini.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkInstanceCardMini,
 } satisfies Meta<typeof MkInstanceCardMini>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkInstanceCardMini,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkInstanceCardMini v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkInstanceCardMini v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkInstanceStats.stories.ts b/packages/frontend/src/components/MkInstanceStats.stories.ts
index 1b14c365b6..df6005ccc9 100644
--- a/packages/frontend/src/components/MkInstanceStats.stories.ts
+++ b/packages/frontend/src/components/MkInstanceStats.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkInstanceStats,
 } satisfies Meta<typeof MkInstanceStats>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkInstanceStats,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkInstanceStats v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkInstanceStats v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkInstanceTicker.stories.ts b/packages/frontend/src/components/MkInstanceTicker.stories.ts
index 2ed1628663..364290640e 100644
--- a/packages/frontend/src/components/MkInstanceTicker.stories.ts
+++ b/packages/frontend/src/components/MkInstanceTicker.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkInstanceTicker,
 } satisfies Meta<typeof MkInstanceTicker>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkInstanceTicker,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkInstanceTicker v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkInstanceTicker v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkKeyValue.stories.ts b/packages/frontend/src/components/MkKeyValue.stories.ts
index 748630113f..5036379752 100644
--- a/packages/frontend/src/components/MkKeyValue.stories.ts
+++ b/packages/frontend/src/components/MkKeyValue.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkKeyValue,
 } satisfies Meta<typeof MkKeyValue>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkKeyValue,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkKeyValue v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkKeyValue v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkLaunchPad.stories.ts b/packages/frontend/src/components/MkLaunchPad.stories.ts
index aa3525124e..54f3ae3b73 100644
--- a/packages/frontend/src/components/MkLaunchPad.stories.ts
+++ b/packages/frontend/src/components/MkLaunchPad.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkLaunchPad,
 } satisfies Meta<typeof MkLaunchPad>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkLaunchPad,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkLaunchPad v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkLaunchPad v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkLink.stories.ts b/packages/frontend/src/components/MkLink.stories.ts
index ef98855b07..cea9509a76 100644
--- a/packages/frontend/src/components/MkLink.stories.ts
+++ b/packages/frontend/src/components/MkLink.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkLink,
 } satisfies Meta<typeof MkLink>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkLink,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkLink v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkLink v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkMarquee.stories.ts b/packages/frontend/src/components/MkMarquee.stories.ts
index 6ade5a4cf2..943b512bf8 100644
--- a/packages/frontend/src/components/MkMarquee.stories.ts
+++ b/packages/frontend/src/components/MkMarquee.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkMarquee,
 } satisfies Meta<typeof MkMarquee>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkMarquee,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkMarquee v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkMarquee v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkMediaBanner.stories.ts b/packages/frontend/src/components/MkMediaBanner.stories.ts
index 9d2d1069da..9dd835b557 100644
--- a/packages/frontend/src/components/MkMediaBanner.stories.ts
+++ b/packages/frontend/src/components/MkMediaBanner.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkMediaBanner,
 } satisfies Meta<typeof MkMediaBanner>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkMediaBanner,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkMediaBanner v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkMediaBanner v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkMediaImage.stories.ts b/packages/frontend/src/components/MkMediaImage.stories.ts
index adfad85063..4089a53ce8 100644
--- a/packages/frontend/src/components/MkMediaImage.stories.ts
+++ b/packages/frontend/src/components/MkMediaImage.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkMediaImage,
 } satisfies Meta<typeof MkMediaImage>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkMediaImage,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkMediaImage v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkMediaImage v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkMediaList.stories.ts b/packages/frontend/src/components/MkMediaList.stories.ts
index e68935ee9d..d88e19c06e 100644
--- a/packages/frontend/src/components/MkMediaList.stories.ts
+++ b/packages/frontend/src/components/MkMediaList.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkMediaList,
 } satisfies Meta<typeof MkMediaList>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkMediaList,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkMediaList v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkMediaList v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkMediaVideo.stories.ts b/packages/frontend/src/components/MkMediaVideo.stories.ts
index 61aafdad83..9f94e8ce52 100644
--- a/packages/frontend/src/components/MkMediaVideo.stories.ts
+++ b/packages/frontend/src/components/MkMediaVideo.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkMediaVideo,
 } satisfies Meta<typeof MkMediaVideo>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkMediaVideo,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkMediaVideo v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkMediaVideo v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkMention.stories.ts b/packages/frontend/src/components/MkMention.stories.ts
index 503ac4a542..ef88a5a6bc 100644
--- a/packages/frontend/src/components/MkMention.stories.ts
+++ b/packages/frontend/src/components/MkMention.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkMention,
 } satisfies Meta<typeof MkMention>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkMention,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkMention v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkMention v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkMenu.child.stories.ts b/packages/frontend/src/components/MkMenu.child.stories.ts
index b45a046ef8..5e84136437 100644
--- a/packages/frontend/src/components/MkMenu.child.stories.ts
+++ b/packages/frontend/src/components/MkMenu.child.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkMenu_child,
 } satisfies Meta<typeof MkMenu_child>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkMenu_child,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkMenu_child v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkMenu_child v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkMenu.stories.ts b/packages/frontend/src/components/MkMenu.stories.ts
index 8a60b68f3e..557ce5363a 100644
--- a/packages/frontend/src/components/MkMenu.stories.ts
+++ b/packages/frontend/src/components/MkMenu.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkMenu,
 } satisfies Meta<typeof MkMenu>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkMenu,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkMenu v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkMenu v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkMiniChart.stories.ts b/packages/frontend/src/components/MkMiniChart.stories.ts
index c0d58421b1..f26c74446d 100644
--- a/packages/frontend/src/components/MkMiniChart.stories.ts
+++ b/packages/frontend/src/components/MkMiniChart.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkMiniChart,
 } satisfies Meta<typeof MkMiniChart>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkMiniChart,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkMiniChart v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkMiniChart v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkModal.stories.ts b/packages/frontend/src/components/MkModal.stories.ts
index 50c77800d8..baaf79dc71 100644
--- a/packages/frontend/src/components/MkModal.stories.ts
+++ b/packages/frontend/src/components/MkModal.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkModal,
 } satisfies Meta<typeof MkModal>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkModal,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkModal v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkModal v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkModalPageWindow.stories.ts b/packages/frontend/src/components/MkModalPageWindow.stories.ts
index 6c8cbef34c..eebd26502f 100644
--- a/packages/frontend/src/components/MkModalPageWindow.stories.ts
+++ b/packages/frontend/src/components/MkModalPageWindow.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkModalPageWindow,
 } satisfies Meta<typeof MkModalPageWindow>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkModalPageWindow,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkModalPageWindow v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkModalPageWindow v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkModalWindow.stories.ts b/packages/frontend/src/components/MkModalWindow.stories.ts
index 7b162ab8bc..fddf98574b 100644
--- a/packages/frontend/src/components/MkModalWindow.stories.ts
+++ b/packages/frontend/src/components/MkModalWindow.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkModalWindow,
 } satisfies Meta<typeof MkModalWindow>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkModalWindow,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkModalWindow v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkModalWindow v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNote.stories.ts b/packages/frontend/src/components/MkNote.stories.ts
index 79d28a7efe..d7a82cffd3 100644
--- a/packages/frontend/src/components/MkNote.stories.ts
+++ b/packages/frontend/src/components/MkNote.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNote,
 } satisfies Meta<typeof MkNote>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNote,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNote v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNote v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNoteDetailed.stories.ts b/packages/frontend/src/components/MkNoteDetailed.stories.ts
index 3a63251f2a..abed199c52 100644
--- a/packages/frontend/src/components/MkNoteDetailed.stories.ts
+++ b/packages/frontend/src/components/MkNoteDetailed.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNoteDetailed,
 } satisfies Meta<typeof MkNoteDetailed>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNoteDetailed,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNoteDetailed v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNoteDetailed v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNoteHeader.stories.ts b/packages/frontend/src/components/MkNoteHeader.stories.ts
index 1ccda97258..d8723eea42 100644
--- a/packages/frontend/src/components/MkNoteHeader.stories.ts
+++ b/packages/frontend/src/components/MkNoteHeader.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNoteHeader,
 } satisfies Meta<typeof MkNoteHeader>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNoteHeader,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNoteHeader v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNoteHeader v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNotePreview.stories.ts b/packages/frontend/src/components/MkNotePreview.stories.ts
index 9270290701..a00795f9ba 100644
--- a/packages/frontend/src/components/MkNotePreview.stories.ts
+++ b/packages/frontend/src/components/MkNotePreview.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNotePreview,
 } satisfies Meta<typeof MkNotePreview>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNotePreview,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNotePreview v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNotePreview v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNoteSimple.stories.ts b/packages/frontend/src/components/MkNoteSimple.stories.ts
index e6e9fb9f49..148089d829 100644
--- a/packages/frontend/src/components/MkNoteSimple.stories.ts
+++ b/packages/frontend/src/components/MkNoteSimple.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNoteSimple,
 } satisfies Meta<typeof MkNoteSimple>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNoteSimple,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNoteSimple v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNoteSimple v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNoteSub.stories.ts b/packages/frontend/src/components/MkNoteSub.stories.ts
index 4d7c0af7b7..dc3fad2f81 100644
--- a/packages/frontend/src/components/MkNoteSub.stories.ts
+++ b/packages/frontend/src/components/MkNoteSub.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNoteSub,
 } satisfies Meta<typeof MkNoteSub>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNoteSub,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNoteSub v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNoteSub v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNotes.stories.ts b/packages/frontend/src/components/MkNotes.stories.ts
index 4551b2c304..8fe2d31b4c 100644
--- a/packages/frontend/src/components/MkNotes.stories.ts
+++ b/packages/frontend/src/components/MkNotes.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNotes,
 } satisfies Meta<typeof MkNotes>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNotes,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNotes v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNotes v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNotification.stories.ts b/packages/frontend/src/components/MkNotification.stories.ts
index 3e4478f9ae..3612d13107 100644
--- a/packages/frontend/src/components/MkNotification.stories.ts
+++ b/packages/frontend/src/components/MkNotification.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNotification,
 } satisfies Meta<typeof MkNotification>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNotification,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNotification v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNotification v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNotificationSettingWindow.stories.ts b/packages/frontend/src/components/MkNotificationSettingWindow.stories.ts
index 059f86b007..ad5e055d04 100644
--- a/packages/frontend/src/components/MkNotificationSettingWindow.stories.ts
+++ b/packages/frontend/src/components/MkNotificationSettingWindow.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNotificationSettingWindow,
 } satisfies Meta<typeof MkNotificationSettingWindow>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNotificationSettingWindow,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNotificationSettingWindow v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNotificationSettingWindow v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNotifications.stories.ts b/packages/frontend/src/components/MkNotifications.stories.ts
index 48ab20bf90..5de01c2f92 100644
--- a/packages/frontend/src/components/MkNotifications.stories.ts
+++ b/packages/frontend/src/components/MkNotifications.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNotifications,
 } satisfies Meta<typeof MkNotifications>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNotifications,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNotifications v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNotifications v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNumber.stories.ts b/packages/frontend/src/components/MkNumber.stories.ts
index 837de8329e..1689bb431e 100644
--- a/packages/frontend/src/components/MkNumber.stories.ts
+++ b/packages/frontend/src/components/MkNumber.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNumber,
 } satisfies Meta<typeof MkNumber>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNumber,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNumber v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNumber v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkNumberDiff.stories.ts b/packages/frontend/src/components/MkNumberDiff.stories.ts
index 9c1fcc2179..bc281e62aa 100644
--- a/packages/frontend/src/components/MkNumberDiff.stories.ts
+++ b/packages/frontend/src/components/MkNumberDiff.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkNumberDiff,
 } satisfies Meta<typeof MkNumberDiff>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkNumberDiff,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkNumberDiff v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkNumberDiff v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkObjectView.stories.ts b/packages/frontend/src/components/MkObjectView.stories.ts
index c7aec40dc8..90c446fbdb 100644
--- a/packages/frontend/src/components/MkObjectView.stories.ts
+++ b/packages/frontend/src/components/MkObjectView.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkObjectView,
 } satisfies Meta<typeof MkObjectView>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkObjectView,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkObjectView v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkObjectView v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkObjectView.value.stories.ts b/packages/frontend/src/components/MkObjectView.value.stories.ts
index da7ae5958d..24b0e15531 100644
--- a/packages/frontend/src/components/MkObjectView.value.stories.ts
+++ b/packages/frontend/src/components/MkObjectView.value.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkObjectView_value,
 } satisfies Meta<typeof MkObjectView_value>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkObjectView_value,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkObjectView_value v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkObjectView_value v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkOmit.stories.ts b/packages/frontend/src/components/MkOmit.stories.ts
index 4c2dd1b3ac..06963423bd 100644
--- a/packages/frontend/src/components/MkOmit.stories.ts
+++ b/packages/frontend/src/components/MkOmit.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkOmit,
 } satisfies Meta<typeof MkOmit>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkOmit,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkOmit v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkOmit v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPagePreview.stories.ts b/packages/frontend/src/components/MkPagePreview.stories.ts
index 6b8121527e..d1ddf6707b 100644
--- a/packages/frontend/src/components/MkPagePreview.stories.ts
+++ b/packages/frontend/src/components/MkPagePreview.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPagePreview,
 } satisfies Meta<typeof MkPagePreview>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPagePreview,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPagePreview v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPagePreview v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPageWindow.stories.ts b/packages/frontend/src/components/MkPageWindow.stories.ts
index 846dd9f65c..334b3bc292 100644
--- a/packages/frontend/src/components/MkPageWindow.stories.ts
+++ b/packages/frontend/src/components/MkPageWindow.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPageWindow,
 } satisfies Meta<typeof MkPageWindow>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPageWindow,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPageWindow v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPageWindow v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPagination.stories.ts b/packages/frontend/src/components/MkPagination.stories.ts
index 78a99081c9..3bf7fb92bd 100644
--- a/packages/frontend/src/components/MkPagination.stories.ts
+++ b/packages/frontend/src/components/MkPagination.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPagination,
 } satisfies Meta<typeof MkPagination>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPagination,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPagination v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPagination v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPlusOneEffect.stories.ts b/packages/frontend/src/components/MkPlusOneEffect.stories.ts
index b6851053d3..6708f2ba61 100644
--- a/packages/frontend/src/components/MkPlusOneEffect.stories.ts
+++ b/packages/frontend/src/components/MkPlusOneEffect.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPlusOneEffect,
 } satisfies Meta<typeof MkPlusOneEffect>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPlusOneEffect,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPlusOneEffect v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPlusOneEffect v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPoll.stories.ts b/packages/frontend/src/components/MkPoll.stories.ts
index 651847cb15..dbab8671dd 100644
--- a/packages/frontend/src/components/MkPoll.stories.ts
+++ b/packages/frontend/src/components/MkPoll.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPoll,
 } satisfies Meta<typeof MkPoll>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPoll,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPoll v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPoll v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPollEditor.stories.ts b/packages/frontend/src/components/MkPollEditor.stories.ts
index 0629b9a685..8d26f2cbfb 100644
--- a/packages/frontend/src/components/MkPollEditor.stories.ts
+++ b/packages/frontend/src/components/MkPollEditor.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPollEditor,
 } satisfies Meta<typeof MkPollEditor>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPollEditor,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPollEditor v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPollEditor v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPopupMenu.stories.ts b/packages/frontend/src/components/MkPopupMenu.stories.ts
index 090e1f494b..2727ae37a3 100644
--- a/packages/frontend/src/components/MkPopupMenu.stories.ts
+++ b/packages/frontend/src/components/MkPopupMenu.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPopupMenu,
 } satisfies Meta<typeof MkPopupMenu>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPopupMenu,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPopupMenu v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPopupMenu v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPostForm.stories.ts b/packages/frontend/src/components/MkPostForm.stories.ts
index 5ed74b029d..e9623581a7 100644
--- a/packages/frontend/src/components/MkPostForm.stories.ts
+++ b/packages/frontend/src/components/MkPostForm.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPostForm,
 } satisfies Meta<typeof MkPostForm>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPostForm,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPostForm v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPostForm v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPostFormAttaches.stories.ts b/packages/frontend/src/components/MkPostFormAttaches.stories.ts
index 687f0bfaf2..26ea2a43f4 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.stories.ts
+++ b/packages/frontend/src/components/MkPostFormAttaches.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPostFormAttaches,
 } satisfies Meta<typeof MkPostFormAttaches>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPostFormAttaches,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPostFormAttaches v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPostFormAttaches v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPostFormDialog.stories.ts b/packages/frontend/src/components/MkPostFormDialog.stories.ts
index 616d6f1f83..3b79730501 100644
--- a/packages/frontend/src/components/MkPostFormDialog.stories.ts
+++ b/packages/frontend/src/components/MkPostFormDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPostFormDialog,
 } satisfies Meta<typeof MkPostFormDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPostFormDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPostFormDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPostFormDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkPushNotificationAllowButton.stories.ts b/packages/frontend/src/components/MkPushNotificationAllowButton.stories.ts
index 15ef8eb045..664ed0a447 100644
--- a/packages/frontend/src/components/MkPushNotificationAllowButton.stories.ts
+++ b/packages/frontend/src/components/MkPushNotificationAllowButton.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPushNotificationAllowButton,
 } satisfies Meta<typeof MkPushNotificationAllowButton>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPushNotificationAllowButton,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPushNotificationAllowButton v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPushNotificationAllowButton v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkRadio.stories.ts b/packages/frontend/src/components/MkRadio.stories.ts
index 8056eecf84..728b864fca 100644
--- a/packages/frontend/src/components/MkRadio.stories.ts
+++ b/packages/frontend/src/components/MkRadio.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkRadio,
 } satisfies Meta<typeof MkRadio>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkRadio,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkRadio v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkRadio v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkRadios.stories.ts b/packages/frontend/src/components/MkRadios.stories.ts
index b3a0e39efb..b5059ea47c 100644
--- a/packages/frontend/src/components/MkRadios.stories.ts
+++ b/packages/frontend/src/components/MkRadios.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkRadios,
 } satisfies Meta<typeof MkRadios>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkRadios,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkRadios v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkRadios v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkRange.stories.ts b/packages/frontend/src/components/MkRange.stories.ts
index dc6caae4d5..8b68f4d1c3 100644
--- a/packages/frontend/src/components/MkRange.stories.ts
+++ b/packages/frontend/src/components/MkRange.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkRange,
 } satisfies Meta<typeof MkRange>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkRange,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkRange v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkRange v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkReactedUsersDialog.stories.ts b/packages/frontend/src/components/MkReactedUsersDialog.stories.ts
index 10b9b6e2ed..16041af5ac 100644
--- a/packages/frontend/src/components/MkReactedUsersDialog.stories.ts
+++ b/packages/frontend/src/components/MkReactedUsersDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkReactedUsersDialog,
 } satisfies Meta<typeof MkReactedUsersDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkReactedUsersDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkReactedUsersDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkReactedUsersDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkReactionEffect.stories.ts b/packages/frontend/src/components/MkReactionEffect.stories.ts
index 5bba9aa1af..2d5599c147 100644
--- a/packages/frontend/src/components/MkReactionEffect.stories.ts
+++ b/packages/frontend/src/components/MkReactionEffect.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkReactionEffect,
 } satisfies Meta<typeof MkReactionEffect>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkReactionEffect,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkReactionEffect v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkReactionEffect v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkReactionIcon.stories.ts b/packages/frontend/src/components/MkReactionIcon.stories.ts
index ab78807357..309e86aded 100644
--- a/packages/frontend/src/components/MkReactionIcon.stories.ts
+++ b/packages/frontend/src/components/MkReactionIcon.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkReactionIcon,
 } satisfies Meta<typeof MkReactionIcon>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkReactionIcon,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkReactionIcon v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkReactionIcon v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkReactionTooltip.stories.ts b/packages/frontend/src/components/MkReactionTooltip.stories.ts
index b3478f3110..41bb73c7bf 100644
--- a/packages/frontend/src/components/MkReactionTooltip.stories.ts
+++ b/packages/frontend/src/components/MkReactionTooltip.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkReactionTooltip,
 } satisfies Meta<typeof MkReactionTooltip>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkReactionTooltip,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkReactionTooltip v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkReactionTooltip v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkReactionsViewer.details.stories.ts b/packages/frontend/src/components/MkReactionsViewer.details.stories.ts
index c853b4da3b..9e54ce7401 100644
--- a/packages/frontend/src/components/MkReactionsViewer.details.stories.ts
+++ b/packages/frontend/src/components/MkReactionsViewer.details.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkReactionsViewer_details,
 } satisfies Meta<typeof MkReactionsViewer_details>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkReactionsViewer_details,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkReactionsViewer_details v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkReactionsViewer_details v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.stories.ts b/packages/frontend/src/components/MkReactionsViewer.reaction.stories.ts
index 9f5160f06e..9e35252beb 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.stories.ts
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkReactionsViewer_reaction,
 } satisfies Meta<typeof MkReactionsViewer_reaction>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkReactionsViewer_reaction,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkReactionsViewer_reaction v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkReactionsViewer_reaction v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkReactionsViewer.stories.ts b/packages/frontend/src/components/MkReactionsViewer.stories.ts
index 30262c02b0..706428fb01 100644
--- a/packages/frontend/src/components/MkReactionsViewer.stories.ts
+++ b/packages/frontend/src/components/MkReactionsViewer.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkReactionsViewer,
 } satisfies Meta<typeof MkReactionsViewer>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkReactionsViewer,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkReactionsViewer v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkReactionsViewer v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkRemoteCaution.stories.ts b/packages/frontend/src/components/MkRemoteCaution.stories.ts
index 103e77fc4f..3b91a07153 100644
--- a/packages/frontend/src/components/MkRemoteCaution.stories.ts
+++ b/packages/frontend/src/components/MkRemoteCaution.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkRemoteCaution,
 } satisfies Meta<typeof MkRemoteCaution>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkRemoteCaution,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkRemoteCaution v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkRemoteCaution v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkRetentionHeatmap.stories.ts b/packages/frontend/src/components/MkRetentionHeatmap.stories.ts
index fb19bd30fe..3b7872b189 100644
--- a/packages/frontend/src/components/MkRetentionHeatmap.stories.ts
+++ b/packages/frontend/src/components/MkRetentionHeatmap.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkRetentionHeatmap,
 } satisfies Meta<typeof MkRetentionHeatmap>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkRetentionHeatmap,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkRetentionHeatmap v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkRetentionHeatmap v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkRippleEffect.stories.ts b/packages/frontend/src/components/MkRippleEffect.stories.ts
index 73552e9d09..04eb7cc1d4 100644
--- a/packages/frontend/src/components/MkRippleEffect.stories.ts
+++ b/packages/frontend/src/components/MkRippleEffect.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkRippleEffect,
 } satisfies Meta<typeof MkRippleEffect>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkRippleEffect,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkRippleEffect v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkRippleEffect v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkRolePreview.stories.ts b/packages/frontend/src/components/MkRolePreview.stories.ts
index 1cc60992e4..15953c7171 100644
--- a/packages/frontend/src/components/MkRolePreview.stories.ts
+++ b/packages/frontend/src/components/MkRolePreview.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkRolePreview,
 } satisfies Meta<typeof MkRolePreview>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkRolePreview,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkRolePreview v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkRolePreview v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkSample.stories.ts b/packages/frontend/src/components/MkSample.stories.ts
index 6bc18d2903..b1e6459cf3 100644
--- a/packages/frontend/src/components/MkSample.stories.ts
+++ b/packages/frontend/src/components/MkSample.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSample,
 } satisfies Meta<typeof MkSample>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSample,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSample v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSample v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkSelect.stories.ts b/packages/frontend/src/components/MkSelect.stories.ts
index 7996a53e14..8012045973 100644
--- a/packages/frontend/src/components/MkSelect.stories.ts
+++ b/packages/frontend/src/components/MkSelect.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSelect,
 } satisfies Meta<typeof MkSelect>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSelect,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSelect v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSelect v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkSignin.stories.ts b/packages/frontend/src/components/MkSignin.stories.ts
index 8f03065e1d..1ac0973cef 100644
--- a/packages/frontend/src/components/MkSignin.stories.ts
+++ b/packages/frontend/src/components/MkSignin.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSignin,
 } satisfies Meta<typeof MkSignin>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSignin,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSignin v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSignin v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkSigninDialog.stories.ts b/packages/frontend/src/components/MkSigninDialog.stories.ts
index d2e0689b44..3e4a3a7cb7 100644
--- a/packages/frontend/src/components/MkSigninDialog.stories.ts
+++ b/packages/frontend/src/components/MkSigninDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSigninDialog,
 } satisfies Meta<typeof MkSigninDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSigninDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSigninDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSigninDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkSignup.stories.ts b/packages/frontend/src/components/MkSignup.stories.ts
index a67235f6a2..8372680014 100644
--- a/packages/frontend/src/components/MkSignup.stories.ts
+++ b/packages/frontend/src/components/MkSignup.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSignup,
 } satisfies Meta<typeof MkSignup>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSignup,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSignup v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSignup v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkSignupDialog.stories.ts b/packages/frontend/src/components/MkSignupDialog.stories.ts
index dfca62ba28..7eb70e6a88 100644
--- a/packages/frontend/src/components/MkSignupDialog.stories.ts
+++ b/packages/frontend/src/components/MkSignupDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSignupDialog,
 } satisfies Meta<typeof MkSignupDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSignupDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSignupDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSignupDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkSparkle.stories.ts b/packages/frontend/src/components/MkSparkle.stories.ts
index 4e784abf5e..6c1dca90d9 100644
--- a/packages/frontend/src/components/MkSparkle.stories.ts
+++ b/packages/frontend/src/components/MkSparkle.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSparkle,
 } satisfies Meta<typeof MkSparkle>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSparkle,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSparkle v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSparkle v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkSubNoteContent.stories.ts b/packages/frontend/src/components/MkSubNoteContent.stories.ts
index ee19f578bc..fa9c0bb7f0 100644
--- a/packages/frontend/src/components/MkSubNoteContent.stories.ts
+++ b/packages/frontend/src/components/MkSubNoteContent.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSubNoteContent,
 } satisfies Meta<typeof MkSubNoteContent>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSubNoteContent,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSubNoteContent v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSubNoteContent v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkSuperMenu.stories.ts b/packages/frontend/src/components/MkSuperMenu.stories.ts
index b6db1e8617..9ef7906884 100644
--- a/packages/frontend/src/components/MkSuperMenu.stories.ts
+++ b/packages/frontend/src/components/MkSuperMenu.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSuperMenu,
 } satisfies Meta<typeof MkSuperMenu>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSuperMenu,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSuperMenu v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSuperMenu v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkSwitch.stories.ts b/packages/frontend/src/components/MkSwitch.stories.ts
index 8e7b8ffb1c..f01191be83 100644
--- a/packages/frontend/src/components/MkSwitch.stories.ts
+++ b/packages/frontend/src/components/MkSwitch.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSwitch,
 } satisfies Meta<typeof MkSwitch>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSwitch,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSwitch v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSwitch v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkTab.stories.ts b/packages/frontend/src/components/MkTab.stories.ts
index 092a84a748..1ff6c06a0d 100644
--- a/packages/frontend/src/components/MkTab.stories.ts
+++ b/packages/frontend/src/components/MkTab.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkTab,
 } satisfies Meta<typeof MkTab>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkTab,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkTab v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkTab v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkTagCloud.stories.ts b/packages/frontend/src/components/MkTagCloud.stories.ts
index 6bfbc03524..83aba5409b 100644
--- a/packages/frontend/src/components/MkTagCloud.stories.ts
+++ b/packages/frontend/src/components/MkTagCloud.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkTagCloud,
 } satisfies Meta<typeof MkTagCloud>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkTagCloud,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkTagCloud v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkTagCloud v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkTextarea.stories.ts b/packages/frontend/src/components/MkTextarea.stories.ts
index 92c496db9b..9bfc2a23af 100644
--- a/packages/frontend/src/components/MkTextarea.stories.ts
+++ b/packages/frontend/src/components/MkTextarea.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkTextarea,
 } satisfies Meta<typeof MkTextarea>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkTextarea,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkTextarea v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkTextarea v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkTimeline.stories.ts b/packages/frontend/src/components/MkTimeline.stories.ts
index b6bfb600dc..511bdead17 100644
--- a/packages/frontend/src/components/MkTimeline.stories.ts
+++ b/packages/frontend/src/components/MkTimeline.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkTimeline,
 } satisfies Meta<typeof MkTimeline>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkTimeline,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkTimeline v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkTimeline v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkToast.stories.ts b/packages/frontend/src/components/MkToast.stories.ts
index fef647287c..c5f80f61be 100644
--- a/packages/frontend/src/components/MkToast.stories.ts
+++ b/packages/frontend/src/components/MkToast.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkToast,
 } satisfies Meta<typeof MkToast>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkToast,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkToast v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkToast v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkTokenGenerateWindow.stories.ts b/packages/frontend/src/components/MkTokenGenerateWindow.stories.ts
index fb9b1bc6da..5229d6d6c6 100644
--- a/packages/frontend/src/components/MkTokenGenerateWindow.stories.ts
+++ b/packages/frontend/src/components/MkTokenGenerateWindow.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkTokenGenerateWindow,
 } satisfies Meta<typeof MkTokenGenerateWindow>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkTokenGenerateWindow,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkTokenGenerateWindow v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkTokenGenerateWindow v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkTooltip.stories.ts b/packages/frontend/src/components/MkTooltip.stories.ts
index 2ea06ac2a8..19f22ede15 100644
--- a/packages/frontend/src/components/MkTooltip.stories.ts
+++ b/packages/frontend/src/components/MkTooltip.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkTooltip,
 } satisfies Meta<typeof MkTooltip>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkTooltip,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkTooltip v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkTooltip v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkUpdated.stories.ts b/packages/frontend/src/components/MkUpdated.stories.ts
index 5a8a16a6b7..58069bd1d9 100644
--- a/packages/frontend/src/components/MkUpdated.stories.ts
+++ b/packages/frontend/src/components/MkUpdated.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUpdated,
 } satisfies Meta<typeof MkUpdated>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUpdated,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUpdated v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUpdated v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkUrlPreview.stories.ts b/packages/frontend/src/components/MkUrlPreview.stories.ts
index 9f9d8c8f86..29a393a5ac 100644
--- a/packages/frontend/src/components/MkUrlPreview.stories.ts
+++ b/packages/frontend/src/components/MkUrlPreview.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUrlPreview,
 } satisfies Meta<typeof MkUrlPreview>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUrlPreview,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUrlPreview v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUrlPreview v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.stories.ts b/packages/frontend/src/components/MkUrlPreviewPopup.stories.ts
index 74657a93ae..f9df0987a1 100644
--- a/packages/frontend/src/components/MkUrlPreviewPopup.stories.ts
+++ b/packages/frontend/src/components/MkUrlPreviewPopup.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUrlPreviewPopup,
 } satisfies Meta<typeof MkUrlPreviewPopup>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUrlPreviewPopup,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUrlPreviewPopup v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUrlPreviewPopup v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkUserCardMini.stories.ts b/packages/frontend/src/components/MkUserCardMini.stories.ts
index 81de09a199..8ed97c4b49 100644
--- a/packages/frontend/src/components/MkUserCardMini.stories.ts
+++ b/packages/frontend/src/components/MkUserCardMini.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUserCardMini,
 } satisfies Meta<typeof MkUserCardMini>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUserCardMini,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUserCardMini v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUserCardMini v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkUserInfo.stories.ts b/packages/frontend/src/components/MkUserInfo.stories.ts
index 286de8925f..553df44660 100644
--- a/packages/frontend/src/components/MkUserInfo.stories.ts
+++ b/packages/frontend/src/components/MkUserInfo.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUserInfo,
 } satisfies Meta<typeof MkUserInfo>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUserInfo,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUserInfo v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUserInfo v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkUserList.stories.ts b/packages/frontend/src/components/MkUserList.stories.ts
index 97f4d1f7d8..927364596b 100644
--- a/packages/frontend/src/components/MkUserList.stories.ts
+++ b/packages/frontend/src/components/MkUserList.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUserList,
 } satisfies Meta<typeof MkUserList>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUserList,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUserList v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUserList v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkUserOnlineIndicator.stories.ts b/packages/frontend/src/components/MkUserOnlineIndicator.stories.ts
index 2b9daf9b5b..c576b91b57 100644
--- a/packages/frontend/src/components/MkUserOnlineIndicator.stories.ts
+++ b/packages/frontend/src/components/MkUserOnlineIndicator.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUserOnlineIndicator,
 } satisfies Meta<typeof MkUserOnlineIndicator>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUserOnlineIndicator,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUserOnlineIndicator v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUserOnlineIndicator v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkUserPopup.stories.ts b/packages/frontend/src/components/MkUserPopup.stories.ts
index a74ed2609b..5a30d4ba4f 100644
--- a/packages/frontend/src/components/MkUserPopup.stories.ts
+++ b/packages/frontend/src/components/MkUserPopup.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUserPopup,
 } satisfies Meta<typeof MkUserPopup>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUserPopup,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUserPopup v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUserPopup v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkUserSelectDialog.stories.ts b/packages/frontend/src/components/MkUserSelectDialog.stories.ts
index 522c1fc632..ffda531ed3 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.stories.ts
+++ b/packages/frontend/src/components/MkUserSelectDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUserSelectDialog,
 } satisfies Meta<typeof MkUserSelectDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUserSelectDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUserSelectDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUserSelectDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkUsersTooltip.stories.ts b/packages/frontend/src/components/MkUsersTooltip.stories.ts
index 9b057bea6d..6fa843e8b5 100644
--- a/packages/frontend/src/components/MkUsersTooltip.stories.ts
+++ b/packages/frontend/src/components/MkUsersTooltip.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUsersTooltip,
 } satisfies Meta<typeof MkUsersTooltip>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUsersTooltip,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUsersTooltip v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUsersTooltip v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkVisibilityPicker.stories.ts b/packages/frontend/src/components/MkVisibilityPicker.stories.ts
index 52156bfe11..3d62ddd9d0 100644
--- a/packages/frontend/src/components/MkVisibilityPicker.stories.ts
+++ b/packages/frontend/src/components/MkVisibilityPicker.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkVisibilityPicker,
 } satisfies Meta<typeof MkVisibilityPicker>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkVisibilityPicker,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkVisibilityPicker v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkVisibilityPicker v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkWaitingDialog.stories.ts b/packages/frontend/src/components/MkWaitingDialog.stories.ts
index ea79004c39..b2314523d9 100644
--- a/packages/frontend/src/components/MkWaitingDialog.stories.ts
+++ b/packages/frontend/src/components/MkWaitingDialog.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkWaitingDialog,
 } satisfies Meta<typeof MkWaitingDialog>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkWaitingDialog,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkWaitingDialog v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkWaitingDialog v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkWidgets.stories.ts b/packages/frontend/src/components/MkWidgets.stories.ts
index 7a6aad357f..39e91faafd 100644
--- a/packages/frontend/src/components/MkWidgets.stories.ts
+++ b/packages/frontend/src/components/MkWidgets.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkWidgets,
 } satisfies Meta<typeof MkWidgets>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkWidgets,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkWidgets v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkWidgets v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkWindow.stories.ts b/packages/frontend/src/components/MkWindow.stories.ts
index 8f1a27631c..fcc9bd3002 100644
--- a/packages/frontend/src/components/MkWindow.stories.ts
+++ b/packages/frontend/src/components/MkWindow.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkWindow,
 } satisfies Meta<typeof MkWindow>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkWindow,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkWindow v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkWindow v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/MkYouTubePlayer.stories.ts b/packages/frontend/src/components/MkYouTubePlayer.stories.ts
index 84f1dcd889..79191bbcd0 100644
--- a/packages/frontend/src/components/MkYouTubePlayer.stories.ts
+++ b/packages/frontend/src/components/MkYouTubePlayer.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkYouTubePlayer,
 } satisfies Meta<typeof MkYouTubePlayer>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkYouTubePlayer,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkYouTubePlayer v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkYouTubePlayer v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/form/link.stories.ts b/packages/frontend/src/components/form/link.stories.ts
index 54e6c25ca8..b0ac7ee504 100644
--- a/packages/frontend/src/components/form/link.stories.ts
+++ b/packages/frontend/src/components/form/link.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: link_,
 } satisfies Meta<typeof link_>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				link_,
 			},
-			props: Object.keys(argTypes),
-			template: '<link_ v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<link_ v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/form/section.stories.ts b/packages/frontend/src/components/form/section.stories.ts
index fabddc668b..0da19356e9 100644
--- a/packages/frontend/src/components/form/section.stories.ts
+++ b/packages/frontend/src/components/form/section.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: section_,
 } satisfies Meta<typeof section_>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				section_,
 			},
-			props: Object.keys(argTypes),
-			template: '<section_ v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<section_ v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/form/slot.stories.ts b/packages/frontend/src/components/form/slot.stories.ts
index 6ddafe86c8..2c441f1156 100644
--- a/packages/frontend/src/components/form/slot.stories.ts
+++ b/packages/frontend/src/components/form/slot.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: slot_,
 } satisfies Meta<typeof slot_>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				slot_,
 			},
-			props: Object.keys(argTypes),
-			template: '<slot_ v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<slot_ v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/form/split.stories.ts b/packages/frontend/src/components/form/split.stories.ts
index 3495bd7318..5aece4082f 100644
--- a/packages/frontend/src/components/form/split.stories.ts
+++ b/packages/frontend/src/components/form/split.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: split_,
 } satisfies Meta<typeof split_>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				split_,
 			},
-			props: Object.keys(argTypes),
-			template: '<split_ v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<split_ v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/form/suspense.stories.ts b/packages/frontend/src/components/form/suspense.stories.ts
index a22580d7a9..ccd2d7d099 100644
--- a/packages/frontend/src/components/form/suspense.stories.ts
+++ b/packages/frontend/src/components/form/suspense.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: suspense_,
 } satisfies Meta<typeof suspense_>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				suspense_,
 			},
-			props: Object.keys(argTypes),
-			template: '<suspense_ v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<suspense_ v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkA.stories.ts b/packages/frontend/src/components/global/MkA.stories.ts
index e3d56c63c3..91ea368263 100644
--- a/packages/frontend/src/components/global/MkA.stories.ts
+++ b/packages/frontend/src/components/global/MkA.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkA,
 } satisfies Meta<typeof MkA>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkA,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkA v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkA v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkAcct.stories.ts b/packages/frontend/src/components/global/MkAcct.stories.ts
index a710c227a0..90f66bc182 100644
--- a/packages/frontend/src/components/global/MkAcct.stories.ts
+++ b/packages/frontend/src/components/global/MkAcct.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkAcct,
 } satisfies Meta<typeof MkAcct>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkAcct,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkAcct v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAcct v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkAd.stories.ts b/packages/frontend/src/components/global/MkAd.stories.ts
index 687bf30ab5..9f4dc320ba 100644
--- a/packages/frontend/src/components/global/MkAd.stories.ts
+++ b/packages/frontend/src/components/global/MkAd.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkAd,
 } satisfies Meta<typeof MkAd>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkAd,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkAd v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAd v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkAvatar.stories.impl.ts b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts
new file mode 100644
index 0000000000..ca3db80b2e
--- /dev/null
+++ b/packages/frontend/src/components/global/MkAvatar.stories.impl.ts
@@ -0,0 +1,64 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-default-export */
+/* eslint-disable import/no-duplicates */
+import { StoryObj } from '@storybook/vue3';
+import MkAvatar from './MkAvatar.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MkAvatar,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAvatar v-bind="props" />',
+		};
+	},
+	args: {
+		size: 48,
+		user: {
+			avatarUrl: 'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
+		},
+	},
+	decorators: [
+		(Story, context) => ({
+			// eslint-disable-next-line quotes
+			template: `<div :style="{ display: 'grid', width: '${context.args.size}px', height: '${context.args.size}px' }"><story/></div>`,
+		}),
+	],
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkAvatar>;
+export const ProfilePage = {
+	...Default,
+	args: {
+		...Default.args,
+		size: 120,
+		indicator: true,
+		user: {
+			...Default.args.user,
+			onlineStatus: 'unknown',
+		},
+	},
+};
+export const ProfilePageCat = {
+	...ProfilePage,
+	args: {
+		...ProfilePage.args,
+		user: {
+			...ProfilePage.args.user,
+			isCat: true,
+		},
+	},
+};
diff --git a/packages/frontend/src/components/global/MkAvatar.stories.ts b/packages/frontend/src/components/global/MkAvatar.stories.ts
index 644a1f2f34..6cd9ca0a9b 100644
--- a/packages/frontend/src/components/global/MkAvatar.stories.ts
+++ b/packages/frontend/src/components/global/MkAvatar.stories.ts
@@ -1,23 +1,80 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
-import { Meta, StoryObj } from '@storybook/vue3';
-import MkAvatar from './MkAvatar.vue';
+import { Meta } from '@storybook/vue3';
 const meta = {
 	title: 'components/global/MkAvatar',
 	component: MkAvatar,
 } satisfies Meta<typeof MkAvatar>;
+export default meta;
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-default-export */
+/* eslint-disable import/no-duplicates */
+import { StoryObj } from '@storybook/vue3';
+import MkAvatar from './MkAvatar.vue';
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkAvatar,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkAvatar v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkAvatar v-bind="props" />',
 		};
 	},
+	args: {
+		size: 48,
+		user: {
+			avatarUrl:
+				'https://github.com/misskey-dev/misskey/blob/master/packages/frontend/assets/about-icon.png?raw=true',
+		},
+	},
+	decorators: [
+		(Story, context) => ({
+			// eslint-disable-next-line quotes
+			template: `<div :style="{ display: 'grid', width: '${context.args.size}px', height: '${context.args.size}px' }"><story/></div>`,
+		}),
+	],
 	parameters: {
 		layout: 'centered',
 	},
 } satisfies StoryObj<typeof MkAvatar>;
-export default meta;
+export const ProfilePage = {
+	...Default,
+	args: {
+		...Default.args,
+		size: 120,
+		indicator: true,
+		user: {
+			...Default.args.user,
+			onlineStatus: 'unknown',
+		},
+	},
+};
+export const ProfilePageCat = {
+	...ProfilePage,
+	args: {
+		...ProfilePage.args,
+		user: {
+			...ProfilePage.args.user,
+			isCat: true,
+			// avatarUrl: 'https://millionlive-theaterdays.idolmaster-official.jp/assets/data/webp/common/footer/icon_app.png.webp',
+			// avatarUrl: 'https://cdn.imastodon.net/accounts/avatars/000/144/021/original/8137afa4114ab85f.png',
+			// avatarUrl: 'https://avatars.githubusercontent.com/u/4439005?v=4',
+			// avatarUrl: 'https://avatars.githubusercontent.com/u/7973572?v=4',
+			// avatarUrl: 'https://avatars.githubusercontent.com/u/6533808?v=4',
+			// avatarUrl: 'https://avatars.githubusercontent.com/u/7106976?v=4',
+			avatarUrl: 'https://avatars.githubusercontent.com/u/3396686?v=4',
+		},
+	},
+};
diff --git a/packages/frontend/src/components/global/MkCustomEmoji.stories.ts b/packages/frontend/src/components/global/MkCustomEmoji.stories.ts
index cc9d4d668a..76c70b9aba 100644
--- a/packages/frontend/src/components/global/MkCustomEmoji.stories.ts
+++ b/packages/frontend/src/components/global/MkCustomEmoji.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkCustomEmoji,
 } satisfies Meta<typeof MkCustomEmoji>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkCustomEmoji,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkCustomEmoji v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkCustomEmoji v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkEllipsis.stories.ts b/packages/frontend/src/components/global/MkEllipsis.stories.ts
index cdae6b11b5..5b8b7ca062 100644
--- a/packages/frontend/src/components/global/MkEllipsis.stories.ts
+++ b/packages/frontend/src/components/global/MkEllipsis.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkEllipsis,
 } satisfies Meta<typeof MkEllipsis>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkEllipsis,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkEllipsis v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkEllipsis v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkEmoji.stories.ts b/packages/frontend/src/components/global/MkEmoji.stories.ts
index 7c48937c7a..cca084e2db 100644
--- a/packages/frontend/src/components/global/MkEmoji.stories.ts
+++ b/packages/frontend/src/components/global/MkEmoji.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkEmoji,
 } satisfies Meta<typeof MkEmoji>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkEmoji,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkEmoji v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkEmoji v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkError.stories.ts b/packages/frontend/src/components/global/MkError.stories.ts
index d04d57f01f..ce7f40f56d 100644
--- a/packages/frontend/src/components/global/MkError.stories.ts
+++ b/packages/frontend/src/components/global/MkError.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkError,
 } satisfies Meta<typeof MkError>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkError,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkError v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkError v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkLoading.stories.ts b/packages/frontend/src/components/global/MkLoading.stories.ts
index 4fe0d4ff34..a83c41a0ea 100644
--- a/packages/frontend/src/components/global/MkLoading.stories.ts
+++ b/packages/frontend/src/components/global/MkLoading.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkLoading,
 } satisfies Meta<typeof MkLoading>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkLoading,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkLoading v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkLoading v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts
index 23869d98e7..18407d188c 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkMisskeyFlavoredMarkdown,
 } satisfies Meta<typeof MkMisskeyFlavoredMarkdown>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkMisskeyFlavoredMarkdown,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkMisskeyFlavoredMarkdown v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkMisskeyFlavoredMarkdown v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkPageHeader.stories.ts b/packages/frontend/src/components/global/MkPageHeader.stories.ts
index aa7c5b5f8a..6f0b9dd344 100644
--- a/packages/frontend/src/components/global/MkPageHeader.stories.ts
+++ b/packages/frontend/src/components/global/MkPageHeader.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPageHeader,
 } satisfies Meta<typeof MkPageHeader>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPageHeader,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPageHeader v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPageHeader v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts b/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts
index 0dfa7ab6e9..611aa01790 100644
--- a/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkPageHeader_tabs,
 } satisfies Meta<typeof MkPageHeader_tabs>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkPageHeader_tabs,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkPageHeader_tabs v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkPageHeader_tabs v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkSpacer.stories.ts b/packages/frontend/src/components/global/MkSpacer.stories.ts
index 1ca0f7da95..f5e7b2eb9b 100644
--- a/packages/frontend/src/components/global/MkSpacer.stories.ts
+++ b/packages/frontend/src/components/global/MkSpacer.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkSpacer,
 } satisfies Meta<typeof MkSpacer>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkSpacer,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkSpacer v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkSpacer v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkStickyContainer.stories.ts b/packages/frontend/src/components/global/MkStickyContainer.stories.ts
index cad5cd06fa..180fdddb1a 100644
--- a/packages/frontend/src/components/global/MkStickyContainer.stories.ts
+++ b/packages/frontend/src/components/global/MkStickyContainer.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkStickyContainer,
 } satisfies Meta<typeof MkStickyContainer>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkStickyContainer,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkStickyContainer v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkStickyContainer v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkTime.stories.ts b/packages/frontend/src/components/global/MkTime.stories.ts
index c1d5fd6644..d45dc70f28 100644
--- a/packages/frontend/src/components/global/MkTime.stories.ts
+++ b/packages/frontend/src/components/global/MkTime.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkTime,
 } satisfies Meta<typeof MkTime>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkTime,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkTime v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkTime v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkUrl.stories.ts b/packages/frontend/src/components/global/MkUrl.stories.ts
index 7e6c813ce0..e3b2c4ceba 100644
--- a/packages/frontend/src/components/global/MkUrl.stories.ts
+++ b/packages/frontend/src/components/global/MkUrl.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUrl,
 } satisfies Meta<typeof MkUrl>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUrl,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUrl v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUrl v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/MkUserName.stories.ts b/packages/frontend/src/components/global/MkUserName.stories.ts
index 68deaa4fec..ec708c61c8 100644
--- a/packages/frontend/src/components/global/MkUserName.stories.ts
+++ b/packages/frontend/src/components/global/MkUserName.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: MkUserName,
 } satisfies Meta<typeof MkUserName>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				MkUserName,
 			},
-			props: Object.keys(argTypes),
-			template: '<MkUserName v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MkUserName v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/global/RouterView.stories.ts b/packages/frontend/src/components/global/RouterView.stories.ts
index 45a574cf56..86e25b4757 100644
--- a/packages/frontend/src/components/global/RouterView.stories.ts
+++ b/packages/frontend/src/components/global/RouterView.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: RouterView,
 } satisfies Meta<typeof RouterView>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				RouterView,
 			},
-			props: Object.keys(argTypes),
-			template: '<RouterView v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<RouterView v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.block.stories.ts b/packages/frontend/src/components/page/page.block.stories.ts
index e321ca94e3..896c99d3af 100644
--- a/packages/frontend/src/components/page/page.block.stories.ts
+++ b/packages/frontend/src/components/page/page.block.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_block,
 } satisfies Meta<typeof page_block>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_block,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_block v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_block v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.button.stories.ts b/packages/frontend/src/components/page/page.button.stories.ts
index 99088ffb71..6de5a2c3ab 100644
--- a/packages/frontend/src/components/page/page.button.stories.ts
+++ b/packages/frontend/src/components/page/page.button.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_button,
 } satisfies Meta<typeof page_button>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_button,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_button v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_button v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.canvas.stories.ts b/packages/frontend/src/components/page/page.canvas.stories.ts
index c8a4dfc843..18ec9c7873 100644
--- a/packages/frontend/src/components/page/page.canvas.stories.ts
+++ b/packages/frontend/src/components/page/page.canvas.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_canvas,
 } satisfies Meta<typeof page_canvas>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_canvas,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_canvas v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_canvas v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.counter.stories.ts b/packages/frontend/src/components/page/page.counter.stories.ts
index ce3bc0d2af..25380c6b2e 100644
--- a/packages/frontend/src/components/page/page.counter.stories.ts
+++ b/packages/frontend/src/components/page/page.counter.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_counter,
 } satisfies Meta<typeof page_counter>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_counter,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_counter v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_counter v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.if.stories.ts b/packages/frontend/src/components/page/page.if.stories.ts
index 4ad2d98989..1f9a77216b 100644
--- a/packages/frontend/src/components/page/page.if.stories.ts
+++ b/packages/frontend/src/components/page/page.if.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_if,
 } satisfies Meta<typeof page_if>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_if,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_if v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_if v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.image.stories.ts b/packages/frontend/src/components/page/page.image.stories.ts
index 934380d2c2..63d75629fd 100644
--- a/packages/frontend/src/components/page/page.image.stories.ts
+++ b/packages/frontend/src/components/page/page.image.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_image,
 } satisfies Meta<typeof page_image>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_image,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_image v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_image v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.note.stories.ts b/packages/frontend/src/components/page/page.note.stories.ts
index 7d7fa7acf0..642df514cd 100644
--- a/packages/frontend/src/components/page/page.note.stories.ts
+++ b/packages/frontend/src/components/page/page.note.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_note,
 } satisfies Meta<typeof page_note>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_note,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_note v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_note v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.number-input.stories.ts b/packages/frontend/src/components/page/page.number-input.stories.ts
index cc78db58c6..671c98fa8a 100644
--- a/packages/frontend/src/components/page/page.number-input.stories.ts
+++ b/packages/frontend/src/components/page/page.number-input.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_number_input,
 } satisfies Meta<typeof page_number_input>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_number_input,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_number_input v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_number_input v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.post.stories.ts b/packages/frontend/src/components/page/page.post.stories.ts
index 17fc49c96c..e089710aab 100644
--- a/packages/frontend/src/components/page/page.post.stories.ts
+++ b/packages/frontend/src/components/page/page.post.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_post,
 } satisfies Meta<typeof page_post>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_post,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_post v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_post v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.radio-button.stories.ts b/packages/frontend/src/components/page/page.radio-button.stories.ts
index 14f2463dee..d7bda72007 100644
--- a/packages/frontend/src/components/page/page.radio-button.stories.ts
+++ b/packages/frontend/src/components/page/page.radio-button.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_radio_button,
 } satisfies Meta<typeof page_radio_button>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_radio_button,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_radio_button v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_radio_button v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.section.stories.ts b/packages/frontend/src/components/page/page.section.stories.ts
index 826a861bf7..23492d6f29 100644
--- a/packages/frontend/src/components/page/page.section.stories.ts
+++ b/packages/frontend/src/components/page/page.section.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_section,
 } satisfies Meta<typeof page_section>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_section,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_section v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_section v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.stories.ts b/packages/frontend/src/components/page/page.stories.ts
index 5754d4ad0d..3b0aa96b8a 100644
--- a/packages/frontend/src/components/page/page.stories.ts
+++ b/packages/frontend/src/components/page/page.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_,
 } satisfies Meta<typeof page_>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_ v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_ v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.switch.stories.ts b/packages/frontend/src/components/page/page.switch.stories.ts
index 79d884a5f2..a8ab15f93d 100644
--- a/packages/frontend/src/components/page/page.switch.stories.ts
+++ b/packages/frontend/src/components/page/page.switch.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_switch,
 } satisfies Meta<typeof page_switch>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_switch,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_switch v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_switch v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.text-input.stories.ts b/packages/frontend/src/components/page/page.text-input.stories.ts
index cc2cb26a22..6aa022fec0 100644
--- a/packages/frontend/src/components/page/page.text-input.stories.ts
+++ b/packages/frontend/src/components/page/page.text-input.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_text_input,
 } satisfies Meta<typeof page_text_input>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_text_input,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_text_input v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_text_input v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.text.stories.ts b/packages/frontend/src/components/page/page.text.stories.ts
index cbf1816dfd..ba937dc8af 100644
--- a/packages/frontend/src/components/page/page.text.stories.ts
+++ b/packages/frontend/src/components/page/page.text.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_text,
 } satisfies Meta<typeof page_text>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_text,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_text v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_text v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.textarea-input.stories.ts b/packages/frontend/src/components/page/page.textarea-input.stories.ts
index c0320807ca..06142954d2 100644
--- a/packages/frontend/src/components/page/page.textarea-input.stories.ts
+++ b/packages/frontend/src/components/page/page.textarea-input.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_textarea_input,
 } satisfies Meta<typeof page_textarea_input>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_textarea_input,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_textarea_input v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_textarea_input v-bind="props" />',
 		};
 	},
 	parameters: {
diff --git a/packages/frontend/src/components/page/page.textarea.stories.ts b/packages/frontend/src/components/page/page.textarea.stories.ts
index 9629c3ec9b..d9337184b9 100644
--- a/packages/frontend/src/components/page/page.textarea.stories.ts
+++ b/packages/frontend/src/components/page/page.textarea.stories.ts
@@ -7,13 +7,24 @@ const meta = {
 	component: page_textarea,
 } satisfies Meta<typeof page_textarea>;
 export const Default = {
-	render(args, { argTypes }) {
+	render(args) {
 		return {
 			components: {
 				page_textarea,
 			},
-			props: Object.keys(argTypes),
-			template: '<page_textarea v-bind="$props" />',
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<page_textarea v-bind="props" />',
 		};
 	},
 	parameters: {