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
- Remove the unused Storybook story and the unused legacy Dojo launcher

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/edit-content/src/lib/fields/shared/image-editor-launcher/image-editor-launcher.token.ts

@@ -7,7 +7,7 @@ export type { DotImageEditorLauncher, ImageEditorOpenParams } from '@dotcms/imag
 /**
  * DI seam for launching the image editor from the binary field.
  *
- * Providers swap implementations (Angular dialog, legacy Dojo bridge, or noop)
+ * Providers swap implementations (the Angular dialog, or a noop fallback)
  * without the consuming field knowing which editor surfaces the result.
  */
 export const IMAGE_EDITOR_LAUNCHER = new InjectionToken<DotImageEditorLauncher>(

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

@@ -4,5 +4,4 @@ export {
     ImageEditorOpenParams
 } from './image-editor-launcher.token';
 export { AngularImageEditorLauncher } from './angular-image-editor.launcher';
-export { LegacyDojoImageEditorLauncher } from './legacy-dojo-image-editor.launcher';
 export { NoopImageEditorLauncher } from './noop-image-editor.launcher';

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

@@ -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/edit-content/src/lib/fields/shared/image-editor-launcher/legacy-dojo-image-editor.launcher.ts

@@ -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 {