style: refactoring ui

cspell.config.yaml

@@ -69,6 +69,7 @@ words:
   - Maru
   - micvad
   - mineflayer
+  - mingcute
   - mkdist
   - moeru
   - Morioki
@@ -117,6 +118,7 @@ words:
   - unocss
   - unplugin
   - valibot
+  - vaul
   - VITE
   - vrma
   - vueuse

packages/lobe-icons/build.config.ts

@@ -6,6 +6,10 @@ import { defineBuildConfig } from 'unbuild'
 
 import packageJSON from './package.json'
 
+function json(any: any) {
+  return JSON.stringify(any, null, 2)
+}
+
 export default defineBuildConfig({
   entries: [
     { builder: 'rollup', input: 'src/index.ts', outDir: 'dist', declaration: true },
@@ -35,10 +39,10 @@ export default defineBuildConfig({
       const iconSetData = await importDirectory(join(pkg.rootPath, 'icons'), { prefix: 'lobe-icons', ignoreImportErrors: 'warn' })
       const iconJSONData = iconSetData.export()
 
-      await writeFile('./dist/metadata.json', JSON.stringify({ categories: iconSetData.categories }, null, 2), { encoding: 'utf8' })
+      await writeFile('./dist/metadata.json', json({ categories: iconSetData.categories }), { encoding: 'utf8' })
-      await writeFile('./dist/icons.json', JSON.stringify(iconJSONData, null, 2), { encoding: 'utf8' })
+      await writeFile('./dist/icons.json', json(iconJSONData), { encoding: 'utf8' })
-      await writeFile('./dist/chars.json', JSON.stringify({}, null, 2), { encoding: 'utf8' })
+      await writeFile('./dist/chars.json', json({}), { encoding: 'utf8' })
-      await writeFile('./dist/info.json', JSON.stringify({
+      await writeFile('./dist/info.json', json({
         prefix: 'lobe-icons',
         name: 'Lobe Icons',
         total: Object.keys(iconJSONData.icons).length,
@@ -56,9 +60,9 @@ export default defineBuildConfig({
           'deepseek',
           'claude',
         ],
-        height: 32,
+        height: 20,
-        displayHeight: 16,
+        displayHeight: 20,
-        category: 'Logos 16px / 32px',
+        category: 'Logos 20px',
         tags: [
           'AI',
           'Models',
@@ -66,7 +70,7 @@ export default defineBuildConfig({
           'Lobe',
         ],
         palette: false,
-      }, null, 2), { encoding: 'utf8' })
+      }), { encoding: 'utf8' })
     },
   },
 })

packages/lobe-icons/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@proj-airi/iconify-json-lobe",
+  "name": "@proj-airi/lobe-icons",
   "type": "module",
   "version": "1.0.0",
   "private": true,
@@ -13,7 +13,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/moeru-ai/airi.git",
-    "directory": "packages/iconify-json-lobe"
+    "directory": "packages/lobe-icons"
   },
   "exports": {
     "./*": "./*",

packages/moonshine-web/uno.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, mergeConfigs, presetWebFonts } from 'unocss'
+import { defineConfig, mergeConfigs, presetIcons, presetWebFonts } from 'unocss'
 
 import UnoCSSConfig from '../../uno.config'
 
@@ -13,6 +13,9 @@ export default defineConfig(mergeConfigs([
           mono: 'DM Mono',
         },
       }),
+      presetIcons({
+        scale: 1.2,
+      }),
     ],
   },
 ]))

packages/stage-tamagotchi/uno.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, mergeConfigs, presetWebFonts } from 'unocss'
+import { defineConfig, mergeConfigs, presetIcons, presetWebFonts } from 'unocss'
 
 import UnoCSSConfig from '../../uno.config'
 
@@ -15,6 +15,9 @@ export default defineConfig(mergeConfigs([
           cuteen: 'Sniglet',
         },
       }),
+      presetIcons({
+        scale: 1.2,
+      }),
     ],
     // hyoban/unocss-preset-shadcn: Use shadcn ui with UnoCSS
     // https://github.com/hyoban/unocss-preset-shadcn

packages/stage-ui/src/components/Scenes/Live2D.vue

@@ -35,18 +35,13 @@ defineExpose({
 <template>
   <Screen v-slot="{ width, height }" relative>
     <Live2DViewer ref="modelRef" :canvas-width="width" :canvas-height="height" :model="model" :mouth-open-size="mouthOpenSize" />
-    <div absolute bottom="2" right="2">
+    <div absolute bottom="3" right="3">
-      <div
+      <div flex="~ row" cursor-pointer>
-        flex="~ row"
-        bg="zinc-100 dark:zinc-700"
-        text="sm zinc-400 dark:zinc-500"
-        h-fit w-fit appearance-none gap-1 rounded-lg rounded-md border-none
-      >
         <label
-          h-fit cursor-pointer
+          :class="[show ? 'bg-zinc-300 dark:bg-zinc-200' : 'bg-zinc-100 dark:bg-zinc-700']"
-          :class="[show ? 'bg-zinc-300 text-zinc-900 dark:bg-zinc-200 dark:text-zinc-800' : '']"
           transition="all ease-in-out duration-500"
-          rounded-md px-2 py-2 z="<md:20"
+          text="lg zinc-500 dark:zinc-400"
+          m-1 h-fit w-fit cursor-pointer appearance-none gap-1 rounded-lg rounded-md border-none p-2 outline-none
         >
           <input
             v-model="show"
@@ -57,12 +52,12 @@ defineExpose({
             hidden appearance-none outline-none
           >
           <div select-none>
-            <div i-solar:bug-bold-duotone text="text-zinc-900 dark:text-zinc-800" />
+            <div i-solar:bug-bold-duotone />
           </div>
         </label>
       </div>
       <TransitionVertical>
-        <div v-if="show" absolute w-full min-w="50vw" z="<md:20" class="bottom-10 right-0">
+        <div v-if="show" min-w="50vw" z="<md:20" class="bottom-11 right-0" absolute m-1 w-full>
           <div bg="zinc-200/20 dark:black/20" rounded-lg p-2 backdrop-blur-sm>
             <div font-mono>
               <span>{{ $t('stage.viewers.debug-menu.emotions') }}</span>

packages/stage-ui/src/components/Scenes/VRM.vue

@@ -55,18 +55,13 @@ defineExpose({
         @error="(val) => emit('error', val)"
       />
     </TresCanvas>
-    <div absolute bottom="2" right="2">
+    <div absolute bottom="3" right="3">
-      <div
+      <div flex="~ row" cursor-pointer>
-        flex="~ row"
-        bg="zinc-100 dark:zinc-700"
-        text="sm zinc-400 dark:zinc-500"
-        h-fit w-fit appearance-none gap-1 rounded-lg rounded-md border-none
-      >
         <label
-          h-fit cursor-pointer
+          :class="[show ? 'bg-zinc-300 dark:bg-zinc-200' : 'bg-zinc-100 dark:bg-zinc-700']"
-          :class="[show ? 'bg-zinc-300 text-zinc-900 dark:bg-zinc-200 dark:text-zinc-800' : '']"
           transition="all ease-in-out duration-500"
-          rounded-md px-2 py-2 z="<md:20"
+          text="lg zinc-500 dark:zinc-400"
+          m-1 h-fit w-fit cursor-pointer appearance-none gap-1 rounded-lg rounded-md border-none p-2 outline-none
         >
           <input
             v-model="show"
@@ -77,12 +72,12 @@ defineExpose({
             hidden appearance-none outline-none
           >
           <div select-none>
-            <div i-solar:bug-bold-duotone text="text-zinc-900 dark:text-zinc-800" />
+            <div i-solar:bug-bold-duotone />
           </div>
         </label>
       </div>
       <TransitionVertical>
-        <div v-if="show" absolute w-full min-w="50vw" z="<md:20" class="bottom-10 right-0">
+        <div v-if="show" min-w="50vw" z="<md:20" class="bottom-11 right-0" absolute m-1 w-full>
           <div bg="zinc-200/20 dark:black/20" flex="~ col" gap-2 rounded-lg p-2 backdrop-blur-sm>
             <div font-mono>
               <span>{{ $t('stage.viewers.debug-menu.vrm.model.title') }}</span>

packages/stage-web/package.json

@@ -84,8 +84,10 @@
     "@iconify-json/mingcute": "^1.2.3",
     "@iconify-json/solar": "^1.2.2",
     "@iconify-json/svg-spinners": "^1.2.2",
+    "@iconify/utils": "^2.3.0",
     "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@proj-airi/elevenlabs": "workspace:^",
+    "@proj-airi/lobe-icons": "workspace:^",
     "@proj-airi/unplugin-download": "workspace:^",
     "@proj-airi/unplugin-live2d-sdk": "workspace:^",
     "@shikijs/markdown-it": "^2.3.2",

packages/stage-web/src/components/Layouts/Header.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
-import Settings from '../Settings.vue'
+import DesktopSettings from '../Widgets/DesktopSettings.vue'
 </script>
 
 <template>
   <header mb-1 w-full gap-2>
-    <a href="https://github.com/moeru-ai/airi" rel="noreferrer noopener" target="_blank" flex="~ 1" w-full items-center gap-2 px-2 text-nowrap text-2xl>
+    <a
+      href="https://github.com/moeru-ai/airi" rel="noreferrer noopener" target="_blank" flex="~ 1" w-full items-center
+      gap-2 px-2 text-nowrap text-2xl outline-none
+    >
       <div i-solar:cat-outline text="[#ed869d]" />
       <div font-cute>
         <span>アイリ</span>
       </div>
     </a>
-    <Settings />
+    <DesktopSettings />
   </header>
 </template>

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

@@ -98,7 +98,7 @@ onAfterSend(async () => {
 </script>
 
 <template>
-  <div flex="col" items-center pt-4>
+  <div v-if="false" flex="col" items-center pt-4>
     <fieldset flex="~ row" w-fit rounded-lg>
       <label
         :class="[

packages/stage-web/src/components/Settings.vue

@@ -1,274 +0,0 @@
-<script setup lang="ts">
-import type { Voice } from '@proj-airi/stage-ui/constants'
-
-import { TransitionVertical } from '@proj-airi/stage-ui/components'
-import { voiceList } from '@proj-airi/stage-ui/constants'
-import { useLLM, useSettings } from '@proj-airi/stage-ui/stores'
-import { useDark } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { onMounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t, locale } = useI18n()
-
-const settings = useSettings()
-const show = ref(false)
-const dark = useDark({ disableTransition: false })
-const supportedModels = ref<{ id: string, name?: string }[]>([])
-const { models } = useLLM()
-const { openAiModel, openAiApiBaseURL, openAiApiKey, elevenlabsVoiceEnglish, elevenlabsVoiceJapanese } = storeToRefs(settings)
-
-function handleModelChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const found = supportedModels.value.find(m => m.id === target.value)
-  if (!found) {
-    openAiModel.value = undefined
-    return
-  }
-
-  openAiModel.value = found
-}
-
-function handleVoiceChange(event: Event) {
-  const value = (event.target as HTMLSelectElement).value as Voice
-  switch (locale.value) {
-    case 'en':
-    case 'en-US':
-      elevenlabsVoiceEnglish.value = value
-      break
-    case 'zh':
-    case 'zh-CN':
-    case 'zh-TW':
-    case 'zh-HK':
-      elevenlabsVoiceEnglish.value = value
-      break
-    case 'jp':
-    case 'jp-JP':
-      elevenlabsVoiceJapanese.value = value
-      break
-  }
-}
-
-watch([openAiApiBaseURL, openAiApiKey], async ([baseUrl, apiKey]) => {
-  if (!baseUrl || !apiKey) {
-    supportedModels.value = []
-    return
-  }
-
-  supportedModels.value = await models(baseUrl, apiKey)
-})
-
-onMounted(async () => {
-  if (!openAiApiBaseURL.value || !openAiApiKey.value)
-    return
-
-  supportedModels.value = await models(openAiApiBaseURL.value, openAiApiKey.value)
-})
-</script>
-
-<template>
-  <div flex="~" gap-2>
-    <fieldset
-      flex="~ row"
-      bg="zinc-100 dark:zinc-700"
-      text="sm zinc-400 dark:zinc-500"
-      appearance-none gap-1 rounded-lg rounded-md border-none p-1
-    >
-      <label
-        h-fit cursor-pointer
-        :class="[settings.stageView === '2d' ? 'bg-zinc-300 text-zinc-900 dark:bg-zinc-200 dark:text-zinc-800' : '']"
-        rounded-md px-4 py-2
-      >
-        <input
-          v-model="settings.stageView"
-          :checked="settings.stageView === '2d'"
-          :aria-checked="settings.stageView === '2d'"
-          name="settings.stageView"
-          type="radio"
-          role="radio"
-          value="2d"
-          hidden appearance-none outline-none
-        >
-        <div select-none :class="[settings.stageView === '2d' ? 'font-semibold' : '']">
-          2D
-        </div>
-      </label>
-      <label
-        h-fit cursor-pointer
-        :class="[settings.stageView === '3d' ? 'bg-zinc-300 text-zinc-900 dark:bg-zinc-200 dark:text-zinc-800' : '']"
-        rounded-md px-4 py-2
-      >
-        <input
-          v-model="settings.stageView"
-          :checked="settings.stageView === '3d'"
-          :aria-checked="settings.stageView === '3d'"
-          name="stageView"
-          type="radio"
-          role="radio"
-          value="3d"
-          hidden appearance-none outline-none
-        >
-        <div select-none :class="[settings.stageView === '3d' ? 'font-semibold' : '']">
-          3D
-        </div>
-      </label>
-    </fieldset>
-    <div relative>
-      <div
-        flex="~ row"
-        bg="zinc-100 dark:zinc-700"
-        text="sm zinc-400 dark:zinc-500"
-        h-fit w-fit appearance-none gap-1 rounded-lg rounded-md border-none p-1
-      >
-        <label
-          h-fit cursor-pointer
-          :class="[show ? 'bg-zinc-300 text-zinc-900 dark:bg-zinc-200 dark:text-zinc-800' : '']"
-          transition="all ease-in-out duration-500"
-          rounded-md px-2 py-2
-        >
-          <input
-            v-model="show"
-            :checked="show"
-            :aria-checked="show"
-            name="stageView"
-            type="checkbox"
-            hidden appearance-none outline-none
-          >
-          <div select-none>
-            <div i-solar:settings-minimalistic-bold-duotone text="text-zinc-900 dark:text-zinc-800 lg" />
-          </div>
-        </label>
-      </div>
-      <TransitionVertical>
-        <div
-          v-if="show" w="120 <sm:[calc(100vw-16px)]" right="0" bg="zinc-100 dark:zinc-700"
-          grid="~ cols-[140px_1fr]" absolute z-100 my-2 items-center gap-1.5 rounded-lg px-3 py-2
-        >
-          <div text-sm>
-            <span>{{ t('settings.openai-base-url.label') }}</span>
-          </div>
-          <div flex="~ row" w-full text="sm">
-            <input
-              v-model="settings.openAiApiBaseURL"
-              type="text"
-              :placeholder="t('settings.openai-base-url.placeholder')"
-              bg="zinc-200 dark:zinc-800/50" w-full rounded-md px-2 py-1 font-mono outline-none
-            >
-          </div>
-          <div text-sm>
-            <span>{{ t('settings.openai-api-key.label') }}</span>
-          </div>
-          <div flex="~ row" w-full text="sm">
-            <input
-              v-model="settings.openAiApiKey"
-              type="text"
-              :placeholder="t('settings.openai-api-key.placeholder')"
-              bg="zinc-200 dark:zinc-800/50" w-full rounded-md px-2 py-1 font-mono outline-none
-            >
-          </div>
-          <div text-sm>
-            <span>{{ t('settings.elevenlabs-api-key.label') }}</span>
-          </div>
-          <div flex="~ row" w-full text="sm">
-            <input
-              v-model="settings.elevenLabsApiKey"
-              type="text"
-              :placeholder="t('settings.elevenlabs-api-key.placeholder')"
-              bg="zinc-200 dark:zinc-800/50" w-full rounded-md px-2 py-1 font-mono outline-none
-            >
-          </div>
-          <div text-sm>
-            <span>{{ t('settings.language.title') }}</span>
-          </div>
-          <div flex="~ row" w-full text="sm">
-            <select
-              v-model="settings.language" bg="zinc-200 dark:zinc-800/50" w-full rounded-md px-2 py-1 font-mono
-              outline-none
-            >
-              <option value="en-US">
-                {{ $t('settings.language.english') }}
-              </option>
-              <option value="zh-CN">
-                {{ $t('settings.language.chinese') }}
-              </option>
-            </select>
-          </div>
-          <div text-sm>
-            <span>{{ t('settings.models') }}</span>
-          </div>
-          <div flex="~ row" w-full text="sm">
-            <select
-              bg="zinc-200 dark:zinc-800/50" w-full rounded-md px-2 py-1 font-mono
-              outline-none
-              @change="handleModelChange"
-            >
-              <option disabled class="bg-white dark:bg-zinc-800">
-                {{ t('stage.select-a-model') }}
-              </option>
-              <option v-if="settings.openAiModel" :value="settings.openAiModel.id">
-                {{ 'name' in settings.openAiModel ? `${settings.openAiModel.name} (${settings.openAiModel.id})` : settings.openAiModel.id }}
-              </option>
-              <option v-for="m in supportedModels" :key="m.id" :value="m.id">
-                {{ 'name' in m ? `${m.name} (${m.id})` : m.id }}
-              </option>
-            </select>
-          </div>
-          <div text-sm>
-            <span>{{ t('settings.voices') }}</span>
-          </div>
-          <div flex="~ row" w-full text="sm">
-            <select
-              bg="zinc-200 dark:zinc-800/50" w-full rounded-md px-2 py-1 font-mono
-              outline-none
-              @change="handleVoiceChange"
-            >
-              <option disabled class="bg-white dark:bg-zinc-800">
-                {{ t('stage.select-a-voice') }}
-              </option>
-              <option v-if="['en', 'en-US'].indexOf(locale) !== -1 && elevenlabsVoiceEnglish" :value="elevenlabsVoiceEnglish">
-                {{ elevenlabsVoiceEnglish }}
-              </option>
-              <option v-if="['zh', 'zh-CN', 'zh-TW', 'zh-HK'].indexOf(locale) !== -1 && elevenlabsVoiceEnglish" :value="elevenlabsVoiceEnglish">
-                {{ elevenlabsVoiceEnglish }}
-              </option>
-              <option v-if="['jp', 'jp-JP'].indexOf(locale) !== -1 && elevenlabsVoiceJapanese" :value="elevenlabsVoiceJapanese">
-                {{ elevenlabsVoiceJapanese }}
-              </option>
-              <option v-for="(m, index) in voiceList[locale]" :key="index" :value="m">
-                {{ m }}
-              </option>
-            </select>
-          </div>
-        </div>
-      </TransitionVertical>
-    </div>
-    <div>
-      <div
-        flex="~ row"
-        bg="zinc-100 dark:zinc-700"
-        text="sm zinc-400 dark:zinc-500"
-        h-fit w-fit appearance-none gap-1 rounded-lg rounded-md border-none p-1
-      >
-        <label
-          h-fit cursor-pointer
-          rounded-md px-2 py-2
-        >
-          <input
-            v-model="dark"
-            :checked="dark"
-            :aria-checked="dark"
-            name="stageView"
-            type="checkbox"
-            hidden appearance-none outline-none
-          >
-          <div select-none>
-            <Transition name="slide-away" mode="out-in">
-              <div v-if="dark" i-solar:sun-fog-bold-duotone text="lg hover:zinc-600 dark:hover:zinc-300" transition="all ease-in-out duration-250" />
-              <div v-else i-solar:moon-stars-bold-duotone text="lg hover:zinc-600 dark:hover:zinc-300" transition="all ease-in-out duration-250" />
-            </Transition>
-          </div>
-        </label>
-      </div>
-    </div>
-  </div>
-</template>

packages/stage-web/src/components/Widgets/DesktopSettings.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+
+import MobileSettings from './MobileSettings.vue'
+</script>
+
+<template>
+  <div flex="~" gap-2>
+    <DrawerRoot should-scale-background direction="right">
+      <DrawerTrigger
+        bg="zinc-100 dark:zinc-800"
+        text="lg zinc-500 dark:zinc-400"
+        max-h="[10lh]" min-h="[1lh]"
+        m-1 rounded-lg p-2 outline-none
+      >
+        <div i-solar:settings-minimalistic-bold-duotone />
+      </DrawerTrigger>
+      <DrawerPortal>
+        <DrawerOverlay class="fixed inset-0 z-50 bg-black/40" />
+        <DrawerContent
+          max-w="[50%]" bg="[#fffbff] dark:[#1f1a1d]" fixed bottom-0 right-0 top-0 z-50 ml-24 h-full w-full
+          flex flex-col overflow-y-scroll rounded-l-lg
+        >
+          <div class="flex flex-1 flex-col rounded-t-lg p-5" bg="[#fffbff] dark:[#1f1a1d]" gap-2>
+            <MobileSettings />
+          </div>
+        </DrawerContent>
+      </DrawerPortal>
+    </DrawerRoot>
+  </div>
+</template>

packages/stage-web/src/components/Widgets/MobileSettings.vue

@@ -76,10 +76,10 @@ onMounted(async () => {
     </h2>
     <div>
       <div
-        grid="~ cols-[140px_1fr]" my-2 items-center gap-1.5 rounded-lg
+        grid="~ cols-[150px_1fr]" my-2 items-center gap-1.5 rounded-lg
         bg="[#fff6fc] dark:[#2c2529]" px-2 py-1 text="pink-400"
       >
-        <div text="sm pink-500">
+        <div text="sm pink-500" pl-1>
           <span>{{ t('settings.openai-base-url.label') }}</span>
         </div>
         <div flex="~ row" w-full text="sm">
@@ -90,7 +90,7 @@ onMounted(async () => {
             h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
           >
         </div>
-        <div text="sm pink-500">
+        <div text="sm pink-500" pl-1>
           <span>{{ t('settings.openai-api-key.label') }}</span>
         </div>
         <div flex="~ row" w-full text="sm">
@@ -101,7 +101,7 @@ onMounted(async () => {
             h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
           >
         </div>
-        <div text="sm pink-500">
+        <div text="sm pink-500" pl-1>
           <span>{{ t('settings.elevenlabs-api-key.label') }}</span>
         </div>
         <div flex="~ row" w-full text="sm">
@@ -112,7 +112,7 @@ onMounted(async () => {
             h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
           >
         </div>
-        <div text="sm pink-500">
+        <div text="sm pink-500" pl-1>
           <span>{{ t('settings.language.title') }}</span>
         </div>
         <div flex="~ row" w-full text="sm">
@@ -128,7 +128,7 @@ onMounted(async () => {
             </option>
           </select>
         </div>
-        <div text="sm pink-500">
+        <div text="sm pink-500" pl-1>
           <span>{{ t('settings.models') }}</span>
         </div>
         <div flex="~ row" w-full text="sm">
@@ -147,7 +147,7 @@ onMounted(async () => {
             </option>
           </select>
         </div>
-        <div text="sm pink-500">
+        <div text="sm pink-500" pl-1>
           <span>{{ t('settings.voices') }}</span>
         </div>
         <div flex="~ row" w-full text="sm">
@@ -183,7 +183,7 @@ onMounted(async () => {
         grid="~ cols-[140px_1fr]" my-2 items-center gap-1.5 rounded-lg
         bg="[#fff6fc] dark:[#2c2529]" px-2 py-1 text="pink-400"
       >
-        <div text="sm pink-500">
+        <div text="sm pink-500" pl-1>
           <span>Viewer</span>
         </div>
         <select
@@ -197,7 +197,7 @@ onMounted(async () => {
             3D
           </option>
         </select>
-        <div text="sm pink-500">
+        <div text="sm pink-500" pl-1>
           <span>Theme</span>
         </div>
         <label h-8 flex cursor-pointer items-center justify-end>

packages/stage-web/src/styles/main.css

@@ -25,7 +25,7 @@ html.dark {
 }
 
 #nprogress .bar {
-  background: rgb(13, 148, 136);
+  background: #f472b6;
   opacity: 0.75;
   position: fixed;
   z-index: 1031;

packages/stage-web/src/typed-router.d.ts

@@ -18,5 +18,16 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
+    '/audio': RouteRecordInfo<'/audio', '/audio', Record<never, never>, Record<never, never>>,
+    '/devtools/image': RouteRecordInfo<'/devtools/image', '/devtools/image', Record<never, never>, Record<never, never>>,
+    '/index-v2': RouteRecordInfo<'/index-v2', '/index-v2', Record<never, never>, Record<never, never>>,
+    '/lobe-icons': RouteRecordInfo<'/lobe-icons', '/lobe-icons', Record<never, never>, Record<never, never>>,
+    '/queue': RouteRecordInfo<'/queue', '/queue', Record<never, never>, Record<never, never>>,
+    '/test/filter-message': RouteRecordInfo<'/test/filter-message', '/test/filter-message', Record<never, never>, Record<never, never>>,
+    '/test/queues/delays': RouteRecordInfo<'/test/queues/delays', '/test/queues/delays', Record<never, never>, Record<never, never>>,
+    '/test/queues/emotions': RouteRecordInfo<'/test/queues/emotions', '/test/queues/emotions', Record<never, never>, Record<never, never>>,
+    '/test/queues/messages': RouteRecordInfo<'/test/queues/messages', '/test/queues/messages', Record<never, never>, Record<never, never>>,
   }
 }

packages/stage-web/uno.config.ts

@@ -1,4 +1,5 @@
-import { defineConfig, mergeConfigs, presetWebFonts } from 'unocss'
+import { createExternalPackageIconLoader } from '@iconify/utils/lib/loader/external-pkg'
+import { defineConfig, mergeConfigs, presetIcons, presetWebFonts } from 'unocss'
 
 import UnoCSSConfig from '../../uno.config'
 
@@ -15,6 +16,12 @@ export default defineConfig(mergeConfigs([
           cuteen: 'Sniglet',
         },
       }),
+      presetIcons({
+        scale: 1.2,
+        collections: {
+          ...createExternalPackageIconLoader('@proj-airi/lobe-icons'),
+        },
+      }),
     ],
     // hyoban/unocss-preset-shadcn: Use shadcn ui with UnoCSS
     // https://github.com/hyoban/unocss-preset-shadcn

packages/whisper-webgpu/uno.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, mergeConfigs, presetWebFonts } from 'unocss'
+import { defineConfig, mergeConfigs, presetIcons, presetWebFonts } from 'unocss'
 
 import UnoCSSConfig from '../../uno.config'
 
@@ -15,6 +15,9 @@ export default defineConfig(mergeConfigs([
           cuteen: 'Sniglet',
         },
       }),
+      presetIcons({
+        scale: 1.2,
+      }),
     ],
   },
 ]))

pnpm-lock.yaml

@@ -132,7 +132,7 @@ importers:
         specifier: ^6.1.0
         version: 6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0)
 
-  packages/iconify-json-lobe:
+  packages/lobe-icons:
     devDependencies:
       '@iconify/tools':
         specifier: ^4.1.1
@@ -487,7 +487,7 @@ importers:
         version: 1.2.2
       '@intlify/unplugin-vue-i18n':
         specifier: ^6.0.3
-        version: 6.0.3(@vue/compiler-dom@3.5.13)(eslint@9.20.0(jiti@2.4.2))(rollup@2.79.1)(typescript@5.7.3)(vue-i18n@11.1.1(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+        version: 6.0.3(@vue/compiler-dom@3.5.13)(eslint@9.20.0(jiti@2.4.2))(rollup@4.34.6)(typescript@5.7.3)(vue-i18n@11.1.1(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       '@proj-airi/elevenlabs':
         specifier: workspace:^
         version: link:../elevenlabs
@@ -514,10 +514,10 @@ importers:
         version: 5.2.1(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue-macros/volar':
         specifier: ^0.30.14
-        version: 0.30.14(rollup@2.79.1)(typescript@5.7.3)(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))
+        version: 0.30.14(rollup@4.34.6)(typescript@5.7.3)(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))
       '@vueuse/motion':
         specifier: ^2.2.6
-        version: 2.2.6(magicast@0.3.5)(rollup@2.79.1)(vue@3.5.13(typescript@5.7.3))
+        version: 2.2.6(magicast@0.3.5)(rollup@4.34.6)(vue@3.5.13(typescript@5.7.3))
       electron:
         specifier: ^34.1.1
         version: 34.1.1
@@ -532,28 +532,28 @@ importers:
         version: 4.0.1
       unplugin-auto-import:
         specifier: ^19.0.0
-        version: 19.0.0(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(@vueuse/core@12.5.0(typescript@5.7.3))(rollup@2.79.1)
+        version: 19.0.0(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.6))(@vueuse/core@12.5.0(typescript@5.7.3))(rollup@4.34.6)
       unplugin-vue-components:
         specifier: ^28.0.0
-        version: 28.0.0(@babel/parser@7.26.7)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(rollup@2.79.1)(vue@3.5.13(typescript@5.7.3))
+        version: 28.0.0(@babel/parser@7.26.7)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.6))(rollup@4.34.6)(vue@3.5.13(typescript@5.7.3))
       unplugin-vue-macros:
         specifier: ^2.14.2
-        version: 2.14.2(@vueuse/core@12.5.0(typescript@5.7.3))(esbuild@0.24.2)(rollup@2.79.1)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))
+        version: 2.14.2(@vueuse/core@12.5.0(typescript@5.7.3))(esbuild@0.24.2)(rollup@4.34.6)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))
       unplugin-vue-markdown:
         specifier: ^28.3.0
-        version: 28.3.0(rollup@2.79.1)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))
+        version: 28.3.0(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))
       unplugin-vue-router:
         specifier: ^0.11.2
-        version: 0.11.2(rollup@2.79.1)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+        version: 0.11.2(rollup@4.34.6)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       vite-bundle-visualizer:
         specifier: ^1.2.1
-        version: 1.2.1(rollup@2.79.1)
+        version: 1.2.1(rollup@4.34.6)
       vite-plugin-pwa:
         specifier: ^0.21.1
         version: 0.21.1(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
       vite-plugin-vue-devtools:
         specifier: ^7.7.1
-        version: 7.7.1(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(rollup@2.79.1)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+        version: 7.7.1(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.6))(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       vite-plugin-vue-layouts:
         specifier: ^0.11.0
         version: 0.11.0(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
@@ -761,12 +761,18 @@ importers:
       '@iconify-json/svg-spinners':
         specifier: ^1.2.2
         version: 1.2.2
+      '@iconify/utils':
+        specifier: ^2.3.0
+        version: 2.3.0
       '@intlify/unplugin-vue-i18n':
         specifier: ^6.0.3
-        version: 6.0.3(@vue/compiler-dom@3.5.13)(eslint@9.20.0(jiti@2.4.2))(rollup@4.34.6)(typescript@5.7.3)(vue-i18n@11.1.1(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+        version: 6.0.3(@vue/compiler-dom@3.5.13)(eslint@9.20.0(jiti@2.4.2))(rollup@2.79.1)(typescript@5.7.3)(vue-i18n@11.1.1(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       '@proj-airi/elevenlabs':
         specifier: workspace:^
         version: link:../elevenlabs
+      '@proj-airi/lobe-icons':
+        specifier: workspace:^
+        version: link:../lobe-icons
       '@proj-airi/unplugin-download':
         specifier: workspace:^
         version: link:../unplugin-download
@@ -790,10 +796,10 @@ importers:
         version: 5.2.1(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       '@vue-macros/volar':
         specifier: ^0.30.14
-        version: 0.30.14(rollup@4.34.6)(typescript@5.7.3)(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))
+        version: 0.30.14(rollup@2.79.1)(typescript@5.7.3)(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))
       '@vueuse/motion':
         specifier: ^2.2.6
-        version: 2.2.6(magicast@0.3.5)(rollup@4.34.6)(vue@3.5.13(typescript@5.7.3))
+        version: 2.2.6(magicast@0.3.5)(rollup@2.79.1)(vue@3.5.13(typescript@5.7.3))
       hfup:
         specifier: workspace:^
         version: link:../hfup
@@ -802,28 +808,28 @@ importers:
         version: 4.0.1
       unplugin-auto-import:
         specifier: ^19.0.0
-        version: 19.0.0(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.6))(@vueuse/core@12.5.0(typescript@5.7.3))(rollup@4.34.6)
+        version: 19.0.0(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(@vueuse/core@12.5.0(typescript@5.7.3))(rollup@2.79.1)
       unplugin-vue-components:
         specifier: ^28.0.0
-        version: 28.0.0(@babel/parser@7.26.7)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.6))(rollup@4.34.6)(vue@3.5.13(typescript@5.7.3))
+        version: 28.0.0(@babel/parser@7.26.7)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(rollup@2.79.1)(vue@3.5.13(typescript@5.7.3))
       unplugin-vue-macros:
         specifier: ^2.14.2
-        version: 2.14.2(@vueuse/core@12.5.0(typescript@5.7.3))(esbuild@0.24.2)(rollup@4.34.6)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))
+        version: 2.14.2(@vueuse/core@12.5.0(typescript@5.7.3))(esbuild@0.24.2)(rollup@2.79.1)(typescript@5.7.3)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.7.3))(vue@3.5.13(typescript@5.7.3))
       unplugin-vue-markdown:
         specifier: ^28.3.0
-        version: 28.3.0(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))
+        version: 28.3.0(rollup@2.79.1)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))
       unplugin-vue-router:
         specifier: ^0.11.2
-        version: 0.11.2(rollup@4.34.6)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+        version: 0.11.2(rollup@2.79.1)(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       vite-bundle-visualizer:
         specifier: ^1.2.1
-        version: 1.2.1(rollup@4.34.6)
+        version: 1.2.1(rollup@2.79.1)
       vite-plugin-pwa:
         specifier: ^0.21.1
         version: 0.21.1(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
       vite-plugin-vue-devtools:
         specifier: ^7.7.1
-        version: 7.7.1(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.6))(rollup@4.34.6)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
+        version: 7.7.1(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(rollup@2.79.1)(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))
       vite-plugin-vue-layouts:
         specifier: ^0.11.0
         version: 0.11.0(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(less@4.2.1)(terser@5.17.6)(tsx@4.19.2)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
@@ -1145,9 +1151,6 @@ packages:
       svelte-eslint-parser:
         optional: true
 
-  '@antfu/install-pkg@0.4.1':
-    resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
-
   '@antfu/install-pkg@1.0.0':
     resolution: {integrity: sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw==}
 
@@ -2764,8 +2767,8 @@ packages:
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@2.2.1':
+  '@iconify/utils@2.3.0':
-    resolution: {integrity: sha512-0/7J7hk4PqXmxo5PDBDxmnecw5PxklZJfNjIVG9FM0mEfVrvfudS22rYWsqVk6gR3UJ/mSYS90X4R3znXnqfNA==}
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
 
   '@img/sharp-darwin-arm64@0.33.5':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
@@ -8438,9 +8441,6 @@ packages:
   package-json-from-dist@1.0.1:
     resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
 
-  package-manager-detector@0.2.8:
-    resolution: {integrity: sha512-ts9KSdroZisdvKMWVAVCXiKqnqNfXz4+IbrBG8/BWx/TR5le+jfenvoBuIZ6UWM9nz47W7AbD9qYfAwfWMIwzA==}
-
   package-manager-detector@0.2.9:
     resolution: {integrity: sha512-+vYvA/Y31l8Zk8dwxHhL3JfTuHPm6tlxM2A3GeQyl7ovYnSp1+mzAxClxaOr0qO1TtPxbQxetI7v5XqKLJZk7Q==}
 
@@ -11087,14 +11087,9 @@ snapshots:
       - typescript
       - vitest
 
-  '@antfu/install-pkg@0.4.1':
-    dependencies:
-      package-manager-detector: 0.2.9
-      tinyexec: 0.3.2
-
   '@antfu/install-pkg@1.0.0':
     dependencies:
-      package-manager-detector: 0.2.8
+      package-manager-detector: 0.2.9
       tinyexec: 0.3.2
 
   '@antfu/ni@23.3.1': {}
@@ -12718,7 +12713,7 @@ snapshots:
   '@iconify/tools@4.1.1':
     dependencies:
       '@iconify/types': 2.0.0
-      '@iconify/utils': 2.2.1
+      '@iconify/utils': 2.3.0
       '@types/tar': 6.1.13
       axios: 1.7.9
       cheerio: 1.0.0
@@ -12734,15 +12729,15 @@ snapshots:
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@2.2.1':
+  '@iconify/utils@2.3.0':
     dependencies:
-      '@antfu/install-pkg': 0.4.1
+      '@antfu/install-pkg': 1.0.0
-      '@antfu/utils': 0.7.10
+      '@antfu/utils': 8.1.0
       '@iconify/types': 2.0.0
       debug: 4.4.0
       globals: 15.14.0
       kolorist: 1.8.0
-      local-pkg: 0.5.1
+      local-pkg: 1.0.0
       mlly: 1.7.4
     transitivePeerDependencies:
       - supports-color
@@ -14435,7 +14430,7 @@ snapshots:
 
   '@unocss/preset-icons@65.4.3':
     dependencies:
-      '@iconify/utils': 2.2.1
+      '@iconify/utils': 2.3.0
       '@unocss/core': 65.4.3
       ofetch: 1.4.1
     transitivePeerDependencies:
@@ -18684,7 +18679,7 @@ snapshots:
 
   local-pkg@0.5.1:
     dependencies:
-      mlly: 1.7.3
+      mlly: 1.7.4
       pkg-types: 1.3.0
 
   local-pkg@1.0.0:
@@ -19941,8 +19936,6 @@ snapshots:
 
   package-json-from-dist@1.0.1: {}
 
-  package-manager-detector@0.2.8: {}
-
   package-manager-detector@0.2.9: {}
 
   packrup@0.1.2: {}

uno.config.ts

@@ -1,7 +1,6 @@
 import {
   defineConfig,
   presetAttributify,
-  presetIcons,
   presetTypography,
   presetUno,
   transformerDirectives,
@@ -12,9 +11,6 @@ export default defineConfig({
   presets: [
     presetUno(),
     presetAttributify(),
-    presetIcons({
-      scale: 1.2,
-    }),
     presetTypography(),
   ],
   transformers: [