@nuraly/runtime 0.1.7 → 0.1.8

package/components/ui/components/base/controllers/StyleHandlerController.ts

@@ -0,0 +1,286 @@
+/**
+ * @file StyleHandlerController.ts
+ * @description Controller for processing component style handlers
+ * Handles dynamic style resolution, CSS generation, and caching
+ */
+
+import type { ReactiveController } from "lit";
+import { Subscription } from "rxjs";
+import { executeHandler } from "../../../../../handlers/handler-executor";
+import Editor from "../../../../../state/editor";
+import { RuntimeHelpers } from "../../../../../utils/runtime-helpers";
+import { isServer } from "../../../../../utils/envirement";
+import { $runtimeStylescomponentStyleByID } from "../../../../../redux/store/component/store";
+import type { StyleHandlerHost, Disposable } from "../types/base-element.types";
+import { StyleCache, generateStyleCacheKey } from "../utils/style-cache";
+
+/** Pseudo-state selectors supported by the style system */
+const PSEUDO_STATES = [":hover", ":focus", ":active", ":disabled"] as const;
+type PseudoState = (typeof PSEUDO_STATES)[number];
+
+/**
+ * Controller responsible for processing style handlers
+ * Extracts style processing logic from BaseElement for better separation of concerns
+ */
+export class StyleHandlerController implements ReactiveController, Disposable {
+  private host: StyleHandlerHost;
+  private subscription = new Subscription();
+  private runtimeStyles: Record<string, any> = {};
+  private pseudoStyleCache = new StyleCache(100);
+  private isConnected = false;
+
+  constructor(host: StyleHandlerHost) {
+    this.host = host;
+    host.addController(this);
+  }
+
+  hostConnected(): void {
+    this.isConnected = true;
+    this.setupSubscriptions();
+  }
+
+  hostDisconnected(): void {
+    this.isConnected = false;
+    this.dispose();
+  }
+
+  /**
+   * Set up subscriptions for runtime style updates
+   */
+  private setupSubscriptions(): void {
+    // Subscribe to runtime styles from store
+    this.subscription.add(
+      $runtimeStylescomponentStyleByID(this.host.uniqueUUID).subscribe(
+        (styles) => {
+          this.runtimeStyles = styles || {};
+          this.host.requestUpdate();
+        }
+      )
+    );
+  }
+
+  /**
+   * Process all style handlers for the component
+   */
+  async processStyles(): Promise<void> {
+    if (isServer || !this.isConnected) return;
+
+    const { component } = this.host;
+    if (!component?.styleHandlers) {
+      this.calculateStyles();
+      return;
+    }
+
+    // Reset style handler values
+    this.host.stylesHandlersValue = {};
+
+    // Process all style handlers in parallel
+    await Promise.all(
+      Object.entries(component.styleHandlers).map(([name, style]) =>
+        this.processStyleHandler(style as string, name)
+      )
+    );
+
+    this.calculateStyles();
+    this.host.requestUpdate();
+  }
+
+  /**
+   * Process a single style handler
+   */
+  private async processStyleHandler(
+    style: string,
+    styleName: string
+  ): Promise<void> {
+    if (!style) return;
+
+    try {
+      // Execute handler if it's a dynamic expression
+      const value = style.startsWith("return ")
+        ? executeHandler(this.host.component, style)
+        : style;
+
+      if (value && this.host.stylesHandlersValue[styleName] !== value) {
+        this.host.stylesHandlersValue[styleName] = value;
+      }
+    } catch (error) {
+      console.error(`Error processing style handler "${styleName}":`, error);
+    }
+  }
+
+  /**
+   * Calculate and apply styles to the host element
+   */
+  private calculateStyles(): void {
+    const { component, inputHandlersValue } = this.host;
+
+    // Merge component styles with existing calculated styles
+    this.host.calculatedStyles = {
+      ...Editor.getComponentStyles(component),
+      ...this.host.calculatedStyles,
+    };
+
+    // Apply alignment styles to host element
+    const { innerAlignment } = inputHandlersValue;
+    const hostStyle = this.host.style;
+
+    // Reset alignment properties
+    hostStyle.removeProperty("align-self");
+    hostStyle.removeProperty("margin");
+    hostStyle.removeProperty("margin-left");
+
+    // Apply alignment
+    if (innerAlignment === "end") {
+      hostStyle.marginLeft = "auto";
+    } else if (innerAlignment === "middle") {
+      hostStyle.alignSelf = "center";
+      hostStyle.margin = "auto";
+    }
+
+    // Apply layout styles
+    const { width, flex, cursor } = this.host.calculatedStyles;
+
+    if (width && RuntimeHelpers.extractUnit(width) === "%") {
+      hostStyle.width = width;
+    }
+    if (flex) {
+      hostStyle.flex = flex;
+    }
+    if (cursor) {
+      hostStyle.cursor = cursor;
+    }
+  }
+
+  /**
+   * Get computed styles for the component
+   * Merges multiple style sources: editor styles, handler values, runtime styles
+   */
+  getComputedStyles(): Record<string, any> {
+    const { component } = this.host;
+    const width = Editor.getComponentStyle(component, "width");
+    const allStyles = Editor.getComponentStyles(component);
+
+    // Filter out pseudo-state styles (they're handled via CSS classes)
+    const regularStyles = this.filterPseudoStates(allStyles);
+
+    // Compute final width value
+    const computedWidth =
+      width === "auto"
+        ? "auto"
+        : RuntimeHelpers.extractUnit(width) === "%"
+        ? "100%"
+        : width ?? "auto";
+
+    return {
+      ...regularStyles,
+      ...this.host.stylesHandlersValue,
+      width: computedWidth,
+      ...this.runtimeStyles,
+    };
+  }
+
+  /**
+   * Filter out pseudo-state keys from styles object
+   */
+  private filterPseudoStates(
+    styles: Record<string, any>
+  ): Record<string, any> {
+    return Object.keys(styles)
+      .filter((key) => !PSEUDO_STATES.includes(key as PseudoState))
+      .reduce((obj, key) => {
+        obj[key] = styles[key];
+        return obj;
+      }, {} as Record<string, any>);
+  }
+
+  /**
+   * Generate CSS string for pseudo-state styles
+   * Uses caching to avoid regeneration on every render
+   */
+  generatePseudoStateCSS(): string {
+    const componentStyles = Editor.getComponentStyles(this.host.component);
+    const cacheKey = generateStyleCacheKey(
+      this.host.component.uuid,
+      componentStyles
+    );
+
+    return this.pseudoStyleCache.getOrGenerate(cacheKey, () =>
+      this.buildPseudoStateCSS(componentStyles)
+    );
+  }
+
+  /**
+   * Build CSS string for pseudo-state styles
+   */
+  private buildPseudoStateCSS(componentStyles: Record<string, any>): string {
+    const uuid = this.host.component.uuid;
+    let cssString = "";
+
+    // Generate base class with regular styles
+    const regularStyles = this.filterPseudoStates(componentStyles);
+    const baseRules = this.stylesToCSS(regularStyles);
+
+    if (baseRules) {
+      cssString += `.drop-${uuid} {\n${baseRules}}\n`;
+    }
+
+    // Generate pseudo-state classes
+    for (const pseudoState of PSEUDO_STATES) {
+      const stateStyles = componentStyles[pseudoState];
+      if (stateStyles && typeof stateStyles === "object") {
+        const stateRules = this.stylesToCSS(stateStyles);
+        if (stateRules) {
+          cssString += `.drop-${uuid}${pseudoState} {\n${stateRules}}\n`;
+        }
+      }
+    }
+
+    return cssString;
+  }
+
+  /**
+   * Convert styles object to CSS rule string
+   */
+  private stylesToCSS(styles: Record<string, any>): string {
+    return Object.entries(styles)
+      .filter(([_, value]) => value !== undefined && value !== null)
+      .map(([property, value]) => `  ${property}: ${value};`)
+      .join("\n");
+  }
+
+  /**
+   * Check if component has any pseudo-state styles
+   */
+  hasPseudoStateStyles(): boolean {
+    const componentStyles = Editor.getComponentStyles(this.host.component);
+    return PSEUDO_STATES.some(
+      (state) =>
+        componentStyles[state] &&
+        typeof componentStyles[state] === "object" &&
+        Object.keys(componentStyles[state]).length > 0
+    );
+  }
+
+  /**
+   * Invalidate cached styles for this component
+   */
+  invalidateCache(): void {
+    // Clear entries for this component
+    const componentStyles = Editor.getComponentStyles(this.host.component);
+    const cacheKey = generateStyleCacheKey(
+      this.host.component.uuid,
+      componentStyles
+    );
+    this.pseudoStyleCache.delete(cacheKey);
+  }
+
+  /**
+   * Clean up all resources
+   */
+  dispose(): void {
+    this.subscription.unsubscribe();
+    this.subscription = new Subscription();
+    this.pseudoStyleCache.clear();
+    this.runtimeStyles = {};
+  }
+}

package/components/ui/components/base/controllers/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @file controllers/index.ts
+ * @description Export all controllers for BaseElement
+ */
+
+export { InputHandlerController } from "./InputHandlerController";
+export { StyleHandlerController } from "./StyleHandlerController";
+export { EventController } from "./EventController";
+export { SelectionController } from "./SelectionController";
+export { DragDropController } from "./DragDropController";
+export { ErrorController } from "./ErrorController";

package/components/ui/components/base/mixins/EditorModeMixin.ts

@@ -0,0 +1,185 @@
+/**
+ * @file EditorModeMixin.ts
+ * @description Mixin that adds editor-only functionality to BaseElement
+ * Encapsulates all editor-mode specific behavior
+ */
+
+import { html, nothing } from "lit";
+import { state } from "lit/decorators.js";
+import type { LitElement, PropertyValues } from "lit";
+import type { Ref } from "lit/directives/ref.js";
+import { SelectionController } from "../controllers/SelectionController";
+import { DragDropController } from "../controllers/DragDropController";
+import { ErrorController } from "../controllers/ErrorController";
+import type { ComponentElement } from "../../../../../redux/store/component/component.interface";
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+/**
+ * Interface for base element host that the mixin extends
+ */
+export interface EditorModeHost extends LitElement {
+  component: ComponentElement;
+  item: any;
+  isViewMode: boolean;
+  inputRef: Ref<HTMLElement>;
+  uniqueUUID: string;
+  errors: Record<string, any>;
+  callbacks: Record<string, (val: any) => void>;
+  inputHandlersValue: Record<string, any>;
+  stylesHandlersValue: Record<string, any>;
+  calculatedStyles: Record<string, any>;
+}
+
+/**
+ * Mixin that adds editor-mode functionality to a base element class
+ * This includes selection, drag-drop, and error display capabilities
+ */
+export function EditorModeMixin<T extends Constructor<EditorModeHost>>(
+  superClass: T
+) {
+  class EditorModeElement extends superClass {
+    // Editor-only state
+    @state() currentSelection: string[] = [];
+    @state() isDragInitiator = false;
+    @state() displayErrorPanel = false;
+    @state() isEditable = false;
+    @state() hoveredComponent: ComponentElement | null = null;
+    @state() closestGenericComponentWrapper: HTMLElement | null = null;
+
+    // Editor-only controllers
+    protected selectionController!: SelectionController;
+    protected dragDropController!: DragDropController;
+    protected errorController!: ErrorController;
+
+    constructor(...args: any[]) {
+      super(...args);
+
+      // Initialize controllers with proper host interface
+      // Note: Controllers are initialized in connectedCallback when host is ready
+    }
+
+    override connectedCallback(): void {
+      super.connectedCallback();
+
+      if (!this.isViewMode) {
+        // Create controllers if they don't exist
+        if (!this.selectionController) {
+          this.selectionController = new SelectionController(this as any);
+        }
+        if (!this.dragDropController) {
+          this.dragDropController = new DragDropController(this as any);
+        }
+        if (!this.errorController) {
+          this.errorController = new ErrorController(this as any);
+        }
+
+        // Activate all editor controllers
+        this.selectionController.activate();
+        this.dragDropController.activate();
+        this.errorController.activate();
+      }
+    }
+
+    override disconnectedCallback(): void {
+      if (!this.isViewMode) {
+        // Deactivate all editor controllers
+        this.selectionController?.deactivate();
+        this.dragDropController?.deactivate();
+        this.errorController?.deactivate();
+      }
+
+      super.disconnectedCallback();
+    }
+
+    /**
+     * Select this component in the editor
+     */
+    selectComponent(event?: Event): void {
+      if (!this.isViewMode && this.selectionController) {
+        this.selectionController.select(event);
+      }
+    }
+
+    /**
+     * Check if this component is currently selected
+     */
+    isSelected(): boolean {
+      return this.selectionController?.isSelected() ?? false;
+    }
+
+    /**
+     * Check if this component is currently hovered
+     */
+    isHovered(): boolean {
+      return this.selectionController?.isHovered() ?? false;
+    }
+
+    /**
+     * Render error indicator (editor only)
+     */
+    renderEditorError() {
+      if (this.isViewMode) return nothing;
+      return this.errorController?.renderError() ?? nothing;
+    }
+
+    /**
+     * Render drag wrappers before content (editor only)
+     */
+    renderBeforeDragWrapper() {
+      if (this.isViewMode) return nothing;
+
+      const itemIndex = this.item?.index;
+      return this.dragDropController?.renderWrappers(itemIndex) ?? nothing;
+    }
+
+    /**
+     * Render drag wrapper after content (editor only)
+     */
+    renderAfterDragWrapper() {
+      if (this.isViewMode) return nothing;
+      return this.dragDropController?.renderAfterWrapper() ?? nothing;
+    }
+
+    /**
+     * Render full editor overlay (error + drag wrappers)
+     */
+    renderEditorOverlay() {
+      if (this.isViewMode) return nothing;
+
+      const itemIndex = this.item?.index;
+
+      return html`
+        ${this.renderEditorError()}
+        ${[0, undefined].includes(itemIndex)
+          ? this.renderBeforeDragWrapper()
+          : nothing}
+      `;
+    }
+
+    /**
+     * Check if component has errors
+     */
+    hasErrors(): boolean {
+      return this.errorController?.hasErrors() ?? false;
+    }
+
+    /**
+     * Get error summary
+     */
+    getErrorSummary(): { count: number; messages: string[] } {
+      return (
+        this.errorController?.getErrorSummary() ?? { count: 0, messages: [] }
+      );
+    }
+  }
+
+  return EditorModeElement;
+}
+
+/**
+ * Type helper for classes using the mixin
+ */
+export type EditorModeElementType = InstanceType<
+  ReturnType<typeof EditorModeMixin<Constructor<EditorModeHost>>>
+>;

package/components/ui/components/base/mixins/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file mixins/index.ts
+ * @description Export all mixins for BaseElement
+ */
+
+export { EditorModeMixin, type EditorModeHost, type EditorModeElementType } from "./EditorModeMixin";

package/components/ui/components/base/types/base-element.types.ts

@@ -0,0 +1,138 @@
+/**
+ * @file base-element.types.ts
+ * @description Type definitions for the BaseElement component system
+ */
+
+import type { ReactiveControllerHost } from "lit";
+import type { Ref } from "lit/directives/ref.js";
+import type { ComponentElement } from "../../../../../redux/store/component/component.interface";
+
+/**
+ * Base host interface for all controllers
+ */
+export interface BaseElementHost extends ReactiveControllerHost {
+  component: ComponentElement;
+  item: any;
+  parentcomponent: ComponentElement;
+  isViewMode: boolean;
+  uniqueUUID: string;
+  inputRef: Ref<HTMLElement>;
+  style: CSSStyleDeclaration;
+
+  // State
+  inputHandlersValue: Record<string, any>;
+  stylesHandlersValue: Record<string, any>;
+  calculatedStyles: Record<string, any>;
+  errors: Record<string, any>;
+
+  // Callbacks registry
+  callbacks: Record<string, (val: any) => void>;
+
+  // Methods
+  requestUpdate(): void;
+  dispatchEvent(event: Event): boolean;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+  classList: DOMTokenList;
+  shadowRoot: ShadowRoot | null;
+
+  // DOM Element methods
+  closest?(selector: string): Element | null;
+}
+
+/**
+ * Host interface for input handler controller
+ */
+export interface InputHandlerHost extends BaseElementHost {
+  ExecuteInstance: any;
+}
+
+/**
+ * Host interface for style handler controller
+ */
+export interface StyleHandlerHost extends BaseElementHost {}
+
+/**
+ * Host interface for event controller
+ */
+export interface EventHandlerHost extends BaseElementHost {}
+
+/**
+ * Host interface for selection controller
+ */
+export interface SelectionHost extends BaseElementHost {
+  currentSelection: string[];
+}
+
+/**
+ * Host interface for drag-drop controller
+ */
+export interface DragDropHost extends BaseElementHost {
+  isDragInitiator: boolean;
+  closestGenericComponentWrapper: HTMLElement | null;
+}
+
+/**
+ * Host interface for error controller
+ */
+export interface ErrorHost extends BaseElementHost {
+  displayErrorPanel: boolean;
+}
+
+/**
+ * Configuration for input handler processing
+ */
+export interface InputHandlerConfig {
+  name: string;
+  input: any;
+  component: ComponentElement;
+  item: any;
+  uniqueUUID: string;
+}
+
+/**
+ * Result of input handler execution
+ */
+export interface InputHandlerResult {
+  name: string;
+  value: any;
+  error?: { message: string };
+}
+
+/**
+ * Configuration for style handler processing
+ */
+export interface StyleHandlerConfig {
+  name: string;
+  style: string;
+  component: ComponentElement;
+}
+
+/**
+ * Event execution options
+ */
+export interface EventExecutionOptions {
+  eventName: string;
+  event?: Event;
+  data?: Record<string, any>;
+}
+
+/**
+ * Drag wrapper position
+ */
+export type DragWrapperPosition = "before" | "after" | "inside";
+
+/**
+ * Controller disposal interface
+ */
+export interface Disposable {
+  dispose(): void;
+}
+
+/**
+ * Controller activation interface (for editor-only controllers)
+ */
+export interface Activatable {
+  activate(): void;
+  deactivate(): void;
+}

package/components/ui/components/base/types/index.ts

@@ -0,0 +1,21 @@
+/**
+ * @file types/index.ts
+ * @description Export all types for BaseElement
+ */
+
+export type {
+  BaseElementHost,
+  InputHandlerHost,
+  StyleHandlerHost,
+  EventHandlerHost,
+  SelectionHost,
+  DragDropHost,
+  ErrorHost,
+  InputHandlerConfig,
+  InputHandlerResult,
+  StyleHandlerConfig,
+  EventExecutionOptions,
+  DragWrapperPosition,
+  Disposable,
+  Activatable,
+} from "./base-element.types";