@nuraly/runtime 0.1.7 → 0.1.8

package/components/ui/components/base/BaseElement.ts

@@ -1,711 +1,330 @@
 /**
- * @file BaseElementBlock.ts
- * @description Base component class that handles component rendering, events, and styles in the editor
- * @module components/base
+ * @file BaseElement.ts
+ * @description Refactored base component class using controllers and mixins
+ * Clean separation of concerns with improved maintainability
  */
 
-import { html, LitElement, nothing, type PropertyValueMap, type PropertyValues } from "lit";
+import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { property, state } from "lit/decorators.js";
-import { eventDispatcher } from '../../../../utils/change-detection.ts';
-import { executeHandler } from '../../../../handlers/handler-executor';
-import { ExecuteInstance } from '../../../../state/runtime-context';
-import { getNestedAttribute, hasOnlyEmptyObjects } from '../../../../utils/object.utils.ts';
-import Editor from '../../../../state/editor.ts';
-import EditorInstance, { getInitPlatform } from '../../../../state/editor.ts';
 import { createRef, type Ref } from "lit/directives/ref.js";
-import { $hoveredComponent, $runtimeStylescomponentStyleByID } from '../../../../redux/store/component/store.ts';
-import "../wrappers/GenerikWrapper/DragWrapper/DragWrapper.ts";
-import { RuntimeHelpers } from '../../../../utils/runtime-helpers.ts';
-import { setContextMenuEvent } from '../../../../redux/actions/page/setContextMenuEvent.ts';
-import { addlogDebug } from '../../../../redux/actions/debug/store.ts';
-import { $debug } from '../../../../redux/store/debug.ts';
-import { Subscription } from "rxjs";
-import "./BaseElement/handler-component-error.ts";
-import { scrollToTarget, setupHashScroll, traitInputHandler, traitStyleHandler } from "./BaseElement/input-handler.helpers.ts";
-import { calculateStyles } from "./BaseElement/calculateStyles.ts";
-import { handleMouseEnter, handleMouseLeave } from "./BaseElement/interactions.helpers.ts";
-import { handleComponentEvent } from "./BaseElement/execute-event.helpers.ts";
-import type { ComponentElement } from '../../../../redux/store/component/component.interface.ts';
 import { v4 as uuidv4 } from "uuid";
 
+// Controllers
+import { InputHandlerController } from "./controllers/InputHandlerController";
+import { StyleHandlerController } from "./controllers/StyleHandlerController";
+import { EventController } from "./controllers/EventController";
+
+// Mixins
+import { EditorModeMixin } from "./mixins/EditorModeMixin";
+
+// Types and utilities
+import type { ComponentElement } from "../../../../redux/store/component/component.interface";
+import { ExecuteInstance } from "../../../../state/runtime-context";
+import { getInitPlatform } from "../../../../state/editor";
+import { setupHashScroll, scrollToTarget } from "./BaseElement/input-handler.helpers";
 
 /**
- * Base component class that serves as the foundation for all renderable components
- * in the editor. Handles component styling, events, interactions, and rendering.
- * 
- * @extends {LitElement}
+ * Core BaseElement without editor-specific functionality
+ * This class contains only essential rendering and data processing logic
  */
-export class BaseElementBlock extends LitElement {
-  /** @property {ComponentElement} The component data */
-  @property({ type: Object }) component;
-  
-  /** @property {any} Data item being rendered (for lists/loops) */
-  @property({ type: Object, reflect: true }) item;
-  
-  /** @property {boolean} Whether component is in view-only mode */
+export class BaseElementCore extends LitElement {
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CORE PROPERTIES
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** Component definition from the editor */
+  @property({ type: Object }) component!: ComponentElement;
+
+  /** Data item for list/loop rendering */
+  @property({ type: Object, reflect: true }) item: any;
+
+  /** Parent component reference */
+  @property({ type: Object }) parentcomponent!: ComponentElement;
+
+  /** View mode flag - disables editor features when true */
   @property({ type: Boolean }) isViewMode = false;
-  
-  /** @state {Object} Values from input handlers */
-  @state() inputHandlersValue: any = {};
-  
-  /** @state {Object} Values from style handlers */
-  @state() stylesHandlersValue = {};
-
-  @property({ type: Object }) parentcomponent: ComponentElement;
-  
-  /** @state {Object} Registered callbacks for input handlers */
-  @state() callbacks = {};
-  
-  /** @state {boolean} Whether component is in editable state */
-  @state() isEditable = false;
-  
-  /** @state {ComponentElement} Currently hovered component */
-  @state() hoveredComponent;
-  
-  /** @state {boolean} Whether this component initiated drag */
-  @state() isDragInitiator = false;
-  
-  /** @state {HTMLElement} Reference to closest wrapper element */
-  @state() closestGenericComponentWrapper;
-  
-  /** @state {ComponentElement} Currently selected component */
-  @state() selectedComponent;
-  
-  /** @state {DraggingComponentInfo} Information about dragging state */
-  @state() draggingComponentInfo;
-  
-  /** @state {Array} Currently selected components */
-  @state() currentSelection = [];
-  
-  /** @state {Object} Calculated component styles */
-  @state() calculatedStyles = {};
-  
-  /** @state {boolean} Whether component is connected to DOM */
-  @state() isConnected2 = false;
-  
-  /** @state {boolean} Whether to display error panel */
-  @state() displayErrorPanel;
-  
-  /** @state {Object} Component errors */
-  @state() errors = {};
-  
-  /** @state {Object} Runtime styles */
-  @state() runtimeStyles = {};
-  
-  /** @state {Ref<Element>} Reference to main input element */
-  @state() inputRef = createRef();
-  
-  /** @type {any} Instance of execution environment */
-  ExecuteInstance;
-  
-  /** @type {any} Current platform information */
-  currentPlatform;
-  
-  /** @type {Object} Component style definitions */
-  componentStyles = {};
-  
-  /** @type {Subscription} RxJS subscription for cleanup */
-  private subscription = new Subscription();
-  
-  /** @type {Array} List of event handlers */
-  eventsManager = [];
-
-  uniqueUUID = uuidv4();
-
-  // Bound event handlers
-  /**
-   * @type {Function} Bound mouse enter event handler
-   * @private
-   */
-  private mouseEnterHandlerBound = this.mouseEnterHandler.bind(this);
-  
-  /**
-   * @type {Function} Bound mouse leave event handler
-   * @private
-   */
-  private mouseLeaveHandlerBound = this.mouseLeaveHandler.bind(this);
-  
-  /**
-   * @type {Function} Bound drag enter event handler
-   * @private
-   */
-  private dragEnterHandlerBound = this.dragEnterHandler.bind(this);
-  
-  /**
-   * @type {Function} Bound drop event handler
-   * @private
-   */
-  private dropHandlerBound = this.dropHandler.bind(this);
-  
-  /**
-   * @type {Function} Bound drag leave event handler
-   * @private
-   */
-  private dragLeaveHandlerBound = this.dragLeaveHandler.bind(this);
-  
-  /**
-   * @type {Function} Bound context menu event handler
-   * @private
-   */
-  private onContextMenuBound = this.onContextMenu.bind(this);
-  
-  /**
-   * @type {Function} Bound component selection handler
-   * @private
-   */
-  private selectComponentActionClickBound = (e) => {
-    if (!this.isViewMode) {
-      this.selectComponentAction(e);
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-  
-  /**
-   * @type {Function} Hash change handler for scrolling
-   */
-  handleHash;
 
-  /**
-   * Constructor for BaseElementBlock
-   */
+  // ═══════════════════════════════════════════════════════════════════════════
+  // STATE
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** Computed values from input handlers */
+  @state() inputHandlersValue: Record<string, any> = {};
+
+  /** Computed values from style handlers */
+  @state() stylesHandlersValue: Record<string, any> = {};
+
+  /** Calculated component styles */
+  @state() calculatedStyles: Record<string, any> = {};
+
+  /** Component errors by input name */
+  @state() errors: Record<string, any> = {};
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // REFS & IDENTIFIERS
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** Reference to the main rendered element */
+  inputRef: Ref<HTMLElement> = createRef();
+
+  /** Unique instance ID for this component instance */
+  readonly uniqueUUID = uuidv4();
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CONTROLLERS
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** Controller for processing input handlers */
+  protected inputController: InputHandlerController;
+
+  /** Controller for processing style handlers */
+  protected styleController: StyleHandlerController;
+
+  /** Controller for executing events */
+  protected eventController: EventController;
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CALLBACKS & EXTERNAL INTEGRATION
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  /** Registry for input value callbacks */
+  callbacks: Record<string, (val: any) => void> = {};
+
+  /** Execution instance for runtime context */
+  ExecuteInstance = ExecuteInstance;
+
+  /** Current platform (desktop/tablet/mobile) */
+  currentPlatform: string;
+
+  /** Component style definitions */
+  componentStyles: Record<string, any> = {};
+
+  /** Hash change handler reference */
+  private handleHash: () => void;
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CONSTRUCTOR
+  // ═══════════════════════════════════════════════════════════════════════════
+
   constructor() {
     super();
-    this.ExecuteInstance = ExecuteInstance;
+
+    // Initialize platform
     this.currentPlatform = ExecuteInstance.Vars.currentPlatform ?? getInitPlatform();
-    this.handleHash = () => setupHashScroll(this.inputRef as Ref<HTMLInputElement>, this.id, () => scrollToTarget(this.inputRef as Ref<HTMLInputElement>));
-    this.uniqueUUID = uuidv4();
+
+    // Initialize controllers
+    this.inputController = new InputHandlerController(this as any);
+    this.styleController = new StyleHandlerController(this as any);
+    this.eventController = new EventController(this as any);
+
+    // Setup hash scroll handler
+    this.handleHash = () =>
+      setupHashScroll(
+        this.inputRef as Ref<HTMLInputElement>,
+        this.id,
+        () => scrollToTarget(this.inputRef as Ref<HTMLInputElement>)
+      );
   }
 
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CALLBACK REGISTRATION (for child components to react to input changes)
+  // ═══════════════════════════════════════════════════════════════════════════
+
   /**
-   * Registers a callback function for a specific input
-   * 
-   * @param {string} inputName - Name of the input to register callback for
-   * @param {Function} callback - Callback function to register
+   * Register a callback to be invoked when an input value changes
+   * @param inputName - Name of the input to watch
+   * @param callback - Function to call with new value
    */
-  registerCallback(inputName, callback) {
+  registerCallback(inputName: string, callback: (val: any) => void): void {
     this.callbacks[inputName] = callback;
   }
 
   /**
-   * Unregisters a callback function for a specific input
-   * 
-   * @param {string} inputName - Name of the input to unregister callback for
+   * Unregister a previously registered callback
+   * @param inputName - Name of the input callback to remove
    */
-  unregisterCallback(inputName) {
+  unregisterCallback(inputName: string): void {
     delete this.callbacks[inputName];
   }
 
-  /**
-   * Handles first component update after initialization
-   * 
-   * @param {PropertyValues} _ - Changed properties
-   * @protected
-   * @override
-   */
-  protected firstUpdated(_) {
-    super.firstUpdated(_);
-    this.isConnected2 = true;
-    this.traitInputsHandlers();
-    this.traitStylesHandlers();
-  
-    this.handleHash();
-    window.addEventListener("hashchange", this.handleHash);
-  this.subscription.add(
-    eventDispatcher.on("Vars:currentPlatform", () => {
-      this.traitInputsHandlers();
-      this.traitStylesHandlers();
-    })
-  )
-
-  this.subscription.add(
-    eventDispatcher.on(`component-input-refresh-request:${this.component.uuid}`, () => {
-      this.traitInputsHandlers();
-      this.traitStylesHandlers();
-    })
-  )
-  this.subscription.add(
-
-    eventDispatcher.on("Vars:currentEditingMode", () => {
-      const code = getNestedAttribute(this.component, `event.onInit`);
-      if (code) executeHandler(this.component, code, {}, { ...this.item });
-    }))
+  // ═══════════════════════════════════════════════════════════════════════════
+  // LIFECYCLE METHODS
+  // ═══════════════════════════════════════════════════════════════════════════
 
-  }
+  override connectedCallback(): void {
+    super.connectedCallback();
 
-  /**
-   * Processes component input handlers
-   * 
-   * @returns {Promise<void>}
-   */
-  async traitInputsHandlers() {
-    this.errors = {};
-    const inputs = Editor.getComponentBreakpointInputs(this.component);
+    // Add component class for styling
+    if (this.component?.uuid) {
+      this.classList.add(`component-${this.component.uuid}`);
+      // Add data attribute for iframe preview selection
+      this.dataset.componentUuid = this.component.uuid;
+    }
 
+    // Set component metadata
+    if (this.component) {
+      this.component.uniqueUUID = this.uniqueUUID;
+      this.component.parent = this.parentcomponent;
+    }
+  }
 
-    await Promise.all(Object.keys(inputs).map(name =>
-      traitInputHandler(this, inputs[name], name)
-    ));
+  protected override firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
 
+    // Initial processing
+    this.inputController.processInputs();
+    this.styleController.processStyles();
 
-    addlogDebug({
-      errors: { component: { ...this.component, errors: { ...this.errors } } },
-    });
+    // Setup hash-based scrolling
+    this.handleHash();
+    window.addEventListener("hashchange", this.handleHash);
   }
 
-  /**
-   * Processes component style handlers
-   * 
-   * @returns {Promise<void>}
-   */
-  async traitStylesHandlers() {
-    if (this.component?.styleHandlers) {
-      this.stylesHandlersValue = {};
-      await Promise.all(
-        Object.entries(this.component.styleHandlers).map(
-          ([name, style]) => traitStyleHandler(this, style, name)
-        )
-      );
-    }
-    this.calculateStyles();
-  }
+  override disconnectedCallback(): void {
+    // Remove hash change listener (fix memory leak from original)
+    window.removeEventListener("hashchange", this.handleHash);
 
-  /**
-   * Calculates and updates component styles
-   * 
-   * @private
-   */
-  private calculateStyles() {
-    calculateStyles(this);
+    super.disconnectedCallback();
   }
 
-  /**
-   * Handles component updates
-   * 
-   * @param {PropertyValueMap<any>} changedProperties - Map of changed properties
-   * @override
-   */
-  override update(changedProperties) {
+  protected override update(changedProperties: PropertyValues): void {
     super.update(changedProperties);
 
     if (changedProperties.has("component")) {
-      const prev = changedProperties.get("component");
+      const prev = changedProperties.get("component") as ComponentElement | undefined;
       const curr = this.component;
 
+      // Re-run onInit if it changed
       if (prev?.event?.onInit !== curr?.event?.onInit) {
-        executeHandler(curr, getNestedAttribute(curr, "event.onInit"), {}, this.item);
+        this.eventController.executeOnInit();
       }
-      this.component.uniqueUUID = this.uniqueUUID;
-      this.component.parent = this.parentcomponent;
 
-      if (prev?.uuid !== curr?.uuid) {
-        this.traitInputsHandlers();
-        this.traitStylesHandlers();
-      } else {
-        // component does not change but properties inside may have changed
-        // when psedo states styles are used for example
-        this.traitInputsHandlers();
-        this.traitStylesHandlers();
-        // Re-process handlers even if UUID hasn't changed
-        // This ensures property updates in the studio are reflected
+      // Update component metadata
+      if (curr) {
+        curr.uniqueUUID = this.uniqueUUID;
+        curr.parent = this.parentcomponent;
+        // Update data attribute for iframe preview selection
+        if (curr.uuid) {
+          this.dataset.componentUuid = curr.uuid;
+        }
       }
-    }
-  }
 
-  /**
-   * Handles context menu events
-   * 
-   * @param {MouseEvent} e - Context menu event
-   */
-  onContextMenu(e) {
-    if (this.isViewMode) return;
-    this.selectComponentAction(e);
-    e.preventDefault();
-    e.stopPropagation();
-    
-    const rect = this.inputRef.value?.getBoundingClientRect();
-    if (rect) {
-      Object.assign(e, {
-        ComponentTop: rect.top,
-        ComponentLeft: rect.left,
-        ComponentBottom: rect.bottom,
-        ComponentHeight: rect.height,
-      });
-      setContextMenuEvent(e);
+      // Re-process handlers
+      this.inputController.processInputsDebounced();
+      this.styleController.processStyles();
     }
   }
 
-  /**
-   * Lifecycle method when component is connected to DOM
-   * 
-   * @override
-   */
-  override async connectedCallback() {
-    super.connectedCallback();
-    
-    // Add component-specific class for pseudo-state styling
-    if (this.component?.uuid) {
-      this.classList.add(`component-${this.component.uuid}`);
-    }
-    
-    if(!this.isViewMode) {
-      this.subscription.add(
-        RuntimeHelpers.createStoreObservable($hoveredComponent).subscribe((hoveredComponent) => {
-          this.hoveredComponent = hoveredComponent;
-        })
-      );
-
-      this.subscription.add(
-        eventDispatcher.on('Vars:selectedComponents', () => {
-          this.currentSelection = Array.from(ExecuteInstance.Vars.selectedComponents).map((comppnent :ComponentElement) => comppnent.uuid);
-          EditorInstance.currentSelection = this.currentSelection;
-        })
-      );
-    }
-    
-    // Subscribe to runtime styles
-    this.subscription.add(
-      $runtimeStylescomponentStyleByID(this.uniqueUUID).subscribe((styles) => {
-        this.runtimeStyles = styles;
-      })
-    );
-    this.subscription.add(
-    eventDispatcher.on(`component:value:set:${this.uniqueUUID}`, () => {
-      this.traitInputsHandlers();
-      // @todo: activate this when trigger chidlren rending 
-      this.component.childrenIds?.forEach((childId) => {
-        eventDispatcher.emit(`component:request:refresh:${childId}`)
-      })
-
-   })   )
-   this.subscription.add(
-   eventDispatcher.on(`component:request:refresh:${this.component.uuid}`, () => {
-    this.traitInputsHandlers();
-    this.component.childrenIds?.forEach((childId) => {
-      eventDispatcher.emit(`component:request:refresh:${childId}`)
-    })
-   })
-  )
-    // Subscribe to property changes and updates
-    this.subscription.add(
-      eventDispatcher.on(`component-property-changed:${String(this.component.name)}`, async() => {
-        this.traitInputsHandlers();
-        this.traitStylesHandlers();
-         /** @todo:  check for event leak */
-        this.component.childrenIds?.forEach((childId) => {
-          eventDispatcher.emit(`component:request:refresh:${childId}`)
-        })
-      })
-    );
-    
-    this.subscription.add(
-      eventDispatcher.on(`component-updated:${String(this.component.uuid)}`, async () => {
-        setTimeout(() => {
-          this.traitInputsHandlers();
-          this.traitStylesHandlers();
-        }, 0);
-      })
-    );
-
-    // Set up event listeners
-    this.closestGenericComponentWrapper = this.closest('generik-component-wrapper');
-    this.eventsManager = [
-      ["contextmenu", this.onContextMenuBound],
-      ["mouseenter", this.mouseEnterHandlerBound],
-      ["mouseleave", this.mouseLeaveHandlerBound],
-      ["click", this.selectComponentActionClickBound],
-      ["dragenter", this.dragEnterHandlerBound],
-      ["drop", this.dropHandlerBound],
-      ["dragleave", this.dragLeaveHandlerBound],
-    ];
-
-    this.eventsManager.forEach(([event, handler]) => this.addEventListener(event, handler));
-
-    // Subscribe to keydown events
-    this.subscription.add(
-      eventDispatcher.on("keydown", ({ key, selectedComponents }) => {
-        if (key === "Enter" && selectedComponents.length === 1 && 
-            this.component.uuid === selectedComponents[0]) {
-          this.isEditable = true;
-        }
-      })
-    );
-  }
+  // ═══════════════════════════════════════════════════════════════════════════
+  // PUBLIC API
+  // ═══════════════════════════════════════════════════════════════════════════
 
   /**
-   * Lifecycle method when component is disconnected from DOM
-   * 
-   * @override
+   * Execute a component event handler
+   * @param eventName - Name of the event (onClick, onChange, etc.)
+   * @param event - Optional DOM event that triggered this
+   * @param data - Additional data to pass to the handler
    */
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this.subscription.unsubscribe();
-    this.isConnected2 = false;
-    this.eventsManager.forEach(([event, handler]) => this.removeEventListener(event, handler));
+  executeEvent(eventName: string, event?: Event, data: Record<string, any> = {}): void {
+    this.eventController.execute(eventName, event, data);
   }
 
   /**
-   * Handles mouse enter events
-   * 
-   * @private
+   * Get computed styles for the component
+   * Merges editor styles, handler values, and runtime styles
    */
-  private mouseEnterHandler() {
-    handleMouseEnter(this.isViewMode, this.component);
-  }
-  
-  /**
-   * Handles mouse leave events
-   * 
-   * @private
-   */
-  private mouseLeaveHandler() {
-    handleMouseLeave(this.isViewMode);
+  getStyles(): Record<string, any> {
+    return this.styleController.getComputedStyles();
   }
 
   /**
-   * Handles drag events by dispatching to child wrappers
-   * 
-   * @param {string} eventType - Type of drag event
-   * @private
+   * Force reprocessing of input handlers
    */
-  private handleDragEvent(eventType) {
-    this.shadowRoot?.querySelectorAll('drag-wrapper')?.forEach(wrapper =>
-      wrapper.dispatchEvent(new CustomEvent(eventType, { bubbles: true, composed: true }))
-    );
+  refreshInputs(): void {
+    this.inputController.processInputs();
   }
 
   /**
-   * Handles drag enter events
-   * 
-   * @private
+   * Force reprocessing of style handlers
    */
-  private dragEnterHandler() {
-    this.handleDragEvent("drag-over-component");
+  refreshStyles(): void {
+    this.styleController.processStyles();
   }
 
-  /**
-   * Handles drop events
-   * 
-   * @private
-   */
-  private dropHandler() {
-    this.handleDragEvent("drag-leave-component");
-  }
+  // ═══════════════════════════════════════════════════════════════════════════
+  // RENDERING
+  // ═══════════════════════════════════════════════════════════════════════════
 
   /**
-   * Handles drag leave events
-   * 
-   * @private
+   * Whether component should be displayed based on display input
    */
-  private dragLeaveHandler() {
-    this.handleDragEvent("drag-leave-component");
+  protected get shouldDisplay(): boolean {
+    return this.inputHandlersValue?.display !== false;
   }
 
   /**
-   * Determines if component should be displayed
-   * 
-   * @returns {boolean} Whether component should be displayed
-   * @protected
+   * Render the component content - to be implemented by child classes
    */
-  protected get shouldDisplay() {
-    return (this.inputHandlersValue?.display === undefined || this.inputHandlersValue?.display);
+  renderComponent(): unknown {
+    return nothing;
   }
 
   /**
-   * Renders the component content
-   * To be implemented by child classes
-   * 
-   * @returns {unknown}
+   * Render pseudo-state styles (hover, focus, active, disabled)
    */
-  renderComponent() {
-    // Implementation in child classes
-  }
-
-  /**
-   * Generates CSS for pseudo-state styles (e.g., :hover, :focus, :active)
-   * 
-   * @returns {string} CSS string with pseudo-selectors
-   */
-  generatePseudoStateStyles() {
-    const componentStyles = Editor.getComponentStyles(this.component);
-    const pseudoStates = [':hover', ':focus', ':active', ':disabled'];
-    let cssString = '';
-
-    // Generate base class with regular styles (non-pseudo-state)
-    const regularStyles = Object.keys(componentStyles)
-      .filter(key => !pseudoStates.includes(key))
-      .reduce((obj, key) => {
-        obj[key] = componentStyles[key];
-        return obj;
-      }, {});
-
-    const baseStyleRules = Object.entries(regularStyles)
-      .map(([property, value]) => `  ${property}: ${value};`)
-      .join('\n');
-
-    if (baseStyleRules) {
-      cssString += `.drop-${this.component.uuid} {\n${baseStyleRules}\n}\n`;
-    }
-
-    // Generate pseudo-state classes
-    pseudoStates.forEach(pseudoState => {
-      if (componentStyles[pseudoState] && typeof componentStyles[pseudoState] === 'object') {
-        const pseudoStyles = componentStyles[pseudoState];
-        const styleRules = Object.entries(pseudoStyles)
-          .map(([property, value]) => `  ${property}: ${value};`)
-          .join('\n');
-        
-        if (styleRules) {
-          cssString += `.drop-${this.component.uuid}${pseudoState} {\n${styleRules}\n}\n`;
-        }
-      }
-    });
-
-    return cssString;
-  }
-
-  /**
-   * Renders dynamic pseudo-state styles
-   * 
-   * @returns {unknown} Style tag with pseudo-selector CSS
-   */
-  renderPseudoStateStyles() {
-    const cssString = this.generatePseudoStateStyles();
-    
+  protected renderPseudoStateStyles() {
+    const cssString = this.styleController.generatePseudoStateCSS();
     if (!cssString) return nothing;
-    
     return html`<style>${cssString}</style>`;
   }
 
-  /**
-   * Gets computed component styles
-   * 
-   * @returns {Object} Component styles
-   */
-  getStyles() {
-    const width = Editor.getComponentStyle(this.component, "width");
-    const allStyles = Editor.getComponentStyles(this.component);
-    
-    // Filter out pseudo-state styles (they're handled via CSS classes)
-    const pseudoStates = [':hover', ':focus', ':active', ':disabled'];
-    const regularStyles = Object.keys(allStyles)
-      .filter(key => !pseudoStates.includes(key))
-      .reduce((obj, key) => {
-        obj[key] = allStyles[key];
-        return obj;
-      }, {});
-    
-    return {
-      ...regularStyles,
-      ...this.stylesHandlersValue,
-      width: width === "auto" ? "auto" : 
-             RuntimeHelpers.extractUnit(width) === "%" ? "100%" : width ?? "auto",
-      ...this.runtimeStyles,
-    };
-  }
-
-  /**
-   * Executes a component event
-   * 
-   * @param {string} eventName - Name of event to execute
-   * @param {Event} [event] - DOM event that triggered this
-   * @param {any} [data] - Additional data for event
-   */
-  executeEvent(eventName, event, data= {}) {
-    // if(event?.unique !== this.uniqueUUID && eventName == "onMouseEnter") {
-    //   return false;
-    // }
-    handleComponentEvent({
-      isViewMode: this.isViewMode,
-      component:{ ...this.component, uniqueUUID : this.uniqueUUID},
-      item: this.item,
-      eventName,
-      event,
-      data,
-      onSelect: this.selectComponentAction.bind(this),
-    });
-  }
+  protected override render() {
+    if (!this.shouldDisplay) return nothing;
 
-  /**
-   * Selects this component in the editor
-   * 
-   * @param {Event} _e - Event that triggered selection
-   */
-  selectComponentAction(_e) {
-    this.currentSelection = Array.from([this.component.uuid]);
-    EditorInstance.currentSelection = Array.from([this.component.uuid]);
-    ExecuteInstance.VarsProxy.selectedComponents = Array.from([this.component]);
-  }
+    // Update component styles
+    this.componentStyles = this.calculatedStyles || {};
+    const labelStyleHandlers = this.component?.styleHandlers
+      ? Object.fromEntries(
+          Object.entries(this.component.styleHandlers).filter(([_, value]) => value)
+        )
+      : {};
+    this.componentStyles = { ...this.componentStyles, ...labelStyleHandlers };
 
-  /**
-   * Renders error indicator and panel if component has errors
-   * 
-   * @returns {unknown} Error UI template
-   */
-  renderError() {
-    const error = $debug.get()?.error?.components?.[this.component.uuid]?.errors;
-    if (hasOnlyEmptyObjects(error ?? {})) return nothing;
-  
     return html`
-      <div @mouseenter=${() => this.displayErrorPanel = true}
-           @mouseleave=${() => this.displayErrorPanel = false}
-           style="position:absolute">
-        <nr-icon name="info-circle" 
-                 style="z-index: 1000; --nuraly-icon-width: 20px; --nuraly-icon-height: 25px; --nuraly-icon-color: red; position: absolute;">Error</nr-icon>
-        ${this.displayErrorPanel ? html`<handler-component-error-block .error=${error}></handler-component-error-block>` : nothing}
-      </div>
+      ${this.renderPseudoStateStyles()}
+      ${this.renderComponent()}
     `;
   }
+}
 
+/**
+ * Full BaseElement with editor mode support via mixin
+ * This is the default export and main class for all UI components
+ */
+export class BaseElementBlock extends EditorModeMixin(BaseElementCore) {
   /**
-   * Main render method for component
-   * 
-   * @returns {unknown} Component template
-   * @protected
-   * @override
+   * Override render to include editor overlays
    */
-  protected render() {
+  protected override render() {
     if (!this.shouldDisplay) return nothing;
-    
+
+    // Update component styles
     this.componentStyles = this.calculatedStyles || {};
     const labelStyleHandlers = this.component?.styleHandlers
-      ? Object.fromEntries(Object.entries(this.component?.styleHandlers)?.filter(([key, value]) => value))
+      ? Object.fromEntries(
+          Object.entries(this.component.styleHandlers).filter(([_, value]) => value)
+        )
       : {};
+    this.componentStyles = { ...this.componentStyles, ...labelStyleHandlers };
 
-    this.componentStyles = {...this.componentStyles, ...labelStyleHandlers};
     return html`
       ${this.renderPseudoStateStyles()}
-      ${!this.isViewMode ? html`
-        ${this.renderError()}
-        ${[0, undefined].includes(this.item?.index) ? html`
-          <component-title
-            @click=${(e) => this.executeEvent("onclick", e)}
-            @dragInit=${(e) => {
-              this.isDragInitiator = e.detail.value;
-              this.setAttribute("draggable", "true");
-            }}
-            @dragend=${() => { this.isDragInitiator = false; }}
-            .component=${this.component}
-            .selectedComponent=${{ ...this.selectedComponent }}
-            .display=${EditorInstance.currentSelection.includes(this.component.uuid)}
-          ></component-title>
-          <resize-wrapper
-            .hoveredComponent=${{ ...this.hoveredComponent }}
-            .isSelected=${EditorInstance.currentSelection.includes(this.component.uuid)}
-            .component=${{ ...this.component }}
-            .selectedComponent=${{ ...this.selectedComponent }}
-            .inputRef=${this.inputRef}
-            style="width: fit-content; height: fit-content;"
-          ></resize-wrapper>
-          <drag-wrapper .where=${"before"} .message=${"Drop before"} .component=${{ ...this.component }}
-            .inputRef=${this.inputRef} .isDragInitiator=${this.isDragInitiator}></drag-wrapper>
-        ` : nothing}
-      ` : nothing}
+      ${this.renderEditorOverlay()}
       ${this.renderComponent()}
-      ${!this.isViewMode ? html`
-        <drag-wrapper .where=${"after"} .message=${"Drop after"} .component=${{ ...this.component }}
-          .inputRef=${this.inputRef} .isDragInitiator=${this.isDragInitiator}></drag-wrapper>
-      ` : nothing}
+      ${this.renderAfterDragWrapper()}
     `;
   }
-}
+}
+
+// Default export
+export default BaseElementBlock;