@adaas/are 0.0.2 → 0.0.3

package/src/lib/AreComponent/Are.component.ts

@@ -1,6 +1,11 @@
-import { A_Component,  A_Feature } from "@adaas/a-concept";
-import { AreFeatures } from "./Are.constants";
+import { A_Component, A_Context, A_Feature, A_Meta, A_TYPES__Ctor } from "@adaas/a-concept";
 import { A_Frame } from "@adaas/a-frame";
+import { A_Signal, A_SignalVector } from "@adaas/a-utils/a-signal";
+import { AreSignals } from "@adaas/are/signals/AreSignals.component";
+import { AreSignalsMeta } from "@adaas/are/signals/AreSignals.meta";
+import { ArePropDefinition } from "./Are.types";
+import { AreMeta } from "./Are.meta";
+import { AreFeatures } from "./Are.constants";
 
 
 @A_Frame.Component({
@@ -8,13 +13,52 @@ import { A_Frame } from "@adaas/a-frame";
     name: 'Are',
     description: 'Base component class for A-Concept Rendering Engine (ARE) components. It provides lifecycle decorators and methods for defining templates, styles, and data, facilitating the creation of dynamic and interactive UI components within the ARE framework.'
 })
+@A_Meta.Define(AreMeta)
 export class Are extends A_Component {
-
+    /**
+     * Allows to apply Signal Vector as a condition for rendering the component. The component will be rendered only if at least one of the signals in the vector is active. This can be used to manage complex rendering logic and to optimize performance by ensuring that components are only rendered when necessary based on the defined conditions.
+     * 
+     * @param signals 
+     * @returns 
+     */
+    static Condition(vector: A_SignalVector)
+    static Condition(vector: Array<A_Signal>)
+    static Condition(signals: Array<A_Signal> | A_SignalVector) {
+        return function <TTarget extends A_TYPES__Ctor<Are>>(
+            target: TTarget
+        ): TTarget {
+            // Store meta info on the target class itself for the Meta decorator to pick up
+            const componentMeta = A_Context.meta<AreMeta>(target);
+            const signalsMeta = A_Context.meta<AreSignalsMeta>(AreSignals);
+
+            let vector: A_SignalVector | undefined;
+
+            switch (true) {
+                case signals instanceof A_SignalVector:
+                    vector = signals;
+                    break;
+                case Array.isArray(signals):
+                    vector = new A_SignalVector(signals);
+                    break;
+                default:
+                    throw new Error('Invalid input for Are.Condition. Expected an array of A_Signal or an instance of A_SignalVector.');
+            }
+
+            if (vector) {
+                componentMeta.vector = vector;
+                signalsMeta.registerCondition(target, vector);
+            }
+
+            return target;
+        };
+    }
 
     //==================================================================================
     //======================== LIFECYCLE DECORATORS ====================================
     //==================================================================================
-
+    /**
+     * Allows to define a custom method for the component's template. This method should return a string representing the HTML template of the component. The template can include dynamic content and bindings that will be processed during rendering to create the final DOM structure for the component.
+     */
     static get EventHandler() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -23,45 +67,31 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
-
-    static get onBeforeLoad() {
-        return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
-            return A_Feature.Extend({
-                name: AreFeatures.onBeforeLoad,
-                scope: [target.constructor],
-            })(target, propertyKey, descriptor);
-        }
-    }
-
-
-    static get onAfterLoad() {
-        return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
-            return A_Feature.Extend({
-                name: AreFeatures.onAfterLoad,
-                scope: [target.constructor],
-            })(target, propertyKey, descriptor);
-        }
-    }
-
-
-    static get onBeforeCompile() {
+    /**
+     * Allows to define a custom method for the component's template. This method should return a string representing the HTML template of the component. The template can include dynamic content and bindings that will be processed during rendering to create the final DOM structure for the component.
+     */
+    static get onBeforeInit() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
-                name: AreFeatures.onBeforeCompile,
+                name: AreFeatures.onBeforeInit,
                 scope: [target.constructor],
             })(target, propertyKey, descriptor);
         }
     }
-
-    static get onAfterCompile() {
+    /**
+     * Allows to define a custom method for the component's initialization logic. This method is called after the component is instantiated but before it is rendered, and can be used to set up any necessary state, perform data fetching, or execute any other logic that needs to happen before the component is rendered for the first time.
+     */
+    static get onAfterInit() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
-                name: AreFeatures.onAfterCompile,
+                name: AreFeatures.onAfterInit,
                 scope: [target.constructor],
             })(target, propertyKey, descriptor);
         }
     }
-
+    /**
+     * Allows to define a custom method for the component's mounting logic. This method is called after the component has been rendered and added to the DOM, and can be used to perform any necessary setup or initialization that requires access to the DOM elements of the component. It can also be used to implement custom logic for handling specific features or behaviors of the component during the mounting process.
+     */
     static get onBeforeMount() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -70,7 +100,9 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
-
+    /**
+     * Allows to define a custom method for the component's logic that should be executed after the component is mounted. This method is called after the component has been rendered and added to the DOM, and can be used to perform any necessary setup or initialization that requires access to the DOM elements of the component. It can also be used to implement custom logic for handling specific features or behaviors of the component during the post-mounting process.
+     */
     static get onAfterMount() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -79,7 +111,9 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
-
+    /**
+     * Allows to define a custom method for the component's unmounting logic. This method is called before the component is removed from the DOM, and can be used to perform any necessary cleanup or teardown, such as removing event listeners, canceling timers, or releasing any resources that were allocated during the component's lifecycle. It can also be used to implement custom logic for handling specific features or behaviors of the component during the unmounting process.
+     */
     static get onBeforeUnmount() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -88,7 +122,9 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
-
+    /**
+     * Allows to define a custom method for the component's logic that should be executed after the component is unmounted. This method is called after the component has been removed from the DOM, and can be used to perform any necessary cleanup or teardown that needs to happen after the component is no longer in the DOM. It can also be used to implement custom logic for handling specific features or behaviors of the component during the post-unmounting process.
+     */
     static get onAfterUnmount() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -97,7 +133,9 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
-
+    /**
+     * Allows to define a custom method for the component's update logic. This method is called whenever the component's state changes and can be used to perform any necessary updates or side effects based on the new state. It can also be used to optimize performance by implementing custom logic for determining when the component should re-render based on specific state changes.
+     */
     static get onBeforeUpdate() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -106,7 +144,9 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
-
+    /**
+     * Allows to define a custom method for the component's logic that should be executed after the component's state has been updated. This method is called after the component has re-rendered in response to state changes, and can be used to perform any necessary side effects or additional updates based on the new state. It can also be used to implement custom logic for handling specific features or behaviors of the component during the post-update process.
+     */
     static get onAfterUpdate() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -115,8 +155,9 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
-
-
+    /**
+     * Allows to define a custom method for the component's template. This method should return a string representing the HTML template of the component. The template can include dynamic content and bindings that will be processed during rendering to create the final DOM structure for the component.
+     */
     static get Template() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -125,8 +166,9 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
-
-
+    /**
+     * Allows to define a custom method for the component's styles. This method should return a string representing the CSS styles of the component. The styles can include dynamic content and can be processed during rendering to apply the appropriate styles to the component's DOM elements.
+     */
     static get Styles() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -135,7 +177,9 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
-
+    /**
+     * Allows to define a custom method for the component's data. This method should return an object representing the initial state of the component. The data can include any properties that are needed to manage the component's state and can be reactive, allowing the component to re-render when the data changes.
+     */
     static get Data() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -144,7 +188,9 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
-
+    /**
+     * Allows to define a custom method for handling signals emitted by the component or other parts of the application. This method can be used to implement custom logic for responding to specific signals, such as user interactions, state changes, or other events that may affect the component's behavior or appearance. By defining this method, developers can create more dynamic and interactive components that can react to changes in the application state or user input in a flexible and efficient way.
+     */
     static get Signal() {
         return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
             return A_Feature.Extend({
@@ -153,11 +199,18 @@ export class Are extends A_Component {
             })(target, propertyKey, descriptor);
         }
     }
+    // ==================================================================================
+    // ========================= COMPONENT PROPERTIES ===================================
+    // ==================================================================================
+    /**
+     * Props can be used to store any additional data or configuration for the component. They are not reactive by default but can be used in the component's methods and lifecycle hooks to manage state or pass information. Props can be defined as a simple object with key-value pairs, where keys are the prop names and values are the prop values. They can be accessed and modified within the component's methods to influence rendering or behavior based on the component's state or external inputs.
+     */
+    props: Record<string, ArePropDefinition> = {};
+
 
     // ==================================================================================
     // ========================= COMPONENT METHODS ======================================
     // ==================================================================================
-
     /**
      * Returns the template string for the component
      * 
@@ -166,9 +219,9 @@ export class Are extends A_Component {
      * @returns 
      */
     @Are.Template
-    async template(
+    template(
         ...args: any[]
-    ): Promise<void> {
+    ): Promise<void> | void {
 
     }
 
@@ -180,9 +233,9 @@ export class Are extends A_Component {
      * @returns 
      */
     @Are.Styles
-    async styles(
+    styles(
         ...args: any[]
-    ): Promise<void> {
+    ): Promise<void> | void {
 
     }
 
@@ -194,10 +247,9 @@ export class Are extends A_Component {
      * @returns 
      */
     @Are.Data
-    async data(
+    data(
         ...args: any[]
-    ): Promise<void> {
+    ): Promise<void> | void {
 
     }
-
 }

package/src/lib/AreComponent/Are.constants.ts

@@ -1,39 +1,59 @@
-
-
-export enum AreFeatures {
-    /**
-     * Runs before the component is loaded into memory
-     * 
-     * Before template, styles and data are fetched
-     */
-    onBeforeLoad = '_Are_onBeforeLoad',
-    /**
-     * Runs after the component is loaded into memory
-     * 
-     * After template, styles and data are fetched
-     */
-    onAfterLoad = '_Are_onAfterLoad',
-    onBeforeMount = '_Are_onBeforeMount',
-    onAfterMount = '_Are_onAfterMount',
-    onBeforeUnmount = '_Are_onBeforeUnmount',
-    onAfterUnmount = '_Are_onAfterUnmount',
-    onBeforeUpdate = '_Are_onBeforeUpdate',
-    onAfterUpdate = '_Are_onAfterUpdate',
-    onBeforeDestroy = '_Are_onBeforeDestroy',
-    onAfterDestroy = '_Are_onAfterDestroy',
-
-
-    onBeforeCompile = '_Are_onBeforeCompile',
-    onAfterCompile = '_Are_onAfterCompile',
-
-    onBeforeRender = '_Are_onBeforeRender',
-    onAfterRender = '_Are_onAfterRender',
-
-
-
-    onTemplate = '_Are_onTemplate',
-    onStyles = '_Are_onStyles',
-    onData = '_Are_onData',
-
-    onSignal = '_Are_onSignal',
-}
+export const AreFeatures = {
+    //===================================================================================
+    // -----------------------------Node Lifecycle Hooks---------------------------------
+    //===================================================================================
+    /**
+     * Allows to define a custom method for the component's initialization logic. This method is called before the component is initialized and can be used to perform any necessary setup or configuration before the component is rendered. It can also be used to implement custom logic for handling specific features or behaviors of the component during the initialization process.
+     */
+    onBeforeInit: '_Are_onBeforeInit',
+    /**
+     * Allows to define a custom method for the component's logic that should be executed after the component has been initialized. This method is called after the component has been initialized and can be used to perform any necessary setup or configuration based on the initial state of the component. It can also be used to implement custom logic for handling specific features or behaviors of the component during the post-initialization process.
+     */
+    onAfterInit: '_Are_onAfterInit',
+    //------------------------------------------------------------------------------------
+    /**
+     * Allows to define a custom method for the component's mounting logic. This method is called before the component is mounted to the DOM and can be used to perform any necessary setup or configuration before the component is rendered. It can also be used to implement custom logic for handling specific features or behaviors of the component during the mounting process.
+     */
+    onBeforeMount: '_Are_onBeforeMount',
+    /**
+     * Allows to define a custom method for the component's logic that should be executed after the component has been mounted to the DOM. This method is called after the component has been mounted and can be used to perform any necessary setup or configuration based on the initial state of the component and its presence in the DOM. It can also be used to implement custom logic for handling specific features or behaviors of the component during the post-mounting process.
+     */
+    onAfterMount: '_Are_onAfterMount',
+    //------------------------------------------------------------------------------------
+    /**
+     * Allows to define a custom method for the component's unmounting logic. This method is called before the component is unmounted from the DOM and can be used to perform any necessary cleanup or teardown before the component is removed. It can also be used to implement custom logic for handling specific features or behaviors of the component during the unmounting process.
+     */
+    onBeforeUnmount: '_Are_onBeforeUnmount',
+    /**
+     * Allows to define a custom method for the component's logic that should be executed after the component has been unmounted from the DOM. This method is called after the component has been unmounted and can be used to perform any necessary cleanup or teardown based on the final state of the component and its removal from the DOM. It can also be used to implement custom logic for handling specific features or behaviors of the component during the post-unmounting process.
+     */
+    onAfterUnmount: '_Are_onAfterUnmount',
+    //------------------------------------------------------------------------------------
+    /**
+     * Allows to define a custom method for the component's update logic. This method is called whenever the component's state changes and can be used to perform any necessary updates or side effects based on the new state. It can also be used to optimize performance by implementing custom logic for determining when the component should re-render based on specific state changes.
+     */
+    onBeforeUpdate: '_Are_onBeforeUpdate',
+    /**
+     * Allows to define a custom method for the component's logic that should be executed after the component's state has been updated. This method is called after the component has re-rendered in response to state changes, and can be used to perform any necessary side effects or additional updates based on the new state. It can also be used to implement custom logic for handling specific features or behaviors of the component during the post-update process.
+     */
+    onAfterUpdate: '_Are_onAfterUpdate',
+    /**
+     * Allows to define a custom method for the component's logic that should be executed before the component is destroyed. This method is called before the component is destroyed and can be used to perform any necessary cleanup or teardown based on the final state of the component. It can also be used to implement custom logic for handling specific features or behaviors of the component during the pre-destruction process.
+     */
+    onBeforeDestroy: '_Are_onBeforeDestroy',
+    /**
+     * Allows to define a custom method for the component's logic that should be executed after the component is destroyed. This method is called after the component has been destroyed and can be used to perform any necessary cleanup or teardown based on the final state of the component. It can also be used to implement custom logic for handling specific features or behaviors of the component during the post-destruction process.
+     */
+    onAfterDestroy: '_Are_onAfterDestroy',
+
+    //===================================================================================
+    // -----------------------------Loading Extension------------------------------------
+    //===================================================================================
+    onTemplate: '_Are_onTemplate',
+    onStyles: '_Are_onStyles',
+    onData: '_Are_onData',
+    //===================================================================================
+    // -----------------------------Runtime Hooks------------------------------------
+    //=================================================================================== 
+    onSignal: '_Are_onSignal',
+} as const;

package/src/lib/AreComponent/Are.context.ts

@@ -1,6 +1,9 @@
 import { A_Context, A_Fragment } from "@adaas/a-concept";
 import { A_Frame } from "@adaas/a-frame";
-import { AreNode } from "@adaas/are/node";
+import { A_SignalVector } from "@adaas/a-utils/a-signal";
+import { AreNode } from "@adaas/are/node/AreNode.entity";
+import { AreInstruction } from "@adaas/are/instruction/AreInstruction.entity";
+import { A_ExecutionContext } from "@adaas/a-utils/a-execution";
 
 
 
@@ -9,35 +12,144 @@ import { AreNode } from "@adaas/are/node";
     name: 'AreContext',
     description: 'Context fragment for the A-Concept Rendering Engine (ARE) framework, serving as a foundational component for managing shared state and configurations within the ARE environment. This Context uses to encapsulate global settings, resources, and utilities that can be accessed by various ARE components and entities during the rendering and interaction processes.'
 })
-export class AreContext extends A_Fragment {
+export class AreContext extends A_ExecutionContext {
 
+    /**
+     * The source string represents the original template or input from which the ARE scene is generated. This can be used for debugging, error reporting, or any features that require access to the raw template data. The roots array holds references to the root nodes of the ARE scene, allowing for easy access and management of the top-level components in the rendering hierarchy. The signalsMap is a mapping between root nodes and their associated signal vectors, enabling efficient management of reactive updates and interactions within the ARE framework based on changes in the application state or user input.
+     */
     protected _source: string;
+    /**
+     * The roots array holds references to the root nodes of the ARE scene, allowing for easy access and management of the top-level components in the rendering hierarchy. The signalsMap is a mapping between root nodes and their associated signal vectors, enabling efficient management of reactive updates and interactions within the ARE framework based on changes in the application state or user input.
+     */
     protected _roots: Array<AreNode> = [];
+    /**
+     * This property stores a map between root node and conditions that should be met to render particular component inside the root node. This can be used to manage complex rendering logic and to optimize performance by ensuring that components are only rendered when necessary based on the defined conditions.
+     */
+    protected _signalsMap: Map<string, A_SignalVector> = new Map();
 
-    constructor(source: string = '') {
-        super({ name: 'AreContext' });
-        this._source = source;
+    protected _performance = new Map<string, number>();
+    protected _performanceStart = new Map<string, number>();
+    protected _performanceDepth = new Map<string, number>();
+
+    /**
+     * The global object can be used to store any global data or configurations that need to be accessed across different components and entities within the ARE framework. This can include things like theme settings, user preferences, or any other shared data that is relevant to the entire scene or application. By centralizing this information in the context, it allows for easier management and access to global state without needing to pass it through multiple layers of components or entities.
+     */
+    get globals() {
+        return this.get('globals') || {};
     }
 
+
+    constructor(
+        /**
+         * The source string represents the original template or input from which the ARE scene is generated. This can be used for debugging, error reporting, or any features that require access to the raw template data. The roots array holds references to the root nodes of the ARE scene, allowing for easy access and management of the top-level components in the rendering hierarchy. The signalsMap is a mapping between root nodes and their associated signal vectors, enabling efficient management of reactive updates and interactions within the ARE framework based on changes in the application state or user input.
+         */
+        source: string = ''
+    ) {
+        super('AreContext');
+        this._source = source;
+    }
+    /**
+     * The scope of the context, which can be used to access other entities and features within the same scope. This is particularly useful for components that need to interact with other parts of the scene or component, as it allows them to access shared data and functionality without needing to pass it explicitly through parameters.
+     */
     get scope() {
         return A_Context.scope(this);
     }
-
+    /**
+     * The roots array holds references to the root nodes of the ARE scene, allowing for easy access and management of the top-level components in the rendering hierarchy. The signalsMap is a mapping between root nodes and their associated signal vectors, enabling efficient management of reactive updates and interactions within the ARE framework based on changes in the application state or user input.
+     */
     get roots(): Array<AreNode> {
         return this._roots;
     }
-
+    /**
+     * This property stores a map between root node and conditions that should be met to render particular component inside the root node. This can be used to manage complex rendering logic and to optimize performance by ensuring that components are only rendered when necessary based on the defined conditions.
+     */
     get source(): string {
         return this._source;
     }
 
+    get performance(): Array<string> {
+        const perfObj: Array<string> = [];
+        this._performance.forEach((value, key) => {
+            perfObj.push(`${key}: ${value} ms`);
+        });
+        return perfObj;
+    }
+
+
+    get stats() {
+        return [
+            `- Total Roots: ${this._roots.length}`,
+            `- Total Nodes in Scene: ${this._roots.reduce((acc, root) => acc + this.countNodes(root), 0,)}`,
+            `- Total Instructions: ${this._roots.reduce((acc, root) => acc + this.countInstructions(root), 0,)}`,
+        ]
+    }
+
+    protected countInstructions(node: AreNode): number {
+        let count = 0; // Count instructions for the current node
+        // Assuming each node has a method or property that returns its instructions
+        if (node.scene) {
+            count += node.scene.instructions.length;
+        }
+        for (const child of node.children) {
+            count += this.countInstructions(child); // Recursively count instructions in child nodes
+        }
+        return count;
+    }
+
+    protected countNodes(node: AreNode): number {
+        let count = 1; // Count the current node
+        for (const child of node.children) {
+            count += this.countNodes(child); // Recursively count child nodes
+        }
+        return count;
+    }
+
+    /**
+     * This property stores a map between root node and conditions that should be met to render particular component inside the root node. This can be used to manage complex rendering logic and to optimize performance by ensuring that components are only rendered when necessary based on the defined conditions.
+     * 
+     * @param node 
+     */
     addRoot(node: AreNode) {
         this._roots.push(node);
         this.scope.register(node);
     }
-
+    /**
+     * This property stores a map between root node and conditions that should be met to render particular component inside the root node. This can be used to manage complex rendering logic and to optimize performance by ensuring that components are only rendered when necessary based on the defined conditions.
+     * 
+     * @param node 
+     */
     removeRoot(node: AreNode) {
         this._roots = this._roots.filter(r => r.aseid.toString() !== node.aseid.toString());
     }
 
+
+
+
+    startPerformance(label: string = 'default') {
+        const depth = this._performanceDepth.get(label) || 0;
+        this._performanceDepth.set(label, depth + 1);
+
+        if (depth === 0) {
+            this._performanceStart.set(label, Date.now());
+        }
+    }
+
+    endPerformance(label: string) {
+        const depth = this._performanceDepth.get(label) || 0;
+
+        if (depth <= 1) {
+            const startTime = this._performanceStart.get(label) || this._performanceStart.get('default');
+
+            if (startTime) {
+                const duration = Date.now() - startTime;
+                const accumulated = this._performance.get(label) || 0;
+                this._performance.set(label, accumulated + duration);
+                this._performanceStart.delete(label);
+            }
+
+            this._performanceDepth.delete(label);
+        } else {
+            this._performanceDepth.set(label, depth - 1);
+        }
+    }
 }

package/src/lib/AreComponent/Are.meta.ts

@@ -0,0 +1,16 @@
+import { A_ComponentMeta, A_TYPES__ComponentMeta } from "@adaas/a-concept";
+import type { A_SignalVector } from "@adaas/a-utils/a-signal";
+
+
+
+/**
+ * The AreMeta class serves as a metadata container for components within the A-Concept Rendering Engine (ARE) framework. It extends the base A_ComponentMeta class and includes additional properties and features specific to ARE components. The AreMeta class can be used to define and manage metadata for ARE components, such as their template, styles, data, and signal handling logic, allowing for a structured and organized way to manage component behavior and interactions within the ARE environment.
+ */
+export class AreMeta<T extends Record<string, any> = Record<string, any>> extends A_ComponentMeta<T & A_TYPES__ComponentMeta> {
+
+    /**
+     * Optional property to store a signal vector associated with the component. This can be used to manage and handle signals emitted by the component or other parts of the application, allowing for dynamic interactions and responsive behavior based on changes in the application state or user input.
+     */
+    vector?: A_SignalVector
+
+}

package/src/lib/AreComponent/Are.types.ts

@@ -0,0 +1,30 @@
+import { A_SignalVector } from "@adaas/a-utils/a-signal";
+import { AreFeatures } from "./Are.constants";
+
+
+export type AreContextInit = {
+    /**
+     * The base template to be used for rendering and compilation.
+     */
+    source?: string;
+    /**
+     * Conditions Mapping between roots and signals associated with components rendered inside the roots. This can be used to manage complex rendering logic and to optimize performance by ensuring that components are only rendered when necessary based on the defined conditions.
+     */
+    map: { [rootName: string]: A_SignalVector };
+}
+
+export type ArePropDefinition = {
+    /**
+     * The type of the property, which can be used for validation and parsing purposes. This can include basic types like 'string', 'number', 'boolean', as well as more complex types like 'object' or 'array'.
+     */
+    type: string;
+    /**
+     * The default value of the property, which will be used if the property is not provided during the component's usage. This can help ensure that the component has a consistent behavior even when certain props are omitted.
+     */
+    default: any;
+}
+
+/**
+ * The names of the features that can be implemented by the AreComponent entity. These features correspond to specific methods that can be defined on the AreComponent class to provide custom behavior for handling signals, defining the component's template, styles, data, and other aspects of its functionality within the ARE framework. Each feature name is associated with a specific method that should be implemented to handle the corresponding aspect of the component's behavior and lifecycle within the ARE framework.
+ */
+export type AreFeatureNames = typeof AreFeatures[keyof typeof AreFeatures];