UVE experiment

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

@@ -129,3 +129,4 @@ export class DotUsageService {
         return 'usage.dashboard.error.generic';
     }
 }
+

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

@@ -10,16 +10,16 @@
     .p-tree-container {
         .p-treenode {
             padding: 0;
-            margin: 0;
+            margin: 2px 0;
             outline: 0;
 
             .p-treenode-content {
                 border-radius: $border-radius-xs;
                 transition: none;
-                padding: $spacing-0 $spacing-1;
+                padding: 0 $spacing-0;
 
                 .p-tree-toggler {
-                    margin-right: $spacing-1;
+                    margin-right: $spacing-0;
                     width: $spacing-5;
                     height: $spacing-5;
                     color: $black;

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/portlets/edit-ema/portlet/README.md

@@ -1,7 +1,252 @@
-# portlets-edit-ema-portlet
+# Edit EMA Portlet
 
-This library was generated with [Nx](https://nx.dev).
+Universal Visual Editor (UVE) portlet for dotCMS - enables in-context editing of pages with drag-and-drop content management.
 
-## Running unit tests
+## Architecture
 
-Run `nx test portlets-edit-ema-portlet` to execute the unit tests.
+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
+
+```
+DotEmaShellComponent (Smart Container) [UVEStore]
+├─ EditEmaNavigationBarComponent (Smart Container) [UVEStore]
+│  └─ Receives navigation data via @Input + reads from UVEStore
+│
+├─ Route → EditEmaEditorComponent (Smart Container) [UVEStore]
+   ├─ DotUveToolbarComponent (Smart Container) [UVEStore]
+   │  ├─ DotToggleLockButtonComponent (Presentational) [NO STORE]
+   │  │  └─ @Input: toggleLockOptions | @Output: toggleLockClick
+   │  ├─ DotEmaInfoDisplayComponent (Presentational) [NO STORE]
+   │  │  └─ @Input: options | @Output: actionClicked
+   │  ├─ DotUveDeviceSelectorComponent (Presentational) [NO STORE]
+   │  │  └─ @Input: state, devices | @Output: stateChange
+   │  ├─ EditEmaLanguageSelectorComponent (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
+   │
+   ├─ EmaPageDropzoneComponent (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-edit-ema-portlet
+```
+
+Run specific test file:
+```bash
+nx test portlets-edit-ema-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

core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.spec.ts

@@ -22,11 +22,6 @@ const messages = {
 const store = {
     paletteOpen: () => false,
     setPaletteOpen: jest.fn(),
-    $editorProps: () => ({
-        palette: {
-            paletteClass: 'palette-class'
-        }
-    }),
     pageParams: () => ({
         language_id: '3',
         personaId: '123'

core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.ts

@@ -42,8 +42,6 @@ export class EditEmaNavigationBarComponent {
 
     uveStore = inject(UVEStore);
 
-    $editorProps = this.uveStore.$editorProps;
-
     $params = this.uveStore.pageParams;
 
     /**

core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.html

@@ -1,4 +1,4 @@
-@if ($shellProps()?.canRead) {
+@if ($canRead()) {
     @if ($toggleLockOptions()?.showBanner && $showBanner()) {
         <p-messages severity="warning" data-testid="message">
             <ng-template pTemplate="content">
@@ -38,16 +38,18 @@
 
     <router-outlet />
     <dot-edit-ema-navigation-bar
-        [items]="$shellProps().items"
+        [items]="$menuItems()"
         (action)="handleItemAction($event)"
-        data-testId="ema-nav-bar" />
-    <p-toast position="top-center" data-testId="ema-toast" />
-    <dot-page-tools-seo [currentPageUrlParams]="$shellProps().seoParams" #pageTools />
+        data-testId="ema-nav-bar"></dot-edit-ema-navigation-bar>
+    <p-toast position="top-center" data-testId="ema-toast"></p-toast>
+    <dot-page-tools-seo
+        [currentPageUrlParams]="$seoParams()"
+        #pageTools></dot-page-tools-seo>
 } @else {
-    @if ($shellProps().error?.code === 401) {
+    @if ($errorDisplay()?.code === 401) {
         <dot-not-license />
-    } @else if ($shellProps()?.error?.pageInfo) {
-        <dot-info-page [info]="$shellProps().error.pageInfo" />
+    } @else if ($errorDisplay()?.pageInfo) {
+        <dot-info-page [info]="$errorDisplay().pageInfo" />
     }
 }