@momentumcms/admin 0.5.1 → 0.5.3

package/fesm2022/{momentumcms-admin-momentumcms-admin-5WigESOC.mjs → momentumcms-admin-momentumcms-admin-D8WvqCxe.mjs}

@@ -1134,7 +1134,7 @@ function momentumAdminRoutes(configOrOptions) {
             // Global edit
             {
                 path: 'globals/:slug',
-                loadComponent: () => import('./momentumcms-admin-global-edit.page-D4QNE5AM.mjs').then((m) => m.GlobalEditPage),
+                loadComponent: () => import('./momentumcms-admin-global-edit.page-DHr7Icl6.mjs').then((m) => m.GlobalEditPage),
                 canDeactivate: [unsavedChangesGuard],
             },
             // Plugin-registered routes
@@ -4837,6 +4837,427 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], uploadConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadConfig", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], pendingFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingFile", required: false }] }], isUploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isUploading", required: false }] }], uploadProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadProgress", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], existingMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingMedia", required: false }] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
 
+/**
+ * Normalize a click position within a container to a 0-1 focal point.
+ */
+function normalizeFocalPoint(click, container) {
+    if (container.width <= 0 || container.height <= 0) {
+        return { x: 0.5, y: 0.5 };
+    }
+    return clampFocalPoint({
+        x: click.x / container.width,
+        y: click.y / container.height,
+    });
+}
+/**
+ * Clamp a focal point to the valid 0-1 range on both axes.
+ */
+function clampFocalPoint(point) {
+    return {
+        x: Math.max(0, Math.min(1, point.x)),
+        y: Math.max(0, Math.min(1, point.y)),
+    };
+}
+/**
+ * Convert a normalized focal point to a CSS `object-position` string.
+ *
+ * @example focalPointToCssPosition({ x: 0.25, y: 0.75 }) → '25% 75%'
+ */
+function focalPointToCssPosition(point) {
+    const fp = point ?? { x: 0.5, y: 0.5 };
+    return `${Math.round(fp.x * 100)}% ${Math.round(fp.y * 100)}%`;
+}
+
+/**
+ * Calculate the crop region for a cover-fit preview.
+ * Same math as the server-side crop-calculator, but for browser-side preview.
+ */
+function calculatePreviewCrop(source, target, focalPoint) {
+    const fp = focalPoint ?? { x: 0.5, y: 0.5 };
+    const scale = Math.max(target.width / source.width, target.height / source.height);
+    const cropW = Math.round(target.width / scale);
+    const cropH = Math.round(target.height / scale);
+    const focalX = fp.x * source.width;
+    const focalY = fp.y * source.height;
+    let x = Math.round(focalX - cropW / 2);
+    let y = Math.round(focalY - cropH / 2);
+    x = Math.max(0, Math.min(x, source.width - cropW));
+    y = Math.max(0, Math.min(y, source.height - cropH));
+    return { x, y, width: cropW, height: cropH };
+}
+
+/**
+ * Focal Point Picker Component
+ *
+ * Displays an image with an interactive crosshair overlay.
+ * Click anywhere on the image to set the focal point.
+ * Optionally shows crop preview outlines for configured image sizes.
+ *
+ * @example
+ * ```html
+ * <mcms-focal-point-picker
+ *   [imageUrl]="mediaUrl"
+ *   [focalPoint]="{ x: 0.5, y: 0.5 }"
+ *   [imageSizes]="configuredSizes"
+ *   [naturalWidth]="800"
+ *   [naturalHeight]="600"
+ *   (focalPointChange)="onFocalPointChange($event)"
+ * />
+ * ```
+ */
+class FocalPointPickerComponent {
+    imageElRef = viewChild('imageEl', ...(ngDevMode ? [{ debugName: "imageElRef" }] : []));
+    /** URL of the image to display */
+    imageUrl = input.required(...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
+    /** Current focal point (0-1 normalized) */
+    focalPoint = input({ x: 0.5, y: 0.5 }, ...(ngDevMode ? [{ debugName: "focalPoint" }] : []));
+    /** Alt text for the image */
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : []));
+    /** Natural width of the source image (for crop preview calculations) */
+    naturalWidth = input(0, ...(ngDevMode ? [{ debugName: "naturalWidth" }] : []));
+    /** Natural height of the source image (for crop preview calculations) */
+    naturalHeight = input(0, ...(ngDevMode ? [{ debugName: "naturalHeight" }] : []));
+    /** Configured image sizes for crop preview outlines */
+    imageSizes = input([], ...(ngDevMode ? [{ debugName: "imageSizes" }] : []));
+    /** Emitted when the focal point changes */
+    focalPointChange = output();
+    /** Focal point X as percentage */
+    focalPointX = computed(() => Math.round(this.focalPoint().x * 100), ...(ngDevMode ? [{ debugName: "focalPointX" }] : []));
+    /** Focal point Y as percentage */
+    focalPointY = computed(() => Math.round(this.focalPoint().y * 100), ...(ngDevMode ? [{ debugName: "focalPointY" }] : []));
+    /** CSS object-position string */
+    cssPosition = computed(() => focalPointToCssPosition(this.focalPoint()), ...(ngDevMode ? [{ debugName: "cssPosition" }] : []));
+    /** Human-readable position label */
+    positionLabel = computed(() => {
+        const fp = this.focalPoint();
+        return `${Math.round(fp.x * 100)}% x ${Math.round(fp.y * 100)}%`;
+    }, ...(ngDevMode ? [{ debugName: "positionLabel" }] : []));
+    /** Crop preview data for each configured size */
+    cropPreviews = computed(() => {
+        const w = this.naturalWidth();
+        const h = this.naturalHeight();
+        const fp = this.focalPoint();
+        const sizes = this.imageSizes();
+        if (!w || !h || sizes.length === 0)
+            return [];
+        return sizes
+            .filter((s) => s.width && s.height && s.fit === 'cover')
+            .map((s) => {
+            const crop = calculatePreviewCrop({ width: w, height: h }, { width: s.width ?? 0, height: s.height ?? 0 }, fp);
+            return {
+                name: s.name,
+                leftPct: (crop.x / w) * 100,
+                topPct: (crop.y / h) * 100,
+                widthPct: (crop.width / w) * 100,
+                heightPct: (crop.height / h) * 100,
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "cropPreviews" }] : []));
+    /**
+     * Handle click on the image overlay.
+     */
+    onClick(event) {
+        const el = this.imageElRef();
+        if (!el)
+            return;
+        const rect = el.nativeElement.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0)
+            return;
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        const fp = normalizeFocalPoint({ x, y }, { width: rect.width, height: rect.height });
+        this.focalPointChange.emit(fp);
+    }
+    /**
+     * Reset focal point to center.
+     */
+    onResetCenter() {
+        this.focalPointChange.emit({ x: 0.5, y: 0.5 });
+    }
+    /**
+     * Nudge focal point by a small amount (keyboard navigation).
+     */
+    onNudge(dx, dy, event) {
+        event.preventDefault();
+        const fp = this.focalPoint();
+        const newFp = {
+            x: Math.max(0, Math.min(1, fp.x + dx)),
+            y: Math.max(0, Math.min(1, fp.y + dy)),
+        };
+        this.focalPointChange.emit(newFp);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FocalPointPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FocalPointPickerComponent, isStandalone: true, selector: "mcms-focal-point-picker", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: true, transformFunction: null }, focalPoint: { classPropertyName: "focalPoint", publicName: "focalPoint", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, naturalWidth: { classPropertyName: "naturalWidth", publicName: "naturalWidth", isSignal: true, isRequired: false, transformFunction: null }, naturalHeight: { classPropertyName: "naturalHeight", publicName: "naturalHeight", isSignal: true, isRequired: false, transformFunction: null }, imageSizes: { classPropertyName: "imageSizes", publicName: "imageSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focalPointChange: "focalPointChange" }, host: { classAttribute: "block" }, viewQueries: [{ propertyName: "imageElRef", first: true, predicate: ["imageEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<div class="space-y-3">
+			<div class="relative inline-block overflow-hidden rounded-lg border border-mcms-border">
+				<!-- Image -->
+				<img
+					#imageEl
+					[src]="imageUrl()"
+					[alt]="alt() || 'Image with focal point selector'"
+					class="block max-h-96 max-w-full"
+					[style.object-position]="cssPosition()"
+				/>
+
+				<!-- Clickable overlay -->
+				<div
+					class="absolute inset-0 cursor-crosshair"
+					role="button"
+					tabindex="0"
+					[attr.aria-label]="'Set focal point. Current position: ' + positionLabel()"
+					(click)="onClick($event)"
+					(keydown.enter)="onResetCenter()"
+					(keydown.space)="onResetCenter()"
+					(keydown.ArrowLeft)="onNudge(-0.05, 0, $event)"
+					(keydown.ArrowRight)="onNudge(0.05, 0, $event)"
+					(keydown.ArrowUp)="onNudge(0, -0.05, $event)"
+					(keydown.ArrowDown)="onNudge(0, 0.05, $event)"
+				>
+					<!-- Crosshair lines -->
+					<div
+						class="pointer-events-none absolute h-px w-full bg-white/70"
+						[style.top.%]="focalPointY()"
+					></div>
+					<div
+						class="pointer-events-none absolute w-px h-full bg-white/70"
+						[style.left.%]="focalPointX()"
+					></div>
+
+					<!-- Focal point dot -->
+					<div
+						class="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-mcms-primary shadow-md"
+						[style.left.%]="focalPointX()"
+						[style.top.%]="focalPointY()"
+						aria-hidden="true"
+					></div>
+
+					<!-- Crop preview outlines -->
+					@for (preview of cropPreviews(); track preview.name) {
+						<div
+							class="pointer-events-none absolute border border-dashed border-yellow-400/60"
+							[style.left.%]="preview.leftPct"
+							[style.top.%]="preview.topPct"
+							[style.width.%]="preview.widthPct"
+							[style.height.%]="preview.heightPct"
+							[attr.aria-label]="'Crop preview for ' + preview.name"
+						>
+							<span class="absolute -top-5 left-0 text-xs text-yellow-400 drop-shadow-sm">
+								{{ preview.name }}
+							</span>
+						</div>
+					}
+				</div>
+			</div>
+
+			<!-- Coordinates display -->
+			<p class="text-xs text-mcms-muted-foreground" aria-live="polite">
+				Focal point: {{ positionLabel() }}
+				<button
+					class="ml-2 underline hover:text-mcms-foreground"
+					type="button"
+					(click)="onResetCenter()"
+					aria-label="Reset focal point to center"
+				>
+					Reset to center
+				</button>
+			</p>
+		</div>
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FocalPointPickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mcms-focal-point-picker',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+		<div class="space-y-3">
+			<div class="relative inline-block overflow-hidden rounded-lg border border-mcms-border">
+				<!-- Image -->
+				<img
+					#imageEl
+					[src]="imageUrl()"
+					[alt]="alt() || 'Image with focal point selector'"
+					class="block max-h-96 max-w-full"
+					[style.object-position]="cssPosition()"
+				/>
+
+				<!-- Clickable overlay -->
+				<div
+					class="absolute inset-0 cursor-crosshair"
+					role="button"
+					tabindex="0"
+					[attr.aria-label]="'Set focal point. Current position: ' + positionLabel()"
+					(click)="onClick($event)"
+					(keydown.enter)="onResetCenter()"
+					(keydown.space)="onResetCenter()"
+					(keydown.ArrowLeft)="onNudge(-0.05, 0, $event)"
+					(keydown.ArrowRight)="onNudge(0.05, 0, $event)"
+					(keydown.ArrowUp)="onNudge(0, -0.05, $event)"
+					(keydown.ArrowDown)="onNudge(0, 0.05, $event)"
+				>
+					<!-- Crosshair lines -->
+					<div
+						class="pointer-events-none absolute h-px w-full bg-white/70"
+						[style.top.%]="focalPointY()"
+					></div>
+					<div
+						class="pointer-events-none absolute w-px h-full bg-white/70"
+						[style.left.%]="focalPointX()"
+					></div>
+
+					<!-- Focal point dot -->
+					<div
+						class="pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white bg-mcms-primary shadow-md"
+						[style.left.%]="focalPointX()"
+						[style.top.%]="focalPointY()"
+						aria-hidden="true"
+					></div>
+
+					<!-- Crop preview outlines -->
+					@for (preview of cropPreviews(); track preview.name) {
+						<div
+							class="pointer-events-none absolute border border-dashed border-yellow-400/60"
+							[style.left.%]="preview.leftPct"
+							[style.top.%]="preview.topPct"
+							[style.width.%]="preview.widthPct"
+							[style.height.%]="preview.heightPct"
+							[attr.aria-label]="'Crop preview for ' + preview.name"
+						>
+							<span class="absolute -top-5 left-0 text-xs text-yellow-400 drop-shadow-sm">
+								{{ preview.name }}
+							</span>
+						</div>
+					}
+				</div>
+			</div>
+
+			<!-- Coordinates display -->
+			<p class="text-xs text-mcms-muted-foreground" aria-live="polite">
+				Focal point: {{ positionLabel() }}
+				<button
+					class="ml-2 underline hover:text-mcms-foreground"
+					type="button"
+					(click)="onResetCenter()"
+					aria-label="Reset focal point to center"
+				>
+					Reset to center
+				</button>
+			</p>
+		</div>
+	`,
+                }]
+        }], propDecorators: { imageElRef: [{ type: i0.ViewChild, args: ['imageEl', { isSignal: true }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: true }] }], focalPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "focalPoint", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], naturalWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalWidth", required: false }] }], naturalHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "naturalHeight", required: false }] }], imageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSizes", required: false }] }], focalPointChange: [{ type: i0.Output, args: ["focalPointChange"] }] } });
+
+/**
+ * Displays generated image size variants as a grid of thumbnail cards.
+ *
+ * @example
+ * ```html
+ * <mcms-image-variants-display [sizes]="entity.sizes" />
+ * ```
+ */
+class ImageVariantsDisplay {
+    /** The sizes record from the media document (e.g., entity['sizes']) */
+    sizes = input(null, ...(ngDevMode ? [{ debugName: "sizes" }] : []));
+    /** Parsed variant entries */
+    variants = computed(() => {
+        const sizes = this.sizes();
+        if (!sizes || typeof sizes !== 'object')
+            return [];
+        return Object.entries(sizes)
+            .filter((entry) => {
+            const v = entry[1];
+            return v != null && typeof v === 'object' && 'width' in v && 'path' in v;
+        })
+            .map(([name, data]) => ({
+            name,
+            ...data,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "variants" }] : []));
+    /** Build URL for a variant image */
+    variantUrl(variant) {
+        if (variant.url)
+            return variant.url;
+        if (variant.path)
+            return `/api/media/file/${variant.path}`;
+        return '';
+    }
+    /** Format file size for display */
+    formatFileSize(bytes) {
+        if (!bytes)
+            return '';
+        if (bytes >= 1024 * 1024)
+            return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+        if (bytes >= 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${bytes} bytes`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageVariantsDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ImageVariantsDisplay, isStandalone: true, selector: "mcms-image-variants-display", inputs: { sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+		@if (variants().length > 0) {
+			<div class="space-y-3">
+				<p class="text-sm font-medium">Generated Sizes</p>
+				<div class="grid gap-3 grid-cols-2 sm:grid-cols-3">
+					@for (variant of variants(); track variant.name) {
+						<div class="rounded-lg border border-mcms-border bg-mcms-card overflow-hidden">
+							<img
+								[src]="variantUrl(variant)"
+								[alt]="variant.name + ' variant'"
+								class="h-24 w-full object-cover bg-mcms-muted"
+							/>
+							<div class="p-2">
+								<p class="text-xs font-medium">{{ variant.name }}</p>
+								<p class="text-xs text-mcms-muted-foreground">
+									{{ variant.width }} &times; {{ variant.height }}
+								</p>
+								<p class="text-xs text-mcms-muted-foreground">
+									{{ formatFileSize(variant.filesize) }}
+								</p>
+							</div>
+						</div>
+					}
+				</div>
+			</div>
+		}
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ImageVariantsDisplay, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mcms-image-variants-display',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                    template: `
+		@if (variants().length > 0) {
+			<div class="space-y-3">
+				<p class="text-sm font-medium">Generated Sizes</p>
+				<div class="grid gap-3 grid-cols-2 sm:grid-cols-3">
+					@for (variant of variants(); track variant.name) {
+						<div class="rounded-lg border border-mcms-border bg-mcms-card overflow-hidden">
+							<img
+								[src]="variantUrl(variant)"
+								[alt]="variant.name + ' variant'"
+								class="h-24 w-full object-cover bg-mcms-muted"
+							/>
+							<div class="p-2">
+								<p class="text-xs font-medium">{{ variant.name }}</p>
+								<p class="text-xs text-mcms-muted-foreground">
+									{{ variant.width }} &times; {{ variant.height }}
+								</p>
+								<p class="text-xs text-mcms-muted-foreground">
+									{{ formatFileSize(variant.filesize) }}
+								</p>
+							</div>
+						</div>
+					}
+				</div>
+			</div>
+		}
+	`,
+                }]
+        }], propDecorators: { sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }] } });
+
 /**
  * Entity Form Widget
  *
@@ -4886,8 +5307,17 @@ class EntityFormWidget {
     draftSaved = output();
     /** Model signal — the single source of truth for form data */
     formModel = signal({}, ...(ngDevMode ? [{ debugName: "formModel" }] : []));
-    /** Alias for backward compatibility (CollectionEditPage reads formData) */
-    formData = this.formModel;
+    /** Reactive form data that tracks Signal Forms changes for downstream consumers (e.g. live preview).
+     * Reads the root FieldState value directly so it re-triggers when any field value changes,
+     * unlike formModel which may keep the same object reference after in-place mutations. */
+    formData = computed(() => {
+        const ef = this.entityForm();
+        if (!ef)
+            return this.formModel();
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- FieldState value is the full model
+        const val = ef().value();
+        return val ?? this.formModel();
+    }, ...(ngDevMode ? [{ debugName: "formData" }] : []));
     /** Signal forms tree — created once when collection is available */
     entityForm = signal(null, ...(ngDevMode ? [{ debugName: "entityForm" }] : []));
     /** Original data for edit mode */
@@ -4902,8 +5332,87 @@ class EntityFormWidget {
     isUploadingFile = signal(false, ...(ngDevMode ? [{ debugName: "isUploadingFile" }] : []));
     uploadFileProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadFileProgress" }] : []));
     uploadFileError = signal(null, ...(ngDevMode ? [{ debugName: "uploadFileError" }] : []));
+    /** Preview URL for the pending image file (focal point picker) */
+    pendingFileUrl = signal(null, ...(ngDevMode ? [{ debugName: "pendingFileUrl" }] : []));
+    /** Detected dimensions of the pending image */
+    pendingImageDimensions = signal({
+        width: 0,
+        height: 0,
+    }, ...(ngDevMode ? [{ debugName: "pendingImageDimensions" }] : []));
     /** Whether the collection is an upload collection */
     isUploadCol = computed(() => isUploadCollection(this.collection()), ...(ngDevMode ? [{ debugName: "isUploadCol" }] : []));
+    /** Whether the current file (pending or existing) is an image */
+    isImageFile = computed(() => {
+        const file = this.pendingFile();
+        if (file)
+            return file.type.startsWith('image/');
+        if (this.isUploadCol() && this.mode() !== 'create') {
+            const mimeType = this.formModel()['mimeType'];
+            return typeof mimeType === 'string' && mimeType.startsWith('image/');
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "isImageFile" }] : []));
+    /** Image sizes from collection upload config */
+    uploadImageSizes = computed(() => {
+        return this.collection().upload?.imageSizes ?? [];
+    }, ...(ngDevMode ? [{ debugName: "uploadImageSizes" }] : []));
+    /** Image URL for the focal point picker */
+    focalPointImageUrl = computed(() => {
+        const fileUrl = this.pendingFileUrl();
+        if (fileUrl)
+            return fileUrl;
+        const model = this.formModel();
+        if (typeof model['url'] === 'string' && model['url'])
+            return model['url'];
+        if (typeof model['path'] === 'string' && model['path'])
+            return `/api/media/file/${model['path']}`;
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "focalPointImageUrl" }] : []));
+    /** Current focal point value */
+    currentFocalPoint = computed(() => {
+        const fp = this.formModel()['focalPoint'];
+        if (fp != null && typeof fp === 'object' && !Array.isArray(fp)) {
+            const obj = fp; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+            const x = obj['x'];
+            const y = obj['y'];
+            if (typeof x === 'number' && typeof y === 'number') {
+                return { x, y };
+            }
+        }
+        return { x: 0.5, y: 0.5 };
+    }, ...(ngDevMode ? [{ debugName: "currentFocalPoint" }] : []));
+    /** Natural image dimensions (pending file detection or existing media) */
+    imageNaturalDimensions = computed(() => {
+        if (this.pendingFile())
+            return this.pendingImageDimensions();
+        const model = this.formModel();
+        return {
+            width: typeof model['width'] === 'number' ? model['width'] : 0,
+            height: typeof model['height'] === 'number' ? model['height'] : 0,
+        };
+    }, ...(ngDevMode ? [{ debugName: "imageNaturalDimensions" }] : []));
+    /** Alt text for the focal point picker */
+    focalPointAlt = computed(() => {
+        const model = this.formModel();
+        const alt = model['alt'];
+        if (typeof alt === 'string' && alt)
+            return alt;
+        const fn = model['filename'];
+        if (typeof fn === 'string')
+            return fn;
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "focalPointAlt" }] : []));
+    /** Generated image sizes from the form model */
+    formModelSizes = computed(() => {
+        const sizes = this.formModel()['sizes'];
+        if (sizes != null &&
+            typeof sizes === 'object' &&
+            !Array.isArray(sizes) &&
+            Object.keys(sizes).length > 0) {
+            return sizes; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "formModelSizes" }] : []));
     /** Whether the form has been set up */
     formCreated = false;
     /** Whether the form has unsaved changes (from signal forms dirty tracking) */
@@ -5002,16 +5511,46 @@ class EntityFormWidget {
                     this.loadGlobal(gSlug);
                 }
                 else if (currentMode === 'create' || !id) {
-                    this.formModel.set(createInitialFormData(col));
-                    const ef = this.entityForm();
-                    if (ef)
-                        ef().reset();
+                    // Guard: don't reset formModel if the user has already selected a file.
+                    // On Analog (SSR), reactive route signals may re-emit after hydration,
+                    // causing this effect to re-run and wipe user input.
+                    const hasPendingFile = untracked(() => this.pendingFile());
+                    if (!hasPendingFile) {
+                        this.formModel.set(createInitialFormData(col));
+                        const ef = this.entityForm();
+                        if (ef)
+                            ef().reset();
+                    }
                 }
                 else {
                     this.loadEntity(col.slug, id);
                 }
             }
         });
+        // Manage preview URL for focal point picker and detect image dimensions
+        effect((onCleanup) => {
+            const file = this.pendingFile();
+            if (file && file.type.startsWith('image/')) {
+                const url = URL.createObjectURL(file);
+                this.pendingFileUrl.set(url);
+                let cancelled = false;
+                onCleanup(() => {
+                    cancelled = true;
+                    URL.revokeObjectURL(url);
+                });
+                const img = new Image();
+                img.onload = () => {
+                    if (!cancelled) {
+                        this.pendingImageDimensions.set({ width: img.naturalWidth, height: img.naturalHeight });
+                    }
+                };
+                img.src = url;
+            }
+            else {
+                this.pendingFileUrl.set(null);
+                this.pendingImageDimensions.set({ width: 0, height: 0 });
+            }
+        });
     }
     /**
      * Get a FieldTree node for a top-level field by name.
@@ -5120,6 +5659,14 @@ class EntityFormWidget {
         data['filesize'] = file.size;
         this.formModel.set(data);
     }
+    /**
+     * Handle focal point change from the picker.
+     */
+    onFocalPointChange(fp) {
+        const data = { ...this.formModel() };
+        data['focalPoint'] = fp;
+        this.formModel.set(data);
+    }
     /**
      * Handle file removed from the upload zone.
      */
@@ -5395,7 +5942,7 @@ class EntityFormWidget {
 							<mcms-collection-upload-zone
 								[uploadConfig]="collection().upload"
 								[pendingFile]="pendingFile()"
-								[existingMedia]="mode() === 'edit' && !pendingFile() ? formModel() : null"
+								[existingMedia]="mode() !== 'create' && !pendingFile() ? formModel() : null"
 								[disabled]="mode() === 'view'"
 								[isUploading]="isUploadingFile()"
 								[uploadProgress]="uploadFileProgress()"
@@ -5405,6 +5952,27 @@ class EntityFormWidget {
 							/>
 						}
 
+						@if (isUploadCol() && isImageFile() && focalPointImageUrl()) {
+							<div class="mb-6" [class.pointer-events-none]="mode() === 'view'">
+								<p class="mb-2 text-sm font-medium">Focal Point</p>
+								<mcms-focal-point-picker
+									[imageUrl]="focalPointImageUrl()"
+									[focalPoint]="currentFocalPoint()"
+									[naturalWidth]="imageNaturalDimensions().width"
+									[naturalHeight]="imageNaturalDimensions().height"
+									[alt]="focalPointAlt()"
+									[imageSizes]="uploadImageSizes()"
+									(focalPointChange)="onFocalPointChange($event)"
+								/>
+							</div>
+						}
+
+						@if (isUploadCol() && formModelSizes()) {
+							<div class="mb-6">
+								<mcms-image-variants-display [sizes]="formModelSizes()" />
+							</div>
+						}
+
 						<div class="space-y-6">
 							@for (field of visibleFields(); track field.name) {
 								<mcms-field-renderer
@@ -5473,7 +6041,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"] }, { kind: "component", type: CollectionUploadZoneComponent, selector: "mcms-collection-upload-zone", inputs: ["uploadConfig", "disabled", "pendingFile", "isUploading", "uploadProgress", "error", "existingMedia"], outputs: ["fileSelected", "fileRemoved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: Card, selector: "mcms-card" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: CardFooter, selector: "mcms-card-footer" }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Spinner, selector: "mcms-spinner", inputs: ["size", "label", "class"] }, { kind: "component", type: Alert, selector: "mcms-alert", inputs: ["variant", "class"] }, { kind: "component", type: FieldRenderer, selector: "mcms-field-renderer", inputs: ["field", "formNode", "formTree", "formModel", "mode", "path"] }, { kind: "component", type: Breadcrumbs, selector: "mcms-breadcrumbs", inputs: ["class"] }, { kind: "component", type: BreadcrumbItem, selector: "mcms-breadcrumb-item", inputs: ["href", "current", "class"] }, { kind: "component", type: BreadcrumbSeparator, selector: "mcms-breadcrumb-separator", inputs: ["class"] }, { kind: "component", type: VersionHistoryWidget, selector: "mcms-version-history", inputs: ["collection", "documentId", "documentLabel"], outputs: ["restored"] }, { kind: "component", type: CollectionUploadZoneComponent, selector: "mcms-collection-upload-zone", inputs: ["uploadConfig", "disabled", "pendingFile", "isUploading", "uploadProgress", "error", "existingMedia"], outputs: ["fileSelected", "fileRemoved"] }, { kind: "component", type: FocalPointPickerComponent, selector: "mcms-focal-point-picker", inputs: ["imageUrl", "focalPoint", "alt", "naturalWidth", "naturalHeight", "imageSizes"], outputs: ["focalPointChange"] }, { kind: "component", type: ImageVariantsDisplay, selector: "mcms-image-variants-display", inputs: ["sizes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityFormWidget, decorators: [{
             type: Component,
@@ -5492,6 +6060,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         BreadcrumbSeparator,
                         VersionHistoryWidget,
                         CollectionUploadZoneComponent,
+                        FocalPointPickerComponent,
+                        ImageVariantsDisplay,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
@@ -5557,7 +6127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 							<mcms-collection-upload-zone
 								[uploadConfig]="collection().upload"
 								[pendingFile]="pendingFile()"
-								[existingMedia]="mode() === 'edit' && !pendingFile() ? formModel() : null"
+								[existingMedia]="mode() !== 'create' && !pendingFile() ? formModel() : null"
 								[disabled]="mode() === 'view'"
 								[isUploading]="isUploadingFile()"
 								[uploadProgress]="uploadFileProgress()"
@@ -5567,6 +6137,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 							/>
 						}
 
+						@if (isUploadCol() && isImageFile() && focalPointImageUrl()) {
+							<div class="mb-6" [class.pointer-events-none]="mode() === 'view'">
+								<p class="mb-2 text-sm font-medium">Focal Point</p>
+								<mcms-focal-point-picker
+									[imageUrl]="focalPointImageUrl()"
+									[focalPoint]="currentFocalPoint()"
+									[naturalWidth]="imageNaturalDimensions().width"
+									[naturalHeight]="imageNaturalDimensions().height"
+									[alt]="focalPointAlt()"
+									[imageSizes]="uploadImageSizes()"
+									(focalPointChange)="onFocalPointChange($event)"
+								/>
+							</div>
+						}
+
+						@if (isUploadCol() && formModelSizes()) {
+							<div class="mb-6">
+								<mcms-image-variants-display [sizes]="formModelSizes()" />
+							</div>
+						}
+
 						<div class="space-y-6">
 							@for (field of visibleFields(); track field.name) {
 								<mcms-field-renderer
@@ -5945,6 +6536,81 @@ class EntityViewWidget {
     canDelete = computed(() => {
         return this.collectionAccess.canDelete(this.collection().slug);
     }, ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    /** Whether this collection is an upload collection */
+    isUploadCol = computed(() => isUploadCollection(this.collection()), ...(ngDevMode ? [{ debugName: "isUploadCol" }] : []));
+    /** Whether the entity is an image */
+    isEntityImage = computed(() => {
+        const e = this.entity();
+        if (!e)
+            return false;
+        const mimeType = e['mimeType'];
+        return typeof mimeType === 'string' && mimeType.startsWith('image/');
+    }, ...(ngDevMode ? [{ debugName: "isEntityImage" }] : []));
+    /** Media URL for preview */
+    entityMediaUrl = computed(() => {
+        const e = this.entity();
+        if (!e)
+            return '';
+        if (typeof e['url'] === 'string' && e['url'])
+            return e['url'];
+        if (typeof e['path'] === 'string' && e['path'])
+            return `/api/media/file/${e['path']}`;
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "entityMediaUrl" }] : []));
+    /** Focal point from entity data */
+    entityFocalPoint = computed(() => {
+        const e = this.entity();
+        if (!e)
+            return { x: 0.5, y: 0.5 };
+        const fp = e['focalPoint'];
+        if (fp != null && typeof fp === 'object' && !Array.isArray(fp)) {
+            const obj = fp; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+            const x = obj['x'];
+            const y = obj['y'];
+            if (typeof x === 'number' && typeof y === 'number')
+                return { x, y };
+        }
+        return { x: 0.5, y: 0.5 };
+    }, ...(ngDevMode ? [{ debugName: "entityFocalPoint" }] : []));
+    /** Image dimensions from entity data */
+    entityDimensions = computed(() => {
+        const e = this.entity();
+        return {
+            width: typeof e?.['width'] === 'number' ? e['width'] : 0,
+            height: typeof e?.['height'] === 'number' ? e['height'] : 0,
+        };
+    }, ...(ngDevMode ? [{ debugName: "entityDimensions" }] : []));
+    /** Image sizes from collection upload config */
+    viewImageSizes = computed(() => {
+        return this.collection().upload?.imageSizes ?? [];
+    }, ...(ngDevMode ? [{ debugName: "viewImageSizes" }] : []));
+    /** Generated image sizes from entity data */
+    entitySizes = computed(() => {
+        const e = this.entity();
+        if (!e)
+            return null;
+        const sizes = e['sizes'];
+        if (sizes != null &&
+            typeof sizes === 'object' &&
+            !Array.isArray(sizes) &&
+            Object.keys(sizes).length > 0) {
+            return sizes; // eslint-disable-line @typescript-eslint/consistent-type-assertions
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "entitySizes" }] : []));
+    /** Media preview data for non-image files */
+    entityMediaPreview = computed(() => {
+        const e = this.entity();
+        if (!e)
+            return null;
+        return {
+            url: typeof e['url'] === 'string' ? e['url'] : undefined,
+            path: typeof e['path'] === 'string' ? e['path'] : undefined,
+            mimeType: typeof e['mimeType'] === 'string' ? e['mimeType'] : undefined,
+            filename: typeof e['filename'] === 'string' ? e['filename'] : undefined,
+            alt: typeof e['alt'] === 'string' ? e['alt'] : undefined,
+        };
+    }, ...(ngDevMode ? [{ debugName: "entityMediaPreview" }] : []));
     /** Whether collection has soft delete enabled */
     hasSoftDelete = computed(() => !!this.collection().softDelete, ...(ngDevMode ? [{ debugName: "hasSoftDelete" }] : []));
     /** Whether the current entity is soft-deleted */
@@ -6400,6 +7066,28 @@ class EntityViewWidget {
 							{{ loadError() }}
 						</mcms-alert>
 					} @else if (entity()) {
+						@if (isUploadCol() && entityMediaUrl()) {
+							<div class="mb-6">
+								@if (isEntityImage()) {
+									<div class="pointer-events-none">
+										<mcms-focal-point-picker
+											[imageUrl]="entityMediaUrl()"
+											[focalPoint]="entityFocalPoint()"
+											[naturalWidth]="entityDimensions().width"
+											[naturalHeight]="entityDimensions().height"
+											[imageSizes]="viewImageSizes()"
+										/>
+									</div>
+								} @else {
+									<mcms-media-preview [media]="entityMediaPreview()" size="xl" />
+								}
+							</div>
+						}
+						@if (isUploadCol() && entitySizes()) {
+							<div class="mb-6">
+								<mcms-image-variants-display [sizes]="entitySizes()" />
+							</div>
+						}
 						<div class="grid gap-6 md:grid-cols-2">
 							@for (field of visibleFields(); track field.name) {
 								<mcms-field-display
@@ -6448,7 +7136,7 @@ class EntityViewWidget {
 				</div>
 			}
 		</div>
-	`, isInline: true, dependencies: [{ kind: "component", type: Card, selector: "mcms-card" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: CardFooter, selector: "mcms-card-footer" }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Alert, selector: "mcms-alert", inputs: ["variant", "class"] }, { kind: "component", type: Skeleton, selector: "mcms-skeleton", inputs: ["class"] }, { kind: "component", type: FieldDisplay, selector: "mcms-field-display", inputs: ["value", "type", "label", "format", "emptyText", "badgeConfig", "openInNewTab", "maxItems", "class", "fieldMeta", "numberFormat", "dateFormat"] }, { kind: "component", type: Breadcrumbs, selector: "mcms-breadcrumbs", inputs: ["class"] }, { kind: "component", type: BreadcrumbItem, selector: "mcms-breadcrumb-item", inputs: ["href", "current", "class"] }, { kind: "component", type: BreadcrumbSeparator, selector: "mcms-breadcrumb-separator", inputs: ["class"] }, { kind: "component", type: VersionHistoryWidget, selector: "mcms-version-history", inputs: ["collection", "documentId", "documentLabel"], outputs: ["restored"] }, { kind: "component", type: PublishControlsWidget, selector: "mcms-publish-controls", inputs: ["collection", "documentId", "documentLabel", "initialStatus"], outputs: ["statusChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: Card, selector: "mcms-card" }, { kind: "component", type: CardContent, selector: "mcms-card-content" }, { kind: "component", type: CardFooter, selector: "mcms-card-footer" }, { kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Alert, selector: "mcms-alert", inputs: ["variant", "class"] }, { kind: "component", type: Skeleton, selector: "mcms-skeleton", inputs: ["class"] }, { kind: "component", type: FieldDisplay, selector: "mcms-field-display", inputs: ["value", "type", "label", "format", "emptyText", "badgeConfig", "openInNewTab", "maxItems", "class", "fieldMeta", "numberFormat", "dateFormat"] }, { kind: "component", type: Breadcrumbs, selector: "mcms-breadcrumbs", inputs: ["class"] }, { kind: "component", type: BreadcrumbItem, selector: "mcms-breadcrumb-item", inputs: ["href", "current", "class"] }, { kind: "component", type: BreadcrumbSeparator, selector: "mcms-breadcrumb-separator", inputs: ["class"] }, { kind: "component", type: VersionHistoryWidget, selector: "mcms-version-history", inputs: ["collection", "documentId", "documentLabel"], outputs: ["restored"] }, { kind: "component", type: PublishControlsWidget, selector: "mcms-publish-controls", inputs: ["collection", "documentId", "documentLabel", "initialStatus"], outputs: ["statusChanged"] }, { kind: "component", type: MediaPreviewComponent, selector: "mcms-media-preview", inputs: ["media", "size", "class", "rounded"] }, { kind: "component", type: FocalPointPickerComponent, selector: "mcms-focal-point-picker", inputs: ["imageUrl", "focalPoint", "alt", "naturalWidth", "naturalHeight", "imageSizes"], outputs: ["focalPointChange"] }, { kind: "component", type: ImageVariantsDisplay, selector: "mcms-image-variants-display", inputs: ["sizes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: EntityViewWidget, decorators: [{
             type: Component,
@@ -6467,6 +7155,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         BreadcrumbSeparator,
                         VersionHistoryWidget,
                         PublishControlsWidget,
+                        MediaPreviewComponent,
+                        FocalPointPickerComponent,
+                        ImageVariantsDisplay,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
@@ -6570,6 +7261,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 							{{ loadError() }}
 						</mcms-alert>
 					} @else if (entity()) {
+						@if (isUploadCol() && entityMediaUrl()) {
+							<div class="mb-6">
+								@if (isEntityImage()) {
+									<div class="pointer-events-none">
+										<mcms-focal-point-picker
+											[imageUrl]="entityMediaUrl()"
+											[focalPoint]="entityFocalPoint()"
+											[naturalWidth]="entityDimensions().width"
+											[naturalHeight]="entityDimensions().height"
+											[imageSizes]="viewImageSizes()"
+										/>
+									</div>
+								} @else {
+									<mcms-media-preview [media]="entityMediaPreview()" size="xl" />
+								}
+							</div>
+						}
+						@if (isUploadCol() && entitySizes()) {
+							<div class="mb-6">
+								<mcms-image-variants-display [sizes]="entitySizes()" />
+							</div>
+						}
 						<div class="grid gap-6 md:grid-cols-2">
 							@for (field of visibleFields(); track field.name) {
 								<mcms-field-display
@@ -11452,14 +12165,27 @@ class MediaEditDialog {
     data = inject(DIALOG_DATA);
     api = injectMomentumAPI();
     media = this.data.media;
+    imageSizes = this.data.imageSizes ?? [];
     filename = signal(this.data.media.filename, ...(ngDevMode ? [{ debugName: "filename" }] : []));
     altText = signal(this.data.media.alt ?? '', ...(ngDevMode ? [{ debugName: "altText" }] : []));
+    focalPointValue = signal(this.data.media.focalPoint ?? { x: 0.5, y: 0.5 }, ...(ngDevMode ? [{ debugName: "focalPointValue" }] : []));
     isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : []));
     saveError = signal(null, ...(ngDevMode ? [{ debugName: "saveError" }] : []));
     formattedSize = formatFileSize(this.data.media.filesize);
+    isImage = computed(() => this.media.mimeType.startsWith('image/'), ...(ngDevMode ? [{ debugName: "isImage" }] : []));
+    imageUrl = computed(() => {
+        return this.media.url ?? `/api/media/file/${this.media.path}`;
+    }, ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
     hasChanges = computed(() => {
-        return this.filename() !== this.media.filename || this.altText() !== (this.media.alt ?? '');
+        const fpChanged = this.focalPointValue().x !== (this.media.focalPoint?.x ?? 0.5) ||
+            this.focalPointValue().y !== (this.media.focalPoint?.y ?? 0.5);
+        return (this.filename() !== this.media.filename ||
+            this.altText() !== (this.media.alt ?? '') ||
+            fpChanged);
     }, ...(ngDevMode ? [{ debugName: "hasChanges" }] : []));
+    onFocalPointChange(fp) {
+        this.focalPointValue.set(fp);
+    }
     /**
      * Save media metadata changes via API.
      */
@@ -11467,10 +12193,14 @@ class MediaEditDialog {
         this.isSaving.set(true);
         this.saveError.set(null);
         try {
-            const result = await this.api.collection('media').update(this.media.id, {
+            const updateData = {
                 filename: this.filename(),
                 alt: this.altText(),
-            });
+            };
+            if (this.isImage()) {
+                updateData['focalPoint'] = this.focalPointValue();
+            }
+            const result = await this.api.collection('media').update(this.media.id, updateData);
             if (isMediaEditItem(result)) {
                 this.dialogRef.close({ updated: true, media: result });
             }
@@ -11527,6 +12257,21 @@ class MediaEditDialog {
 					</div>
 				</div>
 
+				@if (isImage()) {
+					<div class="mt-4">
+						<p class="mb-2 text-sm font-medium">Focal Point</p>
+						<mcms-focal-point-picker
+							[imageUrl]="imageUrl()"
+							[focalPoint]="focalPointValue()"
+							[naturalWidth]="media.width ?? 0"
+							[naturalHeight]="media.height ?? 0"
+							[alt]="media.alt ?? media.filename"
+							[imageSizes]="imageSizes"
+							(focalPointChange)="onFocalPointChange($event)"
+						/>
+					</div>
+				}
+
 				@if (saveError()) {
 					<mcms-alert variant="destructive" class="mt-4">
 						{{ saveError() }}
@@ -11544,7 +12289,7 @@ class MediaEditDialog {
 				</button>
 			</mcms-dialog-footer>
 		</mcms-dialog>
-	`, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Dialog, selector: "mcms-dialog", inputs: ["class"] }, { kind: "component", type: DialogHeader, selector: "mcms-dialog-header" }, { kind: "component", type: DialogTitle, selector: "mcms-dialog-title", inputs: ["id"] }, { kind: "component", type: DialogContent, selector: "mcms-dialog-content" }, { kind: "component", type: DialogFooter, selector: "mcms-dialog-footer" }, { kind: "directive", type: DialogClose, selector: "[mcmsDialogClose]", inputs: ["mcmsDialogClose"] }, { kind: "component", type: Input, selector: "mcms-input", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "type", "id", "name", "placeholder", "autocomplete", "ariaLabel", "describedBy", "min", "max", "step"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Textarea, selector: "mcms-textarea", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "rows", "ariaLabel", "describedBy"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Label, selector: "mcms-label", inputs: ["for", "required", "disabled", "class"] }, { kind: "component", type: Spinner, selector: "mcms-spinner", inputs: ["size", "label", "class"] }, { kind: "component", type: Alert, selector: "mcms-alert", inputs: ["variant", "class"] }, { kind: "component", type: MediaPreviewComponent, selector: "mcms-media-preview", inputs: ["media", "size", "class", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+	`, isInline: true, dependencies: [{ kind: "component", type: Button, selector: "button[mcms-button], a[mcms-button]", inputs: ["variant", "size", "disabled", "loading", "ariaLabel", "class"] }, { kind: "component", type: Dialog, selector: "mcms-dialog", inputs: ["class"] }, { kind: "component", type: DialogHeader, selector: "mcms-dialog-header" }, { kind: "component", type: DialogTitle, selector: "mcms-dialog-title", inputs: ["id"] }, { kind: "component", type: DialogContent, selector: "mcms-dialog-content" }, { kind: "component", type: DialogFooter, selector: "mcms-dialog-footer" }, { kind: "directive", type: DialogClose, selector: "[mcmsDialogClose]", inputs: ["mcmsDialogClose"] }, { kind: "component", type: Input, selector: "mcms-input", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "type", "id", "name", "placeholder", "autocomplete", "ariaLabel", "describedBy", "min", "max", "step"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Textarea, selector: "mcms-textarea", inputs: ["value", "disabled", "errors", "touched", "invalid", "readonly", "required", "id", "name", "placeholder", "rows", "ariaLabel", "describedBy"], outputs: ["valueChange", "blurred"] }, { kind: "component", type: Label, selector: "mcms-label", inputs: ["for", "required", "disabled", "class"] }, { kind: "component", type: Spinner, selector: "mcms-spinner", inputs: ["size", "label", "class"] }, { kind: "component", type: Alert, selector: "mcms-alert", inputs: ["variant", "class"] }, { kind: "component", type: MediaPreviewComponent, selector: "mcms-media-preview", inputs: ["media", "size", "class", "rounded"] }, { kind: "component", type: FocalPointPickerComponent, selector: "mcms-focal-point-picker", inputs: ["imageUrl", "focalPoint", "alt", "naturalWidth", "naturalHeight", "imageSizes"], outputs: ["focalPointChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: MediaEditDialog, decorators: [{
             type: Component,
@@ -11564,6 +12309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         Spinner,
                         Alert,
                         MediaPreviewComponent,
+                        FocalPointPickerComponent,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { style: 'display: block; width: 100%' },
@@ -11608,6 +12354,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 					</div>
 				</div>
 
+				@if (isImage()) {
+					<div class="mt-4">
+						<p class="mb-2 text-sm font-medium">Focal Point</p>
+						<mcms-focal-point-picker
+							[imageUrl]="imageUrl()"
+							[focalPoint]="focalPointValue()"
+							[naturalWidth]="media.width ?? 0"
+							[naturalHeight]="media.height ?? 0"
+							[alt]="media.alt ?? media.filename"
+							[imageSizes]="imageSizes"
+							(focalPointChange)="onFocalPointChange($event)"
+						/>
+					</div>
+				}
+
 				@if (saveError()) {
 					<mcms-alert variant="destructive" class="mt-4">
 						{{ saveError() }}
@@ -11668,6 +12429,7 @@ function getInputElement(event) {
  */
 class MediaLibraryPage {
     document = inject(DOCUMENT);
+    route = inject(ActivatedRoute);
     api = injectMomentumAPI();
     uploadService = inject(UploadService);
     feedback = inject(FeedbackService);
@@ -11675,6 +12437,12 @@ class MediaLibraryPage {
     dialog = inject(DialogService);
     destroyRef = inject(DestroyRef);
     uploadSubscriptions = [];
+    /** Image sizes config from the media collection (for crop previews in edit dialog) */
+    mediaImageSizes = (() => {
+        const collections = getCollectionsFromRouteData(this.route.parent?.snapshot.data);
+        const mediaColl = collections.find((c) => c.slug === 'media');
+        return mediaColl?.upload?.imageSizes ?? [];
+    })();
     /** Internal state */
     isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     mediaItems = signal([], ...(ngDevMode ? [{ debugName: "mediaItems" }] : []));
@@ -11826,7 +12594,7 @@ class MediaLibraryPage {
      */
     editMedia(media) {
         const dialogRef = this.dialog.open(MediaEditDialog, {
-            data: { media },
+            data: { media, imageSizes: this.mediaImageSizes },
             width: '36rem',
         });
         dialogRef.afterClosed.subscribe((result) => {
@@ -13454,18 +14222,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-BUziCgyn.mjs').then((m) => m.RichTextFieldRenderer));
+                    registry.register('richText', () => import('./momentumcms-admin-rich-text-field.component-BIUu6NXa.mjs').then((m) => m.RichTextFieldRenderer));
                     // Layout field renderers (support nested field rendering)
-                    registry.register('group', () => import('./momentumcms-admin-group-field.component-Cenc5zMW.mjs').then((m) => m.GroupFieldRenderer));
-                    registry.register('array', () => import('./momentumcms-admin-array-field.component-pqA3_nC8.mjs').then((m) => m.ArrayFieldRenderer));
-                    registry.register('blocks', () => import('./momentumcms-admin-blocks-field.component-88TEhVm4.mjs').then((m) => m.BlocksFieldRenderer));
+                    registry.register('group', () => import('./momentumcms-admin-group-field.component-Bofhumd5.mjs').then((m) => m.GroupFieldRenderer));
+                    registry.register('array', () => import('./momentumcms-admin-array-field.component-ChjP5zK9.mjs').then((m) => m.ArrayFieldRenderer));
+                    registry.register('blocks', () => import('./momentumcms-admin-blocks-field.component-Dl0FxGnf.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-DlCdpcRy.mjs').then((m) => m.RelationshipFieldRenderer));
+                    registry.register('relationship', () => import('./momentumcms-admin-relationship-field.component-DSZhc5MP.mjs').then((m) => m.RelationshipFieldRenderer));
                     // Layout-only renderers (tabs, collapsible, row)
-                    registry.register('tabs', () => import('./momentumcms-admin-tabs-field.component-D_T_JZej.mjs').then((m) => m.TabsFieldRenderer));
-                    registry.register('collapsible', () => import('./momentumcms-admin-collapsible-field.component-D5Jc8h2Q.mjs').then((m) => m.CollapsibleFieldRenderer));
-                    registry.register('row', () => import('./momentumcms-admin-row-field.component-fFTcYU-P.mjs').then((m) => m.RowFieldRenderer));
+                    registry.register('tabs', () => import('./momentumcms-admin-tabs-field.component-BsnCWC5J.mjs').then((m) => m.TabsFieldRenderer));
+                    registry.register('collapsible', () => import('./momentumcms-admin-collapsible-field.component-CSLOT0Dp.mjs').then((m) => m.CollapsibleFieldRenderer));
+                    registry.register('row', () => import('./momentumcms-admin-row-field.component-DBzqzooT.mjs').then((m) => m.RowFieldRenderer));
                 };
             },
         },
@@ -15245,4 +16013,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-5WigESOC.mjs.map
+//# sourceMappingURL=momentumcms-admin-momentumcms-admin-D8WvqCxe.mjs.map