diff --git a/apps/playground-prompt-engineering/src/components/ChatSimulator.vue b/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
index f57062110..f36e7b057 100644
--- a/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
+++ b/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
@@ -169,7 +169,7 @@ watch(() => messages.value.length, () => {
 
 <template>
   <div class="panel flex flex-col rounded-lg bg-white shadow">
-    <div class="panel-header bg-primary flex items-center justify-between rounded-t-lg p-3 text-sm text-white font-semibold">
+    <div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-semibold">
       Chat Simulator
     </div>
 
@@ -257,7 +257,7 @@ watch(() => messages.value.length, () => {
               @keyup.enter="sendMessage"
             >
             <button
-              class="bg-primary hover:bg-primary-dark cursor-pointer rounded-lg border-none px-5 py-3 text-white font-semibold transition"
+              class="hover:bg-primary-dark cursor-pointer rounded-lg border-none bg-primary px-5 py-3 text-white font-semibold transition"
               @click="sendMessage"
             >
               Send
@@ -277,7 +277,7 @@ watch(() => messages.value.length, () => {
             <div
               v-for="(component, name) in personalityComponents"
               :key="name"
-              class="component-card hover:bg-primary-light hover:border-primary cursor-pointer border border-gray-200 rounded p-2 transition"
+              class="component-card hover:bg-primary-light cursor-pointer border border-gray-200 rounded p-2 transition hover:border-primary"
               @click="addComponent(name)"
             >
               <div class="mb-1 text-sm font-semibold">
@@ -296,7 +296,7 @@ watch(() => messages.value.length, () => {
             <div
               v-for="(component, name) in speechComponents"
               :key="name"
-              class="component-card hover:border-primary hover:bg-primary-light cursor-pointer border border-gray-200 rounded p-2 transition"
+              class="component-card hover:bg-primary-light cursor-pointer border border-gray-200 rounded p-2 transition hover:border-primary"
               @click="addSpeechComponent(name)"
             >
               <div class="mb-1 text-sm font-semibold">
diff --git a/apps/playground-prompt-engineering/src/components/ControlPanel.vue b/apps/playground-prompt-engineering/src/components/ControlPanel.vue
index 91f098d53..975292f02 100644
--- a/apps/playground-prompt-engineering/src/components/ControlPanel.vue
+++ b/apps/playground-prompt-engineering/src/components/ControlPanel.vue
@@ -72,7 +72,7 @@ function applyTemplate(template: string) {
 
 <template>
   <div class="panel rounded-lg bg-white shadow">
-    <div class="panel-header bg-primary flex items-center justify-between rounded-t-lg p-3 text-sm text-white font-semibold">
+    <div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-semibold">
       Character Configuration
     </div>
 
diff --git a/apps/playground-prompt-engineering/src/components/Notification.vue b/apps/playground-prompt-engineering/src/components/Notification.vue
index aa6014dd1..f05eb7aa8 100644
--- a/apps/playground-prompt-engineering/src/components/Notification.vue
+++ b/apps/playground-prompt-engineering/src/components/Notification.vue
@@ -19,7 +19,7 @@ provide('showNotification', showNotification)
 
 <template>
   <div
-    class="bg-primary fixed bottom-4 right-4 z-50 transform rounded p-3 px-4 text-white shadow-lg transition-transform duration-300"
+    class="fixed bottom-4 right-4 z-50 transform rounded bg-primary p-3 px-4 text-white shadow-lg transition-transform duration-300"
     :class="isActive ? 'translate-y-0' : 'translate-y-24'"
   >
     Prompt copied to clipboard!
diff --git a/apps/playground-prompt-engineering/src/components/PromptPreview.vue b/apps/playground-prompt-engineering/src/components/PromptPreview.vue
index 24c654d42..bf5950f1d 100644
--- a/apps/playground-prompt-engineering/src/components/PromptPreview.vue
+++ b/apps/playground-prompt-engineering/src/components/PromptPreview.vue
@@ -88,7 +88,7 @@ function estimateTokens(text: string) {
 
 <template>
   <div class="panel flex flex-col rounded-lg bg-white shadow">
-    <div class="panel-header bg-primary flex items-center justify-between rounded-t-lg p-3 text-sm text-white font-semibold">
+    <div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-semibold">
       Prompt Preview
       <span class="text-xs">
         Total Tokens: <span class="rounded bg-white/20 px-1.5 py-0.5 font-semibold">{{ estimateTokens(completePrompt || '') }}</span>
@@ -98,7 +98,7 @@ function estimateTokens(text: string) {
     <div class="panel-body max-h-[calc(100vh-13rem)] flex-1 overflow-y-auto p-4">
       <div v-for="(module, index) in moduleList" :key="index" class="mb-3">
         <div
-          class="hover:text-primary mb-2 flex cursor-pointer items-center justify-between text-sm text-gray font-semibold"
+          class="mb-2 flex cursor-pointer items-center justify-between text-sm text-gray font-semibold hover:text-primary"
           @click="toggleModule(module.id)"
         >
           {{ module.title }}
diff --git a/apps/stage-tamagotchi/src/components/IconAnimation.vue b/apps/stage-tamagotchi/src/components/IconAnimation.vue
index aa0adc179..976762cb7 100644
--- a/apps/stage-tamagotchi/src/components/IconAnimation.vue
+++ b/apps/stage-tamagotchi/src/components/IconAnimation.vue
@@ -54,7 +54,7 @@ function handleAnimationEnded(e: TransitionEvent) {
     }"
   >
     <div
-      bg-primary-500 fixed inset-0 transition-opacity ease-linear :style="{
+      fixed inset-0 bg-primary-500 transition-opacity ease-linear :style="{
         opacity: clsAndProps.opacity,
         transitionDuration: `${duration}ms`,
       }"
diff --git a/apps/stage-tamagotchi/src/components/Settings/ColorPalette.vue b/apps/stage-tamagotchi/src/components/Settings/ColorPalette.vue
index 274116626..24a715867 100644
--- a/apps/stage-tamagotchi/src/components/Settings/ColorPalette.vue
+++ b/apps/stage-tamagotchi/src/components/Settings/ColorPalette.vue
@@ -20,7 +20,7 @@ const settings = useSettings()
       <TooltipRoot>
         <TooltipTrigger
           transition="all ease-in-out duration-250"
-          bg-primary-500 size-6 cursor-pointer rounded-full
+          size-6 cursor-pointer rounded-full bg-primary-500
           :style="hex ? { background: hex } : { '--theme-colors-hue': DEFAULT_THEME_COLORS_HUE }"
           :class="settings.isColorSelectedForPrimary(hex) ? 'scale-150 mx-1' : 'hover:scale-110'"
           @click="settings.applyPrimaryColorFrom(hex)"
diff --git a/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue b/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue
index 28fd3bc70..05a8c9b19 100644
--- a/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/appearance/index.vue
@@ -100,7 +100,7 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions],
           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"
+          class="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 peer-checked:bg-primary-500 after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white"
         />
         {{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.rgb-on.title') }}
       </label>
diff --git a/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue b/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
index b3e767994..90eb5a8ad 100644
--- a/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue
@@ -167,13 +167,13 @@ function updateCustomModelName(value: string) {
         </div>
 
         <div
-          class="bg-primary-50 border-primary-200 dark:bg-primary-900/20 dark:border-primary-800 flex items-center gap-3 border rounded-lg p-4"
+          class="flex items-center gap-3 border border-primary-200 rounded-lg bg-primary-50 p-4 dark:border-primary-800 dark:bg-primary-900/20"
         >
-          <div i-solar:info-circle-line-duotone class="text-primary-500 dark:text-primary-400 text-2xl" />
+          <div i-solar:info-circle-line-duotone class="text-2xl text-primary-500 dark:text-primary-400" />
           <div class="flex flex-col">
             <span class="font-medium">{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.not_supported')
             }}</span>
-            <span class="dark:text-primary-400 text-primary-600 text-sm">{{
+            <span class="text-sm text-primary-600 dark:text-primary-400">{{
               t('settings.pages.modules.consciousness.sections.section.provider-model-selection.not_supported_description') }}</span>
           </div>
         </div>
diff --git a/apps/stage-web/src/components/IconAnimation.vue b/apps/stage-web/src/components/IconAnimation.vue
index aa0adc179..976762cb7 100644
--- a/apps/stage-web/src/components/IconAnimation.vue
+++ b/apps/stage-web/src/components/IconAnimation.vue
@@ -54,7 +54,7 @@ function handleAnimationEnded(e: TransitionEvent) {
     }"
   >
     <div
-      bg-primary-500 fixed inset-0 transition-opacity ease-linear :style="{
+      fixed inset-0 bg-primary-500 transition-opacity ease-linear :style="{
         opacity: clsAndProps.opacity,
         transitionDuration: `${duration}ms`,
       }"
diff --git a/apps/stage-web/src/components/Settings/ColorPalette.vue b/apps/stage-web/src/components/Settings/ColorPalette.vue
index 274116626..24a715867 100644
--- a/apps/stage-web/src/components/Settings/ColorPalette.vue
+++ b/apps/stage-web/src/components/Settings/ColorPalette.vue
@@ -20,7 +20,7 @@ const settings = useSettings()
       <TooltipRoot>
         <TooltipTrigger
           transition="all ease-in-out duration-250"
-          bg-primary-500 size-6 cursor-pointer rounded-full
+          size-6 cursor-pointer rounded-full bg-primary-500
           :style="hex ? { background: hex } : { '--theme-colors-hue': DEFAULT_THEME_COLORS_HUE }"
           :class="settings.isColorSelectedForPrimary(hex) ? 'scale-150 mx-1' : 'hover:scale-110'"
           @click="settings.applyPrimaryColorFrom(hex)"
diff --git a/apps/stage-web/src/pages/settings/appearance/index.vue b/apps/stage-web/src/pages/settings/appearance/index.vue
index 28fd3bc70..05a8c9b19 100644
--- a/apps/stage-web/src/pages/settings/appearance/index.vue
+++ b/apps/stage-web/src/pages/settings/appearance/index.vue
@@ -100,7 +100,7 @@ watch(() => [settings.usePageSpecificTransitions, settings.disableTransitions],
           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"
+          class="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 peer-checked:bg-primary-500 after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white"
         />
         {{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.rgb-on.title') }}
       </label>
diff --git a/apps/stage-web/src/pages/settings/modules/consciousness.vue b/apps/stage-web/src/pages/settings/modules/consciousness.vue
index b3e767994..90eb5a8ad 100644
--- a/apps/stage-web/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-web/src/pages/settings/modules/consciousness.vue
@@ -167,13 +167,13 @@ function updateCustomModelName(value: string) {
         </div>
 
         <div
-          class="bg-primary-50 border-primary-200 dark:bg-primary-900/20 dark:border-primary-800 flex items-center gap-3 border rounded-lg p-4"
+          class="flex items-center gap-3 border border-primary-200 rounded-lg bg-primary-50 p-4 dark:border-primary-800 dark:bg-primary-900/20"
         >
-          <div i-solar:info-circle-line-duotone class="text-primary-500 dark:text-primary-400 text-2xl" />
+          <div i-solar:info-circle-line-duotone class="text-2xl text-primary-500 dark:text-primary-400" />
           <div class="flex flex-col">
             <span class="font-medium">{{ t('settings.pages.modules.consciousness.sections.section.provider-model-selection.not_supported')
             }}</span>
-            <span class="dark:text-primary-400 text-primary-600 text-sm">{{
+            <span class="text-sm text-primary-600 dark:text-primary-400">{{
               t('settings.pages.modules.consciousness.sections.section.provider-model-selection.not_supported_description') }}</span>
           </div>
         </div>
diff --git a/eslint.config.ts b/eslint.config.ts
index aed6c7b5d..fd3c8386e 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -1,10 +1,9 @@
-// @ts-check
 import antfu from '@antfu/eslint-config'
 
-export default antfu(
+export default await antfu(
   {
     unocss: true,
-    formatters: true,
+    vue: true,
     ignores: [
       '**/assets/js/**',
       '**/assets/live2d/models/**',
diff --git a/package.json b/package.json
index 2e528c2b1..e1963e4c3 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,6 @@
     "bumpp": "^10.1.0",
     "changelogithub": "^13.13.0",
     "eslint": "^9.25.1",
-    "eslint-plugin-format": "^1.0.1",
     "lint-staged": "^15.5.1",
     "rollup": "^4.40.0",
     "simple-git-hooks": "^2.13.0",
diff --git a/packages/stage-ui/src/components/Menu/CharacterCard.vue b/packages/stage-ui/src/components/Menu/CharacterCard.vue
index bc75f59d4..b0eb9e1a6 100644
--- a/packages/stage-ui/src/components/Menu/CharacterCard.vue
+++ b/packages/stage-ui/src/components/Menu/CharacterCard.vue
@@ -115,18 +115,17 @@ const cssVars = computed(() => {
                 rounded-l-xl
               >
                 <span
-                  class="background-label mt-2" font-quicksand
+                  class="background-label mt-2"
                   leading="[1]"
-                  absolute
-                  inline-block
-                  font-semibold
+
+                  absolute inline-block font-semibold font-quicksand
                   :style="{ writingMode: 'vertical-rl' }"
                 >
                   {{ backgroundLabel }}
                 </span>
               </div>
               <!-- Title section -->
-              <div font-jura relative z-3 pb-4 pl-4 pt-2>
+              <div relative z-3 pb-4 pl-4 pt-2 font-jura>
                 <div relative z-4 class="subtitle-text">
                   <!-- Subtitle section -->
                   <div text-base font-semibold>
@@ -135,11 +134,8 @@ const cssVars = computed(() => {
                   <!-- Title section -->
                   <div
                     class="title-text"
-                    font-jura
-                    text-6xl
-                    font-bold
-                    font-italic
-                    text-stroke-1
+
+                    text-6xl font-bold font-jura font-italic text-stroke-1
                     :style="{ paintOrder: 'stroke fill' }"
                     leading="[0.75]"
                   >
@@ -166,7 +162,7 @@ const cssVars = computed(() => {
             <!-- Divider section -->
             <div mx-5 h-0.5 rounded-full class="divider" />
             <!-- Info section -->
-            <div class="description" max-h="[4.5rem]" font-quicksand mx-5 mb-4 mt-2 h-full>
+            <div class="description" max-h="[4.5rem]" mx-5 mb-4 mt-2 h-full font-quicksand>
               <div h-full text-base>
                 {{ description }}
               </div>
diff --git a/packages/stage-ui/src/components/Menu/RadioCardDetail.vue b/packages/stage-ui/src/components/Menu/RadioCardDetail.vue
index e0b3f5a49..c8532ce8a 100644
--- a/packages/stage-ui/src/components/Menu/RadioCardDetail.vue
+++ b/packages/stage-ui/src/components/Menu/RadioCardDetail.vue
@@ -127,7 +127,7 @@ function toggleExpansion() {
         <!-- Expand/collapse button for long descriptions -->
         <button
           v-if="showExpandCollapse && description.length > expandCollapseThreshold"
-          class="text-primary-500 dark:text-primary-600 mt-0.5 inline-flex items-center text-xs"
+          class="mt-0.5 inline-flex items-center text-xs text-primary-500 dark:text-primary-600"
           @click.prevent="toggleExpansion"
         >
           <span>{{ isExpanded ? 'Show less' : 'Show more' }}</span>
diff --git a/packages/stage-ui/src/components/Menu/RadioCardSimple.vue b/packages/stage-ui/src/components/Menu/RadioCardSimple.vue
index 54b68ce95..d7103c5e6 100644
--- a/packages/stage-ui/src/components/Menu/RadioCardSimple.vue
+++ b/packages/stage-ui/src/components/Menu/RadioCardSimple.vue
@@ -33,7 +33,7 @@ const modelValue = defineModel<string>({ required: true })
       type="radio"
       :name="name"
       :value="value"
-      class="[&:checked+div]:border-primary-500 dark:[&:checked+div]:border-primary-400 absolute opacity-0 [&:checked+div_.radio-dot]:opacity-100"
+      class="absolute opacity-0 [&:checked+div]:border-primary-500 [&:checked+div_.radio-dot]:opacity-100 dark:[&:checked+div]:border-primary-400"
     >
     <div
       class="radio-circle absolute left-2 top-2 size-5 rounded-full"
diff --git a/packages/stage-ui/src/components/Misc/Steppers/Steppers.vue b/packages/stage-ui/src/components/Misc/Steppers/Steppers.vue
index 609d55ecd..0fce3bfe4 100644
--- a/packages/stage-ui/src/components/Misc/Steppers/Steppers.vue
+++ b/packages/stage-ui/src/components/Misc/Steppers/Steppers.vue
@@ -78,7 +78,7 @@ function goToStep(index: number) {
           <slot name="step" :step="step" :index="index" :is-active="index === value">
             <!-- Default step rendering -->
             <div class="flex flex-col gap-1">
-              <p v-if="typeof step === 'object' && step !== null && 'title' in step" class="text-primary-600 dark:text-primary-300 mb-4 pb-0 pt-0 text-xl font-bold">
+              <p v-if="typeof step === 'object' && step !== null && 'title' in step" class="mb-4 pb-0 pt-0 text-xl text-primary-600 font-bold dark:text-primary-300">
                 {{ step.title }}
               </p>
               <p v-if="typeof step === 'object' && step !== null && 'description' in step" class="text-sm text-neutral-600 dark:text-neutral-300">
@@ -133,7 +133,7 @@ function goToStep(index: number) {
           <slot name="next-button" :next="next" :is-disabled="false" :is-last="isLastStep">
             <!-- Default next/finish button -->
             <button
-              class="bg-primary-500 hover:bg-primary-600 rounded px-3 py-1 text-xs text-white disabled:cursor-not-allowed disabled:opacity-50"
+              class="rounded bg-primary-500 px-3 py-1 text-xs text-white disabled:cursor-not-allowed hover:bg-primary-600 disabled:opacity-50"
               @click="next"
             >
               {{ isLastStep ? 'Finish' : 'Next' }}
diff --git a/packages/stage-ui/src/components/Misc/Steps/Steps.story.vue b/packages/stage-ui/src/components/Misc/Steps/Steps.story.vue
index 17e59f3b7..0bc38e89b 100644
--- a/packages/stage-ui/src/components/Misc/Steps/Steps.story.vue
+++ b/packages/stage-ui/src/components/Misc/Steps/Steps.story.vue
@@ -188,7 +188,7 @@ function skipTTSSetup() {
               />
               <button
                 v-else-if="stepper8.currentStep.value < stepper8.totalSteps"
-                class="bg-primary-500 hover:bg-primary-600 rounded px-2 py-0.5 text-xs text-white"
+                class="rounded bg-primary-500 px-2 py-0.5 text-xs text-white hover:bg-primary-600"
                 @click.stop="updateStep(stepper8, step.id + 1)"
               >
                 Next
@@ -304,7 +304,7 @@ function skipTTSSetup() {
 
           <!-- Current Step Content -->
           <div class="p-4 space-y-3">
-            <p class="text-primary-600 dark:text-primary-300 text-sm font-medium">
+            <p class="text-sm text-primary-600 font-medium dark:text-primary-300">
               Step {{ setupGuide.currentStep.value }}: {{ setupGuide.steps[setupGuide.currentStep.value - 1]?.title }}
             </p>
             <p class="text-sm text-neutral-600 dark:text-neutral-300">
@@ -313,7 +313,7 @@ function skipTTSSetup() {
             <!-- Special actions for step 6 (TTS decision) -->
             <div v-if="setupGuide.currentStep.value === 6" class="flex gap-2 pt-2">
               <button
-                class="bg-primary-500 hover:bg-primary-600 rounded px-3 py-1 text-xs text-white"
+                class="rounded bg-primary-500 px-3 py-1 text-xs text-white hover:bg-primary-600"
                 @click="nextSetupGuideStep"
               >
                 Yes, setup TTS
@@ -356,7 +356,7 @@ function skipTTSSetup() {
               </button>
               <button
                 :disabled="setupGuide.currentStep.value >= setupGuide.totalSteps"
-                class="bg-primary-500 hover:bg-primary-600 rounded px-3 py-1 text-xs text-white disabled:cursor-not-allowed disabled:opacity-50"
+                class="rounded bg-primary-500 px-3 py-1 text-xs text-white disabled:cursor-not-allowed hover:bg-primary-600 disabled:opacity-50"
                 @click="nextSetupGuideStep"
               >
                 {{ setupGuide.currentStep.value >= setupGuide.totalSteps ? 'Finish' : 'Next' }}
diff --git a/packages/stage-ui/src/components/Scenes/Live2D.vue b/packages/stage-ui/src/components/Scenes/Live2D.vue
index 2096e9bd2..6c9d3e94e 100644
--- a/packages/stage-ui/src/components/Scenes/Live2D.vue
+++ b/packages/stage-ui/src/components/Scenes/Live2D.vue
@@ -41,7 +41,7 @@ const { live2dCurrentMotion } = storeToRefs(useSettings())
             :aria-checked="show"
             name="showLive2DViewerInspector"
             type="checkbox"
-            hidden appearance-none outline-none
+            appearance-none outline-none hidden
           >
           <div select-none>
             <div i-solar:bug-bold-duotone />
diff --git a/packages/stage-ui/src/components/Scenes/VRM.vue b/packages/stage-ui/src/components/Scenes/VRM.vue
index 6b130b208..3b440ef8a 100644
--- a/packages/stage-ui/src/components/Scenes/VRM.vue
+++ b/packages/stage-ui/src/components/Scenes/VRM.vue
@@ -74,7 +74,7 @@ defineExpose({
             :aria-checked="show"
             name="showLive2DViewerInspector"
             type="checkbox"
-            hidden appearance-none outline-none
+            appearance-none outline-none hidden
           >
           <div select-none>
             <div i-solar:bug-bold-duotone />
diff --git a/packages/stage-ui/stories/Colors.story.vue b/packages/stage-ui/stories/Colors.story.vue
index a5d1588de..eb927d7e6 100644
--- a/packages/stage-ui/stories/Colors.story.vue
+++ b/packages/stage-ui/stories/Colors.story.vue
@@ -45,7 +45,7 @@ const opacities = [5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
             <div
 
               bg="light op-80"
-              text-primary-700 dark:text-primary-300 rounded-md px-1 py-0.5 text-xs font-mono op-0 dark:bg-dark
+              rounded-md px-1 py-0.5 text-xs text-primary-700 font-mono op-0 dark:bg-dark dark:text-primary-300
               transition="opacity duration-100"
               class="color-label"
             >
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1848b3f98..011e54cf7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,9 +93,6 @@ importers:
       eslint:
         specifier: ^9.25.1
         version: 9.25.1(jiti@2.4.2)
-      eslint-plugin-format:
-        specifier: ^1.0.1
-        version: 1.0.1(eslint@9.25.1(jiti@2.4.2))
       lint-staged:
         specifier: ^15.5.1
         version: 15.5.1
@@ -5321,6 +5318,9 @@ packages:
   '@xsai-ext/providers-local@0.2.0-beta.5':
     resolution: {integrity: sha512-n3isSLxkTQZDW1Ydtj/Mbt332M61yRmTR3+UfjWRtTFnatuOO6PLR7gqgGJZNhaFkvnZxPLsQPcP4cj1KdOLCg==}
 
+  '@xsai-ext/shared-providers@0.2.0':
+    resolution: {integrity: sha512-BSU+hcv5rFnW+c0Oq7fIIqToQyoRar7pLTK20zCfqRsnCr4F4RM6+r0YG3DxLpFZPVtRgG5KbvuWCgyN/3epUQ==}
+
   '@xsai-ext/shared-providers@0.2.0-beta.5':
     resolution: {integrity: sha512-HNiFi19CzPIwxFiJbu70YDNRhwscfC9yFZ2b24dpaRDHsDAMlDDR9buuYJjeN+16EmBp1ODD+T4Q6yDgNpfk0g==}
 
@@ -5353,11 +5353,14 @@ packages:
   '@xsai/model@0.2.0-beta.5':
     resolution: {integrity: sha512-iIgrOTtScEliAfUeoK8rm562998XWbERgRiw9iq236JBI5M5jbbGifipTOPs1wbItLVw+m2Ycchpkgr+QPUZJg==}
 
+  '@xsai/shared-chat@0.2.0':
+    resolution: {integrity: sha512-mzTY3ExsUWVKNgTSSGR1G9htfnkmN2l8qsmX02HBJ0Rqj8dneigd6dX5LNRlrUoyddBtOerxblPsHyfXOSWNHQ==}
+
   '@xsai/shared-chat@0.2.0-beta.5':
     resolution: {integrity: sha512-GbjXeMFylP07sNlSpJIIsJysi866tUnTIw+yFLL5G9i8Bi8uHiBxcJJNxw5P5GUXJ1nuq5jEe4Vo+Gsnz0Xd1Q==}
 
-  '@xsai/shared-chat@0.2.0-beta.6':
-    resolution: {integrity: sha512-gzeMfPu7NHcHYeg1kIeET99wtrNezMbU6T85yk8xPovqJttcEkxpST0dAvXhPtwCyg4o3SYkKtT2Etl1xm3UEw==}
+  '@xsai/shared@0.2.0':
+    resolution: {integrity: sha512-fFMJ1T/9P4o7iOmLvc4/UIFMy2tYkXUmL8aJWULmV36Ddq/gYYOndBZJZfoy3mNiDtxgDBkmIBMdIOFQu9iamg==}
 
   '@xsai/shared@0.2.0-beta.2':
     resolution: {integrity: sha512-IWMv1lO6BqvX7PiqVlFLuVnF1eXjQ4V0ustTADIk21eacVoaS58lPs+XXnqyy354xX+FQohlPNNKD89lpkRlOQ==}
@@ -11653,8 +11656,8 @@ packages:
     resolution: {integrity: sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==}
     engines: {node: '>=0.4.0'}
 
-  xsschema@0.2.0-beta.5:
-    resolution: {integrity: sha512-GecO7h/j+E7QOUbd5ssAd0ojYNj8stNdlkU3h8Sr/7N4moGcfVd+xGLOimKTKePORTORCmTteidM0/8bvhsEJQ==}
+  xsschema@0.2.0:
+    resolution: {integrity: sha512-UPPI+jP6pn/49q8w7Faz4CYRn33VvG7ngfNQ79nwqTauFP4/m3VusB095a4d5uZ4/TNip5GDxASpzKDoEouN5Q==}
     peerDependencies:
       '@valibot/to-json-schema': ^1.0.0
       '@zod/mini': ^4.0.0-beta
@@ -11676,8 +11679,8 @@ packages:
       zod-to-json-schema:
         optional: true
 
-  xsschema@0.2.0-beta.6:
-    resolution: {integrity: sha512-xlGzeFtQV3nVEmrJ9PH3RI3tABDbGfPva9P4NvbFeO3NZjc/dmR4Ne6YFKb7G6DEfaXHaz6R/HSpGXWPgkovNw==}
+  xsschema@0.2.0-beta.5:
+    resolution: {integrity: sha512-GecO7h/j+E7QOUbd5ssAd0ojYNj8stNdlkU3h8Sr/7N4moGcfVd+xGLOimKTKePORTORCmTteidM0/8bvhsEJQ==}
     peerDependencies:
       '@valibot/to-json-schema': ^1.0.0
       '@zod/mini': ^4.0.0-beta
@@ -12942,11 +12945,14 @@ snapshots:
       picomatch: 4.0.2
       which: 4.0.0
 
-  '@dprint/formatter@0.3.0': {}
+  '@dprint/formatter@0.3.0':
+    optional: true
 
-  '@dprint/markdown@0.17.8': {}
+  '@dprint/markdown@0.17.8':
+    optional: true
 
-  '@dprint/toml@0.6.4': {}
+  '@dprint/toml@0.6.4':
+    optional: true
 
   '@drizzle-team/brocli@0.10.2': {}
 
@@ -16500,21 +16506,25 @@ snapshots:
 
   '@xsai-ext/providers-cloud@0.2.0-beta.5':
     dependencies:
-      '@xsai-ext/shared-providers': 0.2.0-beta.6
-      '@xsai/shared': 0.2.0-beta.6
+      '@xsai-ext/shared-providers': 0.2.0
+      '@xsai/shared': 0.2.0
 
   '@xsai-ext/providers-local@0.2.0-beta.5':
     dependencies:
-      '@xsai-ext/shared-providers': 0.2.0-beta.6
-      '@xsai/shared': 0.2.0-beta.6
+      '@xsai-ext/shared-providers': 0.2.0
+      '@xsai/shared': 0.2.0
+
+  '@xsai-ext/shared-providers@0.2.0':
+    dependencies:
+      '@xsai/shared': 0.2.0
 
   '@xsai-ext/shared-providers@0.2.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.2.0-beta.6
+      '@xsai/shared': 0.2.0
 
   '@xsai-ext/shared-providers@0.2.0-beta.6':
     dependencies:
-      '@xsai/shared': 0.2.0-beta.6
+      '@xsai/shared': 0.2.0
 
   '@xsai-transformers/embed@0.0.5(web-worker@1.5.0)':
     dependencies:
@@ -16538,32 +16548,34 @@ snapshots:
 
   '@xsai/embed@0.2.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.2.0-beta.6
+      '@xsai/shared': 0.2.0
 
   '@xsai/generate-speech@0.2.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.2.0-beta.6
+      '@xsai/shared': 0.2.0
 
   '@xsai/generate-text@0.2.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.2.0-beta.6
-      '@xsai/shared-chat': 0.2.0-beta.6
+      '@xsai/shared': 0.2.0
+      '@xsai/shared-chat': 0.2.0
 
   '@xsai/generate-transcription@0.2.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.2.0-beta.6
+      '@xsai/shared': 0.2.0
 
   '@xsai/model@0.2.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.2.0-beta.6
+      '@xsai/shared': 0.2.0
+
+  '@xsai/shared-chat@0.2.0':
+    dependencies:
+      '@xsai/shared': 0.2.0
 
   '@xsai/shared-chat@0.2.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.2.0-beta.6
+      '@xsai/shared': 0.2.0
 
-  '@xsai/shared-chat@0.2.0-beta.6':
-    dependencies:
-      '@xsai/shared': 0.2.0-beta.6
+  '@xsai/shared@0.2.0': {}
 
   '@xsai/shared@0.2.0-beta.2': {}
 
@@ -16573,13 +16585,13 @@ snapshots:
 
   '@xsai/stream-text@0.2.0-beta.5':
     dependencies:
-      '@xsai/shared-chat': 0.2.0-beta.6
+      '@xsai/shared-chat': 0.2.0
 
   '@xsai/tool@0.2.0-beta.5(zod-to-json-schema@3.24.5(zod@3.24.3))(zod@3.24.3)':
     dependencies:
-      '@xsai/shared': 0.2.0-beta.6
-      '@xsai/shared-chat': 0.2.0-beta.6
-      xsschema: 0.2.0-beta.6(zod-to-json-schema@3.24.5(zod@3.24.3))(zod@3.24.3)
+      '@xsai/shared': 0.2.0
+      '@xsai/shared-chat': 0.2.0
+      xsschema: 0.2.0(zod-to-json-schema@3.24.5(zod@3.24.3))(zod@3.24.3)
     transitivePeerDependencies:
       - '@valibot/to-json-schema'
       - '@zod/mini'
@@ -16590,7 +16602,7 @@ snapshots:
 
   '@xsai/utils-chat@0.2.0-beta.5':
     dependencies:
-      '@xsai/shared-chat': 0.2.0-beta.6
+      '@xsai/shared-chat': 0.2.0
 
   abbrev@1.1.1:
     optional: true
@@ -18068,6 +18080,7 @@ snapshots:
     dependencies:
       eslint: 9.25.1(jiti@2.4.2)
       prettier-linter-helpers: 1.0.0
+    optional: true
 
   eslint-import-resolver-node@0.3.9:
     dependencies:
@@ -18087,7 +18100,8 @@ snapshots:
     dependencies:
       eslint: 9.25.1(jiti@2.4.2)
 
-  eslint-parser-plain@0.1.1: {}
+  eslint-parser-plain@0.1.1:
+    optional: true
 
   eslint-plugin-antfu@3.1.1(eslint@9.25.1(jiti@2.4.2)):
     dependencies:
@@ -18115,6 +18129,7 @@ snapshots:
       eslint-parser-plain: 0.1.1
       prettier: 3.4.2
       synckit: 0.9.2
+    optional: true
 
   eslint-plugin-import-x@4.10.6(eslint@9.25.1(jiti@2.4.2))(typescript@5.8.3):
     dependencies:
@@ -18573,7 +18588,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
-  fast-diff@1.3.0: {}
+  fast-diff@1.3.0:
+    optional: true
 
   fast-glob@3.3.3:
     dependencies:
@@ -21783,8 +21799,10 @@ snapshots:
   prettier-linter-helpers@1.0.0:
     dependencies:
       fast-diff: 1.3.0
+    optional: true
 
-  prettier@3.4.2: {}
+  prettier@3.4.2:
+    optional: true
 
   pretty-bytes@5.6.0: {}
 
@@ -24535,14 +24553,14 @@ snapshots:
 
   xmlhttprequest-ssl@2.1.2: {}
 
-  xsschema@0.2.0-beta.5(@valibot/to-json-schema@1.0.0-rc.0(valibot@1.0.0-beta.9(typescript@5.8.3)))(zod-to-json-schema@3.24.5(zod@3.24.3))(zod@3.24.3):
+  xsschema@0.2.0(zod-to-json-schema@3.24.5(zod@3.24.3))(zod@3.24.3):
     optionalDependencies:
-      '@valibot/to-json-schema': 1.0.0-rc.0(valibot@1.0.0-beta.9(typescript@5.8.3))
       zod: 3.24.3
       zod-to-json-schema: 3.24.5(zod@3.24.3)
 
-  xsschema@0.2.0-beta.6(zod-to-json-schema@3.24.5(zod@3.24.3))(zod@3.24.3):
+  xsschema@0.2.0-beta.5(@valibot/to-json-schema@1.0.0-rc.0(valibot@1.0.0-beta.9(typescript@5.8.3)))(zod-to-json-schema@3.24.5(zod@3.24.3))(zod@3.24.3):
     optionalDependencies:
+      '@valibot/to-json-schema': 1.0.0-rc.0(valibot@1.0.0-beta.9(typescript@5.8.3))
       zod: 3.24.3
       zod-to-json-schema: 3.24.5(zod@3.24.3)