@momentumcms/admin 0.2.0 → 0.3.0

package/fesm2022/{momentumcms-admin-momentumcms-admin-o0FbJXZN.mjs → momentumcms-admin-momentumcms-admin-D_47TVaR.mjs}

@@ -1,19 +1,18 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Injectable, PLATFORM_ID, InjectionToken, makeStateKey, TransferState, DestroyRef, effect, input, ChangeDetectionStrategy, Component, output, Injector, untracked, runInInjectionContext, afterNextRender, viewChild, model, forwardRef, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { inject, signal, computed, Injectable, PLATFORM_ID, InjectionToken, makeStateKey, TransferState, DestroyRef, effect, input, ChangeDetectionStrategy, Component, output, viewChild, Injector, untracked, runInInjectionContext, afterNextRender, model, forwardRef, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser, isPlatformServer, NgComponentOutlet, DatePipe } from '@angular/common';
 import { Router, NavigationEnd, ActivatedRoute, RouterOutlet, RouterLink } from '@angular/router';
 import { HttpClient, HttpContextToken, HttpResponse, HttpErrorResponse, HttpRequest, HttpEventType, HttpParams } from '@angular/common/http';
 import { firstValueFrom, tap, catchError, throwError, Subject, finalize, Observable, of, filter, take } from 'rxjs';
-import { ToastService, ConfirmationService, DIALOG_DATA, Dialog, DialogHeader, DialogTitle, DialogContent, DialogFooter, DialogClose, Button, Badge, Skeleton, DialogService, Card, CardHeader, CardContent, Separator, CardFooter, Spinner, Alert, Breadcrumbs, BreadcrumbItem, BreadcrumbSeparator, FieldDisplay, Sidebar, SidebarNav, SidebarNavItem, SidebarSection, Avatar, AvatarFallback, DropdownMenu, DropdownMenuItem, DropdownSeparator, DropdownLabel, DropdownTrigger, SidebarService, SidebarTrigger, ToastContainer, Input, McmsFormField, DialogRef, DataTable, Label, Select, CardTitle, CardDescription, Textarea, Pagination, SearchInput, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty, Checkbox, Progress } from '@momentumcms/ui';
+import { ToastService, ConfirmationService, DIALOG_DATA, Dialog, DialogHeader, DialogTitle, DialogContent, DialogFooter, DialogClose, Button, Badge, Skeleton, DialogService, Card, CardHeader, CardContent, Separator, Progress, CardFooter, Spinner, Alert, Breadcrumbs, BreadcrumbItem, BreadcrumbSeparator, FieldDisplay, Sidebar, SidebarNav, SidebarNavItem, SidebarSection, Avatar, AvatarFallback, DropdownMenu, DropdownMenuItem, DropdownSeparator, DropdownLabel, DropdownTrigger, SidebarService, SidebarTrigger, ToastContainer, Input, McmsFormField, DialogRef, DataTable, Label, Select, CardTitle, CardDescription, Textarea, Pagination, SearchInput, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandGroup, CommandItem, CommandEmpty, Checkbox } from '@momentumcms/ui';
 import { map } from 'rxjs/operators';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/cdk/a11y';
 import { LiveAnnouncer, A11yModule } from '@angular/cdk/a11y';
-import { flattenDataFields, humanizeFieldName, getSoftDeleteField } from '@momentumcms/core';
+import { flattenDataFields, humanizeFieldName, isUploadCollection, getSoftDeleteField } from '@momentumcms/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { heroXMark, heroPuzzlePiece, heroCog6Tooth, heroDocumentText, heroChartBarSquare, heroChevronUpDown, heroBolt, heroFolder, heroDocument, heroPhoto, heroUsers, heroNewspaper, heroSquares2x2, heroEye, heroFilm, heroMusicalNote, heroArchiveBox, heroPencilSquare, heroArrowDownTray, heroTrash, heroCloudArrowUp, heroChevronRight, heroChevronDown, heroChevronUp, heroPlus } from '@ng-icons/heroicons/outline';
+import { heroFilm, heroMusicalNote, heroDocumentText, heroArchiveBox, heroPhoto, heroDocument, heroCloudArrowUp, heroXMark, heroPuzzlePiece, heroCog6Tooth, heroChartBarSquare, heroChevronUpDown, heroBolt, heroFolder, heroUsers, heroNewspaper, heroSquares2x2, heroEye, heroPencilSquare, heroArrowDownTray, heroTrash, heroChevronRight, heroChevronDown, heroChevronUp, heroPlus } from '@ng-icons/heroicons/outline';
 import { required, validate, applyEach, apply, email, min, max, minLength, maxLength, form, submit } from '@angular/forms/signals';
-import { DomSanitizer } from '@angular/platform-browser';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
 
 /**
@@ -1135,7 +1134,7 @@ function momentumAdminRoutes(configOrOptions) {
             // Global edit
             {
                 path: 'globals/:slug',
-                loadComponent: () => import('./momentumcms-admin-global-edit.page-BBUtWCSl.mjs').then((m) => m.GlobalEditPage),
+                loadComponent: () => import('./momentumcms-admin-global-edit.page-DSnkwdgn.mjs').then((m) => m.GlobalEditPage),
                 canDeactivate: [unsavedChangesGuard],
             },
             // Plugin-registered routes
@@ -1539,6 +1538,95 @@ class UploadService {
         });
         return subject.asObservable();
     }
+    /**
+     * Upload a file to a specific upload collection.
+     * POSTs multipart/form-data to /api/{collectionSlug} with file + additional fields.
+     *
+     * @param collectionSlug - Target collection (e.g., 'media', 'documents')
+     * @param file - The file to upload
+     * @param fields - Additional form fields to include (e.g., alt, title)
+     * @returns Observable emitting upload progress
+     */
+    uploadToCollection(collectionSlug, file, fields) {
+        const subject = new Subject();
+        const formData = new FormData();
+        formData.append('file', file);
+        if (fields) {
+            for (const [key, value] of Object.entries(fields)) {
+                formData.append(key, value);
+            }
+        }
+        const initialProgress = {
+            status: 'pending',
+            progress: 0,
+            file,
+        };
+        this.updateActiveUpload(file, initialProgress);
+        subject.next(initialProgress);
+        const url = `/api/${collectionSlug}`;
+        const request = new HttpRequest('POST', url, formData, {
+            reportProgress: true,
+        });
+        this.http
+            .request(request)
+            .pipe(finalize(() => {
+            const uploads = new Map(this.activeUploadsSignal());
+            uploads.delete(file);
+            this.activeUploadsSignal.set(uploads);
+            subject.complete();
+        }))
+            .subscribe({
+            next: (event) => {
+                if (event.type === HttpEventType.UploadProgress) {
+                    const progress = event.total
+                        ? Math.round((100 * event.loaded) / event.total)
+                        : 0;
+                    const uploadingProgress = {
+                        status: 'uploading',
+                        progress,
+                        file,
+                    };
+                    this.updateActiveUpload(file, uploadingProgress);
+                    subject.next(uploadingProgress);
+                }
+                else if (event.type === HttpEventType.Response) {
+                    const body = event.body;
+                    if (body?.doc) {
+                        const completeProgress = {
+                            status: 'complete',
+                            progress: 100,
+                            file,
+                            result: body.doc,
+                        };
+                        this.updateActiveUpload(file, completeProgress);
+                        subject.next(completeProgress);
+                    }
+                    else {
+                        const errorProgress = {
+                            status: 'error',
+                            progress: 0,
+                            file,
+                            error: body?.error ?? 'Upload failed',
+                        };
+                        this.updateActiveUpload(file, errorProgress);
+                        subject.next(errorProgress);
+                    }
+                }
+            },
+            error: (error) => {
+                const errorProgress = {
+                    status: 'error',
+                    progress: 0,
+                    file,
+                    error: error.message ?? 'Upload failed',
+                };
+                this.updateActiveUpload(file, errorProgress);
+                subject.next(errorProgress);
+                subject.error(error);
+            },
+        });
+        return subject.asObservable();
+    }
     /**
      * Upload multiple files.
      *
@@ -4129,121 +4217,739 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         }], ctorParameters: () => [], propDecorators: { collection: [{ type: i0.Input, args: [{ isSignal: true, alias: "collection", required: true }] }], documentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentId", required: true }] }], documentLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentLabel", required: false }] }], restored: [{ type: i0.Output, args: ["restored"] }] } });
 
 /**
- * Entity Form Widget
+ * Media Preview Component
  *
- * Dynamic form for create/edit operations using Angular Signal Forms.
+ * Displays a preview of media based on its type:
+ * - Images: Thumbnail preview
+ * - Videos: Video icon with optional poster
+ * - Audio: Audio icon
+ * - Documents: Document icon
+ * - Other: Generic file icon
  *
  * @example
  * ```html
- * <mcms-entity-form
- *   [collection]="postsCollection"
- *   entityId="123"
- *   mode="edit"
- *   (saved)="onSaved($event)"
- *   (cancelled)="onCancel()"
+ * <mcms-media-preview
+ *   [media]="mediaDocument"
+ *   [size]="'md'"
  * />
  * ```
  */
-class EntityFormWidget {
-    api = injectMomentumAPI();
-    injector = inject(Injector);
-    versionService = inject(VersionService);
-    collectionAccess = inject(CollectionAccessService);
-    feedback = inject(FeedbackService);
-    router = inject(Router);
-    liveAnnouncer = inject(LiveAnnouncer);
-    /** The collection configuration */
-    collection = input.required(...(ngDevMode ? [{ debugName: "collection" }] : []));
-    /** Entity ID for edit mode (undefined for create) */
-    entityId = input(undefined, ...(ngDevMode ? [{ debugName: "entityId" }] : []));
-    /** Form mode */
-    mode = input('create', ...(ngDevMode ? [{ debugName: "mode" }] : []));
-    /** Base path for navigation */
-    basePath = input('/admin/collections', ...(ngDevMode ? [{ debugName: "basePath" }] : []));
-    /** Whether to show breadcrumbs */
-    showBreadcrumbs = input(true, ...(ngDevMode ? [{ debugName: "showBreadcrumbs" }] : []));
-    /** When true, prevents router navigation after save/cancel (used in entity sheet) */
-    suppressNavigation = input(false, ...(ngDevMode ? [{ debugName: "suppressNavigation" }] : []));
-    /** When true, uses the global API instead of collection API (singleton mode) */
-    isGlobal = input(false, ...(ngDevMode ? [{ debugName: "isGlobal" }] : []));
-    /** The global slug (used when isGlobal is true) */
-    globalSlug = input(undefined, ...(ngDevMode ? [{ debugName: "globalSlug" }] : []));
-    /** Outputs */
-    saved = output();
-    cancelled = output();
-    saveError = output();
-    modeChange = output();
-    draftSaved = output();
-    /** Model signal — the single source of truth for form data */
-    formModel = signal({}, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
-    /** Alias for backward compatibility (CollectionEditPage reads formData) */
-    formData = this.formModel;
-    /** Signal forms tree — created once when collection is available */
-    entityForm = signal(null, ...(ngDevMode ? [{ debugName: "entityForm" }] : []));
-    /** Original data for edit mode */
-    originalData = signal(null, ...(ngDevMode ? [{ debugName: "originalData" }] : []));
-    /** UI state */
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
-    isSavingDraft = signal(false, ...(ngDevMode ? [{ debugName: "isSavingDraft" }] : []));
-    formError = signal(null, ...(ngDevMode ? [{ debugName: "formError" }] : []));
-    /** Whether the form has been set up */
-    formCreated = false;
-    /** Whether the form has unsaved changes (from signal forms dirty tracking) */
-    isDirty = computed(() => {
-        const ef = this.entityForm();
-        return ef ? ef().dirty() : false;
-    }, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
-    /** Computed collection label */
-    collectionLabel = computed(() => {
-        const col = this.collection();
-        return humanizeFieldName(col.labels?.plural || col.slug);
-    }, ...(ngDevMode ? [{ debugName: "collectionLabel" }] : []));
-    /** Computed collection label singular */
-    collectionLabelSingular = computed(() => {
-        const col = this.collection();
-        return humanizeFieldName(col.labels?.singular || col.slug);
-    }, ...(ngDevMode ? [{ debugName: "collectionLabelSingular" }] : []));
-    /** Dashboard path (remove /collections from base path) */
-    dashboardPath = computed(() => {
-        const base = this.basePath();
-        return base.replace(/\/collections$/, '');
-    }, ...(ngDevMode ? [{ debugName: "dashboardPath" }] : []));
-    /** Collection list path */
-    collectionListPath = computed(() => {
-        return `${this.basePath()}/${this.collection().slug}`;
-    }, ...(ngDevMode ? [{ debugName: "collectionListPath" }] : []));
-    /** Page title for breadcrumb */
-    pageTitle = computed(() => {
-        if (this.isGlobal()) {
-            return this.collectionLabelSingular();
+class MediaPreviewComponent {
+    /** Media data to preview */
+    media = input(null, ...(ngDevMode ? [{ debugName: "media" }] : []));
+    /** Size of the preview */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Custom class override */
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    /** Whether to show rounded corners */
+    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
+    /** Host classes */
+    hostClasses = computed(() => {
+        const sizeClass = this.sizeClasses()[this.size()];
+        const roundedClass = this.rounded() ? 'rounded-md overflow-hidden' : '';
+        return `inline-block ${sizeClass} ${roundedClass} ${this.class()}`;
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    /** Size classes map */
+    sizeClasses = computed(() => ({
+        xs: 'h-8 w-8',
+        sm: 'h-12 w-12',
+        md: 'h-20 w-20',
+        lg: 'h-32 w-32',
+        xl: 'h-48 w-48',
+    }), ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
+    /** Icon size classes */
+    iconClasses = computed(() => {
+        const sizes = {
+            xs: 'text-lg',
+            sm: 'text-xl',
+            md: 'text-3xl',
+            lg: 'text-4xl',
+            xl: 'text-6xl',
+        };
+        return `${sizes[this.size()]} text-mcms-muted-foreground`;
+    }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    /** Whether the media is an image */
+    isImage = computed(() => {
+        const mimeType = this.media()?.mimeType ?? '';
+        return mimeType.startsWith('image/');
+    }, ...(ngDevMode ? [{ debugName: "isImage" }] : []));
+    /** Whether the media is a video */
+    isVideo = computed(() => {
+        const mimeType = this.media()?.mimeType ?? '';
+        return mimeType.startsWith('video/');
+    }, ...(ngDevMode ? [{ debugName: "isVideo" }] : []));
+    /** Whether the media is audio */
+    isAudio = computed(() => {
+        const mimeType = this.media()?.mimeType ?? '';
+        return mimeType.startsWith('audio/');
+    }, ...(ngDevMode ? [{ debugName: "isAudio" }] : []));
+    /** Image URL for preview */
+    imageUrl = computed(() => {
+        const media = this.media();
+        if (!media)
+            return '';
+        return media.url ?? `/api/media/file/${media.path}`;
+    }, ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
+    /** Icon name based on media type */
+    iconName = computed(() => {
+        const mimeType = this.media()?.mimeType ?? '';
+        if (mimeType.startsWith('video/')) {
+            return heroFilm;
         }
-        const currentMode = this.mode();
-        if (currentMode === 'create') {
-            return `Create ${this.collectionLabelSingular()}`;
+        if (mimeType.startsWith('audio/')) {
+            return heroMusicalNote;
         }
-        const data = this.formModel();
-        const titleFields = ['title', 'name', 'label', 'subject'];
-        for (const field of titleFields) {
-            if (data[field] && typeof data[field] === 'string') {
-                return data[field];
-            }
+        if (mimeType === 'application/pdf') {
+            return heroDocumentText;
         }
-        return `Edit ${this.collectionLabelSingular()}`;
-    }, ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
-    /** Visible fields (excluding hidden ones and those failing admin.condition) */
-    visibleFields = computed(() => {
-        const col = this.collection();
-        const data = this.formModel();
-        return col.fields.filter((field) => {
-            if (field.admin?.hidden)
-                return false;
-            if (field.admin?.condition && !field.admin.condition(data))
-                return false;
-            return true;
-        });
-    }, ...(ngDevMode ? [{ debugName: "visibleFields" }] : []));
-    /** Whether user can edit */
+        if (mimeType.startsWith('application/zip') || mimeType.includes('compressed')) {
+            return heroArchiveBox;
+        }
+        if (mimeType.startsWith('image/')) {
+            return heroPhoto;
+        }
+        return heroDocument;
+    }, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.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: `
+		@if (isImage()) {
+			<img
+				[src]="imageUrl()"
+				[alt]="media()?.alt ?? media()?.filename ?? 'Media preview'"
+				class="h-full w-full object-cover"
+			/>
+		} @else {
+			<div class="flex h-full w-full items-center justify-center bg-mcms-muted">
+				<ng-icon [name]="iconName()" [class]="iconClasses()" />
+			</div>
+		}
+	`, 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: [{
+            type: Component,
+            args: [{
+                    selector: 'mcms-media-preview',
+                    host: {
+                        '[class]': 'hostClasses()',
+                    },
+                    template: `
+		@if (isImage()) {
+			<img
+				[src]="imageUrl()"
+				[alt]="media()?.alt ?? media()?.filename ?? 'Media preview'"
+				class="h-full w-full object-cover"
+			/>
+		} @else {
+			<div class="flex h-full w-full items-center justify-center bg-mcms-muted">
+				<ng-icon [name]="iconName()" [class]="iconClasses()" />
+			</div>
+		}
+	`,
+                    imports: [NgIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { media: [{ type: i0.Input, args: [{ isSignal: true, alias: "media", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
+
+/**
+ * Upload zone component for upload collections.
+ * Shows a drag-and-drop zone above the form fields.
+ * When a file is selected, emits the file for the parent entity form to handle.
+ */
+/**
+ * Get string property from an unknown object.
+ */
+function getStringProp$1(obj, key) {
+    if (typeof obj !== 'object' || obj === null)
+        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;
+}
+/**
+ * Get HTMLInputElement safely from event.
+ */
+function getInputFromEvent$1(event) {
+    const target = event.target;
+    if (target instanceof HTMLInputElement) {
+        return target;
+    }
+    return null;
+}
+class CollectionUploadZoneComponent {
+    /** Reference to the hidden file input */
+    fileInputRef = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInputRef" }] : []));
+    /** Upload config from the collection */
+    uploadConfig = input(undefined, ...(ngDevMode ? [{ debugName: "uploadConfig" }] : []));
+    /** Whether the zone is disabled */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Currently selected file (read from parent) */
+    pendingFile = input(null, ...(ngDevMode ? [{ debugName: "pendingFile" }] : []));
+    /** Whether an upload is in progress */
+    isUploading = input(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
+    /** Upload progress percentage */
+    uploadProgress = input(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
+    /** Error message */
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    /** Existing media data for edit mode (filename, mimeType, path, url) */
+    existingMedia = input(null, ...(ngDevMode ? [{ debugName: "existingMedia" }] : []));
+    /** Emitted when a file is selected */
+    fileSelected = output();
+    /** Emitted when the file is removed */
+    fileRemoved = output();
+    /** Icons */
+    uploadIcon = heroCloudArrowUp;
+    xMarkIcon = heroXMark;
+    /** Drag state */
+    isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+    /** Cached object URL for file preview (managed to prevent memory leaks) */
+    previewUrl = signal(null, ...(ngDevMode ? [{ debugName: "previewUrl" }] : []));
+    constructor() {
+        // Manage object URL lifecycle: create when file changes, revoke old one
+        effect((onCleanup) => {
+            const file = this.pendingFile();
+            if (file) {
+                const url = URL.createObjectURL(file);
+                this.previewUrl.set(url);
+                onCleanup(() => URL.revokeObjectURL(url));
+            }
+            else {
+                this.previewUrl.set(null);
+            }
+        });
+    }
+    /** Preview data for the pending file */
+    previewData = computed(() => {
+        const file = this.pendingFile();
+        if (!file)
+            return null;
+        return {
+            mimeType: file.type,
+            filename: file.name,
+            url: this.previewUrl() ?? undefined,
+        };
+    }, ...(ngDevMode ? [{ debugName: "previewData" }] : []));
+    /** Preview data for existing media (edit mode) */
+    existingMediaPreview = computed(() => {
+        const media = this.existingMedia();
+        if (!media)
+            return null;
+        return {
+            url: getStringProp$1(media, 'url'),
+            path: getStringProp$1(media, 'path'),
+            mimeType: getStringProp$1(media, 'mimeType'),
+            filename: getStringProp$1(media, 'filename'),
+            alt: getStringProp$1(media, 'alt'),
+        };
+    }, ...(ngDevMode ? [{ debugName: "existingMediaPreview" }] : []));
+    /** Filename of existing media */
+    existingFilename = computed(() => {
+        return getStringProp$1(this.existingMedia(), 'filename') ?? 'Uploaded file';
+    }, ...(ngDevMode ? [{ debugName: "existingFilename" }] : []));
+    /** MIME type of existing media */
+    existingMimeType = computed(() => {
+        return getStringProp$1(this.existingMedia(), 'mimeType') ?? '';
+    }, ...(ngDevMode ? [{ debugName: "existingMimeType" }] : []));
+    /** MIME types hint for display */
+    mimeTypesHint = computed(() => {
+        const mimeTypes = this.uploadConfig()?.mimeTypes;
+        if (!mimeTypes || mimeTypes.length === 0)
+            return null;
+        const simplified = mimeTypes.map((type) => {
+            if (type === 'image/*')
+                return 'Images';
+            if (type === 'video/*')
+                return 'Videos';
+            if (type === 'audio/*')
+                return 'Audio';
+            if (type === 'application/pdf')
+                return 'PDF';
+            return type;
+        });
+        return `Allowed: ${simplified.join(', ')}`;
+    }, ...(ngDevMode ? [{ debugName: "mimeTypesHint" }] : []));
+    /** Max size hint for display */
+    maxSizeHint = computed(() => {
+        const maxSize = this.uploadConfig()?.maxFileSize;
+        if (!maxSize)
+            return null;
+        if (maxSize >= 1024 * 1024 * 1024) {
+            return `${(maxSize / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+        }
+        if (maxSize >= 1024 * 1024) {
+            return `${(maxSize / (1024 * 1024)).toFixed(1)} MB`;
+        }
+        if (maxSize >= 1024) {
+            return `${(maxSize / 1024).toFixed(1)} KB`;
+        }
+        return `${maxSize} bytes`;
+    }, ...(ngDevMode ? [{ debugName: "maxSizeHint" }] : []));
+    /** Accept attribute for file input */
+    acceptAttribute = computed(() => {
+        const mimeTypes = this.uploadConfig()?.mimeTypes;
+        if (!mimeTypes || mimeTypes.length === 0)
+            return '*/*';
+        return mimeTypes.join(',');
+    }, ...(ngDevMode ? [{ debugName: "acceptAttribute" }] : []));
+    /**
+     * Format file size for display.
+     */
+    formatFileSize(bytes) {
+        if (bytes >= 1024 * 1024 * 1024) {
+            return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+        }
+        if (bytes >= 1024 * 1024) {
+            return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+        }
+        if (bytes >= 1024) {
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        }
+        return `${bytes} bytes`;
+    }
+    /**
+     * Handle drag over event.
+     */
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled()) {
+            this.isDragging.set(true);
+        }
+    }
+    /**
+     * Handle drag leave event.
+     */
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging.set(false);
+    }
+    /**
+     * Handle file drop.
+     */
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragging.set(false);
+        if (this.disabled())
+            return;
+        const files = event.dataTransfer?.files;
+        if (files && files.length > 0) {
+            this.fileSelected.emit(files[0]);
+        }
+    }
+    /**
+     * Trigger hidden file input click.
+     */
+    triggerFileInput() {
+        if (this.disabled())
+            return;
+        const ref = this.fileInputRef();
+        if (ref) {
+            ref.nativeElement.click();
+        }
+    }
+    /**
+     * Handle file selection from input.
+     */
+    onFileSelected(event) {
+        const input = getInputFromEvent$1(event);
+        if (!input)
+            return;
+        const files = input.files;
+        if (files && files.length > 0) {
+            this.fileSelected.emit(files[0]);
+        }
+        // Reset input so same file can be selected again
+        input.value = '';
+    }
+    /**
+     * Remove the pending file.
+     */
+    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: `
+		@if (pendingFile()) {
+			<!-- File selected preview -->
+			<div class="rounded-lg border border-mcms-border bg-mcms-card p-4">
+				<div class="flex items-center gap-4">
+					<mcms-media-preview [media]="previewData()" size="lg" />
+					<div class="min-w-0 flex-1">
+						<p class="truncate text-sm font-medium">{{ pendingFile()!.name }}</p>
+						<p class="text-xs text-mcms-muted-foreground">
+							{{ formatFileSize(pendingFile()!.size) }} &middot; {{ pendingFile()!.type }}
+						</p>
+						@if (isUploading()) {
+							<mcms-progress [value]="uploadProgress()" class="mt-2" />
+							<p class="mt-1 text-xs text-mcms-muted-foreground">
+								{{ uploadProgress() }}% uploaded
+							</p>
+						}
+					</div>
+					@if (!isUploading()) {
+						<button
+							mcms-button
+							variant="ghost"
+							size="sm"
+							type="button"
+							(click)="removeFile()"
+							aria-label="Remove selected file"
+						>
+							<ng-icon [name]="xMarkIcon" class="h-4 w-4" />
+						</button>
+					}
+				</div>
+			</div>
+		} @else if (existingMediaPreview()) {
+			<!-- Existing file preview (edit mode) -->
+			<div class="rounded-lg border border-mcms-border bg-mcms-card p-4">
+				<div class="flex items-center gap-4">
+					<mcms-media-preview [media]="existingMediaPreview()" size="lg" />
+					<div class="min-w-0 flex-1">
+						<p class="truncate text-sm font-medium">{{ existingFilename() }}</p>
+						<p class="text-xs text-mcms-muted-foreground">{{ existingMimeType() }}</p>
+					</div>
+					@if (!disabled()) {
+						<button
+							mcms-button
+							variant="ghost"
+							size="sm"
+							type="button"
+							(click)="triggerFileInput()"
+							aria-label="Replace file"
+						>
+							Replace
+						</button>
+					}
+				</div>
+				<input
+					#fileInput
+					type="file"
+					class="sr-only"
+					[accept]="acceptAttribute()"
+					[disabled]="disabled()"
+					(change)="onFileSelected($event)"
+					aria-label="Choose file to upload"
+				/>
+			</div>
+		} @else {
+			<!-- Drop zone -->
+			<div
+				class="relative rounded-lg border-2 border-dashed transition-colors"
+				[class.border-mcms-border]="!isDragging()"
+				[class.border-mcms-primary]="isDragging()"
+				[class.bg-mcms-primary/5]="isDragging()"
+				[class.cursor-pointer]="!disabled()"
+				[class.opacity-50]="disabled()"
+				tabindex="0"
+				role="button"
+				[attr.aria-disabled]="disabled()"
+				aria-label="Upload file. Drag and drop or click to browse."
+				(dragover)="onDragOver($event)"
+				(dragleave)="onDragLeave($event)"
+				(drop)="onDrop($event)"
+				(click)="triggerFileInput()"
+				(keydown.enter)="triggerFileInput()"
+				(keydown.space)="triggerFileInput()"
+			>
+				<div class="flex flex-col items-center justify-center gap-2 p-8">
+					<ng-icon [name]="uploadIcon" class="h-10 w-10 text-mcms-muted-foreground" aria-hidden="true" />
+					<div class="text-center">
+						<p class="text-sm font-medium">
+							@if (isDragging()) {
+								Drop file here
+							} @else {
+								Drag & drop or click to upload
+							}
+						</p>
+						@if (mimeTypesHint()) {
+							<p class="mt-1 text-xs text-mcms-muted-foreground">
+								{{ mimeTypesHint() }}
+							</p>
+						}
+						@if (maxSizeHint()) {
+							<p class="text-xs text-mcms-muted-foreground">
+								Max size: {{ maxSizeHint() }}
+							</p>
+						}
+					</div>
+				</div>
+				<input
+					#fileInput
+					type="file"
+					class="sr-only"
+					[accept]="acceptAttribute()"
+					[disabled]="disabled()"
+					(change)="onFileSelected($event)"
+					aria-label="Choose file to upload"
+				/>
+			</div>
+		}
+
+		@if (error()) {
+			<p class="mt-1 text-sm text-mcms-destructive">{{ error() }}</p>
+		}
+	`, 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", "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: [{
+            type: Component,
+            args: [{
+                    selector: 'mcms-collection-upload-zone',
+                    imports: [Button, Progress, NgIcon, MediaPreviewComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block mb-6' },
+                    template: `
+		@if (pendingFile()) {
+			<!-- File selected preview -->
+			<div class="rounded-lg border border-mcms-border bg-mcms-card p-4">
+				<div class="flex items-center gap-4">
+					<mcms-media-preview [media]="previewData()" size="lg" />
+					<div class="min-w-0 flex-1">
+						<p class="truncate text-sm font-medium">{{ pendingFile()!.name }}</p>
+						<p class="text-xs text-mcms-muted-foreground">
+							{{ formatFileSize(pendingFile()!.size) }} &middot; {{ pendingFile()!.type }}
+						</p>
+						@if (isUploading()) {
+							<mcms-progress [value]="uploadProgress()" class="mt-2" />
+							<p class="mt-1 text-xs text-mcms-muted-foreground">
+								{{ uploadProgress() }}% uploaded
+							</p>
+						}
+					</div>
+					@if (!isUploading()) {
+						<button
+							mcms-button
+							variant="ghost"
+							size="sm"
+							type="button"
+							(click)="removeFile()"
+							aria-label="Remove selected file"
+						>
+							<ng-icon [name]="xMarkIcon" class="h-4 w-4" />
+						</button>
+					}
+				</div>
+			</div>
+		} @else if (existingMediaPreview()) {
+			<!-- Existing file preview (edit mode) -->
+			<div class="rounded-lg border border-mcms-border bg-mcms-card p-4">
+				<div class="flex items-center gap-4">
+					<mcms-media-preview [media]="existingMediaPreview()" size="lg" />
+					<div class="min-w-0 flex-1">
+						<p class="truncate text-sm font-medium">{{ existingFilename() }}</p>
+						<p class="text-xs text-mcms-muted-foreground">{{ existingMimeType() }}</p>
+					</div>
+					@if (!disabled()) {
+						<button
+							mcms-button
+							variant="ghost"
+							size="sm"
+							type="button"
+							(click)="triggerFileInput()"
+							aria-label="Replace file"
+						>
+							Replace
+						</button>
+					}
+				</div>
+				<input
+					#fileInput
+					type="file"
+					class="sr-only"
+					[accept]="acceptAttribute()"
+					[disabled]="disabled()"
+					(change)="onFileSelected($event)"
+					aria-label="Choose file to upload"
+				/>
+			</div>
+		} @else {
+			<!-- Drop zone -->
+			<div
+				class="relative rounded-lg border-2 border-dashed transition-colors"
+				[class.border-mcms-border]="!isDragging()"
+				[class.border-mcms-primary]="isDragging()"
+				[class.bg-mcms-primary/5]="isDragging()"
+				[class.cursor-pointer]="!disabled()"
+				[class.opacity-50]="disabled()"
+				tabindex="0"
+				role="button"
+				[attr.aria-disabled]="disabled()"
+				aria-label="Upload file. Drag and drop or click to browse."
+				(dragover)="onDragOver($event)"
+				(dragleave)="onDragLeave($event)"
+				(drop)="onDrop($event)"
+				(click)="triggerFileInput()"
+				(keydown.enter)="triggerFileInput()"
+				(keydown.space)="triggerFileInput()"
+			>
+				<div class="flex flex-col items-center justify-center gap-2 p-8">
+					<ng-icon [name]="uploadIcon" class="h-10 w-10 text-mcms-muted-foreground" aria-hidden="true" />
+					<div class="text-center">
+						<p class="text-sm font-medium">
+							@if (isDragging()) {
+								Drop file here
+							} @else {
+								Drag & drop or click to upload
+							}
+						</p>
+						@if (mimeTypesHint()) {
+							<p class="mt-1 text-xs text-mcms-muted-foreground">
+								{{ mimeTypesHint() }}
+							</p>
+						}
+						@if (maxSizeHint()) {
+							<p class="text-xs text-mcms-muted-foreground">
+								Max size: {{ maxSizeHint() }}
+							</p>
+						}
+					</div>
+				</div>
+				<input
+					#fileInput
+					type="file"
+					class="sr-only"
+					[accept]="acceptAttribute()"
+					[disabled]="disabled()"
+					(change)="onFileSelected($event)"
+					aria-label="Choose file to upload"
+				/>
+			</div>
+		}
+
+		@if (error()) {
+			<p class="mt-1 text-sm text-mcms-destructive">{{ error() }}</p>
+		}
+	`,
+                }]
+        }], 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"] }] } });
+
+/**
+ * Entity Form Widget
+ *
+ * Dynamic form for create/edit operations using Angular Signal Forms.
+ *
+ * @example
+ * ```html
+ * <mcms-entity-form
+ *   [collection]="postsCollection"
+ *   entityId="123"
+ *   mode="edit"
+ *   (saved)="onSaved($event)"
+ *   (cancelled)="onCancel()"
+ * />
+ * ```
+ */
+class EntityFormWidget {
+    api = injectMomentumAPI();
+    injector = inject(Injector);
+    uploadService = inject(UploadService);
+    versionService = inject(VersionService);
+    collectionAccess = inject(CollectionAccessService);
+    feedback = inject(FeedbackService);
+    router = inject(Router);
+    liveAnnouncer = inject(LiveAnnouncer);
+    /** The collection configuration */
+    collection = input.required(...(ngDevMode ? [{ debugName: "collection" }] : []));
+    /** Entity ID for edit mode (undefined for create) */
+    entityId = input(undefined, ...(ngDevMode ? [{ debugName: "entityId" }] : []));
+    /** Form mode */
+    mode = input('create', ...(ngDevMode ? [{ debugName: "mode" }] : []));
+    /** Base path for navigation */
+    basePath = input('/admin/collections', ...(ngDevMode ? [{ debugName: "basePath" }] : []));
+    /** Whether to show breadcrumbs */
+    showBreadcrumbs = input(true, ...(ngDevMode ? [{ debugName: "showBreadcrumbs" }] : []));
+    /** When true, prevents router navigation after save/cancel (used in entity sheet) */
+    suppressNavigation = input(false, ...(ngDevMode ? [{ debugName: "suppressNavigation" }] : []));
+    /** When true, uses the global API instead of collection API (singleton mode) */
+    isGlobal = input(false, ...(ngDevMode ? [{ debugName: "isGlobal" }] : []));
+    /** The global slug (used when isGlobal is true) */
+    globalSlug = input(undefined, ...(ngDevMode ? [{ debugName: "globalSlug" }] : []));
+    /** Outputs */
+    saved = output();
+    cancelled = output();
+    saveError = output();
+    modeChange = output();
+    draftSaved = output();
+    /** Model signal — the single source of truth for form data */
+    formModel = signal({}, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
+    /** Alias for backward compatibility (CollectionEditPage reads formData) */
+    formData = this.formModel;
+    /** Signal forms tree — created once when collection is available */
+    entityForm = signal(null, ...(ngDevMode ? [{ debugName: "entityForm" }] : []));
+    /** Original data for edit mode */
+    originalData = signal(null, ...(ngDevMode ? [{ debugName: "originalData" }] : []));
+    /** UI state */
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
+    isSavingDraft = signal(false, ...(ngDevMode ? [{ debugName: "isSavingDraft" }] : []));
+    formError = signal(null, ...(ngDevMode ? [{ debugName: "formError" }] : []));
+    /** Upload collection state */
+    pendingFile = signal(null, ...(ngDevMode ? [{ debugName: "pendingFile" }] : []));
+    isUploadingFile = signal(false, ...(ngDevMode ? [{ debugName: "isUploadingFile" }] : []));
+    uploadFileProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadFileProgress" }] : []));
+    uploadFileError = signal(null, ...(ngDevMode ? [{ debugName: "uploadFileError" }] : []));
+    /** Whether the collection is an upload collection */
+    isUploadCol = computed(() => isUploadCollection(this.collection()), ...(ngDevMode ? [{ debugName: "isUploadCol" }] : []));
+    /** Whether the form has been set up */
+    formCreated = false;
+    /** Whether the form has unsaved changes (from signal forms dirty tracking) */
+    isDirty = computed(() => {
+        const ef = this.entityForm();
+        return ef ? ef().dirty() : false;
+    }, ...(ngDevMode ? [{ debugName: "isDirty" }] : []));
+    /** Computed collection label */
+    collectionLabel = computed(() => {
+        const col = this.collection();
+        return humanizeFieldName(col.labels?.plural || col.slug);
+    }, ...(ngDevMode ? [{ debugName: "collectionLabel" }] : []));
+    /** Computed collection label singular */
+    collectionLabelSingular = computed(() => {
+        const col = this.collection();
+        return humanizeFieldName(col.labels?.singular || col.slug);
+    }, ...(ngDevMode ? [{ debugName: "collectionLabelSingular" }] : []));
+    /** Dashboard path (remove /collections from base path) */
+    dashboardPath = computed(() => {
+        const base = this.basePath();
+        return base.replace(/\/collections$/, '');
+    }, ...(ngDevMode ? [{ debugName: "dashboardPath" }] : []));
+    /** Collection list path */
+    collectionListPath = computed(() => {
+        return `${this.basePath()}/${this.collection().slug}`;
+    }, ...(ngDevMode ? [{ debugName: "collectionListPath" }] : []));
+    /** Page title for breadcrumb */
+    pageTitle = computed(() => {
+        if (this.isGlobal()) {
+            return this.collectionLabelSingular();
+        }
+        const currentMode = this.mode();
+        if (currentMode === 'create') {
+            return `Create ${this.collectionLabelSingular()}`;
+        }
+        const data = this.formModel();
+        const titleFields = ['title', 'name', 'label', 'subject'];
+        for (const field of titleFields) {
+            if (data[field] && typeof data[field] === 'string') {
+                return data[field];
+            }
+        }
+        return `Edit ${this.collectionLabelSingular()}`;
+    }, ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
+    /** Visible fields (excluding hidden ones and those failing admin.condition) */
+    visibleFields = computed(() => {
+        const col = this.collection();
+        const data = this.formModel();
+        return col.fields.filter((field) => {
+            if (field.admin?.hidden)
+                return false;
+            if (field.admin?.condition && !field.admin.condition(data))
+                return false;
+            return true;
+        });
+    }, ...(ngDevMode ? [{ debugName: "visibleFields" }] : []));
+    /** Whether user can edit */
     canEdit = computed(() => {
         return this.collectionAccess.canUpdate(this.collection().slug);
     }, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
@@ -4364,9 +5070,62 @@ class EntityFormWidget {
             this.isLoading.set(false);
         }
     }
+    /**
+     * Handle file selected in the upload zone.
+     * Auto-populates metadata fields in the form model.
+     */
+    onFileSelected(file) {
+        this.pendingFile.set(file);
+        this.uploadFileError.set(null);
+        // Validate file against collection upload config
+        const uploadConfig = this.collection().upload;
+        if (uploadConfig) {
+            // Validate size
+            if (uploadConfig.maxFileSize && file.size > uploadConfig.maxFileSize) {
+                this.uploadFileError.set(`File size exceeds maximum allowed size`);
+                this.pendingFile.set(null);
+                return;
+            }
+            // Validate MIME type
+            if (uploadConfig.mimeTypes && uploadConfig.mimeTypes.length > 0) {
+                const isAllowed = uploadConfig.mimeTypes.some((pattern) => {
+                    if (pattern.endsWith('/*')) {
+                        const prefix = pattern.slice(0, -1);
+                        return file.type.startsWith(prefix);
+                    }
+                    return file.type === pattern;
+                });
+                if (!isAllowed) {
+                    this.uploadFileError.set(`File type "${file.type}" is not allowed`);
+                    this.pendingFile.set(null);
+                    return;
+                }
+            }
+        }
+        // Auto-populate metadata fields in form model
+        const data = { ...this.formModel() };
+        data['filename'] = file.name;
+        data['mimeType'] = file.type;
+        data['filesize'] = file.size;
+        this.formModel.set(data);
+    }
+    /**
+     * Handle file removed from the upload zone.
+     */
+    onFileRemoved() {
+        this.pendingFile.set(null);
+        this.uploadFileError.set(null);
+        // Clear auto-populated metadata
+        const data = { ...this.formModel() };
+        data['filename'] = '';
+        data['mimeType'] = '';
+        data['filesize'] = null;
+        this.formModel.set(data);
+    }
     /**
      * Handle form submission using Angular Signal Forms submit().
      * submit() marks all fields as touched, then only calls the callback if valid.
+     * For upload collections with a pending file, uses multipart upload via UploadService.
      */
     async onSubmit() {
         const ef = this.entityForm();
@@ -4379,7 +5138,7 @@ class EntityFormWidget {
             this.formError.set(null);
             try {
                 const slug = this.collection().slug;
-                const data = this.formModel();
+                const data = this.normalizeUploadFieldValues(this.formModel());
                 let result;
                 if (this.isGlobal()) {
                     // Global mode: always update (singleton)
@@ -4387,6 +5146,10 @@ class EntityFormWidget {
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                     result = await this.api.global(gSlug).update(data);
                 }
+                else if (this.isUploadCol() && this.pendingFile()) {
+                    // Upload collection with a pending file: multipart upload
+                    result = await this.submitUploadCollection(slug, data);
+                }
                 else if (this.mode() === 'create') {
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                     result = await this.api.collection(slug).create(data);
@@ -4400,6 +5163,7 @@ class EntityFormWidget {
                 }
                 this.originalData.set(result);
                 this.formModel.set({ ...result });
+                this.pendingFile.set(null);
                 ef().reset();
                 this.saved.emit(result);
                 if (!this.suppressNavigation() && !this.isGlobal()) {
@@ -4415,6 +5179,7 @@ class EntityFormWidget {
             }
             finally {
                 this.isSubmitting.set(false);
+                this.isUploadingFile.set(false);
             }
         });
         // submit() didn't call the callback — form is invalid
@@ -4423,6 +5188,85 @@ class EntityFormWidget {
             void this.liveAnnouncer.announce('Form submission failed. Please fix the errors above before submitting.', 'assertive');
         }
     }
+    /**
+     * For upload/relationship fields, the form may store a full document object
+     * (e.g., after upload completes) but the DB expects just the UUID.
+     * Extract the `id` property from any upload field values that are objects.
+     */
+    normalizeUploadFieldValues(data) {
+        const fields = this.collection().fields;
+        const result = { ...data };
+        for (const field of fields) {
+            if (field.type === 'upload' && result[field.name] != null) {
+                const val = result[field.name];
+                if (typeof val === 'object' && val !== null) {
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    const obj = val; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+                    if (typeof obj['id'] === 'string') {
+                        result[field.name] = obj['id'];
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    /**
+     * Submit an upload collection form with file via multipart.
+     * Converts non-file form fields to string key-value pairs for the FormData.
+     */
+    submitUploadCollection(slug, data) {
+        return new Promise((resolve, reject) => {
+            const file = this.pendingFile();
+            if (!file) {
+                reject(new Error('No file selected'));
+                return;
+            }
+            // Convert form data to string fields for FormData
+            // Exclude auto-populated file metadata fields (they come from the server)
+            const excludeFields = new Set([
+                'filename', 'mimeType', 'filesize', 'path', 'url',
+                'id', 'createdAt', 'updatedAt',
+            ]);
+            const fields = {};
+            for (const [key, value] of Object.entries(data)) {
+                if (excludeFields.has(key))
+                    continue;
+                if (value === null || value === undefined || value === '')
+                    continue;
+                if (typeof value === 'object') {
+                    // Skip empty objects/arrays; serialize non-empty ones as JSON
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    const isEmptyObject = !Array.isArray(value) && Object.keys(value).length === 0;
+                    if ((Array.isArray(value) && value.length === 0) || isEmptyObject)
+                        continue;
+                    fields[key] = JSON.stringify(value);
+                }
+                else {
+                    fields[key] = String(value);
+                }
+            }
+            this.isUploadingFile.set(true);
+            this.uploadFileProgress.set(0);
+            this.uploadService.uploadToCollection(slug, file, fields).subscribe({
+                next: (progress) => {
+                    this.uploadFileProgress.set(progress.progress);
+                    if (progress.status === 'complete' && progress.result) {
+                        this.isUploadingFile.set(false);
+                        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                        resolve(progress.result);
+                    }
+                    else if (progress.status === 'error') {
+                        this.isUploadingFile.set(false);
+                        reject(new Error(progress.error ?? 'Upload failed'));
+                    }
+                },
+                error: (err) => {
+                    this.isUploadingFile.set(false);
+                    reject(err);
+                },
+            });
+        });
+    }
     /**
      * Handle cancel.
      */
@@ -4532,6 +5376,20 @@ class EntityFormWidget {
 							</mcms-alert>
 						}
 
+						@if (isUploadCol()) {
+							<mcms-collection-upload-zone
+								[uploadConfig]="collection().upload"
+								[pendingFile]="pendingFile()"
+								[existingMedia]="mode() === 'edit' && !pendingFile() ? formModel() : null"
+								[disabled]="mode() === 'view'"
+								[isUploading]="isUploadingFile()"
+								[uploadProgress]="uploadFileProgress()"
+								[error]="uploadFileError()"
+								(fileSelected)="onFileSelected($event)"
+								(fileRemoved)="onFileRemoved()"
+							/>
+						}
+
 						<div class="space-y-6">
 							@for (field of visibleFields(); track field.name) {
 								<mcms-field-renderer
@@ -4600,7 +5458,7 @@ 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"] }], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: EntityFormWidget, decorators: [{
             type: Component,
@@ -4618,6 +5476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         BreadcrumbItem,
                         BreadcrumbSeparator,
                         VersionHistoryWidget,
+                        CollectionUploadZoneComponent,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
@@ -4679,6 +5538,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 							</mcms-alert>
 						}
 
+						@if (isUploadCol()) {
+							<mcms-collection-upload-zone
+								[uploadConfig]="collection().upload"
+								[pendingFile]="pendingFile()"
+								[existingMedia]="mode() === 'edit' && !pendingFile() ? formModel() : null"
+								[disabled]="mode() === 'view'"
+								[isUploading]="isUploadingFile()"
+								[uploadProgress]="uploadFileProgress()"
+								[error]="uploadFileError()"
+								(fileSelected)="onFileSelected($event)"
+								(fileRemoved)="onFileRemoved()"
+							/>
+						}
+
 						<div class="space-y-6">
 							@for (field of visibleFields(); track field.name) {
 								<mcms-field-renderer
@@ -5087,15 +5960,33 @@ class EntityViewWidget {
         const e = this.entity();
         if (!e || !col.admin?.preview)
             return null;
-        if (typeof col.admin.preview === 'function') {
+        const preview = col.admin.preview;
+        if (typeof preview === 'function') {
             try {
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- T extends Entity with index signature
-                return col.admin.preview(e);
+                return preview(e);
             }
             catch {
                 return null;
             }
         }
+        // String template: interpolate {fieldName} placeholders with entity data
+        if (typeof preview === 'string') {
+            let hasEmpty = false;
+            const url = preview.replace(/\{(\w+)\}/g, (_, field) => {
+                const val = e[field];
+                if (val == null || val === '') {
+                    hasEmpty = true;
+                    return '';
+                }
+                return String(val);
+            });
+            return hasEmpty ? null : url;
+        }
+        // Boolean true: use the server-rendered preview API endpoint
+        if (preview === true) {
+            return `/api/${col.slug}/${String(e.id)}/preview`;
+        }
         return null;
     }, ...(ngDevMode ? [{ debugName: "previewUrl" }] : []));
     constructor() {
@@ -5327,44 +6218,64 @@ class EntityViewWidget {
         this.loadEntity(this.collection().slug, this.entityId());
     }
     /**
-     * Resolve relationship field values from IDs to display labels.
+     * Resolve relationship and upload field values from IDs to display labels.
      */
     resolveRelationships(entity) {
         const fields = this.collection().fields;
         const resolved = new Map();
         const promises = [];
         for (const field of fields) {
-            if (field.type !== 'relationship')
-                continue;
-            const rawValue = entity[field.name];
-            if (!rawValue || typeof rawValue !== 'string')
-                continue;
-            const config = field.collection();
-            if (!isRecord(config) || typeof config['slug'] !== 'string')
-                continue;
-            const relSlug = config['slug'];
-            const titleField = getTitleField(config);
-            promises.push(this.api
-                .collection(relSlug)
-                .findById(rawValue)
-                .then((doc) => {
-                if (doc) {
-                    if (titleField !== 'id') {
-                        const titleValue = doc[titleField];
-                        if (typeof titleValue === 'string') {
-                            resolved.set(field.name, titleValue);
-                            return;
+            if (field.type === 'relationship') {
+                const rawValue = entity[field.name];
+                if (!rawValue || typeof rawValue !== 'string')
+                    continue;
+                const config = field.collection();
+                if (!isRecord(config) || typeof config['slug'] !== 'string')
+                    continue;
+                const relSlug = config['slug'];
+                const titleField = getTitleField(config);
+                promises.push(this.api
+                    .collection(relSlug)
+                    .findById(rawValue)
+                    .then((doc) => {
+                    if (doc) {
+                        if (titleField !== 'id') {
+                            const titleValue = doc[titleField];
+                            if (typeof titleValue === 'string') {
+                                resolved.set(field.name, titleValue);
+                                return;
+                            }
                         }
+                        resolved.set(field.name, String(doc['id'] ?? rawValue));
                     }
-                    resolved.set(field.name, String(doc['id'] ?? rawValue));
-                }
-                else {
+                    else {
+                        resolved.set(field.name, 'Unknown');
+                    }
+                })
+                    .catch(() => {
                     resolved.set(field.name, 'Unknown');
-                }
-            })
-                .catch(() => {
-                resolved.set(field.name, 'Unknown');
-            }));
+                }));
+            }
+            else if (field.type === 'upload') {
+                const rawValue = entity[field.name];
+                if (!rawValue || typeof rawValue !== 'string')
+                    continue;
+                const relSlug = field.relationTo;
+                promises.push(this.api
+                    .collection(relSlug)
+                    .findById(rawValue)
+                    .then((doc) => {
+                    if (doc && typeof doc['filename'] === 'string') {
+                        resolved.set(field.name, doc['filename']);
+                    }
+                    else {
+                        resolved.set(field.name, rawValue);
+                    }
+                })
+                    .catch(() => {
+                    resolved.set(field.name, rawValue);
+                }));
+            }
         }
         if (promises.length > 0) {
             Promise.all(promises).then(() => {
@@ -5890,6 +6801,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 }]
         }] });
 
+const DEFAULT_GROUP = 'Collections';
+/**
+ * Slugify a group name into a valid HTML id attribute value.
+ * Lowercases, replaces non-alphanumeric runs with hyphens, trims leading/trailing hyphens.
+ */
+function slugify(name) {
+    return name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '');
+}
+/**
+ * Group collections by their `admin.group` field.
+ * Named groups appear first (in order of first appearance), the default "Collections" group last.
+ * Each group includes a slugified `id` safe for use as an HTML id attribute.
+ */
+function groupCollections(collections) {
+    const groupMap = new Map();
+    for (const c of collections) {
+        const name = c.admin?.group ?? DEFAULT_GROUP;
+        const list = groupMap.get(name) ?? [];
+        list.push(c);
+        groupMap.set(name, list);
+    }
+    const groups = [];
+    for (const [name, colls] of groupMap) {
+        if (name !== DEFAULT_GROUP) {
+            groups.push({ id: `group-${slugify(name)}`, name, collections: colls });
+        }
+    }
+    const defaultGroup = groupMap.get(DEFAULT_GROUP);
+    if (defaultGroup) {
+        groups.push({
+            id: `group-${slugify(DEFAULT_GROUP)}`,
+            name: DEFAULT_GROUP,
+            collections: defaultGroup,
+        });
+    }
+    return groups;
+}
+
 /**
  * Admin Sidebar Widget
  *
@@ -5935,27 +6887,7 @@ class AdminSidebarWidget {
     /** Computed collections base path */
     collectionsBasePath = computed(() => `${this.basePath()}/collections`, ...(ngDevMode ? [{ debugName: "collectionsBasePath" }] : []));
     /** Collections grouped by admin.group field */
-    collectionGroups = computed(() => {
-        const collections = this.collections();
-        const DEFAULT_GROUP = 'Collections';
-        const groupMap = new Map();
-        for (const c of collections) {
-            const name = c.admin?.group ?? DEFAULT_GROUP;
-            const list = groupMap.get(name) ?? [];
-            list.push(c);
-            groupMap.set(name, list);
-        }
-        // Named groups first (in order of first appearance), default last
-        const groups = [];
-        for (const [name, colls] of groupMap) {
-            if (name !== DEFAULT_GROUP)
-                groups.push({ name, collections: colls });
-        }
-        const defaultGroup = groupMap.get(DEFAULT_GROUP);
-        if (defaultGroup)
-            groups.push({ name: DEFAULT_GROUP, collections: defaultGroup });
-        return groups;
-    }, ...(ngDevMode ? [{ debugName: "collectionGroups" }] : []));
+    collectionGroups = computed(() => groupCollections(this.collections()), ...(ngDevMode ? [{ debugName: "collectionGroups" }] : []));
     /** Globals grouped by admin.group field */
     globalGroups = computed(() => {
         const globals = this.globals();
@@ -6109,7 +7041,7 @@ class AdminSidebarWidget {
 					/>
 
 					<!-- Collection Sections (grouped by admin.group) -->
-					@for (group of collectionGroups(); track group.name) {
+					@for (group of collectionGroups(); track group.id) {
 						<mcms-sidebar-section [title]="group.name">
 							@for (collection of group.collections; track collection.slug) {
 								<mcms-sidebar-nav-item
@@ -6147,6 +7079,7 @@ class AdminSidebarWidget {
 									[label]="route.label"
 									[href]="basePath() + '/' + route.path"
 									[icon]="route.icon"
+									[exact]="true"
 								/>
 							}
 						</mcms-sidebar-section>
@@ -6280,7 +7213,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 					/>
 
 					<!-- Collection Sections (grouped by admin.group) -->
-					@for (group of collectionGroups(); track group.name) {
+					@for (group of collectionGroups(); track group.id) {
 						<mcms-sidebar-section [title]="group.name">
 							@for (collection of group.collections; track collection.slug) {
 								<mcms-sidebar-nav-item
@@ -6318,6 +7251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 									[label]="route.label"
 									[href]="basePath() + '/' + route.path"
 									[icon]="route.icon"
+									[exact]="true"
 								/>
 							}
 						</mcms-sidebar-section>
@@ -7417,6 +8351,8 @@ class DashboardPage {
         // Filter to only accessible, non-hidden collections
         return all.filter((c) => !c.admin?.hidden && accessible.includes(c.slug));
     }, ...(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: `
 		<header class="mb-10">
@@ -7424,41 +8360,50 @@ class DashboardPage {
 			<p class="text-muted-foreground mt-3 text-lg">Manage your content and collections</p>
 		</header>
 
-		<section>
-			<h2 class="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
-				Collections
-			</h2>
-			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-				@for (collection of collections(); track collection.slug) {
-					<mcms-collection-card [collection]="collection" [basePath]="basePath" />
-				} @empty {
-					<div
-						class="col-span-full flex flex-col items-center justify-center p-16 bg-card/50 rounded-xl border border-dashed border-border/60"
-					>
-						<div class="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
-							<svg
-								aria-hidden="true"
-								class="w-8 h-8 text-muted-foreground"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="1.5"
-									d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-								/>
-							</svg>
-						</div>
-						<p class="text-foreground font-medium text-lg">No collections configured</p>
-						<p class="text-sm text-muted-foreground mt-2 text-center max-w-sm">
-							Add collections to your configuration to start managing content.
-						</p>
+		@if (collectionGroups().length === 0) {
+			<section aria-label="Collections">
+				<div
+					class="flex flex-col items-center justify-center p-16 bg-card/50 rounded-xl border border-dashed border-border/60"
+				>
+					<div class="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
+						<svg
+							aria-hidden="true"
+							class="w-8 h-8 text-muted-foreground"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="1.5"
+								d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+							/>
+						</svg>
 					</div>
-				}
-			</div>
-		</section>
+					<p class="text-foreground font-medium text-lg">No collections configured</p>
+					<p class="text-sm text-muted-foreground mt-2 text-center max-w-sm">
+						Add collections to your configuration to start managing content.
+					</p>
+				</div>
+			</section>
+		} @else {
+			@for (group of collectionGroups(); track group.id) {
+				<section class="mb-10" [attr.aria-labelledby]="group.id">
+					<h2
+						[id]="group.id"
+						class="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4"
+					>
+						{{ group.name }}
+					</h2>
+					<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+						@for (collection of group.collections; track collection.slug) {
+							<mcms-collection-card [collection]="collection" [basePath]="basePath" />
+						}
+					</div>
+				</section>
+			}
+		}
 	`, 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: [{
@@ -7474,41 +8419,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 			<p class="text-muted-foreground mt-3 text-lg">Manage your content and collections</p>
 		</header>
 
-		<section>
-			<h2 class="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
-				Collections
-			</h2>
-			<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-				@for (collection of collections(); track collection.slug) {
-					<mcms-collection-card [collection]="collection" [basePath]="basePath" />
-				} @empty {
-					<div
-						class="col-span-full flex flex-col items-center justify-center p-16 bg-card/50 rounded-xl border border-dashed border-border/60"
+		@if (collectionGroups().length === 0) {
+			<section aria-label="Collections">
+				<div
+					class="flex flex-col items-center justify-center p-16 bg-card/50 rounded-xl border border-dashed border-border/60"
+				>
+					<div class="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
+						<svg
+							aria-hidden="true"
+							class="w-8 h-8 text-muted-foreground"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="1.5"
+								d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+							/>
+						</svg>
+					</div>
+					<p class="text-foreground font-medium text-lg">No collections configured</p>
+					<p class="text-sm text-muted-foreground mt-2 text-center max-w-sm">
+						Add collections to your configuration to start managing content.
+					</p>
+				</div>
+			</section>
+		} @else {
+			@for (group of collectionGroups(); track group.id) {
+				<section class="mb-10" [attr.aria-labelledby]="group.id">
+					<h2
+						[id]="group.id"
+						class="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4"
 					>
-						<div class="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
-							<svg
-								aria-hidden="true"
-								class="w-8 h-8 text-muted-foreground"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="1.5"
-									d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-								/>
-							</svg>
-						</div>
-						<p class="text-foreground font-medium text-lg">No collections configured</p>
-						<p class="text-sm text-muted-foreground mt-2 text-center max-w-sm">
-							Add collections to your configuration to start managing content.
-						</p>
+						{{ group.name }}
+					</h2>
+					<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+						@for (collection of group.collections; track collection.slug) {
+							<mcms-collection-card [collection]="collection" [basePath]="basePath" />
+						}
 					</div>
-				}
-			</div>
-		</section>
+				</section>
+			}
+		}
 	`,
                 }]
         }] });
@@ -8864,15 +9818,109 @@ var collectionList_page = /*#__PURE__*/Object.freeze({
     CollectionListPage: CollectionListPage
 });
 
+/**
+ * Collection View Page Component
+ *
+ * Displays a read-only view of a document using the EntityViewWidget.
+ * Preview is available via the "Open Page" link in the entity header
+ * (opens in a new tab). Live preview iframe is only on the edit page,
+ * since the view page is read-only and has no changes to preview live.
+ */
+class CollectionViewPage {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    basePath = '/admin/collections';
+    // Reactive slug signal that updates when route params change
+    slug = toSignal(this.route.paramMap.pipe(map((params) => params.get('slug') ?? '')), { initialValue: this.route.snapshot.paramMap.get('slug') ?? '' });
+    // Reactive entity ID signal
+    entityId = toSignal(this.route.paramMap.pipe(map((params) => params.get('id') ?? '')), {
+        initialValue: this.route.snapshot.paramMap.get('id') ?? '',
+    });
+    collection = computed(() => {
+        const currentSlug = this.slug();
+        if (!currentSlug)
+            return undefined;
+        const collections = getCollectionsFromRouteData(this.route.parent?.snapshot.data);
+        return collections.find((c) => c.slug === currentSlug);
+    }, ...(ngDevMode ? [{ debugName: "collection" }] : []));
+    onEdit(entity) {
+        const col = this.collection();
+        if (col) {
+            this.router.navigate([this.basePath, col.slug, entity.id, 'edit']);
+        }
+    }
+    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: `
+		@if (collection(); as col) {
+			@if (entityId(); as id) {
+				<mcms-entity-view
+					[collection]="col"
+					[entityId]="id"
+					[basePath]="basePath"
+					(edit)="onEdit($event)"
+					(delete_)="onDelete($event)"
+				/>
+			} @else {
+				<div class="p-12 text-center text-muted-foreground">Entity ID not provided</div>
+			}
+		} @else {
+			<div class="p-12 text-center text-muted-foreground">Collection not found</div>
+		}
+	`, isInline: true, dependencies: [{ kind: "component", type: EntityViewWidget, selector: "mcms-entity-view", inputs: ["collection", "entityId", "basePath", "showBreadcrumbs", "fieldConfigs", "actions", "showVersionHistory", "suppressNavigation"], outputs: ["edit", "statusChanged", "delete_", "actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: CollectionViewPage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mcms-collection-view',
+                    imports: [EntityViewWidget],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+		@if (collection(); as col) {
+			@if (entityId(); as id) {
+				<mcms-entity-view
+					[collection]="col"
+					[entityId]="id"
+					[basePath]="basePath"
+					(edit)="onEdit($event)"
+					(delete_)="onDelete($event)"
+				/>
+			} @else {
+				<div class="p-12 text-center text-muted-foreground">Entity ID not provided</div>
+			}
+		} @else {
+			<div class="p-12 text-center text-muted-foreground">Collection not found</div>
+		}
+	`,
+                }]
+        }] });
+
+var collectionView_page = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CollectionViewPage: CollectionViewPage
+});
+
 /**
  * Live Preview Widget
  *
  * Displays an iframe that shows a live preview of the document being edited.
- * Sends form data to the iframe via postMessage on each change.
+ *
+ * Two modes based on preview config type:
+ * - `preview: true` (server-rendered HTML): iframe loads API endpoint with scripts enabled
+ *   for postMessage live updates.
+ * - `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.
+ *   Use the Refresh button to see form changes reflected in the preview.
+ *
+ * The iframe is declared statically in the template (no dynamic bindings) to avoid NG0910.
+ * Its src/sandbox attributes are set via nativeElement in an effect().
  */
 class LivePreviewComponent {
     document = inject(DOCUMENT);
-    sanitizer = inject(DomSanitizer);
     destroyRef = inject(DestroyRef);
     /** Preview configuration from collection admin config */
     preview = input.required(...(ngDevMode ? [{ debugName: "preview" }] : []));
@@ -8888,8 +9936,8 @@ class LivePreviewComponent {
     deviceSize = signal('desktop', ...(ngDevMode ? [{ debugName: "deviceSize" }] : []));
     /** Refresh counter to force iframe reload */
     refreshCounter = signal(0, ...(ngDevMode ? [{ debugName: "refreshCounter" }] : []));
-    /** Reference to the iframe element */
-    previewFrame = viewChild('previewFrame', ...(ngDevMode ? [{ debugName: "previewFrame" }] : []));
+    /** Reference to the static iframe element (available when previewUrl is non-null) */
+    previewIframe = viewChild('previewIframe', ...(ngDevMode ? [{ debugName: "previewIframe" }] : []));
     /** Compute the raw preview URL */
     previewUrl = computed(() => {
         // Force recomputation on refresh
@@ -8906,18 +9954,25 @@ class LivePreviewComponent {
                 return null;
             }
         }
+        // URL template string: interpolate {fieldName} placeholders with form data
+        // Return null if any placeholder resolves to empty (data not yet loaded)
+        if (typeof previewConfig === 'string') {
+            let hasEmptyField = false;
+            const url = previewConfig.replace(/\{(\w+)\}/g, (_, field) => {
+                const val = data[field];
+                if (val == null || val === '') {
+                    hasEmptyField = true;
+                    return '';
+                }
+                return String(val);
+            });
+            return hasEmptyField ? null : url;
+        }
         if (previewConfig === true && id) {
             return `/api/${slug}/${id}/preview`;
         }
         return null;
     }, ...(ngDevMode ? [{ debugName: "previewUrl" }] : []));
-    /** Sanitized preview URL for iframe binding */
-    safePreviewUrl = computed(() => {
-        const url = this.previewUrl();
-        if (!url)
-            return null;
-        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
-    }, ...(ngDevMode ? [{ debugName: "safePreviewUrl" }] : []));
     /** Computed iframe width based on device size */
     iframeWidth = computed(() => {
         switch (this.deviceSize()) {
@@ -8929,21 +9984,57 @@ class LivePreviewComponent {
                 return '100%';
         }
     }, ...(ngDevMode ? [{ debugName: "iframeWidth" }] : []));
+    /** Sandbox attribute value based on preview mode */
+    sandboxValue = computed(() => {
+        const previewConfig = this.preview();
+        if (previewConfig === true) {
+            // Server-rendered HTML: scripts needed for postMessage live updates
+            return 'allow-same-origin allow-scripts allow-popups allow-forms';
+        }
+        // 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 */
     debounceTimer = undefined;
     constructor() {
-        // Send form data to iframe via postMessage whenever data changes
+        // 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.
+        effect(() => {
+            const iframeRef = this.previewIframe();
+            if (!iframeRef)
+                return;
+            const iframe = iframeRef.nativeElement;
+            const url = this.previewUrl();
+            if (!url)
+                return;
+            iframe.setAttribute('sandbox', this.sandboxValue());
+            iframe.src = url;
+            // Set initial width without tracking the signal
+            iframe.style.width = untracked(() => this.iframeWidth());
+        });
+        // Effect 2: Update iframe width only (no reload).
+        // Changing CSS width on an iframe does not trigger navigation.
+        effect(() => {
+            const iframeRef = this.previewIframe();
+            if (!iframeRef)
+                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(() => {
             const data = this.documentData();
-            const frame = this.previewFrame();
-            if (!frame?.nativeElement?.contentWindow)
+            const iframeRef = this.previewIframe();
+            if (!iframeRef?.nativeElement.contentWindow)
                 return;
             // Debounce to avoid thrashing
             if (this.debounceTimer) {
                 clearTimeout(this.debounceTimer);
             }
             this.debounceTimer = this.document.defaultView?.setTimeout(() => {
-                const iframeWindow = frame.nativeElement.contentWindow;
+                const iframeWindow = iframeRef.nativeElement.contentWindow;
                 if (iframeWindow) {
                     const targetOrigin = this.document.defaultView?.location?.origin ?? '';
                     iframeWindow.postMessage({ type: 'momentum-preview-update', data }, targetOrigin);
@@ -8979,7 +10070,7 @@ class LivePreviewComponent {
         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: "previewFrame", first: true, predicate: ["previewFrame"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    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: `
 		<!-- 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>
@@ -9047,15 +10138,14 @@ class LivePreviewComponent {
 
 		<!-- Preview iframe container -->
 		<div class="flex-1 overflow-auto bg-muted/30 flex justify-center p-4">
-			@if (safePreviewUrl(); as url) {
+			@if (previewUrl()) {
+				<!-- Static iframe with no dynamic bindings (avoids NG0910).
+				     src/sandbox/width are set via nativeElement in an effect(). -->
 				<iframe
-					#previewFrame
-					[src]="url"
-					[style.width]="iframeWidth()"
-					class="h-full bg-white border border-border rounded-md shadow-sm transition-[width] duration-300"
-					sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+					#previewIframe
 					title="Live document preview"
 					data-testid="preview-iframe"
+					class="h-full bg-white border border-border rounded-md shadow-sm transition-[width] duration-300"
 				></iframe>
 			} @else {
 				<div class="flex items-center justify-center h-full text-muted-foreground text-sm">
@@ -9133,255 +10223,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 				(click)="refreshPreview()"
 				data-testid="preview-refresh"
 				aria-label="Refresh preview"
-			>
-				↻ Refresh
-			</button>
-		</div>
-
-		<!-- Preview iframe container -->
-		<div class="flex-1 overflow-auto bg-muted/30 flex justify-center p-4">
-			@if (safePreviewUrl(); as url) {
-				<iframe
-					#previewFrame
-					[src]="url"
-					[style.width]="iframeWidth()"
-					class="h-full bg-white border border-border rounded-md shadow-sm transition-[width] duration-300"
-					sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-					title="Live document preview"
-					data-testid="preview-iframe"
-				></iframe>
-			} @else {
-				<div class="flex items-center justify-center h-full text-muted-foreground text-sm">
-					Preview not available
-				</div>
-			}
-		</div>
-	`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: true }] }], documentData: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentData", required: true }] }], collectionSlug: [{ type: i0.Input, args: [{ isSignal: true, alias: "collectionSlug", required: true }] }], entityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityId", required: false }] }], editBlockRequest: [{ type: i0.Output, args: ["editBlockRequest"] }], previewFrame: [{ type: i0.ViewChild, args: ['previewFrame', { isSignal: true }] }] } });
-
-/**
- * Collection View Page Component
- *
- * Displays a read-only view of a document using the EntityViewWidget.
- * When preview is enabled, shows a toggleable live preview panel.
- */
-class CollectionViewPage {
-    route = inject(ActivatedRoute);
-    router = inject(Router);
-    basePath = '/admin/collections';
-    /** Whether the live preview panel is visible */
-    showPreview = signal(true, ...(ngDevMode ? [{ debugName: "showPreview" }] : []));
-    /** Reference to the entity view widget to read its entity data */
-    entityViewRef = viewChild('entityView', ...(ngDevMode ? [{ debugName: "entityViewRef" }] : []));
-    // Reactive slug signal that updates when route params change
-    slug = toSignal(this.route.paramMap.pipe(map((params) => params.get('slug') ?? '')), { initialValue: this.route.snapshot.paramMap.get('slug') ?? '' });
-    // Reactive entity ID signal
-    entityId = toSignal(this.route.paramMap.pipe(map((params) => params.get('id') ?? '')), {
-        initialValue: this.route.snapshot.paramMap.get('id') ?? '',
-    });
-    collection = computed(() => {
-        const currentSlug = this.slug();
-        if (!currentSlug)
-            return undefined;
-        const collections = getCollectionsFromRouteData(this.route.parent?.snapshot.data);
-        return collections.find((c) => c.slug === currentSlug);
-    }, ...(ngDevMode ? [{ debugName: "collection" }] : []));
-    /** Preview config from collection admin settings */
-    previewConfig = computed(() => {
-        const col = this.collection();
-        return col?.admin?.preview || undefined;
-    }, ...(ngDevMode ? [{ debugName: "previewConfig" }] : []));
-    /** Entity data from the entity view widget (for live preview) */
-    viewEntityData = computed(() => {
-        const view = this.entityViewRef();
-        const entity = view?.entity();
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- T extends Entity with index signature
-        return entity ?? {};
-    }, ...(ngDevMode ? [{ debugName: "viewEntityData" }] : []));
-    onEdit(entity) {
-        const col = this.collection();
-        if (col) {
-            this.router.navigate([this.basePath, col.slug, entity.id, 'edit']);
-        }
-    }
-    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" }, viewQueries: [{ propertyName: "entityViewRef", first: true, predicate: ["entityView"], descendants: true, isSignal: true }], ngImport: i0, template: `
-		@if (collection(); as col) {
-			@if (entityId(); as id) {
-				@if (previewConfig(); as preview) {
-					@if (showPreview()) {
-						<!-- Split layout: entity view + preview -->
-						<div class="flex gap-0 h-[calc(100vh-64px)]" data-testid="preview-layout">
-							<div class="flex-1 overflow-y-auto p-6">
-								<mcms-entity-view
-									#entityView
-									[collection]="col"
-									[entityId]="id"
-									[basePath]="basePath"
-									(edit)="onEdit($event)"
-									(delete_)="onDelete($event)"
-								>
-									<div entityViewHeaderExtra class="mt-3">
-										<button
-											mcms-button
-											variant="ghost"
-											size="sm"
-											data-testid="preview-toggle"
-											(click)="showPreview.set(false)"
-										>
-											Hide Preview
-										</button>
-									</div>
-								</mcms-entity-view>
-							</div>
-							<div class="w-[50%] min-w-[400px] max-w-[720px]">
-								<mcms-live-preview
-									[preview]="preview"
-									[documentData]="viewEntityData()"
-									[collectionSlug]="col.slug"
-									[entityId]="id"
-								/>
-							</div>
-						</div>
-					} @else {
-						<!-- Full-width view (preview hidden) -->
-						<mcms-entity-view
-							#entityView
-							[collection]="col"
-							[entityId]="id"
-							[basePath]="basePath"
-							(edit)="onEdit($event)"
-							(delete_)="onDelete($event)"
-						>
-							<div entityViewHeaderExtra class="mt-3">
-								<button
-									mcms-button
-									variant="ghost"
-									size="sm"
-									data-testid="preview-toggle"
-									(click)="showPreview.set(true)"
-								>
-									Show Preview
-								</button>
-							</div>
-						</mcms-entity-view>
-					}
-				} @else {
-					<!-- No preview configured -->
-					<mcms-entity-view
-						#entityView
-						[collection]="col"
-						[entityId]="id"
-						[basePath]="basePath"
-						(edit)="onEdit($event)"
-						(delete_)="onDelete($event)"
-					/>
-				}
-			} @else {
-				<div class="p-12 text-center text-muted-foreground">Entity ID not provided</div>
-			}
-		} @else {
-			<div class="p-12 text-center text-muted-foreground">Collection not found</div>
-		}
-	`, isInline: true, dependencies: [{ kind: "component", type: EntityViewWidget, selector: "mcms-entity-view", inputs: ["collection", "entityId", "basePath", "showBreadcrumbs", "fieldConfigs", "actions", "showVersionHistory", "suppressNavigation"], outputs: ["edit", "statusChanged", "delete_", "actionClick"] }, { 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: CollectionViewPage, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'mcms-collection-view',
-                    imports: [EntityViewWidget, LivePreviewComponent, Button],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'block' },
-                    template: `
-		@if (collection(); as col) {
-			@if (entityId(); as id) {
-				@if (previewConfig(); as preview) {
-					@if (showPreview()) {
-						<!-- Split layout: entity view + preview -->
-						<div class="flex gap-0 h-[calc(100vh-64px)]" data-testid="preview-layout">
-							<div class="flex-1 overflow-y-auto p-6">
-								<mcms-entity-view
-									#entityView
-									[collection]="col"
-									[entityId]="id"
-									[basePath]="basePath"
-									(edit)="onEdit($event)"
-									(delete_)="onDelete($event)"
-								>
-									<div entityViewHeaderExtra class="mt-3">
-										<button
-											mcms-button
-											variant="ghost"
-											size="sm"
-											data-testid="preview-toggle"
-											(click)="showPreview.set(false)"
-										>
-											Hide Preview
-										</button>
-									</div>
-								</mcms-entity-view>
-							</div>
-							<div class="w-[50%] min-w-[400px] max-w-[720px]">
-								<mcms-live-preview
-									[preview]="preview"
-									[documentData]="viewEntityData()"
-									[collectionSlug]="col.slug"
-									[entityId]="id"
-								/>
-							</div>
-						</div>
-					} @else {
-						<!-- Full-width view (preview hidden) -->
-						<mcms-entity-view
-							#entityView
-							[collection]="col"
-							[entityId]="id"
-							[basePath]="basePath"
-							(edit)="onEdit($event)"
-							(delete_)="onDelete($event)"
-						>
-							<div entityViewHeaderExtra class="mt-3">
-								<button
-									mcms-button
-									variant="ghost"
-									size="sm"
-									data-testid="preview-toggle"
-									(click)="showPreview.set(true)"
-								>
-									Show Preview
-								</button>
-							</div>
-						</mcms-entity-view>
-					}
-				} @else {
-					<!-- No preview configured -->
-					<mcms-entity-view
-						#entityView
-						[collection]="col"
-						[entityId]="id"
-						[basePath]="basePath"
-						(edit)="onEdit($event)"
-						(delete_)="onDelete($event)"
-					/>
-				}
+			>
+				↻ Refresh
+			</button>
+		</div>
+
+		<!-- Preview iframe container -->
+		<div class="flex-1 overflow-auto bg-muted/30 flex justify-center p-4">
+			@if (previewUrl()) {
+				<!-- Static iframe with no dynamic bindings (avoids NG0910).
+				     src/sandbox/width are set via nativeElement in an effect(). -->
+				<iframe
+					#previewIframe
+					title="Live document preview"
+					data-testid="preview-iframe"
+					class="h-full bg-white border border-border rounded-md shadow-sm transition-[width] duration-300"
+				></iframe>
 			} @else {
-				<div class="p-12 text-center text-muted-foreground">Entity ID not provided</div>
+				<div class="flex items-center justify-center h-full text-muted-foreground text-sm">
+					Preview not available
+				</div>
 			}
-		} @else {
-			<div class="p-12 text-center text-muted-foreground">Collection not found</div>
-		}
+		</div>
 	`,
                 }]
-        }], propDecorators: { entityViewRef: [{ type: i0.ViewChild, args: ['entityView', { isSignal: true }] }] } });
-
-var collectionView_page = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    CollectionViewPage: CollectionViewPage
-});
+        }], ctorParameters: () => [], propDecorators: { preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: true }] }], documentData: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentData", required: true }] }], collectionSlug: [{ type: i0.Input, args: [{ isSignal: true, alias: "collectionSlug", required: true }] }], entityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityId", required: false }] }], editBlockRequest: [{ type: i0.Output, args: ["editBlockRequest"] }], previewIframe: [{ type: i0.ViewChild, args: ['previewIframe', { isSignal: true }] }] } });
 
 /**
  * Block Edit Dialog
@@ -10442,140 +11308,6 @@ var setup_page = /*#__PURE__*/Object.freeze({
     SetupPage: SetupPage
 });
 
-/**
- * Media Preview Component
- *
- * Displays a preview of media based on its type:
- * - Images: Thumbnail preview
- * - Videos: Video icon with optional poster
- * - Audio: Audio icon
- * - Documents: Document icon
- * - Other: Generic file icon
- *
- * @example
- * ```html
- * <mcms-media-preview
- *   [media]="mediaDocument"
- *   [size]="'md'"
- * />
- * ```
- */
-class MediaPreviewComponent {
-    /** Media data to preview */
-    media = input(null, ...(ngDevMode ? [{ debugName: "media" }] : []));
-    /** Size of the preview */
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
-    /** Custom class override */
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    /** Whether to show rounded corners */
-    rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : []));
-    /** Host classes */
-    hostClasses = computed(() => {
-        const sizeClass = this.sizeClasses()[this.size()];
-        const roundedClass = this.rounded() ? 'rounded-md overflow-hidden' : '';
-        return `inline-block ${sizeClass} ${roundedClass} ${this.class()}`;
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    /** Size classes map */
-    sizeClasses = computed(() => ({
-        xs: 'h-8 w-8',
-        sm: 'h-12 w-12',
-        md: 'h-20 w-20',
-        lg: 'h-32 w-32',
-        xl: 'h-48 w-48',
-    }), ...(ngDevMode ? [{ debugName: "sizeClasses" }] : []));
-    /** Icon size classes */
-    iconClasses = computed(() => {
-        const sizes = {
-            xs: 'text-lg',
-            sm: 'text-xl',
-            md: 'text-3xl',
-            lg: 'text-4xl',
-            xl: 'text-6xl',
-        };
-        return `${sizes[this.size()]} text-mcms-muted-foreground`;
-    }, ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
-    /** Whether the media is an image */
-    isImage = computed(() => {
-        const mimeType = this.media()?.mimeType ?? '';
-        return mimeType.startsWith('image/');
-    }, ...(ngDevMode ? [{ debugName: "isImage" }] : []));
-    /** Whether the media is a video */
-    isVideo = computed(() => {
-        const mimeType = this.media()?.mimeType ?? '';
-        return mimeType.startsWith('video/');
-    }, ...(ngDevMode ? [{ debugName: "isVideo" }] : []));
-    /** Whether the media is audio */
-    isAudio = computed(() => {
-        const mimeType = this.media()?.mimeType ?? '';
-        return mimeType.startsWith('audio/');
-    }, ...(ngDevMode ? [{ debugName: "isAudio" }] : []));
-    /** Image URL for preview */
-    imageUrl = computed(() => {
-        const media = this.media();
-        if (!media)
-            return '';
-        return media.url ?? `/api/media/file/${media.path}`;
-    }, ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
-    /** Icon name based on media type */
-    iconName = computed(() => {
-        const mimeType = this.media()?.mimeType ?? '';
-        if (mimeType.startsWith('video/')) {
-            return heroFilm;
-        }
-        if (mimeType.startsWith('audio/')) {
-            return heroMusicalNote;
-        }
-        if (mimeType === 'application/pdf') {
-            return heroDocumentText;
-        }
-        if (mimeType.startsWith('application/zip') || mimeType.includes('compressed')) {
-            return heroArchiveBox;
-        }
-        if (mimeType.startsWith('image/')) {
-            return heroPhoto;
-        }
-        return heroDocument;
-    }, ...(ngDevMode ? [{ debugName: "iconName" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.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: `
-		@if (isImage()) {
-			<img
-				[src]="imageUrl()"
-				[alt]="media()?.alt ?? media()?.filename ?? 'Media preview'"
-				class="h-full w-full object-cover"
-			/>
-		} @else {
-			<div class="flex h-full w-full items-center justify-center bg-mcms-muted">
-				<ng-icon [name]="iconName()" [class]="iconClasses()" />
-			</div>
-		}
-	`, 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: [{
-            type: Component,
-            args: [{
-                    selector: 'mcms-media-preview',
-                    host: {
-                        '[class]': 'hostClasses()',
-                    },
-                    template: `
-		@if (isImage()) {
-			<img
-				[src]="imageUrl()"
-				[alt]="media()?.alt ?? media()?.filename ?? 'Media preview'"
-				class="h-full w-full object-cover"
-			/>
-		} @else {
-			<div class="flex h-full w-full items-center justify-center bg-mcms-muted">
-				<ng-icon [name]="iconName()" [class]="iconClasses()" />
-			</div>
-		}
-	`,
-                    imports: [NgIcon],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { media: [{ type: i0.Input, args: [{ isSignal: true, alias: "media", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
-
 /**
  * Type guard to check if a value has the shape of a MediaEditItem.
  */
@@ -12603,18 +13335,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-DKQ6pwp7.mjs').then((m) => m.RichTextFieldRenderer));
+                    registry.register('richText', () => import('./momentumcms-admin-rich-text-field.component-BC8pRU89.mjs').then((m) => m.RichTextFieldRenderer));
                     // Layout field renderers (support nested field rendering)
-                    registry.register('group', () => import('./momentumcms-admin-group-field.component-BZeG8Oqy.mjs').then((m) => m.GroupFieldRenderer));
-                    registry.register('array', () => import('./momentumcms-admin-array-field.component-CT5NlIEv.mjs').then((m) => m.ArrayFieldRenderer));
-                    registry.register('blocks', () => import('./momentumcms-admin-blocks-field.component-Cz7HmuBK.mjs').then((m) => m.BlocksFieldRenderer));
+                    registry.register('group', () => import('./momentumcms-admin-group-field.component-B48_zbo0.mjs').then((m) => m.GroupFieldRenderer));
+                    registry.register('array', () => import('./momentumcms-admin-array-field.component-Bjlcczwg.mjs').then((m) => m.ArrayFieldRenderer));
+                    registry.register('blocks', () => import('./momentumcms-admin-blocks-field.component-4vLqDGbB.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-BuxtRs2_.mjs').then((m) => m.RelationshipFieldRenderer));
+                    registry.register('relationship', () => import('./momentumcms-admin-relationship-field.component-D-UQgd7m.mjs').then((m) => m.RelationshipFieldRenderer));
                     // Layout-only renderers (tabs, collapsible, row)
-                    registry.register('tabs', () => import('./momentumcms-admin-tabs-field.component-mZ4dpZoD.mjs').then((m) => m.TabsFieldRenderer));
-                    registry.register('collapsible', () => import('./momentumcms-admin-collapsible-field.component-CtwrGQvg.mjs').then((m) => m.CollapsibleFieldRenderer));
-                    registry.register('row', () => import('./momentumcms-admin-row-field.component-ks3FXd4B.mjs').then((m) => m.RowFieldRenderer));
+                    registry.register('tabs', () => import('./momentumcms-admin-tabs-field.component-B4X73eCM.mjs').then((m) => m.TabsFieldRenderer));
+                    registry.register('collapsible', () => import('./momentumcms-admin-collapsible-field.component-63-9kSgm.mjs').then((m) => m.CollapsibleFieldRenderer));
+                    registry.register('row', () => import('./momentumcms-admin-row-field.component--EOPGDtM.mjs').then((m) => m.RowFieldRenderer));
                 };
             },
         },
@@ -13456,39 +14188,39 @@ class MediaPickerDialog {
         this.isLoading.set(true);
         try {
             const collection = this.api.collection(this.collectionSlug());
-            const whereClause = {};
-            // Add search filter
+            // Fetch all media — DB adapter does not support complex where operators
+            const result = await collection.find({
+                page,
+                limit: this.limit(),
+            });
+            let items = toMediaItems(result.docs);
+            // Client-side search filter
             if (search) {
-                whereClause['filename'] = { contains: search };
+                const lowerSearch = search.toLowerCase();
+                items = items.filter((m) => m.filename.toLowerCase().includes(lowerSearch));
             }
-            // Add MIME type filter
+            // Client-side MIME type filter
             const mimeTypes = this.data?.mimeTypes;
             if (mimeTypes && mimeTypes.length > 0) {
-                // For simple types like 'image/*', filter by prefix
-                const prefixes = mimeTypes.filter((t) => t.endsWith('/*')).map((t) => t.slice(0, -2));
-                const exactTypes = mimeTypes.filter((t) => !t.endsWith('/*'));
-                if (prefixes.length > 0 || exactTypes.length > 0) {
-                    const orConditions = [];
-                    for (const prefix of prefixes) {
-                        orConditions.push({ mimeType: { startsWith: prefix } });
-                    }
-                    for (const type of exactTypes) {
-                        orConditions.push({ mimeType: { equals: type } });
+                items = items.filter((m) => mimeTypes.some((pattern) => {
+                    if (pattern.endsWith('/*')) {
+                        return m.mimeType.startsWith(pattern.slice(0, -1));
                     }
-                    if (orConditions.length > 0) {
-                        whereClause['or'] = orConditions;
-                    }
-                }
+                    return m.mimeType === pattern;
+                }));
+            }
+            this.mediaItems.set(items);
+            // When client-side filtering is active, use filtered counts
+            // to avoid pagination showing incorrect totals
+            const hasClientFilter = !!search || (mimeTypes && mimeTypes.length > 0);
+            if (hasClientFilter) {
+                this.totalDocs.set(items.length);
+                this.totalPages.set(1); // Client-filtered results are always a single page
+            }
+            else {
+                this.totalDocs.set(result.totalDocs);
+                this.totalPages.set(result.totalPages);
             }
-            const result = await collection.find({
-                where: Object.keys(whereClause).length > 0 ? whereClause : undefined,
-                page,
-                limit: this.limit(),
-                sort: '-createdAt',
-            });
-            this.mediaItems.set(toMediaItems(result.docs));
-            this.totalDocs.set(result.totalDocs);
-            this.totalPages.set(result.totalPages);
         }
         catch (error) {
             console.error('Failed to load media:', error);
@@ -13761,9 +14493,10 @@ function getInputFromEvent(event) {
  * a FieldTree node's FieldState rather than event-based I/O.
  */
 class UploadFieldRenderer {
-    document = inject(DOCUMENT);
+    fileInputRef = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInputRef" }] : []));
     uploadService = inject(UploadService);
     dialogService = inject(DialogService);
+    api = injectMomentumAPI();
     /** Field definition */
     field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
     /** Signal forms FieldTree node for this field */
@@ -13785,6 +14518,43 @@ class UploadFieldRenderer {
     uploadingFilename = signal('', ...(ngDevMode ? [{ debugName: "uploadingFilename" }] : []));
     uploadError = signal(null, ...(ngDevMode ? [{ debugName: "uploadError" }] : []));
     uploadingFile = signal(null, ...(ngDevMode ? [{ debugName: "uploadingFile" }] : []));
+    /** Resolved media document fetched from API when value is just an ID string */
+    resolvedMedia = signal(null, ...(ngDevMode ? [{ debugName: "resolvedMedia" }] : []));
+    resolvedMediaId = null;
+    constructor() {
+        // When the value is a string (media ID), fetch the full media document for preview
+        effect(() => {
+            const val = this.currentValue();
+            if (typeof val === 'string' && val !== '') {
+                // Avoid re-fetching the same ID
+                const id = val;
+                if (untracked(() => this.resolvedMediaId) === id)
+                    return;
+                this.resolvedMediaId = id;
+                const relationTo = untracked(() => this.uploadField().relationTo);
+                this.api
+                    .collection(relationTo)
+                    .findById(id)
+                    .then((doc) => {
+                    if (doc) {
+                        this.resolvedMedia.set(doc);
+                    }
+                })
+                    .catch(() => {
+                    // Silently fail — preview will show placeholder
+                });
+            }
+            else if (typeof val === 'object' && val !== null) {
+                // Already a full document, clear any stale resolved data
+                this.resolvedMedia.set(null);
+                this.resolvedMediaId = null;
+            }
+            else {
+                this.resolvedMedia.set(null);
+                this.resolvedMediaId = null;
+            }
+        });
+    }
     /** Unique field ID */
     fieldId = computed(() => `field-${this.path().replace(/\./g, '-')}`, ...(ngDevMode ? [{ debugName: "fieldId" }] : []));
     /** Computed label */
@@ -13814,32 +14584,35 @@ class UploadFieldRenderer {
         const val = this.currentValue();
         return val !== null && val !== undefined && val !== '';
     }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    /** Effective media document — full object from value, or resolved from API */
+    effectiveMedia = computed(() => {
+        const val = this.currentValue();
+        if (typeof val === 'object' && val !== null)
+            return val;
+        // Value is a string ID — use resolved media if available
+        return this.resolvedMedia();
+    }, ...(ngDevMode ? [{ debugName: "effectiveMedia" }] : []));
     /** Media preview data from value */
     mediaPreviewData = computed(() => {
-        const val = this.currentValue();
-        if (!val)
+        const media = this.effectiveMedia();
+        if (!media)
             return null;
-        // If value is a full document object
-        if (typeof val === 'object' && val !== null) {
+        if (typeof media === 'object' && media !== null) {
             return {
-                url: getStringProp(val, 'url'),
-                path: getStringProp(val, 'path'),
-                mimeType: getStringProp(val, 'mimeType'),
-                filename: getStringProp(val, 'filename'),
-                alt: getStringProp(val, 'alt'),
+                url: getStringProp(media, 'url'),
+                path: getStringProp(media, 'path'),
+                mimeType: getStringProp(media, 'mimeType'),
+                filename: getStringProp(media, 'filename'),
+                alt: getStringProp(media, 'alt'),
             };
         }
-        // If value is just an ID, we can't preview without fetching
-        // Return a placeholder
-        return {
-            path: String(val),
-        };
+        return null;
     }, ...(ngDevMode ? [{ debugName: "mediaPreviewData" }] : []));
     /** Media filename from value */
     mediaFilename = computed(() => {
-        const val = this.currentValue();
-        if (typeof val === 'object' && val !== null) {
-            return getStringProp(val, 'filename') ?? 'Selected media';
+        const media = this.effectiveMedia();
+        if (typeof media === 'object' && media !== null) {
+            return getStringProp(media, 'filename') ?? 'Selected media';
         }
         return 'Selected media';
     }, ...(ngDevMode ? [{ debugName: "mediaFilename" }] : []));
@@ -13940,11 +14713,19 @@ class UploadFieldRenderer {
     triggerFileInput() {
         if (this.isDisabled())
             return;
-        const input = this.document.querySelector(`#${this.fieldId()} input[type="file"]`);
-        if (input instanceof HTMLInputElement) {
-            input.click();
+        const ref = this.fileInputRef();
+        if (ref) {
+            ref.nativeElement.click();
         }
     }
+    /**
+     * Handle Space keydown on drop zone.
+     * Prevents default scroll behavior and triggers file input.
+     */
+    onDropZoneSpace(event) {
+        event.preventDefault();
+        this.triggerFileInput();
+    }
     /**
      * Handle file selection from input.
      */
@@ -13989,7 +14770,8 @@ class UploadFieldRenderer {
         this.uploadProgress.set(0);
         this.uploadingFilename.set(file.name);
         this.uploadingFile.set(file);
-        this.uploadService.upload(file).subscribe({
+        const relationTo = this.uploadField().relationTo;
+        this.uploadService.uploadToCollection(relationTo, file).subscribe({
             next: (progress) => {
                 this.uploadProgress.set(progress.progress);
                 if (progress.status === 'complete' && progress.result) {
@@ -14047,7 +14829,7 @@ class UploadFieldRenderer {
         }
     }
     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" }, ngImport: i0, template: `
+    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: `
 		<mcms-form-field
 			[id]="fieldId()"
 			[required]="required()"
@@ -14105,7 +14887,7 @@ class UploadFieldRenderer {
 					</div>
 				</div>
 			} @else {
-				<!-- Drop zone -->
+				<!-- Drop zone — keyboard-accessible for WCAG 2.1 SC 2.1.1 -->
 				<div
 					class="relative rounded-lg border-2 border-dashed transition-colors"
 					[class.border-mcms-border]="!isDragging()"
@@ -14113,16 +14895,16 @@ class UploadFieldRenderer {
 					[class.bg-mcms-primary/5]="isDragging()"
 					[class.cursor-pointer]="!isDisabled()"
 					[class.opacity-50]="isDisabled()"
-					tabindex="0"
 					role="button"
+					tabindex="0"
+					[attr.aria-label]="'Upload file for ' + label()"
 					[attr.aria-disabled]="isDisabled()"
-					[attr.aria-label]="'Upload ' + label() + ' file. Drag and drop or click to browse.'"
 					(dragover)="onDragOver($event)"
 					(dragleave)="onDragLeave($event)"
 					(drop)="onDrop($event)"
 					(click)="triggerFileInput()"
 					(keydown.enter)="triggerFileInput()"
-					(keydown.space)="triggerFileInput()"
+					(keydown.space)="onDropZoneSpace($event)"
 				>
 					<div class="flex flex-col items-center justify-center gap-2 p-8">
 						<ng-icon [name]="uploadIcon" class="h-10 w-10 text-mcms-muted-foreground" aria-hidden="true" />
@@ -14145,31 +14927,31 @@ class UploadFieldRenderer {
 								</p>
 							}
 						</div>
-						@if (!isDisabled()) {
-							<div class="mt-2 flex gap-2">
-								<button
-									mcms-button
-									variant="outline"
-									size="sm"
-									type="button"
-									(click)="$event.stopPropagation(); openMediaPicker()"
-								>
-									<ng-icon [name]="photoIcon" class="h-4 w-4" />
-									Select from library
-								</button>
-							</div>
-						}
 					</div>
-					<input
-						#fileInput
-						type="file"
-						class="sr-only"
-						[accept]="acceptAttribute()"
-						[disabled]="isDisabled()"
-						(change)="onFileSelected($event)"
-						[attr.aria-label]="'Choose file for ' + label()"
-					/>
 				</div>
+				@if (!isDisabled()) {
+					<div class="mt-2 flex gap-2">
+						<button
+							mcms-button
+							variant="outline"
+							size="sm"
+							type="button"
+							(click)="openMediaPicker()"
+						>
+							<ng-icon [name]="photoIcon" class="h-4 w-4" />
+							Select from library
+						</button>
+					</div>
+				}
+				<input
+					#fileInput
+					type="file"
+					class="sr-only"
+					[accept]="acceptAttribute()"
+					[disabled]="isDisabled()"
+					(change)="onFileSelected($event)"
+					[attr.aria-label]="'Choose file for ' + label()"
+				/>
 			}
 
 			@if (uploadError()) {
@@ -14243,7 +15025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 					</div>
 				</div>
 			} @else {
-				<!-- Drop zone -->
+				<!-- Drop zone — keyboard-accessible for WCAG 2.1 SC 2.1.1 -->
 				<div
 					class="relative rounded-lg border-2 border-dashed transition-colors"
 					[class.border-mcms-border]="!isDragging()"
@@ -14251,16 +15033,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 					[class.bg-mcms-primary/5]="isDragging()"
 					[class.cursor-pointer]="!isDisabled()"
 					[class.opacity-50]="isDisabled()"
-					tabindex="0"
 					role="button"
+					tabindex="0"
+					[attr.aria-label]="'Upload file for ' + label()"
 					[attr.aria-disabled]="isDisabled()"
-					[attr.aria-label]="'Upload ' + label() + ' file. Drag and drop or click to browse.'"
 					(dragover)="onDragOver($event)"
 					(dragleave)="onDragLeave($event)"
 					(drop)="onDrop($event)"
 					(click)="triggerFileInput()"
 					(keydown.enter)="triggerFileInput()"
-					(keydown.space)="triggerFileInput()"
+					(keydown.space)="onDropZoneSpace($event)"
 				>
 					<div class="flex flex-col items-center justify-center gap-2 p-8">
 						<ng-icon [name]="uploadIcon" class="h-10 w-10 text-mcms-muted-foreground" aria-hidden="true" />
@@ -14283,31 +15065,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 								</p>
 							}
 						</div>
-						@if (!isDisabled()) {
-							<div class="mt-2 flex gap-2">
-								<button
-									mcms-button
-									variant="outline"
-									size="sm"
-									type="button"
-									(click)="$event.stopPropagation(); openMediaPicker()"
-								>
-									<ng-icon [name]="photoIcon" class="h-4 w-4" />
-									Select from library
-								</button>
-							</div>
-						}
 					</div>
-					<input
-						#fileInput
-						type="file"
-						class="sr-only"
-						[accept]="acceptAttribute()"
-						[disabled]="isDisabled()"
-						(change)="onFileSelected($event)"
-						[attr.aria-label]="'Choose file for ' + label()"
-					/>
 				</div>
+				@if (!isDisabled()) {
+					<div class="mt-2 flex gap-2">
+						<button
+							mcms-button
+							variant="outline"
+							size="sm"
+							type="button"
+							(click)="openMediaPicker()"
+						>
+							<ng-icon [name]="photoIcon" class="h-4 w-4" />
+							Select from library
+						</button>
+					</div>
+				}
+				<input
+					#fileInput
+					type="file"
+					class="sr-only"
+					[accept]="acceptAttribute()"
+					[disabled]="isDisabled()"
+					(change)="onFileSelected($event)"
+					[attr.aria-label]="'Choose file for ' + label()"
+				/>
 			}
 
 			@if (uploadError()) {
@@ -14316,7 +15098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
 		</mcms-form-field>
 	`,
                 }]
-        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], formNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "formNode", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], formNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "formNode", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }] } });
 
 var uploadField_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -14330,4 +15112,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-o0FbJXZN.mjs.map
+//# sourceMappingURL=momentumcms-admin-momentumcms-admin-D_47TVaR.mjs.map