From 17000a03b27559e4952afa709f2f96f26bd3bf67 Mon Sep 17 00:00:00 2001
From: RainbowBird <git@luoling.moe>
Date: Thu, 13 Mar 2025 02:27:03 +0800
Subject: [PATCH] feat(stage-web): theme presets (#74)

* feat(stage-web): theme presets
* refactor: use @culorijs to convert color
* fix: brush
---
 .../src/pages/settings/themes/index.vue       | 363 ++++++++++++------
 pnpm-lock.yaml                                |  32 +-
 2 files changed, 252 insertions(+), 143 deletions(-)

diff --git a/apps/stage-web/src/pages/settings/themes/index.vue b/apps/stage-web/src/pages/settings/themes/index.vue
index 9a84aadfc..cc13df7e9 100644
--- a/apps/stage-web/src/pages/settings/themes/index.vue
+++ b/apps/stage-web/src/pages/settings/themes/index.vue
@@ -1,15 +1,63 @@
 <script setup lang="ts">
 import { Collapsable } from '@proj-airi/stage-ui/components'
 import { DEFAULT_THEME_COLORS_HUE, useSettings } from '@proj-airi/stage-ui/stores'
+import { converter } from 'culori'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const settings = useSettings()
 
+interface ColorPreset {
+  name: string
+  description: string
+  colors: string[]
+}
+
+const colorPresets: ColorPreset[] = [
+  {
+    name: 'Morandi Colors',
+    description: 'Soft, muted tones inspired by Giorgio Morandi\'s paintings',
+    colors: ['#A5978B', '#D8CAAF', '#B8B4A7', '#C4BCB1', '#E5DED8', '#9A8F7D', '#BEB5A7', '#C9C0B6'],
+  },
+  {
+    name: 'Monet Colors',
+    description: 'Impressionist palette inspired by Claude Monet\'s works',
+    colors: ['#7A9EAF', '#B8C7CC', '#D4B79C', '#8B9D77', '#C7D5CB', '#E6D0B1', '#94A7B1', '#B4C8C3'],
+  },
+  {
+    name: 'Japanese Colors',
+    description: 'Traditional Japanese color palette',
+    colors: ['#D9B48F', '#B5917A', '#8C7A6B', '#A17F5F', '#B98C46', '#C7A252', '#DAB300', '#D19826'],
+  },
+  {
+    name: 'Nordic Colors',
+    description: 'Scandinavian minimalist color scheme',
+    colors: ['#9BA7B0', '#C1CBD4', '#A5ADB6', '#8B959E', '#D4DCE4', '#7F8A94', '#B3BCC6', '#98A4AE'],
+  },
+]
+
 function resetToDefault() {
   settings.themeColorsHue = DEFAULT_THEME_COLORS_HUE
   settings.themeColorsHueDynamic = false
 }
+
+function applyPrimaryColorFromHex(color: string) {
+  // Convert hex color to OKLCH using culori's converter
+  const oklch = converter('oklch')(color)
+
+  if (!oklch)
+    return
+
+  // Extract hue from OKLCH color
+  const { h } = oklch
+
+  if (!h)
+    return
+
+  // Update theme settings
+  settings.themeColorsHue = h
+  settings.themeColorsHueDynamic = false
+}
 </script>
 
 <template>
@@ -26,140 +74,201 @@ function resetToDefault() {
       </div>
     </h1>
   </div>
-  <Collapsable mt-4 w-full :default="true">
-    <template #trigger="slotProps">
-      <button
-        bg="zinc-100 dark:zinc-800"
-        hover="bg-zinc-200 dark:bg-zinc-700"
-        transition="all ease-in-out duration-250"
-        w-full flex items-center gap-1.5 rounded-lg px-4 py-3 outline-none
-        class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
-        @click="slotProps.setVisible(!slotProps.visible)"
-      >
-        <div flex="~ row 1" items-center gap-1.5>
-          <div
-            i-solar:pallete-2-bold-duotone class="provider-icon size-6"
-            transition="filter duration-250 ease-in-out"
-          />
-          <div>
-            Colors
+
+  <div flex-col>
+    <Collapsable mt-4 w-full :default="true">
+      <template #trigger="slotProps">
+        <button
+          bg="zinc-100 dark:zinc-800"
+          hover="bg-zinc-200 dark:bg-zinc-700"
+          transition="all ease-in-out duration-250"
+          w-full flex items-center gap-1.5 rounded-lg px-4 py-3 outline-none
+          class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
+          @click="slotProps.setVisible(!slotProps.visible)"
+        >
+          <div flex="~ row 1" items-center gap-1.5>
+            <div
+              i-solar:pallete-2-bold-duotone class="provider-icon size-6"
+              transition="filter duration-250 ease-in-out"
+            />
+            <div>
+              Colors
+            </div>
+          </div>
+          <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
+            <div i-solar:alt-arrow-down-bold-duotone />
+          </div>
+        </button>
+      </template>
+      <div p-4>
+        <div class="flex items-center gap-8">
+          <div class="flex items-center gap-1 text-sm font-medium">
+            Primary color
+          </div>
+
+          <input
+            v-model="settings.themeColorsHue"
+            type="range"
+            min="0"
+            max="360"
+            step="0.01"
+            class="theme-hue-slider"
+            :disabled="settings.themeColorsHueDynamic"
+            :class="{ 'opacity-25 cursor-not-allowed': settings.themeColorsHueDynamic }"
+          >
+        </div>
+        <div mt-4 h-10 w-full flex overflow-hidden rounded-lg>
+          <div bg="primary-50" class="primary-color-bar" text-black>
+            50
+          </div>
+          <div bg="primary-100" class="primary-color-bar" text-black>
+            100
+          </div>
+          <div bg="primary-200" class="primary-color-bar" text-black>
+            200
+          </div>
+          <div bg="primary-300" class="primary-color-bar" text-black>
+            300
+          </div>
+          <div bg="primary-400" class="primary-color-bar" text-black>
+            400
+          </div>
+          <div bg="primary-500" class="primary-color-bar" text-black>
+            500
+          </div>
+          <div bg="primary-600" class="primary-color-bar" text-white>
+            600
+          </div>
+          <div bg="primary-700" class="primary-color-bar" text-white>
+            700
+          </div>
+          <div bg="primary-800" class="primary-color-bar" text-white>
+            800
+          </div>
+          <div bg="primary-900" class="primary-color-bar" text-white>
+            900
+          </div>
+          <div bg="primary-950" class="primary-color-bar" text-white>
+            950
           </div>
         </div>
-        <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
-          <div i-solar:alt-arrow-down-bold-duotone />
-        </div>
-      </button>
-    </template>
-    <div p-4>
-      <div class="flex items-center gap-8">
-        <div class="flex items-center gap-1 text-sm font-medium">
-          Primary color
-        </div>
 
-        <input
-          v-model="settings.themeColorsHue"
-          type="range"
-          min="0"
-          max="360"
-          step="0.01"
-          class="theme-hue-slider"
-          :disabled="settings.themeColorsHueDynamic"
-          :class="{ 'opacity-25 cursor-not-allowed': settings.themeColorsHueDynamic }"
-        >
-      </div>
-      <div mt-4 h-10 w-full flex overflow-hidden rounded-lg>
-        <div bg="primary-50" class="primary-color-bar" text-black>
-          50
+        <div mt-4 h-10 w-full flex overflow-hidden rounded-lg class="transparency-grid">
+          <div bg="primary-500/5" class="primary-color-bar" text-black>
+            500/5
+          </div>
+          <div bg="primary-500/10" class="primary-color-bar" text-black>
+            500/10
+          </div>
+          <div bg="primary-500/20" class="primary-color-bar" text-black>
+            500/20
+          </div>
+          <div bg="primary-500/30" class="primary-color-bar" text-black>
+            500/30
+          </div>
+          <div bg="primary-500/40" class="primary-color-bar" text-black>
+            500/40
+          </div>
+          <div bg="primary-500/50" class="primary-color-bar" text-black>
+            500/50
+          </div>
+          <div bg="primary-500/60" class="primary-color-bar" text-black>
+            500/60
+          </div>
+          <div bg="primary-500/70" class="primary-color-bar" text-black>
+            500/70
+          </div>
+          <div bg="primary-500/80" class="primary-color-bar" text-black>
+            500/80
+          </div>
+          <div bg="primary-500/90" class="primary-color-bar" text-black>
+            500/90
+          </div>
+          <div bg="primary-500" class="primary-color-bar" text-black>
+            500
+          </div>
         </div>
-        <div bg="primary-100" class="primary-color-bar" text-black>
-          100
-        </div>
-        <div bg="primary-200" class="primary-color-bar" text-black>
-          200
-        </div>
-        <div bg="primary-300" class="primary-color-bar" text-black>
-          300
-        </div>
-        <div bg="primary-400" class="primary-color-bar" text-black>
-          400
-        </div>
-        <div bg="primary-500" class="primary-color-bar" text-black>
-          500
-        </div>
-        <div bg="primary-600" class="primary-color-bar" text-white>
-          600
-        </div>
-        <div bg="primary-700" class="primary-color-bar" text-white>
-          700
-        </div>
-        <div bg="primary-800" class="primary-color-bar" text-white>
-          800
-        </div>
-        <div bg="primary-900" class="primary-color-bar" text-white>
-          900
-        </div>
-        <div bg="primary-950" class="primary-color-bar" text-white>
-          950
-        </div>
-      </div>
+        <div mt-4 class="flex items-center justify-end gap-4">
+          <label class="relative inline-flex cursor-pointer items-center">
+            <input
+              v-model="settings.themeColorsHueDynamic"
+              type="checkbox"
+              class="peer sr-only"
+            >
+            <div
+              class="peer-checked:bg-primary-500 h-6 w-11 rounded-full bg-neutral-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white dark:bg-neutral-600 after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white"
+            />
+            <span class="ml-2 text-sm font-medium">I Want It Dynamic!</span>
+          </label>
 
-      <div mt-4 h-10 w-full flex overflow-hidden rounded-lg class="transparency-grid">
-        <div bg="primary-500/5" class="primary-color-bar" text-black>
-          500/5
-        </div>
-        <div bg="primary-500/10" class="primary-color-bar" text-black>
-          500/10
-        </div>
-        <div bg="primary-500/20" class="primary-color-bar" text-black>
-          500/20
-        </div>
-        <div bg="primary-500/30" class="primary-color-bar" text-black>
-          500/30
-        </div>
-        <div bg="primary-500/40" class="primary-color-bar" text-black>
-          500/40
-        </div>
-        <div bg="primary-500/50" class="primary-color-bar" text-black>
-          500/50
-        </div>
-        <div bg="primary-500/60" class="primary-color-bar" text-black>
-          500/60
-        </div>
-        <div bg="primary-500/70" class="primary-color-bar" text-black>
-          500/70
-        </div>
-        <div bg="primary-500/80" class="primary-color-bar" text-black>
-          500/80
-        </div>
-        <div bg="primary-500/90" class="primary-color-bar" text-black>
-          500/90
-        </div>
-        <div bg="primary-500" class="primary-color-bar" text-black>
-          500
-        </div>
-      </div>
-      <div mt-4 class="flex items-center justify-end gap-4">
-        <label class="relative inline-flex cursor-pointer items-center">
-          <input
-            v-model="settings.themeColorsHueDynamic"
-            type="checkbox"
-            class="peer sr-only"
+          <button
+            class="rounded-md bg-neutral-100 px-3 py-1.5 text-sm transition-colors dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+            @click="resetToDefault"
           >
-          <div
-            class="peer-checked:bg-primary-500 h-6 w-11 rounded-full bg-neutral-200 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white dark:bg-neutral-600 after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white"
-          />
-          <span class="ml-2 text-sm font-medium">I Want It Dynamic!</span>
-        </label>
-
-        <button
-          class="rounded-md bg-neutral-100 px-3 py-1.5 text-sm transition-colors dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700"
-          @click="resetToDefault"
-        >
-          Reset to Default
-        </button>
+            Reset to Default
+          </button>
+        </div>
       </div>
-    </div>
-  </Collapsable>
+    </Collapsable>
+
+    <Collapsable mt-4 w-full :default="true">
+      <template #trigger="slotProps">
+        <button
+          bg="zinc-100 dark:zinc-800"
+          hover="bg-zinc-200 dark:bg-zinc-700"
+          transition="all ease-in-out duration-250"
+          w-full flex items-center gap-1.5 rounded-lg px-4 py-3 outline-none
+          class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
+          @click="slotProps.setVisible(!slotProps.visible)"
+        >
+          <div flex="~ row 1" items-center gap-1.5>
+            <div
+              i-solar:magic-stick-2-bold-duotone class="provider-icon size-6"
+              transition="filter duration-250 ease-in-out"
+            />
+            <div>
+              Theme Presets
+            </div>
+          </div>
+          <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
+            <div i-solar:alt-arrow-down-bold-duotone />
+          </div>
+        </button>
+      </template>
+
+      <div p-4 flex="~ col gap-4">
+        <div
+          v-for="preset in colorPresets"
+          :key="preset.name"
+          flex="~ row"
+          bg="neutral-100 dark:neutral-800"
+          hover="bg-neutral-200 dark:bg-neutral-700"
+          transition="all ease-in-out duration-250"
+          cursor-pointer items-center justify-between gap-4 rounded-lg px-4 py-3
+        >
+          <div>
+            <div text-base font-medium>
+              {{ preset.name }}
+            </div>
+            <div text="sm neutral-500">
+              {{ preset.description }}
+            </div>
+          </div>
+          <div flex="~ row" gap-2>
+            <div
+              v-for="color in preset.colors"
+              :key="color"
+              :style="{ backgroundColor: color }"
+              size-6 cursor-pointer rounded-full hover="scale-110"
+              transition="transform duration-250 ease-in-out"
+              @click="applyPrimaryColorFromHex(color)"
+            />
+          </div>
+        </div>
+      </div>
+    </Collapsable>
+  </div>
+
   <div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
     <div text="40" i-lucide:paintbrush translate-x-10 translate-y-10 />
   </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 699b13655..7531887d9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -369,7 +369,7 @@ importers:
         version: 2.3.0
       '@intlify/unplugin-vue-i18n':
         specifier: ^6.0.3
-        version: 6.0.3(@vue/compiler-dom@3.5.13)(eslint@9.21.0(jiti@2.4.2))(rollup@2.79.1)(typescript@5.8.2)(vue-i18n@11.1.2(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
+        version: 6.0.3(@vue/compiler-dom@3.5.13)(eslint@9.21.0(jiti@2.4.2))(rollup@4.34.9)(typescript@5.8.2)(vue-i18n@11.1.2(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
       '@proj-airi/drizzle-duckdb-wasm':
         specifier: workspace:^
         version: link:../../packages/drizzle-duckdb-wasm
@@ -417,10 +417,10 @@ importers:
         version: 5.2.1(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@vue-macros/volar':
         specifier: ^3.0.0-beta.3
-        version: 3.0.0-beta.3(rollup@2.79.1)(typescript@5.8.2)(vue-tsc@2.2.8(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
+        version: 3.0.0-beta.3(rollup@4.34.9)(typescript@5.8.2)(vue-tsc@2.2.8(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       '@vueuse/motion':
         specifier: ^2.2.6
-        version: 2.2.6(magicast@0.3.5)(rollup@2.79.1)(vue@3.5.13(typescript@5.8.2))
+        version: 2.2.6(magicast@0.3.5)(rollup@4.34.9)(vue@3.5.13(typescript@5.8.2))
       electron:
         specifier: ^34.3.1
         version: 34.3.1
@@ -441,13 +441,13 @@ importers:
         version: 3.2.0(unocss@66.1.0-beta.3(postcss@8.5.3)(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2)))
       unplugin-auto-import:
         specifier: ^19.1.1
-        version: 19.1.1(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(@vueuse/core@12.8.2(typescript@5.8.2))
+        version: 19.1.1(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.9))(@vueuse/core@12.8.2(typescript@5.8.2))
       unplugin-vue-components:
         specifier: ^28.4.1
-        version: 28.4.1(@babel/parser@7.26.7)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(vue@3.5.13(typescript@5.8.2))
+        version: 28.4.1(@babel/parser@7.26.7)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.9))(vue@3.5.13(typescript@5.8.2))
       unplugin-vue-macros:
         specifier: ^2.14.5
-        version: 2.14.5(@vueuse/core@12.8.2(typescript@5.8.2))(esbuild@0.19.12)(rollup@2.79.1)(typescript@5.8.2)(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-tsc@2.2.8(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
+        version: 2.14.5(@vueuse/core@12.8.2(typescript@5.8.2))(esbuild@0.25.0)(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-tsc@2.2.8(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       unplugin-vue-markdown:
         specifier: ^28.3.1
         version: 28.3.1(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))
@@ -456,13 +456,13 @@ importers:
         version: 0.12.0(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
       vite-bundle-visualizer:
         specifier: ^1.2.1
-        version: 1.2.1(rollup@2.79.1)
+        version: 1.2.1(rollup@4.34.9)
       vite-plugin-pwa:
         specifier: ^0.21.1
         version: 0.21.1(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(workbox-build@7.3.0(@types/babel__core@7.20.5))(workbox-window@7.3.0)
       vite-plugin-vue-devtools:
         specifier: ^7.7.2
-        version: 7.7.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(rollup@2.79.1)(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+        version: 7.7.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.9))(rollup@4.34.9)(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       vite-plugin-vue-layouts:
         specifier: ^0.11.0
         version: 0.11.0(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
@@ -703,7 +703,7 @@ importers:
         version: 2.3.0
       '@intlify/unplugin-vue-i18n':
         specifier: ^6.0.3
-        version: 6.0.3(@vue/compiler-dom@3.5.13)(eslint@9.21.0(jiti@2.4.2))(rollup@4.34.9)(typescript@5.8.2)(vue-i18n@11.1.2(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
+        version: 6.0.3(@vue/compiler-dom@3.5.13)(eslint@9.21.0(jiti@2.4.2))(rollup@2.79.1)(typescript@5.8.2)(vue-i18n@11.1.2(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
       '@proj-airi/drizzle-duckdb-wasm':
         specifier: workspace:^
         version: link:../../packages/drizzle-duckdb-wasm
@@ -751,10 +751,10 @@ importers:
         version: 5.2.1(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       '@vue-macros/volar':
         specifier: ^3.0.0-beta.3
-        version: 3.0.0-beta.3(rollup@4.34.9)(typescript@5.8.2)(vue-tsc@2.2.8(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
+        version: 3.0.0-beta.3(rollup@2.79.1)(typescript@5.8.2)(vue-tsc@2.2.8(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       '@vueuse/motion':
         specifier: ^2.2.6
-        version: 2.2.6(magicast@0.3.5)(rollup@4.34.9)(vue@3.5.13(typescript@5.8.2))
+        version: 2.2.6(magicast@0.3.5)(rollup@2.79.1)(vue@3.5.13(typescript@5.8.2))
       hfup:
         specifier: workspace:^
         version: link:../../packages/hfup
@@ -766,13 +766,13 @@ importers:
         version: 4.0.1
       unplugin-auto-import:
         specifier: ^19.1.1
-        version: 19.1.1(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.9))(@vueuse/core@12.8.2(typescript@5.8.2))
+        version: 19.1.1(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(@vueuse/core@12.8.2(typescript@5.8.2))
       unplugin-vue-components:
         specifier: ^28.4.1
-        version: 28.4.1(@babel/parser@7.26.7)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.9))(vue@3.5.13(typescript@5.8.2))
+        version: 28.4.1(@babel/parser@7.26.7)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(vue@3.5.13(typescript@5.8.2))
       unplugin-vue-macros:
         specifier: ^2.14.5
-        version: 2.14.5(@vueuse/core@12.8.2(typescript@5.8.2))(esbuild@0.25.0)(rollup@4.34.9)(typescript@5.8.2)(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-tsc@2.2.8(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
+        version: 2.14.5(@vueuse/core@12.8.2(typescript@5.8.2))(esbuild@0.19.12)(rollup@2.79.1)(typescript@5.8.2)(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-tsc@2.2.8(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       unplugin-vue-markdown:
         specifier: ^28.3.1
         version: 28.3.1(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))
@@ -781,13 +781,13 @@ importers:
         version: 0.12.0(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))
       vite-bundle-visualizer:
         specifier: ^1.2.1
-        version: 1.2.1(rollup@4.34.9)
+        version: 1.2.1(rollup@2.79.1)
       vite-plugin-pwa:
         specifier: ^0.21.1
         version: 0.21.1(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(workbox-build@7.3.0(@types/babel__core@7.20.5))(workbox-window@7.3.0)
       vite-plugin-vue-devtools:
         specifier: ^7.7.2
-        version: 7.7.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.34.9))(rollup@4.34.9)(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
+        version: 7.7.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(rollup@2.79.1)(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2))
       vite-plugin-vue-layouts:
         specifier: ^0.11.0
         version: 0.11.0(vite@6.2.1(@types/node@22.13.9)(jiti@2.4.2)(less@4.2.2)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.8.2)))(vue@3.5.13(typescript@5.8.2))