diff --git a/apps/stage-capacitor/package.json b/apps/stage-capacitor/package.json
index 7e8957a95..9fc49037a 100644
--- a/apps/stage-capacitor/package.json
+++ b/apps/stage-capacitor/package.json
@@ -32,6 +32,7 @@
     "@proj-airi/font-xiaolai": "workspace:^",
     "@proj-airi/i18n": "workspace:^",
     "@proj-airi/server-sdk": "workspace:^",
+    "@proj-airi/stage-layouts": "workspace:^",
     "@proj-airi/stage-ui": "workspace:^",
     "@proj-airi/stage-ui-three": "workspace:^",
     "@proj-airi/stage-ui-three-performance-runtime": "workspace:^",
diff --git a/apps/stage-capacitor/src/layouts/settings.vue b/apps/stage-capacitor/src/layouts/settings.vue
deleted file mode 100644
index 3645f1286..000000000
--- a/apps/stage-capacitor/src/layouts/settings.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<script setup lang="ts">
-import { PageHeader } from '@proj-airi/stage-ui/components'
-import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { useTheme } from '@proj-airi/ui'
-import { storeToRefs } from 'pinia'
-import { computed, onMounted, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { RouterView, useRoute } from 'vue-router'
-
-import HeaderLink from '../components/Layouts/HeaderLink.vue'
-
-import { themeColorFromValue, useThemeColor } from '../composables/theme-color'
-
-const route = useRoute()
-const { isDark: dark } = useTheme()
-const { t } = useI18n()
-const providersStore = useProvidersStore()
-const { allProvidersMetadata } = storeToRefs(providersStore)
-
-const routeHeaderMetadataMap = computed(() => {
-  const map: Record<string, { subtitle?: string, title: string }> = {
-    '/settings/airi-card': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.card.title'),
-    },
-    '/settings/system': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.title'),
-    },
-    '/settings/system/general': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.general.title'),
-    },
-    '/settings/system/color-scheme': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.color-scheme.title'),
-    },
-    '/settings/system/developer': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.developer.title'),
-    },
-    '/settings/memory': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.memory.title'),
-    },
-    '/settings/models': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.models.title'),
-    },
-    '/settings/modules': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.title'),
-    },
-    '/settings/modules/consciousness': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.consciousness.title'),
-    },
-    '/settings/modules/speech': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.speech.title'),
-    },
-    '/settings/modules/hearing': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.hearing.title'),
-    },
-    '/settings/modules/vision': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.vision.title'),
-    },
-    '/settings/modules/memory-short-term': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.memory-short-term.title'),
-    },
-    '/settings/modules/memory-long-term': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.memory-long-term.title'),
-    },
-    '/settings/modules/messaging-discord': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.messaging-discord.title'),
-    },
-    '/settings/modules/x': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.x.title'),
-    },
-    '/settings/modules/gaming-minecraft': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.gaming-minecraft.title'),
-    },
-    '/settings/modules/gaming-factorio': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.gaming-factorio.title'),
-    },
-    '/settings/providers': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.providers.title'),
-    },
-    '/settings/data': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.data.title'),
-    },
-    '/settings/scene': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.scene.title'),
-    },
-    '/settings': {
-      title: t('settings.title'),
-    },
-  }
-
-  for (const metadata of allProvidersMetadata.value) {
-    map[`/settings/providers/${metadata.category}/${metadata.id}`] = {
-      subtitle: t('settings.title'),
-      title: t(metadata.nameKey),
-    }
-  }
-
-  return map
-})
-
-// const activeSettingsTutorial = ref('default')
-const routeHeaderMetadata = computed(() => routeHeaderMetadataMap.value[route.path])
-
-const { updateThemeColor } = useThemeColor(themeColorFromValue({ light: 'rgb(255 255 255)', dark: 'rgb(18 18 18)' }))
-watch(dark, () => updateThemeColor(), { immediate: true })
-watch(route, () => updateThemeColor(), { immediate: true })
-onMounted(() => updateThemeColor())
-</script>
-
-<template>
-  <div
-    :style="{
-      paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-      paddingTop: 'env(safe-area-inset-top, 0px)',
-      paddingRight: 'env(safe-area-inset-right, 0px)',
-      paddingLeft: 'env(safe-area-inset-left, 0px)',
-    }"
-    h-full w-full
-  >
-    <!-- Header -->
-    <div
-      class="px-0 py-1 hidden sm:block md:px-3 md:py-3"
-      w-full gap-2
-      bg="$bg-color"
-    >
-      <HeaderLink />
-    </div>
-    <!-- Content -->
-    <div class="max-h-[calc(100%-40px)] px-3 py-0 sm:max-h-[calc(100%-56px)] 2xl:max-w-screen-2xl md:py-0 xl:px-4" flex="~ col" mx-auto h-full>
-      <PageHeader
-        :title="routeHeaderMetadata?.title"
-        :subtitle="routeHeaderMetadata?.subtitle"
-      />
-      <RouterView />
-    </div>
-  </div>
-</template>
diff --git a/apps/stage-capacitor/src/pages/devtools/background-gradient-blending.vue b/apps/stage-capacitor/src/pages/devtools/background-gradient-blending.vue
index d004edf0a..dbe37f6e8 100644
--- a/apps/stage-capacitor/src/pages/devtools/background-gradient-blending.vue
+++ b/apps/stage-capacitor/src/pages/devtools/background-gradient-blending.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
+import { useThemeColor } from '@proj-airi/stage-layouts/composables/theme-color'
 import { colorFromElement } from '@proj-airi/stage-ui/libs'
 import { BasicInputFile } from '@proj-airi/ui'
 import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 
 import defaultBackgroundImage from '../../assets/backgrounds/fairy-forest.e17cbc2774.ko-fi.com.avif'
-
-import { useThemeColor } from '../../composables/theme-color'
 // Reactive state
 const isCapturing = ref(false)
 const extractedColors = ref<string[]>([])
diff --git a/apps/stage-capacitor/src/pages/index.vue b/apps/stage-capacitor/src/pages/index.vue
index 3bb504c09..66c2668d1 100644
--- a/apps/stage-capacitor/src/pages/index.vue
+++ b/apps/stage-capacitor/src/pages/index.vue
@@ -1,8 +1,15 @@
 <script setup lang="ts">
 import type { ChatProvider } from '@xsai-ext/providers/utils'
 
+import Header from '@proj-airi/stage-layouts/components/Layouts/Header.vue'
+import InteractiveArea from '@proj-airi/stage-layouts/components/Layouts/InteractiveArea.vue'
+import MobileHeader from '@proj-airi/stage-layouts/components/Layouts/MobileHeader.vue'
+import MobileInteractiveArea from '@proj-airi/stage-layouts/components/Layouts/MobileInteractiveArea.vue'
 import workletUrl from '@proj-airi/stage-ui/workers/vad/process.worklet?worker&url'
 
+import { BackgroundProvider } from '@proj-airi/stage-layouts/components/Backgrounds'
+import { useBackgroundThemeColor } from '@proj-airi/stage-layouts/composables/theme-color'
+import { useBackgroundStore } from '@proj-airi/stage-layouts/stores/background'
 import { WidgetStage } from '@proj-airi/stage-ui/components/scenes'
 import { useAudioRecorder } from '@proj-airi/stage-ui/composables/audio/audio-recorder'
 import { useVAD } from '@proj-airi/stage-ui/stores/ai/models/vad'
@@ -16,15 +23,6 @@ import { breakpointsTailwind, useBreakpoints, useMouse } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 
-import Header from '../components/Layouts/Header.vue'
-import InteractiveArea from '../components/Layouts/InteractiveArea.vue'
-import MobileHeader from '../components/Layouts/MobileHeader.vue'
-import MobileInteractiveArea from '../components/Layouts/MobileInteractiveArea.vue'
-
-import { BackgroundProvider } from '../components/Backgrounds'
-import { useBackgroundThemeColor } from '../composables/theme-color'
-import { useBackgroundStore } from '../stores/background'
-
 const paused = ref(false)
 
 function handleSettingsOpen(open: boolean) {
diff --git a/apps/stage-capacitor/src/stores/background.ts b/apps/stage-capacitor/src/stores/background.ts
index b7907d723..c7a34f62a 100644
--- a/apps/stage-capacitor/src/stores/background.ts
+++ b/apps/stage-capacitor/src/stores/background.ts
@@ -1,279 +1 @@
-import type { BackgroundOption } from '@proj-airi/stage-ui/components'
-import type { Ref, ShallowRef } from 'vue'
-
-import localforage from 'localforage'
-
-import { useLocalStorage, useObjectUrl } from '@vueuse/core'
-import { defineStore } from 'pinia'
-import { computed, markRaw, onScopeDispose, ref, shallowRef } from 'vue'
-
-import { DefaultBackgroundPreview } from '../components/Backgrounds/default'
-
-export enum BackgroundKind {
-  Wave = 'wave',
-  Image = 'image',
-}
-
-export interface BackgroundItem extends BackgroundOption {
-  kind: BackgroundKind
-  importedAt?: number
-}
-
-type PersistedBackgroundItem = Omit<BackgroundItem, 'file'> & {
-  file?: Blob
-}
-
-export const useBackgroundStore = defineStore('background', () => {
-  // TODO: STORAGE_PREFIX used with multiple less maintainable `localforage` and `key.startsWith(...)` call that creates complexity.
-  const STORAGE_PREFIX = 'background-'
-  const presets: BackgroundItem[] = [
-    {
-      id: 'colorful-wave',
-      label: 'Colorful Wave',
-      description: 'Animated wave on cross grid',
-      kind: BackgroundKind.Wave,
-      component: markRaw(DefaultBackgroundPreview),
-    },
-  ]
-
-  const options = ref<BackgroundItem[]>([...presets])
-  const loading = ref(false)
-
-  const selectedId = useLocalStorage<string>('settings/theme/background/selected-id', options.value[0]?.id)
-  const sampledColor = useLocalStorage<string>('settings/theme/background/sampled-color', '')
-
-  const selectedOption = computed(() => options.value.find(option => option.id === selectedId.value) ?? options.value[0])
-
-  const blobRefs = new Map<string, ShallowRef<Blob | undefined>>()
-  const urlRefs = new Map<string, Readonly<Ref<string | undefined>>>()
-
-  function ensureObjectUrl(id: string, blob: Blob) {
-    let blobRef = blobRefs.get(id)
-    let urlRef = urlRefs.get(id)
-
-    if (!blobRef || !urlRef) {
-      blobRef = shallowRef<Blob | undefined>(blob)
-      blobRefs.set(id, blobRef)
-      urlRef = useObjectUrl(blobRef)
-      urlRefs.set(id, urlRef)
-    }
-
-    if (blobRef.value !== blob)
-      blobRef.value = blob
-
-    return urlRef!.value!
-  }
-
-  onScopeDispose(() => {
-    blobRefs.clear()
-    urlRefs.clear()
-  })
-
-  async function migrateDataUrlToBlob(key: string, val: PersistedBackgroundItem, dataUrl: string) {
-    try {
-      const blob = await (await fetch(dataUrl)).blob()
-      const objectUrl = ensureObjectUrl(key, blob)
-
-      const existing = options.value.find(o => o.id === key)
-      if (existing) {
-        existing.src = objectUrl
-        existing.file = undefined
-      }
-
-      const payload: PersistedBackgroundItem = {
-        ...val,
-        src: undefined,
-        file: blob,
-      }
-
-      await localforage.setItem<PersistedBackgroundItem>(key, payload)
-    }
-    catch (error) {
-      console.error('Failed to migrate background data URL to Blob', error)
-    }
-  }
-
-  function setSelection(option: BackgroundItem, color?: string) {
-    selectedId.value = option.id
-    if (color)
-      sampledColor.value = color
-  }
-
-  async function applyPickerSelection(payload: { option: BackgroundOption, color?: string }) {
-    const kind = payload.option.kind === BackgroundKind.Wave
-      ? BackgroundKind.Wave
-      : payload.option.kind === BackgroundKind.Image
-        ? BackgroundKind.Image
-        : BackgroundKind.Image
-
-    const selection: BackgroundItem = {
-      ...payload.option,
-      kind,
-    }
-
-    const saved = await addOption(selection)
-    setSelection(saved, payload.color)
-    return saved
-  }
-
-  async function loadFromIndexedDb() {
-    if (loading.value)
-      return
-    loading.value = true
-    const stored: BackgroundItem[] = []
-    try {
-      await localforage.iterate<PersistedBackgroundItem, void>((val, key) => {
-        if (!key.startsWith(STORAGE_PREFIX))
-          return
-
-        const storedBlob = val.file instanceof Blob ? val.file : undefined
-        const storedSrc = typeof val.src === 'string' && val.src.length > 0 ? val.src : undefined
-
-        if (storedBlob) {
-          const objectUrl = ensureObjectUrl(key, storedBlob)
-          stored.push({
-            ...val,
-            id: key,
-            kind: BackgroundKind.Image,
-            src: objectUrl,
-            file: undefined,
-            component: undefined,
-            removable: true,
-          })
-          return
-        }
-
-        if (storedSrc) {
-          stored.push({
-            ...val,
-            id: key,
-            kind: BackgroundKind.Image,
-            src: storedSrc,
-            file: undefined,
-            component: undefined,
-            removable: true,
-          })
-
-          if (storedSrc.startsWith('data:')) {
-            setTimeout(() => {
-              void migrateDataUrlToBlob(key, val, storedSrc)
-            }, 0)
-          }
-        }
-      })
-    }
-    catch (error) {
-      console.error('Failed to load backgrounds from IndexedDB', error)
-    }
-
-    options.value = [...presets, ...stored].sort((a, b) => (b.importedAt ?? 0) - (a.importedAt ?? 0))
-    loading.value = false
-  }
-
-  void loadFromIndexedDb()
-
-  async function addOption(option: BackgroundItem): Promise<BackgroundItem> {
-    const normalizedId = option.file ? (option.id.startsWith(STORAGE_PREFIX) ? option.id : `${STORAGE_PREFIX}${option.id}`) : option.id
-
-    const hasUploadedFile = option.file instanceof Blob
-    const storedBlob = hasUploadedFile ? option.file : undefined
-
-    const src = storedBlob
-      ? ensureObjectUrl(normalizedId, storedBlob)
-      : option.src
-
-    const normalizedOption: BackgroundItem = {
-      ...option,
-      id: normalizedId,
-      kind: option.kind ?? BackgroundKind.Image,
-      component: option.component ? markRaw(option.component) : option.component,
-      src,
-      importedAt: option.importedAt ?? Date.now(),
-      blur: option.blur,
-      file: undefined,
-      removable: true,
-    }
-
-    const existing = options.value.find(o => o.id === normalizedId)
-    if (existing) {
-      Object.assign(existing, normalizedOption)
-    }
-    else {
-      options.value.push(normalizedOption)
-    }
-    selectedId.value = normalizedId
-
-    if (hasUploadedFile && storedBlob) {
-      const payload: PersistedBackgroundItem = {
-        ...normalizedOption,
-        // ensure we store under prefix for consistency
-        id: normalizedId.startsWith(STORAGE_PREFIX) ? normalizedId : `${STORAGE_PREFIX}${normalizedId}`,
-        src: undefined,
-        file: storedBlob,
-        removable: true,
-      }
-      try {
-        await localforage.setItem<PersistedBackgroundItem>(payload.id, payload)
-      }
-      catch (error) {
-        console.error('Failed to persist background', error)
-      }
-    }
-
-    return normalizedOption
-  }
-
-  async function removeOption(optionId: string) {
-    const optionIndex = options.value.findIndex(o => o.id === optionId)
-    if (optionIndex === -1)
-      return
-
-    const option = options.value[optionIndex]
-
-    // Remove from localforage
-    try {
-      if (option.id.startsWith(STORAGE_PREFIX)) {
-        await localforage.removeItem(option.id)
-      }
-    }
-    catch (error) {
-      console.error('Failed to remove background from storage', error)
-    }
-
-    const blobRef = blobRefs.get(optionId)
-    if (blobRef)
-      blobRef.value = undefined
-    blobRefs.delete(optionId)
-    urlRefs.delete(optionId)
-
-    // Remove from list
-    options.value.splice(optionIndex, 1)
-
-    // If selected, fallback to first available option
-    if (selectedId.value === optionId) {
-      const fallback = options.value[0]
-      if (fallback) {
-        selectedId.value = fallback.id
-      }
-    }
-  }
-
-  function setSampledColor(color?: string) {
-    if (color)
-      sampledColor.value = color
-  }
-
-  return {
-    options,
-    selectedId,
-    selectedOption,
-    sampledColor,
-    loading,
-    loadFromIndexedDb,
-    addOption,
-    removeOption,
-    setSelection,
-    applyPickerSelection,
-    setSampledColor,
-  }
-})
+export { type BackgroundItem, BackgroundKind, useBackgroundStore } from '@proj-airi/stage-layouts/stores/background'
diff --git a/apps/stage-capacitor/tsconfig.json b/apps/stage-capacitor/tsconfig.json
index 19602cd36..476aab3b7 100644
--- a/apps/stage-capacitor/tsconfig.json
+++ b/apps/stage-capacitor/tsconfig.json
@@ -11,6 +11,9 @@
     "paths": {
       "@proj-airi/stage-ui/*": [
         "../../packages/stage-ui/src/*"
+      ],
+      "@proj-airi/stage-layouts/*": [
+        "../../packages/stage-layouts/src/*"
       ]
     },
     "resolveJsonModule": true,
diff --git a/apps/stage-capacitor/vite.config.ts b/apps/stage-capacitor/vite.config.ts
index f95f61aaa..acf5a0110 100644
--- a/apps/stage-capacitor/vite.config.ts
+++ b/apps/stage-capacitor/vite.config.ts
@@ -51,6 +51,7 @@ export default defineConfig({
       '@proj-airi/server-sdk': resolve(join(import.meta.dirname, '..', '..', 'packages', 'server-sdk', 'src')),
       '@proj-airi/i18n': resolve(join(import.meta.dirname, '..', '..', 'packages', 'i18n', 'src')),
       '@proj-airi/stage-ui': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src')),
+      '@proj-airi/stage-layouts': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-layouts', 'src')),
       '@proj-airi/stage-pages': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-pages', 'src')),
       '@proj-airi/stage-shared': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-shared', 'src')),
     },
@@ -60,6 +61,7 @@ export default defineConfig({
       clientFiles: [
         `${resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src'))}/*.vue`,
         `${resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-pages', 'src'))}/*.vue`,
+        `${resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-layouts', 'src'))}/*.vue`,
       ],
     },
   },
@@ -95,7 +97,12 @@ export default defineConfig({
     }),
 
     // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
-    Layouts(),
+    Layouts({
+      layoutsDirs: [
+        resolve(import.meta.dirname, 'src', 'layouts'),
+        resolve(import.meta.dirname, '..', '..', 'packages', 'stage-layouts', 'src', 'layouts'),
+      ],
+    }),
 
     // https://github.com/antfu/unocss
     // see uno.config.ts for config
diff --git a/apps/stage-tamagotchi/electron.vite.config.ts b/apps/stage-tamagotchi/electron.vite.config.ts
index 5a2e85b5c..2b17a2a68 100644
--- a/apps/stage-tamagotchi/electron.vite.config.ts
+++ b/apps/stage-tamagotchi/electron.vite.config.ts
@@ -138,7 +138,10 @@ export default defineConfig({
 
       // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
       Layouts({
-        layoutsDirs: [resolve(import.meta.dirname, 'src', 'renderer', 'layouts')],
+        layoutsDirs: [
+          resolve(import.meta.dirname, 'src', 'renderer', 'layouts'),
+          resolve(import.meta.dirname, '..', '..', 'packages', 'stage-layouts', 'src', 'layouts'),
+        ],
         pagesDirs: [resolve(import.meta.dirname, 'src', 'renderer', 'pages')],
       }),
 
diff --git a/apps/stage-tamagotchi/package.json b/apps/stage-tamagotchi/package.json
index ad4345e14..91c8c8c3d 100644
--- a/apps/stage-tamagotchi/package.json
+++ b/apps/stage-tamagotchi/package.json
@@ -57,6 +57,7 @@
     "@proj-airi/i18n": "workspace:^",
     "@proj-airi/server-runtime": "workspace:^",
     "@proj-airi/server-sdk": "workspace:*",
+    "@proj-airi/stage-layouts": "workspace:^",
     "@proj-airi/stage-ui": "workspace:^",
     "@proj-airi/ui": "workspace:^",
     "@stdlib/string-base-kebabcase": "^0.2.2",
diff --git a/apps/stage-tamagotchi/src/renderer/App.vue b/apps/stage-tamagotchi/src/renderer/App.vue
index 708b39d9a..9cda4b444 100644
--- a/apps/stage-tamagotchi/src/renderer/App.vue
+++ b/apps/stage-tamagotchi/src/renderer/App.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { defineInvoke, defineInvokeHandler } from '@moeru/eventa'
+import { themeColorFromValue, useThemeColor } from '@proj-airi/stage-layouts/composables/theme-color'
 import { useSharedAnalyticsStore } from '@proj-airi/stage-ui/stores/analytics'
 import { useDisplayModelsStore } from '@proj-airi/stage-ui/stores/display-models'
 import { useModsServerChannelStore } from '@proj-airi/stage-ui/stores/mods/api/channel-server'
@@ -15,7 +16,6 @@ import { RouterView, useRoute, useRouter } from 'vue-router'
 
 import { electronOpenSettings, electronStartTrackMousePosition } from '../shared/eventa'
 import { useElectronEventaContext } from './composables/electron-vueuse'
-import { themeColorFromValue, useThemeColor } from './composables/theme-color'
 
 const { isDark: dark } = useTheme()
 const i18n = useI18n()
diff --git a/apps/stage-tamagotchi/src/renderer/composables/theme-color.ts b/apps/stage-tamagotchi/src/renderer/composables/theme-color.ts
deleted file mode 100644
index 63ff23e37..000000000
--- a/apps/stage-tamagotchi/src/renderer/composables/theme-color.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import Color from 'colorjs.io'
-
-import { withRetry } from '@moeru/std'
-import { useTheme } from '@proj-airi/ui'
-
-export function themeColorFromPropertyOf(colorFromClass: string, property: string): () => Promise<string> {
-  return async () => {
-    const fetchUntilWidgetMounted = withRetry(() => {
-      const widgets = document.querySelector(colorFromClass) as HTMLDivElement | undefined
-      if (!widgets)
-        throw new Error('Widgets element not found')
-
-      return widgets
-    }, { retry: 10, retryDelay: 1000 })
-
-    const widgets = await fetchUntilWidgetMounted()
-    return window.getComputedStyle(widgets).getPropertyValue(property)
-  }
-}
-
-export function themeColorFromValue(value: string | { light: string, dark: string }): () => Promise<string> {
-  return async () => {
-    if (typeof value === 'string') {
-      return value
-    }
-    else {
-      const { isDark: dark } = useTheme()
-      return dark.value ? value.dark : value.light
-    }
-  }
-}
-
-export function useThemeColor(colorFrom: () => string | Promise<string>) {
-  async function updateThemeColor() {
-    if (!('document' in globalThis) || globalThis.document == null)
-      return
-    if (!('window' in globalThis) || globalThis.window == null)
-      return
-
-    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', new Color(await colorFrom()).to('srgb').toString({ format: 'hex' }))
-  }
-
-  return {
-    updateThemeColor,
-  }
-}
diff --git a/apps/stage-tamagotchi/src/renderer/layouts/plain.vue b/apps/stage-tamagotchi/src/renderer/layouts/plain.vue
deleted file mode 100644
index a78fb6fd3..000000000
--- a/apps/stage-tamagotchi/src/renderer/layouts/plain.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-</script>
-
-<template>
-  <RouterView />
-</template>
diff --git a/apps/stage-tamagotchi/tsconfig.web.json b/apps/stage-tamagotchi/tsconfig.web.json
index 5856b3757..dfc56acad 100644
--- a/apps/stage-tamagotchi/tsconfig.web.json
+++ b/apps/stage-tamagotchi/tsconfig.web.json
@@ -15,6 +15,9 @@
     "paths": {
       "@proj-airi/stage-ui/*": [
         "../../packages/stage-ui/src/*"
+      ],
+      "@proj-airi/stage-layouts/*": [
+        "../../packages/stage-layouts/src/*"
       ]
     },
     "resolveJsonModule": true,
diff --git a/apps/stage-web/package.json b/apps/stage-web/package.json
index cdeea2f5a..cc1c58697 100644
--- a/apps/stage-web/package.json
+++ b/apps/stage-web/package.json
@@ -30,6 +30,7 @@
     "@proj-airi/i18n": "workspace:^",
     "@proj-airi/model-driver-mediapipe": "workspace:^",
     "@proj-airi/server-sdk": "workspace:^",
+    "@proj-airi/stage-layouts": "workspace:^",
     "@proj-airi/stage-ui": "workspace:^",
     "@proj-airi/stage-ui-three": "workspace:^",
     "@proj-airi/stage-ui-three-performance-runtime": "workspace:^",
diff --git a/apps/stage-web/src/components/Backgrounds/DialogPicker.vue b/apps/stage-web/src/components/Backgrounds/DialogPicker.vue
deleted file mode 100644
index c00bd30d0..000000000
--- a/apps/stage-web/src/components/Backgrounds/DialogPicker.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { BackgroundPickerDialog } from '@proj-airi/stage-ui/components'
-import { storeToRefs } from 'pinia'
-
-import { useBackgroundStore } from '../../stores/background'
-
-const show = defineModel<boolean>({ default: false })
-
-const backgroundStore = useBackgroundStore()
-const { options, selectedOption } = storeToRefs(backgroundStore)
-</script>
-
-<template>
-  <BackgroundPickerDialog
-    v-model="show"
-    :selected="selectedOption"
-    :options="options"
-    @apply="backgroundStore.applyPickerSelection"
-    @remove="option => backgroundStore.removeOption(option.id)"
-  />
-</template>
diff --git a/apps/stage-web/src/components/Backgrounds/Line1.vue b/apps/stage-web/src/components/Backgrounds/Line1.vue
deleted file mode 100644
index 2beb911ff..000000000
--- a/apps/stage-web/src/components/Backgrounds/Line1.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="line-1-background-container">
-    <slot />
-  </div>
-</template>
-
-<style lang="css" scoped>
-/*
-Pattern Monster - SVG Pattern Generator
-https://pattern.monster/
-*/
-
-.line-1-background-container {
-  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(8) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='%23ffffffff'/><path d='M20-5V5m0 30v10m20-30v10M0 15v10'  stroke-linejoin='round' stroke-linecap='round' stroke-width='2' stroke='%23eee7e9ff' fill='none'/><path d='M-5 40H5M-5 0H5m30 0h10M35 40h10M15 20h10'  stroke-linejoin='round' stroke-linecap='round' stroke-width='2' stroke='%23efbcceff' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-488,-456)' fill='url(%23a)'/></svg>");
-}
-</style>
diff --git a/apps/stage-web/src/components/Backgrounds/Provider.vue b/apps/stage-web/src/components/Backgrounds/Provider.vue
deleted file mode 100644
index c7615bbae..000000000
--- a/apps/stage-web/src/components/Backgrounds/Provider.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import type { BackgroundItem } from '../../stores/background'
-
-import { BackgroundGradientOverlay } from '@proj-airi/stage-ui/components'
-import { ref } from 'vue'
-
-import { BackgroundKind } from '../../stores/background'
-import { DefaultBackground } from '../Backgrounds/default'
-
-defineProps<{
-  background: BackgroundItem
-  topColor?: string
-}>()
-
-const containerRef = ref<HTMLElement | null>(null)
-
-defineExpose({
-  surfaceEl: containerRef,
-})
-</script>
-
-<template>
-  <div ref="containerRef" class="customized-background relative min-h-100dvh w-full overflow-hidden">
-    <!-- Background layers -->
-    <div
-      class="absolute inset-0 z-0 transition-all duration-300"
-      :class="[(background.blur && background.kind !== BackgroundKind.Wave) ? 'blur-md scale-110' : '']"
-    >
-      <template v-if="background.kind === BackgroundKind.Wave">
-        <DefaultBackground class="h-full w-full" />
-      </template>
-      <template v-else-if="background.kind === BackgroundKind.Image">
-        <img
-          :src="background.src"
-          class="h-full w-full object-cover"
-          loading="lazy"
-          decoding="async"
-        >
-      </template>
-      <template v-else>
-        <div class="h-full w-full bg-neutral-950" />
-      </template>
-    </div>
-
-    <!-- Overlay (not for wave) -->
-    <BackgroundGradientOverlay v-if="background.kind !== BackgroundKind.Wave" :color="topColor" />
-
-    <!-- Content layer (kept mounted during background switches) -->
-    <div class="relative z-10 h-full w-full">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-</style>
diff --git a/apps/stage-web/src/components/Backgrounds/SakuraPetal.vue b/apps/stage-web/src/components/Backgrounds/SakuraPetal.vue
deleted file mode 100644
index 1e1b01237..000000000
--- a/apps/stage-web/src/components/Backgrounds/SakuraPetal.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-
-interface Props {
-  petalCount?: number
-  refreshInterval?: number
-  baseColor?: string
-}
-
-interface Petal {
-  id: number
-  style: {
-    left: string
-    top: string
-    width: string
-    height: string
-    animationDuration: string
-    animationDelay: string
-    transform: string
-  }
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  petalCount: 20,
-  refreshInterval: 30000,
-  baseColor: '#FFB6C1',
-})
-
-const petals = ref<Petal[]>([])
-let animationInterval: number | null = null
-
-function createPetalStyle() {
-  const size = 8 + Math.random() * 4
-  return {
-    left: `${Math.random() * 100}%`,
-    top: `-${size}px`,
-    width: `${size}px`,
-    height: `${size}px`,
-    animationDuration: `${5 + Math.random() * 5}s`,
-    animationDelay: `${Math.random() * 5}s`,
-    transform: `rotate(${Math.random() * 360}deg)`,
-  }
-}
-
-function createPetals() {
-  petals.value.length = 0
-  for (let i = 0; i < props.petalCount; i++) {
-    petals.value.push({
-      id: Date.now() + i,
-      style: createPetalStyle(),
-    })
-  }
-}
-
-onMounted(() => {
-  createPetals()
-  animationInterval = window.setInterval(createPetals, props.refreshInterval)
-})
-
-onBeforeUnmount(() => {
-  if (animationInterval) {
-    window.clearInterval(animationInterval)
-  }
-})
-</script>
-
-<template>
-  <div class="sakura-container">
-    <div class="sakura-bg" />
-    <div class="pattern-overlay" />
-    <div class="petals-container">
-      <div
-        v-for="petal in petals"
-        :key="petal.id"
-        class="sakura-petal"
-        :style="petal.style"
-      />
-    </div>
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.sakura-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.sakura-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-}
-
-.pattern-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c1.4-1.4 3.8-1.4 5.2 0L45 14.8c1.4 1.4 1.4 3.8 0 5.2L35.2 30l9.8 9.8c1.4 1.4 1.4 3.8 0 5.2L35.2 55c-1.4 1.4-3.8 1.4-5.2 0L20.2 45c-1.4-1.4-1.4-3.8 0-5.2L30 30l-9.8-9.8c-1.4-1.4-1.4-3.8 0-5.2L30 5z' fill='%23FFB6C1' fill-opacity='0.1'/%3E%3C/svg%3E");
-  opacity: 0.5;
-  animation: patternFloat 20s linear infinite;
-  pointer-events: none;
-  z-index: 2;
-}
-
-.petals-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 3;
-  pointer-events: none;
-}
-
-.sakura-petal {
-  position: absolute;
-  background: v-bind('props.baseColor');
-  border-radius: 150% 0 150% 0;
-  opacity: 0.6;
-  pointer-events: none;
-  filter: blur(1px);
-  animation-name: fall, drift;
-  animation-timing-function: linear, ease-in-out;
-  animation-iteration-count: infinite;
-}
-
-@keyframes fall {
-  0% {
-    top: -10px;
-    transform: translateX(0) rotate(0deg);
-  }
-  100% {
-    top: 100vh;
-    transform: translateX(100px) rotate(360deg);
-  }
-}
-
-@keyframes drift {
-  0% {
-    transform: translateX(0) rotate(0deg);
-  }
-  50% {
-    transform: translateX(50px) rotate(180deg);
-  }
-  100% {
-    transform: translateX(0) rotate(360deg);
-  }
-}
-
-@keyframes patternFloat {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 60px 60px;
-  }
-}
-</style>
diff --git a/apps/stage-web/src/components/Backgrounds/TicTacToe.vue b/apps/stage-web/src/components/Backgrounds/TicTacToe.vue
deleted file mode 100644
index c05d5e4c4..000000000
--- a/apps/stage-web/src/components/Backgrounds/TicTacToe.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="tic-tac-toe-background-container">
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-/*
-Hero Patterns | Free repeatable SVG background patterns for your web projects
-https://heropatterns.com/
-*/
-.tic-tac-toe-background-container {
-  background-color: transparent;
-  background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z' fill='%23ffcfe1' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
-  background-position: 0 0;
-  position: relative;
-  overflow: hidden;
-  transition: transform 0.3s ease;
-}
-
-.tic-tac-toe-background-container:hover {
-  transform: scale(1.02);
-  animation: slideBackground 2s linear infinite;
-}
-
-@keyframes slideBackground {
-  0% {
-    background-position: 0 0;
-  }
-  100% {
-    background-position: 64px -64px; /* Match the SVG size for smooth looping */
-  }
-}
-</style>
diff --git a/apps/stage-web/src/components/Backgrounds/default/index.ts b/apps/stage-web/src/components/Backgrounds/default/index.ts
deleted file mode 100644
index d393f9ed0..000000000
--- a/apps/stage-web/src/components/Backgrounds/default/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as DefaultBackground } from './index.vue'
-export { default as PartAnimatedWave } from './part-animated-wave.vue'
-export { default as PatternCross } from './pattern-cross.vue'
-export { default as DefaultBackgroundPreview } from './preview.vue'
diff --git a/apps/stage-web/src/components/Backgrounds/default/index.vue b/apps/stage-web/src/components/Backgrounds/default/index.vue
deleted file mode 100644
index 0adf4b682..000000000
--- a/apps/stage-web/src/components/Backgrounds/default/index.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { useTheme } from '@proj-airi/ui'
-
-import { PartAnimatedWave, PatternCross } from '.'
-
-const { isDark } = useTheme()
-</script>
-
-<template>
-  <PatternCross>
-    <PartAnimatedWave
-      :fill-color="isDark
-        ? 'oklch(35% calc(var(--chromatic-chroma) * 0.6) var(--chromatic-hue))'
-        : 'color-mix(in srgb, oklch(95% calc(var(--chromatic-chroma-50) * 0.5) var(--chromatic-hue)) 80%, oklch(100% 0 360))'"
-      class="h-full w-full"
-    >
-      <slot />
-    </PartAnimatedWave>
-  </PatternCross>
-</template>
diff --git a/apps/stage-web/src/components/Backgrounds/default/part-animated-wave.vue b/apps/stage-web/src/components/Backgrounds/default/part-animated-wave.vue
deleted file mode 100644
index b3b7f5647..000000000
--- a/apps/stage-web/src/components/Backgrounds/default/part-animated-wave.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-
-type WaveDirection = 'up' | 'down'
-type MovementDirection = 'left' | 'right'
-
-interface WaveProps {
-  height?: number // Height of the wave in pixels
-  amplitude?: number // Wave height variation in pixels
-  waveLength?: number // Length of one wave cycle in pixels
-  fillColor?: string // Fill color of the wave
-  direction?: WaveDirection // Direction of the wave: 'up' or 'down'
-  movementDirection?: MovementDirection // Direction of the wave movement: 'left' or 'right'
-  animationSpeed?: number // Speed of the wave animation in pixels per second
-}
-
-// Use either provided wave props or defaults
-const props = withDefaults(defineProps<WaveProps>(), {
-  height: 40,
-  amplitude: 14,
-  waveLength: 250,
-  fillColor: 'oklch(95% 0.10 var(--chromatic-hue))',
-  direction: 'down',
-  movementDirection: 'left',
-  animationSpeed: 50,
-})
-
-// Reactive Variables
-const waveHeight = ref(props.height)
-const waveAmplitude = ref(props.amplitude)
-const waveLength = ref(props.waveLength)
-const waveFillColor = ref(props.fillColor)
-const direction = ref<WaveDirection>(props.direction)
-const movementDirection = ref<MovementDirection>(props.movementDirection)
-
-// Function to generate the SVG sine wave path
-function generateSineWavePath(
-  width: number,
-  height: number,
-  amplitude: number,
-  waveLength: number,
-  direction: WaveDirection,
-): string {
-  const points: string[] = []
-
-  // Calculate the number of complete waves to fill the SVG width
-  const numberOfWaves = Math.ceil(width / waveLength)
-
-  // Total width covered by all complete waves
-  const totalWavesWidth = numberOfWaves * waveLength
-
-  // Step size in pixels for generating points (1px for precision)
-  const step = 1
-
-  // Determine base Y position based on direction
-  const baseY = direction === 'up' ? amplitude : height - amplitude
-
-  // Start the path at the base Y position
-  points.push(`M 0 ${baseY}`)
-
-  // Generate points for the sine wave
-  const factor = Math.PI * 2 / waveLength
-  for (let x = 0; x <= totalWavesWidth; x += step) {
-    const deltaY = amplitude * Math.sin(factor * x)
-    const y = direction === 'up' ? baseY - deltaY : baseY + deltaY
-    points.push(`L ${x} ${y}`)
-  }
-
-  // Close the path for filling
-  const closeY = direction === 'up' ? height : 0
-  points.push(`L ${totalWavesWidth} ${closeY}`)
-  points.push(`L 0 ${closeY} Z`)
-
-  return points.join(' ')
-}
-
-const fullHeight = computed(() => waveHeight.value + waveAmplitude.value * 2)
-
-// Using `mask-image` rather than `background-image` here as we cannot directly control SVG's fill color
-const maskImage = computed(() => {
-  const svg = `<svg width="${waveLength.value}" height="${fullHeight.value}" xmlns="http://www.w3.org/2000/svg">
-    <path d="${generateSineWavePath(waveLength.value, fullHeight.value, waveAmplitude.value, waveLength.value, direction.value)}"/>
-  </svg>`
-  return `url(data:image/svg+xml;base64,${btoa(svg)})`
-})
-
-watch(
-  () => [props.height, props.amplitude, props.waveLength, props.fillColor, props.direction, props.movementDirection],
-  () => {
-    waveHeight.value = props.height!
-    waveAmplitude.value = props.amplitude!
-    waveLength.value = props.waveLength!
-    waveFillColor.value = props.fillColor!
-    direction.value = props.direction!
-    movementDirection.value = props.movementDirection!
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <div class="relative">
-    <slot />
-    <div absolute left-0 right-0 top-0 w-full overflow-hidden>
-      <div
-        class="colored-area wave"
-        :style="{
-          'background': waveFillColor,
-          'height': `${fullHeight}px`,
-          maskImage,
-          'WebkitMaskImage': maskImage,
-          '--wave-translate': `${-waveLength}px`,
-          '--animation-duration': `${waveLength / animationSpeed}s`,
-          'animation-direction': movementDirection === 'left' ? 'normal' : 'reverse',
-        }"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-@keyframes wave-animation {
-  from {
-    transform: translate(0);
-  }
-  to {
-    transform: translate(var(--wave-translate, -250px));
-  }
-}
-
-.wave {
-  width: 200vw;
-  mask-repeat: repeat-x;
-  -webkit-mask-repeat: repeat-x;
-  will-change: transform;
-  animation: wave-animation var(--animation-duration, 5s) linear infinite;
-}
-</style>
diff --git a/apps/stage-web/src/components/Backgrounds/default/pattern-cross.vue b/apps/stage-web/src/components/Backgrounds/default/pattern-cross.vue
deleted file mode 100644
index 4e5850598..000000000
--- a/apps/stage-web/src/components/Backgrounds/default/pattern-cross.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div class="cross-background-container">
-    <slot />
-  </div>
-</template>
-
-<style lang="css" scoped>
-/*
-CSS Background Patterns by MagicPattern
-https://www.magicpattern.design/tools/css-backgrounds
-*/
-.cross-background-container {
-  background-color: #ffffff;
-  --cross-color: oklch(0.85 calc(var(--chromatic-chroma) * 0.3) var(--chromatic-hue) / 0.2);
-  background:
-    radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent),
-    radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 25px 25px,
-    linear-gradient(var(--cross-color) 2px, transparent 2px) 0 -1px,
-    linear-gradient(90deg, var(--cross-color) 2px, #ffffff 2px) -1px 0;
-  background-size:
-    50px 50px,
-    50px 50px,
-    25px 25px,
-    25px 25px;
-}
-
-.dark .cross-background-container {
-  background-color: #121212;
-  --cross-color: oklch(0.2 calc(var(--chromatic-chroma) * 0.3) var(--chromatic-hue));
-  background:
-    radial-gradient(circle, transparent 20%, #121212 20%, #121212 80%, transparent 80%, transparent),
-    radial-gradient(circle, transparent 20%, #121212 20%, #121212 80%, transparent 80%, transparent) 25px 25px,
-    linear-gradient(var(--cross-color) 2px, transparent 2px) 0 -1px,
-    linear-gradient(90deg, var(--cross-color) 2px, #121212 2px) -1px 0;
-  background-size:
-    50px 50px,
-    50px 50px,
-    25px 25px,
-    25px 25px;
-}
-</style>
diff --git a/apps/stage-web/src/components/Backgrounds/default/preview.vue b/apps/stage-web/src/components/Backgrounds/default/preview.vue
deleted file mode 100644
index a0f5cca14..000000000
--- a/apps/stage-web/src/components/Backgrounds/default/preview.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { useTheme } from '@proj-airi/ui'
-
-import { PartAnimatedWave, PatternCross } from '.'
-
-const { isDark } = useTheme()
-</script>
-
-<template>
-  <PatternCross>
-    <PartAnimatedWave
-      :fill-color="isDark
-        ? 'oklch(35% calc(var(--chromatic-chroma) * 0.6) var(--chromatic-hue))'
-        : 'color-mix(in srgb, oklch(95% calc(var(--chromatic-chroma-50) * 0.5) var(--chromatic-hue)) 80%, oklch(100% 0 360))'"
-      class="h-full w-full"
-    >
-      <div class="relative h-full w-full from-black/10 via-black/0 to-black/0 bg-gradient-to-b" />
-    </PartAnimatedWave>
-  </PatternCross>
-</template>
diff --git a/apps/stage-web/src/components/Backgrounds/index.ts b/apps/stage-web/src/components/Backgrounds/index.ts
deleted file mode 100644
index 82ec7dcef..000000000
--- a/apps/stage-web/src/components/Backgrounds/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as BackgroundDialogPicker } from './DialogPicker.vue'
-export { default as BackgroundProvider } from './Provider.vue'
diff --git a/apps/stage-web/src/components/Layouts/Header.vue b/apps/stage-web/src/components/Layouts/Header.vue
deleted file mode 100644
index 479ac351c..000000000
--- a/apps/stage-web/src/components/Layouts/Header.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { RouterLink } from 'vue-router'
-
-import HeaderLink from './HeaderLink.vue'
-import ActionAbout from './InteractiveArea/Actions/About.vue'
-</script>
-
-<template>
-  <header mb-1 w-full flex items-center justify-between gap-2>
-    <HeaderLink />
-    <div flex items-center gap-2>
-      <ActionAbout />
-      <RouterLink
-        border="2 solid neutral-100/60 dark:neutral-800/30"
-        bg="neutral-50/70 dark:neutral-800/70"
-        w-fit flex items-center justify-center rounded-xl p-2 backdrop-blur-md
-        title="Settings"
-        to="/settings"
-      >
-        <div i-solar:settings-minimalistic-bold-duotone size-5 text="neutral-500 dark:neutral-400" />
-      </RouterLink>
-    </div>
-  </header>
-</template>
diff --git a/apps/stage-web/src/components/Layouts/HeaderLink.vue b/apps/stage-web/src/components/Layouts/HeaderLink.vue
deleted file mode 100644
index 430695cd1..000000000
--- a/apps/stage-web/src/components/Layouts/HeaderLink.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-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 { isDark: dark } = useTheme()
-</script>
-
-<template>
-  <RouterLink
-    to="/" flex="~" items-center
-    gap-2 px-2 text-nowrap text-2xl outline-none
-  >
-    <template v-if="dark">
-      <img :src="LogoDark" h-8 w-8 class="theme-colored">
-    </template>
-    <template v-else>
-      <img :src="Logo" h-8 w-8 class="theme-colored">
-    </template>
-    <div translate-y="[2px]" font-semibold font-quicksand>
-      <span>AIRI</span>
-    </div>
-  </RouterLink>
-</template>
-
-<style scoped>
-.theme-colored {
-  filter: hue-rotate(calc(var(--chromatic-hue, 0) * 1deg));
-}
-</style>
diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea.vue b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
deleted file mode 100644
index d3d585200..000000000
--- a/apps/stage-web/src/components/Layouts/InteractiveArea.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import type { ChatHistoryItem } from '@proj-airi/stage-ui/types/chat'
-
-import { ChatHistory } from '@proj-airi/stage-ui/components'
-import { useChatStore } from '@proj-airi/stage-ui/stores/chat'
-import { useDeferredMount } from '@proj-airi/ui'
-import { storeToRefs } from 'pinia'
-import { computed, ref } from 'vue'
-
-import ChatActionButtons from '../Widgets/ChatActionButtons.vue'
-import ChatArea from '../Widgets/ChatArea.vue'
-import ChatContainer from '../Widgets/ChatContainer.vue'
-
-const { isReady } = useDeferredMount()
-const { messages, sending, streamingMessage } = storeToRefs(useChatStore())
-
-const isLoading = ref(true)
-const historyMessages = computed(() => messages.value as unknown as ChatHistoryItem[])
-</script>
-
-<template>
-  <div flex="col" items-center pt-4>
-    <div h-full max-h="[85vh]" w-full py="4">
-      <ChatContainer>
-        <div
-          v-if="isLoading"
-          absolute left-0 top-0 h-1 w-full overflow-hidden rounded-t-xl
-          class="bg-primary-500/20"
-        >
-          <div h-full w="1/3" origin-left bg-primary-500 class="animate-scan" />
-        </div>
-        <div w="full" max-h="<md:[60%]" py="<sm:2" flex="~ col" rounded="lg" relative h-full flex-1 overflow-hidden px="2 <md:0" py-4>
-          <ChatHistory
-            v-if="isReady"
-            :messages="historyMessages"
-            :sending="sending"
-            :streaming-message="streamingMessage"
-            h-full
-            variant="desktop"
-            @vue:mounted="isLoading = false"
-          />
-        </div>
-        <ChatArea />
-      </ChatContainer>
-    </div>
-
-    <ChatActionButtons />
-  </div>
-</template>
-
-<style scoped>
-@keyframes scan {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(400%);
-  }
-}
-
-.animate-scan {
-  animation: scan 2s infinite linear;
-}
-</style>
diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/About.vue b/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/About.vue
deleted file mode 100644
index 969828253..000000000
--- a/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/About.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { AboutContent, AboutDialog } from '@proj-airi/stage-ui/components'
-import { useBuildInfo } from '@proj-airi/stage-ui/composables'
-import { ref } from 'vue'
-
-const show = ref(false)
-const buildInfo = useBuildInfo()
-
-const aboutLinks = [
-  { label: 'Home', href: 'https://airi.moeru.ai/docs/', icon: 'i-solar:home-smile-outline' },
-  { label: 'Documentations', href: 'https://airi.moeru.ai/docs/en/docs/overview/', icon: 'i-solar:document-add-outline' },
-  { label: 'GitHub', href: 'https://github.com/moeru-ai/airi', icon: 'i-simple-icons:github' },
-]
-</script>
-
-<template>
-  <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="About" @click="show = !show">
-    <div i-solar:info-circle-outline size-5 text="neutral-500 dark:neutral-400" />
-  </button>
-  <AboutDialog v-model="show">
-    <AboutContent subtitle="Web ver." :build-info="buildInfo" :links="aboutLinks" />
-  </AboutDialog>
-</template>
diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue b/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
deleted file mode 100644
index e3ee30932..000000000
--- a/apps/stage-web/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts" setup>
-import { useSettings } from '@proj-airi/stage-ui/stores/settings'
-import { Button } from '@proj-airi/ui'
-import { storeToRefs } from 'pinia'
-
-const emits = defineEmits<{
-  (e: 'reset'): void
-}>()
-
-const { stageModelRenderer, stageViewControlsEnabled } = storeToRefs(useSettings())
-
-const mode = defineModel<'x' | 'y' | 'z' | 'scale'>({ required: true })
-
-function handleViewControlsToggle(targetMode: 'x' | 'y' | 'z' | 'scale') {
-  if (mode.value === targetMode) {
-    emits('reset')
-    return
-  }
-
-  mode.value = targetMode
-}
-</script>
-
-<template>
-  <div w-full flex flex-1 items-center self-end justify-end gap-2>
-    <Transition name="fade">
-      <div v-if="stageViewControlsEnabled" w-full flex justify-between gap-2>
-        <Button variant="secondary-muted" :toggled="mode === 'x'" w-full @click="handleViewControlsToggle('x')">
-          X
-        </Button>
-        <Button variant="secondary-muted" :toggled="mode === 'y'" w-full @click="handleViewControlsToggle('y')">
-          Y
-        </Button>
-        <Button v-if="stageModelRenderer === 'vrm'" variant="secondary-muted" :toggled="mode === 'z'" w-full @click="handleViewControlsToggle('z')">
-          Z
-        </Button>
-        <Button variant="secondary-muted" :toggled="mode === 'scale'" w-full @click="handleViewControlsToggle('scale')">
-          Scale
-        </Button>
-      </div>
-    </Transition>
-    <button
-      w-fit flex items-center self-end justify-center justify-self-end rounded-xl p-2 backdrop-blur-md
-      border="2 solid neutral-100/60 dark:neutral-800/30"
-      bg="neutral-50/70 dark:neutral-800/70"
-      title="View"
-      text="neutral-500 dark:neutral-400"
-      @click="stageViewControlsEnabled = !stageViewControlsEnabled"
-    >
-      <Transition name="fade" mode="out-in">
-        <div v-if="!stageViewControlsEnabled" i-solar:tuning-outline size-5 />
-        <div v-else i-solar:alt-arrow-right-outline size-5 />
-      </Transition>
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.fade-enter-to,
-.fade-leave-from {
-  opacity: 1;
-}
-</style>
diff --git a/apps/stage-web/src/components/Layouts/MobileHeader.vue b/apps/stage-web/src/components/Layouts/MobileHeader.vue
deleted file mode 100644
index 46b106466..000000000
--- a/apps/stage-web/src/components/Layouts/MobileHeader.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import MobileHeaderLink from './MobileHeaderLink.vue'
-</script>
-
-<template>
-  <header mb-1 w-full gap-2>
-    <div w-full flex justify-center>
-      <MobileHeaderLink />
-    </div>
-  </header>
-</template>
diff --git a/apps/stage-web/src/components/Layouts/MobileHeaderLink.vue b/apps/stage-web/src/components/Layouts/MobileHeaderLink.vue
deleted file mode 100644
index b2776f66c..000000000
--- a/apps/stage-web/src/components/Layouts/MobileHeaderLink.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { useTheme } from '@proj-airi/ui'
-import { storeToRefs } from 'pinia'
-import { RouterLink } from 'vue-router'
-
-import LogoDark from '../../assets/logo-dark.svg'
-import Logo from '../../assets/logo.svg'
-
-import { BackgroundKind, useBackgroundStore } from '../../stores/background'
-
-const { isDark: dark } = useTheme()
-const { selectedOption } = storeToRefs(useBackgroundStore())
-</script>
-
-<template>
-  <RouterLink
-    to="/" flex="~" items-center
-    gap-2 px-2 text-nowrap text-2xl outline-none
-  >
-    <template v-if="selectedOption?.kind === BackgroundKind.Wave">
-      <template v-if="dark">
-        <img :src="LogoDark" h-8 w-8 class="theme-colored">
-      </template>
-      <template v-else>
-        <img :src="Logo" h-8 w-8 class="theme-colored">
-      </template>
-    </template>
-  </RouterLink>
-</template>
-
-<style scoped>
-.theme-colored {
-  filter: hue-rotate(calc(var(--chromatic-hue, 0) * 1deg));
-}
-</style>
diff --git a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue b/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
deleted file mode 100644
index 39ac71ac0..000000000
--- a/apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-<script setup lang="ts">
-import type { ChatHistoryItem } from '@proj-airi/stage-ui/types/chat'
-import type { ChatProvider } from '@xsai-ext/providers/utils'
-
-import { ChatHistory, HearingConfigDialog } from '@proj-airi/stage-ui/components'
-import { useAudioAnalyzer } from '@proj-airi/stage-ui/composables'
-import { useAudioContext } from '@proj-airi/stage-ui/stores/audio'
-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, useTheme } from '@proj-airi/ui'
-import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { RouterLink } from 'vue-router'
-
-import IndicatorMicVolume from '../Widgets/IndicatorMicVolume.vue'
-import ActionAbout from './InteractiveArea/Actions/About.vue'
-import ActionViewControls from './InteractiveArea/Actions/ViewControls.vue'
-import ViewControlInputs from './ViewControls/Inputs.vue'
-
-import { BackgroundDialogPicker } from '../Backgrounds'
-
-const { isDark, toggleDark } = useTheme()
-const hearingDialogOpen = ref(false)
-const chatStore = useChatStore()
-const { messages, sending, streamingMessage } = storeToRefs(chatStore)
-const historyMessages = computed(() => messages.value as unknown as ChatHistoryItem[])
-
-const viewControlsActiveMode = ref<'x' | 'y' | 'z' | 'scale'>('scale')
-const viewControlsInputsRef = useTemplateRef<InstanceType<typeof ViewControlInputs>>('viewControlsInputs')
-
-const messageInput = ref('')
-const isComposing = ref(false)
-const backgroundDialogOpen = ref(false)
-
-const screenSafeArea = useScreenSafeArea()
-const providersStore = useProvidersStore()
-const { activeProvider, activeModel } = storeToRefs(useConsciousnessStore())
-
-useResizeObserver(document.documentElement, () => screenSafeArea.update())
-const { themeColorsHueDynamic, stageViewControlsEnabled } = storeToRefs(useSettings())
-const settingsAudioDevice = useSettingsAudioDevice()
-const { enabled, selectedAudioInput, stream, audioInputs } = storeToRefs(settingsAudioDevice)
-const { send, onAfterMessageComposed, discoverToolsCompatibility, cleanupMessages } = chatStore
-const { t } = useI18n()
-const { audioContext } = useAudioContext()
-const { startAnalyzer, stopAnalyzer, volumeLevel } = useAudioAnalyzer()
-let analyzerSource: MediaStreamAudioSourceNode | undefined
-
-function isMobileDevice() {
-  return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
-}
-
-async function handleSubmit() {
-  if (!isMobileDevice()) {
-    await handleSend()
-  }
-}
-
-async function handleSend() {
-  if (!messageInput.value.trim() || isComposing.value) {
-    return
-  }
-
-  const textToSend = messageInput.value
-  messageInput.value = ''
-
-  try {
-    const providerConfig = providersStore.getProviderConfig(activeProvider.value)
-
-    await send(textToSend, {
-      chatProvider: await providersStore.getProviderInstance(activeProvider.value) as ChatProvider,
-      model: activeModel.value,
-      providerConfig,
-    })
-  }
-  catch (error) {
-    messageInput.value = textToSend
-    messages.value.pop()
-    messages.value.push({
-      role: 'error',
-      content: (error as Error).message,
-    })
-  }
-}
-
-function teardownAnalyzer() {
-  try {
-    analyzerSource?.disconnect()
-  }
-  catch {}
-  analyzerSource = undefined
-  stopAnalyzer()
-}
-
-async function setupAnalyzer() {
-  teardownAnalyzer()
-  if (!hearingDialogOpen.value || !enabled.value || !stream.value)
-    return
-  if (audioContext.state === 'suspended')
-    await audioContext.resume()
-  const analyser = startAnalyzer(audioContext)
-  if (!analyser)
-    return
-  analyzerSource = audioContext.createMediaStreamSource(stream.value)
-  analyzerSource.connect(analyser)
-}
-
-watch([hearingDialogOpen, enabled, stream], () => {
-  setupAnalyzer()
-}, { immediate: true })
-
-watch(hearingDialogOpen, (value) => {
-  if (value) {
-    settingsAudioDevice.askPermission()
-  }
-})
-
-onAfterMessageComposed(async () => {
-})
-
-watch([activeProvider, activeModel], async () => {
-  if (activeProvider.value && activeModel.value) {
-    await discoverToolsCompatibility(activeModel.value, await providersStore.getProviderInstance<ChatProvider>(activeProvider.value), [])
-  }
-})
-
-onUnmounted(() => {
-  teardownAnalyzer()
-})
-
-onMounted(() => {
-  screenSafeArea.update()
-})
-</script>
-
-<template>
-  <div fixed bottom-0 w-full flex flex-col>
-    <BackgroundDialogPicker v-model="backgroundDialogOpen" />
-    <KeepAlive>
-      <Transition name="fade">
-        <ChatHistory
-          v-if="!stageViewControlsEnabled"
-          variant="mobile"
-          :messages="historyMessages"
-          :sending="sending"
-          :streaming-message="streamingMessage"
-          max-w="[calc(100%-3.5rem)]"
-          w-full self-start pb-3 pl-3
-          class="chat-history"
-          :class="[
-            'relative z-20',
-          ]"
-        />
-      </Transition>
-    </KeepAlive>
-    <div relative w-full self-end>
-      <div top="50%" translate-y="[-50%]" fixed z-15 px-3>
-        <ViewControlInputs ref="viewControlsInputs" :mode="viewControlsActiveMode" />
-      </div>
-      <div translate-y="[-100%]" absolute right-0 w-full px-3 pb-3 font-sans>
-        <div flex="~ col" w-full gap-1>
-          <ActionAbout />
-          <HearingConfigDialog
-            v-model:show="hearingDialogOpen"
-            v-model:enabled="enabled"
-            v-model:selected-audio-input="selectedAudioInput"
-            :audio-inputs="audioInputs"
-            :volume-level="volumeLevel"
-            :granted="true"
-          >
-            <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="Hearing"
-            >
-              <Transition name="fade" mode="out-in">
-                <IndicatorMicVolume v-if="enabled" size-5 color-class="text-neutral-500 dark:text-neutral-400" />
-                <div v-else i-solar:microphone-3-outline size-5 text="neutral-500 dark:neutral-400" />
-              </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="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" />
-            </Transition>
-          </button>
-          <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="Background" @click="backgroundDialogOpen = true">
-            <div i-solar:gallery-wide-bold-duotone size-5 text="neutral-500 dark:neutral-400" />
-          </button>
-          <!-- <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="Language">
-            <div i-solar:earth-outline size-5 text="neutral-500 dark:neutral-400" />
-          </button> -->
-          <RouterLink to="/settings" 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="Settings">
-            <div i-solar:settings-outline size-5 text="neutral-500 dark:neutral-400" />
-          </RouterLink>
-          <!-- <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="Model">
-            <div i-solar:face-scan-circle-outline size-5 text="neutral-500 dark:neutral-400" />
-          </button> -->
-          <ActionViewControls v-model="viewControlsActiveMode" @reset="() => viewControlsInputsRef?.resetOnMode()" />
-          <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="Cleanup Messages"
-            @click="cleanupMessages()"
-          >
-            <div class="i-solar:trash-bin-2-bold-duotone" />
-          </button>
-        </div>
-      </div>
-      <div bg="white dark:neutral-800" max-h-100dvh max-w-100dvw w-full flex gap-1 overflow-auto px-3 pt-2 :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 12)}px` }">
-        <BasicTextarea
-          v-model="messageInput"
-          :placeholder="t('stage.message')"
-          border="solid 2 neutral-200/60 dark:neutral-700/60"
-          text="neutral-500 hover:neutral-600 dark:neutral-100 dark:hover:neutral-200 placeholder:neutral-400 placeholder:hover:neutral-500 placeholder:dark:neutral-300 placeholder:dark:hover:neutral-400"
-          bg="neutral-100/80 dark:neutral-950/80"
-          max-h="[10lh]" min-h="[calc(1lh+4px+4px)]"
-          w-full resize-none overflow-y-scroll rounded="[1lh]" px-4 py-0.5 outline-none backdrop-blur-md scrollbar-none
-          transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
-          :class="[themeColorsHueDynamic ? 'transition-colors-none placeholder:transition-colors-none' : '']"
-          default-height="1lh"
-          @submit="handleSubmit"
-          @compositionstart="isComposing = true"
-          @compositionend="isComposing = false"
-        />
-        <button
-          v-if="messageInput.trim() || isComposing"
-          w="[calc(1lh+4px+4px)]" h="[calc(1lh+4px+4px)]" aspect-square flex items-center self-end justify-center rounded-full outline-none backdrop-blur-md
-          text="neutral-500 hover:neutral-600 dark:neutral-900 dark:hover:neutral-800"
-          bg="primary-50/80 dark:neutral-100/80 hover:neutral-50"
-          transition="all duration-250 ease-in-out"
-          @click="handleSend"
-        >
-          <div i-solar:arrow-up-outline />
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-@keyframes scan {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(400%);
-  }
-}
-
-.animate-scan {
-  animation: scan 2s infinite linear;
-}
-
-/*
-DO NOT ATTEMPT TO USE backdrop-filter TOGETHER WITH mask-image.
-
-html - Why doesn't blur backdrop-filter work together with mask-image? - Stack Overflow
-https://stackoverflow.com/questions/72780266/why-doesnt-blur-backdrop-filter-work-together-with-mask-image
-*/
-.chat-history {
-  --gradient: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%);
-  -webkit-mask-image: var(--gradient);
-  mask-image: var(--gradient);
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-position: bottom;
-  mask-position: bottom;
-  max-height: 35dvh;
-}
-</style>
diff --git a/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue b/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue
deleted file mode 100644
index bb7a5e7ff..000000000
--- a/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<script setup lang="ts">
-import { useModelStore } from '@proj-airi/stage-ui-three'
-import { useLive2d } from '@proj-airi/stage-ui/stores/live2d'
-import { useSettings } from '@proj-airi/stage-ui/stores/settings'
-import { RoundRange } from '@proj-airi/ui'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  mode: 'x' | 'y' | 'z' | 'scale'
-}>()
-
-const { stageModelRenderer, stageViewControlsEnabled } = storeToRefs(useSettings())
-const { scale: vrmScale, modelOffset: vrmPosition, modelSize: vrmModelSize } = storeToRefs(useModelStore())
-const { scale: live2dScale, position: live2dPosition } = storeToRefs(useLive2d())
-
-const viewControlsValueX = computed({
-  get: () => {
-    switch (stageModelRenderer.value) {
-      case 'live2d':
-        return live2dPosition.value.x
-      case 'vrm':
-        return vrmPosition.value.x
-      default:
-        return 0
-    }
-  },
-  set: (value) => {
-    switch (stageModelRenderer.value) {
-      case 'live2d':
-        live2dPosition.value.x = value
-        break
-      case 'vrm':
-        vrmPosition.value.x = value
-        break
-      default:
-        break
-    }
-  },
-})
-
-const viewControlsValueXMin = computed(() => {
-  return stageModelRenderer.value === 'live2d' ? -500 : -vrmModelSize.value.x - 10
-})
-
-const viewControlsValueXMax = computed(() => {
-  return stageModelRenderer.value === 'vrm' ? 500 : vrmModelSize.value.x + 10
-})
-
-const viewControlsValueY = computed({
-  get: () => {
-    switch (stageModelRenderer.value) {
-      case 'live2d':
-        return live2dPosition.value.y
-      case 'vrm':
-        return vrmPosition.value.y
-      default:
-        return 0
-    }
-  },
-  set: (value) => {
-    switch (stageModelRenderer.value) {
-      case 'live2d':
-        live2dPosition.value.y = value
-        break
-      case 'vrm':
-        vrmPosition.value.y = value
-        break
-      default:
-        break
-    }
-  },
-})
-
-const viewControlsValueYMin = computed(() => {
-  return stageModelRenderer.value === 'live2d' ? -500 : -vrmModelSize.value.y - 10
-})
-
-const viewControlsValueYMax = computed(() => {
-  return stageModelRenderer.value === 'vrm' ? 500 : vrmModelSize.value.y + 10
-})
-
-const viewControlsValueZ = computed({
-  get: () => {
-    switch (stageModelRenderer.value) {
-      case 'live2d':
-        return 0
-      case 'vrm':
-        return vrmPosition.value.z
-      default:
-        return 0
-    }
-  },
-  set: (value) => {
-    switch (stageModelRenderer.value) {
-      case 'live2d':
-        break
-      case 'vrm':
-        vrmPosition.value.z = value
-        break
-      default:
-        break
-    }
-  },
-})
-
-const viewControlsValueZMin = computed(() => {
-  return stageModelRenderer.value === 'live2d' ? -500 : -vrmModelSize.value.z - 10
-})
-
-const viewControlsValueZMax = computed(() => {
-  return stageModelRenderer.value === 'live2d' ? 500 : vrmModelSize.value.z + 10
-})
-
-const viewControlsValueScale = computed({
-  get: () => {
-    if (stageModelRenderer.value === 'live2d') {
-      return live2dScale.value
-    }
-
-    return vrmScale.value
-  },
-  set: (value) => {
-    if (stageModelRenderer.value === 'live2d') {
-      live2dScale.value = value
-    }
-    else {
-      vrmScale.value = value
-    }
-  },
-})
-
-function resetOnMode() {
-  switch (props.mode) {
-    case 'x':
-      viewControlsValueX.value = 0
-      break
-    case 'y':
-      viewControlsValueY.value = 0
-      break
-    case 'z':
-      viewControlsValueZ.value = 0
-      break
-    case 'scale':
-      viewControlsValueScale.value = 1
-      break
-  }
-}
-
-defineExpose({
-  resetOnMode,
-})
-</script>
-
-<template>
-  <Transition name="fade-side-pops-in">
-    <div v-if="stageViewControlsEnabled">
-      <Transition name="fade-side-pops-in" mode="out-in">
-        <div v-if="props.mode === 'x'" relative class="[&_.round-range-tooltip]:hover:opacity-100">
-          <RoundRange v-model="viewControlsValueX" :min="viewControlsValueXMin" :max="viewControlsValueXMax" :step="0.01" data-direction="vertical" h="50%" write-vertical-left />
-          <div class="round-range-tooltip" top="50%" translate-y="[-50%]" absolute left-10 font-mono op-0 transition="all duration-200 ease-in-out">
-            {{ viewControlsValueX.toFixed(2) }}
-          </div>
-        </div>
-        <div v-else-if="props.mode === 'y'" relative class="[&_.round-range-tooltip]:hover:opacity-100">
-          <RoundRange v-model="viewControlsValueY" :min="viewControlsValueYMin" :max="viewControlsValueYMax" :step="0.01" write-vertical-left h="50%" data-direction="vertical" />
-          <div class="round-range-tooltip" top="50%" translate-y="[-50%]" absolute left-10 font-mono op-0 transition="all duration-200 ease-in-out">
-            {{ viewControlsValueY.toFixed(2) }}
-          </div>
-        </div>
-        <div v-else-if="stageModelRenderer === 'vrm' && props.mode === 'z'" relative class="[&_.round-range-tooltip]:hover:opacity-100">
-          <RoundRange v-model="viewControlsValueZ" :min="viewControlsValueZMin" :max="viewControlsValueZMax" :step="0.01" write-vertical-left h="50%" data-direction="vertical" />
-          <div class="round-range-tooltip" top="50%" translate-y="[-50%]" absolute left-10 font-mono op-0 transition="all duration-200 ease-in-out">
-            {{ viewControlsValueZ.toFixed(2) }}
-          </div>
-        </div>
-        <div v-else-if="props.mode === 'scale'" relative class="[&_.round-range-tooltip]:hover:opacity-100">
-          <RoundRange v-model="viewControlsValueScale" :min="0" :max="3" :step="0.0001" write-vertical-left h="50%" data-direction="vertical" />
-          <div class="round-range-tooltip" top="50%" translate-y="[-50%]" absolute left-10 font-mono op-0 transition="all duration-200 ease-in-out">
-            {{ viewControlsValueScale.toFixed(2) }}
-          </div>
-        </div>
-      </Transition>
-    </div>
-  </Transition>
-</template>
-
-<style scoped>
-.fade-side-pops-in-enter-active,
-.fade-side-pops-in-leave-active {
-  transition: all 0.2s ease-in-out;
-}
-
-.fade-side-pops-in-enter-from,
-.fade-side-pops-in-leave-to {
-  opacity: 0;
-  transform: translateX(-100%) scale(0.8);
-}
-
-.fade-side-pops-in-enter-to,
-.fade-side-pops-in-leave-from {
-  opacity: 1;
-  transform: translateX(0) scale(1);
-}
-</style>
diff --git a/apps/stage-web/src/components/Widgets/ChatActionButtons.vue b/apps/stage-web/src/components/Widgets/ChatActionButtons.vue
deleted file mode 100644
index b35962681..000000000
--- a/apps/stage-web/src/components/Widgets/ChatActionButtons.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { useChatStore } from '@proj-airi/stage-ui/stores/chat'
-import { useTheme } from '@proj-airi/ui'
-import { ref } from 'vue'
-
-import { BackgroundDialogPicker } from '../Backgrounds'
-
-const { cleanupMessages } = useChatStore()
-const { isDark, toggleDark } = useTheme()
-
-const backgroundDialogOpen = ref(false)
-</script>
-
-<template>
-  <BackgroundDialogPicker v-model="backgroundDialogOpen" />
-  <div absolute bottom--8 right-0 flex gap-2>
-    <button
-      class="max-h-[10lh] min-h-[1lh]"
-      bg="neutral-100 dark:neutral-800"
-      text="lg neutral-500 dark:neutral-400"
-      hover:text="red-500 dark:red-400"
-      flex items-center justify-center rounded-md p-2 outline-none
-      transition-colors transition-transform active:scale-95
-      @click="cleanupMessages()"
-    >
-      <div class="i-solar:trash-bin-2-bold-duotone" />
-    </button>
-
-    <button
-      class="max-h-[10lh] min-h-[1lh]"
-      bg="neutral-100 dark:neutral-800"
-      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="() => toggleDark()"
-    >
-      <Transition name="fade" mode="out-in">
-        <div v-if="isDark" i-solar:moon-bold />
-        <div v-else i-solar:sun-2-bold />
-      </Transition>
-    </button>
-    <button
-      class="max-h-[10lh] min-h-[1lh]"
-      bg="neutral-100 dark:neutral-800"
-      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
-      title="Background"
-      @click="backgroundDialogOpen = true"
-    >
-      <div i-solar:gallery-wide-bold-duotone />
-    </button>
-  </div>
-</template>
diff --git a/apps/stage-web/src/components/Widgets/ChatArea.vue b/apps/stage-web/src/components/Widgets/ChatArea.vue
deleted file mode 100644
index d0970f674..000000000
--- a/apps/stage-web/src/components/Widgets/ChatArea.vue
+++ /dev/null
@@ -1,210 +0,0 @@
-<script setup lang="ts">
-import type { ChatProvider } from '@xsai-ext/providers/utils'
-
-import { useAudioAnalyzer } from '@proj-airi/stage-ui/composables'
-import { useAudioContext } from '@proj-airi/stage-ui/stores/audio'
-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 { storeToRefs } from 'pinia'
-import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
-import { computed, onUnmounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import IndicatorMicVolume from './IndicatorMicVolume.vue'
-
-const messageInput = ref('')
-const hearingTooltipOpen = ref(false)
-const isComposing = ref(false)
-
-const providersStore = useProvidersStore()
-const { activeProvider, activeModel } = storeToRefs(useConsciousnessStore())
-const { themeColorsHueDynamic } = storeToRefs(useSettings())
-
-const { askPermission } = useSettingsAudioDevice()
-const { enabled, selectedAudioInput, stream, audioInputs } = storeToRefs(useSettingsAudioDevice())
-const chatStore = useChatStore()
-const { send, onAfterMessageComposed, discoverToolsCompatibility } = chatStore
-const { messages } = storeToRefs(useChatStore())
-const { audioContext } = useAudioContext()
-const { t } = useI18n()
-
-async function handleSend() {
-  if (!messageInput.value.trim() || isComposing.value) {
-    return
-  }
-
-  const textToSend = messageInput.value
-  messageInput.value = ''
-
-  try {
-    const providerConfig = providersStore.getProviderConfig(activeProvider.value)
-
-    await send(textToSend, {
-      chatProvider: await providersStore.getProviderInstance(activeProvider.value) as ChatProvider,
-      model: activeModel.value,
-      providerConfig,
-    })
-  }
-  catch (error) {
-    messageInput.value = textToSend
-    messages.value.pop()
-    messages.value.push({
-      role: 'error',
-      content: (error as Error).message,
-    })
-  }
-}
-
-watch(hearingTooltipOpen, async (value) => {
-  if (value) {
-    await askPermission()
-  }
-})
-
-watch([activeProvider, activeModel], async () => {
-  if (activeProvider.value && activeModel.value) {
-    await discoverToolsCompatibility(activeModel.value, await providersStore.getProviderInstance<ChatProvider>(activeProvider.value), [])
-  }
-})
-
-onAfterMessageComposed(async () => {
-})
-
-const { startAnalyzer, stopAnalyzer, volumeLevel } = useAudioAnalyzer()
-const normalizedVolume = computed(() => Math.min(1, Math.max(0, (volumeLevel.value ?? 0) / 100)))
-let analyzerSource: MediaStreamAudioSourceNode | undefined
-
-function teardownAnalyzer() {
-  try {
-    analyzerSource?.disconnect()
-  }
-  catch {}
-  analyzerSource = undefined
-  stopAnalyzer()
-}
-
-async function setupAnalyzer() {
-  teardownAnalyzer()
-  if (!hearingTooltipOpen.value || !enabled.value || !stream.value)
-    return
-  if (audioContext.state === 'suspended')
-    await audioContext.resume()
-  const analyser = startAnalyzer(audioContext)
-  if (!analyser)
-    return
-  analyzerSource = audioContext.createMediaStreamSource(stream.value)
-  analyzerSource.connect(analyser)
-}
-
-watch([hearingTooltipOpen, enabled, stream], () => {
-  setupAnalyzer()
-}, { immediate: true })
-
-onUnmounted(() => {
-  teardownAnalyzer()
-})
-</script>
-
-<template>
-  <div h="<md:full" flex gap-2 class="ph-no-capture">
-    <div
-      :class="[
-        'relative',
-        'w-full',
-        'bg-primary-200/20 dark:bg-primary-400/20',
-      ]"
-    >
-      <BasicTextarea
-        v-model="messageInput"
-        :placeholder="t('stage.message')"
-        text="primary-600 dark:primary-100  placeholder:primary-500 dark:placeholder:primary-200"
-        bg="transparent"
-        min-h="[100px]" max-h="[300px]" w-full
-        rounded-t-xl p-4 font-medium
-        outline-none transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
-        :class="{
-          'transition-colors-none placeholder:transition-colors-none': themeColorsHueDynamic,
-        }"
-        @submit="handleSend"
-        @compositionstart="isComposing = true"
-        @compositionend="isComposing = false"
-      />
-
-      <div>
-        <TooltipProvider :delay-duration="0" :skip-delay-duration="0">
-          <TooltipRoot v-model:open="hearingTooltipOpen">
-            <TooltipTrigger as-child>
-              <button
-                class="max-h-[10lh] min-h-[1lh]"
-                text="lg neutral-500 dark:neutral-400"
-                flex items-center justify-center rounded-md p-2 outline-none
-                transition="colors duration-200, transform duration-100" active:scale-95
-                :title="t('settings.hearing.title')"
-              >
-                <Transition name="fade" mode="out-in">
-                  <IndicatorMicVolume v-if="enabled" />
-                  <div v-else class="i-ph:microphone-slash" />
-                </Transition>
-              </button>
-            </TooltipTrigger>
-            <Transition name="fade">
-              <TooltipContent
-                side="top"
-                :side-offset="8"
-                :class="[
-                  'w-72 max-w-[18rem] rounded-xl border border-neutral-200/60 bg-neutral-50/90 p-4',
-                  'shadow-lg backdrop-blur-md dark:border-neutral-800/30 dark:bg-neutral-900/80',
-                  'flex flex-col gap-3',
-                ]"
-              >
-                <div class="flex flex-col items-center justify-center">
-                  <div class="relative h-28 w-28 select-none">
-                    <div
-                      class="absolute left-1/2 top-1/2 h-20 w-20 rounded-full transition-all duration-150 -translate-x-1/2 -translate-y-1/2"
-                      :style="{ transform: `translate(-50%, -50%) scale(${1 + normalizedVolume * 0.35})`, opacity: String(0.25 + normalizedVolume * 0.25) }"
-                      :class="enabled ? 'bg-primary-500/15 dark:bg-primary-600/20' : 'bg-neutral-300/20 dark:bg-neutral-700/20'"
-                    />
-                    <div
-                      class="absolute left-1/2 top-1/2 h-24 w-24 rounded-full transition-all duration-200 -translate-x-1/2 -translate-y-1/2"
-                      :style="{ transform: `translate(-50%, -50%) scale(${1.2 + normalizedVolume * 0.55})`, opacity: String(0.15 + normalizedVolume * 0.2) }"
-                      :class="enabled ? 'bg-primary-500/10 dark:bg-primary-600/15' : 'bg-neutral-300/10 dark:bg-neutral-700/10'"
-                    />
-                    <div
-                      class="absolute left-1/2 top-1/2 h-28 w-28 rounded-full transition-all duration-300 -translate-x-1/2 -translate-y-1/2"
-                      :style="{ transform: `translate(-50%, -50%) scale(${1.5 + normalizedVolume * 0.8})`, opacity: String(0.08 + normalizedVolume * 0.15) }"
-                      :class="enabled ? 'bg-primary-500/5 dark:bg-primary-600/10' : 'bg-neutral-300/5 dark:bg-neutral-700/5'"
-                    />
-                    <button
-                      class="absolute left-1/2 top-1/2 grid h-16 w-16 place-items-center rounded-full shadow-md outline-none transition-all duration-200 -translate-x-1/2 -translate-y-1/2"
-                      :class="enabled
-                        ? 'bg-primary-500 text-white hover:bg-primary-600 active:scale-95'
-                        : 'bg-neutral-200 text-neutral-600 hover:bg-neutral-300 active:scale-95 dark:bg-neutral-700 dark:text-neutral-200'"
-                      @click="enabled = !enabled"
-                    >
-                      <div :class="enabled ? 'i-ph:microphone' : 'i-ph:microphone-slash'" class="h-6 w-6" />
-                    </button>
-                  </div>
-                  <p class="mt-3 text-xs text-neutral-500 dark:text-neutral-400">
-                    {{ enabled ? 'Microphone enabled' : 'Microphone disabled' }}
-                  </p>
-                </div>
-
-                <FieldSelect
-                  v-model="selectedAudioInput"
-                  label="Input device"
-                  description="Select the microphone you want to use."
-                  :options="audioInputs.map(device => ({ label: device.label || 'Unknown Device', value: device.deviceId }))"
-                  layout="vertical"
-                  placeholder="Select microphone"
-                />
-              </TooltipContent>
-            </Transition>
-          </TooltipRoot>
-        </TooltipProvider>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/apps/stage-web/src/components/Widgets/ChatContainer.vue b/apps/stage-web/src/components/Widgets/ChatContainer.vue
deleted file mode 100644
index a89207d67..000000000
--- a/apps/stage-web/src/components/Widgets/ChatContainer.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div
-    flex="~ col"
-    border="solid 4 primary-200/20 dark:primary-400/20"
-    h-full w-full rounded-xl
-    bg="primary-50/50 dark:primary-950/70" backdrop-blur-md
-  >
-    <slot />
-  </div>
-</template>
diff --git a/apps/stage-web/src/components/Widgets/IndicatorMicVolume.vue b/apps/stage-web/src/components/Widgets/IndicatorMicVolume.vue
deleted file mode 100644
index 7fff11675..000000000
--- a/apps/stage-web/src/components/Widgets/IndicatorMicVolume.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import { useAudioAnalyzer } from '@proj-airi/stage-ui/composables'
-import { useAudioContext } from '@proj-airi/stage-ui/stores/audio'
-import { useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { storeToRefs } from 'pinia'
-import { computed, onMounted, onUnmounted, watch } from 'vue'
-
-const props = withDefaults(defineProps<{ colorClass?: string }>(), { colorClass: 'text-primary-500 dark:text-primary-200' })
-const settingsAudio = useSettingsAudioDevice()
-const { stream, enabled } = storeToRefs(settingsAudio)
-
-const { audioContext } = storeToRefs(useAudioContext())
-const { startAnalyzer, stopAnalyzer, volumeLevel } = useAudioAnalyzer()
-
-let source: MediaStreamAudioSourceNode | undefined
-
-const normalized = computed(() => Math.min(1, (volumeLevel.value ?? 0) / 100))
-
-function teardown() {
-  try {
-    source?.disconnect()
-  }
-  catch {
-    // ignore
-  }
-
-  source = undefined
-  stopAnalyzer()
-}
-
-async function setup() {
-  teardown()
-  if (!enabled.value || !stream.value)
-    return
-
-  const ctx = audioContext.value
-  if (ctx.state === 'suspended')
-    await ctx.resume()
-  const analyser = startAnalyzer(ctx)
-  if (!analyser)
-    return
-  source = ctx.createMediaStreamSource(stream.value)
-  source.connect(analyser)
-}
-
-onMounted(() => {
-  watch([enabled, stream], () => setup(), { immediate: true })
-})
-
-onUnmounted(() => teardown())
-</script>
-
-<template>
-  <div :class="['flex items-center justify-center', props.colorClass]">
-    <svg width="24" height="24" viewBox="0 0 256 256" aria-hidden="true">
-      <defs>
-        <linearGradient id="micLevel" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%" stop-color="currentColor" stop-opacity="0" />
-          <stop :offset="`${100 - Math.round(normalized * 100)}%`" stop-color="currentColor" stop-opacity="0" />
-          <stop :offset="`${100 - Math.round(normalized * 100)}%`" stop-color="currentColor" stop-opacity="0.95" />
-          <stop offset="100%" stop-color="currentColor" stop-opacity="0.95" />
-        </linearGradient>
-      </defs>
-      <path
-        fill="url(#micLevel)"
-        d="M128 176a48.05 48.05 0 0 0 48-48V64a48 48 0 0 0-96 0v64a48.05 48.05 0 0 0 48 48M96 64a32 32 0 0 1 64 0v64a32 32 0 0 1-64 0Zm40 143.6V240a8 8 0 0 1-16 0v-32.4A80.11 80.11 0 0 1 48 128a8 8 0 0 1 16 0a64 64 0 0 0 128 0a8 8 0 0 1 16 0a80.11 80.11 0 0 1-72 79.6"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-opacity="1"
-        stroke-width="2"
-        d="M128 176a48.05 48.05 0 0 0 48-48V64a48 48 0 0 0-96 0v64a48.05 48.05 0 0 0 48 48M96 64a32 32 0 0 1 64 0v64a32 32 0 0 1-64 0Zm40 143.6V240a8 8 0 0 1-16 0v-32.4A80.11 80.11 0 0 1 48 128a8 8 0 0 1 16 0a64 64 0 0 0 128 0a8 8 0 0 1 16 0a80.11 80.11 0 0 1-72 79.6"
-      />
-    </svg>
-  </div>
-</template>
diff --git a/apps/stage-web/src/composables/theme-color.ts b/apps/stage-web/src/composables/theme-color.ts
deleted file mode 100644
index 18db8f6bf..000000000
--- a/apps/stage-web/src/composables/theme-color.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import type { Ref } from 'vue'
-
-import type { BackgroundProvider } from '../components/Backgrounds'
-import type { BackgroundItem } from '../stores/background'
-
-import Color from 'colorjs.io'
-
-import { withRetry } from '@moeru/std'
-import { colorFromElement, patchThemeSamplingHtml2CanvasClone } from '@proj-airi/stage-ui/libs'
-import { useSettings } from '@proj-airi/stage-ui/stores/settings'
-import { useTheme } from '@proj-airi/ui'
-import { useDocumentVisibility, useIntervalFn } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { nextTick, watch } from 'vue'
-
-import { BackgroundKind } from '../stores/background'
-
-export function themeColorFromPropertyOf(colorFromClass: string, property: string): () => Promise<string> {
-  return async () => {
-    const fetchUntilWidgetMounted = withRetry(() => {
-      const widgets = document.querySelector(colorFromClass) as HTMLDivElement | undefined
-      if (!widgets)
-        throw new Error('Widgets element not found')
-
-      return widgets
-    }, { retry: 10, retryDelay: 1000 })
-
-    const widgets = await fetchUntilWidgetMounted()
-    return window.getComputedStyle(widgets).getPropertyValue(property)
-  }
-}
-
-export function themeColorFromValue(value: string | { light: string, dark: string }): () => Promise<string> {
-  return async () => {
-    if (typeof value === 'string') {
-      return value
-    }
-    else {
-      const { isDark: dark } = useTheme()
-      return dark.value ? value.dark : value.light
-    }
-  }
-}
-
-export function useThemeColor(colorFrom: () => string | Promise<string>) {
-  async function updateThemeColor() {
-    if (!('document' in globalThis) || globalThis.document == null)
-      return
-    if (!('window' in globalThis) || globalThis.window == null)
-      return
-
-    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', new Color(await colorFrom()).to('srgb').toString({ format: 'hex' }))
-  }
-
-  return {
-    updateThemeColor,
-  }
-}
-
-export function useBackgroundThemeColor({
-  backgroundSurface,
-  selectedOption,
-  sampledColor,
-}: {
-  backgroundSurface: Ref<InstanceType<typeof BackgroundProvider> | undefined | null>
-  selectedOption: Ref<BackgroundItem | undefined>
-  sampledColor: Ref<string>
-}) {
-  const visibility = useDocumentVisibility()
-  const { themeColorsHueDynamic } = storeToRefs(useSettings())
-
-  let samplingToken = 0
-
-  const { isDark } = useTheme()
-  const waveThemeColor = themeColorFromPropertyOf('.widgets.top-widgets .colored-area', 'background-color')
-
-  const { updateThemeColor } = useThemeColor(() => {
-    if (selectedOption.value?.kind === BackgroundKind.Wave) {
-      return waveThemeColor()
-    }
-
-    return sampledColor.value
-  })
-
-  // Keep theme-color reasonably fresh for animated wave backgrounds without doing per-frame work.
-  const { pause, resume } = useIntervalFn(() => {
-    if (visibility.value !== 'visible')
-      return
-    if (selectedOption.value?.kind === BackgroundKind.Wave && themeColorsHueDynamic)
-      void updateThemeColor()
-  }, 250, { immediate: false })
-
-  watch([() => selectedOption.value?.kind, () => themeColorsHueDynamic], ([kind, dynamic]) => {
-    if (kind === BackgroundKind.Wave && dynamic) {
-      void updateThemeColor()
-      resume()
-    }
-    else {
-      pause()
-    }
-  }, { immediate: true })
-
-  async function waitForBackgroundReady() {
-    await nextTick()
-    const image = backgroundSurface.value?.surfaceEl?.querySelector('img')
-    if (image && !image.complete) {
-      await new Promise<void>((resolve, reject) => {
-        image.addEventListener('load', () => resolve(), { once: true })
-        image.addEventListener('error', () => reject(new Error('Background image failed to load')), { once: true })
-      })
-    }
-  }
-
-  // Exposed for optional manual triggers; also used within syncBackgroundTheme.
-  async function sampleBackgroundColor() {
-    const token = ++samplingToken
-    const optionId = selectedOption.value?.id
-    if (selectedOption.value?.kind === BackgroundKind.Wave) {
-      await updateThemeColor()
-      return
-    }
-
-    const el = backgroundSurface.value?.surfaceEl
-    if (!el)
-      return
-
-    await waitForBackgroundReady()
-
-    const result = await colorFromElement(el, {
-      mode: 'html2canvas',
-      html2canvas: {
-        region: {
-          x: 0,
-          y: 0,
-          width: el.offsetWidth,
-          height: Math.min(140, el.offsetHeight),
-        },
-        sampleHeight: 20,
-        sampleStride: 10,
-        scale: 0.5,
-        backgroundColor: null,
-        allowTaint: true,
-        useCORS: true,
-        onclone: patchThemeSamplingHtml2CanvasClone,
-      },
-    })
-
-    const color = result.html2canvas?.average
-    if (token !== samplingToken)
-      return
-    if (optionId && selectedOption.value?.id !== optionId)
-      return
-
-    if (color) {
-      sampledColor.value = color
-    }
-  }
-
-  async function syncBackgroundTheme() {
-    if (selectedOption.value?.kind === BackgroundKind.Wave) {
-      await updateThemeColor()
-    }
-    else if (sampledColor.value) {
-      await updateThemeColor()
-    }
-    else {
-      await sampleBackgroundColor()
-    }
-  }
-
-  watch([selectedOption], () => {
-    syncBackgroundTheme()
-  }, { immediate: true })
-
-  watch(sampledColor, () => {
-    syncBackgroundTheme()
-  })
-
-  watch(() => backgroundSurface.value?.surfaceEl, (el) => {
-    if (el)
-      syncBackgroundTheme()
-  })
-
-  watch(isDark, () => {
-    syncBackgroundTheme()
-  })
-
-  return {
-    sampledColor,
-    sampleBackgroundColor,
-    syncBackgroundTheme,
-  }
-}
diff --git a/apps/stage-web/src/layouts/default.vue b/apps/stage-web/src/layouts/default.vue
deleted file mode 100644
index e917d47bc..000000000
--- a/apps/stage-web/src/layouts/default.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-
-import HeaderLink from '../components/Layouts/HeaderLink.vue'
-</script>
-
-<template>
-  <div
-    :style="{
-      paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-      paddingTop: 'env(safe-area-inset-top, 0px)',
-      paddingRight: 'env(safe-area-inset-right, 0px)',
-      paddingLeft: 'env(safe-area-inset-left, 0px)',
-    }"
-    h-full
-  >
-    <!-- Header -->
-    <div
-      class="px-0 py-1 md:px-3 md:py-3"
-      w-full gap-2
-      bg="$bg-color"
-    >
-      <HeaderLink />
-    </div>
-    <!-- Content -->
-    <div class="px-3 py-2 md:px-5 md:py-5" flex="~ col" h="[calc(100%-56px)]">
-      <RouterView />
-    </div>
-  </div>
-</template>
diff --git a/apps/stage-web/src/layouts/home.vue b/apps/stage-web/src/layouts/home.vue
deleted file mode 100644
index 2b34eac02..000000000
--- a/apps/stage-web/src/layouts/home.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-</script>
-
-<template>
-  <div
-    :style="{
-      paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-      paddingTop: 'env(safe-area-inset-top, 0px)',
-      paddingRight: 'env(safe-area-inset-right, 0px)',
-      paddingLeft: 'env(safe-area-inset-left, 0px)',
-    }"
-    h-full
-  >
-    <!-- Content -->
-    <div class="px-3 py-2 md:px-5 md:py-5" flex="~ col" h-full>
-      <RouterView />
-    </div>
-  </div>
-</template>
diff --git a/apps/stage-web/src/layouts/plain.vue b/apps/stage-web/src/layouts/plain.vue
deleted file mode 100644
index 7c2aa3f3e..000000000
--- a/apps/stage-web/src/layouts/plain.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <RouterView />
-</template>
diff --git a/apps/stage-web/src/layouts/stage.vue b/apps/stage-web/src/layouts/stage.vue
deleted file mode 100644
index cd46f3ce6..000000000
--- a/apps/stage-web/src/layouts/stage.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { RouterView } from 'vue-router'
-</script>
-
-<template>
-  <main text="gray-700 dark:gray-200" h-full font-cute>
-    <RouterView />
-  </main>
-</template>
diff --git a/apps/stage-web/src/pages/devtools/background-gradient-blending.vue b/apps/stage-web/src/pages/devtools/background-gradient-blending.vue
index d004edf0a..dbe37f6e8 100644
--- a/apps/stage-web/src/pages/devtools/background-gradient-blending.vue
+++ b/apps/stage-web/src/pages/devtools/background-gradient-blending.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
+import { useThemeColor } from '@proj-airi/stage-layouts/composables/theme-color'
 import { colorFromElement } from '@proj-airi/stage-ui/libs'
 import { BasicInputFile } from '@proj-airi/ui'
 import { computed, nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 
 import defaultBackgroundImage from '../../assets/backgrounds/fairy-forest.e17cbc2774.ko-fi.com.avif'
-
-import { useThemeColor } from '../../composables/theme-color'
 // Reactive state
 const isCapturing = ref(false)
 const extractedColors = ref<string[]>([])
diff --git a/apps/stage-web/src/pages/index.vue b/apps/stage-web/src/pages/index.vue
index 3bb504c09..66c2668d1 100644
--- a/apps/stage-web/src/pages/index.vue
+++ b/apps/stage-web/src/pages/index.vue
@@ -1,8 +1,15 @@
 <script setup lang="ts">
 import type { ChatProvider } from '@xsai-ext/providers/utils'
 
+import Header from '@proj-airi/stage-layouts/components/Layouts/Header.vue'
+import InteractiveArea from '@proj-airi/stage-layouts/components/Layouts/InteractiveArea.vue'
+import MobileHeader from '@proj-airi/stage-layouts/components/Layouts/MobileHeader.vue'
+import MobileInteractiveArea from '@proj-airi/stage-layouts/components/Layouts/MobileInteractiveArea.vue'
 import workletUrl from '@proj-airi/stage-ui/workers/vad/process.worklet?worker&url'
 
+import { BackgroundProvider } from '@proj-airi/stage-layouts/components/Backgrounds'
+import { useBackgroundThemeColor } from '@proj-airi/stage-layouts/composables/theme-color'
+import { useBackgroundStore } from '@proj-airi/stage-layouts/stores/background'
 import { WidgetStage } from '@proj-airi/stage-ui/components/scenes'
 import { useAudioRecorder } from '@proj-airi/stage-ui/composables/audio/audio-recorder'
 import { useVAD } from '@proj-airi/stage-ui/stores/ai/models/vad'
@@ -16,15 +23,6 @@ import { breakpointsTailwind, useBreakpoints, useMouse } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 
-import Header from '../components/Layouts/Header.vue'
-import InteractiveArea from '../components/Layouts/InteractiveArea.vue'
-import MobileHeader from '../components/Layouts/MobileHeader.vue'
-import MobileInteractiveArea from '../components/Layouts/MobileInteractiveArea.vue'
-
-import { BackgroundProvider } from '../components/Backgrounds'
-import { useBackgroundThemeColor } from '../composables/theme-color'
-import { useBackgroundStore } from '../stores/background'
-
 const paused = ref(false)
 
 function handleSettingsOpen(open: boolean) {
diff --git a/apps/stage-web/src/stores/background.ts b/apps/stage-web/src/stores/background.ts
index b7907d723..c7a34f62a 100644
--- a/apps/stage-web/src/stores/background.ts
+++ b/apps/stage-web/src/stores/background.ts
@@ -1,279 +1 @@
-import type { BackgroundOption } from '@proj-airi/stage-ui/components'
-import type { Ref, ShallowRef } from 'vue'
-
-import localforage from 'localforage'
-
-import { useLocalStorage, useObjectUrl } from '@vueuse/core'
-import { defineStore } from 'pinia'
-import { computed, markRaw, onScopeDispose, ref, shallowRef } from 'vue'
-
-import { DefaultBackgroundPreview } from '../components/Backgrounds/default'
-
-export enum BackgroundKind {
-  Wave = 'wave',
-  Image = 'image',
-}
-
-export interface BackgroundItem extends BackgroundOption {
-  kind: BackgroundKind
-  importedAt?: number
-}
-
-type PersistedBackgroundItem = Omit<BackgroundItem, 'file'> & {
-  file?: Blob
-}
-
-export const useBackgroundStore = defineStore('background', () => {
-  // TODO: STORAGE_PREFIX used with multiple less maintainable `localforage` and `key.startsWith(...)` call that creates complexity.
-  const STORAGE_PREFIX = 'background-'
-  const presets: BackgroundItem[] = [
-    {
-      id: 'colorful-wave',
-      label: 'Colorful Wave',
-      description: 'Animated wave on cross grid',
-      kind: BackgroundKind.Wave,
-      component: markRaw(DefaultBackgroundPreview),
-    },
-  ]
-
-  const options = ref<BackgroundItem[]>([...presets])
-  const loading = ref(false)
-
-  const selectedId = useLocalStorage<string>('settings/theme/background/selected-id', options.value[0]?.id)
-  const sampledColor = useLocalStorage<string>('settings/theme/background/sampled-color', '')
-
-  const selectedOption = computed(() => options.value.find(option => option.id === selectedId.value) ?? options.value[0])
-
-  const blobRefs = new Map<string, ShallowRef<Blob | undefined>>()
-  const urlRefs = new Map<string, Readonly<Ref<string | undefined>>>()
-
-  function ensureObjectUrl(id: string, blob: Blob) {
-    let blobRef = blobRefs.get(id)
-    let urlRef = urlRefs.get(id)
-
-    if (!blobRef || !urlRef) {
-      blobRef = shallowRef<Blob | undefined>(blob)
-      blobRefs.set(id, blobRef)
-      urlRef = useObjectUrl(blobRef)
-      urlRefs.set(id, urlRef)
-    }
-
-    if (blobRef.value !== blob)
-      blobRef.value = blob
-
-    return urlRef!.value!
-  }
-
-  onScopeDispose(() => {
-    blobRefs.clear()
-    urlRefs.clear()
-  })
-
-  async function migrateDataUrlToBlob(key: string, val: PersistedBackgroundItem, dataUrl: string) {
-    try {
-      const blob = await (await fetch(dataUrl)).blob()
-      const objectUrl = ensureObjectUrl(key, blob)
-
-      const existing = options.value.find(o => o.id === key)
-      if (existing) {
-        existing.src = objectUrl
-        existing.file = undefined
-      }
-
-      const payload: PersistedBackgroundItem = {
-        ...val,
-        src: undefined,
-        file: blob,
-      }
-
-      await localforage.setItem<PersistedBackgroundItem>(key, payload)
-    }
-    catch (error) {
-      console.error('Failed to migrate background data URL to Blob', error)
-    }
-  }
-
-  function setSelection(option: BackgroundItem, color?: string) {
-    selectedId.value = option.id
-    if (color)
-      sampledColor.value = color
-  }
-
-  async function applyPickerSelection(payload: { option: BackgroundOption, color?: string }) {
-    const kind = payload.option.kind === BackgroundKind.Wave
-      ? BackgroundKind.Wave
-      : payload.option.kind === BackgroundKind.Image
-        ? BackgroundKind.Image
-        : BackgroundKind.Image
-
-    const selection: BackgroundItem = {
-      ...payload.option,
-      kind,
-    }
-
-    const saved = await addOption(selection)
-    setSelection(saved, payload.color)
-    return saved
-  }
-
-  async function loadFromIndexedDb() {
-    if (loading.value)
-      return
-    loading.value = true
-    const stored: BackgroundItem[] = []
-    try {
-      await localforage.iterate<PersistedBackgroundItem, void>((val, key) => {
-        if (!key.startsWith(STORAGE_PREFIX))
-          return
-
-        const storedBlob = val.file instanceof Blob ? val.file : undefined
-        const storedSrc = typeof val.src === 'string' && val.src.length > 0 ? val.src : undefined
-
-        if (storedBlob) {
-          const objectUrl = ensureObjectUrl(key, storedBlob)
-          stored.push({
-            ...val,
-            id: key,
-            kind: BackgroundKind.Image,
-            src: objectUrl,
-            file: undefined,
-            component: undefined,
-            removable: true,
-          })
-          return
-        }
-
-        if (storedSrc) {
-          stored.push({
-            ...val,
-            id: key,
-            kind: BackgroundKind.Image,
-            src: storedSrc,
-            file: undefined,
-            component: undefined,
-            removable: true,
-          })
-
-          if (storedSrc.startsWith('data:')) {
-            setTimeout(() => {
-              void migrateDataUrlToBlob(key, val, storedSrc)
-            }, 0)
-          }
-        }
-      })
-    }
-    catch (error) {
-      console.error('Failed to load backgrounds from IndexedDB', error)
-    }
-
-    options.value = [...presets, ...stored].sort((a, b) => (b.importedAt ?? 0) - (a.importedAt ?? 0))
-    loading.value = false
-  }
-
-  void loadFromIndexedDb()
-
-  async function addOption(option: BackgroundItem): Promise<BackgroundItem> {
-    const normalizedId = option.file ? (option.id.startsWith(STORAGE_PREFIX) ? option.id : `${STORAGE_PREFIX}${option.id}`) : option.id
-
-    const hasUploadedFile = option.file instanceof Blob
-    const storedBlob = hasUploadedFile ? option.file : undefined
-
-    const src = storedBlob
-      ? ensureObjectUrl(normalizedId, storedBlob)
-      : option.src
-
-    const normalizedOption: BackgroundItem = {
-      ...option,
-      id: normalizedId,
-      kind: option.kind ?? BackgroundKind.Image,
-      component: option.component ? markRaw(option.component) : option.component,
-      src,
-      importedAt: option.importedAt ?? Date.now(),
-      blur: option.blur,
-      file: undefined,
-      removable: true,
-    }
-
-    const existing = options.value.find(o => o.id === normalizedId)
-    if (existing) {
-      Object.assign(existing, normalizedOption)
-    }
-    else {
-      options.value.push(normalizedOption)
-    }
-    selectedId.value = normalizedId
-
-    if (hasUploadedFile && storedBlob) {
-      const payload: PersistedBackgroundItem = {
-        ...normalizedOption,
-        // ensure we store under prefix for consistency
-        id: normalizedId.startsWith(STORAGE_PREFIX) ? normalizedId : `${STORAGE_PREFIX}${normalizedId}`,
-        src: undefined,
-        file: storedBlob,
-        removable: true,
-      }
-      try {
-        await localforage.setItem<PersistedBackgroundItem>(payload.id, payload)
-      }
-      catch (error) {
-        console.error('Failed to persist background', error)
-      }
-    }
-
-    return normalizedOption
-  }
-
-  async function removeOption(optionId: string) {
-    const optionIndex = options.value.findIndex(o => o.id === optionId)
-    if (optionIndex === -1)
-      return
-
-    const option = options.value[optionIndex]
-
-    // Remove from localforage
-    try {
-      if (option.id.startsWith(STORAGE_PREFIX)) {
-        await localforage.removeItem(option.id)
-      }
-    }
-    catch (error) {
-      console.error('Failed to remove background from storage', error)
-    }
-
-    const blobRef = blobRefs.get(optionId)
-    if (blobRef)
-      blobRef.value = undefined
-    blobRefs.delete(optionId)
-    urlRefs.delete(optionId)
-
-    // Remove from list
-    options.value.splice(optionIndex, 1)
-
-    // If selected, fallback to first available option
-    if (selectedId.value === optionId) {
-      const fallback = options.value[0]
-      if (fallback) {
-        selectedId.value = fallback.id
-      }
-    }
-  }
-
-  function setSampledColor(color?: string) {
-    if (color)
-      sampledColor.value = color
-  }
-
-  return {
-    options,
-    selectedId,
-    selectedOption,
-    sampledColor,
-    loading,
-    loadFromIndexedDb,
-    addOption,
-    removeOption,
-    setSelection,
-    applyPickerSelection,
-    setSampledColor,
-  }
-})
+export { type BackgroundItem, BackgroundKind, useBackgroundStore } from '@proj-airi/stage-layouts/stores/background'
diff --git a/apps/stage-web/tsconfig.json b/apps/stage-web/tsconfig.json
index 19602cd36..476aab3b7 100644
--- a/apps/stage-web/tsconfig.json
+++ b/apps/stage-web/tsconfig.json
@@ -11,6 +11,9 @@
     "paths": {
       "@proj-airi/stage-ui/*": [
         "../../packages/stage-ui/src/*"
+      ],
+      "@proj-airi/stage-layouts/*": [
+        "../../packages/stage-layouts/src/*"
       ]
     },
     "resolveJsonModule": true,
diff --git a/apps/stage-web/vite.config.ts b/apps/stage-web/vite.config.ts
index 1bf648ff1..676a7652e 100644
--- a/apps/stage-web/vite.config.ts
+++ b/apps/stage-web/vite.config.ts
@@ -57,6 +57,7 @@ export default defineConfig({
       '@proj-airi/stage-ui': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-ui', 'src')),
       '@proj-airi/stage-pages': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-pages', 'src')),
       '@proj-airi/stage-shared': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-shared', 'src')),
+      '@proj-airi/stage-layouts': resolve(join(import.meta.dirname, '..', '..', 'packages', 'stage-layouts', 'src')),
     },
   },
   server: {
@@ -99,7 +100,12 @@ export default defineConfig({
     }),
 
     // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
-    Layouts(),
+    Layouts({
+      layoutsDirs: [
+        resolve(import.meta.dirname, 'src', 'layouts'),
+        resolve(import.meta.dirname, '..', '..', 'packages', 'stage-layouts', 'src', 'layouts'),
+      ],
+    }),
 
     // https://github.com/antfu/unocss
     // see uno.config.ts for config
diff --git a/eslint.config.js b/eslint.config.js
index 26758a8e5..09141f257 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -22,6 +22,8 @@ export default defineConfig({
     'apps/stage-tamagotchi/src-tauri/**',
     'apps/stage-tamagotchi-electron/out/**',
     'apps/stage-tamagotchi-electron/src/renderer/bindings/**',
+    'apps/stage-capacitor/ios/**',
+    'apps/stage-capacitor/android/**',
     'crates/**',
     '**/drizzle/**',
     '**/.astro/**',
diff --git a/packages/stage-layouts/package.json b/packages/stage-layouts/package.json
new file mode 100644
index 000000000..40102238d
--- /dev/null
+++ b/packages/stage-layouts/package.json
@@ -0,0 +1,68 @@
+{
+  "name": "@proj-airi/stage-layouts",
+  "type": "module",
+  "private": true,
+  "description": "Shared Layouts",
+  "author": {
+    "name": "Moeru AI Project AIRI Team",
+    "email": "airi@moeru.ai",
+    "url": "https://github.com/moeru-ai"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/moeru-ai/airi.git",
+    "directory": "packages/stage-layouts"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./layouts/*": "./src/layouts/*.vue",
+    "./components/Layouts/*": "./src/components/Layouts/*.vue",
+    "./components/Layouts/InteractiveArea/Actions/*": "./src/components/Layouts/InteractiveArea/Actions/*.vue",
+    "./components/Layouts/ViewControls/*": "./src/components/Layouts/ViewControls/*.vue",
+    "./components/Widgets/*": "./src/components/Widgets/*.vue",
+    "./components/Backgrounds/*": "./src/components/Backgrounds/*",
+    "./composables/*": "./src/composables/*.ts",
+    "./stores/*": "./src/stores/*.ts"
+  },
+  "scripts": {
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@moeru/eventa": "^1.0.0-alpha.10",
+    "@moeru/std": "catalog:",
+    "@proj-airi/ccc": "workspace:*",
+    "@proj-airi/i18n": "workspace:*",
+    "@proj-airi/server-sdk": "workspace:*",
+    "@proj-airi/stage-ui": "workspace:*",
+    "@proj-airi/stage-ui-three": "workspace:*",
+    "@proj-airi/ui": "workspace:*",
+    "@stdlib/string-base-kebabcase": "^0.2.2",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/shared": "^14.1.0",
+    "@xsai-ext/providers": "catalog:",
+    "@xsai/generate-speech": "catalog:",
+    "@xsai/stream-transcription": "0.4.0-beta.8",
+    "animejs": "^4.2.2",
+    "colorjs.io": "^0.6.0",
+    "dompurify": "^3.3.1",
+    "localforage": "^1.10.0",
+    "nanoid": "^5.1.6",
+    "node-vibrant": "^4.0.3",
+    "pinia": "^3.0.4",
+    "posthog-js": "catalog:",
+    "reka-ui": "^2.7.0",
+    "unspeech": "^0.1.7",
+    "vue": "^3.5.25",
+    "vue-i18n": "^11.2.2",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@nekopaw/tempora": "catalog:",
+    "@proj-airi/stage-shared": "workspace:^",
+    "@types/audioworklet": "catalog:",
+    "@types/three": "^0.182.0",
+    "unplugin-info": "catalog:",
+    "vue-tsc": "^3.1.8"
+  }
+}
diff --git a/apps/stage-capacitor/src/assets/logo-dark.svg b/packages/stage-layouts/src/assets/logo-dark.svg
similarity index 100%
rename from apps/stage-capacitor/src/assets/logo-dark.svg
rename to packages/stage-layouts/src/assets/logo-dark.svg
diff --git a/apps/stage-capacitor/src/assets/logo.svg b/packages/stage-layouts/src/assets/logo.svg
similarity index 100%
rename from apps/stage-capacitor/src/assets/logo.svg
rename to packages/stage-layouts/src/assets/logo.svg
diff --git a/apps/stage-capacitor/src/components/Backgrounds/DialogPicker.vue b/packages/stage-layouts/src/components/Backgrounds/DialogPicker.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/DialogPicker.vue
rename to packages/stage-layouts/src/components/Backgrounds/DialogPicker.vue
diff --git a/apps/stage-capacitor/src/components/Backgrounds/Line1.vue b/packages/stage-layouts/src/components/Backgrounds/Line1.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/Line1.vue
rename to packages/stage-layouts/src/components/Backgrounds/Line1.vue
diff --git a/apps/stage-capacitor/src/components/Backgrounds/Provider.vue b/packages/stage-layouts/src/components/Backgrounds/Provider.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/Provider.vue
rename to packages/stage-layouts/src/components/Backgrounds/Provider.vue
diff --git a/apps/stage-capacitor/src/components/Backgrounds/SakuraPetal.vue b/packages/stage-layouts/src/components/Backgrounds/SakuraPetal.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/SakuraPetal.vue
rename to packages/stage-layouts/src/components/Backgrounds/SakuraPetal.vue
diff --git a/apps/stage-capacitor/src/components/Backgrounds/TicTacToe.vue b/packages/stage-layouts/src/components/Backgrounds/TicTacToe.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/TicTacToe.vue
rename to packages/stage-layouts/src/components/Backgrounds/TicTacToe.vue
diff --git a/apps/stage-capacitor/src/components/Backgrounds/default/index.ts b/packages/stage-layouts/src/components/Backgrounds/default/index.ts
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/default/index.ts
rename to packages/stage-layouts/src/components/Backgrounds/default/index.ts
diff --git a/apps/stage-capacitor/src/components/Backgrounds/default/index.vue b/packages/stage-layouts/src/components/Backgrounds/default/index.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/default/index.vue
rename to packages/stage-layouts/src/components/Backgrounds/default/index.vue
diff --git a/apps/stage-capacitor/src/components/Backgrounds/default/part-animated-wave.vue b/packages/stage-layouts/src/components/Backgrounds/default/part-animated-wave.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/default/part-animated-wave.vue
rename to packages/stage-layouts/src/components/Backgrounds/default/part-animated-wave.vue
diff --git a/apps/stage-capacitor/src/components/Backgrounds/default/pattern-cross.vue b/packages/stage-layouts/src/components/Backgrounds/default/pattern-cross.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/default/pattern-cross.vue
rename to packages/stage-layouts/src/components/Backgrounds/default/pattern-cross.vue
diff --git a/apps/stage-capacitor/src/components/Backgrounds/default/preview.vue b/packages/stage-layouts/src/components/Backgrounds/default/preview.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/default/preview.vue
rename to packages/stage-layouts/src/components/Backgrounds/default/preview.vue
diff --git a/apps/stage-capacitor/src/components/Backgrounds/index.ts b/packages/stage-layouts/src/components/Backgrounds/index.ts
similarity index 100%
rename from apps/stage-capacitor/src/components/Backgrounds/index.ts
rename to packages/stage-layouts/src/components/Backgrounds/index.ts
diff --git a/apps/stage-capacitor/src/components/Layouts/Header.vue b/packages/stage-layouts/src/components/Layouts/Header.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Layouts/Header.vue
rename to packages/stage-layouts/src/components/Layouts/Header.vue
diff --git a/apps/stage-capacitor/src/components/Layouts/HeaderLink.vue b/packages/stage-layouts/src/components/Layouts/HeaderLink.vue
similarity index 92%
rename from apps/stage-capacitor/src/components/Layouts/HeaderLink.vue
rename to packages/stage-layouts/src/components/Layouts/HeaderLink.vue
index 430695cd1..b04fb33b2 100644
--- a/apps/stage-capacitor/src/components/Layouts/HeaderLink.vue
+++ b/packages/stage-layouts/src/components/Layouts/HeaderLink.vue
@@ -19,7 +19,7 @@ const { isDark: dark } = useTheme()
     <template v-else>
       <img :src="Logo" h-8 w-8 class="theme-colored">
     </template>
-    <div translate-y="[2px]" font-semibold font-quicksand>
+    <div translate-y="[2px]" font-quicksand font-semibold>
       <span>AIRI</span>
     </div>
   </RouterLink>
diff --git a/apps/stage-capacitor/src/components/Layouts/InteractiveArea.vue b/packages/stage-layouts/src/components/Layouts/InteractiveArea.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Layouts/InteractiveArea.vue
rename to packages/stage-layouts/src/components/Layouts/InteractiveArea.vue
diff --git a/apps/stage-capacitor/src/components/Layouts/InteractiveArea/Actions/About.vue b/packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/About.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Layouts/InteractiveArea/Actions/About.vue
rename to packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/About.vue
diff --git a/apps/stage-capacitor/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue b/packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
rename to packages/stage-layouts/src/components/Layouts/InteractiveArea/Actions/ViewControls.vue
diff --git a/apps/stage-capacitor/src/components/Layouts/MobileHeader.vue b/packages/stage-layouts/src/components/Layouts/MobileHeader.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Layouts/MobileHeader.vue
rename to packages/stage-layouts/src/components/Layouts/MobileHeader.vue
diff --git a/apps/stage-capacitor/src/components/Layouts/MobileHeaderLink.vue b/packages/stage-layouts/src/components/Layouts/MobileHeaderLink.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Layouts/MobileHeaderLink.vue
rename to packages/stage-layouts/src/components/Layouts/MobileHeaderLink.vue
diff --git a/apps/stage-capacitor/src/components/Layouts/MobileInteractiveArea.vue b/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Layouts/MobileInteractiveArea.vue
rename to packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
diff --git a/apps/stage-capacitor/src/components/Layouts/ViewControls/Inputs.vue b/packages/stage-layouts/src/components/Layouts/ViewControls/Inputs.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Layouts/ViewControls/Inputs.vue
rename to packages/stage-layouts/src/components/Layouts/ViewControls/Inputs.vue
diff --git a/apps/stage-capacitor/src/components/Widgets/ChatActionButtons.vue b/packages/stage-layouts/src/components/Widgets/ChatActionButtons.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Widgets/ChatActionButtons.vue
rename to packages/stage-layouts/src/components/Widgets/ChatActionButtons.vue
diff --git a/apps/stage-capacitor/src/components/Widgets/ChatArea.vue b/packages/stage-layouts/src/components/Widgets/ChatArea.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Widgets/ChatArea.vue
rename to packages/stage-layouts/src/components/Widgets/ChatArea.vue
diff --git a/apps/stage-capacitor/src/components/Widgets/ChatContainer.vue b/packages/stage-layouts/src/components/Widgets/ChatContainer.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Widgets/ChatContainer.vue
rename to packages/stage-layouts/src/components/Widgets/ChatContainer.vue
diff --git a/apps/stage-capacitor/src/components/Widgets/IndicatorMicVolume.vue b/packages/stage-layouts/src/components/Widgets/IndicatorMicVolume.vue
similarity index 100%
rename from apps/stage-capacitor/src/components/Widgets/IndicatorMicVolume.vue
rename to packages/stage-layouts/src/components/Widgets/IndicatorMicVolume.vue
diff --git a/apps/stage-capacitor/src/composables/theme-color.ts b/packages/stage-layouts/src/composables/theme-color.ts
similarity index 100%
rename from apps/stage-capacitor/src/composables/theme-color.ts
rename to packages/stage-layouts/src/composables/theme-color.ts
diff --git a/packages/stage-layouts/src/index.ts b/packages/stage-layouts/src/index.ts
new file mode 100644
index 000000000..a5a455f71
--- /dev/null
+++ b/packages/stage-layouts/src/index.ts
@@ -0,0 +1,3 @@
+import { name } from '../package.json'
+
+console.warn(`The entrypoint you imported for ${name} doesn't have any exports. Try importing ${name}/pages instead.`)
diff --git a/apps/stage-capacitor/src/layouts/default.vue b/packages/stage-layouts/src/layouts/default.vue
similarity index 100%
rename from apps/stage-capacitor/src/layouts/default.vue
rename to packages/stage-layouts/src/layouts/default.vue
diff --git a/apps/stage-capacitor/src/layouts/home.vue b/packages/stage-layouts/src/layouts/home.vue
similarity index 100%
rename from apps/stage-capacitor/src/layouts/home.vue
rename to packages/stage-layouts/src/layouts/home.vue
diff --git a/apps/stage-capacitor/src/layouts/plain.vue b/packages/stage-layouts/src/layouts/plain.vue
similarity index 100%
rename from apps/stage-capacitor/src/layouts/plain.vue
rename to packages/stage-layouts/src/layouts/plain.vue
diff --git a/apps/stage-web/src/layouts/settings.vue b/packages/stage-layouts/src/layouts/settings.vue
similarity index 100%
rename from apps/stage-web/src/layouts/settings.vue
rename to packages/stage-layouts/src/layouts/settings.vue
diff --git a/apps/stage-capacitor/src/layouts/stage.vue b/packages/stage-layouts/src/layouts/stage.vue
similarity index 100%
rename from apps/stage-capacitor/src/layouts/stage.vue
rename to packages/stage-layouts/src/layouts/stage.vue
diff --git a/packages/stage-layouts/src/stores/background.ts b/packages/stage-layouts/src/stores/background.ts
new file mode 100644
index 000000000..b7907d723
--- /dev/null
+++ b/packages/stage-layouts/src/stores/background.ts
@@ -0,0 +1,279 @@
+import type { BackgroundOption } from '@proj-airi/stage-ui/components'
+import type { Ref, ShallowRef } from 'vue'
+
+import localforage from 'localforage'
+
+import { useLocalStorage, useObjectUrl } from '@vueuse/core'
+import { defineStore } from 'pinia'
+import { computed, markRaw, onScopeDispose, ref, shallowRef } from 'vue'
+
+import { DefaultBackgroundPreview } from '../components/Backgrounds/default'
+
+export enum BackgroundKind {
+  Wave = 'wave',
+  Image = 'image',
+}
+
+export interface BackgroundItem extends BackgroundOption {
+  kind: BackgroundKind
+  importedAt?: number
+}
+
+type PersistedBackgroundItem = Omit<BackgroundItem, 'file'> & {
+  file?: Blob
+}
+
+export const useBackgroundStore = defineStore('background', () => {
+  // TODO: STORAGE_PREFIX used with multiple less maintainable `localforage` and `key.startsWith(...)` call that creates complexity.
+  const STORAGE_PREFIX = 'background-'
+  const presets: BackgroundItem[] = [
+    {
+      id: 'colorful-wave',
+      label: 'Colorful Wave',
+      description: 'Animated wave on cross grid',
+      kind: BackgroundKind.Wave,
+      component: markRaw(DefaultBackgroundPreview),
+    },
+  ]
+
+  const options = ref<BackgroundItem[]>([...presets])
+  const loading = ref(false)
+
+  const selectedId = useLocalStorage<string>('settings/theme/background/selected-id', options.value[0]?.id)
+  const sampledColor = useLocalStorage<string>('settings/theme/background/sampled-color', '')
+
+  const selectedOption = computed(() => options.value.find(option => option.id === selectedId.value) ?? options.value[0])
+
+  const blobRefs = new Map<string, ShallowRef<Blob | undefined>>()
+  const urlRefs = new Map<string, Readonly<Ref<string | undefined>>>()
+
+  function ensureObjectUrl(id: string, blob: Blob) {
+    let blobRef = blobRefs.get(id)
+    let urlRef = urlRefs.get(id)
+
+    if (!blobRef || !urlRef) {
+      blobRef = shallowRef<Blob | undefined>(blob)
+      blobRefs.set(id, blobRef)
+      urlRef = useObjectUrl(blobRef)
+      urlRefs.set(id, urlRef)
+    }
+
+    if (blobRef.value !== blob)
+      blobRef.value = blob
+
+    return urlRef!.value!
+  }
+
+  onScopeDispose(() => {
+    blobRefs.clear()
+    urlRefs.clear()
+  })
+
+  async function migrateDataUrlToBlob(key: string, val: PersistedBackgroundItem, dataUrl: string) {
+    try {
+      const blob = await (await fetch(dataUrl)).blob()
+      const objectUrl = ensureObjectUrl(key, blob)
+
+      const existing = options.value.find(o => o.id === key)
+      if (existing) {
+        existing.src = objectUrl
+        existing.file = undefined
+      }
+
+      const payload: PersistedBackgroundItem = {
+        ...val,
+        src: undefined,
+        file: blob,
+      }
+
+      await localforage.setItem<PersistedBackgroundItem>(key, payload)
+    }
+    catch (error) {
+      console.error('Failed to migrate background data URL to Blob', error)
+    }
+  }
+
+  function setSelection(option: BackgroundItem, color?: string) {
+    selectedId.value = option.id
+    if (color)
+      sampledColor.value = color
+  }
+
+  async function applyPickerSelection(payload: { option: BackgroundOption, color?: string }) {
+    const kind = payload.option.kind === BackgroundKind.Wave
+      ? BackgroundKind.Wave
+      : payload.option.kind === BackgroundKind.Image
+        ? BackgroundKind.Image
+        : BackgroundKind.Image
+
+    const selection: BackgroundItem = {
+      ...payload.option,
+      kind,
+    }
+
+    const saved = await addOption(selection)
+    setSelection(saved, payload.color)
+    return saved
+  }
+
+  async function loadFromIndexedDb() {
+    if (loading.value)
+      return
+    loading.value = true
+    const stored: BackgroundItem[] = []
+    try {
+      await localforage.iterate<PersistedBackgroundItem, void>((val, key) => {
+        if (!key.startsWith(STORAGE_PREFIX))
+          return
+
+        const storedBlob = val.file instanceof Blob ? val.file : undefined
+        const storedSrc = typeof val.src === 'string' && val.src.length > 0 ? val.src : undefined
+
+        if (storedBlob) {
+          const objectUrl = ensureObjectUrl(key, storedBlob)
+          stored.push({
+            ...val,
+            id: key,
+            kind: BackgroundKind.Image,
+            src: objectUrl,
+            file: undefined,
+            component: undefined,
+            removable: true,
+          })
+          return
+        }
+
+        if (storedSrc) {
+          stored.push({
+            ...val,
+            id: key,
+            kind: BackgroundKind.Image,
+            src: storedSrc,
+            file: undefined,
+            component: undefined,
+            removable: true,
+          })
+
+          if (storedSrc.startsWith('data:')) {
+            setTimeout(() => {
+              void migrateDataUrlToBlob(key, val, storedSrc)
+            }, 0)
+          }
+        }
+      })
+    }
+    catch (error) {
+      console.error('Failed to load backgrounds from IndexedDB', error)
+    }
+
+    options.value = [...presets, ...stored].sort((a, b) => (b.importedAt ?? 0) - (a.importedAt ?? 0))
+    loading.value = false
+  }
+
+  void loadFromIndexedDb()
+
+  async function addOption(option: BackgroundItem): Promise<BackgroundItem> {
+    const normalizedId = option.file ? (option.id.startsWith(STORAGE_PREFIX) ? option.id : `${STORAGE_PREFIX}${option.id}`) : option.id
+
+    const hasUploadedFile = option.file instanceof Blob
+    const storedBlob = hasUploadedFile ? option.file : undefined
+
+    const src = storedBlob
+      ? ensureObjectUrl(normalizedId, storedBlob)
+      : option.src
+
+    const normalizedOption: BackgroundItem = {
+      ...option,
+      id: normalizedId,
+      kind: option.kind ?? BackgroundKind.Image,
+      component: option.component ? markRaw(option.component) : option.component,
+      src,
+      importedAt: option.importedAt ?? Date.now(),
+      blur: option.blur,
+      file: undefined,
+      removable: true,
+    }
+
+    const existing = options.value.find(o => o.id === normalizedId)
+    if (existing) {
+      Object.assign(existing, normalizedOption)
+    }
+    else {
+      options.value.push(normalizedOption)
+    }
+    selectedId.value = normalizedId
+
+    if (hasUploadedFile && storedBlob) {
+      const payload: PersistedBackgroundItem = {
+        ...normalizedOption,
+        // ensure we store under prefix for consistency
+        id: normalizedId.startsWith(STORAGE_PREFIX) ? normalizedId : `${STORAGE_PREFIX}${normalizedId}`,
+        src: undefined,
+        file: storedBlob,
+        removable: true,
+      }
+      try {
+        await localforage.setItem<PersistedBackgroundItem>(payload.id, payload)
+      }
+      catch (error) {
+        console.error('Failed to persist background', error)
+      }
+    }
+
+    return normalizedOption
+  }
+
+  async function removeOption(optionId: string) {
+    const optionIndex = options.value.findIndex(o => o.id === optionId)
+    if (optionIndex === -1)
+      return
+
+    const option = options.value[optionIndex]
+
+    // Remove from localforage
+    try {
+      if (option.id.startsWith(STORAGE_PREFIX)) {
+        await localforage.removeItem(option.id)
+      }
+    }
+    catch (error) {
+      console.error('Failed to remove background from storage', error)
+    }
+
+    const blobRef = blobRefs.get(optionId)
+    if (blobRef)
+      blobRef.value = undefined
+    blobRefs.delete(optionId)
+    urlRefs.delete(optionId)
+
+    // Remove from list
+    options.value.splice(optionIndex, 1)
+
+    // If selected, fallback to first available option
+    if (selectedId.value === optionId) {
+      const fallback = options.value[0]
+      if (fallback) {
+        selectedId.value = fallback.id
+      }
+    }
+  }
+
+  function setSampledColor(color?: string) {
+    if (color)
+      sampledColor.value = color
+  }
+
+  return {
+    options,
+    selectedId,
+    selectedOption,
+    sampledColor,
+    loading,
+    loadFromIndexedDb,
+    addOption,
+    removeOption,
+    setSelection,
+    applyPickerSelection,
+    setSampledColor,
+  }
+})
diff --git a/packages/stage-layouts/tsconfig.json b/packages/stage-layouts/tsconfig.json
new file mode 100644
index 000000000..e66da7a63
--- /dev/null
+++ b/packages/stage-layouts/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": [
+      "DOM",
+      "ESNext",
+      "DOM.AsyncIterable"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "types": [
+      "vitest",
+      "vite/client",
+      "unplugin-info/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"
+    ],
+    "skipTemplateCodegen": false
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 616f7b251..69c1d5baa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -351,6 +351,9 @@ importers:
       '@proj-airi/server-sdk':
         specifier: workspace:^
         version: link:../../packages/server-sdk
+      '@proj-airi/stage-layouts':
+        specifier: workspace:^
+        version: link:../../packages/stage-layouts
       '@proj-airi/stage-ui':
         specifier: workspace:^
         version: link:../../packages/stage-ui
@@ -736,6 +739,9 @@ importers:
       '@proj-airi/server-sdk':
         specifier: workspace:*
         version: link:../../packages/server-sdk
+      '@proj-airi/stage-layouts':
+        specifier: workspace:^
+        version: link:../../packages/stage-layouts
       '@proj-airi/stage-ui':
         specifier: workspace:^
         version: link:../../packages/stage-ui
@@ -1106,6 +1112,9 @@ importers:
       '@proj-airi/server-sdk':
         specifier: workspace:^
         version: link:../../packages/server-sdk
+      '@proj-airi/stage-layouts':
+        specifier: workspace:^
+        version: link:../../packages/stage-layouts
       '@proj-airi/stage-ui':
         specifier: workspace:^
         version: link:../../packages/stage-ui
@@ -1714,6 +1723,109 @@ importers:
         specifier: 'catalog:'
         version: 0.4.0-beta.13
 
+  packages/stage-layouts:
+    dependencies:
+      '@moeru/eventa':
+        specifier: ^1.0.0-alpha.10
+        version: 1.0.0-alpha.10(electron@39.2.7)(h3@2.0.1-rc.5(crossws@0.4.1(srvx@0.9.8)))
+      '@moeru/std':
+        specifier: 'catalog:'
+        version: 0.1.0-beta.14
+      '@proj-airi/ccc':
+        specifier: workspace:*
+        version: link:../ccc
+      '@proj-airi/i18n':
+        specifier: workspace:*
+        version: link:../i18n
+      '@proj-airi/server-sdk':
+        specifier: workspace:*
+        version: link:../server-sdk
+      '@proj-airi/stage-ui':
+        specifier: workspace:*
+        version: link:../stage-ui
+      '@proj-airi/stage-ui-three':
+        specifier: workspace:*
+        version: link:../stage-ui-three
+      '@proj-airi/ui':
+        specifier: workspace:*
+        version: link:../ui
+      '@stdlib/string-base-kebabcase':
+        specifier: ^0.2.2
+        version: 0.2.2
+      '@vueuse/core':
+        specifier: ^14.1.0
+        version: 14.1.0(vue@3.5.25(typescript@5.9.3))
+      '@vueuse/shared':
+        specifier: ^14.1.0
+        version: 14.1.0(vue@3.5.25(typescript@5.9.3))
+      '@xsai-ext/providers':
+        specifier: 'catalog:'
+        version: 0.4.0-beta.13
+      '@xsai/generate-speech':
+        specifier: 'catalog:'
+        version: 0.4.0-beta.13
+      '@xsai/stream-transcription':
+        specifier: 0.4.0-beta.8
+        version: 0.4.0-beta.8
+      animejs:
+        specifier: ^4.2.2
+        version: 4.2.2
+      colorjs.io:
+        specifier: ^0.6.0
+        version: 0.6.0
+      dompurify:
+        specifier: ^3.3.1
+        version: 3.3.1
+      localforage:
+        specifier: ^1.10.0
+        version: 1.10.0
+      nanoid:
+        specifier: ^5.1.6
+        version: 5.1.6
+      node-vibrant:
+        specifier: ^4.0.3
+        version: 4.0.3(encoding@0.1.13)
+      pinia:
+        specifier: ^3.0.4
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
+      posthog-js:
+        specifier: 'catalog:'
+        version: 1.306.1
+      reka-ui:
+        specifier: ^2.7.0
+        version: 2.7.0(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
+      unspeech:
+        specifier: ^0.1.7
+        version: 0.1.7
+      vue:
+        specifier: ^3.5.25
+        version: 3.5.25(typescript@5.9.3)
+      vue-i18n:
+        specifier: ^11.2.2
+        version: 11.2.7(vue@3.5.25(typescript@5.9.3))
+      vue-router:
+        specifier: ^4.6.4
+        version: 4.6.4(vue@3.5.25(typescript@5.9.3))
+    devDependencies:
+      '@nekopaw/tempora':
+        specifier: 'catalog:'
+        version: 0.4.0-alpha.1
+      '@proj-airi/stage-shared':
+        specifier: workspace:^
+        version: link:../stage-shared
+      '@types/audioworklet':
+        specifier: 'catalog:'
+        version: 0.0.92
+      '@types/three':
+        specifier: ^0.182.0
+        version: 0.182.0
+      unplugin-info:
+        specifier: 'catalog:'
+        version: 1.2.4(@nuxt/kit@3.20.2(magicast@0.5.1))(esbuild@0.27.2)(rollup@4.54.0)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(less@4.5.1)(lightningcss@1.30.2)(terser@5.44.1)(tsx@4.21.0)(yaml@2.8.2))
+      vue-tsc:
+        specifier: ^3.1.8
+        version: 3.2.1(typescript@5.9.3)
+
   packages/stage-pages:
     dependencies:
       '@moeru/eventa':