@saasicat/ui-vue 0.21.0 → 0.22.1

package/src/pages-tenant/MySubscriptionBundlesPage.vue

@@ -400,7 +400,7 @@ function formatDate(date: Date | string | null | undefined): string {
         BlinkMacSystemFont,
         system-ui,
         sans-serif;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .msb-head {
     display: flex;
@@ -416,7 +416,7 @@ function formatDate(date: Date | string | null | undefined): string {
 }
 .msb-sub {
     margin: 4px 0 0;
-    color: #64748b;
+    color: var(--sa-muted);
     font-size: 13px;
     max-width: 580px;
     line-height: 1.5;
@@ -424,7 +424,7 @@ function formatDate(date: Date | string | null | undefined): string {
 .msb-loading {
     padding: 32px;
     text-align: center;
-    color: #64748b;
+    color: var(--sa-muted);
 }
 .msb-empty {
     padding: 32px 24px;
@@ -432,12 +432,12 @@ function formatDate(date: Date | string | null | undefined): string {
     background: #fff;
     border: 1px dashed #cbd5e1;
     border-radius: 12px;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .msb-empty-link {
     background: transparent;
     border: 0;
-    color: #2563eb;
+    color: var(--sa-primary);
     cursor: pointer;
     font: inherit;
     text-decoration: underline;
@@ -457,13 +457,13 @@ function formatDate(date: Date | string | null | undefined): string {
 }
 .msb-card {
     background: #fff;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--sa-border);
     border-radius: 12px;
     padding: 14px 18px;
 }
 .msb-card--canceled-pending {
     border-color: #fde68a;
-    background: #fffbeb;
+    background: var(--sa-warning-bg);
 }
 .msb-card--canceled {
     opacity: 0.65;
@@ -490,7 +490,7 @@ function formatDate(date: Date | string | null | undefined): string {
 .msb-card-meta {
     margin-top: 4px;
     font-size: 12.5px;
-    color: #64748b;
+    color: var(--sa-muted);
 }
 .msb-chip {
     font-size: 10.5px;
@@ -509,13 +509,13 @@ function formatDate(date: Date | string | null | undefined): string {
     color: #92400e;
 }
 .msb-chip--canceled {
-    background: #e2e8f0;
-    color: #475569;
+    background: var(--sa-border);
+    color: var(--sa-muted-dark);
 }
 .msb-cancel-info {
     margin-top: 10px;
     padding: 8px 12px;
-    background: #fffbeb;
+    background: var(--sa-warning-bg);
     border: 1px solid #fde68a;
     border-radius: 6px;
     color: #92400e;
@@ -533,22 +533,22 @@ function formatDate(date: Date | string | null | undefined): string {
     cursor: pointer;
     font-family: inherit;
     font-size: 13px;
-    color: #0f172a;
+    color: var(--sa-heading);
 }
 .msb-btn:hover:not(:disabled) {
-    background: #f8fafc;
+    background: var(--sa-bg-surface-2);
 }
 .msb-btn:disabled {
     cursor: not-allowed;
     opacity: 0.55;
 }
 .msb-btn--primary {
-    background: #2563eb;
-    border-color: #2563eb;
+    background: var(--sa-primary);
+    border-color: var(--sa-primary);
     color: #fff;
 }
 .msb-btn--primary:hover:not(:disabled) {
-    background: #1d4ed8;
+    background: var(--sa-primary-strong);
 }
 .msb-btn--ghost {
     background: transparent;
@@ -580,7 +580,7 @@ function formatDate(date: Date | string | null | undefined): string {
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px 10px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid var(--sa-border);
 }
 .msb-modal-title {
     font-size: 16px;
@@ -590,13 +590,13 @@ function formatDate(date: Date | string | null | undefined): string {
     background: transparent;
     border: 0;
     cursor: pointer;
-    color: #64748b;
+    color: var(--sa-muted);
     padding: 4px;
     border-radius: 4px;
 }
 .msb-modal-x:hover {
-    background: #f1f5f9;
-    color: #0f172a;
+    background: var(--sa-border-soft);
+    color: var(--sa-heading);
 }
 .msb-modal-body {
     padding: 16px 20px;
@@ -606,8 +606,8 @@ function formatDate(date: Date | string | null | undefined): string {
 }
 .msb-modal-foot {
     padding: 12px 20px;
-    border-top: 1px solid #e2e8f0;
-    background: #f8fafc;
+    border-top: 1px solid var(--sa-border);
+    background: var(--sa-bg-surface-2);
     border-radius: 0 0 12px 12px;
     display: flex;
     justify-content: flex-end;
@@ -621,11 +621,11 @@ function formatDate(date: Date | string | null | undefined): string {
 .msb-field-label {
     font-size: 12px;
     font-weight: 600;
-    color: #475569;
+    color: var(--sa-muted-dark);
 }
 .msb-field-hint {
     font-size: 11px;
-    color: #94a3b8;
+    color: var(--sa-muted-light);
 }
 .msb-input {
     padding: 7px 10px;
@@ -633,7 +633,7 @@ function formatDate(date: Date | string | null | undefined): string {
     border-radius: 6px;
     font-family: inherit;
     font-size: 13px;
-    color: #0f172a;
+    color: var(--sa-heading);
     background: #fff;
 }
 </style>

package/src/pages-tenant/OnboardingConfigurator.vue

@@ -100,11 +100,7 @@ import PlanGrid from '../components/plan/PlanGrid.vue';
 import PublicBundleGrid from '../components/plan/PublicBundleGrid.vue';
 import PromoCodeInput from '../components/plan/PromoCodeInput.vue';
 import PriceSummary from '../components/plan/PriceSummary.vue';
-import {
-    useSubscriptionDraft,
-    type PromoState,
-    type SubscriptionDraft,
-} from '../vue/use-subscription-draft.js';
+import { useSubscriptionDraft, type SubscriptionDraft } from '../vue/use-subscription-draft.js';
 import type { CatalogPlan } from '../vue/use-tenant-billing-catalog.js';
 import type { BillingCycleStr } from '../vue/use-tenant-billing.js';
 import type {

package/src/pages-tenant/PackageSnapshotPanel.vue

@@ -108,7 +108,7 @@ import { computed, ref } from 'vue';
 import type { PackageSnapshotShape } from '../vue/use-tenant-billing.js';
 import type { TenantPlanSectionI18n } from './default-i18n.js';
 
-// PackageSnapshotPanel — P11.4 (METAMODELL §17a):
+// PackageSnapshotPanel — P11.4:
 // Read-only display of `Subscription.packageSnapshot`. Shows the
 // tenant the frozen website offer (offer snapshot) — plan,
 // bundles, prices, capture timestamp. No actions, no diff against

package/src/pages-tenant/TenantPlanSection.vue

@@ -64,8 +64,8 @@
                     :usage="usage"
                     :i18n="effectiveI18n"
                     :catalog-quota-keys="catalogQuotaKeys"
-                    :quota-label="quotaLabel"
-                    :is-fractional-quota="isFractionalQuota"
+                    :quota-label="quotaLabelResolved"
+                    :is-fractional-quota="isFractionalQuotaResolved"
                     :usage-bar-formatter="usageBarFormatter"
                 />
 
@@ -179,11 +179,11 @@
                 :catalog-quota-keys="catalogQuotaKeys"
                 :format-currency="formatCurrency"
                 :format-date="formatDate"
-                :format-quota-label="formatQuotaLabel"
+                :format-quota-label="formatQuotaLabelResolved"
                 :format-quota-value="formatQuotaValue"
-                :quota-label="quotaLabel"
+                :quota-label="quotaLabelResolved"
                 :feature-label="featureLabelResolved"
-                :is-fractional-quota="isFractionalQuota"
+                :is-fractional-quota="isFractionalQuotaResolved"
                 :preview-plan-change="previewPlanChange"
                 :change-plan="changePlan"
                 :i18n="wizardI18n"
@@ -478,30 +478,22 @@ const wizardI18n = computed(() => ({
 }));
 
 // Helper hooks with defaults
-function quotaLabel(key: string): string {
+function quotaLabelResolved(key: string): string {
     return props.quotaLabel?.(key) ?? key;
 }
 
-function featureLabel(key: string): string {
+function featureLabelFromProps(key: string): string {
     return props.featureLabel?.(key) ?? key;
 }
 
-function isFractionalQuota(key: string): boolean {
+function isFractionalQuotaResolved(key: string): boolean {
     return props.isFractionalQuota?.(key) ?? key.toLowerCase().includes('storage');
 }
 
-function formatDate(input: string | Date): string {
-    return props.formatDate(input);
-}
-
-function formatCurrency(n: number): string {
-    return props.formatCurrency(n);
-}
-
-function formatQuotaLabel(key: string, value: number): string {
+function formatQuotaLabelResolved(key: string, value: number): string {
     if (props.formatQuotaLabel) return props.formatQuotaLabel(key, value);
-    if (value === -1) return `${quotaLabel(key)}: ∞`;
-    return `${value} ${quotaLabel(key)}`;
+    if (value === -1) return `${quotaLabelResolved(key)}: ∞`;
+    return `${value} ${quotaLabelResolved(key)}`;
 }
 
 function usageBarFormatter(key: string): ((value: number) => string) | undefined {
@@ -596,7 +588,7 @@ async function onConfirmBundlePreview() {
 // Feature label with registry translation (#18): the registry label takes
 // precedence, then the consumer hook, and finally the raw key.
 function featureLabelResolved(key: string): string {
-    return catalog.featureRegistry.value?.[key]?.label ?? featureLabel(key);
+    return catalog.featureRegistry.value?.[key]?.label ?? featureLabelFromProps(key);
 }
 
 // Mutation handlers

package/src/quasar/create-super-admin-app.ts

@@ -32,6 +32,7 @@ import {
     SUPER_ADMIN_EXTENSIONS_KEY,
     SUPER_ADMIN_HTTP_KEY,
     SUPER_ADMIN_LOGIN_ADAPTER_KEY,
+    SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY,
     SUPER_ADMIN_MANIFEST_KEY,
     buildNavigationGuard,
     type ActionsMap,
@@ -173,6 +174,9 @@ export function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperA
     if (options.manifestGuard?.getManifest) {
         app.provide(SUPER_ADMIN_MANIFEST_KEY, options.manifestGuard.getManifest);
     }
+    if (options.manifestGuard?.clearCache) {
+        app.provide(SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY, options.manifestGuard.clearCache);
+    }
     if (options.loginAdapter) {
         app.provide(SUPER_ADMIN_LOGIN_ADAPTER_KEY, options.loginAdapter);
     }

package/src/vue/entitlement-provider.ts

@@ -9,7 +9,6 @@
 // resolve to the same identity — analogous to the inject keys in
 // create-super-admin-app.
 //
-// Spec: handoff/superadmin/QUICKSTART_SIMPLIFICATIONS.md §P8.
 
 import { inject, type App, type InjectionKey } from 'vue';
 import type { UseEntitlementResult } from './use-entitlement.js';

package/src/vue/feature-router-guard.ts

@@ -19,7 +19,6 @@
 // { path: '/x',   component: XPage,   meta: { requiresFeature: ['DMS', 'STORAGE_PRO'] } }
 // ```
 //
-// Spec: handoff/superadmin/QUICKSTART_SIMPLIFICATIONS.md §P8.
 
 import type { NavigationGuardWithThis, RouteLocationNormalized } from 'vue-router';
 import type { UseEntitlementResult } from './use-entitlement.js';

package/src/vue/super-admin-context.ts

@@ -79,6 +79,17 @@ export interface SuperAdminLoginAdapter {
      * storage, MFA hops etc.
      */
     login(email: string, password: string): Promise<SuperAdminLoginResult>;
+    /**
+     * Undoes what `login` established — token, session storage, app store.
+     *
+     * Whoever knows how to start a session is the only one who knows how to
+     * end it, so it belongs next to `login` rather than in a second seam. The
+     * platform's own sign-out affordances call it; without it they can only
+     * navigate to `/login`, and an app whose `isAuthenticated()` reads a
+     * surviving token lets the operator straight back in — a sign-out button
+     * that does not sign out.
+     */
+    logout?(): void | Promise<void>;
     /**
      * Target route after a successful login. Default: `/admin/dashboard`
      * (platform convention for the standard pages — apps with a different
@@ -119,6 +130,20 @@ export interface SuperAdminManifestGuardOptions {
      * manifest guard again and produces a redirect loop.
      */
     errorRoute?: string;
+    /**
+     * Discards the cached manifest, so the next `ensureLoaded()` fetches a
+     * fresh body instead of revalidating.
+     *
+     * Needed because the loader keeps an ETag in storage. Its own documented
+     * failure — "server returned 304 but the cache body is missing" — survives
+     * a full page reload: the next request sends the same `If-None-Match`,
+     * gets another 304, and lands back on the error page. Retry is a dead end
+     * for that case unless something clears the ETag first.
+     *
+     * `ManifestLoader.clearCache()` and the manifest store's reset both fit;
+     * pass whichever the app uses.
+     */
+    clearCache?: () => void | Promise<void>;
 }
 
 /**
@@ -170,6 +195,14 @@ export const SUPER_ADMIN_ACTIONS_KEY: InjectionKey<ActionsMap> = Symbol.for(
 export const SUPER_ADMIN_MANIFEST_KEY: InjectionKey<() => AdminManifest | null> = Symbol.for(
     '@saasicat/ui-vue/SUPER_ADMIN_MANIFEST',
 );
+/**
+ * Vue inject key for `manifestGuard.clearCache`.
+ *
+ * The fail-closed error page is route-mounted and gets no props, so the only
+ * way it can reach the app's cache is through the shell.
+ */
+export const SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY: InjectionKey<() => void | Promise<void>> =
+    Symbol.for('@saasicat/ui-vue/SUPER_ADMIN_MANIFEST_CLEAR_CACHE');
 /** Vue inject key for `useSuperAdminLoginAdapter()`. */
 export const SUPER_ADMIN_LOGIN_ADAPTER_KEY: InjectionKey<SuperAdminLoginAdapter> = Symbol.for(
     '@saasicat/ui-vue/SUPER_ADMIN_LOGIN_ADAPTER',
@@ -190,14 +223,52 @@ export type InstallPlugin = (app: App) => void;
  * behavior (auth redirect, manifest fail-closed path). Consumers should call
  * `createSuperAdminApp()`, not this helper directly.
  */
+/**
+ * Recognises "your session is gone" among manifest-load failures.
+ *
+ * Structural rather than `instanceof`: the manifest loader lives in the
+ * framework-free client layer, and a consumer store may wrap or re-throw the
+ * error (or use its own loader entirely). What all of them carry is a numeric
+ * `status`.
+ */
+function isUnauthorizedError(err: unknown): boolean {
+    const status = (err as { status?: unknown } | null)?.status;
+    return status === 401 || status === 403;
+}
+
 export function buildNavigationGuard(
     options: SuperAdminGuardOptions,
 ): NavigationGuardWithThis<undefined> | null {
     const { authGuard, manifestGuard } = options;
     if (!authGuard && !manifestGuard) return null;
 
+    // Set when a manifest 401/403 already sent the user to `onUnauthenticated()`.
+    // Cleared as soon as any navigation gets through, so a later expiry is
+    // handled again — see the loop note below.
+    let redirectedForUnauthorized = false;
+    // ...and whether they actually got there.
+    //
+    // This is the question the budget is really asking: has the operator had a
+    // chance to log in since we sent them away? Concurrent navigations have
+    // not, so they belong to the same episode and follow the first one to
+    // login rather than spending a second attempt.
+    //
+    // Deliberately NOT an identity comparison on the rejection or on the
+    // promise `ensureLoaded()` returned. Both were tried and both are
+    // implementation artefacts a valid consumer can change: a store may cache
+    // one `Error` and rethrow it, and `async () => { await store.ensure(); }`
+    // wraps one shared request in a fresh promise per call. The contract
+    // promises `Promise<void>`, nothing more. A navigation to a public route,
+    // by contrast, is something this guard observes directly.
+    let reachedLoginAfterRedirect = false;
+
     return async (to: RouteLocationNormalized) => {
-        if (to.meta?.public === true) return true;
+        if (to.meta?.public === true) {
+            // `onUnauthenticated()` sends them to the login route, which is
+            // public — so this is the guard seeing the redirect land.
+            if (redirectedForUnauthorized) reachedLoginAfterRedirect = true;
+            return true;
+        }
 
         if (authGuard) {
             if (!authGuard.isAuthenticated()) return authGuard.onUnauthenticated();
@@ -209,7 +280,41 @@ export function buildNavigationGuard(
         if (manifestGuard) {
             try {
                 await manifestGuard.ensureLoaded();
+                redirectedForUnauthorized = false;
+                reachedLoginAfterRedirect = false;
             } catch (err) {
+                // A 401/403 is usually an expired or missing session, not a
+                // broken manifest. Sending it to the fail-closed error page
+                // tells the operator "the manifest could not be loaded" and
+                // leaves them on a dead end, when the truth is "log in again".
+                //
+                // This happens whenever `isAuthenticated()` only checks that a
+                // token exists (the common implementation) while the token has
+                // expired: auth passes, the manifest request does not.
+                //
+                // Exactly ONCE, though. `onUnauthenticated()` commonly clears
+                // the session (`authStore.logout(); return '/login'`), so if
+                // the manifest keeps rejecting for a reason the login cannot
+                // fix — the account lacks the admin role, the endpoint is
+                // misconfigured, the backend is down — retrying it produces
+                // an unbreakable loop: log in → /admin → 401 → logged out →
+                // /login. The second time we fail closed to the error page
+                // instead, which at least says something and keeps the session.
+                //
+                // "Once" means once per LOGIN OPPORTUNITY, not once per guard
+                // call.
+                // Two protected navigations can overlap, and `ensureLoaded()`
+                // hands both of them the same in-flight promise — so both land
+                // here before either navigation completes. Counting that as
+                // two attempts would send the second, newer navigation to the
+                // error page over an ordinary expired session.
+                if (authGuard && isUnauthorizedError(err)) {
+                    if (!redirectedForUnauthorized || !reachedLoginAfterRedirect) {
+                        redirectedForUnauthorized = true;
+                        return authGuard.onUnauthenticated();
+                    }
+                }
+
                 if (manifestGuard.errorRoute && to.path !== manifestGuard.errorRoute) {
                     return manifestGuard.errorRoute;
                 }

package/src/vue/use-api-list.ts

@@ -115,7 +115,8 @@ export function useApiList<T, TFilter extends Record<string, unknown> = Record<s
     }
 
     async function setPageSize(size: number) {
-        pageSize.value = Math.max(1, Math.floor(size));
+        // The admin API's pageSize is 1..200; there is no "all" to pass on.
+        pageSize.value = Math.min(200, Math.max(1, Math.floor(size)));
         page.value = 1;
         await load();
     }

package/src/vue/use-pagination.ts

@@ -0,0 +1,63 @@
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue';
+
+// Client-side paging for a list that is already fully loaded.
+//
+// Most admin lists fetch everything and filter in the browser; without this
+// they would each carry the same three lines of `slice()` plus the same
+// off-the-end guard. Lists that page on the server (see `useApiList`) bind
+// AdminPaginator to their own state instead and do not need this.
+
+/** Quasar's convention: 0 rows per page means no paging at all. */
+export const ALL_ROWS = 0;
+
+/** Starting page size for every list; AdminPaginator restores a stored one. */
+export const DEFAULT_ROWS_PER_PAGE = 10;
+
+/** The sizes a locally paged list offers, in order. */
+export const PAGE_SIZE_OPTIONS = [10, 25, 50, 100, ALL_ROWS] as const;
+
+/**
+ * The same without "all". A server-paged list cannot honour it: the admin API
+ * caps `pageSize` at 200 and falls back to 50 when it is omitted, so the
+ * option would claim to show everything while showing the first fifty.
+ */
+export const SERVER_PAGE_SIZE_OPTIONS = [10, 25, 50, 100] as const;
+
+export interface UsePaginationResult<T> {
+    page: Ref<number>;
+    rowsPerPage: Ref<number>;
+    /** Total across all pages — what AdminPaginator counts with. */
+    total: ComputedRef<number>;
+    /** The slice to render. */
+    pagedRows: ComputedRef<T[]>;
+}
+
+export function usePagination<T>(
+    rows: Ref<readonly T[]> | ComputedRef<readonly T[]>,
+    initialRowsPerPage = DEFAULT_ROWS_PER_PAGE,
+): UsePaginationResult<T> {
+    const page = ref(1);
+    const rowsPerPage = ref(initialRowsPerPage);
+
+    const total = computed(() => rows.value.length);
+
+    const pageCount = computed(() =>
+        rowsPerPage.value === ALL_ROWS
+            ? 1
+            : Math.max(1, Math.ceil(total.value / rowsPerPage.value)),
+    );
+
+    // Filtering can shrink a list under the current page — without this the
+    // table would render an empty slice and look like it lost its rows.
+    watch(pageCount, (count) => {
+        if (page.value > count) page.value = count;
+    });
+
+    const pagedRows = computed(() => {
+        if (rowsPerPage.value === ALL_ROWS) return [...rows.value];
+        const start = (page.value - 1) * rowsPerPage.value;
+        return rows.value.slice(start, start + rowsPerPage.value);
+    });
+
+    return { page, rowsPerPage, total, pagedRows };
+}

package/src/vue/use-plans.ts

@@ -1,5 +1,5 @@
 // usePlans + usePlanVersions — Vue 3 composables for the SuperAdmin
-// plan management. SPEC_V2 §11.1 M6:
+// plan management.:
 //   Pack 1 → usePlans (root CRUD)
 //   Pack 2a → usePlanVersions (draft/publish lifecycle)
 
@@ -192,7 +192,6 @@ export function usePlans(options: UsePlansOptions): UsePlansResult {
 
 // =============================================================================
 // usePlanVersions — lifecycle operations for a specific plan ID
-// (SPEC_V2 §11.1 M6 Pack 2a).
 // =============================================================================
 
 export interface UsePlanVersionsOptions {

package/src/vue/use-sign-out.ts

@@ -0,0 +1,90 @@
+// Signing out, in one place.
+//
+// Both platform affordances that offer it — the layout header button and the
+// fail-closed error page — are mounted as bare route components in every
+// consumer we know of, which means neither an `onLogout` prop nor a `@logout`
+// listener reaches them. Their fallback therefore has to be the real thing.
+//
+// Navigating to `/login` on its own is not it. An app's `isAuthenticated()`
+// typically reads a token out of storage, so a session left behind means the
+// next navigation to `/admin` passes the guard again: the operator clicked
+// "sign out", saw the login form, and is still signed in.
+//
+// The adapter that knows how to start a session is the only thing that knows
+// how to end it, hence `loginAdapter.logout`.
+
+import { inject } from 'vue';
+import { useRouter } from 'vue-router';
+
+import {
+    SUPER_ADMIN_LOGIN_ADAPTER_KEY,
+    SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY,
+} from './super-admin-context.js';
+
+/** Where `createAdminRoutes()` registers the login page. */
+export const DEFAULT_LOGIN_PATH = '/login';
+
+export interface UseSignOutOptions {
+    /** Route to land on afterwards. Default `/login`. */
+    loginPath?: string;
+}
+
+/**
+ * Returns the platform's default sign-out: end the session, then go to login.
+ *
+ * Must be called during component setup — it injects the login adapter and
+ * uses the router.
+ */
+export function useSignOut(options: UseSignOutOptions = {}): () => Promise<void> {
+    const router = useRouter();
+    const adapter = inject(SUPER_ADMIN_LOGIN_ADAPTER_KEY, undefined);
+    const clearManifestCache = inject(SUPER_ADMIN_MANIFEST_CLEAR_CACHE_KEY, undefined);
+
+    return async function signOut(): Promise<void> {
+        if (adapter?.logout) {
+            try {
+                await adapter.logout();
+            } catch (err) {
+                // Navigate anyway. A rejected `logout()` — a server-side
+                // revocation that failed, say — must not strand the operator on
+                // the protected page they just asked to leave, and both callers
+                // discard this promise, so an escaping rejection would be
+                // invisible. Leaving is also the safer half: the adapter may
+                // well have cleared the local token before the request failed.
+                console.error(
+                    '[SaaSiCat] Sign-out failed while ending the session — navigating to the login page anyway. ' +
+                        'The session may still be valid on the server.',
+                    err,
+                );
+            }
+        } else {
+            // Loud rather than silent: the button looks like it worked either
+            // way, so the only place this can surface is the console.
+            console.warn(
+                '[SaaSiCat] Sign-out only navigated to the login page — the session was left ' +
+                    'intact, so the next navigation to /admin will pass the guard again. Add ' +
+                    '`logout()` to the `loginAdapter` you pass to createSuperAdminApp().',
+            );
+        }
+
+        // Unconditionally, and after the adapter either way: the manifest store
+        // stays `loaded` across a sign-out, so without this the next
+        // `ensureLoaded()` returns instantly and hands the *next* operator the
+        // previous session's manifest — their navigation, their capabilities,
+        // their project. Only a full page reload would have cleared it, and
+        // signing out does not force one.
+        if (clearManifestCache) {
+            try {
+                await clearManifestCache();
+            } catch (err) {
+                console.error(
+                    '[SaaSiCat] Sign-out could not discard the cached manifest. The next login in ' +
+                        'this tab may see the previous session’s navigation until the page reloads.',
+                    err,
+                );
+            }
+        }
+
+        await router.replace(options.loginPath ?? DEFAULT_LOGIN_PATH);
+    };
+}

package/src/vue/use-tenant-billing.ts

@@ -56,7 +56,7 @@ export interface UsageSnapshotShape {
     };
     usage: Record<string, number>;
     /**
-     * P11.4 (METAMODELL §17a): Read-only package snapshot from the
+     * P11.4: Read-only package snapshot from the
      * original CheckoutOffer. `null` for subscriptions without a
      * CheckoutOffer origin. The JSON structure matches the Offer
      * schema; the UI can read `bundleVersionIds`, `currency`,

package/src/vue/use-tenant-manifest.ts

@@ -5,7 +5,6 @@
 // backend renders per Tenant. This lets the app UI build the navigation
 // declaratively from the Manifest instead of filtering it itself.
 //
-// Spec: handoff/superadmin/QUICKSTART_SIMPLIFICATIONS.md §P14.
 
 import { ref, type Ref } from 'vue';
 import { defaultHttpClient, type HttpClient } from '../client/types.js';