Renamed library from edit-ema to dot-uve

core-web/apps/dotcms-ui/project.json

@@ -51,8 +51,8 @@
                     },
                     {
                         "glob": "**/*",
-                        "input": "./libs/portlets/edit-ema/portlet/src/lib/assets",
-                        "output": "./assets/edit-ema"
+                        "input": "./libs/portlets/dot-uve/portlet/src/lib/assets",
+                        "output": "./assets/dot-uve"
                     },
                     {
                         "glob": "**/*",
@@ -61,8 +61,8 @@
                     },
                     {
                         "glob": "**/*",
-                        "input": "./libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/assets",
-                        "output": "./assets/edit-uve-toolbar"
+                        "input": "./libs/portlets/dot-uve/portlet/src/lib/dot-uve-editor/components/dot-uve-toolbar/assets",
+                        "output": "./assets/dot-uve-toolbar"
                     }
                 ],
                 "styles": [

core-web/apps/dotcms-ui/src/app/app.routes.ts

@@ -126,7 +126,7 @@ const PORTLETS_ANGULAR: Route[] = [
                 return inject(EmaAppConfigurationService).get(route.queryParams.url);
             }
         },
-        loadChildren: () => import('@dotcms/portlets/dot-ema').then((m) => m.dotEmaRoutes)
+        loadChildren: () => import('@dotcms/portlets/dot-uve').then((m) => m.dotUveRoutes)
     },
     {
         canActivate: [editContentGuard],

core-web/apps/dotcms-ui/src/app/components.ts

@@ -1,4 +1,4 @@
-import { DotContentCompareComponent } from '@dotcms/portlets/dot-ema/ui';
+import { DotContentCompareComponent } from '@dotcms/portlets/dot-uve/ui';
 import { DotIconComponent } from '@dotcms/ui';
 
 import { AppComponent } from './app.component';

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.ts

@@ -49,7 +49,7 @@ import {
     PermissionsType,
     UserPermissions
 } from '@dotcms/dotcms-models';
-import { DotFavoritePageComponent } from '@dotcms/portlets/dot-ema/ui';
+import { DotFavoritePageComponent } from '@dotcms/portlets/dot-uve/ui';
 import { generateDotFavoritePageUrl } from '@dotcms/utils';
 
 import { DotCreatePageDialogComponent } from '../dot-create-page-dialog/dot-create-page-dialog.component';

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/services/dot-page-actions.service.ts

@@ -29,7 +29,7 @@ import {
     PermissionsType,
     UserPermissions
 } from '@dotcms/dotcms-models';
-import { DotFavoritePageComponent } from '@dotcms/portlets/dot-ema/ui';
+import { DotFavoritePageComponent } from '@dotcms/portlets/dot-uve/ui';
 import { GlobalStore } from '@dotcms/store';
 import { generateDotFavoritePageUrl } from '@dotcms/utils';
 

core-web/apps/dotcms-ui/src/app/view/components/main-legacy/main-legacy.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewEncapsulation, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
-import { DotContentCompareDialogComponent } from '@dotcms/portlets/dot-ema/ui';
+import { DotContentCompareDialogComponent } from '@dotcms/portlets/dot-uve/ui';
 
 import { DotCustomEventHandlerService } from '../../../api/services/dot-custom-event-handler/dot-custom-event-handler.service';
 import { DotAlertConfirmComponent } from '../_common/dot-alert-confirm/dot-alert-confirm';

core-web/libs/data-access/src/lib/dot-license/dot-license.service.ts

@@ -52,7 +52,7 @@ const enterprisePorlets: DotUnlicensedPortletData[] = [
     },
     {
         icon: 'list',
-        titleKey: 'com.dotcms.repackage.javax.app.title.edit-ema',
+        titleKey: 'com.dotcms.repackage.javax.app.title.dot-uve',
         url: '/forms'
     },
     {
@@ -67,8 +67,8 @@ const enterprisePorlets: DotUnlicensedPortletData[] = [
     },
     {
         icon: 'file-edit',
-        titleKey: 'com.dotcms.repackage.javax.portlet.title.edit-ema',
-        url: '/edit-ema'
+        titleKey: 'com.dotcms.repackage.javax.portlet.title.dot-uve',
+        url: '/dot-uve'
     },
     {
         icon: 'bolt',

core-web/libs/dot-rules/src/lib/services/api/rule/Rule.ts

@@ -621,7 +621,7 @@ export class RuleService {
             query = hash.substr(hash.indexOf('?') + 1);
 
             return ApiRoot.parseQueryParam(query, 'realmId');
-        } else if (hash.includes('edit-page') || hash.includes('edit-ema')) {
+        } else if (hash.includes('edit-page') || hash.includes('dot-uve')) {
             return hash.split('/').pop().split('?')[0];
         }
 

core-web/libs/dotcms-models/src/lib/dot-current-user.ts

@@ -28,6 +28,7 @@ export interface DotCurrentUser {
     roleId: string;
     surname: string;
     userId: string;
+    loginAs: boolean;
 }
 
 export interface DotPermissionsType {

core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tree.scss

@@ -14,19 +14,19 @@
     .p-tree-container {
         .p-treenode {
             padding: 0;
-            margin: 0;
+            margin: 2px 0;
             outline: 0;
 
             .p-treenode-content {
                 border-radius: common.$border-radius-xs;
                 transition: none;
-                padding: spacing.$spacing-0 spacing.$spacing-1;
+                padding: 0 $spacing-0;
 
                 .p-tree-toggler {
-                    margin-right: spacing.$spacing-1;
-                    width: spacing.$spacing-5;
-                    height: spacing.$spacing-5;
-                    color: colors.$black;
+                    margin-right: $spacing-0;
+                    width: $spacing-5;
+                    height: $spacing-5;
+                    color: $black;
                     border: 0 none;
                     background: transparent;
                     border-radius: 50%;

core-web/libs/dotcms-scss/shared/_spacing.scss

@@ -11,6 +11,3 @@ $spacing-8: 4rem; // 64px
 $spacing-9: 4.5rem; // 72px
 $spacing-10: 7rem; // 112px
 $spacing-11: 11rem; // 176px
-
-// New Spacing Variables
-$spacing-width-m: 0.875rem; // 14px

core-web/libs/edit-content/src/lib/components/dot-edit-content-compare/dot-edit-content-compare.component.ts

@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
 
-import { DotContentCompareComponent } from '@dotcms/portlets/dot-ema/ui';
+import { DotContentCompareComponent } from '@dotcms/portlets/dot-uve/ui';
 import { DotMessagePipe } from '@dotcms/ui';
 
 import { DotEditContentStore } from '../../store/edit-content.store';

core-web/libs/portlets/dot-uve/portlet/README.md

@@ -0,0 +1,252 @@
+# Edit EMA Portlet
+
+Universal Visual Editor (UVE) portlet for dotCMS - enables in-context editing of pages with drag-and-drop content management.
+
+## Architecture
+
+This portlet follows a **Container/Presentational Component Pattern** to maintain clear separation of concerns:
+
+- **Smart Containers**: Inject `UVEStore`, manage state, pass data down via `@Input`
+- **Presentational Components**: No store injection, receive all data via `@Input`, emit events via `@Output`
+
+### Component Tree
+
+```
+DotUveShellComponent (Smart Container) [UVEStore]
+├─ DotUveNavigationBarComponent (Smart Container) [UVEStore]
+│  └─ Receives navigation data via @Input + reads from UVEStore
+│
+├─ Route → DotUveEditorComponent (Smart Container) [UVEStore]
+   ├─ DotUveToolbarComponent (Smart Container) [UVEStore]
+   │  ├─ DotToggleLockButtonComponent (Presentational) [NO STORE]
+   │  │  └─ @Input: toggleLockOptions | @Output: toggleLockClick
+   │  ├─ DotUveInfoDisplayComponent (Presentational) [NO STORE]
+   │  │  └─ @Input: options | @Output: actionClicked
+   │  ├─ DotUveDeviceSelectorComponent (Presentational) [NO STORE]
+   │  │  └─ @Input: state, devices | @Output: stateChange
+   │  ├─ DotUveLanguageSelectorComponent (Presentational) [NO STORE]
+   │  │  └─ @Input: contentLanguageId, pageLanguageId | @Output: change
+   │  └─ ... (most toolbar children are presentational)
+   │
+   ├─ DotUvePaletteComponent (Smart Container) [UVEStore]
+   │  ├─ Uses local signalState for tab management (not global store)
+   │  └─ DotUvePaletteListComponent (Smart Container) [DotPaletteListStore + GlobalStore]
+   │     └─ @Input: listType, languageId, pagePath, variantId
+   │     └─ Uses feature store for palette-specific state management
+   │
+   ├─ DotUveContentletQuickEditComponent (Presentational) [NO STORE]
+   │  └─ @Input: data (ContentletEditData), loading | @Output: submit, cancel
+   │  └─ Dynamic form generation based on field types
+   │
+   ├─ DotUvePageDropzoneComponent (Presentational) [NO STORE]
+   │  └─ @Input: containers, dragItem, zoomLevel
+   │  └─ Pure canvas for drag-and-drop operations
+   │
+   └─ DotUveLockOverlayComponent (Smart Container) [UVEStore]
+      └─ Reads toggle lock state directly from UVEStore
+```
+
+## Key Patterns
+
+### Local vs Global State
+
+**Local Component State** (use `signalState()`):
+- UI-specific state (tab selection, form validation, etc.)
+- State that doesn't need cross-component coordination
+- Example: `DotUvePaletteComponent` tab management
+
+**Global Store State** (use `UVEStore`):
+- Shared feature state (page data, contentlet selection, etc.)
+- Cross-component coordination required
+- Example: `activeContentlet`, `pageAPIResponse`
+
+**Feature Store State** (use component-specific store):
+- Domain-specific state for a feature (palette list data, search params, pagination)
+- Encapsulated within a feature boundary
+- Example: `DotPaletteListStore` for palette list management
+
+### Container Component Pattern (with UVEStore)
+
+```typescript
+// Smart Container (reads from global store, manages state)
+@Component({ selector: 'dot-uve-palette' })
+export class DotUvePaletteComponent {
+    protected readonly uveStore = inject(UVEStore);
+
+    // Read from global store
+    readonly $languageId = computed(() => this.uveStore.$languageId());
+    readonly $pagePath = computed(() => this.uveStore.$pageURI());
+
+    // Local UI state
+    readonly #localState = signalState({ currentTab: 0 });
+}
+```
+
+### Container Component Pattern (with Feature Store)
+
+```typescript
+// Smart Container with feature store
+@Component({ selector: 'dot-uve-palette-list' })
+export class DotUvePaletteListComponent {
+    readonly #paletteListStore = inject(DotPaletteListStore);
+    readonly #globalStore = inject(GlobalStore);
+
+    // Inputs from parent (for initialization)
+    $type = input.required<DotUVEPaletteListTypes>({ alias: 'listType' });
+    $languageId = input.required<number>({ alias: 'languageId' });
+
+    // Read from feature store
+    protected readonly $contenttypes = this.#paletteListStore.contenttypes;
+    protected readonly $pagination = this.#paletteListStore.pagination;
+}
+```
+
+### Presentational Component Pattern
+
+```typescript
+// Presentational (receives props, emits events, NO store injection)
+@Component({ selector: 'dot-uve-contentlet-quick-edit' })
+export class DotUveContentletQuickEditComponent {
+    // NO store injection!
+
+    // Inputs (data down from parent container)
+    data = input.required<ContentletEditData>({ alias: 'data' });
+    loading = input<boolean>(false, { alias: 'loading' });
+
+    // Outputs (events up to parent container)
+    submit = output<Record<string, unknown>>();
+    cancel = output<void>();
+}
+```
+
+## Benefits
+
+### Testability
+- **Presentational components**: Easier to test (no mock store needed, pure input/output testing)
+- **Container components**: Clear boundaries (test store interactions separately)
+- **Feature stores**: Isolated testing of domain logic separate from UI
+
+### Reusability
+- **Presentational components**: Can be reused in different contexts without store coupling
+- **Feature stores**: Domain logic can be shared across multiple components
+- **Clear interfaces**: Well-defined @Input/@Output contracts
+
+### Maintainability
+- **Clear separation of concerns**: Smart containers vs presentational components vs feature stores
+- **Localized changes**:
+  - Global store changes affect only global state consumers
+  - Feature store changes affect only feature-specific components
+  - Presentational component changes are isolated
+- **Easier refactoring**: Components can be converted between patterns as needs evolve
+
+## State Management Architecture
+
+### UVEStore State Structure
+
+The UVEStore uses a **nested state structure** to clearly separate concerns:
+
+```typescript
+interface UVEState {
+    // ============ DOMAIN STATE (Source of Truth) ============
+    languages: DotLanguage[];
+    isEnterprise: boolean;
+    currentUser?: CurrentUser;
+    experiment?: DotExperiment;
+    pageAPIResponse?: DotCMSPageAsset;
+
+    // ============ UI STATE (Transient) ============
+    // Nested editor state
+    editor: {
+        // Functional editor state
+        dragItem: EmaDragItem | null;
+        bounds: Container[];
+        state: EDITOR_STATE;
+        activeContentlet: ContentletPayload | null;
+        contentArea: ContentletArea | null;
+
+        // UI panel preferences (user-configurable)
+        panels: {
+            palette: { open: boolean };
+            rightSidebar: { open: boolean };
+        };
+
+        // Editor-specific data
+        ogTags: any | null;
+        styleSchemas: StyleEditorFormSchema[];
+    };
+
+    // Nested toolbar state
+    toolbar: {
+        device: DotDeviceListItem | null;
+        orientation: Orientation | null;
+        socialMedia: string | null;
+        isEditState: boolean;
+        isPreviewModeActive: boolean;
+        ogTagsResults: SeoMetaTagsResult[] | null;
+    };
+}
+```
+
+### Accessing Nested State in Components
+
+**Container components** access nested state directly:
+
+```typescript
+// Access editor functional state
+const dragItem = this.uveStore.editor().dragItem;
+const editorState = this.uveStore.editor().state;
+
+// Access panel preferences
+const isPaletteOpen = this.uveStore.editor().panels.palette.open;
+const isSidebarOpen = this.uveStore.editor().panels.rightSidebar.open;
+
+// Access toolbar state
+const device = this.uveStore.toolbar().device;
+const socialMedia = this.uveStore.toolbar().socialMedia;
+```
+
+**Updating nested state** requires spreading the parent object:
+
+```typescript
+// Update panel state
+setPaletteOpen(open: boolean) {
+    const editor = store.editor();
+    patchState(store, {
+        editor: {
+            ...editor,
+            panels: {
+                ...editor.panels,
+                palette: { open }
+            }
+        }
+    });
+}
+```
+
+### Benefits of Nested State
+
+- **Clear Grouping**: Related state is grouped together (editor.panels groups all panel preferences)
+- **Easier to Reason About**: The structure mirrors the UI hierarchy
+- **Better Type Safety**: TypeScript can catch errors at deeper levels
+- **Reduced Prop Drilling**: Components get logical state chunks instead of individual properties
+
+## Running Tests
+
+Run unit tests for this portlet:
+```bash
+nx test portlets-dot-uve-portlet
+```
+
+Run specific test file:
+```bash
+nx test portlets-dot-uve-portlet --testFile=path/to/test.spec.ts
+```
+
+## Development
+
+This library uses:
+- **Angular 19+** with standalone components
+- **NgRx Signals** for state management
+- **Modern Angular syntax**: `@if`, `@for`, `input()`, `output()`
+- **PrimeNG** for UI components
+- **Jest + Spectator** for testing