npm - create-super-admin - Versions diffs - 0.0.0-bootstrap.0 - Mend

create-super-admin 0.0.0-bootstrap.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/README.md +9 -0
package/dist/cli.d.ts +3 -0
package/dist/cli.d.ts.map +1 -0
package/dist/cli.js +4 -0
package/dist/generate-starter.d.ts +9 -0
package/dist/generate-starter.d.ts.map +1 -0
package/dist/generate-starter.js +150 -0
package/dist/index.d.ts +8 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +3 -0
package/dist/parse-args.d.ts +21 -0
package/dist/parse-args.d.ts.map +1 -0
package/dist/parse-args.js +104 -0
package/dist/run-create-super-admin.d.ts +8 -0
package/dist/run-create-super-admin.d.ts.map +1 -0
package/dist/run-create-super-admin.js +33 -0
package/dist/templates.d.ts +22 -0
package/dist/templates.d.ts.map +1 -0
package/dist/templates.js +998 -0
package/dist/theme-options.d.ts +14 -0
package/dist/theme-options.d.ts.map +1 -0
package/dist/theme-options.js +35 -0
package/package.json +43 -0

package/dist/templates.js ADDED Viewed

@@ -0,0 +1,998 @@
+import { themeDefinitions } from './theme-options.js';
+const SUPER_ADMIN_VERSION_RANGE = '^0.1.0';
+function formatStringList(values) {
+    return values.map((value) => `'${value}'`).join(', ');
+}
+export function createPackageJson(input) {
+    const dependencies = {
+        '@super-admin-org/core': SUPER_ADMIN_VERSION_RANGE,
+        '@super-admin-org/theme': SUPER_ADMIN_VERSION_RANGE,
+        '@super-admin-org/ui': SUPER_ADMIN_VERSION_RANGE,
+        '@tanstack/vue-query': '^5.0.0',
+        'lucide-vue-next': '^0.555.0',
+        pinia: '^3.0.0',
+        vue: '^3.5.0',
+        'vue-i18n': '^11.4.4',
+        'vue-router': '^4.5.0'
+    };
+    for (const themeId of input.themes.installed) {
+        dependencies[themeDefinitions[themeId].packageName] = SUPER_ADMIN_VERSION_RANGE;
+    }
+    return `${JSON.stringify({
+        name: input.packageName,
+        version: '0.0.0',
+        private: true,
+        type: 'module',
+        scripts: {
+            dev: 'vite',
+            build: 'vue-tsc --noEmit && vite build',
+            typecheck: 'vue-tsc --noEmit',
+            preview: 'vite preview'
+        },
+        dependencies,
+        devDependencies: {
+            '@tailwindcss/vite': '^4.0.0',
+            '@vitejs/plugin-vue': '^6.0.0',
+            '@vue/tsconfig': '^0.8.0',
+            tailwindcss: '^4.0.0',
+            typescript: '^5.0.0',
+            vite: '^7.0.0',
+            'vue-tsc': '^3.0.0'
+        }
+    }, null, 2)}\n`;
+}
+export function createIndexHtml(projectName) {
+    return `<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+`;
+}
+export function createViteConfig() {
+    return `import { fileURLToPath, URL } from 'node:url'
+import tailwindcss from '@tailwindcss/vite'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
+`;
+}
+export function createTsconfig() {
+    return `${JSON.stringify({
+        extends: '@vue/tsconfig/tsconfig.dom.json',
+        compilerOptions: {
+            baseUrl: '.',
+            lib: ['ES2022', 'DOM', 'DOM.Iterable'],
+            paths: {
+                '@/*': ['src/*']
+            },
+            target: 'ES2022',
+            strict: true,
+            noEmit: true,
+            types: ['vite/client']
+        },
+        include: ['super-admin.config.ts', 'src/**/*.ts', 'src/**/*.vue', 'src/**/*.d.ts']
+    }, null, 2)}\n`;
+}
+export function createReadme(projectName, packageManager) {
+    return `# ${projectName}
+Super Admin starter project generated by \`create-super-admin\`.
+## Scripts
+\`\`\`bash
+${packageManager} install
+${packageManager} run dev
+${packageManager} run typecheck
+${packageManager} run build
+\`\`\`
+## Guide
+- 删除示例、连接 API、添加测试或 lint：查看 Super Admin 文档。
+- 修改主题：编辑 \`super-admin.config.ts\` 和 \`src/super-admin/theme-registry.generated.ts\`。
+- 修改语言：编辑 \`src/i18n/\`。
+`;
+}
+export function createSuperAdminConfig(input) {
+    return `export default {
+  themes: {
+    installed: [${formatStringList(input.themes.installed)}],
+    default: '${input.themes.default}',
+    switcher: '${input.themes.installed.length > 1 ? 'auto' : 'off'}'
+  },
+  i18n: {
+    installed: [${formatStringList(input.i18n.installed)}],
+    defaultLocale: '${input.i18n.default}',
+    switcher: ${String(input.i18n.switcher)}
+  }
+} as const
+`;
+}
+export function createThemeRegistry(themes, defaultTheme) {
+    const imports = themes
+        .map((themeId) => {
+        const definition = themeDefinitions[themeId];
+        return `import { ${definition.profileExport} } from '${definition.packageName}'`;
+    })
+        .join('\n');
+    const profileExports = themes.map((themeId) => themeDefinitions[themeId].profileExport);
+    const fallbackProfile = themeDefinitions[defaultTheme].profileExport;
+    return `import type { DesignProfile, DesignProfileId } from '@super-admin-org/core'
+${imports}
+export const builtInDesignProfiles = [${profileExports.join(', ')}] as const
+export function getBuiltInDesignProfile(profileId: DesignProfileId): DesignProfile {
+  return builtInDesignProfiles.find((profile) => profile.id === profileId) ?? ${fallbackProfile}
+}
+`;
+}
+export function createEnvDts() {
+    return `declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}
+interface ImportMetaEnv {
+  readonly VITE_SUPER_ADMIN_ASSISTANT_ENDPOINT?: string
+}
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+import type { PageShellMeta } from '@super-admin-org/core'
+declare module 'vue-router' {
+  interface RouteMeta extends Partial<PageShellMeta> {
+    authLayout?: boolean
+    workspaceTitle?: string
+  }
+}
+`;
+}
+export function createUsersApi() {
+    return `import { createPageListResult } from '@super-admin-org/core'
+import { mockUsers } from '@/api/mock/users.mock'
+import type { MockUser } from '@/api/mock/users.mock'
+import type { UserListParams, UserListResult, UserRecord } from '@/modules/users/users.types'
+const LOADING_DELAY_MS = 700
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}
+function matchesKeyword(user: UserRecord, keyword: string): boolean {
+  const term = keyword.trim().toLowerCase()
+  if (!term) {
+    return true
+  }
+  return [user.name, user.email, user.role, user.status, user.region].some((value) => value.toLowerCase().includes(term))
+}
+function normalizeUser(user: MockUser): UserRecord {
+  return {
+    id: user.userId,
+    name: user.displayName,
+    email: user.emailAddress,
+    role: user.roleName,
+    status: user.state,
+    region: user.regionName,
+    notes: user.profileNotes
+  }
+}
+function filterUsers(params: UserListParams): UserRecord[] {
+  return mockUsers.map(normalizeUser).filter((user) => {
+    const matchesStatus = params.status === 'all' || user.status === params.status
+    return matchesStatus && matchesKeyword(user, params.keyword ?? '')
+  })
+}
+export async function listUsers(params: UserListParams): Promise<UserListResult> {
+  if (params.scenario === 'error') {
+    throw new Error('Unable to load users')
+  }
+  if (params.scenario === 'loading') {
+    await delay(LOADING_DELAY_MS)
+  }
+  const filteredUsers = params.scenario === 'empty' ? [] : filterUsers(params)
+  const start = (params.page - 1) * params.pageSize
+  const end = start + params.pageSize
+  return createPageListResult(filteredUsers.slice(start, end), filteredUsers.length, params)
+}
+`;
+}
+export function createAuthTypes() {
+    return `export type AuthFieldErrors<Field extends string = string> = Partial<Record<Field, string>>
+export type LoginInput = {
+  email: string
+  password: string
+}
+export type RegisterInput = {
+  name: string
+  email: string
+  organization: string
+  password: string
+}
+export type AuthUser = {
+  email: string
+  id: string
+  name: string
+  role: string
+}
+export type AuthSession = {
+  permissions: string[]
+  token: string
+  tokenType: 'Bearer'
+  user: AuthUser
+}
+`;
+}
+export function createAuthSession() {
+    return `import type { AuthSession } from './auth.types'
+export function createTemplateAuthSession(): AuthSession {
+  return {
+    permissions: ['users:read'],
+    token: 'template-session-token',
+    tokenType: 'Bearer',
+    user: {
+      email: 'mira.owner@example.com',
+      id: 'template-user',
+      name: 'Mira Chen',
+      role: 'Owner'
+    }
+  }
+}
+`;
+}
+export function createAuthSessionStore() {
+    return `import { defineStore } from 'pinia'
+import { computed, shallowRef } from 'vue'
+import type { AuthSession } from '@/modules/auth/auth.types'
+const STORAGE_KEY = 'super-admin:auth-session'
+function getStorage(): Storage | null {
+  return typeof window === 'undefined' ? null : window.localStorage
+}
+export const useAuthSessionStore = defineStore('authSession', () => {
+  const session = shallowRef<AuthSession | null>(null)
+  const isAuthenticated = computed(() => session.value !== null)
+  const authorizationHeader = computed(() => (session.value ? \`\${session.value.tokenType} \${session.value.token}\` : undefined))
+  const currentUser = computed(() => session.value?.user ?? null)
+  function setTemplateSession(nextSession: AuthSession): void {
+    session.value = nextSession
+    getStorage()?.removeItem(STORAGE_KEY)
+  }
+  function clearSession(): void {
+    session.value = null
+    getStorage()?.removeItem(STORAGE_KEY)
+  }
+  return {
+    authorizationHeader,
+    clearSession,
+    currentUser,
+    isAuthenticated,
+    session,
+    setTemplateSession
+  }
+})
+`;
+}
+export function createLoginPage() {
+    return `<script setup lang="ts">
+import { ArrowRight, KeyRound } from 'lucide-vue-next'
+import { computed, reactive, shallowRef } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { AdminAlert, AdminButton, AdminField, AdminTextInput, AdminValidationSummary } from '@super-admin-org/ui'
+import { resolvePostLoginPath } from '@/router/auth-guard'
+import { useAuthSessionStore } from '@/stores/auth-session.store'
+import { createTemplateAuthSession } from './auth-session'
+import AuthLayout from './components/AuthLayout.vue'
+import { validateLoginInput } from './auth.validation'
+import type { AuthFieldErrors, LoginInput } from './auth.types'
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
+const session = useAuthSessionStore()
+const form = reactive<LoginInput>({
+  email: 'mira.owner@example.com',
+  password: 'reference-admin'
+})
+const fieldErrors = shallowRef<AuthFieldErrors<keyof LoginInput>>({})
+const submitError = shallowRef('')
+const isSubmitting = shallowRef(false)
+const validationMessages = computed(() => Object.values(fieldErrors.value).filter((message) => message !== undefined))
+async function submitLogin(): Promise<void> {
+  fieldErrors.value = validateLoginInput(form, t)
+  submitError.value = ''
+  if (Object.keys(fieldErrors.value).length > 0) {
+    return
+  }
+  isSubmitting.value = true
+  try {
+    session.setTemplateSession(createTemplateAuthSession())
+    await router.push(resolvePostLoginPath(route.query.redirect))
+  } catch (error) {
+    submitError.value = error instanceof Error ? error.message : t('auth.login.unableToSignIn')
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+<template>
+  <AuthLayout
+    :eyebrow="t('auth.login.eyebrow')"
+    :title="t('auth.login.title')"
+    :description="t('auth.login.description')"
+  >
+    <div class="grid gap-5">
+      <div>
+        <div class="inline-flex size-11 items-center justify-center rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--surface-sunken)] text-[var(--primary)] shadow-[var(--glow)]">
+          <KeyRound class="size-5" />
+        </div>
+        <h2 class="mt-4 [font-family:var(--font-display)] text-3xl leading-tight">{{ t('auth.login.heading') }}</h2>
+        <p class="mt-2 text-sm leading-6 text-[var(--muted-foreground)]">
+          {{ t('auth.login.intro') }}
+        </p>
+      </div>
+      <AdminAlert
+        v-if="submitError"
+        tone="danger"
+        :title="t('auth.login.failedTitle')"
+        :description="submitError"
+      />
+      <AdminValidationSummary :errors="validationMessages" />
+      <form class="grid gap-4" @submit.prevent="submitLogin">
+        <AdminField :label="t('auth.login.email')" for="auth-email" required :error="fieldErrors.email">
+          <AdminTextInput id="auth-email" v-model="form.email" type="email" :invalid="Boolean(fieldErrors.email)" autocomplete="email" />
+        </AdminField>
+        <AdminField :label="t('auth.login.password')" for="auth-password" required :error="fieldErrors.password">
+          <AdminTextInput id="auth-password" v-model="form.password" type="password" :invalid="Boolean(fieldErrors.password)" autocomplete="current-password" />
+        </AdminField>
+        <AdminButton type="submit" variant="primary" :disabled="isSubmitting" class="w-full">
+          <span>{{ isSubmitting ? t('auth.login.submitting') : t('auth.login.submit') }}</span>
+          <ArrowRight class="size-4" />
+        </AdminButton>
+      </form>
+      <div class="grid gap-2 rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--surface-sunken)] p-3 text-xs text-[var(--muted-foreground)]">
+        <div class="flex items-center justify-between gap-3">
+          <span>{{ t('auth.login.referenceEmail') }}</span>
+          <span class="text-[var(--foreground)]">mira.owner@example.com</span>
+        </div>
+        <div class="flex items-center justify-between gap-3">
+          <span>{{ t('auth.login.referencePassword') }}</span>
+          <span class="text-[var(--foreground)]">reference-admin</span>
+        </div>
+      </div>
+      <p class="text-center text-sm text-[var(--muted-foreground)]">
+        {{ t('auth.login.onboardingQuestion') }}
+        <RouterLink class="text-[var(--primary)] underline-offset-4 hover:underline" to="/auth/register">{{ t('auth.login.createAccount') }}</RouterLink>
+      </p>
+    </div>
+  </AuthLayout>
+</template>
+`;
+}
+export function createI18nIndex(locales) {
+    const includeEnglish = locales.includes('en-US');
+    const imports = includeEnglish ? "import enUS from './locales/en-US'\nimport zhCN from './locales/zh-CN'" : "import zhCN from './locales/zh-CN'";
+    const messages = includeEnglish ? `  [DEFAULT_LOCALE]: zhCN,\n  [OPTIONAL_LOCALE]: enUS` : '  [DEFAULT_LOCALE]: zhCN';
+    const optionalLocale = includeEnglish ? "\nexport const OPTIONAL_LOCALE = 'en-US'" : '';
+    return `import { createI18n } from 'vue-i18n'
+${imports}
+export const DEFAULT_LOCALE = 'zh-CN'${optionalLocale}
+export const messages = {
+${messages}
+} as const
+export type Locale = keyof typeof messages
+export type LocaleCatalog = Record<string, unknown>
+export type MessageValues = Record<string, string | number>
+export type MessageTranslator = (key: string, values?: MessageValues) => string
+function flattenMessageKeys(value: unknown, prefix = ''): string[] {
+  if (typeof value === 'string') {
+    return [prefix]
+  }
+  if (typeof value !== 'object' || value === null) {
+    return []
+  }
+  return Object.entries(value).flatMap(([key, child]) => {
+    const nextPrefix = prefix ? \`\${prefix}.\${key}\` : key
+    return flattenMessageKeys(child, nextPrefix)
+  })
+}
+function hasMessageKey(value: unknown, path: string): boolean {
+  return path.split('.').every((segment, index, segments) => {
+    if (typeof value !== 'object' || value === null || !(segment in value)) {
+      return false
+    }
+    value = (value as Record<string, unknown>)[segment]
+    return index < segments.length - 1 || typeof value === 'string'
+  })
+}
+export function resolveLocale(locale: string | undefined): Locale {
+  return Object.hasOwn(messages, locale ?? '') ? (locale as Locale) : DEFAULT_LOCALE
+}
+export function findMissingLocaleKeys(source: LocaleCatalog, target: LocaleCatalog): string[] {
+  return flattenMessageKeys(source).filter((key) => !hasMessageKey(target, key))
+}
+export function createAdminI18n(locale: Locale = DEFAULT_LOCALE) {
+  return createI18n({
+    fallbackLocale: DEFAULT_LOCALE,
+    legacy: false,
+    locale,
+    messages,
+    missing: (_locale, key) => key
+  })
+}
+export const i18n = createAdminI18n()
+export function getActiveLocale(adminI18n: ReturnType<typeof createAdminI18n> = i18n): Locale {
+  const locale = adminI18n.global.locale
+  return resolveLocale(typeof locale === 'string' ? locale : locale.value)
+}
+export function setActiveLocale(locale: Locale, adminI18n: ReturnType<typeof createAdminI18n> = i18n): void {
+  adminI18n.global.locale.value = locale
+}
+export function createMessageTranslator(locale: Locale = DEFAULT_LOCALE): MessageTranslator {
+  const localI18n = createAdminI18n(locale)
+  return (key, values) => localI18n.global.t(key, values ?? {})
+}
+export const translateAdminMessage: MessageTranslator = (key, values) => i18n.global.t(key, values ?? {})
+`;
+}
+export function createPreferencesStore() {
+    return `import {
+  defaultAiAvailability,
+  mergeAppearanceState,
+  type AiAvailability,
+  type AppearanceState,
+  type AppearanceStateInput,
+  type ColorMode,
+  type Density,
+  type DesignProfileId,
+  type LayoutPresetId,
+  type ResolvedColorMode,
+  type StageManagerPresentationMode
+} from '@super-admin-org/core'
+import { defineStore } from 'pinia'
+import { computed, reactive, shallowRef } from 'vue'
+import superAdminConfig from '../../super-admin.config'
+import { DEFAULT_LOCALE, resolveLocale, setActiveLocale, type Locale } from '@/i18n'
+const STORAGE_KEY = 'super-admin:preferences'
+const installedProfiles: DesignProfileId[] = [...superAdminConfig.themes.installed]
+const defaultProfile = superAdminConfig.themes.default
+function readStoredPreferences(): AppearanceStateInput {
+  const raw = window.localStorage.getItem(STORAGE_KEY)
+  if (!raw) {
+    return {}
+  }
+  try {
+    const parsed: unknown = JSON.parse(raw)
+    return typeof parsed === 'object' && parsed !== null ? (parsed as AppearanceStateInput) : {}
+  } catch {
+    return {}
+  }
+}
+function resolveProfileId(profileId: DesignProfileId | undefined): DesignProfileId {
+  return profileId && installedProfiles.includes(profileId) ? profileId : defaultProfile
+}
+function createInitialAppearanceState(): AppearanceState {
+  const state = mergeAppearanceState(readStoredPreferences())
+  return {
+    ...state,
+    locale: resolveLocale(state.locale),
+    profileId: resolveProfileId(state.profileId)
+  }
+}
+export const usePreferencesStore = defineStore('preferences', () => {
+  const state = reactive<AppearanceState>(createInitialAppearanceState())
+  const systemMode = shallowRef<ResolvedColorMode>('dark')
+  const providerMode = shallowRef<'mock' | 'custom'>('mock')
+  const aiAvailability = shallowRef<AiAvailability>(defaultAiAvailability)
+  const controlCenterOpen = shallowRef(false)
+  const stageManagerOpen = shallowRef(false)
+  const aiAssistantOpen = shallowRef(false)
+  const profileId = computed(() => state.profileId)
+  const locale = computed(() => state.locale)
+  const colorMode = computed(() => state.colorMode)
+  const density = computed(() => state.density)
+  const layoutPreset = computed(() => state.layoutPreset)
+  const workspaceTabs = computed(() => state.workspaceTabs)
+  const stageManager = computed(() => state.stageManager)
+  const summary = computed(
+    () => \`\${state.profileId} / \${state.colorMode} / \${state.layoutPreset}\`
+  )
+  function persist(): void {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+  }
+  setActiveLocale(resolveLocale(state.locale ?? DEFAULT_LOCALE))
+  function setProfile(profileId: DesignProfileId): void {
+    state.profileId = resolveProfileId(profileId)
+    persist()
+  }
+  function setLocale(locale: Locale): void {
+    state.locale = resolveLocale(locale)
+    setActiveLocale(state.locale)
+    persist()
+  }
+  function setColorMode(colorMode: ColorMode): void {
+    state.colorMode = colorMode
+    persist()
+  }
+  function setDensity(density: Density): void {
+    state.density = density
+    persist()
+  }
+  function setLayoutPreset(layoutPreset: LayoutPresetId): void {
+    state.layoutPreset = layoutPreset
+    persist()
+  }
+  function setTabsEnabled(enabled: boolean): void {
+    state.workspaceTabs.enabled = enabled
+    persist()
+  }
+  function setStageManagerEnabled(enabled: boolean): void {
+    state.stageManager.enabled = enabled
+    if (!enabled) {
+      stageManagerOpen.value = false
+    }
+    persist()
+  }
+  function setStageManagerPresentationMode(presentationMode: StageManagerPresentationMode): void {
+    state.stageManager.presentationMode = presentationMode
+    persist()
+  }
+  function openControlCenter(): void {
+    controlCenterOpen.value = true
+  }
+  function closeControlCenter(): void {
+    controlCenterOpen.value = false
+  }
+  function openStageManager(): void {
+    if (!state.stageManager.enabled) {
+      return
+    }
+    stageManagerOpen.value = true
+  }
+  function closeStageManager(): void {
+    stageManagerOpen.value = false
+  }
+  function openAiAssistant(): void {
+    aiAssistantOpen.value = true
+  }
+  function closeAiAssistant(): void {
+    aiAssistantOpen.value = false
+  }
+  function bindSystemColorMode(): void {
+    const query = window.matchMedia('(prefers-color-scheme: dark)')
+    const update = (): void => {
+      systemMode.value = query.matches ? 'dark' : 'light'
+    }
+    update()
+    query.addEventListener('change', update)
+  }
+  return {
+    providerMode,
+    aiAvailability,
+    aiAssistantOpen,
+    closeAiAssistant,
+    closeControlCenter,
+    closeStageManager,
+    controlCenterOpen,
+    openControlCenter,
+    openAiAssistant,
+    openStageManager,
+    stageManagerOpen,
+    systemMode,
+    summary,
+    profileId,
+    locale,
+    colorMode,
+    density,
+    layoutPreset,
+    workspaceTabs,
+    stageManager,
+    bindSystemColorMode,
+    setColorMode,
+    setDensity,
+    setLayoutPreset,
+    setLocale,
+    setProfile,
+    setStageManagerPresentationMode,
+    setTabsEnabled,
+    setStageManagerEnabled
+  }
+})
+`;
+}
+export function createGlobalPreferences(options) {
+    const themeImports = options.includeThemeSwitcher
+        ? "  type DesignProfileId,\n"
+        : '';
+    const localeImport = options.includeLocaleSwitcher ? "import type { Locale } from '@/i18n'\n" : '';
+    const registryImport = options.includeThemeSwitcher
+        ? "import { builtInDesignProfiles } from '@/super-admin/theme-registry.generated'\n"
+        : "import { getBuiltInDesignProfile } from '@/super-admin/theme-registry.generated'\n";
+    const activeProfile = options.includeThemeSwitcher
+        ? "const activeProfileName = computed(\n  () => builtInDesignProfiles.find((profile) => profile.id === preferences.profileId)?.name ?? preferences.profileId\n)"
+        : "const activeProfileName = computed(() => getBuiltInDesignProfile(preferences.profileId).name)";
+    const localeOptions = options.includeLocaleSwitcher
+        ? "\nconst localeOptions = computed<{ id: Locale; label: string; detail: string }[]>(() => [\n  { id: 'zh-CN', label: t('shell.preferences.locales.zhCN.label'), detail: t('shell.preferences.locales.zhCN.detail') },\n  { id: 'en-US', label: t('shell.preferences.locales.enUS.label'), detail: t('shell.preferences.locales.enUS.detail') }\n])\n"
+        : '';
+    const selectProfile = options.includeThemeSwitcher
+        ? "\nfunction selectProfile(profileId: DesignProfileId): void {\n  preferences.setProfile(profileId)\n}\n"
+        : '';
+    const selectLocale = options.includeLocaleSwitcher
+        ? "\nfunction selectLocale(locale: Locale): void {\n  preferences.setLocale(locale)\n}\n"
+        : '';
+    const themeSection = options.includeThemeSwitcher
+        ? `
+              <div class="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--surface-sunken)] p-4">
+                <div class="flex items-center justify-between gap-3">
+                  <div>
+                    <h3 class="[font-family:var(--font-display)] text-lg">{{ t('shell.preferences.themeProfile') }}</h3>
+                    <p class="text-xs text-[var(--muted-foreground)]">{{ t('shell.preferences.themeProfileDescription') }}</p>
+                  </div>
+                  <StatusPill :label="activeProfileName" />
+                </div>
+                <div class="mt-4 grid gap-2 sm:grid-cols-2">
+                  <button
+                    v-for="profile in builtInDesignProfiles"
+                    :key="profile.id"
+                    type="button"
+                    class="rounded-[var(--radius-md)] border p-3 text-left transition focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none"
+                    :class="profile.id === preferences.profileId ? 'border-[var(--border-strong)] bg-[var(--active-tab-background)]' : 'border-[var(--border)] bg-[var(--surface)] hover:border-[var(--border-strong)]'"
+                    @click="selectProfile(profile.id)"
+                  >
+                    <span class="[font-family:var(--font-display)] text-base">{{ profile.name }}</span>
+                    <p class="mt-2 line-clamp-2 text-xs text-[var(--muted-foreground)]">{{ profile.description }}</p>
+                  </button>
+                </div>
+              </div>`
+        : '';
+    const localeSection = options.includeLocaleSwitcher
+        ? `
+                  <div>
+                    <div class="flex items-center justify-between gap-3 pb-2">
+                      <span class="text-sm">{{ t('shell.preferences.locale') }}</span>
+                      <span class="text-[11px] text-[var(--muted-foreground)]">{{ t('shell.preferences.localeDescription') }}</span>
+                    </div>
+                    <div class="grid gap-2 rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--surface)] p-2 sm:grid-cols-2">
+                      <button
+                        v-for="localeOption in localeOptions"
+                        :key="localeOption.id"
+                        type="button"
+                        class="rounded-[var(--radius-sm)] px-3 py-2 text-left transition focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none"
+                        :class="localeOption.id === preferences.locale ? 'bg-[var(--primary)] text-[var(--primary-foreground)] shadow-[var(--glow)]' : 'text-[var(--muted-foreground)] hover:bg-[var(--surface-raised)]'"
+                        @click="selectLocale(localeOption.id)"
+                      >
+                        <span class="block text-sm">{{ localeOption.label }}</span>
+                        <span class="block text-[11px] opacity-75">{{ localeOption.detail }}</span>
+                      </button>
+                    </div>
+                  </div>`
+        : '';
+    return `<script setup lang="ts">
+import { Settings2, X } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import {
+  builtInLayoutPresets,
+  type ColorMode,
+  type Density,
+${themeImports}  type LayoutPresetId,
+  type StageManagerPresentationMode
+} from '@super-admin-org/core'
+import { AdminButton, AdminScrollArea, StatusPill } from '@super-admin-org/ui'
+${registryImport}${localeImport}import { usePreferencesStore } from '@/stores/preferences.store'
+const props = withDefaults(
+  defineProps<{
+    trigger?: 'floating' | 'auth' | 'none'
+  }>(),
+  {
+    trigger: 'floating'
+  }
+)
+const preferences = usePreferencesStore()
+const { t } = useI18n()
+const modeOptions = computed<{ id: ColorMode; label: string; detail: string }[]>(() => [
+  { id: 'light', label: t('shell.preferences.modes.light.label'), detail: t('shell.preferences.modes.light.detail') },
+  { id: 'dark', label: t('shell.preferences.modes.dark.label'), detail: t('shell.preferences.modes.dark.detail') },
+  { id: 'system', label: t('shell.preferences.modes.system.label'), detail: t('shell.preferences.modes.system.detail') }
+])
+${localeOptions}
+const densityOptions = computed<{ id: Density; label: string; detail: string }[]>(() => [
+  { id: 'comfortable', label: t('shell.preferences.density.comfortable.label'), detail: t('shell.preferences.density.comfortable.detail') },
+  { id: 'compact', label: t('shell.preferences.density.compact.label'), detail: t('shell.preferences.density.compact.detail') }
+])
+const stagePresentationOptions = computed<{ id: StageManagerPresentationMode; label: string; detail: string }[]>(() => [
+  { id: 'side-dock', label: t('shell.preferences.stageModes.sideDock.label'), detail: t('shell.preferences.stageModes.sideDock.detail') },
+  { id: 'all-windows', label: t('shell.preferences.stageModes.allWindows.label'), detail: t('shell.preferences.stageModes.allWindows.detail') }
+])
+${activeProfile}
+const activeModeName = computed(
+  () => modeOptions.value.find((mode) => mode.id === preferences.colorMode)?.label ?? preferences.colorMode
+)
+const triggerTitle = computed(() =>
+  props.trigger === 'auth'
+    ? t('shell.preferences.open', { profile: activeProfileName.value, mode: activeModeName.value })
+    : t('shell.preferences.title')
+)
+const triggerSize = computed(() => (props.trigger === 'auth' ? 'md' : 'icon'))
+const showTrigger = computed(() => props.trigger !== 'none')
+const triggerClass = computed(() =>
+  props.trigger === 'auth'
+    ? 'shadow-[var(--card-shadow)]'
+    : 'shadow-[var(--panel-shadow)]'
+)
+${selectProfile}
+function selectMode(colorMode: ColorMode): void {
+  preferences.setColorMode(colorMode)
+}
+${selectLocale}
+function selectLayout(layoutPreset: LayoutPresetId): void {
+  preferences.setLayoutPreset(layoutPreset)
+}
+function selectDensity(density: Density): void {
+  preferences.setDensity(density)
+}
+function selectStagePresentationMode(presentationMode: StageManagerPresentationMode): void {
+  preferences.setStageManagerPresentationMode(presentationMode)
+}
+</script>
+<template>
+  <div>
+    <AdminButton
+      v-if="showTrigger"
+      variant="secondary"
+      :size="triggerSize"
+      :class="triggerClass"
+      :title="triggerTitle"
+      @click="preferences.openControlCenter()"
+    >
+      <Settings2 class="size-4" />
+      <span v-if="props.trigger === 'auth'" class="text-xs">
+        {{ activeProfileName }} / {{ activeModeName }}
+      </span>
+    </AdminButton>
+    <Teleport to="body">
+      <div v-if="preferences.controlCenterOpen" class="fixed inset-0 z-[80] grid place-items-center bg-black/45 p-4 backdrop-blur-sm" @keydown.esc="preferences.closeControlCenter()">
+        <section
+          class="max-h-[88vh] w-full max-w-5xl overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-strong)] bg-[var(--surface)] shadow-[var(--panel-shadow)]"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="control-center-title"
+        >
+          <header class="flex items-start justify-between gap-4 border-b border-[var(--border)] bg-[var(--header-background)] p-5">
+            <div>
+              <div class="flex items-center gap-2">
+                <StatusPill :label="t('shell.preferences.live')" />
+                <span class="text-xs uppercase tracking-[0.18em] text-[var(--muted-foreground)]">{{ t('shell.preferences.title') }}</span>
+              </div>
+              <h2 id="control-center-title" class="mt-2 [font-family:var(--font-display)] text-2xl text-[var(--foreground)]">
+                {{ t('shell.preferences.workspaceConfiguration', { profile: activeProfileName }) }}
+              </h2>
+              <p class="mt-1 text-sm text-[var(--muted-foreground)]">
+                {{ t('shell.preferences.immediateUpdate') }}
+              </p>
+            </div>
+            <AdminButton variant="ghost" size="icon" :title="t('shell.preferences.close')" @click="preferences.closeControlCenter()">
+              <X class="size-4" />
+            </AdminButton>
+          </header>
+          <AdminScrollArea class="max-h-[calc(88vh-92px)]" view-class="grid gap-5 p-5 md:grid-cols-[1fr_1.15fr]">
+            <section class="grid gap-4">${themeSection}
+              <div class="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--surface-sunken)] p-4">
+                <h3 class="[font-family:var(--font-display)] text-lg">{{ t('shell.preferences.modeDensity') }}</h3>
+                <div class="mt-4 grid gap-3">${localeSection}
+                  <div class="grid gap-2 rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--surface)] p-2 sm:grid-cols-3">
+                    <button
+                      v-for="mode in modeOptions"
+                      :key="mode.id"
+                      type="button"
+                      class="rounded-[var(--radius-sm)] px-3 py-2 text-left transition focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none"
+                      :class="mode.id === preferences.colorMode ? 'bg-[var(--primary)] text-[var(--primary-foreground)] shadow-[var(--glow)]' : 'text-[var(--muted-foreground)] hover:bg-[var(--surface-raised)]'"
+                      @click="selectMode(mode.id)"
+                    >
+                      <span class="block text-sm">{{ mode.label }}</span>
+                      <span class="block text-[11px] opacity-75">{{ mode.detail }}</span>
+                    </button>
+                  </div>
+                  <div class="grid gap-2 rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--surface)] p-2 sm:grid-cols-2">
+                    <button
+                      v-for="density in densityOptions"
+                      :key="density.id"
+                      type="button"
+                      class="rounded-[var(--radius-sm)] px-3 py-2 text-left transition focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none"
+                      :class="density.id === preferences.density ? 'bg-[var(--active-tab-background)] text-[var(--foreground)]' : 'text-[var(--muted-foreground)] hover:bg-[var(--surface-raised)]'"
+                      @click="selectDensity(density.id)"
+                    >
+                      <span class="block text-sm">{{ density.label }}</span>
+                      <span class="block text-[11px]">{{ density.detail }}</span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </section>
+            <section class="grid gap-4">
+              <div class="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--surface-sunken)] p-4">
+                <h3 class="[font-family:var(--font-display)] text-lg">{{ t('shell.preferences.layout') }}</h3>
+                <p class="text-xs text-[var(--muted-foreground)]">{{ t('shell.preferences.layoutDescription') }}</p>
+                <div class="mt-4 grid gap-3 xl:grid-cols-3">
+                  <button
+                    v-for="layout in builtInLayoutPresets"
+                    :key="layout.id"
+                    type="button"
+                    class="rounded-[var(--radius-md)] border bg-[var(--surface)] p-3 text-left transition focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none"
+                    :class="layout.id === preferences.layoutPreset ? 'border-[var(--border-strong)] shadow-[var(--glow)]' : 'border-[var(--border)] hover:border-[var(--border-strong)]'"
+                    @click="selectLayout(layout.id)"
+                  >
+                    <div class="[font-family:var(--font-display)] text-base">{{ layout.name }}</div>
+                    <p class="mt-1 line-clamp-2 text-xs text-[var(--muted-foreground)]">{{ layout.description }}</p>
+                  </button>
+                </div>
+              </div>
+              <div class="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--surface-sunken)] p-4">
+                <div class="flex items-center justify-between gap-3">
+                  <div>
+                    <h3 class="[font-family:var(--font-display)] text-lg">{{ t('shell.preferences.workspace') }}</h3>
+                    <p class="text-xs text-[var(--muted-foreground)]">{{ t('shell.preferences.workspaceDescription') }}</p>
+                  </div>
+                  <StatusPill :label="t('shell.preferences.keepAlive')" tone="success" />
+                </div>
+                <div class="mt-4 grid gap-2 sm:grid-cols-2">
+                  <button
+                    type="button"
+                    class="rounded-[var(--radius-md)] border p-3 text-left transition focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none"
+                    :class="preferences.workspaceTabs.enabled ? 'border-[var(--border-strong)] bg-[var(--active-tab-background)] text-[var(--foreground)]' : 'border-[var(--border)] bg-[var(--surface)] text-[var(--muted-foreground)] hover:border-[var(--border-strong)]'"
+                    @click="preferences.setTabsEnabled(!preferences.workspaceTabs.enabled)"
+                  >
+                    <span class="text-sm">{{ t('shell.preferences.workspaceTabs') }}</span>
+                    <span class="float-right text-xs">{{ preferences.workspaceTabs.enabled ? t('shell.preferences.on') : t('shell.preferences.off') }}</span>
+                    <span class="mt-2 block text-[11px] opacity-75">{{ t('shell.preferences.tabsDescription') }}</span>
+                  </button>
+                  <button
+                    type="button"
+                    class="rounded-[var(--radius-md)] border p-3 text-left transition focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none"
+                    :class="preferences.stageManager.enabled ? 'border-[var(--border-strong)] bg-[var(--active-tab-background)] text-[var(--foreground)]' : 'border-[var(--border)] bg-[var(--surface)] text-[var(--muted-foreground)] hover:border-[var(--border-strong)]'"
+                    @click="preferences.setStageManagerEnabled(!preferences.stageManager.enabled)"
+                  >
+                    <span class="text-sm">{{ t('shell.preferences.stageManagerShortcut') }}</span>
+                    <span class="float-right text-xs">{{ preferences.stageManager.enabled ? t('shell.preferences.on') : t('shell.preferences.off') }}</span>
+                    <span class="mt-2 block text-[11px] opacity-75">{{ t('shell.preferences.stageDescription') }}</span>
+                  </button>
+                </div>
+                <div class="mt-4 grid gap-2 rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--surface)] p-2 sm:grid-cols-2">
+                  <button
+                    v-for="stageMode in stagePresentationOptions"
+                    :key="stageMode.id"
+                    type="button"
+                    class="rounded-[var(--radius-sm)] px-3 py-2 text-left transition focus-visible:shadow-[var(--focus-ring)] focus-visible:outline-none"
+                    :class="stageMode.id === preferences.stageManager.presentationMode ? 'bg-[var(--active-tab-background)] text-[var(--foreground)] shadow-[var(--glow)]' : 'text-[var(--muted-foreground)] hover:bg-[var(--surface-raised)]'"
+                    @click="selectStagePresentationMode(stageMode.id)"
+                  >
+                    <span class="block text-sm">{{ stageMode.label }}</span>
+                    <span class="block text-[11px] opacity-75">{{ stageMode.detail }}</span>
+                  </button>
+                </div>
+              </div>
+            </section>
+          </AdminScrollArea>
+        </section>
+      </div>
+    </Teleport>
+  </div>
+</template>
+`;
+}