build(#10336): update dependencies

packages/frontend/.storybook/generate.tsx

@@ -305,30 +305,6 @@ function toStories(component: string): string {
 																												(
 																													<identifier name='args' />
 																												) as estree.Identifier,
-																												(
-																													<object-pattern
-																														properties={[
-																															(
-																																<property
-																																	key={
-																																		(
-																																			<identifier name='argTypes' />
-																																		) as estree.Identifier
-																																	}
-																																	value={
-																																		(
-																																			<identifier name='argTypes' />
-																																		) as estree.Identifier
-																																	}
-																																	kind={
-																																		'init' as const
-																																	}
-																																	shorthand
-																																/>
-																															) as estree.AssignmentProperty,
-																														]}
-																													/>
-																												) as estree.ObjectPattern,
 																											]}
 																											body={
 																												(
@@ -378,35 +354,123 @@ function toStories(component: string): string {
 																																						<property
 																																							key={
 																																								(
+																																									<identifier name='setup' />
+																																								) as estree.Identifier
+																																							}
+																																							value={
+																																								(
+																																									<function-expression
+																																										params={[]}
+																																										body={
+																																											(
+																																												<block-statement
+																																													body={[
+																																														(
+																																															<return-statement
+																																																argument={
+																																																	(
+																																																		<object-expression
+																																																			properties={[
+																																																				(
+																																																					<property
+																																																						key={
+																																																							(
+																																																								<identifier name='args' />
+																																																							) as estree.Identifier
+																																																						}
+																																																						value={
+																																																							(
+																																																								<identifier name='args' />
+																																																							) as estree.Identifier
+																																																						}
+																																																						kind={
+																																																							'init' as const
+																																																						}
+																																																						shorthand
+																																																					/>
+																																																				) as estree.Property,
+																																																			]}
+																																																		/>
+																																																	) as estree.ObjectExpression
+																																																}
+																																															/>
+																																														) as estree.ReturnStatement,
+																																													]}
+																																												/>
+																																											) as estree.BlockStatement
+																																										}
+																																									/>
+																																								) as estree.FunctionExpression
+																																							}
+																																							method
+																																							kind={
+																																								'init' as const
+																																							}
+																																						/>
+																																					) as estree.Property,
+																																					(
+																																						<property
+																																							key={
+																																								(
+																																									<identifier name='computed' />
+																																								) as estree.Identifier
+																																							}
+																																							value={
+																																								(
+																																									<object-expression
+																																										properties={[
+																																											(
+																																												<property
+																																													key={
+																																														(
 																																															<identifier name='props' />
 																																														) as estree.Identifier
 																																													}
 																																													value={
 																																														(
-																																									<call-expression
-																																										callee={
+																																															<function-expression
+																																																params={[]}
+																																																body={
 																																																	(
-																																												<member-expression
-																																													object={
+																																																		<block-statement
+																																																			body={[
 																																																				(
-																																															<identifier name='Object' />
-																																														) as estree.Identifier
-																																													}
-																																													property={
+																																																					<return-statement
+																																																						argument={
 																																																							(
-																																															<identifier name='keys' />
+																																																								<object-expression
+																																																									properties={[
+																																																										(
+																																																											<spread-element
+																																																												argument={
+																																																													(
+																																																														<identifier name='args' />
 																																																													) as estree.Identifier
 																																																												}
 																																																											/>
-																																											) as estree.MemberExpression
-																																										}
-																																										arguments={[
-																																											(
-																																												<identifier name='argTypes' />
-																																											) as estree.Identifier,
+																																																										) as estree.SpreadElement,
 																																																									]}
 																																																								/>
-																																								) as estree.CallExpression
+																																																							) as estree.ObjectExpression
+																																																						}
+																																																					/>
+																																																				) as estree.ReturnStatement,
+																																																			]}
+																																																		/>
+																																																	) as estree.BlockStatement
+																																																}
+																																															/>
+																																														) as estree.FunctionExpression
+																																													}
+																																													method
+																																													kind={
+																																														'init' as const
+																																													}
+																																												/>
+																																											) as estree.Property,
+																																										]}
+																																									/>
+																																								) as estree.ObjectExpression
 																																							}
 																																							kind={
 																																								'init' as const
@@ -423,7 +487,7 @@ function toStories(component: string): string {
 																																							value={
 																																								(
 																																									<literal
-																																										value={`<${identifier.name} v-bind="$props" />`}
+																																										value={`<${identifier.name} v-bind="props" />`}
 																																									/>
 																																								) as estree.Literal
 																																							}

packages/frontend/.storybook/main.ts

@@ -8,6 +8,7 @@ const config = {
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
 		'@storybook/addon-interactions',
+		'@storybook/addon-storysource',
 		'../node_modules/storybook-addon-misskey-theme',
 	],
 	framework: {
@@ -22,10 +23,15 @@ const config = {
 	},
 	async viteFinal(config, options) {
 		const { plugins, build: { rollupOptions, ...build }, ...original } = getConfig();
+		console.dir(config, {depth:Infinity});
+		console.dir(original, {depth:Infinity});
 		const x = mergeConfig(config, {
 			...original,
 			build,
 			assetsInclude: [resolve(__dirname, '../node_modules/@tabler/icons-webfont/**/*.{css,eot,ttf,woff,woff2}')],
+			server: {
+				hmr: false,
+			},
 		});
 		return x;
 	},

packages/frontend/.storybook/preview.ts

@@ -1,13 +1,18 @@
 import { addons } from '@storybook/addons';
 import { FORCE_REMOUNT } from '@storybook/core-events';
-import { type Preview, forceReRender, setup } from '@storybook/vue3';
+import { type Preview, setup } from '@storybook/vue3';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import locale from './locale';
 import { commonHandlers, onUnhandledRequest } from './mocks';
 import themes from './themes';
 import '../src/style.scss';
 
-let initialized = false;
+// TODO: HMR が壊れているのを直す
+import.meta.hot.invalidate();
+
+const appInitialized = Symbol();
+
+let moduleInitialized = false;
 let unobserve = () => {};
 
 function loadTheme(applyTheme: typeof import('../src/scripts/theme')['applyTheme']) {
@@ -48,7 +53,11 @@ queueMicrotask(() => {
 		import('../src/scripts/theme'),
 	]).then(([{ default: components }, { default: directives }, { default: widgets }, { applyTheme }]) => {
 		setup((app) => {
-			initialized = true;
+			moduleInitialized = true;
+			if (app[appInitialized]) {
+				return;
+			}
+			app[appInitialized] = true;
 			loadTheme(applyTheme);
 			components(app);
 			directives(app);
@@ -59,17 +68,17 @@ queueMicrotask(() => {
 
 const preview = {
 	decorators: [
-		mswDecorator,
 		(Story, context) => {
 			const story = Story();
-			if (!initialized) {
+			if (!moduleInitialized) {
 				const channel = addons.getChannel();
 				(globalThis.requestIdleCallback || setTimeout)(() => {
 					channel.emit(FORCE_REMOUNT, { storyId: context.id });
 				});
 			}
 			return story;
-		}
+		},
+		mswDecorator,
 	],
 	parameters: {
 		msw: {

packages/frontend/package.json

@@ -72,21 +72,22 @@
 		"vuedraggable": "next"
 	},
 	"devDependencies": {
-		"@storybook/addon-essentials": "^7.0.0-rc.4",
-		"@storybook/addon-interactions": "^7.0.0-rc.4",
-		"@storybook/addon-links": "^7.0.0-rc.4",
+		"@storybook/addon-essentials": "7.0.0-rc.6",
+		"@storybook/addon-interactions": "7.0.0-rc.6",
+		"@storybook/addon-links": "7.0.0-rc.6",
+		"@storybook/addon-storysource": "7.0.0-rc.6",
 		"@storybook/addons": "7.0.0-rc.5",
-		"@storybook/blocks": "^7.0.0-rc.4",
-		"@storybook/core-events": "^7.0.0-rc.4",
-		"@storybook/manager-api": "^7.0.0-rc.4",
-		"@storybook/preview-api": "^7.0.0-rc.4",
-		"@storybook/react": "^7.0.0-rc.4",
-		"@storybook/react-vite": "^7.0.0-rc.4",
+		"@storybook/blocks": "7.0.0-rc.6",
+		"@storybook/core-events": "7.0.0-rc.6",
+		"@storybook/manager-api": "7.0.0-rc.6",
+		"@storybook/preview-api": "7.0.0-rc.6",
+		"@storybook/react": "7.0.0-rc.6",
+		"@storybook/react-vite": "7.0.0-rc.6",
 		"@storybook/testing-library": "^0.0.14-next.1",
-		"@storybook/theming": "^7.0.0-rc.4",
-		"@storybook/types": "^7.0.0-rc.4",
-		"@storybook/vue3": "^7.0.0-rc.4",
-		"@storybook/vue3-vite": "^7.0.0-rc.4",
+		"@storybook/theming": "7.0.0-rc.6",
+		"@storybook/types": "7.0.0-rc.6",
+		"@storybook/vue3": "7.0.0-rc.6",
+		"@storybook/vue3-vite": "7.0.0-rc.6",
 		"@testing-library/vue": "^6.6.1",
 		"@types/escape-regexp": "0.0.1",
 		"@types/estree": "^1.0.0",
@@ -119,7 +120,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"start-server-and-test": "2.0.0",
-		"storybook": "^7.0.0-rc.4",
+		"storybook": "7.0.0-rc.6",
 		"storybook-addon-misskey-theme": "github:misskey-dev/storybook-addon-misskey-theme",
 		"summaly": "github:misskey-dev/summaly",
 		"vitest": "^0.29.2",

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {

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: {