From 48c7c1f6b9b3c32aa4e379f9c24bbf228189f141 Mon Sep 17 00:00:00 2001
From: LemonNeko <self@lemonneko.moe>
Date: Tue, 2 Dec 2025 02:05:57 +0800
Subject: [PATCH] refactor(ui): move `Button` component to `@proj-airi/ui`
 (#781)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 Cargo.toml                                               | 9 ++++++++-
 .../src/renderer/pages/devtools/widgets-calling.vue      | 3 +--
 .../src/renderer/pages/notice/fade-on-hover.vue          | 3 +--
 .../Layouts/InteractiveArea/Actions/ViewControls.vue     | 2 +-
 apps/stage-web/src/pages/[...all].vue                    | 2 +-
 apps/stage-web/src/pages/devtools/background-removal.vue | 3 +--
 .../providers-transcription-realtime-aliyun-nls.vue      | 3 +--
 .../settings/airi-card/components/CardCreationDialog.vue | 3 +--
 .../settings/airi-card/components/CardDetailDialog.vue   | 2 +-
 .../settings/airi-card/components/DeleteCardDialog.vue   | 2 +-
 .../stage-pages/src/pages/settings/modules/beat-sync.vue | 3 +--
 .../stage-pages/src/pages/settings/modules/hearing.vue   | 4 ++--
 .../providers/transcription/aliyun-nls-transcription.vue | 3 +--
 packages/stage-ui/src/components/misc/Button.story.vue   | 2 +-
 packages/stage-ui/src/components/misc/index.ts           | 1 -
 .../src/components/modules/GamingModuleSettings.vue      | 3 +--
 .../stage-ui/src/components/modules/MessagingDiscord.vue | 3 +--
 packages/stage-ui/src/components/modules/X.vue           | 3 +--
 .../scenarios/dialogs/model-selector/model-selector.vue  | 3 +--
 .../dialogs/onboarding/step-model-selection.vue          | 2 +-
 .../dialogs/onboarding/step-provider-configuration.vue   | 4 ++--
 .../dialogs/onboarding/step-provider-selection.vue       | 2 +-
 .../scenarios/dialogs/onboarding/step-welcome.vue        | 2 +-
 .../scenarios/providers/TranscriptionPlayground.vue      | 3 +--
 .../src/components/scenarios/settings/ButtonBar.vue      | 4 ++--
 .../scenarios/settings/model-settings/Live2D.vue         | 3 +--
 .../components/scenarios/settings/model-settings/VRM.vue | 2 +-
 .../scenarios/settings/model-settings/index.vue          | 2 +-
 .../scenarios/toasters/ToasterPWAUpdateReady.vue         | 3 +--
 .../src/components/widgets/PoppingSubtitles.web.vue      | 3 +--
 .../misc => ui/src/components/Misc}/Button.vue           | 0
 packages/ui/src/components/Misc/index.ts                 | 1 +
 packages/ui/src/index.ts                                 | 1 +
 33 files changed, 41 insertions(+), 48 deletions(-)
 rename packages/{stage-ui/src/components/misc => ui/src/components/Misc}/Button.vue (100%)
 create mode 100644 packages/ui/src/components/Misc/index.ts

diff --git a/Cargo.toml b/Cargo.toml
index c4a1f2e4c..d84a29959 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,5 +1,12 @@
 [workspace]
-members = [ "crates/tauri-plugin-ipc-audio-transcription-ort", "crates/tauri-plugin-ipc-audio-vad-ort", "crates/tauri-plugin-mcp", "crates/tauri-plugin-rdev", "crates/tauri-plugin-window-pass-through-on-hover", "crates/tauri-plugin-window-router-link" ]
+members = [
+  "crates/tauri-plugin-ipc-audio-transcription-ort",
+  "crates/tauri-plugin-ipc-audio-vad-ort",
+  "crates/tauri-plugin-mcp",
+  "crates/tauri-plugin-rdev",
+  "crates/tauri-plugin-window-pass-through-on-hover",
+  "crates/tauri-plugin-window-router-link"
+]
 resolver = "2"
 
 [workspace.package]
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/widgets-calling.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/widgets-calling.vue
index 2938fa4d8..e84731e06 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/devtools/widgets-calling.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/widgets-calling.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@proj-airi/stage-ui/components'
-import { FieldInput, FieldSelect, FieldTextArea } from '@proj-airi/ui'
+import { Button, FieldInput, FieldSelect, FieldTextArea } from '@proj-airi/ui'
 import { computed, reactive, ref } from 'vue'
 
 import { widgetsAdd, widgetsClear, widgetsOpenWindow, widgetsPrepareWindow, widgetsRemove, widgetsUpdate } from '../../../shared/eventa'
diff --git a/apps/stage-tamagotchi/src/renderer/pages/notice/fade-on-hover.vue b/apps/stage-tamagotchi/src/renderer/pages/notice/fade-on-hover.vue
index efa60e2d2..cd9b73fd8 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/notice/fade-on-hover.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/notice/fade-on-hover.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@proj-airi/stage-ui/components'
-import { TransitionVertical } from '@proj-airi/ui'
+import { Button, TransitionVertical } from '@proj-airi/ui'
 import { refDebounced, useDark, useMouseInElement } from '@vueuse/core'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue b/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
index 526cf71ea..e3ee30932 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Button } from '@proj-airi/stage-ui/components'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
+import { Button } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 
 const emits = defineEmits<{
diff --git a/apps/stage-web/src/pages/[...all].vue b/apps/stage-web/src/pages/[...all].vue
index 14b8c4e97..5a92e2244 100644
--- a/apps/stage-web/src/pages/[...all].vue
+++ b/apps/stage-web/src/pages/[...all].vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@proj-airi/stage-ui/components'
+import { Button } from '@proj-airi/ui'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
diff --git a/apps/stage-web/src/pages/devtools/background-removal.vue b/apps/stage-web/src/pages/devtools/background-removal.vue
index a8fc7e8cf..2877391d0 100644
--- a/apps/stage-web/src/pages/devtools/background-removal.vue
+++ b/apps/stage-web/src/pages/devtools/background-removal.vue
@@ -2,8 +2,7 @@
 import type { PreTrainedModel, Processor } from '@huggingface/transformers'
 
 import { AutoModel, AutoProcessor, env, RawImage } from '@huggingface/transformers'
-import { Button } from '@proj-airi/stage-ui/components'
-import { Checkbox, InputFile } from '@proj-airi/ui'
+import { Button, Checkbox, InputFile } from '@proj-airi/ui'
 import { check } from 'gpuu/webgpu'
 import { computed, onMounted, ref, watch } from 'vue'
 
diff --git a/packages/stage-pages/src/pages/devtools/providers-transcription-realtime-aliyun-nls.vue b/packages/stage-pages/src/pages/devtools/providers-transcription-realtime-aliyun-nls.vue
index 384628b35..6183f05fa 100644
--- a/packages/stage-pages/src/pages/devtools/providers-transcription-realtime-aliyun-nls.vue
+++ b/packages/stage-pages/src/pages/devtools/providers-transcription-realtime-aliyun-nls.vue
@@ -3,9 +3,8 @@ import type { ServerEvent, ServerEvents } from '@proj-airi/stage-ui/stores/provi
 
 import vadWorkletUrl from '@proj-airi/stage-ui/workers/vad/process.worklet?worker&url'
 
-import { Button } from '@proj-airi/stage-ui/components'
 import { createAliyunNLSProvider } from '@proj-airi/stage-ui/stores/providers/aliyun/stream-transcription'
-import { FieldInput, FieldSelect } from '@proj-airi/ui'
+import { Button, FieldInput, FieldSelect } from '@proj-airi/ui'
 import { streamTranscription } from '@xsai/stream-transcription'
 import { computed, nextTick, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue'
 
diff --git a/packages/stage-pages/src/pages/settings/airi-card/components/CardCreationDialog.vue b/packages/stage-pages/src/pages/settings/airi-card/components/CardCreationDialog.vue
index 24cb70581..d64adc10c 100644
--- a/packages/stage-pages/src/pages/settings/airi-card/components/CardCreationDialog.vue
+++ b/packages/stage-pages/src/pages/settings/airi-card/components/CardCreationDialog.vue
@@ -3,9 +3,8 @@ import type { Card } from '@proj-airi/ccc'
 
 import kebabcase from '@stdlib/string-base-kebabcase'
 
-import { Button } from '@proj-airi/stage-ui/components'
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
-import { FieldInput, FieldValues } from '@proj-airi/ui'
+import { Button, FieldInput, FieldValues } from '@proj-airi/ui'
 import {
   DialogContent,
   DialogOverlay,
diff --git a/packages/stage-pages/src/pages/settings/airi-card/components/CardDetailDialog.vue b/packages/stage-pages/src/pages/settings/airi-card/components/CardDetailDialog.vue
index a904406d2..f2d61e96f 100644
--- a/packages/stage-pages/src/pages/settings/airi-card/components/CardDetailDialog.vue
+++ b/packages/stage-pages/src/pages/settings/airi-card/components/CardDetailDialog.vue
@@ -3,8 +3,8 @@ import type { AiriCard } from '@proj-airi/stage-ui/stores/modules/airi-card'
 
 import DOMPurify from 'dompurify'
 
-import { Button } from '@proj-airi/stage-ui/components'
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
+import { Button } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import {
   DialogContent,
diff --git a/packages/stage-pages/src/pages/settings/airi-card/components/DeleteCardDialog.vue b/packages/stage-pages/src/pages/settings/airi-card/components/DeleteCardDialog.vue
index ea9f81166..465de0acd 100644
--- a/packages/stage-pages/src/pages/settings/airi-card/components/DeleteCardDialog.vue
+++ b/packages/stage-pages/src/pages/settings/airi-card/components/DeleteCardDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Button } from '@proj-airi/stage-ui/components'
+import { Button } from '@proj-airi/ui'
 import {
   AlertDialogAction,
   AlertDialogCancel,
diff --git a/packages/stage-pages/src/pages/settings/modules/beat-sync.vue b/packages/stage-pages/src/pages/settings/modules/beat-sync.vue
index 412604f95..609d4fc96 100644
--- a/packages/stage-pages/src/pages/settings/modules/beat-sync.vue
+++ b/packages/stage-pages/src/pages/settings/modules/beat-sync.vue
@@ -10,8 +10,7 @@ import {
   toggleBeatSync,
   updateBeatSyncParameters,
 } from '@proj-airi/stage-shared/beat-sync/browser'
-import { Button } from '@proj-airi/stage-ui/components'
-import { FieldCheckbox, FieldRange } from '@proj-airi/ui'
+import { Button, FieldCheckbox, FieldRange } from '@proj-airi/ui'
 import { createTimeline } from 'animejs'
 import { nanoid } from 'nanoid'
 import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
diff --git a/packages/stage-pages/src/pages/settings/modules/hearing.vue b/packages/stage-pages/src/pages/settings/modules/hearing.vue
index 5a12f1019..960da77f1 100644
--- a/packages/stage-pages/src/pages/settings/modules/hearing.vue
+++ b/packages/stage-pages/src/pages/settings/modules/hearing.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import workletUrl from '@proj-airi/stage-ui/workers/vad/process.worklet?worker&url'
 
-import { Alert, Button, ErrorContainer, LevelMeter, RadioCardManySelect, RadioCardSimple, TestDummyMarker, ThresholdMeter, TimeSeriesChart } from '@proj-airi/stage-ui/components'
+import { Alert, ErrorContainer, LevelMeter, RadioCardManySelect, RadioCardSimple, TestDummyMarker, ThresholdMeter, TimeSeriesChart } from '@proj-airi/stage-ui/components'
 import { useAudioAnalyzer, useAudioRecorder } from '@proj-airi/stage-ui/composables'
 import { useVAD } from '@proj-airi/stage-ui/stores/ai/models/vad'
 import { useAudioContext } from '@proj-airi/stage-ui/stores/audio'
 import { useHearingSpeechInputPipeline, useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { FieldCheckbox, FieldRange, FieldSelect } from '@proj-airi/ui'
+import { Button, FieldCheckbox, FieldRange, FieldSelect } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/packages/stage-pages/src/pages/settings/providers/transcription/aliyun-nls-transcription.vue b/packages/stage-pages/src/pages/settings/providers/transcription/aliyun-nls-transcription.vue
index 43a7fc072..310d6c7f7 100644
--- a/packages/stage-pages/src/pages/settings/providers/transcription/aliyun-nls-transcription.vue
+++ b/packages/stage-pages/src/pages/settings/providers/transcription/aliyun-nls-transcription.vue
@@ -8,7 +8,6 @@ import vadWorkletUrl from '@proj-airi/stage-ui/workers/vad/process.worklet?worke
 
 import {
   Alert,
-  Button,
   ProviderBasicSettings,
   ProviderSettingsContainer,
   ProviderSettingsLayout,
@@ -16,7 +15,7 @@ import {
 import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { FieldInput, FieldSelect } from '@proj-airi/ui'
+import { Button, FieldInput, FieldSelect } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onBeforeUnmount, reactive, ref, shallowRef } from 'vue'
 
diff --git a/packages/stage-ui/src/components/misc/Button.story.vue b/packages/stage-ui/src/components/misc/Button.story.vue
index adf07ebd8..d5a490dfd 100644
--- a/packages/stage-ui/src/components/misc/Button.story.vue
+++ b/packages/stage-ui/src/components/misc/Button.story.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Button from './Button.vue'
+import { Button } from '@proj-airi/ui'
 </script>
 
 <template>
diff --git a/packages/stage-ui/src/components/misc/index.ts b/packages/stage-ui/src/components/misc/index.ts
index 7d3e5463e..0e5c440de 100644
--- a/packages/stage-ui/src/components/misc/index.ts
+++ b/packages/stage-ui/src/components/misc/index.ts
@@ -1,5 +1,4 @@
 export { default as Alert } from './Alert.vue'
-export { default as Button } from './Button.vue'
 export { default as Collapsable } from './Collapsable.vue'
 export { default as ErrorContainer } from './ErrorContainer.vue'
 export { default as Progress } from './Progress.vue'
diff --git a/packages/stage-ui/src/components/modules/GamingModuleSettings.vue b/packages/stage-ui/src/components/modules/GamingModuleSettings.vue
index 3caa2d242..f37297332 100644
--- a/packages/stage-ui/src/components/modules/GamingModuleSettings.vue
+++ b/packages/stage-ui/src/components/modules/GamingModuleSettings.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { StoreGeneric } from 'pinia'
 
-import { FieldCheckbox, FieldInput } from '@proj-airi/ui'
+import { Button, FieldCheckbox, FieldInput } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
-import { Button } from '../../components'
 import { useNumberString } from '../../composables/use-number-string'
 
 interface GamingModuleStore extends StoreGeneric {
diff --git a/packages/stage-ui/src/components/modules/MessagingDiscord.vue b/packages/stage-ui/src/components/modules/MessagingDiscord.vue
index 9a3e93888..2fb909fa9 100644
--- a/packages/stage-ui/src/components/modules/MessagingDiscord.vue
+++ b/packages/stage-ui/src/components/modules/MessagingDiscord.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@proj-airi/stage-ui/components'
 import { useDiscordStore } from '@proj-airi/stage-ui/stores/modules/discord'
-import { FieldCheckbox, FieldInput } from '@proj-airi/ui'
+import { Button, FieldCheckbox, FieldInput } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
diff --git a/packages/stage-ui/src/components/modules/X.vue b/packages/stage-ui/src/components/modules/X.vue
index 81e906322..c01049536 100644
--- a/packages/stage-ui/src/components/modules/X.vue
+++ b/packages/stage-ui/src/components/modules/X.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { Button } from '@proj-airi/stage-ui/components'
 import { useTwitterStore } from '@proj-airi/stage-ui/stores/modules/twitter'
-import { FieldCheckbox, FieldInput } from '@proj-airi/ui'
+import { Button, FieldCheckbox, FieldInput } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { useI18n } from 'vue-i18n'
 
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue
index 306bb411e..407c9bd3b 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import type { DisplayModel } from '../../../../stores/display-models'
 
+import { Button } from '@proj-airi/ui'
 import { useFileDialog } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger, EditableArea, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from 'reka-ui'
 import { ref } from 'vue'
 
-import Button from '../../../misc/Button.vue'
-
 import { DisplayModelFormat, useDisplayModelsStore } from '../../../../stores/display-models'
 
 const emits = defineEmits<{ (e: 'close', value: void): void }>()
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-model-selection.vue b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-model-selection.vue
index 858ae3b8d..be0453a51 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-model-selection.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-model-selection.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Button } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { inject } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -7,7 +8,6 @@ import Alert from '../../../misc/Alert.vue'
 
 import { useConsciousnessStore } from '../../../../stores/modules/consciousness'
 import { RadioCardManySelect } from '../../../menu'
-import { Button } from '../../../misc'
 import { OnboardingContextKey } from './utils'
 
 const { t } = useI18n()
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-configuration.vue b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-configuration.vue
index e31073ef2..c79b79a6e 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-configuration.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-configuration.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { FieldInput } from '@proj-airi/ui'
+import { Button, FieldInput } from '@proj-airi/ui'
 import { computed, inject, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useProvidersStore } from '../../../../stores/providers'
 import { Callout } from '../../../layouts'
-import { Button, ErrorContainer } from '../../../misc'
+import { ErrorContainer } from '../../../misc'
 import { ProviderAccountIdInput } from '../../../scenarios/providers'
 import { OnboardingContextKey } from './utils'
 
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-selection.vue b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-selection.vue
index 60e58950f..a578d2a49 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-selection.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-provider-selection.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { Button } from '@proj-airi/ui'
 import { inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { RadioCardDetail } from '../../../menu'
-import { Button } from '../../../misc'
 import { OnboardingContextKey } from './utils'
 
 const { t } = useI18n()
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-welcome.vue b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-welcome.vue
index f70b2af2e..dcc7b8cc4 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-welcome.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-welcome.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { Button } from '@proj-airi/ui'
 import { inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import onboardingLogo from '../../../../assets/onboarding.avif'
 
-import { Button } from '../../../misc'
 import { OnboardingContextKey } from './utils'
 
 const { t } = useI18n()
diff --git a/packages/stage-ui/src/components/scenarios/providers/TranscriptionPlayground.vue b/packages/stage-ui/src/components/scenarios/providers/TranscriptionPlayground.vue
index be2f202aa..b78f9d80a 100644
--- a/packages/stage-ui/src/components/scenarios/providers/TranscriptionPlayground.vue
+++ b/packages/stage-ui/src/components/scenarios/providers/TranscriptionPlayground.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HearingTranscriptionResult } from '@proj-airi/stage-ui/stores/modules/hearing'
 
-import { FieldRange, FieldSelect } from '@proj-airi/ui'
+import { Button, FieldRange, FieldSelect } from '@proj-airi/ui'
 import { until } from '@vueuse/core'
 import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -10,7 +10,6 @@ import { useAudioAnalyzer } from '../../../composables/audio/audio-analyzer'
 import { useAudioRecorder } from '../../../composables/audio/audio-recorder'
 import { useAudioDevice } from '../../../composables/audio/device'
 import { LevelMeter, TestDummyMarker, ThresholdMeter } from '../../gadgets'
-import { Button } from '../../misc'
 
 const props = defineProps<{
   // Provider-specific handlers (provided from parent)
diff --git a/packages/stage-ui/src/components/scenarios/settings/ButtonBar.vue b/packages/stage-ui/src/components/scenarios/settings/ButtonBar.vue
index 2781715f2..43911545c 100644
--- a/packages/stage-ui/src/components/scenarios/settings/ButtonBar.vue
+++ b/packages/stage-ui/src/components/scenarios/settings/ButtonBar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Bar from './Bar.vue'
+import { Button } from '@proj-airi/ui'
 
-import { Button } from '../../misc'
+import Bar from './Bar.vue'
 
 defineProps<{
   text: string
diff --git a/packages/stage-ui/src/components/scenarios/settings/model-settings/Live2D.vue b/packages/stage-ui/src/components/scenarios/settings/model-settings/Live2D.vue
index a2d6e9cb5..bfb517b39 100644
--- a/packages/stage-ui/src/components/scenarios/settings/model-settings/Live2D.vue
+++ b/packages/stage-ui/src/components/scenarios/settings/model-settings/Live2D.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Checkbox, FieldRange } from '@proj-airi/ui'
+import { Button, Checkbox, FieldRange } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -7,7 +7,6 @@ import { useI18n } from 'vue-i18n'
 import { defaultModelParameters, useLive2d } from '../../../../stores/live2d'
 import { useSettings } from '../../../../stores/settings'
 import { Section } from '../../../layouts'
-import { Button } from '../../../misc'
 import { ColorPalette } from '../../../widgets'
 
 defineProps<{
diff --git a/packages/stage-ui/src/components/scenarios/settings/model-settings/VRM.vue b/packages/stage-ui/src/components/scenarios/settings/model-settings/VRM.vue
index 0d438853c..91b182313 100644
--- a/packages/stage-ui/src/components/scenarios/settings/model-settings/VRM.vue
+++ b/packages/stage-ui/src/components/scenarios/settings/model-settings/VRM.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useModelStore } from '@proj-airi/stage-ui-three'
+import { Button } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { Container, PropertyColor, PropertyNumber, PropertyPoint } from '../../../data-pane'
 import { Callout, Tabs } from '../../../layouts'
-import { Button } from '../../../misc'
 import { ColorPalette } from '../../../widgets'
 
 defineProps<{
diff --git a/packages/stage-ui/src/components/scenarios/settings/model-settings/index.vue b/packages/stage-ui/src/components/scenarios/settings/model-settings/index.vue
index fc9b322d3..bac995415 100644
--- a/packages/stage-ui/src/components/scenarios/settings/model-settings/index.vue
+++ b/packages/stage-ui/src/components/scenarios/settings/model-settings/index.vue
@@ -2,12 +2,12 @@
 import type { DisplayModel } from '../../../../stores/display-models'
 
 import { ThreeScene, useModelStore } from '@proj-airi/stage-ui-three'
+import { Button } from '@proj-airi/ui'
 import { useMouse } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
 
 import Callout from '../../../layouts/Callout.vue'
-import Button from '../../../misc/Button.vue'
 import Live2DScene from '../../../scenes/Live2D.vue'
 import Live2D from './Live2D.vue'
 import VRM from './VRM.vue'
diff --git a/packages/stage-ui/src/components/scenarios/toasters/ToasterPWAUpdateReady.vue b/packages/stage-ui/src/components/scenarios/toasters/ToasterPWAUpdateReady.vue
index 9e497f29f..8d60122ae 100644
--- a/packages/stage-ui/src/components/scenarios/toasters/ToasterPWAUpdateReady.vue
+++ b/packages/stage-ui/src/components/scenarios/toasters/ToasterPWAUpdateReady.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
+import { Button } from '@proj-airi/ui'
 import { inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Button from '../../misc/Button.vue'
-
 import { ToasterRootInjectionKey } from './constants'
 
 const props = defineProps<{ id?: string }>()
diff --git a/packages/stage-ui/src/components/widgets/PoppingSubtitles.web.vue b/packages/stage-ui/src/components/widgets/PoppingSubtitles.web.vue
index 12842f7c4..0ef4a3eca 100644
--- a/packages/stage-ui/src/components/widgets/PoppingSubtitles.web.vue
+++ b/packages/stage-ui/src/components/widgets/PoppingSubtitles.web.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
+import { Button } from '@proj-airi/ui'
 import { animate, createDraggable, createSpring, utils } from 'animejs'
 import { onMounted } from 'vue'
 
-import Button from '../misc/Button.vue'
-
 onMounted(() => {
   const [$logo] = utils.$('.logo.js')
   const [$button] = utils.$('button')
diff --git a/packages/stage-ui/src/components/misc/Button.vue b/packages/ui/src/components/Misc/Button.vue
similarity index 100%
rename from packages/stage-ui/src/components/misc/Button.vue
rename to packages/ui/src/components/Misc/Button.vue
diff --git a/packages/ui/src/components/Misc/index.ts b/packages/ui/src/components/Misc/index.ts
new file mode 100644
index 000000000..ead8085f7
--- /dev/null
+++ b/packages/ui/src/components/Misc/index.ts
@@ -0,0 +1 @@
+export { default as Button } from './Button.vue'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 67e64d3ea..87e8b2854 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -2,5 +2,6 @@ import './fallback.css'
 
 export * from './components/Animations'
 export * from './components/Form'
+export * from './components/Misc'
 export * from './composables/use-deferred-mount'
 export * from './composables/use-theme'