From 6e21147ff62b0dd53fa3042f6a975536cf7f8d8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Mon, 20 Mar 2023 16:13:07 +0900
Subject: [PATCH] build(#10336): separate definitions and generated codes

---
 packages/frontend/.storybook/generate.tsx     | 187 +++++++----
 packages/frontend/.storybook/manager.ts       |  12 +
 packages/frontend/.storybook/preview.ts       |  14 +-
 packages/frontend/package.json                |   4 +
 .../src/components/MkAbuseReport.stories.ts   |  11 +-
 .../components/MkAbuseReportWindow.stories.ts |  11 +-
 .../src/components/MkAchievements.stories.ts  |  11 +-
 .../src/components/MkAnalogClock.stories.ts   |  11 +-
 .../frontend/src/components/MkAsUi.stories.ts |  11 +-
 .../src/components/MkAutocomplete.stories.ts  |  11 +-
 .../src/components/MkAvatars.stories.ts       |  11 +-
 .../src/components/MkButton.stories.impl.ts   |  14 +
 .../src/components/MkButton.stories.ts        |  13 +-
 .../src/components/MkCaptcha.stories.ts       |  11 +-
 .../MkChannelFollowButton.stories.ts          |  11 +-
 .../components/MkChannelPreview.stories.ts    |  11 +-
 .../src/components/MkChart.stories.ts         |  11 +-
 .../src/components/MkChartLegend.stories.ts   |  11 +-
 .../src/components/MkChartTooltip.stories.ts  |  11 +-
 .../src/components/MkCheckbox.stories.ts      |  11 +-
 .../src/components/MkClickerGame.stories.ts   |  11 +-
 .../src/components/MkClipPreview.stories.ts   |  11 +-
 .../src/components/MkCode.core.stories.ts     |  11 +-
 .../frontend/src/components/MkCode.stories.ts |  11 +-
 .../src/components/MkContainer.stories.ts     |  11 +-
 .../src/components/MkContextMenu.stories.ts   |  11 +-
 .../src/components/MkCropperDialog.stories.ts |  11 +-
 .../src/components/MkCwButton.stories.ts      |  11 +-
 .../components/MkDateSeparatedList.stories.ts |  11 +-
 .../src/components/MkDialog.stories.ts        |  11 +-
 .../src/components/MkDigitalClock.stories.ts  |  11 +-
 .../src/components/MkDonation.stories.ts      |  11 +-
 .../src/components/MkDrive.file.stories.ts    |  11 +-
 .../src/components/MkDrive.folder.stories.ts  |  11 +-
 .../components/MkDrive.navFolder.stories.ts   |  11 +-
 .../src/components/MkDrive.stories.ts         |  11 +-
 .../MkDriveFileThumbnail.stories.ts           |  11 +-
 .../components/MkDriveSelectDialog.stories.ts |  11 +-
 .../src/components/MkDriveWindow.stories.ts   |  11 +-
 .../MkEmojiPicker.section.stories.ts          |  11 +-
 .../src/components/MkEmojiPicker.stories.ts   |  11 +-
 .../components/MkEmojiPickerDialog.stories.ts |  11 +-
 .../components/MkEmojiPickerWindow.stories.ts |  11 +-
 .../components/MkFeaturedPhotos.stories.ts    |  11 +-
 .../MkFileCaptionEditWindow.stories.ts        |  11 +-
 .../components/MkFileListForAdmin.stories.ts  |  11 +-
 .../src/components/MkFlashPreview.stories.ts  |  11 +-
 .../components/MkFoldableSection.stories.ts   |  11 +-
 .../src/components/MkFolder.stories.ts        |  11 +-
 .../src/components/MkFollowButton.stories.ts  |  11 +-
 .../components/MkForgotPassword.stories.ts    |  11 +-
 .../src/components/MkFormDialog.stories.ts    |  11 +-
 .../MkGalleryPostPreview.stories.ts           |  11 +-
 .../src/components/MkGoogle.stories.ts        |  11 +-
 .../src/components/MkHeatmap.stories.ts       |  11 +-
 .../src/components/MkImageViewer.stories.ts   |  11 +-
 .../components/MkImgWithBlurhash.stories.ts   |  11 +-
 .../frontend/src/components/MkInfo.stories.ts |  11 +-
 .../src/components/MkInput.stories.ts         |  11 +-
 .../components/MkInstanceCardMini.stories.ts  |  11 +-
 .../src/components/MkInstanceStats.stories.ts |  11 +-
 .../components/MkInstanceTicker.stories.ts    |  11 +-
 .../src/components/MkKeyValue.stories.ts      |  11 +-
 .../src/components/MkLaunchPad.stories.ts     |  11 +-
 .../frontend/src/components/MkLink.stories.ts |  11 +-
 .../src/components/MkMarquee.stories.ts       |  11 +-
 .../src/components/MkMediaBanner.stories.ts   |  11 +-
 .../src/components/MkMediaImage.stories.ts    |  11 +-
 .../src/components/MkMediaList.stories.ts     |  11 +-
 .../src/components/MkMediaVideo.stories.ts    |  11 +-
 .../src/components/MkMention.stories.ts       |  11 +-
 .../src/components/MkMenu.child.stories.ts    |  11 +-
 .../frontend/src/components/MkMenu.stories.ts |  11 +-
 .../src/components/MkMiniChart.stories.ts     |  11 +-
 .../src/components/MkModal.stories.ts         |  11 +-
 .../components/MkModalPageWindow.stories.ts   |  11 +-
 .../src/components/MkModalWindow.stories.ts   |  11 +-
 .../frontend/src/components/MkNote.stories.ts |  11 +-
 .../src/components/MkNoteDetailed.stories.ts  |  11 +-
 .../src/components/MkNoteHeader.stories.ts    |  11 +-
 .../src/components/MkNotePreview.stories.ts   |  11 +-
 .../src/components/MkNoteSimple.stories.ts    |  11 +-
 .../src/components/MkNoteSub.stories.ts       |  11 +-
 .../src/components/MkNotes.stories.ts         |  11 +-
 .../src/components/MkNotification.stories.ts  |  11 +-
 .../MkNotificationSettingWindow.stories.ts    |  11 +-
 .../src/components/MkNotifications.stories.ts |  11 +-
 .../src/components/MkNumber.stories.ts        |  11 +-
 .../src/components/MkNumberDiff.stories.ts    |  11 +-
 .../src/components/MkObjectView.stories.ts    |  11 +-
 .../components/MkObjectView.value.stories.ts  |  11 +-
 .../frontend/src/components/MkOmit.stories.ts |  11 +-
 .../src/components/MkPagePreview.stories.ts   |  11 +-
 .../src/components/MkPageWindow.stories.ts    |  11 +-
 .../src/components/MkPagination.stories.ts    |  11 +-
 .../src/components/MkPlusOneEffect.stories.ts |  11 +-
 .../frontend/src/components/MkPoll.stories.ts |  11 +-
 .../src/components/MkPollEditor.stories.ts    |  11 +-
 .../src/components/MkPopupMenu.stories.ts     |  11 +-
 .../src/components/MkPostForm.stories.ts      |  11 +-
 .../components/MkPostFormAttaches.stories.ts  |  11 +-
 .../components/MkPostFormDialog.stories.ts    |  11 +-
 .../MkPushNotificationAllowButton.stories.ts  |  11 +-
 .../src/components/MkRadio.stories.ts         |  11 +-
 .../src/components/MkRadios.stories.ts        |  11 +-
 .../src/components/MkRange.stories.ts         |  11 +-
 .../MkReactedUsersDialog.stories.ts           |  11 +-
 .../components/MkReactionEffect.stories.ts    |  11 +-
 .../src/components/MkReactionIcon.stories.ts  |  11 +-
 .../components/MkReactionTooltip.stories.ts   |  11 +-
 .../MkReactionsViewer.details.stories.ts      |  11 +-
 .../MkReactionsViewer.reaction.stories.ts     |  11 +-
 .../components/MkReactionsViewer.stories.ts   |  11 +-
 .../src/components/MkRemoteCaution.stories.ts |  11 +-
 .../components/MkRetentionHeatmap.stories.ts  |  11 +-
 .../src/components/MkRippleEffect.stories.ts  |  11 +-
 .../src/components/MkRolePreview.stories.ts   |  11 +-
 .../src/components/MkSample.stories.ts        |  11 +-
 .../src/components/MkSelect.stories.ts        |  11 +-
 .../src/components/MkSignin.stories.ts        |  11 +-
 .../src/components/MkSigninDialog.stories.ts  |  11 +-
 .../src/components/MkSignup.stories.ts        |  11 +-
 .../src/components/MkSignupDialog.stories.ts  |  11 +-
 .../src/components/MkSparkle.stories.ts       |  11 +-
 .../components/MkSubNoteContent.stories.ts    |  11 +-
 .../src/components/MkSuperMenu.stories.ts     |  11 +-
 .../src/components/MkSwitch.stories.ts        |  11 +-
 .../frontend/src/components/MkTab.stories.ts  |  11 +-
 .../src/components/MkTagCloud.stories.ts      |  11 +-
 .../src/components/MkTextarea.stories.ts      |  11 +-
 .../src/components/MkTimeline.stories.ts      |  11 +-
 .../src/components/MkToast.stories.ts         |  11 +-
 .../MkTokenGenerateWindow.stories.ts          |  11 +-
 .../src/components/MkTooltip.stories.ts       |  11 +-
 .../src/components/MkUpdated.stories.ts       |  11 +-
 .../src/components/MkUrlPreview.stories.ts    |  11 +-
 .../components/MkUrlPreviewPopup.stories.ts   |  11 +-
 .../src/components/MkUserCardMini.stories.ts  |  11 +-
 .../src/components/MkUserInfo.stories.ts      |  11 +-
 .../src/components/MkUserList.stories.ts      |  11 +-
 .../MkUserOnlineIndicator.stories.ts          |  11 +-
 .../src/components/MkUserPopup.stories.ts     |  11 +-
 .../components/MkUserSelectDialog.stories.ts  |  11 +-
 .../src/components/MkUsersTooltip.stories.ts  |  11 +-
 .../components/MkVisibilityPicker.stories.ts  |  11 +-
 .../src/components/MkWaitingDialog.stories.ts |  11 +-
 .../src/components/MkWidgets.stories.ts       |  11 +-
 .../src/components/MkWindow.stories.ts        |  11 +-
 .../src/components/MkYoutubePlayer.stories.ts |  11 +-
 .../src/components/form/link.stories.ts       |  11 +-
 .../src/components/form/section.stories.ts    |  11 +-
 .../src/components/form/slot.stories.ts       |  11 +-
 .../src/components/form/split.stories.ts      |  11 +-
 .../src/components/form/suspense.stories.ts   |  11 +-
 .../src/components/global/MkA.stories.ts      |  11 +-
 .../src/components/global/MkAcct.stories.ts   |  11 +-
 .../src/components/global/MkAd.stories.ts     |  11 +-
 .../src/components/global/MkAvatar.stories.ts |  11 +-
 .../global/MkCustomEmoji.stories.ts           |  11 +-
 .../components/global/MkEllipsis.stories.ts   |  11 +-
 .../src/components/global/MkEmoji.stories.ts  |  11 +-
 .../src/components/global/MkError.stories.ts  |  11 +-
 .../components/global/MkLoading.stories.ts    |  11 +-
 .../MkMisskeyFlavoredMarkdown.stories.ts      |  11 +-
 .../components/global/MkPageHeader.stories.ts |  11 +-
 .../global/MkPageHeader.tabs.stories.ts       |  11 +-
 .../src/components/global/MkSpacer.stories.ts |  11 +-
 .../global/MkStickyContainer.stories.ts       |  11 +-
 .../src/components/global/MkTime.stories.ts   |  11 +-
 .../src/components/global/MkUrl.stories.ts    |  11 +-
 .../components/global/MkUserName.stories.ts   |  11 +-
 .../components/global/RouterView.stories.ts   |  11 +-
 .../src/components/page/page.block.stories.ts |  11 +-
 .../components/page/page.button.stories.ts    |  11 +-
 .../components/page/page.canvas.stories.ts    |  11 +-
 .../components/page/page.counter.stories.ts   |  11 +-
 .../src/components/page/page.if.stories.ts    |  11 +-
 .../src/components/page/page.image.stories.ts |  11 +-
 .../src/components/page/page.note.stories.ts  |  11 +-
 .../page/page.number-input.stories.ts         |  11 +-
 .../src/components/page/page.post.stories.ts  |  11 +-
 .../page/page.radio-button.stories.ts         |  11 +-
 .../components/page/page.section.stories.ts   |  11 +-
 .../src/components/page/page.stories.ts       |  11 +-
 .../components/page/page.switch.stories.ts    |  11 +-
 .../page/page.text-input.stories.ts           |  11 +-
 .../src/components/page/page.text.stories.ts  |  11 +-
 .../page/page.textarea-input.stories.ts       |  11 +-
 .../components/page/page.textarea.stories.ts  |  11 +-
 .../frontend/src/pages/_empty_.stories.ts     |  11 +-
 .../frontend/src/pages/_error_.stories.ts     |  11 +-
 .../frontend/src/pages/_loading_.stories.ts   |  11 +-
 .../src/pages/about-misskey.stories.ts        |  11 +-
 .../src/pages/about.emojis.stories.ts         |  11 +-
 .../src/pages/about.federation.stories.ts     |  11 +-
 packages/frontend/src/pages/about.stories.ts  |  11 +-
 .../src/pages/achievements.stories.ts         |  11 +-
 .../frontend/src/pages/admin-file.stories.ts  |  11 +-
 .../pages/admin/RolesEditorFormula.stories.ts |  11 +-
 .../src/pages/admin/_header_.stories.ts       |  11 +-
 .../src/pages/admin/abuses.stories.ts         |  11 +-
 .../frontend/src/pages/admin/ads.stories.ts   |  11 +-
 .../src/pages/admin/announcements.stories.ts  |  11 +-
 .../src/pages/admin/bot-protection.stories.ts |  11 +-
 .../src/pages/admin/database.stories.ts       |  11 +-
 .../src/pages/admin/email-settings.stories.ts |  11 +-
 .../src/pages/admin/federation.stories.ts     |  11 +-
 .../frontend/src/pages/admin/files.stories.ts |  11 +-
 .../frontend/src/pages/admin/index.stories.ts |  11 +-
 .../src/pages/admin/instance-block.stories.ts |  11 +-
 .../src/pages/admin/moderation.stories.ts     |  11 +-
 .../src/pages/admin/object-storage.stories.ts |  11 +-
 .../src/pages/admin/other-settings.stories.ts |  11 +-
 .../admin/overview.active-users.stories.ts    |  11 +-
 .../admin/overview.ap-requests.stories.ts     |  11 +-
 .../admin/overview.federation.stories.ts      |  11 +-
 .../pages/admin/overview.heatmap.stories.ts   |  11 +-
 .../pages/admin/overview.instances.stories.ts |  11 +-
 .../admin/overview.moderators.stories.ts      |  11 +-
 .../src/pages/admin/overview.pie.stories.ts   |  11 +-
 .../admin/overview.queue.chart.stories.ts     |  11 +-
 .../src/pages/admin/overview.queue.stories.ts |  11 +-
 .../pages/admin/overview.retention.stories.ts |  11 +-
 .../src/pages/admin/overview.stats.stories.ts |  11 +-
 .../src/pages/admin/overview.stories.ts       |  11 +-
 .../src/pages/admin/overview.users.stories.ts |  11 +-
 .../src/pages/admin/proxy-account.stories.ts  |  11 +-
 .../pages/admin/queue.chart.chart.stories.ts  |  11 +-
 .../src/pages/admin/queue.chart.stories.ts    |  11 +-
 .../frontend/src/pages/admin/queue.stories.ts |  11 +-
 .../src/pages/admin/relays.stories.ts         |  11 +-
 .../src/pages/admin/roles.edit.stories.ts     |  11 +-
 .../src/pages/admin/roles.editor.stories.ts   |  11 +-
 .../src/pages/admin/roles.role.stories.ts     |  11 +-
 .../frontend/src/pages/admin/roles.stories.ts |  11 +-
 .../src/pages/admin/security.stories.ts       |  11 +-
 .../src/pages/admin/settings.stories.ts       |  11 +-
 .../frontend/src/pages/admin/users.stories.ts |  11 +-
 packages/frontend/src/pages/ads.stories.ts    |  11 +-
 .../src/pages/announcements.stories.ts        |  11 +-
 .../src/pages/antenna-timeline.stories.ts     |  11 +-
 .../frontend/src/pages/api-console.stories.ts |  11 +-
 .../frontend/src/pages/auth.form.stories.ts   |  11 +-
 packages/frontend/src/pages/auth.stories.ts   |  11 +-
 .../src/pages/channel-editor.stories.ts       |  11 +-
 .../frontend/src/pages/channel.stories.ts     |  11 +-
 .../frontend/src/pages/channels.stories.ts    |  11 +-
 .../frontend/src/pages/clicker.stories.ts     |  11 +-
 packages/frontend/src/pages/clip.stories.ts   |  11 +-
 .../pages/custom-emojis-manager.stories.ts    |  11 +-
 packages/frontend/src/pages/drive.stories.ts  |  11 +-
 .../src/pages/emoji-edit-dialog.stories.ts    |  11 +-
 .../src/pages/emojis.emoji.stories.ts         |  11 +-
 .../src/pages/explore.featured.stories.ts     |  11 +-
 .../src/pages/explore.roles.stories.ts        |  11 +-
 .../frontend/src/pages/explore.stories.ts     |  11 +-
 .../src/pages/explore.users.stories.ts        |  11 +-
 .../frontend/src/pages/favorites.stories.ts   |  11 +-
 .../src/pages/flash/flash-edit.stories.ts     |  11 +-
 .../src/pages/flash/flash-index.stories.ts    |  11 +-
 .../frontend/src/pages/flash/flash.stories.ts |  11 +-
 .../src/pages/follow-requests.stories.ts      |  11 +-
 packages/frontend/src/pages/follow.stories.ts |  11 +-
 .../src/pages/gallery/edit.stories.ts         |  11 +-
 .../src/pages/gallery/index.stories.ts        |  11 +-
 .../src/pages/gallery/post.stories.ts         |  11 +-
 .../src/pages/instance-info.stories.ts        |  11 +-
 packages/frontend/src/pages/miauth.stories.ts |  11 +-
 .../src/pages/my-antennas/create.stories.ts   |  11 +-
 .../src/pages/my-antennas/edit.stories.ts     |  11 +-
 .../src/pages/my-antennas/editor.stories.ts   |  11 +-
 .../src/pages/my-antennas/index.stories.ts    |  11 +-
 .../src/pages/my-clips/index.stories.ts       |  11 +-
 .../src/pages/my-lists/index.stories.ts       |  11 +-
 .../src/pages/my-lists/list.stories.ts        |  11 +-
 .../frontend/src/pages/not-found.stories.ts   |  11 +-
 packages/frontend/src/pages/note.stories.ts   |  11 +-
 .../src/pages/notifications.stories.ts        |  11 +-
 .../els/page-editor.el.image.stories.ts       |  11 +-
 .../els/page-editor.el.note.stories.ts        |  11 +-
 .../els/page-editor.el.section.stories.ts     |  11 +-
 .../els/page-editor.el.text.stories.ts        |  11 +-
 .../page-editor/page-editor.blocks.stories.ts |  11 +-
 .../page-editor.container.stories.ts          |  11 +-
 .../pages/page-editor/page-editor.stories.ts  |  11 +-
 packages/frontend/src/pages/page.stories.ts   |  11 +-
 packages/frontend/src/pages/pages.stories.ts  |  11 +-
 .../frontend/src/pages/preview.stories.ts     |  11 +-
 .../src/pages/registry.keys.stories.ts        |  11 +-
 .../frontend/src/pages/registry.stories.ts    |  11 +-
 .../src/pages/registry.value.stories.ts       |  11 +-
 .../src/pages/reset-password.stories.ts       |  11 +-
 packages/frontend/src/pages/role.stories.ts   |  11 +-
 .../frontend/src/pages/scratchpad.stories.ts  |  11 +-
 packages/frontend/src/pages/search.stories.ts |  11 +-
 .../pages/settings/2fa.qrdialog.stories.ts    |  11 +-
 .../src/pages/settings/2fa.stories.ts         |  11 +-
 .../pages/settings/account-info.stories.ts    |  11 +-
 .../src/pages/settings/accounts.stories.ts    |  11 +-
 .../src/pages/settings/api.stories.ts         |  11 +-
 .../src/pages/settings/apps.stories.ts        |  11 +-
 .../src/pages/settings/custom-css.stories.ts  |  11 +-
 .../src/pages/settings/deck.stories.ts        |  11 +-
 .../pages/settings/delete-account.stories.ts  |  11 +-
 .../src/pages/settings/drive.stories.ts       |  11 +-
 .../src/pages/settings/email.stories.ts       |  11 +-
 .../src/pages/settings/general.stories.ts     |  11 +-
 .../pages/settings/import-export.stories.ts   |  11 +-
 .../src/pages/settings/index.stories.ts       |  11 +-
 .../pages/settings/instance-mute.stories.ts   |  11 +-
 .../src/pages/settings/mute-block.stories.ts  |  11 +-
 .../src/pages/settings/navbar.stories.ts      |  11 +-
 .../pages/settings/notifications.stories.ts   |  11 +-
 .../src/pages/settings/other.stories.ts       |  11 +-
 .../pages/settings/plugin.install.stories.ts  |  11 +-
 .../src/pages/settings/plugin.stories.ts      |  11 +-
 .../settings/preferences-backups.stories.ts   |  11 +-
 .../src/pages/settings/privacy.stories.ts     |  11 +-
 .../src/pages/settings/profile.stories.ts     |  11 +-
 .../src/pages/settings/reaction.stories.ts    |  11 +-
 .../src/pages/settings/roles.stories.ts       |  11 +-
 .../src/pages/settings/security.stories.ts    |  11 +-
 .../pages/settings/sounds.sound.stories.ts    |  11 +-
 .../src/pages/settings/sounds.stories.ts      |  11 +-
 .../settings/statusbar.statusbar.stories.ts   |  11 +-
 .../src/pages/settings/statusbar.stories.ts   |  11 +-
 .../pages/settings/theme.install.stories.ts   |  11 +-
 .../pages/settings/theme.manage.stories.ts    |  11 +-
 .../src/pages/settings/theme.stories.ts       |  11 +-
 .../pages/settings/webhook.edit.stories.ts    |  11 +-
 .../src/pages/settings/webhook.new.stories.ts |  11 +-
 .../src/pages/settings/webhook.stories.ts     |  11 +-
 .../src/pages/settings/word-mute.stories.ts   |  11 +-
 packages/frontend/src/pages/share.stories.ts  |  11 +-
 .../src/pages/signup-complete.stories.ts      |  11 +-
 packages/frontend/src/pages/tag.stories.ts    |  11 +-
 .../src/pages/theme-editor.stories.ts         |  11 +-
 .../frontend/src/pages/timeline.stories.ts    |  11 +-
 .../src/pages/timeline.tutorial.stories.ts    |  11 +-
 .../frontend/src/pages/user-info.stories.ts   |  11 +-
 .../src/pages/user-list-timeline.stories.ts   |  11 +-
 .../frontend/src/pages/user-tag.stories.ts    |  11 +-
 .../src/pages/user/achievements.stories.ts    |  11 +-
 .../pages/user/activity.following.stories.ts  |  11 +-
 .../pages/user/activity.heatmap.stories.ts    |  11 +-
 .../src/pages/user/activity.notes.stories.ts  |  11 +-
 .../src/pages/user/activity.pv.stories.ts     |  11 +-
 .../src/pages/user/activity.stories.ts        |  11 +-
 .../frontend/src/pages/user/clips.stories.ts  |  11 +-
 .../src/pages/user/follow-list.stories.ts     |  11 +-
 .../src/pages/user/followers.stories.ts       |  11 +-
 .../src/pages/user/following.stories.ts       |  11 +-
 .../src/pages/user/gallery.stories.ts         |  11 +-
 .../frontend/src/pages/user/home.stories.ts   |  11 +-
 .../src/pages/user/index.activity.stories.ts  |  11 +-
 .../src/pages/user/index.photos.stories.ts    |  11 +-
 .../frontend/src/pages/user/index.stories.ts  |  11 +-
 .../src/pages/user/index.timeline.stories.ts  |  11 +-
 .../frontend/src/pages/user/pages.stories.ts  |  11 +-
 .../src/pages/user/reactions.stories.ts       |  11 +-
 .../src/pages/welcome.entrance.a.stories.ts   |  11 +-
 .../src/pages/welcome.entrance.b.stories.ts   |  11 +-
 .../src/pages/welcome.entrance.c.stories.ts   |  11 +-
 .../src/pages/welcome.setup.stories.ts        |  11 +-
 .../frontend/src/pages/welcome.stories.ts     |  11 +-
 .../src/pages/welcome.timeline.stories.ts     |  11 +-
 .../src/ui/_common_/common.stories.ts         |  11 +-
 .../ui/_common_/navbar-for-mobile.stories.ts  |  11 +-
 .../src/ui/_common_/navbar.stories.ts         |  11 +-
 .../src/ui/_common_/notification.stories.ts   |  11 +-
 .../_common_/statusbar-federation.stories.ts  |  11 +-
 .../src/ui/_common_/statusbar-rss.stories.ts  |  11 +-
 .../_common_/statusbar-user-list.stories.ts   |  11 +-
 .../src/ui/_common_/statusbars.stories.ts     |  11 +-
 .../ui/_common_/stream-indicator.stories.ts   |  11 +-
 .../src/ui/_common_/upload.stories.ts         |  11 +-
 .../frontend/src/ui/classic.header.stories.ts |  11 +-
 .../src/ui/classic.sidebar.stories.ts         |  11 +-
 packages/frontend/src/ui/classic.stories.ts   |  11 +-
 packages/frontend/src/ui/deck.stories.ts      |  11 +-
 .../src/ui/deck/antenna-column.stories.ts     |  11 +-
 .../src/ui/deck/channel-column.stories.ts     |  11 +-
 .../src/ui/deck/column-core.stories.ts        |  11 +-
 .../frontend/src/ui/deck/column.stories.ts    |  11 +-
 .../src/ui/deck/direct-column.stories.ts      |  11 +-
 .../src/ui/deck/list-column.stories.ts        |  11 +-
 .../src/ui/deck/main-column.stories.ts        |  11 +-
 .../src/ui/deck/mentions-column.stories.ts    |  11 +-
 .../ui/deck/notifications-column.stories.ts   |  11 +-
 .../frontend/src/ui/deck/tl-column.stories.ts |  11 +-
 .../src/ui/deck/widgets-column.stories.ts     |  11 +-
 packages/frontend/src/ui/universal.stories.ts |  11 +-
 .../src/ui/universal.widgets.stories.ts       |  11 +-
 packages/frontend/src/ui/visitor.stories.ts   |  11 +-
 packages/frontend/src/ui/visitor/a.stories.ts |  11 +-
 packages/frontend/src/ui/visitor/b.stories.ts |  11 +-
 .../frontend/src/ui/visitor/header.stories.ts |  11 +-
 .../frontend/src/ui/visitor/kanban.stories.ts |  11 +-
 packages/frontend/src/ui/zen.stories.ts       |  11 +-
 .../WidgetActivity.calendar.stories.ts        |  11 +-
 .../widgets/WidgetActivity.chart.stories.ts   |  11 +-
 .../src/widgets/WidgetActivity.stories.ts     |  11 +-
 .../src/widgets/WidgetAichan.stories.ts       |  11 +-
 .../src/widgets/WidgetAiscript.stories.ts     |  11 +-
 .../src/widgets/WidgetAiscriptApp.stories.ts  |  11 +-
 .../src/widgets/WidgetButton.stories.ts       |  11 +-
 .../src/widgets/WidgetCalendar.stories.ts     |  11 +-
 .../src/widgets/WidgetClicker.stories.ts      |  11 +-
 .../src/widgets/WidgetClock.stories.ts        |  11 +-
 .../src/widgets/WidgetDigitalClock.stories.ts |  11 +-
 .../src/widgets/WidgetFederation.stories.ts   |  11 +-
 .../widgets/WidgetInstanceCloud.stories.ts    |  11 +-
 .../src/widgets/WidgetInstanceInfo.stories.ts |  11 +-
 .../src/widgets/WidgetJobQueue.stories.ts     |  11 +-
 .../src/widgets/WidgetMemo.stories.ts         |  11 +-
 .../widgets/WidgetNotifications.stories.ts    |  11 +-
 .../src/widgets/WidgetOnlineUsers.stories.ts  |  11 +-
 .../src/widgets/WidgetPhotos.stories.ts       |  11 +-
 .../src/widgets/WidgetPostForm.stories.ts     |  11 +-
 .../src/widgets/WidgetProfile.stories.ts      |  11 +-
 .../frontend/src/widgets/WidgetRss.stories.ts |  11 +-
 .../src/widgets/WidgetRssTicker.stories.ts    |  11 +-
 .../src/widgets/WidgetSlideshow.stories.ts    |  11 +-
 .../src/widgets/WidgetTimeline.stories.ts     |  11 +-
 .../src/widgets/WidgetTrends.stories.ts       |  11 +-
 .../src/widgets/WidgetUnixClock.stories.ts    |  11 +-
 .../src/widgets/WidgetUserList.stories.ts     |  11 +-
 .../widgets/server-metric/cpu-mem.stories.ts  |  11 +-
 .../src/widgets/server-metric/cpu.stories.ts  |  11 +-
 .../src/widgets/server-metric/disk.stories.ts |  11 +-
 .../widgets/server-metric/index.stories.ts    |  11 +-
 .../src/widgets/server-metric/mem.stories.ts  |  11 +-
 .../src/widgets/server-metric/net.stories.ts  |  11 +-
 .../src/widgets/server-metric/pie.stories.ts  |  11 +-
 pnpm-lock.yaml                                | 296 ++++++++++++++++--
 435 files changed, 3887 insertions(+), 1361 deletions(-)
 create mode 100644 packages/frontend/.storybook/manager.ts
 create mode 100644 packages/frontend/src/components/MkButton.stories.impl.ts

diff --git a/packages/frontend/.storybook/generate.tsx b/packages/frontend/.storybook/generate.tsx
index b446d30fb..cc39ef68e 100644
--- a/packages/frontend/.storybook/generate.tsx
+++ b/packages/frontend/.storybook/generate.tsx
@@ -1,4 +1,5 @@
-import * as fs from 'node:fs/promises';
+import { existsSync, readFileSync } from 'node:fs';
+import { writeFile } from 'node:fs/promises';
 import { basename, dirname } from 'node:path/posix';
 import { promisify } from 'node:util';
 import { generate } from 'astring';
@@ -12,6 +13,10 @@ function h<T extends estree.Node>(component: T['type'], props: Omit<T, 'type'>):
 }
 
 function toStories(component: string): string {
+	const msw = `${component.slice(0, -'.vue'.length)}.msw`;
+	const implStories = `${component.slice(0, -'.vue'.length)}.stories.impl`;
+	const hasMsw = existsSync(`${msw}.ts`);
+	const hasImplStories = existsSync(`${implStories}.ts`);
 	const base = basename(component);
 	const dir = dirname(component);
 	const literal = (
@@ -27,7 +32,17 @@ function toStories(component: string): string {
 					key={<identifier name="layout" />}
 					value={<literal value={`${dir}/`.startsWith('src/pages/') || base === 'MkAnalogClock.vue' ? 'fullscreen' : 'centered'} />}
 					kind="init"
-				/>
+				/>,
+				...hasMsw
+					? [
+							<property
+								key={<identifier name="msw" />}
+								value={<identifier name="msw" />}
+								kind="init"
+								shorthand
+							/>,
+						]
+					: [],
 			]}
 		/>
 	);
@@ -47,6 +62,18 @@ function toStories(component: string): string {
 						/>,
 					]}
 				/>,
+				...hasMsw
+					? [
+							<import-declaration
+								source={<literal value={`./${basename(msw)}`} />}
+								specifiers={[
+									<import-namespace-specifier
+										local={<identifier name="msw" />}
+									/>,
+								]}
+							/>,
+						]
+					: [],
 				<import-declaration
 					source={<literal value={`./${base}`} />}
 					specifiers={[
@@ -80,50 +107,109 @@ function toStories(component: string): string {
 						/>,
 					]}
 				/>,
-				<export-named-declaration
-					declaration={
-						<variable-declaration
-							kind="const"
-							declarations={[
-								<variable-declarator
-									id={<identifier name="Default" />}
-									init={
-										<object-expression
-											properties={[
-												<property
-													key={<identifier name="components" />}
-													value={
-														<object-expression
-															properties={[
-																<property
-																	key={identifier}
-																	value={identifier}
-																	kind="init"
-																	shorthand
-																/>,
-															]}
-														/>
-													}
-													kind="init"
-												/>,
-												<property
-													key={<identifier name="template" />}
-													value={<literal value={`<${identifier.name} />`} />}
-													kind="init"
-												/>,
-												<property
-													key={<identifier name="parameters" />}
-													value={parameters}
-													kind="init"
-												/>,
-											]}
-										/>
-									}
-								/>,
-							]}
-						/>
-					}
-				/>,
+				...hasImplStories
+					? [
+						]
+					: [
+							<export-named-declaration
+								declaration={
+									<variable-declaration
+										kind="const"
+										declarations={[
+											<variable-declarator
+												id={<identifier name="Default" />}
+												init={
+													<object-expression
+														properties={[
+															<property
+																key={<identifier name="render" />}
+																value={
+																	<function-expression
+																		id={<identifier name="render" />}
+																		params={[
+																			<identifier name="args" />,
+																			<object-pattern
+																				properties={[
+																					<property
+																						key={<identifier name="argTypes" />}
+																						value={<identifier name="argTypes" />}
+																						kind="init"
+																						shorthand
+																					/>,
+																				]}
+																			/>,
+																		]}
+																		body={
+																			<block-statement
+																				body={[
+																					<return-statement
+																						argument={
+																							<object-expression
+																								properties={[
+																									<property
+																										key={<identifier name="components" />}
+																										value={
+																											<object-expression
+																												properties={[
+																													<property
+																														key={identifier}
+																														value={identifier}
+																														kind="init"
+																														shorthand
+																													/>,
+																												]}
+																											/>
+																										}
+																										kind="init"
+																									/>,
+																									<property
+																										key={<identifier name="props" />}
+																										value={
+																											<call-expression
+																												callee={
+																													<member-expression
+																														object={<identifier name="Object" />}
+																														property={<identifier name="keys" />}
+																													/>
+																												}
+																												arguments={[
+																													<identifier name="argTypes" />,
+																												]}
+																											/>
+																										}
+																										kind="init"
+																									/>,
+																									<property
+																										key={<identifier name="template" />}
+																										value={<literal value={`<${identifier.name} v-bind="$props" />`} />}
+																										kind="init"
+																									/>,
+																								]}
+																							/>
+																						}
+																					/>,
+																				]}
+																			/>
+																		}
+																	/>
+																}
+																method
+																kind="init"
+															/>,
+															<property
+																key={<identifier name="parameters" />}
+																value={parameters}
+																kind="init"
+															/>,
+														]}
+													/>
+												}
+											/>,
+										]}
+									/>
+								}
+							/>,
+						],
 				<export-default-declaration
 					declaration={<identifier name="meta" />}
 				/>,
@@ -131,7 +217,7 @@ function toStories(component: string): string {
 		/>
 	) as unknown as estree.Program;
 	return format(
-		generate(program),
+		generate(program) + (hasImplStories ? readFileSync(`${implStories}.ts`, 'utf-8') : ''),
 		{
 			parser: 'babel-ts',
 			singleQuote: true,
@@ -143,11 +229,6 @@ function toStories(component: string): string {
 promisify(glob)('src/{components,pages,ui,widgets}/**/*.vue').then((components) => Promise.all(
 	components.map((component) => {
 		const stories = component.replace(/\.vue$/, '.stories.ts');
-		fs.stat(stories).then(
-			() => {},
-			() => {
-				fs.writeFile(stories, toStories(component));
-			}
-		);
+		return writeFile(stories, toStories(component));
 	})
 ));
diff --git a/packages/frontend/.storybook/manager.ts b/packages/frontend/.storybook/manager.ts
new file mode 100644
index 000000000..33213bffa
--- /dev/null
+++ b/packages/frontend/.storybook/manager.ts
@@ -0,0 +1,12 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming/create';
+
+addons.setConfig({
+	theme: create({
+		base: 'dark',
+		brandTitle: 'Misskey Storybook',
+		brandUrl: 'https://misskey-hub.net',
+		brandImage: 'https://github.com/misskey-dev/assets/blob/main/misskey.svg?raw=true',
+		brandTarget: '_blank',
+	}),
+});
diff --git a/packages/frontend/.storybook/preview.ts b/packages/frontend/.storybook/preview.ts
index 40b6ea0fb..1e9bcca09 100644
--- a/packages/frontend/.storybook/preview.ts
+++ b/packages/frontend/.storybook/preview.ts
@@ -1,8 +1,10 @@
 import { type Preview, setup } from '@storybook/vue3';
+import { initialize, mswDecorator } from 'msw-storybook-addon';
 import locale from './locale';
 import theme from './theme';
 import '../src/style.scss';
 
+initialize();
 localStorage.setItem("locale", JSON.stringify(locale));
 Promise.all([
 	import('../src/components'),
@@ -15,12 +17,22 @@ Promise.all([
 		directives(app);
 		widgets(app);
 	});
-})
+});
 
 const preview = {
+	decorators: [
+		mswDecorator,
+	],
 	parameters: {
 		layout: 'centered',
 	},
+	argTypes: {
+		default: {
+			control: {
+				type: 'text',
+			},
+		},
+	},
 } satisfies Preview;
 
 export default preview;
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 0a7e6b50b..03f7e5d2b 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -76,7 +76,9 @@
 		"@storybook/addon-interactions": "^7.0.0-rc.4",
 		"@storybook/addon-links": "^7.0.0-rc.4",
 		"@storybook/blocks": "^7.0.0-rc.4",
+		"@storybook/manager-api": "7.0.0-rc.4",
 		"@storybook/testing-library": "^0.0.14-next.1",
+		"@storybook/theming": "7.0.0-rc.4",
 		"@storybook/vue3": "^7.0.0-rc.4",
 		"@storybook/vue3-vite": "^7.0.0-rc.4",
 		"@testing-library/vue": "^6.6.1",
@@ -105,6 +107,8 @@
 		"eslint-plugin-import": "2.27.5",
 		"eslint-plugin-vue": "9.9.0",
 		"happy-dom": "8.9.0",
+		"msw": "^1.1.0",
+		"msw-storybook-addon": "^1.8.0",
 		"prettier": "^2.8.4",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
diff --git a/packages/frontend/src/components/MkAbuseReport.stories.ts b/packages/frontend/src/components/MkAbuseReport.stories.ts
index 4b0296769..e3a87b80f 100644
--- a/packages/frontend/src/components/MkAbuseReport.stories.ts
+++ b/packages/frontend/src/components/MkAbuseReport.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkAbuseReport,
 };
 export const Default = {
-	components: {
-		MkAbuseReport,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAbuseReport,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAbuseReport v-bind="$props" />',
+		};
 	},
-	template: '<MkAbuseReport />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkAbuseReportWindow.stories.ts b/packages/frontend/src/components/MkAbuseReportWindow.stories.ts
index e8f90339f..47b0923e9 100644
--- a/packages/frontend/src/components/MkAbuseReportWindow.stories.ts
+++ b/packages/frontend/src/components/MkAbuseReportWindow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkAbuseReportWindow,
 };
 export const Default = {
-	components: {
-		MkAbuseReportWindow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAbuseReportWindow,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAbuseReportWindow v-bind="$props" />',
+		};
 	},
-	template: '<MkAbuseReportWindow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkAchievements.stories.ts b/packages/frontend/src/components/MkAchievements.stories.ts
index a62fadc5c..9c0b1aec8 100644
--- a/packages/frontend/src/components/MkAchievements.stories.ts
+++ b/packages/frontend/src/components/MkAchievements.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkAchievements,
 };
 export const Default = {
-	components: {
-		MkAchievements,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAchievements,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAchievements v-bind="$props" />',
+		};
 	},
-	template: '<MkAchievements />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkAnalogClock.stories.ts b/packages/frontend/src/components/MkAnalogClock.stories.ts
index 7f3e51128..f81e997cf 100644
--- a/packages/frontend/src/components/MkAnalogClock.stories.ts
+++ b/packages/frontend/src/components/MkAnalogClock.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkAnalogClock,
 };
 export const Default = {
-	components: {
-		MkAnalogClock,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAnalogClock,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAnalogClock v-bind="$props" />',
+		};
 	},
-	template: '<MkAnalogClock />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/components/MkAsUi.stories.ts b/packages/frontend/src/components/MkAsUi.stories.ts
index 82bc3c05c..7ad72bef4 100644
--- a/packages/frontend/src/components/MkAsUi.stories.ts
+++ b/packages/frontend/src/components/MkAsUi.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkAsUi,
 };
 export const Default = {
-	components: {
-		MkAsUi,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAsUi,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAsUi v-bind="$props" />',
+		};
 	},
-	template: '<MkAsUi />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkAutocomplete.stories.ts b/packages/frontend/src/components/MkAutocomplete.stories.ts
index 6a1be12e0..c6a0f6be6 100644
--- a/packages/frontend/src/components/MkAutocomplete.stories.ts
+++ b/packages/frontend/src/components/MkAutocomplete.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkAutocomplete,
 };
 export const Default = {
-	components: {
-		MkAutocomplete,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAutocomplete,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAutocomplete v-bind="$props" />',
+		};
 	},
-	template: '<MkAutocomplete />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkAvatars.stories.ts b/packages/frontend/src/components/MkAvatars.stories.ts
index 26b7fab54..bc2a82c84 100644
--- a/packages/frontend/src/components/MkAvatars.stories.ts
+++ b/packages/frontend/src/components/MkAvatars.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkAvatars,
 };
 export const Default = {
-	components: {
-		MkAvatars,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAvatars,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAvatars v-bind="$props" />',
+		};
 	},
-	template: '<MkAvatars />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkButton.stories.impl.ts b/packages/frontend/src/components/MkButton.stories.impl.ts
new file mode 100644
index 000000000..5f73ca71b
--- /dev/null
+++ b/packages/frontend/src/components/MkButton.stories.impl.ts
@@ -0,0 +1,14 @@
+export const Default = {
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkButton,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkButton v-bind="$props">Text</MkButton>',
+		};
+	},
+	parameters: {
+		layout: 'centered',
+	},
+};
diff --git a/packages/frontend/src/components/MkButton.stories.ts b/packages/frontend/src/components/MkButton.stories.ts
index 26ce51bca..57dacb8f1 100644
--- a/packages/frontend/src/components/MkButton.stories.ts
+++ b/packages/frontend/src/components/MkButton.stories.ts
@@ -4,13 +4,18 @@ const meta = {
 	title: 'components/MkButton',
 	component: MkButton,
 };
+export default meta;
 export const Default = {
-	components: {
-		MkButton,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkButton,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkButton v-bind="$props">Text</MkButton>',
+		};
 	},
-	template: '<MkButton />',
 	parameters: {
 		layout: 'centered',
 	},
 };
-export default meta;
diff --git a/packages/frontend/src/components/MkCaptcha.stories.ts b/packages/frontend/src/components/MkCaptcha.stories.ts
index 23d8b5624..e58f36ccf 100644
--- a/packages/frontend/src/components/MkCaptcha.stories.ts
+++ b/packages/frontend/src/components/MkCaptcha.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkCaptcha,
 };
 export const Default = {
-	components: {
-		MkCaptcha,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkCaptcha,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkCaptcha v-bind="$props" />',
+		};
 	},
-	template: '<MkCaptcha />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkChannelFollowButton.stories.ts b/packages/frontend/src/components/MkChannelFollowButton.stories.ts
index 6ce5d52d9..889b9a7f0 100644
--- a/packages/frontend/src/components/MkChannelFollowButton.stories.ts
+++ b/packages/frontend/src/components/MkChannelFollowButton.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkChannelFollowButton,
 };
 export const Default = {
-	components: {
-		MkChannelFollowButton,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkChannelFollowButton,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkChannelFollowButton v-bind="$props" />',
+		};
 	},
-	template: '<MkChannelFollowButton />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkChannelPreview.stories.ts b/packages/frontend/src/components/MkChannelPreview.stories.ts
index 45f380873..a4537bee5 100644
--- a/packages/frontend/src/components/MkChannelPreview.stories.ts
+++ b/packages/frontend/src/components/MkChannelPreview.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkChannelPreview,
 };
 export const Default = {
-	components: {
-		MkChannelPreview,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkChannelPreview,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkChannelPreview v-bind="$props" />',
+		};
 	},
-	template: '<MkChannelPreview />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkChart.stories.ts b/packages/frontend/src/components/MkChart.stories.ts
index cf607d770..8d4b633ed 100644
--- a/packages/frontend/src/components/MkChart.stories.ts
+++ b/packages/frontend/src/components/MkChart.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkChart,
 };
 export const Default = {
-	components: {
-		MkChart,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkChart,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkChart v-bind="$props" />',
+		};
 	},
-	template: '<MkChart />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkChartLegend.stories.ts b/packages/frontend/src/components/MkChartLegend.stories.ts
index 8e6a449b5..fcc39a6a4 100644
--- a/packages/frontend/src/components/MkChartLegend.stories.ts
+++ b/packages/frontend/src/components/MkChartLegend.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkChartLegend,
 };
 export const Default = {
-	components: {
-		MkChartLegend,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkChartLegend,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkChartLegend v-bind="$props" />',
+		};
 	},
-	template: '<MkChartLegend />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkChartTooltip.stories.ts b/packages/frontend/src/components/MkChartTooltip.stories.ts
index 71095ce79..d0ab98b97 100644
--- a/packages/frontend/src/components/MkChartTooltip.stories.ts
+++ b/packages/frontend/src/components/MkChartTooltip.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkChartTooltip,
 };
 export const Default = {
-	components: {
-		MkChartTooltip,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkChartTooltip,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkChartTooltip v-bind="$props" />',
+		};
 	},
-	template: '<MkChartTooltip />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkCheckbox.stories.ts b/packages/frontend/src/components/MkCheckbox.stories.ts
index 1aaa03ba0..177b8a640 100644
--- a/packages/frontend/src/components/MkCheckbox.stories.ts
+++ b/packages/frontend/src/components/MkCheckbox.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkCheckbox,
 };
 export const Default = {
-	components: {
-		MkCheckbox,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkCheckbox,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkCheckbox v-bind="$props" />',
+		};
 	},
-	template: '<MkCheckbox />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkClickerGame.stories.ts b/packages/frontend/src/components/MkClickerGame.stories.ts
index 39dad4e67..c56ec9bd1 100644
--- a/packages/frontend/src/components/MkClickerGame.stories.ts
+++ b/packages/frontend/src/components/MkClickerGame.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkClickerGame,
 };
 export const Default = {
-	components: {
-		MkClickerGame,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkClickerGame,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkClickerGame v-bind="$props" />',
+		};
 	},
-	template: '<MkClickerGame />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkClipPreview.stories.ts b/packages/frontend/src/components/MkClipPreview.stories.ts
index b512c34e4..422d12fab 100644
--- a/packages/frontend/src/components/MkClipPreview.stories.ts
+++ b/packages/frontend/src/components/MkClipPreview.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkClipPreview,
 };
 export const Default = {
-	components: {
-		MkClipPreview,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkClipPreview,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkClipPreview v-bind="$props" />',
+		};
 	},
-	template: '<MkClipPreview />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkCode.core.stories.ts b/packages/frontend/src/components/MkCode.core.stories.ts
index dcc7d6f46..53b41eb0c 100644
--- a/packages/frontend/src/components/MkCode.core.stories.ts
+++ b/packages/frontend/src/components/MkCode.core.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkCode_core,
 };
 export const Default = {
-	components: {
-		MkCode_core,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkCode_core,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkCode_core v-bind="$props" />',
+		};
 	},
-	template: '<MkCode_core />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkCode.stories.ts b/packages/frontend/src/components/MkCode.stories.ts
index 625d6f3d2..1f6d4daff 100644
--- a/packages/frontend/src/components/MkCode.stories.ts
+++ b/packages/frontend/src/components/MkCode.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkCode,
 };
 export const Default = {
-	components: {
-		MkCode,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkCode,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkCode v-bind="$props" />',
+		};
 	},
-	template: '<MkCode />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkContainer.stories.ts b/packages/frontend/src/components/MkContainer.stories.ts
index 73aa520ba..cd07161ce 100644
--- a/packages/frontend/src/components/MkContainer.stories.ts
+++ b/packages/frontend/src/components/MkContainer.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkContainer,
 };
 export const Default = {
-	components: {
-		MkContainer,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkContainer,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkContainer v-bind="$props" />',
+		};
 	},
-	template: '<MkContainer />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkContextMenu.stories.ts b/packages/frontend/src/components/MkContextMenu.stories.ts
index 78885a57a..927e51c8a 100644
--- a/packages/frontend/src/components/MkContextMenu.stories.ts
+++ b/packages/frontend/src/components/MkContextMenu.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkContextMenu,
 };
 export const Default = {
-	components: {
-		MkContextMenu,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkContextMenu,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkContextMenu v-bind="$props" />',
+		};
 	},
-	template: '<MkContextMenu />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkCropperDialog.stories.ts b/packages/frontend/src/components/MkCropperDialog.stories.ts
index 38c665d77..3896c8840 100644
--- a/packages/frontend/src/components/MkCropperDialog.stories.ts
+++ b/packages/frontend/src/components/MkCropperDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkCropperDialog,
 };
 export const Default = {
-	components: {
-		MkCropperDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkCropperDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkCropperDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkCropperDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkCwButton.stories.ts b/packages/frontend/src/components/MkCwButton.stories.ts
index 354512119..1a7398a95 100644
--- a/packages/frontend/src/components/MkCwButton.stories.ts
+++ b/packages/frontend/src/components/MkCwButton.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkCwButton,
 };
 export const Default = {
-	components: {
-		MkCwButton,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkCwButton,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkCwButton v-bind="$props" />',
+		};
 	},
-	template: '<MkCwButton />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDateSeparatedList.stories.ts b/packages/frontend/src/components/MkDateSeparatedList.stories.ts
index ea319c12e..719734a08 100644
--- a/packages/frontend/src/components/MkDateSeparatedList.stories.ts
+++ b/packages/frontend/src/components/MkDateSeparatedList.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDateSeparatedList,
 };
 export const Default = {
-	components: {
-		MkDateSeparatedList,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDateSeparatedList,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDateSeparatedList v-bind="$props" />',
+		};
 	},
-	template: '<MkDateSeparatedList />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDialog.stories.ts b/packages/frontend/src/components/MkDialog.stories.ts
index 2996b180b..939cc9a57 100644
--- a/packages/frontend/src/components/MkDialog.stories.ts
+++ b/packages/frontend/src/components/MkDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDialog,
 };
 export const Default = {
-	components: {
-		MkDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDigitalClock.stories.ts b/packages/frontend/src/components/MkDigitalClock.stories.ts
index 6a6299d5c..86706bde1 100644
--- a/packages/frontend/src/components/MkDigitalClock.stories.ts
+++ b/packages/frontend/src/components/MkDigitalClock.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDigitalClock,
 };
 export const Default = {
-	components: {
-		MkDigitalClock,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDigitalClock,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDigitalClock v-bind="$props" />',
+		};
 	},
-	template: '<MkDigitalClock />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDonation.stories.ts b/packages/frontend/src/components/MkDonation.stories.ts
index afee62657..ae57ad250 100644
--- a/packages/frontend/src/components/MkDonation.stories.ts
+++ b/packages/frontend/src/components/MkDonation.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDonation,
 };
 export const Default = {
-	components: {
-		MkDonation,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDonation,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDonation v-bind="$props" />',
+		};
 	},
-	template: '<MkDonation />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDrive.file.stories.ts b/packages/frontend/src/components/MkDrive.file.stories.ts
index 0730b78a6..c873285b4 100644
--- a/packages/frontend/src/components/MkDrive.file.stories.ts
+++ b/packages/frontend/src/components/MkDrive.file.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDrive_file,
 };
 export const Default = {
-	components: {
-		MkDrive_file,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDrive_file,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDrive_file v-bind="$props" />',
+		};
 	},
-	template: '<MkDrive_file />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDrive.folder.stories.ts b/packages/frontend/src/components/MkDrive.folder.stories.ts
index 4b5f5b9ac..3d70a81bb 100644
--- a/packages/frontend/src/components/MkDrive.folder.stories.ts
+++ b/packages/frontend/src/components/MkDrive.folder.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDrive_folder,
 };
 export const Default = {
-	components: {
-		MkDrive_folder,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDrive_folder,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDrive_folder v-bind="$props" />',
+		};
 	},
-	template: '<MkDrive_folder />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDrive.navFolder.stories.ts b/packages/frontend/src/components/MkDrive.navFolder.stories.ts
index f38016e32..1279d9eae 100644
--- a/packages/frontend/src/components/MkDrive.navFolder.stories.ts
+++ b/packages/frontend/src/components/MkDrive.navFolder.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDrive_navFolder,
 };
 export const Default = {
-	components: {
-		MkDrive_navFolder,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDrive_navFolder,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDrive_navFolder v-bind="$props" />',
+		};
 	},
-	template: '<MkDrive_navFolder />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDrive.stories.ts b/packages/frontend/src/components/MkDrive.stories.ts
index 2d4afc95d..f581ddabe 100644
--- a/packages/frontend/src/components/MkDrive.stories.ts
+++ b/packages/frontend/src/components/MkDrive.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDrive,
 };
 export const Default = {
-	components: {
-		MkDrive,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDrive,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDrive v-bind="$props" />',
+		};
 	},
-	template: '<MkDrive />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.stories.ts b/packages/frontend/src/components/MkDriveFileThumbnail.stories.ts
index 4b3565cf2..9e6e078c0 100644
--- a/packages/frontend/src/components/MkDriveFileThumbnail.stories.ts
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDriveFileThumbnail,
 };
 export const Default = {
-	components: {
-		MkDriveFileThumbnail,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDriveFileThumbnail,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDriveFileThumbnail v-bind="$props" />',
+		};
 	},
-	template: '<MkDriveFileThumbnail />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDriveSelectDialog.stories.ts b/packages/frontend/src/components/MkDriveSelectDialog.stories.ts
index 0ac06ba2f..39a7828b4 100644
--- a/packages/frontend/src/components/MkDriveSelectDialog.stories.ts
+++ b/packages/frontend/src/components/MkDriveSelectDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDriveSelectDialog,
 };
 export const Default = {
-	components: {
-		MkDriveSelectDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDriveSelectDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDriveSelectDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkDriveSelectDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkDriveWindow.stories.ts b/packages/frontend/src/components/MkDriveWindow.stories.ts
index 44d46b19d..29cdd5228 100644
--- a/packages/frontend/src/components/MkDriveWindow.stories.ts
+++ b/packages/frontend/src/components/MkDriveWindow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkDriveWindow,
 };
 export const Default = {
-	components: {
-		MkDriveWindow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkDriveWindow,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkDriveWindow v-bind="$props" />',
+		};
 	},
-	template: '<MkDriveWindow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkEmojiPicker.section.stories.ts b/packages/frontend/src/components/MkEmojiPicker.section.stories.ts
index 1a19f4fb3..60ea8fac0 100644
--- a/packages/frontend/src/components/MkEmojiPicker.section.stories.ts
+++ b/packages/frontend/src/components/MkEmojiPicker.section.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkEmojiPicker_section,
 };
 export const Default = {
-	components: {
-		MkEmojiPicker_section,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkEmojiPicker_section,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkEmojiPicker_section v-bind="$props" />',
+		};
 	},
-	template: '<MkEmojiPicker_section />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkEmojiPicker.stories.ts b/packages/frontend/src/components/MkEmojiPicker.stories.ts
index 977be11bc..06b41d28d 100644
--- a/packages/frontend/src/components/MkEmojiPicker.stories.ts
+++ b/packages/frontend/src/components/MkEmojiPicker.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkEmojiPicker,
 };
 export const Default = {
-	components: {
-		MkEmojiPicker,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkEmojiPicker,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkEmojiPicker v-bind="$props" />',
+		};
 	},
-	template: '<MkEmojiPicker />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.stories.ts b/packages/frontend/src/components/MkEmojiPickerDialog.stories.ts
index ec6972bac..56ab6ac01 100644
--- a/packages/frontend/src/components/MkEmojiPickerDialog.stories.ts
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkEmojiPickerDialog,
 };
 export const Default = {
-	components: {
-		MkEmojiPickerDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkEmojiPickerDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkEmojiPickerDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkEmojiPickerDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkEmojiPickerWindow.stories.ts b/packages/frontend/src/components/MkEmojiPickerWindow.stories.ts
index d3393d8f9..470bacaf2 100644
--- a/packages/frontend/src/components/MkEmojiPickerWindow.stories.ts
+++ b/packages/frontend/src/components/MkEmojiPickerWindow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkEmojiPickerWindow,
 };
 export const Default = {
-	components: {
-		MkEmojiPickerWindow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkEmojiPickerWindow,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkEmojiPickerWindow v-bind="$props" />',
+		};
 	},
-	template: '<MkEmojiPickerWindow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkFeaturedPhotos.stories.ts b/packages/frontend/src/components/MkFeaturedPhotos.stories.ts
index 613723d08..0da9787c9 100644
--- a/packages/frontend/src/components/MkFeaturedPhotos.stories.ts
+++ b/packages/frontend/src/components/MkFeaturedPhotos.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkFeaturedPhotos,
 };
 export const Default = {
-	components: {
-		MkFeaturedPhotos,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkFeaturedPhotos,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkFeaturedPhotos v-bind="$props" />',
+		};
 	},
-	template: '<MkFeaturedPhotos />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkFileCaptionEditWindow.stories.ts b/packages/frontend/src/components/MkFileCaptionEditWindow.stories.ts
index c86d7d188..2ade1eef4 100644
--- a/packages/frontend/src/components/MkFileCaptionEditWindow.stories.ts
+++ b/packages/frontend/src/components/MkFileCaptionEditWindow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkFileCaptionEditWindow,
 };
 export const Default = {
-	components: {
-		MkFileCaptionEditWindow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkFileCaptionEditWindow,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkFileCaptionEditWindow v-bind="$props" />',
+		};
 	},
-	template: '<MkFileCaptionEditWindow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkFileListForAdmin.stories.ts b/packages/frontend/src/components/MkFileListForAdmin.stories.ts
index cd66908fc..22386b84c 100644
--- a/packages/frontend/src/components/MkFileListForAdmin.stories.ts
+++ b/packages/frontend/src/components/MkFileListForAdmin.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkFileListForAdmin,
 };
 export const Default = {
-	components: {
-		MkFileListForAdmin,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkFileListForAdmin,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkFileListForAdmin v-bind="$props" />',
+		};
 	},
-	template: '<MkFileListForAdmin />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkFlashPreview.stories.ts b/packages/frontend/src/components/MkFlashPreview.stories.ts
index ec23c2055..b8d218ed7 100644
--- a/packages/frontend/src/components/MkFlashPreview.stories.ts
+++ b/packages/frontend/src/components/MkFlashPreview.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkFlashPreview,
 };
 export const Default = {
-	components: {
-		MkFlashPreview,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkFlashPreview,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkFlashPreview v-bind="$props" />',
+		};
 	},
-	template: '<MkFlashPreview />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkFoldableSection.stories.ts b/packages/frontend/src/components/MkFoldableSection.stories.ts
index 3760566e0..80d9ca861 100644
--- a/packages/frontend/src/components/MkFoldableSection.stories.ts
+++ b/packages/frontend/src/components/MkFoldableSection.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkFoldableSection,
 };
 export const Default = {
-	components: {
-		MkFoldableSection,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkFoldableSection,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkFoldableSection v-bind="$props" />',
+		};
 	},
-	template: '<MkFoldableSection />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkFolder.stories.ts b/packages/frontend/src/components/MkFolder.stories.ts
index b873a6238..7eb6a3b0e 100644
--- a/packages/frontend/src/components/MkFolder.stories.ts
+++ b/packages/frontend/src/components/MkFolder.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkFolder,
 };
 export const Default = {
-	components: {
-		MkFolder,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkFolder,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkFolder v-bind="$props" />',
+		};
 	},
-	template: '<MkFolder />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkFollowButton.stories.ts b/packages/frontend/src/components/MkFollowButton.stories.ts
index 51d7827df..4e85afa01 100644
--- a/packages/frontend/src/components/MkFollowButton.stories.ts
+++ b/packages/frontend/src/components/MkFollowButton.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkFollowButton,
 };
 export const Default = {
-	components: {
-		MkFollowButton,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkFollowButton,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkFollowButton v-bind="$props" />',
+		};
 	},
-	template: '<MkFollowButton />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkForgotPassword.stories.ts b/packages/frontend/src/components/MkForgotPassword.stories.ts
index 3f809e690..6dd724aa1 100644
--- a/packages/frontend/src/components/MkForgotPassword.stories.ts
+++ b/packages/frontend/src/components/MkForgotPassword.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkForgotPassword,
 };
 export const Default = {
-	components: {
-		MkForgotPassword,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkForgotPassword,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkForgotPassword v-bind="$props" />',
+		};
 	},
-	template: '<MkForgotPassword />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkFormDialog.stories.ts b/packages/frontend/src/components/MkFormDialog.stories.ts
index 45e1c6b20..662242437 100644
--- a/packages/frontend/src/components/MkFormDialog.stories.ts
+++ b/packages/frontend/src/components/MkFormDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkFormDialog,
 };
 export const Default = {
-	components: {
-		MkFormDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkFormDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkFormDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkFormDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkGalleryPostPreview.stories.ts b/packages/frontend/src/components/MkGalleryPostPreview.stories.ts
index 89e4fe308..18b0ab6ae 100644
--- a/packages/frontend/src/components/MkGalleryPostPreview.stories.ts
+++ b/packages/frontend/src/components/MkGalleryPostPreview.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkGalleryPostPreview,
 };
 export const Default = {
-	components: {
-		MkGalleryPostPreview,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkGalleryPostPreview,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkGalleryPostPreview v-bind="$props" />',
+		};
 	},
-	template: '<MkGalleryPostPreview />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkGoogle.stories.ts b/packages/frontend/src/components/MkGoogle.stories.ts
index 01f147cd0..660607038 100644
--- a/packages/frontend/src/components/MkGoogle.stories.ts
+++ b/packages/frontend/src/components/MkGoogle.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkGoogle,
 };
 export const Default = {
-	components: {
-		MkGoogle,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkGoogle,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkGoogle v-bind="$props" />',
+		};
 	},
-	template: '<MkGoogle />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkHeatmap.stories.ts b/packages/frontend/src/components/MkHeatmap.stories.ts
index 334cde91c..1fdb8eb08 100644
--- a/packages/frontend/src/components/MkHeatmap.stories.ts
+++ b/packages/frontend/src/components/MkHeatmap.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkHeatmap,
 };
 export const Default = {
-	components: {
-		MkHeatmap,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkHeatmap,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkHeatmap v-bind="$props" />',
+		};
 	},
-	template: '<MkHeatmap />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkImageViewer.stories.ts b/packages/frontend/src/components/MkImageViewer.stories.ts
index c2be14dcd..4f0ff7f43 100644
--- a/packages/frontend/src/components/MkImageViewer.stories.ts
+++ b/packages/frontend/src/components/MkImageViewer.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkImageViewer,
 };
 export const Default = {
-	components: {
-		MkImageViewer,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkImageViewer,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkImageViewer v-bind="$props" />',
+		};
 	},
-	template: '<MkImageViewer />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.stories.ts b/packages/frontend/src/components/MkImgWithBlurhash.stories.ts
index 06c2062af..c00088d9b 100644
--- a/packages/frontend/src/components/MkImgWithBlurhash.stories.ts
+++ b/packages/frontend/src/components/MkImgWithBlurhash.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkImgWithBlurhash,
 };
 export const Default = {
-	components: {
-		MkImgWithBlurhash,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkImgWithBlurhash,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkImgWithBlurhash v-bind="$props" />',
+		};
 	},
-	template: '<MkImgWithBlurhash />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkInfo.stories.ts b/packages/frontend/src/components/MkInfo.stories.ts
index d55966039..1e164d427 100644
--- a/packages/frontend/src/components/MkInfo.stories.ts
+++ b/packages/frontend/src/components/MkInfo.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkInfo,
 };
 export const Default = {
-	components: {
-		MkInfo,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkInfo,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkInfo v-bind="$props" />',
+		};
 	},
-	template: '<MkInfo />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkInput.stories.ts b/packages/frontend/src/components/MkInput.stories.ts
index 65d43322b..199a5b539 100644
--- a/packages/frontend/src/components/MkInput.stories.ts
+++ b/packages/frontend/src/components/MkInput.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkInput,
 };
 export const Default = {
-	components: {
-		MkInput,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkInput,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkInput v-bind="$props" />',
+		};
 	},
-	template: '<MkInput />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkInstanceCardMini.stories.ts b/packages/frontend/src/components/MkInstanceCardMini.stories.ts
index 8bd0eb1b4..fcc9e8f2e 100644
--- a/packages/frontend/src/components/MkInstanceCardMini.stories.ts
+++ b/packages/frontend/src/components/MkInstanceCardMini.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkInstanceCardMini,
 };
 export const Default = {
-	components: {
-		MkInstanceCardMini,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkInstanceCardMini,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkInstanceCardMini v-bind="$props" />',
+		};
 	},
-	template: '<MkInstanceCardMini />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkInstanceStats.stories.ts b/packages/frontend/src/components/MkInstanceStats.stories.ts
index ee5aec981..74fa5359b 100644
--- a/packages/frontend/src/components/MkInstanceStats.stories.ts
+++ b/packages/frontend/src/components/MkInstanceStats.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkInstanceStats,
 };
 export const Default = {
-	components: {
-		MkInstanceStats,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkInstanceStats,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkInstanceStats v-bind="$props" />',
+		};
 	},
-	template: '<MkInstanceStats />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkInstanceTicker.stories.ts b/packages/frontend/src/components/MkInstanceTicker.stories.ts
index c8809ad87..87eb49a7c 100644
--- a/packages/frontend/src/components/MkInstanceTicker.stories.ts
+++ b/packages/frontend/src/components/MkInstanceTicker.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkInstanceTicker,
 };
 export const Default = {
-	components: {
-		MkInstanceTicker,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkInstanceTicker,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkInstanceTicker v-bind="$props" />',
+		};
 	},
-	template: '<MkInstanceTicker />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkKeyValue.stories.ts b/packages/frontend/src/components/MkKeyValue.stories.ts
index a69bd185a..83753e146 100644
--- a/packages/frontend/src/components/MkKeyValue.stories.ts
+++ b/packages/frontend/src/components/MkKeyValue.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkKeyValue,
 };
 export const Default = {
-	components: {
-		MkKeyValue,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkKeyValue,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkKeyValue v-bind="$props" />',
+		};
 	},
-	template: '<MkKeyValue />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkLaunchPad.stories.ts b/packages/frontend/src/components/MkLaunchPad.stories.ts
index 3c58063e3..02e239763 100644
--- a/packages/frontend/src/components/MkLaunchPad.stories.ts
+++ b/packages/frontend/src/components/MkLaunchPad.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkLaunchPad,
 };
 export const Default = {
-	components: {
-		MkLaunchPad,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkLaunchPad,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkLaunchPad v-bind="$props" />',
+		};
 	},
-	template: '<MkLaunchPad />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkLink.stories.ts b/packages/frontend/src/components/MkLink.stories.ts
index 5445eb859..33baee870 100644
--- a/packages/frontend/src/components/MkLink.stories.ts
+++ b/packages/frontend/src/components/MkLink.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkLink,
 };
 export const Default = {
-	components: {
-		MkLink,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkLink,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkLink v-bind="$props" />',
+		};
 	},
-	template: '<MkLink />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkMarquee.stories.ts b/packages/frontend/src/components/MkMarquee.stories.ts
index 14981dbd5..9fec1d5a8 100644
--- a/packages/frontend/src/components/MkMarquee.stories.ts
+++ b/packages/frontend/src/components/MkMarquee.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkMarquee,
 };
 export const Default = {
-	components: {
-		MkMarquee,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkMarquee,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkMarquee v-bind="$props" />',
+		};
 	},
-	template: '<MkMarquee />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkMediaBanner.stories.ts b/packages/frontend/src/components/MkMediaBanner.stories.ts
index 90424768c..dcf57f0cc 100644
--- a/packages/frontend/src/components/MkMediaBanner.stories.ts
+++ b/packages/frontend/src/components/MkMediaBanner.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkMediaBanner,
 };
 export const Default = {
-	components: {
-		MkMediaBanner,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkMediaBanner,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkMediaBanner v-bind="$props" />',
+		};
 	},
-	template: '<MkMediaBanner />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkMediaImage.stories.ts b/packages/frontend/src/components/MkMediaImage.stories.ts
index bc985ff17..cb495872d 100644
--- a/packages/frontend/src/components/MkMediaImage.stories.ts
+++ b/packages/frontend/src/components/MkMediaImage.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkMediaImage,
 };
 export const Default = {
-	components: {
-		MkMediaImage,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkMediaImage,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkMediaImage v-bind="$props" />',
+		};
 	},
-	template: '<MkMediaImage />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkMediaList.stories.ts b/packages/frontend/src/components/MkMediaList.stories.ts
index 0b38efe50..87eb23dc8 100644
--- a/packages/frontend/src/components/MkMediaList.stories.ts
+++ b/packages/frontend/src/components/MkMediaList.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkMediaList,
 };
 export const Default = {
-	components: {
-		MkMediaList,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkMediaList,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkMediaList v-bind="$props" />',
+		};
 	},
-	template: '<MkMediaList />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkMediaVideo.stories.ts b/packages/frontend/src/components/MkMediaVideo.stories.ts
index 7b25dcef0..a39adebbe 100644
--- a/packages/frontend/src/components/MkMediaVideo.stories.ts
+++ b/packages/frontend/src/components/MkMediaVideo.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkMediaVideo,
 };
 export const Default = {
-	components: {
-		MkMediaVideo,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkMediaVideo,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkMediaVideo v-bind="$props" />',
+		};
 	},
-	template: '<MkMediaVideo />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkMention.stories.ts b/packages/frontend/src/components/MkMention.stories.ts
index d03eeaf7e..459633a07 100644
--- a/packages/frontend/src/components/MkMention.stories.ts
+++ b/packages/frontend/src/components/MkMention.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkMention,
 };
 export const Default = {
-	components: {
-		MkMention,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkMention,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkMention v-bind="$props" />',
+		};
 	},
-	template: '<MkMention />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkMenu.child.stories.ts b/packages/frontend/src/components/MkMenu.child.stories.ts
index cec1d4c72..114d71040 100644
--- a/packages/frontend/src/components/MkMenu.child.stories.ts
+++ b/packages/frontend/src/components/MkMenu.child.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkMenu_child,
 };
 export const Default = {
-	components: {
-		MkMenu_child,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkMenu_child,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkMenu_child v-bind="$props" />',
+		};
 	},
-	template: '<MkMenu_child />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkMenu.stories.ts b/packages/frontend/src/components/MkMenu.stories.ts
index 79f4714bc..9a293bcc9 100644
--- a/packages/frontend/src/components/MkMenu.stories.ts
+++ b/packages/frontend/src/components/MkMenu.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkMenu,
 };
 export const Default = {
-	components: {
-		MkMenu,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkMenu,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkMenu v-bind="$props" />',
+		};
 	},
-	template: '<MkMenu />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkMiniChart.stories.ts b/packages/frontend/src/components/MkMiniChart.stories.ts
index 18f37447c..f773bafe2 100644
--- a/packages/frontend/src/components/MkMiniChart.stories.ts
+++ b/packages/frontend/src/components/MkMiniChart.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkMiniChart,
 };
 export const Default = {
-	components: {
-		MkMiniChart,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkMiniChart,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkMiniChart v-bind="$props" />',
+		};
 	},
-	template: '<MkMiniChart />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkModal.stories.ts b/packages/frontend/src/components/MkModal.stories.ts
index d1c397700..84f40abc0 100644
--- a/packages/frontend/src/components/MkModal.stories.ts
+++ b/packages/frontend/src/components/MkModal.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkModal,
 };
 export const Default = {
-	components: {
-		MkModal,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkModal,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkModal v-bind="$props" />',
+		};
 	},
-	template: '<MkModal />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkModalPageWindow.stories.ts b/packages/frontend/src/components/MkModalPageWindow.stories.ts
index c4c162f78..331281879 100644
--- a/packages/frontend/src/components/MkModalPageWindow.stories.ts
+++ b/packages/frontend/src/components/MkModalPageWindow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkModalPageWindow,
 };
 export const Default = {
-	components: {
-		MkModalPageWindow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkModalPageWindow,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkModalPageWindow v-bind="$props" />',
+		};
 	},
-	template: '<MkModalPageWindow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkModalWindow.stories.ts b/packages/frontend/src/components/MkModalWindow.stories.ts
index 2212cd6a4..7e71ae071 100644
--- a/packages/frontend/src/components/MkModalWindow.stories.ts
+++ b/packages/frontend/src/components/MkModalWindow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkModalWindow,
 };
 export const Default = {
-	components: {
-		MkModalWindow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkModalWindow,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkModalWindow v-bind="$props" />',
+		};
 	},
-	template: '<MkModalWindow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNote.stories.ts b/packages/frontend/src/components/MkNote.stories.ts
index d828d3844..47dfafc76 100644
--- a/packages/frontend/src/components/MkNote.stories.ts
+++ b/packages/frontend/src/components/MkNote.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNote,
 };
 export const Default = {
-	components: {
-		MkNote,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNote,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNote v-bind="$props" />',
+		};
 	},
-	template: '<MkNote />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNoteDetailed.stories.ts b/packages/frontend/src/components/MkNoteDetailed.stories.ts
index b787ea37b..3e106adfa 100644
--- a/packages/frontend/src/components/MkNoteDetailed.stories.ts
+++ b/packages/frontend/src/components/MkNoteDetailed.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNoteDetailed,
 };
 export const Default = {
-	components: {
-		MkNoteDetailed,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNoteDetailed,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNoteDetailed v-bind="$props" />',
+		};
 	},
-	template: '<MkNoteDetailed />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNoteHeader.stories.ts b/packages/frontend/src/components/MkNoteHeader.stories.ts
index af7c5b270..e49279ae5 100644
--- a/packages/frontend/src/components/MkNoteHeader.stories.ts
+++ b/packages/frontend/src/components/MkNoteHeader.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNoteHeader,
 };
 export const Default = {
-	components: {
-		MkNoteHeader,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNoteHeader,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNoteHeader v-bind="$props" />',
+		};
 	},
-	template: '<MkNoteHeader />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNotePreview.stories.ts b/packages/frontend/src/components/MkNotePreview.stories.ts
index 5feba941c..d3074aaca 100644
--- a/packages/frontend/src/components/MkNotePreview.stories.ts
+++ b/packages/frontend/src/components/MkNotePreview.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNotePreview,
 };
 export const Default = {
-	components: {
-		MkNotePreview,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNotePreview,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNotePreview v-bind="$props" />',
+		};
 	},
-	template: '<MkNotePreview />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNoteSimple.stories.ts b/packages/frontend/src/components/MkNoteSimple.stories.ts
index 14fe3aea8..60676a0f8 100644
--- a/packages/frontend/src/components/MkNoteSimple.stories.ts
+++ b/packages/frontend/src/components/MkNoteSimple.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNoteSimple,
 };
 export const Default = {
-	components: {
-		MkNoteSimple,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNoteSimple,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNoteSimple v-bind="$props" />',
+		};
 	},
-	template: '<MkNoteSimple />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNoteSub.stories.ts b/packages/frontend/src/components/MkNoteSub.stories.ts
index 9d526ec98..4e63f9570 100644
--- a/packages/frontend/src/components/MkNoteSub.stories.ts
+++ b/packages/frontend/src/components/MkNoteSub.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNoteSub,
 };
 export const Default = {
-	components: {
-		MkNoteSub,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNoteSub,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNoteSub v-bind="$props" />',
+		};
 	},
-	template: '<MkNoteSub />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNotes.stories.ts b/packages/frontend/src/components/MkNotes.stories.ts
index 8c2a39d66..ee559a017 100644
--- a/packages/frontend/src/components/MkNotes.stories.ts
+++ b/packages/frontend/src/components/MkNotes.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNotes,
 };
 export const Default = {
-	components: {
-		MkNotes,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNotes,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNotes v-bind="$props" />',
+		};
 	},
-	template: '<MkNotes />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNotification.stories.ts b/packages/frontend/src/components/MkNotification.stories.ts
index 13f5d751a..7960900a8 100644
--- a/packages/frontend/src/components/MkNotification.stories.ts
+++ b/packages/frontend/src/components/MkNotification.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNotification,
 };
 export const Default = {
-	components: {
-		MkNotification,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNotification,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNotification v-bind="$props" />',
+		};
 	},
-	template: '<MkNotification />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNotificationSettingWindow.stories.ts b/packages/frontend/src/components/MkNotificationSettingWindow.stories.ts
index adc6627f5..78dc44c8a 100644
--- a/packages/frontend/src/components/MkNotificationSettingWindow.stories.ts
+++ b/packages/frontend/src/components/MkNotificationSettingWindow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNotificationSettingWindow,
 };
 export const Default = {
-	components: {
-		MkNotificationSettingWindow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNotificationSettingWindow,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNotificationSettingWindow v-bind="$props" />',
+		};
 	},
-	template: '<MkNotificationSettingWindow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNotifications.stories.ts b/packages/frontend/src/components/MkNotifications.stories.ts
index b1f73956f..e340422e1 100644
--- a/packages/frontend/src/components/MkNotifications.stories.ts
+++ b/packages/frontend/src/components/MkNotifications.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNotifications,
 };
 export const Default = {
-	components: {
-		MkNotifications,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNotifications,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNotifications v-bind="$props" />',
+		};
 	},
-	template: '<MkNotifications />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNumber.stories.ts b/packages/frontend/src/components/MkNumber.stories.ts
index 9b9495ab8..fc86c0025 100644
--- a/packages/frontend/src/components/MkNumber.stories.ts
+++ b/packages/frontend/src/components/MkNumber.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNumber,
 };
 export const Default = {
-	components: {
-		MkNumber,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNumber,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNumber v-bind="$props" />',
+		};
 	},
-	template: '<MkNumber />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkNumberDiff.stories.ts b/packages/frontend/src/components/MkNumberDiff.stories.ts
index 9430fd161..715bbb543 100644
--- a/packages/frontend/src/components/MkNumberDiff.stories.ts
+++ b/packages/frontend/src/components/MkNumberDiff.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkNumberDiff,
 };
 export const Default = {
-	components: {
-		MkNumberDiff,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkNumberDiff,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkNumberDiff v-bind="$props" />',
+		};
 	},
-	template: '<MkNumberDiff />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkObjectView.stories.ts b/packages/frontend/src/components/MkObjectView.stories.ts
index d44e3ee69..746dccc37 100644
--- a/packages/frontend/src/components/MkObjectView.stories.ts
+++ b/packages/frontend/src/components/MkObjectView.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkObjectView,
 };
 export const Default = {
-	components: {
-		MkObjectView,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkObjectView,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkObjectView v-bind="$props" />',
+		};
 	},
-	template: '<MkObjectView />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkObjectView.value.stories.ts b/packages/frontend/src/components/MkObjectView.value.stories.ts
index 27bc7958e..8e1897837 100644
--- a/packages/frontend/src/components/MkObjectView.value.stories.ts
+++ b/packages/frontend/src/components/MkObjectView.value.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkObjectView_value,
 };
 export const Default = {
-	components: {
-		MkObjectView_value,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkObjectView_value,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkObjectView_value v-bind="$props" />',
+		};
 	},
-	template: '<MkObjectView_value />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkOmit.stories.ts b/packages/frontend/src/components/MkOmit.stories.ts
index f2621961d..4d954fd23 100644
--- a/packages/frontend/src/components/MkOmit.stories.ts
+++ b/packages/frontend/src/components/MkOmit.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkOmit,
 };
 export const Default = {
-	components: {
-		MkOmit,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkOmit,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkOmit v-bind="$props" />',
+		};
 	},
-	template: '<MkOmit />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPagePreview.stories.ts b/packages/frontend/src/components/MkPagePreview.stories.ts
index 17cf7c4c3..dd96afa28 100644
--- a/packages/frontend/src/components/MkPagePreview.stories.ts
+++ b/packages/frontend/src/components/MkPagePreview.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPagePreview,
 };
 export const Default = {
-	components: {
-		MkPagePreview,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPagePreview,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPagePreview v-bind="$props" />',
+		};
 	},
-	template: '<MkPagePreview />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPageWindow.stories.ts b/packages/frontend/src/components/MkPageWindow.stories.ts
index e71e348ae..f1c8b3b24 100644
--- a/packages/frontend/src/components/MkPageWindow.stories.ts
+++ b/packages/frontend/src/components/MkPageWindow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPageWindow,
 };
 export const Default = {
-	components: {
-		MkPageWindow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPageWindow,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPageWindow v-bind="$props" />',
+		};
 	},
-	template: '<MkPageWindow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPagination.stories.ts b/packages/frontend/src/components/MkPagination.stories.ts
index 9bebe3674..3b89bb4b2 100644
--- a/packages/frontend/src/components/MkPagination.stories.ts
+++ b/packages/frontend/src/components/MkPagination.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPagination,
 };
 export const Default = {
-	components: {
-		MkPagination,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPagination,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPagination v-bind="$props" />',
+		};
 	},
-	template: '<MkPagination />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPlusOneEffect.stories.ts b/packages/frontend/src/components/MkPlusOneEffect.stories.ts
index a8a47b896..10cf1f372 100644
--- a/packages/frontend/src/components/MkPlusOneEffect.stories.ts
+++ b/packages/frontend/src/components/MkPlusOneEffect.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPlusOneEffect,
 };
 export const Default = {
-	components: {
-		MkPlusOneEffect,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPlusOneEffect,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPlusOneEffect v-bind="$props" />',
+		};
 	},
-	template: '<MkPlusOneEffect />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPoll.stories.ts b/packages/frontend/src/components/MkPoll.stories.ts
index fea5821fe..154c67511 100644
--- a/packages/frontend/src/components/MkPoll.stories.ts
+++ b/packages/frontend/src/components/MkPoll.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPoll,
 };
 export const Default = {
-	components: {
-		MkPoll,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPoll,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPoll v-bind="$props" />',
+		};
 	},
-	template: '<MkPoll />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPollEditor.stories.ts b/packages/frontend/src/components/MkPollEditor.stories.ts
index c332f1c80..09acb5f4a 100644
--- a/packages/frontend/src/components/MkPollEditor.stories.ts
+++ b/packages/frontend/src/components/MkPollEditor.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPollEditor,
 };
 export const Default = {
-	components: {
-		MkPollEditor,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPollEditor,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPollEditor v-bind="$props" />',
+		};
 	},
-	template: '<MkPollEditor />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPopupMenu.stories.ts b/packages/frontend/src/components/MkPopupMenu.stories.ts
index 127227e1d..acb5b6939 100644
--- a/packages/frontend/src/components/MkPopupMenu.stories.ts
+++ b/packages/frontend/src/components/MkPopupMenu.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPopupMenu,
 };
 export const Default = {
-	components: {
-		MkPopupMenu,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPopupMenu,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPopupMenu v-bind="$props" />',
+		};
 	},
-	template: '<MkPopupMenu />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPostForm.stories.ts b/packages/frontend/src/components/MkPostForm.stories.ts
index b459222fc..da9b8947b 100644
--- a/packages/frontend/src/components/MkPostForm.stories.ts
+++ b/packages/frontend/src/components/MkPostForm.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPostForm,
 };
 export const Default = {
-	components: {
-		MkPostForm,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPostForm,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPostForm v-bind="$props" />',
+		};
 	},
-	template: '<MkPostForm />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPostFormAttaches.stories.ts b/packages/frontend/src/components/MkPostFormAttaches.stories.ts
index ea67d38e6..717385b1f 100644
--- a/packages/frontend/src/components/MkPostFormAttaches.stories.ts
+++ b/packages/frontend/src/components/MkPostFormAttaches.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPostFormAttaches,
 };
 export const Default = {
-	components: {
-		MkPostFormAttaches,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPostFormAttaches,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPostFormAttaches v-bind="$props" />',
+		};
 	},
-	template: '<MkPostFormAttaches />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPostFormDialog.stories.ts b/packages/frontend/src/components/MkPostFormDialog.stories.ts
index 0683ce770..18a0f75ce 100644
--- a/packages/frontend/src/components/MkPostFormDialog.stories.ts
+++ b/packages/frontend/src/components/MkPostFormDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPostFormDialog,
 };
 export const Default = {
-	components: {
-		MkPostFormDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPostFormDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPostFormDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkPostFormDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkPushNotificationAllowButton.stories.ts b/packages/frontend/src/components/MkPushNotificationAllowButton.stories.ts
index 339cfc8ec..20af96778 100644
--- a/packages/frontend/src/components/MkPushNotificationAllowButton.stories.ts
+++ b/packages/frontend/src/components/MkPushNotificationAllowButton.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPushNotificationAllowButton,
 };
 export const Default = {
-	components: {
-		MkPushNotificationAllowButton,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPushNotificationAllowButton,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPushNotificationAllowButton v-bind="$props" />',
+		};
 	},
-	template: '<MkPushNotificationAllowButton />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkRadio.stories.ts b/packages/frontend/src/components/MkRadio.stories.ts
index 5f3a5ef25..34037cd78 100644
--- a/packages/frontend/src/components/MkRadio.stories.ts
+++ b/packages/frontend/src/components/MkRadio.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkRadio,
 };
 export const Default = {
-	components: {
-		MkRadio,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkRadio,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkRadio v-bind="$props" />',
+		};
 	},
-	template: '<MkRadio />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkRadios.stories.ts b/packages/frontend/src/components/MkRadios.stories.ts
index ac6e9f61e..0a12b130c 100644
--- a/packages/frontend/src/components/MkRadios.stories.ts
+++ b/packages/frontend/src/components/MkRadios.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkRadios,
 };
 export const Default = {
-	components: {
-		MkRadios,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkRadios,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkRadios v-bind="$props" />',
+		};
 	},
-	template: '<MkRadios />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkRange.stories.ts b/packages/frontend/src/components/MkRange.stories.ts
index c46122334..764f7ac5b 100644
--- a/packages/frontend/src/components/MkRange.stories.ts
+++ b/packages/frontend/src/components/MkRange.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkRange,
 };
 export const Default = {
-	components: {
-		MkRange,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkRange,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkRange v-bind="$props" />',
+		};
 	},
-	template: '<MkRange />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkReactedUsersDialog.stories.ts b/packages/frontend/src/components/MkReactedUsersDialog.stories.ts
index 395f95134..bf470a833 100644
--- a/packages/frontend/src/components/MkReactedUsersDialog.stories.ts
+++ b/packages/frontend/src/components/MkReactedUsersDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkReactedUsersDialog,
 };
 export const Default = {
-	components: {
-		MkReactedUsersDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkReactedUsersDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkReactedUsersDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkReactedUsersDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkReactionEffect.stories.ts b/packages/frontend/src/components/MkReactionEffect.stories.ts
index 7b9ca42e2..c0d5b4a15 100644
--- a/packages/frontend/src/components/MkReactionEffect.stories.ts
+++ b/packages/frontend/src/components/MkReactionEffect.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkReactionEffect,
 };
 export const Default = {
-	components: {
-		MkReactionEffect,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkReactionEffect,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkReactionEffect v-bind="$props" />',
+		};
 	},
-	template: '<MkReactionEffect />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkReactionIcon.stories.ts b/packages/frontend/src/components/MkReactionIcon.stories.ts
index 271eb3ed6..37e329f34 100644
--- a/packages/frontend/src/components/MkReactionIcon.stories.ts
+++ b/packages/frontend/src/components/MkReactionIcon.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkReactionIcon,
 };
 export const Default = {
-	components: {
-		MkReactionIcon,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkReactionIcon,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkReactionIcon v-bind="$props" />',
+		};
 	},
-	template: '<MkReactionIcon />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkReactionTooltip.stories.ts b/packages/frontend/src/components/MkReactionTooltip.stories.ts
index e4ca21352..16e5fca1c 100644
--- a/packages/frontend/src/components/MkReactionTooltip.stories.ts
+++ b/packages/frontend/src/components/MkReactionTooltip.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkReactionTooltip,
 };
 export const Default = {
-	components: {
-		MkReactionTooltip,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkReactionTooltip,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkReactionTooltip v-bind="$props" />',
+		};
 	},
-	template: '<MkReactionTooltip />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkReactionsViewer.details.stories.ts b/packages/frontend/src/components/MkReactionsViewer.details.stories.ts
index 449e03554..d373edf3c 100644
--- a/packages/frontend/src/components/MkReactionsViewer.details.stories.ts
+++ b/packages/frontend/src/components/MkReactionsViewer.details.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkReactionsViewer_details,
 };
 export const Default = {
-	components: {
-		MkReactionsViewer_details,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkReactionsViewer_details,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkReactionsViewer_details v-bind="$props" />',
+		};
 	},
-	template: '<MkReactionsViewer_details />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.stories.ts b/packages/frontend/src/components/MkReactionsViewer.reaction.stories.ts
index cbe9a98c7..b56f13bb5 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.stories.ts
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkReactionsViewer_reaction,
 };
 export const Default = {
-	components: {
-		MkReactionsViewer_reaction,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkReactionsViewer_reaction,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkReactionsViewer_reaction v-bind="$props" />',
+		};
 	},
-	template: '<MkReactionsViewer_reaction />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkReactionsViewer.stories.ts b/packages/frontend/src/components/MkReactionsViewer.stories.ts
index 33d110882..18addf460 100644
--- a/packages/frontend/src/components/MkReactionsViewer.stories.ts
+++ b/packages/frontend/src/components/MkReactionsViewer.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkReactionsViewer,
 };
 export const Default = {
-	components: {
-		MkReactionsViewer,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkReactionsViewer,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkReactionsViewer v-bind="$props" />',
+		};
 	},
-	template: '<MkReactionsViewer />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkRemoteCaution.stories.ts b/packages/frontend/src/components/MkRemoteCaution.stories.ts
index 726a4f4db..4f4f8054a 100644
--- a/packages/frontend/src/components/MkRemoteCaution.stories.ts
+++ b/packages/frontend/src/components/MkRemoteCaution.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkRemoteCaution,
 };
 export const Default = {
-	components: {
-		MkRemoteCaution,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkRemoteCaution,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkRemoteCaution v-bind="$props" />',
+		};
 	},
-	template: '<MkRemoteCaution />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkRetentionHeatmap.stories.ts b/packages/frontend/src/components/MkRetentionHeatmap.stories.ts
index e348f2bd4..0eca578c3 100644
--- a/packages/frontend/src/components/MkRetentionHeatmap.stories.ts
+++ b/packages/frontend/src/components/MkRetentionHeatmap.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkRetentionHeatmap,
 };
 export const Default = {
-	components: {
-		MkRetentionHeatmap,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkRetentionHeatmap,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkRetentionHeatmap v-bind="$props" />',
+		};
 	},
-	template: '<MkRetentionHeatmap />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkRippleEffect.stories.ts b/packages/frontend/src/components/MkRippleEffect.stories.ts
index 8b405f3e6..4b054be43 100644
--- a/packages/frontend/src/components/MkRippleEffect.stories.ts
+++ b/packages/frontend/src/components/MkRippleEffect.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkRippleEffect,
 };
 export const Default = {
-	components: {
-		MkRippleEffect,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkRippleEffect,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkRippleEffect v-bind="$props" />',
+		};
 	},
-	template: '<MkRippleEffect />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkRolePreview.stories.ts b/packages/frontend/src/components/MkRolePreview.stories.ts
index 84fa9ccf3..f4306233c 100644
--- a/packages/frontend/src/components/MkRolePreview.stories.ts
+++ b/packages/frontend/src/components/MkRolePreview.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkRolePreview,
 };
 export const Default = {
-	components: {
-		MkRolePreview,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkRolePreview,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkRolePreview v-bind="$props" />',
+		};
 	},
-	template: '<MkRolePreview />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkSample.stories.ts b/packages/frontend/src/components/MkSample.stories.ts
index dba9e304d..14cd69bd6 100644
--- a/packages/frontend/src/components/MkSample.stories.ts
+++ b/packages/frontend/src/components/MkSample.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSample,
 };
 export const Default = {
-	components: {
-		MkSample,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSample,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSample v-bind="$props" />',
+		};
 	},
-	template: '<MkSample />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkSelect.stories.ts b/packages/frontend/src/components/MkSelect.stories.ts
index 18d2a3584..0e67a6723 100644
--- a/packages/frontend/src/components/MkSelect.stories.ts
+++ b/packages/frontend/src/components/MkSelect.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSelect,
 };
 export const Default = {
-	components: {
-		MkSelect,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSelect,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSelect v-bind="$props" />',
+		};
 	},
-	template: '<MkSelect />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkSignin.stories.ts b/packages/frontend/src/components/MkSignin.stories.ts
index a50d15d86..32a52771d 100644
--- a/packages/frontend/src/components/MkSignin.stories.ts
+++ b/packages/frontend/src/components/MkSignin.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSignin,
 };
 export const Default = {
-	components: {
-		MkSignin,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSignin,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSignin v-bind="$props" />',
+		};
 	},
-	template: '<MkSignin />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkSigninDialog.stories.ts b/packages/frontend/src/components/MkSigninDialog.stories.ts
index 1540c571a..b05096452 100644
--- a/packages/frontend/src/components/MkSigninDialog.stories.ts
+++ b/packages/frontend/src/components/MkSigninDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSigninDialog,
 };
 export const Default = {
-	components: {
-		MkSigninDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSigninDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSigninDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkSigninDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkSignup.stories.ts b/packages/frontend/src/components/MkSignup.stories.ts
index a1b8c723c..665a5881e 100644
--- a/packages/frontend/src/components/MkSignup.stories.ts
+++ b/packages/frontend/src/components/MkSignup.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSignup,
 };
 export const Default = {
-	components: {
-		MkSignup,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSignup,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSignup v-bind="$props" />',
+		};
 	},
-	template: '<MkSignup />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkSignupDialog.stories.ts b/packages/frontend/src/components/MkSignupDialog.stories.ts
index c0253a3cd..4e1316fed 100644
--- a/packages/frontend/src/components/MkSignupDialog.stories.ts
+++ b/packages/frontend/src/components/MkSignupDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSignupDialog,
 };
 export const Default = {
-	components: {
-		MkSignupDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSignupDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSignupDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkSignupDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkSparkle.stories.ts b/packages/frontend/src/components/MkSparkle.stories.ts
index f5d82ef61..22dc8af7d 100644
--- a/packages/frontend/src/components/MkSparkle.stories.ts
+++ b/packages/frontend/src/components/MkSparkle.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSparkle,
 };
 export const Default = {
-	components: {
-		MkSparkle,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSparkle,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSparkle v-bind="$props" />',
+		};
 	},
-	template: '<MkSparkle />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkSubNoteContent.stories.ts b/packages/frontend/src/components/MkSubNoteContent.stories.ts
index 557775d41..d83aef132 100644
--- a/packages/frontend/src/components/MkSubNoteContent.stories.ts
+++ b/packages/frontend/src/components/MkSubNoteContent.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSubNoteContent,
 };
 export const Default = {
-	components: {
-		MkSubNoteContent,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSubNoteContent,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSubNoteContent v-bind="$props" />',
+		};
 	},
-	template: '<MkSubNoteContent />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkSuperMenu.stories.ts b/packages/frontend/src/components/MkSuperMenu.stories.ts
index 76ed607f9..8be6b5aa7 100644
--- a/packages/frontend/src/components/MkSuperMenu.stories.ts
+++ b/packages/frontend/src/components/MkSuperMenu.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSuperMenu,
 };
 export const Default = {
-	components: {
-		MkSuperMenu,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSuperMenu,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSuperMenu v-bind="$props" />',
+		};
 	},
-	template: '<MkSuperMenu />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkSwitch.stories.ts b/packages/frontend/src/components/MkSwitch.stories.ts
index ff2d48416..fae92c172 100644
--- a/packages/frontend/src/components/MkSwitch.stories.ts
+++ b/packages/frontend/src/components/MkSwitch.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSwitch,
 };
 export const Default = {
-	components: {
-		MkSwitch,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSwitch,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSwitch v-bind="$props" />',
+		};
 	},
-	template: '<MkSwitch />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkTab.stories.ts b/packages/frontend/src/components/MkTab.stories.ts
index b2e94c1a6..035afa7f5 100644
--- a/packages/frontend/src/components/MkTab.stories.ts
+++ b/packages/frontend/src/components/MkTab.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkTab,
 };
 export const Default = {
-	components: {
-		MkTab,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkTab,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkTab v-bind="$props" />',
+		};
 	},
-	template: '<MkTab />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkTagCloud.stories.ts b/packages/frontend/src/components/MkTagCloud.stories.ts
index 5af917710..cea976fd4 100644
--- a/packages/frontend/src/components/MkTagCloud.stories.ts
+++ b/packages/frontend/src/components/MkTagCloud.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkTagCloud,
 };
 export const Default = {
-	components: {
-		MkTagCloud,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkTagCloud,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkTagCloud v-bind="$props" />',
+		};
 	},
-	template: '<MkTagCloud />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkTextarea.stories.ts b/packages/frontend/src/components/MkTextarea.stories.ts
index 207aec2c2..0369b0978 100644
--- a/packages/frontend/src/components/MkTextarea.stories.ts
+++ b/packages/frontend/src/components/MkTextarea.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkTextarea,
 };
 export const Default = {
-	components: {
-		MkTextarea,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkTextarea,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkTextarea v-bind="$props" />',
+		};
 	},
-	template: '<MkTextarea />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkTimeline.stories.ts b/packages/frontend/src/components/MkTimeline.stories.ts
index 3a1632417..f778c7ea0 100644
--- a/packages/frontend/src/components/MkTimeline.stories.ts
+++ b/packages/frontend/src/components/MkTimeline.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkTimeline,
 };
 export const Default = {
-	components: {
-		MkTimeline,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkTimeline,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkTimeline v-bind="$props" />',
+		};
 	},
-	template: '<MkTimeline />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkToast.stories.ts b/packages/frontend/src/components/MkToast.stories.ts
index 80b48109e..be078dec5 100644
--- a/packages/frontend/src/components/MkToast.stories.ts
+++ b/packages/frontend/src/components/MkToast.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkToast,
 };
 export const Default = {
-	components: {
-		MkToast,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkToast,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkToast v-bind="$props" />',
+		};
 	},
-	template: '<MkToast />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkTokenGenerateWindow.stories.ts b/packages/frontend/src/components/MkTokenGenerateWindow.stories.ts
index 74c6b7361..daec25cb8 100644
--- a/packages/frontend/src/components/MkTokenGenerateWindow.stories.ts
+++ b/packages/frontend/src/components/MkTokenGenerateWindow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkTokenGenerateWindow,
 };
 export const Default = {
-	components: {
-		MkTokenGenerateWindow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkTokenGenerateWindow,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkTokenGenerateWindow v-bind="$props" />',
+		};
 	},
-	template: '<MkTokenGenerateWindow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkTooltip.stories.ts b/packages/frontend/src/components/MkTooltip.stories.ts
index bcba8916d..474b49d26 100644
--- a/packages/frontend/src/components/MkTooltip.stories.ts
+++ b/packages/frontend/src/components/MkTooltip.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkTooltip,
 };
 export const Default = {
-	components: {
-		MkTooltip,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkTooltip,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkTooltip v-bind="$props" />',
+		};
 	},
-	template: '<MkTooltip />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkUpdated.stories.ts b/packages/frontend/src/components/MkUpdated.stories.ts
index 9949a6621..b4388eb21 100644
--- a/packages/frontend/src/components/MkUpdated.stories.ts
+++ b/packages/frontend/src/components/MkUpdated.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUpdated,
 };
 export const Default = {
-	components: {
-		MkUpdated,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUpdated,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUpdated v-bind="$props" />',
+		};
 	},
-	template: '<MkUpdated />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkUrlPreview.stories.ts b/packages/frontend/src/components/MkUrlPreview.stories.ts
index 7f1828343..a7f230ef4 100644
--- a/packages/frontend/src/components/MkUrlPreview.stories.ts
+++ b/packages/frontend/src/components/MkUrlPreview.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUrlPreview,
 };
 export const Default = {
-	components: {
-		MkUrlPreview,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUrlPreview,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUrlPreview v-bind="$props" />',
+		};
 	},
-	template: '<MkUrlPreview />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.stories.ts b/packages/frontend/src/components/MkUrlPreviewPopup.stories.ts
index 6756b81bd..c55cbc04b 100644
--- a/packages/frontend/src/components/MkUrlPreviewPopup.stories.ts
+++ b/packages/frontend/src/components/MkUrlPreviewPopup.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUrlPreviewPopup,
 };
 export const Default = {
-	components: {
-		MkUrlPreviewPopup,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUrlPreviewPopup,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUrlPreviewPopup v-bind="$props" />',
+		};
 	},
-	template: '<MkUrlPreviewPopup />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkUserCardMini.stories.ts b/packages/frontend/src/components/MkUserCardMini.stories.ts
index 467c8aa00..ae2001abb 100644
--- a/packages/frontend/src/components/MkUserCardMini.stories.ts
+++ b/packages/frontend/src/components/MkUserCardMini.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUserCardMini,
 };
 export const Default = {
-	components: {
-		MkUserCardMini,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUserCardMini,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUserCardMini v-bind="$props" />',
+		};
 	},
-	template: '<MkUserCardMini />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkUserInfo.stories.ts b/packages/frontend/src/components/MkUserInfo.stories.ts
index 832fa8dac..dddae8a57 100644
--- a/packages/frontend/src/components/MkUserInfo.stories.ts
+++ b/packages/frontend/src/components/MkUserInfo.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUserInfo,
 };
 export const Default = {
-	components: {
-		MkUserInfo,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUserInfo,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUserInfo v-bind="$props" />',
+		};
 	},
-	template: '<MkUserInfo />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkUserList.stories.ts b/packages/frontend/src/components/MkUserList.stories.ts
index 173f9a499..f5269bfc8 100644
--- a/packages/frontend/src/components/MkUserList.stories.ts
+++ b/packages/frontend/src/components/MkUserList.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUserList,
 };
 export const Default = {
-	components: {
-		MkUserList,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUserList,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUserList v-bind="$props" />',
+		};
 	},
-	template: '<MkUserList />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkUserOnlineIndicator.stories.ts b/packages/frontend/src/components/MkUserOnlineIndicator.stories.ts
index f18f9da5b..5132078e5 100644
--- a/packages/frontend/src/components/MkUserOnlineIndicator.stories.ts
+++ b/packages/frontend/src/components/MkUserOnlineIndicator.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUserOnlineIndicator,
 };
 export const Default = {
-	components: {
-		MkUserOnlineIndicator,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUserOnlineIndicator,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUserOnlineIndicator v-bind="$props" />',
+		};
 	},
-	template: '<MkUserOnlineIndicator />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkUserPopup.stories.ts b/packages/frontend/src/components/MkUserPopup.stories.ts
index 14e8ef467..f83c41e2d 100644
--- a/packages/frontend/src/components/MkUserPopup.stories.ts
+++ b/packages/frontend/src/components/MkUserPopup.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUserPopup,
 };
 export const Default = {
-	components: {
-		MkUserPopup,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUserPopup,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUserPopup v-bind="$props" />',
+		};
 	},
-	template: '<MkUserPopup />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkUserSelectDialog.stories.ts b/packages/frontend/src/components/MkUserSelectDialog.stories.ts
index 9930169d5..cb66bbacc 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.stories.ts
+++ b/packages/frontend/src/components/MkUserSelectDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUserSelectDialog,
 };
 export const Default = {
-	components: {
-		MkUserSelectDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUserSelectDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUserSelectDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkUserSelectDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkUsersTooltip.stories.ts b/packages/frontend/src/components/MkUsersTooltip.stories.ts
index 2cc45df46..7bb6c0b35 100644
--- a/packages/frontend/src/components/MkUsersTooltip.stories.ts
+++ b/packages/frontend/src/components/MkUsersTooltip.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUsersTooltip,
 };
 export const Default = {
-	components: {
-		MkUsersTooltip,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUsersTooltip,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUsersTooltip v-bind="$props" />',
+		};
 	},
-	template: '<MkUsersTooltip />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkVisibilityPicker.stories.ts b/packages/frontend/src/components/MkVisibilityPicker.stories.ts
index a1b6bcea6..55522a181 100644
--- a/packages/frontend/src/components/MkVisibilityPicker.stories.ts
+++ b/packages/frontend/src/components/MkVisibilityPicker.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkVisibilityPicker,
 };
 export const Default = {
-	components: {
-		MkVisibilityPicker,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkVisibilityPicker,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkVisibilityPicker v-bind="$props" />',
+		};
 	},
-	template: '<MkVisibilityPicker />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkWaitingDialog.stories.ts b/packages/frontend/src/components/MkWaitingDialog.stories.ts
index ee5f95685..813a6b399 100644
--- a/packages/frontend/src/components/MkWaitingDialog.stories.ts
+++ b/packages/frontend/src/components/MkWaitingDialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkWaitingDialog,
 };
 export const Default = {
-	components: {
-		MkWaitingDialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkWaitingDialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkWaitingDialog v-bind="$props" />',
+		};
 	},
-	template: '<MkWaitingDialog />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkWidgets.stories.ts b/packages/frontend/src/components/MkWidgets.stories.ts
index e5820efd4..250071350 100644
--- a/packages/frontend/src/components/MkWidgets.stories.ts
+++ b/packages/frontend/src/components/MkWidgets.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkWidgets,
 };
 export const Default = {
-	components: {
-		MkWidgets,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkWidgets,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkWidgets v-bind="$props" />',
+		};
 	},
-	template: '<MkWidgets />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkWindow.stories.ts b/packages/frontend/src/components/MkWindow.stories.ts
index d43e40330..f8e315b06 100644
--- a/packages/frontend/src/components/MkWindow.stories.ts
+++ b/packages/frontend/src/components/MkWindow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkWindow,
 };
 export const Default = {
-	components: {
-		MkWindow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkWindow,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkWindow v-bind="$props" />',
+		};
 	},
-	template: '<MkWindow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/MkYoutubePlayer.stories.ts b/packages/frontend/src/components/MkYoutubePlayer.stories.ts
index a9f45e3e9..671c1303d 100644
--- a/packages/frontend/src/components/MkYoutubePlayer.stories.ts
+++ b/packages/frontend/src/components/MkYoutubePlayer.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkYoutubePlayer,
 };
 export const Default = {
-	components: {
-		MkYoutubePlayer,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkYoutubePlayer,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkYoutubePlayer v-bind="$props" />',
+		};
 	},
-	template: '<MkYoutubePlayer />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/form/link.stories.ts b/packages/frontend/src/components/form/link.stories.ts
index 24f7edc37..f132ccdea 100644
--- a/packages/frontend/src/components/form/link.stories.ts
+++ b/packages/frontend/src/components/form/link.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: link,
 };
 export const Default = {
-	components: {
-		link,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				link,
+			},
+			props: Object.keys(argTypes),
+			template: '<link v-bind="$props" />',
+		};
 	},
-	template: '<link />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/form/section.stories.ts b/packages/frontend/src/components/form/section.stories.ts
index b8ab307e2..5b779f54a 100644
--- a/packages/frontend/src/components/form/section.stories.ts
+++ b/packages/frontend/src/components/form/section.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: section,
 };
 export const Default = {
-	components: {
-		section,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				section,
+			},
+			props: Object.keys(argTypes),
+			template: '<section v-bind="$props" />',
+		};
 	},
-	template: '<section />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/form/slot.stories.ts b/packages/frontend/src/components/form/slot.stories.ts
index dd1a16c40..55cdf7d76 100644
--- a/packages/frontend/src/components/form/slot.stories.ts
+++ b/packages/frontend/src/components/form/slot.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: slot,
 };
 export const Default = {
-	components: {
-		slot,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				slot,
+			},
+			props: Object.keys(argTypes),
+			template: '<slot v-bind="$props" />',
+		};
 	},
-	template: '<slot />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/form/split.stories.ts b/packages/frontend/src/components/form/split.stories.ts
index 39cbc0ba0..73cc4f8e4 100644
--- a/packages/frontend/src/components/form/split.stories.ts
+++ b/packages/frontend/src/components/form/split.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: split,
 };
 export const Default = {
-	components: {
-		split,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				split,
+			},
+			props: Object.keys(argTypes),
+			template: '<split v-bind="$props" />',
+		};
 	},
-	template: '<split />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/form/suspense.stories.ts b/packages/frontend/src/components/form/suspense.stories.ts
index fad46e9c1..10541fdb1 100644
--- a/packages/frontend/src/components/form/suspense.stories.ts
+++ b/packages/frontend/src/components/form/suspense.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: suspense,
 };
 export const Default = {
-	components: {
-		suspense,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				suspense,
+			},
+			props: Object.keys(argTypes),
+			template: '<suspense v-bind="$props" />',
+		};
 	},
-	template: '<suspense />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkA.stories.ts b/packages/frontend/src/components/global/MkA.stories.ts
index 5eb4a18c4..10dee397f 100644
--- a/packages/frontend/src/components/global/MkA.stories.ts
+++ b/packages/frontend/src/components/global/MkA.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkA,
 };
 export const Default = {
-	components: {
-		MkA,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkA,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkA v-bind="$props" />',
+		};
 	},
-	template: '<MkA />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkAcct.stories.ts b/packages/frontend/src/components/global/MkAcct.stories.ts
index 6b8b55ec3..a33615612 100644
--- a/packages/frontend/src/components/global/MkAcct.stories.ts
+++ b/packages/frontend/src/components/global/MkAcct.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkAcct,
 };
 export const Default = {
-	components: {
-		MkAcct,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAcct,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAcct v-bind="$props" />',
+		};
 	},
-	template: '<MkAcct />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkAd.stories.ts b/packages/frontend/src/components/global/MkAd.stories.ts
index bb2d74b33..8d4f3713e 100644
--- a/packages/frontend/src/components/global/MkAd.stories.ts
+++ b/packages/frontend/src/components/global/MkAd.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkAd,
 };
 export const Default = {
-	components: {
-		MkAd,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAd,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAd v-bind="$props" />',
+		};
 	},
-	template: '<MkAd />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkAvatar.stories.ts b/packages/frontend/src/components/global/MkAvatar.stories.ts
index bc1acd33f..8556ef08a 100644
--- a/packages/frontend/src/components/global/MkAvatar.stories.ts
+++ b/packages/frontend/src/components/global/MkAvatar.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkAvatar,
 };
 export const Default = {
-	components: {
-		MkAvatar,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkAvatar,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkAvatar v-bind="$props" />',
+		};
 	},
-	template: '<MkAvatar />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkCustomEmoji.stories.ts b/packages/frontend/src/components/global/MkCustomEmoji.stories.ts
index 9abc14af1..c1349c580 100644
--- a/packages/frontend/src/components/global/MkCustomEmoji.stories.ts
+++ b/packages/frontend/src/components/global/MkCustomEmoji.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkCustomEmoji,
 };
 export const Default = {
-	components: {
-		MkCustomEmoji,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkCustomEmoji,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkCustomEmoji v-bind="$props" />',
+		};
 	},
-	template: '<MkCustomEmoji />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkEllipsis.stories.ts b/packages/frontend/src/components/global/MkEllipsis.stories.ts
index 09092f36d..06a56a62c 100644
--- a/packages/frontend/src/components/global/MkEllipsis.stories.ts
+++ b/packages/frontend/src/components/global/MkEllipsis.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkEllipsis,
 };
 export const Default = {
-	components: {
-		MkEllipsis,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkEllipsis,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkEllipsis v-bind="$props" />',
+		};
 	},
-	template: '<MkEllipsis />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkEmoji.stories.ts b/packages/frontend/src/components/global/MkEmoji.stories.ts
index 1679ae0b2..2dd4e2377 100644
--- a/packages/frontend/src/components/global/MkEmoji.stories.ts
+++ b/packages/frontend/src/components/global/MkEmoji.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkEmoji,
 };
 export const Default = {
-	components: {
-		MkEmoji,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkEmoji,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkEmoji v-bind="$props" />',
+		};
 	},
-	template: '<MkEmoji />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkError.stories.ts b/packages/frontend/src/components/global/MkError.stories.ts
index 0916b1860..2a8abb943 100644
--- a/packages/frontend/src/components/global/MkError.stories.ts
+++ b/packages/frontend/src/components/global/MkError.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkError,
 };
 export const Default = {
-	components: {
-		MkError,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkError,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkError v-bind="$props" />',
+		};
 	},
-	template: '<MkError />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkLoading.stories.ts b/packages/frontend/src/components/global/MkLoading.stories.ts
index 752085f5f..78fbfa9f5 100644
--- a/packages/frontend/src/components/global/MkLoading.stories.ts
+++ b/packages/frontend/src/components/global/MkLoading.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkLoading,
 };
 export const Default = {
-	components: {
-		MkLoading,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkLoading,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkLoading v-bind="$props" />',
+		};
 	},
-	template: '<MkLoading />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts
index 63e5342cc..8b7827bfc 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkMisskeyFlavoredMarkdown,
 };
 export const Default = {
-	components: {
-		MkMisskeyFlavoredMarkdown,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkMisskeyFlavoredMarkdown,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkMisskeyFlavoredMarkdown v-bind="$props" />',
+		};
 	},
-	template: '<MkMisskeyFlavoredMarkdown />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkPageHeader.stories.ts b/packages/frontend/src/components/global/MkPageHeader.stories.ts
index a2c6d8705..392116882 100644
--- a/packages/frontend/src/components/global/MkPageHeader.stories.ts
+++ b/packages/frontend/src/components/global/MkPageHeader.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPageHeader,
 };
 export const Default = {
-	components: {
-		MkPageHeader,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPageHeader,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPageHeader v-bind="$props" />',
+		};
 	},
-	template: '<MkPageHeader />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts b/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts
index b283a9439..aaa12228f 100644
--- a/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkPageHeader_tabs,
 };
 export const Default = {
-	components: {
-		MkPageHeader_tabs,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkPageHeader_tabs,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkPageHeader_tabs v-bind="$props" />',
+		};
 	},
-	template: '<MkPageHeader_tabs />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkSpacer.stories.ts b/packages/frontend/src/components/global/MkSpacer.stories.ts
index 2f15b0257..5040c0b17 100644
--- a/packages/frontend/src/components/global/MkSpacer.stories.ts
+++ b/packages/frontend/src/components/global/MkSpacer.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkSpacer,
 };
 export const Default = {
-	components: {
-		MkSpacer,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkSpacer,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkSpacer v-bind="$props" />',
+		};
 	},
-	template: '<MkSpacer />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkStickyContainer.stories.ts b/packages/frontend/src/components/global/MkStickyContainer.stories.ts
index 7e495a582..0741f3f9b 100644
--- a/packages/frontend/src/components/global/MkStickyContainer.stories.ts
+++ b/packages/frontend/src/components/global/MkStickyContainer.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkStickyContainer,
 };
 export const Default = {
-	components: {
-		MkStickyContainer,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkStickyContainer,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkStickyContainer v-bind="$props" />',
+		};
 	},
-	template: '<MkStickyContainer />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkTime.stories.ts b/packages/frontend/src/components/global/MkTime.stories.ts
index efb6dee7a..9df2fef69 100644
--- a/packages/frontend/src/components/global/MkTime.stories.ts
+++ b/packages/frontend/src/components/global/MkTime.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkTime,
 };
 export const Default = {
-	components: {
-		MkTime,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkTime,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkTime v-bind="$props" />',
+		};
 	},
-	template: '<MkTime />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkUrl.stories.ts b/packages/frontend/src/components/global/MkUrl.stories.ts
index c72bf542e..1f0e01f00 100644
--- a/packages/frontend/src/components/global/MkUrl.stories.ts
+++ b/packages/frontend/src/components/global/MkUrl.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUrl,
 };
 export const Default = {
-	components: {
-		MkUrl,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUrl,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUrl v-bind="$props" />',
+		};
 	},
-	template: '<MkUrl />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/MkUserName.stories.ts b/packages/frontend/src/components/global/MkUserName.stories.ts
index 211d8dac6..b5df40dfe 100644
--- a/packages/frontend/src/components/global/MkUserName.stories.ts
+++ b/packages/frontend/src/components/global/MkUserName.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: MkUserName,
 };
 export const Default = {
-	components: {
-		MkUserName,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				MkUserName,
+			},
+			props: Object.keys(argTypes),
+			template: '<MkUserName v-bind="$props" />',
+		};
 	},
-	template: '<MkUserName />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/global/RouterView.stories.ts b/packages/frontend/src/components/global/RouterView.stories.ts
index acc2c32d3..a0e76d9da 100644
--- a/packages/frontend/src/components/global/RouterView.stories.ts
+++ b/packages/frontend/src/components/global/RouterView.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: RouterView,
 };
 export const Default = {
-	components: {
-		RouterView,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				RouterView,
+			},
+			props: Object.keys(argTypes),
+			template: '<RouterView v-bind="$props" />',
+		};
 	},
-	template: '<RouterView />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.block.stories.ts b/packages/frontend/src/components/page/page.block.stories.ts
index a08218da6..ba53f5250 100644
--- a/packages/frontend/src/components/page/page.block.stories.ts
+++ b/packages/frontend/src/components/page/page.block.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_block,
 };
 export const Default = {
-	components: {
-		page_block,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_block,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_block v-bind="$props" />',
+		};
 	},
-	template: '<page_block />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.button.stories.ts b/packages/frontend/src/components/page/page.button.stories.ts
index 9ee10b737..4fd0b3a24 100644
--- a/packages/frontend/src/components/page/page.button.stories.ts
+++ b/packages/frontend/src/components/page/page.button.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_button,
 };
 export const Default = {
-	components: {
-		page_button,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_button,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_button v-bind="$props" />',
+		};
 	},
-	template: '<page_button />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.canvas.stories.ts b/packages/frontend/src/components/page/page.canvas.stories.ts
index 7df6fd364..61880b392 100644
--- a/packages/frontend/src/components/page/page.canvas.stories.ts
+++ b/packages/frontend/src/components/page/page.canvas.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_canvas,
 };
 export const Default = {
-	components: {
-		page_canvas,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_canvas,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_canvas v-bind="$props" />',
+		};
 	},
-	template: '<page_canvas />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.counter.stories.ts b/packages/frontend/src/components/page/page.counter.stories.ts
index 490c4d24b..c94cbbb68 100644
--- a/packages/frontend/src/components/page/page.counter.stories.ts
+++ b/packages/frontend/src/components/page/page.counter.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_counter,
 };
 export const Default = {
-	components: {
-		page_counter,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_counter,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_counter v-bind="$props" />',
+		};
 	},
-	template: '<page_counter />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.if.stories.ts b/packages/frontend/src/components/page/page.if.stories.ts
index cd840c959..ddc88377d 100644
--- a/packages/frontend/src/components/page/page.if.stories.ts
+++ b/packages/frontend/src/components/page/page.if.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_if,
 };
 export const Default = {
-	components: {
-		page_if,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_if,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_if v-bind="$props" />',
+		};
 	},
-	template: '<page_if />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.image.stories.ts b/packages/frontend/src/components/page/page.image.stories.ts
index b7452a618..a21d6010d 100644
--- a/packages/frontend/src/components/page/page.image.stories.ts
+++ b/packages/frontend/src/components/page/page.image.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_image,
 };
 export const Default = {
-	components: {
-		page_image,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_image,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_image v-bind="$props" />',
+		};
 	},
-	template: '<page_image />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.note.stories.ts b/packages/frontend/src/components/page/page.note.stories.ts
index 5c5af5d58..0efb0220e 100644
--- a/packages/frontend/src/components/page/page.note.stories.ts
+++ b/packages/frontend/src/components/page/page.note.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_note,
 };
 export const Default = {
-	components: {
-		page_note,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_note,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_note v-bind="$props" />',
+		};
 	},
-	template: '<page_note />',
 	parameters: {
 		layout: 'centered',
 	},
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 9a7ad3431..5fefcb9ee 100644
--- a/packages/frontend/src/components/page/page.number-input.stories.ts
+++ b/packages/frontend/src/components/page/page.number-input.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_number_input,
 };
 export const Default = {
-	components: {
-		page_number_input,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_number_input,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_number_input v-bind="$props" />',
+		};
 	},
-	template: '<page_number_input />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.post.stories.ts b/packages/frontend/src/components/page/page.post.stories.ts
index b98d930d1..d59e5a470 100644
--- a/packages/frontend/src/components/page/page.post.stories.ts
+++ b/packages/frontend/src/components/page/page.post.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_post,
 };
 export const Default = {
-	components: {
-		page_post,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_post,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_post v-bind="$props" />',
+		};
 	},
-	template: '<page_post />',
 	parameters: {
 		layout: 'centered',
 	},
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 9b519cddd..9974b7636 100644
--- a/packages/frontend/src/components/page/page.radio-button.stories.ts
+++ b/packages/frontend/src/components/page/page.radio-button.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_radio_button,
 };
 export const Default = {
-	components: {
-		page_radio_button,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_radio_button,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_radio_button v-bind="$props" />',
+		};
 	},
-	template: '<page_radio_button />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.section.stories.ts b/packages/frontend/src/components/page/page.section.stories.ts
index 0e28246cc..754541927 100644
--- a/packages/frontend/src/components/page/page.section.stories.ts
+++ b/packages/frontend/src/components/page/page.section.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_section,
 };
 export const Default = {
-	components: {
-		page_section,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_section,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_section v-bind="$props" />',
+		};
 	},
-	template: '<page_section />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.stories.ts b/packages/frontend/src/components/page/page.stories.ts
index cff97b18d..43271b6ca 100644
--- a/packages/frontend/src/components/page/page.stories.ts
+++ b/packages/frontend/src/components/page/page.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page,
 };
 export const Default = {
-	components: {
-		page,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page,
+			},
+			props: Object.keys(argTypes),
+			template: '<page v-bind="$props" />',
+		};
 	},
-	template: '<page />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.switch.stories.ts b/packages/frontend/src/components/page/page.switch.stories.ts
index 84bfcf0d7..7726586e7 100644
--- a/packages/frontend/src/components/page/page.switch.stories.ts
+++ b/packages/frontend/src/components/page/page.switch.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_switch,
 };
 export const Default = {
-	components: {
-		page_switch,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_switch,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_switch v-bind="$props" />',
+		};
 	},
-	template: '<page_switch />',
 	parameters: {
 		layout: 'centered',
 	},
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 07ce018e2..6f58f19bd 100644
--- a/packages/frontend/src/components/page/page.text-input.stories.ts
+++ b/packages/frontend/src/components/page/page.text-input.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_text_input,
 };
 export const Default = {
-	components: {
-		page_text_input,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_text_input,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_text_input v-bind="$props" />',
+		};
 	},
-	template: '<page_text_input />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.text.stories.ts b/packages/frontend/src/components/page/page.text.stories.ts
index b1f3aacfb..924224577 100644
--- a/packages/frontend/src/components/page/page.text.stories.ts
+++ b/packages/frontend/src/components/page/page.text.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_text,
 };
 export const Default = {
-	components: {
-		page_text,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_text,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_text v-bind="$props" />',
+		};
 	},
-	template: '<page_text />',
 	parameters: {
 		layout: 'centered',
 	},
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 608327d18..d14548a22 100644
--- a/packages/frontend/src/components/page/page.textarea-input.stories.ts
+++ b/packages/frontend/src/components/page/page.textarea-input.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_textarea_input,
 };
 export const Default = {
-	components: {
-		page_textarea_input,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_textarea_input,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_textarea_input v-bind="$props" />',
+		};
 	},
-	template: '<page_textarea_input />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/components/page/page.textarea.stories.ts b/packages/frontend/src/components/page/page.textarea.stories.ts
index c793e78d2..13c4480ac 100644
--- a/packages/frontend/src/components/page/page.textarea.stories.ts
+++ b/packages/frontend/src/components/page/page.textarea.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_textarea,
 };
 export const Default = {
-	components: {
-		page_textarea,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_textarea,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_textarea v-bind="$props" />',
+		};
 	},
-	template: '<page_textarea />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/pages/_empty_.stories.ts b/packages/frontend/src/pages/_empty_.stories.ts
index 9975c4e04..3ca1df586 100644
--- a/packages/frontend/src/pages/_empty_.stories.ts
+++ b/packages/frontend/src/pages/_empty_.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: _empty_,
 };
 export const Default = {
-	components: {
-		_empty_,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				_empty_,
+			},
+			props: Object.keys(argTypes),
+			template: '<_empty_ v-bind="$props" />',
+		};
 	},
-	template: '<_empty_ />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/_error_.stories.ts b/packages/frontend/src/pages/_error_.stories.ts
index f3ac520dc..f198b63fc 100644
--- a/packages/frontend/src/pages/_error_.stories.ts
+++ b/packages/frontend/src/pages/_error_.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: _error_,
 };
 export const Default = {
-	components: {
-		_error_,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				_error_,
+			},
+			props: Object.keys(argTypes),
+			template: '<_error_ v-bind="$props" />',
+		};
 	},
-	template: '<_error_ />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/_loading_.stories.ts b/packages/frontend/src/pages/_loading_.stories.ts
index 9063c71b4..f511634eb 100644
--- a/packages/frontend/src/pages/_loading_.stories.ts
+++ b/packages/frontend/src/pages/_loading_.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: _loading_,
 };
 export const Default = {
-	components: {
-		_loading_,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				_loading_,
+			},
+			props: Object.keys(argTypes),
+			template: '<_loading_ v-bind="$props" />',
+		};
 	},
-	template: '<_loading_ />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/about-misskey.stories.ts b/packages/frontend/src/pages/about-misskey.stories.ts
index 1898d460e..3b8f3ad11 100644
--- a/packages/frontend/src/pages/about-misskey.stories.ts
+++ b/packages/frontend/src/pages/about-misskey.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: about_misskey,
 };
 export const Default = {
-	components: {
-		about_misskey,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				about_misskey,
+			},
+			props: Object.keys(argTypes),
+			template: '<about_misskey v-bind="$props" />',
+		};
 	},
-	template: '<about_misskey />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/about.emojis.stories.ts b/packages/frontend/src/pages/about.emojis.stories.ts
index dc2f36bea..e178271a8 100644
--- a/packages/frontend/src/pages/about.emojis.stories.ts
+++ b/packages/frontend/src/pages/about.emojis.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: about_emojis,
 };
 export const Default = {
-	components: {
-		about_emojis,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				about_emojis,
+			},
+			props: Object.keys(argTypes),
+			template: '<about_emojis v-bind="$props" />',
+		};
 	},
-	template: '<about_emojis />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/about.federation.stories.ts b/packages/frontend/src/pages/about.federation.stories.ts
index 63f997779..a2c763aef 100644
--- a/packages/frontend/src/pages/about.federation.stories.ts
+++ b/packages/frontend/src/pages/about.federation.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: about_federation,
 };
 export const Default = {
-	components: {
-		about_federation,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				about_federation,
+			},
+			props: Object.keys(argTypes),
+			template: '<about_federation v-bind="$props" />',
+		};
 	},
-	template: '<about_federation />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/about.stories.ts b/packages/frontend/src/pages/about.stories.ts
index 397a52061..a36c99fc3 100644
--- a/packages/frontend/src/pages/about.stories.ts
+++ b/packages/frontend/src/pages/about.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: about,
 };
 export const Default = {
-	components: {
-		about,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				about,
+			},
+			props: Object.keys(argTypes),
+			template: '<about v-bind="$props" />',
+		};
 	},
-	template: '<about />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/achievements.stories.ts b/packages/frontend/src/pages/achievements.stories.ts
index b07ce5846..b7959f897 100644
--- a/packages/frontend/src/pages/achievements.stories.ts
+++ b/packages/frontend/src/pages/achievements.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: achievements,
 };
 export const Default = {
-	components: {
-		achievements,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				achievements,
+			},
+			props: Object.keys(argTypes),
+			template: '<achievements v-bind="$props" />',
+		};
 	},
-	template: '<achievements />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin-file.stories.ts b/packages/frontend/src/pages/admin-file.stories.ts
index adbcee094..62ac20caf 100644
--- a/packages/frontend/src/pages/admin-file.stories.ts
+++ b/packages/frontend/src/pages/admin-file.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: admin_file,
 };
 export const Default = {
-	components: {
-		admin_file,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				admin_file,
+			},
+			props: Object.keys(argTypes),
+			template: '<admin_file v-bind="$props" />',
+		};
 	},
-	template: '<admin_file />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/RolesEditorFormula.stories.ts b/packages/frontend/src/pages/admin/RolesEditorFormula.stories.ts
index e85173e57..5af3ccc65 100644
--- a/packages/frontend/src/pages/admin/RolesEditorFormula.stories.ts
+++ b/packages/frontend/src/pages/admin/RolesEditorFormula.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: RolesEditorFormula,
 };
 export const Default = {
-	components: {
-		RolesEditorFormula,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				RolesEditorFormula,
+			},
+			props: Object.keys(argTypes),
+			template: '<RolesEditorFormula v-bind="$props" />',
+		};
 	},
-	template: '<RolesEditorFormula />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/_header_.stories.ts b/packages/frontend/src/pages/admin/_header_.stories.ts
index b803b74a1..3ae43e3fa 100644
--- a/packages/frontend/src/pages/admin/_header_.stories.ts
+++ b/packages/frontend/src/pages/admin/_header_.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: _header_,
 };
 export const Default = {
-	components: {
-		_header_,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				_header_,
+			},
+			props: Object.keys(argTypes),
+			template: '<_header_ v-bind="$props" />',
+		};
 	},
-	template: '<_header_ />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/abuses.stories.ts b/packages/frontend/src/pages/admin/abuses.stories.ts
index 677292f15..ea3bbb477 100644
--- a/packages/frontend/src/pages/admin/abuses.stories.ts
+++ b/packages/frontend/src/pages/admin/abuses.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: abuses,
 };
 export const Default = {
-	components: {
-		abuses,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				abuses,
+			},
+			props: Object.keys(argTypes),
+			template: '<abuses v-bind="$props" />',
+		};
 	},
-	template: '<abuses />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/ads.stories.ts b/packages/frontend/src/pages/admin/ads.stories.ts
index 973bbd4cc..638c56656 100644
--- a/packages/frontend/src/pages/admin/ads.stories.ts
+++ b/packages/frontend/src/pages/admin/ads.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: ads,
 };
 export const Default = {
-	components: {
-		ads,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				ads,
+			},
+			props: Object.keys(argTypes),
+			template: '<ads v-bind="$props" />',
+		};
 	},
-	template: '<ads />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/announcements.stories.ts b/packages/frontend/src/pages/admin/announcements.stories.ts
index add9a62c5..ae064741f 100644
--- a/packages/frontend/src/pages/admin/announcements.stories.ts
+++ b/packages/frontend/src/pages/admin/announcements.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: announcements,
 };
 export const Default = {
-	components: {
-		announcements,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				announcements,
+			},
+			props: Object.keys(argTypes),
+			template: '<announcements v-bind="$props" />',
+		};
 	},
-	template: '<announcements />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/bot-protection.stories.ts b/packages/frontend/src/pages/admin/bot-protection.stories.ts
index cc337ac51..7c8506b40 100644
--- a/packages/frontend/src/pages/admin/bot-protection.stories.ts
+++ b/packages/frontend/src/pages/admin/bot-protection.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: bot_protection,
 };
 export const Default = {
-	components: {
-		bot_protection,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				bot_protection,
+			},
+			props: Object.keys(argTypes),
+			template: '<bot_protection v-bind="$props" />',
+		};
 	},
-	template: '<bot_protection />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/database.stories.ts b/packages/frontend/src/pages/admin/database.stories.ts
index 1764c4a90..3a2ae56a4 100644
--- a/packages/frontend/src/pages/admin/database.stories.ts
+++ b/packages/frontend/src/pages/admin/database.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: database,
 };
 export const Default = {
-	components: {
-		database,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				database,
+			},
+			props: Object.keys(argTypes),
+			template: '<database v-bind="$props" />',
+		};
 	},
-	template: '<database />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/email-settings.stories.ts b/packages/frontend/src/pages/admin/email-settings.stories.ts
index 162b4b081..9b804ce4a 100644
--- a/packages/frontend/src/pages/admin/email-settings.stories.ts
+++ b/packages/frontend/src/pages/admin/email-settings.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: email_settings,
 };
 export const Default = {
-	components: {
-		email_settings,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				email_settings,
+			},
+			props: Object.keys(argTypes),
+			template: '<email_settings v-bind="$props" />',
+		};
 	},
-	template: '<email_settings />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/federation.stories.ts b/packages/frontend/src/pages/admin/federation.stories.ts
index a8b3f1b3f..63bf5023d 100644
--- a/packages/frontend/src/pages/admin/federation.stories.ts
+++ b/packages/frontend/src/pages/admin/federation.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: federation,
 };
 export const Default = {
-	components: {
-		federation,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				federation,
+			},
+			props: Object.keys(argTypes),
+			template: '<federation v-bind="$props" />',
+		};
 	},
-	template: '<federation />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/files.stories.ts b/packages/frontend/src/pages/admin/files.stories.ts
index cb0746cf1..6d5b00f3f 100644
--- a/packages/frontend/src/pages/admin/files.stories.ts
+++ b/packages/frontend/src/pages/admin/files.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: files,
 };
 export const Default = {
-	components: {
-		files,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				files,
+			},
+			props: Object.keys(argTypes),
+			template: '<files v-bind="$props" />',
+		};
 	},
-	template: '<files />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/index.stories.ts b/packages/frontend/src/pages/admin/index.stories.ts
index f2ac0b287..54b89efc0 100644
--- a/packages/frontend/src/pages/admin/index.stories.ts
+++ b/packages/frontend/src/pages/admin/index.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index,
 };
 export const Default = {
-	components: {
-		index,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index,
+			},
+			props: Object.keys(argTypes),
+			template: '<index v-bind="$props" />',
+		};
 	},
-	template: '<index />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/instance-block.stories.ts b/packages/frontend/src/pages/admin/instance-block.stories.ts
index 0623c16dd..c76509923 100644
--- a/packages/frontend/src/pages/admin/instance-block.stories.ts
+++ b/packages/frontend/src/pages/admin/instance-block.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: instance_block,
 };
 export const Default = {
-	components: {
-		instance_block,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				instance_block,
+			},
+			props: Object.keys(argTypes),
+			template: '<instance_block v-bind="$props" />',
+		};
 	},
-	template: '<instance_block />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/moderation.stories.ts b/packages/frontend/src/pages/admin/moderation.stories.ts
index 20d6d3bea..c55aedadc 100644
--- a/packages/frontend/src/pages/admin/moderation.stories.ts
+++ b/packages/frontend/src/pages/admin/moderation.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: moderation,
 };
 export const Default = {
-	components: {
-		moderation,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				moderation,
+			},
+			props: Object.keys(argTypes),
+			template: '<moderation v-bind="$props" />',
+		};
 	},
-	template: '<moderation />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/object-storage.stories.ts b/packages/frontend/src/pages/admin/object-storage.stories.ts
index 9187d2ad6..faa1f1948 100644
--- a/packages/frontend/src/pages/admin/object-storage.stories.ts
+++ b/packages/frontend/src/pages/admin/object-storage.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: object_storage,
 };
 export const Default = {
-	components: {
-		object_storage,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				object_storage,
+			},
+			props: Object.keys(argTypes),
+			template: '<object_storage v-bind="$props" />',
+		};
 	},
-	template: '<object_storage />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/other-settings.stories.ts b/packages/frontend/src/pages/admin/other-settings.stories.ts
index f4385c4c3..fc37c6072 100644
--- a/packages/frontend/src/pages/admin/other-settings.stories.ts
+++ b/packages/frontend/src/pages/admin/other-settings.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: other_settings,
 };
 export const Default = {
-	components: {
-		other_settings,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				other_settings,
+			},
+			props: Object.keys(argTypes),
+			template: '<other_settings v-bind="$props" />',
+		};
 	},
-	template: '<other_settings />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.active-users.stories.ts b/packages/frontend/src/pages/admin/overview.active-users.stories.ts
index 877d4e0dd..e7efca1a5 100644
--- a/packages/frontend/src/pages/admin/overview.active-users.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.active-users.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_active_users,
 };
 export const Default = {
-	components: {
-		overview_active_users,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_active_users,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_active_users v-bind="$props" />',
+		};
 	},
-	template: '<overview_active_users />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.ap-requests.stories.ts b/packages/frontend/src/pages/admin/overview.ap-requests.stories.ts
index d952ce3df..347065c39 100644
--- a/packages/frontend/src/pages/admin/overview.ap-requests.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.ap-requests.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_ap_requests,
 };
 export const Default = {
-	components: {
-		overview_ap_requests,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_ap_requests,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_ap_requests v-bind="$props" />',
+		};
 	},
-	template: '<overview_ap_requests />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.federation.stories.ts b/packages/frontend/src/pages/admin/overview.federation.stories.ts
index c0bcca058..61956f024 100644
--- a/packages/frontend/src/pages/admin/overview.federation.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.federation.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_federation,
 };
 export const Default = {
-	components: {
-		overview_federation,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_federation,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_federation v-bind="$props" />',
+		};
 	},
-	template: '<overview_federation />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.heatmap.stories.ts b/packages/frontend/src/pages/admin/overview.heatmap.stories.ts
index 28fca24b4..872c883fe 100644
--- a/packages/frontend/src/pages/admin/overview.heatmap.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.heatmap.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_heatmap,
 };
 export const Default = {
-	components: {
-		overview_heatmap,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_heatmap,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_heatmap v-bind="$props" />',
+		};
 	},
-	template: '<overview_heatmap />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.instances.stories.ts b/packages/frontend/src/pages/admin/overview.instances.stories.ts
index 71cce61bc..c6ca9f085 100644
--- a/packages/frontend/src/pages/admin/overview.instances.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.instances.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_instances,
 };
 export const Default = {
-	components: {
-		overview_instances,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_instances,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_instances v-bind="$props" />',
+		};
 	},
-	template: '<overview_instances />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.moderators.stories.ts b/packages/frontend/src/pages/admin/overview.moderators.stories.ts
index d617cc9c3..a05c482ea 100644
--- a/packages/frontend/src/pages/admin/overview.moderators.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.moderators.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_moderators,
 };
 export const Default = {
-	components: {
-		overview_moderators,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_moderators,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_moderators v-bind="$props" />',
+		};
 	},
-	template: '<overview_moderators />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.pie.stories.ts b/packages/frontend/src/pages/admin/overview.pie.stories.ts
index f73defee9..3c9844e20 100644
--- a/packages/frontend/src/pages/admin/overview.pie.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.pie.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_pie,
 };
 export const Default = {
-	components: {
-		overview_pie,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_pie,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_pie v-bind="$props" />',
+		};
 	},
-	template: '<overview_pie />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.queue.chart.stories.ts b/packages/frontend/src/pages/admin/overview.queue.chart.stories.ts
index cfcd04f3c..848300fe0 100644
--- a/packages/frontend/src/pages/admin/overview.queue.chart.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.queue.chart.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_queue_chart,
 };
 export const Default = {
-	components: {
-		overview_queue_chart,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_queue_chart,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_queue_chart v-bind="$props" />',
+		};
 	},
-	template: '<overview_queue_chart />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.queue.stories.ts b/packages/frontend/src/pages/admin/overview.queue.stories.ts
index f30978121..e3f4bfca5 100644
--- a/packages/frontend/src/pages/admin/overview.queue.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.queue.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_queue,
 };
 export const Default = {
-	components: {
-		overview_queue,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_queue,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_queue v-bind="$props" />',
+		};
 	},
-	template: '<overview_queue />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.retention.stories.ts b/packages/frontend/src/pages/admin/overview.retention.stories.ts
index b0bc4c72d..3e1c5a89b 100644
--- a/packages/frontend/src/pages/admin/overview.retention.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.retention.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_retention,
 };
 export const Default = {
-	components: {
-		overview_retention,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_retention,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_retention v-bind="$props" />',
+		};
 	},
-	template: '<overview_retention />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.stats.stories.ts b/packages/frontend/src/pages/admin/overview.stats.stories.ts
index 5bcefe2fc..0c368aadd 100644
--- a/packages/frontend/src/pages/admin/overview.stats.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.stats.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_stats,
 };
 export const Default = {
-	components: {
-		overview_stats,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_stats,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_stats v-bind="$props" />',
+		};
 	},
-	template: '<overview_stats />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.stories.ts b/packages/frontend/src/pages/admin/overview.stories.ts
index 676acc1ea..de388bd48 100644
--- a/packages/frontend/src/pages/admin/overview.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview,
 };
 export const Default = {
-	components: {
-		overview,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview v-bind="$props" />',
+		};
 	},
-	template: '<overview />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/overview.users.stories.ts b/packages/frontend/src/pages/admin/overview.users.stories.ts
index 4c61a00bf..3846e6701 100644
--- a/packages/frontend/src/pages/admin/overview.users.stories.ts
+++ b/packages/frontend/src/pages/admin/overview.users.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: overview_users,
 };
 export const Default = {
-	components: {
-		overview_users,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				overview_users,
+			},
+			props: Object.keys(argTypes),
+			template: '<overview_users v-bind="$props" />',
+		};
 	},
-	template: '<overview_users />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/proxy-account.stories.ts b/packages/frontend/src/pages/admin/proxy-account.stories.ts
index 6954a0f55..04fa3e1b6 100644
--- a/packages/frontend/src/pages/admin/proxy-account.stories.ts
+++ b/packages/frontend/src/pages/admin/proxy-account.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: proxy_account,
 };
 export const Default = {
-	components: {
-		proxy_account,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				proxy_account,
+			},
+			props: Object.keys(argTypes),
+			template: '<proxy_account v-bind="$props" />',
+		};
 	},
-	template: '<proxy_account />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/queue.chart.chart.stories.ts b/packages/frontend/src/pages/admin/queue.chart.chart.stories.ts
index 13b63e7db..95a1f0a5e 100644
--- a/packages/frontend/src/pages/admin/queue.chart.chart.stories.ts
+++ b/packages/frontend/src/pages/admin/queue.chart.chart.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: queue_chart_chart,
 };
 export const Default = {
-	components: {
-		queue_chart_chart,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				queue_chart_chart,
+			},
+			props: Object.keys(argTypes),
+			template: '<queue_chart_chart v-bind="$props" />',
+		};
 	},
-	template: '<queue_chart_chart />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/queue.chart.stories.ts b/packages/frontend/src/pages/admin/queue.chart.stories.ts
index 8e66f8614..48c9aba4b 100644
--- a/packages/frontend/src/pages/admin/queue.chart.stories.ts
+++ b/packages/frontend/src/pages/admin/queue.chart.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: queue_chart,
 };
 export const Default = {
-	components: {
-		queue_chart,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				queue_chart,
+			},
+			props: Object.keys(argTypes),
+			template: '<queue_chart v-bind="$props" />',
+		};
 	},
-	template: '<queue_chart />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/queue.stories.ts b/packages/frontend/src/pages/admin/queue.stories.ts
index 6d2c06b48..08a32d040 100644
--- a/packages/frontend/src/pages/admin/queue.stories.ts
+++ b/packages/frontend/src/pages/admin/queue.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: queue,
 };
 export const Default = {
-	components: {
-		queue,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				queue,
+			},
+			props: Object.keys(argTypes),
+			template: '<queue v-bind="$props" />',
+		};
 	},
-	template: '<queue />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/relays.stories.ts b/packages/frontend/src/pages/admin/relays.stories.ts
index c362cb7ca..aabd4d2fc 100644
--- a/packages/frontend/src/pages/admin/relays.stories.ts
+++ b/packages/frontend/src/pages/admin/relays.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: relays,
 };
 export const Default = {
-	components: {
-		relays,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				relays,
+			},
+			props: Object.keys(argTypes),
+			template: '<relays v-bind="$props" />',
+		};
 	},
-	template: '<relays />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/roles.edit.stories.ts b/packages/frontend/src/pages/admin/roles.edit.stories.ts
index 61fac4941..148cad434 100644
--- a/packages/frontend/src/pages/admin/roles.edit.stories.ts
+++ b/packages/frontend/src/pages/admin/roles.edit.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: roles_edit,
 };
 export const Default = {
-	components: {
-		roles_edit,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				roles_edit,
+			},
+			props: Object.keys(argTypes),
+			template: '<roles_edit v-bind="$props" />',
+		};
 	},
-	template: '<roles_edit />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/roles.editor.stories.ts b/packages/frontend/src/pages/admin/roles.editor.stories.ts
index 34dac9a05..91f0cd665 100644
--- a/packages/frontend/src/pages/admin/roles.editor.stories.ts
+++ b/packages/frontend/src/pages/admin/roles.editor.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: roles_editor,
 };
 export const Default = {
-	components: {
-		roles_editor,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				roles_editor,
+			},
+			props: Object.keys(argTypes),
+			template: '<roles_editor v-bind="$props" />',
+		};
 	},
-	template: '<roles_editor />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/roles.role.stories.ts b/packages/frontend/src/pages/admin/roles.role.stories.ts
index ec112af03..4847b5d27 100644
--- a/packages/frontend/src/pages/admin/roles.role.stories.ts
+++ b/packages/frontend/src/pages/admin/roles.role.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: roles_role,
 };
 export const Default = {
-	components: {
-		roles_role,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				roles_role,
+			},
+			props: Object.keys(argTypes),
+			template: '<roles_role v-bind="$props" />',
+		};
 	},
-	template: '<roles_role />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/roles.stories.ts b/packages/frontend/src/pages/admin/roles.stories.ts
index c0d1fcd44..1c6abb42b 100644
--- a/packages/frontend/src/pages/admin/roles.stories.ts
+++ b/packages/frontend/src/pages/admin/roles.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: roles,
 };
 export const Default = {
-	components: {
-		roles,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				roles,
+			},
+			props: Object.keys(argTypes),
+			template: '<roles v-bind="$props" />',
+		};
 	},
-	template: '<roles />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/security.stories.ts b/packages/frontend/src/pages/admin/security.stories.ts
index eacff6598..8785d2caf 100644
--- a/packages/frontend/src/pages/admin/security.stories.ts
+++ b/packages/frontend/src/pages/admin/security.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: security,
 };
 export const Default = {
-	components: {
-		security,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				security,
+			},
+			props: Object.keys(argTypes),
+			template: '<security v-bind="$props" />',
+		};
 	},
-	template: '<security />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/settings.stories.ts b/packages/frontend/src/pages/admin/settings.stories.ts
index c10325146..75a99d78c 100644
--- a/packages/frontend/src/pages/admin/settings.stories.ts
+++ b/packages/frontend/src/pages/admin/settings.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: settings,
 };
 export const Default = {
-	components: {
-		settings,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				settings,
+			},
+			props: Object.keys(argTypes),
+			template: '<settings v-bind="$props" />',
+		};
 	},
-	template: '<settings />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/admin/users.stories.ts b/packages/frontend/src/pages/admin/users.stories.ts
index 89769a35f..7d849fcec 100644
--- a/packages/frontend/src/pages/admin/users.stories.ts
+++ b/packages/frontend/src/pages/admin/users.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: users,
 };
 export const Default = {
-	components: {
-		users,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				users,
+			},
+			props: Object.keys(argTypes),
+			template: '<users v-bind="$props" />',
+		};
 	},
-	template: '<users />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/ads.stories.ts b/packages/frontend/src/pages/ads.stories.ts
index 1fadb08a8..c02055d8e 100644
--- a/packages/frontend/src/pages/ads.stories.ts
+++ b/packages/frontend/src/pages/ads.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: ads,
 };
 export const Default = {
-	components: {
-		ads,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				ads,
+			},
+			props: Object.keys(argTypes),
+			template: '<ads v-bind="$props" />',
+		};
 	},
-	template: '<ads />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/announcements.stories.ts b/packages/frontend/src/pages/announcements.stories.ts
index b5c708123..4835a4c32 100644
--- a/packages/frontend/src/pages/announcements.stories.ts
+++ b/packages/frontend/src/pages/announcements.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: announcements,
 };
 export const Default = {
-	components: {
-		announcements,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				announcements,
+			},
+			props: Object.keys(argTypes),
+			template: '<announcements v-bind="$props" />',
+		};
 	},
-	template: '<announcements />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/antenna-timeline.stories.ts b/packages/frontend/src/pages/antenna-timeline.stories.ts
index 142ddb786..c16f408a5 100644
--- a/packages/frontend/src/pages/antenna-timeline.stories.ts
+++ b/packages/frontend/src/pages/antenna-timeline.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: antenna_timeline,
 };
 export const Default = {
-	components: {
-		antenna_timeline,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				antenna_timeline,
+			},
+			props: Object.keys(argTypes),
+			template: '<antenna_timeline v-bind="$props" />',
+		};
 	},
-	template: '<antenna_timeline />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/api-console.stories.ts b/packages/frontend/src/pages/api-console.stories.ts
index ab7032c88..dda2502d5 100644
--- a/packages/frontend/src/pages/api-console.stories.ts
+++ b/packages/frontend/src/pages/api-console.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: api_console,
 };
 export const Default = {
-	components: {
-		api_console,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				api_console,
+			},
+			props: Object.keys(argTypes),
+			template: '<api_console v-bind="$props" />',
+		};
 	},
-	template: '<api_console />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/auth.form.stories.ts b/packages/frontend/src/pages/auth.form.stories.ts
index 27b302a7e..6cdae4188 100644
--- a/packages/frontend/src/pages/auth.form.stories.ts
+++ b/packages/frontend/src/pages/auth.form.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: auth_form,
 };
 export const Default = {
-	components: {
-		auth_form,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				auth_form,
+			},
+			props: Object.keys(argTypes),
+			template: '<auth_form v-bind="$props" />',
+		};
 	},
-	template: '<auth_form />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/auth.stories.ts b/packages/frontend/src/pages/auth.stories.ts
index ed9715c21..37f365581 100644
--- a/packages/frontend/src/pages/auth.stories.ts
+++ b/packages/frontend/src/pages/auth.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: auth,
 };
 export const Default = {
-	components: {
-		auth,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				auth,
+			},
+			props: Object.keys(argTypes),
+			template: '<auth v-bind="$props" />',
+		};
 	},
-	template: '<auth />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/channel-editor.stories.ts b/packages/frontend/src/pages/channel-editor.stories.ts
index fadda3c39..9928ede95 100644
--- a/packages/frontend/src/pages/channel-editor.stories.ts
+++ b/packages/frontend/src/pages/channel-editor.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: channel_editor,
 };
 export const Default = {
-	components: {
-		channel_editor,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				channel_editor,
+			},
+			props: Object.keys(argTypes),
+			template: '<channel_editor v-bind="$props" />',
+		};
 	},
-	template: '<channel_editor />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/channel.stories.ts b/packages/frontend/src/pages/channel.stories.ts
index d11385411..bcb5b8222 100644
--- a/packages/frontend/src/pages/channel.stories.ts
+++ b/packages/frontend/src/pages/channel.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: channel,
 };
 export const Default = {
-	components: {
-		channel,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				channel,
+			},
+			props: Object.keys(argTypes),
+			template: '<channel v-bind="$props" />',
+		};
 	},
-	template: '<channel />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/channels.stories.ts b/packages/frontend/src/pages/channels.stories.ts
index d17a5ab5a..0e35ca453 100644
--- a/packages/frontend/src/pages/channels.stories.ts
+++ b/packages/frontend/src/pages/channels.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: channels,
 };
 export const Default = {
-	components: {
-		channels,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				channels,
+			},
+			props: Object.keys(argTypes),
+			template: '<channels v-bind="$props" />',
+		};
 	},
-	template: '<channels />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/clicker.stories.ts b/packages/frontend/src/pages/clicker.stories.ts
index 90b554eac..5ed6fc048 100644
--- a/packages/frontend/src/pages/clicker.stories.ts
+++ b/packages/frontend/src/pages/clicker.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: clicker,
 };
 export const Default = {
-	components: {
-		clicker,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				clicker,
+			},
+			props: Object.keys(argTypes),
+			template: '<clicker v-bind="$props" />',
+		};
 	},
-	template: '<clicker />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/clip.stories.ts b/packages/frontend/src/pages/clip.stories.ts
index 143543635..c2e6f056f 100644
--- a/packages/frontend/src/pages/clip.stories.ts
+++ b/packages/frontend/src/pages/clip.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: clip,
 };
 export const Default = {
-	components: {
-		clip,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				clip,
+			},
+			props: Object.keys(argTypes),
+			template: '<clip v-bind="$props" />',
+		};
 	},
-	template: '<clip />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/custom-emojis-manager.stories.ts b/packages/frontend/src/pages/custom-emojis-manager.stories.ts
index 3aa362b7d..44d87b428 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.stories.ts
+++ b/packages/frontend/src/pages/custom-emojis-manager.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: custom_emojis_manager,
 };
 export const Default = {
-	components: {
-		custom_emojis_manager,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				custom_emojis_manager,
+			},
+			props: Object.keys(argTypes),
+			template: '<custom_emojis_manager v-bind="$props" />',
+		};
 	},
-	template: '<custom_emojis_manager />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/drive.stories.ts b/packages/frontend/src/pages/drive.stories.ts
index 199cbe10e..56c6ff72d 100644
--- a/packages/frontend/src/pages/drive.stories.ts
+++ b/packages/frontend/src/pages/drive.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: drive,
 };
 export const Default = {
-	components: {
-		drive,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				drive,
+			},
+			props: Object.keys(argTypes),
+			template: '<drive v-bind="$props" />',
+		};
 	},
-	template: '<drive />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/emoji-edit-dialog.stories.ts b/packages/frontend/src/pages/emoji-edit-dialog.stories.ts
index 4ff245de1..e675bbe43 100644
--- a/packages/frontend/src/pages/emoji-edit-dialog.stories.ts
+++ b/packages/frontend/src/pages/emoji-edit-dialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: emoji_edit_dialog,
 };
 export const Default = {
-	components: {
-		emoji_edit_dialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				emoji_edit_dialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<emoji_edit_dialog v-bind="$props" />',
+		};
 	},
-	template: '<emoji_edit_dialog />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/emojis.emoji.stories.ts b/packages/frontend/src/pages/emojis.emoji.stories.ts
index e0a7d8c85..bda94c9b9 100644
--- a/packages/frontend/src/pages/emojis.emoji.stories.ts
+++ b/packages/frontend/src/pages/emojis.emoji.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: emojis_emoji,
 };
 export const Default = {
-	components: {
-		emojis_emoji,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				emojis_emoji,
+			},
+			props: Object.keys(argTypes),
+			template: '<emojis_emoji v-bind="$props" />',
+		};
 	},
-	template: '<emojis_emoji />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/explore.featured.stories.ts b/packages/frontend/src/pages/explore.featured.stories.ts
index 9482aa0a1..b04eee426 100644
--- a/packages/frontend/src/pages/explore.featured.stories.ts
+++ b/packages/frontend/src/pages/explore.featured.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: explore_featured,
 };
 export const Default = {
-	components: {
-		explore_featured,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				explore_featured,
+			},
+			props: Object.keys(argTypes),
+			template: '<explore_featured v-bind="$props" />',
+		};
 	},
-	template: '<explore_featured />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/explore.roles.stories.ts b/packages/frontend/src/pages/explore.roles.stories.ts
index bcf5c0fdb..44ff94c7a 100644
--- a/packages/frontend/src/pages/explore.roles.stories.ts
+++ b/packages/frontend/src/pages/explore.roles.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: explore_roles,
 };
 export const Default = {
-	components: {
-		explore_roles,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				explore_roles,
+			},
+			props: Object.keys(argTypes),
+			template: '<explore_roles v-bind="$props" />',
+		};
 	},
-	template: '<explore_roles />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/explore.stories.ts b/packages/frontend/src/pages/explore.stories.ts
index b42265a8b..5aa5efe56 100644
--- a/packages/frontend/src/pages/explore.stories.ts
+++ b/packages/frontend/src/pages/explore.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: explore,
 };
 export const Default = {
-	components: {
-		explore,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				explore,
+			},
+			props: Object.keys(argTypes),
+			template: '<explore v-bind="$props" />',
+		};
 	},
-	template: '<explore />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/explore.users.stories.ts b/packages/frontend/src/pages/explore.users.stories.ts
index 0b62e4458..4ce52c988 100644
--- a/packages/frontend/src/pages/explore.users.stories.ts
+++ b/packages/frontend/src/pages/explore.users.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: explore_users,
 };
 export const Default = {
-	components: {
-		explore_users,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				explore_users,
+			},
+			props: Object.keys(argTypes),
+			template: '<explore_users v-bind="$props" />',
+		};
 	},
-	template: '<explore_users />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/favorites.stories.ts b/packages/frontend/src/pages/favorites.stories.ts
index 959cd9633..76c188219 100644
--- a/packages/frontend/src/pages/favorites.stories.ts
+++ b/packages/frontend/src/pages/favorites.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: favorites,
 };
 export const Default = {
-	components: {
-		favorites,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				favorites,
+			},
+			props: Object.keys(argTypes),
+			template: '<favorites v-bind="$props" />',
+		};
 	},
-	template: '<favorites />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/flash/flash-edit.stories.ts b/packages/frontend/src/pages/flash/flash-edit.stories.ts
index 1eb559bd4..27376858e 100644
--- a/packages/frontend/src/pages/flash/flash-edit.stories.ts
+++ b/packages/frontend/src/pages/flash/flash-edit.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: flash_edit,
 };
 export const Default = {
-	components: {
-		flash_edit,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				flash_edit,
+			},
+			props: Object.keys(argTypes),
+			template: '<flash_edit v-bind="$props" />',
+		};
 	},
-	template: '<flash_edit />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/flash/flash-index.stories.ts b/packages/frontend/src/pages/flash/flash-index.stories.ts
index 1d10f2f3f..327506577 100644
--- a/packages/frontend/src/pages/flash/flash-index.stories.ts
+++ b/packages/frontend/src/pages/flash/flash-index.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: flash_index,
 };
 export const Default = {
-	components: {
-		flash_index,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				flash_index,
+			},
+			props: Object.keys(argTypes),
+			template: '<flash_index v-bind="$props" />',
+		};
 	},
-	template: '<flash_index />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/flash/flash.stories.ts b/packages/frontend/src/pages/flash/flash.stories.ts
index b987a06b9..e0ff01a0b 100644
--- a/packages/frontend/src/pages/flash/flash.stories.ts
+++ b/packages/frontend/src/pages/flash/flash.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: flash,
 };
 export const Default = {
-	components: {
-		flash,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				flash,
+			},
+			props: Object.keys(argTypes),
+			template: '<flash v-bind="$props" />',
+		};
 	},
-	template: '<flash />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/follow-requests.stories.ts b/packages/frontend/src/pages/follow-requests.stories.ts
index 5f9462106..8654604b6 100644
--- a/packages/frontend/src/pages/follow-requests.stories.ts
+++ b/packages/frontend/src/pages/follow-requests.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: follow_requests,
 };
 export const Default = {
-	components: {
-		follow_requests,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				follow_requests,
+			},
+			props: Object.keys(argTypes),
+			template: '<follow_requests v-bind="$props" />',
+		};
 	},
-	template: '<follow_requests />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/follow.stories.ts b/packages/frontend/src/pages/follow.stories.ts
index 73b487bc3..b9090d158 100644
--- a/packages/frontend/src/pages/follow.stories.ts
+++ b/packages/frontend/src/pages/follow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: follow,
 };
 export const Default = {
-	components: {
-		follow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				follow,
+			},
+			props: Object.keys(argTypes),
+			template: '<follow v-bind="$props" />',
+		};
 	},
-	template: '<follow />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/gallery/edit.stories.ts b/packages/frontend/src/pages/gallery/edit.stories.ts
index 80b8f4341..6bf05086b 100644
--- a/packages/frontend/src/pages/gallery/edit.stories.ts
+++ b/packages/frontend/src/pages/gallery/edit.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: edit,
 };
 export const Default = {
-	components: {
-		edit,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				edit,
+			},
+			props: Object.keys(argTypes),
+			template: '<edit v-bind="$props" />',
+		};
 	},
-	template: '<edit />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/gallery/index.stories.ts b/packages/frontend/src/pages/gallery/index.stories.ts
index a97c4f543..57d8be035 100644
--- a/packages/frontend/src/pages/gallery/index.stories.ts
+++ b/packages/frontend/src/pages/gallery/index.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index,
 };
 export const Default = {
-	components: {
-		index,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index,
+			},
+			props: Object.keys(argTypes),
+			template: '<index v-bind="$props" />',
+		};
 	},
-	template: '<index />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/gallery/post.stories.ts b/packages/frontend/src/pages/gallery/post.stories.ts
index a836bb0f8..1bafccebd 100644
--- a/packages/frontend/src/pages/gallery/post.stories.ts
+++ b/packages/frontend/src/pages/gallery/post.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: post,
 };
 export const Default = {
-	components: {
-		post,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				post,
+			},
+			props: Object.keys(argTypes),
+			template: '<post v-bind="$props" />',
+		};
 	},
-	template: '<post />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/instance-info.stories.ts b/packages/frontend/src/pages/instance-info.stories.ts
index e4ce20788..311a27a87 100644
--- a/packages/frontend/src/pages/instance-info.stories.ts
+++ b/packages/frontend/src/pages/instance-info.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: instance_info,
 };
 export const Default = {
-	components: {
-		instance_info,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				instance_info,
+			},
+			props: Object.keys(argTypes),
+			template: '<instance_info v-bind="$props" />',
+		};
 	},
-	template: '<instance_info />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/miauth.stories.ts b/packages/frontend/src/pages/miauth.stories.ts
index b70ba3923..b668f03cd 100644
--- a/packages/frontend/src/pages/miauth.stories.ts
+++ b/packages/frontend/src/pages/miauth.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: miauth,
 };
 export const Default = {
-	components: {
-		miauth,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				miauth,
+			},
+			props: Object.keys(argTypes),
+			template: '<miauth v-bind="$props" />',
+		};
 	},
-	template: '<miauth />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/my-antennas/create.stories.ts b/packages/frontend/src/pages/my-antennas/create.stories.ts
index d71aa1206..310cfe61f 100644
--- a/packages/frontend/src/pages/my-antennas/create.stories.ts
+++ b/packages/frontend/src/pages/my-antennas/create.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: create,
 };
 export const Default = {
-	components: {
-		create,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				create,
+			},
+			props: Object.keys(argTypes),
+			template: '<create v-bind="$props" />',
+		};
 	},
-	template: '<create />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/my-antennas/edit.stories.ts b/packages/frontend/src/pages/my-antennas/edit.stories.ts
index ebb9e5420..51202b066 100644
--- a/packages/frontend/src/pages/my-antennas/edit.stories.ts
+++ b/packages/frontend/src/pages/my-antennas/edit.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: edit,
 };
 export const Default = {
-	components: {
-		edit,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				edit,
+			},
+			props: Object.keys(argTypes),
+			template: '<edit v-bind="$props" />',
+		};
 	},
-	template: '<edit />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/my-antennas/editor.stories.ts b/packages/frontend/src/pages/my-antennas/editor.stories.ts
index 1edb29e80..88a96edff 100644
--- a/packages/frontend/src/pages/my-antennas/editor.stories.ts
+++ b/packages/frontend/src/pages/my-antennas/editor.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: editor,
 };
 export const Default = {
-	components: {
-		editor,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				editor,
+			},
+			props: Object.keys(argTypes),
+			template: '<editor v-bind="$props" />',
+		};
 	},
-	template: '<editor />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/my-antennas/index.stories.ts b/packages/frontend/src/pages/my-antennas/index.stories.ts
index 65af62c76..f0c356b49 100644
--- a/packages/frontend/src/pages/my-antennas/index.stories.ts
+++ b/packages/frontend/src/pages/my-antennas/index.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index,
 };
 export const Default = {
-	components: {
-		index,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index,
+			},
+			props: Object.keys(argTypes),
+			template: '<index v-bind="$props" />',
+		};
 	},
-	template: '<index />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/my-clips/index.stories.ts b/packages/frontend/src/pages/my-clips/index.stories.ts
index 462550998..a84ba350b 100644
--- a/packages/frontend/src/pages/my-clips/index.stories.ts
+++ b/packages/frontend/src/pages/my-clips/index.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index,
 };
 export const Default = {
-	components: {
-		index,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index,
+			},
+			props: Object.keys(argTypes),
+			template: '<index v-bind="$props" />',
+		};
 	},
-	template: '<index />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/my-lists/index.stories.ts b/packages/frontend/src/pages/my-lists/index.stories.ts
index eae8dbeb6..ae76937e0 100644
--- a/packages/frontend/src/pages/my-lists/index.stories.ts
+++ b/packages/frontend/src/pages/my-lists/index.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index,
 };
 export const Default = {
-	components: {
-		index,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index,
+			},
+			props: Object.keys(argTypes),
+			template: '<index v-bind="$props" />',
+		};
 	},
-	template: '<index />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/my-lists/list.stories.ts b/packages/frontend/src/pages/my-lists/list.stories.ts
index 05a306a3f..7ed8f3009 100644
--- a/packages/frontend/src/pages/my-lists/list.stories.ts
+++ b/packages/frontend/src/pages/my-lists/list.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: list,
 };
 export const Default = {
-	components: {
-		list,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				list,
+			},
+			props: Object.keys(argTypes),
+			template: '<list v-bind="$props" />',
+		};
 	},
-	template: '<list />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/not-found.stories.ts b/packages/frontend/src/pages/not-found.stories.ts
index 1d84261fe..03c1b8103 100644
--- a/packages/frontend/src/pages/not-found.stories.ts
+++ b/packages/frontend/src/pages/not-found.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: not_found,
 };
 export const Default = {
-	components: {
-		not_found,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				not_found,
+			},
+			props: Object.keys(argTypes),
+			template: '<not_found v-bind="$props" />',
+		};
 	},
-	template: '<not_found />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/note.stories.ts b/packages/frontend/src/pages/note.stories.ts
index e4703e3bb..fc88632ce 100644
--- a/packages/frontend/src/pages/note.stories.ts
+++ b/packages/frontend/src/pages/note.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: note,
 };
 export const Default = {
-	components: {
-		note,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				note,
+			},
+			props: Object.keys(argTypes),
+			template: '<note v-bind="$props" />',
+		};
 	},
-	template: '<note />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/notifications.stories.ts b/packages/frontend/src/pages/notifications.stories.ts
index 2181b94eb..8a81613b0 100644
--- a/packages/frontend/src/pages/notifications.stories.ts
+++ b/packages/frontend/src/pages/notifications.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: notifications,
 };
 export const Default = {
-	components: {
-		notifications,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				notifications,
+			},
+			props: Object.keys(argTypes),
+			template: '<notifications v-bind="$props" />',
+		};
 	},
-	template: '<notifications />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.stories.ts b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.stories.ts
index 4811d07ed..94eeb054c 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.stories.ts
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_editor_el_image,
 };
 export const Default = {
-	components: {
-		page_editor_el_image,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_editor_el_image,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_editor_el_image v-bind="$props" />',
+		};
 	},
-	template: '<page_editor_el_image />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.stories.ts b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.stories.ts
index 0293c4ca4..9b767672c 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.stories.ts
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_editor_el_note,
 };
 export const Default = {
-	components: {
-		page_editor_el_note,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_editor_el_note,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_editor_el_note v-bind="$props" />',
+		};
 	},
-	template: '<page_editor_el_note />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.section.stories.ts b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.stories.ts
index a0c062b67..f40039517 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.section.stories.ts
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_editor_el_section,
 };
 export const Default = {
-	components: {
-		page_editor_el_section,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_editor_el_section,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_editor_el_section v-bind="$props" />',
+		};
 	},
-	template: '<page_editor_el_section />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.stories.ts b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.stories.ts
index 46c8d3ddf..6e4bc9bbd 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.stories.ts
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_editor_el_text,
 };
 export const Default = {
-	components: {
-		page_editor_el_text,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_editor_el_text,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_editor_el_text v-bind="$props" />',
+		};
 	},
-	template: '<page_editor_el_text />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/page-editor/page-editor.blocks.stories.ts b/packages/frontend/src/pages/page-editor/page-editor.blocks.stories.ts
index 965c615ba..e753a9602 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.blocks.stories.ts
+++ b/packages/frontend/src/pages/page-editor/page-editor.blocks.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_editor_blocks,
 };
 export const Default = {
-	components: {
-		page_editor_blocks,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_editor_blocks,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_editor_blocks v-bind="$props" />',
+		};
 	},
-	template: '<page_editor_blocks />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/page-editor/page-editor.container.stories.ts b/packages/frontend/src/pages/page-editor/page-editor.container.stories.ts
index 0d044d7f6..77a4836f3 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.container.stories.ts
+++ b/packages/frontend/src/pages/page-editor/page-editor.container.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_editor_container,
 };
 export const Default = {
-	components: {
-		page_editor_container,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_editor_container,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_editor_container v-bind="$props" />',
+		};
 	},
-	template: '<page_editor_container />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/page-editor/page-editor.stories.ts b/packages/frontend/src/pages/page-editor/page-editor.stories.ts
index e0d0f5b3d..59c098938 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.stories.ts
+++ b/packages/frontend/src/pages/page-editor/page-editor.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page_editor,
 };
 export const Default = {
-	components: {
-		page_editor,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page_editor,
+			},
+			props: Object.keys(argTypes),
+			template: '<page_editor v-bind="$props" />',
+		};
 	},
-	template: '<page_editor />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/page.stories.ts b/packages/frontend/src/pages/page.stories.ts
index 08358f2ba..910deaca4 100644
--- a/packages/frontend/src/pages/page.stories.ts
+++ b/packages/frontend/src/pages/page.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: page,
 };
 export const Default = {
-	components: {
-		page,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				page,
+			},
+			props: Object.keys(argTypes),
+			template: '<page v-bind="$props" />',
+		};
 	},
-	template: '<page />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/pages.stories.ts b/packages/frontend/src/pages/pages.stories.ts
index f6ac1d456..2d8f53bda 100644
--- a/packages/frontend/src/pages/pages.stories.ts
+++ b/packages/frontend/src/pages/pages.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: pages,
 };
 export const Default = {
-	components: {
-		pages,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				pages,
+			},
+			props: Object.keys(argTypes),
+			template: '<pages v-bind="$props" />',
+		};
 	},
-	template: '<pages />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/preview.stories.ts b/packages/frontend/src/pages/preview.stories.ts
index 60cc026f6..6605c4587 100644
--- a/packages/frontend/src/pages/preview.stories.ts
+++ b/packages/frontend/src/pages/preview.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: preview,
 };
 export const Default = {
-	components: {
-		preview,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				preview,
+			},
+			props: Object.keys(argTypes),
+			template: '<preview v-bind="$props" />',
+		};
 	},
-	template: '<preview />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/registry.keys.stories.ts b/packages/frontend/src/pages/registry.keys.stories.ts
index 1a1ec5216..0d710acff 100644
--- a/packages/frontend/src/pages/registry.keys.stories.ts
+++ b/packages/frontend/src/pages/registry.keys.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: registry_keys,
 };
 export const Default = {
-	components: {
-		registry_keys,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				registry_keys,
+			},
+			props: Object.keys(argTypes),
+			template: '<registry_keys v-bind="$props" />',
+		};
 	},
-	template: '<registry_keys />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/registry.stories.ts b/packages/frontend/src/pages/registry.stories.ts
index 846d75cc8..776c153ad 100644
--- a/packages/frontend/src/pages/registry.stories.ts
+++ b/packages/frontend/src/pages/registry.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: registry,
 };
 export const Default = {
-	components: {
-		registry,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				registry,
+			},
+			props: Object.keys(argTypes),
+			template: '<registry v-bind="$props" />',
+		};
 	},
-	template: '<registry />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/registry.value.stories.ts b/packages/frontend/src/pages/registry.value.stories.ts
index 798c77d71..d90bc4edd 100644
--- a/packages/frontend/src/pages/registry.value.stories.ts
+++ b/packages/frontend/src/pages/registry.value.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: registry_value,
 };
 export const Default = {
-	components: {
-		registry_value,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				registry_value,
+			},
+			props: Object.keys(argTypes),
+			template: '<registry_value v-bind="$props" />',
+		};
 	},
-	template: '<registry_value />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/reset-password.stories.ts b/packages/frontend/src/pages/reset-password.stories.ts
index 6cab23af5..e478a2706 100644
--- a/packages/frontend/src/pages/reset-password.stories.ts
+++ b/packages/frontend/src/pages/reset-password.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: reset_password,
 };
 export const Default = {
-	components: {
-		reset_password,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				reset_password,
+			},
+			props: Object.keys(argTypes),
+			template: '<reset_password v-bind="$props" />',
+		};
 	},
-	template: '<reset_password />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/role.stories.ts b/packages/frontend/src/pages/role.stories.ts
index 2ec6bde65..f1cfe6660 100644
--- a/packages/frontend/src/pages/role.stories.ts
+++ b/packages/frontend/src/pages/role.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: role,
 };
 export const Default = {
-	components: {
-		role,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				role,
+			},
+			props: Object.keys(argTypes),
+			template: '<role v-bind="$props" />',
+		};
 	},
-	template: '<role />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/scratchpad.stories.ts b/packages/frontend/src/pages/scratchpad.stories.ts
index 369df43de..a5ea5b36e 100644
--- a/packages/frontend/src/pages/scratchpad.stories.ts
+++ b/packages/frontend/src/pages/scratchpad.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: scratchpad,
 };
 export const Default = {
-	components: {
-		scratchpad,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				scratchpad,
+			},
+			props: Object.keys(argTypes),
+			template: '<scratchpad v-bind="$props" />',
+		};
 	},
-	template: '<scratchpad />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/search.stories.ts b/packages/frontend/src/pages/search.stories.ts
index 845abb92b..05d2603df 100644
--- a/packages/frontend/src/pages/search.stories.ts
+++ b/packages/frontend/src/pages/search.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: search,
 };
 export const Default = {
-	components: {
-		search,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				search,
+			},
+			props: Object.keys(argTypes),
+			template: '<search v-bind="$props" />',
+		};
 	},
-	template: '<search />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/2fa.qrdialog.stories.ts b/packages/frontend/src/pages/settings/2fa.qrdialog.stories.ts
index cc5c3311f..54d1d959b 100644
--- a/packages/frontend/src/pages/settings/2fa.qrdialog.stories.ts
+++ b/packages/frontend/src/pages/settings/2fa.qrdialog.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: _2fa_qrdialog,
 };
 export const Default = {
-	components: {
-		_2fa_qrdialog,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				_2fa_qrdialog,
+			},
+			props: Object.keys(argTypes),
+			template: '<_2fa_qrdialog v-bind="$props" />',
+		};
 	},
-	template: '<_2fa_qrdialog />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/2fa.stories.ts b/packages/frontend/src/pages/settings/2fa.stories.ts
index 3b77f4cef..9d6a88748 100644
--- a/packages/frontend/src/pages/settings/2fa.stories.ts
+++ b/packages/frontend/src/pages/settings/2fa.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: _2fa,
 };
 export const Default = {
-	components: {
-		_2fa,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				_2fa,
+			},
+			props: Object.keys(argTypes),
+			template: '<_2fa v-bind="$props" />',
+		};
 	},
-	template: '<_2fa />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/account-info.stories.ts b/packages/frontend/src/pages/settings/account-info.stories.ts
index ed43fd46a..0fb998b3e 100644
--- a/packages/frontend/src/pages/settings/account-info.stories.ts
+++ b/packages/frontend/src/pages/settings/account-info.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: account_info,
 };
 export const Default = {
-	components: {
-		account_info,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				account_info,
+			},
+			props: Object.keys(argTypes),
+			template: '<account_info v-bind="$props" />',
+		};
 	},
-	template: '<account_info />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/accounts.stories.ts b/packages/frontend/src/pages/settings/accounts.stories.ts
index 4ffa1ae4c..9996274c7 100644
--- a/packages/frontend/src/pages/settings/accounts.stories.ts
+++ b/packages/frontend/src/pages/settings/accounts.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: accounts,
 };
 export const Default = {
-	components: {
-		accounts,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				accounts,
+			},
+			props: Object.keys(argTypes),
+			template: '<accounts v-bind="$props" />',
+		};
 	},
-	template: '<accounts />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/api.stories.ts b/packages/frontend/src/pages/settings/api.stories.ts
index 3695e9dfe..bb3194c56 100644
--- a/packages/frontend/src/pages/settings/api.stories.ts
+++ b/packages/frontend/src/pages/settings/api.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: api,
 };
 export const Default = {
-	components: {
-		api,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				api,
+			},
+			props: Object.keys(argTypes),
+			template: '<api v-bind="$props" />',
+		};
 	},
-	template: '<api />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/apps.stories.ts b/packages/frontend/src/pages/settings/apps.stories.ts
index e9820cd3e..038848986 100644
--- a/packages/frontend/src/pages/settings/apps.stories.ts
+++ b/packages/frontend/src/pages/settings/apps.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: apps,
 };
 export const Default = {
-	components: {
-		apps,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				apps,
+			},
+			props: Object.keys(argTypes),
+			template: '<apps v-bind="$props" />',
+		};
 	},
-	template: '<apps />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/custom-css.stories.ts b/packages/frontend/src/pages/settings/custom-css.stories.ts
index 821ff4bf5..7b7cc913f 100644
--- a/packages/frontend/src/pages/settings/custom-css.stories.ts
+++ b/packages/frontend/src/pages/settings/custom-css.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: custom_css,
 };
 export const Default = {
-	components: {
-		custom_css,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				custom_css,
+			},
+			props: Object.keys(argTypes),
+			template: '<custom_css v-bind="$props" />',
+		};
 	},
-	template: '<custom_css />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/deck.stories.ts b/packages/frontend/src/pages/settings/deck.stories.ts
index 7ee4159f8..e6c51bc00 100644
--- a/packages/frontend/src/pages/settings/deck.stories.ts
+++ b/packages/frontend/src/pages/settings/deck.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: deck,
 };
 export const Default = {
-	components: {
-		deck,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				deck,
+			},
+			props: Object.keys(argTypes),
+			template: '<deck v-bind="$props" />',
+		};
 	},
-	template: '<deck />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/delete-account.stories.ts b/packages/frontend/src/pages/settings/delete-account.stories.ts
index d29068dad..4f5cf2c09 100644
--- a/packages/frontend/src/pages/settings/delete-account.stories.ts
+++ b/packages/frontend/src/pages/settings/delete-account.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: delete_account,
 };
 export const Default = {
-	components: {
-		delete_account,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				delete_account,
+			},
+			props: Object.keys(argTypes),
+			template: '<delete_account v-bind="$props" />',
+		};
 	},
-	template: '<delete_account />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/drive.stories.ts b/packages/frontend/src/pages/settings/drive.stories.ts
index cf65d1819..140615641 100644
--- a/packages/frontend/src/pages/settings/drive.stories.ts
+++ b/packages/frontend/src/pages/settings/drive.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: drive,
 };
 export const Default = {
-	components: {
-		drive,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				drive,
+			},
+			props: Object.keys(argTypes),
+			template: '<drive v-bind="$props" />',
+		};
 	},
-	template: '<drive />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/email.stories.ts b/packages/frontend/src/pages/settings/email.stories.ts
index 1adeb9613..043f23a48 100644
--- a/packages/frontend/src/pages/settings/email.stories.ts
+++ b/packages/frontend/src/pages/settings/email.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: email,
 };
 export const Default = {
-	components: {
-		email,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				email,
+			},
+			props: Object.keys(argTypes),
+			template: '<email v-bind="$props" />',
+		};
 	},
-	template: '<email />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/general.stories.ts b/packages/frontend/src/pages/settings/general.stories.ts
index 579f509f2..09237cf35 100644
--- a/packages/frontend/src/pages/settings/general.stories.ts
+++ b/packages/frontend/src/pages/settings/general.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: general,
 };
 export const Default = {
-	components: {
-		general,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				general,
+			},
+			props: Object.keys(argTypes),
+			template: '<general v-bind="$props" />',
+		};
 	},
-	template: '<general />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/import-export.stories.ts b/packages/frontend/src/pages/settings/import-export.stories.ts
index 967ed5459..9d05bd5c2 100644
--- a/packages/frontend/src/pages/settings/import-export.stories.ts
+++ b/packages/frontend/src/pages/settings/import-export.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: import_export,
 };
 export const Default = {
-	components: {
-		import_export,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				import_export,
+			},
+			props: Object.keys(argTypes),
+			template: '<import_export v-bind="$props" />',
+		};
 	},
-	template: '<import_export />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/index.stories.ts b/packages/frontend/src/pages/settings/index.stories.ts
index 2d9a2ec86..6b5f9e0c3 100644
--- a/packages/frontend/src/pages/settings/index.stories.ts
+++ b/packages/frontend/src/pages/settings/index.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index,
 };
 export const Default = {
-	components: {
-		index,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index,
+			},
+			props: Object.keys(argTypes),
+			template: '<index v-bind="$props" />',
+		};
 	},
-	template: '<index />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/instance-mute.stories.ts b/packages/frontend/src/pages/settings/instance-mute.stories.ts
index a9195df21..fb333bb1d 100644
--- a/packages/frontend/src/pages/settings/instance-mute.stories.ts
+++ b/packages/frontend/src/pages/settings/instance-mute.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: instance_mute,
 };
 export const Default = {
-	components: {
-		instance_mute,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				instance_mute,
+			},
+			props: Object.keys(argTypes),
+			template: '<instance_mute v-bind="$props" />',
+		};
 	},
-	template: '<instance_mute />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/mute-block.stories.ts b/packages/frontend/src/pages/settings/mute-block.stories.ts
index 297ba1bdf..fd84608d5 100644
--- a/packages/frontend/src/pages/settings/mute-block.stories.ts
+++ b/packages/frontend/src/pages/settings/mute-block.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: mute_block,
 };
 export const Default = {
-	components: {
-		mute_block,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				mute_block,
+			},
+			props: Object.keys(argTypes),
+			template: '<mute_block v-bind="$props" />',
+		};
 	},
-	template: '<mute_block />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/navbar.stories.ts b/packages/frontend/src/pages/settings/navbar.stories.ts
index 0d5427af5..3fc2b9a86 100644
--- a/packages/frontend/src/pages/settings/navbar.stories.ts
+++ b/packages/frontend/src/pages/settings/navbar.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: navbar,
 };
 export const Default = {
-	components: {
-		navbar,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				navbar,
+			},
+			props: Object.keys(argTypes),
+			template: '<navbar v-bind="$props" />',
+		};
 	},
-	template: '<navbar />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/notifications.stories.ts b/packages/frontend/src/pages/settings/notifications.stories.ts
index 2d896a5cd..0c1945685 100644
--- a/packages/frontend/src/pages/settings/notifications.stories.ts
+++ b/packages/frontend/src/pages/settings/notifications.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: notifications,
 };
 export const Default = {
-	components: {
-		notifications,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				notifications,
+			},
+			props: Object.keys(argTypes),
+			template: '<notifications v-bind="$props" />',
+		};
 	},
-	template: '<notifications />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/other.stories.ts b/packages/frontend/src/pages/settings/other.stories.ts
index 4158413e9..83e7cce2b 100644
--- a/packages/frontend/src/pages/settings/other.stories.ts
+++ b/packages/frontend/src/pages/settings/other.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: other,
 };
 export const Default = {
-	components: {
-		other,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				other,
+			},
+			props: Object.keys(argTypes),
+			template: '<other v-bind="$props" />',
+		};
 	},
-	template: '<other />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/plugin.install.stories.ts b/packages/frontend/src/pages/settings/plugin.install.stories.ts
index aeee457f2..bace922ca 100644
--- a/packages/frontend/src/pages/settings/plugin.install.stories.ts
+++ b/packages/frontend/src/pages/settings/plugin.install.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: plugin_install,
 };
 export const Default = {
-	components: {
-		plugin_install,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				plugin_install,
+			},
+			props: Object.keys(argTypes),
+			template: '<plugin_install v-bind="$props" />',
+		};
 	},
-	template: '<plugin_install />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/plugin.stories.ts b/packages/frontend/src/pages/settings/plugin.stories.ts
index e5ab35cc0..88e14e32d 100644
--- a/packages/frontend/src/pages/settings/plugin.stories.ts
+++ b/packages/frontend/src/pages/settings/plugin.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: plugin,
 };
 export const Default = {
-	components: {
-		plugin,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				plugin,
+			},
+			props: Object.keys(argTypes),
+			template: '<plugin v-bind="$props" />',
+		};
 	},
-	template: '<plugin />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/preferences-backups.stories.ts b/packages/frontend/src/pages/settings/preferences-backups.stories.ts
index 766dbd140..812329857 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.stories.ts
+++ b/packages/frontend/src/pages/settings/preferences-backups.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: preferences_backups,
 };
 export const Default = {
-	components: {
-		preferences_backups,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				preferences_backups,
+			},
+			props: Object.keys(argTypes),
+			template: '<preferences_backups v-bind="$props" />',
+		};
 	},
-	template: '<preferences_backups />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/privacy.stories.ts b/packages/frontend/src/pages/settings/privacy.stories.ts
index d86269e6d..e2b2ab905 100644
--- a/packages/frontend/src/pages/settings/privacy.stories.ts
+++ b/packages/frontend/src/pages/settings/privacy.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: privacy,
 };
 export const Default = {
-	components: {
-		privacy,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				privacy,
+			},
+			props: Object.keys(argTypes),
+			template: '<privacy v-bind="$props" />',
+		};
 	},
-	template: '<privacy />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/profile.stories.ts b/packages/frontend/src/pages/settings/profile.stories.ts
index b33bd355f..302a1a37b 100644
--- a/packages/frontend/src/pages/settings/profile.stories.ts
+++ b/packages/frontend/src/pages/settings/profile.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: profile,
 };
 export const Default = {
-	components: {
-		profile,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				profile,
+			},
+			props: Object.keys(argTypes),
+			template: '<profile v-bind="$props" />',
+		};
 	},
-	template: '<profile />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/reaction.stories.ts b/packages/frontend/src/pages/settings/reaction.stories.ts
index 331b6fedd..7328d53bd 100644
--- a/packages/frontend/src/pages/settings/reaction.stories.ts
+++ b/packages/frontend/src/pages/settings/reaction.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: reaction,
 };
 export const Default = {
-	components: {
-		reaction,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				reaction,
+			},
+			props: Object.keys(argTypes),
+			template: '<reaction v-bind="$props" />',
+		};
 	},
-	template: '<reaction />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/roles.stories.ts b/packages/frontend/src/pages/settings/roles.stories.ts
index 7b6da5bae..0cbf932ce 100644
--- a/packages/frontend/src/pages/settings/roles.stories.ts
+++ b/packages/frontend/src/pages/settings/roles.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: roles,
 };
 export const Default = {
-	components: {
-		roles,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				roles,
+			},
+			props: Object.keys(argTypes),
+			template: '<roles v-bind="$props" />',
+		};
 	},
-	template: '<roles />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/security.stories.ts b/packages/frontend/src/pages/settings/security.stories.ts
index b8209f45d..7997beeca 100644
--- a/packages/frontend/src/pages/settings/security.stories.ts
+++ b/packages/frontend/src/pages/settings/security.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: security,
 };
 export const Default = {
-	components: {
-		security,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				security,
+			},
+			props: Object.keys(argTypes),
+			template: '<security v-bind="$props" />',
+		};
 	},
-	template: '<security />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/sounds.sound.stories.ts b/packages/frontend/src/pages/settings/sounds.sound.stories.ts
index dd9f6e8a9..bb1d5fc87 100644
--- a/packages/frontend/src/pages/settings/sounds.sound.stories.ts
+++ b/packages/frontend/src/pages/settings/sounds.sound.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: sounds_sound,
 };
 export const Default = {
-	components: {
-		sounds_sound,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				sounds_sound,
+			},
+			props: Object.keys(argTypes),
+			template: '<sounds_sound v-bind="$props" />',
+		};
 	},
-	template: '<sounds_sound />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/sounds.stories.ts b/packages/frontend/src/pages/settings/sounds.stories.ts
index ed8a8c139..121f81cca 100644
--- a/packages/frontend/src/pages/settings/sounds.stories.ts
+++ b/packages/frontend/src/pages/settings/sounds.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: sounds,
 };
 export const Default = {
-	components: {
-		sounds,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				sounds,
+			},
+			props: Object.keys(argTypes),
+			template: '<sounds v-bind="$props" />',
+		};
 	},
-	template: '<sounds />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/statusbar.statusbar.stories.ts b/packages/frontend/src/pages/settings/statusbar.statusbar.stories.ts
index 05dbbae79..77e6f04e0 100644
--- a/packages/frontend/src/pages/settings/statusbar.statusbar.stories.ts
+++ b/packages/frontend/src/pages/settings/statusbar.statusbar.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: statusbar_statusbar,
 };
 export const Default = {
-	components: {
-		statusbar_statusbar,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				statusbar_statusbar,
+			},
+			props: Object.keys(argTypes),
+			template: '<statusbar_statusbar v-bind="$props" />',
+		};
 	},
-	template: '<statusbar_statusbar />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/statusbar.stories.ts b/packages/frontend/src/pages/settings/statusbar.stories.ts
index 19be758d9..75f6acc6f 100644
--- a/packages/frontend/src/pages/settings/statusbar.stories.ts
+++ b/packages/frontend/src/pages/settings/statusbar.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: statusbar,
 };
 export const Default = {
-	components: {
-		statusbar,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				statusbar,
+			},
+			props: Object.keys(argTypes),
+			template: '<statusbar v-bind="$props" />',
+		};
 	},
-	template: '<statusbar />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/theme.install.stories.ts b/packages/frontend/src/pages/settings/theme.install.stories.ts
index 55f8ffe3b..7aa772208 100644
--- a/packages/frontend/src/pages/settings/theme.install.stories.ts
+++ b/packages/frontend/src/pages/settings/theme.install.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: theme_install,
 };
 export const Default = {
-	components: {
-		theme_install,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				theme_install,
+			},
+			props: Object.keys(argTypes),
+			template: '<theme_install v-bind="$props" />',
+		};
 	},
-	template: '<theme_install />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/theme.manage.stories.ts b/packages/frontend/src/pages/settings/theme.manage.stories.ts
index 4a4e4dc6e..42fe97c93 100644
--- a/packages/frontend/src/pages/settings/theme.manage.stories.ts
+++ b/packages/frontend/src/pages/settings/theme.manage.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: theme_manage,
 };
 export const Default = {
-	components: {
-		theme_manage,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				theme_manage,
+			},
+			props: Object.keys(argTypes),
+			template: '<theme_manage v-bind="$props" />',
+		};
 	},
-	template: '<theme_manage />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/theme.stories.ts b/packages/frontend/src/pages/settings/theme.stories.ts
index 68093e90b..93da07083 100644
--- a/packages/frontend/src/pages/settings/theme.stories.ts
+++ b/packages/frontend/src/pages/settings/theme.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: theme,
 };
 export const Default = {
-	components: {
-		theme,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				theme,
+			},
+			props: Object.keys(argTypes),
+			template: '<theme v-bind="$props" />',
+		};
 	},
-	template: '<theme />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/webhook.edit.stories.ts b/packages/frontend/src/pages/settings/webhook.edit.stories.ts
index 67d2a4fd8..33952bb96 100644
--- a/packages/frontend/src/pages/settings/webhook.edit.stories.ts
+++ b/packages/frontend/src/pages/settings/webhook.edit.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: webhook_edit,
 };
 export const Default = {
-	components: {
-		webhook_edit,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				webhook_edit,
+			},
+			props: Object.keys(argTypes),
+			template: '<webhook_edit v-bind="$props" />',
+		};
 	},
-	template: '<webhook_edit />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/webhook.new.stories.ts b/packages/frontend/src/pages/settings/webhook.new.stories.ts
index fbc9e52c6..4f94b9758 100644
--- a/packages/frontend/src/pages/settings/webhook.new.stories.ts
+++ b/packages/frontend/src/pages/settings/webhook.new.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: webhook_new,
 };
 export const Default = {
-	components: {
-		webhook_new,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				webhook_new,
+			},
+			props: Object.keys(argTypes),
+			template: '<webhook_new v-bind="$props" />',
+		};
 	},
-	template: '<webhook_new />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/webhook.stories.ts b/packages/frontend/src/pages/settings/webhook.stories.ts
index 838e9390a..18e95e337 100644
--- a/packages/frontend/src/pages/settings/webhook.stories.ts
+++ b/packages/frontend/src/pages/settings/webhook.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: webhook,
 };
 export const Default = {
-	components: {
-		webhook,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				webhook,
+			},
+			props: Object.keys(argTypes),
+			template: '<webhook v-bind="$props" />',
+		};
 	},
-	template: '<webhook />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/settings/word-mute.stories.ts b/packages/frontend/src/pages/settings/word-mute.stories.ts
index 1faff2b69..619143166 100644
--- a/packages/frontend/src/pages/settings/word-mute.stories.ts
+++ b/packages/frontend/src/pages/settings/word-mute.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: word_mute,
 };
 export const Default = {
-	components: {
-		word_mute,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				word_mute,
+			},
+			props: Object.keys(argTypes),
+			template: '<word_mute v-bind="$props" />',
+		};
 	},
-	template: '<word_mute />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/share.stories.ts b/packages/frontend/src/pages/share.stories.ts
index ff2365051..69a112723 100644
--- a/packages/frontend/src/pages/share.stories.ts
+++ b/packages/frontend/src/pages/share.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: share,
 };
 export const Default = {
-	components: {
-		share,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				share,
+			},
+			props: Object.keys(argTypes),
+			template: '<share v-bind="$props" />',
+		};
 	},
-	template: '<share />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/signup-complete.stories.ts b/packages/frontend/src/pages/signup-complete.stories.ts
index 9349f6229..c34c3722d 100644
--- a/packages/frontend/src/pages/signup-complete.stories.ts
+++ b/packages/frontend/src/pages/signup-complete.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: signup_complete,
 };
 export const Default = {
-	components: {
-		signup_complete,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				signup_complete,
+			},
+			props: Object.keys(argTypes),
+			template: '<signup_complete v-bind="$props" />',
+		};
 	},
-	template: '<signup_complete />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/tag.stories.ts b/packages/frontend/src/pages/tag.stories.ts
index 7742ca1b1..8e39a7161 100644
--- a/packages/frontend/src/pages/tag.stories.ts
+++ b/packages/frontend/src/pages/tag.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: tag,
 };
 export const Default = {
-	components: {
-		tag,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				tag,
+			},
+			props: Object.keys(argTypes),
+			template: '<tag v-bind="$props" />',
+		};
 	},
-	template: '<tag />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/theme-editor.stories.ts b/packages/frontend/src/pages/theme-editor.stories.ts
index 300a3313d..2ae21fef8 100644
--- a/packages/frontend/src/pages/theme-editor.stories.ts
+++ b/packages/frontend/src/pages/theme-editor.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: theme_editor,
 };
 export const Default = {
-	components: {
-		theme_editor,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				theme_editor,
+			},
+			props: Object.keys(argTypes),
+			template: '<theme_editor v-bind="$props" />',
+		};
 	},
-	template: '<theme_editor />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/timeline.stories.ts b/packages/frontend/src/pages/timeline.stories.ts
index 5de5a151b..9acd55e1e 100644
--- a/packages/frontend/src/pages/timeline.stories.ts
+++ b/packages/frontend/src/pages/timeline.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: timeline,
 };
 export const Default = {
-	components: {
-		timeline,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				timeline,
+			},
+			props: Object.keys(argTypes),
+			template: '<timeline v-bind="$props" />',
+		};
 	},
-	template: '<timeline />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/timeline.tutorial.stories.ts b/packages/frontend/src/pages/timeline.tutorial.stories.ts
index 591039580..0066d0d3d 100644
--- a/packages/frontend/src/pages/timeline.tutorial.stories.ts
+++ b/packages/frontend/src/pages/timeline.tutorial.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: timeline_tutorial,
 };
 export const Default = {
-	components: {
-		timeline_tutorial,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				timeline_tutorial,
+			},
+			props: Object.keys(argTypes),
+			template: '<timeline_tutorial v-bind="$props" />',
+		};
 	},
-	template: '<timeline_tutorial />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user-info.stories.ts b/packages/frontend/src/pages/user-info.stories.ts
index 21053a220..821a2e6bf 100644
--- a/packages/frontend/src/pages/user-info.stories.ts
+++ b/packages/frontend/src/pages/user-info.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: user_info,
 };
 export const Default = {
-	components: {
-		user_info,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				user_info,
+			},
+			props: Object.keys(argTypes),
+			template: '<user_info v-bind="$props" />',
+		};
 	},
-	template: '<user_info />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user-list-timeline.stories.ts b/packages/frontend/src/pages/user-list-timeline.stories.ts
index f951573f7..16cde7e2f 100644
--- a/packages/frontend/src/pages/user-list-timeline.stories.ts
+++ b/packages/frontend/src/pages/user-list-timeline.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: user_list_timeline,
 };
 export const Default = {
-	components: {
-		user_list_timeline,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				user_list_timeline,
+			},
+			props: Object.keys(argTypes),
+			template: '<user_list_timeline v-bind="$props" />',
+		};
 	},
-	template: '<user_list_timeline />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user-tag.stories.ts b/packages/frontend/src/pages/user-tag.stories.ts
index 6757c4821..1637eec0d 100644
--- a/packages/frontend/src/pages/user-tag.stories.ts
+++ b/packages/frontend/src/pages/user-tag.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: user_tag,
 };
 export const Default = {
-	components: {
-		user_tag,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				user_tag,
+			},
+			props: Object.keys(argTypes),
+			template: '<user_tag v-bind="$props" />',
+		};
 	},
-	template: '<user_tag />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/achievements.stories.ts b/packages/frontend/src/pages/user/achievements.stories.ts
index 808fc7daa..ade9caa09 100644
--- a/packages/frontend/src/pages/user/achievements.stories.ts
+++ b/packages/frontend/src/pages/user/achievements.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: achievements,
 };
 export const Default = {
-	components: {
-		achievements,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				achievements,
+			},
+			props: Object.keys(argTypes),
+			template: '<achievements v-bind="$props" />',
+		};
 	},
-	template: '<achievements />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/activity.following.stories.ts b/packages/frontend/src/pages/user/activity.following.stories.ts
index 31183e5fc..8c1a19d1a 100644
--- a/packages/frontend/src/pages/user/activity.following.stories.ts
+++ b/packages/frontend/src/pages/user/activity.following.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: activity_following,
 };
 export const Default = {
-	components: {
-		activity_following,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				activity_following,
+			},
+			props: Object.keys(argTypes),
+			template: '<activity_following v-bind="$props" />',
+		};
 	},
-	template: '<activity_following />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/activity.heatmap.stories.ts b/packages/frontend/src/pages/user/activity.heatmap.stories.ts
index 3421de0ec..44e7c8bc5 100644
--- a/packages/frontend/src/pages/user/activity.heatmap.stories.ts
+++ b/packages/frontend/src/pages/user/activity.heatmap.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: activity_heatmap,
 };
 export const Default = {
-	components: {
-		activity_heatmap,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				activity_heatmap,
+			},
+			props: Object.keys(argTypes),
+			template: '<activity_heatmap v-bind="$props" />',
+		};
 	},
-	template: '<activity_heatmap />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/activity.notes.stories.ts b/packages/frontend/src/pages/user/activity.notes.stories.ts
index abb31c270..d4c45a303 100644
--- a/packages/frontend/src/pages/user/activity.notes.stories.ts
+++ b/packages/frontend/src/pages/user/activity.notes.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: activity_notes,
 };
 export const Default = {
-	components: {
-		activity_notes,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				activity_notes,
+			},
+			props: Object.keys(argTypes),
+			template: '<activity_notes v-bind="$props" />',
+		};
 	},
-	template: '<activity_notes />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/activity.pv.stories.ts b/packages/frontend/src/pages/user/activity.pv.stories.ts
index 2fb5ac33e..9ceb71686 100644
--- a/packages/frontend/src/pages/user/activity.pv.stories.ts
+++ b/packages/frontend/src/pages/user/activity.pv.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: activity_pv,
 };
 export const Default = {
-	components: {
-		activity_pv,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				activity_pv,
+			},
+			props: Object.keys(argTypes),
+			template: '<activity_pv v-bind="$props" />',
+		};
 	},
-	template: '<activity_pv />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/activity.stories.ts b/packages/frontend/src/pages/user/activity.stories.ts
index 8984f08ed..88e887b42 100644
--- a/packages/frontend/src/pages/user/activity.stories.ts
+++ b/packages/frontend/src/pages/user/activity.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: activity,
 };
 export const Default = {
-	components: {
-		activity,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				activity,
+			},
+			props: Object.keys(argTypes),
+			template: '<activity v-bind="$props" />',
+		};
 	},
-	template: '<activity />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/clips.stories.ts b/packages/frontend/src/pages/user/clips.stories.ts
index 629639509..d4b2535e9 100644
--- a/packages/frontend/src/pages/user/clips.stories.ts
+++ b/packages/frontend/src/pages/user/clips.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: clips,
 };
 export const Default = {
-	components: {
-		clips,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				clips,
+			},
+			props: Object.keys(argTypes),
+			template: '<clips v-bind="$props" />',
+		};
 	},
-	template: '<clips />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/follow-list.stories.ts b/packages/frontend/src/pages/user/follow-list.stories.ts
index 1f02dc218..171a1b435 100644
--- a/packages/frontend/src/pages/user/follow-list.stories.ts
+++ b/packages/frontend/src/pages/user/follow-list.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: follow_list,
 };
 export const Default = {
-	components: {
-		follow_list,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				follow_list,
+			},
+			props: Object.keys(argTypes),
+			template: '<follow_list v-bind="$props" />',
+		};
 	},
-	template: '<follow_list />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/followers.stories.ts b/packages/frontend/src/pages/user/followers.stories.ts
index af816cf53..92385dc1e 100644
--- a/packages/frontend/src/pages/user/followers.stories.ts
+++ b/packages/frontend/src/pages/user/followers.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: followers,
 };
 export const Default = {
-	components: {
-		followers,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				followers,
+			},
+			props: Object.keys(argTypes),
+			template: '<followers v-bind="$props" />',
+		};
 	},
-	template: '<followers />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/following.stories.ts b/packages/frontend/src/pages/user/following.stories.ts
index 49eda2b16..98479f85b 100644
--- a/packages/frontend/src/pages/user/following.stories.ts
+++ b/packages/frontend/src/pages/user/following.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: following,
 };
 export const Default = {
-	components: {
-		following,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				following,
+			},
+			props: Object.keys(argTypes),
+			template: '<following v-bind="$props" />',
+		};
 	},
-	template: '<following />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/gallery.stories.ts b/packages/frontend/src/pages/user/gallery.stories.ts
index be6dc8fd1..ad38c5c7b 100644
--- a/packages/frontend/src/pages/user/gallery.stories.ts
+++ b/packages/frontend/src/pages/user/gallery.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: gallery,
 };
 export const Default = {
-	components: {
-		gallery,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				gallery,
+			},
+			props: Object.keys(argTypes),
+			template: '<gallery v-bind="$props" />',
+		};
 	},
-	template: '<gallery />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/home.stories.ts b/packages/frontend/src/pages/user/home.stories.ts
index d829dd447..d300f35af 100644
--- a/packages/frontend/src/pages/user/home.stories.ts
+++ b/packages/frontend/src/pages/user/home.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: home,
 };
 export const Default = {
-	components: {
-		home,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				home,
+			},
+			props: Object.keys(argTypes),
+			template: '<home v-bind="$props" />',
+		};
 	},
-	template: '<home />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/index.activity.stories.ts b/packages/frontend/src/pages/user/index.activity.stories.ts
index c5ccc22ee..9758be90c 100644
--- a/packages/frontend/src/pages/user/index.activity.stories.ts
+++ b/packages/frontend/src/pages/user/index.activity.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index_activity,
 };
 export const Default = {
-	components: {
-		index_activity,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index_activity,
+			},
+			props: Object.keys(argTypes),
+			template: '<index_activity v-bind="$props" />',
+		};
 	},
-	template: '<index_activity />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/index.photos.stories.ts b/packages/frontend/src/pages/user/index.photos.stories.ts
index b8a1aa971..cf75985e7 100644
--- a/packages/frontend/src/pages/user/index.photos.stories.ts
+++ b/packages/frontend/src/pages/user/index.photos.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index_photos,
 };
 export const Default = {
-	components: {
-		index_photos,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index_photos,
+			},
+			props: Object.keys(argTypes),
+			template: '<index_photos v-bind="$props" />',
+		};
 	},
-	template: '<index_photos />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/index.stories.ts b/packages/frontend/src/pages/user/index.stories.ts
index becab310e..ee8176e38 100644
--- a/packages/frontend/src/pages/user/index.stories.ts
+++ b/packages/frontend/src/pages/user/index.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index,
 };
 export const Default = {
-	components: {
-		index,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index,
+			},
+			props: Object.keys(argTypes),
+			template: '<index v-bind="$props" />',
+		};
 	},
-	template: '<index />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/index.timeline.stories.ts b/packages/frontend/src/pages/user/index.timeline.stories.ts
index 1bb327d7b..09dd96f00 100644
--- a/packages/frontend/src/pages/user/index.timeline.stories.ts
+++ b/packages/frontend/src/pages/user/index.timeline.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index_timeline,
 };
 export const Default = {
-	components: {
-		index_timeline,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index_timeline,
+			},
+			props: Object.keys(argTypes),
+			template: '<index_timeline v-bind="$props" />',
+		};
 	},
-	template: '<index_timeline />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/pages.stories.ts b/packages/frontend/src/pages/user/pages.stories.ts
index 8f94478f4..b0e19bd13 100644
--- a/packages/frontend/src/pages/user/pages.stories.ts
+++ b/packages/frontend/src/pages/user/pages.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: pages,
 };
 export const Default = {
-	components: {
-		pages,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				pages,
+			},
+			props: Object.keys(argTypes),
+			template: '<pages v-bind="$props" />',
+		};
 	},
-	template: '<pages />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/user/reactions.stories.ts b/packages/frontend/src/pages/user/reactions.stories.ts
index 9c16da888..40288b8ba 100644
--- a/packages/frontend/src/pages/user/reactions.stories.ts
+++ b/packages/frontend/src/pages/user/reactions.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: reactions,
 };
 export const Default = {
-	components: {
-		reactions,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				reactions,
+			},
+			props: Object.keys(argTypes),
+			template: '<reactions v-bind="$props" />',
+		};
 	},
-	template: '<reactions />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/welcome.entrance.a.stories.ts b/packages/frontend/src/pages/welcome.entrance.a.stories.ts
index 390c763cf..d9cfbc178 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.stories.ts
+++ b/packages/frontend/src/pages/welcome.entrance.a.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: welcome_entrance_a,
 };
 export const Default = {
-	components: {
-		welcome_entrance_a,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				welcome_entrance_a,
+			},
+			props: Object.keys(argTypes),
+			template: '<welcome_entrance_a v-bind="$props" />',
+		};
 	},
-	template: '<welcome_entrance_a />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/welcome.entrance.b.stories.ts b/packages/frontend/src/pages/welcome.entrance.b.stories.ts
index 530708830..0850cfc14 100644
--- a/packages/frontend/src/pages/welcome.entrance.b.stories.ts
+++ b/packages/frontend/src/pages/welcome.entrance.b.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: welcome_entrance_b,
 };
 export const Default = {
-	components: {
-		welcome_entrance_b,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				welcome_entrance_b,
+			},
+			props: Object.keys(argTypes),
+			template: '<welcome_entrance_b v-bind="$props" />',
+		};
 	},
-	template: '<welcome_entrance_b />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/welcome.entrance.c.stories.ts b/packages/frontend/src/pages/welcome.entrance.c.stories.ts
index 53a1a93d4..f125157a8 100644
--- a/packages/frontend/src/pages/welcome.entrance.c.stories.ts
+++ b/packages/frontend/src/pages/welcome.entrance.c.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: welcome_entrance_c,
 };
 export const Default = {
-	components: {
-		welcome_entrance_c,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				welcome_entrance_c,
+			},
+			props: Object.keys(argTypes),
+			template: '<welcome_entrance_c v-bind="$props" />',
+		};
 	},
-	template: '<welcome_entrance_c />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/welcome.setup.stories.ts b/packages/frontend/src/pages/welcome.setup.stories.ts
index 1e755e809..5c5f7a100 100644
--- a/packages/frontend/src/pages/welcome.setup.stories.ts
+++ b/packages/frontend/src/pages/welcome.setup.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: welcome_setup,
 };
 export const Default = {
-	components: {
-		welcome_setup,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				welcome_setup,
+			},
+			props: Object.keys(argTypes),
+			template: '<welcome_setup v-bind="$props" />',
+		};
 	},
-	template: '<welcome_setup />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/welcome.stories.ts b/packages/frontend/src/pages/welcome.stories.ts
index 30c0f1ee2..a1a95e43f 100644
--- a/packages/frontend/src/pages/welcome.stories.ts
+++ b/packages/frontend/src/pages/welcome.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: welcome,
 };
 export const Default = {
-	components: {
-		welcome,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				welcome,
+			},
+			props: Object.keys(argTypes),
+			template: '<welcome v-bind="$props" />',
+		};
 	},
-	template: '<welcome />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/pages/welcome.timeline.stories.ts b/packages/frontend/src/pages/welcome.timeline.stories.ts
index 7492893a0..0dcaf112f 100644
--- a/packages/frontend/src/pages/welcome.timeline.stories.ts
+++ b/packages/frontend/src/pages/welcome.timeline.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: welcome_timeline,
 };
 export const Default = {
-	components: {
-		welcome_timeline,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				welcome_timeline,
+			},
+			props: Object.keys(argTypes),
+			template: '<welcome_timeline v-bind="$props" />',
+		};
 	},
-	template: '<welcome_timeline />',
 	parameters: {
 		layout: 'fullscreen',
 	},
diff --git a/packages/frontend/src/ui/_common_/common.stories.ts b/packages/frontend/src/ui/_common_/common.stories.ts
index ec37ad665..e64c41be7 100644
--- a/packages/frontend/src/ui/_common_/common.stories.ts
+++ b/packages/frontend/src/ui/_common_/common.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: common,
 };
 export const Default = {
-	components: {
-		common,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				common,
+			},
+			props: Object.keys(argTypes),
+			template: '<common v-bind="$props" />',
+		};
 	},
-	template: '<common />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.stories.ts b/packages/frontend/src/ui/_common_/navbar-for-mobile.stories.ts
index e06a66db7..36658a6c3 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.stories.ts
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: navbar_for_mobile,
 };
 export const Default = {
-	components: {
-		navbar_for_mobile,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				navbar_for_mobile,
+			},
+			props: Object.keys(argTypes),
+			template: '<navbar_for_mobile v-bind="$props" />',
+		};
 	},
-	template: '<navbar_for_mobile />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/_common_/navbar.stories.ts b/packages/frontend/src/ui/_common_/navbar.stories.ts
index a8570942d..ceeb4f015 100644
--- a/packages/frontend/src/ui/_common_/navbar.stories.ts
+++ b/packages/frontend/src/ui/_common_/navbar.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: navbar,
 };
 export const Default = {
-	components: {
-		navbar,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				navbar,
+			},
+			props: Object.keys(argTypes),
+			template: '<navbar v-bind="$props" />',
+		};
 	},
-	template: '<navbar />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/_common_/notification.stories.ts b/packages/frontend/src/ui/_common_/notification.stories.ts
index 6463aaa0f..d0175f87f 100644
--- a/packages/frontend/src/ui/_common_/notification.stories.ts
+++ b/packages/frontend/src/ui/_common_/notification.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: notification,
 };
 export const Default = {
-	components: {
-		notification,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				notification,
+			},
+			props: Object.keys(argTypes),
+			template: '<notification v-bind="$props" />',
+		};
 	},
-	template: '<notification />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/_common_/statusbar-federation.stories.ts b/packages/frontend/src/ui/_common_/statusbar-federation.stories.ts
index 4930084fe..68ace5833 100644
--- a/packages/frontend/src/ui/_common_/statusbar-federation.stories.ts
+++ b/packages/frontend/src/ui/_common_/statusbar-federation.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: statusbar_federation,
 };
 export const Default = {
-	components: {
-		statusbar_federation,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				statusbar_federation,
+			},
+			props: Object.keys(argTypes),
+			template: '<statusbar_federation v-bind="$props" />',
+		};
 	},
-	template: '<statusbar_federation />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/_common_/statusbar-rss.stories.ts b/packages/frontend/src/ui/_common_/statusbar-rss.stories.ts
index 0b3d8b8d1..86d16757f 100644
--- a/packages/frontend/src/ui/_common_/statusbar-rss.stories.ts
+++ b/packages/frontend/src/ui/_common_/statusbar-rss.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: statusbar_rss,
 };
 export const Default = {
-	components: {
-		statusbar_rss,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				statusbar_rss,
+			},
+			props: Object.keys(argTypes),
+			template: '<statusbar_rss v-bind="$props" />',
+		};
 	},
-	template: '<statusbar_rss />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/_common_/statusbar-user-list.stories.ts b/packages/frontend/src/ui/_common_/statusbar-user-list.stories.ts
index 1a803671f..e11114389 100644
--- a/packages/frontend/src/ui/_common_/statusbar-user-list.stories.ts
+++ b/packages/frontend/src/ui/_common_/statusbar-user-list.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: statusbar_user_list,
 };
 export const Default = {
-	components: {
-		statusbar_user_list,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				statusbar_user_list,
+			},
+			props: Object.keys(argTypes),
+			template: '<statusbar_user_list v-bind="$props" />',
+		};
 	},
-	template: '<statusbar_user_list />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/_common_/statusbars.stories.ts b/packages/frontend/src/ui/_common_/statusbars.stories.ts
index 05b955c54..57cbd826f 100644
--- a/packages/frontend/src/ui/_common_/statusbars.stories.ts
+++ b/packages/frontend/src/ui/_common_/statusbars.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: statusbars,
 };
 export const Default = {
-	components: {
-		statusbars,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				statusbars,
+			},
+			props: Object.keys(argTypes),
+			template: '<statusbars v-bind="$props" />',
+		};
 	},
-	template: '<statusbars />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/_common_/stream-indicator.stories.ts b/packages/frontend/src/ui/_common_/stream-indicator.stories.ts
index f114dc0ff..39cde128b 100644
--- a/packages/frontend/src/ui/_common_/stream-indicator.stories.ts
+++ b/packages/frontend/src/ui/_common_/stream-indicator.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: stream_indicator,
 };
 export const Default = {
-	components: {
-		stream_indicator,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				stream_indicator,
+			},
+			props: Object.keys(argTypes),
+			template: '<stream_indicator v-bind="$props" />',
+		};
 	},
-	template: '<stream_indicator />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/_common_/upload.stories.ts b/packages/frontend/src/ui/_common_/upload.stories.ts
index 4669ca5d1..e6d85f539 100644
--- a/packages/frontend/src/ui/_common_/upload.stories.ts
+++ b/packages/frontend/src/ui/_common_/upload.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: upload,
 };
 export const Default = {
-	components: {
-		upload,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				upload,
+			},
+			props: Object.keys(argTypes),
+			template: '<upload v-bind="$props" />',
+		};
 	},
-	template: '<upload />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/classic.header.stories.ts b/packages/frontend/src/ui/classic.header.stories.ts
index 9082630c2..cc847e712 100644
--- a/packages/frontend/src/ui/classic.header.stories.ts
+++ b/packages/frontend/src/ui/classic.header.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: classic_header,
 };
 export const Default = {
-	components: {
-		classic_header,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				classic_header,
+			},
+			props: Object.keys(argTypes),
+			template: '<classic_header v-bind="$props" />',
+		};
 	},
-	template: '<classic_header />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/classic.sidebar.stories.ts b/packages/frontend/src/ui/classic.sidebar.stories.ts
index 5e3f7eb98..741da3d14 100644
--- a/packages/frontend/src/ui/classic.sidebar.stories.ts
+++ b/packages/frontend/src/ui/classic.sidebar.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: classic_sidebar,
 };
 export const Default = {
-	components: {
-		classic_sidebar,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				classic_sidebar,
+			},
+			props: Object.keys(argTypes),
+			template: '<classic_sidebar v-bind="$props" />',
+		};
 	},
-	template: '<classic_sidebar />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/classic.stories.ts b/packages/frontend/src/ui/classic.stories.ts
index 64601510a..cd3225173 100644
--- a/packages/frontend/src/ui/classic.stories.ts
+++ b/packages/frontend/src/ui/classic.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: classic,
 };
 export const Default = {
-	components: {
-		classic,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				classic,
+			},
+			props: Object.keys(argTypes),
+			template: '<classic v-bind="$props" />',
+		};
 	},
-	template: '<classic />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck.stories.ts b/packages/frontend/src/ui/deck.stories.ts
index fbd352ec1..34bd26ace 100644
--- a/packages/frontend/src/ui/deck.stories.ts
+++ b/packages/frontend/src/ui/deck.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: deck,
 };
 export const Default = {
-	components: {
-		deck,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				deck,
+			},
+			props: Object.keys(argTypes),
+			template: '<deck v-bind="$props" />',
+		};
 	},
-	template: '<deck />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/antenna-column.stories.ts b/packages/frontend/src/ui/deck/antenna-column.stories.ts
index 4965e4a3d..37f6bace9 100644
--- a/packages/frontend/src/ui/deck/antenna-column.stories.ts
+++ b/packages/frontend/src/ui/deck/antenna-column.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: antenna_column,
 };
 export const Default = {
-	components: {
-		antenna_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				antenna_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<antenna_column v-bind="$props" />',
+		};
 	},
-	template: '<antenna_column />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/channel-column.stories.ts b/packages/frontend/src/ui/deck/channel-column.stories.ts
index 0290eb96d..3a4a232d0 100644
--- a/packages/frontend/src/ui/deck/channel-column.stories.ts
+++ b/packages/frontend/src/ui/deck/channel-column.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: channel_column,
 };
 export const Default = {
-	components: {
-		channel_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				channel_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<channel_column v-bind="$props" />',
+		};
 	},
-	template: '<channel_column />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/column-core.stories.ts b/packages/frontend/src/ui/deck/column-core.stories.ts
index 7d1262c8a..14174bf72 100644
--- a/packages/frontend/src/ui/deck/column-core.stories.ts
+++ b/packages/frontend/src/ui/deck/column-core.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: column_core,
 };
 export const Default = {
-	components: {
-		column_core,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				column_core,
+			},
+			props: Object.keys(argTypes),
+			template: '<column_core v-bind="$props" />',
+		};
 	},
-	template: '<column_core />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/column.stories.ts b/packages/frontend/src/ui/deck/column.stories.ts
index f53f74b79..7c3e7b69e 100644
--- a/packages/frontend/src/ui/deck/column.stories.ts
+++ b/packages/frontend/src/ui/deck/column.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: column,
 };
 export const Default = {
-	components: {
-		column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				column,
+			},
+			props: Object.keys(argTypes),
+			template: '<column v-bind="$props" />',
+		};
 	},
-	template: '<column />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/direct-column.stories.ts b/packages/frontend/src/ui/deck/direct-column.stories.ts
index 34a721c95..a7ce6757e 100644
--- a/packages/frontend/src/ui/deck/direct-column.stories.ts
+++ b/packages/frontend/src/ui/deck/direct-column.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: direct_column,
 };
 export const Default = {
-	components: {
-		direct_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				direct_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<direct_column v-bind="$props" />',
+		};
 	},
-	template: '<direct_column />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/list-column.stories.ts b/packages/frontend/src/ui/deck/list-column.stories.ts
index 2eac36177..7d2745f4a 100644
--- a/packages/frontend/src/ui/deck/list-column.stories.ts
+++ b/packages/frontend/src/ui/deck/list-column.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: list_column,
 };
 export const Default = {
-	components: {
-		list_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				list_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<list_column v-bind="$props" />',
+		};
 	},
-	template: '<list_column />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/main-column.stories.ts b/packages/frontend/src/ui/deck/main-column.stories.ts
index 8d4c269d8..60021a5d7 100644
--- a/packages/frontend/src/ui/deck/main-column.stories.ts
+++ b/packages/frontend/src/ui/deck/main-column.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: main_column,
 };
 export const Default = {
-	components: {
-		main_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				main_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<main_column v-bind="$props" />',
+		};
 	},
-	template: '<main_column />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/mentions-column.stories.ts b/packages/frontend/src/ui/deck/mentions-column.stories.ts
index 88b20b860..16e2b2e1d 100644
--- a/packages/frontend/src/ui/deck/mentions-column.stories.ts
+++ b/packages/frontend/src/ui/deck/mentions-column.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: mentions_column,
 };
 export const Default = {
-	components: {
-		mentions_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				mentions_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<mentions_column v-bind="$props" />',
+		};
 	},
-	template: '<mentions_column />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/notifications-column.stories.ts b/packages/frontend/src/ui/deck/notifications-column.stories.ts
index 5467be128..06d18ef9b 100644
--- a/packages/frontend/src/ui/deck/notifications-column.stories.ts
+++ b/packages/frontend/src/ui/deck/notifications-column.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: notifications_column,
 };
 export const Default = {
-	components: {
-		notifications_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				notifications_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<notifications_column v-bind="$props" />',
+		};
 	},
-	template: '<notifications_column />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/tl-column.stories.ts b/packages/frontend/src/ui/deck/tl-column.stories.ts
index 13093a2ac..741464063 100644
--- a/packages/frontend/src/ui/deck/tl-column.stories.ts
+++ b/packages/frontend/src/ui/deck/tl-column.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: tl_column,
 };
 export const Default = {
-	components: {
-		tl_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				tl_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<tl_column v-bind="$props" />',
+		};
 	},
-	template: '<tl_column />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/deck/widgets-column.stories.ts b/packages/frontend/src/ui/deck/widgets-column.stories.ts
index c0dfb372f..27a392cf6 100644
--- a/packages/frontend/src/ui/deck/widgets-column.stories.ts
+++ b/packages/frontend/src/ui/deck/widgets-column.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: widgets_column,
 };
 export const Default = {
-	components: {
-		widgets_column,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				widgets_column,
+			},
+			props: Object.keys(argTypes),
+			template: '<widgets_column v-bind="$props" />',
+		};
 	},
-	template: '<widgets_column />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/universal.stories.ts b/packages/frontend/src/ui/universal.stories.ts
index c46a4eeff..d049fb3ae 100644
--- a/packages/frontend/src/ui/universal.stories.ts
+++ b/packages/frontend/src/ui/universal.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: universal,
 };
 export const Default = {
-	components: {
-		universal,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				universal,
+			},
+			props: Object.keys(argTypes),
+			template: '<universal v-bind="$props" />',
+		};
 	},
-	template: '<universal />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/universal.widgets.stories.ts b/packages/frontend/src/ui/universal.widgets.stories.ts
index 590f6b1ca..8c85bf27e 100644
--- a/packages/frontend/src/ui/universal.widgets.stories.ts
+++ b/packages/frontend/src/ui/universal.widgets.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: universal_widgets,
 };
 export const Default = {
-	components: {
-		universal_widgets,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				universal_widgets,
+			},
+			props: Object.keys(argTypes),
+			template: '<universal_widgets v-bind="$props" />',
+		};
 	},
-	template: '<universal_widgets />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/visitor.stories.ts b/packages/frontend/src/ui/visitor.stories.ts
index 81b1f5190..5a725cb4b 100644
--- a/packages/frontend/src/ui/visitor.stories.ts
+++ b/packages/frontend/src/ui/visitor.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: visitor,
 };
 export const Default = {
-	components: {
-		visitor,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				visitor,
+			},
+			props: Object.keys(argTypes),
+			template: '<visitor v-bind="$props" />',
+		};
 	},
-	template: '<visitor />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/visitor/a.stories.ts b/packages/frontend/src/ui/visitor/a.stories.ts
index e10d21c20..e430cd974 100644
--- a/packages/frontend/src/ui/visitor/a.stories.ts
+++ b/packages/frontend/src/ui/visitor/a.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: a,
 };
 export const Default = {
-	components: {
-		a,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				a,
+			},
+			props: Object.keys(argTypes),
+			template: '<a v-bind="$props" />',
+		};
 	},
-	template: '<a />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/visitor/b.stories.ts b/packages/frontend/src/ui/visitor/b.stories.ts
index 586927134..f329bae1a 100644
--- a/packages/frontend/src/ui/visitor/b.stories.ts
+++ b/packages/frontend/src/ui/visitor/b.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: b,
 };
 export const Default = {
-	components: {
-		b,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				b,
+			},
+			props: Object.keys(argTypes),
+			template: '<b v-bind="$props" />',
+		};
 	},
-	template: '<b />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/visitor/header.stories.ts b/packages/frontend/src/ui/visitor/header.stories.ts
index 403f45978..2ecd08b22 100644
--- a/packages/frontend/src/ui/visitor/header.stories.ts
+++ b/packages/frontend/src/ui/visitor/header.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: header,
 };
 export const Default = {
-	components: {
-		header,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				header,
+			},
+			props: Object.keys(argTypes),
+			template: '<header v-bind="$props" />',
+		};
 	},
-	template: '<header />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/visitor/kanban.stories.ts b/packages/frontend/src/ui/visitor/kanban.stories.ts
index 57141ea07..4468ebc8a 100644
--- a/packages/frontend/src/ui/visitor/kanban.stories.ts
+++ b/packages/frontend/src/ui/visitor/kanban.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: kanban,
 };
 export const Default = {
-	components: {
-		kanban,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				kanban,
+			},
+			props: Object.keys(argTypes),
+			template: '<kanban v-bind="$props" />',
+		};
 	},
-	template: '<kanban />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/ui/zen.stories.ts b/packages/frontend/src/ui/zen.stories.ts
index 08c0d42c0..ff8c8bca9 100644
--- a/packages/frontend/src/ui/zen.stories.ts
+++ b/packages/frontend/src/ui/zen.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: zen,
 };
 export const Default = {
-	components: {
-		zen,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				zen,
+			},
+			props: Object.keys(argTypes),
+			template: '<zen v-bind="$props" />',
+		};
 	},
-	template: '<zen />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetActivity.calendar.stories.ts b/packages/frontend/src/widgets/WidgetActivity.calendar.stories.ts
index 27feb2741..5f2d78036 100644
--- a/packages/frontend/src/widgets/WidgetActivity.calendar.stories.ts
+++ b/packages/frontend/src/widgets/WidgetActivity.calendar.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetActivity_calendar,
 };
 export const Default = {
-	components: {
-		WidgetActivity_calendar,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetActivity_calendar,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetActivity_calendar v-bind="$props" />',
+		};
 	},
-	template: '<WidgetActivity_calendar />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetActivity.chart.stories.ts b/packages/frontend/src/widgets/WidgetActivity.chart.stories.ts
index 0c009d6fd..3cecf4a68 100644
--- a/packages/frontend/src/widgets/WidgetActivity.chart.stories.ts
+++ b/packages/frontend/src/widgets/WidgetActivity.chart.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetActivity_chart,
 };
 export const Default = {
-	components: {
-		WidgetActivity_chart,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetActivity_chart,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetActivity_chart v-bind="$props" />',
+		};
 	},
-	template: '<WidgetActivity_chart />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetActivity.stories.ts b/packages/frontend/src/widgets/WidgetActivity.stories.ts
index ea9270960..01658db95 100644
--- a/packages/frontend/src/widgets/WidgetActivity.stories.ts
+++ b/packages/frontend/src/widgets/WidgetActivity.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetActivity,
 };
 export const Default = {
-	components: {
-		WidgetActivity,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetActivity,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetActivity v-bind="$props" />',
+		};
 	},
-	template: '<WidgetActivity />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetAichan.stories.ts b/packages/frontend/src/widgets/WidgetAichan.stories.ts
index 0ad9b1d72..b997f368a 100644
--- a/packages/frontend/src/widgets/WidgetAichan.stories.ts
+++ b/packages/frontend/src/widgets/WidgetAichan.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetAichan,
 };
 export const Default = {
-	components: {
-		WidgetAichan,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetAichan,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetAichan v-bind="$props" />',
+		};
 	},
-	template: '<WidgetAichan />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetAiscript.stories.ts b/packages/frontend/src/widgets/WidgetAiscript.stories.ts
index 651e14f9f..f64cf7799 100644
--- a/packages/frontend/src/widgets/WidgetAiscript.stories.ts
+++ b/packages/frontend/src/widgets/WidgetAiscript.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetAiscript,
 };
 export const Default = {
-	components: {
-		WidgetAiscript,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetAiscript,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetAiscript v-bind="$props" />',
+		};
 	},
-	template: '<WidgetAiscript />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetAiscriptApp.stories.ts b/packages/frontend/src/widgets/WidgetAiscriptApp.stories.ts
index 0043d6fff..892110bc2 100644
--- a/packages/frontend/src/widgets/WidgetAiscriptApp.stories.ts
+++ b/packages/frontend/src/widgets/WidgetAiscriptApp.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetAiscriptApp,
 };
 export const Default = {
-	components: {
-		WidgetAiscriptApp,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetAiscriptApp,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetAiscriptApp v-bind="$props" />',
+		};
 	},
-	template: '<WidgetAiscriptApp />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetButton.stories.ts b/packages/frontend/src/widgets/WidgetButton.stories.ts
index c56165106..3a07679d7 100644
--- a/packages/frontend/src/widgets/WidgetButton.stories.ts
+++ b/packages/frontend/src/widgets/WidgetButton.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetButton,
 };
 export const Default = {
-	components: {
-		WidgetButton,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetButton,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetButton v-bind="$props" />',
+		};
 	},
-	template: '<WidgetButton />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetCalendar.stories.ts b/packages/frontend/src/widgets/WidgetCalendar.stories.ts
index a626ff63b..ccb7c184b 100644
--- a/packages/frontend/src/widgets/WidgetCalendar.stories.ts
+++ b/packages/frontend/src/widgets/WidgetCalendar.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetCalendar,
 };
 export const Default = {
-	components: {
-		WidgetCalendar,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetCalendar,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetCalendar v-bind="$props" />',
+		};
 	},
-	template: '<WidgetCalendar />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetClicker.stories.ts b/packages/frontend/src/widgets/WidgetClicker.stories.ts
index 37bffbaf2..ce6d40064 100644
--- a/packages/frontend/src/widgets/WidgetClicker.stories.ts
+++ b/packages/frontend/src/widgets/WidgetClicker.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetClicker,
 };
 export const Default = {
-	components: {
-		WidgetClicker,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetClicker,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetClicker v-bind="$props" />',
+		};
 	},
-	template: '<WidgetClicker />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetClock.stories.ts b/packages/frontend/src/widgets/WidgetClock.stories.ts
index 2ae8925a3..0eb10f1f0 100644
--- a/packages/frontend/src/widgets/WidgetClock.stories.ts
+++ b/packages/frontend/src/widgets/WidgetClock.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetClock,
 };
 export const Default = {
-	components: {
-		WidgetClock,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetClock,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetClock v-bind="$props" />',
+		};
 	},
-	template: '<WidgetClock />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetDigitalClock.stories.ts b/packages/frontend/src/widgets/WidgetDigitalClock.stories.ts
index 0b812ee24..e37c4108d 100644
--- a/packages/frontend/src/widgets/WidgetDigitalClock.stories.ts
+++ b/packages/frontend/src/widgets/WidgetDigitalClock.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetDigitalClock,
 };
 export const Default = {
-	components: {
-		WidgetDigitalClock,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetDigitalClock,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetDigitalClock v-bind="$props" />',
+		};
 	},
-	template: '<WidgetDigitalClock />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetFederation.stories.ts b/packages/frontend/src/widgets/WidgetFederation.stories.ts
index 9f88768c4..549f71c6f 100644
--- a/packages/frontend/src/widgets/WidgetFederation.stories.ts
+++ b/packages/frontend/src/widgets/WidgetFederation.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetFederation,
 };
 export const Default = {
-	components: {
-		WidgetFederation,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetFederation,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetFederation v-bind="$props" />',
+		};
 	},
-	template: '<WidgetFederation />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetInstanceCloud.stories.ts b/packages/frontend/src/widgets/WidgetInstanceCloud.stories.ts
index 188ff8039..8458d842f 100644
--- a/packages/frontend/src/widgets/WidgetInstanceCloud.stories.ts
+++ b/packages/frontend/src/widgets/WidgetInstanceCloud.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetInstanceCloud,
 };
 export const Default = {
-	components: {
-		WidgetInstanceCloud,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetInstanceCloud,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetInstanceCloud v-bind="$props" />',
+		};
 	},
-	template: '<WidgetInstanceCloud />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.stories.ts b/packages/frontend/src/widgets/WidgetInstanceInfo.stories.ts
index 555d77c6b..6a6505a79 100644
--- a/packages/frontend/src/widgets/WidgetInstanceInfo.stories.ts
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetInstanceInfo,
 };
 export const Default = {
-	components: {
-		WidgetInstanceInfo,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetInstanceInfo,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetInstanceInfo v-bind="$props" />',
+		};
 	},
-	template: '<WidgetInstanceInfo />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetJobQueue.stories.ts b/packages/frontend/src/widgets/WidgetJobQueue.stories.ts
index 54a702394..de7a7431c 100644
--- a/packages/frontend/src/widgets/WidgetJobQueue.stories.ts
+++ b/packages/frontend/src/widgets/WidgetJobQueue.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetJobQueue,
 };
 export const Default = {
-	components: {
-		WidgetJobQueue,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetJobQueue,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetJobQueue v-bind="$props" />',
+		};
 	},
-	template: '<WidgetJobQueue />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetMemo.stories.ts b/packages/frontend/src/widgets/WidgetMemo.stories.ts
index cf1a1d269..202529c8a 100644
--- a/packages/frontend/src/widgets/WidgetMemo.stories.ts
+++ b/packages/frontend/src/widgets/WidgetMemo.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetMemo,
 };
 export const Default = {
-	components: {
-		WidgetMemo,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetMemo,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetMemo v-bind="$props" />',
+		};
 	},
-	template: '<WidgetMemo />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetNotifications.stories.ts b/packages/frontend/src/widgets/WidgetNotifications.stories.ts
index e21c7f77c..bf1f7aeca 100644
--- a/packages/frontend/src/widgets/WidgetNotifications.stories.ts
+++ b/packages/frontend/src/widgets/WidgetNotifications.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetNotifications,
 };
 export const Default = {
-	components: {
-		WidgetNotifications,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetNotifications,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetNotifications v-bind="$props" />',
+		};
 	},
-	template: '<WidgetNotifications />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetOnlineUsers.stories.ts b/packages/frontend/src/widgets/WidgetOnlineUsers.stories.ts
index 9e4161b53..fa7371a49 100644
--- a/packages/frontend/src/widgets/WidgetOnlineUsers.stories.ts
+++ b/packages/frontend/src/widgets/WidgetOnlineUsers.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetOnlineUsers,
 };
 export const Default = {
-	components: {
-		WidgetOnlineUsers,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetOnlineUsers,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetOnlineUsers v-bind="$props" />',
+		};
 	},
-	template: '<WidgetOnlineUsers />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetPhotos.stories.ts b/packages/frontend/src/widgets/WidgetPhotos.stories.ts
index 77c755a7a..4e335e01c 100644
--- a/packages/frontend/src/widgets/WidgetPhotos.stories.ts
+++ b/packages/frontend/src/widgets/WidgetPhotos.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetPhotos,
 };
 export const Default = {
-	components: {
-		WidgetPhotos,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetPhotos,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetPhotos v-bind="$props" />',
+		};
 	},
-	template: '<WidgetPhotos />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetPostForm.stories.ts b/packages/frontend/src/widgets/WidgetPostForm.stories.ts
index 2576a8b08..5d03be5ce 100644
--- a/packages/frontend/src/widgets/WidgetPostForm.stories.ts
+++ b/packages/frontend/src/widgets/WidgetPostForm.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetPostForm,
 };
 export const Default = {
-	components: {
-		WidgetPostForm,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetPostForm,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetPostForm v-bind="$props" />',
+		};
 	},
-	template: '<WidgetPostForm />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetProfile.stories.ts b/packages/frontend/src/widgets/WidgetProfile.stories.ts
index 7654d805c..6b9b8b9ad 100644
--- a/packages/frontend/src/widgets/WidgetProfile.stories.ts
+++ b/packages/frontend/src/widgets/WidgetProfile.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetProfile,
 };
 export const Default = {
-	components: {
-		WidgetProfile,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetProfile,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetProfile v-bind="$props" />',
+		};
 	},
-	template: '<WidgetProfile />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetRss.stories.ts b/packages/frontend/src/widgets/WidgetRss.stories.ts
index baae27167..02bd406d4 100644
--- a/packages/frontend/src/widgets/WidgetRss.stories.ts
+++ b/packages/frontend/src/widgets/WidgetRss.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetRss,
 };
 export const Default = {
-	components: {
-		WidgetRss,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetRss,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetRss v-bind="$props" />',
+		};
 	},
-	template: '<WidgetRss />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetRssTicker.stories.ts b/packages/frontend/src/widgets/WidgetRssTicker.stories.ts
index f70c23210..16d4a0855 100644
--- a/packages/frontend/src/widgets/WidgetRssTicker.stories.ts
+++ b/packages/frontend/src/widgets/WidgetRssTicker.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetRssTicker,
 };
 export const Default = {
-	components: {
-		WidgetRssTicker,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetRssTicker,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetRssTicker v-bind="$props" />',
+		};
 	},
-	template: '<WidgetRssTicker />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetSlideshow.stories.ts b/packages/frontend/src/widgets/WidgetSlideshow.stories.ts
index 8671a3483..59394b70d 100644
--- a/packages/frontend/src/widgets/WidgetSlideshow.stories.ts
+++ b/packages/frontend/src/widgets/WidgetSlideshow.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetSlideshow,
 };
 export const Default = {
-	components: {
-		WidgetSlideshow,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetSlideshow,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetSlideshow v-bind="$props" />',
+		};
 	},
-	template: '<WidgetSlideshow />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetTimeline.stories.ts b/packages/frontend/src/widgets/WidgetTimeline.stories.ts
index e067689c2..7b00b7352 100644
--- a/packages/frontend/src/widgets/WidgetTimeline.stories.ts
+++ b/packages/frontend/src/widgets/WidgetTimeline.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetTimeline,
 };
 export const Default = {
-	components: {
-		WidgetTimeline,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetTimeline,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetTimeline v-bind="$props" />',
+		};
 	},
-	template: '<WidgetTimeline />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetTrends.stories.ts b/packages/frontend/src/widgets/WidgetTrends.stories.ts
index 96ee667be..c1dca9039 100644
--- a/packages/frontend/src/widgets/WidgetTrends.stories.ts
+++ b/packages/frontend/src/widgets/WidgetTrends.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetTrends,
 };
 export const Default = {
-	components: {
-		WidgetTrends,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetTrends,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetTrends v-bind="$props" />',
+		};
 	},
-	template: '<WidgetTrends />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetUnixClock.stories.ts b/packages/frontend/src/widgets/WidgetUnixClock.stories.ts
index 1dd22e3a7..3c388f3f4 100644
--- a/packages/frontend/src/widgets/WidgetUnixClock.stories.ts
+++ b/packages/frontend/src/widgets/WidgetUnixClock.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetUnixClock,
 };
 export const Default = {
-	components: {
-		WidgetUnixClock,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetUnixClock,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetUnixClock v-bind="$props" />',
+		};
 	},
-	template: '<WidgetUnixClock />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/WidgetUserList.stories.ts b/packages/frontend/src/widgets/WidgetUserList.stories.ts
index 2435b9a5b..528f9d26c 100644
--- a/packages/frontend/src/widgets/WidgetUserList.stories.ts
+++ b/packages/frontend/src/widgets/WidgetUserList.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: WidgetUserList,
 };
 export const Default = {
-	components: {
-		WidgetUserList,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				WidgetUserList,
+			},
+			props: Object.keys(argTypes),
+			template: '<WidgetUserList v-bind="$props" />',
+		};
 	},
-	template: '<WidgetUserList />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.stories.ts b/packages/frontend/src/widgets/server-metric/cpu-mem.stories.ts
index 9beb5e294..0c376fdf9 100644
--- a/packages/frontend/src/widgets/server-metric/cpu-mem.stories.ts
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: cpu_mem,
 };
 export const Default = {
-	components: {
-		cpu_mem,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				cpu_mem,
+			},
+			props: Object.keys(argTypes),
+			template: '<cpu_mem v-bind="$props" />',
+		};
 	},
-	template: '<cpu_mem />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/server-metric/cpu.stories.ts b/packages/frontend/src/widgets/server-metric/cpu.stories.ts
index a55dcad76..aefd4642b 100644
--- a/packages/frontend/src/widgets/server-metric/cpu.stories.ts
+++ b/packages/frontend/src/widgets/server-metric/cpu.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: cpu,
 };
 export const Default = {
-	components: {
-		cpu,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				cpu,
+			},
+			props: Object.keys(argTypes),
+			template: '<cpu v-bind="$props" />',
+		};
 	},
-	template: '<cpu />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/server-metric/disk.stories.ts b/packages/frontend/src/widgets/server-metric/disk.stories.ts
index c63f3cd4a..3b97ad1a9 100644
--- a/packages/frontend/src/widgets/server-metric/disk.stories.ts
+++ b/packages/frontend/src/widgets/server-metric/disk.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: disk,
 };
 export const Default = {
-	components: {
-		disk,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				disk,
+			},
+			props: Object.keys(argTypes),
+			template: '<disk v-bind="$props" />',
+		};
 	},
-	template: '<disk />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/server-metric/index.stories.ts b/packages/frontend/src/widgets/server-metric/index.stories.ts
index ee29d8a54..a982729b6 100644
--- a/packages/frontend/src/widgets/server-metric/index.stories.ts
+++ b/packages/frontend/src/widgets/server-metric/index.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: index,
 };
 export const Default = {
-	components: {
-		index,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				index,
+			},
+			props: Object.keys(argTypes),
+			template: '<index v-bind="$props" />',
+		};
 	},
-	template: '<index />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/server-metric/mem.stories.ts b/packages/frontend/src/widgets/server-metric/mem.stories.ts
index 231f9459b..acfa33634 100644
--- a/packages/frontend/src/widgets/server-metric/mem.stories.ts
+++ b/packages/frontend/src/widgets/server-metric/mem.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: mem,
 };
 export const Default = {
-	components: {
-		mem,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				mem,
+			},
+			props: Object.keys(argTypes),
+			template: '<mem v-bind="$props" />',
+		};
 	},
-	template: '<mem />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/server-metric/net.stories.ts b/packages/frontend/src/widgets/server-metric/net.stories.ts
index f5fb09844..3f231caf8 100644
--- a/packages/frontend/src/widgets/server-metric/net.stories.ts
+++ b/packages/frontend/src/widgets/server-metric/net.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: net,
 };
 export const Default = {
-	components: {
-		net,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				net,
+			},
+			props: Object.keys(argTypes),
+			template: '<net v-bind="$props" />',
+		};
 	},
-	template: '<net />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/packages/frontend/src/widgets/server-metric/pie.stories.ts b/packages/frontend/src/widgets/server-metric/pie.stories.ts
index 7e56a6a72..32f8c898c 100644
--- a/packages/frontend/src/widgets/server-metric/pie.stories.ts
+++ b/packages/frontend/src/widgets/server-metric/pie.stories.ts
@@ -5,10 +5,15 @@ const meta = {
 	component: pie,
 };
 export const Default = {
-	components: {
-		pie,
+	render(args, { argTypes }) {
+		return {
+			components: {
+				pie,
+			},
+			props: Object.keys(argTypes),
+			template: '<pie v-bind="$props" />',
+		};
 	},
-	template: '<pie />',
 	parameters: {
 		layout: 'centered',
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 98b347b7f..b1b170a5e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -402,7 +402,9 @@ importers:
       '@storybook/addon-interactions': ^7.0.0-rc.4
       '@storybook/addon-links': ^7.0.0-rc.4
       '@storybook/blocks': ^7.0.0-rc.4
+      '@storybook/manager-api': 7.0.0-rc.4
       '@storybook/testing-library': ^0.0.14-next.1
+      '@storybook/theming': 7.0.0-rc.4
       '@storybook/vue3': ^7.0.0-rc.4
       '@storybook/vue3-vite': ^7.0.0-rc.4
       '@syuilo/aiscript': 0.13.1
@@ -459,6 +461,8 @@ importers:
       matter-js: 0.19.0
       mfm-js: 0.23.3
       misskey-js: 0.0.15
+      msw: ^1.1.0
+      msw-storybook-addon: ^1.8.0
       photoswipe: 5.3.6
       prettier: ^2.8.4
       prismjs: 1.29.0
@@ -561,7 +565,9 @@ importers:
       '@storybook/addon-interactions': 7.0.0-rc.4_biqbaboplfbrettd7655fr4n2y
       '@storybook/addon-links': 7.0.0-rc.4_biqbaboplfbrettd7655fr4n2y
       '@storybook/blocks': 7.0.0-rc.4_biqbaboplfbrettd7655fr4n2y
+      '@storybook/manager-api': 7.0.0-rc.4_biqbaboplfbrettd7655fr4n2y
       '@storybook/testing-library': 0.0.14-next.1
+      '@storybook/theming': 7.0.0-rc.4_biqbaboplfbrettd7655fr4n2y
       '@storybook/vue3': 7.0.0-rc.4_vue@3.2.47
       '@storybook/vue3-vite': 7.0.0-rc.4_y344amzr55z4s7r3flz6cvxaae
       '@testing-library/vue': 6.6.1_a2ihsjreowava2sm4iorpgwkom
@@ -590,6 +596,8 @@ importers:
       eslint-plugin-import: 2.27.5_uyiasnnzcqrxqkfvjklwnmwcha
       eslint-plugin-vue: 9.9.0_eslint@8.35.0
       happy-dom: 8.9.0
+      msw: 1.1.0_typescript@4.9.5
+      msw-storybook-addon: 1.8.0_msw@1.1.0
       prettier: 2.8.4
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
@@ -3866,6 +3874,30 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@mswjs/cookies/0.2.2:
+    resolution: {integrity: sha512-mlN83YSrcFgk7Dm1Mys40DLssI1KdJji2CMKN8eOlBqsTADYzj2+jWzsANsUTFbxDMWPD5e9bfA1RGqBpS3O1g==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@types/set-cookie-parser': 2.4.2
+      set-cookie-parser: 2.5.1
+    dev: true
+
+  /@mswjs/interceptors/0.17.9:
+    resolution: {integrity: sha512-4LVGt03RobMH/7ZrbHqRxQrS9cc2uh+iNKSj8UWr8M26A2i793ju+csaB5zaqYltqJmA2jUq4VeYfKmVqvsXQg==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@open-draft/until': 1.0.3
+      '@types/debug': 4.1.7
+      '@xmldom/xmldom': 0.8.6
+      debug: 4.3.4
+      headers-polyfill: 3.1.2
+      outvariant: 1.3.0
+      strict-event-emitter: 0.2.8
+      web-encoding: 1.1.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@ndelangen/get-tarball/3.0.7:
     resolution: {integrity: sha512-NqGfTZIZpRFef1GoVaShSSRwDC3vde3ThtTeqFdcYd6ipKqnfEVhjK2hUeHjCQUcptyZr2TONqcloFXM+5QBrQ==}
     dependencies:
@@ -4009,6 +4041,10 @@ packages:
       - encoding
     dev: false
 
+  /@open-draft/until/1.0.3:
+    resolution: {integrity: sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==}
+    dev: true
+
   /@peertube/http-signature/1.7.0:
     resolution: {integrity: sha512-aGQIwo6/sWtyyqhVK4e1MtxYz4N1X8CNt6SOtCc+Wnczs5S5ONaLHDDR8LYaGn0MgOwvGgXyuZ5sJIfd7iyoUw==}
     engines: {node: '>=0.10'}
@@ -4910,7 +4946,7 @@ packages:
     dependencies:
       '@storybook/client-logger': 7.0.0-rc.4
       memoizerific: 1.11.3
-      qs: 6.10.4
+      qs: 6.11.0
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     dev: true
@@ -5457,6 +5493,16 @@ packages:
     resolution: {integrity: sha512-v6LCdKfK6BwcqMo+wYW05rLS12S0ZO0Fl4w1h4aaZMD7bqT3gVUns6FvLJKGZHQmYn3SX55JWGpziwJRwVgutA==}
     dev: true
 
+  /@types/cookie/0.4.1:
+    resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==}
+    dev: true
+
+  /@types/debug/4.1.7:
+    resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==}
+    dependencies:
+      '@types/ms': 0.7.31
+    dev: true
+
   /@types/detect-port/1.3.2:
     resolution: {integrity: sha512-xxgAGA2SAU4111QefXPSp5eGbDm/hW6zhvYl9IeEPZEry9F4d66QAHm5qpUXjb6IsevZV/7emAEx5MhP6O192g==}
     dev: true
@@ -5584,6 +5630,10 @@ packages:
       pretty-format: 29.3.1
     dev: true
 
+  /@types/js-levenshtein/1.1.1:
+    resolution: {integrity: sha512-qC4bCqYGy1y/NP7dDVr7KJarn+PbX1nSpwA7JXdu0HxT3QYjO8MJ+cntENtHFVy2dRAyBV23OZ6MxsW1AM1L8g==}
+    dev: true
+
   /@types/js-yaml/4.0.5:
     resolution: {integrity: sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==}
     dev: true
@@ -5646,6 +5696,10 @@ packages:
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
     dev: true
 
+  /@types/ms/0.7.31:
+    resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
+    dev: true
+
   /@types/node-fetch/2.6.2:
     resolution: {integrity: sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==}
     dependencies:
@@ -5807,6 +5861,12 @@ packages:
     resolution: {integrity: sha512-DVoelQjcHaPshqyg0duirwuuaZ/teG4E3QGiQXbzso8akd12VRtgGYCao8viRFXHVLJOlo/Elh1nfbMsRQJXVA==}
     dev: true
 
+  /@types/set-cookie-parser/2.4.2:
+    resolution: {integrity: sha512-fBZgytwhYAUkj/jC/FAV4RQ5EerRup1YQsXQCh8rZfiHkc4UahC192oH0smGwsXol3cL3A5oETuAHeQHmhXM4w==}
+    dependencies:
+      '@types/node': 18.15.0
+    dev: true
+
   /@types/sharp/0.31.1:
     resolution: {integrity: sha512-5nWwamN9ZFHXaYEincMSuza8nNfOof8nmO+mcI+Agx1uMUk4/pQnNIcix+9rLPXzKrm1pS34+6WRDbDV0Jn7ag==}
     dependencies:
@@ -6318,6 +6378,11 @@ packages:
     resolution: {integrity: sha512-pUrWq3V5PiSGFLeLxoGqReTZmiiXwY3jRkIG5sLLKjyqNxrwm/04b4nw7LSmGWJcKk59XOM/YRTUwOzo4MMlow==}
     dev: false
 
+  /@xmldom/xmldom/0.8.6:
+    resolution: {integrity: sha512-uRjjusqpoqfmRkTaNuLJ2VohVr67Q5YwDATW3VU7PfzTj6IRaihGrYI7zckGZjxQPBIp63nfvJbM+Yu5ICh0Bg==}
+    engines: {node: '>=10.0.0'}
+    dev: true
+
   /@yarnpkg/esbuild-plugin-pnp/3.0.0-rc.15_esbuild@0.16.17:
     resolution: {integrity: sha512-kYzDJO5CA9sy+on/s2aIW0411AklfCi8Ck/4QDivOqsMKpStZA2SsR+X27VTggGwpStWaLrjJcDcdDMowtG8MA==}
     engines: {node: '>=14.15.0'}
@@ -6328,6 +6393,12 @@ packages:
       tslib: 2.5.0
     dev: true
 
+  /@zxing/text-encoding/0.9.0:
+    resolution: {integrity: sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==}
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /abab/2.0.6:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
     dev: false
@@ -7581,7 +7652,7 @@ packages:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
       function-bind: 1.1.1
-      get-intrinsic: 1.1.3
+      get-intrinsic: 1.2.0
 
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
@@ -7686,6 +7757,14 @@ packages:
       supports-color: 5.5.0
     dev: true
 
+  /chalk/4.1.1:
+    resolution: {integrity: sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
   /chalk/4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -7707,6 +7786,10 @@ packages:
     dependencies:
       is-regex: 1.1.4
 
+  /chardet/0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+    dev: true
+
   /chart.js/4.2.1:
     resolution: {integrity: sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==}
     engines: {pnpm: ^7.0.0}
@@ -7855,6 +7938,11 @@ packages:
       yargs: 16.2.0
     dev: false
 
+  /cli-spinners/2.7.0:
+    resolution: {integrity: sha512-qu3pN8Y3qHNgE2AFweciB1IfMnmZ/fsNTEE+NOFjmGB2F/7rLhnhzppvpCnN4FovtP26k8lHyy9ptEbNwWFLzw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /cli-table3/0.6.3:
     resolution: {integrity: sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==}
     engines: {node: 10.* || >= 12.*}
@@ -7880,6 +7968,11 @@ packages:
       string-width: 5.1.2
     dev: true
 
+  /cli-width/3.0.0:
+    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
+    engines: {node: '>= 10'}
+    dev: true
+
   /cliui/3.2.0:
     resolution: {integrity: sha512-0yayqDxWQbqk3ojkYqUKqaAQ6AfNKeKWRNA8kR0WXzAsdHpP4BIaOmMAG87JGuO6qcobyW4GjxHd9PmhEd+T9w==}
     dependencies:
@@ -7938,7 +8031,6 @@ packages:
   /clone/1.0.4:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
-    dev: false
 
   /clone/2.1.2:
     resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
@@ -8198,6 +8290,11 @@ packages:
     resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
     dev: true
 
+  /cookie/0.4.2:
+    resolution: {integrity: sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==}
+    engines: {node: '>= 0.6'}
+    dev: true
+
   /cookie/0.5.0:
     resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==}
     engines: {node: '>= 0.6'}
@@ -8610,7 +8707,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       es-get-iterator: 1.1.3
-      get-intrinsic: 1.1.3
+      get-intrinsic: 1.2.0
       is-arguments: 1.1.1
       is-array-buffer: 3.0.2
       is-date-object: 1.0.5
@@ -8659,6 +8756,12 @@ packages:
     engines: {node: '>= 0.10'}
     dev: false
 
+  /defaults/1.0.4:
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
+    dependencies:
+      clone: 1.0.4
+    dev: true
+
   /defer-to-connect/2.0.1:
     resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
     engines: {node: '>=10'}
@@ -9043,7 +9146,7 @@ packages:
     resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
     dependencies:
       call-bind: 1.0.2
-      get-intrinsic: 1.1.3
+      get-intrinsic: 1.2.0
       has-symbols: 1.0.3
       is-arguments: 1.1.1
       is-map: 2.0.2
@@ -9806,7 +9909,6 @@ packages:
   /events/3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
-    dev: false
 
   /execa/0.7.0:
     resolution: {integrity: sha512-RztN09XglpYI7aBBrJCPW95jEH7YF1UEPOoX9yDhUTPdp7mK+CQvnLTuD10BNXZ3byLTu2uehZ8EcKT/4CGiFw==}
@@ -10003,6 +10105,15 @@ packages:
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
+  /external-editor/3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+    dev: true
+
   /extglob/2.0.4:
     resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==}
     engines: {node: '>=0.10.0'}
@@ -10659,13 +10770,6 @@ packages:
     resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==}
     dev: true
 
-  /get-intrinsic/1.1.3:
-    resolution: {integrity: sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==}
-    dependencies:
-      function-bind: 1.1.1
-      has: 1.0.3
-      has-symbols: 1.0.3
-
   /get-intrinsic/1.2.0:
     resolution: {integrity: sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==}
     dependencies:
@@ -10964,6 +11068,11 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
+  /graphql/16.6.0:
+    resolution: {integrity: sha512-KPIBPDlW7NxrbT/eh4qPXz5FiFdL5UbaA0XUNz2Rp3Z3hqBSkbj0GVjwFDztsWVauZUWsbKHgMg++sk8UX0bkw==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+    dev: true
+
   /gsap/3.11.4:
     resolution: {integrity: sha512-McHhEguHyExMMnjqKA8G+7TvxmlKQGMbjgwAilnFe1e4id7V/tFveRQ2YMZhTYu0oxHGWvbPltdVYQOu3z1SCA==}
     dev: false
@@ -11197,6 +11306,10 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  /headers-polyfill/3.1.2:
+    resolution: {integrity: sha512-tWCK4biJ6hcLqTviLXVR9DTRfYGQMXEIUj3gwJ2rZ5wO/at3XtkI4g8mCvFdUF9l1KMBNCfmNAdnahm1cgavQA==}
+    dev: true
+
   /hexoid/1.0.0:
     resolution: {integrity: sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==}
     engines: {node: '>=8'}
@@ -11443,6 +11556,27 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /inquirer/8.2.5:
+    resolution: {integrity: sha512-QAgPDQMEgrDssk1XiwwHoOGYF9BAbUcc1+j+FhEvaOt8/cKRqyLn0U5qA6F74fGhTMGxf92pOvPBeh29jQJDTQ==}
+    engines: {node: '>=12.0.0'}
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.21
+      mute-stream: 0.0.8
+      ora: 5.4.1
+      run-async: 2.4.1
+      rxjs: 7.8.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+      wrap-ansi: 7.0.0
+    dev: true
+
   /insert-text-at-cursor/0.3.0:
     resolution: {integrity: sha512-/nPtyeX9xPUvxZf+r0518B7uqNKlP+LqNJqSiXFEaa2T71rWIwTVXGH7hB9xO/EVdwa5/pWlFCPwShOW81XIxQ==}
     dev: false
@@ -11766,6 +11900,11 @@ packages:
       is-path-inside: 3.0.3
     dev: true
 
+  /is-interactive/1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
+    dev: true
+
   /is-ip/3.1.0:
     resolution: {integrity: sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==}
     engines: {node: '>=8'}
@@ -11798,6 +11937,10 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /is-node-process/1.0.1:
+    resolution: {integrity: sha512-5IcdXuf++TTNt3oGl9EBdkvndXA8gmc4bz/Y+mdEpWh3Mcn/+kOw6hI7LD5CocqJWMzeb0I0ClndRVNdEPuJXQ==}
+    dev: true
+
   /is-number-object/1.0.7:
     resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==}
     engines: {node: '>= 0.4'}
@@ -12574,6 +12717,11 @@ packages:
       nopt: 6.0.0
     dev: true
 
+  /js-levenshtein/1.1.6:
+    resolution: {integrity: sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /js-sdsl/4.2.0:
     resolution: {integrity: sha512-dyBIzQBDkCqCu+0upx25Y2jGdbTGxE9fshMsCdK0ViOongpV+n5tXRcZY9v7CaVQ79AGS9KA1KHtojxiM7aXSQ==}
     dev: true
@@ -13579,6 +13727,51 @@ packages:
     optionalDependencies:
       msgpackr-extract: 2.2.0
 
+  /msw-storybook-addon/1.8.0_msw@1.1.0:
+    resolution: {integrity: sha512-dw3vZwqjixmiur0vouRSOax7wPSu9Og2Hspy9JZFHf49bZRjwDiLF0Pfn2NXEkGviYJOJiGxS1ejoTiUwoSg4A==}
+    peerDependencies:
+      msw: '>=0.35.0 <2.0.0'
+    dependencies:
+      is-node-process: 1.0.1
+      msw: 1.1.0_typescript@4.9.5
+    dev: true
+
+  /msw/1.1.0_typescript@4.9.5:
+    resolution: {integrity: sha512-oqMvUXm1bMbwvGpoXAQVz8vXXQyQyx52HBDg3EDOK+dFXkQHssgkXEG4LfMwwZyr2Qt18I/w04XPaY4BkFTkzA==}
+    engines: {node: '>=14'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      typescript: '>= 4.4.x <= 4.9.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@mswjs/cookies': 0.2.2
+      '@mswjs/interceptors': 0.17.9
+      '@open-draft/until': 1.0.3
+      '@types/cookie': 0.4.1
+      '@types/js-levenshtein': 1.1.1
+      chalk: 4.1.1
+      chokidar: 3.5.3
+      cookie: 0.4.2
+      graphql: 16.6.0
+      headers-polyfill: 3.1.2
+      inquirer: 8.2.5
+      is-node-process: 1.0.1
+      js-levenshtein: 1.1.6
+      node-fetch: 2.6.7
+      outvariant: 1.3.0
+      path-to-regexp: 6.2.1
+      strict-event-emitter: 0.4.6
+      type-fest: 2.19.0
+      typescript: 4.9.5
+      yargs: 17.6.2
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: true
+
   /muggle-string/0.2.2:
     resolution: {integrity: sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==}
     dev: true
@@ -13592,6 +13785,10 @@ packages:
     engines: {node: '>= 0.10'}
     dev: false
 
+  /mute-stream/0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+    dev: true
+
   /mylas/2.1.13:
     resolution: {integrity: sha512-+MrqnJRtxdF+xngFfUUkIMQrUUL0KsxbADUkn23Z/4ibGg192Q+z+CQyiYwvWTsYjJygmMR8+w3ZDa98Zh6ESg==}
     engines: {node: '>=12.0.0'}
@@ -14117,6 +14314,21 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
+  /ora/5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.7.0
+      is-interactive: 1.0.0
+      is-unicode-supported: 0.1.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+    dev: true
+
   /ordered-read-streams/1.0.1:
     resolution: {integrity: sha512-Z87aSjx3r5c0ZB7bcJqIgIRX5bxR7A4aSzvIbaxd0oTkWBCOoKfuGHiKj60CHVUgg1Phm5yMZzBdt8XqRs73Mw==}
     dependencies:
@@ -14137,6 +14349,11 @@ packages:
       lcid: 1.0.0
     dev: false
 
+  /os-tmpdir/1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /os-utils/0.0.14:
     resolution: {integrity: sha512-ajB8csaHLBvJOYsHJkp8YdO2FvlBbf/ZxaYQwXXRDyQ84UoE+uTuLXxqd0shekXMX6Qr/pt/DDyLMRAMsgfWzg==}
     dev: false
@@ -14151,6 +14368,10 @@ packages:
       jssha: 3.3.0
     dev: false
 
+  /outvariant/1.3.0:
+    resolution: {integrity: sha512-yeWM9k6UPfG/nzxdaPlJkB2p08hCg4xP6Lx99F+vP8YF7xyZVfTmJjrrNalkmzudD4WFvNLVudQikqUmF8zhVQ==}
+    dev: true
+
   /p-cancelable/2.1.1:
     resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==}
     engines: {node: '>=8'}
@@ -14391,6 +14612,10 @@ packages:
     resolution: {integrity: sha512-jczvQbCUS7XmS7o+y1aEO9OBVFeZBQ1MDSEqmO7xSoPgOPoowY/SxLpZ6Vh97/8qHZOteiCKb7gkG9gA2ZUxJA==}
     dev: false
 
+  /path-to-regexp/6.2.1:
+    resolution: {integrity: sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==}
+    dev: true
+
   /path-type/1.1.0:
     resolution: {integrity: sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==}
     engines: {node: '>=0.10.0'}
@@ -15916,6 +16141,11 @@ packages:
       xml2js: 0.4.23
     dev: false
 
+  /run-async/2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
   /run-parallel/1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
@@ -15924,7 +16154,7 @@ packages:
   /rxjs/7.8.0:
     resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.5.0
 
   /s-age/1.1.2:
     resolution: {integrity: sha512-aSN2TlF39WLoZA/6cgYSJZhKt63kJ4EaadejPWjWY9/h4rksIqvfWY3gfd+3uAegSM1IXsA9aWeEhJtkxkFQtA==}
@@ -16059,6 +16289,7 @@ packages:
   /semver/7.3.8:
     resolution: {integrity: sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==}
     engines: {node: '>=10'}
+    hasBin: true
     dependencies:
       lru-cache: 6.0.0
 
@@ -16111,7 +16342,6 @@ packages:
 
   /set-cookie-parser/2.5.1:
     resolution: {integrity: sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==}
-    dev: false
 
   /set-value/2.0.1:
     resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
@@ -16195,7 +16425,7 @@ packages:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
     dependencies:
       call-bind: 1.0.2
-      get-intrinsic: 1.1.3
+      get-intrinsic: 1.2.0
       object-inspect: 1.12.2
     dev: true
 
@@ -16583,6 +16813,16 @@ packages:
     resolution: {integrity: sha512-Nk/brWYpD85WlOgzw5h173aci0Teyv8YdIAEtV+N88nDB0dLlazZyJMIsN6eo1/AR61l+p6CJTG1JIyFaoNEEA==}
     dev: false
 
+  /strict-event-emitter/0.2.8:
+    resolution: {integrity: sha512-KDf/ujU8Zud3YaLtMCcTI4xkZlZVIYxTLr+XIULexP+77EEVWixeXroLUXQXiVtH4XH2W7jr/3PT1v3zBuvc3A==}
+    dependencies:
+      events: 3.3.0
+    dev: true
+
+  /strict-event-emitter/0.4.6:
+    resolution: {integrity: sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==}
+    dev: true
+
   /strict-uri-encode/1.1.0:
     resolution: {integrity: sha512-R3f198pcvnB+5IpnBlRkphuE9n46WyVl8I39W/ZUTZLz4nqSP/oLYUrcnJrw462Ds8he4YKMov2efsTIw1BDGQ==}
     engines: {node: '>=0.10.0'}
@@ -17010,6 +17250,13 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /tmp/0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+    dependencies:
+      os-tmpdir: 1.0.2
+    dev: true
+
   /tmp/0.2.1:
     resolution: {integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==}
     engines: {node: '>=8.17.0'}
@@ -17173,9 +17420,6 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
-  /tslib/2.4.1:
-    resolution: {integrity: sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==}
-
   /tslib/2.5.0:
     resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
 
@@ -18059,6 +18303,20 @@ packages:
       graceful-fs: 4.2.10
     dev: true
 
+  /wcwidth/1.0.1:
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+    dependencies:
+      defaults: 1.0.4
+    dev: true
+
+  /web-encoding/1.1.5:
+    resolution: {integrity: sha512-HYLeVCdJ0+lBYV2FvNZmv3HJ2Nt0QYXqZojk3d9FJOLkwnuhzM9tmamh8d7HPM8QqjKH8DeHkFTx+CFlWpZZDA==}
+    dependencies:
+      util: 0.12.5
+    optionalDependencies:
+      '@zxing/text-encoding': 0.9.0
+    dev: true
+
   /web-push/3.5.0:
     resolution: {integrity: sha512-JC0V9hzKTqlDYJ+LTZUXtW7B175qwwaqzbbMSWDxHWxZvd3xY0C2rcotMGDavub2nAAFw+sXTsqR65/KY2A5AQ==}
     engines: {node: '>= 6'}