@saasicat/ui-vue 0.16.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasicat/ui-vue",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "description": "Vue 3 components, resource clients and composables for the SuperAdmin UI shell. Provides boot and manifest loaders, navigation, actions and standard pages.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -53,7 +53,7 @@
     "src"
   ],
   "dependencies": {
-    "@saasicat/types": "^0.16.0"
+    "@saasicat/types": "^0.18.0"
   },
   "peerDependencies": {
     "pinia": "^2.0.0 || ^3.0.0",
@@ -75,10 +75,14 @@
   "devDependencies": {
     "@playwright/test": "^1.59.1",
     "@types/node": "^25.6.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/test-utils": "^2.4.11",
+    "jsdom": "^30.0.1",
     "pinia": "^3.0.0",
-    "quasar": "^2.22.0",
+    "quasar": "^2.24.0",
     "tsup": "^8.0.0",
     "typescript": "^6.0.0",
+    "vitest": "^4.1.10",
     "vue": "^3.5.0",
     "vue-router": "^5.0.0",
     "vue-tsc": "^3.3.3"
@@ -102,6 +106,7 @@
     "typecheck": "vue-tsc --noEmit -p tsconfig.json",
     "pretest": "pnpm run build",
     "test": "node --test tests/**/*.test.js",
+    "test:component": "vitest run --config vitest.config.ts",
     "test:e2e": "playwright test"
   }
 }

package/src/client/i18n/catalog.ts

@@ -0,0 +1,120 @@
+// Resolves a locale to the three things the shell needs from it: the catalog to
+// render, the tag `Intl` formats with, and the name the switcher shows.
+//
+// The platform ships German and English and stops there. Which of them an app
+// offers, which languages it adds, and what wording it prefers is the app's
+// decision — this module is the single place all three are applied.
+
+import { mergeMessages } from './define.js';
+import {
+    DEFAULT_SA_LOCALE,
+    SA_INTL_LOCALES,
+    SA_LOCALES,
+    SA_LOCALE_LABELS,
+    isSaBuiltinLocale,
+    type SaBuiltinLocale,
+    type SaLocale,
+} from './locale.js';
+import { SA_MESSAGES, type SaMessages, type SaMessagesOverrides } from './messages.js';
+
+/** A language an app brings along, on top of the two the platform ships. */
+export interface SaLocaleDefinition {
+    /**
+     * Name for the switcher, written in the language itself (`'Français'`) —
+     * that way the entry stays readable whatever locale is currently active.
+     */
+    label: string;
+    /** BCP-47 tag for `Intl`/`toLocaleString`, e.g. `'fr-FR'`. */
+    intlLocale: string;
+    /**
+     * Built-in catalog that fills whatever `messages` leaves out, default
+     * `'en'`. A partial translation therefore renders — untranslated keys fall
+     * back instead of showing blanks.
+     */
+    basedOn?: SaBuiltinLocale;
+    /** The translation. Every key is optional; see `basedOn`. */
+    messages: SaMessagesOverrides;
+}
+
+export interface SaCatalogOptions {
+    /**
+     * Locales offered in the switcher, in the order given. Default: the
+     * built-ins plus everything in `additionalLocales`. Narrow it to ship a
+     * single language; entries without a catalog are ignored.
+     */
+    locales?: readonly SaLocale[];
+    /** Languages the app adds, keyed by locale code (`'fr'`, `'pt-BR'`, …). */
+    additionalLocales?: Readonly<Record<string, SaLocaleDefinition>>;
+    /** Per-locale wording changes layered on top of whatever catalog applies. */
+    overrides?: Readonly<Partial<Record<SaLocale, SaMessagesOverrides>>>;
+}
+
+/** One entry of the switcher. */
+export interface SaLocaleOption {
+    code: SaLocale;
+    label: string;
+}
+
+export interface SaCatalog {
+    /** Locales to offer, in switcher order. Never empty. */
+    readonly locales: readonly SaLocaleOption[];
+    /**
+     * Whether the app offers this locale. Deliberately not "can it be
+     * rendered": an app that narrowed to English must not be pushed back into
+     * German by a stored pick from before, even though German is still shipped.
+     */
+    has(locale: SaLocale): boolean;
+    /** Locale to start from when nothing else is known. */
+    readonly defaultLocale: SaLocale;
+    messagesFor(locale: SaLocale): SaMessages;
+    intlLocaleFor(locale: SaLocale): string;
+    labelFor(locale: SaLocale): string;
+}
+
+/**
+ * Builds the catalog an app runs on. Resolution is cached per locale, so
+ * switching back and forth does not re-merge the message tree.
+ */
+export function createSaCatalog(options: SaCatalogOptions = {}): SaCatalog {
+    const additional = options.additionalLocales ?? {};
+    const known = new Set<string>([...SA_LOCALES, ...Object.keys(additional)]);
+
+    // An app that lists an unknown code would otherwise get a switcher entry
+    // that renders nothing; dropping it here keeps the failure visible in one
+    // place instead of at every call site.
+    const requested = options.locales?.filter((code) => known.has(code));
+    const offered: readonly SaLocale[] =
+        requested && requested.length > 0 ? requested : [...SA_LOCALES, ...Object.keys(additional)];
+
+    const labelFor = (locale: SaLocale): string =>
+        additional[locale]?.label ??
+        (isSaBuiltinLocale(locale) ? SA_LOCALE_LABELS[locale] : locale);
+
+    const cache = new Map<SaLocale, SaMessages>();
+    const messagesFor = (locale: SaLocale): SaMessages => {
+        const hit = cache.get(locale);
+        if (hit) return hit;
+        const definition = additional[locale];
+        const base =
+            SA_MESSAGES[definition?.basedOn ?? (isSaBuiltinLocale(locale) ? locale : 'en')];
+        const translated = definition ? mergeMessages(base, definition.messages) : base;
+        const resolved = mergeMessages(translated, options.overrides?.[locale]);
+        cache.set(locale, resolved);
+        return resolved;
+    };
+
+    const offeredSet = new Set<string>(offered);
+
+    return {
+        locales: offered.map((code) => ({ code, label: labelFor(code) })),
+        has: (locale) => offeredSet.has(locale),
+        // The app's first offered locale beats the platform default: an app
+        // shipping English only must not start in German.
+        defaultLocale: offered.includes(DEFAULT_SA_LOCALE) ? DEFAULT_SA_LOCALE : offered[0],
+        messagesFor,
+        intlLocaleFor: (locale) =>
+            additional[locale]?.intlLocale ??
+            (isSaBuiltinLocale(locale) ? SA_INTL_LOCALES[locale] : locale),
+        labelFor,
+    };
+}

package/src/client/i18n/currency.ts

@@ -2,7 +2,12 @@
 // grouping and decimal separator follow the active UI locale
 // (de → `12.345,60 €`, en → `€12,345.60`).
 
-import { DEFAULT_SA_LOCALE, SA_INTL_LOCALES, type SaLocale } from './locale.js';
+import {
+    DEFAULT_SA_LOCALE,
+    SA_INTL_LOCALES,
+    type SaBuiltinLocale,
+    type SaLocale,
+} from './locale.js';
 
 const DEFAULT_CURRENCY = 'EUR';
 
@@ -12,7 +17,7 @@ function formatterFor(locale: SaLocale, currency: string, decimals: number): Int
     const key = `${locale}:${currency}:${decimals}`;
     let formatter = formatters.get(key);
     if (!formatter) {
-        formatter = new Intl.NumberFormat(SA_INTL_LOCALES[locale], {
+        formatter = new Intl.NumberFormat(SA_INTL_LOCALES[locale as SaBuiltinLocale] ?? locale, {
             style: 'currency',
             currency,
             minimumFractionDigits: decimals,

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,27 @@
-// 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 & {});
+
+/** The locales the platform ships. Apps narrow or extend this, see `i18n`. */
+export const SA_LOCALES: readonly SaBuiltinLocale[] = ['de', 'en'];
 
-export const DEFAULT_SA_LOCALE: SaLocale = 'de';
+export const DEFAULT_SA_LOCALE: SaBuiltinLocale = 'de';
 
-/** BCP-47 tags used for `Intl`/`toLocaleString` formatting per UI locale. */
-export const SA_INTL_LOCALES: Record<SaLocale, string> = {
+/** 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',
 };
@@ -19,12 +31,12 @@ export const SA_INTL_LOCALES: Record<SaLocale, string> = {
  * language, so the entries stay readable no matter which locale is active and
  * never need translating.
  */
-export const SA_LOCALE_LABELS: Record<SaLocale, string> = {
+export const SA_LOCALE_LABELS: Record<SaBuiltinLocale, string> = {
     de: 'Deutsch',
     en: 'English',
 };
 
-/** Narrows untrusted input (persisted preference, query parameter) to a locale. */
-export function isSaLocale(value: unknown): value is SaLocale {
+/** 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);
 }

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.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/components/LocaleSwitcher.vue

@@ -6,20 +6,20 @@
         dense
         no-caps
         icon="language"
-        :label="SA_LOCALE_LABELS[locale]"
+        :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 SA_LOCALES"
-                    :key="option"
+                    v-for="option in availableLocales"
+                    :key="option.code"
                     clickable
-                    :active="option === locale"
-                    @click="select(option)"
+                    :active="option.code === locale"
+                    @click="select(option.code)"
                 >
-                    <q-item-section>{{ SA_LOCALE_LABELS[option] }}</q-item-section>
-                    <q-item-section v-if="option === locale" side>
+                    <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>
@@ -29,7 +29,9 @@
 </template>
 
 <script setup lang="ts">
-import { SA_LOCALES, SA_LOCALE_LABELS, type SaLocale } from '../client/i18n/index.js';
+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
@@ -39,11 +41,11 @@ import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js
 // 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 of the switcher or handed over a
-// locale it does not allow writing to; hosts therefore embed it unconditionally
-// and never have to repeat that check.
+// 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 } = useSuperAdminI18n();
+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
@@ -53,6 +55,13 @@ const { locale, switcherEnabled } = useSuperAdminI18n();
 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;
 }

package/src/components/bundle-editor/BundleVersionStrip.vue

@@ -99,7 +99,7 @@ function statusOf(v: BundleVersionRow) {
 }
 
 function statusMetaOf(v: BundleVersionRow): BundleStatusMeta {
-    return bundleStatusMeta(statusOf(v), locale.value);
+    return bundleStatusMeta(statusOf(v), msg.value);
 }
 </script>
 

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

@@ -6,8 +6,8 @@
 
 import type { BundleVersionRow, PlanVersionRow } from '@saasicat/types';
 
-import { SA_INTL_LOCALES, type SaLocale } from '../../client/i18n/locale.js';
-import { bundlesMessages } from '../../client/i18n/messages/bundles.js';
+import { SA_INTL_LOCALES, type SaBuiltinLocale, type SaLocale } from '../../client/i18n/locale.js';
+import type { SaMessages } from '../../client/i18n/messages.js';
 
 /** UI lifecycle status of a single BundleVersion. */
 export type BundleVersionUiStatus = 'draft' | 'live' | 'scheduled' | 'superseded';
@@ -62,12 +62,16 @@ const BUNDLE_STATUS_CLASS: Record<BundleAggregateStatus, BundleStatusMeta['cls']
     retired: 'supersed',
 };
 
-/** Label, chip class and tooltip for a status in the given UI locale. */
+/**
+ * Label, chip class and tooltip for a status. Takes the resolved slice rather
+ * than a locale code — that is what lets an app-supplied language and
+ * `i18n.overrides` reach these labels.
+ */
 export function bundleStatusMeta(
     status: BundleAggregateStatus,
-    locale: SaLocale,
+    bundles: SaMessages['bundles'],
 ): BundleStatusMeta {
-    const texts = bundlesMessages[locale].status[status];
+    const texts = bundles.status[status];
     return { label: texts.label, cls: BUNDLE_STATUS_CLASS[status], tooltip: texts.tooltip };
 }
 
@@ -155,10 +159,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',
+        },
+    );
 }