refactor(stage-ui,stage-web): move ThemeOverlay to background-gradient-overlay

apps/stage-web/src/components/Backgrounds/Provider.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type { BackgroundItem } from '../../stores/background'
 
-import ThemeOverlay from '@proj-airi/stage-ui/components/ThemeOverlay.vue'
-
+import { BackgroundGradientOverlay } from '@proj-airi/stage-ui/components'
 import { ref } from 'vue'
 
 import { BackgroundKind } from '../../stores/background'
@@ -44,7 +43,7 @@ defineExpose({
     </div>
 
     <!-- Overlay (not for wave) -->
-    <ThemeOverlay v-if="background.kind !== BackgroundKind.Wave" :color="topColor" />
+    <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">

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

@@ -0,0 +1 @@
+export { default as BackgroundGradientOverlay } from './background-gradient-overlay.vue'

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

@@ -1,3 +1,4 @@
+export * from './backgrounds'
 export { default as Callout } from './Callout.vue'
 export { default as PageHeader } from './PageHeader.vue'
 export { default as Section } from './Section.vue'

packages/stage-ui/src/components/scenarios/dialogs/background-picker/background-picker.vue

@@ -3,15 +3,14 @@ import type { Ref, ShallowRef } from 'vue'
 
 import type { BackgroundOption } from './types'
 
-import { useSettings } from '@proj-airi/stage-ui/stores/settings'
 import { BasicInputFile } from '@proj-airi/ui'
 import { useObjectUrl } from '@vueuse/core'
 import { nanoid } from 'nanoid'
 import { computed, nextTick, onScopeDispose, ref, shallowRef, watch } from 'vue'
 
-import ThemeOverlay from '../../../ThemeOverlay.vue'
-
 import { colorFromElement, patchThemeSamplingHtml2CanvasClone } from '../../../../libs'
+import { useSettings } from '../../../../stores/settings'
+import { BackgroundGradientOverlay } from '../../../layouts/backgrounds'
 
 const props = withDefaults(defineProps<{
   options: BackgroundOption[]
@@ -296,7 +295,7 @@ async function applySelection(isImport = false) {
                 Select a background
               </div>
             </div>
-            <ThemeOverlay v-if="(selectedOption as any)?.kind !== 'wave'" :color="previewColor" />
+            <BackgroundGradientOverlay v-if="(selectedOption as any)?.kind !== 'wave'" :color="previewColor" />
           </div>
         </div>
       </div>