@momentumcms/admin 0.5.0 → 0.5.2

package/types/momentumcms-admin.d.ts

@@ -1,7 +1,7 @@
 import { Routes, CanActivateFn, CanDeactivateFn } from '@angular/router';
 import * as _angular_core from '@angular/core';
 import { Type, InjectionToken, Signal, Provider, OnInit, WritableSignal, makeEnvironmentProviders } from '@angular/core';
-import { CollectionConfig, GlobalConfig, PluginAdminRouteDescriptor, MomentumPlugin, MomentumConfig, MomentumAdminConfig, MediaDocument, AdminConfig, Field, DocumentStatus as DocumentStatus$1, BlockConfig, UploadField } from '@momentumcms/core';
+import { CollectionConfig, GlobalConfig, PluginAdminRouteDescriptor, MomentumPlugin, MomentumConfig, MomentumAdminConfig, MediaDocument, AdminConfig, ImageSizeConfig, Field, DocumentStatus as DocumentStatus$1, BlockConfig, UploadField } from '@momentumcms/core';
 import { HttpContextToken, HttpInterceptorFn } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import * as _momentumcms_admin from '@momentumcms/admin';
@@ -2203,6 +2203,10 @@ interface MediaItem$1 {
     alt?: string;
     width?: number;
     height?: number;
+    focalPoint?: {
+        x: number;
+        y: number;
+    };
 }
 /**
  * Media Library Page
@@ -2211,6 +2215,7 @@ interface MediaItem$1 {
  */
 declare class MediaLibraryPage {
     private readonly document;
+    private readonly route;
     private readonly api;
     private readonly uploadService;
     private readonly feedback;
@@ -2218,6 +2223,8 @@ declare class MediaLibraryPage {
     private readonly dialog;
     private readonly destroyRef;
     private readonly uploadSubscriptions;
+    /** Image sizes config from the media collection (for crop previews in edit dialog) */
+    readonly mediaImageSizes: ImageSizeConfig[];
     /** Internal state */
     readonly isLoading: _angular_core.WritableSignal<boolean>;
     readonly mediaItems: _angular_core.WritableSignal<MediaItem$1[]>;
@@ -2523,8 +2530,35 @@ declare class EntityFormWidget<T extends Entity = Entity> {
     readonly isUploadingFile: _angular_core.WritableSignal<boolean>;
     readonly uploadFileProgress: _angular_core.WritableSignal<number>;
     readonly uploadFileError: _angular_core.WritableSignal<string | null>;
+    /** Preview URL for the pending image file (focal point picker) */
+    readonly pendingFileUrl: _angular_core.WritableSignal<string | null>;
+    /** Detected dimensions of the pending image */
+    readonly pendingImageDimensions: _angular_core.WritableSignal<{
+        width: number;
+        height: number;
+    }>;
     /** Whether the collection is an upload collection */
     readonly isUploadCol: _angular_core.Signal<boolean>;
+    /** Whether the current file (pending or existing) is an image */
+    readonly isImageFile: _angular_core.Signal<boolean>;
+    /** Image sizes from collection upload config */
+    readonly uploadImageSizes: _angular_core.Signal<ImageSizeConfig[]>;
+    /** Image URL for the focal point picker */
+    readonly focalPointImageUrl: _angular_core.Signal<string>;
+    /** Current focal point value */
+    readonly currentFocalPoint: _angular_core.Signal<{
+        x: number;
+        y: number;
+    }>;
+    /** Natural image dimensions (pending file detection or existing media) */
+    readonly imageNaturalDimensions: _angular_core.Signal<{
+        width: number;
+        height: number;
+    }>;
+    /** Alt text for the focal point picker */
+    readonly focalPointAlt: _angular_core.Signal<string>;
+    /** Generated image sizes from the form model */
+    readonly formModelSizes: _angular_core.Signal<Record<string, unknown> | null>;
     /** Whether the form has been set up */
     private formCreated;
     /** Whether the form has unsaved changes (from signal forms dirty tracking) */
@@ -2565,6 +2599,13 @@ declare class EntityFormWidget<T extends Entity = Entity> {
      * Auto-populates metadata fields in the form model.
      */
     onFileSelected(file: File): void;
+    /**
+     * Handle focal point change from the picker.
+     */
+    onFocalPointChange(fp: {
+        x: number;
+        y: number;
+    }): void;
     /**
      * Handle file removed from the upload zone.
      */
@@ -2636,6 +2677,63 @@ interface EntityViewActionEvent {
     entity: Entity;
 }
 
+/**
+ * Media document data for preview.
+ */
+interface MediaPreviewData {
+    url?: string;
+    path?: string;
+    mimeType?: string;
+    filename?: string;
+    alt?: string;
+}
+/**
+ * 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'"
+ * />
+ * ```
+ */
+declare class MediaPreviewComponent {
+    /** Media data to preview */
+    readonly media: _angular_core.InputSignal<MediaPreviewData | null>;
+    /** Size of the preview */
+    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
+    /** Custom class override */
+    readonly class: _angular_core.InputSignal<string>;
+    /** Whether to show rounded corners */
+    readonly rounded: _angular_core.InputSignal<boolean>;
+    /** Host classes */
+    readonly hostClasses: _angular_core.Signal<string>;
+    /** Size classes map */
+    private readonly sizeClasses;
+    /** Icon size classes */
+    readonly iconClasses: _angular_core.Signal<string>;
+    /** Whether the media is an image */
+    readonly isImage: _angular_core.Signal<boolean>;
+    /** Whether the media is a video */
+    readonly isVideo: _angular_core.Signal<boolean>;
+    /** Whether the media is audio */
+    readonly isAudio: _angular_core.Signal<boolean>;
+    /** Image URL for preview */
+    readonly imageUrl: _angular_core.Signal<string>;
+    /** Icon name based on media type */
+    readonly iconName: _angular_core.Signal<"<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0 1 18 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0 1 18 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 0 1 6 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z\"></path></svg>">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MediaPreviewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MediaPreviewComponent, "mcms-media-preview", never, { "media": { "alias": "media"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Entity View Widget
  *
@@ -2703,6 +2801,28 @@ declare class EntityViewWidget<T extends Entity = Entity> {
     readonly canEdit: _angular_core.Signal<boolean>;
     /** Whether user can delete */
     readonly canDelete: _angular_core.Signal<boolean>;
+    /** Whether this collection is an upload collection */
+    readonly isUploadCol: _angular_core.Signal<boolean>;
+    /** Whether the entity is an image */
+    readonly isEntityImage: _angular_core.Signal<boolean>;
+    /** Media URL for preview */
+    readonly entityMediaUrl: _angular_core.Signal<string>;
+    /** Focal point from entity data */
+    readonly entityFocalPoint: _angular_core.Signal<{
+        x: number;
+        y: number;
+    }>;
+    /** Image dimensions from entity data */
+    readonly entityDimensions: _angular_core.Signal<{
+        width: number;
+        height: number;
+    }>;
+    /** Image sizes from collection upload config */
+    readonly viewImageSizes: _angular_core.Signal<ImageSizeConfig[]>;
+    /** Generated image sizes from entity data */
+    readonly entitySizes: _angular_core.Signal<Record<string, unknown> | null>;
+    /** Media preview data for non-image files */
+    readonly entityMediaPreview: _angular_core.Signal<MediaPreviewData | null>;
     /** Whether collection has soft delete enabled */
     readonly hasSoftDelete: _angular_core.Signal<boolean>;
     /** Whether the current entity is soft-deleted */
@@ -3026,63 +3146,6 @@ declare class PublishControlsWidget {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PublishControlsWidget, "mcms-publish-controls", never, { "collection": { "alias": "collection"; "required": true; "isSignal": true; }; "documentId": { "alias": "documentId"; "required": true; "isSignal": true; }; "documentLabel": { "alias": "documentLabel"; "required": false; "isSignal": true; }; "initialStatus": { "alias": "initialStatus"; "required": false; "isSignal": true; }; }, { "statusChanged": "statusChanged"; }, never, never, true, never>;
 }
 
-/**
- * Media document data for preview.
- */
-interface MediaPreviewData {
-    url?: string;
-    path?: string;
-    mimeType?: string;
-    filename?: string;
-    alt?: string;
-}
-/**
- * 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'"
- * />
- * ```
- */
-declare class MediaPreviewComponent {
-    /** Media data to preview */
-    readonly media: _angular_core.InputSignal<MediaPreviewData | null>;
-    /** Size of the preview */
-    readonly size: _angular_core.InputSignal<"xs" | "sm" | "md" | "lg" | "xl">;
-    /** Custom class override */
-    readonly class: _angular_core.InputSignal<string>;
-    /** Whether to show rounded corners */
-    readonly rounded: _angular_core.InputSignal<boolean>;
-    /** Host classes */
-    readonly hostClasses: _angular_core.Signal<string>;
-    /** Size classes map */
-    private readonly sizeClasses;
-    /** Icon size classes */
-    readonly iconClasses: _angular_core.Signal<string>;
-    /** Whether the media is an image */
-    readonly isImage: _angular_core.Signal<boolean>;
-    /** Whether the media is a video */
-    readonly isVideo: _angular_core.Signal<boolean>;
-    /** Whether the media is audio */
-    readonly isAudio: _angular_core.Signal<boolean>;
-    /** Image URL for preview */
-    readonly imageUrl: _angular_core.Signal<string>;
-    /** Icon name based on media type */
-    readonly iconName: _angular_core.Signal<"<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-1.5A1.125 1.125 0 0 1 18 18.375M20.625 4.5H3.375m17.25 0c.621 0 1.125.504 1.125 1.125M20.625 4.5h-1.5C18.504 4.5 18 5.004 18 5.625m3.75 0v1.5c0 .621-.504 1.125-1.125 1.125M3.375 4.5c-.621 0-1.125.504-1.125 1.125M3.375 4.5h1.5C5.496 4.5 6 5.004 6 5.625m-3.75 0v1.5c0 .621.504 1.125 1.125 1.125m0 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m1.5-3.75C5.496 8.25 6 7.746 6 7.125v-1.5M4.875 8.25C5.496 8.25 6 8.754 6 9.375v1.5m0-5.25v5.25m0-5.25C6 5.004 6.504 4.5 7.125 4.5h9.75c.621 0 1.125.504 1.125 1.125m1.125 2.625h1.5m-1.5 0A1.125 1.125 0 0 1 18 7.125v-1.5m1.125 2.625c-.621 0-1.125.504-1.125 1.125v1.5m2.625-2.625c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125M18 5.625v5.25M7.125 12h9.75m-9.75 0A1.125 1.125 0 0 1 6 10.875M7.125 12C6.504 12 6 12.504 6 13.125m0-2.25C6 11.496 5.496 12 4.875 12M18 10.875c0 .621-.504 1.125-1.125 1.125M18 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m-12 5.25v-5.25m0 5.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125m-12 0v-1.5c0-.621-.504-1.125-1.125-1.125M18 18.375v-5.25m0 5.25v-1.5c0-.621.504-1.125 1.125-1.125M18 13.125v1.5c0 .621.504 1.125 1.125 1.125M18 13.125c0-.621.504-1.125 1.125-1.125M6 13.125v1.5c0 .621-.504 1.125-1.125 1.125M6 13.125C6 12.504 5.496 12 4.875 12m-1.5 0h1.5m-1.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M19.125 12h1.5m0 0c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h1.5m14.25 0h1.5\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m9 9 10.5-3m0 6.553v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 1 1-.99-3.467l2.31-.66a2.25 2.25 0 0 0 1.632-2.163Zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 0 1-1.632 2.163l-1.32.377a1.803 1.803 0 0 1-.99-3.467l2.31-.66A2.25 2.25 0 0 0 9 15.553Z\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z\"></path></svg>" | "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" style=\"stroke-width:var(--ng-icon__stroke-width, 1.5)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z\"></path></svg>">;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MediaPreviewComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MediaPreviewComponent, "mcms-media-preview", never, { "media": { "alias": "media"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
-}
-
 /** Device size preset for the preview iframe. */
 type DeviceSize = 'desktop' | 'tablet' | 'mobile';
 /**
@@ -3091,8 +3154,9 @@ type DeviceSize = 'desktop' | 'tablet' | 'mobile';
  * Displays an iframe that shows a live preview of the document being edited.
  *
  * Two modes based on preview config type:
- * - `preview: true` (server-rendered HTML): iframe loads API endpoint with scripts enabled
- *   for postMessage live updates.
+ * - `preview: true` (server-rendered HTML): initial GET loads from database, then
+ *   subsequent form changes are POSTed to the same endpoint with the current form data
+ *   for realtime preview updates (no page reload needed).
  * - `preview: string/function` (URL-based): iframe loads the page URL with scripts DISABLED.
  *   This prevents loading a second Angular app instance (with Vite HMR, SSR hydration, etc.)
  *   which causes tab crashes in dev mode. The SSR-rendered HTML displays correctly without JS.
@@ -3120,17 +3184,23 @@ declare class LivePreviewComponent {
     private readonly refreshCounter;
     /** Reference to the static iframe element (available when previewUrl is non-null) */
     private readonly previewIframe;
+    /** Whether the initial iframe load from GET is complete */
+    private initialLoadDone;
     /** Compute the raw preview URL */
     readonly previewUrl: _angular_core.Signal<string | null>;
     /** Computed iframe width based on device size */
     readonly iframeWidth: _angular_core.Signal<string>;
     /** Sandbox attribute value based on preview mode */
     private readonly sandboxValue;
-    /** Debounce timer for postMessage updates */
+    /** Debounce timer for live preview updates */
     private debounceTimer;
+    /** AbortController for in-flight POST requests */
+    private fetchAbort;
     constructor();
-    /** Force iframe to reload */
+    /** Force iframe to reload from server (GET) */
     refreshPreview(): void;
+    /** POST form data to the preview endpoint and write the HTML response to the iframe. */
+    private fetchPreviewHtml;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LivePreviewComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LivePreviewComponent, "mcms-live-preview", never, { "preview": { "alias": "preview"; "required": true; "isSignal": true; }; "documentData": { "alias": "documentData"; "required": true; "isSignal": true; }; "collectionSlug": { "alias": "collectionSlug"; "required": true; "isSignal": true; }; "entityId": { "alias": "entityId"; "required": false; "isSignal": true; }; }, { "editBlockRequest": "editBlockRequest"; }, never, never, true, never>;
 }
@@ -3391,8 +3461,8 @@ declare class FieldRenderer {
     readonly resolvedComponent: _angular_core.WritableSignal<Type<unknown> | null>;
     /** Error from lazy loading failure */
     readonly loadError: _angular_core.WritableSignal<Error | null>;
-    /** Registry key: 'blocks-visual' when blocks field has visual editor, otherwise field.type */
-    readonly registryKey: _angular_core.Signal<"number" | "slug" | "email" | "json" | "text" | "textarea" | "richText" | "date" | "checkbox" | "select" | "radio" | "password" | "upload" | "relationship" | "array" | "group" | "blocks" | "point" | "tabs" | "collapsible" | "row" | "blocks-visual">;
+    /** Registry key: maps field type + editor config to renderer registry keys */
+    readonly registryKey: _angular_core.Signal<"number" | "slug" | "email" | "json" | "text" | "textarea" | "richText" | "date" | "checkbox" | "select" | "radio" | "password" | "upload" | "relationship" | "array" | "group" | "blocks" | "point" | "tabs" | "collapsible" | "row" | "blocks-visual" | "json-email-builder" | "json-form-builder">;
     /** Inputs to pass to the dynamically loaded component via NgComponentOutlet */
     readonly rendererInputs: _angular_core.Signal<{
         field: Field;