chore(stage-*): improve use of useDark, remove nprogress for tamagotchi (#753)

apps/component-calling/src/App.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { useDark, useToggle } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
 import { RouterLink, RouterView } from 'vue-router'
 
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
+const { isDark, toggleDark } = useTheme()
 </script>
 
 <template>

apps/stage-tamagotchi/src/renderer/App.vue

@@ -3,7 +3,7 @@ import { defineInvoke, defineInvokeHandler } from '@moeru/eventa'
 import { useDisplayModelsStore } from '@proj-airi/stage-ui/stores/display-models'
 import { useOnboardingStore } from '@proj-airi/stage-ui/stores/onboarding'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
-import { useDark } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -13,7 +13,7 @@ import { electronOpenSettings, electronStartTrackMousePosition } from '../shared
 import { useElectronEventaContext } from './composables/electron-vueuse'
 import { themeColorFromValue, useThemeColor } from './composables/theme-color'
 
-const dark = useDark({ disableTransition: false })
+const { isDark: dark } = useTheme()
 const i18n = useI18n()
 const displayModelsStore = useDisplayModelsStore()
 const settingsStore = useSettings()

apps/stage-tamagotchi/src/renderer/components/StageIslands/ControlsIsland/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineInvoke } from '@moeru/eventa'
 import { useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { useDark, useToggle } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 
@@ -14,8 +14,7 @@ import { electronOpenChat, electronOpenSettings, electronStartDraggingWindow } f
 import { useElectronEventaContext, useElectronEventaInvoke } from '../../../composables/electron-vueuse/use-electron-eventa-context'
 import { isLinux } from '../../../utils/platform'
 
-const isDark = useDark({ disableTransition: false })
-const toggleDark = useToggle(isDark)
+const { isDark, toggleDark } = useTheme()
 
 const settingsAudioDeviceStore = useSettingsAudioDevice()
 const context = useElectronEventaContext()

apps/stage-tamagotchi/src/renderer/composables/theme-color.ts

@@ -1,7 +1,7 @@
 import Color from 'colorjs.io'
 
 import { withRetry } from '@moeru/std'
-import { useDark } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
 
 export function themeColorFromPropertyOf(colorFromClass: string, property: string): () => Promise<string> {
   return async () => {
@@ -24,7 +24,7 @@ export function themeColorFromValue(value: string | { light: string, dark: strin
       return value
     }
     else {
-      const dark = useDark()
+      const { isDark: dark } = useTheme()
       return dark.value ? value.dark : value.light
     }
   }

apps/stage-web/src/App.vue

@@ -4,8 +4,8 @@ import { useDisplayModelsStore } from '@proj-airi/stage-ui/stores/display-models
 import { useModsChannelServerStore } from '@proj-airi/stage-ui/stores/mods/api/channel-server'
 import { useOnboardingStore } from '@proj-airi/stage-ui/stores/onboarding'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
+import { useTheme } from '@proj-airi/ui'
 import { StageTransitionGroup } from '@proj-airi/ui-transitions'
-import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -23,7 +23,7 @@ const settingsStore = useSettings()
 const settings = storeToRefs(settingsStore)
 const onboardingStore = useOnboardingStore()
 const { shouldShowSetup } = storeToRefs(onboardingStore)
-const isDark = useDark()
+const { isDark } = useTheme()
 const channelServerStore = useModsChannelServerStore()
 
 const primaryColor = computed(() => {

apps/stage-web/src/components/AudioWaveform.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useAudioContext } from '@proj-airi/stage-ui/stores/audio'
-import { useDark, useElementBounding } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
+import { useElementBounding } from '@vueuse/core'
 import { onMounted, ref } from 'vue'
 
 const containerRef = ref<HTMLDivElement>()
@@ -9,7 +10,7 @@ const analyser = ref<AnalyserNode>()
 const analyserDataBuffer = ref<Uint8Array<ArrayBuffer>>()
 const { audioContext } = useAudioContext()
 const canvasElemRef = ref<HTMLCanvasElement>()
-const isDark = useDark()
+const { isDark } = useTheme()
 
 // https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/playbackRate
 // explain: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useDark } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
 import { RouterLink } from 'vue-router'
 
 import LogoDark from '../../assets/logo-dark.svg'
 import Logo from '../../assets/logo.svg'
 
-const dark = useDark()
+const { isDark: dark } = useTheme()
 </script>
 
 <template>

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

@@ -7,8 +7,7 @@ import { useChatStore } from '@proj-airi/stage-ui/stores/chat'
 import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useSettings, useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { BasicTextarea, FieldSelect } from '@proj-airi/ui'
-import { useDark } from '@vueuse/core'
+import { BasicTextarea, FieldSelect, useTheme } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
 import { computed, onUnmounted, ref, watch } from 'vue'
@@ -32,7 +31,7 @@ const { messages } = storeToRefs(useChatStore())
 const { audioContext } = useAudioContext()
 const { t } = useI18n()
 
-const isDark = useDark({ disableTransition: false })
+const { isDark, toggleDark } = useTheme()
 
 // Legacy whisper pipeline removed; audio pipeline handled at page level
 
@@ -240,7 +239,7 @@ onUnmounted(() => {
         text="lg neutral-500 dark:neutral-400"
         flex items-center justify-center rounded-md p-2 outline-none
         transition-colors transition-transform active:scale-95
-        @click="isDark = !isDark"
+        @click="toggleDark()"
       >
         <Transition name="fade" mode="out-in">
           <div v-if="isDark" i-solar:moon-bold />

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useDark } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
 import { RouterLink } from 'vue-router'
 
 import LogoDark from '../../assets/logo-dark.svg'
 import Logo from '../../assets/logo.svg'
 
-const dark = useDark()
+const { isDark: dark } = useTheme()
 </script>
 
 <template>

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

@@ -8,8 +8,8 @@ import { useChatStore } from '@proj-airi/stage-ui/stores/chat'
 import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useSettings, useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { BasicTextarea } from '@proj-airi/ui'
-import { useDark, useResizeObserver, useScreenSafeArea } from '@vueuse/core'
+import { BasicTextarea, useTheme } from '@proj-airi/ui'
+import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -21,7 +21,7 @@ import ActionAbout from './InteractiveArea/Actions/About.vue'
 import ActionViewControls from './InteractiveArea/Actions/ViewControls.vue'
 import ViewControlInputs from './ViewControls/Inputs.vue'
 
-const isDark = useDark({ disableTransition: false })
+const { isDark, toggleDark } = useTheme()
 const hearingDialogOpen = ref(false)
 
 const viewControlsActiveMode = ref<'x' | 'y' | 'z' | 'scale'>('scale')
@@ -163,7 +163,7 @@ onMounted(() => {
               </Transition>
             </button>
           </HearingConfigDialog>
-          <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="Theme" @click="isDark = !isDark">
+          <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="Theme" @click="toggleDark()">
             <Transition name="fade" mode="out-in">
               <div v-if="isDark" i-solar:moon-outline size-5 text="neutral-500 dark:neutral-400" />
               <div v-else i-solar:sun-2-outline size-5 text="neutral-500 dark:neutral-400" />

apps/stage-web/src/composables/theme-color.ts

@@ -1,7 +1,7 @@
 import Color from 'colorjs.io'
 
 import { withRetry } from '@moeru/std'
-import { useDark } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
 
 export function themeColorFromPropertyOf(colorFromClass: string, property: string): () => Promise<string> {
   return async () => {
@@ -24,7 +24,7 @@ export function themeColorFromValue(value: string | { light: string, dark: strin
       return value
     }
     else {
-      const dark = useDark()
+      const { isDark: dark } = useTheme()
       return dark.value ? value.dark : value.light
     }
   }

apps/stage-web/src/layouts/settings.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PageHeader } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { useDark } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -12,7 +12,7 @@ import HeaderLink from '../components/Layouts/HeaderLink.vue'
 import { themeColorFromValue, useThemeColor } from '../composables/theme-color'
 
 const route = useRoute()
-const dark = useDark()
+const { isDark: dark } = useTheme()
 const { t } = useI18n()
 const providersStore = useProvidersStore()
 const { allProvidersMetadata } = storeToRefs(providersStore)

apps/stage-web/src/pages/index.vue

@@ -12,7 +12,8 @@ import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consci
 import { useHearingSpeechInputPipeline } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { breakpointsTailwind, useBreakpoints, useDark, useMouse } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
+import { breakpointsTailwind, useBreakpoints, useMouse } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
@@ -25,7 +26,7 @@ import AnimatedWave from '../components/Widgets/AnimatedWave.vue'
 
 import { themeColorFromPropertyOf, useThemeColor } from '../composables/theme-color'
 
-const dark = useDark()
+const { isDark: dark } = useTheme()
 const paused = ref(false)
 
 function handleSettingsOpen(open: boolean) {

packages/stage-pages/src/pages/settings/system/general.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { all } from '@proj-airi/i18n'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
-import { FieldCheckbox, FieldSelect } from '@proj-airi/ui'
-import { useDark } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const settings = useSettings()
 
 const { t } = useI18n()
-const dark = useDark()
+const { isDark: dark } = useTheme()
 
 const languages = computed(() => {
   return Object.entries(all).map(([value, label]) => ({ value, label }))

packages/stage-ui/src/components/scenes/live2d/Model.vue

@@ -2,7 +2,8 @@
 import type { Application } from '@pixi/app'
 import type { Cubism4InternalModel, InternalModel } from 'pixi-live2d-display/cubism4'
 
-import { breakpointsTailwind, until, useBreakpoints, useDark, useDebounceFn } from '@vueuse/core'
+import { useTheme } from '@proj-airi/ui'
+import { breakpointsTailwind, until, useBreakpoints, useDebounceFn } from '@vueuse/core'
 import { formatHex } from 'culori'
 import { storeToRefs } from 'pinia'
 import { DropShadowFilter } from 'pixi-filters'
@@ -88,7 +89,7 @@ const initialModelHeight = ref<number>(0)
 const mouthOpenSize = computed(() => Math.max(0, Math.min(100, props.mouthOpenSize)))
 const lastUpdateTime = ref(0)
 
-const dark = useDark()
+const { isDark: dark } = useTheme()
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const isMobile = computed(() => breakpoints.between('sm', 'md').value || breakpoints.smaller('sm').value)
 const idleEyeFocus = useLive2DIdleEyeFocus()

packages/ui/src/composables/use-theme.ts

@@ -0,0 +1,14 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+const isDark = useDark({
+  disableTransition: true,
+})
+
+const toggleDark = useToggle(isDark)
+
+export function useTheme() {
+  return {
+    isDark,
+    toggleDark,
+  }
+}

packages/ui/src/index.ts

@@ -2,3 +2,4 @@ import './fallback.css'
 
 export * from './components/Animations'
 export * from './components/Form'
+export * from './composables/use-theme'

pnpm-lock.yaml

@@ -44,7 +44,7 @@ catalogs:
       version: 0.4.0-beta.9
     '@xsai/shared':
       specifier: ^0.4.0-beta.9
-      version: 0.4.0-beta.9
+      version: 0.4.0-beta.10
     '@xsai/shared-chat':
       specifier: ^0.4.0-beta.9
       version: 0.4.0-beta.9
@@ -355,7 +355,7 @@ importers:
         version: 0.4.0-beta.9
       '@xsai/shared':
         specifier: 'catalog:'
-        version: 0.4.0-beta.9
+        version: 0.4.0-beta.10
       '@xsai/shared-chat':
         specifier: 'catalog:'
         version: 0.4.0-beta.9
@@ -755,7 +755,7 @@ importers:
         version: 0.4.0-beta.9
       '@xsai/shared':
         specifier: 'catalog:'
-        version: 0.4.0-beta.9
+        version: 0.4.0-beta.10
       '@xsai/shared-chat':
         specifier: 'catalog:'
         version: 0.4.0-beta.9
@@ -1483,7 +1483,7 @@ importers:
         version: 0.4.0-beta.9
       '@xsai/shared':
         specifier: 'catalog:'
-        version: 0.4.0-beta.9
+        version: 0.4.0-beta.10
       '@xsai/shared-chat':
         specifier: 'catalog:'
         version: 0.4.0-beta.9
@@ -7968,8 +7968,8 @@ packages:
   '@xsai/shared@0.3.5':
     resolution: {integrity: sha512-gxWH+9UjhXgqqKeU/o9UteC/ih1FzxEEsmPojImd/jvq4j/wtIg4aP3dCFnu+EhCT/MRQ38dkBSra99iY9cC3w==}
 
-  '@xsai/shared@0.4.0-beta.9':
-    resolution: {integrity: sha512-AH9d7MkqBAqWCDTY6FVjenaMUBnOVdfG3tLQ8ORo0KsX70moMeu6CLzyt1z7tmsrcis3jHgYmw+StuK0VFtytg==}
+  '@xsai/shared@0.4.0-beta.10':
+    resolution: {integrity: sha512-PWqktpzSQGQwqn4JsUpAmkNrP48/uL4pjNR9sjLugmw71hHpXcAeppGKLokiPusl2BnDvAW2kDSJRzNPBHSejw==}
 
   '@xsai/stream-text@0.3.5':
     resolution: {integrity: sha512-XUyM3/jo9FulWoqmQU6vvHFOoRZzr3rcsTGm0MY8hUXg9HJl91N0voQGb6R5AMlo5XgoSbO3GMFzJ26AVxmRMg==}
@@ -23213,24 +23213,24 @@ snapshots:
   '@xsai-ext/providers-cloud@0.4.0-beta.9':
     dependencies:
       '@xsai-ext/shared-providers': 0.4.0-beta.9
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai-ext/providers-local@0.4.0-beta.9':
     dependencies:
       '@xsai-ext/shared-providers': 0.4.0-beta.9
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai-ext/shared-providers@0.2.2':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai-ext/shared-providers@0.4.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai-ext/shared-providers@0.4.0-beta.9':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai-transformers/embed@0.0.11(electron@39.1.0)(h3@2.0.1-rc.5(crossws@0.4.1(srvx@0.9.4)))(web-worker@1.5.0)':
     dependencies:
@@ -23240,7 +23240,7 @@ snapshots:
       '@xsai-ext/shared-providers': 0.4.0-beta.9
       '@xsai-transformers/shared': 0.0.11(electron@39.1.0)(h3@2.0.1-rc.5(crossws@0.4.1(srvx@0.9.4)))(web-worker@1.5.0)
       '@xsai/embed': 0.4.0-beta.9
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
       gpuu: 1.0.6
     optionalDependencies:
       web-worker: 1.5.0
@@ -23254,7 +23254,7 @@ snapshots:
       '@moeru/eventa': 0.3.0(electron@39.1.0)(h3@2.0.1-rc.5(crossws@0.4.1(srvx@0.9.4)))(web-worker@1.5.0)
       '@moeru/std': 0.1.0-beta.13
       '@xsai-ext/shared-providers': 0.4.0-beta.9
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
       onnxruntime-common: 1.23.2
     transitivePeerDependencies:
       - electron
@@ -23270,7 +23270,7 @@ snapshots:
       '@xsai-transformers/shared': 0.0.11(electron@39.1.0)(h3@2.0.1-rc.5(crossws@0.4.1(srvx@0.9.4)))(web-worker@1.5.0)
       '@xsai/embed': 0.4.0-beta.9
       '@xsai/generate-transcription': 0.4.0-beta.9
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
       gpuu: 1.0.6
     optionalDependencies:
       web-worker: 1.5.0
@@ -23280,11 +23280,11 @@ snapshots:
 
   '@xsai/embed@0.4.0-beta.9':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai/generate-speech@0.4.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai/generate-text@0.3.5':
     dependencies:
@@ -23293,16 +23293,16 @@ snapshots:
 
   '@xsai/generate-text@0.4.0-beta.9':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
       '@xsai/shared-chat': 0.4.0-beta.9
 
   '@xsai/generate-transcription@0.4.0-beta.9':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai/model@0.4.0-beta.9':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai/shared-chat@0.3.5':
     dependencies:
@@ -23310,13 +23310,13 @@ snapshots:
 
   '@xsai/shared-chat@0.4.0-beta.9':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai/shared@0.2.2': {}
 
   '@xsai/shared@0.3.5': {}
 
-  '@xsai/shared@0.4.0-beta.9': {}
+  '@xsai/shared@0.4.0-beta.10': {}
 
   '@xsai/stream-text@0.3.5':
     dependencies:
@@ -23324,16 +23324,16 @@ snapshots:
 
   '@xsai/stream-text@0.4.0-beta.9':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
       '@xsai/shared-chat': 0.4.0-beta.9
 
   '@xsai/stream-transcription@0.4.0-beta.8':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
 
   '@xsai/tool@0.4.0-beta.9(zod-to-json-schema@3.24.6(zod@4.1.12))(zod@4.1.12)':
     dependencies:
-      '@xsai/shared': 0.4.0-beta.9
+      '@xsai/shared': 0.4.0-beta.10
       '@xsai/shared-chat': 0.4.0-beta.9
       xsschema: 0.4.0-beta.9(@valibot/to-json-schema@1.0.0-rc.0(valibot@1.0.0-beta.9(typescript@5.9.3)))(zod-to-json-schema@3.24.6(zod@4.1.12))(zod@4.1.12)
     transitivePeerDependencies: