feat(package/ui): move stage-ui/Form to ui/Form (#140)

apps/stage-tamagotchi/package.json

@@ -24,6 +24,7 @@
     "@pixiv/three-vrm-core": "^3.4.0",
     "@proj-airi/drizzle-duckdb-wasm": "catalog:",
     "@proj-airi/stage-ui": "workspace:^",
+    "@proj-airi/ui": "workspace:^",
     "@ricky0123/vad-web": "^0.0.22",
     "@tauri-apps/api": "^2.5.0",
     "@tauri-apps/plugin-os": ">=2.2.1",

apps/stage-tamagotchi/src/components/InteractiveArea.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ChatProvider } from '@xsai-ext/shared-providers'
 
-import { BasicTextarea } from '@proj-airi/stage-ui/components'
 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 { 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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { ccv3 } from '@proj-airi/ccc'
 
-import { InputFile } from '@proj-airi/stage-ui/components'
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores'
+import { InputFile } from '@proj-airi/ui/Form'
 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 { RadioCardDetailManySelect, 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'

apps/stage-tamagotchi/src/pages/settings/modules/speech.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 
+import { Skeleton, TestDummyMarker } from '@proj-airi/stage-ui/components'
+import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import {
   FieldCheckbox,
   FieldInput,
   FieldRange,
   RadioCardDetailManySelect,
   RadioCardSimple,
-  Skeleton,
-  TestDummyMarker,
   Textarea,
   VoiceCardManySelect,
-} from '@proj-airi/stage-ui/components'
-import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+} from '@proj-airi/ui/Form'
 import { generateSpeech } from '@xsai/generate-speech'
 import { storeToRefs } from 'pinia'
 import { onMounted, onUnmounted, ref, watch } from 'vue'

apps/stage-tamagotchi/src/pages/settings/providers/alibaba-cloud-model-studio.vue

@@ -3,11 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldRange,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldRange } from '@proj-airi/ui/Form'
 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

@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldCheckbox,
-  FieldRange,
   SpeechPlayground,
   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 { 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

@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnMicrosoftOptions } from 'unspeech'
 
 import {
-  FieldInput,
-  FieldRange,
   SpeechPlayground,
   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 { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'

apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue

@@ -2,7 +2,6 @@
 import type { RemovableRef } from '@vueuse/core'
 
 import {
-  FieldKeyValues,
   ProviderAdvancedSettings,
   ProviderBaseUrlInput,
   ProviderBasicSettings,
@@ -10,6 +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 { storeToRefs } from 'pinia'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'

apps/stage-tamagotchi/src/pages/settings/providers/volcengine.vue

@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldInput,
-  FieldRange,
   SpeechPlayground,
   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 { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'

apps/stage-web/package.json

@@ -27,6 +27,7 @@
     "@proj-airi/drizzle-duckdb-wasm": "catalog:",
     "@proj-airi/server-sdk": "workspace:^",
     "@proj-airi/stage-ui": "workspace:^",
+    "@proj-airi/ui": "workspace:^",
     "@proj-airi/ui-transitions": "workspace:^",
     "@ricky0123/vad-web": "^0.0.22",
     "@standard-schema/spec": "^1.0.0",

apps/stage-web/src/components/Layouts/InteractiveArea.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { ChatProvider } from '@xsai-ext/shared-providers'
 
-import { BasicTextarea, TransitionVertical } from '@proj-airi/stage-ui/components'
+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 { useDevicesList } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { ref, watch } from 'vue'

apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ChatProvider } from '@xsai-ext/shared-providers'
 
-import { BasicTextarea } from '@proj-airi/stage-ui/components'
 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 { 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/stage-ui/components'
+import { InputFile } from '@proj-airi/ui/Form'
 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/stage-ui/components'
+import { InputFile } from '@proj-airi/ui/Form'
 import { Vibrant } from 'node-vibrant/browser'
 import { ref, watch } from 'vue'
 

apps/stage-web/src/pages/settings/airi-card/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { ccv3 } from '@proj-airi/ccc'
 
-import { InputFile } from '@proj-airi/stage-ui/components'
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores'
+import { InputFile } from '@proj-airi/ui/Form'
 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 { RadioCardDetailManySelect, 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'

apps/stage-web/src/pages/settings/modules/speech.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 
+import { Skeleton, TestDummyMarker } from '@proj-airi/stage-ui/components'
+import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import {
   FieldCheckbox,
   FieldInput,
   FieldRange,
   RadioCardDetailManySelect,
   RadioCardSimple,
-  Skeleton,
-  TestDummyMarker,
   Textarea,
   VoiceCardManySelect,
-} from '@proj-airi/stage-ui/components'
-import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+} from '@proj-airi/ui/Form'
 import { generateSpeech } from '@xsai/generate-speech'
 import { storeToRefs } from 'pinia'
 import { onMounted, onUnmounted, ref, watch } from 'vue'

apps/stage-web/src/pages/settings/providers/alibaba-cloud-model-studio.vue

@@ -3,11 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldRange,
   SpeechPlayground,
   SpeechProviderSettings,
 } from '@proj-airi/stage-ui/components'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
+import { FieldRange } from '@proj-airi/ui/Form'
 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

@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldCheckbox,
-  FieldRange,
   SpeechPlayground,
   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 { 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

@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnMicrosoftOptions } from 'unspeech'
 
 import {
-  FieldInput,
-  FieldRange,
   SpeechPlayground,
   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 { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'

apps/stage-web/src/pages/settings/providers/ollama.vue

@@ -2,7 +2,6 @@
 import type { RemovableRef } from '@vueuse/core'
 
 import {
-  FieldKeyValues,
   ProviderAdvancedSettings,
   ProviderBaseUrlInput,
   ProviderBasicSettings,
@@ -10,6 +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 { storeToRefs } from 'pinia'
 import { computed, onMounted, reactive, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -112,8 +112,8 @@ watch(headers, (headers) => {
           :description="t('settings.pages.providers.common.section.advanced.fields.field.headers.description')"
           :key-placeholder="t('settings.pages.providers.common.section.advanced.fields.field.headers.key.placeholder')"
           :value-placeholder="t('settings.pages.providers.common.section.advanced.fields.field.headers.value.placeholder')"
-          @add="(key, value) => addKeyValue(headers, key, value)"
-          @remove="(index) => removeKeyValue(index, headers)"
+          @add="(key: string, value: string) => addKeyValue(headers, key, value)"
+          @remove="(index: number) => removeKeyValue(index, headers)"
         />
       </ProviderAdvancedSettings>
     </ProviderSettingsContainer>

apps/stage-web/src/pages/settings/providers/volcengine.vue

@@ -3,12 +3,11 @@ import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
 import type { UnElevenLabsOptions } from 'unspeech'
 
 import {
-  FieldInput,
-  FieldRange,
   SpeechPlayground,
   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 { 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/stage-ui/components'
+import { Textarea } from '@proj-airi/ui/Form'
 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 { Textarea } from '@proj-airi/stage-ui/components'
 import { useDelayMessageQueue } from '@proj-airi/stage-ui/composables'
 import { llmInferenceEndToken } from '@proj-airi/stage-ui/constants'
+import { Textarea } from '@proj-airi/ui/Form'
 import { ref } from 'vue'
 
 const messageInput = ref<string>('')

apps/stage-web/src/pages/test/queues/emotions.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Emotion } from '@proj-airi/stage-ui/constants/emotions'
 
-import { Textarea } from '@proj-airi/stage-ui/components'
 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 { ref } from 'vue'
 
 const messageInput = ref<string>('')

apps/stage-web/src/pages/test/queues/messages.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Textarea } from '@proj-airi/stage-ui/components'
 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 { ref } from 'vue'
 
 const messageInput = ref<string>('')

packages/stage-ui/package.json

@@ -73,6 +73,7 @@
     "@proj-airi/ccc": "workspace:^",
     "@proj-airi/drizzle-duckdb-wasm": "catalog:",
     "@proj-airi/server-sdk": "workspace:^",
+    "@proj-airi/ui": "workspace:^",
     "@vueuse/core": "^13.1.0",
     "@vueuse/motion": "^3.0.3",
     "@xsai-transformers/embed": "^0.0.5",

packages/stage-ui/src/components/Gadgets/AudioSpectrum.story.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
+import { FieldRange, Radio } from '@proj-airi/ui/Form'
 import { onBeforeUnmount, ref, watch } from 'vue'
 
-import FieldRange from '../Form/Field/FieldRange.vue'
-import Radio from '../Form/Radio/Radio.vue'
 import AudioSpectrum from './AudioSpectrum.vue'
 import AudioSpectrumVisualizer from './AudioSpectrumVisualizer.vue'
 

packages/stage-ui/src/components/Providers/ProviderAccountIdInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FieldInput from '../Form/Field/FieldInput.vue'
+import { FieldInput } from '@proj-airi/ui/Form'
 
 const props = defineProps<{
   placeholder?: string

packages/stage-ui/src/components/Providers/ProviderApiKeyInput.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
+import { FieldInput } from '@proj-airi/ui/Form'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import FieldInput from '../Form/Field/FieldInput.vue'
-
 const props = defineProps<{
   providerName: string
   placeholder?: string

packages/stage-ui/src/components/Providers/ProviderBaseUrlInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import FieldInput from '../Form/Field/FieldInput.vue'
+import { FieldInput } from '@proj-airi/ui/Form'
 
 const props = defineProps<{
   placeholder?: string

packages/stage-ui/src/components/Providers/SpeechPlayground.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { VoiceInfo } from '../../stores'
 
+import { FieldCheckbox } from '@proj-airi/ui/Form'
 import { onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { FieldCheckbox, TestDummyMarker } from '../index'
+import { TestDummyMarker } from '../index'
 
 const props = defineProps<{
   // Input fields

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

@@ -1,6 +1,5 @@
 export * from './Button'
 export { default as Collapsable } from './Collapsable.vue'
-export * from './Form'
 export * from './Gadgets'
 export * from './Graphics'
 export * from './Layouts'

packages/ui/build.config.ts

@@ -0,0 +1,11 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    { builder: 'mkdist', input: './src/', outDir: './dist/', pattern: '**/*.vue', loaders: ['vue'] },
+    { builder: 'mkdist', input: './src/', outDir: './dist/', pattern: '**/*.ts', format: 'esm', loaders: ['js'] },
+  ],
+  declaration: true,
+  sourcemap: true,
+  clean: true,
+})

packages/ui/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@proj-airi/ui",
+  "type": "module",
+  "private": true,
+  "description": "A collection of UI components that used by Project Airi",
+  "author": {
+    "name": "Neko Ayaka",
+    "email": "neko@ayaka.moe",
+    "url": "https://github.com/nekomeowww"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/moeru-ai/airi.git",
+    "directory": "packages/ui"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./Form": {
+      "types": "./dist/Form/index.d.ts",
+      "import": "./dist/Form/index.mjs"
+    }
+  },
+  "scripts": {
+    "dev": "pnpm run stub",
+    "stub": "unbuild --stub",
+    "build": "unbuild",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@proj-airi/stage-ui": "workspace:*",
+    "@vueuse/core": "^13.1.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@unocss/reset": "^66.1.0-beta.12",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "vue-tsc": "^3.0.0-alpha.4"
+  }
+}

packages/ui/src/Form/Radio/RadioCardDetail.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { TransitionVertical } from '@proj-airi/stage-ui/components'
 import { ref } from 'vue'
 
-import TransitionVertical from '../../TransitionVertical.vue'
 import Input from '../Input/Input.vue'
 
 withDefaults(defineProps<{

packages/ui/src/Form/VoiceCard.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import AudioSpectrum from '../Gadgets/AudioSpectrum.vue'
-import AudioSpectrumVisualizer from '../Gadgets/AudioSpectrumVisualizer.vue'
-import TransitionVertical from '../TransitionVertical.vue'
+import { AudioSpectrum, AudioSpectrumVisualizer, TransitionVertical } from '@proj-airi/stage-ui/components'
+
 import Input from './Input/Input.vue'
 
 interface VoiceLanguage {

packages/ui/src/index.ts

@@ -0,0 +1 @@
+export * from './Form'

packages/ui/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "types": [
+      "vitest",
+      "vite/client"
+    ],
+    "allowJs": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-models",
+      "@vue-macros/volar/define-slots"
+    ]
+  },
+  "include": [
+    "env.d.ts",
+    "**/*.vue",
+    "**/*.story.vue"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}

packages/ui/uno.config.ts

@@ -0,0 +1,37 @@
+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(' '),
+})

packages/ui/vite.config.ts

@@ -0,0 +1,16 @@
+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(),
+  ],
+})

pnpm-lock.yaml

@@ -236,6 +236,9 @@ importers:
       '@proj-airi/stage-ui':
         specifier: workspace:^
         version: link:../../packages/stage-ui
+      '@proj-airi/ui':
+        specifier: workspace:^
+        version: link:../../packages/ui
       '@ricky0123/vad-web':
         specifier: ^0.0.22
         version: 0.0.22
@@ -525,6 +528,9 @@ importers:
       '@proj-airi/stage-ui':
         specifier: workspace:^
         version: link:../../packages/stage-ui
+      '@proj-airi/ui':
+        specifier: workspace:^
+        version: link:../../packages/ui
       '@proj-airi/ui-transitions':
         specifier: workspace:^
         version: link:../../packages/ui-transitions
@@ -951,6 +957,9 @@ importers:
       '@proj-airi/server-sdk':
         specifier: workspace:^
         version: link:../server-sdk
+      '@proj-airi/ui':
+        specifier: workspace:^
+        version: link:../ui
       '@vueuse/core':
         specifier: ^13.1.0
         version: 13.1.0(vue@3.5.13(typescript@5.8.3))
@@ -1010,6 +1019,28 @@ importers:
         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)
 
+  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))
+      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-tsc:
+        specifier: ^3.0.0-alpha.4
+        version: 3.0.0-alpha.4(typescript@5.8.3)
+
   packages/ui-transitions:
     dependencies:
       '@vueuse/core':