@momentumcms/admin 0.5.2 → 0.5.4

package/fesm2022/{momentumcms-admin-momentumcms-admin-BTZEdMNj.mjs → momentumcms-admin-momentumcms-admin-DDwm1Rm3.mjs}

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Injectable, PLATFORM_ID, InjectionToken, makeStateKey, TransferState, DestroyRef, effect, input, ChangeDetectionStrategy, Component, output, viewChild, Injector, untracked, runInInjectionContext, afterNextRender, model, forwardRef, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { inject, signal, computed, Injectable, PLATFORM_ID, InjectionToken, makeStateKey, TransferState, DestroyRef, effect, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, ChangeDetectionStrategy, Component, output, viewChild, Injector, untracked, runInInjectionContext, afterNextRender, model, forwardRef } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgComponentOutlet, DatePipe } from '@angular/common';
 import { Router, NavigationEnd, ActivatedRoute, RouterOutlet, RouterLink } from '@angular/router';
 import { HttpClient, HttpContextToken, HttpResponse, HttpErrorResponse, HttpRequest, HttpEventType, HttpParams } from '@angular/common/http';
-import { firstValueFrom, tap, catchError, throwError, Subject, finalize, Observable, of, filter, take } from 'rxjs';
+import { firstValueFrom, tap, catchError, throwError, Subject, finalize, Observable, of, filter, take, combineLatest } from 'rxjs';
 import { ToastService, ConfirmationService, DIALOG_DATA, Dialog, DialogHeader, DialogTitle, DialogContent, DialogFooter, DialogClose, Button, Badge, Skeleton, DialogService, Card, CardHeader, CardContent, Separator, Progress, CardFooter, Spinner, Alert, Breadcrumbs, BreadcrumbItem, BreadcrumbSeparator, FieldDisplay, Sidebar, SidebarNav, SidebarNavItem, SidebarSection, Avatar, AvatarFallback, DropdownMenu, DropdownMenuItem, DropdownSeparator, DropdownLabel, DropdownTrigger, SidebarService, SidebarTrigger, ToastContainer, Input, McmsFormField, DialogRef, DataTable, Label, Select, CardTitle, CardDescription, Textarea, Pagination, SearchInput, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty, Checkbox } from '@momentumcms/ui';
 import { map } from 'rxjs/operators';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/cdk/a11y';
 import { LiveAnnouncer, A11yModule } from '@angular/cdk/a11y';
-import { flattenDataFields, humanizeFieldName, isUploadCollection, getSoftDeleteField } from '@momentumcms/core';
+import { flattenDataFields, humanizeFieldName, isUploadCollection, getSoftDeleteField, hasVersionDrafts } from '@momentumcms/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { heroFilm, heroMusicalNote, heroDocumentText, heroArchiveBox, heroPhoto, heroDocument, heroCloudArrowUp, heroXMark, heroCursorArrowRays, heroMap, heroMagnifyingGlass, heroPuzzlePiece, heroCog6Tooth, heroChartBarSquare, heroChevronUpDown, heroBolt, heroFolder, heroUsers, heroNewspaper, heroSquares2x2, heroEye, heroPencilSquare, heroArrowDownTray, heroTrash, heroChevronRight, heroChevronDown, heroChevronUp, heroPlus } from '@ng-icons/heroicons/outline';
 import { required, validate, applyEach, apply, email, min, max, minLength, maxLength, form, submit } from '@angular/forms/signals';
@@ -947,8 +947,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 /**
  * Route guard that prompts the user before navigating away from a dirty form.
+ *
+ * Defensive: checks that the component implements HasUnsavedChanges before calling.
+ * This is necessary because AdminPageResolver wraps the actual page component.
  */
 const unsavedChangesGuard = (component) => {
+    if (typeof component.hasUnsavedChanges !== 'function')
+        return true;
     if (!component.hasUnsavedChanges())
         return true;
     const feedback = inject(FeedbackService);
@@ -995,6 +1000,7 @@ function momentumAdminRoutes(configOrOptions) {
     let branding;
     let includeAuthRoutes;
     let pluginRoutes;
+    let adminComponents;
     let pluginDescriptors;
     // Distinguish MomentumConfig (has `db`) from MomentumAdminConfig (has `collections` but no `db` or `basePath`)
     // from MomentumAdminOptions (has `basePath` as required string)
@@ -1010,6 +1016,7 @@ function momentumAdminRoutes(configOrOptions) {
         collections = [...config.collections, ...uniquePluginCollections];
         globals = config.globals;
         branding = config.admin?.branding;
+        adminComponents = config.admin?.components;
         includeAuthRoutes = true;
         pluginRoutes = pluginDescriptors.flatMap((p) => p.adminRoutes ?? []).map(toAdminPluginRoute);
     }
@@ -1024,6 +1031,7 @@ function momentumAdminRoutes(configOrOptions) {
         collections = [...configOrOptions.collections, ...uniquePluginCollections];
         globals = configOrOptions.globals;
         branding = configOrOptions.branding;
+        adminComponents = undefined; // MomentumAdminOptions doesn't carry config-level components
         includeAuthRoutes = configOrOptions.includeAuthRoutes ?? true;
         // Merge explicit plugin routes with plugin-declared admin routes
         const explicitRoutes = configOrOptions.pluginRoutes?.map(toAdminPluginRoute) ?? [];
@@ -1044,6 +1052,7 @@ function momentumAdminRoutes(configOrOptions) {
         collections = [...adminConfig.collections, ...uniquePluginCollections];
         globals = adminConfig.globals;
         branding = adminConfig.admin?.branding;
+        adminComponents = adminConfig.admin?.components;
         includeAuthRoutes = true;
         pluginRoutes = pluginDescriptors.flatMap((p) => p.adminRoutes ?? []).map(toAdminPluginRoute);
     }
@@ -1058,6 +1067,9 @@ function momentumAdminRoutes(configOrOptions) {
         globals,
         branding,
         pluginRoutes,
+        adminComponents,
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- AdminPluginDescriptor is a subset of MomentumPlugin
+        plugins: pluginDescriptors,
     };
     const routes = [];
     // Auth routes (login, setup, password reset) - outside the admin shell
@@ -1095,46 +1107,74 @@ function momentumAdminRoutes(configOrOptions) {
         data: routeData,
         canActivate: [authGuard],
         children: [
-            // Dashboard (default route)
+            // Dashboard (default route) — swappable via AdminComponentRegistry
             {
                 path: '',
-                loadComponent: () => Promise.resolve().then(function () { return dashboard_page; }).then((m) => m.DashboardPage),
+                loadComponent: () => Promise.resolve().then(function () { return adminPageResolver_component; }).then((m) => m.AdminPageResolver),
+                data: {
+                    adminPageKey: 'dashboard',
+                    adminPageFallback: () => Promise.resolve().then(function () { return dashboard_page; }).then((m) => m.DashboardPage),
+                },
             },
-            // Media library
+            // Media library — swappable
             {
                 path: 'media',
-                loadComponent: () => Promise.resolve().then(function () { return mediaLibrary_page; }).then((m) => m.MediaLibraryPage),
+                loadComponent: () => Promise.resolve().then(function () { return adminPageResolver_component; }).then((m) => m.AdminPageResolver),
+                data: {
+                    adminPageKey: 'media',
+                    adminPageFallback: () => Promise.resolve().then(function () { return mediaLibrary_page; }).then((m) => m.MediaLibraryPage),
+                },
             },
-            // Collection list
+            // Collection list — swappable (per-collection + global)
             {
                 path: 'collections/:slug',
-                loadComponent: () => Promise.resolve().then(function () { return collectionList_page; }).then((m) => m.CollectionListPage),
+                loadComponent: () => Promise.resolve().then(function () { return adminPageResolver_component; }).then((m) => m.AdminPageResolver),
+                data: {
+                    adminPageKey: 'collection-list',
+                    adminPageFallback: () => Promise.resolve().then(function () { return collectionList_page; }).then((m) => m.CollectionListPage),
+                },
                 canActivate: [collectionAccessGuard],
             },
-            // Create new document
+            // Create new document — swappable (per-collection + global)
             {
                 path: 'collections/:slug/new',
-                loadComponent: () => Promise.resolve().then(function () { return collectionEdit_page; }).then((m) => m.CollectionEditPage),
+                loadComponent: () => Promise.resolve().then(function () { return adminPageResolver_component; }).then((m) => m.AdminPageResolver),
+                data: {
+                    adminPageKey: 'collection-edit',
+                    adminPageFallback: () => Promise.resolve().then(function () { return collectionEdit_page; }).then((m) => m.CollectionEditPage),
+                },
                 canActivate: [collectionAccessGuard],
                 canDeactivate: [unsavedChangesGuard],
             },
-            // View existing document
+            // View existing document — swappable (per-collection + global)
             {
                 path: 'collections/:slug/:id',
-                loadComponent: () => Promise.resolve().then(function () { return collectionView_page; }).then((m) => m.CollectionViewPage),
+                loadComponent: () => Promise.resolve().then(function () { return adminPageResolver_component; }).then((m) => m.AdminPageResolver),
+                data: {
+                    adminPageKey: 'collection-view',
+                    adminPageFallback: () => Promise.resolve().then(function () { return collectionView_page; }).then((m) => m.CollectionViewPage),
+                },
                 canActivate: [collectionAccessGuard],
             },
-            // Edit existing document
+            // Edit existing document — swappable (per-collection + global)
             {
                 path: 'collections/:slug/:id/edit',
-                loadComponent: () => Promise.resolve().then(function () { return collectionEdit_page; }).then((m) => m.CollectionEditPage),
+                loadComponent: () => Promise.resolve().then(function () { return adminPageResolver_component; }).then((m) => m.AdminPageResolver),
+                data: {
+                    adminPageKey: 'collection-edit',
+                    adminPageFallback: () => Promise.resolve().then(function () { return collectionEdit_page; }).then((m) => m.CollectionEditPage),
+                },
                 canActivate: [collectionAccessGuard],
                 canDeactivate: [unsavedChangesGuard],
             },
-            // Global edit
+            // Global edit — swappable
             {
                 path: 'globals/:slug',
-                loadComponent: () => import('./momentumcms-admin-global-edit.page-CmLAM17O.mjs').then((m) => m.GlobalEditPage),
+                loadComponent: () => Promise.resolve().then(function () { return adminPageResolver_component; }).then((m) => m.AdminPageResolver),
+                data: {
+                    adminPageKey: 'global-edit',
+                    adminPageFallback: () => import('./momentumcms-admin-global-edit.page-CHr9vOxQ.mjs').then((m) => m.GlobalEditPage),
+                },
                 canDeactivate: [unsavedChangesGuard],
             },
             // Plugin-registered routes
@@ -3185,6 +3225,239 @@ function getPluginRoutesFromRouteData(data) {
     return [];
 }
 
+/**
+ * Registry for swappable admin page components.
+ *
+ * Maps page keys (e.g., 'dashboard', 'collection-list') to lazy component loaders.
+ * Per-collection overrides use the pattern: 'collections/{slug}/{type}'.
+ *
+ * Resolution chain: per-collection → global → undefined (use built-in default).
+ */
+class AdminComponentRegistry {
+    components = new Map();
+    /** Register a lazy loader for a page key. Later registrations override earlier ones. */
+    register(key, loader) {
+        this.components.set(key, loader);
+    }
+    /** Get the lazy loader for a page key. Returns undefined if not registered. */
+    get(key) {
+        return this.components.get(key);
+    }
+    /** Check if a page key has a registered component. */
+    has(key) {
+        return this.components.has(key);
+    }
+    /**
+     * Resolve a component loader with per-collection fallback.
+     *
+     * For collection pages, tries `collections/{slug}/{type}` first,
+     * then falls back to the global key (e.g., 'collection-list').
+     */
+    resolve(key, slug) {
+        if (slug) {
+            const type = key.replace('collection-', '');
+            const perCollectionKey = `collections/${slug}/${type}`;
+            const perCollection = this.components.get(perCollectionKey);
+            if (perCollection)
+                return perCollection;
+        }
+        return this.components.get(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminComponentRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminComponentRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminComponentRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Registry for admin layout slot components.
+ *
+ * Slots are additive — multiple components can be registered for the same slot key.
+ * Per-collection slots use the pattern: `{base-slot}:{collection-slug}`.
+ *
+ * Resolution merges global + per-collection loaders (global first).
+ *
+ * The registry is signal-aware: `resolve()` reads an internal version signal,
+ * so Angular effects that call `resolve()` will re-run when new slots are registered.
+ */
+class AdminSlotRegistry {
+    slots = new Map();
+    /** Incremented on every register() so signal-based consumers re-evaluate. */
+    _version = signal(0, ...(ngDevMode ? [{ debugName: "_version" }] : []));
+    /** Register a lazy loader for a slot. Multiple loaders per slot are supported. Duplicate loaders are skipped. */
+    register(slot, loader) {
+        const existing = this.slots.get(slot) ?? [];
+        if (existing.includes(loader))
+            return;
+        existing.push(loader);
+        this.slots.set(slot, existing);
+        this._version.update((v) => v + 1);
+    }
+    /** Get all loaders for a slot key. Returns empty array if none registered. */
+    getAll(slot) {
+        return this.slots.get(slot) ?? [];
+    }
+    /** Check if a slot has any registered loaders. */
+    has(slot) {
+        return this.slots.has(slot);
+    }
+    /**
+     * Resolve slot loaders, merging global and per-collection entries.
+     *
+     * Reads the internal version signal so Angular effects tracking this call
+     * will re-run when new slots are registered.
+     */
+    resolve(slot, slug) {
+        this._version();
+        const global = this.getAll(slot);
+        if (!slug)
+            return global;
+        const perCollection = this.getAll(`${slot}:${slug}`);
+        return [...global, ...perCollection];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminSlotRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminSlotRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminSlotRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Register a custom admin page component override.
+ *
+ * ```typescript
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideAdminComponent('dashboard', () =>
+ *       import('./custom-dashboard.component').then(m => m.CustomDashboard)
+ *     ),
+ *   ],
+ * };
+ * ```
+ */
+function provideAdminComponent(key, loader) {
+    return makeEnvironmentProviders([
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useFactory: () => {
+                const registry = inject(AdminComponentRegistry);
+                return () => {
+                    registry.register(key, loader);
+                };
+            },
+        },
+    ]);
+}
+/**
+ * Register a component into an admin layout slot.
+ *
+ * ```typescript
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideAdminSlot('dashboard:before', () =>
+ *       import('./welcome-banner.component').then(m => m.WelcomeBanner)
+ *     ),
+ *   ],
+ * };
+ * ```
+ */
+function provideAdminSlot(slot, loader) {
+    return makeEnvironmentProviders([
+        {
+            provide: ENVIRONMENT_INITIALIZER,
+            multi: true,
+            useFactory: () => {
+                const registry = inject(AdminSlotRegistry);
+                return () => {
+                    registry.register(slot, loader);
+                };
+            },
+        },
+    ]);
+}
+/** Mapping from AdminComponentsConfig page keys to registry keys. */
+const PAGE_KEY_MAP = {
+    dashboard: 'dashboard',
+    login: 'login',
+    media: 'media',
+};
+/** Mapping from AdminComponentsConfig slot keys to registry slot keys. */
+const GLOBAL_SLOT_MAP = {
+    beforeNavigation: 'shell:nav-start',
+    afterNavigation: 'shell:nav-end',
+    header: 'shell:header',
+    footer: 'shell:footer',
+    beforeDashboard: 'dashboard:before',
+    afterDashboard: 'dashboard:after',
+    beforeLogin: 'login:before',
+    afterLogin: 'login:after',
+};
+/** Mapping from CollectionAdminComponentsConfig page keys to page type suffixes. */
+const COLLECTION_PAGE_MAP = {
+    list: 'list',
+    edit: 'edit',
+    view: 'view',
+};
+/** Mapping from CollectionAdminComponentsConfig slot keys to slot key patterns. */
+const COLLECTION_SLOT_MAP = {
+    beforeList: 'collection-list:before',
+    afterList: 'collection-list:after',
+    beforeEdit: 'collection-edit:before',
+    afterEdit: 'collection-edit:after',
+    editSidebar: 'collection-edit:sidebar',
+    beforeView: 'collection-view:before',
+    afterView: 'collection-view:after',
+};
+/**
+ * Read AdminComponentsConfig and CollectionAdminComponentsConfig from config
+ * and register them into AdminComponentRegistry and AdminSlotRegistry.
+ *
+ * Called once in AdminShellComponent.ngOnInit() after route data is available.
+ */
+function registerConfigComponents(collections, adminComponents, componentRegistry, slotRegistry) {
+    // Register global page overrides and slots from AdminComponentsConfig
+    if (adminComponents) {
+        for (const [configKey, registryKey] of Object.entries(PAGE_KEY_MAP)) {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Object.entries returns string keys
+            const loader = adminComponents[configKey];
+            if (loader) {
+                componentRegistry.register(registryKey, loader);
+            }
+        }
+        for (const [configKey, slotKey] of Object.entries(GLOBAL_SLOT_MAP)) {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Object.entries returns string keys
+            const loader = adminComponents[configKey];
+            if (loader) {
+                slotRegistry.register(slotKey, loader);
+            }
+        }
+    }
+    // Register per-collection page overrides and slots
+    for (const collection of collections) {
+        const components = collection.admin?.components;
+        if (!components)
+            continue;
+        for (const [configKey, typeSuffix] of Object.entries(COLLECTION_PAGE_MAP)) {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Object.entries returns string keys
+            const loader = components[configKey];
+            if (loader) {
+                componentRegistry.register(`collections/${collection.slug}/${typeSuffix}`, loader);
+            }
+        }
+        for (const [configKey, baseSlotKey] of Object.entries(COLLECTION_SLOT_MAP)) {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- Object.entries returns string keys
+            const loader = components[configKey];
+            if (loader) {
+                slotRegistry.register(`${baseSlotKey}:${collection.slug}`, loader);
+            }
+        }
+    }
+}
+
 /**
  * Entity Form Widget Types
  *
@@ -4229,106 +4502,302 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }], ctorParameters: () => [], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: true }] }], documentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentId", required: true }] }], documentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentLabel", required: false }] }], restored: [{ type: i0.Output, args: ["restored"] }] } });
 
 /**
- * Media Preview Component
+ * Publish Controls Widget
  *
- * Displays a preview of media based on its type:
- * - Images: Thumbnail preview
- * - Videos: Video icon with optional poster
- * - Audio: Audio icon
- * - Documents: Document icon
- * - Other: Generic file icon
+ * Displays the current document status and provides publish/unpublish actions.
  *
  * @example
  * ```html
- * <mcms-media-preview
- *   [media]="mediaDocument"
- *   [size]="'md'"
+ * <mcms-publish-controls
+ *   [collection]="'posts'"
+ *   [documentId]="'abc123'"
+ *   [documentLabel]="'Post'"
+ *   (statusChanged)="onStatusChanged($event)"
  * />
  * ```
  */
-class MediaPreviewComponent {
-    /** Media data to preview */
-    media = input(null, ...(ngDevMode ? [{ debugName: "media" }] : []));
-    /** Size of the preview */
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    /** Custom class override */
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    /** Whether to show rounded corners */
-    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
-    /** Host classes */
-    hostClasses = computed(() => {
-        const sizeClass = this.sizeClasses()[this.size()];
-        const roundedClass = this.rounded() ? 'rounded-md overflow-hidden' : '';
-        return `inline-block ${sizeClass} ${roundedClass} ${this.class()}`;
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    /** Size classes map */
-    sizeClasses = computed(() => ({
-        xs: 'h-8 w-8',
-        sm: 'h-12 w-12',
-        md: 'h-20 w-20',
-        lg: 'h-32 w-32',
-        xl: 'h-48 w-48',
-    }), ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
-    /** Icon size classes */
-    iconClasses = computed(() => {
-        const sizes = {
-            xs: 'text-lg',
-            sm: 'text-xl',
-            md: 'text-3xl',
-            lg: 'text-4xl',
-            xl: 'text-6xl',
-        };
-        return `${sizes[this.size()]} text-mcms-muted-foreground`;
-    }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
-    /** Whether the media is an image */
-    isImage = computed(() => {
-        const mimeType = this.media()?.mimeType ?? '';
-        return mimeType.startsWith('image/');
-    }, ...(ngDevMode ? [{ debugName: "isImage" }] : []));
-    /** Whether the media is a video */
-    isVideo = computed(() => {
-        const mimeType = this.media()?.mimeType ?? '';
-        return mimeType.startsWith('video/');
-    }, ...(ngDevMode ? [{ debugName: "isVideo" }] : []));
-    /** Whether the media is audio */
-    isAudio = computed(() => {
-        const mimeType = this.media()?.mimeType ?? '';
-        return mimeType.startsWith('audio/');
-    }, ...(ngDevMode ? [{ debugName: "isAudio" }] : []));
-    /** Image URL for preview */
-    imageUrl = computed(() => {
-        const media = this.media();
-        if (!media)
-            return '';
-        return media.url ?? `/api/media/file/${media.path}`;
-    }, ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
-    /** Icon name based on media type */
-    iconName = computed(() => {
-        const mimeType = this.media()?.mimeType ?? '';
-        if (mimeType.startsWith('video/')) {
-            return heroFilm;
-        }
-        if (mimeType.startsWith('audio/')) {
-            return heroMusicalNote;
-        }
-        if (mimeType === 'application/pdf') {
-            return heroDocumentText;
+class PublishControlsWidget {
+    versionService = inject(VersionService);
+    feedback = inject(FeedbackService);
+    /** Collection slug */
+    collection = input.required(...(ngDevMode ? [{ debugName: "collection" }] : []));
+    /** Document ID */
+    documentId = input.required(...(ngDevMode ? [{ debugName: "documentId" }] : []));
+    /** Document label for feedback messages */
+    documentLabel = input('Document', ...(ngDevMode ? [{ debugName: "documentLabel" }] : []));
+    /** Initial status (optional, will be fetched if not provided) */
+    initialStatus = input(undefined, ...(ngDevMode ? [{ debugName: "initialStatus" }] : []));
+    /** Emitted when the status changes */
+    statusChanged = output();
+    /** Current status */
+    status = signal('draft', ...(ngDevMode ? [{ debugName: "status" }] : []));
+    /** Whether a status update is in progress */
+    isUpdating = signal(false, ...(ngDevMode ? [{ debugName: "isUpdating" }] : []));
+    /** Whether status is loading */
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /** Badge variant based on status (derived from status signal) */
+    statusVariant = computed(() => this.status() === 'published' ? 'default' : 'secondary', ...(ngDevMode ? [{ debugName: "statusVariant" }] : []));
+    /** Status label (derived from status signal) */
+    statusLabel = computed(() => (this.status() === 'published' ? 'Published' : 'Draft'), ...(ngDevMode ? [{ debugName: "statusLabel" }] : []));
+    constructor() {
+        // Load status when inputs change
+        effect(() => {
+            const collection = this.collection();
+            const docId = this.documentId();
+            const initial = this.initialStatus();
+            if (initial !== undefined) {
+                this.updateStatusDisplay(initial);
+            }
+            else if (collection && docId) {
+                this.loadStatus(collection, docId);
+            }
+        });
+    }
+    /**
+     * Load the current status from the API.
+     */
+    async loadStatus(collection, docId) {
+        this.isLoading.set(true);
+        try {
+            const status = await this.versionService.getStatus(collection, docId);
+            this.updateStatusDisplay(status);
         }
-        if (mimeType.startsWith('application/zip') || mimeType.includes('compressed')) {
-            return heroArchiveBox;
+        catch {
+            // Default to draft if we can't load status
+            this.updateStatusDisplay('draft');
         }
-        if (mimeType.startsWith('image/')) {
-            return heroPhoto;
+        finally {
+            this.isLoading.set(false);
         }
-        return heroDocument;
-    }, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MediaPreviewComponent, isStandalone: true, selector: "mcms-media-preview", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
-		@if (isImage()) {
-			<img
-				[src]="imageUrl()"
-				[alt]="media()?.alt ?? media()?.filename ?? 'Media preview'"
-				class="h-full w-full object-cover"
+    }
+    /**
+     * Update the status display.
+     * statusVariant and statusLabel are computed signals that automatically update.
+     */
+    updateStatusDisplay(status) {
+        this.status.set(status);
+    }
+    /**
+     * Publish the document.
+     */
+    async onPublish() {
+        this.isUpdating.set(true);
+        try {
+            await this.versionService.publish(this.collection(), this.documentId());
+            this.updateStatusDisplay('published');
+            this.statusChanged.emit('published');
+        }
+        catch {
+            // Error handled by crudToastInterceptor
+        }
+        finally {
+            this.isUpdating.set(false);
+        }
+    }
+    /**
+     * Unpublish the document.
+     */
+    async onUnpublish() {
+        const confirmed = await this.feedback.confirmUnpublish(this.documentLabel());
+        if (!confirmed) {
+            return;
+        }
+        this.isUpdating.set(true);
+        try {
+            await this.versionService.unpublish(this.collection(), this.documentId());
+            this.updateStatusDisplay('draft');
+            this.statusChanged.emit('draft');
+        }
+        catch {
+            // Error handled by crudToastInterceptor
+        }
+        finally {
+            this.isUpdating.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PublishControlsWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PublishControlsWidget, isStandalone: true, selector: "mcms-publish-controls", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, documentId: { classPropertyName: "documentId", publicName: "documentId", isSignal: true, isRequired: true, transformFunction: null }, documentLabel: { classPropertyName: "documentLabel", publicName: "documentLabel", isSignal: true, isRequired: false, transformFunction: null }, initialStatus: { classPropertyName: "initialStatus", publicName: "initialStatus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { statusChanged: "statusChanged" }, host: { classAttribute: "inline-flex items-center gap-3" }, ngImport: i0, template: `
+		<mcms-badge [variant]="statusVariant()">
+			{{ statusLabel() }}
+		</mcms-badge>
+
+		@if (status() === 'draft') {
+			<button
+				mcms-button
+				variant="primary"
+				size="sm"
+				[disabled]="isUpdating()"
+				(click)="onPublish()"
+			>
+				@if (isUpdating()) {
+					Publishing...
+				} @else {
+					Publish
+				}
+			</button>
+		} @else {
+			<button
+				mcms-button
+				variant="outline"
+				size="sm"
+				[disabled]="isUpdating()"
+				(click)="onUnpublish()"
+			>
+				@if (isUpdating()) {
+					Unpublishing...
+				} @else {
+					Unpublish
+				}
+			</button>
+		}
+	`, isInline: true, dependencies: [{ kind: "component", type: Badge, selector: "mcms-badge", inputs: ["variant", "class", "role", "ariaLabel"] }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PublishControlsWidget, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mcms-publish-controls',
+                    imports: [Badge, Button],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'inline-flex items-center gap-3' },
+                    template: `
+		<mcms-badge [variant]="statusVariant()">
+			{{ statusLabel() }}
+		</mcms-badge>
+
+		@if (status() === 'draft') {
+			<button
+				mcms-button
+				variant="primary"
+				size="sm"
+				[disabled]="isUpdating()"
+				(click)="onPublish()"
+			>
+				@if (isUpdating()) {
+					Publishing...
+				} @else {
+					Publish
+				}
+			</button>
+		} @else {
+			<button
+				mcms-button
+				variant="outline"
+				size="sm"
+				[disabled]="isUpdating()"
+				(click)="onUnpublish()"
+			>
+				@if (isUpdating()) {
+					Unpublishing...
+				} @else {
+					Unpublish
+				}
+			</button>
+		}
+	`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: true }] }], documentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentId", required: true }] }], documentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentLabel", required: false }] }], initialStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialStatus", required: false }] }], statusChanged: [{ type: i0.Output, args: ["statusChanged"] }] } });
+
+/**
+ * Media Preview Component
+ *
+ * Displays a preview of media based on its type:
+ * - Images: Thumbnail preview
+ * - Videos: Video icon with optional poster
+ * - Audio: Audio icon
+ * - Documents: Document icon
+ * - Other: Generic file icon
+ *
+ * @example
+ * ```html
+ * <mcms-media-preview
+ *   [media]="mediaDocument"
+ *   [size]="'md'"
+ * />
+ * ```
+ */
+class MediaPreviewComponent {
+    /** Media data to preview */
+    media = input(null, ...(ngDevMode ? [{ debugName: "media" }] : []));
+    /** Size of the preview */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Custom class override */
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    /** Whether to show rounded corners */
+    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
+    /** Host classes */
+    hostClasses = computed(() => {
+        const sizeClass = this.sizeClasses()[this.size()];
+        const roundedClass = this.rounded() ? 'rounded-md overflow-hidden' : '';
+        return `inline-block ${sizeClass} ${roundedClass} ${this.class()}`;
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    /** Size classes map */
+    sizeClasses = computed(() => ({
+        xs: 'h-8 w-8',
+        sm: 'h-12 w-12',
+        md: 'h-20 w-20',
+        lg: 'h-32 w-32',
+        xl: 'h-48 w-48',
+    }), ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
+    /** Icon size classes */
+    iconClasses = computed(() => {
+        const sizes = {
+            xs: 'text-lg',
+            sm: 'text-xl',
+            md: 'text-3xl',
+            lg: 'text-4xl',
+            xl: 'text-6xl',
+        };
+        return `${sizes[this.size()]} text-mcms-muted-foreground`;
+    }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    /** Whether the media is an image */
+    isImage = computed(() => {
+        const mimeType = this.media()?.mimeType ?? '';
+        return mimeType.startsWith('image/');
+    }, ...(ngDevMode ? [{ debugName: "isImage" }] : []));
+    /** Whether the media is a video */
+    isVideo = computed(() => {
+        const mimeType = this.media()?.mimeType ?? '';
+        return mimeType.startsWith('video/');
+    }, ...(ngDevMode ? [{ debugName: "isVideo" }] : []));
+    /** Whether the media is audio */
+    isAudio = computed(() => {
+        const mimeType = this.media()?.mimeType ?? '';
+        return mimeType.startsWith('audio/');
+    }, ...(ngDevMode ? [{ debugName: "isAudio" }] : []));
+    /** Image URL for preview */
+    imageUrl = computed(() => {
+        const media = this.media();
+        if (!media)
+            return '';
+        return media.url ?? `/api/media/file/${media.path}`;
+    }, ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
+    /** Icon name based on media type */
+    iconName = computed(() => {
+        const mimeType = this.media()?.mimeType ?? '';
+        if (mimeType.startsWith('video/')) {
+            return heroFilm;
+        }
+        if (mimeType.startsWith('audio/')) {
+            return heroMusicalNote;
+        }
+        if (mimeType === 'application/pdf') {
+            return heroDocumentText;
+        }
+        if (mimeType.startsWith('application/zip') || mimeType.includes('compressed')) {
+            return heroArchiveBox;
+        }
+        if (mimeType.startsWith('image/')) {
+            return heroPhoto;
+        }
+        return heroDocument;
+    }, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MediaPreviewComponent, isStandalone: true, selector: "mcms-media-preview", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+		@if (isImage()) {
+			<img
+				[src]="imageUrl()"
+				[alt]="media()?.alt ?? media()?.filename ?? 'Media preview'"
+				class="h-full w-full object-cover"
 			/>
 		} @else {
 			<div class="flex h-full w-full items-center justify-center bg-mcms-muted">
@@ -5307,8 +5776,17 @@ class EntityFormWidget {
     draftSaved = output();
     /** Model signal — the single source of truth for form data */
     formModel = signal({}, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
-    /** Alias for backward compatibility (CollectionEditPage reads formData) */
-    formData = this.formModel;
+    /** Reactive form data that tracks Signal Forms changes for downstream consumers (e.g. live preview).
+     * Reads the root FieldState value directly so it re-triggers when any field value changes,
+     * unlike formModel which may keep the same object reference after in-place mutations. */
+    formData = computed(() => {
+        const ef = this.entityForm();
+        if (!ef)
+            return this.formModel();
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- FieldState value is the full model
+        const val = ef().value();
+        return val ?? this.formModel();
+    }, ...(ngDevMode ? [{ debugName: "formData" }] : []));
     /** Signal forms tree — created once when collection is available */
     entityForm = signal(null, ...(ngDevMode ? [{ debugName: "entityForm" }] : []));
     /** Original data for edit mode */
@@ -5473,6 +5951,13 @@ class EntityFormWidget {
         }
         return false;
     }, ...(ngDevMode ? [{ debugName: "hasVersioning" }] : []));
+    /** Current document status (from form model or default to 'draft') */
+    documentStatus = computed(() => {
+        const data = this.formModel();
+        if (data['_status'] === 'published')
+            return 'published';
+        return 'draft';
+    }, ...(ngDevMode ? [{ debugName: "documentStatus" }] : []));
     /** Whether draft save is available (edit mode with existing entity) */
     canSaveDraft = computed(() => {
         return this.hasVersioning() && this.mode() === 'edit' && !!this.entityId();
@@ -5836,6 +6321,13 @@ class EntityFormWidget {
     switchToEdit() {
         this.modeChange.emit('edit');
     }
+    /**
+     * Handle status change from publish controls.
+     */
+    onStatusChanged(status) {
+        const data = { ...this.formModel(), _status: status };
+        this.formModel.set(data);
+    }
     /**
      * Handle version restore — reload the entity data.
      */
@@ -5889,17 +6381,28 @@ class EntityFormWidget {
 			<div class="mb-8">
 				<div class="flex items-start justify-between gap-4">
 					<div>
-						<h1 class="text-2xl font-semibold tracking-tight">
-							@if (isGlobal()) {
-								{{ collectionLabelSingular() }}
-							} @else if (mode() === 'create') {
-								Create {{ collectionLabelSingular() }}
-							} @else if (mode() === 'edit') {
-								Edit {{ collectionLabelSingular() }}
-							} @else {
-								View {{ collectionLabelSingular() }}
+						<div class="flex items-center gap-3">
+							<h1 class="text-2xl font-semibold tracking-tight">
+								@if (isGlobal()) {
+									{{ collectionLabelSingular() }}
+								} @else if (mode() === 'create') {
+									Create {{ collectionLabelSingular() }}
+								} @else if (mode() === 'edit') {
+									Edit {{ collectionLabelSingular() }}
+								} @else {
+									View {{ collectionLabelSingular() }}
+								}
+							</h1>
+							@if (hasVersioning() && mode() === 'edit' && entityId()) {
+								<mcms-publish-controls
+									[collection]="collection().slug"
+									[documentId]="entityId() ?? ''"
+									[documentLabel]="collectionLabelSingular()"
+									[initialStatus]="documentStatus()"
+									(statusChanged)="onStatusChanged($event)"
+								/>
 							}
-						</h1>
+						</div>
 						<p class="mt-1 text-muted-foreground">
 							@if (isGlobal()) {
 								Manage {{ collectionLabelSingular().toLowerCase() }} settings.
@@ -6025,14 +6528,14 @@ class EntityFormWidget {
 				<div class="mt-8">
 					<mcms-version-history
 						[collection]="collection().slug"
-						[documentId]="entityId()!"
+						[documentId]="entityId() ?? ''"
 						[documentLabel]="collectionLabelSingular()"
 						(restored)="onVersionRestored()"
 					/>
 				</div>
 			}
 		</div>
-	`, isInline: true, dependencies: [{ kind: "component", type: Card, selector: "mcms-card" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: CardFooter, selector: "mcms-card-footer" }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Spinner, selector: "mcms-spinner", inputs: ["size", "label", "class"] }, { kind: "component", type: Alert, selector: "mcms-alert", inputs: ["variant", "class"] }, { kind: "component", type: FieldRenderer, selector: "mcms-field-renderer", inputs: ["field", "formNode", "formTree", "formModel", "mode", "path"] }, { kind: "component", type: Breadcrumbs, selector: "mcms-breadcrumbs", inputs: ["class"] }, { kind: "component", type: BreadcrumbItem, selector: "mcms-breadcrumb-item", inputs: ["href", "current", "class"] }, { kind: "component", type: BreadcrumbSeparator, selector: "mcms-breadcrumb-separator", inputs: ["class"] }, { kind: "component", type: VersionHistoryWidget, selector: "mcms-version-history", inputs: ["collection", "documentId", "documentLabel"], outputs: ["restored"] }, { kind: "component", type: CollectionUploadZoneComponent, selector: "mcms-collection-upload-zone", inputs: ["uploadConfig", "disabled", "pendingFile", "isUploading", "uploadProgress", "error", "existingMedia"], outputs: ["fileSelected", "fileRemoved"] }, { kind: "component", type: FocalPointPickerComponent, selector: "mcms-focal-point-picker", inputs: ["imageUrl", "focalPoint", "alt", "naturalWidth", "naturalHeight", "imageSizes"], outputs: ["focalPointChange"] }, { kind: "component", type: ImageVariantsDisplay, selector: "mcms-image-variants-display", inputs: ["sizes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: Card, selector: "mcms-card" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: CardFooter, selector: "mcms-card-footer" }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Spinner, selector: "mcms-spinner", inputs: ["size", "label", "class"] }, { kind: "component", type: Alert, selector: "mcms-alert", inputs: ["variant", "class"] }, { kind: "component", type: FieldRenderer, selector: "mcms-field-renderer", inputs: ["field", "formNode", "formTree", "formModel", "mode", "path"] }, { kind: "component", type: Breadcrumbs, selector: "mcms-breadcrumbs", inputs: ["class"] }, { kind: "component", type: BreadcrumbItem, selector: "mcms-breadcrumb-item", inputs: ["href", "current", "class"] }, { kind: "component", type: BreadcrumbSeparator, selector: "mcms-breadcrumb-separator", inputs: ["class"] }, { kind: "component", type: VersionHistoryWidget, selector: "mcms-version-history", inputs: ["collection", "documentId", "documentLabel"], outputs: ["restored"] }, { kind: "component", type: PublishControlsWidget, selector: "mcms-publish-controls", inputs: ["collection", "documentId", "documentLabel", "initialStatus"], outputs: ["statusChanged"] }, { kind: "component", type: CollectionUploadZoneComponent, selector: "mcms-collection-upload-zone", inputs: ["uploadConfig", "disabled", "pendingFile", "isUploading", "uploadProgress", "error", "existingMedia"], outputs: ["fileSelected", "fileRemoved"] }, { kind: "component", type: FocalPointPickerComponent, selector: "mcms-focal-point-picker", inputs: ["imageUrl", "focalPoint", "alt", "naturalWidth", "naturalHeight", "imageSizes"], outputs: ["focalPointChange"] }, { kind: "component", type: ImageVariantsDisplay, selector: "mcms-image-variants-display", inputs: ["sizes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityFormWidget, decorators: [{
             type: Component,
@@ -6050,6 +6553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         BreadcrumbItem,
                         BreadcrumbSeparator,
                         VersionHistoryWidget,
+                        PublishControlsWidget,
                         CollectionUploadZoneComponent,
                         FocalPointPickerComponent,
                         ImageVariantsDisplay,
@@ -6074,17 +6578,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 			<div class="mb-8">
 				<div class="flex items-start justify-between gap-4">
 					<div>
-						<h1 class="text-2xl font-semibold tracking-tight">
-							@if (isGlobal()) {
-								{{ collectionLabelSingular() }}
-							} @else if (mode() === 'create') {
-								Create {{ collectionLabelSingular() }}
-							} @else if (mode() === 'edit') {
-								Edit {{ collectionLabelSingular() }}
-							} @else {
-								View {{ collectionLabelSingular() }}
+						<div class="flex items-center gap-3">
+							<h1 class="text-2xl font-semibold tracking-tight">
+								@if (isGlobal()) {
+									{{ collectionLabelSingular() }}
+								} @else if (mode() === 'create') {
+									Create {{ collectionLabelSingular() }}
+								} @else if (mode() === 'edit') {
+									Edit {{ collectionLabelSingular() }}
+								} @else {
+									View {{ collectionLabelSingular() }}
+								}
+							</h1>
+							@if (hasVersioning() && mode() === 'edit' && entityId()) {
+								<mcms-publish-controls
+									[collection]="collection().slug"
+									[documentId]="entityId() ?? ''"
+									[documentLabel]="collectionLabelSingular()"
+									[initialStatus]="documentStatus()"
+									(statusChanged)="onStatusChanged($event)"
+								/>
 							}
-						</h1>
+						</div>
 						<p class="mt-1 text-muted-foreground">
 							@if (isGlobal()) {
 								Manage {{ collectionLabelSingular().toLowerCase() }} settings.
@@ -6145,277 +6660,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 						@if (isUploadCol() && formModelSizes()) {
 							<div class="mb-6">
-								<mcms-image-variants-display [sizes]="formModelSizes()" />
-							</div>
-						}
-
-						<div class="space-y-6">
-							@for (field of visibleFields(); track field.name) {
-								<mcms-field-renderer
-									[field]="field"
-									[formNode]="getFormNode(field.name)"
-									[formTree]="entityForm()"
-									[formModel]="formModel()"
-									[mode]="mode()"
-									[path]="field.name"
-								/>
-							}
-						</div>
-					}
-				</mcms-card-content>
-
-				<mcms-card-footer class="flex justify-end gap-3 border-t bg-muted/50 px-6 py-4">
-					@if (mode() !== 'view') {
-						<button
-							mcms-button
-							variant="outline"
-							[disabled]="isSubmitting() || isSavingDraft()"
-							(click)="onCancel()"
-						>
-							Cancel
-						</button>
-						@if (canSaveDraft()) {
-							<button
-								mcms-button
-								variant="outline"
-								[disabled]="isSubmitting() || isSavingDraft()"
-								(click)="onSaveDraft()"
-							>
-								@if (isSavingDraft()) {
-									<mcms-spinner size="sm" class="mr-2" />
-								}
-								Save Draft
-							</button>
-						}
-						<button
-							mcms-button
-							variant="primary"
-							[disabled]="isSubmitting() || isSavingDraft()"
-							(click)="onSubmit()"
-						>
-							@if (isSubmitting()) {
-								<mcms-spinner size="sm" class="mr-2" />
-							}
-							{{ mode() === 'create' ? 'Create' : 'Save Changes' }}
-						</button>
-					} @else {
-						@if (canEdit()) {
-							<button mcms-button variant="primary" (click)="switchToEdit()">Edit</button>
-						}
-					}
-				</mcms-card-footer>
-			</mcms-card>
-
-			@if (hasVersioning() && mode() === 'edit' && entityId()) {
-				<div class="mt-8">
-					<mcms-version-history
-						[collection]="collection().slug"
-						[documentId]="entityId()!"
-						[documentLabel]="collectionLabelSingular()"
-						(restored)="onVersionRestored()"
-					/>
-				</div>
-			}
-		</div>
-	`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: true }] }], entityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityId", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: false }] }], showBreadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumbs", required: false }] }], suppressNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressNavigation", required: false }] }], isGlobal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGlobal", required: false }] }], globalSlug: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSlug", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], saveError: [{ type: i0.Output, args: ["saveError"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }], draftSaved: [{ type: i0.Output, args: ["draftSaved"] }] } });
-
-/**
- * Publish Controls Widget
- *
- * Displays the current document status and provides publish/unpublish actions.
- *
- * @example
- * ```html
- * <mcms-publish-controls
- *   [collection]="'posts'"
- *   [documentId]="'abc123'"
- *   [documentLabel]="'Post'"
- *   (statusChanged)="onStatusChanged($event)"
- * />
- * ```
- */
-class PublishControlsWidget {
-    versionService = inject(VersionService);
-    feedback = inject(FeedbackService);
-    /** Collection slug */
-    collection = input.required(...(ngDevMode ? [{ debugName: "collection" }] : []));
-    /** Document ID */
-    documentId = input.required(...(ngDevMode ? [{ debugName: "documentId" }] : []));
-    /** Document label for feedback messages */
-    documentLabel = input('Document', ...(ngDevMode ? [{ debugName: "documentLabel" }] : []));
-    /** Initial status (optional, will be fetched if not provided) */
-    initialStatus = input(undefined, ...(ngDevMode ? [{ debugName: "initialStatus" }] : []));
-    /** Emitted when the status changes */
-    statusChanged = output();
-    /** Current status */
-    status = signal('draft', ...(ngDevMode ? [{ debugName: "status" }] : []));
-    /** Whether a status update is in progress */
-    isUpdating = signal(false, ...(ngDevMode ? [{ debugName: "isUpdating" }] : []));
-    /** Whether status is loading */
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    /** Badge variant based on status (derived from status signal) */
-    statusVariant = computed(() => this.status() === 'published' ? 'default' : 'secondary', ...(ngDevMode ? [{ debugName: "statusVariant" }] : []));
-    /** Status label (derived from status signal) */
-    statusLabel = computed(() => (this.status() === 'published' ? 'Published' : 'Draft'), ...(ngDevMode ? [{ debugName: "statusLabel" }] : []));
-    constructor() {
-        // Load status when inputs change
-        effect(() => {
-            const collection = this.collection();
-            const docId = this.documentId();
-            const initial = this.initialStatus();
-            if (initial !== undefined) {
-                this.updateStatusDisplay(initial);
-            }
-            else if (collection && docId) {
-                this.loadStatus(collection, docId);
-            }
-        });
-    }
-    /**
-     * Load the current status from the API.
-     */
-    async loadStatus(collection, docId) {
-        this.isLoading.set(true);
-        try {
-            const status = await this.versionService.getStatus(collection, docId);
-            this.updateStatusDisplay(status);
-        }
-        catch {
-            // Default to draft if we can't load status
-            this.updateStatusDisplay('draft');
-        }
-        finally {
-            this.isLoading.set(false);
-        }
-    }
-    /**
-     * Update the status display.
-     * statusVariant and statusLabel are computed signals that automatically update.
-     */
-    updateStatusDisplay(status) {
-        this.status.set(status);
-    }
-    /**
-     * Publish the document.
-     */
-    async onPublish() {
-        this.isUpdating.set(true);
-        try {
-            await this.versionService.publish(this.collection(), this.documentId());
-            this.updateStatusDisplay('published');
-            this.statusChanged.emit('published');
-        }
-        catch {
-            // Error handled by crudToastInterceptor
-        }
-        finally {
-            this.isUpdating.set(false);
-        }
-    }
-    /**
-     * Unpublish the document.
-     */
-    async onUnpublish() {
-        const confirmed = await this.feedback.confirmUnpublish(this.documentLabel());
-        if (!confirmed) {
-            return;
-        }
-        this.isUpdating.set(true);
-        try {
-            await this.versionService.unpublish(this.collection(), this.documentId());
-            this.updateStatusDisplay('draft');
-            this.statusChanged.emit('draft');
-        }
-        catch {
-            // Error handled by crudToastInterceptor
-        }
-        finally {
-            this.isUpdating.set(false);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PublishControlsWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PublishControlsWidget, isStandalone: true, selector: "mcms-publish-controls", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, documentId: { classPropertyName: "documentId", publicName: "documentId", isSignal: true, isRequired: true, transformFunction: null }, documentLabel: { classPropertyName: "documentLabel", publicName: "documentLabel", isSignal: true, isRequired: false, transformFunction: null }, initialStatus: { classPropertyName: "initialStatus", publicName: "initialStatus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { statusChanged: "statusChanged" }, host: { classAttribute: "inline-flex items-center gap-3" }, ngImport: i0, template: `
-		<mcms-badge [variant]="statusVariant()">
-			{{ statusLabel() }}
-		</mcms-badge>
-
-		@if (status() === 'draft') {
-			<button
-				mcms-button
-				variant="primary"
-				size="sm"
-				[disabled]="isUpdating()"
-				(click)="onPublish()"
-			>
-				@if (isUpdating()) {
-					Publishing...
-				} @else {
-					Publish
-				}
-			</button>
-		} @else {
-			<button
-				mcms-button
-				variant="outline"
-				size="sm"
-				[disabled]="isUpdating()"
-				(click)="onUnpublish()"
-			>
-				@if (isUpdating()) {
-					Unpublishing...
-				} @else {
-					Unpublish
-				}
-			</button>
-		}
-	`, isInline: true, dependencies: [{ kind: "component", type: Badge, selector: "mcms-badge", inputs: ["variant", "class", "role", "ariaLabel"] }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PublishControlsWidget, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'mcms-publish-controls',
-                    imports: [Badge, Button],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'inline-flex items-center gap-3' },
-                    template: `
-		<mcms-badge [variant]="statusVariant()">
-			{{ statusLabel() }}
-		</mcms-badge>
+								<mcms-image-variants-display [sizes]="formModelSizes()" />
+							</div>
+						}
 
-		@if (status() === 'draft') {
-			<button
-				mcms-button
-				variant="primary"
-				size="sm"
-				[disabled]="isUpdating()"
-				(click)="onPublish()"
-			>
-				@if (isUpdating()) {
-					Publishing...
-				} @else {
-					Publish
-				}
-			</button>
-		} @else {
-			<button
-				mcms-button
-				variant="outline"
-				size="sm"
-				[disabled]="isUpdating()"
-				(click)="onUnpublish()"
-			>
-				@if (isUpdating()) {
-					Unpublishing...
-				} @else {
-					Unpublish
-				}
-			</button>
-		}
+						<div class="space-y-6">
+							@for (field of visibleFields(); track field.name) {
+								<mcms-field-renderer
+									[field]="field"
+									[formNode]="getFormNode(field.name)"
+									[formTree]="entityForm()"
+									[formModel]="formModel()"
+									[mode]="mode()"
+									[path]="field.name"
+								/>
+							}
+						</div>
+					}
+				</mcms-card-content>
+
+				<mcms-card-footer class="flex justify-end gap-3 border-t bg-muted/50 px-6 py-4">
+					@if (mode() !== 'view') {
+						<button
+							mcms-button
+							variant="outline"
+							[disabled]="isSubmitting() || isSavingDraft()"
+							(click)="onCancel()"
+						>
+							Cancel
+						</button>
+						@if (canSaveDraft()) {
+							<button
+								mcms-button
+								variant="outline"
+								[disabled]="isSubmitting() || isSavingDraft()"
+								(click)="onSaveDraft()"
+							>
+								@if (isSavingDraft()) {
+									<mcms-spinner size="sm" class="mr-2" />
+								}
+								Save Draft
+							</button>
+						}
+						<button
+							mcms-button
+							variant="primary"
+							[disabled]="isSubmitting() || isSavingDraft()"
+							(click)="onSubmit()"
+						>
+							@if (isSubmitting()) {
+								<mcms-spinner size="sm" class="mr-2" />
+							}
+							{{ mode() === 'create' ? 'Create' : 'Save Changes' }}
+						</button>
+					} @else {
+						@if (canEdit()) {
+							<button mcms-button variant="primary" (click)="switchToEdit()">Edit</button>
+						}
+					}
+				</mcms-card-footer>
+			</mcms-card>
+
+			@if (hasVersioning() && mode() === 'edit' && entityId()) {
+				<div class="mt-8">
+					<mcms-version-history
+						[collection]="collection().slug"
+						[documentId]="entityId() ?? ''"
+						[documentLabel]="collectionLabelSingular()"
+						(restored)="onVersionRestored()"
+					/>
+				</div>
+			}
+		</div>
 	`,
                 }]
-        }], ctorParameters: () => [], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: true }] }], documentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentId", required: true }] }], documentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentLabel", required: false }] }], initialStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialStatus", required: false }] }], statusChanged: [{ type: i0.Output, args: ["statusChanged"] }] } });
+        }], ctorParameters: () => [], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: true }] }], entityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityId", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: false }] }], showBreadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumbs", required: false }] }], suppressNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "suppressNavigation", required: false }] }], isGlobal: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGlobal", required: false }] }], globalSlug: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSlug", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], saveError: [{ type: i0.Output, args: ["saveError"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }], draftSaved: [{ type: i0.Output, args: ["draftSaved"] }] } });
 
 /**
  * Entity View Widget
@@ -7521,6 +7840,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
+/**
+ * Renders all components registered for a named admin layout slot.
+ *
+ * Usage:
+ * ```html
+ * <mcms-admin-slot slot="dashboard:before" />
+ * <mcms-admin-slot slot="collection-list:before" [collectionSlug]="slug" />
+ * ```
+ */
+class AdminSlotOutlet {
+    registry = inject(AdminSlotRegistry);
+    /** The slot key to render (e.g., 'dashboard:before'). */
+    slot = input.required(...(ngDevMode ? [{ debugName: "slot" }] : []));
+    /** Optional collection slug for per-collection slot resolution. */
+    collectionSlug = input(...(ngDevMode ? [undefined, { debugName: "collectionSlug" }] : []));
+    /** Optional context passed as inputs to slot components. */
+    context = input({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
+    /** Resolved component types after lazy loading. */
+    resolvedComponents = signal([], ...(ngDevMode ? [{ debugName: "resolvedComponents" }] : []));
+    /** Inputs to pass to each slot component. */
+    slotInputs = computed(() => ({
+        ...this.context(),
+    }), ...(ngDevMode ? [{ debugName: "slotInputs" }] : []));
+    /** Incremented on every effect run to detect stale promise resolutions. */
+    loadGeneration = 0;
+    constructor() {
+        effect(() => {
+            const slot = this.slot();
+            const slug = this.collectionSlug();
+            const loaders = this.registry.resolve(slot, slug);
+            if (loaders.length === 0) {
+                this.resolvedComponents.set([]);
+                return;
+            }
+            const generation = ++this.loadGeneration;
+            Promise.all(loaders.map((loader) => loader()))
+                .then((components) => {
+                if (generation !== this.loadGeneration)
+                    return;
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- loaders resolve to unknown from registry, safe cast to Type[]
+                this.resolvedComponents.set(components);
+            })
+                .catch((err) => {
+                if (generation !== this.loadGeneration)
+                    return;
+                console.error('[AdminSlotOutlet] Failed to load slot components:', err);
+                this.resolvedComponents.set([]);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminSlotOutlet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdminSlotOutlet, isStandalone: true, selector: "mcms-admin-slot", inputs: { slot: { classPropertyName: "slot", publicName: "slot", isSignal: true, isRequired: true, transformFunction: null }, collectionSlug: { classPropertyName: "collectionSlug", publicName: "collectionSlug", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+		@for (component of resolvedComponents(); track $index) {
+			<ng-container *ngComponentOutlet="component; inputs: slotInputs()" />
+		}
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminSlotOutlet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mcms-admin-slot',
+                    imports: [NgComponentOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+		@for (component of resolvedComponents(); track $index) {
+			<ng-container *ngComponentOutlet="component; inputs: slotInputs()" />
+		}
+	`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { slot: [{ type: i0.Input, args: [{ isSignal: true, alias: "slot", required: true }] }], collectionSlug: [{ type: i0.Input, args: [{ isSignal: true, alias: "collectionSlug", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
+
 const DEFAULT_GROUP = 'Collections';
 /**
  * Slugify a group name into a valid HTML id attribute value.
@@ -7763,6 +8154,8 @@ class AdminSidebarWidget {
 						[exact]="true"
 					/>
 
+					<mcms-admin-slot slot="shell:nav-start" />
+
 					<!-- Collection Sections (grouped by admin.group) -->
 					@for (group of collectionGroups(); track group.id) {
 						<mcms-sidebar-section [title]="group.name">
@@ -7807,6 +8200,8 @@ class AdminSidebarWidget {
 							}
 						</mcms-sidebar-section>
 					}
+
+					<mcms-admin-slot slot="shell:nav-end" />
 				</mcms-sidebar-nav>
 			</div>
 
@@ -7854,7 +8249,7 @@ class AdminSidebarWidget {
 				}
 			</div>
 		</mcms-sidebar>
-	`, isInline: true, dependencies: [{ kind: "component", type: Sidebar, selector: "mcms-sidebar", inputs: ["width", "collapsedWidth", "collapsed", "class"] }, { kind: "component", type: SidebarNav, selector: "mcms-sidebar-nav", inputs: ["ariaLabel", "class"] }, { kind: "component", type: SidebarNavItem, selector: "mcms-sidebar-nav-item", inputs: ["label", "href", "icon", "badge", "active", "disabled", "exact", "class"], outputs: ["clicked"] }, { kind: "component", type: SidebarSection, selector: "mcms-sidebar-section", inputs: ["title", "collapsible", "expanded", "class"], outputs: ["expandedChange"] }, { kind: "component", type: Avatar, selector: "mcms-avatar", inputs: ["size", "class", "ariaLabel"] }, { kind: "component", type: AvatarFallback, selector: "mcms-avatar-fallback", inputs: ["delayMs", "class"] }, { kind: "component", type: DropdownMenu, selector: "mcms-dropdown-menu", inputs: ["disabled", "wrap", "typeaheadDelay", "class"], outputs: ["itemSelected"] }, { kind: "component", type: DropdownMenuItem, selector: "button[mcms-dropdown-item], a[mcms-dropdown-item]", inputs: ["value", "disabled", "shortcut", "class"], outputs: ["selected"] }, { kind: "component", type: DropdownSeparator, selector: "mcms-dropdown-separator" }, { kind: "component", type: DropdownLabel, selector: "mcms-dropdown-label" }, { kind: "directive", type: DropdownTrigger, selector: "[mcmsDropdownTrigger]", inputs: ["mcmsDropdownTrigger", "dropdownSide", "dropdownAlign", "dropdownOffset", "dropdownDisabled"], outputs: ["opened", "closed"], exportAs: ["mcmsDropdownTrigger"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: Sidebar, selector: "mcms-sidebar", inputs: ["width", "collapsedWidth", "collapsed", "class"] }, { kind: "component", type: SidebarNav, selector: "mcms-sidebar-nav", inputs: ["ariaLabel", "class"] }, { kind: "component", type: SidebarNavItem, selector: "mcms-sidebar-nav-item", inputs: ["label", "href", "icon", "badge", "active", "disabled", "exact", "class"], outputs: ["clicked"] }, { kind: "component", type: SidebarSection, selector: "mcms-sidebar-section", inputs: ["title", "collapsible", "expanded", "class"], outputs: ["expandedChange"] }, { kind: "component", type: Avatar, selector: "mcms-avatar", inputs: ["size", "class", "ariaLabel"] }, { kind: "component", type: AvatarFallback, selector: "mcms-avatar-fallback", inputs: ["delayMs", "class"] }, { kind: "component", type: DropdownMenu, selector: "mcms-dropdown-menu", inputs: ["disabled", "wrap", "typeaheadDelay", "class"], outputs: ["itemSelected"] }, { kind: "component", type: DropdownMenuItem, selector: "button[mcms-dropdown-item], a[mcms-dropdown-item]", inputs: ["value", "disabled", "shortcut", "class"], outputs: ["selected"] }, { kind: "component", type: DropdownSeparator, selector: "mcms-dropdown-separator" }, { kind: "component", type: DropdownLabel, selector: "mcms-dropdown-label" }, { kind: "directive", type: DropdownTrigger, selector: "[mcmsDropdownTrigger]", inputs: ["mcmsDropdownTrigger", "dropdownSide", "dropdownAlign", "dropdownOffset", "dropdownDisabled"], outputs: ["opened", "closed"], exportAs: ["mcmsDropdownTrigger"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: AdminSlotOutlet, selector: "mcms-admin-slot", inputs: ["slot", "collectionSlug", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminSidebarWidget, decorators: [{
             type: Component,
@@ -7873,6 +8268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         DropdownLabel,
                         DropdownTrigger,
                         NgIcon,
+                        AdminSlotOutlet,
                     ],
                     providers: [
                         provideIcons({
@@ -7938,6 +8334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 						[exact]="true"
 					/>
 
+					<mcms-admin-slot slot="shell:nav-start" />
+
 					<!-- Collection Sections (grouped by admin.group) -->
 					@for (group of collectionGroups(); track group.id) {
 						<mcms-sidebar-section [title]="group.name">
@@ -7982,6 +8380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 							}
 						</mcms-sidebar-section>
 					}
+
+					<mcms-admin-slot slot="shell:nav-end" />
 				</mcms-sidebar-nav>
 			</div>
 
@@ -8052,6 +8452,8 @@ class AdminShellComponent {
     auth = inject(MomentumAuthService);
     collectionAccess = inject(CollectionAccessService);
     sidebar = inject(SidebarService);
+    componentRegistry = inject(AdminComponentRegistry);
+    slotRegistry = inject(AdminSlotRegistry);
     entitySheet = inject(EntitySheetService);
     /** All collections from route data */
     allCollections = computed(() => {
@@ -8101,6 +8503,23 @@ class AdminShellComponent {
         };
     }, ...(ngDevMode ? [{ debugName: "sidebarUser" }] : []));
     ngOnInit() {
+        // Register config-level component overrides and slot registrations.
+        // This reads from route data (which has the full MomentumConfig-derived data)
+        // and bridges config declarations into the runtime registries.
+        const routeData = this.route.snapshot.data;
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- route data is Record<string, unknown>
+        const adminComponents = routeData['adminComponents'];
+        registerConfigComponents(this.allCollections(), adminComponents, this.componentRegistry, this.slotRegistry);
+        // Also register plugin-declared admin components
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- route data is Record<string, unknown>
+        const plugins = routeData['plugins'];
+        if (plugins) {
+            for (const plugin of plugins) {
+                if (plugin.adminComponents) {
+                    registerConfigComponents([], plugin.adminComponents, this.componentRegistry, this.slotRegistry);
+                }
+            }
+        }
         // Keyboard shortcuts, auth, and sheet restoration only run in the browser.
         // SSR user is provided via MOMENTUM_API_CONTEXT (used by injectUser above).
         if (!isPlatformBrowser(this.platformId)) {
@@ -8176,9 +8595,11 @@ class AdminShellComponent {
 
 		<!-- Main Content (with top padding on mobile for header, normal padding at md+) -->
 		<main id="mcms-main-content" class="flex-1 p-8 overflow-y-auto overflow-x-hidden pt-20 md:pt-8">
+			<mcms-admin-slot slot="shell:header" />
 			@defer (hydrate on immediate) {
 				<router-outlet />
 			}
+			<mcms-admin-slot slot="shell:footer" />
 		</main>
 
 		<mcms-toast-container />
@@ -8213,7 +8634,7 @@ class AdminShellComponent {
 				</div>
 			</div>
 		}
-	`, isInline: true, styles: ["@keyframes mcms-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mcms-fade-out{0%{opacity:1}to{opacity:0}}@keyframes mcms-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes mcms-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}.sheet-backdrop{animation:mcms-fade-in .15s ease-out}.sheet-backdrop-closing{animation:mcms-fade-out .15s ease-in forwards}.sheet-panel{animation:mcms-slide-in-right .2s ease-out}.sheet-panel-closing{animation:mcms-slide-out-right .2s ease-in forwards}\n"], dependencies: [{ kind: "component", type: AdminSidebarWidget, selector: "mcms-admin-sidebar", inputs: ["branding", "collections", "globals", "pluginRoutes", "user", "basePath", "collapsed", "width"], outputs: ["signOut"] }, { kind: "component", type: SidebarTrigger, selector: "mcms-sidebar-trigger", inputs: ["class"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: EntitySheetContentComponent, selector: "mcms-entity-sheet-content" }, { kind: "component", type: ToastContainer, selector: "mcms-toast-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [RouterOutlet]] });
+	`, isInline: true, styles: ["@keyframes mcms-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mcms-fade-out{0%{opacity:1}to{opacity:0}}@keyframes mcms-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes mcms-slide-out-right{0%{transform:translate(0)}to{transform:translate(100%)}}.sheet-backdrop{animation:mcms-fade-in .15s ease-out}.sheet-backdrop-closing{animation:mcms-fade-out .15s ease-in forwards}.sheet-panel{animation:mcms-slide-in-right .2s ease-out}.sheet-panel-closing{animation:mcms-slide-out-right .2s ease-in forwards}\n"], dependencies: [{ kind: "component", type: AdminSidebarWidget, selector: "mcms-admin-sidebar", inputs: ["branding", "collections", "globals", "pluginRoutes", "user", "basePath", "collapsed", "width"], outputs: ["signOut"] }, { kind: "component", type: SidebarTrigger, selector: "mcms-sidebar-trigger", inputs: ["class"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: EntitySheetContentComponent, selector: "mcms-entity-sheet-content" }, { kind: "component", type: ToastContainer, selector: "mcms-toast-container" }, { kind: "component", type: AdminSlotOutlet, selector: "mcms-admin-slot", inputs: ["slot", "collectionSlug", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [RouterOutlet]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminShellComponent, decorators: [{
             type: Component,
@@ -8224,6 +8645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         A11yModule,
                         EntitySheetContentComponent,
                         ToastContainer,
+                        AdminSlotOutlet,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'flex h-screen overflow-hidden bg-background',
                         '(document:keydown.escape)': 'onEscapeKey()',
@@ -8256,9 +8678,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 		<!-- Main Content (with top padding on mobile for header, normal padding at md+) -->
 		<main id="mcms-main-content" class="flex-1 p-8 overflow-y-auto overflow-x-hidden pt-20 md:pt-8">
+			<mcms-admin-slot slot="shell:header" />
 			@defer (hydrate on immediate) {
 				<router-outlet />
 			}
+			<mcms-admin-slot slot="shell:footer" />
 		</main>
 
 		<mcms-toast-container />
@@ -9081,6 +9505,8 @@ class DashboardPage {
     collectionGroups = computed(() => groupCollections(this.collections()), ...(ngDevMode ? [{ debugName: "collectionGroups" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DashboardPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DashboardPage, isStandalone: true, selector: "mcms-dashboard", host: { classAttribute: "block max-w-6xl" }, ngImport: i0, template: `
+		<mcms-admin-slot slot="dashboard:before" />
+
 		<header class="mb-10">
 			<h1 class="text-4xl font-bold tracking-tight text-foreground">Dashboard</h1>
 			<p class="text-muted-foreground mt-3 text-lg">Manage your content and collections</p>
@@ -9130,16 +9556,20 @@ class DashboardPage {
 				</section>
 			}
 		}
-	`, isInline: true, dependencies: [{ kind: "component", type: CollectionCardWidget, selector: "mcms-collection-card", inputs: ["collection", "basePath", "showDocumentCount"], outputs: ["viewAll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+
+		<mcms-admin-slot slot="dashboard:after" />
+	`, isInline: true, dependencies: [{ kind: "component", type: CollectionCardWidget, selector: "mcms-collection-card", inputs: ["collection", "basePath", "showDocumentCount"], outputs: ["viewAll"] }, { kind: "component", type: AdminSlotOutlet, selector: "mcms-admin-slot", inputs: ["slot", "collectionSlug", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DashboardPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-dashboard',
-                    imports: [CollectionCardWidget],
+                    imports: [CollectionCardWidget, AdminSlotOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block max-w-6xl' },
                     template: `
+		<mcms-admin-slot slot="dashboard:before" />
+
 		<header class="mb-10">
 			<h1 class="text-4xl font-bold tracking-tight text-foreground">Dashboard</h1>
 			<p class="text-muted-foreground mt-3 text-lg">Manage your content and collections</p>
@@ -9189,6 +9619,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 				</section>
 			}
 		}
+
+		<mcms-admin-slot slot="dashboard:after" />
 	`,
                 }]
         }] });
@@ -9335,6 +9767,8 @@ class EntityListWidget {
     route = inject(ActivatedRoute);
     /** Template ref for complex cell rendering (group, array, json). */
     complexCellTemplate = viewChild('complexCell', ...(ngDevMode ? [{ debugName: "complexCellTemplate" }] : []));
+    /** Template ref for badge cell rendering (_status column). */
+    badgeCellTemplate = viewChild('badgeCell', ...(ngDevMode ? [{ debugName: "badgeCellTemplate" }] : []));
     /** The collection configuration */
     collection = input.required(...(ngDevMode ? [{ debugName: "collection" }] : []));
     /** Base path for entity routes */
@@ -9386,8 +9820,17 @@ class EntityListWidget {
     selectedEntities = signal([], ...(ngDevMode ? [{ debugName: "selectedEntities" }] : []));
     searchQuery = model('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
     viewingTrash = signal(false, ...(ngDevMode ? [{ debugName: "viewingTrash" }] : []));
+    statusFilter = signal(null, ...(ngDevMode ? [{ debugName: "statusFilter" }] : []));
+    /** Status filter options for versioned collections */
+    statusFilterOptions = [
+        { label: 'All', value: null },
+        { label: 'Draft', value: 'draft' },
+        { label: 'Published', value: 'published' },
+    ];
     /** Whether the collection has soft delete enabled */
     hasSoftDelete = computed(() => getSoftDeleteField(this.collection()) !== null, ...(ngDevMode ? [{ debugName: "hasSoftDelete" }] : []));
+    /** Whether the collection has versioning with drafts enabled */
+    hasVersioning = computed(() => hasVersionDrafts(this.collection()), ...(ngDevMode ? [{ debugName: "hasVersioning" }] : []));
     /** Computed collection label */
     collectionLabel = computed(() => {
         const col = this.collection();
@@ -9405,8 +9848,9 @@ class EntityListWidget {
     }, ...(ngDevMode ? [{ debugName: "dashboardPath" }] : []));
     /** Auto-derive columns from collection fields if not provided */
     tableColumns = computed(() => {
-        // Read template signal at top level so the computed re-runs when viewChild resolves
+        // Read template signals at top level so the computed re-runs when viewChild resolves
         const complexTemplate = this.complexCellTemplate();
+        const badgeTemplate = this.badgeCellTemplate();
         const customColumns = this.columns();
         if (customColumns.length > 0) {
             return customColumns;
@@ -9424,6 +9868,22 @@ class EntityListWidget {
             if (columns.length >= 5)
                 break;
         }
+        // Add _status badge column for versioned collections with drafts
+        if (hasVersionDrafts(col)) {
+            columns.push({
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                field: '_status',
+                header: 'Status',
+                sortable: true,
+                type: 'badge',
+                width: '110px',
+                badgeMap: {
+                    draft: { label: 'Draft', variant: 'secondary' },
+                    published: { label: 'Published', variant: 'default' },
+                },
+                ...(badgeTemplate ? { template: badgeTemplate } : {}),
+            });
+        }
         // Add deletedAt column when viewing trash
         if (this.viewingTrash() && this.hasSoftDelete()) {
             const softDeleteField = getSoftDeleteField(col) ?? 'deletedAt';
@@ -9477,6 +9937,11 @@ class EntityListWidget {
         if (typeof initialSearch === 'string') {
             this.searchQuery.set(initialSearch);
         }
+        // Initialize status filter from URL
+        const initialStatus = queryParams['status'];
+        if (initialStatus === 'draft' || initialStatus === 'published') {
+            this.statusFilter.set(initialStatus);
+        }
         // Initialize sort from URL (format: "field" for asc, "-field" for desc)
         const initialSort = queryParams['sort'];
         if (typeof initialSort === 'string' && initialSort) {
@@ -9488,11 +9953,12 @@ class EntityListWidget {
                 direction: isDesc ? 'desc' : 'asc',
             });
         }
-        // Load data when collection, pagination, or trash view changes
+        // Load data when collection, pagination, trash view, or status filter changes
         effect(() => {
             const col = this.collection();
             const page = this.currentPage();
             const trash = this.viewingTrash();
+            const status = this.statusFilter();
             let sortState = this.sort();
             let search = this.searchQuery();
             if (col) {
@@ -9502,24 +9968,25 @@ class EntityListWidget {
                     this.sort.set(undefined);
                     this.currentPage.set(1);
                     this.viewingTrash.set(false);
+                    this.statusFilter.set(null);
                     search = '';
                     sortState = undefined;
                     // Clear URL params
                     this.router.navigate([], {
-                        queryParams: { search: null, sort: null },
+                        queryParams: { search: null, sort: null, status: null },
                         queryParamsHandling: 'merge',
                         replaceUrl: true,
                     });
                 }
                 this.previousCollectionSlug = col.slug;
-                this.loadData(col.slug, page, sortState, search, trash);
+                this.loadData(col.slug, page, sortState, search, trash, status);
             }
         });
     }
     /**
      * Load data from API.
      */
-    async loadData(slug, page, sortState, search, onlyDeleted) {
+    async loadData(slug, page, sortState, search, onlyDeleted, statusFilter) {
         this.loading.set(true);
         this.error.set(null);
         try {
@@ -9535,17 +10002,25 @@ class EntityListWidget {
                 options['sort'] =
                     sortState.direction === 'desc' ? `-${String(sortState.field)}` : String(sortState.field);
             }
+            // Build where clause combining search and status filter
+            const whereConditions = [];
             if (search) {
-                // Build where clause for search
                 const searchFields = this.searchFields().length > 0 ? this.searchFields() : this.getDefaultSearchFields();
                 if (searchFields.length > 0) {
-                    options['where'] = {
-                        or: searchFields.map((field) => ({
-                            [field]: { contains: search },
-                        })),
-                    };
+                    whereConditions.push(...searchFields.map((field) => ({
+                        [field]: { contains: search },
+                    })));
                 }
             }
+            if (statusFilter) {
+                options['where'] = {
+                    ...(whereConditions.length > 0 ? { or: whereConditions } : {}),
+                    _status: { equals: statusFilter },
+                };
+            }
+            else if (whereConditions.length > 0) {
+                options['where'] = { or: whereConditions };
+            }
             const result = await this.api.collection(slug).find(options);
             this.entities.set(result.docs);
             this.totalItems.set(result.totalDocs);
@@ -9723,6 +10198,15 @@ class EntityListWidget {
             }
         }
     }
+    /**
+     * Look up a badge configuration from a column's badgeMap.
+     */
+    getBadgeConfig(value, column) {
+        if (!column.badgeMap || value === null || value === undefined)
+            return null;
+        const key = String(value);
+        return column.badgeMap[key] ?? null;
+    }
     /**
      * Generate a brief summary string for complex field values (group, array, json).
      */
@@ -9855,7 +10339,7 @@ class EntityListWidget {
     reload() {
         const col = this.collection();
         if (col) {
-            this.loadData(col.slug, this.currentPage(), this.sort(), this.searchQuery(), this.viewingTrash());
+            this.loadData(col.slug, this.currentPage(), this.sort(), this.searchQuery(), this.viewingTrash(), this.statusFilter());
         }
     }
     /**
@@ -9866,6 +10350,18 @@ class EntityListWidget {
         this.currentPage.set(1);
         this.selectedEntities.set([]);
     }
+    /**
+     * Set the status filter for versioned collections.
+     */
+    setStatusFilter(status) {
+        this.statusFilter.set(status);
+        this.currentPage.set(1);
+        this.router.navigate([], {
+            queryParams: { status: status ?? null },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        });
+    }
     /**
      * Handle create button click.
      */
@@ -9874,7 +10370,7 @@ class EntityListWidget {
         this.router.navigate([path]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityListWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EntityListWidget, isStandalone: true, selector: "mcms-entity-list", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, bulkActions: { classPropertyName: "bulkActions", publicName: "bulkActions", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchFields: { classPropertyName: "searchFields", publicName: "searchFields", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerActionClick: "headerActionClick", entityClick: "entityClick", entityAction: "entityAction", bulkAction: "bulkAction", dataLoaded: "dataLoaded", searchQuery: "searchQueryChange" }, host: { classAttribute: "block" }, providers: [provideIcons({ heroEye })], viewQueries: [{ propertyName: "complexCellTemplate", first: true, predicate: ["complexCell"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EntityListWidget, isStandalone: true, selector: "mcms-entity-list", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null }, bulkActions: { classPropertyName: "bulkActions", publicName: "bulkActions", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchFields: { classPropertyName: "searchFields", publicName: "searchFields", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { headerActionClick: "headerActionClick", entityClick: "entityClick", entityAction: "entityAction", bulkAction: "bulkAction", dataLoaded: "dataLoaded", searchQuery: "searchQueryChange" }, host: { classAttribute: "block" }, providers: [provideIcons({ heroEye })], viewQueries: [{ propertyName: "complexCellTemplate", first: true, predicate: ["complexCell"], descendants: true, isSignal: true }, { propertyName: "badgeCellTemplate", first: true, predicate: ["badgeCell"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		@if (showHeader()) {
 			@if (showBreadcrumbs()) {
 				<mcms-breadcrumbs class="mb-6">
@@ -9897,6 +10393,22 @@ class EntityListWidget {
 					}
 				</div>
 				<div class="flex items-center gap-2">
+					@if (hasVersioning()) {
+						<div class="flex items-center gap-1" role="group" aria-label="Filter by status">
+							@for (option of statusFilterOptions; track option.value) {
+								<button
+									mcms-button
+									[variant]="statusFilter() === option.value ? 'outline' : 'ghost'"
+									size="sm"
+									[attr.data-testid]="'status-filter-' + (option.value ?? 'all')"
+									[attr.aria-pressed]="statusFilter() === option.value"
+									(click)="setStatusFilter(option.value)"
+								>
+									{{ option.label }}
+								</button>
+							}
+						</div>
+					}
 					@if (hasSoftDelete()) {
 						<button
 							mcms-button
@@ -9970,6 +10482,15 @@ class EntityListWidget {
 			}
 		</mcms-data-table>
 
+		<!-- Template for badge cells (_status column) -->
+		<ng-template #badgeCell let-value let-column="column">
+			@if (getBadgeConfig(value, column); as badge) {
+				<mcms-badge [variant]="badge.variant">{{ badge.label }}</mcms-badge>
+			} @else {
+				{{ value ?? '-' }}
+			}
+		</ng-template>
+
 		<!-- Template for complex field cells (group, array, json) -->
 		<ng-template #complexCell let-value let-column="column">
 			<div class="flex items-center gap-1.5">
@@ -10021,6 +10542,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 					}
 				</div>
 				<div class="flex items-center gap-2">
+					@if (hasVersioning()) {
+						<div class="flex items-center gap-1" role="group" aria-label="Filter by status">
+							@for (option of statusFilterOptions; track option.value) {
+								<button
+									mcms-button
+									[variant]="statusFilter() === option.value ? 'outline' : 'ghost'"
+									size="sm"
+									[attr.data-testid]="'status-filter-' + (option.value ?? 'all')"
+									[attr.aria-pressed]="statusFilter() === option.value"
+									(click)="setStatusFilter(option.value)"
+								>
+									{{ option.label }}
+								</button>
+							}
+						</div>
+					}
 					@if (hasSoftDelete()) {
 						<button
 							mcms-button
@@ -10094,6 +10631,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 			}
 		</mcms-data-table>
 
+		<!-- Template for badge cells (_status column) -->
+		<ng-template #badgeCell let-value let-column="column">
+			@if (getBadgeConfig(value, column); as badge) {
+				<mcms-badge [variant]="badge.variant">{{ badge.label }}</mcms-badge>
+			} @else {
+				{{ value ?? '-' }}
+			}
+		</ng-template>
+
 		<!-- Template for complex field cells (group, array, json) -->
 		<ng-template #complexCell let-value let-column="column">
 			<div class="flex items-center gap-1.5">
@@ -10114,7 +10660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 		</ng-template>
 	`,
                 }]
-        }], ctorParameters: () => [], propDecorators: { complexCellTemplate: [{ type: i0.ViewChild, args: ['complexCell', { isSignal: true }] }], collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: true }] }], basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showBreadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumbs", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], bulkActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "bulkActions", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], headerActionClick: [{ type: i0.Output, args: ["headerActionClick"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFields", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], entityClick: [{ type: i0.Output, args: ["entityClick"] }], entityAction: [{ type: i0.Output, args: ["entityAction"] }], bulkAction: [{ type: i0.Output, args: ["bulkAction"] }], dataLoaded: [{ type: i0.Output, args: ["dataLoaded"] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { complexCellTemplate: [{ type: i0.ViewChild, args: ['complexCell', { isSignal: true }] }], badgeCellTemplate: [{ type: i0.ViewChild, args: ['badgeCell', { isSignal: true }] }], collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: true }] }], basePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "basePath", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showBreadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumbs", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], bulkActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "bulkActions", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], headerActionClick: [{ type: i0.Output, args: ["headerActionClick"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFields", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], entityClick: [{ type: i0.Output, args: ["entityClick"] }], entityAction: [{ type: i0.Output, args: ["entityAction"] }], bulkAction: [{ type: i0.Output, args: ["bulkAction"] }], dataLoaded: [{ type: i0.Output, args: ["dataLoaded"] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }] } });
 
 /** Role hierarchy: lower index = higher privilege.
  * Keep in sync with AUTH_ROLES in @momentumcms/auth/collections */
@@ -10501,6 +11047,7 @@ class CollectionListPage {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CollectionListPage, isStandalone: true, selector: "mcms-collection-list", host: { classAttribute: "block" }, viewQueries: [{ propertyName: "entityList", first: true, predicate: ["entityList"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		@if (collection(); as col) {
+			<mcms-admin-slot slot="collection-list:before" [collectionSlug]="col.slug" />
 			<mcms-entity-list
 				#entityList
 				[collection]="col"
@@ -10512,20 +11059,22 @@ class CollectionListPage {
 				(bulkAction)="onBulkAction($event)"
 				(headerActionClick)="onHeaderAction($event)"
 			/>
+			<mcms-admin-slot slot="collection-list:after" [collectionSlug]="col.slug" />
 		} @else {
 			<div class="p-12 text-center text-muted-foreground">Collection not found</div>
 		}
-	`, isInline: true, dependencies: [{ kind: "component", type: EntityListWidget, selector: "mcms-entity-list", inputs: ["collection", "basePath", "showHeader", "showBreadcrumbs", "columns", "rowActions", "bulkActions", "headerActions", "searchable", "searchPlaceholder", "searchFields", "sortable", "selectable", "paginated", "pageSize", "emptyTitle", "emptyDescription", "searchQuery"], outputs: ["headerActionClick", "entityClick", "entityAction", "bulkAction", "dataLoaded", "searchQueryChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: EntityListWidget, selector: "mcms-entity-list", inputs: ["collection", "basePath", "showHeader", "showBreadcrumbs", "columns", "rowActions", "bulkActions", "headerActions", "searchable", "searchPlaceholder", "searchFields", "sortable", "selectable", "paginated", "pageSize", "emptyTitle", "emptyDescription", "searchQuery"], outputs: ["headerActionClick", "entityClick", "entityAction", "bulkAction", "dataLoaded", "searchQueryChange"] }, { kind: "component", type: AdminSlotOutlet, selector: "mcms-admin-slot", inputs: ["slot", "collectionSlug", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionListPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-collection-list',
-                    imports: [EntityListWidget],
+                    imports: [EntityListWidget, AdminSlotOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                     template: `
 		@if (collection(); as col) {
+			<mcms-admin-slot slot="collection-list:before" [collectionSlug]="col.slug" />
 			<mcms-entity-list
 				#entityList
 				[collection]="col"
@@ -10537,6 +11086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 				(bulkAction)="onBulkAction($event)"
 				(headerActionClick)="onHeaderAction($event)"
 			/>
+			<mcms-admin-slot slot="collection-list:after" [collectionSlug]="col.slug" />
 		} @else {
 			<div class="p-12 text-center text-muted-foreground">Collection not found</div>
 		}
@@ -10586,6 +11136,7 @@ class CollectionViewPage {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionViewPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CollectionViewPage, isStandalone: true, selector: "mcms-collection-view", host: { classAttribute: "block" }, ngImport: i0, template: `
 		@if (collection(); as col) {
+			<mcms-admin-slot slot="collection-view:before" [collectionSlug]="col.slug" />
 			@if (entityId(); as id) {
 				<mcms-entity-view
 					[collection]="col"
@@ -10597,20 +11148,22 @@ class CollectionViewPage {
 			} @else {
 				<div class="p-12 text-center text-muted-foreground">Entity ID not provided</div>
 			}
+			<mcms-admin-slot slot="collection-view:after" [collectionSlug]="col.slug" />
 		} @else {
 			<div class="p-12 text-center text-muted-foreground">Collection not found</div>
 		}
-	`, isInline: true, dependencies: [{ kind: "component", type: EntityViewWidget, selector: "mcms-entity-view", inputs: ["collection", "entityId", "basePath", "showBreadcrumbs", "fieldConfigs", "actions", "showVersionHistory", "suppressNavigation"], outputs: ["edit", "statusChanged", "delete_", "actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: EntityViewWidget, selector: "mcms-entity-view", inputs: ["collection", "entityId", "basePath", "showBreadcrumbs", "fieldConfigs", "actions", "showVersionHistory", "suppressNavigation"], outputs: ["edit", "statusChanged", "delete_", "actionClick"] }, { kind: "component", type: AdminSlotOutlet, selector: "mcms-admin-slot", inputs: ["slot", "collectionSlug", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionViewPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-collection-view',
-                    imports: [EntityViewWidget],
+                    imports: [EntityViewWidget, AdminSlotOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                     template: `
 		@if (collection(); as col) {
+			<mcms-admin-slot slot="collection-view:before" [collectionSlug]="col.slug" />
 			@if (entityId(); as id) {
 				<mcms-entity-view
 					[collection]="col"
@@ -10622,6 +11175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 			} @else {
 				<div class="p-12 text-center text-muted-foreground">Entity ID not provided</div>
 			}
+			<mcms-admin-slot slot="collection-view:after" [collectionSlug]="col.slug" />
 		} @else {
 			<div class="p-12 text-center text-muted-foreground">Collection not found</div>
 		}
@@ -11236,6 +11790,7 @@ class CollectionEditPage {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionEditPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CollectionEditPage, isStandalone: true, selector: "mcms-collection-edit", host: { classAttribute: "block" }, viewQueries: [{ propertyName: "entityFormRef", first: true, predicate: ["entityForm"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		@if (collection(); as col) {
+			<mcms-admin-slot slot="collection-edit:before" [collectionSlug]="col.slug" />
 			@if (previewConfig(); as preview) {
 				@if (showPreview()) {
 					<!-- Split layout: form + preview -->
@@ -11270,6 +11825,7 @@ class CollectionEditPage {
 								(editBlockRequest)="onEditBlockRequest($event)"
 							/>
 						</div>
+						<mcms-admin-slot slot="collection-edit:sidebar" [collectionSlug]="col.slug" />
 					</div>
 				} @else {
 					<!-- Full-width form (preview hidden) -->
@@ -11294,29 +11850,36 @@ class CollectionEditPage {
 					</mcms-entity-form>
 				}
 			} @else {
-				<!-- Standard layout: form only -->
-				<mcms-entity-form
-					#entityForm
-					[collection]="col"
-					[entityId]="entityId()"
-					[mode]="mode()"
-					[basePath]="basePath"
-				/>
+				<!-- Standard layout: form + optional sidebar -->
+				<div class="flex gap-6">
+					<div class="min-w-0 flex-1">
+						<mcms-entity-form
+							#entityForm
+							[collection]="col"
+							[entityId]="entityId()"
+							[mode]="mode()"
+							[basePath]="basePath"
+						/>
+					</div>
+					<mcms-admin-slot slot="collection-edit:sidebar" [collectionSlug]="col.slug" />
+				</div>
 			}
+			<mcms-admin-slot slot="collection-edit:after" [collectionSlug]="col.slug" />
 		} @else {
 			<div class="p-12 text-center text-muted-foreground">Collection not found</div>
 		}
-	`, isInline: true, dependencies: [{ kind: "component", type: EntityFormWidget, selector: "mcms-entity-form", inputs: ["collection", "entityId", "mode", "basePath", "showBreadcrumbs", "suppressNavigation", "isGlobal", "globalSlug"], outputs: ["saved", "cancelled", "saveError", "modeChange", "draftSaved"] }, { kind: "component", type: LivePreviewComponent, selector: "mcms-live-preview", inputs: ["preview", "documentData", "collectionSlug", "entityId"], outputs: ["editBlockRequest"] }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: EntityFormWidget, selector: "mcms-entity-form", inputs: ["collection", "entityId", "mode", "basePath", "showBreadcrumbs", "suppressNavigation", "isGlobal", "globalSlug"], outputs: ["saved", "cancelled", "saveError", "modeChange", "draftSaved"] }, { kind: "component", type: LivePreviewComponent, selector: "mcms-live-preview", inputs: ["preview", "documentData", "collectionSlug", "entityId"], outputs: ["editBlockRequest"] }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: AdminSlotOutlet, selector: "mcms-admin-slot", inputs: ["slot", "collectionSlug", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionEditPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-collection-edit',
-                    imports: [EntityFormWidget, LivePreviewComponent, Button],
+                    imports: [EntityFormWidget, LivePreviewComponent, Button, AdminSlotOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                     template: `
 		@if (collection(); as col) {
+			<mcms-admin-slot slot="collection-edit:before" [collectionSlug]="col.slug" />
 			@if (previewConfig(); as preview) {
 				@if (showPreview()) {
 					<!-- Split layout: form + preview -->
@@ -11351,6 +11914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 								(editBlockRequest)="onEditBlockRequest($event)"
 							/>
 						</div>
+						<mcms-admin-slot slot="collection-edit:sidebar" [collectionSlug]="col.slug" />
 					</div>
 				} @else {
 					<!-- Full-width form (preview hidden) -->
@@ -11375,15 +11939,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 					</mcms-entity-form>
 				}
 			} @else {
-				<!-- Standard layout: form only -->
-				<mcms-entity-form
-					#entityForm
-					[collection]="col"
-					[entityId]="entityId()"
-					[mode]="mode()"
-					[basePath]="basePath"
-				/>
+				<!-- Standard layout: form + optional sidebar -->
+				<div class="flex gap-6">
+					<div class="min-w-0 flex-1">
+						<mcms-entity-form
+							#entityForm
+							[collection]="col"
+							[entityId]="entityId()"
+							[mode]="mode()"
+							[basePath]="basePath"
+						/>
+					</div>
+					<mcms-admin-slot slot="collection-edit:sidebar" [collectionSlug]="col.slug" />
+				</div>
 			}
+			<mcms-admin-slot slot="collection-edit:after" [collectionSlug]="col.slug" />
 		} @else {
 			<div class="p-12 text-center text-muted-foreground">Collection not found</div>
 		}
@@ -11476,6 +12046,7 @@ class LoginPage {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoginPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LoginPage, isStandalone: true, selector: "mcms-login-page", host: { classAttribute: "flex min-h-screen items-center justify-center bg-background p-4" }, ngImport: i0, template: `
 		<main>
+			<mcms-admin-slot slot="login:before" />
 			<mcms-card class="w-full max-w-md">
 				<mcms-card-header class="text-center">
 					<mcms-card-title>Sign In</mcms-card-title>
@@ -11613,8 +12184,9 @@ class LoginPage {
 					<p class="text-sm text-muted-foreground">Momentum CMS</p>
 				</mcms-card-footer>
 			</mcms-card>
+			<mcms-admin-slot slot="login:after" />
 		</main>
-	`, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Input, selector: "mcms-input", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "type", "id", "name", "placeholder", "autocomplete", "ariaLabel", "describedBy", "min", "max", "step"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: McmsFormField, selector: "mcms-form-field", inputs: ["id", "required", "disabled", "errors", "hint", "hasLabel"] }, { kind: "component", type: Card, selector: "mcms-card" }, { kind: "component", type: CardHeader, selector: "mcms-card-header" }, { kind: "component", type: CardTitle, selector: "mcms-card-title", inputs: ["level"] }, { kind: "component", type: CardDescription, selector: "mcms-card-description" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: CardFooter, selector: "mcms-card-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Input, selector: "mcms-input", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "type", "id", "name", "placeholder", "autocomplete", "ariaLabel", "describedBy", "min", "max", "step"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: McmsFormField, selector: "mcms-form-field", inputs: ["id", "required", "disabled", "errors", "hint", "hasLabel"] }, { kind: "component", type: Card, selector: "mcms-card" }, { kind: "component", type: CardHeader, selector: "mcms-card-header" }, { kind: "component", type: CardTitle, selector: "mcms-card-title", inputs: ["level"] }, { kind: "component", type: CardDescription, selector: "mcms-card-description" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: CardFooter, selector: "mcms-card-footer" }, { kind: "component", type: AdminSlotOutlet, selector: "mcms-admin-slot", inputs: ["slot", "collectionSlug", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoginPage, decorators: [{
             type: Component,
@@ -11631,6 +12203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         CardDescription,
                         CardContent,
                         CardFooter,
+                        AdminSlotOutlet,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
@@ -11638,6 +12211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     },
                     template: `
 		<main>
+			<mcms-admin-slot slot="login:before" />
 			<mcms-card class="w-full max-w-md">
 				<mcms-card-header class="text-center">
 					<mcms-card-title>Sign In</mcms-card-title>
@@ -11775,6 +12349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 					<p class="text-sm text-muted-foreground">Momentum CMS</p>
 				</mcms-card-footer>
 			</mcms-card>
+			<mcms-admin-slot slot="login:after" />
 		</main>
 	`,
                 }]
@@ -14213,18 +14788,18 @@ function provideMomentumFieldRenderers() {
                     registry.register('checkbox', () => Promise.resolve().then(function () { return checkboxField_component; }).then((m) => m.CheckboxFieldRenderer));
                     registry.register('date', () => Promise.resolve().then(function () { return dateField_component; }).then((m) => m.DateFieldRenderer));
                     registry.register('upload', () => Promise.resolve().then(function () { return uploadField_component; }).then((m) => m.UploadFieldRenderer));
-                    registry.register('richText', () => import('./momentumcms-admin-rich-text-field.component-BVAQkX3O.mjs').then((m) => m.RichTextFieldRenderer));
+                    registry.register('richText', () => import('./momentumcms-admin-rich-text-field.component-CZQSu4lc.mjs').then((m) => m.RichTextFieldRenderer));
                     // Layout field renderers (support nested field rendering)
-                    registry.register('group', () => import('./momentumcms-admin-group-field.component-CMKcqfjy.mjs').then((m) => m.GroupFieldRenderer));
-                    registry.register('array', () => import('./momentumcms-admin-array-field.component-DH6vaHO-.mjs').then((m) => m.ArrayFieldRenderer));
-                    registry.register('blocks', () => import('./momentumcms-admin-blocks-field.component-BxJRfiV3.mjs').then((m) => m.BlocksFieldRenderer));
+                    registry.register('group', () => import('./momentumcms-admin-group-field.component-qy0Z-cRK.mjs').then((m) => m.GroupFieldRenderer));
+                    registry.register('array', () => import('./momentumcms-admin-array-field.component-BLL21bqy.mjs').then((m) => m.ArrayFieldRenderer));
+                    registry.register('blocks', () => import('./momentumcms-admin-blocks-field.component-BQHIguqN.mjs').then((m) => m.BlocksFieldRenderer));
                     // Visual block editor variant (blocks field with admin.editor === 'visual')
                     registry.register('blocks-visual', () => Promise.resolve().then(function () { return visualBlockEditor_component; }).then((m) => m.VisualBlockEditorComponent));
-                    registry.register('relationship', () => import('./momentumcms-admin-relationship-field.component-DNZUCENa.mjs').then((m) => m.RelationshipFieldRenderer));
+                    registry.register('relationship', () => import('./momentumcms-admin-relationship-field.component-DS68G61P.mjs').then((m) => m.RelationshipFieldRenderer));
                     // Layout-only renderers (tabs, collapsible, row)
-                    registry.register('tabs', () => import('./momentumcms-admin-tabs-field.component-qYlbl8Ud.mjs').then((m) => m.TabsFieldRenderer));
-                    registry.register('collapsible', () => import('./momentumcms-admin-collapsible-field.component-CsjYCkGw.mjs').then((m) => m.CollapsibleFieldRenderer));
-                    registry.register('row', () => import('./momentumcms-admin-row-field.component-0F6cnUK_.mjs').then((m) => m.RowFieldRenderer));
+                    registry.register('tabs', () => import('./momentumcms-admin-tabs-field.component-DG8vPjj4.mjs').then((m) => m.TabsFieldRenderer));
+                    registry.register('collapsible', () => import('./momentumcms-admin-collapsible-field.component-DSE4X1xV.mjs').then((m) => m.CollapsibleFieldRenderer));
+                    registry.register('row', () => import('./momentumcms-admin-row-field.component-109gO-Rp.mjs').then((m) => m.RowFieldRenderer));
                 };
             },
         },
@@ -14259,6 +14834,104 @@ function provideFieldRenderer(type, loader) {
     ]);
 }
 
+/**
+ * Registry-aware page resolver that delegates to either a registered
+ * custom component or the built-in fallback.
+ *
+ * Used as the `loadComponent` for every admin route. Route `data` provides:
+ * - `adminPageKey` — the registry key (e.g., 'dashboard', 'collection-list')
+ * - `adminPageFallback` — lazy loader for the built-in default
+ *
+ * For collection pages, reads `:slug` from route params to check per-collection overrides.
+ *
+ * Subscribes to route observables so the component re-resolves when Angular
+ * reuses the instance for sibling routes (e.g., navigating between collections).
+ *
+ * Implements HasUnsavedChanges to delegate to the resolved component for
+ * the unsaved changes guard.
+ */
+class AdminPageResolver {
+    registry = inject(AdminComponentRegistry);
+    route = inject(ActivatedRoute);
+    destroyRef = inject(DestroyRef);
+    outlet = viewChild(NgComponentOutlet, ...(ngDevMode ? [{ debugName: "outlet" }] : []));
+    resolvedComponent = signal(null, ...(ngDevMode ? [{ debugName: "resolvedComponent" }] : []));
+    /** Incremented on every load to detect stale promise resolutions. */
+    loadGeneration = 0;
+    ngOnInit() {
+        combineLatest([this.route.data, this.route.params])
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(([data, params]) => {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- route data is Record<string, unknown>
+            const pageKey = data['adminPageKey'];
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- route data is Record<string, unknown>
+            const fallback = data['adminPageFallback'];
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- route params are Record<string, string>
+            const slug = params['slug'];
+            const override = this.registry.resolve(pageKey, slug);
+            const loader = override ?? fallback;
+            if (loader) {
+                const generation = ++this.loadGeneration;
+                loader()
+                    .then((component) => {
+                    if (generation !== this.loadGeneration)
+                        return;
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- loader resolves to unknown from registry, safe cast to Type
+                    this.resolvedComponent.set(component);
+                })
+                    .catch((err) => {
+                    if (generation !== this.loadGeneration)
+                        return;
+                    console.error('[AdminPageResolver] Failed to load component:', err);
+                });
+            }
+        });
+    }
+    hasUnsavedChanges() {
+        const instance = this.outlet()?.componentInstance;
+        if (instance == null)
+            return false;
+        // Check if the resolved component implements HasUnsavedChanges
+        if ('hasUnsavedChanges' in instance && typeof instance.hasUnsavedChanges === 'function') {
+            return Boolean(instance.hasUnsavedChanges());
+        }
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminPageResolver, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdminPageResolver, isStandalone: true, selector: "mcms-admin-page-resolver", host: { classAttribute: "block" }, viewQueries: [{ propertyName: "outlet", first: true, predicate: NgComponentOutlet, descendants: true, isSignal: true }], ngImport: i0, template: `
+		@if (resolvedComponent()) {
+			<ng-container *ngComponentOutlet="resolvedComponent()" />
+		} @else {
+			<div role="status" aria-label="Loading page" class="flex h-full items-center justify-center">
+				<div class="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary"></div>
+			</div>
+		}
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminPageResolver, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mcms-admin-page-resolver',
+                    imports: [NgComponentOutlet],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+		@if (resolvedComponent()) {
+			<ng-container *ngComponentOutlet="resolvedComponent()" />
+		} @else {
+			<div role="status" aria-label="Loading page" class="flex h-full items-center justify-center">
+				<div class="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary"></div>
+			</div>
+		}
+	`,
+                }]
+        }], propDecorators: { outlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgComponentOutlet), { isSignal: true }] }] } });
+
+var adminPageResolver_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AdminPageResolver: AdminPageResolver
+});
+
 /* eslint-disable @typescript-eslint/consistent-type-assertions -- Type assertions needed to narrow Field union to TextField/TextareaField after type guard */
 /**
  * Text field renderer for text and textarea field types.
@@ -16003,5 +16676,5 @@ var uploadField_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { adminGuard as $, AdminShellComponent as A, BlockEditDialog as B, CheckboxFieldRenderer as C, DashboardPage as D, EntityFormWidget as E, FieldRenderer as F, MediaLibraryPage as G, MediaPickerDialog as H, MediaPreviewComponent as I, MomentumApiService as J, MomentumAuthService as K, LivePreviewComponent as L, MOMENTUM_API as M, NumberFieldRenderer as N, ResetPasswordPage as O, PublishControlsWidget as P, SKIP_AUTO_TOAST as Q, ResetPasswordFormComponent as R, SHEET_QUERY_PARAMS as S, SelectFieldRenderer as T, SetupPage as U, TextFieldRenderer as V, UploadFieldRenderer as W, UploadService as X, VersionHistoryWidget as Y, VersionService as Z, VisualBlockEditorComponent as _, getFieldNodeState as a, authGuard as a0, collectionAccessGuard as a1, crudToastInterceptor as a2, guestGuard as a3, injectHasAnyRole as a4, injectHasRole as a5, injectIsAdmin as a6, injectIsAuthenticated as a7, injectMomentumAPI as a8, injectTypedMomentumAPI as a9, injectUser as aa, injectUserRole as ab, injectVersionService as ac, momentumAdminRoutes as ad, provideFieldRenderer as ae, provideMomentumAPI as af, provideMomentumFieldRenderers as ag, setupGuard as ah, unsavedChangesGuard as ai, getSubNode as b, getFieldDefaultValue as c, EntitySheetService as d, getTitleField as e, AdminSidebarWidget as f, getGlobalsFromRouteData as g, BlockInserterComponent as h, isRecord as i, BlockWrapperComponent as j, CollectionAccessService as k, CollectionCardWidget as l, CollectionEditPage as m, normalizeBlockDefaults as n, CollectionListPage as o, CollectionViewPage as p, DateFieldRenderer as q, EntityListWidget as r, EntityViewWidget as s, FeedbackService as t, FieldRendererRegistry as u, ForgotPasswordFormComponent as v, ForgotPasswordPage as w, LoginPage as x, MOMENTUM_API_CONTEXT as y, McmsThemeService as z };
-//# sourceMappingURL=momentumcms-admin-momentumcms-admin-BTZEdMNj.mjs.map
+export { UploadService as $, AdminComponentRegistry as A, BlockEditDialog as B, CheckboxFieldRenderer as C, DashboardPage as D, EntityFormWidget as E, FieldRenderer as F, ForgotPasswordPage as G, LoginPage as H, MOMENTUM_API_CONTEXT as I, McmsThemeService as J, MediaLibraryPage as K, LivePreviewComponent as L, MOMENTUM_API as M, MediaPickerDialog as N, MediaPreviewComponent as O, MomentumApiService as P, MomentumAuthService as Q, NumberFieldRenderer as R, PublishControlsWidget as S, ResetPasswordFormComponent as T, ResetPasswordPage as U, SHEET_QUERY_PARAMS as V, SKIP_AUTO_TOAST as W, SelectFieldRenderer as X, SetupPage as Y, TextFieldRenderer as Z, UploadFieldRenderer as _, getFieldNodeState as a, VersionHistoryWidget as a0, VersionService as a1, VisualBlockEditorComponent as a2, adminGuard as a3, authGuard as a4, collectionAccessGuard as a5, crudToastInterceptor as a6, guestGuard as a7, injectHasAnyRole as a8, injectHasRole as a9, injectIsAdmin as aa, injectIsAuthenticated as ab, injectMomentumAPI as ac, injectTypedMomentumAPI as ad, injectUser as ae, injectUserRole as af, injectVersionService as ag, momentumAdminRoutes as ah, provideAdminComponent as ai, provideAdminSlot as aj, provideFieldRenderer as ak, provideMomentumAPI as al, provideMomentumFieldRenderers as am, registerConfigComponents as an, setupGuard as ao, unsavedChangesGuard as ap, getSubNode as b, getFieldDefaultValue as c, EntitySheetService as d, getTitleField as e, AdminPageResolver as f, getGlobalsFromRouteData as g, AdminShellComponent as h, isRecord as i, AdminSidebarWidget as j, AdminSlotOutlet as k, AdminSlotRegistry as l, BlockInserterComponent as m, normalizeBlockDefaults as n, BlockWrapperComponent as o, CollectionAccessService as p, CollectionCardWidget as q, CollectionEditPage as r, CollectionListPage as s, CollectionViewPage as t, DateFieldRenderer as u, EntityListWidget as v, EntityViewWidget as w, FeedbackService as x, FieldRendererRegistry as y, ForgotPasswordFormComponent as z };
+//# sourceMappingURL=momentumcms-admin-momentumcms-admin-DDwm1Rm3.mjs.map