@adaas/are-html 0.0.12 → 0.0.14

package/dist/node/lib/AreHTMLNode/AreHTMLNode.d.ts

@@ -1,4 +1,4 @@
 import '@adaas/are';
-export { e as AreHTMLNode } from '../../AreBinding.attribute-C6JasbJL.js';
+export { e as AreHTMLNode } from '../../AreBinding.attribute-Bm5LlOyE.js';
 import '../AreStyle/AreStyle.context.js';
 import '@adaas/a-concept';

package/dist/node/lib/AreHTMLNode/AreHTMLNode.js

@@ -70,6 +70,20 @@ exports.AreHTMLNode = class AreHTMLNode extends are.AreNode {
   get styles() {
     return this.scope.resolveFlat(AreStyle_context.AreStyle);
   }
+  /**
+   * Registers or updates the component-scoped CSS string for this node.
+   * Called by the @Are.Styles-decorated method on the associated component.
+   * A new AreStyle fragment is registered in scope on first call; subsequent
+   * calls update the existing fragment in-place.
+   */
+  setStyles(css) {
+    const existing = this.scope.resolveFlat(AreStyle_context.AreStyle);
+    if (existing) {
+      existing.styles = css;
+    } else {
+      this.scope.register(new AreStyle_context.AreStyle(css, this.aseid.toString()));
+    }
+  }
 };
 exports.AreHTMLNode = __decorateClass([
   core.A_Frame.Define({

package/dist/node/lib/AreHTMLNode/AreHTMLNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/AreHTMLNode/AreHTMLNode.ts"],"names":["AreHTMLNode","AreNode","AreStaticAttribute","AreBindingAttribute","AreDirectiveAttribute","A_Context","AreEventAttribute","AreStyle","A_Frame"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBaA,mBAAA,GAAN,0BAA0BC,WAAA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrC,IAAI,GAAA,GAAc;AACd,IAAA,OAAO,KAAK,KAAA,CAAM,MAAA;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,gBAAA,GAAyC;AACzC,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAmCC,sCAAkB,CAAA;AAAA,EAC3E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAA,GAAkC;AAClC,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAoCC,wCAAmB,CAAA;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAA,GAAsC;AAItC,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,KAAA,CAAM,cAAA,CAAsCC,4CAAqB,CAAA;AAOzF,IAAA,OAAO,UAAA,CAAW,OAAO,CAAA,CAAA,KAAK,CAAA,CAAE,SAAS,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM;AACtD,MAAA,MAAM,KAAA,GAAQC,kBAAA,CAAU,IAAA,CAAqC,CAAA,CAAE,SAAU,CAAA;AACzE,MAAA,MAAM,KAAA,GAAQA,kBAAA,CAAU,IAAA,CAAqC,CAAA,CAAE,SAAU,CAAA;AAEzE,MAAA,MAAM,SAAA,GAAY,MAAM,QAAA,IAAY,CAAA;AACpC,MAAA,MAAM,SAAA,GAAY,MAAM,QAAA,IAAY,CAAA;AAEpC,MAAA,OAAO,SAAA,GAAY,SAAA;AAAA,IACvB,CAAC,CAAA;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAA,GAA8B;AAC9B,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAkCC,oCAAiB,CAAA;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAIA,IAAI,MAAA,GAAmB;AACnB,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,WAAA,CAAsBC,yBAAQ,CAAA;AAAA,EACpD;AAEJ;AAjEaP,mBAAA,GAAN,eAAA,CAAA;AAAA,EAJNQ,aAAQ,MAAA,CAAO;AAAA,IACZ,SAAA,EAAW,YAAA;AAAA,IACX,WAAA,EAAa;AAAA,GAChB;AAAA,CAAA,EACYR,mBAAA,CAAA","file":"AreHTMLNode.js","sourcesContent":["import { A_Context, } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\nimport { AreNode} from \"@adaas/are\";\nimport { AreBindingAttribute } from \"@adaas/are-html/attributes/AreBinding.attribute\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport { AreEventAttribute } from \"@adaas/are-html/attributes/AreEvent.attribute\";\nimport { AreStaticAttribute } from \"@adaas/are-html/attributes/AreStatic.attribute\";\nimport { AreStyle } from \"@adaas/are-html/style/AreStyle.context\";\nimport { AreDirective } from \"@adaas/are-html/directive/AreDirective.component\";\nimport { AreDirectiveMeta } from \"@adaas/are-html/directive/AreDirective.meta\";\n\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'AreHTMLNode represents a node in the HTML structure. It extends the base AreNode and includes properties and methods specific to HTML nodes, such as handling attributes, directives, events, and styles.'\n})\nexport class AreHTMLNode extends AreNode {\n    /**\n     * Actual node type. \n     * By default it's a tag name\n     */\n    get tag(): string {\n        return this.aseid.entity;\n    }\n    /**\n      * The static attributes defined for the node, which are typically used to represent static properties or characteristics of the node that do not change based on the context or state. These attributes are usually defined in the template and are not reactive.\n      * \n      * Example: For a node defined as `<div class=\"static-class\">`, the static attribute would be `class=\"static-class\"`.\n      */\n    get staticAttributes(): AreStaticAttribute[] {\n        return this.scope.resolveFlatAll<AreStaticAttribute>(AreStaticAttribute);\n    }\n    /**\n     * The binding attributes defined for the node, which are typically used to represent dynamic properties or characteristics of the node that can change based on the context or state. These attributes are usually defined in the template with a specific syntax (e.g., `:prop=\"value\"` or `v-bind:prop=\"value\"`) and are reactive, meaning that they will update automatically when the underlying data changes.\n     * \n     * Example: For a node defined as `<div :class=\"dynamicClass\">`, the binding attribute would be `:class=\"dynamicClass\"`.\n     */\n    get bindings(): AreBindingAttribute[] {\n        return this.scope.resolveFlatAll<AreBindingAttribute>(AreBindingAttribute);\n    }\n    /**\n     * The directive attributes defined for the node, which are typically used to represent special instructions or behaviors that should be applied to the node. These attributes are usually defined in the template with a specific syntax (e.g., `v-if=\"condition\"` or `v-for=\"item in list\"`) and are processed by the rendering engine to apply the corresponding logic or behavior to the node.\n     * \n     * Example: For a node defined as `<div v-if=\"isVisible\">`, the directive attribute would be `v-if=\"isVisible\"`.\n     */\n    get directives(): AreDirectiveAttribute[] {\n        /**\n         * 1. get all registered directives for the node\n         */\n        const directives = this.scope.resolveFlatAll<AreDirectiveAttribute>(AreDirectiveAttribute)!;\n        /**\n         * 2. Order them in the way that defined in the meta\n         * \n         *   Each meta has a prioprity of order that may impact the way how directives are compiled and rendered. For example, a directive with higher priority may need to be compiled before other directives to ensure that its logic is applied correctly before other directives are processed. By ordering the directives based on their defined priority in the meta, we can ensure that the compilation and rendering process follows the intended logic and behavior as defined by the directive implementations.\n         */\n\n        return directives.filter(d => d.component).sort((a, b) => {\n            const aMeta = A_Context.meta<AreDirectiveMeta, AreDirective>(a.component!);\n            const bMeta = A_Context.meta<AreDirectiveMeta, AreDirective>(b.component!);\n\n            const aPriority = aMeta.priority ?? 0;\n            const bPriority = bMeta.priority ?? 0;\n\n            return bPriority - aPriority;\n        });\n    }\n    /**\n     * The event attributes defined for the node, which are typically used to represent event listeners or handlers that should be attached to the node. These attributes are usually defined in the template with a specific syntax (e.g., `@click=\"handleClick\"` or `v-on:click=\"handleClick\"`) and are processed by the rendering engine to attach the corresponding event listeners to the node.\n     * \n     * Example: For a node defined as `<button @click=\"handleClick\">`, the event attribute would be `@click=\"handleClick\"`.\n     */\n    get events(): AreEventAttribute[] {\n        return this.scope.resolveFlatAll<AreEventAttribute>(AreEventAttribute)!;\n    }\n    /**\n     * The styles defined for the node, which can include inline styles or styles defined in a separate stylesheet that are applied to the node. These styles can be used to control the visual appearance of the node and can be defined using standard CSS syntax.\n     */\n    get styles(): AreStyle {\n        return this.scope.resolveFlat<AreStyle>(AreStyle)!;\n    }\n\n}"]}
+{"version":3,"sources":["../../../../src/lib/AreHTMLNode/AreHTMLNode.ts"],"names":["AreHTMLNode","AreNode","AreStaticAttribute","AreBindingAttribute","AreDirectiveAttribute","A_Context","AreEventAttribute","AreStyle","A_Frame"],"mappings":";;;;;;;;;;;;;;;;;;;AAiBaA,mBAAA,GAAN,0BAA0BC,WAAA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrC,IAAI,GAAA,GAAc;AACd,IAAA,OAAO,KAAK,KAAA,CAAM,MAAA;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,gBAAA,GAAyC;AACzC,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAmCC,sCAAkB,CAAA;AAAA,EAC3E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAA,GAAkC;AAClC,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAoCC,wCAAmB,CAAA;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAA,GAAsC;AAItC,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,KAAA,CAAM,cAAA,CAAsCC,4CAAqB,CAAA;AAOzF,IAAA,OAAO,UAAA,CAAW,OAAO,CAAA,CAAA,KAAK,CAAA,CAAE,SAAS,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM;AACtD,MAAA,MAAM,KAAA,GAAQC,kBAAA,CAAU,IAAA,CAAqC,CAAA,CAAE,SAAU,CAAA;AACzE,MAAA,MAAM,KAAA,GAAQA,kBAAA,CAAU,IAAA,CAAqC,CAAA,CAAE,SAAU,CAAA;AAEzE,MAAA,MAAM,SAAA,GAAY,MAAM,QAAA,IAAY,CAAA;AACpC,MAAA,MAAM,SAAA,GAAY,MAAM,QAAA,IAAY,CAAA;AAEpC,MAAA,OAAO,SAAA,GAAY,SAAA;AAAA,IACvB,CAAC,CAAA;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAA,GAA8B;AAC9B,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAkCC,oCAAiB,CAAA;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAIA,IAAI,MAAA,GAAmB;AACnB,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,WAAA,CAAsBC,yBAAQ,CAAA;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,UAAU,GAAA,EAAmB;AACzB,IAAA,MAAM,QAAA,GAAW,IAAA,CAAK,KAAA,CAAM,WAAA,CAAsBA,yBAAQ,CAAA;AAC1D,IAAA,IAAI,QAAA,EAAU;AACV,MAAA,QAAA,CAAS,MAAA,GAAS,GAAA;AAAA,IACtB,CAAA,MAAO;AACH,MAAA,IAAA,CAAK,KAAA,CAAM,SAAS,IAAIA,yBAAA,CAAS,KAAK,IAAA,CAAK,KAAA,CAAM,QAAA,EAAU,CAAC,CAAA;AAAA,IAChE;AAAA,EACJ;AAEJ;AAhFaP,mBAAA,GAAN,eAAA,CAAA;AAAA,EAJNQ,aAAQ,MAAA,CAAO;AAAA,IACZ,SAAA,EAAW,YAAA;AAAA,IACX,WAAA,EAAa;AAAA,GAChB;AAAA,CAAA,EACYR,mBAAA,CAAA","file":"AreHTMLNode.js","sourcesContent":["import { A_Context, } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\nimport { AreNode} from \"@adaas/are\";\nimport { AreBindingAttribute } from \"@adaas/are-html/attributes/AreBinding.attribute\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport { AreEventAttribute } from \"@adaas/are-html/attributes/AreEvent.attribute\";\nimport { AreStaticAttribute } from \"@adaas/are-html/attributes/AreStatic.attribute\";\nimport { AreStyle } from \"@adaas/are-html/style/AreStyle.context\";\nimport { AreDirective } from \"@adaas/are-html/directive/AreDirective.component\";\nimport { AreDirectiveMeta } from \"@adaas/are-html/directive/AreDirective.meta\";\n\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'AreHTMLNode represents a node in the HTML structure. It extends the base AreNode and includes properties and methods specific to HTML nodes, such as handling attributes, directives, events, and styles.'\n})\nexport class AreHTMLNode extends AreNode {\n    /**\n     * Actual node type. \n     * By default it's a tag name\n     */\n    get tag(): string {\n        return this.aseid.entity;\n    }\n    /**\n      * The static attributes defined for the node, which are typically used to represent static properties or characteristics of the node that do not change based on the context or state. These attributes are usually defined in the template and are not reactive.\n      * \n      * Example: For a node defined as `<div class=\"static-class\">`, the static attribute would be `class=\"static-class\"`.\n      */\n    get staticAttributes(): AreStaticAttribute[] {\n        return this.scope.resolveFlatAll<AreStaticAttribute>(AreStaticAttribute);\n    }\n    /**\n     * The binding attributes defined for the node, which are typically used to represent dynamic properties or characteristics of the node that can change based on the context or state. These attributes are usually defined in the template with a specific syntax (e.g., `:prop=\"value\"` or `v-bind:prop=\"value\"`) and are reactive, meaning that they will update automatically when the underlying data changes.\n     * \n     * Example: For a node defined as `<div :class=\"dynamicClass\">`, the binding attribute would be `:class=\"dynamicClass\"`.\n     */\n    get bindings(): AreBindingAttribute[] {\n        return this.scope.resolveFlatAll<AreBindingAttribute>(AreBindingAttribute);\n    }\n    /**\n     * The directive attributes defined for the node, which are typically used to represent special instructions or behaviors that should be applied to the node. These attributes are usually defined in the template with a specific syntax (e.g., `v-if=\"condition\"` or `v-for=\"item in list\"`) and are processed by the rendering engine to apply the corresponding logic or behavior to the node.\n     * \n     * Example: For a node defined as `<div v-if=\"isVisible\">`, the directive attribute would be `v-if=\"isVisible\"`.\n     */\n    get directives(): AreDirectiveAttribute[] {\n        /**\n         * 1. get all registered directives for the node\n         */\n        const directives = this.scope.resolveFlatAll<AreDirectiveAttribute>(AreDirectiveAttribute)!;\n        /**\n         * 2. Order them in the way that defined in the meta\n         * \n         *   Each meta has a prioprity of order that may impact the way how directives are compiled and rendered. For example, a directive with higher priority may need to be compiled before other directives to ensure that its logic is applied correctly before other directives are processed. By ordering the directives based on their defined priority in the meta, we can ensure that the compilation and rendering process follows the intended logic and behavior as defined by the directive implementations.\n         */\n\n        return directives.filter(d => d.component).sort((a, b) => {\n            const aMeta = A_Context.meta<AreDirectiveMeta, AreDirective>(a.component!);\n            const bMeta = A_Context.meta<AreDirectiveMeta, AreDirective>(b.component!);\n\n            const aPriority = aMeta.priority ?? 0;\n            const bPriority = bMeta.priority ?? 0;\n\n            return bPriority - aPriority;\n        });\n    }\n    /**\n     * The event attributes defined for the node, which are typically used to represent event listeners or handlers that should be attached to the node. These attributes are usually defined in the template with a specific syntax (e.g., `@click=\"handleClick\"` or `v-on:click=\"handleClick\"`) and are processed by the rendering engine to attach the corresponding event listeners to the node.\n     * \n     * Example: For a node defined as `<button @click=\"handleClick\">`, the event attribute would be `@click=\"handleClick\"`.\n     */\n    get events(): AreEventAttribute[] {\n        return this.scope.resolveFlatAll<AreEventAttribute>(AreEventAttribute)!;\n    }\n    /**\n     * The styles defined for the node, which can include inline styles or styles defined in a separate stylesheet that are applied to the node. These styles can be used to control the visual appearance of the node and can be defined using standard CSS syntax.\n     */\n    get styles(): AreStyle {\n        return this.scope.resolveFlat<AreStyle>(AreStyle)!;\n    }\n\n    /**\n     * Registers or updates the component-scoped CSS string for this node.\n     * Called by the @Are.Styles-decorated method on the associated component.\n     * A new AreStyle fragment is registered in scope on first call; subsequent\n     * calls update the existing fragment in-place.\n     */\n    setStyles(css: string): void {\n        const existing = this.scope.resolveFlat<AreStyle>(AreStyle);\n        if (existing) {\n            existing.styles = css;\n        } else {\n            this.scope.register(new AreStyle(css, this.aseid.toString()));\n        }\n    }\n\n}"]}

package/dist/node/lib/AreHTMLNode/AreHTMLNode.mjs

@@ -61,6 +61,20 @@ let AreHTMLNode = class extends AreNode {
   get styles() {
     return this.scope.resolveFlat(AreStyle);
   }
+  /**
+   * Registers or updates the component-scoped CSS string for this node.
+   * Called by the @Are.Styles-decorated method on the associated component.
+   * A new AreStyle fragment is registered in scope on first call; subsequent
+   * calls update the existing fragment in-place.
+   */
+  setStyles(css) {
+    const existing = this.scope.resolveFlat(AreStyle);
+    if (existing) {
+      existing.styles = css;
+    } else {
+      this.scope.register(new AreStyle(css, this.aseid.toString()));
+    }
+  }
 };
 AreHTMLNode = __decorateClass([
   A_Frame.Define({

package/dist/node/lib/AreHTMLNode/AreHTMLNode.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/AreHTMLNode/AreHTMLNode.ts"],"names":[],"mappings":";;;;;;;;;;AAiBO,IAAM,WAAA,GAAN,cAA0B,OAAA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrC,IAAI,GAAA,GAAc;AACd,IAAA,OAAO,KAAK,KAAA,CAAM,MAAA;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,gBAAA,GAAyC;AACzC,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAmC,kBAAkB,CAAA;AAAA,EAC3E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAA,GAAkC;AAClC,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAoC,mBAAmB,CAAA;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAA,GAAsC;AAItC,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,KAAA,CAAM,cAAA,CAAsC,qBAAqB,CAAA;AAOzF,IAAA,OAAO,UAAA,CAAW,OAAO,CAAA,CAAA,KAAK,CAAA,CAAE,SAAS,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM;AACtD,MAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,IAAA,CAAqC,CAAA,CAAE,SAAU,CAAA;AACzE,MAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,IAAA,CAAqC,CAAA,CAAE,SAAU,CAAA;AAEzE,MAAA,MAAM,SAAA,GAAY,MAAM,QAAA,IAAY,CAAA;AACpC,MAAA,MAAM,SAAA,GAAY,MAAM,QAAA,IAAY,CAAA;AAEpC,MAAA,OAAO,SAAA,GAAY,SAAA;AAAA,IACvB,CAAC,CAAA;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAA,GAA8B;AAC9B,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAkC,iBAAiB,CAAA;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAIA,IAAI,MAAA,GAAmB;AACnB,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,WAAA,CAAsB,QAAQ,CAAA;AAAA,EACpD;AAEJ;AAjEa,WAAA,GAAN,eAAA,CAAA;AAAA,EAJN,QAAQ,MAAA,CAAO;AAAA,IACZ,SAAA,EAAW,YAAA;AAAA,IACX,WAAA,EAAa;AAAA,GAChB;AAAA,CAAA,EACY,WAAA,CAAA","file":"AreHTMLNode.mjs","sourcesContent":["import { A_Context, } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\nimport { AreNode} from \"@adaas/are\";\nimport { AreBindingAttribute } from \"@adaas/are-html/attributes/AreBinding.attribute\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport { AreEventAttribute } from \"@adaas/are-html/attributes/AreEvent.attribute\";\nimport { AreStaticAttribute } from \"@adaas/are-html/attributes/AreStatic.attribute\";\nimport { AreStyle } from \"@adaas/are-html/style/AreStyle.context\";\nimport { AreDirective } from \"@adaas/are-html/directive/AreDirective.component\";\nimport { AreDirectiveMeta } from \"@adaas/are-html/directive/AreDirective.meta\";\n\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'AreHTMLNode represents a node in the HTML structure. It extends the base AreNode and includes properties and methods specific to HTML nodes, such as handling attributes, directives, events, and styles.'\n})\nexport class AreHTMLNode extends AreNode {\n    /**\n     * Actual node type. \n     * By default it's a tag name\n     */\n    get tag(): string {\n        return this.aseid.entity;\n    }\n    /**\n      * The static attributes defined for the node, which are typically used to represent static properties or characteristics of the node that do not change based on the context or state. These attributes are usually defined in the template and are not reactive.\n      * \n      * Example: For a node defined as `<div class=\"static-class\">`, the static attribute would be `class=\"static-class\"`.\n      */\n    get staticAttributes(): AreStaticAttribute[] {\n        return this.scope.resolveFlatAll<AreStaticAttribute>(AreStaticAttribute);\n    }\n    /**\n     * The binding attributes defined for the node, which are typically used to represent dynamic properties or characteristics of the node that can change based on the context or state. These attributes are usually defined in the template with a specific syntax (e.g., `:prop=\"value\"` or `v-bind:prop=\"value\"`) and are reactive, meaning that they will update automatically when the underlying data changes.\n     * \n     * Example: For a node defined as `<div :class=\"dynamicClass\">`, the binding attribute would be `:class=\"dynamicClass\"`.\n     */\n    get bindings(): AreBindingAttribute[] {\n        return this.scope.resolveFlatAll<AreBindingAttribute>(AreBindingAttribute);\n    }\n    /**\n     * The directive attributes defined for the node, which are typically used to represent special instructions or behaviors that should be applied to the node. These attributes are usually defined in the template with a specific syntax (e.g., `v-if=\"condition\"` or `v-for=\"item in list\"`) and are processed by the rendering engine to apply the corresponding logic or behavior to the node.\n     * \n     * Example: For a node defined as `<div v-if=\"isVisible\">`, the directive attribute would be `v-if=\"isVisible\"`.\n     */\n    get directives(): AreDirectiveAttribute[] {\n        /**\n         * 1. get all registered directives for the node\n         */\n        const directives = this.scope.resolveFlatAll<AreDirectiveAttribute>(AreDirectiveAttribute)!;\n        /**\n         * 2. Order them in the way that defined in the meta\n         * \n         *   Each meta has a prioprity of order that may impact the way how directives are compiled and rendered. For example, a directive with higher priority may need to be compiled before other directives to ensure that its logic is applied correctly before other directives are processed. By ordering the directives based on their defined priority in the meta, we can ensure that the compilation and rendering process follows the intended logic and behavior as defined by the directive implementations.\n         */\n\n        return directives.filter(d => d.component).sort((a, b) => {\n            const aMeta = A_Context.meta<AreDirectiveMeta, AreDirective>(a.component!);\n            const bMeta = A_Context.meta<AreDirectiveMeta, AreDirective>(b.component!);\n\n            const aPriority = aMeta.priority ?? 0;\n            const bPriority = bMeta.priority ?? 0;\n\n            return bPriority - aPriority;\n        });\n    }\n    /**\n     * The event attributes defined for the node, which are typically used to represent event listeners or handlers that should be attached to the node. These attributes are usually defined in the template with a specific syntax (e.g., `@click=\"handleClick\"` or `v-on:click=\"handleClick\"`) and are processed by the rendering engine to attach the corresponding event listeners to the node.\n     * \n     * Example: For a node defined as `<button @click=\"handleClick\">`, the event attribute would be `@click=\"handleClick\"`.\n     */\n    get events(): AreEventAttribute[] {\n        return this.scope.resolveFlatAll<AreEventAttribute>(AreEventAttribute)!;\n    }\n    /**\n     * The styles defined for the node, which can include inline styles or styles defined in a separate stylesheet that are applied to the node. These styles can be used to control the visual appearance of the node and can be defined using standard CSS syntax.\n     */\n    get styles(): AreStyle {\n        return this.scope.resolveFlat<AreStyle>(AreStyle)!;\n    }\n\n}"]}
+{"version":3,"sources":["../../../../src/lib/AreHTMLNode/AreHTMLNode.ts"],"names":[],"mappings":";;;;;;;;;;AAiBO,IAAM,WAAA,GAAN,cAA0B,OAAA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrC,IAAI,GAAA,GAAc;AACd,IAAA,OAAO,KAAK,KAAA,CAAM,MAAA;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,gBAAA,GAAyC;AACzC,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAmC,kBAAkB,CAAA;AAAA,EAC3E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,QAAA,GAAkC;AAClC,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAoC,mBAAmB,CAAA;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,UAAA,GAAsC;AAItC,IAAA,MAAM,UAAA,GAAa,IAAA,CAAK,KAAA,CAAM,cAAA,CAAsC,qBAAqB,CAAA;AAOzF,IAAA,OAAO,UAAA,CAAW,OAAO,CAAA,CAAA,KAAK,CAAA,CAAE,SAAS,CAAA,CAAE,IAAA,CAAK,CAAC,CAAA,EAAG,CAAA,KAAM;AACtD,MAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,IAAA,CAAqC,CAAA,CAAE,SAAU,CAAA;AACzE,MAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,IAAA,CAAqC,CAAA,CAAE,SAAU,CAAA;AAEzE,MAAA,MAAM,SAAA,GAAY,MAAM,QAAA,IAAY,CAAA;AACpC,MAAA,MAAM,SAAA,GAAY,MAAM,QAAA,IAAY,CAAA;AAEpC,MAAA,OAAO,SAAA,GAAY,SAAA;AAAA,IACvB,CAAC,CAAA;AAAA,EACL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,MAAA,GAA8B;AAC9B,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,cAAA,CAAkC,iBAAiB,CAAA;AAAA,EACzE;AAAA;AAAA;AAAA;AAAA,EAIA,IAAI,MAAA,GAAmB;AACnB,IAAA,OAAO,IAAA,CAAK,KAAA,CAAM,WAAA,CAAsB,QAAQ,CAAA;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,UAAU,GAAA,EAAmB;AACzB,IAAA,MAAM,QAAA,GAAW,IAAA,CAAK,KAAA,CAAM,WAAA,CAAsB,QAAQ,CAAA;AAC1D,IAAA,IAAI,QAAA,EAAU;AACV,MAAA,QAAA,CAAS,MAAA,GAAS,GAAA;AAAA,IACtB,CAAA,MAAO;AACH,MAAA,IAAA,CAAK,KAAA,CAAM,SAAS,IAAI,QAAA,CAAS,KAAK,IAAA,CAAK,KAAA,CAAM,QAAA,EAAU,CAAC,CAAA;AAAA,IAChE;AAAA,EACJ;AAEJ;AAhFa,WAAA,GAAN,eAAA,CAAA;AAAA,EAJN,QAAQ,MAAA,CAAO;AAAA,IACZ,SAAA,EAAW,YAAA;AAAA,IACX,WAAA,EAAa;AAAA,GAChB;AAAA,CAAA,EACY,WAAA,CAAA","file":"AreHTMLNode.mjs","sourcesContent":["import { A_Context, } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\nimport { AreNode} from \"@adaas/are\";\nimport { AreBindingAttribute } from \"@adaas/are-html/attributes/AreBinding.attribute\";\nimport { AreDirectiveAttribute } from \"@adaas/are-html/attributes/AreDirective.attribute\";\nimport { AreEventAttribute } from \"@adaas/are-html/attributes/AreEvent.attribute\";\nimport { AreStaticAttribute } from \"@adaas/are-html/attributes/AreStatic.attribute\";\nimport { AreStyle } from \"@adaas/are-html/style/AreStyle.context\";\nimport { AreDirective } from \"@adaas/are-html/directive/AreDirective.component\";\nimport { AreDirectiveMeta } from \"@adaas/are-html/directive/AreDirective.meta\";\n\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'AreHTMLNode represents a node in the HTML structure. It extends the base AreNode and includes properties and methods specific to HTML nodes, such as handling attributes, directives, events, and styles.'\n})\nexport class AreHTMLNode extends AreNode {\n    /**\n     * Actual node type. \n     * By default it's a tag name\n     */\n    get tag(): string {\n        return this.aseid.entity;\n    }\n    /**\n      * The static attributes defined for the node, which are typically used to represent static properties or characteristics of the node that do not change based on the context or state. These attributes are usually defined in the template and are not reactive.\n      * \n      * Example: For a node defined as `<div class=\"static-class\">`, the static attribute would be `class=\"static-class\"`.\n      */\n    get staticAttributes(): AreStaticAttribute[] {\n        return this.scope.resolveFlatAll<AreStaticAttribute>(AreStaticAttribute);\n    }\n    /**\n     * The binding attributes defined for the node, which are typically used to represent dynamic properties or characteristics of the node that can change based on the context or state. These attributes are usually defined in the template with a specific syntax (e.g., `:prop=\"value\"` or `v-bind:prop=\"value\"`) and are reactive, meaning that they will update automatically when the underlying data changes.\n     * \n     * Example: For a node defined as `<div :class=\"dynamicClass\">`, the binding attribute would be `:class=\"dynamicClass\"`.\n     */\n    get bindings(): AreBindingAttribute[] {\n        return this.scope.resolveFlatAll<AreBindingAttribute>(AreBindingAttribute);\n    }\n    /**\n     * The directive attributes defined for the node, which are typically used to represent special instructions or behaviors that should be applied to the node. These attributes are usually defined in the template with a specific syntax (e.g., `v-if=\"condition\"` or `v-for=\"item in list\"`) and are processed by the rendering engine to apply the corresponding logic or behavior to the node.\n     * \n     * Example: For a node defined as `<div v-if=\"isVisible\">`, the directive attribute would be `v-if=\"isVisible\"`.\n     */\n    get directives(): AreDirectiveAttribute[] {\n        /**\n         * 1. get all registered directives for the node\n         */\n        const directives = this.scope.resolveFlatAll<AreDirectiveAttribute>(AreDirectiveAttribute)!;\n        /**\n         * 2. Order them in the way that defined in the meta\n         * \n         *   Each meta has a prioprity of order that may impact the way how directives are compiled and rendered. For example, a directive with higher priority may need to be compiled before other directives to ensure that its logic is applied correctly before other directives are processed. By ordering the directives based on their defined priority in the meta, we can ensure that the compilation and rendering process follows the intended logic and behavior as defined by the directive implementations.\n         */\n\n        return directives.filter(d => d.component).sort((a, b) => {\n            const aMeta = A_Context.meta<AreDirectiveMeta, AreDirective>(a.component!);\n            const bMeta = A_Context.meta<AreDirectiveMeta, AreDirective>(b.component!);\n\n            const aPriority = aMeta.priority ?? 0;\n            const bPriority = bMeta.priority ?? 0;\n\n            return bPriority - aPriority;\n        });\n    }\n    /**\n     * The event attributes defined for the node, which are typically used to represent event listeners or handlers that should be attached to the node. These attributes are usually defined in the template with a specific syntax (e.g., `@click=\"handleClick\"` or `v-on:click=\"handleClick\"`) and are processed by the rendering engine to attach the corresponding event listeners to the node.\n     * \n     * Example: For a node defined as `<button @click=\"handleClick\">`, the event attribute would be `@click=\"handleClick\"`.\n     */\n    get events(): AreEventAttribute[] {\n        return this.scope.resolveFlatAll<AreEventAttribute>(AreEventAttribute)!;\n    }\n    /**\n     * The styles defined for the node, which can include inline styles or styles defined in a separate stylesheet that are applied to the node. These styles can be used to control the visual appearance of the node and can be defined using standard CSS syntax.\n     */\n    get styles(): AreStyle {\n        return this.scope.resolveFlat<AreStyle>(AreStyle)!;\n    }\n\n    /**\n     * Registers or updates the component-scoped CSS string for this node.\n     * Called by the @Are.Styles-decorated method on the associated component.\n     * A new AreStyle fragment is registered in scope on first call; subsequent\n     * calls update the existing fragment in-place.\n     */\n    setStyles(css: string): void {\n        const existing = this.scope.resolveFlat<AreStyle>(AreStyle);\n        if (existing) {\n            existing.styles = css;\n        } else {\n            this.scope.register(new AreStyle(css, this.aseid.toString()));\n        }\n    }\n\n}"]}

package/dist/node/lib/AreRoot/AreRoot.component.js

@@ -5,6 +5,7 @@ var core = require('@adaas/a-frame/core');
 var aLogger = require('@adaas/a-utils/a-logger');
 var aSignal = require('@adaas/a-utils/a-signal');
 var are = require('@adaas/are');
+var AreRoute_signal = require('@adaas/are-html/signals/AreRoute.signal');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,9 +31,16 @@ exports.AreRoot = class AreRoot extends are.Are {
   async template(root, logger, signalsContext) {
     const rootId = root.id;
     if (signalsContext && !signalsContext.hasRoot(rootId)) {
+      if (!root.content?.trim()) {
+        const defaultMatch = root.markup?.match(/\bdefault=["']([^"']*)["']/);
+        const defaultComponent = defaultMatch?.[1];
+        if (defaultComponent) {
+          root.setContent(`<${defaultComponent}></${defaultComponent}>`);
+        }
+      }
       return;
     }
-    const currentRoute = are.AreRoute.default();
+    const currentRoute = AreRoute_signal.AreRoute.default();
     let componentName;
     if (currentRoute) {
       const initialVector = new aSignal.A_SignalVector([currentRoute]);
@@ -45,12 +53,23 @@ exports.AreRoot = class AreRoot extends are.Are {
         componentName = aConcept.A_FormatterHelper.toKebabCase(renderTarget.name);
       }
     }
+    if (!componentName) {
+      if (root.content?.trim()) {
+        return;
+      }
+    }
+    if (!componentName) {
+      const defaultComp = signalsContext?.getDefault(rootId);
+      if (defaultComp?.name) {
+        componentName = aConcept.A_FormatterHelper.toKebabCase(defaultComp.name);
+      }
+    }
     if (!componentName) {
       const defaultMatch = root.markup?.match(/\bdefault=["']([^"']*)["']/);
       componentName = defaultMatch?.[1];
     }
     if (!componentName) {
-      logger.warning('AreRoot: No component found for initial render. Please ensure a route condition or "default" attribute is set.');
+      logger.warning('AreRoot: No component found for initial render. Provide body content, a route condition, or a "default" attribute.');
       return;
     }
     root.setContent(`<${componentName}></${componentName}>`);
@@ -67,12 +86,16 @@ exports.AreRoot = class AreRoot extends are.Are {
     }
     const componentName = renderTarget?.name ? aConcept.A_FormatterHelper.toKebabCase(renderTarget.name) : store.get("default");
     if (!componentName) {
-      logger.warning("No component found for rendering in AreRoot. Please ensure that the signal vector matches at least one component or that a default component name is provided in the store.");
+      return;
+    }
+    const currentChild = root.children[0];
+    if (currentChild?.type === componentName) {
       return;
     }
     root.setContent(`<${componentName}></${componentName}>`);
     for (let i = 0; i < root.children.length; i++) {
       const child = root.children[i];
+      signalsContext?.unsubscribe(child);
       child.unmount();
       child.destroy();
       root.removeChild(child);

package/dist/node/lib/AreRoot/AreRoot.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/AreRoot/AreRoot.component.ts"],"names":["AreRoot","Are","AreRoute","A_SignalVector","A_Context","AreSignals","A_FormatterHelper","A_Caller","A_Logger","AreSignalsContext","AreStore","A_Frame"],"mappings":";;;;;;;;;;;;;;;;;;;AAWaA,eAAA,GAAN,sBAAsBC,OAAA,CAAI;AAAA,EAA1B,WAAA,GAAA;AAAA,IAAA,KAAA,CAAA,GAAA,SAAA,CAAA;AAEH,IAAA,IAAA,CAAA,KAAA,GAA2C;AAAA,MACvC,OAAA,EAAS;AAAA,QACL,IAAA,EAAM,QAAA;AAAA,QACN,OAAA,EAAS;AAAA;AACb,KACJ;AAAA,EAAA;AAAA,EAIA,MAAM,QAAA,CACkB,IAAA,EACA,MAAA,EACS,cAAA,EAC/B;AAEE,IAAA,MAAM,SAAS,IAAA,CAAK,EAAA;AAGpB,IAAA,IAAI,cAAA,IAAkB,CAAC,cAAA,CAAe,OAAA,CAAQ,MAAM,CAAA,EAAG;AACnD,MAAA;AAAA,IACJ;AAEA,IAAA,MAAM,YAAA,GAAeC,aAAS,OAAA,EAAQ;AAEtC,IAAA,IAAI,aAAA;AAEJ,IAAA,IAAI,YAAA,EAAc;AACd,MAAA,MAAM,aAAA,GAAgB,IAAIC,sBAAA,CAAe,CAAC,YAAY,CAAC,CAAA;AAGvD,MAAA,IAAI,YAAA,GAAe,cAAA,EAAgB,qBAAA,CAAsB,MAAA,EAAQ,aAAa,CAAA;AAG9E,MAAA,IAAI,CAAC,YAAA,EAAc;AACf,QAAA,MAAM,WAAA,GAAcC,kBAAA,CAAU,IAAA,CAAqBC,cAAU,CAAA;AAC7D,QAAA,YAAA,GAAe,WAAA,EAAa,sBAAsB,aAAa,CAAA;AAAA,MACnE;AAEA,MAAA,IAAI,cAAc,IAAA,EAAM;AACpB,QAAA,aAAA,GAAgBC,0BAAA,CAAkB,WAAA,CAAY,YAAA,CAAa,IAAI,CAAA;AAAA,MACnE;AAAA,IACJ;AAKA,IAAA,IAAI,CAAC,aAAA,EAAe;AAChB,MAAA,MAAM,YAAA,GAAe,IAAA,CAAK,MAAA,EAAQ,KAAA,CAAM,4BAA4B,CAAA;AACpE,MAAA,aAAA,GAAgB,eAAe,CAAC,CAAA;AAAA,IACpC;AAEA,IAAA,IAAI,CAAC,aAAA,EAAe;AAChB,MAAA,MAAA,CAAO,QAAQ,gHAAgH,CAAA;AAC/H,MAAA;AAAA,IACJ;AAEA,IAAA,IAAA,CAAK,UAAA,CAAW,CAAA,CAAA,EAAI,aAAa,CAAA,GAAA,EAAM,aAAa,CAAA,CAAA,CAAG,CAAA;AAAA,EAC3D;AAAA,EAIA,MAAM,QAAA,CACkB,IAAA,EACM,MAAA,EACN,KAAA,EACA,QACS,cAAA,EAC/B;AACE,IAAA,MAAM,SAAS,IAAA,CAAK,EAAA;AAEpB,IAAA,IAAI,cAAA,IAAkB,CAAC,cAAA,CAAe,OAAA,CAAQ,MAAM,CAAA,EAAG;AACnD,MAAA;AAAA,IACJ;AAGA,IAAA,IAAI,YAAA,GAAe,cAAA,EAAgB,qBAAA,CAAsB,MAAA,EAAQ,MAAM,CAAA;AAGvE,IAAA,IAAI,CAAC,YAAA,EAAc;AACf,MAAA,MAAM,WAAA,GAAcF,kBAAA,CAAU,IAAA,CAAqBC,cAAU,CAAA;AAC7D,MAAA,YAAA,GAAe,WAAA,EAAa,sBAAsB,MAAM,CAAA;AAAA,IAC5D;AAEA,IAAA,MAAM,aAAA,GAAgB,YAAA,EAAc,IAAA,GAC9BC,0BAAA,CAAkB,WAAA,CAAY,aAAa,IAAI,CAAA,GAC/C,KAAA,CAAM,GAAA,CAAI,SAAS,CAAA;AAEzB,IAAA,IAAI,CAAC,aAAA,EAAe;AAChB,MAAA,MAAA,CAAO,QAAQ,6KAA6K,CAAA;AAC5L,MAAA;AAAA,IACJ;AAEA,IAAA,IAAA,CAAK,UAAA,CAAW,CAAA,CAAA,EAAI,aAAa,CAAA,GAAA,EAAM,aAAa,CAAA,CAAA,CAAG,CAAA;AAEvD,IAAA,KAAA,IAAS,IAAI,CAAA,EAAG,CAAA,GAAI,IAAA,CAAK,QAAA,CAAS,QAAQ,CAAA,EAAA,EAAK;AAC3C,MAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,QAAA,CAAS,CAAC,CAAA;AAC7B,MAAA,KAAA,CAAM,OAAA,EAAQ;AACd,MAAA,KAAA,CAAM,OAAA,EAAQ;AACd,MAAA,IAAA,CAAK,YAAY,KAAK,CAAA;AAAA,IAC1B;AAGA,IAAA,IAAA,CAAK,QAAA,EAAS;AAEd,IAAA,KAAA,IAAS,IAAI,CAAA,EAAG,CAAA,GAAI,IAAA,CAAK,QAAA,CAAS,QAAQ,CAAA,EAAA,EAAK;AAC3C,MAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,QAAA,CAAS,CAAC,CAAA;AAC7B,MAAA,KAAA,CAAM,IAAA,EAAK;AAEX,MAAA,MAAM,GAAA,GAAM,MAAM,IAAA,EAAK;AACvB,MAAA,IAAI,eAAe,OAAA,EAAS;AACxB,QAAA,MAAM,GAAA;AAAA,MACV;AACA,MAAA,KAAA,CAAM,SAAA,EAAU;AAEhB,MAAA,KAAA,CAAM,OAAA,EAAQ;AACd,MAAA,KAAA,CAAM,KAAA,EAAM;AAAA,IAChB;AAAA,EACJ;AACJ;AA7GU,eAAA,CAAA;AAAA,EADLL,OAAA,CAAI,QAAA;AAAA,EAEA,qCAASM,iBAAQ,CAAA,CAAA;AAAA,EACjB,qCAASC,gBAAQ,CAAA,CAAA;AAAA,EACjB,qCAASC,qBAAiB,CAAA;AAAA,CAAA,EAdtBT,eAAA,CAWH,SAAA,EAAA,UAAA,EAAA,CAAA,CAAA;AAoDA,eAAA,CAAA;AAAA,EADLC,OAAA,CAAI,MAAA;AAAA,EAEA,qCAASM,iBAAQ,CAAA,CAAA;AAAA,EACjB,qCAASJ,sBAAc,CAAA,CAAA;AAAA,EACvB,qCAASO,YAAQ,CAAA,CAAA;AAAA,EACjB,qCAASF,gBAAQ,CAAA,CAAA;AAAA,EACjB,qCAASC,qBAAiB,CAAA;AAAA,CAAA,EApEtBT,eAAA,CA+DH,SAAA,EAAA,UAAA,EAAA,CAAA,CAAA;AA/DGA,eAAA,GAAN,eAAA,CAAA;AAAA,EAJNW,aAAQ,MAAA,CAAO;AAAA,IACZ,SAAA,EAAW,YAAA;AAAA,IACX,WAAA,EAAa;AAAA,GAChB;AAAA,CAAA,EACYX,eAAA,CAAA","file":"AreRoot.component.js","sourcesContent":["import { A_Caller, A_Context, A_FormatterHelper, A_Inject, } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { A_SignalVector } from \"@adaas/a-utils/a-signal\";\nimport { Are, ArePropDefinition, AreStore, AreNode, AreSignals, AreSignalsMeta, AreSignalsContext, AreRoute } from \"@adaas/are\";\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'The AreRoot component serves as the foundational entry point for the A-Concept Rendering Engine (ARE). It is responsible for initializing the rendering process, managing the root node of the component tree, and handling signal-based rendering logic. The AreRoot component processes incoming signals to determine which child components to render, allowing for dynamic and responsive UI updates based on application state and user interactions.'\n})\nexport class AreRoot extends Are {\n\n    props: Record<string, ArePropDefinition> = {\n        default: {\n            type: 'string',\n            default: '',\n        }\n    }\n\n\n    @Are.Template\n    async template(\n        @A_Inject(A_Caller) root: AreNode,\n        @A_Inject(A_Logger) logger: A_Logger,\n        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n    ) {\n\n        const rootId = root.id;\n\n        // No routing config for this root — leave the existing template content intact\n        if (signalsContext && !signalsContext.hasRoot(rootId)) {\n            return;\n        }\n\n        const currentRoute = AreRoute.default();\n\n        let componentName: string | undefined;\n\n        if (currentRoute) {\n            const initialVector = new A_SignalVector([currentRoute]);\n\n            // 1. Lookup via AreSignalsContext (per root-id conditions)\n            let renderTarget = signalsContext?.findComponentByVector(rootId, initialVector);\n\n            // 2. Fall back to global AreSignalsMeta\n            if (!renderTarget) {\n                const signalsMeta = A_Context.meta<AreSignalsMeta>(AreSignals);\n                renderTarget = signalsMeta?.findComponentByVector(initialVector);\n            }\n\n            if (renderTarget?.name) {\n                componentName = A_FormatterHelper.toKebabCase(renderTarget.name);\n            }\n        }\n\n        // 3. Fall back to the 'default' attribute on the node directly.\n        //    Note: root.attributes is NOT populated at this stage because tokenize()\n        //    runs after template() in the lifecycle. Read from raw markup instead.\n        if (!componentName) {\n            const defaultMatch = root.markup?.match(/\\bdefault=[\"']([^\"']*)[\"']/);\n            componentName = defaultMatch?.[1];\n        }\n\n        if (!componentName) {\n            logger.warning('AreRoot: No component found for initial render. Please ensure a route condition or \"default\" attribute is set.');\n            return;\n        }\n\n        root.setContent(`<${componentName}></${componentName}>`);\n    }\n\n\n    @Are.Signal\n    async onSignal(\n        @A_Inject(A_Caller) root: AreNode,\n        @A_Inject(A_SignalVector) vector: A_SignalVector,\n        @A_Inject(AreStore) store: AreStore<{ default: string }>,\n        @A_Inject(A_Logger) logger: A_Logger,\n        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n    ) {\n        const rootId = root.id;\n        // No routing config for this root — signals do not affect its content\n        if (signalsContext && !signalsContext.hasRoot(rootId)) {\n            return;\n        }\n\n        // 1. Try root-specific lookup via AreSignalsContext (keyed by the are-root's id attribute)\n        let renderTarget = signalsContext?.findComponentByVector(rootId, vector);\n\n        // 2. Fall back to global AreSignalsMeta lookup\n        if (!renderTarget) {\n            const signalsMeta = A_Context.meta<AreSignalsMeta>(AreSignals);\n            renderTarget = signalsMeta?.findComponentByVector(vector);\n        }\n\n        const componentName = renderTarget?.name\n            ? A_FormatterHelper.toKebabCase(renderTarget.name)\n            : store.get('default');\n\n        if (!componentName) {\n            logger.warning('No component found for rendering in AreRoot. Please ensure that the signal vector matches at least one component or that a default component name is provided in the store.');\n            return;\n        }\n\n        root.setContent(`<${componentName}></${componentName}>`);\n\n        for (let i = 0; i < root.children.length; i++) {\n            const child = root.children[i];\n            child.unmount();\n            child.destroy();\n            root.removeChild(child);\n        }\n\n\n        root.tokenize();\n\n        for (let i = 0; i < root.children.length; i++) {\n            const child = root.children[i];\n            child.init();\n\n            const res = child.load();\n            if (res instanceof Promise) {\n                await res;\n            }\n            child.transform();\n\n            child.compile();\n            child.mount();\n        }\n    }\n}\n"]}
+{"version":3,"sources":["../../../../src/lib/AreRoot/AreRoot.component.ts"],"names":["AreRoot","Are","AreRoute","A_SignalVector","A_Context","AreSignals","A_FormatterHelper","A_Caller","A_Logger","AreSignalsContext","AreStore","A_Frame"],"mappings":"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","file":"AreRoot.component.js","sourcesContent":["import { A_Caller, A_Context, A_FormatterHelper, A_Inject, } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { A_SignalVector } from \"@adaas/a-utils/a-signal\";\nimport { Are, ArePropDefinition, AreStore, AreNode, AreSignals, AreSignalsMeta, AreSignalsContext } from \"@adaas/are\";\nimport { AreRoute } from \"@adaas/are-html/signals/AreRoute.signal\";\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'The AreRoot component serves as the foundational entry point for the A-Concept Rendering Engine (ARE). It is responsible for initializing the rendering process, managing the root node of the component tree, and handling signal-based rendering logic. The AreRoot component processes incoming signals to determine which child components to render, allowing for dynamic and responsive UI updates based on application state and user interactions.'\n})\nexport class AreRoot extends Are {\n\n    props: Record<string, ArePropDefinition> = {\n        default: {\n            type: 'string',\n            default: '',\n        }\n    }\n\n\n    @Are.Template\n    async template(\n        @A_Inject(A_Caller) root: AreNode,\n        @A_Inject(A_Logger) logger: A_Logger,\n        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n    ) {\n\n        const rootId = root.id;\n\n        // No routing config for this root — but still honour body content or\n        // a 'default' attribute if one is present on the markup.\n        if (signalsContext && !signalsContext.hasRoot(rootId)) {\n            if (!root.content?.trim()) {\n                // Fallback: legacy default= attribute\n                const defaultMatch = root.markup?.match(/\\bdefault=[\"']([^\"']*)[\"']/);\n                const defaultComponent = defaultMatch?.[1];\n                if (defaultComponent) {\n                    root.setContent(`<${defaultComponent}></${defaultComponent}>`);\n                }\n            }\n            // Body content (or none) — tokenizer picks it up without intervention\n            return;\n        }\n\n        const currentRoute = AreRoute.default();\n\n        let componentName: string | undefined;\n\n        if (currentRoute) {\n            const initialVector = new A_SignalVector([currentRoute]);\n\n            // 1. Lookup via AreSignalsContext (per root-id conditions)\n            let renderTarget = signalsContext?.findComponentByVector(rootId, initialVector);\n\n            // 2. Fall back to global AreSignalsMeta\n            if (!renderTarget) {\n                const signalsMeta = A_Context.meta<AreSignalsMeta>(AreSignals);\n                renderTarget = signalsMeta?.findComponentByVector(initialVector);\n            }\n\n            if (renderTarget?.name) {\n                componentName = A_FormatterHelper.toKebabCase(renderTarget.name);\n            }\n        }\n\n        // 3. Fall back to body content (the nodes already placed inside the\n        //    <are-root> tag act as the default).  No setContent() call needed —\n        //    the tokenizer will process root.content as-is.\n        if (!componentName) {\n            if (root.content?.trim()) {\n                return;\n            }\n        }\n        // 3.5. Fall back to AreSignalsContext default component for this root.\n        if (!componentName) {\n            const defaultComp = signalsContext?.getDefault(rootId);\n            if (defaultComp?.name) {\n                componentName = A_FormatterHelper.toKebabCase(defaultComp.name);\n            }\n        }\n        // 4. Last resort: legacy default= attribute on the markup.\n        if (!componentName) {\n            const defaultMatch = root.markup?.match(/\\bdefault=[\"']([^\"']*)[\"']/);\n            componentName = defaultMatch?.[1];\n        }\n\n        if (!componentName) {\n            logger.warning('AreRoot: No component found for initial render. Provide body content, a route condition, or a \"default\" attribute.');\n            return;\n        }\n\n        root.setContent(`<${componentName}></${componentName}>`);\n    }\n\n\n    @Are.Signal\n    async onSignal(\n        @A_Inject(A_Caller) root: AreNode,\n        @A_Inject(A_SignalVector) vector: A_SignalVector,\n        @A_Inject(AreStore) store: AreStore<{ default: string }>,\n        @A_Inject(A_Logger) logger: A_Logger,\n        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n    ) {\n        const rootId = root.id;\n\n        // No routing config for this root — signals do not affect its content\n        if (signalsContext && !signalsContext.hasRoot(rootId)) {\n            return;\n        }\n\n        // 1. Try root-specific lookup via AreSignalsContext (keyed by the are-root's id attribute)\n        let renderTarget = signalsContext?.findComponentByVector(rootId, vector);\n\n        // 2. Fall back to global AreSignalsMeta lookup\n        if (!renderTarget) {\n            const signalsMeta = A_Context.meta<AreSignalsMeta>(AreSignals);\n            renderTarget = signalsMeta?.findComponentByVector(vector);\n        }\n\n        const componentName = renderTarget?.name\n            ? A_FormatterHelper.toKebabCase(renderTarget.name)\n            : store.get('default');\n\n        // No matching condition for this signal vector (e.g. AreInit before any route).\n        // Keep the current outlet content and do nothing.\n        if (!componentName) {\n            return;\n        }\n\n        // Guard: if the outlet already shows the same component, do nothing.\n        // Prevents infinite remount loops when a non-routing signal carries a\n        // stale routing signal in the accumulated A_SignalState vector.\n        // node.type is the kebab-case tag name — the most direct and reliable\n        // identifier (no constructor-name resolution, no proxy wrapping issues).\n        const currentChild = root.children[0] as AreNode | undefined;\n        if (currentChild?.type === componentName) {\n            return;\n        }\n\n        root.setContent(`<${componentName}></${componentName}>`);\n\n        // Unsubscribe old children BEFORE destroying them.\n        // Without this, AreSignals.handleSignalVector keeps iterating stale\n        // (scope-less) nodes on every subsequent signal and throws an error.\n        for (let i = 0; i < root.children.length; i++) {\n            const child = root.children[i];\n            signalsContext?.unsubscribe(child);\n            child.unmount();\n            child.destroy();\n            root.removeChild(child);\n        }\n\n\n        root.tokenize();\n\n        for (let i = 0; i < root.children.length; i++) {\n            const child = root.children[i];\n            child.init();\n\n            const res = child.load();\n            if (res instanceof Promise) {\n                await res;\n            }\n            child.transform();\n\n            child.compile();\n            child.mount();\n        }\n    }\n}\n"]}

package/dist/node/lib/AreRoot/AreRoot.component.mjs

@@ -3,7 +3,8 @@ import { A_Inject, A_Caller, A_Context, A_FormatterHelper } from '@adaas/a-conce
 import { A_Frame } from '@adaas/a-frame/core';
 import { A_Logger } from '@adaas/a-utils/a-logger';
 import { A_SignalVector } from '@adaas/a-utils/a-signal';
-import { Are, AreSignalsContext, AreStore, AreRoute, AreSignals } from '@adaas/are';
+import { Are, AreSignalsContext, AreStore, AreSignals } from '@adaas/are';
+import { AreRoute } from '@adaas/are-html/signals/AreRoute.signal';
 
 let AreRoot = class extends Are {
   constructor() {
@@ -18,6 +19,13 @@ let AreRoot = class extends Are {
   async template(root, logger, signalsContext) {
     const rootId = root.id;
     if (signalsContext && !signalsContext.hasRoot(rootId)) {
+      if (!root.content?.trim()) {
+        const defaultMatch = root.markup?.match(/\bdefault=["']([^"']*)["']/);
+        const defaultComponent = defaultMatch?.[1];
+        if (defaultComponent) {
+          root.setContent(`<${defaultComponent}></${defaultComponent}>`);
+        }
+      }
       return;
     }
     const currentRoute = AreRoute.default();
@@ -33,12 +41,23 @@ let AreRoot = class extends Are {
         componentName = A_FormatterHelper.toKebabCase(renderTarget.name);
       }
     }
+    if (!componentName) {
+      if (root.content?.trim()) {
+        return;
+      }
+    }
+    if (!componentName) {
+      const defaultComp = signalsContext?.getDefault(rootId);
+      if (defaultComp?.name) {
+        componentName = A_FormatterHelper.toKebabCase(defaultComp.name);
+      }
+    }
     if (!componentName) {
       const defaultMatch = root.markup?.match(/\bdefault=["']([^"']*)["']/);
       componentName = defaultMatch?.[1];
     }
     if (!componentName) {
-      logger.warning('AreRoot: No component found for initial render. Please ensure a route condition or "default" attribute is set.');
+      logger.warning('AreRoot: No component found for initial render. Provide body content, a route condition, or a "default" attribute.');
       return;
     }
     root.setContent(`<${componentName}></${componentName}>`);
@@ -55,12 +74,16 @@ let AreRoot = class extends Are {
     }
     const componentName = renderTarget?.name ? A_FormatterHelper.toKebabCase(renderTarget.name) : store.get("default");
     if (!componentName) {
-      logger.warning("No component found for rendering in AreRoot. Please ensure that the signal vector matches at least one component or that a default component name is provided in the store.");
+      return;
+    }
+    const currentChild = root.children[0];
+    if (currentChild?.type === componentName) {
       return;
     }
     root.setContent(`<${componentName}></${componentName}>`);
     for (let i = 0; i < root.children.length; i++) {
       const child = root.children[i];
+      signalsContext?.unsubscribe(child);
       child.unmount();
       child.destroy();
       root.removeChild(child);

package/dist/node/lib/AreRoot/AreRoot.component.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/AreRoot/AreRoot.component.ts"],"names":[],"mappings":"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","file":"AreRoot.component.mjs","sourcesContent":["import { A_Caller, A_Context, A_FormatterHelper, A_Inject, } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { A_SignalVector } from \"@adaas/a-utils/a-signal\";\nimport { Are, ArePropDefinition, AreStore, AreNode, AreSignals, AreSignalsMeta, AreSignalsContext, AreRoute } from \"@adaas/are\";\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'The AreRoot component serves as the foundational entry point for the A-Concept Rendering Engine (ARE). It is responsible for initializing the rendering process, managing the root node of the component tree, and handling signal-based rendering logic. The AreRoot component processes incoming signals to determine which child components to render, allowing for dynamic and responsive UI updates based on application state and user interactions.'\n})\nexport class AreRoot extends Are {\n\n    props: Record<string, ArePropDefinition> = {\n        default: {\n            type: 'string',\n            default: '',\n        }\n    }\n\n\n    @Are.Template\n    async template(\n        @A_Inject(A_Caller) root: AreNode,\n        @A_Inject(A_Logger) logger: A_Logger,\n        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n    ) {\n\n        const rootId = root.id;\n\n        // No routing config for this root — leave the existing template content intact\n        if (signalsContext && !signalsContext.hasRoot(rootId)) {\n            return;\n        }\n\n        const currentRoute = AreRoute.default();\n\n        let componentName: string | undefined;\n\n        if (currentRoute) {\n            const initialVector = new A_SignalVector([currentRoute]);\n\n            // 1. Lookup via AreSignalsContext (per root-id conditions)\n            let renderTarget = signalsContext?.findComponentByVector(rootId, initialVector);\n\n            // 2. Fall back to global AreSignalsMeta\n            if (!renderTarget) {\n                const signalsMeta = A_Context.meta<AreSignalsMeta>(AreSignals);\n                renderTarget = signalsMeta?.findComponentByVector(initialVector);\n            }\n\n            if (renderTarget?.name) {\n                componentName = A_FormatterHelper.toKebabCase(renderTarget.name);\n            }\n        }\n\n        // 3. Fall back to the 'default' attribute on the node directly.\n        //    Note: root.attributes is NOT populated at this stage because tokenize()\n        //    runs after template() in the lifecycle. Read from raw markup instead.\n        if (!componentName) {\n            const defaultMatch = root.markup?.match(/\\bdefault=[\"']([^\"']*)[\"']/);\n            componentName = defaultMatch?.[1];\n        }\n\n        if (!componentName) {\n            logger.warning('AreRoot: No component found for initial render. Please ensure a route condition or \"default\" attribute is set.');\n            return;\n        }\n\n        root.setContent(`<${componentName}></${componentName}>`);\n    }\n\n\n    @Are.Signal\n    async onSignal(\n        @A_Inject(A_Caller) root: AreNode,\n        @A_Inject(A_SignalVector) vector: A_SignalVector,\n        @A_Inject(AreStore) store: AreStore<{ default: string }>,\n        @A_Inject(A_Logger) logger: A_Logger,\n        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n    ) {\n        const rootId = root.id;\n        // No routing config for this root — signals do not affect its content\n        if (signalsContext && !signalsContext.hasRoot(rootId)) {\n            return;\n        }\n\n        // 1. Try root-specific lookup via AreSignalsContext (keyed by the are-root's id attribute)\n        let renderTarget = signalsContext?.findComponentByVector(rootId, vector);\n\n        // 2. Fall back to global AreSignalsMeta lookup\n        if (!renderTarget) {\n            const signalsMeta = A_Context.meta<AreSignalsMeta>(AreSignals);\n            renderTarget = signalsMeta?.findComponentByVector(vector);\n        }\n\n        const componentName = renderTarget?.name\n            ? A_FormatterHelper.toKebabCase(renderTarget.name)\n            : store.get('default');\n\n        if (!componentName) {\n            logger.warning('No component found for rendering in AreRoot. Please ensure that the signal vector matches at least one component or that a default component name is provided in the store.');\n            return;\n        }\n\n        root.setContent(`<${componentName}></${componentName}>`);\n\n        for (let i = 0; i < root.children.length; i++) {\n            const child = root.children[i];\n            child.unmount();\n            child.destroy();\n            root.removeChild(child);\n        }\n\n\n        root.tokenize();\n\n        for (let i = 0; i < root.children.length; i++) {\n            const child = root.children[i];\n            child.init();\n\n            const res = child.load();\n            if (res instanceof Promise) {\n                await res;\n            }\n            child.transform();\n\n            child.compile();\n            child.mount();\n        }\n    }\n}\n"]}
+{"version":3,"sources":["../../../../src/lib/AreRoot/AreRoot.component.ts"],"names":[],"mappings":"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","file":"AreRoot.component.mjs","sourcesContent":["import { A_Caller, A_Context, A_FormatterHelper, A_Inject, } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame/core\";\nimport { A_Logger } from \"@adaas/a-utils/a-logger\";\nimport { A_SignalVector } from \"@adaas/a-utils/a-signal\";\nimport { Are, ArePropDefinition, AreStore, AreNode, AreSignals, AreSignalsMeta, AreSignalsContext } from \"@adaas/are\";\nimport { AreRoute } from \"@adaas/are-html/signals/AreRoute.signal\";\n\n\n@A_Frame.Define({\n    namespace: 'a-are-html',\n    description: 'The AreRoot component serves as the foundational entry point for the A-Concept Rendering Engine (ARE). It is responsible for initializing the rendering process, managing the root node of the component tree, and handling signal-based rendering logic. The AreRoot component processes incoming signals to determine which child components to render, allowing for dynamic and responsive UI updates based on application state and user interactions.'\n})\nexport class AreRoot extends Are {\n\n    props: Record<string, ArePropDefinition> = {\n        default: {\n            type: 'string',\n            default: '',\n        }\n    }\n\n\n    @Are.Template\n    async template(\n        @A_Inject(A_Caller) root: AreNode,\n        @A_Inject(A_Logger) logger: A_Logger,\n        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n    ) {\n\n        const rootId = root.id;\n\n        // No routing config for this root — but still honour body content or\n        // a 'default' attribute if one is present on the markup.\n        if (signalsContext && !signalsContext.hasRoot(rootId)) {\n            if (!root.content?.trim()) {\n                // Fallback: legacy default= attribute\n                const defaultMatch = root.markup?.match(/\\bdefault=[\"']([^\"']*)[\"']/);\n                const defaultComponent = defaultMatch?.[1];\n                if (defaultComponent) {\n                    root.setContent(`<${defaultComponent}></${defaultComponent}>`);\n                }\n            }\n            // Body content (or none) — tokenizer picks it up without intervention\n            return;\n        }\n\n        const currentRoute = AreRoute.default();\n\n        let componentName: string | undefined;\n\n        if (currentRoute) {\n            const initialVector = new A_SignalVector([currentRoute]);\n\n            // 1. Lookup via AreSignalsContext (per root-id conditions)\n            let renderTarget = signalsContext?.findComponentByVector(rootId, initialVector);\n\n            // 2. Fall back to global AreSignalsMeta\n            if (!renderTarget) {\n                const signalsMeta = A_Context.meta<AreSignalsMeta>(AreSignals);\n                renderTarget = signalsMeta?.findComponentByVector(initialVector);\n            }\n\n            if (renderTarget?.name) {\n                componentName = A_FormatterHelper.toKebabCase(renderTarget.name);\n            }\n        }\n\n        // 3. Fall back to body content (the nodes already placed inside the\n        //    <are-root> tag act as the default).  No setContent() call needed —\n        //    the tokenizer will process root.content as-is.\n        if (!componentName) {\n            if (root.content?.trim()) {\n                return;\n            }\n        }\n        // 3.5. Fall back to AreSignalsContext default component for this root.\n        if (!componentName) {\n            const defaultComp = signalsContext?.getDefault(rootId);\n            if (defaultComp?.name) {\n                componentName = A_FormatterHelper.toKebabCase(defaultComp.name);\n            }\n        }\n        // 4. Last resort: legacy default= attribute on the markup.\n        if (!componentName) {\n            const defaultMatch = root.markup?.match(/\\bdefault=[\"']([^\"']*)[\"']/);\n            componentName = defaultMatch?.[1];\n        }\n\n        if (!componentName) {\n            logger.warning('AreRoot: No component found for initial render. Provide body content, a route condition, or a \"default\" attribute.');\n            return;\n        }\n\n        root.setContent(`<${componentName}></${componentName}>`);\n    }\n\n\n    @Are.Signal\n    async onSignal(\n        @A_Inject(A_Caller) root: AreNode,\n        @A_Inject(A_SignalVector) vector: A_SignalVector,\n        @A_Inject(AreStore) store: AreStore<{ default: string }>,\n        @A_Inject(A_Logger) logger: A_Logger,\n        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,\n    ) {\n        const rootId = root.id;\n\n        // No routing config for this root — signals do not affect its content\n        if (signalsContext && !signalsContext.hasRoot(rootId)) {\n            return;\n        }\n\n        // 1. Try root-specific lookup via AreSignalsContext (keyed by the are-root's id attribute)\n        let renderTarget = signalsContext?.findComponentByVector(rootId, vector);\n\n        // 2. Fall back to global AreSignalsMeta lookup\n        if (!renderTarget) {\n            const signalsMeta = A_Context.meta<AreSignalsMeta>(AreSignals);\n            renderTarget = signalsMeta?.findComponentByVector(vector);\n        }\n\n        const componentName = renderTarget?.name\n            ? A_FormatterHelper.toKebabCase(renderTarget.name)\n            : store.get('default');\n\n        // No matching condition for this signal vector (e.g. AreInit before any route).\n        // Keep the current outlet content and do nothing.\n        if (!componentName) {\n            return;\n        }\n\n        // Guard: if the outlet already shows the same component, do nothing.\n        // Prevents infinite remount loops when a non-routing signal carries a\n        // stale routing signal in the accumulated A_SignalState vector.\n        // node.type is the kebab-case tag name — the most direct and reliable\n        // identifier (no constructor-name resolution, no proxy wrapping issues).\n        const currentChild = root.children[0] as AreNode | undefined;\n        if (currentChild?.type === componentName) {\n            return;\n        }\n\n        root.setContent(`<${componentName}></${componentName}>`);\n\n        // Unsubscribe old children BEFORE destroying them.\n        // Without this, AreSignals.handleSignalVector keeps iterating stale\n        // (scope-less) nodes on every subsequent signal and throws an error.\n        for (let i = 0; i < root.children.length; i++) {\n            const child = root.children[i];\n            signalsContext?.unsubscribe(child);\n            child.unmount();\n            child.destroy();\n            root.removeChild(child);\n        }\n\n\n        root.tokenize();\n\n        for (let i = 0; i < root.children.length; i++) {\n            const child = root.children[i];\n            child.init();\n\n            const res = child.load();\n            if (res instanceof Promise) {\n                await res;\n            }\n            child.transform();\n\n            child.compile();\n            child.mount();\n        }\n    }\n}\n"]}

package/dist/node/nodes/AreComment.d.mts

@@ -1,5 +1,5 @@
 import { AreNodeNewProps } from '@adaas/are';
-import { e as AreHTMLNode } from '../AreBinding.attribute-C6qrxN8K.mjs';
+import { e as AreHTMLNode } from '../AreBinding.attribute-doUvtOjc.mjs';
 import '@adaas/a-concept';
 import '../lib/AreStyle/AreStyle.context.mjs';
 

package/dist/node/nodes/AreComment.d.ts

@@ -1,5 +1,5 @@
 import { AreNodeNewProps } from '@adaas/are';
-import { e as AreHTMLNode } from '../AreBinding.attribute-C6JasbJL.js';
+import { e as AreHTMLNode } from '../AreBinding.attribute-Bm5LlOyE.js';
 import '@adaas/a-concept';
 import '../lib/AreStyle/AreStyle.context.js';
 

package/dist/node/nodes/AreComponent.d.mts

@@ -1,5 +1,5 @@
 import { Are } from '@adaas/are';
-import { e as AreHTMLNode } from '../AreBinding.attribute-C6qrxN8K.mjs';
+import { e as AreHTMLNode } from '../AreBinding.attribute-doUvtOjc.mjs';
 import '@adaas/a-concept';
 import '../lib/AreStyle/AreStyle.context.mjs';
 

package/dist/node/nodes/AreComponent.d.ts

@@ -1,5 +1,5 @@
 import { Are } from '@adaas/are';
-import { e as AreHTMLNode } from '../AreBinding.attribute-C6JasbJL.js';
+import { e as AreHTMLNode } from '../AreBinding.attribute-Bm5LlOyE.js';
 import '@adaas/a-concept';
 import '../lib/AreStyle/AreStyle.context.js';
 

package/dist/node/nodes/AreInterpolation.d.mts

@@ -1,5 +1,5 @@
 import { AreNodeNewProps } from '@adaas/are';
-import { e as AreHTMLNode } from '../AreBinding.attribute-C6qrxN8K.mjs';
+import { e as AreHTMLNode } from '../AreBinding.attribute-doUvtOjc.mjs';
 import '@adaas/a-concept';
 import '../lib/AreStyle/AreStyle.context.mjs';
 

package/dist/node/nodes/AreInterpolation.d.ts

@@ -1,5 +1,5 @@
 import { AreNodeNewProps } from '@adaas/are';
-import { e as AreHTMLNode } from '../AreBinding.attribute-C6JasbJL.js';
+import { e as AreHTMLNode } from '../AreBinding.attribute-Bm5LlOyE.js';
 import '@adaas/a-concept';
 import '../lib/AreStyle/AreStyle.context.js';
 

package/dist/node/nodes/AreRoot.d.mts

@@ -1,5 +1,5 @@
 import { Are } from '@adaas/are';
-import { e as AreHTMLNode } from '../AreBinding.attribute-C6qrxN8K.mjs';
+import { e as AreHTMLNode } from '../AreBinding.attribute-doUvtOjc.mjs';
 import '@adaas/a-concept';
 import '../lib/AreStyle/AreStyle.context.mjs';
 

package/dist/node/nodes/AreRoot.d.ts

@@ -1,5 +1,5 @@
 import { Are } from '@adaas/are';
-import { e as AreHTMLNode } from '../AreBinding.attribute-C6JasbJL.js';
+import { e as AreHTMLNode } from '../AreBinding.attribute-Bm5LlOyE.js';
 import '@adaas/a-concept';
 import '../lib/AreStyle/AreStyle.context.js';
 

package/dist/node/nodes/AreText.d.mts

@@ -1,5 +1,5 @@
 import { AreNodeNewProps } from '@adaas/are';
-import { e as AreHTMLNode } from '../AreBinding.attribute-C6qrxN8K.mjs';
+import { e as AreHTMLNode } from '../AreBinding.attribute-doUvtOjc.mjs';
 import '@adaas/a-concept';
 import '../lib/AreStyle/AreStyle.context.mjs';
 

package/dist/node/nodes/AreText.d.ts

@@ -1,5 +1,5 @@
 import { AreNodeNewProps } from '@adaas/are';
-import { e as AreHTMLNode } from '../AreBinding.attribute-C6JasbJL.js';
+import { e as AreHTMLNode } from '../AreBinding.attribute-Bm5LlOyE.js';
 import '@adaas/a-concept';
 import '../lib/AreStyle/AreStyle.context.js';
 

package/examples/component-styles/concept.ts

@@ -0,0 +1,41 @@
+import { A_Concept, A_Context } from "@adaas/a-concept";
+import { UIContainer } from "./containers/UI.container";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { A_Polyfill } from "@adaas/a-utils/a-polyfill";
+import { A_Config, ENVConfigReader } from "@adaas/a-utils/a-config";
+
+
+(async () => {
+    try {
+        const Application = new UIContainer({
+            name: 'ARE Component Styles',
+            components: [
+                A_Polyfill,
+                ENVConfigReader,
+                A_Logger,
+            ],
+            fragments: [
+                new A_Config({
+                    defaults: {
+                        PORT: 8083,
+                        CONFIG_VERBOSE: true,
+                        DEV_MODE: true,
+                    }
+                }),
+            ]
+        });
+
+        const concept = new A_Concept({
+            name: 'adaas-are-example-component-styles',
+            components: [A_Logger, A_Polyfill, ENVConfigReader],
+            containers: [Application],
+        });
+
+        await concept.load();
+        await concept.start();
+
+    } catch (error) {
+        const logger = A_Context.root.resolve<A_Logger>(A_Logger)!;
+        logger.error(error);
+    }
+})();

package/examples/component-styles/containers/UI.container.ts

@@ -0,0 +1,122 @@
+import { A_Concept, A_IdentityHelper, A_Inject } from "@adaas/a-concept";
+import { A_Config } from "@adaas/a-utils/a-config";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { A_Service } from "@adaas/a-utils/a-service";
+import { build } from "esbuild";
+import fs from "fs";
+import http from "http";
+import path from "path";
+
+
+export class UIContainer extends A_Service {
+
+    protected server!: any;
+
+    @A_Concept.Build()
+    async build(
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(A_Config) config: A_Config
+    ): Promise<void> {
+        logger.log('Building Component Styles example...');
+        const entryFile = path.resolve(__dirname, "../src/concept.ts");
+        const BundleID = A_IdentityHelper.generateTimeId();
+        const outFile = path.resolve(__dirname, `../dist/${BundleID}.js`);
+
+        if (fs.existsSync(path.resolve(__dirname, "../dist"))) {
+            fs.rmSync(path.resolve(__dirname, "../dist"), { recursive: true, force: true });
+        }
+
+        await build({
+            entryPoints: [entryFile],
+            outfile: outFile,
+            bundle: true,
+            minify: false,
+            keepNames: true,
+            sourcemap: false,
+            target: "es2020",
+            format: "esm",
+        });
+
+        logger.log('green', 'Bundle built successfully.');
+
+        let indexHtml = await fs.promises.readFile(
+            path.resolve(__dirname, "../public/index.html"), 'utf-8'
+        );
+        indexHtml = indexHtml.replace('{{BUNDLE_ID}}', BundleID);
+        await fs.promises.writeFile(path.resolve(__dirname, "../dist/index.html"), indexHtml);
+
+        const publicDir = path.resolve(__dirname, "../public");
+        const distDir = path.resolve(__dirname, "../dist");
+        const copyRecursive = async (src: string, dest: string) => {
+            const entries = await fs.promises.readdir(src, { withFileTypes: true });
+            await fs.promises.mkdir(dest, { recursive: true });
+            for (const entry of entries) {
+                const srcPath = path.join(src, entry.name);
+                const destPath = path.join(dest, entry.name);
+                if (entry.isDirectory()) {
+                    await copyRecursive(srcPath, destPath);
+                } else if (entry.name !== 'index.html') {
+                    await fs.promises.copyFile(srcPath, destPath);
+                }
+            }
+        };
+        await copyRecursive(publicDir, distDir);
+        logger.log('green', 'Static assets copied.');
+    }
+
+    @A_Concept.Load()
+    async preLoadBuild(
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(A_Config) config: A_Config
+    ) {
+        await this.build(logger, config);
+    }
+
+    @A_Concept.Start()
+    async startStaticServer(
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(A_Config) config: A_Config
+    ) {
+        this.server = http.createServer(this.serveStaticFiles.bind(this));
+        const PORT = config.get('PORT') || 8083;
+        this.server.listen(PORT, () => {
+            logger.log('green', `Component Styles example running at http://localhost:${PORT}`);
+        });
+    }
+
+    protected async serveStaticFiles(
+        req: http.IncomingMessage,
+        res: http.ServerResponse,
+    ) {
+        const url = req.url || '/';
+        let filePath = path.join(__dirname, '../dist', url === '/' ? 'index.html' : url);
+
+        const logger = this.scope.resolve<A_Logger>(A_Logger)!;
+        logger.log('blue', `Serving: ${filePath}`);
+
+        const mimeTypes: Record<string, string> = {
+            '.html': 'text/html',
+            '.js':   'text/javascript',
+            '.css':  'text/css',
+            '.json': 'application/json',
+            '.png':  'image/png',
+            '.svg':  'image/svg+xml',
+        };
+        const ext = path.extname(filePath).toLowerCase();
+        const contentType = mimeTypes[ext] || 'application/octet-stream';
+
+        if (!fs.existsSync(filePath)) {
+            filePath = path.join(__dirname, '../dist', 'index.html');
+        }
+
+        fs.readFile(filePath, (err, content) => {
+            if (err) {
+                res.writeHead(500);
+                res.end(`Server Error: ${err.code}`, 'utf-8');
+            } else {
+                res.writeHead(200, { 'Content-Type': contentType });
+                res.end(content, 'utf-8');
+            }
+        });
+    }
+}