@saasicat/ui-vue 0.4.0 → 0.6.0

package/src/index.ts

@@ -1,75 +1,88 @@
-// @saasicat/ui-vue — Vue 3 components + composables for the
-// SuperAdmin UI shell.
+// @saasicat/ui-vue — Vue 3 composables + loaders for the SuperAdmin UI shell.
 //
-// P4.1 (Phase 30): public boot loader + manifest loader (ETag cache).
-// P4.2 (Phase 31): nav builder + extension host + action registry.
-// P4.3 (Phase 32): batch column fetcher.
-// P4.4 (Phase 33): composables for standard pages (Tenants, Audit, Entitlement).
-// P4.5 (Phase 34): plan-versions list composables + bulk-publish orchestration.
+// The package is layered; each layer has its own entry:
 //
-// Contents:
-//   - types:                HttpClient, KvStore, defaultHttpClient, defaultKvStore
-//   - boot-loader:          BootLoader (framework-agnostic) + BootLoadError
-//   - manifest-loader:      ManifestLoader with ETag cache + ManifestLoadError
-//   - nav-builder:          buildRoutes, buildSidebar, resolveExtension
-//   - action-registry:      ActionRegistry, MissingHandlerError, ActionDefNotInManifestError
-//   - batch-column-fetcher: BatchColumnFetcher + BatchColumnDriftError
-//   - use-api-list:         useApiList<T> generic list composable
-//   - use-tenants:          useTenants typed wrapper
-//   - use-audit-entries:    useAuditEntries typed wrapper
-//   - use-entitlement:      useEntitlement composable
-//   - use-plan-versions:    usePlanVersionsCatalog
-//   - use-bulk-publish:     useBulkPublish (parallel publishes with status tracking)
-//   - use-plan-editor:      usePlanEditor composable (feature discovery, plannedOnly filter)
-//   - use-public-boot:      usePublicBoot composable
-//   - use-manifest:         useManifest composable
-//   - use-nav:              useNav composable
-//   - use-actions:          useActions composable
-//   - use-batch-columns:    useBatchColumns composable
+//   - `@saasicat/ui-vue/client` (`src/client/`)  — framework-free core:
+//     loaders, nav builder, action registry, HTTP contract. No Vue, no
+//     Pinia, no Quasar.
+//   - `@saasicat/ui-vue` (this entry, `src/vue/`) — Vue bindings: composables,
+//     router guards, injection keys, optional Pinia store factory. Re-exports
+//     the client layer. No Quasar.
+//   - `@saasicat/ui-vue/quasar` (`src/quasar/`)   — Quasar bootstrap:
+//     `createSuperAdminApp()` and the Quasar notify port implementation.
+//   - Quasar standard pages/components             — raw SFCs via the
+//     `./pages-standard/*`, `./pages-tenant/*` and `./components/*` subpath
+//     exports (tsup ignores `.vue`).
+//
+// Layer rule (enforced via ESLint `no-restricted-imports`): client imports
+// nothing framework-specific; vue never imports quasar; this entry never
+// reaches the quasar layer or the SFC directories (except the whitelisted
+// framework-free type/i18n modules below).
+
+// ---------------------------------------------------------------------------
+// Client layer (framework-free core).
+// ---------------------------------------------------------------------------
+export * from './client/index.js';
+
+// ---------------------------------------------------------------------------
+// Vue layer: shell contract (injection keys, option types, navigation guard)
+// and the UI notify port. `createSuperAdminApp()` itself lives in
+// `@saasicat/ui-vue/quasar`.
+// ---------------------------------------------------------------------------
+export * from './vue/super-admin-context.js';
+export * from './vue/ui-notify.js';
+export * from './vue/use-super-admin-context.js';
+export * from './vue/use-super-admin-i18n.js';
 
-export * from './version.js';
-export * from './types.js';
-export * from './http-json.js';
-export * from './create-admin-routes.js';
-export * from './boot-loader.js';
-export * from './manifest-loader.js';
-export * from './nav-builder.js';
-export * from './action-registry.js';
-export * from './batch-column-fetcher.js';
-export * from './use-api-list.js';
-export * from './use-tenants.js';
-export * from './use-audit-entries.js';
-export * from './use-entitlement.js';
-export * from './use-tenant-manifest.js';
-export * from './entitlement-provider.js';
-export * from './feature-router-guard.js';
+// ---------------------------------------------------------------------------
+// Vue layer: composables, guards, hosts, store factory.
+// ---------------------------------------------------------------------------
+export * from './vue/create-admin-routes.js';
+export * from './vue/use-api-list.js';
+export * from './vue/use-tenants.js';
+export * from './vue/use-audit-entries.js';
+export * from './vue/use-entitlement.js';
+export * from './vue/use-tenant-manifest.js';
+export * from './vue/entitlement-provider.js';
+export * from './vue/feature-router-guard.js';
 // FeatureGate.vue is not bundled — consumers import it directly:
 //   import FeatureGate from '@saasicat/ui-vue/components/FeatureGate.vue';
-export * from './use-tenant-billing-catalog.js';
-export * from './use-tenant-billing.js';
-export * from './use-subscription-draft.js';
-export * from './pages-tenant/default-i18n.js';
-export * from './use-plan-versions.js';
-export * from './use-bulk-publish.js';
-export * from './use-plan-editor.js';
-export * from './use-public-boot.js';
-export * from './use-discovery.js';
-export * from './use-catalog-entries.js';
-export * from './use-bundles.js';
-export * from './use-bundle-versions-map.js';
-export * from './use-tenant-subscription-bundles.js';
-export * from './use-business-types.js';
-export * from './use-marketing-projections.js';
-export * from './use-promotions.js';
-export * from './use-plans.js';
-export * from './use-live-plan-versions.js';
-export * from './use-manifest.js';
-export * from './use-nav.js';
-export * from './use-actions.js';
-export * from './use-tenant-action-flow.js';
-export * from './use-platform-tenant-actions.js';
-export * from './use-batch-columns.js';
-export * from './plan-versions-catalog.js';
+export * from './vue/use-tenant-billing-catalog.js';
+export * from './vue/use-tenant-billing.js';
+export * from './vue/use-subscription-draft.js';
+export * from './vue/use-plan-versions.js';
+export * from './vue/use-bulk-publish.js';
+export * from './vue/use-plan-editor.js';
+export * from './vue/use-public-boot.js';
+export * from './vue/use-discovery.js';
+export * from './vue/use-catalog-entries.js';
+export * from './vue/use-bundles.js';
+export * from './vue/use-bundle-versions-map.js';
+export * from './vue/use-tenant-subscription-bundles.js';
+export * from './vue/use-marketing-projections.js';
+export * from './vue/use-promotions.js';
+export * from './vue/use-plans.js';
+export * from './vue/use-live-plan-versions.js';
+export * from './vue/use-manifest.js';
+export * from './vue/use-nav.js';
+export * from './vue/use-actions.js';
+export * from './vue/use-tenant-action-flow.js';
+export * from './vue/use-platform-tenant-actions.js';
+export * from './vue/use-batch-columns.js';
+// Loader factory that builds BootLoader + ManifestLoader from the same
+// endpoint configuration as createSuperAdminApp() — so that endpoints live
+// in a single place per app.
+export * from './vue/platform-loaders.js';
+// ProjectPageHost: resolves manifest projectPages dynamically against the
+// extensions: map — replaces static route duplication in the apps.
+export * from './vue/project-page-host.js';
+// Manifest Pinia store factory — standardizes ensureLoaded/reload/clearCache.
+export * from './vue/manifest-store-factory.js';
+
+// ---------------------------------------------------------------------------
+// Framework-free type/i18n modules that deliberately stay co-located with
+// their SFCs (whitelisted in the ESLint layer rules).
+// ---------------------------------------------------------------------------
 // Platform dialog types for app wrappers that type submit handlers.
 export * from './components/dialogs/types.js';
 // Pure resolvers for translated feature/quota labels in the bundle editors.
@@ -78,18 +91,8 @@ export * from './components/bundle-editor/catalog-i18n.js';
 export * from './pages-standard/platform-email.types.js';
 // Types of the shared EmailHistoryPage (platform email history).
 export * from './pages-standard/email-history.types.js';
-// Universal bootstrap helper for SuperAdmin apps + associated composables.
-export * from './create-super-admin-app.js';
-export * from './use-super-admin-context.js';
-// Loader factory that builds BootLoader + ManifestLoader from the same
-// endpoint configuration as createSuperAdminApp() — so that endpoints live
-// in a single place per app.
-export * from './platform-loaders.js';
-// ProjectPageHost: resolves manifest projectPages dynamically against the
-// extensions: map — replaces static route duplication in the apps.
-export * from './project-page-host.js';
-// Manifest Pinia store factory — standardizes ensureLoaded/reload/clearCache.
-export * from './manifest-store-factory.js';
+// Default German labels for the tenant-facing pages.
+export * from './pages-tenant/default-i18n.js';
 
 // The shared SuperAdmin LoginPage lives at
 // `@saasicat/ui-vue/pages-standard/SuperAdminLoginPage.vue` —

package/src/pages-standard/AdminLayout.vue

@@ -2,7 +2,7 @@
     <q-layout view="lHh Lpr lFf">
         <div v-if="isProduction" class="sa-admin-banner sa-admin-banner--prod">
             <q-icon name="warning" size="14px" />
-            <strong>PRODUCTION</strong> — Aktionen wirken sich sofort auf alle Mandanten aus.
+            <strong>PRODUCTION</strong> — {{ msg.header.productionWarning }}
         </div>
 
         <q-header elevated class="sa-admin-header">
@@ -10,11 +10,11 @@
                 <q-btn flat dense round icon="menu" @click="leftDrawerOpen = !leftDrawerOpen" />
                 <q-toolbar-title class="text-weight-bold">
                     {{ currentPageTitle }}
-                    <div class="sa-admin-header__sub">SuperAdmin · Plattform-Verwaltung</div>
+                    <div class="sa-admin-header__sub">{{ msg.header.subtitle }}</div>
                 </q-toolbar-title>
                 <q-space />
                 <slot name="header-actions" />
-                <q-badge class="sa-admin-badge q-mr-sm">SUPER ADMIN</q-badge>
+                <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">
                         {{ initials }}
@@ -24,7 +24,7 @@
                         <div class="text-caption sa-admin-user__email">{{ userEmail }}</div>
                     </div>
                     <q-btn flat round dense icon="logout" size="sm" @click="emit('logout')">
-                        <q-tooltip>Abmelden</q-tooltip>
+                        <q-tooltip>{{ msg.header.logout }}</q-tooltip>
                     </q-btn>
                 </div>
             </q-toolbar>
@@ -39,10 +39,12 @@
         >
             <div class="sa-admin-drawer__stack">
                 <div class="sa-admin-drawer__brand">
-                    <div class="sa-admin-drawer__logo">{{ brandLogoText }}</div>
+                    <div class="sa-admin-drawer__logo">{{ brand.logoText }}</div>
                     <div>
-                        <div class="sa-admin-drawer__brand-name">{{ brandName }}</div>
-                        <div class="sa-admin-drawer__brand-tag">{{ brandTag }} v{{ adminUiVersion }}</div>
+                        <div class="sa-admin-drawer__brand-name">{{ brand.name }}</div>
+                        <div class="sa-admin-drawer__brand-tag">
+                            {{ brand.tag }} v{{ adminUiVersion }}
+                        </div>
                     </div>
                 </div>
 
@@ -75,7 +77,7 @@
                             target="_blank"
                             rel="noopener"
                         >
-                            <q-icon name="menu_book" size="14px" /> Doku öffnen
+                            <q-icon name="menu_book" size="14px" /> {{ msg.drawer.docs }}
                         </a>
                     </slot>
                 </div>
@@ -91,11 +93,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import type { AdminManifest, StandardPageKey } from '@saasicat/types';
-import { buildRoutes, buildSidebar, DEFAULT_SECTION_ORDER } from '../nav-builder.js';
-import { ADMIN_UI_VERSION } from '../version.js';
+import { buildRoutes, buildSidebar, defaultSectionOrder } from '../client/nav-builder.js';
+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 { ADMIN_UI_VERSION } from '../client/version.js';
 
 // SuperAdmin layout — universal platform shell for all consumer apps.
 // CSS classes `sa-admin-*` with BEM convention; apps can override any class
@@ -131,8 +135,13 @@ export interface SidebarItem {
 
 const props = withDefaults(
     defineProps<{
-        brandLogoText: string;
-        brandName: string;
+        /**
+         * Branding. Optional — when the layout is mounted as a route component
+         * inside `createSuperAdminApp({ brand })`, these default to the
+         * provided brand and only need passing to override it.
+         */
+        brandLogoText?: string;
+        brandName?: string;
         brandTag?: string;
         manifest?: AdminManifest | null;
         staticNavFallback?: readonly SidebarItem[];
@@ -164,13 +173,11 @@ const props = withDefaults(
         adminPathPrefix?: string;
     }>(),
     {
-        brandTag: 'SuperAdmin',
         staticNavFallback: () => [],
         localItems: () => [],
         localItemsSection: null,
         adminPathPrefix: '/admin',
         isProduction: false,
-        sectionOrder: () => DEFAULT_SECTION_ORDER,
     },
 );
 
@@ -179,6 +186,23 @@ const emit = defineEmits<{
 }>();
 
 const route = useRoute();
+const msg = useSaMessages('shell');
+const { locale } = 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.
+const injectedBrand = inject(SUPER_ADMIN_BRAND_KEY, null);
+// Same idea for the manifest: createSuperAdminApp({ manifestGuard: {
+// getManifest } }) provides an accessor, so pages mounted straight as route
+// components do not have to be wrapped just to thread the prop through.
+const injectedManifest = inject(SUPER_ADMIN_MANIFEST_KEY, null);
+const activeManifest = computed(() => props.manifest ?? injectedManifest?.() ?? null);
+const brand = computed(() => ({
+    logoText: props.brandLogoText ?? injectedBrand?.logoText ?? '',
+    name: props.brandName ?? injectedBrand?.name ?? '',
+    tag: props.brandTag ?? injectedBrand?.tag ?? 'SuperAdmin',
+}));
+
 const leftDrawerOpen = ref(false);
 
 const adminUiVersion = ADMIN_UI_VERSION;
@@ -195,18 +219,19 @@ interface NavSection {
 }
 
 const navSections = computed<NavSection[]>(() => {
-    const m = props.manifest;
+    const m = activeManifest.value;
     if (!m) {
         // Pre-manifest: static fallback + local items as one unnamed
         // section, so that the UI has no flicker before manifest load.
         return [{ title: null, items: [...props.staticNavFallback, ...props.localItems] }];
     }
     const routes = buildRoutes(m, {
+        locale: locale.value,
         standardPageRoutes: props.standardPageRoutes,
         standardPageNavSection: props.standardPageNavSection,
         availableExtensions: props.availableExtensions,
     });
-    const sections = buildSidebar(routes, props.sectionOrder);
+    const sections = buildSidebar(routes, props.sectionOrder ?? defaultSectionOrder(locale.value));
     const result: NavSection[] = sections.map((s) => ({
         title: s.section,
         items: s.items.map((item) => ({
@@ -241,7 +266,7 @@ const currentPageTitle = computed(() => {
     }
     // Default: sidebar item label that matches the active route.
     const item = resolvedNav.value.find((i) => i.to === route.path);
-    return item?.label ?? `${props.brandName} SuperAdmin`;
+    return item?.label ?? `${brand.value.name} SuperAdmin`;
 });
 </script>
 

package/src/pages-standard/AdminManifestErrorPage.vue

@@ -3,21 +3,16 @@
         <q-card class="sa-manifest-error__card">
             <q-card-section class="sa-manifest-error__head">
                 <q-icon name="cloud_off" size="32px" color="negative" />
-                <h1 class="sa-manifest-error__title">Admin-Manifest nicht erreichbar</h1>
+                <h1 class="sa-manifest-error__title">{{ msg.manifestError.title }}</h1>
             </q-card-section>
             <q-card-section>
-                <p class="sa-manifest-error__lead">
-                    Das Plattform-Manifest konnte nicht geladen werden. Ohne Manifest sind Sidebar,
-                    Capabilities und Action-Buttons nicht zuverlässig — die UI würde sonst falsche
-                    oder unerreichbare Buttons rendern. Der Router hat dich deshalb hierher
-                    geschickt (fail-closed).
-                </p>
+                <p class="sa-manifest-error__lead">{{ msg.manifestError.lead }}</p>
                 <p v-if="errorMessage" class="sa-manifest-error__detail">
-                    <strong>Detail:</strong> {{ errorMessage }}
+                    <strong>{{ msg.manifestError.detailLabel }}</strong> {{ errorMessage }}
                 </p>
                 <div class="sa-manifest-error__actions">
-                    <q-btn unelevated color="primary" label="Erneut laden" @click="onRetry" />
-                    <q-btn flat label="Logout" @click="onLogout" />
+                    <q-btn unelevated color="primary" :label="common.reload" @click="onRetry" />
+                    <q-btn flat :label="msg.header.logout" @click="onLogout" />
                 </div>
             </q-card-section>
         </q-card>
@@ -25,11 +20,16 @@
 </template>
 
 <script setup lang="ts">
+import { useSaMessages } from '../vue/use-super-admin-i18n.js';
+
 // Platform standard error page for `manifestGuard.errorRoute`.
 // Consumers pass `onRetry`/`onLogout` in as callbacks and decide
 // themselves what happens (e.g. manifestStore.clearCache() + ensureLoaded,
 // authStore.logout, router.replace).
 
+const msg = useSaMessages('shell');
+const common = useSaMessages('common');
+
 defineProps<{
     errorMessage?: string | null;
     onRetry: () => Promise<void> | void;

package/src/pages-standard/AuditPage.vue

@@ -2,18 +2,51 @@
     <div class="sa-audit">
         <header class="sa-audit__head">
             <div>
-                <h1 class="sa-audit__title">Audit-Trail</h1>
-                <p class="sa-audit__sub">{{ rows.length }} Einträge · plattformweit.</p>
+                <h1 class="sa-audit__title">{{ msg.title }}</h1>
+                <p class="sa-audit__sub">
+                    {{ formatMessage(msg.subtitle, { count: rows.length }) }}
+                </p>
             </div>
-            <q-btn unelevated color="primary" icon="refresh" label="Filtern" @click="reload" />
+            <q-btn
+                unelevated
+                color="primary"
+                icon="refresh"
+                :label="msg.filterButton"
+                @click="reload"
+            />
         </header>
 
         <div class="sa-audit__body">
             <div class="sa-audit__filter">
-                <q-input v-model="filter.actor" outlined dense label="Actor (E-Mail)" clearable />
-                <q-input v-model="filter.action" outlined dense label="Action" clearable />
-                <q-input v-model="filter.entity" outlined dense label="Entity" clearable />
-                <q-input v-model="filter.since" outlined dense type="date" label="Seit" clearable />
+                <q-input
+                    v-model="filter.actor"
+                    outlined
+                    dense
+                    :label="msg.filters.actor"
+                    clearable
+                />
+                <q-input
+                    v-model="filter.action"
+                    outlined
+                    dense
+                    :label="msg.filters.action"
+                    clearable
+                />
+                <q-input
+                    v-model="filter.entity"
+                    outlined
+                    dense
+                    :label="msg.filters.entity"
+                    clearable
+                />
+                <q-input
+                    v-model="filter.since"
+                    outlined
+                    dense
+                    type="date"
+                    :label="msg.filters.since"
+                    clearable
+                />
             </div>
 
             <div class="sa-audit__card">
@@ -29,7 +62,7 @@
                     <template #body-cell-changes="{ row }">
                         <q-td>
                             <q-btn flat dense icon="code" color="primary" @click="openDetail(row)">
-                                <q-tooltip>Details</q-tooltip>
+                                <q-tooltip>{{ common.details }}</q-tooltip>
                             </q-btn>
                         </q-td>
                     </template>
@@ -42,7 +75,7 @@
                 <q-card-section>
                     <div class="text-h6">{{ detail?.action }} · {{ detail?.entity }}</div>
                     <div class="text-caption text-grey-7">
-                        {{ detail ? formatTs(detail.createdAt) : '' }} · Actor:
+                        {{ detail ? formatTs(detail.createdAt) : '' }} · {{ msg.detailActorPrefix }}
                         {{ detail ? actorEmail(detail) : '—' }}
                     </div>
                 </q-card-section>
@@ -52,7 +85,7 @@
                     }}</pre>
                 </q-card-section>
                 <q-card-actions align="right">
-                    <q-btn v-close-popup flat label="Schließen" />
+                    <q-btn v-close-popup flat :label="common.close" />
                 </q-card-actions>
             </q-card>
         </q-dialog>
@@ -60,7 +93,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
+import { formatMessage } from '../client/i18n/format.js';
+import { useSaMessages, useSuperAdminI18n } from '../vue/use-super-admin-i18n.js';
 
 // Platform standard page: audit trail. Data-agnostic — the app passes
 // `loadAudit({ actor, action, entity, since, limit })` through.
@@ -89,36 +124,40 @@ const props = defineProps<{
     pageSize?: number;
 }>();
 
+const msg = useSaMessages('audit');
+const common = useSaMessages('common');
+const { intlLocale } = useSuperAdminI18n();
+
 const rows = ref<AuditRow[]>([]);
 const loading = ref(false);
 const filter = reactive({ actor: '', action: '', entity: '', since: '' });
 const detailOpen = ref(false);
 const detail = ref<AuditRow | null>(null);
 
-const columns = [
+const columns = computed(() => [
     {
         name: 'createdAt',
-        label: 'Zeit',
+        label: msg.value.columns.time,
         field: (r: AuditRow) => formatTs(r.createdAt),
         align: 'left' as const,
         sortable: true,
     },
     {
         name: 'actor',
-        label: 'Actor',
+        label: msg.value.columns.actor,
         field: actorEmail,
         align: 'left' as const,
     },
-    { name: 'action', label: 'Action', field: 'action', align: 'left' as const },
-    { name: 'entity', label: 'Entity', field: 'entity', align: 'left' as const },
+    { name: 'action', label: msg.value.columns.action, field: 'action', align: 'left' as const },
+    { name: 'entity', label: msg.value.columns.entity, field: 'entity', align: 'left' as const },
     {
         name: 'entityId',
-        label: 'ID',
+        label: msg.value.columns.id,
         field: (r: AuditRow) => r.entityId.slice(0, 8),
         align: 'left' as const,
     },
     { name: 'changes', label: '', field: 'id', align: 'right' as const },
-];
+]);
 
 async function reload() {
     loading.value = true;
@@ -153,7 +192,7 @@ function actorEmail(r: AuditRow): string {
 function formatTs(iso: string | null | undefined): string {
     if (!iso) return '—';
     try {
-        return new Date(iso).toLocaleString('de-DE', {
+        return new Date(iso).toLocaleString(intlLocale.value, {
             day: '2-digit',
             month: 'short',
             year: 'numeric',