@saasicat/ui-vue 0.24.2 → 0.26.0

package/src/components/ThemeSwitcher.vue

@@ -0,0 +1,85 @@
+<template>
+    <q-btn
+        v-if="visible"
+        class="sa-theme-switcher"
+        flat
+        dense
+        no-caps
+        icon="contrast"
+        :label="activeLabel"
+        :aria-label="msg.header.theme?.label"
+    >
+        <q-menu auto-close anchor="bottom right" self="top right">
+            <q-list dense class="sa-theme-switcher__list">
+                <q-item
+                    v-for="option in options"
+                    :key="option.scheme"
+                    clickable
+                    :active="option.scheme === scheme"
+                    @click="select(option.scheme)"
+                >
+                    <q-item-section>{{ option.label }}</q-item-section>
+                    <q-item-section v-if="option.scheme === scheme" 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 { useSaMessages } from '../vue/use-super-admin-i18n.js';
+import { SA_COLOR_SCHEMES, useSaTheme, type SaColorScheme } from '../vue/use-sa-theme.js';
+
+// Colour-scheme switcher for the shell chrome, the sibling of
+// `LocaleSwitcher` — same button, same menu, same fail-open rule, and the two
+// sit next to each other in every header that carries one.
+//
+// It writes the PICKED scheme, never the resolved one. That distinction is the
+// whole reason the control has three entries instead of a toggle: 'system' is
+// a standing instruction to follow the operating system, and collapsing it to
+// whatever the machine says right now silently turns it into a fourth state
+// nobody chose.
+//
+// The button inherits its color from the surrounding chrome (`currentColor`),
+// so it needs no variant prop — each host sets the color it wants. The header
+// is permanently dark in both themes and its foreground is an
+// `--sa-color-inverse-*` role; inheriting is what keeps this button out of that
+// decision.
+
+const { scheme, switcherEnabled } = useSaTheme();
+const msg = useSaMessages('shell');
+
+// 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;
+
+// Same reason as above, on the i18n side: a catalog from before these keys
+// existed has no `header.theme` at all, and reading through it unguarded turns
+// an upgrade skew into a render-time exception instead of a missing word.
+const options = computed(() =>
+    SA_COLOR_SCHEMES.map((value) => ({
+        scheme: value,
+        label: msg.value.header.theme?.[value] ?? value,
+    })),
+);
+const activeLabel = computed(
+    () => options.value.find((option) => option.scheme === scheme.value)?.label ?? scheme.value,
+);
+
+function select(next: SaColorScheme): void {
+    scheme.value = next;
+}
+</script>
+
+<style scoped>
+.sa-theme-switcher {
+    color: inherit;
+}
+</style>

package/src/components/admin-page/AdminAccordion.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="sa-accordion" :class="{ 'sa-accordion--open': open }">
+        <div class="sa-accordion__head">
+            <button
+                :id="triggerId"
+                type="button"
+                class="sa-accordion__trigger"
+                :aria-expanded="open"
+                :aria-controls="bodyId"
+                :disabled="disabled"
+                @click="emit('update:open', !open)"
+            >
+                <span
+                    v-if="$slots.mark"
+                    class="sa-accordion__mark"
+                    :class="`sa-accordion__mark--${markTone}`"
+                >
+                    <slot name="mark" />
+                </span>
+                <span class="sa-accordion__label"><slot name="header" /></span>
+                <q-icon name="chevron_right" size="18px" class="sa-accordion__chev" />
+            </button>
+            <div v-if="$slots['header-actions']" class="sa-accordion__actions">
+                <slot name="header-actions" />
+            </div>
+        </div>
+        <div
+            v-if="open"
+            :id="bodyId"
+            role="region"
+            :aria-labelledby="triggerId"
+            class="sa-accordion__body"
+        >
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useId } from 'vue';
+
+// One disclosure: a header that opens a body. Eight surfaces in this package
+// built their own, in three incompatible idioms, and agreed on nothing —
+// three header paddings, three body paddings, two radii, two colours for the
+// open border, two transition durations, and hover feedback on exactly one of
+// six despite five setting `cursor: pointer`.
+//
+// The reason is not that eight decisions were taken. It is that none was: there
+// is an `AdminTable` and an `AdminSection`, and for "open this" there was
+// nothing, so every page wrote it again. `admin-page-shell.test.ts` rule 14
+// records the same story for tables — "nine pages used QTable directly and
+// agreed on nothing".
+//
+// **The trigger is a `<button>`, and that is the point of the component.**
+// Four of the eight were a `<div>` with a click handler: no `tabindex`, no
+// keyboard, and a screen reader announcing text rather than a control. A grep
+// for `aria-expanded` across the whole package returned nothing at all. A
+// shared component has that argument once; eight surfaces have to win it eight
+// times, and the score was 4:4.
+//
+// `header-actions` is a SIBLING of the button rather than a slot inside it, and
+// both halves of that matter. A control inside the trigger would fire the
+// toggle on its way past — the discovery cards put a live status control in
+// their clickable header — and interactive content nested in a `<button>` is
+// not valid HTML, so the browser's own behaviour there is not something to
+// rely on.
+//
+// The state is NOT owned here. Five of the eight take it from the page
+// (`openKey === row.id`), and in the bundle list opening one card while closing
+// another is tied to loading that bundle's versions — a component that owned a
+// boolean would break that. The other four simply hold the id, and lose nothing
+// by the arrangement. `v-model:open` keeps the page in charge either way.
+//
+// The body is `v-if`, which is what all seven JS implementations already did.
+// Uniform by accident until now; uniform on purpose from here.
+const {
+    open,
+    disabled = false,
+    markTone = 'accent',
+} = defineProps<{
+    /** Whether the body is shown. The page owns this — see above. */
+    open: boolean;
+    /** A locked row: the trigger is inert and announces itself as such. */
+    disabled?: boolean;
+    /**
+     * The `mark` badge's tone. `accent` unless the row is in a state the badge
+     * itself should report — the discovery quota with no usage provider is the
+     * one case, and it swaps its glyph as well.
+     *
+     * Two values because two exist. The frame, size, radius and position do not
+     * change with it: that is what makes the badge the same badge everywhere.
+     */
+    markTone?: 'accent' | 'negative';
+}>();
+
+const emit = defineEmits<{ 'update:open': [value: boolean] }>();
+
+defineSlots<{
+    /**
+     * The icon that identifies the row, in a badge this component draws.
+     *
+     * A slot rather than a prop, because the glyph is sometimes conditional and
+     * sometimes carries its own attributes. The BADGE is not the page's
+     * business: three surfaces had three answers — a 34px accent-tinted square,
+     * a bare 22px glyph, and a bare 20px glyph coloured by a Quasar palette
+     * prop — so the same row on two pages did not look like the same row.
+     */
+    mark?(): unknown;
+    /** The header's content — a title, keys, chips, whatever the row needs. */
+    header(): unknown;
+    /**
+     * Controls on the right of the header that must NOT toggle it.
+     * Rendered outside the trigger, so a click here is only a click here.
+     */
+    'header-actions'?(): unknown;
+    /** The body. Only rendered while open. */
+    default(): unknown;
+}>();
+
+// `useId`, as in `AdminSection`: `aria-controls` and `aria-labelledby` have to
+// point at THIS instance, and an accordion is by nature rendered many times on
+// one page.
+const triggerId = useId();
+const bodyId = useId();
+</script>

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

@@ -157,7 +157,7 @@
                     <div>
                         <div class="bcp-section-title">
                             {{ msg.fields.quotas }}
-                            <span class="bcp-field-hint" style="margin-left: 6px">
+                            <span class="bcp-field-hint" style="margin-left: var(--sa-gap-inline)">
                                 {{ msg.create.quotasOptional }}
                             </span>
                         </div>

package/src/components/dialogs/PromoCodeDialogFields.vue

@@ -122,7 +122,7 @@
                     class="pc-input"
                     type="number"
                     min="1"
-                    style="margin-top: 8px; max-width: 120px"
+                    style="margin-top: var(--sa-space-3); max-width: 120px"
                     :placeholder="
                         form.durationType === 'MONTHS'
                             ? msg.form.durationMonthsPlaceholder
@@ -205,13 +205,20 @@
         </div>
     </div>
 
-    <!-- Section: Advanced (backend-only fields, collapsed) -->
-    <div class="pc-section">
-        <button type="button" class="pc-section__toggle" @click="advancedOpen = !advancedOpen">
-            <q-icon :name="advancedOpen ? 'expand_more' : 'chevron_right'" size="16px" />
-            {{ msg.form.advancedToggle }}
-        </button>
-        <div v-if="advancedOpen" class="pc-advanced">
+    <!-- Section: Advanced (backend-only fields, collapsed).
+
+         An `AdminAccordion` rather than a fourth `.pc-section`: this is the one
+         section of the four that opens, and the package has one way of saying
+         that. It reads as `bg-surface` where its three siblings are
+         `bg-surface-raised` — the section that behaves differently is the one
+         that looks different, and the radius is the same rung either way. -->
+    <AdminAccordion v-model:open="advancedOpen">
+        <template #header>
+            <span class="pc-section__title pc-section__title--inline">
+                {{ msg.form.advancedToggle }}
+            </span>
+        </template>
+        <div class="pc-advanced">
             <div class="pc-grid pc-grid--2">
                 <div class="pc-field">
                     <div class="pc-field__label">{{ msg.form.billingCycleLabel }}</div>
@@ -253,7 +260,7 @@
                 />
             </div>
         </div>
-    </div>
+    </AdminAccordion>
 
     <!-- Live preview -->
     <div class="pc-preview">
@@ -268,6 +275,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import AdminAccordion from '../admin-page/AdminAccordion.vue';
 import { IDENTITY_NEUTRAL, identityChipStyle } from '../../client/identity-accents.js';
 import { formatMessage } from '../../client/i18n/format.js';
 import { useSaMessages } from '../../vue/use-super-admin-i18n.js';
@@ -427,23 +435,15 @@ const advancedOpen = defineModel<boolean>('advancedOpen', { default: false });
     letter-spacing: -0.005em;
 }
 
-.pc-section__toggle {
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    font: 600 var(--sa-text-md) var(--sa-font-body, system-ui, sans-serif);
-    color: var(--sa-color-fg-secondary);
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    padding: 0;
+/* The same title, in a header that already spaces itself. */
+.pc-section__title--inline {
+    margin-bottom: 0;
 }
 
 .pc-advanced {
     display: flex;
     flex-direction: column;
     gap: 12px;
-    margin-top: 12px;
 }
 
 .pc-grid {

package/src/components/plan/PlanCycleToggle.vue

@@ -33,7 +33,7 @@ interface I18n {
     ariaLabel?: string;
     monthly?: string;
     yearly?: string;
-    /** Optional: Spar-Pill neben "Jährlich" (z. B. "−2 Mt"). */
+    /** Optional savings pill next to the yearly option (e.g. "−2 mo"). */
     savePill?: string;
 }
 

package/src/components/plan-detail/PlanVersionsPanel.vue

@@ -90,7 +90,10 @@
                 <div>
                     <div class="pd-vcol">
                         <span class="pd-v-num">v{{ v.version }}</span>
-                        <span :class="['chip dot', statusChip(v)]" style="font-size: 10px">
+                        <span
+                            :class="['chip dot', statusChip(v)]"
+                            style="font-size: var(--sa-text-2xs)"
+                        >
                             {{ statusOf(v) }}
                         </span>
                     </div>
@@ -105,7 +108,7 @@
                             <span v-if="v.validUntil" class="pd-validity-date">
                                 {{ v.validUntil.slice(0, 10) }}
                             </span>
-                            <span v-else class="pd-arrow-inf" style="font-size: 14px">∞</span>
+                            <span v-else class="pd-arrow-inf">∞</span>
                         </div>
                         <span class="pd-validity-sub">{{ validityLabel(v) }}</span>
                     </div>

package/src/index.ts

@@ -31,6 +31,7 @@ export * from './client/index.js';
 // ---------------------------------------------------------------------------
 export * from './vue/super-admin-context.js';
 export * from './vue/ui-notify.js';
+export * from './vue/ui-confirm.js';
 export * from './vue/use-super-admin-context.js';
 export * from './vue/use-super-admin-i18n.js';
 export * from './vue/use-sa-theme.js';
@@ -41,6 +42,10 @@ export * from './vue/use-sa-theme.js';
 export * from './vue/create-admin-routes.js';
 export * from './vue/use-api-list.js';
 export * from './vue/use-pagination.js';
+export * from './vue/use-async-action.js';
+export * from './vue/use-async-data.js';
+export * from './vue/resource-registry.js';
+export * from './vue/use-resource-list.js';
 export * from './vue/use-tenants.js';
 export * from './vue/use-audit-entries.js';
 export * from './vue/use-entitlement.js';

package/src/pages-standard/AdminLayout.vue

@@ -15,6 +15,7 @@
                 <q-space />
                 <slot name="header-actions" />
                 <LocaleSwitcher class="q-mr-sm" />
+                <ThemeSwitcher 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">
@@ -101,6 +102,7 @@ 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 ThemeSwitcher from '../components/ThemeSwitcher.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 { useSignOut } from '../vue/use-sign-out.js';
@@ -352,18 +354,73 @@ const currentPageTitle = computed(() => {
     display: flex;
     align-items: center;
     gap: 8px;
+    /* The row's flexible member. Without this the identity block below sits at
+     * its content width, and a long name pushes the sign-out button off the
+     * end of a `nowrap` toolbar instead of being shortened. */
+    min-width: 0;
 }
 .sa-admin-user__avatar {
     background: var(--sa-admin-user-avatar-bg, var(--sa-color-inverse-accent));
     color: var(--sa-admin-user-avatar-fg, var(--sa-color-inverse-accent-fg));
 }
+.sa-admin-user__avatar,
+.sa-admin-user .q-btn {
+    /* The two things in this group that are controls or fixed squares. A flex
+     * item shrinks from its own basis, so without this the avatar and the
+     * sign-out button donate width to a name they should be donating none to —
+     * the same shrink that squeezed the login mark to 0px at 320. */
+    flex: none;
+}
 .sa-admin-user__name {
     line-height: 1.05;
+    min-width: 0;
+}
+/* Text is what shrinking is for; a control is not. Both lines therefore
+ * shorten rather than widen the group. */
+.sa-admin-user__name > div {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 .sa-admin-user__email {
     color: var(--sa-admin-user-email, var(--sa-color-inverse-accent));
 }
 
+/* Below `sm` the header row cannot hold everything it holds on a desktop, and
+ * the switcher LABELS are the cheapest thing in it: the icon still names the
+ * control, the menu still spells every option out, and — unlike hiding the
+ * button — the operator can still reach both. The role badge goes with them
+ * because the subtitle two lines up already carries the same word: it is the
+ * platform's own `header.subtitle`, "SuperAdmin · …", and it stays on screen at
+ * every width. The drawer's brand tag repeats it a third time by default.
+ *
+ * `599.98px` is Quasar's `xs` upper bound from `theme/_breakpoints.scss`; a
+ * `<style>` block cannot read the SCSS, and a custom property is not
+ * substituted inside a media condition. */
+@media (max-width: 599.98px) {
+    /* `!important` because the thing being hidden is Quasar's own `.block`
+     * utility, which declares `display: block !important` — specificity alone
+     * loses to it however long the selector gets. Same reason the active drawer
+     * item above carries one. */
+    .sa-admin-header :deep(.sa-locale-switcher .q-btn__content > .block),
+    .sa-admin-header :deep(.sa-theme-switcher .q-btn__content > .block) {
+        display: none !important;
+    }
+    .sa-admin-badge {
+        display: none;
+    }
+    /* And the operator's own name and address, which at this width would be
+     * bought from the page title: measured at 360 with both filled in, the
+     * title got 24px — one letter — while the row spelled out an email nobody
+     * came to the page to read. The avatar keeps the identity present and the
+     * full text is one breakpoint away. The truncation above is what covers
+     * the band where the block is shown and space is still tight. */
+    .sa-admin-user__name {
+        display: none;
+    }
+}
+
 .sa-admin-drawer :deep(.q-drawer),
 .sa-admin-drawer :deep(.q-drawer__content),
 .sa-admin-drawer__stack {

package/src/pages-standard/AdminManifestErrorPage.vue

@@ -82,9 +82,10 @@ function retry(): void | Promise<void> {
  * backend has recovered.
  *
  * And the cache must go first. The loader keeps an ETag in storage, which a
- * full document load does not touch. Its own documented failure — "server
- * returned 304 but the cache body is missing" — would otherwise repeat exactly:
- * same `If-None-Match`, same 304, same missing body, straight back here.
+ * full document load does not touch, so a plain retry revalidates: a 304 hands
+ * back the manifest the app already had, and an operator retrying after a
+ * deployment would keep being shown the old one. Clearing first is what makes
+ * the retry ask an open question.
  *
  * `router.resolve` rather than a bare path so an app served under a base href
  * lands inside its own app and not at the domain root.

package/src/pages-standard/BundlesPage.vue

@@ -687,32 +687,14 @@ const classifyDiff = computed(() => props.classifyDiff);
     flex-direction: column;
     gap: 8px;
 }
-.sa-bd-card {
-    background: var(--sa-color-bg-surface);
-    border: 1px solid var(--sa-color-border);
-    border-radius: 10px;
-    overflow: hidden;
-}
-.sa-bd-card.open {
-    border-color: var(--sa-color-accent);
-}
+/* The card's surface, open border, head padding, chevron and body now come
+ * from `AdminAccordion` — twelve declarations that were this page's fourth
+ * opinion on what an accordion looks like. What is left below is what the
+ * BUNDLE row puts inside that header. */
 .sa-bd-card__head {
     display: flex;
-    gap: 12px;
+    gap: var(--sa-space-4);
     align-items: center;
-    padding: 12px 14px;
-    cursor: pointer;
-}
-.sa-bd-card__mark {
-    width: 34px;
-    height: 34px;
-    border-radius: 8px;
-    background: var(--sa-color-accent-surface-strong);
-    color: var(--sa-color-accent-strong);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
 }
 .sa-bd-card__titlewrap {
     flex: 1;
@@ -737,18 +719,6 @@ const classifyDiff = computed(() => props.classifyDiff);
     font-size: var(--sa-text-sm);
     color: var(--sa-color-fg-muted);
 }
-.sa-bd-card__chev {
-    transition: transform 0.15s;
-    color: var(--sa-color-fg-subtle);
-}
-.sa-bd-card__chev.open {
-    transform: rotate(90deg);
-}
-.sa-bd-card__body {
-    border-top: 1px solid var(--sa-color-border);
-    padding: 14px;
-    background: var(--sa-color-bg-sunken);
-}
 .sa-bd-grid {
     display: grid;
     grid-template-columns: minmax(280px, 360px) 1fr;

package/src/pages-standard/DiscoveryPage.vue

@@ -18,7 +18,7 @@
             />
             <q-banner v-if="error" class="sa-discovery__error" rounded>
                 <template #avatar><q-icon name="warning" color="negative" /></template>
-                {{ common.error }}: {{ error.message }}
+                {{ common.error }}: {{ errorText }}
             </q-banner>
 
             <AdminSection class="q-mt-lg">
@@ -165,6 +165,7 @@ import AdminPage from '../components/admin-page/AdminPage.vue';
 import DiscoveryKpis from './discovery-page/DiscoveryKpis.vue';
 import DiscoveryMetaBanner from './discovery-page/DiscoveryMetaBanner.vue';
 import DiscoveryQuotaCard from './discovery-page/DiscoveryQuotaCard.vue';
+import { adminErrorMessage } from '../client/admin-error.js';
 import { formatMessage } from '../client/i18n/format.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { statusLabel } from './discovery-page/discovery-ui.js';
@@ -216,8 +217,14 @@ const expandedQuota = ref<string | null>(null);
 
 const msg = useSaMessages('discovery');
 const common = useSaMessages('common');
+const errors = useSaMessages('errors');
 const { intlLocale } = useSuperAdminI18n();
 
+// The banner shows what the failing side said, or the catalog's sentence for
+// what happened — never the error's own `message`, which is an English
+// diagnostic for the log and was reaching this screen verbatim.
+const errorText = computed(() => (props.error ? adminErrorMessage(props.error, errors.value) : ''));
+
 const statusFilterOptions = computed<Array<{ label: string; value: DiscoveryStatus | 'all' }>>(
     () => [
         { label: msg.value.statusFilterAll, value: 'all' },

package/src/pages-standard/MarketingCatalogPage.vue

@@ -148,6 +148,7 @@ import { usePlans } from '../vue/use-plans.js';
 import { useMarketingProjections } from '../vue/use-marketing-projections.js';
 import { usePromotions } from '../vue/use-promotions.js';
 import { useCatalogEntries } from '../vue/use-catalog-entries.js';
+import { adminErrorMessage } from '../client/admin-error.js';
 import { formatCurrency } from '../client/i18n/currency.js';
 import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 import { formatMessage } from '../client/i18n/format.js';
@@ -185,8 +186,18 @@ const props = defineProps<{
 
 const msg = useSaMessages('marketing');
 const common = useSaMessages('common');
+const errors = useSaMessages('errors');
 const { locale, intlLocale } = useSuperAdminI18n();
 
+/**
+ * What to put in the page banner for a caught failure: what the failing side
+ * said, or the catalog's sentence for what happened. Never `err.message` — for
+ * this page's own composables that is an English diagnostic for the log.
+ */
+function bannerText(err: unknown): string {
+    return adminErrorMessage(err, errors.value);
+}
+
 const availableLocales = computed(() =>
     props.availableLocales && props.availableLocales.length > 0 ? props.availableLocales : ['de'],
 );
@@ -398,7 +409,7 @@ async function reloadAll(): Promise<void> {
         ]);
         await reloadVersions();
     } catch (err) {
-        pageError.value = err instanceof Error ? err.message : String(err);
+        pageError.value = bannerText(err);
     } finally {
         busy.value = false;
     }
@@ -744,7 +755,7 @@ async function patch(row: MarketingRow, partial: Partial<ResolvedMarketing>): Pr
             });
         }
     } catch (err) {
-        pageError.value = err instanceof Error ? err.message : String(err);
+        pageError.value = bannerText(err);
         await projectionsApi.load();
     } finally {
         busy.value = false;
@@ -831,7 +842,7 @@ async function onLocaleChange(loc: string): Promise<void> {
             locale: loc,
         });
     } catch (err) {
-        pageError.value = err instanceof Error ? err.message : String(err);
+        pageError.value = bannerText(err);
     } finally {
         busy.value = false;
     }

package/src/pages-standard/SuperAdminLoginPage.vue

@@ -19,6 +19,7 @@
                     <div class="sa-login-brand__tag">{{ tagText }}</div>
                 </div>
                 <LocaleSwitcher class="sa-login-locale" />
+                <ThemeSwitcher class="sa-login-theme" />
             </div>
 
             <h1 class="sa-login-title">{{ msg.login.signIn }}</h1>
@@ -101,6 +102,7 @@ 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 ThemeSwitcher from '../components/ThemeSwitcher.vue';
 import SuperAdminSetupWizard from './SuperAdminSetupWizard.vue';
 
 interface Props {
@@ -194,13 +196,18 @@ async function handleSubmit(): Promise<void> {
 </script>
 
 <style scoped>
-.sa-login-locale {
+.sa-login-locale,
+.sa-login-theme {
     /* 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, var(--sa-color-fg-secondary));
 }
+/* One `auto` on the first of the pair moves both — a second would put the gap
+   between them at the mercy of the card width instead of the row's own. */
+.sa-login-locale {
+    margin-left: auto;
+}
 .sa-login-wrap {
     min-height: 100vh;
     display: flex;
@@ -231,6 +238,13 @@ async function handleSubmit(): Promise<void> {
 .sa-login-logo {
     width: 44px;
     height: 44px;
+    /* The row has to give width up somewhere once the switchers joined it, and
+       the mark is the wrong donor: a flex item shrinks from its own basis, so
+       the logo went to 32.73px at 390 and to nothing at all at 320. Pinning it
+       moves the deficit onto the brand text beside it, which has somewhere to
+       put it — it wraps. `min-width: 0` on that text is the other half; without
+       it the text refuses the deficit too and the row leaves the viewport. */
+    flex: none;
     border-radius: 10px;
     display: flex;
     align-items: center;
@@ -259,6 +273,13 @@ async function handleSubmit(): Promise<void> {
     height: 100%;
     object-fit: contain;
 }
+/* `min-width: auto` is a flex item's default and it refuses to shrink below the
+   longest word — which is why the row's deficit landed on the mark instead, and
+   why pinning the mark on its own is not the whole fix. Zero lets this block
+   take the deficit and wrap. */
+.sa-login-brand__text {
+    min-width: 0;
+}
 .sa-login-brand__name {
     font-weight: 800;
     font-size: var(--sa-text-lg);