@saasicat/ui-vue 0.16.0 → 0.18.0

package/src/pages-standard/AdminLayout.vue

@@ -189,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.
@@ -227,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/DiscoveryPage.vue

@@ -195,7 +195,7 @@ const statusFilterOptions = computed<Array<{ label: string; value: DiscoveryStat
     () => [
         { label: msg.value.statusFilterAll, value: 'all' },
         ...(['pending', 'approved', 'outdated', 'obsolete'] as const).map((status) => ({
-            label: statusLabel(status, locale.value),
+            label: statusLabel(status, msg.value),
             value: status,
         })),
     ],

package/src/pages-standard/SuperAdminLoginPage.vue

@@ -98,6 +98,7 @@ 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';
@@ -128,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;
 });
 

package/src/pages-standard/bundles-page/BundleAccordionList.vue

@@ -50,7 +50,7 @@ import {
     type BundleAggregateStatus,
 } from '../../components/bundle-editor/bundle-version-status.js';
 import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 
 const props = defineProps<{
     filteredBundles: BundleRow[];
@@ -69,10 +69,9 @@ const emit = defineEmits<{
 }>();
 
 const msg = useSaMessages('bundles');
-const { locale } = useSuperAdminI18n();
 
 function statusMetaOf(bundle: BundleRow) {
-    return bundleStatusMeta(props.aggregateStatusOf(bundle), locale.value);
+    return bundleStatusMeta(props.aggregateStatusOf(bundle), msg.value);
 }
 
 function statusClass(bundle: BundleRow): string {

package/src/pages-standard/discovery-page/CatalogEntryTransPanel.vue

@@ -9,7 +9,7 @@
             </div>
             <div class="sa-trans-fields">
                 <div v-for="f in fields" :key="f" class="sa-trans-field">
-                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f, uiLocale) }}</label>
+                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f, msg, common) }}</label>
                     <q-input
                         v-if="f !== 'unit'"
                         dense
@@ -47,7 +47,7 @@
             </div>
             <div class="sa-trans-fields">
                 <div v-for="f in fields" :key="f" class="sa-trans-field">
-                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f, uiLocale) }}</label>
+                    <label class="sa-trans-field__cap">{{ i18nFieldLabel(f, msg, common) }}</label>
                     <q-input
                         dense
                         outlined
@@ -71,7 +71,7 @@
 import { computed, reactive } from 'vue';
 import type { CatalogEntryI18nFields } from '@saasicat/types';
 import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import {
     DISCOVERY_DEFAULT_LOCALE,
     i18nFieldLabel,
@@ -107,7 +107,7 @@ const emit = defineEmits<{
 
 const msg = useSaMessages('discovery');
 // Renamed: `locale` is the catalog-entry data locale everywhere else in this file.
-const { locale: uiLocale } = useSuperAdminI18n();
+const common = useSaMessages('common');
 
 const targetLocales = computed(() => props.activeLocales.filter((l) => l !== props.defaultLocale));
 

package/src/pages-standard/discovery-page/DiscoveryStatusControl.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="sa-stc" @click.stop>
         <span class="sa-review" :class="`sa-review--${status}`">
-            {{ statusLabel(status, locale) }}
-            <q-tooltip>{{ statusHint(status, locale) }}</q-tooltip>
+            {{ statusLabel(status, msg) }}
+            <q-tooltip>{{ statusHint(status, msg) }}</q-tooltip>
         </span>
         <q-btn
             dense
@@ -15,7 +15,7 @@
             :loading="busy"
             @click="emit('set-status', primary.to)"
         >
-            <q-tooltip>{{ statusHint(primary.to, locale) }}</q-tooltip>
+            <q-tooltip>{{ statusHint(primary.to, msg) }}</q-tooltip>
         </q-btn>
         <q-btn v-if="menu.length" dense flat round size="sm" icon="more_horiz">
             <q-menu auto-close anchor="bottom right" self="top right">
@@ -39,7 +39,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { DiscoveryStatus } from '@saasicat/types';
-import { useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import { primaryReviewAction, reviewMenuActions, statusHint, statusLabel } from './discovery-ui.js';
 
 // StatusControl (#20, design sim): status chip + contextual primary action
@@ -57,10 +57,10 @@ const emit = defineEmits<{
     'set-status': [target: DiscoveryStatus];
 }>();
 
-const { locale } = useSuperAdminI18n();
+const msg = useSaMessages('discovery');
 
-const primary = computed(() => primaryReviewAction(props.status, locale.value));
-const menu = computed(() => reviewMenuActions(props.status, locale.value));
+const primary = computed(() => primaryReviewAction(props.status, msg.value));
+const menu = computed(() => reviewMenuActions(props.status, msg.value));
 </script>
 
 <style scoped>

package/src/pages-standard/discovery-page/discovery-ui.ts

@@ -4,9 +4,14 @@
 // labels/colors/coverage calculations.
 
 import type { CatalogEntryI18n, DiscoveryStatus } from '@saasicat/types';
-import { DEFAULT_SA_LOCALE, type SaLocale } from '../../client/i18n/locale.js';
-import { commonMessages } from '../../client/i18n/messages/common.js';
-import { discoveryMessages } from '../../client/i18n/messages/discovery.js';
+import type { SaMessages } from '../../client/i18n/messages.js';
+
+// The resolved slices these helpers render from. Taking the catalog rather
+// than a locale code is what lets an app-supplied language and `i18n.overrides`
+// reach them — a raw `discoveryMessages[locale]` lookup only ever sees the two
+// catalogs the platform ships.
+type SaDiscoveryMessages = SaMessages['discovery'];
+type SaCommonMessages = SaMessages['common'];
 
 /** Translatable fields of a catalog entry. */
 export type I18nField = 'label' | 'description' | 'unit';
@@ -42,20 +47,24 @@ export function localeFull(locale: string): string {
     return LOCALE_NAMES[locale]?.full ?? locale;
 }
 
-export function i18nFieldLabel(f: I18nField, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    if (f === 'label') return discoveryMessages[locale].trans.fieldLabel;
-    if (f === 'description') return commonMessages[locale].description;
-    return discoveryMessages[locale].unit;
+export function i18nFieldLabel(
+    f: I18nField,
+    discovery: SaDiscoveryMessages,
+    common: SaCommonMessages,
+): string {
+    if (f === 'label') return discovery.trans.fieldLabel;
+    if (f === 'description') return common.description;
+    return discovery.unit;
 }
 
 // ─── Approval lifecycle (#20): status display + state machine ────────────────
 
-export function statusLabel(status: DiscoveryStatus, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    return discoveryMessages[locale].statusLabels[status];
+export function statusLabel(status: DiscoveryStatus, discovery: SaDiscoveryMessages): string {
+    return discovery.statusLabels[status];
 }
 
-export function statusHint(status: DiscoveryStatus, locale: SaLocale = DEFAULT_SA_LOCALE): string {
-    return discoveryMessages[locale].statusHints[status];
+export function statusHint(status: DiscoveryStatus, discovery: SaDiscoveryMessages): string {
+    return discovery.statusHints[status];
 }
 
 export interface ReviewAction {
@@ -69,9 +78,9 @@ export interface ReviewAction {
 /** Primary action per status (design sim `StatusControl`, #20). */
 export function primaryReviewAction(
     status: DiscoveryStatus,
-    locale: SaLocale = DEFAULT_SA_LOCALE,
+    discovery: SaDiscoveryMessages,
 ): ReviewAction {
-    const actions = discoveryMessages[locale].reviewActions;
+    const actions = discovery.reviewActions;
     switch (status) {
         case 'pending':
             return { label: actions.approve, to: 'approved', emphasized: true };
@@ -87,9 +96,9 @@ export function primaryReviewAction(
 /** Kebab menu actions per status (design sim `StatusControl`, #20). */
 export function reviewMenuActions(
     status: DiscoveryStatus,
-    locale: SaLocale = DEFAULT_SA_LOCALE,
+    discovery: SaDiscoveryMessages,
 ): ReviewAction[] {
-    const actions = discoveryMessages[locale].reviewActions;
+    const actions = discovery.reviewActions;
     const markObsolete: ReviewAction = {
         label: actions.markObsolete,
         to: 'obsolete',

package/src/pages-standard/plan-versions/PlanVersionsTimeline.vue

@@ -73,7 +73,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
+import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
 import type { CatalogSnapshot } from './catalog-history.types.js';
 import { formatRelative } from './format.js';
 
@@ -91,7 +91,6 @@ const emit = defineEmits<{
 }>();
 
 const msg = useSaMessages('planVersions');
-const { locale } = useSuperAdminI18n();
 
 const snapshotCountLabel = computed(() =>
     formatMessage(msg.value.timeline.snapshotCount, { count: props.snapshots.length }),
@@ -109,7 +108,7 @@ function metaText(s: CatalogSnapshot): string {
             ? msg.value.timeline.noOpenDrafts
             : formatMessage(msg.value.timeline.openCount, { count: s.draftCount });
     }
-    if (s.publishedAt) return formatRelative(s.publishedAt, locale.value);
+    if (s.publishedAt) return formatRelative(s.publishedAt, msg.value);
     return msg.value.timeline.unknown;
 }
 </script>

package/src/pages-standard/plan-versions/format.ts

@@ -1,22 +1,21 @@
 // Formatting helper retained for the reusable catalog-history timeline.
 
 import { formatMessage } from '../../client/i18n/format.js';
-import { DEFAULT_SA_LOCALE, type SaLocale } from '../../client/i18n/locale.js';
-import { planVersionsMessages } from '../../client/i18n/messages/plan-versions.js';
+import type { SaMessages } from '../../client/i18n/messages.js';
 
-const EMPTY_VALUE = '—';
+// The resolved slice, not a locale code: only this way do an app-supplied
+// language and `i18n.overrides` reach the relative-date wording.
+type SaPlanVersionsMessages = SaMessages['planVersions'];
 
-function texts(locale: SaLocale) {
-    return planVersionsMessages[locale].format;
-}
+const EMPTY_VALUE = '—';
 
 export function formatRelative(
     iso: string | undefined,
-    locale: SaLocale = DEFAULT_SA_LOCALE,
+    planVersions: SaPlanVersionsMessages,
     now: Date = new Date(),
 ): string {
     if (!iso) return EMPTY_VALUE;
-    const msg = texts(locale);
+    const msg = planVersions.format;
     const d = new Date(iso);
     const diffMs = now.getTime() - d.getTime();
     const days = Math.floor(diffMs / 86_400_000);

package/src/vue/use-super-admin-i18n.ts

@@ -2,10 +2,11 @@
 // provides one instance; pages, components and composables read it via
 // `useSuperAdminI18n()` or the namespace-focused `useSaMessages()`.
 //
-// Design: no vue-i18n dependency. The platform ships complete typed catalogs
-// (`SA_MESSAGES`, German reference + English translation) and consumers switch
-// the locale or override individual strings through the bootstrap option.
-// Without a provider the composables fall back to a shared German instance, so
+// Design: no vue-i18n dependency. The platform ships two complete typed
+// catalogs (German reference + English translation) and nothing beyond that —
+// which of them an app offers, which languages it adds and what wording it
+// prefers is decided through the bootstrap option and resolved in `SaCatalog`.
+// Without a provider the composables fall back to a shared default instance, so
 // isolated mounts and unit tests need no setup.
 
 import {
@@ -21,11 +22,11 @@ import {
 } from 'vue';
 
 import {
-    DEFAULT_SA_LOCALE,
-    SA_INTL_LOCALES,
-    isSaLocale,
-    resolveMessages,
+    createSaCatalog,
+    type SaCatalog,
     type SaLocale,
+    type SaLocaleDefinition,
+    type SaLocaleOption,
     type SaMessages,
     type SaMessagesOverrides,
 } from '../client/i18n/index.js';
@@ -40,20 +41,35 @@ export interface SuperAdminI18n {
     intlLocale: ComputedRef<string>;
     /**
      * Whether the shell renders its language switcher. `false` when the app
-     * opted out or when `locale` cannot be written to — a switcher that cannot
-     * change anything is worse than none.
+     * opted out, when `locale` cannot be written to, or when only one language
+     * is on offer — a switcher that cannot change anything is worse than none.
      */
     switcherEnabled: boolean;
+    /** Locales the switcher offers, in order, with their display names. */
+    availableLocales: readonly SaLocaleOption[];
 }
 
 export interface SuperAdminI18nOptions {
     /**
-     * Starting UI locale, default `'de'` — the shell's switcher lets the user
-     * pick another one, and a stored pick outranks this. Pass a `Ref` when the
-     * app wants to keep control (e.g. a user-profile setting).
+     * Starting UI locale — the shell's switcher lets the user pick another one,
+     * and a stored pick outranks this. Defaults to `'de'` when offered,
+     * otherwise to the first entry of `locales`. Pass a `Ref` when the app wants
+     * to keep control (e.g. a user-profile setting).
      */
     locale?: SaLocale | Ref<SaLocale>;
-    /** Per-locale string overrides layered over the platform catalog. */
+    /**
+     * Languages to offer, in switcher order. Default: German, English and
+     * everything in `additionalLocales`. Narrow it to ship a single language —
+     * the switcher then hides itself.
+     */
+    locales?: readonly SaLocale[];
+    /**
+     * Languages the app adds on top of the two the platform ships, keyed by
+     * locale code. Untranslated keys fall back to `basedOn`, so a partial
+     * catalog is usable from the first key onwards.
+     */
+    additionalLocales?: Readonly<Record<string, SaLocaleDefinition>>;
+    /** Per-locale string overrides layered over whatever catalog applies. */
     overrides?: Partial<Record<SaLocale, SaMessagesOverrides>>;
     /**
      * Remembers the locale picked in the header switcher across reloads,
@@ -62,10 +78,15 @@ export interface SuperAdminI18nOptions {
      */
     persist?: boolean;
     /**
-     * Storage adapter for `persist`. Defaults to `defaultKvStore()`. Pass a
-     * key-prefixing wrapper when several apps share one origin.
+     * Storage adapter for `persist`. Defaults to `defaultKvStore()`.
      */
     storage?: KvStore;
+    /**
+     * Prefix for the persisted key, mirroring `createPlatformLoaders`. Set it
+     * when several apps share one origin and must not inherit each other's
+     * language pick.
+     */
+    storageKeyPrefix?: string;
     /**
      * Renders the language switcher in the shell chrome, default `true`. Set
      * `false` for a deployment that ships one language. A readonly `locale`
@@ -84,11 +105,16 @@ export const SUPER_ADMIN_I18N_KEY: InjectionKey<SuperAdminI18n> = Symbol.for(
 );
 
 export function createSuperAdminI18n(options: SuperAdminI18nOptions = {}): SuperAdminI18n {
-    const locale = isRef(options.locale) ? options.locale : createOwnedLocale(options);
-    const messages = computed(() =>
-        resolveMessages(locale.value, options.overrides?.[locale.value]),
+    const catalog = createSaCatalog(options);
+    const locale = isRef(options.locale) ? options.locale : createOwnedLocale(options, catalog);
+    // An unknown locale would otherwise render an empty shell. Falling back
+    // keeps the UI usable and makes the app's mistake visible as "wrong
+    // language" rather than "blank page".
+    const active = computed(() =>
+        catalog.has(locale.value) ? locale.value : catalog.defaultLocale,
     );
-    const intlLocale = computed(() => SA_INTL_LOCALES[locale.value]);
+    const messages = computed(() => catalog.messagesFor(active.value));
+    const intlLocale = computed(() => catalog.intlLocaleFor(active.value));
     // A readonly ref (typically a `computed` derived from a profile setting)
     // silently swallows writes, so the switcher would be a dead control. The
     // type system permits it — TypeScript ignores `readonly` when checking
@@ -98,7 +124,8 @@ export function createSuperAdminI18n(options: SuperAdminI18nOptions = {}): Super
         locale,
         messages,
         intlLocale,
-        switcherEnabled: (options.switcher ?? true) && writable,
+        switcherEnabled: (options.switcher ?? true) && writable && catalog.locales.length > 1,
+        availableLocales: catalog.locales,
     };
 }
 
@@ -107,14 +134,18 @@ export function createSuperAdminI18n(options: SuperAdminI18nOptions = {}): Super
  * `locale` option, because that option is the app's default while the stored
  * value is the user's explicit pick in the switcher.
  */
-function createOwnedLocale(options: SuperAdminI18nOptions): Ref<SaLocale> {
-    if (options.persist === false) {
-        return ref(options.locale ?? DEFAULT_SA_LOCALE);
-    }
+function createOwnedLocale(options: SuperAdminI18nOptions, catalog: SaCatalog): Ref<SaLocale> {
+    const initial = options.locale ?? catalog.defaultLocale;
+    if (options.persist === false) return ref(initial);
+
     const storage = options.storage ?? defaultKvStore();
-    const stored = storage.get(SA_LOCALE_STORAGE_KEY);
-    const locale = ref(isSaLocale(stored) ? stored : (options.locale ?? DEFAULT_SA_LOCALE));
-    watch(locale, (next) => storage.set(SA_LOCALE_STORAGE_KEY, next));
+    const key = `${options.storageKeyPrefix ?? ''}${SA_LOCALE_STORAGE_KEY}`;
+    const stored = storage.get(key);
+    // The stored value is checked against what this app offers, not against the
+    // built-ins: an app that dropped a language must not be pushed back into it
+    // by a pick from before.
+    const locale = ref(stored && catalog.has(stored) ? stored : initial);
+    watch(locale, (next) => storage.set(key, next));
     return locale;
 }