From 97731ea57d04cc41d2c584b89a46d6b4069c963c Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Fri, 26 Dec 2025 12:36:13 +0800
Subject: [PATCH] refactor(stage-ui,stage-web): move ThemeOverlay to
 background-gradient-overlay

---
 apps/stage-web/src/components/Backgrounds/Provider.vue     | 5 ++---
 .../backgrounds/background-gradient-overlay.vue}           | 0
 .../stage-ui/src/components/layouts/backgrounds/index.ts   | 1 +
 packages/stage-ui/src/components/layouts/index.ts          | 1 +
 .../dialogs/background-picker/background-picker.vue        | 7 +++----
 5 files changed, 7 insertions(+), 7 deletions(-)
 rename packages/stage-ui/src/components/{ThemeOverlay.vue => layouts/backgrounds/background-gradient-overlay.vue} (100%)
 create mode 100644 packages/stage-ui/src/components/layouts/backgrounds/index.ts

diff --git a/apps/stage-web/src/components/Backgrounds/Provider.vue b/apps/stage-web/src/components/Backgrounds/Provider.vue
index 502ec3309..c7615bbae 100644
--- a/apps/stage-web/src/components/Backgrounds/Provider.vue
+++ b/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">
diff --git a/packages/stage-ui/src/components/ThemeOverlay.vue b/packages/stage-ui/src/components/layouts/backgrounds/background-gradient-overlay.vue
similarity index 100%
rename from packages/stage-ui/src/components/ThemeOverlay.vue
rename to packages/stage-ui/src/components/layouts/backgrounds/background-gradient-overlay.vue
diff --git a/packages/stage-ui/src/components/layouts/backgrounds/index.ts b/packages/stage-ui/src/components/layouts/backgrounds/index.ts
new file mode 100644
index 000000000..a6a8276c9
--- /dev/null
+++ b/packages/stage-ui/src/components/layouts/backgrounds/index.ts
@@ -0,0 +1 @@
+export { default as BackgroundGradientOverlay } from './background-gradient-overlay.vue'
diff --git a/packages/stage-ui/src/components/layouts/index.ts b/packages/stage-ui/src/components/layouts/index.ts
index eb7b62c1f..170e7cbe0 100644
--- a/packages/stage-ui/src/components/layouts/index.ts
+++ b/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'
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/background-picker/background-picker.vue b/packages/stage-ui/src/components/scenarios/dialogs/background-picker/background-picker.vue
index 5301bf77c..5ee6d21c2 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/background-picker/background-picker.vue
+++ b/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>