feat(image-editor): UI/UX polish for the Angular image editor

- Accordion: design-aligned header (13px title, 11px subtitle, primary icon
  chip when open), collapsed by default, open sections persisted to localStorage
- Adjust values are editable number fields synced with the sliders (clamped)
- Undo/redo keyboard shortcuts on the dialog (Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z,
  Ctrl+Y); ignored while a text field is focused
- Crop: Shift-drag a corner locks the starting aspect ratio
- Address bar text/icon use the design's 78%-white dark-chrome tone
- Canvas/footer layout + padding, gradient adjust sliders, taller dialog

Refs #36063

Author: oidacra

core-web/libs/edit-content/src/lib/edit-content.shell.component.ts

@@ -2,12 +2,25 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { MessageService } from 'primeng/api';
+import { DialogService } from 'primeng/dynamicdialog';
 import { ToastModule } from 'primeng/toast';
 
+import {
+    AngularImageEditorLauncher,
+    IMAGE_EDITOR_LAUNCHER
+} from './fields/shared/image-editor-launcher';
+
 @Component({
     selector: 'dot-edit-content',
     imports: [RouterModule, ToastModule],
-    providers: [MessageService],
+    providers: [
+        MessageService,
+        // Scope the new Angular image editor to the edit-content shell so it only
+        // activates here and never leaks into the legacy/web-component path. DialogService
+        // is required by AngularImageEditorLauncher to open the modal.
+        DialogService,
+        { provide: IMAGE_EDITOR_LAUNCHER, useClass: AngularImageEditorLauncher }
+    ],
     template: '<p-toast /> <router-outlet />',
     styleUrls: ['./edit-content.shell.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush

core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/dot-edit-content-binary-field.component.ts

@@ -63,7 +63,7 @@ import { getFileMetadata, getUiMessage } from './utils/binary-field-utils';
 
 import { DEFAULT_MONACO_CONFIG } from '../../models/dot-edit-content-field.constant';
 import { getFieldVariablesParsed, stringToJson } from '../../utils/functions.util';
-import { AngularImageEditorLauncher, IMAGE_EDITOR_LAUNCHER } from '../shared/image-editor-launcher';
+import { IMAGE_EDITOR_LAUNCHER } from '../shared/image-editor-launcher';
 
 export const DEFAULT_BINARY_FIELD_MONACO_CONFIG: MonacoEditorConstructionOptions = {
     ...DEFAULT_MONACO_CONFIG,
@@ -99,7 +99,6 @@ type SystemOptionsType = {
         DotBinaryFieldStore,
         DotLicenseService,
         DotBinaryFieldValidatorService,
-        { provide: IMAGE_EDITOR_LAUNCHER, useClass: AngularImageEditorLauncher },
         {
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -121,7 +120,10 @@ export class DotEditContentBinaryFieldComponent
     readonly #dotAiService = inject(DotAiService);
     readonly #dialogService = inject(DialogService);
     readonly #destroyRef = inject(DestroyRef);
-    readonly #imageEditorLauncher = inject(IMAGE_EDITOR_LAUNCHER);
+    // Optional: the launcher is provided by the Angular edit-content shell, so the new
+    // image editor only activates there. When absent (e.g. a non-Angular host), or when
+    // isAvailable() is false, `onEditImage()` safely no-ops.
+    readonly #imageEditorLauncher = inject(IMAGE_EDITOR_LAUNCHER, { optional: true });
 
     $isAIPluginInstalled = toSignal(this.#dotAiService.checkPluginInstallation(), {
         initialValue: false
@@ -399,12 +401,18 @@ export class DotEditContentBinaryFieldComponent
      * @memberof DotEditContentBinaryFieldComponent
      */
     onEditImage() {
+        const launcher = this.#imageEditorLauncher;
+
+        if (!launcher?.isAvailable()) {
+            return;
+        }
+
         const inode = this.contentlet?.inode;
         const metadata = this.contentlet
             ? (getFileMetadata(this.contentlet) as Partial<DotFileMetadata>)
             : null;
 
-        this.#imageEditorLauncher
+        launcher
             .open({
                 inode,
                 tempId: this.tempId,

core-web/libs/edit-content/src/lib/fields/shared/image-editor-launcher/angular-image-editor.launcher.spec.ts

@@ -36,14 +36,16 @@ describe('AngularImageEditorLauncher', () => {
         expect(spectator.service.isAvailable()).toBe(true);
     });
 
-    it('should open the DotImageEditorComponent with a closable, escapable dialog', () => {
+    it('should open the DotImageEditorComponent with a headerless, closable, escapable dialog', () => {
         spectator.service.open(params).subscribe();
 
         expect(spectator.inject(DialogService).open).toHaveBeenCalledWith(
             DotImageEditorComponent,
             expect.objectContaining({
                 data: params,
                 modal: true,
+                // The editor renders its own header; PrimeNG's chrome header is hidden.
+                showHeader: false,
                 closable: true,
                 closeOnEscape: true
             })

core-web/libs/edit-content/src/lib/fields/shared/image-editor-launcher/angular-image-editor.launcher.ts

@@ -32,10 +32,15 @@ export class AngularImageEditorLauncher implements DotImageEditorLauncher {
      */
     open(params: ImageEditorOpenParams): Observable<DotCMSTempFile | null> {
         const ref = this.#dialogService.open(DotImageEditorComponent, {
-            header: undefined,
+            // The editor renders its own header (title + close ✕), so hide PrimeNG's
+            // chrome header to avoid a duplicate. Closing is handled by the internal ✕
+            // (DotImageEditorHeaderComponent) and the Esc key (closeOnEscape).
+            showHeader: false,
             data: params,
-            width: 'min(92vw, 75rem)',
-            height: '90%',
+            // Large landscape dialog: wider than tall. Generous caps keep it big on wide
+            // screens while staying within the viewport on smaller ones.
+            width: 'min(96vw, 90rem)',
+            height: 'min(96vh, 60rem)',
             modal: true,
             draggable: false,
             resizable: false,

core-web/libs/image-editor/src/lib/components/dot-image-editor-address-bar/dot-image-editor-address-bar.component.html

@@ -1,12 +1,12 @@
 <div class="address-bar__group">
     <i class="pi pi-link address-bar__link-icon" aria-hidden="true"></i>
-    <input
-        pInputText
-        type="text"
-        readonly
+    <!-- Read-only, server-generated URL — plain text, not an editable input. -->
+    <span
         class="address-bar__field truncate font-mono"
-        [value]="store.previewUrl()"
-        data-testid="image-editor-address-field" />
+        [title]="store.previewUrl()"
+        data-testid="image-editor-address-field">
+        {{ store.previewUrl() }}
+    </span>
     <button
         pButton
         type="button"

core-web/libs/image-editor/src/lib/components/dot-image-editor-address-bar/dot-image-editor-address-bar.component.scss

@@ -5,7 +5,9 @@
     gap: 1rem;
     padding: 0.5rem 0.75rem;
     background-color: rgba(28, 30, 38, 0.92);
-    color: var(--surface-0, #ffffff);
+    // Slightly-less-than-white text, matching the design's dark-chrome treatment
+    // (resting elements at 78% white; full white is reserved for hover/active).
+    color: rgba(255, 255, 255, 0.78);
 }
 
 .address-bar__group {
@@ -17,13 +19,14 @@
 
 .address-bar__link-icon {
     flex: 0 0 auto;
-    opacity: 0.7;
 }
 
 .address-bar__field {
     flex: 1 1 auto;
     min-width: 0;
     max-width: 28rem;
+    color: inherit;
+    font-size: 0.8125rem;
 }
 
 .address-bar__zoom-value {

core-web/libs/image-editor/src/lib/components/dot-image-editor-address-bar/dot-image-editor-address-bar.component.spec.ts

@@ -63,9 +63,7 @@ describe('DotImageEditorAddressBarComponent', () => {
     });
 
     it('should render the preview URL in the address field', () => {
-        const field = spectator.query<HTMLInputElement>(byTestId('image-editor-address-field'));
-
-        expect(field?.value).toBe(PREVIEW_URL);
+        expect(spectator.query(byTestId('image-editor-address-field'))).toHaveText(PREVIEW_URL);
     });
 
     it('should render the zoom level from the zoomLevel input', () => {
@@ -74,10 +72,10 @@ describe('DotImageEditorAddressBarComponent', () => {
         expect(spectator.query(byTestId('image-editor-zoom-value'))).toHaveText('125%');
     });
 
-    it('should copy the preview URL to the clipboard when the copy button is clicked', () => {
+    it('should copy the full (absolute) preview URL to the clipboard when the copy button is clicked', () => {
         spectator.click(byTestId('image-editor-copy-url-btn'));
 
-        expect(writeText).toHaveBeenCalledWith(PREVIEW_URL);
+        expect(writeText).toHaveBeenCalledWith(document.location.origin + PREVIEW_URL);
     });
 
     it('should dispatch undoRequested when undo is clicked', () => {

core-web/libs/image-editor/src/lib/components/dot-image-editor-address-bar/dot-image-editor-address-bar.component.ts

@@ -1,10 +1,10 @@
 import { injectDispatch } from '@ngrx/signals/events';
 
+import { DOCUMENT } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject, input, output } from '@angular/core';
 
 import { MessageService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
 import { TooltipModule } from 'primeng/tooltip';
 
 import { DotMessageService } from '@dotcms/data-access';
@@ -24,14 +24,15 @@ import { ImageEditorStore } from '../../store/image-editor.store';
     selector: 'dot-image-editor-address-bar',
     templateUrl: './dot-image-editor-address-bar.component.html',
     styleUrl: './dot-image-editor-address-bar.component.scss',
-    imports: [ButtonModule, InputTextModule, TooltipModule, DotMessagePipe],
+    imports: [ButtonModule, TooltipModule, DotMessagePipe],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotImageEditorAddressBarComponent {
     protected readonly store = inject(ImageEditorStore);
     readonly #dispatch = injectDispatch(imageEditorHistoryEvents);
     readonly #messageService = inject(MessageService);
     readonly #dotMessageService = inject(DotMessageService);
+    readonly #document = inject(DOCUMENT);
 
     /** Current canvas zoom percentage to display; owned and updated by the canvas. */
     zoomLevel = input<number>(100);
@@ -46,7 +47,7 @@ export class DotImageEditorAddressBarComponent {
     /** Copies the current preview URL to the clipboard, surfacing a toast. */
     protected async copyUrl(): Promise<void> {
         try {
-            await navigator.clipboard.writeText(this.store.previewUrl());
+            await navigator.clipboard.writeText(this.#absoluteUrl());
             this.#messageService.add({
                 severity: 'success',
                 detail: this.#dotMessageService.get(
@@ -62,6 +63,17 @@ export class DotImageEditorAddressBarComponent {
         }
     }
 
+    /**
+     * Resolves the store's root-relative preview URL against the current origin so the
+     * copied value is a complete, shareable URL rather than just the path.
+     */
+    #absoluteUrl(): string {
+        const url = this.store.previewUrl();
+        const origin = this.#document.location?.origin ?? '';
+
+        return /^https?:\/\//.test(url) ? url : `${origin}${url}`;
+    }
+
     /** Steps back one entry in the edit history. */
     protected undo(): void {
         this.#dispatch.undoRequested();

core-web/libs/image-editor/src/lib/components/dot-image-editor-canvas/dot-image-editor-canvas.component.html

@@ -22,6 +22,7 @@
             <img
                 #displayImg
                 class="canvas__img canvas__img--displayed"
+                [class.canvas__img--loading]="store.previewStatus() === 'loading'"
                 [src]="displayedUrl()"
                 [hidden]="!displayedUrl()"
                 alt=""
@@ -66,4 +67,34 @@
             </div>
         }
     </div>
+
+    <!-- Bottom band mirroring the top address bar; hosts the active tool's actions. -->
+    <div class="canvas__footer" data-testid="image-editor-canvas-footer">
+        @switch (store.activeTool()) {
+            @case ('crop') {
+                <p-button
+                    [text]="true"
+                    severity="secondary"
+                    [label]="'edit.content.image-editor.crop.cancel' | dm"
+                    (onClick)="cancelCrop()"
+                    data-testid="image-editor-crop-cancel-btn" />
+                <p-button
+                    [label]="'edit.content.image-editor.crop.apply' | dm"
+                    (onClick)="applyCrop()"
+                    data-testid="image-editor-crop-apply-btn" />
+            }
+            @case ('focal') {
+                <p-button
+                    [text]="true"
+                    severity="secondary"
+                    [label]="'edit.content.image-editor.focal.cancel' | dm"
+                    (onClick)="cancelFocalPoint()"
+                    data-testid="image-editor-focal-cancel-btn" />
+                <p-button
+                    [label]="'edit.content.image-editor.focal.set' | dm"
+                    (onClick)="setFocalPoint()"
+                    data-testid="image-editor-focal-set-btn" />
+            }
+        }
+    </div>
 </div>