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
- Store: split panel events into Adjust/Transform/File-info groups, one
  withReducer per group, and move async effects to withEventHandlers
- Remove unused Storybook wiring (story + .storybook glob) and the unused
  legacy Dojo and noop launchers

Refs #36063

Author: oidacra

core-web/apps/dotcms-ui/.storybook/main.js

@@ -14,7 +14,6 @@ module.exports = {
         '../../../libs/template-builder/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/block-editor/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/edit-content/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-        '../../../libs/image-editor/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/ui/**/*.stories.@(js|jsx|ts|tsx|mdx)',
         '../../../libs/portlets/**/*.stories.@(js|jsx|ts|tsx|mdx)'
     ],

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,8 +7,9 @@ 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)
- * without the consuming field knowing which editor surfaces the result.
+ * The Angular edit-content shell provides the dialog-based launcher. When the
+ * token is left unprovided, the binary field injects it as optional and hides
+ * the "edit image" action, so no fallback implementation is needed.
  */
 export const IMAGE_EDITOR_LAUNCHER = new InjectionToken<DotImageEditorLauncher>(
     'IMAGE_EDITOR_LAUNCHER'

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

@@ -4,5 +4,3 @@ 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';