diff --git a/apps/stage-tamagotchi/src/components/InteractiveArea.vue b/apps/stage-tamagotchi/src/components/InteractiveArea.vue
index cca16476c..efa4bfc35 100644
--- a/apps/stage-tamagotchi/src/components/InteractiveArea.vue
+++ b/apps/stage-tamagotchi/src/components/InteractiveArea.vue
@@ -3,7 +3,7 @@ import type { ChatProvider } from '@xsai-ext/shared-providers'
 
 import { useMicVAD } from '@proj-airi/stage-ui/composables'
 import { useChatStore, useConsciousnessStore, useProvidersStore, useSettings } from '@proj-airi/stage-ui/stores'
-import { BasicTextarea } from '@proj-airi/ui/Form'
+import { BasicTextarea } from '@proj-airi/ui'
 import { invoke } from '@tauri-apps/api/core'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
diff --git a/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue b/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
index eb11fde2d..303fb3e12 100644
--- a/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/airi-card/index.vue
@@ -2,7 +2,7 @@
 import type { ccv3 } from '@proj-airi/ccc'
 
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores'
-import { InputFile } from '@proj-airi/ui/Form'
+import { InputFile } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue b/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
index acefea4e2..b3e767994 100644
--- a/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { RadioCardManySelect, RadioCardSimple } from '@proj-airi/stage-ui/components'
 import { useConsciousnessStore, useProvidersStore } from '@proj-airi/stage-ui/stores'
-import { RadioCardDetailManySelect, RadioCardSimple } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -134,9 +134,9 @@ function updateCustomModelName(value: string) {
           </div>
         </div>
 
-        <!-- Using the new RadioCardDetailManySelect component -->
+        <!-- Using the new RadioCardManySelect component -->
         <template v-else-if="providerModels.length > 0">
-          <RadioCardDetailManySelect
+          <RadioCardManySelect
             v-model="activeModel"
             v-model:search-query="modelSearchQuery"
             :items="providerModels"
diff --git a/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue b/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
index 365b62ea9..da484fc65 100644
--- a/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/modules/speech.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 
-import { Skeleton, TestDummyMarker } from '@proj-airi/stage-ui/components'
+import {
+  RadioCardManySelect,
+  RadioCardSimple,
+  Skeleton,
+  TestDummyMarker,
+  VoiceCardManySelect,
+} from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import {
   FieldCheckbox,
   FieldInput,
   FieldRange,
-  RadioCardDetailManySelect,
-  RadioCardSimple,
   Textarea,
-  VoiceCardManySelect,
-} from '@proj-airi/ui/Form'
+} from '@proj-airi/ui'
 import { generateSpeech } from '@xsai/generate-speech'
 import { storeToRefs } from 'pinia'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
@@ -255,9 +258,9 @@ function updateCustomModelName(value: string) {
                 </div>
               </div>
 
-              <!-- Using the new RadioCardDetailManySelect component -->
+              <!-- Using the new RadioCardManySelect component -->
               <template v-else-if="providerModels.length > 0">
-                <RadioCardDetailManySelect
+                <RadioCardManySelect
                   v-model="activeSpeechModel"
                   v-model:search-query="modelSearchQuery"
                   :items="providerModels"
@@ -313,7 +316,7 @@ function updateCustomModelName(value: string) {
           </div>
 
           <!-- Error state -->
-          <!-- Voice selection with RadioCardDetailManySelect -->
+          <!-- Voice selection with RadioCardManySelect -->
           <div
             v-else-if="availableVoices[activeSpeechProvider] && availableVoices[activeSpeechProvider].length > 0"
             class="space-y-6"
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/alibaba-cloud-model-studio.vue b/apps/stage-tamagotchi/src/pages/settings/providers/alibaba-cloud-model-studio.vue
index d4072a896..51794e96d 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/alibaba-cloud-model-studio.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/alibaba-cloud-model-studio.vue
@@ -7,7 +7,7 @@ import {
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
-import { FieldRange } from '@proj-airi/ui/Form'
+import { FieldRange } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/elevenlabs.vue b/apps/stage-tamagotchi/src/pages/settings/providers/elevenlabs.vue
index 1fa2df4b0..374071af0 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/elevenlabs.vue
@@ -7,7 +7,7 @@ import {
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
-import { FieldCheckbox, FieldRange } from '@proj-airi/ui/Form'
+import { FieldCheckbox, FieldRange } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/microsoft-speech.vue b/apps/stage-tamagotchi/src/pages/settings/providers/microsoft-speech.vue
index 3a5c92868..3e9f36932 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/microsoft-speech.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/microsoft-speech.vue
@@ -7,7 +7,7 @@ import {
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
-import { FieldInput, FieldRange } from '@proj-airi/ui/Form'
+import { FieldInput, FieldRange } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue b/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue
index b11e61aaf..a3227ac33 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue
@@ -9,7 +9,7 @@ import {
   ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
-import { FieldKeyValues } from '@proj-airi/ui/Form'
+import { FieldKeyValues } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/volcengine.vue b/apps/stage-tamagotchi/src/pages/settings/providers/volcengine.vue
index c143debfc..559125b1f 100644
--- a/apps/stage-tamagotchi/src/pages/settings/providers/volcengine.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/providers/volcengine.vue
@@ -7,7 +7,7 @@ import {
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
-import { FieldInput, FieldRange } from '@proj-airi/ui/Form'
+import { FieldInput, FieldRange } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-tamagotchi/tsconfig.json b/apps/stage-tamagotchi/tsconfig.json
index 95159f274..b895d0172 100644
--- a/apps/stage-tamagotchi/tsconfig.json
+++ b/apps/stage-tamagotchi/tsconfig.json
@@ -12,6 +12,12 @@
       ],
       "@proj-airi/ui-transitions": [
         "../../packages/ui-transitions/src/index.ts"
+      ],
+      "@proj-airi/ui": [
+        "../../packages/ui/src/index.ts"
+      ],
+      "@proj-airi/ui/*": [
+        "../../packages/ui/src/*"
       ]
     },
     "resolveJsonModule": true,
diff --git a/apps/stage-tamagotchi/vite.config.ts b/apps/stage-tamagotchi/vite.config.ts
index d9218ab68..7f5d6b910 100644
--- a/apps/stage-tamagotchi/vite.config.ts
+++ b/apps/stage-tamagotchi/vite.config.ts
@@ -22,6 +22,7 @@ export default defineConfig({
     alias: {
       '@proj-airi/stage-ui': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src')),
       '@proj-airi/stage-ui/stores': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src', 'stores')),
+      '@proj-airi/ui': resolve(join(import.meta.dirname, '..', '..', 'packages', 'ui', 'src')),
     },
   },
   plugins: [
diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea.vue b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
index 9b3476b23..38dc3c6b3 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import type { ChatProvider } from '@xsai-ext/shared-providers'
 
-import { TransitionVertical } from '@proj-airi/stage-ui/components'
 import { useMicVAD, useWhisper } from '@proj-airi/stage-ui/composables'
 import WhisperWorker from '@proj-airi/stage-ui/libs/workers/worker?worker&url'
 import { useAudioContext, useChatStore, useConsciousnessStore, useProvidersStore, useSettings } from '@proj-airi/stage-ui/stores'
-import { BasicTextarea } from '@proj-airi/ui/Form'
+import { BasicTextarea, TransitionVertical } from '@proj-airi/ui'
 import { useDevicesList } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'
diff --git a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
index e15279dd9..3bc54734e 100644
--- a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
@@ -3,7 +3,7 @@ import type { ChatProvider } from '@xsai-ext/shared-providers'
 
 import { useMicVAD } from '@proj-airi/stage-ui/composables'
 import { useChatStore, useConsciousnessStore, useProvidersStore, useSettings } from '@proj-airi/stage-ui/stores'
-import { BasicTextarea } from '@proj-airi/ui/Form'
+import { BasicTextarea } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/devtools/background-remove.vue b/apps/stage-web/src/pages/devtools/background-remove.vue
index 247fded01..705a9424a 100644
--- a/apps/stage-web/src/pages/devtools/background-remove.vue
+++ b/apps/stage-web/src/pages/devtools/background-remove.vue
@@ -2,7 +2,7 @@
 import type { PreTrainedModel, Processor } from '@huggingface/transformers'
 
 import { AutoModel, AutoProcessor, env, RawImage } from '@huggingface/transformers'
-import { InputFile } from '@proj-airi/ui/Form'
+import { InputFile } from '@proj-airi/ui'
 import { check } from 'gpuu/webgpu'
 import { computed, onMounted, ref } from 'vue'
 
diff --git a/apps/stage-web/src/pages/devtools/vibrant.vue b/apps/stage-web/src/pages/devtools/vibrant.vue
index f9e213b9f..346c7bfdb 100644
--- a/apps/stage-web/src/pages/devtools/vibrant.vue
+++ b/apps/stage-web/src/pages/devtools/vibrant.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { InputFile } from '@proj-airi/ui/Form'
+import { InputFile } from '@proj-airi/ui'
 import { Vibrant } from 'node-vibrant/browser'
 import { ref, watch } from 'vue'
 
diff --git a/apps/stage-web/src/pages/settings/airi-card/index.vue b/apps/stage-web/src/pages/settings/airi-card/index.vue
index eb11fde2d..303fb3e12 100644
--- a/apps/stage-web/src/pages/settings/airi-card/index.vue
+++ b/apps/stage-web/src/pages/settings/airi-card/index.vue
@@ -2,7 +2,7 @@
 import type { ccv3 } from '@proj-airi/ccc'
 
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores'
-import { InputFile } from '@proj-airi/ui/Form'
+import { InputFile } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/settings/modules/consciousness.vue b/apps/stage-web/src/pages/settings/modules/consciousness.vue
index acefea4e2..b3e767994 100644
--- a/apps/stage-web/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-web/src/pages/settings/modules/consciousness.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { RadioCardManySelect, RadioCardSimple } from '@proj-airi/stage-ui/components'
 import { useConsciousnessStore, useProvidersStore } from '@proj-airi/stage-ui/stores'
-import { RadioCardDetailManySelect, RadioCardSimple } from '@proj-airi/ui/Form'
 import { storeToRefs } from 'pinia'
 import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -134,9 +134,9 @@ function updateCustomModelName(value: string) {
           </div>
         </div>
 
-        <!-- Using the new RadioCardDetailManySelect component -->
+        <!-- Using the new RadioCardManySelect component -->
         <template v-else-if="providerModels.length > 0">
-          <RadioCardDetailManySelect
+          <RadioCardManySelect
             v-model="activeModel"
             v-model:search-query="modelSearchQuery"
             :items="providerModels"
diff --git a/apps/stage-web/src/pages/settings/modules/speech.vue b/apps/stage-web/src/pages/settings/modules/speech.vue
index 365b62ea9..da484fc65 100644
--- a/apps/stage-web/src/pages/settings/modules/speech.vue
+++ b/apps/stage-web/src/pages/settings/modules/speech.vue
@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 
-import { Skeleton, TestDummyMarker } from '@proj-airi/stage-ui/components'
+import {
+  RadioCardManySelect,
+  RadioCardSimple,
+  Skeleton,
+  TestDummyMarker,
+  VoiceCardManySelect,
+} from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import {
   FieldCheckbox,
   FieldInput,
   FieldRange,
-  RadioCardDetailManySelect,
-  RadioCardSimple,
   Textarea,
-  VoiceCardManySelect,
-} from '@proj-airi/ui/Form'
+} from '@proj-airi/ui'
 import { generateSpeech } from '@xsai/generate-speech'
 import { storeToRefs } from 'pinia'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
@@ -255,9 +258,9 @@ function updateCustomModelName(value: string) {
                 </div>
               </div>
 
-              <!-- Using the new RadioCardDetailManySelect component -->
+              <!-- Using the new RadioCardManySelect component -->
               <template v-else-if="providerModels.length > 0">
-                <RadioCardDetailManySelect
+                <RadioCardManySelect
                   v-model="activeSpeechModel"
                   v-model:search-query="modelSearchQuery"
                   :items="providerModels"
@@ -313,7 +316,7 @@ function updateCustomModelName(value: string) {
           </div>
 
           <!-- Error state -->
-          <!-- Voice selection with RadioCardDetailManySelect -->
+          <!-- Voice selection with RadioCardManySelect -->
           <div
             v-else-if="availableVoices[activeSpeechProvider] && availableVoices[activeSpeechProvider].length > 0"
             class="space-y-6"
diff --git a/apps/stage-web/src/pages/settings/providers/alibaba-cloud-model-studio.vue b/apps/stage-web/src/pages/settings/providers/alibaba-cloud-model-studio.vue
index d4072a896..51794e96d 100644
--- a/apps/stage-web/src/pages/settings/providers/alibaba-cloud-model-studio.vue
+++ b/apps/stage-web/src/pages/settings/providers/alibaba-cloud-model-studio.vue
@@ -7,7 +7,7 @@ import {
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
-import { FieldRange } from '@proj-airi/ui/Form'
+import { FieldRange } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/settings/providers/elevenlabs.vue b/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
index 1fa2df4b0..374071af0 100644
--- a/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
@@ -7,7 +7,7 @@ import {
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
-import { FieldCheckbox, FieldRange } from '@proj-airi/ui/Form'
+import { FieldCheckbox, FieldRange } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/settings/providers/microsoft-speech.vue b/apps/stage-web/src/pages/settings/providers/microsoft-speech.vue
index 3a5c92868..3e9f36932 100644
--- a/apps/stage-web/src/pages/settings/providers/microsoft-speech.vue
+++ b/apps/stage-web/src/pages/settings/providers/microsoft-speech.vue
@@ -7,7 +7,7 @@ import {
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
-import { FieldInput, FieldRange } from '@proj-airi/ui/Form'
+import { FieldInput, FieldRange } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/settings/providers/ollama.vue b/apps/stage-web/src/pages/settings/providers/ollama.vue
index f2c2c2c0a..1a4e5887b 100644
--- a/apps/stage-web/src/pages/settings/providers/ollama.vue
+++ b/apps/stage-web/src/pages/settings/providers/ollama.vue
@@ -9,7 +9,7 @@ import {
   ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores'
-import { FieldKeyValues } from '@proj-airi/ui/Form'
+import { FieldKeyValues } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/settings/providers/volcengine.vue b/apps/stage-web/src/pages/settings/providers/volcengine.vue
index c143debfc..559125b1f 100644
--- a/apps/stage-web/src/pages/settings/providers/volcengine.vue
+++ b/apps/stage-web/src/pages/settings/providers/volcengine.vue
@@ -7,7 +7,7 @@ import {
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
-import { FieldInput, FieldRange } from '@proj-airi/ui/Form'
+import { FieldInput, FieldRange } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/apps/stage-web/src/pages/test/filter-message.vue b/apps/stage-web/src/pages/test/filter-message.vue
index bbe8eea66..f1881beb9 100644
--- a/apps/stage-web/src/pages/test/filter-message.vue
+++ b/apps/stage-web/src/pages/test/filter-message.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Textarea } from '@proj-airi/ui/Form'
+import { Textarea } from '@proj-airi/ui'
 import { ref } from 'vue'
 
 const messageInput = ref<string>('')
diff --git a/apps/stage-web/src/pages/test/queues/delays.vue b/apps/stage-web/src/pages/test/queues/delays.vue
index 408735a86..b1b405ee6 100644
--- a/apps/stage-web/src/pages/test/queues/delays.vue
+++ b/apps/stage-web/src/pages/test/queues/delays.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useDelayMessageQueue } from '@proj-airi/stage-ui/composables'
 import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
-import { Textarea } from '@proj-airi/ui/Form'
+import { Textarea } from '@proj-airi/ui'
 import { ref } from 'vue'
 
 const messageInput = ref<string>('')
diff --git a/apps/stage-web/src/pages/test/queues/emotions.vue b/apps/stage-web/src/pages/test/queues/emotions.vue
index 1f13f50d1..6da316ea6 100644
--- a/apps/stage-web/src/pages/test/queues/emotions.vue
+++ b/apps/stage-web/src/pages/test/queues/emotions.vue
@@ -4,7 +4,7 @@ import type { Emotion } from '@proj-airi/stage-ui/constants/emotions'
 import { useQueue } from '@proj-airi/stage-ui/composables/queue'
 import { useEmotionsMessageQueue } from '@proj-airi/stage-ui/composables/queues'
 import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
-import { Textarea } from '@proj-airi/ui/Form'
+import { Textarea } from '@proj-airi/ui'
 import { ref } from 'vue'
 
 const messageInput = ref<string>('')
diff --git a/apps/stage-web/src/pages/test/queues/messages.vue b/apps/stage-web/src/pages/test/queues/messages.vue
index da7b8ae93..5cd95ebff 100644
--- a/apps/stage-web/src/pages/test/queues/messages.vue
+++ b/apps/stage-web/src/pages/test/queues/messages.vue
@@ -2,7 +2,7 @@
 import { useQueue } from '@proj-airi/stage-ui/composables/queue'
 import { useMessageContentQueue } from '@proj-airi/stage-ui/composables/queues'
 import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
-import { Textarea } from '@proj-airi/ui/Form'
+import { Textarea } from '@proj-airi/ui'
 import { ref } from 'vue'
 
 const messageInput = ref<string>('')
diff --git a/apps/stage-web/tsconfig.json b/apps/stage-web/tsconfig.json
index 0b7021667..7ff185db1 100644
--- a/apps/stage-web/tsconfig.json
+++ b/apps/stage-web/tsconfig.json
@@ -14,6 +14,12 @@
       ],
       "@proj-airi/ui-transitions": [
         "../../packages/ui-transitions/src/index.ts"
+      ],
+      "@proj-airi/ui": [
+        "../../packages/ui/src/index.ts"
+      ],
+      "@proj-airi/ui/*": [
+        "../../packages/ui/src/*"
       ]
     },
     "resolveJsonModule": true,
diff --git a/apps/stage-web/vite.config.ts b/apps/stage-web/vite.config.ts
index 182f55a39..d81b0ac46 100644
--- a/apps/stage-web/vite.config.ts
+++ b/apps/stage-web/vite.config.ts
@@ -55,6 +55,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@proj-airi/stage-ui': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src')),
+      '@proj-airi/ui': resolve(join(import.meta.dirname, '..', '..', 'packages', 'ui', 'src')),
       '@proj-airi/ui-transitions': resolve(join(import.meta.dirname, '..', '..', 'packages', 'ui-transitions', 'src')),
       '@proj-airi/stage-ui/stores': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src', 'stores')),
     },
diff --git a/packages/stage-ui/histoire.config.ts b/packages/stage-ui/histoire.config.ts
index 1c1769876..28c5b8396 100644
--- a/packages/stage-ui/histoire.config.ts
+++ b/packages/stage-ui/histoire.config.ts
@@ -26,10 +26,6 @@ export default defineConfig({
         id: 'design-system',
         title: 'Design System',
       },
-      {
-        id: 'typography',
-        title: 'Typography',
-      },
       {
         id: 'common',
         title: 'Common',
diff --git a/packages/stage-ui/package.json b/packages/stage-ui/package.json
index ad922ae0b..f34992431 100644
--- a/packages/stage-ui/package.json
+++ b/packages/stage-ui/package.json
@@ -94,6 +94,7 @@
     "@vitejs/plugin-vue": "^5.2.3",
     "histoire": "1.0.0-alpha.2",
     "unocss": "^66.1.0-beta.12",
-    "vite": "^6.3.3"
+    "vite": "^6.3.3",
+    "vue-sfc-transformer": "^0.1.14"
   }
 }
diff --git a/packages/ui/src/Form/Checkbox/Checkbox.story.vue b/packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue
similarity index 97%
rename from packages/ui/src/Form/Checkbox/Checkbox.story.vue
rename to packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue
index a2077181b..1f1b90dd9 100644
--- a/packages/ui/src/Form/Checkbox/Checkbox.story.vue
+++ b/packages/stage-ui/src/components/Form/Checkbox/Checkbox.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { Checkbox } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import Checkbox from './Checkbox.vue'
-
 const checkedValue = ref(true)
 const uncheckedValue = ref(false)
 const interactiveValue = ref(false)
diff --git a/packages/ui/src/Form/Field/FieldCheckbox.story.vue b/packages/stage-ui/src/components/Form/Field/FieldCheckbox.story.vue
similarity index 96%
rename from packages/ui/src/Form/Field/FieldCheckbox.story.vue
rename to packages/stage-ui/src/components/Form/Field/FieldCheckbox.story.vue
index ca62fe907..1eb3ed95c 100644
--- a/packages/ui/src/Form/Field/FieldCheckbox.story.vue
+++ b/packages/stage-ui/src/components/Form/Field/FieldCheckbox.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { FieldCheckbox } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import FieldCheckbox from './FieldCheckbox.vue'
-
 const checkedValue = ref(true)
 const uncheckedValue = ref(false)
 </script>
diff --git a/packages/ui/src/Form/Field/FieldInput.story.vue b/packages/stage-ui/src/components/Form/Field/FieldInput.story.vue
similarity index 97%
rename from packages/ui/src/Form/Field/FieldInput.story.vue
rename to packages/stage-ui/src/components/Form/Field/FieldInput.story.vue
index fdc5e7837..41a8353f7 100644
--- a/packages/ui/src/Form/Field/FieldInput.story.vue
+++ b/packages/stage-ui/src/components/Form/Field/FieldInput.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { FieldInput } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import FieldInput from './FieldInput.vue'
-
 const textValue = ref('')
 const passwordValue = ref('secret-password')
 const emailValue = ref('user@example.com')
diff --git a/packages/ui/src/Form/Field/FieldKeyValues.story.vue b/packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue
similarity index 98%
rename from packages/ui/src/Form/Field/FieldKeyValues.story.vue
rename to packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue
index 98f58b3d1..668c19103 100644
--- a/packages/ui/src/Form/Field/FieldKeyValues.story.vue
+++ b/packages/stage-ui/src/components/Form/Field/FieldKeyValues.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { FieldKeyValues } from '@proj-airi/ui'
 import { reactive, watch } from 'vue'
 
-import FieldKeyValues from './FieldKeyValues.vue'
-
 const emptyHeaders = reactive<{ key: string, value: string }[]>([
   { key: '', value: '' },
 ])
diff --git a/packages/ui/src/Form/Field/FieldRange.story.vue b/packages/stage-ui/src/components/Form/Field/FieldRange.story.vue
similarity index 97%
rename from packages/ui/src/Form/Field/FieldRange.story.vue
rename to packages/stage-ui/src/components/Form/Field/FieldRange.story.vue
index a337618e2..9c1c87382 100644
--- a/packages/ui/src/Form/Field/FieldRange.story.vue
+++ b/packages/stage-ui/src/components/Form/Field/FieldRange.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { FieldRange } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import FieldRange from './FieldRange.vue'
-
 const minValue = ref(0)
 const midValue = ref(0.5)
 const maxValue = ref(1)
diff --git a/packages/ui/src/Form/Input/Input.story.vue b/packages/stage-ui/src/components/Form/Input/Input.story.vue
similarity index 98%
rename from packages/ui/src/Form/Input/Input.story.vue
rename to packages/stage-ui/src/components/Form/Input/Input.story.vue
index 545473e4e..a0beec17a 100644
--- a/packages/ui/src/Form/Input/Input.story.vue
+++ b/packages/stage-ui/src/components/Form/Input/Input.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { Input } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import Input from './Input.vue'
-
 const textValue = ref('')
 const filledTextValue = ref('Sample text')
 const passwordValue = ref('secret-password')
diff --git a/packages/ui/src/Form/Input/InputFile.story.vue b/packages/stage-ui/src/components/Form/Input/InputFile.story.vue
similarity index 94%
rename from packages/ui/src/Form/Input/InputFile.story.vue
rename to packages/stage-ui/src/components/Form/Input/InputFile.story.vue
index f0b2a97aa..215984b24 100644
--- a/packages/ui/src/Form/Input/InputFile.story.vue
+++ b/packages/stage-ui/src/components/Form/Input/InputFile.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { InputFile } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import InputFile from './InputFile.vue'
-
 const files = ref<File[]>([])
 </script>
 
diff --git a/packages/ui/src/Form/Input/InputKeyValue.story.vue b/packages/stage-ui/src/components/Form/Input/InputKeyValue.story.vue
similarity index 90%
rename from packages/ui/src/Form/Input/InputKeyValue.story.vue
rename to packages/stage-ui/src/components/Form/Input/InputKeyValue.story.vue
index 6eec5325c..719214c68 100644
--- a/packages/ui/src/Form/Input/InputKeyValue.story.vue
+++ b/packages/stage-ui/src/components/Form/Input/InputKeyValue.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { InputKeyValue } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import InputKeyValue from './InputKeyValue.vue'
-
 const key = ref('')
 const value = ref('')
 </script>
diff --git a/packages/ui/src/Form/Range/Range.story.vue b/packages/stage-ui/src/components/Form/Range/Range.story.vue
similarity index 94%
rename from packages/ui/src/Form/Range/Range.story.vue
rename to packages/stage-ui/src/components/Form/Range/Range.story.vue
index 387e13342..05a11ce16 100644
--- a/packages/ui/src/Form/Range/Range.story.vue
+++ b/packages/stage-ui/src/components/Form/Range/Range.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { Range } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import Range from './Range.vue'
-
 const minValue = ref(0)
 const midValue = ref(50)
 const maxValue = ref(100)
diff --git a/packages/ui/src/Form/Textarea/Basic.story.vue b/packages/stage-ui/src/components/Form/Textarea/Basic.story.vue
similarity index 87%
rename from packages/ui/src/Form/Textarea/Basic.story.vue
rename to packages/stage-ui/src/components/Form/Textarea/Basic.story.vue
index f0c98e73b..9f2ab97a1 100644
--- a/packages/ui/src/Form/Textarea/Basic.story.vue
+++ b/packages/stage-ui/src/components/Form/Textarea/Basic.story.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import BasicTextarea from './Basic.vue'
+import { BasicTextarea } from '@proj-airi/ui'
 </script>
 
 <template>
diff --git a/packages/ui/src/Form/Textarea/Textarea.story.vue b/packages/stage-ui/src/components/Form/Textarea/Textarea.story.vue
similarity index 89%
rename from packages/ui/src/Form/Textarea/Textarea.story.vue
rename to packages/stage-ui/src/components/Form/Textarea/Textarea.story.vue
index ce0c9e92d..229b4ba22 100644
--- a/packages/ui/src/Form/Textarea/Textarea.story.vue
+++ b/packages/stage-ui/src/components/Form/Textarea/Textarea.story.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { Textarea } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import Textarea from './Textarea.vue'
-
 const input = ref('')
 </script>
 
diff --git a/packages/stage-ui/src/components/Gadgets/AudioSpectrum.story.vue b/packages/stage-ui/src/components/Gadgets/AudioSpectrum.story.vue
index 66b723f21..4448b5e39 100644
--- a/packages/stage-ui/src/components/Gadgets/AudioSpectrum.story.vue
+++ b/packages/stage-ui/src/components/Gadgets/AudioSpectrum.story.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FieldRange, Radio } from '@proj-airi/ui/Form'
+import { FieldRange, Radio } from '@proj-airi/ui'
 import { onBeforeUnmount, ref, watch } from 'vue'
 
 import AudioSpectrum from './AudioSpectrum.vue'
diff --git a/packages/stage-ui/src/components/Live2D/index.ts b/packages/stage-ui/src/components/Live2D/index.ts
new file mode 100644
index 000000000..654da5b4e
--- /dev/null
+++ b/packages/stage-ui/src/components/Live2D/index.ts
@@ -0,0 +1,2 @@
+export { default as Live2DCanvas } from './Canvas.vue'
+export { default as Live2DModel } from './Model.vue'
diff --git a/packages/ui/src/Form/Radio/RadioCardDetail.story.vue b/packages/stage-ui/src/components/Menu/RadioCardDetail.story.vue
similarity index 99%
rename from packages/ui/src/Form/Radio/RadioCardDetail.story.vue
rename to packages/stage-ui/src/components/Menu/RadioCardDetail.story.vue
index c35fa0f75..923293f58 100644
--- a/packages/ui/src/Form/Radio/RadioCardDetail.story.vue
+++ b/packages/stage-ui/src/components/Menu/RadioCardDetail.story.vue
@@ -9,7 +9,7 @@ const modelValue = ref('test')
 <template>
   <Story
     title="Radio Card (detail)"
-    group="form"
+    group="menu"
     :layout="{ type: 'grid', width: 500 }"
   >
     <template #controls>
diff --git a/packages/ui/src/Form/Radio/RadioCardDetail.vue b/packages/stage-ui/src/components/Menu/RadioCardDetail.vue
similarity index 98%
rename from packages/ui/src/Form/Radio/RadioCardDetail.vue
rename to packages/stage-ui/src/components/Menu/RadioCardDetail.vue
index e7c7a598d..e0b3f5a49 100644
--- a/packages/ui/src/Form/Radio/RadioCardDetail.vue
+++ b/packages/stage-ui/src/components/Menu/RadioCardDetail.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { TransitionVertical } from '@proj-airi/stage-ui/components'
+import { Input, TransitionVertical } from '@proj-airi/ui'
 import { ref } from 'vue'
 
-import Input from '../Input/Input.vue'
-
 withDefaults(defineProps<{
   id: string
   name: string
diff --git a/packages/ui/src/Form/RadioCardDetailManySelect.vue b/packages/stage-ui/src/components/Menu/RadioCardManySelect.vue
similarity index 98%
rename from packages/ui/src/Form/RadioCardDetailManySelect.vue
rename to packages/stage-ui/src/components/Menu/RadioCardManySelect.vue
index 3ef17bb88..704c00418 100644
--- a/packages/ui/src/Form/RadioCardDetailManySelect.vue
+++ b/packages/stage-ui/src/components/Menu/RadioCardManySelect.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import RadioCardDetail from './Radio/RadioCardDetail.vue'
+import RadioCardDetail from './RadioCardDetail.vue'
 
 interface Item {
   id: string
diff --git a/packages/ui/src/Form/Radio/RadioCardSimple.story.vue b/packages/stage-ui/src/components/Menu/RadioCardSimple.story.vue
similarity index 98%
rename from packages/ui/src/Form/Radio/RadioCardSimple.story.vue
rename to packages/stage-ui/src/components/Menu/RadioCardSimple.story.vue
index 6d45b9b59..c9710ce27 100644
--- a/packages/ui/src/Form/Radio/RadioCardSimple.story.vue
+++ b/packages/stage-ui/src/components/Menu/RadioCardSimple.story.vue
@@ -9,7 +9,7 @@ const modelValue = ref('test')
 <template>
   <Story
     title="Radio Card (simple)"
-    group="form"
+    group="menu"
     :layout="{ type: 'grid', width: 500 }"
   >
     <template #controls>
diff --git a/packages/ui/src/Form/Radio/RadioCardSimple.vue b/packages/stage-ui/src/components/Menu/RadioCardSimple.vue
similarity index 100%
rename from packages/ui/src/Form/Radio/RadioCardSimple.vue
rename to packages/stage-ui/src/components/Menu/RadioCardSimple.vue
diff --git a/packages/ui/src/Form/VoiceCard.story.vue b/packages/stage-ui/src/components/Menu/VoiceCard.story.vue
similarity index 99%
rename from packages/ui/src/Form/VoiceCard.story.vue
rename to packages/stage-ui/src/components/Menu/VoiceCard.story.vue
index 7975d5528..4a3b296d1 100644
--- a/packages/ui/src/Form/VoiceCard.story.vue
+++ b/packages/stage-ui/src/components/Menu/VoiceCard.story.vue
@@ -137,7 +137,7 @@ onBeforeUnmount(() => {
 <template>
   <Story
     title="Voice Card"
-    group="form"
+    group="menu"
     :layout="{ type: 'grid', width: 400 }"
   >
     <template #controls>
diff --git a/packages/ui/src/Form/VoiceCard.vue b/packages/stage-ui/src/components/Menu/VoiceCard.vue
similarity index 98%
rename from packages/ui/src/Form/VoiceCard.vue
rename to packages/stage-ui/src/components/Menu/VoiceCard.vue
index 9b630c535..9d0ae5966 100644
--- a/packages/ui/src/Form/VoiceCard.vue
+++ b/packages/stage-ui/src/components/Menu/VoiceCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { AudioSpectrum, AudioSpectrumVisualizer, TransitionVertical } from '@proj-airi/stage-ui/components'
+import { Input, TransitionVertical } from '@proj-airi/ui'
 
-import Input from './Input/Input.vue'
+import { AudioSpectrum, AudioSpectrumVisualizer } from '../Gadgets'
 
 interface VoiceLanguage {
   name: string
diff --git a/packages/ui/src/Form/VoiceCardManySelect.story.vue b/packages/stage-ui/src/components/Menu/VoiceCardManySelect.story.vue
similarity index 99%
rename from packages/ui/src/Form/VoiceCardManySelect.story.vue
rename to packages/stage-ui/src/components/Menu/VoiceCardManySelect.story.vue
index 0d9cabcd2..3370e6da5 100644
--- a/packages/ui/src/Form/VoiceCardManySelect.story.vue
+++ b/packages/stage-ui/src/components/Menu/VoiceCardManySelect.story.vue
@@ -56,7 +56,7 @@ function handleSearchQueryUpdate(value: string) {
 <template>
   <Story
     title="Voice Preview Player"
-    group="form"
+    group="menu"
     :layout="{ type: 'grid', width: 800 }"
   >
     <template #controls>
diff --git a/packages/ui/src/Form/VoiceCardManySelect.vue b/packages/stage-ui/src/components/Menu/VoiceCardManySelect.vue
similarity index 100%
rename from packages/ui/src/Form/VoiceCardManySelect.vue
rename to packages/stage-ui/src/components/Menu/VoiceCardManySelect.vue
diff --git a/packages/stage-ui/src/components/Menu/index.ts b/packages/stage-ui/src/components/Menu/index.ts
index 0f95f7c95..ac41aaba9 100644
--- a/packages/stage-ui/src/components/Menu/index.ts
+++ b/packages/stage-ui/src/components/Menu/index.ts
@@ -1,3 +1,8 @@
 export { default as CharacterCard } from './CharacterCard.vue'
 export { default as IconItem } from './IconItem.vue'
 export { default as IconStatusItem } from './IconStatusItem.vue'
+export { default as RadioCardDetail } from './RadioCardDetail.vue'
+export { default as RadioCardManySelect } from './RadioCardManySelect.vue'
+export { default as RadioCardSimple } from './RadioCardSimple.vue'
+export { default as VoiceCard } from './VoiceCard.vue'
+export { default as VoiceCardManySelect } from './VoiceCardManySelect.vue'
diff --git a/packages/stage-ui/src/components/Collapsable.vue b/packages/stage-ui/src/components/Misc/Collapsable.vue
similarity index 93%
rename from packages/stage-ui/src/components/Collapsable.vue
rename to packages/stage-ui/src/components/Misc/Collapsable.vue
index f22117852..2e6d8e5f7 100644
--- a/packages/stage-ui/src/components/Collapsable.vue
+++ b/packages/stage-ui/src/components/Misc/Collapsable.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
+import { TransitionVertical } from '@proj-airi/ui'
 import { watchEffect } from 'vue'
 
-import TransitionVertical from './TransitionVertical.vue'
-
 const props = defineProps<{
   default?: boolean
   label?: string
diff --git a/packages/stage-ui/src/components/Misc/Steps/index.ts b/packages/stage-ui/src/components/Misc/Steps/index.ts
deleted file mode 100644
index 2c8c7662a..000000000
--- a/packages/stage-ui/src/components/Misc/Steps/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Steps } from './Steps.vue'
diff --git a/packages/stage-ui/src/components/Misc/index.ts b/packages/stage-ui/src/components/Misc/index.ts
index 8fde79327..58c6d1aaf 100644
--- a/packages/stage-ui/src/components/Misc/index.ts
+++ b/packages/stage-ui/src/components/Misc/index.ts
@@ -1,2 +1,3 @@
+export { default as Collapsable } from './Collapsable.vue'
 export { default as Skeleton } from './Skeleton.vue'
 export * from './Steppers'
diff --git a/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue b/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue
index ebcc7a7a0..25e9d94b8 100644
--- a/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FieldInput } from '@proj-airi/ui/Form'
+import { FieldInput } from '@proj-airi/ui'
 
 const props = defineProps<{
   placeholder?: string
diff --git a/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.vue b/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.vue
index 540b738fe..13a19393f 100644
--- a/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderAdvancedSettings.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import Collapsable from '../Collapsable.vue'
+import Collapsable from '../Misc/Collapsable.vue'
 
 const props = defineProps<{
   title?: string
diff --git a/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue b/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue
index 8619179de..7dcc42099 100644
--- a/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FieldInput } from '@proj-airi/ui/Form'
+import { FieldInput } from '@proj-airi/ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
diff --git a/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue b/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue
index 96d988e84..46291addd 100644
--- a/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue
+++ b/packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FieldInput } from '@proj-airi/ui/Form'
+import { FieldInput } from '@proj-airi/ui'
 
 const props = defineProps<{
   placeholder?: string
diff --git a/packages/stage-ui/src/components/Providers/SpeechPlayground.vue b/packages/stage-ui/src/components/Providers/SpeechPlayground.vue
index 31bc6b81d..fb71b1e09 100644
--- a/packages/stage-ui/src/components/Providers/SpeechPlayground.vue
+++ b/packages/stage-ui/src/components/Providers/SpeechPlayground.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { VoiceInfo } from '../../stores'
 
-import { FieldCheckbox } from '@proj-airi/ui/Form'
+import { FieldCheckbox } from '@proj-airi/ui'
 import { onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
diff --git a/packages/stage-ui/src/components/Scenes/Live2D.vue b/packages/stage-ui/src/components/Scenes/Live2D.vue
index 73e2ab0cc..2096e9bd2 100644
--- a/packages/stage-ui/src/components/Scenes/Live2D.vue
+++ b/packages/stage-ui/src/components/Scenes/Live2D.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { TransitionVertical } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -7,7 +8,6 @@ import { useSettings } from '../../stores'
 import Live2DCanvas from '../Live2D/Canvas.vue'
 import Live2DModel from '../Live2D/Model.vue'
 import Screen from '../Screen.vue'
-import TransitionVertical from '../TransitionVertical.vue'
 import '../../utils/live2d-zip-loader'
 
 withDefaults(defineProps<{
diff --git a/packages/stage-ui/src/components/Scenes/VRM.vue b/packages/stage-ui/src/components/Scenes/VRM.vue
index 3cbb4b69f..6b130b208 100644
--- a/packages/stage-ui/src/components/Scenes/VRM.vue
+++ b/packages/stage-ui/src/components/Scenes/VRM.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
+import { TransitionVertical } from '@proj-airi/ui'
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Collapsable from '../Collapsable.vue'
 import DataGuiRange from '../DataGui/Range.vue'
+import Collapsable from '../Misc/Collapsable.vue'
 import Screen from '../Screen.vue'
-import TransitionVertical from '../TransitionVertical.vue'
 import VRMModel from '../VRM/Model.vue'
 
 const props = defineProps<{
diff --git a/packages/stage-ui/src/components/Scenes/index.ts b/packages/stage-ui/src/components/Scenes/index.ts
new file mode 100644
index 000000000..7905d81db
--- /dev/null
+++ b/packages/stage-ui/src/components/Scenes/index.ts
@@ -0,0 +1,2 @@
+export { default as SceneLive2D } from './Live2D.vue'
+export { default as SceneVRM } from './VRM.vue'
diff --git a/packages/stage-ui/src/components/Section/Section.vue b/packages/stage-ui/src/components/Section/Section.vue
index bcba60a97..828ec0643 100644
--- a/packages/stage-ui/src/components/Section/Section.vue
+++ b/packages/stage-ui/src/components/Section/Section.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Collapsable from '../Collapsable.vue'
+import Collapsable from '../Misc/Collapsable.vue'
 
 withDefaults(defineProps<{
   title: string
diff --git a/packages/stage-ui/src/components/VRM/index.ts b/packages/stage-ui/src/components/VRM/index.ts
new file mode 100644
index 000000000..e6b3c2324
--- /dev/null
+++ b/packages/stage-ui/src/components/VRM/index.ts
@@ -0,0 +1 @@
+export { default as VRMModel } from './Model.vue'
diff --git a/packages/stage-ui/src/components/Widgets/index.ts b/packages/stage-ui/src/components/Widgets/index.ts
new file mode 100644
index 000000000..a9227bba8
--- /dev/null
+++ b/packages/stage-ui/src/components/Widgets/index.ts
@@ -0,0 +1 @@
+export { default as WidgetStage } from './Stage.vue'
diff --git a/packages/stage-ui/src/components/index.ts b/packages/stage-ui/src/components/index.ts
index f109bba43..dc3b55923 100644
--- a/packages/stage-ui/src/components/index.ts
+++ b/packages/stage-ui/src/components/index.ts
@@ -1,17 +1,13 @@
 export * from './Button'
-export { default as Collapsable } from './Collapsable.vue'
 export * from './Gadgets'
 export * from './Graphics'
 export * from './Layouts'
-export { default as Live2DCanvas } from './Live2D/Canvas.vue'
-export { default as Live2DModel } from './Live2D/Model.vue'
+export * from './Live2D'
 export * from './Menu'
 export * from './Misc'
 export * from './Physics'
 export * from './Providers'
-export { default as SceneLive2D } from './Scenes/Live2D.vue'
-export { default as SceneVRM } from './Scenes/VRM.vue'
+export * from './Scenes'
 export * from './Section'
-export { default as TransitionVertical } from './TransitionVertical.vue'
-export { default as VRMModel } from './VRM/Model.vue'
-export { default as WidgetStage } from './Widgets/Stage.vue'
+export * from './VRM'
+export * from './Widgets'
diff --git a/packages/stage-ui/src/components/Typography/Mono.story.vue b/packages/stage-ui/stories/TypographyMono.story.vue
similarity index 88%
rename from packages/stage-ui/src/components/Typography/Mono.story.vue
rename to packages/stage-ui/stories/TypographyMono.story.vue
index c2b1ebe47..28485c654 100644
--- a/packages/stage-ui/src/components/Typography/Mono.story.vue
+++ b/packages/stage-ui/stories/TypographyMono.story.vue
@@ -1,7 +1,7 @@
 <template>
   <Story
-    title="Mono"
-    group="typography"
+    title="Typography Mono"
+    group="design-system"
     :layout="{ type: 'grid', width: 500 }"
   >
     <Variant title="Mono">
diff --git a/packages/stage-ui/src/components/Typography/Sans.story.vue b/packages/stage-ui/stories/TypographySans.story.vue
similarity index 96%
rename from packages/stage-ui/src/components/Typography/Sans.story.vue
rename to packages/stage-ui/stories/TypographySans.story.vue
index 89bd5a23d..75accfb11 100644
--- a/packages/stage-ui/src/components/Typography/Sans.story.vue
+++ b/packages/stage-ui/stories/TypographySans.story.vue
@@ -1,7 +1,7 @@
 <template>
   <Story
-    title="Sans"
-    group="typography"
+    title="Typography Sans"
+    group="design-system"
     :layout="{ type: 'grid', width: 500 }"
   >
     <Variant title="Sans">
diff --git a/packages/stage-ui/tsconfig.json b/packages/stage-ui/tsconfig.json
index d633a0ae0..aada85b6d 100644
--- a/packages/stage-ui/tsconfig.json
+++ b/packages/stage-ui/tsconfig.json
@@ -8,6 +8,14 @@
     ],
     "module": "ESNext",
     "moduleResolution": "Bundler",
+    "paths": {
+      "@proj-airi/ui": [
+        "../../packages/ui/src/index.ts"
+      ],
+      "@proj-airi/ui/*": [
+        "../../packages/ui/src/*"
+      ]
+    },
     "resolveJsonModule": true,
     "types": [
       "vitest",
@@ -32,8 +40,16 @@
   },
   "include": [
     "env.d.ts",
-    "**/*.vue",
-    "**/*.story.vue"
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.mts",
+    "src/**/*.vue",
+    "src/**/*.story.vue",
+    "stories/**/*.ts",
+    "stories/**/*.d.ts",
+    "stories/**/*.mts",
+    "stories/**/*.vue",
+    "stories/**/*.story.vue"
   ],
   "exclude": [
     "dist",
diff --git a/packages/stage-ui/vite.config.ts b/packages/stage-ui/vite.config.ts
index 2c33d03f7..25e09b53b 100644
--- a/packages/stage-ui/vite.config.ts
+++ b/packages/stage-ui/vite.config.ts
@@ -1,4 +1,4 @@
-import { join } from 'node:path'
+import { join, resolve } from 'node:path'
 import vue from '@vitejs/plugin-vue'
 import Unocss from 'unocss/vite'
 import { defineConfig } from 'vite'
@@ -10,6 +10,11 @@ export default defineConfig({
       allow: [join('..', '..')],
     },
   },
+  resolve: {
+    alias: {
+      '@proj-airi/ui': resolve(join(import.meta.dirname, '..', '..', 'packages', 'ui', 'src')),
+    },
+  },
   plugins: [
     vue(),
     Unocss(),
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d5517f032..adbc384bd 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,7 +2,7 @@
   "name": "@proj-airi/ui",
   "type": "module",
   "private": true,
-  "description": "A collection of UI components that used by Project Airi",
+  "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Neko Ayaka",
     "email": "neko@ayaka.moe",
@@ -19,9 +19,13 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
     },
-    "./Form": {
-      "types": "./dist/Form/index.d.ts",
-      "import": "./dist/Form/index.mjs"
+    "./components/animations": {
+      "types": "./dist/components/Animations/index.d.ts",
+      "import": "./dist/components/Animations/index.mjs"
+    },
+    "./components/form": {
+      "types": "./dist/components/Form/index.d.ts",
+      "import": "./dist/components/Form/index.mjs"
     }
   },
   "scripts": {
@@ -31,13 +35,12 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@proj-airi/stage-ui": "workspace:*",
     "@vueuse/core": "^13.1.0",
+    "reka-ui": "^2.2.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@unocss/reset": "^66.1.0-beta.12",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vue-macros/volar": "3.0.0-beta.8",
     "vue-tsc": "^3.0.0-alpha.4"
   }
 }
diff --git a/packages/ui/src/Form/Radio/index.ts b/packages/ui/src/Form/Radio/index.ts
deleted file mode 100644
index 0e2c4a3e4..000000000
--- a/packages/ui/src/Form/Radio/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Radio } from './Radio.vue'
-export { default as RadioCardDetail } from './RadioCardDetail.vue'
-export { default as RadioCardSimple } from './RadioCardSimple.vue'
diff --git a/packages/ui/src/Form/index.ts b/packages/ui/src/Form/index.ts
deleted file mode 100644
index a9e2c36f5..000000000
--- a/packages/ui/src/Form/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from './Checkbox'
-export * from './Field'
-export * from './Input'
-export * from './Radio'
-export { default as RadioCardDetailManySelect } from './RadioCardDetailManySelect.vue'
-export * from './Range'
-export * from './Textarea'
-export { default as VoiceCard } from './VoiceCard.vue'
-export { default as VoiceCardManySelect } from './VoiceCardManySelect.vue'
diff --git a/packages/stage-ui/src/components/TransitionVertical.vue b/packages/ui/src/components/Animations/TransitionVertical.vue
similarity index 100%
rename from packages/stage-ui/src/components/TransitionVertical.vue
rename to packages/ui/src/components/Animations/TransitionVertical.vue
diff --git a/packages/ui/src/components/Animations/index.ts b/packages/ui/src/components/Animations/index.ts
new file mode 100644
index 000000000..7a34fb3b9
--- /dev/null
+++ b/packages/ui/src/components/Animations/index.ts
@@ -0,0 +1 @@
+export { default as TransitionVertical } from './TransitionVertical.vue'
diff --git a/packages/ui/src/Form/Checkbox/Checkbox.vue b/packages/ui/src/components/Form/Checkbox/Checkbox.vue
similarity index 100%
rename from packages/ui/src/Form/Checkbox/Checkbox.vue
rename to packages/ui/src/components/Form/Checkbox/Checkbox.vue
diff --git a/packages/ui/src/Form/Checkbox/index.ts b/packages/ui/src/components/Form/Checkbox/index.ts
similarity index 100%
rename from packages/ui/src/Form/Checkbox/index.ts
rename to packages/ui/src/components/Form/Checkbox/index.ts
diff --git a/packages/ui/src/Form/Field/FieldCheckbox.vue b/packages/ui/src/components/Form/Field/FieldCheckbox.vue
similarity index 100%
rename from packages/ui/src/Form/Field/FieldCheckbox.vue
rename to packages/ui/src/components/Form/Field/FieldCheckbox.vue
diff --git a/packages/ui/src/Form/Field/FieldInput.vue b/packages/ui/src/components/Form/Field/FieldInput.vue
similarity index 100%
rename from packages/ui/src/Form/Field/FieldInput.vue
rename to packages/ui/src/components/Form/Field/FieldInput.vue
diff --git a/packages/ui/src/Form/Field/FieldKeyValues.vue b/packages/ui/src/components/Form/Field/FieldKeyValues.vue
similarity index 100%
rename from packages/ui/src/Form/Field/FieldKeyValues.vue
rename to packages/ui/src/components/Form/Field/FieldKeyValues.vue
diff --git a/packages/ui/src/Form/Field/FieldRange.vue b/packages/ui/src/components/Form/Field/FieldRange.vue
similarity index 100%
rename from packages/ui/src/Form/Field/FieldRange.vue
rename to packages/ui/src/components/Form/Field/FieldRange.vue
diff --git a/packages/ui/src/Form/Field/index.ts b/packages/ui/src/components/Form/Field/index.ts
similarity index 100%
rename from packages/ui/src/Form/Field/index.ts
rename to packages/ui/src/components/Form/Field/index.ts
diff --git a/packages/ui/src/Form/Input/Input.vue b/packages/ui/src/components/Form/Input/Input.vue
similarity index 100%
rename from packages/ui/src/Form/Input/Input.vue
rename to packages/ui/src/components/Form/Input/Input.vue
diff --git a/packages/ui/src/Form/Input/InputFile.vue b/packages/ui/src/components/Form/Input/InputFile.vue
similarity index 100%
rename from packages/ui/src/Form/Input/InputFile.vue
rename to packages/ui/src/components/Form/Input/InputFile.vue
diff --git a/packages/ui/src/Form/Input/InputKeyValue.vue b/packages/ui/src/components/Form/Input/InputKeyValue.vue
similarity index 100%
rename from packages/ui/src/Form/Input/InputKeyValue.vue
rename to packages/ui/src/components/Form/Input/InputKeyValue.vue
diff --git a/packages/ui/src/Form/Input/index.ts b/packages/ui/src/components/Form/Input/index.ts
similarity index 100%
rename from packages/ui/src/Form/Input/index.ts
rename to packages/ui/src/components/Form/Input/index.ts
diff --git a/packages/ui/src/Form/Radio/Radio.vue b/packages/ui/src/components/Form/Radio/Radio.vue
similarity index 100%
rename from packages/ui/src/Form/Radio/Radio.vue
rename to packages/ui/src/components/Form/Radio/Radio.vue
diff --git a/packages/ui/src/components/Form/Radio/index.ts b/packages/ui/src/components/Form/Radio/index.ts
new file mode 100644
index 000000000..a1fc2887e
--- /dev/null
+++ b/packages/ui/src/components/Form/Radio/index.ts
@@ -0,0 +1 @@
+export { default as Radio } from './Radio.vue'
diff --git a/packages/ui/src/Form/Range/Range.vue b/packages/ui/src/components/Form/Range/Range.vue
similarity index 100%
rename from packages/ui/src/Form/Range/Range.vue
rename to packages/ui/src/components/Form/Range/Range.vue
diff --git a/packages/ui/src/Form/Range/index.ts b/packages/ui/src/components/Form/Range/index.ts
similarity index 100%
rename from packages/ui/src/Form/Range/index.ts
rename to packages/ui/src/components/Form/Range/index.ts
diff --git a/packages/ui/src/Form/Textarea/Basic.vue b/packages/ui/src/components/Form/Textarea/Basic.vue
similarity index 100%
rename from packages/ui/src/Form/Textarea/Basic.vue
rename to packages/ui/src/components/Form/Textarea/Basic.vue
diff --git a/packages/ui/src/Form/Textarea/Textarea.vue b/packages/ui/src/components/Form/Textarea/Textarea.vue
similarity index 100%
rename from packages/ui/src/Form/Textarea/Textarea.vue
rename to packages/ui/src/components/Form/Textarea/Textarea.vue
diff --git a/packages/ui/src/Form/Textarea/index.ts b/packages/ui/src/components/Form/Textarea/index.ts
similarity index 100%
rename from packages/ui/src/Form/Textarea/index.ts
rename to packages/ui/src/components/Form/Textarea/index.ts
diff --git a/packages/ui/src/components/Form/index.ts b/packages/ui/src/components/Form/index.ts
new file mode 100644
index 000000000..3511b5c61
--- /dev/null
+++ b/packages/ui/src/components/Form/index.ts
@@ -0,0 +1,6 @@
+export * from './Checkbox'
+export * from './Field'
+export * from './Input'
+export * from './Radio'
+export * from './Range'
+export * from './Textarea'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 5e819e959..72c2aeb06 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1 +1,2 @@
-export * from './Form'
+export * from './components/Animations'
+export * from './components/Form'
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index d633a0ae0..88a77d4f7 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -10,7 +10,6 @@
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "types": [
-      "vitest",
       "vite/client"
     ],
     "allowJs": true,
@@ -31,9 +30,10 @@
     ]
   },
   "include": [
-    "env.d.ts",
-    "**/*.vue",
-    "**/*.story.vue"
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.mts",
+    "src/**/*.vue"
   ],
   "exclude": [
     "dist",
diff --git a/packages/ui/uno.config.ts b/packages/ui/uno.config.ts
deleted file mode 100644
index 241b30eaa..000000000
--- a/packages/ui/uno.config.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import {
-  defineConfig,
-  presetAttributify,
-  presetIcons,
-  presetTypography,
-  presetWebFonts,
-  presetWind3,
-  transformerDirectives,
-  transformerVariantGroup,
-} from 'unocss'
-
-export default defineConfig({
-  presets: [
-    presetWind3(),
-    presetAttributify(),
-    presetTypography(),
-    presetWebFonts({
-      fonts: {
-        sans: 'DM Sans',
-        serif: 'DM Serif Display',
-        mono: 'DM Mono',
-      },
-      timeouts: {
-        warning: 5000,
-        failure: 10000,
-      },
-    }),
-    presetIcons({
-      scale: 1.2,
-    }),
-  ],
-  transformers: [
-    transformerDirectives(),
-    transformerVariantGroup(),
-  ],
-  safelist: 'prose prose-sm m-auto text-left'.split(' '),
-})
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
deleted file mode 100644
index 3691d3075..000000000
--- a/packages/ui/vite.config.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { resolve } from 'node:path'
-import Vue from '@vitejs/plugin-vue'
-import Unocss from 'unocss/vite'
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  build: {
-    outDir: resolve(import.meta.dirname, 'playground', 'dist'),
-  },
-  plugins: [
-    Vue(),
-    // https://github.com/antfu/unocss
-    // see uno.config.ts for config
-    Unocss(),
-  ],
-})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 60f07bafe..f1efdf7c2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,7 +110,7 @@ importers:
         version: 5.8.3
       unbuild:
         specifier: ^3.5.0
-        version: 3.5.0(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))
+        version: 3.5.0(typescript@5.8.3)(vue-sfc-transformer@0.1.14(@vue/compiler-core@3.5.13)(esbuild@0.25.2)(vue@3.5.13(typescript@5.8.3)))(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))
       unocss:
         specifier: ^66.1.0-beta.12
         version: 66.1.0-beta.12(postcss@8.5.3)(vite@6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.3))
@@ -470,7 +470,7 @@ importers:
         version: 19.1.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(@vueuse/core@13.1.0(vue@3.5.13(typescript@5.8.3)))
       unplugin-vue-components:
         specifier: ^28.5.0
-        version: 28.5.0(@babel/parser@7.26.10)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(vue@3.5.13(typescript@5.8.3))
+        version: 28.5.0(@babel/parser@7.27.0)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(vue@3.5.13(typescript@5.8.3))
       unplugin-vue-macros:
         specifier: ^2.14.5
         version: 2.14.5(@vueuse/core@13.1.0(vue@3.5.13(typescript@5.8.3)))(esbuild@0.25.2)(rollup@2.79.1)(typescript@5.8.3)(vite@6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-tsc@3.0.0-alpha.4(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))
@@ -771,7 +771,7 @@ importers:
         version: 19.1.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.40.0))(@vueuse/core@13.1.0(vue@3.5.13(typescript@5.8.3)))
       unplugin-vue-components:
         specifier: ^28.5.0
-        version: 28.5.0(@babel/parser@7.26.10)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.40.0))(vue@3.5.13(typescript@5.8.3))
+        version: 28.5.0(@babel/parser@7.27.0)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.40.0))(vue@3.5.13(typescript@5.8.3))
       unplugin-vue-macros:
         specifier: ^2.14.5
         version: 2.14.5(@vueuse/core@13.1.0(vue@3.5.13(typescript@5.8.3)))(esbuild@0.25.2)(rollup@4.40.0)(typescript@5.8.3)(vite@6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-tsc@3.0.0-alpha.4(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))
@@ -1018,25 +1018,25 @@ importers:
       vite:
         specifier: ^6.3.3
         version: 6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0)
+      vue-sfc-transformer:
+        specifier: ^0.1.14
+        version: 0.1.14(@vue/compiler-core@3.5.13)(esbuild@0.25.2)(vue@3.5.13(typescript@5.8.3))
 
   packages/ui:
     dependencies:
-      '@proj-airi/stage-ui':
-        specifier: workspace:*
-        version: link:../stage-ui
       '@vueuse/core':
         specifier: ^13.1.0
         version: 13.1.0(vue@3.5.13(typescript@5.8.3))
+      reka-ui:
+        specifier: ^2.2.0
+        version: 2.2.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.8.3)
     devDependencies:
-      '@unocss/reset':
-        specifier: ^66.1.0-beta.12
-        version: 66.1.0-beta.12
-      '@vitejs/plugin-vue':
-        specifier: ^5.2.3
-        version: 5.2.3(vite@6.3.3(@types/node@22.14.1)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.3))
+      '@vue-macros/volar':
+        specifier: 3.0.0-beta.8
+        version: 3.0.0-beta.8(typescript@5.8.3)(vue-tsc@3.0.0-alpha.4(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))
       vue-tsc:
         specifier: ^3.0.0-alpha.4
         version: 3.0.0-alpha.4(typescript@5.8.3)
@@ -1576,6 +1576,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.27.0':
+    resolution: {integrity: sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9':
     resolution: {integrity: sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==}
     engines: {node: '>=6.9.0'}
@@ -1996,6 +2001,10 @@ packages:
     resolution: {integrity: sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.27.0':
+    resolution: {integrity: sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==}
+    engines: {node: '>=6.9.0'}
+
   '@bcoe/v8-coverage@1.0.2':
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
@@ -11326,6 +11335,14 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-sfc-transformer@0.1.14:
+    resolution: {integrity: sha512-WUgc6PKNmS9If5o/bpT+ulaF869iotD+em2l3Mj2kML5YfdxN46vXj/f9zzlaffv66up36BG1PhdP+utIyuqCg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@vue/compiler-core': ^3.5.13
+      esbuild: '*'
+      vue: ^3.5.13
+
   vue-tsc@2.2.10:
     resolution: {integrity: sha512-jWZ1xSaNbabEV3whpIDMbjVSVawjAyW+x1n3JeGQo7S0uv2n9F/JMgWW90tGWNFRKya4YwKMZgCtr0vRAM7DeQ==}
     hasBin: true
@@ -12080,6 +12097,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.26.10
 
+  '@babel/parser@7.27.0':
+    dependencies:
+      '@babel/types': 7.27.0
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9(@babel/core@7.26.0)':
     dependencies:
       '@babel/core': 7.26.0
@@ -12611,6 +12632,11 @@ snapshots:
       '@babel/helper-string-parser': 7.25.9
       '@babel/helper-validator-identifier': 7.25.9
 
+  '@babel/types@7.27.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
   '@bcoe/v8-coverage@1.0.2': {}
 
   '@browserbasehq/sdk@2.5.0(encoding@0.1.13)':
@@ -15028,7 +15054,7 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.26.10
+      '@babel/parser': 7.27.0
       '@babel/types': 7.26.10
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
@@ -15042,7 +15068,7 @@ snapshots:
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.26.10
+      '@babel/parser': 7.27.0
       '@babel/types': 7.26.10
     optional: true
 
@@ -20625,7 +20651,7 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
-  mkdist@2.3.0(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3)):
+  mkdist@2.3.0(typescript@5.8.3)(vue-sfc-transformer@0.1.14(@vue/compiler-core@3.5.13)(esbuild@0.25.2)(vue@3.5.13(typescript@5.8.3)))(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3)):
     dependencies:
       autoprefixer: 10.4.21(postcss@8.5.3)
       citty: 0.1.6
@@ -20643,6 +20669,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
       vue: 3.5.13(typescript@5.8.3)
+      vue-sfc-transformer: 0.1.14(@vue/compiler-core@3.5.13)(esbuild@0.25.2)(vue@3.5.13(typescript@5.8.3))
       vue-tsc: 2.2.10(typescript@5.8.3)
 
   mlly@1.7.4:
@@ -23119,7 +23146,7 @@ snapshots:
 
   ultrahtml@1.6.0: {}
 
-  unbuild@3.5.0(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3)):
+  unbuild@3.5.0(typescript@5.8.3)(vue-sfc-transformer@0.1.14(@vue/compiler-core@3.5.13)(esbuild@0.25.2)(vue@3.5.13(typescript@5.8.3)))(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@4.40.0)
       '@rollup/plugin-commonjs': 28.0.3(rollup@4.40.0)
@@ -23135,7 +23162,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 2.4.2
       magic-string: 0.30.17
-      mkdist: 2.3.0(typescript@5.8.3)(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))
+      mkdist: 2.3.0(typescript@5.8.3)(vue-sfc-transformer@0.1.14(@vue/compiler-core@3.5.13)(esbuild@0.25.2)(vue@3.5.13(typescript@5.8.3)))(vue-tsc@2.2.10(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))
       mlly: 1.7.4
       pathe: 2.0.3
       pkg-types: 2.1.0
@@ -23431,7 +23458,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.2
 
-  unplugin-vue-components@28.5.0(@babel/parser@7.26.10)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(vue@3.5.13(typescript@5.8.3)):
+  unplugin-vue-components@28.5.0(@babel/parser@7.27.0)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(vue@3.5.13(typescript@5.8.3)):
     dependencies:
       chokidar: 3.6.0
       debug: 4.4.0
@@ -23443,12 +23470,12 @@ snapshots:
       unplugin-utils: 0.2.4
       vue: 3.5.13(typescript@5.8.3)
     optionalDependencies:
-      '@babel/parser': 7.26.10
+      '@babel/parser': 7.27.0
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@2.79.1)
     transitivePeerDependencies:
       - supports-color
 
-  unplugin-vue-components@28.5.0(@babel/parser@7.26.10)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.40.0))(vue@3.5.13(typescript@5.8.3)):
+  unplugin-vue-components@28.5.0(@babel/parser@7.27.0)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.40.0))(vue@3.5.13(typescript@5.8.3)):
     dependencies:
       chokidar: 3.6.0
       debug: 4.4.0
@@ -23460,7 +23487,7 @@ snapshots:
       unplugin-utils: 0.2.4
       vue: 3.5.13(typescript@5.8.3)
     optionalDependencies:
-      '@babel/parser': 7.26.10
+      '@babel/parser': 7.27.0
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.40.0)
     transitivePeerDependencies:
       - supports-color
@@ -24054,6 +24081,13 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.13(typescript@5.8.3)
 
+  vue-sfc-transformer@0.1.14(@vue/compiler-core@3.5.13)(esbuild@0.25.2)(vue@3.5.13(typescript@5.8.3)):
+    dependencies:
+      '@babel/parser': 7.27.0
+      '@vue/compiler-core': 3.5.13
+      esbuild: 0.25.2
+      vue: 3.5.13(typescript@5.8.3)
+
   vue-tsc@2.2.10(typescript@5.8.3):
     dependencies:
       '@volar/typescript': 2.4.11