fix: types & import

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'

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'

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"

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"

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'

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'

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'

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'

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'

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,

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

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'

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'

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'
 

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'
 

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'

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"

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"

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'

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'

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'

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'

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'

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>('')

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>('')

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>('')

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>('')

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,

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')),
     },

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',

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"
   }
 }

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)

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>

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')

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: '' },
 ])

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)

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')

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>
 

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>

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)

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>

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>
 

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'

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'

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>

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

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

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>

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>

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

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>

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'

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

packages/stage-ui/src/components/Misc/Steps/index.ts

@@ -1 +0,0 @@
-export { default as Steps } from './Steps.vue'

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'

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

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

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'
 

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

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'
 

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

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

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'

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

packages/stage-ui/src/components/VRM/index.ts

@@ -0,0 +1 @@
+export { default as VRMModel } from './Model.vue'

packages/stage-ui/src/components/Widgets/index.ts

@@ -0,0 +1 @@
+export { default as WidgetStage } from './Stage.vue'

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'

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">

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">

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",

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(),

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"
   }
 }

packages/ui/src/Form/Radio/index.ts

@@ -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'

packages/ui/src/Form/index.ts

@@ -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'

packages/ui/src/components/Animations/index.ts

@@ -0,0 +1 @@
+export { default as TransitionVertical } from './TransitionVertical.vue'

packages/ui/src/components/Form/Radio/index.ts

@@ -0,0 +1 @@
+export { default as Radio } from './Radio.vue'

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'

packages/ui/src/index.ts

@@ -1 +1,2 @@
-export * from './Form'
+export * from './components/Animations'
+export * from './components/Form'

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",

packages/ui/uno.config.ts

@@ -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(' '),
-})