Studio 2
@@ -255,6 +255,7 @@ import {randomSeed} from '~/shared/studio2/seed.mjs'
import {DEFAULT_MUSIC_LYRICS,DEFAULT_MUSIC_TAGS} from '~/utils/music'
const xaigen=useRuntimeConfig().public.studio==='xaigen'
+const {displayMode}=useDisplayMode()
const picker=ref('')
const uploading=ref(false),uploadMessage=ref('')
const revealed=ref>(new Set())
diff --git a/composables/useDisplayMode.ts b/composables/useDisplayMode.ts
new file mode 100644
index 0000000..8f8dec6
--- /dev/null
+++ b/composables/useDisplayMode.ts
@@ -0,0 +1,82 @@
+export type DisplayMode = 'classic' | 'studio'
+
+const STORAGE_KEY = 'aigen.displayMode'
+
+function parseMode(raw: unknown): DisplayMode | null {
+ const value = String(raw || '').trim().toLowerCase()
+ return value === 'classic' || value === 'studio' ? value : null
+}
+
+function readStored(): DisplayMode {
+ if (!import.meta.client) return 'studio'
+ try {
+ return parseMode(localStorage.getItem(STORAGE_KEY)) || 'studio'
+ } catch {
+ return 'studio'
+ }
+}
+
+function writeStored(mode: DisplayMode) {
+ if (!import.meta.client) return
+ try {
+ localStorage.setItem(STORAGE_KEY, mode)
+ } catch { /* ignore quota / private mode */ }
+}
+
+/** Classic | Studio chrome skin. One Bench tree; layout only. */
+export function useDisplayMode() {
+ const route = useRoute()
+ const displayMode = useState('aigen.displayMode', () => 'studio')
+ const sessionOverride = useState('aigen.displayMode.session', () => null)
+ const hydrated = useState('aigen.displayMode.hydrated', () => false)
+
+ const resolved = computed(() => {
+ const fromQuery = parseMode(route.query.display)
+ if (fromQuery) return fromQuery
+ if (sessionOverride.value) return sessionOverride.value
+ return displayMode.value
+ })
+
+ function setDisplayMode(mode: DisplayMode, opts?: { persist?: boolean; session?: boolean }) {
+ const persist = opts?.persist !== false
+ if (opts?.session) sessionOverride.value = mode
+ else sessionOverride.value = null
+ displayMode.value = mode
+ if (persist) writeStored(mode)
+ }
+
+ function hydrate() {
+ if (hydrated.value) return
+ hydrated.value = true
+ const fromQuery = parseMode(route.query.display)
+ if (fromQuery) {
+ sessionOverride.value = fromQuery
+ return
+ }
+ displayMode.value = readStored()
+ }
+
+ if (import.meta.client) {
+ onMounted(hydrate)
+ watch(
+ () => route.query.display,
+ (raw) => {
+ const fromQuery = parseMode(raw)
+ if (fromQuery) sessionOverride.value = fromQuery
+ else if (sessionOverride.value && !parseMode(route.query.display)) {
+ // Drop session override when query cleared; keep stored preference.
+ sessionOverride.value = null
+ displayMode.value = readStored()
+ }
+ }
+ )
+ }
+
+ return {
+ displayMode: resolved,
+ storedDisplayMode: displayMode,
+ setDisplayMode,
+ isStudio: computed(() => resolved.value === 'studio'),
+ isClassic: computed(() => resolved.value === 'classic')
+ }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 709e39f..ba40732 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,7 +4,7 @@ const xaigenStudio = /^xaigen$/i.test(String(process.env.NUXT_PUBLIC_STUDIO || '
export default defineNuxtConfig({
compatibilityDate: '2025-08-01',
modules: ['@nuxtjs/tailwindcss'],
- css: ['~/assets/css/main.css'],
+ css: ['~/assets/css/main.css', '~/assets/css/display.css'],
app: {
head: {
title: 'AIGen — MiniMax H3',