@momentumcms/admin 0.5.0 → 0.5.2

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

@@ -339,10 +339,10 @@ class MomentumAuthService {
             'message' in error.error &&
             typeof error.error.message === 'string');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MomentumAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MomentumAuthService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MomentumAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MomentumAuthService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MomentumAuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MomentumAuthService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -669,10 +669,10 @@ class CollectionAccessService {
     getPermissions(slug) {
         return this._permissions().find((p) => p.slug === slug);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionAccessService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionAccessService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionAccessService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionAccessService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionAccessService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionAccessService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -937,10 +937,10 @@ class FeedbackService {
             icon: config.variant === 'destructive' ? 'danger' : 'question',
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FeedbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FeedbackService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeedbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeedbackService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FeedbackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FeedbackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1134,7 +1134,7 @@ function momentumAdminRoutes(configOrOptions) {
             // Global edit
             {
                 path: 'globals/:slug',
-                loadComponent: () => import('./momentumcms-admin-global-edit.page-D_ebIITz.mjs').then((m) => m.GlobalEditPage),
+                loadComponent: () => import('./momentumcms-admin-global-edit.page-CmLAM17O.mjs').then((m) => m.GlobalEditPage),
                 canDeactivate: [unsavedChangesGuard],
             },
             // Plugin-registered routes
@@ -1412,10 +1412,10 @@ class MomentumApiService {
             .delete(`${this.baseUrl}/${collection}/${id}`)
             .pipe(map((response) => response.deleted ?? false));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MomentumApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MomentumApiService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MomentumApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MomentumApiService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MomentumApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MomentumApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1656,10 +1656,10 @@ class UploadService {
         uploads.set(file, progress);
         this.activeUploadsSignal.set(uploads);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UploadService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UploadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UploadService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UploadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UploadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2520,10 +2520,10 @@ class EntitySheetService {
             return callbackParam;
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EntitySheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EntitySheetService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntitySheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntitySheetService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EntitySheetService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntitySheetService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2712,10 +2712,10 @@ class VersionService {
         }
         return params;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: VersionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: VersionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VersionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VersionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: VersionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VersionService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2882,10 +2882,10 @@ class McmsThemeService {
             mediaQuery.removeEventListener('change', handleChange);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: McmsThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: McmsThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: McmsThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: McmsThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: McmsThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: McmsThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -3552,10 +3552,10 @@ class FieldRendererRegistry {
     has(type) {
         return this.renderers.has(type);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FieldRendererRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FieldRendererRegistry, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldRendererRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldRendererRegistry, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FieldRendererRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldRendererRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3585,12 +3585,18 @@ class FieldRenderer {
     resolvedComponent = signal(null, ...(ngDevMode ? [{ debugName: "resolvedComponent" }] : []));
     /** Error from lazy loading failure */
     loadError = signal(null, ...(ngDevMode ? [{ debugName: "loadError" }] : []));
-    /** Registry key: 'blocks-visual' when blocks field has visual editor, otherwise field.type */
+    /** Registry key: maps field type + editor config to renderer registry keys */
     registryKey = computed(() => {
         const f = this.field();
         if (f.type === 'blocks' && f.admin?.editor === 'visual') {
             return 'blocks-visual';
         }
+        if (f.type === 'json' && f.admin?.editor === 'email-builder') {
+            return 'json-email-builder';
+        }
+        if (f.type === 'json' && f.admin?.editor === 'form-builder') {
+            return 'json-form-builder';
+        }
         return f.type;
     }, ...(ngDevMode ? [{ debugName: "registryKey" }] : []));
     /** Inputs to pass to the dynamically loaded component via NgComponentOutlet */
@@ -3615,8 +3621,8 @@ class FieldRenderer {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: FieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: FieldRenderer, isStandalone: true, selector: "mcms-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, formTree: { classPropertyName: "formTree", publicName: "formTree", isSignal: true, isRequired: false, transformFunction: null }, formModel: { classPropertyName: "formModel", publicName: "formModel", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FieldRenderer, isStandalone: true, selector: "mcms-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, formTree: { classPropertyName: "formTree", publicName: "formTree", isSignal: true, isRequired: false, transformFunction: null }, formModel: { classPropertyName: "formModel", publicName: "formModel", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
 		@if (resolvedComponent()) {
 			<ng-container *ngComponentOutlet="resolvedComponent(); inputs: rendererInputs()" />
 		} @else if (loadError()) {
@@ -3635,7 +3641,7 @@ class FieldRenderer {
 		}
 	`, 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.1.2", ngImport: i0, type: FieldRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FieldRenderer, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-field-renderer',
@@ -3697,8 +3703,8 @@ class VersionDiffDialogComponent {
             return String(value);
         return JSON.stringify(value, null, 2);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: VersionDiffDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: VersionDiffDialogComponent, isStandalone: true, selector: "mcms-version-diff-dialog", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VersionDiffDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: VersionDiffDialogComponent, isStandalone: true, selector: "mcms-version-diff-dialog", ngImport: i0, template: `
 		<mcms-dialog>
 			<mcms-dialog-header>
 				<mcms-dialog-title>Compare Versions</mcms-dialog-title>
@@ -3772,7 +3778,7 @@ class VersionDiffDialogComponent {
 		</mcms-dialog>
 	`, isInline: true, dependencies: [{ kind: "component", type: Dialog, selector: "mcms-dialog", inputs: ["class"] }, { kind: "component", type: DialogHeader, selector: "mcms-dialog-header" }, { kind: "component", type: DialogTitle, selector: "mcms-dialog-title", inputs: ["id"] }, { kind: "component", type: DialogContent, selector: "mcms-dialog-content" }, { kind: "component", type: DialogFooter, selector: "mcms-dialog-footer" }, { kind: "directive", type: DialogClose, selector: "[mcmsDialogClose]", inputs: ["mcmsDialogClose"] }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Badge, selector: "mcms-badge", inputs: ["variant", "class", "role", "ariaLabel"] }, { kind: "component", type: Skeleton, selector: "mcms-skeleton", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: VersionDiffDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VersionDiffDialogComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-version-diff-dialog',
@@ -4012,8 +4018,8 @@ class VersionHistoryWidget {
     getStatusVariant(status) {
         return status === 'published' ? 'default' : 'secondary';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: VersionHistoryWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: VersionHistoryWidget, isStandalone: true, selector: "mcms-version-history", 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 } }, outputs: { restored: "restored" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VersionHistoryWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: VersionHistoryWidget, isStandalone: true, selector: "mcms-version-history", 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 } }, outputs: { restored: "restored" }, host: { classAttribute: "block" }, ngImport: i0, template: `
 		<mcms-card>
 			<mcms-card-header>
 				<div class="flex items-center justify-between">
@@ -4113,7 +4119,7 @@ class VersionHistoryWidget {
 		</mcms-card>
 	`, 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"] }, { kind: "component", type: Skeleton, selector: "mcms-skeleton", inputs: ["class"] }, { kind: "component", type: Card, selector: "mcms-card" }, { kind: "component", type: CardHeader, selector: "mcms-card-header" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: Separator, selector: "mcms-separator", inputs: ["orientation", "decorative", "class"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: VersionHistoryWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VersionHistoryWidget, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-version-history',
@@ -4316,8 +4322,8 @@ class MediaPreviewComponent {
         }
         return heroDocument;
     }, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MediaPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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: `
+    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()"
@@ -4331,7 +4337,7 @@ class MediaPreviewComponent {
 		}
 	`, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MediaPreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaPreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-media-preview',
@@ -4369,7 +4375,6 @@ function getStringProp$1(obj, key) {
         return undefined;
     if (!(key in obj))
         return undefined;
-    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     const value = obj[key]; // eslint-disable-line @typescript-eslint/consistent-type-assertions
     return typeof value === 'string' ? value : undefined;
 }
@@ -4576,8 +4581,8 @@ class CollectionUploadZoneComponent {
     removeFile() {
         this.fileRemoved.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionUploadZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CollectionUploadZoneComponent, isStandalone: true, selector: "mcms-collection-upload-zone", inputs: { uploadConfig: { classPropertyName: "uploadConfig", publicName: "uploadConfig", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, pendingFile: { classPropertyName: "pendingFile", publicName: "pendingFile", isSignal: true, isRequired: false, transformFunction: null }, isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, existingMedia: { classPropertyName: "existingMedia", publicName: "existingMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved" }, host: { classAttribute: "block mb-6" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionUploadZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CollectionUploadZoneComponent, isStandalone: true, selector: "mcms-collection-upload-zone", inputs: { uploadConfig: { classPropertyName: "uploadConfig", publicName: "uploadConfig", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, pendingFile: { classPropertyName: "pendingFile", publicName: "pendingFile", isSignal: true, isRequired: false, transformFunction: null }, isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, existingMedia: { classPropertyName: "existingMedia", publicName: "existingMedia", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileSelected: "fileSelected", fileRemoved: "fileRemoved" }, host: { classAttribute: "block mb-6" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		@if (pendingFile()) {
 			<!-- File selected preview -->
 			<div class="rounded-lg border border-mcms-border bg-mcms-card p-4">
@@ -4700,7 +4705,7 @@ class CollectionUploadZoneComponent {
 		}
 	`, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Progress, selector: "mcms-progress", inputs: ["value", "max", "ariaLabel", "class"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: MediaPreviewComponent, selector: "mcms-media-preview", inputs: ["media", "size", "class", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionUploadZoneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionUploadZoneComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-collection-upload-zone',
@@ -4832,6 +4837,427 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], uploadConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadConfig", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pendingFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingFile", required: false }] }], isUploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isUploading", required: false }] }], uploadProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadProgress", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], existingMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingMedia", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
 
+/**
+ * Normalize a click position within a container to a 0-1 focal point.
+ */
+function normalizeFocalPoint(click, container) {
+    if (container.width <= 0 || container.height <= 0) {
+        return { x: 0.5, y: 0.5 };
+    }
+    return clampFocalPoint({
+        x: click.x / container.width,
+        y: click.y / container.height,
+    });
+}
+/**
+ * Clamp a focal point to the valid 0-1 range on both axes.
+ */
+function clampFocalPoint(point) {
+    return {
+        x: Math.max(0, Math.min(1, point.x)),
+        y: Math.max(0, Math.min(1, point.y)),
+    };
+}
+/**
+ * Convert a normalized focal point to a CSS `object-position` string.
+ *
+ * @example focalPointToCssPosition({ x: 0.25, y: 0.75 }) → '25% 75%'
+ */
+function focalPointToCssPosition(point) {
+    const fp = point ?? { x: 0.5, y: 0.5 };
+    return `${Math.round(fp.x * 100)}% ${Math.round(fp.y * 100)}%`;
+}
+
+/**
+ * Calculate the crop region for a cover-fit preview.
+ * Same math as the server-side crop-calculator, but for browser-side preview.
+ */
+function calculatePreviewCrop(source, target, focalPoint) {
+    const fp = focalPoint ?? { x: 0.5, y: 0.5 };
+    const scale = Math.max(target.width / source.width, target.height / source.height);
+    const cropW = Math.round(target.width / scale);
+    const cropH = Math.round(target.height / scale);
+    const focalX = fp.x * source.width;
+    const focalY = fp.y * source.height;
+    let x = Math.round(focalX - cropW / 2);
+    let y = Math.round(focalY - cropH / 2);
+    x = Math.max(0, Math.min(x, source.width - cropW));
+    y = Math.max(0, Math.min(y, source.height - cropH));
+    return { x, y, width: cropW, height: cropH };
+}
+
+/**
+ * Focal Point Picker Component
+ *
+ * Displays an image with an interactive crosshair overlay.
+ * Click anywhere on the image to set the focal point.
+ * Optionally shows crop preview outlines for configured image sizes.
+ *
+ * @example
+ * ```html
+ * <mcms-focal-point-picker
+ *   [imageUrl]="mediaUrl"
+ *   [focalPoint]="{ x: 0.5, y: 0.5 }"
+ *   [imageSizes]="configuredSizes"
+ *   [naturalWidth]="800"
+ *   [naturalHeight]="600"
+ *   (focalPointChange)="onFocalPointChange($event)"
+ * />
+ * ```
+ */
+class FocalPointPickerComponent {
+    imageElRef = viewChild('imageEl', ...(ngDevMode ? [{ debugName: "imageElRef" }] : []));
+    /** URL of the image to display */
+    imageUrl = input.required(...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
+    /** Current focal point (0-1 normalized) */
+    focalPoint = input({ x: 0.5, y: 0.5 }, ...(ngDevMode ? [{ debugName: "focalPoint" }] : []));
+    /** Alt text for the image */
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : []));
+    /** Natural width of the source image (for crop preview calculations) */
+    naturalWidth = input(0, ...(ngDevMode ? [{ debugName: "naturalWidth" }] : []));
+    /** Natural height of the source image (for crop preview calculations) */
+    naturalHeight = input(0, ...(ngDevMode ? [{ debugName: "naturalHeight" }] : []));
+    /** Configured image sizes for crop preview outlines */
+    imageSizes = input([], ...(ngDevMode ? [{ debugName: "imageSizes" }] : []));
+    /** Emitted when the focal point changes */
+    focalPointChange = output();
+    /** Focal point X as percentage */
+    focalPointX = computed(() => Math.round(this.focalPoint().x * 100), ...(ngDevMode ? [{ debugName: "focalPointX" }] : []));
+    /** Focal point Y as percentage */
+    focalPointY = computed(() => Math.round(this.focalPoint().y * 100), ...(ngDevMode ? [{ debugName: "focalPointY" }] : []));
+    /** CSS object-position string */
+    cssPosition = computed(() => focalPointToCssPosition(this.focalPoint()), ...(ngDevMode ? [{ debugName: "cssPosition" }] : []));
+    /** Human-readable position label */
+    positionLabel = computed(() => {
+        const fp = this.focalPoint();
+        return `${Math.round(fp.x * 100)}% x ${Math.round(fp.y * 100)}%`;
+    }, ...(ngDevMode ? [{ debugName: "positionLabel" }] : []));
+    /** Crop preview data for each configured size */
+    cropPreviews = computed(() => {
+        const w = this.naturalWidth();
+        const h = this.naturalHeight();
+        const fp = this.focalPoint();
+        const sizes = this.imageSizes();
+        if (!w || !h || sizes.length === 0)
+            return [];
+        return sizes
+            .filter((s) => s.width && s.height && s.fit === 'cover')
+            .map((s) => {
+            const crop = calculatePreviewCrop({ width: w, height: h }, { width: s.width ?? 0, height: s.height ?? 0 }, fp);
+            return {
+                name: s.name,
+                leftPct: (crop.x / w) * 100,
+                topPct: (crop.y / h) * 100,
+                widthPct: (crop.width / w) * 100,
+                heightPct: (crop.height / h) * 100,
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "cropPreviews" }] : []));
+    /**
+     * Handle click on the image overlay.
+     */
+    onClick(event) {
+        const el = this.imageElRef();
+        if (!el)
+            return;
+        const rect = el.nativeElement.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            return;
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const fp = normalizeFocalPoint({ x, y }, { width: rect.width, height: rect.height });
+        this.focalPointChange.emit(fp);
+    }
+    /**
+     * Reset focal point to center.
+     */
+    onResetCenter() {
+        this.focalPointChange.emit({ x: 0.5, y: 0.5 });
+    }
+    /**
+     * Nudge focal point by a small amount (keyboard navigation).
+     */
+    onNudge(dx, dy, event) {
+        event.preventDefault();
+        const fp = this.focalPoint();
+        const newFp = {
+            x: Math.max(0, Math.min(1, fp.x + dx)),
+            y: Math.max(0, Math.min(1, fp.y + dy)),
+        };
+        this.focalPointChange.emit(newFp);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FocalPointPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FocalPointPickerComponent, isStandalone: true, selector: "mcms-focal-point-picker", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: true, transformFunction: null }, focalPoint: { classPropertyName: "focalPoint", publicName: "focalPoint", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, naturalWidth: { classPropertyName: "naturalWidth", publicName: "naturalWidth", isSignal: true, isRequired: false, transformFunction: null }, naturalHeight: { classPropertyName: "naturalHeight", publicName: "naturalHeight", isSignal: true, isRequired: false, transformFunction: null }, imageSizes: { classPropertyName: "imageSizes", publicName: "imageSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focalPointChange: "focalPointChange" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "imageElRef", first: true, predicate: ["imageEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<div class="space-y-3">
+			<div class="relative inline-block overflow-hidden rounded-lg border border-mcms-border">
+				<!-- Image -->
+				<img
+					#imageEl
+					[src]="imageUrl()"
+					[alt]="alt() || 'Image with focal point selector'"
+					class="block max-h-96 max-w-full"
+					[style.object-position]="cssPosition()"
+				/>
+
+				<!-- Clickable overlay -->
+				<div
+					class="absolute inset-0 cursor-crosshair"
+					role="button"
+					tabindex="0"
+					[attr.aria-label]="'Set focal point. Current position: ' + positionLabel()"
+					(click)="onClick($event)"
+					(keydown.enter)="onResetCenter()"
+					(keydown.space)="onResetCenter()"
+					(keydown.ArrowLeft)="onNudge(-0.05, 0, $event)"
+					(keydown.ArrowRight)="onNudge(0.05, 0, $event)"
+					(keydown.ArrowUp)="onNudge(0, -0.05, $event)"
+					(keydown.ArrowDown)="onNudge(0, 0.05, $event)"
+				>
+					<!-- Crosshair lines -->
+					<div
+						class="pointer-events-none absolute h-px w-full bg-white/70"
+						[style.top.%]="focalPointY()"
+					></div>
+					<div
+						class="pointer-events-none absolute w-px h-full bg-white/70"
+						[style.left.%]="focalPointX()"
+					></div>
+
+					<!-- Focal point dot -->
+					<div
+						class="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-mcms-primary shadow-md"
+						[style.left.%]="focalPointX()"
+						[style.top.%]="focalPointY()"
+						aria-hidden="true"
+					></div>
+
+					<!-- Crop preview outlines -->
+					@for (preview of cropPreviews(); track preview.name) {
+						<div
+							class="pointer-events-none absolute border border-dashed border-yellow-400/60"
+							[style.left.%]="preview.leftPct"
+							[style.top.%]="preview.topPct"
+							[style.width.%]="preview.widthPct"
+							[style.height.%]="preview.heightPct"
+							[attr.aria-label]="'Crop preview for ' + preview.name"
+						>
+							<span class="absolute -top-5 left-0 text-xs text-yellow-400 drop-shadow-sm">
+								{{ preview.name }}
+							</span>
+						</div>
+					}
+				</div>
+			</div>
+
+			<!-- Coordinates display -->
+			<p class="text-xs text-mcms-muted-foreground" aria-live="polite">
+				Focal point: {{ positionLabel() }}
+				<button
+					class="ml-2 underline hover:text-mcms-foreground"
+					type="button"
+					(click)="onResetCenter()"
+					aria-label="Reset focal point to center"
+				>
+					Reset to center
+				</button>
+			</p>
+		</div>
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FocalPointPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mcms-focal-point-picker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+		<div class="space-y-3">
+			<div class="relative inline-block overflow-hidden rounded-lg border border-mcms-border">
+				<!-- Image -->
+				<img
+					#imageEl
+					[src]="imageUrl()"
+					[alt]="alt() || 'Image with focal point selector'"
+					class="block max-h-96 max-w-full"
+					[style.object-position]="cssPosition()"
+				/>
+
+				<!-- Clickable overlay -->
+				<div
+					class="absolute inset-0 cursor-crosshair"
+					role="button"
+					tabindex="0"
+					[attr.aria-label]="'Set focal point. Current position: ' + positionLabel()"
+					(click)="onClick($event)"
+					(keydown.enter)="onResetCenter()"
+					(keydown.space)="onResetCenter()"
+					(keydown.ArrowLeft)="onNudge(-0.05, 0, $event)"
+					(keydown.ArrowRight)="onNudge(0.05, 0, $event)"
+					(keydown.ArrowUp)="onNudge(0, -0.05, $event)"
+					(keydown.ArrowDown)="onNudge(0, 0.05, $event)"
+				>
+					<!-- Crosshair lines -->
+					<div
+						class="pointer-events-none absolute h-px w-full bg-white/70"
+						[style.top.%]="focalPointY()"
+					></div>
+					<div
+						class="pointer-events-none absolute w-px h-full bg-white/70"
+						[style.left.%]="focalPointX()"
+					></div>
+
+					<!-- Focal point dot -->
+					<div
+						class="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-mcms-primary shadow-md"
+						[style.left.%]="focalPointX()"
+						[style.top.%]="focalPointY()"
+						aria-hidden="true"
+					></div>
+
+					<!-- Crop preview outlines -->
+					@for (preview of cropPreviews(); track preview.name) {
+						<div
+							class="pointer-events-none absolute border border-dashed border-yellow-400/60"
+							[style.left.%]="preview.leftPct"
+							[style.top.%]="preview.topPct"
+							[style.width.%]="preview.widthPct"
+							[style.height.%]="preview.heightPct"
+							[attr.aria-label]="'Crop preview for ' + preview.name"
+						>
+							<span class="absolute -top-5 left-0 text-xs text-yellow-400 drop-shadow-sm">
+								{{ preview.name }}
+							</span>
+						</div>
+					}
+				</div>
+			</div>
+
+			<!-- Coordinates display -->
+			<p class="text-xs text-mcms-muted-foreground" aria-live="polite">
+				Focal point: {{ positionLabel() }}
+				<button
+					class="ml-2 underline hover:text-mcms-foreground"
+					type="button"
+					(click)="onResetCenter()"
+					aria-label="Reset focal point to center"
+				>
+					Reset to center
+				</button>
+			</p>
+		</div>
+	`,
+                }]
+        }], propDecorators: { imageElRef: [{ type: i0.ViewChild, args: ['imageEl', { isSignal: true }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: true }] }], focalPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "focalPoint", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], naturalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalWidth", required: false }] }], naturalHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalHeight", required: false }] }], imageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSizes", required: false }] }], focalPointChange: [{ type: i0.Output, args: ["focalPointChange"] }] } });
+
+/**
+ * Displays generated image size variants as a grid of thumbnail cards.
+ *
+ * @example
+ * ```html
+ * <mcms-image-variants-display [sizes]="entity.sizes" />
+ * ```
+ */
+class ImageVariantsDisplay {
+    /** The sizes record from the media document (e.g., entity['sizes']) */
+    sizes = input(null, ...(ngDevMode ? [{ debugName: "sizes" }] : []));
+    /** Parsed variant entries */
+    variants = computed(() => {
+        const sizes = this.sizes();
+        if (!sizes || typeof sizes !== 'object')
+            return [];
+        return Object.entries(sizes)
+            .filter((entry) => {
+            const v = entry[1];
+            return v != null && typeof v === 'object' && 'width' in v && 'path' in v;
+        })
+            .map(([name, data]) => ({
+            name,
+            ...data,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "variants" }] : []));
+    /** Build URL for a variant image */
+    variantUrl(variant) {
+        if (variant.url)
+            return variant.url;
+        if (variant.path)
+            return `/api/media/file/${variant.path}`;
+        return '';
+    }
+    /** Format file size for display */
+    formatFileSize(bytes) {
+        if (!bytes)
+            return '';
+        if (bytes >= 1024 * 1024)
+            return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+        if (bytes >= 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${bytes} bytes`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageVariantsDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImageVariantsDisplay, isStandalone: true, selector: "mcms-image-variants-display", inputs: { sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+		@if (variants().length > 0) {
+			<div class="space-y-3">
+				<p class="text-sm font-medium">Generated Sizes</p>
+				<div class="grid gap-3 grid-cols-2 sm:grid-cols-3">
+					@for (variant of variants(); track variant.name) {
+						<div class="rounded-lg border border-mcms-border bg-mcms-card overflow-hidden">
+							<img
+								[src]="variantUrl(variant)"
+								[alt]="variant.name + ' variant'"
+								class="h-24 w-full object-cover bg-mcms-muted"
+							/>
+							<div class="p-2">
+								<p class="text-xs font-medium">{{ variant.name }}</p>
+								<p class="text-xs text-mcms-muted-foreground">
+									{{ variant.width }} &times; {{ variant.height }}
+								</p>
+								<p class="text-xs text-mcms-muted-foreground">
+									{{ formatFileSize(variant.filesize) }}
+								</p>
+							</div>
+						</div>
+					}
+				</div>
+			</div>
+		}
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageVariantsDisplay, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mcms-image-variants-display',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+		@if (variants().length > 0) {
+			<div class="space-y-3">
+				<p class="text-sm font-medium">Generated Sizes</p>
+				<div class="grid gap-3 grid-cols-2 sm:grid-cols-3">
+					@for (variant of variants(); track variant.name) {
+						<div class="rounded-lg border border-mcms-border bg-mcms-card overflow-hidden">
+							<img
+								[src]="variantUrl(variant)"
+								[alt]="variant.name + ' variant'"
+								class="h-24 w-full object-cover bg-mcms-muted"
+							/>
+							<div class="p-2">
+								<p class="text-xs font-medium">{{ variant.name }}</p>
+								<p class="text-xs text-mcms-muted-foreground">
+									{{ variant.width }} &times; {{ variant.height }}
+								</p>
+								<p class="text-xs text-mcms-muted-foreground">
+									{{ formatFileSize(variant.filesize) }}
+								</p>
+							</div>
+						</div>
+					}
+				</div>
+			</div>
+		}
+	`,
+                }]
+        }], propDecorators: { sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }] } });
+
 /**
  * Entity Form Widget
  *
@@ -4897,8 +5323,87 @@ class EntityFormWidget {
     isUploadingFile = signal(false, ...(ngDevMode ? [{ debugName: "isUploadingFile" }] : []));
     uploadFileProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadFileProgress" }] : []));
     uploadFileError = signal(null, ...(ngDevMode ? [{ debugName: "uploadFileError" }] : []));
+    /** Preview URL for the pending image file (focal point picker) */
+    pendingFileUrl = signal(null, ...(ngDevMode ? [{ debugName: "pendingFileUrl" }] : []));
+    /** Detected dimensions of the pending image */
+    pendingImageDimensions = signal({
+        width: 0,
+        height: 0,
+    }, ...(ngDevMode ? [{ debugName: "pendingImageDimensions" }] : []));
     /** Whether the collection is an upload collection */
     isUploadCol = computed(() => isUploadCollection(this.collection()), ...(ngDevMode ? [{ debugName: "isUploadCol" }] : []));
+    /** Whether the current file (pending or existing) is an image */
+    isImageFile = computed(() => {
+        const file = this.pendingFile();
+        if (file)
+            return file.type.startsWith('image/');
+        if (this.isUploadCol() && this.mode() !== 'create') {
+            const mimeType = this.formModel()['mimeType'];
+            return typeof mimeType === 'string' && mimeType.startsWith('image/');
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "isImageFile" }] : []));
+    /** Image sizes from collection upload config */
+    uploadImageSizes = computed(() => {
+        return this.collection().upload?.imageSizes ?? [];
+    }, ...(ngDevMode ? [{ debugName: "uploadImageSizes" }] : []));
+    /** Image URL for the focal point picker */
+    focalPointImageUrl = computed(() => {
+        const fileUrl = this.pendingFileUrl();
+        if (fileUrl)
+            return fileUrl;
+        const model = this.formModel();
+        if (typeof model['url'] === 'string' && model['url'])
+            return model['url'];
+        if (typeof model['path'] === 'string' && model['path'])
+            return `/api/media/file/${model['path']}`;
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "focalPointImageUrl" }] : []));
+    /** Current focal point value */
+    currentFocalPoint = computed(() => {
+        const fp = this.formModel()['focalPoint'];
+        if (fp != null && typeof fp === 'object' && !Array.isArray(fp)) {
+            const obj = fp; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+            const x = obj['x'];
+            const y = obj['y'];
+            if (typeof x === 'number' && typeof y === 'number') {
+                return { x, y };
+            }
+        }
+        return { x: 0.5, y: 0.5 };
+    }, ...(ngDevMode ? [{ debugName: "currentFocalPoint" }] : []));
+    /** Natural image dimensions (pending file detection or existing media) */
+    imageNaturalDimensions = computed(() => {
+        if (this.pendingFile())
+            return this.pendingImageDimensions();
+        const model = this.formModel();
+        return {
+            width: typeof model['width'] === 'number' ? model['width'] : 0,
+            height: typeof model['height'] === 'number' ? model['height'] : 0,
+        };
+    }, ...(ngDevMode ? [{ debugName: "imageNaturalDimensions" }] : []));
+    /** Alt text for the focal point picker */
+    focalPointAlt = computed(() => {
+        const model = this.formModel();
+        const alt = model['alt'];
+        if (typeof alt === 'string' && alt)
+            return alt;
+        const fn = model['filename'];
+        if (typeof fn === 'string')
+            return fn;
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "focalPointAlt" }] : []));
+    /** Generated image sizes from the form model */
+    formModelSizes = computed(() => {
+        const sizes = this.formModel()['sizes'];
+        if (sizes != null &&
+            typeof sizes === 'object' &&
+            !Array.isArray(sizes) &&
+            Object.keys(sizes).length > 0) {
+            return sizes; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "formModelSizes" }] : []));
     /** Whether the form has been set up */
     formCreated = false;
     /** Whether the form has unsaved changes (from signal forms dirty tracking) */
@@ -4997,16 +5502,46 @@ class EntityFormWidget {
                     this.loadGlobal(gSlug);
                 }
                 else if (currentMode === 'create' || !id) {
-                    this.formModel.set(createInitialFormData(col));
-                    const ef = this.entityForm();
-                    if (ef)
-                        ef().reset();
+                    // Guard: don't reset formModel if the user has already selected a file.
+                    // On Analog (SSR), reactive route signals may re-emit after hydration,
+                    // causing this effect to re-run and wipe user input.
+                    const hasPendingFile = untracked(() => this.pendingFile());
+                    if (!hasPendingFile) {
+                        this.formModel.set(createInitialFormData(col));
+                        const ef = this.entityForm();
+                        if (ef)
+                            ef().reset();
+                    }
                 }
                 else {
                     this.loadEntity(col.slug, id);
                 }
             }
         });
+        // Manage preview URL for focal point picker and detect image dimensions
+        effect((onCleanup) => {
+            const file = this.pendingFile();
+            if (file && file.type.startsWith('image/')) {
+                const url = URL.createObjectURL(file);
+                this.pendingFileUrl.set(url);
+                let cancelled = false;
+                onCleanup(() => {
+                    cancelled = true;
+                    URL.revokeObjectURL(url);
+                });
+                const img = new Image();
+                img.onload = () => {
+                    if (!cancelled) {
+                        this.pendingImageDimensions.set({ width: img.naturalWidth, height: img.naturalHeight });
+                    }
+                };
+                img.src = url;
+            }
+            else {
+                this.pendingFileUrl.set(null);
+                this.pendingImageDimensions.set({ width: 0, height: 0 });
+            }
+        });
     }
     /**
      * Get a FieldTree node for a top-level field by name.
@@ -5115,6 +5650,14 @@ class EntityFormWidget {
         data['filesize'] = file.size;
         this.formModel.set(data);
     }
+    /**
+     * Handle focal point change from the picker.
+     */
+    onFocalPointChange(fp) {
+        const data = { ...this.formModel() };
+        data['focalPoint'] = fp;
+        this.formModel.set(data);
+    }
     /**
      * Handle file removed from the upload zone.
      */
@@ -5327,8 +5870,8 @@ class EntityFormWidget {
             this.isSavingDraft.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EntityFormWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: EntityFormWidget, isStandalone: true, selector: "mcms-entity-form", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, suppressNavigation: { classPropertyName: "suppressNavigation", publicName: "suppressNavigation", isSignal: true, isRequired: false, transformFunction: null }, isGlobal: { classPropertyName: "isGlobal", publicName: "isGlobal", isSignal: true, isRequired: false, transformFunction: null }, globalSlug: { classPropertyName: "globalSlug", publicName: "globalSlug", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled", saveError: "saveError", modeChange: "modeChange", draftSaved: "draftSaved" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityFormWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EntityFormWidget, isStandalone: true, selector: "mcms-entity-form", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, suppressNavigation: { classPropertyName: "suppressNavigation", publicName: "suppressNavigation", isSignal: true, isRequired: false, transformFunction: null }, isGlobal: { classPropertyName: "isGlobal", publicName: "isGlobal", isSignal: true, isRequired: false, transformFunction: null }, globalSlug: { classPropertyName: "globalSlug", publicName: "globalSlug", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled", saveError: "saveError", modeChange: "modeChange", draftSaved: "draftSaved" }, host: { classAttribute: "block" }, ngImport: i0, template: `
 		<div class="max-w-3xl">
 			@if (showBreadcrumbs()) {
 				<mcms-breadcrumbs class="mb-6">
@@ -5390,7 +5933,7 @@ class EntityFormWidget {
 							<mcms-collection-upload-zone
 								[uploadConfig]="collection().upload"
 								[pendingFile]="pendingFile()"
-								[existingMedia]="mode() === 'edit' && !pendingFile() ? formModel() : null"
+								[existingMedia]="mode() !== 'create' && !pendingFile() ? formModel() : null"
 								[disabled]="mode() === 'view'"
 								[isUploading]="isUploadingFile()"
 								[uploadProgress]="uploadFileProgress()"
@@ -5400,6 +5943,27 @@ class EntityFormWidget {
 							/>
 						}
 
+						@if (isUploadCol() && isImageFile() && focalPointImageUrl()) {
+							<div class="mb-6" [class.pointer-events-none]="mode() === 'view'">
+								<p class="mb-2 text-sm font-medium">Focal Point</p>
+								<mcms-focal-point-picker
+									[imageUrl]="focalPointImageUrl()"
+									[focalPoint]="currentFocalPoint()"
+									[naturalWidth]="imageNaturalDimensions().width"
+									[naturalHeight]="imageNaturalDimensions().height"
+									[alt]="focalPointAlt()"
+									[imageSizes]="uploadImageSizes()"
+									(focalPointChange)="onFocalPointChange($event)"
+								/>
+							</div>
+						}
+
+						@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
@@ -5468,9 +6032,9 @@ class EntityFormWidget {
 				</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"] }], 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: 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.1.2", ngImport: i0, type: EntityFormWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityFormWidget, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-entity-form',
@@ -5487,6 +6051,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         BreadcrumbSeparator,
                         VersionHistoryWidget,
                         CollectionUploadZoneComponent,
+                        FocalPointPickerComponent,
+                        ImageVariantsDisplay,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
@@ -5552,7 +6118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 							<mcms-collection-upload-zone
 								[uploadConfig]="collection().upload"
 								[pendingFile]="pendingFile()"
-								[existingMedia]="mode() === 'edit' && !pendingFile() ? formModel() : null"
+								[existingMedia]="mode() !== 'create' && !pendingFile() ? formModel() : null"
 								[disabled]="mode() === 'view'"
 								[isUploading]="isUploadingFile()"
 								[uploadProgress]="uploadFileProgress()"
@@ -5562,6 +6128,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 							/>
 						}
 
+						@if (isUploadCol() && isImageFile() && focalPointImageUrl()) {
+							<div class="mb-6" [class.pointer-events-none]="mode() === 'view'">
+								<p class="mb-2 text-sm font-medium">Focal Point</p>
+								<mcms-focal-point-picker
+									[imageUrl]="focalPointImageUrl()"
+									[focalPoint]="currentFocalPoint()"
+									[naturalWidth]="imageNaturalDimensions().width"
+									[naturalHeight]="imageNaturalDimensions().height"
+									[alt]="focalPointAlt()"
+									[imageSizes]="uploadImageSizes()"
+									(focalPointChange)="onFocalPointChange($event)"
+								/>
+							</div>
+						}
+
+						@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
@@ -5748,8 +6335,8 @@ class PublishControlsWidget {
             this.isUpdating.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: PublishControlsWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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: `
+    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>
@@ -5785,7 +6372,7 @@ class PublishControlsWidget {
 		}
 	`, 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.1.2", ngImport: i0, type: PublishControlsWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: PublishControlsWidget, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-publish-controls',
@@ -5940,6 +6527,81 @@ class EntityViewWidget {
     canDelete = computed(() => {
         return this.collectionAccess.canDelete(this.collection().slug);
     }, ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    /** Whether this collection is an upload collection */
+    isUploadCol = computed(() => isUploadCollection(this.collection()), ...(ngDevMode ? [{ debugName: "isUploadCol" }] : []));
+    /** Whether the entity is an image */
+    isEntityImage = computed(() => {
+        const e = this.entity();
+        if (!e)
+            return false;
+        const mimeType = e['mimeType'];
+        return typeof mimeType === 'string' && mimeType.startsWith('image/');
+    }, ...(ngDevMode ? [{ debugName: "isEntityImage" }] : []));
+    /** Media URL for preview */
+    entityMediaUrl = computed(() => {
+        const e = this.entity();
+        if (!e)
+            return '';
+        if (typeof e['url'] === 'string' && e['url'])
+            return e['url'];
+        if (typeof e['path'] === 'string' && e['path'])
+            return `/api/media/file/${e['path']}`;
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "entityMediaUrl" }] : []));
+    /** Focal point from entity data */
+    entityFocalPoint = computed(() => {
+        const e = this.entity();
+        if (!e)
+            return { x: 0.5, y: 0.5 };
+        const fp = e['focalPoint'];
+        if (fp != null && typeof fp === 'object' && !Array.isArray(fp)) {
+            const obj = fp; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+            const x = obj['x'];
+            const y = obj['y'];
+            if (typeof x === 'number' && typeof y === 'number')
+                return { x, y };
+        }
+        return { x: 0.5, y: 0.5 };
+    }, ...(ngDevMode ? [{ debugName: "entityFocalPoint" }] : []));
+    /** Image dimensions from entity data */
+    entityDimensions = computed(() => {
+        const e = this.entity();
+        return {
+            width: typeof e?.['width'] === 'number' ? e['width'] : 0,
+            height: typeof e?.['height'] === 'number' ? e['height'] : 0,
+        };
+    }, ...(ngDevMode ? [{ debugName: "entityDimensions" }] : []));
+    /** Image sizes from collection upload config */
+    viewImageSizes = computed(() => {
+        return this.collection().upload?.imageSizes ?? [];
+    }, ...(ngDevMode ? [{ debugName: "viewImageSizes" }] : []));
+    /** Generated image sizes from entity data */
+    entitySizes = computed(() => {
+        const e = this.entity();
+        if (!e)
+            return null;
+        const sizes = e['sizes'];
+        if (sizes != null &&
+            typeof sizes === 'object' &&
+            !Array.isArray(sizes) &&
+            Object.keys(sizes).length > 0) {
+            return sizes; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "entitySizes" }] : []));
+    /** Media preview data for non-image files */
+    entityMediaPreview = computed(() => {
+        const e = this.entity();
+        if (!e)
+            return null;
+        return {
+            url: typeof e['url'] === 'string' ? e['url'] : undefined,
+            path: typeof e['path'] === 'string' ? e['path'] : undefined,
+            mimeType: typeof e['mimeType'] === 'string' ? e['mimeType'] : undefined,
+            filename: typeof e['filename'] === 'string' ? e['filename'] : undefined,
+            alt: typeof e['alt'] === 'string' ? e['alt'] : undefined,
+        };
+    }, ...(ngDevMode ? [{ debugName: "entityMediaPreview" }] : []));
     /** Whether collection has soft delete enabled */
     hasSoftDelete = computed(() => !!this.collection().softDelete, ...(ngDevMode ? [{ debugName: "hasSoftDelete" }] : []));
     /** Whether the current entity is soft-deleted */
@@ -6294,8 +6956,8 @@ class EntityViewWidget {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EntityViewWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: EntityViewWidget, isStandalone: true, selector: "mcms-entity-view", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: true, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, fieldConfigs: { classPropertyName: "fieldConfigs", publicName: "fieldConfigs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showVersionHistory: { classPropertyName: "showVersionHistory", publicName: "showVersionHistory", isSignal: true, isRequired: false, transformFunction: null }, suppressNavigation: { classPropertyName: "suppressNavigation", publicName: "suppressNavigation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", statusChanged: "statusChanged", delete_: "delete_", actionClick: "actionClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityViewWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EntityViewWidget, isStandalone: true, selector: "mcms-entity-view", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: true, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, showBreadcrumbs: { classPropertyName: "showBreadcrumbs", publicName: "showBreadcrumbs", isSignal: true, isRequired: false, transformFunction: null }, fieldConfigs: { classPropertyName: "fieldConfigs", publicName: "fieldConfigs", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showVersionHistory: { classPropertyName: "showVersionHistory", publicName: "showVersionHistory", isSignal: true, isRequired: false, transformFunction: null }, suppressNavigation: { classPropertyName: "suppressNavigation", publicName: "suppressNavigation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", statusChanged: "statusChanged", delete_: "delete_", actionClick: "actionClick" }, host: { classAttribute: "block" }, ngImport: i0, template: `
 		<div class="max-w-4xl">
 			@if (showBreadcrumbs()) {
 				<mcms-breadcrumbs class="mb-6">
@@ -6395,6 +7057,28 @@ class EntityViewWidget {
 							{{ loadError() }}
 						</mcms-alert>
 					} @else if (entity()) {
+						@if (isUploadCol() && entityMediaUrl()) {
+							<div class="mb-6">
+								@if (isEntityImage()) {
+									<div class="pointer-events-none">
+										<mcms-focal-point-picker
+											[imageUrl]="entityMediaUrl()"
+											[focalPoint]="entityFocalPoint()"
+											[naturalWidth]="entityDimensions().width"
+											[naturalHeight]="entityDimensions().height"
+											[imageSizes]="viewImageSizes()"
+										/>
+									</div>
+								} @else {
+									<mcms-media-preview [media]="entityMediaPreview()" size="xl" />
+								}
+							</div>
+						}
+						@if (isUploadCol() && entitySizes()) {
+							<div class="mb-6">
+								<mcms-image-variants-display [sizes]="entitySizes()" />
+							</div>
+						}
 						<div class="grid gap-6 md:grid-cols-2">
 							@for (field of visibleFields(); track field.name) {
 								<mcms-field-display
@@ -6443,9 +7127,9 @@ class EntityViewWidget {
 				</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: Alert, selector: "mcms-alert", inputs: ["variant", "class"] }, { kind: "component", type: Skeleton, selector: "mcms-skeleton", inputs: ["class"] }, { kind: "component", type: FieldDisplay, selector: "mcms-field-display", inputs: ["value", "type", "label", "format", "emptyText", "badgeConfig", "openInNewTab", "maxItems", "class", "fieldMeta", "numberFormat", "dateFormat"] }, { 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"] }], 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: Alert, selector: "mcms-alert", inputs: ["variant", "class"] }, { kind: "component", type: Skeleton, selector: "mcms-skeleton", inputs: ["class"] }, { kind: "component", type: FieldDisplay, selector: "mcms-field-display", inputs: ["value", "type", "label", "format", "emptyText", "badgeConfig", "openInNewTab", "maxItems", "class", "fieldMeta", "numberFormat", "dateFormat"] }, { 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: MediaPreviewComponent, selector: "mcms-media-preview", inputs: ["media", "size", "class", "rounded"] }, { 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.1.2", ngImport: i0, type: EntityViewWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityViewWidget, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-entity-view',
@@ -6462,6 +7146,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         BreadcrumbSeparator,
                         VersionHistoryWidget,
                         PublishControlsWidget,
+                        MediaPreviewComponent,
+                        FocalPointPickerComponent,
+                        ImageVariantsDisplay,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
@@ -6565,6 +7252,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 							{{ loadError() }}
 						</mcms-alert>
 					} @else if (entity()) {
+						@if (isUploadCol() && entityMediaUrl()) {
+							<div class="mb-6">
+								@if (isEntityImage()) {
+									<div class="pointer-events-none">
+										<mcms-focal-point-picker
+											[imageUrl]="entityMediaUrl()"
+											[focalPoint]="entityFocalPoint()"
+											[naturalWidth]="entityDimensions().width"
+											[naturalHeight]="entityDimensions().height"
+											[imageSizes]="viewImageSizes()"
+										/>
+									</div>
+								} @else {
+									<mcms-media-preview [media]="entityMediaPreview()" size="xl" />
+								}
+							</div>
+						}
+						@if (isUploadCol() && entitySizes()) {
+							<div class="mb-6">
+								<mcms-image-variants-display [sizes]="entitySizes()" />
+							</div>
+						}
 						<div class="grid gap-6 md:grid-cols-2">
 							@for (field of visibleFields(); track field.name) {
 								<mcms-field-display
@@ -6711,8 +7420,8 @@ class EntitySheetContentComponent {
             queryParamsHandling: 'merge',
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EntitySheetContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: EntitySheetContentComponent, isStandalone: true, selector: "mcms-entity-sheet-content", host: { classAttribute: "flex flex-col h-full" }, providers: [provideIcons({ heroXMark })], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntitySheetContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: EntitySheetContentComponent, isStandalone: true, selector: "mcms-entity-sheet-content", host: { classAttribute: "flex flex-col h-full" }, providers: [provideIcons({ heroXMark })], ngImport: i0, template: `
 		<!-- Header -->
 		<header
 			class="flex items-center justify-between gap-4 border-b border-border bg-card px-6 py-4 shrink-0"
@@ -6757,7 +7466,7 @@ class EntitySheetContentComponent {
 		</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: EntityViewWidget, selector: "mcms-entity-view", inputs: ["collection", "entityId", "basePath", "showBreadcrumbs", "fieldConfigs", "actions", "showVersionHistory", "suppressNavigation"], outputs: ["edit", "statusChanged", "delete_", "actionClick"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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.1.2", ngImport: i0, type: EntitySheetContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntitySheetContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-entity-sheet-content',
@@ -6994,8 +7703,8 @@ class AdminSidebarWidget {
     onSignOutClick() {
         this.signOut.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AdminSidebarWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AdminSidebarWidget, isStandalone: true, selector: "mcms-admin-sidebar", inputs: { branding: { classPropertyName: "branding", publicName: "branding", isSignal: true, isRequired: false, transformFunction: null }, collections: { classPropertyName: "collections", publicName: "collections", isSignal: true, isRequired: false, transformFunction: null }, globals: { classPropertyName: "globals", publicName: "globals", isSignal: true, isRequired: false, transformFunction: null }, pluginRoutes: { classPropertyName: "pluginRoutes", publicName: "pluginRoutes", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signOut: "signOut" }, host: { classAttribute: "shrink-0" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminSidebarWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdminSidebarWidget, isStandalone: true, selector: "mcms-admin-sidebar", inputs: { branding: { classPropertyName: "branding", publicName: "branding", isSignal: true, isRequired: false, transformFunction: null }, collections: { classPropertyName: "collections", publicName: "collections", isSignal: true, isRequired: false, transformFunction: null }, globals: { classPropertyName: "globals", publicName: "globals", isSignal: true, isRequired: false, transformFunction: null }, pluginRoutes: { classPropertyName: "pluginRoutes", publicName: "pluginRoutes", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signOut: "signOut" }, host: { classAttribute: "shrink-0" }, providers: [
             provideIcons({
                 heroSquares2x2,
                 heroNewspaper,
@@ -7147,7 +7856,7 @@ class AdminSidebarWidget {
 		</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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AdminSidebarWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminSidebarWidget, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-admin-sidebar',
@@ -7437,8 +8146,8 @@ class AdminShellComponent {
         await this.auth.signOut();
         await this.router.navigate(['/admin/login']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AdminShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: AdminShellComponent, isStandalone: true, selector: "mcms-admin-shell", host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, classAttribute: "flex h-screen overflow-hidden bg-background" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: AdminShellComponent, isStandalone: true, selector: "mcms-admin-shell", host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, classAttribute: "flex h-screen overflow-hidden bg-background" }, ngImport: i0, template: `
 		<!-- Skip navigation link for keyboard users -->
 		<a
 			href="#mcms-main-content"
@@ -7468,7 +8177,7 @@ 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">
 			@defer (hydrate on immediate) {
-				<router-outlet></router-outlet>
+				<router-outlet />
 			}
 		</main>
 
@@ -7506,7 +8215,7 @@ class AdminShellComponent {
 		}
 	`, 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]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: AdminShellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AdminShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mcms-admin-shell', imports: [
                         RouterOutlet,
@@ -7548,7 +8257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", 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">
 			@defer (hydrate on immediate) {
-				<router-outlet></router-outlet>
+				<router-outlet />
 			}
 		</main>
 
@@ -7668,8 +8377,8 @@ class ForgotPasswordFormComponent {
     onBackToLogin() {
         this.backToLogin.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ForgotPasswordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ForgotPasswordFormComponent, isStandalone: true, selector: "mcms-forgot-password-form", outputs: { resetRequested: "resetRequested", backToLogin: "backToLogin" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ForgotPasswordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ForgotPasswordFormComponent, isStandalone: true, selector: "mcms-forgot-password-form", outputs: { resetRequested: "resetRequested", backToLogin: "backToLogin" }, ngImport: i0, template: `
 		<form (submit)="onSubmit($event)" class="space-y-4">
 			@if (submitted() && !error()) {
 				<div
@@ -7733,12 +8442,12 @@ class ForgotPasswordFormComponent {
 								r="10"
 								stroke="currentColor"
 								stroke-width="4"
-							></circle>
+							/>
 							<path
 								class="opacity-75"
 								fill="currentColor"
 								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-							></path>
+							/>
 						</svg>
 						Sending...
 					} @else {
@@ -7759,7 +8468,7 @@ class ForgotPasswordFormComponent {
 		</form>
 	`, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ForgotPasswordFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ForgotPasswordFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-forgot-password-form',
@@ -7829,12 +8538,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 								r="10"
 								stroke="currentColor"
 								stroke-width="4"
-							></circle>
+							/>
 							<path
 								class="opacity-75"
 								fill="currentColor"
 								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-							></path>
+							/>
 						</svg>
 						Sending...
 					} @else {
@@ -7962,8 +8671,8 @@ class ResetPasswordFormComponent {
     onGoToForgotPassword() {
         this.goToForgotPassword.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ResetPasswordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ResetPasswordFormComponent, isStandalone: true, selector: "mcms-reset-password-form", inputs: { token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetComplete: "resetComplete", resetFailed: "resetFailed", goToLogin: "goToLogin", goToForgotPassword: "goToForgotPassword" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ResetPasswordFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ResetPasswordFormComponent, isStandalone: true, selector: "mcms-reset-password-form", inputs: { token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resetComplete: "resetComplete", resetFailed: "resetFailed", goToLogin: "goToLogin", goToForgotPassword: "goToForgotPassword" }, ngImport: i0, template: `
 		<form (submit)="onSubmit($event)" class="space-y-4">
 			@if (resetSuccess()) {
 				<div
@@ -8053,12 +8762,12 @@ class ResetPasswordFormComponent {
 									r="10"
 									stroke="currentColor"
 									stroke-width="4"
-								></circle>
+								/>
 								<path
 									class="opacity-75"
 									fill="currentColor"
 									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-								></path>
+								/>
 							</svg>
 							Resetting...
 						} @else {
@@ -8070,7 +8779,7 @@ class ResetPasswordFormComponent {
 		</form>
 	`, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ResetPasswordFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ResetPasswordFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-reset-password-form',
@@ -8166,12 +8875,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 									r="10"
 									stroke="currentColor"
 									stroke-width="4"
-								></circle>
+								/>
 								<path
 									class="opacity-75"
 									fill="currentColor"
 									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-								></path>
+								/>
 							</svg>
 							Resetting...
 						} @else {
@@ -8266,8 +8975,8 @@ class CollectionCardWidget {
             this.loading.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionCardWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CollectionCardWidget, isStandalone: true, selector: "mcms-collection-card", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, showDocumentCount: { classPropertyName: "showDocumentCount", publicName: "showDocumentCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewAll: "viewAll" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionCardWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CollectionCardWidget, isStandalone: true, selector: "mcms-collection-card", inputs: { collection: { classPropertyName: "collection", publicName: "collection", isSignal: true, isRequired: true, transformFunction: null }, basePath: { classPropertyName: "basePath", publicName: "basePath", isSignal: true, isRequired: false, transformFunction: null }, showDocumentCount: { classPropertyName: "showDocumentCount", publicName: "showDocumentCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewAll: "viewAll" }, host: { classAttribute: "block" }, ngImport: i0, template: `
 		<mcms-card>
 			<mcms-card-header>
 				<div class="flex items-center justify-between">
@@ -8301,7 +9010,7 @@ class CollectionCardWidget {
 		</mcms-card>
 	`, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Card, selector: "mcms-card" }, { kind: "component", type: CardHeader, selector: "mcms-card-header" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: CardFooter, selector: "mcms-card-footer" }, { 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"] }, { kind: "component", type: Skeleton, selector: "mcms-skeleton", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionCardWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionCardWidget, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-collection-card',
@@ -8370,8 +9079,8 @@ class DashboardPage {
     }, ...(ngDevMode ? [{ debugName: "collections" }] : []));
     /** Visible collections grouped by admin.group. Named groups first, default last. */
     collectionGroups = computed(() => groupCollections(this.collections()), ...(ngDevMode ? [{ debugName: "collectionGroups" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DashboardPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: DashboardPage, isStandalone: true, selector: "mcms-dashboard", host: { classAttribute: "block max-w-6xl" }, ngImport: i0, template: `
+    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: `
 		<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>
@@ -8423,7 +9132,7 @@ class DashboardPage {
 		}
 	`, isInline: true, dependencies: [{ kind: "component", type: CollectionCardWidget, selector: "mcms-collection-card", inputs: ["collection", "basePath", "showDocumentCount"], outputs: ["viewAll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DashboardPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DashboardPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-dashboard',
@@ -8537,8 +9246,8 @@ class DataPreviewDialog {
     close() {
         this.dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DataPreviewDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: DataPreviewDialog, isStandalone: true, selector: "mcms-data-preview-dialog", host: { styleAttribute: "display: block; width: 100%" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataPreviewDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: DataPreviewDialog, isStandalone: true, selector: "mcms-data-preview-dialog", host: { styleAttribute: "display: block; width: 100%" }, ngImport: i0, template: `
 		<mcms-dialog>
 			<mcms-dialog-header>
 				<mcms-dialog-title>{{ data.title }}</mcms-dialog-title>
@@ -8561,7 +9270,7 @@ class DataPreviewDialog {
 		</mcms-dialog>
 	`, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Dialog, selector: "mcms-dialog", inputs: ["class"] }, { kind: "component", type: DialogHeader, selector: "mcms-dialog-header" }, { kind: "component", type: DialogTitle, selector: "mcms-dialog-title", inputs: ["id"] }, { kind: "component", type: DialogContent, selector: "mcms-dialog-content" }, { kind: "component", type: DialogFooter, selector: "mcms-dialog-footer" }, { kind: "directive", type: DialogClose, selector: "[mcmsDialogClose]", inputs: ["mcmsDialogClose"] }, { kind: "component", type: FieldDisplay, selector: "mcms-field-display", inputs: ["value", "type", "label", "format", "emptyText", "badgeConfig", "openInNewTab", "maxItems", "class", "fieldMeta", "numberFormat", "dateFormat"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DataPreviewDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DataPreviewDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-data-preview-dialog',
@@ -9164,8 +9873,8 @@ class EntityListWidget {
         const path = `${this.basePath()}/${this.collection().slug}/new`;
         this.router.navigate([path]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EntityListWidget, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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 ɵ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: `
 		@if (showHeader()) {
 			@if (showBreadcrumbs()) {
 				<mcms-breadcrumbs class="mb-6">
@@ -9281,7 +9990,7 @@ class EntityListWidget {
 		</ng-template>
 	`, isInline: true, dependencies: [{ kind: "component", type: DataTable, selector: "mcms-data-table", inputs: ["data", "columns", "loading", "searchable", "searchPlaceholder", "searchFields", "sortable", "sort", "selectable", "selectedItems", "paginated", "pageSize", "pageSizeOptions", "currentPage", "totalItems", "emptyTitle", "emptyDescription", "clickableRows", "rowActions", "trackByFn", "class", "searchQuery"], outputs: ["sortChange", "selectedItemsChange", "currentPageChange", "searchChange", "selectionChange", "pageChange", "pageSizeChange", "rowClick", "rowAction", "searchQueryChange"] }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Badge, selector: "mcms-badge", inputs: ["variant", "class", "role", "ariaLabel"] }, { 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: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EntityListWidget, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityListWidget, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-entity-list',
@@ -9474,8 +10183,8 @@ class GenerateApiKeyDialog {
             // Clipboard API not available, user can manually copy
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GenerateApiKeyDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: GenerateApiKeyDialog, isStandalone: true, selector: "mcms-generate-api-key-dialog", host: { styleAttribute: "display: block; width: 100%" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GenerateApiKeyDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GenerateApiKeyDialog, isStandalone: true, selector: "mcms-generate-api-key-dialog", host: { styleAttribute: "display: block; width: 100%" }, ngImport: i0, template: `
 		<mcms-dialog>
 			<mcms-dialog-header>
 				<mcms-dialog-title>Generate API Key</mcms-dialog-title>
@@ -9588,7 +10297,7 @@ class GenerateApiKeyDialog {
 		</mcms-dialog>
 	`, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Dialog, selector: "mcms-dialog", inputs: ["class"] }, { kind: "component", type: DialogHeader, selector: "mcms-dialog-header" }, { kind: "component", type: DialogTitle, selector: "mcms-dialog-title", inputs: ["id"] }, { kind: "component", type: DialogContent, selector: "mcms-dialog-content" }, { kind: "component", type: DialogFooter, selector: "mcms-dialog-footer" }, { kind: "directive", type: DialogClose, selector: "[mcmsDialogClose]", inputs: ["mcmsDialogClose"] }, { 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: Label, selector: "mcms-label", inputs: ["for", "required", "disabled", "class"] }, { kind: "component", type: Select, selector: "mcms-select", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "options", "describedBy", "ariaLabel"], outputs: ["valueChange", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: GenerateApiKeyDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GenerateApiKeyDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-generate-api-key-dialog',
@@ -9789,8 +10498,8 @@ class CollectionListPage {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionListPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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: `
+    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-entity-list
 				#entityList
@@ -9808,7 +10517,7 @@ class CollectionListPage {
 		}
 	`, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionListPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionListPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-collection-list',
@@ -9874,8 +10583,8 @@ class CollectionViewPage {
     onDelete(_entity) {
         // Navigation is handled by EntityViewWidget
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionViewPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CollectionViewPage, isStandalone: true, selector: "mcms-collection-view", host: { classAttribute: "block" }, ngImport: i0, template: `
+    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) {
 			@if (entityId(); as id) {
 				<mcms-entity-view
@@ -9893,7 +10602,7 @@ class CollectionViewPage {
 		}
 	`, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionViewPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionViewPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-collection-view',
@@ -9931,8 +10640,9 @@ var collectionView_page = /*#__PURE__*/Object.freeze({
  * Displays an iframe that shows a live preview of the document being edited.
  *
  * Two modes based on preview config type:
- * - `preview: true` (server-rendered HTML): iframe loads API endpoint with scripts enabled
- *   for postMessage live updates.
+ * - `preview: true` (server-rendered HTML): initial GET loads from database, then
+ *   subsequent form changes are POSTed to the same endpoint with the current form data
+ *   for realtime preview updates (no page reload needed).
  * - `preview: string/function` (URL-based): iframe loads the page URL with scripts DISABLED.
  *   This prevents loading a second Angular app instance (with Vite HMR, SSR hydration, etc.)
  *   which causes tab crashes in dev mode. The SSR-rendered HTML displays correctly without JS.
@@ -9960,6 +10670,8 @@ class LivePreviewComponent {
     refreshCounter = signal(0, ...(ngDevMode ? [{ debugName: "refreshCounter" }] : []));
     /** Reference to the static iframe element (available when previewUrl is non-null) */
     previewIframe = viewChild('previewIframe', ...(ngDevMode ? [{ debugName: "previewIframe" }] : []));
+    /** Whether the initial iframe load from GET is complete */
+    initialLoadDone = false;
     /** Compute the raw preview URL */
     previewUrl = computed(() => {
         // Force recomputation on refresh
@@ -10016,8 +10728,10 @@ class LivePreviewComponent {
         // URL-based preview: no scripts to prevent full Angular app from loading
         return 'allow-same-origin allow-popups allow-forms';
     }, ...(ngDevMode ? [{ debugName: "sandboxValue" }] : []));
-    /** Debounce timer for postMessage updates */
+    /** Debounce timer for live preview updates */
     debounceTimer = undefined;
+    /** AbortController for in-flight POST requests */
+    fetchAbort = undefined;
     constructor() {
         // Effect 1: Set iframe src and sandbox when URL or sandbox config changes.
         // Uses untracked() for iframeWidth so device size toggles don't trigger a reload.
@@ -10029,10 +10743,17 @@ class LivePreviewComponent {
             const url = this.previewUrl();
             if (!url)
                 return;
+            this.initialLoadDone = false;
             iframe.setAttribute('sandbox', this.sandboxValue());
             iframe.src = url;
             // Set initial width without tracking the signal
             iframe.style.width = untracked(() => this.iframeWidth());
+            // Mark initial load as done once the iframe finishes loading
+            const onLoad = () => {
+                this.initialLoadDone = true;
+                iframe.removeEventListener('load', onLoad);
+            };
+            iframe.addEventListener('load', onLoad);
         });
         // Effect 2: Update iframe width only (no reload).
         // Changing CSS width on an iframe does not trigger navigation.
@@ -10042,25 +10763,43 @@ class LivePreviewComponent {
                 return;
             iframeRef.nativeElement.style.width = this.iframeWidth();
         });
-        // Send form data to iframe via postMessage whenever data changes.
-        // Only effective for server-rendered previews (preview: true) where
-        // allow-scripts is enabled. URL-based previews have scripts disabled
-        // so the postMessage is a no-op (which is fine).
+        // Effect 3: Live preview updates via POST (for preview: true mode).
+        // When form data changes, POST it to the preview endpoint and write the
+        // response HTML directly to the iframe. This works for all collection types
+        // including email templates where postMessage isn't sufficient.
         effect(() => {
             const data = this.documentData();
-            const iframeRef = this.previewIframe();
-            if (!iframeRef?.nativeElement.contentWindow)
+            const previewConfig = this.preview();
+            // Only use POST-based updates for server-rendered previews (preview: true)
+            if (previewConfig !== true) {
+                // For URL-based previews, use postMessage as before
+                const iframeRef = this.previewIframe();
+                if (!iframeRef?.nativeElement.contentWindow)
+                    return;
+                if (this.debounceTimer) {
+                    clearTimeout(this.debounceTimer);
+                }
+                this.debounceTimer = this.document.defaultView?.setTimeout(() => {
+                    const iframeWindow = iframeRef.nativeElement.contentWindow;
+                    if (iframeWindow) {
+                        const targetOrigin = this.document.defaultView?.location?.origin ?? '';
+                        iframeWindow.postMessage({ type: 'momentum-preview-update', data }, targetOrigin);
+                    }
+                }, 300);
+                return;
+            }
+            // For preview: true, POST form data to the server preview endpoint
+            const url = untracked(() => this.previewUrl());
+            if (!url)
+                return;
+            // Skip the first emission (initial load is handled by iframe src)
+            if (!this.initialLoadDone)
                 return;
-            // Debounce to avoid thrashing
             if (this.debounceTimer) {
                 clearTimeout(this.debounceTimer);
             }
             this.debounceTimer = this.document.defaultView?.setTimeout(() => {
-                const iframeWindow = iframeRef.nativeElement.contentWindow;
-                if (iframeWindow) {
-                    const targetOrigin = this.document.defaultView?.location?.origin ?? '';
-                    iframeWindow.postMessage({ type: 'momentum-preview-update', data }, targetOrigin);
-                }
+                this.fetchPreviewHtml(url, data);
             }, 300);
         });
         // Listen for edit block requests from preview iframe
@@ -10079,20 +10818,62 @@ class LivePreviewComponent {
             win.addEventListener('message', editHandler);
             this.destroyRef.onDestroy(() => win.removeEventListener('message', editHandler));
         }
-        // Clean up debounce timer on destroy
+        // Clean up on destroy
         this.destroyRef.onDestroy(() => {
             if (this.debounceTimer) {
                 clearTimeout(this.debounceTimer);
                 this.debounceTimer = undefined;
             }
+            this.fetchAbort?.abort();
         });
     }
-    /** Force iframe to reload */
+    /** Force iframe to reload from server (GET) */
     refreshPreview() {
         this.refreshCounter.update((c) => c + 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LivePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: LivePreviewComponent, isStandalone: true, selector: "mcms-live-preview", inputs: { preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: true, transformFunction: null }, documentData: { classPropertyName: "documentData", publicName: "documentData", isSignal: true, isRequired: true, transformFunction: null }, collectionSlug: { classPropertyName: "collectionSlug", publicName: "collectionSlug", isSignal: true, isRequired: true, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editBlockRequest: "editBlockRequest" }, host: { classAttribute: "flex flex-col h-full border-l border-border" }, viewQueries: [{ propertyName: "previewIframe", first: true, predicate: ["previewIframe"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    /** POST form data to the preview endpoint and write the HTML response to the iframe. */
+    fetchPreviewHtml(url, data) {
+        // Cancel any in-flight request
+        this.fetchAbort?.abort();
+        this.fetchAbort = new AbortController();
+        const win = this.document.defaultView;
+        if (!win)
+            return;
+        win
+            .fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ data }),
+            credentials: 'include',
+            signal: this.fetchAbort.signal,
+        })
+            .then((response) => {
+            if (!response.ok)
+                return null;
+            return response.text();
+        })
+            .then((html) => {
+            if (!html)
+                return;
+            const iframeRef = this.previewIframe();
+            if (!iframeRef)
+                return;
+            const doc = iframeRef.nativeElement.contentDocument;
+            if (doc) {
+                doc.open();
+                doc.write(html);
+                doc.close();
+            }
+        })
+            .catch((err) => {
+            // Ignore abort errors (expected when a new request supersedes)
+            if (err instanceof DOMException && err.name === 'AbortError')
+                return;
+            console.warn('[momentum:live-preview] Preview fetch failed:', err);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LivePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: LivePreviewComponent, isStandalone: true, selector: "mcms-live-preview", inputs: { preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: true, transformFunction: null }, documentData: { classPropertyName: "documentData", publicName: "documentData", isSignal: true, isRequired: true, transformFunction: null }, collectionSlug: { classPropertyName: "collectionSlug", publicName: "collectionSlug", isSignal: true, isRequired: true, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editBlockRequest: "editBlockRequest" }, host: { classAttribute: "flex flex-col h-full border-l border-border" }, viewQueries: [{ propertyName: "previewIframe", first: true, predicate: ["previewIframe"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<!-- Preview toolbar -->
 		<div class="flex items-center gap-2 px-4 py-2 border-b border-border bg-muted/50">
 			<span class="text-sm font-medium text-foreground">Preview</span>
@@ -10177,7 +10958,7 @@ class LivePreviewComponent {
 		</div>
 	`, isInline: true, dependencies: [{ 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.1.2", ngImport: i0, type: LivePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LivePreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-live-preview',
@@ -10290,15 +11071,15 @@ class BlockEditDialog {
     getFieldPath(fieldName) {
         return `${this.data.path}.${this.data.blockIndex}.${fieldName}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BlockEditDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: BlockEditDialog, isStandalone: true, selector: "mcms-block-edit-dialog", host: { styleAttribute: "display: block; width: 100%" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BlockEditDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BlockEditDialog, isStandalone: true, selector: "mcms-block-edit-dialog", host: { styleAttribute: "display: block; width: 100%" }, ngImport: i0, template: `
 		<mcms-dialog>
 			<mcms-dialog-header>
 				<mcms-dialog-title>Edit {{ blockLabel }}</mcms-dialog-title>
 			</mcms-dialog-header>
 
 			<mcms-dialog-content>
-				<div class="space-y-4 max-h-[60vh] overflow-y-auto py-1">
+				<div class="space-y-4 max-h-[60vh] overflow-y-auto p-1">
 					@for (field of visibleFields; track field.name) {
 						<mcms-field-renderer
 							[field]="field"
@@ -10318,7 +11099,7 @@ class BlockEditDialog {
 		</mcms-dialog>
 	`, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Dialog, selector: "mcms-dialog", inputs: ["class"] }, { kind: "component", type: DialogHeader, selector: "mcms-dialog-header" }, { kind: "component", type: DialogTitle, selector: "mcms-dialog-title", inputs: ["id"] }, { kind: "component", type: DialogContent, selector: "mcms-dialog-content" }, { kind: "component", type: DialogFooter, selector: "mcms-dialog-footer" }, { kind: "directive", type: DialogClose, selector: "[mcmsDialogClose]", inputs: ["mcmsDialogClose"] }, { kind: "component", type: FieldRenderer, selector: "mcms-field-renderer", inputs: ["field", "formNode", "formTree", "formModel", "mode", "path"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BlockEditDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BlockEditDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-block-edit-dialog',
@@ -10341,7 +11122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 			</mcms-dialog-header>
 
 			<mcms-dialog-content>
-				<div class="space-y-4 max-h-[60vh] overflow-y-auto py-1">
+				<div class="space-y-4 max-h-[60vh] overflow-y-auto p-1">
 					@for (field of visibleFields; track field.name) {
 						<mcms-field-renderer
 							[field]="field"
@@ -10452,8 +11233,8 @@ class CollectionEditPage {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionEditPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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: `
+    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) {
 			@if (previewConfig(); as preview) {
 				@if (showPreview()) {
@@ -10527,7 +11308,7 @@ class CollectionEditPage {
 		}
 	`, 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionEditPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CollectionEditPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-collection-edit',
@@ -10692,8 +11473,8 @@ class LoginPage {
             this.isSubmitting.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LoginPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", 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: `
+    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-card class="w-full max-w-md">
 				<mcms-card-header class="text-center">
@@ -10835,7 +11616,7 @@ class LoginPage {
 		</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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: LoginPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: LoginPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-login-page',
@@ -11113,8 +11894,8 @@ class SetupPage {
             this.isSubmitting.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SetupPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: SetupPage, isStandalone: true, selector: "mcms-setup-page", host: { classAttribute: "flex min-h-screen items-center justify-center bg-background p-4" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SetupPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SetupPage, isStandalone: true, selector: "mcms-setup-page", host: { classAttribute: "flex min-h-screen items-center justify-center bg-background p-4" }, ngImport: i0, template: `
 		<main>
 			<mcms-card class="w-full max-w-md">
 				<mcms-card-header class="text-center">
@@ -11213,7 +11994,7 @@ class SetupPage {
 		</main>
 	`, isInline: true, dependencies: [{ 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SetupPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SetupPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-setup-page',
@@ -11375,14 +12156,27 @@ class MediaEditDialog {
     data = inject(DIALOG_DATA);
     api = injectMomentumAPI();
     media = this.data.media;
+    imageSizes = this.data.imageSizes ?? [];
     filename = signal(this.data.media.filename, ...(ngDevMode ? [{ debugName: "filename" }] : []));
     altText = signal(this.data.media.alt ?? '', ...(ngDevMode ? [{ debugName: "altText" }] : []));
+    focalPointValue = signal(this.data.media.focalPoint ?? { x: 0.5, y: 0.5 }, ...(ngDevMode ? [{ debugName: "focalPointValue" }] : []));
     isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
     saveError = signal(null, ...(ngDevMode ? [{ debugName: "saveError" }] : []));
     formattedSize = formatFileSize(this.data.media.filesize);
+    isImage = computed(() => this.media.mimeType.startsWith('image/'), ...(ngDevMode ? [{ debugName: "isImage" }] : []));
+    imageUrl = computed(() => {
+        return this.media.url ?? `/api/media/file/${this.media.path}`;
+    }, ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
     hasChanges = computed(() => {
-        return this.filename() !== this.media.filename || this.altText() !== (this.media.alt ?? '');
+        const fpChanged = this.focalPointValue().x !== (this.media.focalPoint?.x ?? 0.5) ||
+            this.focalPointValue().y !== (this.media.focalPoint?.y ?? 0.5);
+        return (this.filename() !== this.media.filename ||
+            this.altText() !== (this.media.alt ?? '') ||
+            fpChanged);
     }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
+    onFocalPointChange(fp) {
+        this.focalPointValue.set(fp);
+    }
     /**
      * Save media metadata changes via API.
      */
@@ -11390,10 +12184,14 @@ class MediaEditDialog {
         this.isSaving.set(true);
         this.saveError.set(null);
         try {
-            const result = await this.api.collection('media').update(this.media.id, {
+            const updateData = {
                 filename: this.filename(),
                 alt: this.altText(),
-            });
+            };
+            if (this.isImage()) {
+                updateData['focalPoint'] = this.focalPointValue();
+            }
+            const result = await this.api.collection('media').update(this.media.id, updateData);
             if (isMediaEditItem(result)) {
                 this.dialogRef.close({ updated: true, media: result });
             }
@@ -11408,8 +12206,8 @@ class MediaEditDialog {
             this.isSaving.set(false);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MediaEditDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: MediaEditDialog, isStandalone: true, selector: "mcms-media-edit-dialog", host: { styleAttribute: "display: block; width: 100%" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaEditDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MediaEditDialog, isStandalone: true, selector: "mcms-media-edit-dialog", host: { styleAttribute: "display: block; width: 100%" }, ngImport: i0, template: `
 		<mcms-dialog>
 			<mcms-dialog-header>
 				<mcms-dialog-title>Edit Media</mcms-dialog-title>
@@ -11450,6 +12248,21 @@ class MediaEditDialog {
 					</div>
 				</div>
 
+				@if (isImage()) {
+					<div class="mt-4">
+						<p class="mb-2 text-sm font-medium">Focal Point</p>
+						<mcms-focal-point-picker
+							[imageUrl]="imageUrl()"
+							[focalPoint]="focalPointValue()"
+							[naturalWidth]="media.width ?? 0"
+							[naturalHeight]="media.height ?? 0"
+							[alt]="media.alt ?? media.filename"
+							[imageSizes]="imageSizes"
+							(focalPointChange)="onFocalPointChange($event)"
+						/>
+					</div>
+				}
+
 				@if (saveError()) {
 					<mcms-alert variant="destructive" class="mt-4">
 						{{ saveError() }}
@@ -11467,9 +12280,9 @@ class MediaEditDialog {
 				</button>
 			</mcms-dialog-footer>
 		</mcms-dialog>
-	`, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Dialog, selector: "mcms-dialog", inputs: ["class"] }, { kind: "component", type: DialogHeader, selector: "mcms-dialog-header" }, { kind: "component", type: DialogTitle, selector: "mcms-dialog-title", inputs: ["id"] }, { kind: "component", type: DialogContent, selector: "mcms-dialog-content" }, { kind: "component", type: DialogFooter, selector: "mcms-dialog-footer" }, { kind: "directive", type: DialogClose, selector: "[mcmsDialogClose]", inputs: ["mcmsDialogClose"] }, { 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: Textarea, selector: "mcms-textarea", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "rows", "ariaLabel", "describedBy"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Label, selector: "mcms-label", inputs: ["for", "required", "disabled", "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: MediaPreviewComponent, selector: "mcms-media-preview", inputs: ["media", "size", "class", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Dialog, selector: "mcms-dialog", inputs: ["class"] }, { kind: "component", type: DialogHeader, selector: "mcms-dialog-header" }, { kind: "component", type: DialogTitle, selector: "mcms-dialog-title", inputs: ["id"] }, { kind: "component", type: DialogContent, selector: "mcms-dialog-content" }, { kind: "component", type: DialogFooter, selector: "mcms-dialog-footer" }, { kind: "directive", type: DialogClose, selector: "[mcmsDialogClose]", inputs: ["mcmsDialogClose"] }, { 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: Textarea, selector: "mcms-textarea", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "rows", "ariaLabel", "describedBy"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Label, selector: "mcms-label", inputs: ["for", "required", "disabled", "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: MediaPreviewComponent, selector: "mcms-media-preview", inputs: ["media", "size", "class", "rounded"] }, { kind: "component", type: FocalPointPickerComponent, selector: "mcms-focal-point-picker", inputs: ["imageUrl", "focalPoint", "alt", "naturalWidth", "naturalHeight", "imageSizes"], outputs: ["focalPointChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MediaEditDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaEditDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-media-edit-dialog',
@@ -11487,6 +12300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         Spinner,
                         Alert,
                         MediaPreviewComponent,
+                        FocalPointPickerComponent,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { style: 'display: block; width: 100%' },
@@ -11531,6 +12345,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 					</div>
 				</div>
 
+				@if (isImage()) {
+					<div class="mt-4">
+						<p class="mb-2 text-sm font-medium">Focal Point</p>
+						<mcms-focal-point-picker
+							[imageUrl]="imageUrl()"
+							[focalPoint]="focalPointValue()"
+							[naturalWidth]="media.width ?? 0"
+							[naturalHeight]="media.height ?? 0"
+							[alt]="media.alt ?? media.filename"
+							[imageSizes]="imageSizes"
+							(focalPointChange)="onFocalPointChange($event)"
+						/>
+					</div>
+				}
+
 				@if (saveError()) {
 					<mcms-alert variant="destructive" class="mt-4">
 						{{ saveError() }}
@@ -11591,6 +12420,7 @@ function getInputElement(event) {
  */
 class MediaLibraryPage {
     document = inject(DOCUMENT);
+    route = inject(ActivatedRoute);
     api = injectMomentumAPI();
     uploadService = inject(UploadService);
     feedback = inject(FeedbackService);
@@ -11598,6 +12428,12 @@ class MediaLibraryPage {
     dialog = inject(DialogService);
     destroyRef = inject(DestroyRef);
     uploadSubscriptions = [];
+    /** Image sizes config from the media collection (for crop previews in edit dialog) */
+    mediaImageSizes = (() => {
+        const collections = getCollectionsFromRouteData(this.route.parent?.snapshot.data);
+        const mediaColl = collections.find((c) => c.slug === 'media');
+        return mediaColl?.upload?.imageSizes ?? [];
+    })();
     /** Internal state */
     isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     mediaItems = signal([], ...(ngDevMode ? [{ debugName: "mediaItems" }] : []));
@@ -11749,7 +12585,7 @@ class MediaLibraryPage {
      */
     editMedia(media) {
         const dialogRef = this.dialog.open(MediaEditDialog, {
-            data: { media },
+            data: { media, imageSizes: this.mediaImageSizes },
             width: '36rem',
         });
         dialogRef.afterClosed.subscribe((result) => {
@@ -11819,8 +12655,8 @@ class MediaLibraryPage {
         }
         return `${bytes} bytes`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MediaLibraryPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: MediaLibraryPage, isStandalone: true, selector: "mcms-media-library", host: { classAttribute: "block" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaLibraryPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MediaLibraryPage, isStandalone: true, selector: "mcms-media-library", host: { classAttribute: "block" }, providers: [
             provideIcons({ heroCloudArrowUp, heroTrash, heroArrowDownTray, heroEye, heroPencilSquare }),
         ], ngImport: i0, template: `
 		<div class="space-y-6">
@@ -12035,7 +12871,7 @@ class MediaLibraryPage {
 		</div>
 	`, isInline: true, dependencies: [{ 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: Pagination, selector: "mcms-pagination", inputs: ["currentPage", "totalPages", "siblingCount", "class"], outputs: ["pageChange"] }, { kind: "component", type: SearchInput, selector: "mcms-search-input", inputs: ["value", "placeholder", "debounce", "disabled", "ariaLabel", "class"], outputs: ["valueChange", "searchChange", "clear"] }, { kind: "component", type: Badge, selector: "mcms-badge", inputs: ["variant", "class", "role", "ariaLabel"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: MediaPreviewComponent, selector: "mcms-media-preview", inputs: ["media", "size", "class", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MediaLibraryPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaLibraryPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-media-library',
@@ -12276,8 +13112,8 @@ class ForgotPasswordPage {
     navigateToLogin() {
         void this.router.navigate(['/admin/login']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ForgotPasswordPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ForgotPasswordPage, isStandalone: true, selector: "mcms-forgot-password-page", host: { classAttribute: "flex min-h-screen items-center justify-center bg-background p-4" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ForgotPasswordPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ForgotPasswordPage, isStandalone: true, selector: "mcms-forgot-password-page", host: { classAttribute: "flex min-h-screen items-center justify-center bg-background p-4" }, ngImport: i0, template: `
 		<main>
 			<mcms-card class="w-full max-w-md">
 				<mcms-card-header class="text-center">
@@ -12298,7 +13134,7 @@ class ForgotPasswordPage {
 		</main>
 	`, isInline: true, dependencies: [{ 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: ForgotPasswordFormComponent, selector: "mcms-forgot-password-form", outputs: ["resetRequested", "backToLogin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ForgotPasswordPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ForgotPasswordPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-forgot-password-page',
@@ -12366,8 +13202,8 @@ class ResetPasswordPage {
     navigateToForgotPassword() {
         void this.router.navigate(['/admin/forgot-password']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ResetPasswordPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ResetPasswordPage, isStandalone: true, selector: "mcms-reset-password-page", host: { classAttribute: "flex min-h-screen items-center justify-center bg-background p-4" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ResetPasswordPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: ResetPasswordPage, isStandalone: true, selector: "mcms-reset-password-page", host: { classAttribute: "flex min-h-screen items-center justify-center bg-background p-4" }, ngImport: i0, template: `
 		<main>
 			<mcms-card class="w-full max-w-md">
 				<mcms-card-header class="text-center">
@@ -12390,7 +13226,7 @@ class ResetPasswordPage {
 		</main>
 	`, isInline: true, dependencies: [{ 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: ResetPasswordFormComponent, selector: "mcms-reset-password-form", inputs: ["token"], outputs: ["resetComplete", "resetFailed", "goToLogin", "goToForgotPassword"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ResetPasswordPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ResetPasswordPage, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-reset-password-page',
@@ -12508,8 +13344,8 @@ class BlockWrapperComponent {
     getBlockSubFieldPath(fieldName) {
         return `${this.path()}.${this.blockIndex()}.${fieldName}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BlockWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: BlockWrapperComponent, isStandalone: true, selector: "mcms-block-wrapper", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, blockIndex: { classPropertyName: "blockIndex", publicName: "blockIndex", isSignal: true, isRequired: true, transformFunction: null }, blockConfig: { classPropertyName: "blockConfig", publicName: "blockConfig", isSignal: true, isRequired: true, transformFunction: null }, blockLabel: { classPropertyName: "blockLabel", publicName: "blockLabel", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, isHovered: { classPropertyName: "isHovered", publicName: "isHovered", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, canMoveUp: { classPropertyName: "canMoveUp", publicName: "canMoveUp", isSignal: true, isRequired: false, transformFunction: null }, canMoveDown: { classPropertyName: "canMoveDown", publicName: "canMoveDown", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, formTree: { classPropertyName: "formTree", publicName: "formTree", isSignal: true, isRequired: false, transformFunction: null }, formModel: { classPropertyName: "formModel", publicName: "formModel", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", hoverStart: "hoverStart", hoverEnd: "hoverEnd", moveUp: "moveUp", moveDown: "moveDown", deleteBlock: "deleteBlock", toggleCollapse: "toggleCollapse" }, host: { listeners: { "click": "selected.emit()", "mouseenter": "hoverStart.emit()", "mouseleave": "hoverEnd.emit()", "focus": "selected.emit()" }, properties: { "class.border-primary": "isSelected()", "class.border-border": "!isSelected()", "attr.data-testid": "\"block-wrapper\"", "attr.data-block-index": "blockIndex()", "attr.data-block-type": "block().blockType", "attr.role": "\"listitem\"", "attr.tabindex": "\"0\"", "attr.aria-label": "blockAriaLabel()" }, classAttribute: "block relative rounded-lg border transition-colors overflow-hidden" }, providers: [provideIcons({ heroChevronUp, heroChevronDown, heroChevronRight, heroTrash })], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BlockWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BlockWrapperComponent, isStandalone: true, selector: "mcms-block-wrapper", inputs: { block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: true, transformFunction: null }, blockIndex: { classPropertyName: "blockIndex", publicName: "blockIndex", isSignal: true, isRequired: true, transformFunction: null }, blockConfig: { classPropertyName: "blockConfig", publicName: "blockConfig", isSignal: true, isRequired: true, transformFunction: null }, blockLabel: { classPropertyName: "blockLabel", publicName: "blockLabel", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, isHovered: { classPropertyName: "isHovered", publicName: "isHovered", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null }, canMoveUp: { classPropertyName: "canMoveUp", publicName: "canMoveUp", isSignal: true, isRequired: false, transformFunction: null }, canMoveDown: { classPropertyName: "canMoveDown", publicName: "canMoveDown", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, formTree: { classPropertyName: "formTree", publicName: "formTree", isSignal: true, isRequired: false, transformFunction: null }, formModel: { classPropertyName: "formModel", publicName: "formModel", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", hoverStart: "hoverStart", hoverEnd: "hoverEnd", moveUp: "moveUp", moveDown: "moveDown", deleteBlock: "deleteBlock", toggleCollapse: "toggleCollapse" }, host: { listeners: { "click": "selected.emit()", "mouseenter": "hoverStart.emit()", "mouseleave": "hoverEnd.emit()", "focus": "selected.emit()" }, properties: { "class.border-primary": "isSelected()", "class.border-border": "!isSelected()", "attr.data-testid": "\"block-wrapper\"", "attr.data-block-index": "blockIndex()", "attr.data-block-type": "block().blockType", "attr.role": "\"listitem\"", "attr.tabindex": "\"0\"", "attr.aria-label": "blockAriaLabel()" }, classAttribute: "block relative rounded-lg border transition-colors overflow-hidden" }, providers: [provideIcons({ heroChevronUp, heroChevronDown, heroChevronRight, heroTrash })], ngImport: i0, template: `
 		<!-- Header: always visible -->
 		<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
 		<div
@@ -12601,7 +13437,7 @@ class BlockWrapperComponent {
 		}
 	`, isInline: true, dependencies: [{ kind: "component", type: FieldRenderer, selector: "mcms-field-renderer", inputs: ["field", "formNode", "formTree", "formModel", "mode", "path"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { 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.1.2", ngImport: i0, type: BlockWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BlockWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-block-wrapper',
@@ -12754,8 +13590,8 @@ class BlockInserterComponent {
     onPopoverClosed() {
         this.searchQuery.set('');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BlockInserterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: BlockInserterComponent, isStandalone: true, selector: "mcms-block-inserter", inputs: { insertIndex: { classPropertyName: "insertIndex", publicName: "insertIndex", isSignal: true, isRequired: true, transformFunction: null }, blockDefinitions: { classPropertyName: "blockDefinitions", publicName: "blockDefinitions", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blockTypeSelected: "blockTypeSelected" }, host: { properties: { "attr.data-testid": "\"block-inserter\"", "attr.data-insert-index": "insertIndex()" }, classAttribute: "group relative flex items-center justify-center py-1" }, providers: [provideIcons({ heroPlus })], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BlockInserterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BlockInserterComponent, isStandalone: true, selector: "mcms-block-inserter", inputs: { insertIndex: { classPropertyName: "insertIndex", publicName: "insertIndex", isSignal: true, isRequired: true, transformFunction: null }, blockDefinitions: { classPropertyName: "blockDefinitions", publicName: "blockDefinitions", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blockTypeSelected: "blockTypeSelected" }, host: { properties: { "attr.data-testid": "\"block-inserter\"", "attr.data-insert-index": "insertIndex()" }, classAttribute: "group relative flex items-center justify-center py-1" }, providers: [provideIcons({ heroPlus })], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<!-- Horizontal line -->
 		<div
 			class="absolute inset-x-0 top-1/2 h-px bg-border opacity-0 transition-opacity group-hover:opacity-100"
@@ -12804,7 +13640,7 @@ class BlockInserterComponent {
 		</ng-template>
 	`, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: PopoverTrigger, selector: "[mcmsPopoverTrigger]", inputs: ["mcmsPopoverTrigger", "popoverSide", "popoverAlign", "popoverOffset", "popoverDisabled"], outputs: ["opened", "closed"], exportAs: ["mcmsPopoverTrigger"] }, { kind: "component", type: PopoverContent, selector: "mcms-popover-content" }, { kind: "component", type: Command, selector: "mcms-command", inputs: ["filterMode", "disabled", "alwaysExpanded", "class"] }, { kind: "component", type: CommandInput, selector: "mcms-command-input", inputs: ["placeholder", "value", "disabled", "autofocus", "ariaControls", "ariaExpanded", "ariaLabel", "class"], outputs: ["valueChange"] }, { kind: "component", type: CommandList, selector: "mcms-command-list", inputs: ["maxHeight", "class"] }, { kind: "component", type: CommandGroup, selector: "mcms-command-group", inputs: ["label", "class"] }, { kind: "component", type: CommandItem, selector: "mcms-command-item", inputs: ["value", "label", "disabled", "selected", "class"], outputs: ["itemSelect"] }, { kind: "component", type: CommandEmpty, selector: "mcms-command-empty", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: BlockInserterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BlockInserterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-block-inserter',
@@ -13133,8 +13969,8 @@ class VisualBlockEditorComponent {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: VisualBlockEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: VisualBlockEditorComponent, isStandalone: true, selector: "mcms-visual-block-editor", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, formTree: { classPropertyName: "formTree", publicName: "formTree", isSignal: true, isRequired: false, transformFunction: null }, formModel: { classPropertyName: "formModel", publicName: "formModel", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.data-testid": "\"visual-block-editor\"" }, classAttribute: "block" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VisualBlockEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: VisualBlockEditorComponent, isStandalone: true, selector: "mcms-visual-block-editor", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, formTree: { classPropertyName: "formTree", publicName: "formTree", isSignal: true, isRequired: false, transformFunction: null }, formModel: { classPropertyName: "formModel", publicName: "formModel", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.data-testid": "\"visual-block-editor\"" }, classAttribute: "block" }, ngImport: i0, template: `
 		<!-- Header -->
 		<div class="mb-4">
 			<h3 class="text-sm font-medium text-foreground">{{ label() }}</h3>
@@ -13228,7 +14064,7 @@ class VisualBlockEditorComponent {
 		</div>
 	`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => CdkDropList), selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i0.forwardRef(() => CdkDrag), selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i0.forwardRef(() => CdkDragPlaceholder), selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i0.forwardRef(() => BlockWrapperComponent), selector: "mcms-block-wrapper", inputs: ["block", "blockIndex", "blockConfig", "blockLabel", "isSelected", "isHovered", "isDisabled", "isCollapsed", "canMoveUp", "canMoveDown", "canDelete", "formNode", "formTree", "formModel", "mode", "path"], outputs: ["selected", "hoverStart", "hoverEnd", "moveUp", "moveDown", "deleteBlock", "toggleCollapse"] }, { kind: "component", type: i0.forwardRef(() => BlockInserterComponent), selector: "mcms-block-inserter", inputs: ["insertIndex", "blockDefinitions", "disabled"], outputs: ["blockTypeSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: VisualBlockEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: VisualBlockEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-visual-block-editor',
@@ -13377,18 +14213,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-BvpufJs3.mjs').then((m) => m.RichTextFieldRenderer));
+                    registry.register('richText', () => import('./momentumcms-admin-rich-text-field.component-BVAQkX3O.mjs').then((m) => m.RichTextFieldRenderer));
                     // Layout field renderers (support nested field rendering)
-                    registry.register('group', () => import('./momentumcms-admin-group-field.component-ffsgbC6o.mjs').then((m) => m.GroupFieldRenderer));
-                    registry.register('array', () => import('./momentumcms-admin-array-field.component-CLV4Ny9t.mjs').then((m) => m.ArrayFieldRenderer));
-                    registry.register('blocks', () => import('./momentumcms-admin-blocks-field.component-hHiTfUf9.mjs').then((m) => m.BlocksFieldRenderer));
+                    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));
                     // 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-DO0kyAkE.mjs').then((m) => m.RelationshipFieldRenderer));
+                    registry.register('relationship', () => import('./momentumcms-admin-relationship-field.component-DNZUCENa.mjs').then((m) => m.RelationshipFieldRenderer));
                     // Layout-only renderers (tabs, collapsible, row)
-                    registry.register('tabs', () => import('./momentumcms-admin-tabs-field.component-Uatoyjg8.mjs').then((m) => m.TabsFieldRenderer));
-                    registry.register('collapsible', () => import('./momentumcms-admin-collapsible-field.component-BeskwGvi.mjs').then((m) => m.CollapsibleFieldRenderer));
-                    registry.register('row', () => import('./momentumcms-admin-row-field.component-C8ZsdA2w.mjs').then((m) => m.RowFieldRenderer));
+                    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));
                 };
             },
         },
@@ -13515,8 +14351,8 @@ class TextFieldRenderer {
         if (state)
             state.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TextFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: TextFieldRenderer, isStandalone: true, selector: "mcms-text-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TextFieldRenderer, isStandalone: true, selector: "mcms-text-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<mcms-form-field
 			[id]="fieldId()"
 			[required]="required()"
@@ -13570,7 +14406,7 @@ class TextFieldRenderer {
 		</mcms-form-field>
 	`, isInline: true, dependencies: [{ kind: "component", type: McmsFormField, selector: "mcms-form-field", inputs: ["id", "required", "disabled", "errors", "hint", "hasLabel"] }, { 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: Textarea, selector: "mcms-textarea", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "rows", "ariaLabel", "describedBy"], outputs: ["valueChange", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: TextFieldRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextFieldRenderer, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-text-field-renderer',
@@ -13741,8 +14577,8 @@ class NumberFieldRenderer {
         if (state)
             state.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NumberFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: NumberFieldRenderer, isStandalone: true, selector: "mcms-number-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NumberFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NumberFieldRenderer, isStandalone: true, selector: "mcms-number-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<mcms-form-field
 			[id]="fieldId()"
 			[required]="required()"
@@ -13769,7 +14605,7 @@ class NumberFieldRenderer {
 		</mcms-form-field>
 	`, isInline: true, dependencies: [{ kind: "component", type: McmsFormField, selector: "mcms-form-field", inputs: ["id", "required", "disabled", "errors", "hint", "hasLabel"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: NumberFieldRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NumberFieldRenderer, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-number-field-renderer',
@@ -13875,8 +14711,8 @@ class SelectFieldRenderer {
         state.value.set(value || null);
         state.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SelectFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: SelectFieldRenderer, isStandalone: true, selector: "mcms-select-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SelectFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: SelectFieldRenderer, isStandalone: true, selector: "mcms-select-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<mcms-form-field
 			[id]="fieldId()"
 			[required]="required()"
@@ -13896,7 +14732,7 @@ class SelectFieldRenderer {
 		</mcms-form-field>
 	`, isInline: true, dependencies: [{ kind: "component", type: McmsFormField, selector: "mcms-form-field", inputs: ["id", "required", "disabled", "errors", "hint", "hasLabel"] }, { kind: "component", type: Select, selector: "mcms-select", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "options", "describedBy", "ariaLabel"], outputs: ["valueChange", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SelectFieldRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SelectFieldRenderer, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-select-field-renderer',
@@ -13984,8 +14820,8 @@ class CheckboxFieldRenderer {
         state.value.set(value);
         state.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CheckboxFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: CheckboxFieldRenderer, isStandalone: true, selector: "mcms-checkbox-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CheckboxFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CheckboxFieldRenderer, isStandalone: true, selector: "mcms-checkbox-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<mcms-form-field [id]="fieldId()" [hasLabel]="false" [errors]="touchedErrors()">
 			<mcms-checkbox
 				[id]="fieldId()"
@@ -14005,7 +14841,7 @@ class CheckboxFieldRenderer {
 		</mcms-form-field>
 	`, isInline: true, dependencies: [{ kind: "component", type: McmsFormField, selector: "mcms-form-field", inputs: ["id", "required", "disabled", "errors", "hint", "hasLabel"] }, { kind: "component", type: Checkbox, selector: "mcms-checkbox", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "describedBy", "indeterminate", "ariaLabel"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CheckboxFieldRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CheckboxFieldRenderer, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-checkbox-field-renderer',
@@ -14129,8 +14965,8 @@ class DateFieldRenderer {
         if (state)
             state.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DateFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.2", type: DateFieldRenderer, isStandalone: true, selector: "mcms-date-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: DateFieldRenderer, isStandalone: true, selector: "mcms-date-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
 		<mcms-form-field
 			[id]="fieldId()"
 			[required]="required()"
@@ -14151,7 +14987,7 @@ class DateFieldRenderer {
 		</mcms-form-field>
 	`, isInline: true, dependencies: [{ kind: "component", type: McmsFormField, selector: "mcms-form-field", inputs: ["id", "required", "disabled", "errors", "hint", "hasLabel"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DateFieldRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateFieldRenderer, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-date-field-renderer',
@@ -14317,8 +15153,8 @@ class MediaPickerDialog {
             this.dialogRef.close({ media: selected });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MediaPickerDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: MediaPickerDialog, isStandalone: true, selector: "mcms-media-picker-dialog", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaPickerDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: MediaPickerDialog, isStandalone: true, selector: "mcms-media-picker-dialog", ngImport: i0, template: `
 		<mcms-dialog>
 		<mcms-dialog-header>
 			<mcms-dialog-title>Select Media</mcms-dialog-title>
@@ -14403,7 +15239,7 @@ class MediaPickerDialog {
 		</mcms-dialog>
 	`, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Dialog, selector: "mcms-dialog", inputs: ["class"] }, { kind: "component", type: DialogHeader, selector: "mcms-dialog-header" }, { kind: "component", type: DialogTitle, selector: "mcms-dialog-title", inputs: ["id"] }, { kind: "component", type: DialogContent, selector: "mcms-dialog-content" }, { kind: "component", type: DialogFooter, selector: "mcms-dialog-footer" }, { kind: "directive", type: DialogClose, selector: "[mcmsDialogClose]", inputs: ["mcmsDialogClose"] }, { kind: "component", type: Spinner, selector: "mcms-spinner", inputs: ["size", "label", "class"] }, { kind: "component", type: Pagination, selector: "mcms-pagination", inputs: ["currentPage", "totalPages", "siblingCount", "class"], outputs: ["pageChange"] }, { kind: "component", type: MediaPreviewComponent, selector: "mcms-media-preview", inputs: ["media", "size", "class", "rounded"] }, { kind: "component", type: SearchInput, selector: "mcms-search-input", inputs: ["value", "placeholder", "debounce", "disabled", "ariaLabel", "class"], outputs: ["valueChange", "searchChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: MediaPickerDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaPickerDialog, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-media-picker-dialog',
@@ -14880,8 +15716,8 @@ class UploadFieldRenderer {
             state.value.set(null);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UploadFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: UploadFieldRenderer, isStandalone: true, selector: "mcms-upload-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UploadFieldRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: UploadFieldRenderer, isStandalone: true, selector: "mcms-upload-field-renderer", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formNode: { classPropertyName: "formNode", publicName: "formNode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<mcms-form-field
 			[id]="fieldId()"
 			[required]="required()"
@@ -15014,7 +15850,7 @@ class UploadFieldRenderer {
 		</mcms-form-field>
 	`, isInline: true, dependencies: [{ kind: "component", type: McmsFormField, selector: "mcms-form-field", inputs: ["id", "required", "disabled", "errors", "hint", "hasLabel"] }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Progress, selector: "mcms-progress", inputs: ["value", "max", "ariaLabel", "class"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: MediaPreviewComponent, selector: "mcms-media-preview", inputs: ["media", "size", "class", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: UploadFieldRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: UploadFieldRenderer, decorators: [{
             type: Component,
             args: [{
                     selector: 'mcms-upload-field-renderer',
@@ -15168,4 +16004,4 @@ var uploadField_component = /*#__PURE__*/Object.freeze({
  */
 
 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-De5FLr2L.mjs.map
+//# sourceMappingURL=momentumcms-admin-momentumcms-admin-BTZEdMNj.mjs.map