@saasicat/ui-vue 0.15.1 → 0.17.0

package/src/client/i18n/define.ts

@@ -3,7 +3,7 @@
 // must mirror that structure exactly, enforced at compile time via
 // `TranslationOf`.
 
-import type { SaLocale } from './locale.js';
+import type { SaBuiltinLocale } from './locale.js';
 
 /** Nested string map — the shape of every message namespace. */
 export interface MessageTree {
@@ -27,7 +27,7 @@ export type PartialMessages<T> = {
 export function defineMessages<T extends MessageTree>(
     de: T,
     en: TranslationOf<T>,
-): Record<SaLocale, T> {
+): Record<SaBuiltinLocale, T> {
     // `TranslationOf<T>` and `T` are structurally identical for string-valued
     // trees; the cast only erases the mapped-type wrapper.
     return { de, en: en as T };

package/src/client/i18n/index.ts

@@ -12,3 +12,4 @@ export {
 export * from './format.js';
 export * from './currency.js';
 export * from './messages.js';
+export * from './catalog.js';

package/src/client/i18n/locale.ts

@@ -1,15 +1,59 @@
-// Supported display locales of the SuperAdmin UI. The platform ships a German
-// (reference) and an English catalog; consumers pick the locale per app or per
-// user via `createSuperAdminApp({ i18n })`.
+// Display locales of the SuperAdmin UI.
+//
+// The platform ships two complete catalogs — German (the reference that fixes
+// the key structure) and English — and nothing beyond that. Which of them an
+// app offers, whether it adds languages of its own, and what vocabulary it
+// prefers is the app's call, made through `createSuperAdminApp({ i18n })`.
 
-export type SaLocale = 'de' | 'en';
+/** Locales the platform itself ships a catalog for. */
+export type SaBuiltinLocale = 'de' | 'en';
 
-export const SA_LOCALES: readonly SaLocale[] = ['de', 'en'];
+/**
+ * Any locale the shell can run in: the built-ins plus whatever an app adds via
+ * `i18n.additionalLocales`. The `string & {}` arm keeps autocompletion for the
+ * built-ins while leaving the set open.
+ */
+export type SaLocale = SaBuiltinLocale | (string & {});
 
-export const DEFAULT_SA_LOCALE: SaLocale = 'de';
+/** The locales the platform ships. Apps narrow or extend this, see `i18n`. */
+export const SA_LOCALES: readonly SaBuiltinLocale[] = ['de', 'en'];
 
-/** BCP-47 tags used for `Intl`/`toLocaleString` formatting per UI locale. */
-export const SA_INTL_LOCALES: Record<SaLocale, string> = {
+export const DEFAULT_SA_LOCALE: SaBuiltinLocale = 'de';
+
+/** BCP-47 tags used for `Intl`/`toLocaleString` formatting per built-in locale. */
+export const SA_INTL_LOCALES: Record<SaBuiltinLocale, string> = {
     de: 'de-DE',
     en: 'en-US',
 };
+
+/**
+ * Names for the language switcher. Endonyms — a language is listed in its own
+ * language, so the entries stay readable no matter which locale is active and
+ * never need translating.
+ */
+export const SA_LOCALE_LABELS: Record<SaBuiltinLocale, string> = {
+    de: 'Deutsch',
+    en: 'English',
+};
+
+/** Narrows untrusted input to a locale the platform ships a catalog for. */
+export function isSaBuiltinLocale(value: unknown): value is SaBuiltinLocale {
+    return typeof value === 'string' && (SA_LOCALES as readonly string[]).includes(value);
+}
+
+/**
+ * The built-in catalog a locale reads from. Helper modules that index the raw
+ * catalogs (rather than the resolved one from `useSaMessages`) need this: a
+ * language an app added has no entry there, and indexing it would yield
+ * `undefined` and take the page down.
+ *
+ * Strings resolved this way stay in the fallback language for an app-supplied
+ * locale — migrating those helpers to the resolved catalog is tracked
+ * separately.
+ */
+export function builtinLocaleOf(
+    locale: SaLocale | undefined,
+    fallback: SaBuiltinLocale = DEFAULT_SA_LOCALE,
+): SaBuiltinLocale {
+    return isSaBuiltinLocale(locale) ? locale : fallback;
+}

package/src/client/i18n/messages/bundles.ts

@@ -113,8 +113,7 @@ export const bundlesMessages = defineMessages(
             bundleKeyHint: 'API-stabil · wird aus dem Label erzeugt',
             errorKeyFormat: 'Nur A-Z, 0-9, Underscore; muss mit Buchstabe beginnen.',
             errorKeyExists: 'Dieser Bundle-Key existiert bereits.',
-            descriptionPlaceholder:
-                'z. B. Kampagnen, WhatsApp und Korrespondenz für aktive Vereine.',
+            descriptionPlaceholder: 'z. B. Kampagnen, WhatsApp und Korrespondenz.',
             sectionPricing: 'v1 · Pricing & Gültigkeit',
             pricingHint: 'Monats- & Jahrespreis sowie Datum, ab dem das Bundle verkaufbar wird.',
             validFromImmediate: '✓ Bundle ist nach Anlage sofort live und verkaufbar.',
@@ -341,7 +340,7 @@ export const bundlesMessages = defineMessages(
             bundleKeyHint: 'API-stable · derived from the label',
             errorKeyFormat: 'Only A-Z, 0-9, underscore; must start with a letter.',
             errorKeyExists: 'This bundle key already exists.',
-            descriptionPlaceholder: 'e.g. Campaigns, WhatsApp and correspondence for active clubs.',
+            descriptionPlaceholder: 'e.g. Campaigns, WhatsApp and correspondence.',
             sectionPricing: 'v1 · pricing & validity',
             pricingHint:
                 'Monthly & yearly price plus the date from which the bundle becomes sellable.',

package/src/client/i18n/messages/marketing.ts

@@ -76,7 +76,7 @@ export const marketingMessages = defineMessages(
             ctaOverrideLabel: 'CTA-Text überschreiben (optional)',
             ctaOverrideHint: 'leer lassen für Auto-Text',
             topFeatureCount: '{count} Einträge',
-            featureLabelPlaceholder: 'z. B. Beitragsverwaltung',
+            featureLabelPlaceholder: 'z. B. Erweiterte Berichte',
             featureStrongPlaceholder: 'Highlight, z. B. bis 100',
             moveUp: 'Nach oben',
             moveDown: 'Nach unten',
@@ -209,7 +209,7 @@ export const marketingMessages = defineMessages(
             ctaOverrideLabel: 'Override CTA text (optional)',
             ctaOverrideHint: 'leave empty for the auto text',
             topFeatureCount: '{count} entries',
-            featureLabelPlaceholder: 'e.g. Membership management',
+            featureLabelPlaceholder: 'e.g. Advanced reporting',
             featureStrongPlaceholder: 'Highlight, e.g. up to 100',
             moveUp: 'Move up',
             moveDown: 'Move down',

package/src/client/i18n/messages/nav.ts

@@ -6,11 +6,11 @@
 import type { StandardPageKey } from '@saasicat/types';
 
 import { defineMessages } from '../define.js';
-import type { SaLocale } from '../locale.js';
+import type { SaBuiltinLocale } from '../locale.js';
 
 // Type alias (not interface) so the shape keeps an implicit index signature
 // and stays assignable to `MessageTree`.
-type NavNamespace = {
+export type SaNavMessages = {
     readonly pages: Record<StandardPageKey, string>;
     readonly sections: {
         readonly overview: string;
@@ -20,7 +20,7 @@ type NavNamespace = {
     };
 };
 
-export const navMessages: Record<SaLocale, NavNamespace> = defineMessages(
+export const navMessages: Record<SaBuiltinLocale, SaNavMessages> = defineMessages(
     {
         pages: {
             dashboard: 'Dashboard',

package/src/client/i18n/messages/shell.ts

@@ -10,6 +10,7 @@ export const shellMessages = defineMessages(
             subtitle: 'SuperAdmin · Plattform-Verwaltung',
             roleBadge: 'SUPER ADMIN',
             logout: 'Abmelden',
+            language: 'Sprache',
         },
         drawer: {
             docs: 'Doku öffnen',
@@ -81,6 +82,7 @@ export const shellMessages = defineMessages(
             subtitle: 'SuperAdmin · Platform administration',
             roleBadge: 'SUPER ADMIN',
             logout: 'Sign out',
+            language: 'Language',
         },
         drawer: {
             docs: 'Open documentation',

package/src/client/i18n/messages.ts

@@ -3,7 +3,7 @@
 // namespace files via `defineMessages`.
 
 import { mergeMessages, type PartialMessages } from './define.js';
-import type { SaLocale } from './locale.js';
+import type { SaBuiltinLocale } from './locale.js';
 import { auditMessages } from './messages/audit.js';
 import { bundlesMessages } from './messages/bundles.js';
 import { commonMessages } from './messages/common.js';
@@ -46,7 +46,7 @@ export type SaMessages = {
 /** Shape of app-side string overrides (deep partial of the catalog). */
 export type SaMessagesOverrides = PartialMessages<SaMessages>;
 
-function catalogFor(locale: SaLocale): SaMessages {
+function catalogFor(locale: SaBuiltinLocale): SaMessages {
     return {
         common: commonMessages[locale],
         nav: navMessages[locale],
@@ -69,7 +69,7 @@ function catalogFor(locale: SaLocale): SaMessages {
 }
 
 /** Complete, immutable message catalogs per locale. */
-export const SA_MESSAGES: Record<SaLocale, SaMessages> = {
+export const SA_MESSAGES: Record<SaBuiltinLocale, SaMessages> = {
     de: catalogFor('de'),
     en: catalogFor('en'),
 };
@@ -78,7 +78,10 @@ export const SA_MESSAGES: Record<SaLocale, SaMessages> = {
  * Returns the platform catalog for `locale`, optionally overlaid with
  * app-side overrides.
  */
-export function resolveMessages(locale: SaLocale, overrides?: SaMessagesOverrides): SaMessages {
+export function resolveMessages(
+    locale: SaBuiltinLocale,
+    overrides?: SaMessagesOverrides,
+): SaMessages {
     if (!overrides) return SA_MESSAGES[locale];
     return mergeMessages(SA_MESSAGES[locale], overrides);
 }

package/src/client/index.ts

@@ -24,3 +24,4 @@ export * from './action-registry.js';
 export * from './batch-column-fetcher.js';
 export * from './admin-resource-client.js';
 export * from './i18n/index.js';
+export * from './login-branding.js';

package/src/client/login-branding.ts

@@ -0,0 +1,61 @@
+// Brand presentation of the login and first-run cards: what the public boot
+// endpoint reports, falling back to the branding the app configured.
+//
+// Pure projections, kept out of the SFC so they can be tested without a DOM —
+// and so the guards below cannot quietly go missing again. A boot response
+// whose `project` is absent used to throw here and take the whole card with it
+// on the next render.
+
+/** The slice of the public boot response these cards read. */
+export interface LoginBootProject {
+    displayName?: string | null;
+    label?: string | null;
+    icon?: string | null;
+    logoUrl?: string | null;
+    environment?: string | null;
+}
+
+/** App-configured branding, used wherever boot says nothing. */
+export interface LoginBrandFallback {
+    name?: string;
+    tag?: string;
+    logoText?: string;
+}
+
+export interface LoginBranding {
+    name: string;
+    tag: string;
+    icon: string;
+    logoUrl: string | null;
+    /** Environment worth showing, i.e. anything but production. `null` hides it. */
+    environment: string | null;
+}
+
+const DEFAULT_TAG = 'SuperAdmin';
+
+/**
+ * `boot` is whatever the endpoint returned — possibly `null`, possibly an
+ * object without `project`. Both are treated as "boot said nothing" rather
+ * than as a reason to fail.
+ */
+export function resolveLoginBranding(
+    boot: { project?: LoginBootProject | null } | null | undefined,
+    fallback: LoginBrandFallback = {},
+): LoginBranding {
+    const project = boot?.project ?? null;
+    const environment = project?.environment ?? null;
+    return {
+        name: project?.displayName || fallback.name || '',
+        tag: project?.label || fallback.tag || DEFAULT_TAG,
+        icon: project?.icon || fallback.logoText || '',
+        logoUrl: project?.logoUrl || null,
+        environment: environment && environment !== 'production' ? environment : null,
+    };
+}
+
+/** Test credentials must never be printed in production, whatever boot omits. */
+export function isProductionBoot(
+    boot: { project?: LoginBootProject | null } | null | undefined,
+): boolean {
+    return boot?.project?.environment === 'production';
+}

package/src/client/nav-builder.ts

@@ -11,8 +11,8 @@
 
 import type { AdminManifest, StandardPageDef, StandardPageKey } from '@saasicat/types';
 
-import { DEFAULT_SA_LOCALE, type SaLocale } from './i18n/locale.js';
-import { navMessages } from './i18n/messages/nav.js';
+import { DEFAULT_SA_LOCALE, isSaBuiltinLocale, type SaLocale } from './i18n/locale.js';
+import { navMessages, type SaNavMessages } from './i18n/messages/nav.js';
 
 /**
  * Default routes for the platform standard pages. Consumers may override this
@@ -64,8 +64,17 @@ export interface NavBuilderOptions {
      * UI locale for the default labels and section names, default `'de'`.
      * Pass the same locale to `buildSidebar()`'s `sectionOrder` (via
      * `defaultSectionOrder(locale)`) — section names are compared as strings.
+     *
+     * Only resolves the two catalogs the platform ships. Prefer `nav`, which
+     * carries app overrides and app-supplied languages as well.
      */
     locale?: SaLocale;
+    /**
+     * Resolved `nav` namespace, as `useSuperAdminI18n().messages.value.nav`
+     * hands it out. Wins over `locale`, and is the only way the sidebar sees
+     * `i18n.overrides` or a language the app added itself.
+     */
+    nav?: SaNavMessages;
     /**
      * Optional: overrides the default routes for certain standard pages.
      * Consumers set this if they want an alternative URL structure.
@@ -123,13 +132,31 @@ const PAGE_SECTIONS: Partial<Record<StandardPageKey, SectionKey>> = {
     platformEmailHistory: 'system',
 };
 
+/**
+ * The catalog to draw labels from. `nav` wins because it already carries app
+ * overrides and app-supplied languages; `locale` only ever reaches the two
+ * catalogs the platform ships.
+ */
+function resolveNav(options: NavBuilderOptions): SaNavMessages {
+    return options.nav ?? builtinNav(options.locale);
+}
+
+/** An unknown locale falls back rather than crashing the whole sidebar. */
+function builtinNav(locale: SaLocale | undefined): SaNavMessages {
+    return navMessages[isSaBuiltinLocale(locale) ? locale : DEFAULT_SA_LOCALE];
+}
+
 /**
  * Localized default section names in drawer order (Übersicht → Produktkatalog
  * → Kunden → System). Pass the result to `buildSidebar()` when building routes
- * with a non-default locale.
+ * with a non-default locale, or hand it the resolved `nav` catalog directly —
+ * section names are compared as strings, so both sides must come from the same
+ * source.
  */
-export function defaultSectionOrder(locale: SaLocale = DEFAULT_SA_LOCALE): readonly string[] {
-    const sections = navMessages[locale].sections;
+export function defaultSectionOrder(
+    locale: SaLocale | SaNavMessages = DEFAULT_SA_LOCALE,
+): readonly string[] {
+    const sections = typeof locale === 'string' ? builtinNav(locale).sections : locale.sections;
     return [sections.overview, sections.catalog, sections.customers, sections.system];
 }
 
@@ -149,7 +176,7 @@ export function buildRoutes(
 
     // StandardPages
     const standard = manifest.navigation?.standardPages ?? {};
-    const nav = navMessages[options.locale ?? DEFAULT_SA_LOCALE];
+    const nav = resolveNav(options);
     const defaultNavSections: Partial<Record<StandardPageKey, string>> = Object.fromEntries(
         Object.entries(PAGE_SECTIONS).map(([page, section]) => [page, nav.sections[section]]),
     );

package/src/client/types.ts

@@ -28,27 +28,64 @@ export interface KvStore {
     remove(key: string): void;
 }
 
+/** Stand-in for when there is no usable `localStorage`. */
+const NOOP_KV_STORE: KvStore = {
+    get: () => null,
+    set: () => {},
+    remove: () => {},
+};
+
 /**
- * Returns a `KvStore` wrapper around `localStorage` (or `null` under SSR).
- * Tests may pass an in-memory stub.
+ * Returns a `KvStore` wrapper around `localStorage`, or a no-op store when the
+ * environment has none or refuses access. Tests may pass an in-memory stub.
+ *
+ * Every persistence built on this is a convenience — losing it must never take
+ * the app down, so no failure mode is allowed to escape.
  */
 export function defaultKvStore(): KvStore {
-    if (typeof globalThis.localStorage === 'undefined') {
-        // SSR / non-browser → no-op stub.
-        return {
-            get: () => null,
-            set: () => {},
-            remove: () => {},
-        };
-    }
-    const ls = globalThis.localStorage;
+    const ls = resolveLocalStorage();
+    if (!ls) return NOOP_KV_STORE;
     return {
-        get: (k) => ls.getItem(k),
-        set: (k, v) => ls.setItem(k, v),
-        remove: (k) => ls.removeItem(k),
+        get: (k) => {
+            try {
+                return ls.getItem(k);
+            } catch {
+                // See resolveLocalStorage: access can be revoked per call too.
+                return null;
+            }
+        },
+        set: (k, v) => {
+            try {
+                ls.setItem(k, v);
+            } catch {
+                // Full quota or Safari's private mode — the value is simply
+                // not remembered.
+            }
+        },
+        remove: (k) => {
+            try {
+                ls.removeItem(k);
+            } catch {
+                // Nothing to clean up if the store is unreachable.
+            }
+        },
     };
 }
 
+/**
+ * `localStorage` is a throwing getter, not a plain property: a browser that
+ * blocks site data (cookie blocking, a sandboxed iframe) raises `SecurityError`
+ * on read, and `typeof` evaluates the getter rather than guarding it. The
+ * access therefore has to happen inside `try`.
+ */
+function resolveLocalStorage(): Storage | null {
+    try {
+        return globalThis.localStorage ?? null;
+    } catch {
+        return null;
+    }
+}
+
 /**
  * Default `HttpClient` over `fetch`. Consumers pass their own variant
  * through when they need auth headers / tenant headers / retry logic.

package/src/components/LocaleSwitcher.vue

@@ -0,0 +1,77 @@
+<template>
+    <q-btn
+        v-if="visible"
+        class="sa-locale-switcher"
+        flat
+        dense
+        no-caps
+        icon="language"
+        :label="activeLabel"
+        :aria-label="msg.header.language"
+    >
+        <q-menu auto-close anchor="bottom right" self="top right">
+            <q-list dense class="sa-locale-switcher__list">
+                <q-item
+                    v-for="option in availableLocales"
+                    :key="option.code"
+                    clickable
+                    :active="option.code === locale"
+                    @click="select(option.code)"
+                >
+                    <q-item-section>{{ option.label }}</q-item-section>
+                    <q-item-section v-if="option.code === locale" side>
+                        <q-icon name="check" size="16px" />
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </q-menu>
+    </q-btn>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { SaLocale, SaLocaleOption } from '../client/i18n/index.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
+
+// Language switcher for the shell chrome. Writes straight to the shared i18n
+// locale, so every catalog text, the sidebar labels and `Intl` formatting
+// follow on the next render.
+//
+// The button inherits its color from the surrounding chrome (`currentColor`),
+// so it needs no variant prop — each host sets the color it wants.
+//
+// It renders nothing when the app opted out, offers a single language, or
+// handed over a locale it does not allow writing to; hosts therefore embed it
+// unconditionally and never have to repeat that check.
+
+const { locale, switcherEnabled, availableLocales } = useSuperAdminI18n();
+
+// Only an explicit `false` hides the switcher. The injection key is a
+// `Symbol.for`, so a context created by an older copy of this package resolves
+// here just as well — and that one has no `switcherEnabled` at all. Treating
+// the missing field as "off" would make every switcher vanish after such an
+// upgrade, without a warning anywhere. Chrome fails open.
+const visible = switcherEnabled !== false;
+const msg = useSaMessages('shell');
+
+// Same reason as above: such a context carries no `availableLocales` either, so
+// the list has to tolerate its absence instead of throwing during render.
+const options = computed<readonly SaLocaleOption[]>(() => availableLocales ?? []);
+const activeLabel = computed(
+    () => options.value.find((option) => option.code === locale.value)?.label ?? locale.value,
+);
+
+function select(next: SaLocale): void {
+    locale.value = next;
+}
+</script>
+
+<style scoped>
+.sa-locale-switcher {
+    color: inherit;
+}
+.sa-locale-switcher__list {
+    min-width: 160px;
+}
+</style>

package/src/components/bundle-editor/bundle-version-status.ts

@@ -6,7 +6,12 @@
 
 import type { BundleVersionRow, PlanVersionRow } from '@saasicat/types';
 
-import { SA_INTL_LOCALES, type SaLocale } from '../../client/i18n/locale.js';
+import {
+    SA_INTL_LOCALES,
+    builtinLocaleOf,
+    type SaBuiltinLocale,
+    type SaLocale,
+} from '../../client/i18n/locale.js';
 import { bundlesMessages } from '../../client/i18n/messages/bundles.js';
 
 /** UI lifecycle status of a single BundleVersion. */
@@ -67,7 +72,7 @@ export function bundleStatusMeta(
     status: BundleAggregateStatus,
     locale: SaLocale,
 ): BundleStatusMeta {
-    const texts = bundlesMessages[locale].status[status];
+    const texts = bundlesMessages[builtinLocaleOf(locale)].status[status];
     return { label: texts.label, cls: BUNDLE_STATUS_CLASS[status], tooltip: texts.tooltip };
 }
 
@@ -155,10 +160,13 @@ export function formatDate(iso: string | null | undefined, locale: SaLocale): st
     const day = iso.slice(0, 10);
     const [y, m, d] = day.split('-');
     if (!y || !m || !d) return iso;
-    return new Date(`${day}T00:00:00Z`).toLocaleDateString(SA_INTL_LOCALES[locale], {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        timeZone: 'UTC',
-    });
+    return new Date(`${day}T00:00:00Z`).toLocaleDateString(
+        SA_INTL_LOCALES[locale as SaBuiltinLocale] ?? locale,
+        {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric',
+            timeZone: 'UTC',
+        },
+    );
 }

package/src/pages-standard/AdminLayout.vue

@@ -14,6 +14,7 @@
                 </q-toolbar-title>
                 <q-space />
                 <slot name="header-actions" />
+                <LocaleSwitcher class="q-mr-sm" />
                 <q-badge class="sa-admin-badge q-mr-sm">{{ msg.header.roleBadge }}</q-badge>
                 <div class="sa-admin-user">
                     <q-avatar size="32px" class="sa-admin-user__avatar">
@@ -97,6 +98,7 @@ import { computed, inject, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import type { AdminManifest, StandardPageKey } from '@saasicat/types';
 import { buildRoutes, buildSidebar, defaultSectionOrder } from '../client/nav-builder.js';
+import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import { SUPER_ADMIN_BRAND_KEY, SUPER_ADMIN_MANIFEST_KEY } from '../vue/super-admin-context.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { ADMIN_UI_VERSION } from '../client/version.js';
@@ -187,7 +189,7 @@ const emit = defineEmits<{
 
 const route = useRoute();
 const msg = useSaMessages('shell');
-const { locale } = useSuperAdminI18n();
+const { messages } = useSuperAdminI18n();
 // Provided by createSuperAdminApp(); null when the layout is mounted
 // stand-alone. Grouped into one object so the names cannot shadow the
 // same-named props inside the template.
@@ -225,13 +227,17 @@ const navSections = computed<NavSection[]>(() => {
         // section, so that the UI has no flicker before manifest load.
         return [{ title: null, items: [...props.staticNavFallback, ...props.localItems] }];
     }
+    // The resolved catalog rather than the bare locale: it carries
+    // `i18n.overrides` and languages the app added itself, neither of which the
+    // builder can look up from a locale code.
+    const nav = messages.value.nav;
     const routes = buildRoutes(m, {
-        locale: locale.value,
+        nav,
         standardPageRoutes: props.standardPageRoutes,
         standardPageNavSection: props.standardPageNavSection,
         availableExtensions: props.availableExtensions,
     });
-    const sections = buildSidebar(routes, props.sectionOrder ?? defaultSectionOrder(locale.value));
+    const sections = buildSidebar(routes, props.sectionOrder ?? defaultSectionOrder(nav));
     const result: NavSection[] = sections.map((s) => ({
         title: s.section,
         items: s.items.map((item) => ({

package/src/pages-standard/SuperAdminLoginPage.vue

@@ -18,6 +18,7 @@
                     <div class="sa-login-brand__name">{{ brandName }}</div>
                     <div class="sa-login-brand__tag">{{ tagText }}</div>
                 </div>
+                <LocaleSwitcher class="sa-login-locale" />
             </div>
 
             <h1 class="sa-login-title">{{ msg.login.signIn }}</h1>
@@ -97,7 +98,9 @@ import {
     useSuperAdminLoginAdapter,
 } from '../vue/use-super-admin-context.js';
 import { getJson } from '../client/http-json.js';
+import { isProductionBoot, resolveLoginBranding } from '../client/login-branding.js';
 import { useSaMessages } from '../vue/use-super-admin-i18n.js';
+import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import SuperAdminSetupWizard from './SuperAdminSetupWizard.vue';
 
 interface Props {
@@ -126,18 +129,16 @@ const errorMessage = ref<string | null>(null);
 // wizard instead of the login. Apps without a SetupModule return 404 → stays false.
 const needsSetup = ref(false);
 
-const brandName = computed(() => boot.boot.value?.project.displayName ?? brand.name);
-const tagText = computed(() => boot.boot.value?.project.label ?? brand.tag ?? 'SuperAdmin');
-const iconText = computed(() => boot.boot.value?.project.icon ?? brand.logoText);
-const logoUrl = computed(() => boot.boot.value?.project.logoUrl ?? null);
-const bootEnvironment = computed(() => {
-    const env = boot.boot.value?.project.environment;
-    return env && env !== 'production' ? env : null;
-});
+const branding = computed(() => resolveLoginBranding(boot.boot.value, brand));
+const brandName = computed(() => branding.value.name);
+const tagText = computed(() => branding.value.tag);
+const iconText = computed(() => branding.value.icon);
+const logoUrl = computed(() => branding.value.logoUrl);
+const bootEnvironment = computed(() => branding.value.environment);
 
 const devHint = computed(() => {
     if (!adapter.devHint) return null;
-    if (boot.boot.value?.project.environment === 'production') return null;
+    if (isProductionBoot(boot.boot.value)) return null;
     return adapter.devHint;
 });
 
@@ -193,6 +194,13 @@ async function handleSubmit(): Promise<void> {
 </script>
 
 <style scoped>
+.sa-login-locale {
+    /* In the card's flow rather than floating over it: a fixed overlay lands
+       on top of the centered card on short viewports. */
+    margin-left: auto;
+    align-self: flex-start;
+    color: var(--sa-login-tag-color, #475569);
+}
 .sa-login-wrap {
     min-height: 100vh;
     display: flex;