@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/pages-tenant/default-i18n.ts

@@ -1,6 +1,10 @@
 // Default i18n map for the tenant plan section. Consumers override individual
 // keys via the `i18n` prop or pass their own map through (build a vue-i18n
-// resolver on top of this shape).
+// resolver on top of this shape). The map that a component falls back to is
+// picked from the active SuperAdmin locale via
+// `defaultTenantPlanSectionI18n()`.
+
+import type { SaLocale } from '../client/i18n/locale.js';
 
 export interface TenantPlanSectionI18n {
     sectionTitle: string;
@@ -139,6 +143,29 @@ export interface TenantPlanSectionI18n {
     packageSnapshotNone: string;
     packageSnapshotShowRaw: string;
     packageSnapshotHideRaw: string;
+    /** Inline error prefix (`Fehler: …`). */
+    errorLabel: string;
+    /** Tenant self-service page "Meine Bundles" (MySubscriptionBundlesPage). */
+    myBundlesTitle: string;
+    myBundlesSubtitle: string;
+    myBundlesEmptyPrefix: string;
+    myBundlesEmptySuffix: string;
+    myBundlesBookedSince: string;
+    myBundlesCanceledAt: string;
+    myBundlesRunsUntil: string;
+    myBundlesCancelInProgress: string;
+    myBundlesBookInProgress: string;
+    myBundlesCancelConfirm: string;
+    myBundlesStatusCanceledPending: string;
+    myBundlesStatusEnded: string;
+    myBundlesAddBundleLabel: string;
+    myBundlesAddSelectPlaceholder: string;
+    myBundlesPricePerMonthShort: string;
+    myBundlesHiddenIncompatible: string;
+    myBundlesBundleVersionIdLabel: string;
+    myBundlesBundleVersionIdPlaceholder: string;
+    myBundlesMinimumTermLabel: string;
+    myBundlesMinimumTermPlaceholder: string;
 }
 
 /** German default strings — apps can override them selectively. */
@@ -277,4 +304,193 @@ export const DEFAULT_I18N_DE: TenantPlanSectionI18n = {
     packageSnapshotNone: 'Diese Subscription wurde nicht über ein Webseiten-Angebot abgeschlossen.',
     packageSnapshotShowRaw: 'Rohdaten anzeigen',
     packageSnapshotHideRaw: 'Rohdaten ausblenden',
+    errorLabel: 'Fehler',
+    myBundlesTitle: 'Meine Bundles',
+    myBundlesSubtitle:
+        'Eigenständig gebuchte Add-On-Pakete zu deinem Plan. Mindestlaufzeit + Kündigungs- Termin pro Bundle.',
+    myBundlesEmptyPrefix: 'Du hast noch kein Bundle gebucht. Über',
+    myBundlesEmptySuffix: 'kannst du dein Paket um zusätzliche Features & Quotas erweitern.',
+    myBundlesBookedSince: 'Gebucht seit',
+    myBundlesCanceledAt: 'Gekündigt am',
+    myBundlesRunsUntil: 'läuft bis',
+    myBundlesCancelInProgress: 'Kündige …',
+    myBundlesBookInProgress: 'Buche …',
+    myBundlesCancelConfirm:
+        'Bundle wirklich kündigen? Die Kündigung wird zum nächstmöglichen Termin wirksam.',
+    myBundlesStatusCanceledPending: 'Kündigung wirksam ab …',
+    myBundlesStatusEnded: 'Beendet',
+    myBundlesAddBundleLabel: 'Bundle',
+    myBundlesAddSelectPlaceholder: '— bitte wählen —',
+    myBundlesPricePerMonthShort: '€ / Mo',
+    myBundlesHiddenIncompatible: 'weitere Bundle(s) ausgeblendet — nicht kompatibel mit Plan',
+    myBundlesBundleVersionIdLabel: 'BundleVersion-ID',
+    myBundlesBundleVersionIdPlaceholder: 'UUID der gewünschten Bundle-Version',
+    myBundlesMinimumTermLabel: 'Mindestlaufzeit (Monate, optional)',
+    myBundlesMinimumTermPlaceholder: 'Default: 12',
 };
+
+/** English default strings — mirror of {@link DEFAULT_I18N_DE}. */
+export const DEFAULT_I18N_EN: TenantPlanSectionI18n = {
+    sectionTitle: 'Plan & usage',
+    sectionSubtitle: 'Current plan, usage and bundles.',
+    loading: 'Loading …',
+    noSubscription: 'No subscription found for this tenant.',
+    activePlan: 'Current plan',
+    cycleMonthly: 'Monthly',
+    cycleYearly: 'Yearly',
+    statusActive: 'Active',
+    statusTrial: 'Trial',
+    statusPastDue: 'Payment overdue',
+    statusCanceled: 'Canceled',
+    statusPendingSales: 'Sales review',
+    trialEndsAt: 'Trial ends on',
+    pilotEndsAt: 'Pilot ends on',
+    nextBillingDate: 'Next billing date',
+    pendingChange: 'Pending plan change',
+    changeFromTo: 'Change to',
+    changeEffectiveAt: 'effective as of',
+    changePlanButton: 'Change plan',
+    cancelSubscriptionButton: 'Cancel subscription',
+    usageTitle: 'Usage',
+    featuresOverviewTitle: 'Features',
+    featuresActive: 'Included',
+    featuresLocked: 'Not included',
+    bundlesStoreTitle: 'Bundles',
+    bundlesBookedTitle: 'Booked bundles',
+    bundlesAvailableTitle: 'Available bundles',
+    bundlesAvailableEmpty: 'There are currently no additional bundles available.',
+    bundlesPerMonth: 'net/month',
+    bundleBookAction: 'Book bundle',
+    bundleBookInProgress: 'Booking …',
+    bundleCancelAction: 'Cancel',
+    bundleReactivateAction: 'Reactivate',
+    bundleReactivateConfirmTitle: 'Reactivate bundle',
+    bundleReactivateConfirmBody:
+        'The cancellation will be reverted. The bundle stays booked, continues to run normally and will be billed again.',
+    bundleCanceledAt: 'Canceled effective',
+    bundleMinimumTermUntil: 'Minimum term until',
+    bundleIncludesLabel: 'Includes',
+    bundleAlreadyBooked: 'Already booked',
+    bundleIncompatible: 'Not compatible with the current plan',
+    bundleMissingRequires: 'Requires',
+    bundlePreviewAddTitle: 'Book bundle',
+    bundlePreviewCancelTitle: 'Cancel bundle',
+    bundlePreviewLoading: 'Calculating preview …',
+    bundlePreviewProrationTitle: 'Prorated billing',
+    bundlePreviewProratedNow: 'Prorated amount due today',
+    bundlePreviewProrationDays: 'days',
+    bundlePreviewNextPeriod: 'Regular price from the next period',
+    bundlePreviewTrialNote:
+        'Nothing is charged during the trial — billing starts with the first paid period.',
+    bundlePreviewNoPrice: 'No list price is configured for the current billing cycle.',
+    bundlePreviewMinimumTermLabel: 'Minimum term',
+    bundlePreviewMinimumTermMonths: 'months, until',
+    bundlePreviewMinimumTermNone: 'No minimum term',
+    bundlePreviewRedundantTitle: 'Features already included (would be paid for twice)',
+    bundlePreviewRedundantCoveredByPlan: 'already in the plan',
+    bundlePreviewRedundantCoveredByBundle: 'already in bundle',
+    bundlePreviewMissingRequiresTitle: 'Missing prerequisites',
+    bundlePreviewBlockersTitle: 'Booking not possible',
+    bundlePreviewWarningsTitle: 'Notes',
+    bundlePreviewEffectiveAt: 'Cancellation effective as of',
+    bundlePreviewSavings: 'Savings per period once effective',
+    bundlePreviewConfirmAdd: 'Book (chargeable)',
+    bundlePreviewConfirmCancel: 'Confirm cancellation',
+    bundlePreviewInProgress: 'Processing …',
+    bundlePreviewClose: 'Cancel',
+    pendingVersionTitle: 'Upcoming plan change',
+    pendingVersionChipNonRegressive: 'Improvement',
+    pendingVersionChipRegressive: 'Confirmation required',
+    pendingVersionEffectiveAt: 'Effective as of',
+    pendingVersionAcceptAction: 'Accept changes',
+    pendingVersionAcceptInProgress: 'Accepting …',
+    pendingVersionAcceptedAt: 'Accepted on',
+    wizardTitle: 'Change plan',
+    wizardClose: 'Close',
+    wizardCurrent: 'Current',
+    wizardBadgeCurrent: 'active',
+    wizardBadgePopular: 'popular',
+    wizardPriceUnitMonthly: 'net/month',
+    wizardPriceUnitYearly: 'net/year',
+    wizardPriceOnRequest: 'on request',
+    wizardStepChoose: 'Choose plan',
+    wizardStepChooseIntro:
+        'Choose your target plan and the billing cycle. In the next step we show the usage check and the feature diff.',
+    wizardStepPreview: 'Preview',
+    wizardStepConfirm: 'Confirm',
+    wizardNext: 'Next',
+    wizardBack: 'Back',
+    wizardPreviewLoading: 'Calculating preview …',
+    wizardEffectiveAtLabel: 'Effective as of',
+    wizardEffectiveImmediate: 'Effective immediately',
+    wizardProrationTitle: 'Prorated billing',
+    wizardProrationLine: 'Additional amount until the end of the period:',
+    wizardProrationDays: 'days',
+    wizardLimitsTitle: 'Limit comparison',
+    wizardLimitsUsed: 'Usage',
+    wizardLimitsCurrent: 'Current',
+    wizardLimitsTarget: 'Target',
+    wizardFeaturesGained: 'Newly unlocked',
+    wizardFeaturesLost: 'Features you lose',
+    wizardBlockersTitle: 'Blockers',
+    wizardConfirmImmediate: 'The change takes effect immediately.',
+    wizardConfirmScheduled: 'The change takes effect on',
+    wizardConfirmAction: 'Confirm change',
+    wizardConfirmInProgress: 'Changing …',
+    wizardConfirmPriceTitle: 'Price overview',
+    wizardConfirmProratedNow: 'Prorated amount due today',
+    wizardConfirmRecurringNext: 'Regular price from the next period',
+    wizardConfirmRecurringFrom: 'Regular price due from',
+    wizardConfirmPerCycleMonthly: 'per month',
+    wizardConfirmPerCycleYearly: 'per year',
+    wizardConfirmTrialNote: 'Nothing is charged during the trial.',
+    wizardConfirmRecurringTrialEnd: 'Regular price from the end of the trial',
+    wizardChangeTypeUpgrade: 'Upgrade',
+    wizardChangeTypeDowngrade: 'Downgrade',
+    wizardChangeTypeCycle: 'Cycle change',
+    wizardChangeTypeNoop: 'No change',
+    packageSnapshotTitle: 'Booked plan (snapshot)',
+    packageSnapshotSubtitle:
+        'Read-only copy of the plan as it was marketed at the time of purchase.',
+    packageSnapshotCapturedAt: 'Captured on',
+    packageSnapshotOfferRef: 'Offer reference',
+    packageSnapshotPlanLabel: 'Plan',
+    packageSnapshotPlanVersionLabel: 'Plan version',
+    packageSnapshotCycleLabel: 'Billing cycle',
+    packageSnapshotBundlesLabel: 'Included bundles',
+    packageSnapshotBundlesEmpty: 'No bundles in the plan.',
+    packageSnapshotPriceMonthly: 'Monthly price',
+    packageSnapshotPriceYearly: 'Yearly price',
+    packageSnapshotPriceTotal: 'Total price',
+    packageSnapshotNone: 'This subscription was not created through a website offer.',
+    packageSnapshotShowRaw: 'Show raw data',
+    packageSnapshotHideRaw: 'Hide raw data',
+    errorLabel: 'Error',
+    myBundlesTitle: 'My bundles',
+    myBundlesSubtitle:
+        'Add-on packages booked independently on top of your plan. Minimum term + cancellation date per bundle.',
+    myBundlesEmptyPrefix: 'You have not booked a bundle yet. Use',
+    myBundlesEmptySuffix: 'to extend your plan with additional features & quotas.',
+    myBundlesBookedSince: 'Booked since',
+    myBundlesCanceledAt: 'Canceled on',
+    myBundlesRunsUntil: 'runs until',
+    myBundlesCancelInProgress: 'Canceling …',
+    myBundlesBookInProgress: 'Booking …',
+    myBundlesCancelConfirm:
+        'Really cancel this bundle? The cancellation takes effect on the next possible date.',
+    myBundlesStatusCanceledPending: 'Cancellation effective as of …',
+    myBundlesStatusEnded: 'Ended',
+    myBundlesAddBundleLabel: 'Bundle',
+    myBundlesAddSelectPlaceholder: '— please select —',
+    myBundlesPricePerMonthShort: '€ / mo',
+    myBundlesHiddenIncompatible: 'more bundle(s) hidden — not compatible with plan',
+    myBundlesBundleVersionIdLabel: 'BundleVersion ID',
+    myBundlesBundleVersionIdPlaceholder: 'UUID of the desired bundle version',
+    myBundlesMinimumTermLabel: 'Minimum term (months, optional)',
+    myBundlesMinimumTermPlaceholder: 'Default: 12',
+};
+
+/** Default map for the given UI locale — fallback layer under the `i18n` prop. */
+export function defaultTenantPlanSectionI18n(locale: SaLocale): TenantPlanSectionI18n {
+    return locale === 'en' ? DEFAULT_I18N_EN : DEFAULT_I18N_DE;
+}

package/src/pages-tenant/tenant-plan-section/BundlePreviewDialog.vue

@@ -23,7 +23,10 @@
 
             <template v-else-if="preview">
                 <!-- Blocker: booking/cancellation not possible -->
-                <q-card-section v-if="preview.blockers.length > 0" class="sp-bundle-preview__blockers">
+                <q-card-section
+                    v-if="preview.blockers.length > 0"
+                    class="sp-bundle-preview__blockers"
+                >
                     <div class="sp-bundle-preview__block-title">
                         {{ i18n.bundlePreviewBlockersTitle }}
                     </div>
@@ -77,7 +80,9 @@
                     </div>
                     <div class="sp-bundle-preview__price-row">
                         <span>{{ i18n.bundlePreviewMinimumTermLabel }}</span>
-                        <span v-if="addPreview.minimumTermMonths > 0 && addPreview.minimumTermEndsAt">
+                        <span
+                            v-if="addPreview.minimumTermMonths > 0 && addPreview.minimumTermEndsAt"
+                        >
                             {{ addPreview.minimumTermMonths }}
                             {{ i18n.bundlePreviewMinimumTermMonths }}
                             {{ formatDate(addPreview.minimumTermEndsAt) }}
@@ -123,10 +128,7 @@
                 </q-card-section>
 
                 <!-- Warnings (e.g. MINIMUM_TERM_BINDS) -->
-                <q-card-section
-                    v-if="otherWarnings.length > 0"
-                    class="sp-bundle-preview__warnings"
-                >
+                <q-card-section v-if="otherWarnings.length > 0" class="sp-bundle-preview__warnings">
                     <div class="sp-bundle-preview__block-title">
                         {{ i18n.bundlePreviewWarningsTitle }}
                     </div>
@@ -168,7 +170,7 @@ import type {
     BundleAddPreviewShape,
     BundleCancelPreviewShape,
     BundlePreviewShape,
-} from '../../use-tenant-billing.js';
+} from '../../vue/use-tenant-billing.js';
 
 // BundlePreviewDialog (#37/#61) — preview BEFORE bundle add/cancel in the
 // tenant self-service: proration until period end, next-period price,

package/src/pages-tenant/tenant-plan-section/TenantBundleStore.vue

@@ -9,18 +9,13 @@
                 <li v-for="row in bookedRows" :key="row.id" class="sp-plan-section__item">
                     <div>
                         <span class="sp-plan-section__item-label">{{ row.label }}</span>
-                        <span
-                            v-if="row.canceledAt"
-                            class="sp-plan-section__item-canceled"
-                        >
+                        <span v-if="row.canceledAt" class="sp-plan-section__item-canceled">
                             {{ i18n.bundleCanceledAt }}
                             {{ formatDate(row.canceledEffectiveAt ?? row.canceledAt) }}
                         </span>
-                        <span
-                            v-else-if="row.minimumTermEndsAt"
-                            class="sp-plan-section__item-price"
-                        >
-                            {{ i18n.bundleMinimumTermUntil }} {{ formatDate(row.minimumTermEndsAt) }}
+                        <span v-else-if="row.minimumTermEndsAt" class="sp-plan-section__item-price">
+                            {{ i18n.bundleMinimumTermUntil }}
+                            {{ formatDate(row.minimumTermEndsAt) }}
                         </span>
                     </div>
                     <div class="sp-bundle-store__booked-actions">
@@ -114,7 +109,11 @@
                         color="primary"
                         unelevated
                         class="sp-bundle-store__card-action"
-                        :label="buyingId === row.bundle.bundleVersionId ? i18n.bundleBookInProgress : i18n.bundleBookAction"
+                        :label="
+                            buyingId === row.bundle.bundleVersionId
+                                ? i18n.bundleBookInProgress
+                                : i18n.bundleBookAction
+                        "
                         :loading="buyingId === row.bundle.bundleVersionId"
                         :disable="buyingId !== null"
                         @click="emit('buy', row.bundle.bundleVersionId)"
@@ -131,8 +130,8 @@
 import { computed } from 'vue';
 import { missingRequiresFor } from '@saasicat/types';
 import type { TenantPlanSectionI18n } from '../default-i18n.js';
-import type { CatalogBundle } from '../../use-tenant-billing-catalog.js';
-import type { SubscriptionBundleShape } from '../../use-tenant-billing.js';
+import type { CatalogBundle } from '../../vue/use-tenant-billing-catalog.js';
+import type { SubscriptionBundleShape } from '../../vue/use-tenant-billing.js';
 
 // TenantBundleStore — bundle sales on "Paket & Verbrauch" (#15):
 // lists booked (cancelable) and available (bookable) catalog bundles.

package/src/pages-tenant/tenant-plan-section/TenantFeatureMatrix.vue

@@ -38,6 +38,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { FeatureUiRegistry } from '@saasicat/types';
+import { useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
 import type { TenantPlanSectionI18n } from '../default-i18n.js';
 
 // TenantFeatureMatrix — complete feature-scope overview (#18):
@@ -54,6 +55,8 @@ const props = defineProps<{
     i18n: TenantPlanSectionI18n;
 }>();
 
+const { intlLocale } = useSuperAdminI18n();
+
 interface FeatureRow {
     key: string;
     active: boolean;
@@ -81,7 +84,7 @@ const features = computed<FeatureRow[]>(() => {
     // Included first, then alphabetically by label.
     return rows.sort((a, b) => {
         if (a.active !== b.active) return a.active ? -1 : 1;
-        return a.label.localeCompare(b.label, 'de');
+        return a.label.localeCompare(b.label, intlLocale.value);
     });
 });
 </script>

package/src/pages-tenant/tenant-plan-section/TenantPlanCardHeader.vue

@@ -45,7 +45,7 @@
 
 <script setup lang="ts">
 import type { TenantPlanSectionI18n } from '../default-i18n.js';
-import type { UsageSnapshotShape } from '../../use-tenant-billing.js';
+import type { UsageSnapshotShape } from '../../vue/use-tenant-billing.js';
 
 defineProps<{
     usage: UsageSnapshotShape;

package/src/pages-tenant/tenant-plan-section/TenantUsageGrid.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import type { TenantPlanSectionI18n } from '../default-i18n.js';
-import type { UsageSnapshotShape } from '../../use-tenant-billing.js';
+import type { UsageSnapshotShape } from '../../vue/use-tenant-billing.js';
 import UsageBar from '../UsageBar.vue';
 
 defineProps<{

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

@@ -0,0 +1,192 @@
+// createSuperAdminApp — universal bootstrap helper for SuperAdmin Vue apps.
+// Bundles the Quasar/Pinia/Router setup that every consumer app rebuilds itself
+// today, and exposes the platform contract maps (`extensions:`, `actions:`)
+// via `provide()`.
+//
+// This module is the Quasar layer entry (`@saasicat/ui-vue/quasar`) — the only
+// non-page module in the package that imports `quasar`. The injection keys,
+// option types and the navigation guard live in the Vue layer
+// (`super-admin-context.ts`) so the main entry stays Quasar-free.
+//
+// What the helper does NOT do:
+//   - Auth stores, login flows, JWT refresh — app-specific.
+//   - CSS imports (Quasar CSS, Material Icons, app theme) — these stay in the
+//     app's own `main.ts`, because tsup does not bundle CSS.
+
+import { createApp, type App, type Component } from 'vue';
+import { Quasar, Notify, Dialog, Loading, type QuasarPluginOptions } from 'quasar';
+import { createPinia, type Pinia } from 'pinia';
+import {
+    createRouter,
+    createWebHistory,
+    type RouteRecordRaw,
+    type Router,
+    type RouterHistory,
+} from 'vue-router';
+
+import { defaultHttpClient, type HttpClient } from '../client/types.js';
+import {
+    SUPER_ADMIN_ACTIONS_KEY,
+    SUPER_ADMIN_BRAND_KEY,
+    SUPER_ADMIN_ENDPOINTS_KEY,
+    SUPER_ADMIN_EXTENSIONS_KEY,
+    SUPER_ADMIN_HTTP_KEY,
+    SUPER_ADMIN_LOGIN_ADAPTER_KEY,
+    SUPER_ADMIN_MANIFEST_KEY,
+    buildNavigationGuard,
+    type ActionsMap,
+    type ExtensionsMap,
+    type InstallPlugin,
+    type SuperAdminBrand,
+    type SuperAdminEndpoints,
+    type SuperAdminGuardOptions,
+    type SuperAdminLoginAdapter,
+} from '../vue/super-admin-context.js';
+import { SUPER_ADMIN_NOTIFY_KEY, type UiNotify } from '../vue/ui-notify.js';
+import {
+    SUPER_ADMIN_I18N_KEY,
+    createSuperAdminI18n,
+    type SuperAdminI18n,
+    type SuperAdminI18nOptions,
+} from '../vue/use-super-admin-i18n.js';
+import { quasarNotify } from './notify.js';
+
+export interface CreateSuperAdminAppOptions extends SuperAdminGuardOptions {
+    /** App root component (`App.vue`). */
+    rootComponent: Component;
+    /** App branding (logo, name). */
+    brand: SuperAdminBrand;
+    /** Endpoint configuration. */
+    endpoints: SuperAdminEndpoints;
+    /** App's own routes (login, standard pages, bundle pages, …). */
+    appRoutes: RouteRecordRaw[];
+    /**
+     * Static `extensions:` map. Manifest `projectPages[].componentKey` is
+     * looked up in it (see Spec §4.4).
+     */
+    extensions?: ExtensionsMap;
+    /**
+     * Static `actions:` map. Manifest `tenants.actions[].actionKey` is looked
+     * up in it.
+     */
+    actions?: ActionsMap;
+    /**
+     * Optional: login adapter. When set, it is exposed via `provide()` for the
+     * shared `<SuperAdminLoginPage>` (from `pages-standard/`) — the app no
+     * longer needs to hold its own LoginPage Vue component.
+     */
+    loginAdapter?: SuperAdminLoginAdapter;
+    /**
+     * Optional: router history variant, default `createWebHistory()`.
+     * Apps with a subpath mount override this.
+     */
+    routerHistory?: RouterHistory;
+    /**
+     * Optional: Quasar configuration. Default loads `Notify`/`Dialog`/`Loading`
+     * with the established consumer convention (`top-right`, 3 s).
+     */
+    quasarOptions?: Partial<QuasarPluginOptions>;
+    /**
+     * Optional: notify port for the standard pages' toasts. Default is the
+     * Quasar `Notify` implementation — apps with their own notification
+     * center replace it here without touching the pages.
+     */
+    notify?: UiNotify;
+    /**
+     * Optional: additional Vue plugins (e.g. an app's own NotificationCenter)
+     * that are installed after the platform setup, before the mount.
+     */
+    installPlugins?: InstallPlugin[];
+    /**
+     * Optional: `HttpClient` for all pre-login calls (boot, first-run setup).
+     * Default `defaultHttpClient()` (= `fetch`). Consumers pass their own
+     * variant through (auth header, baseURL, retry) — it then applies uniformly,
+     * including for the setup wizard. Consumed via `useSuperAdminHttp()`.
+     */
+    http?: HttpClient;
+    /**
+     * Optional: UI locale + string overrides. Default is German. The created
+     * context is returned on the handle (`handle.i18n`) — set
+     * `handle.i18n.locale.value = 'en'` (or pass a `Ref` here) to switch at
+     * runtime. Consumed via `useSuperAdminI18n()` / `useSaMessages()`.
+     */
+    i18n?: SuperAdminI18nOptions;
+}
+
+export interface SuperAdminAppHandle {
+    app: App;
+    router: Router;
+    pinia: Pinia;
+    /** i18n context of the shell — switch locale via `i18n.locale.value`. */
+    i18n: SuperAdminI18n;
+    /** Mounts the app on a selector. Returns the root component instance. */
+    mount: (selector: string | Element) => ReturnType<App['mount']>;
+}
+
+const DEFAULT_QUASAR_OPTIONS: QuasarPluginOptions = {
+    plugins: { Notify, Dialog, Loading },
+    config: { notify: { position: 'top-right', timeout: 3000 } },
+};
+
+/**
+ * Universal bootstrap function for SuperAdmin apps. Replaces the `main.ts`
+ * boilerplate duplicated per app today (Quasar + Pinia + Router + manifest
+ * guard) and exposes the platform maps via `provide()` for downstream
+ * components.
+ */
+export function createSuperAdminApp(options: CreateSuperAdminAppOptions): SuperAdminAppHandle {
+    const app = createApp(options.rootComponent);
+
+    app.use(Quasar, options.quasarOptions ?? DEFAULT_QUASAR_OPTIONS);
+
+    const pinia = createPinia();
+    app.use(pinia);
+
+    const router = createRouter({
+        history: options.routerHistory ?? createWebHistory(),
+        routes: options.appRoutes,
+    });
+
+    const navGuard = buildNavigationGuard(options);
+    if (navGuard) {
+        router.beforeEach(navGuard);
+    }
+
+    app.use(router);
+
+    const endpoints: Required<SuperAdminEndpoints> = {
+        apiBase: options.endpoints.apiBase,
+        publicBootEndpoint:
+            options.endpoints.publicBootEndpoint ?? `${options.endpoints.apiBase}/boot`,
+        manifestEndpoint:
+            options.endpoints.manifestEndpoint ?? `${options.endpoints.apiBase}/manifest`,
+    };
+
+    const i18n = createSuperAdminI18n(options.i18n);
+
+    app.provide(SUPER_ADMIN_BRAND_KEY, { tag: 'SuperAdmin', ...options.brand });
+    app.provide(SUPER_ADMIN_I18N_KEY, i18n);
+    app.provide(SUPER_ADMIN_ENDPOINTS_KEY, endpoints);
+    app.provide(SUPER_ADMIN_EXTENSIONS_KEY, options.extensions ?? {});
+    app.provide(SUPER_ADMIN_ACTIONS_KEY, options.actions ?? {});
+    app.provide(SUPER_ADMIN_NOTIFY_KEY, options.notify ?? quasarNotify);
+    if (options.manifestGuard?.getManifest) {
+        app.provide(SUPER_ADMIN_MANIFEST_KEY, options.manifestGuard.getManifest);
+    }
+    if (options.loginAdapter) {
+        app.provide(SUPER_ADMIN_LOGIN_ADAPTER_KEY, options.loginAdapter);
+    }
+    app.provide(SUPER_ADMIN_HTTP_KEY, options.http ?? defaultHttpClient());
+
+    for (const plugin of options.installPlugins ?? []) {
+        plugin(app);
+    }
+
+    return {
+        app,
+        router,
+        pinia,
+        i18n,
+        mount: (selector) => app.mount(selector),
+    };
+}

package/src/quasar/index.ts

@@ -0,0 +1,11 @@
+// @saasicat/ui-vue/quasar — the Quasar layer entry: everything that installs
+// or calls Quasar from TypeScript. Kept out of the main entry so that
+// `import ... from '@saasicat/ui-vue'` never executes a `quasar` import
+// (Quasar is an optional peer dependency).
+//
+// The Quasar standard pages themselves are consumed as raw SFCs via the
+// `./pages-standard/*`, `./pages-tenant/*` and `./components/*` subpath
+// exports, not through this bundle (tsup ignores `.vue`).
+
+export * from './create-super-admin-app.js';
+export * from './notify.js';

package/src/quasar/notify.ts

@@ -0,0 +1,30 @@
+// Quasar implementation of the UI notify port.
+//
+// Standard pages resolve the port via `useSuperAdminNotify()`: the app-provided
+// port wins, otherwise the Quasar default below. The fallback keeps apps
+// working that mount the standard pages without `createSuperAdminApp()`
+// (their own `main.ts` installs the Quasar Notify plugin, as before).
+
+import { inject } from 'vue';
+import { Notify } from 'quasar';
+
+import { SUPER_ADMIN_NOTIFY_KEY, type UiNotify } from '../vue/ui-notify.js';
+
+/**
+ * Quasar-backed notify port: `position: 'top'` matches the convention the
+ * standard pages used with their previous direct `$q.notify` calls.
+ */
+export const quasarNotify: UiNotify = (kind, message, options) => {
+    Notify.create({
+        type: kind,
+        message,
+        position: 'top',
+        caption: options?.caption,
+        timeout: options?.timeoutMs,
+    });
+};
+
+/** Returns the app-provided notify port, falling back to the Quasar default. */
+export function useSuperAdminNotify(): UiNotify {
+    return inject(SUPER_ADMIN_NOTIFY_KEY, quasarNotify);
+}