@adaas/are-html 0.0.2

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

@@ -0,0 +1,107 @@
+import { __decorateClass, __decorateParam } from '../../chunk-EQQGB2QZ.mjs';
+import { A_Inject, A_Caller, A_Context, A_FormatterHelper } from '@adaas/a-concept';
+import { A_Frame } from '@adaas/a-frame';
+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';
+
+let AreRoot = class extends Are {
+  constructor() {
+    super(...arguments);
+    this.props = {
+      default: {
+        type: "string",
+        default: ""
+      }
+    };
+  }
+  async template(root, logger, signalsContext) {
+    const rootId = root.id;
+    if (signalsContext && !signalsContext.hasRoot(rootId)) {
+      return;
+    }
+    const currentRoute = AreRoute.default();
+    let componentName;
+    if (currentRoute) {
+      const initialVector = new A_SignalVector([currentRoute]);
+      let renderTarget = signalsContext?.findComponentByVector(rootId, initialVector);
+      if (!renderTarget) {
+        const signalsMeta = A_Context.meta(AreSignals);
+        renderTarget = signalsMeta?.findComponentByVector(initialVector);
+      }
+      if (renderTarget?.name) {
+        componentName = A_FormatterHelper.toKebabCase(renderTarget.name);
+      }
+    }
+    if (!componentName) {
+      const defaultAttr = root.attributes.find((attr) => attr.name === "default");
+      componentName = defaultAttr?.content;
+    }
+    if (!componentName) {
+      logger.warning('AreRoot: No component found for initial render. Please ensure a route condition or "default" attribute is set.');
+      return;
+    }
+    root.setContent(`<${componentName}></${componentName}>`);
+  }
+  async onSignal(root, vector, store, logger, signalsContext) {
+    console.log("Received signal vector in AreRoot:", root, vector);
+    const rootId = root.id;
+    if (signalsContext && !signalsContext.hasRoot(rootId)) {
+      return;
+    }
+    let renderTarget = signalsContext?.findComponentByVector(rootId, vector);
+    if (!renderTarget) {
+      const signalsMeta = A_Context.meta(AreSignals);
+      renderTarget = signalsMeta?.findComponentByVector(vector);
+    }
+    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;
+    }
+    root.setContent(`<${componentName}></${componentName}>`);
+    for (let i = 0; i < root.children.length; i++) {
+      const child = root.children[i];
+      child.unmount();
+      child.destroy();
+      root.removeChild(child);
+    }
+    root.tokenize();
+    for (let i = 0; i < root.children.length; i++) {
+      const child = root.children[i];
+      child.init();
+      const res = child.load();
+      if (res instanceof Promise) {
+        await res;
+      }
+      child.transform();
+      child.compile();
+      child.mount();
+    }
+  }
+};
+__decorateClass([
+  Are.Template,
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_Logger)),
+  __decorateParam(2, A_Inject(AreSignalsContext))
+], AreRoot.prototype, "template", 1);
+__decorateClass([
+  Are.Signal,
+  __decorateParam(0, A_Inject(A_Caller)),
+  __decorateParam(1, A_Inject(A_SignalVector)),
+  __decorateParam(2, A_Inject(AreStore)),
+  __decorateParam(3, A_Inject(A_Logger)),
+  __decorateParam(4, A_Inject(AreSignalsContext))
+], AreRoot.prototype, "onSignal", 1);
+AreRoot = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AreRoot",
+    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."
+  })
+], AreRoot);
+
+export { AreRoot };
+//# sourceMappingURL=AreRoot.component.mjs.map
+//# sourceMappingURL=AreRoot.component.mjs.map

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

@@ -0,0 +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\";\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.Component({\n    namespace: 'A-ARE',\n    name: 'AreRoot',\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        //    (store props are not yet compiled at template phase)\n        if (!componentName) {\n            const defaultAttr = root.attributes.find(attr => attr.name === 'default');\n            componentName = defaultAttr?.content;\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        console.log('Received signal vector in AreRoot:', root, vector);\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"]}

package/dist/node/lib/AreStyle/AreStyle.context.d.mts

@@ -0,0 +1,8 @@
+import { A_Fragment, ASEID } from '@adaas/a-concept';
+
+declare class AreStyle extends A_Fragment {
+    styles: string;
+    constructor(styles: string, aseid?: ASEID | string);
+}
+
+export { AreStyle };

package/dist/node/lib/AreStyle/AreStyle.context.d.ts

@@ -0,0 +1,8 @@
+import { A_Fragment, ASEID } from '@adaas/a-concept';
+
+declare class AreStyle extends A_Fragment {
+    styles: string;
+    constructor(styles: string, aseid?: ASEID | string);
+}
+
+export { AreStyle };

package/dist/node/lib/AreStyle/AreStyle.context.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var aConcept = require('@adaas/a-concept');
+
+class AreStyle extends aConcept.A_Fragment {
+  constructor(styles, aseid) {
+    super({
+      name: aseid ? aseid.toString() : "default-style"
+    });
+    this.styles = styles;
+  }
+}
+
+exports.AreStyle = AreStyle;
+//# sourceMappingURL=AreStyle.context.js.map
+//# sourceMappingURL=AreStyle.context.js.map

package/dist/node/lib/AreStyle/AreStyle.context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/AreStyle/AreStyle.context.ts"],"names":["A_Fragment"],"mappings":";;;;AAGO,MAAM,iBAAiBA,mBAAA,CAAW;AAAA,EAIrC,WAAA,CACI,QACA,KAAA,EAEF;AACE,IAAA,KAAA,CAAM;AAAA,MACF,IAAA,EAAM,KAAA,GAAQ,KAAA,CAAM,QAAA,EAAS,GAAI;AAAA,KACpC,CAAA;AAED,IAAA,IAAA,CAAK,MAAA,GAAS,MAAA;AAAA,EAClB;AAEJ","file":"AreStyle.context.js","sourcesContent":["import { A_Fragment, ASEID } from \"@adaas/a-concept\";\n\n\nexport class AreStyle extends A_Fragment {\n\n    styles!: string;\n\n    constructor(\n        styles: string,\n        aseid?: ASEID | string,\n\n    ) {\n        super({\n            name: aseid ? aseid.toString() : 'default-style',\n        });\n\n        this.styles = styles;\n    }\n\n}"]}

package/dist/node/lib/AreStyle/AreStyle.context.mjs

@@ -0,0 +1,15 @@
+import '../../chunk-EQQGB2QZ.mjs';
+import { A_Fragment } from '@adaas/a-concept';
+
+class AreStyle extends A_Fragment {
+  constructor(styles, aseid) {
+    super({
+      name: aseid ? aseid.toString() : "default-style"
+    });
+    this.styles = styles;
+  }
+}
+
+export { AreStyle };
+//# sourceMappingURL=AreStyle.context.mjs.map
+//# sourceMappingURL=AreStyle.context.mjs.map

package/dist/node/lib/AreStyle/AreStyle.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/AreStyle/AreStyle.context.ts"],"names":[],"mappings":";;;AAGO,MAAM,iBAAiB,UAAA,CAAW;AAAA,EAIrC,WAAA,CACI,QACA,KAAA,EAEF;AACE,IAAA,KAAA,CAAM;AAAA,MACF,IAAA,EAAM,KAAA,GAAQ,KAAA,CAAM,QAAA,EAAS,GAAI;AAAA,KACpC,CAAA;AAED,IAAA,IAAA,CAAK,MAAA,GAAS,MAAA;AAAA,EAClB;AAEJ","file":"AreStyle.context.mjs","sourcesContent":["import { A_Fragment, ASEID } from \"@adaas/a-concept\";\n\n\nexport class AreStyle extends A_Fragment {\n\n    styles!: string;\n\n    constructor(\n        styles: string,\n        aseid?: ASEID | string,\n\n    ) {\n        super({\n            name: aseid ? aseid.toString() : 'default-style',\n        });\n\n        this.styles = styles;\n    }\n\n}"]}

package/dist/node/lib/AreStyle/AreStyle.types.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/node/lib/AreStyle/AreStyle.types.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/node/lib/AreStyle/AreStyle.types.js

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=AreStyle.types.js.map
+//# sourceMappingURL=AreStyle.types.js.map

package/dist/node/lib/AreStyle/AreStyle.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"AreStyle.types.js"}

package/dist/node/lib/AreStyle/AreStyle.types.mjs

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=AreStyle.types.mjs.map
+//# sourceMappingURL=AreStyle.types.mjs.map

package/dist/node/lib/AreStyle/AreStyle.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"AreStyle.types.mjs"}

package/dist/node/lib/AreWatcher/AreWatcher.component.d.mts

@@ -0,0 +1,18 @@
+import { A_Component } from '@adaas/a-concept';
+
+declare class AreWatcher extends A_Component {
+    private readonly handlers;
+    private current;
+    constructor();
+    onChange(handler: (url: URL) => void): () => void;
+    get url(): URL;
+    destroy(): void;
+    private onPopState;
+    private onHashChange;
+    private onURLChange;
+    private attachListeners;
+    private patchHistory;
+    private notify;
+}
+
+export { AreWatcher };

package/dist/node/lib/AreWatcher/AreWatcher.component.d.ts

@@ -0,0 +1,18 @@
+import { A_Component } from '@adaas/a-concept';
+
+declare class AreWatcher extends A_Component {
+    private readonly handlers;
+    private current;
+    constructor();
+    onChange(handler: (url: URL) => void): () => void;
+    get url(): URL;
+    destroy(): void;
+    private onPopState;
+    private onHashChange;
+    private onURLChange;
+    private attachListeners;
+    private patchHistory;
+    private notify;
+}
+
+export { AreWatcher };

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

@@ -0,0 +1,78 @@
+'use strict';
+
+var aConcept = require('@adaas/a-concept');
+var aFrame = require('@adaas/a-frame');
+
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(result)) || result;
+  return result;
+};
+exports.AreWatcher = class AreWatcher extends aConcept.A_Component {
+  constructor() {
+    super();
+    this.handlers = /* @__PURE__ */ new Set();
+    this.current = new URL(window.location.href);
+    // ── Listeners ─────────────────────────────────────────────────────────────
+    this.onPopState = () => {
+      this.notify();
+    };
+    this.onHashChange = () => {
+      this.notify();
+    };
+    this.onURLChange = () => {
+      this.notify();
+    };
+    this.patchHistory();
+    this.attachListeners();
+  }
+  // ── Public ────────────────────────────────────────────────────────────────
+  onChange(handler) {
+    this.handlers.add(handler);
+    return () => this.handlers.delete(handler);
+  }
+  get url() {
+    return this.current;
+  }
+  destroy() {
+    window.removeEventListener("popstate", this.onPopState);
+    window.removeEventListener("hashchange", this.onHashChange);
+    window.removeEventListener("urlchange", this.onURLChange);
+    this.handlers.clear();
+  }
+  attachListeners() {
+    window.addEventListener("popstate", this.onPopState);
+    window.addEventListener("hashchange", this.onHashChange);
+    window.addEventListener("urlchange", this.onURLChange);
+  }
+  // ── Patch pushState / replaceState ────────────────────────────────────────
+  patchHistory() {
+    const patch = (original) => function(...args) {
+      original.apply(this, args);
+      window.dispatchEvent(new Event("urlchange"));
+    };
+    history.pushState = patch(history.pushState);
+    history.replaceState = patch(history.replaceState);
+  }
+  // ── Notify ────────────────────────────────────────────────────────────────
+  notify() {
+    const next = new URL(window.location.href);
+    if (next.href === this.current.href) return;
+    this.current = next;
+    for (const handler of this.handlers) {
+      handler(this.current);
+    }
+  }
+};
+exports.AreWatcher = __decorateClass([
+  aFrame.A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AreWatcher",
+    description: "AreWatcher is a component that observes browser navigation events (history pushState, replaceState, and popstate) and notifies registered handlers when the URL changes, enabling client-side routing and reactive route-based rendering within the ARE framework."
+  })
+], exports.AreWatcher);
+//# sourceMappingURL=AreWatcher.component.js.map
+//# sourceMappingURL=AreWatcher.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/AreWatcher/AreWatcher.component.ts"],"names":["AreWatcher","A_Component","A_Frame"],"mappings":"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","file":"AreWatcher.component.js","sourcesContent":["import { A_Component } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame\";\n\n@A_Frame.Component({\n    namespace: 'A-ARE',\n    name: 'AreWatcher',\n    description: 'AreWatcher is a component that observes browser navigation events (history pushState, replaceState, and popstate) and notifies registered handlers when the URL changes, enabling client-side routing and reactive route-based rendering within the ARE framework.'\n})\nexport class AreWatcher extends A_Component {\n\n    private readonly handlers: Set<(url: URL) => void> = new Set();\n    private current: URL = new URL(window.location.href);\n\n    constructor() {\n        super();\n        this.patchHistory();\n        this.attachListeners();\n    }\n\n    // ── Public ────────────────────────────────────────────────────────────────\n\n    onChange(handler: (url: URL) => void): () => void {\n        this.handlers.add(handler);\n        return () => this.handlers.delete(handler);   // returns unsubscribe fn\n    }\n\n    get url(): URL {\n        return this.current;\n    }\n\n    destroy(): void {\n        window.removeEventListener('popstate', this.onPopState);\n        window.removeEventListener('hashchange', this.onHashChange);\n        window.removeEventListener('urlchange', this.onURLChange);\n        this.handlers.clear();\n    }\n\n    // ── Listeners ─────────────────────────────────────────────────────────────\n\n    private onPopState = (): void => {\n        this.notify();\n    }\n\n    private onHashChange = (): void => {\n        this.notify();\n    }\n\n    private onURLChange = (): void => {\n        this.notify();\n    }\n\n    private attachListeners(): void {\n        window.addEventListener('popstate', this.onPopState);\n        window.addEventListener('hashchange', this.onHashChange);\n        window.addEventListener('urlchange', this.onURLChange);   // custom event from patch\n    }\n\n    // ── Patch pushState / replaceState ────────────────────────────────────────\n\n    private patchHistory(): void {\n        const patch = (original: typeof history.pushState) =>\n            function (this: History, ...args: Parameters<typeof history.pushState>) {\n                original.apply(this, args);\n                window.dispatchEvent(new Event('urlchange'));\n            };\n\n        history.pushState = patch(history.pushState);\n        history.replaceState = patch(history.replaceState);\n    }\n\n    // ── Notify ────────────────────────────────────────────────────────────────\n\n    private notify(): void {\n        const next = new URL(window.location.href);\n\n        if (next.href === this.current.href) return;   // no actual change\n\n        this.current = next;\n\n        for (const handler of this.handlers) {\n            handler(this.current);\n        }\n    }\n}"]}

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

@@ -0,0 +1,71 @@
+import { __decorateClass } from '../../chunk-EQQGB2QZ.mjs';
+import { A_Component } from '@adaas/a-concept';
+import { A_Frame } from '@adaas/a-frame';
+
+let AreWatcher = class extends A_Component {
+  constructor() {
+    super();
+    this.handlers = /* @__PURE__ */ new Set();
+    this.current = new URL(window.location.href);
+    // ── Listeners ─────────────────────────────────────────────────────────────
+    this.onPopState = () => {
+      this.notify();
+    };
+    this.onHashChange = () => {
+      this.notify();
+    };
+    this.onURLChange = () => {
+      this.notify();
+    };
+    this.patchHistory();
+    this.attachListeners();
+  }
+  // ── Public ────────────────────────────────────────────────────────────────
+  onChange(handler) {
+    this.handlers.add(handler);
+    return () => this.handlers.delete(handler);
+  }
+  get url() {
+    return this.current;
+  }
+  destroy() {
+    window.removeEventListener("popstate", this.onPopState);
+    window.removeEventListener("hashchange", this.onHashChange);
+    window.removeEventListener("urlchange", this.onURLChange);
+    this.handlers.clear();
+  }
+  attachListeners() {
+    window.addEventListener("popstate", this.onPopState);
+    window.addEventListener("hashchange", this.onHashChange);
+    window.addEventListener("urlchange", this.onURLChange);
+  }
+  // ── Patch pushState / replaceState ────────────────────────────────────────
+  patchHistory() {
+    const patch = (original) => function(...args) {
+      original.apply(this, args);
+      window.dispatchEvent(new Event("urlchange"));
+    };
+    history.pushState = patch(history.pushState);
+    history.replaceState = patch(history.replaceState);
+  }
+  // ── Notify ────────────────────────────────────────────────────────────────
+  notify() {
+    const next = new URL(window.location.href);
+    if (next.href === this.current.href) return;
+    this.current = next;
+    for (const handler of this.handlers) {
+      handler(this.current);
+    }
+  }
+};
+AreWatcher = __decorateClass([
+  A_Frame.Component({
+    namespace: "A-ARE",
+    name: "AreWatcher",
+    description: "AreWatcher is a component that observes browser navigation events (history pushState, replaceState, and popstate) and notifies registered handlers when the URL changes, enabling client-side routing and reactive route-based rendering within the ARE framework."
+  })
+], AreWatcher);
+
+export { AreWatcher };
+//# sourceMappingURL=AreWatcher.component.mjs.map
+//# sourceMappingURL=AreWatcher.component.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/lib/AreWatcher/AreWatcher.component.ts"],"names":[],"mappings":"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","file":"AreWatcher.component.mjs","sourcesContent":["import { A_Component } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame\";\n\n@A_Frame.Component({\n    namespace: 'A-ARE',\n    name: 'AreWatcher',\n    description: 'AreWatcher is a component that observes browser navigation events (history pushState, replaceState, and popstate) and notifies registered handlers when the URL changes, enabling client-side routing and reactive route-based rendering within the ARE framework.'\n})\nexport class AreWatcher extends A_Component {\n\n    private readonly handlers: Set<(url: URL) => void> = new Set();\n    private current: URL = new URL(window.location.href);\n\n    constructor() {\n        super();\n        this.patchHistory();\n        this.attachListeners();\n    }\n\n    // ── Public ────────────────────────────────────────────────────────────────\n\n    onChange(handler: (url: URL) => void): () => void {\n        this.handlers.add(handler);\n        return () => this.handlers.delete(handler);   // returns unsubscribe fn\n    }\n\n    get url(): URL {\n        return this.current;\n    }\n\n    destroy(): void {\n        window.removeEventListener('popstate', this.onPopState);\n        window.removeEventListener('hashchange', this.onHashChange);\n        window.removeEventListener('urlchange', this.onURLChange);\n        this.handlers.clear();\n    }\n\n    // ── Listeners ─────────────────────────────────────────────────────────────\n\n    private onPopState = (): void => {\n        this.notify();\n    }\n\n    private onHashChange = (): void => {\n        this.notify();\n    }\n\n    private onURLChange = (): void => {\n        this.notify();\n    }\n\n    private attachListeners(): void {\n        window.addEventListener('popstate', this.onPopState);\n        window.addEventListener('hashchange', this.onHashChange);\n        window.addEventListener('urlchange', this.onURLChange);   // custom event from patch\n    }\n\n    // ── Patch pushState / replaceState ────────────────────────────────────────\n\n    private patchHistory(): void {\n        const patch = (original: typeof history.pushState) =>\n            function (this: History, ...args: Parameters<typeof history.pushState>) {\n                original.apply(this, args);\n                window.dispatchEvent(new Event('urlchange'));\n            };\n\n        history.pushState = patch(history.pushState);\n        history.replaceState = patch(history.replaceState);\n    }\n\n    // ── Notify ────────────────────────────────────────────────────────────────\n\n    private notify(): void {\n        const next = new URL(window.location.href);\n\n        if (next.href === this.current.href) return;   // no actual change\n\n        this.current = next;\n\n        for (const handler of this.handlers) {\n            handler(this.current);\n        }\n    }\n}"]}

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

@@ -0,0 +1,10 @@
+import { AreNodeNewProps } from '@adaas/are';
+import { e as AreHTMLNode } from '../AreBinding.attribute-C6qrxN8K.mjs';
+import '@adaas/a-concept';
+import '../lib/AreStyle/AreStyle.context.mjs';
+
+declare class AreComment extends AreHTMLNode {
+    fromNew(newEntity: AreNodeNewProps): void;
+}
+
+export { AreComment };

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

@@ -0,0 +1,10 @@
+import { AreNodeNewProps } from '@adaas/are';
+import { e as AreHTMLNode } from '../AreBinding.attribute-C6JasbJL.js';
+import '@adaas/a-concept';
+import '../lib/AreStyle/AreStyle.context.js';
+
+declare class AreComment extends AreHTMLNode {
+    fromNew(newEntity: AreNodeNewProps): void;
+}
+
+export { AreComment };

package/dist/node/nodes/AreComment.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var node = require('@adaas/are-html/node');
+
+class AreComment extends node.AreHTMLNode {
+  fromNew(newEntity) {
+    super.fromNew({
+      ...newEntity,
+      payload: {
+        ...newEntity.payload || {},
+        entity: "are-comment"
+      }
+    });
+  }
+}
+
+exports.AreComment = AreComment;
+//# sourceMappingURL=AreComment.js.map
+//# sourceMappingURL=AreComment.js.map

package/dist/node/nodes/AreComment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/nodes/AreComment.ts"],"names":["AreHTMLNode"],"mappings":";;;;AAGO,MAAM,mBAAmBA,gBAAA,CAAY;AAAA,EAIxC,QAAQ,SAAA,EAAkC;AACtC,IAAA,KAAA,CAAM,OAAA,CAAQ;AAAA,MACV,GAAG,SAAA;AAAA,MACH,OAAA,EAAQ;AAAA,QACJ,GAAI,SAAA,CAAU,OAAA,IAAW,EAAC;AAAA,QAC1B,MAAA,EAAQ;AAAA;AACZ,KACH,CAAA;AAAA,EACL;AACJ","file":"AreComment.js","sourcesContent":["import { AreNodeNewProps } from \"@adaas/are\";\nimport { AreHTMLNode } from \"@adaas/are-html/node\";\n\nexport class AreComment extends AreHTMLNode {\n\n\n\n    fromNew(newEntity: AreNodeNewProps): void {\n        super.fromNew({\n            ...newEntity,\n            payload:{\n                ...(newEntity.payload || {}),\n                entity: 'are-comment',\n            }\n        });\n    }\n}"]}

package/dist/node/nodes/AreComment.mjs

@@ -0,0 +1,18 @@
+import '../chunk-EQQGB2QZ.mjs';
+import { AreHTMLNode } from '@adaas/are-html/node';
+
+class AreComment extends AreHTMLNode {
+  fromNew(newEntity) {
+    super.fromNew({
+      ...newEntity,
+      payload: {
+        ...newEntity.payload || {},
+        entity: "are-comment"
+      }
+    });
+  }
+}
+
+export { AreComment };
+//# sourceMappingURL=AreComment.mjs.map
+//# sourceMappingURL=AreComment.mjs.map

package/dist/node/nodes/AreComment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/nodes/AreComment.ts"],"names":[],"mappings":";;;AAGO,MAAM,mBAAmB,WAAA,CAAY;AAAA,EAIxC,QAAQ,SAAA,EAAkC;AACtC,IAAA,KAAA,CAAM,OAAA,CAAQ;AAAA,MACV,GAAG,SAAA;AAAA,MACH,OAAA,EAAQ;AAAA,QACJ,GAAI,SAAA,CAAU,OAAA,IAAW,EAAC;AAAA,QAC1B,MAAA,EAAQ;AAAA;AACZ,KACH,CAAA;AAAA,EACL;AACJ","file":"AreComment.mjs","sourcesContent":["import { AreNodeNewProps } from \"@adaas/are\";\nimport { AreHTMLNode } from \"@adaas/are-html/node\";\n\nexport class AreComment extends AreHTMLNode {\n\n\n\n    fromNew(newEntity: AreNodeNewProps): void {\n        super.fromNew({\n            ...newEntity,\n            payload:{\n                ...(newEntity.payload || {}),\n                entity: 'are-comment',\n            }\n        });\n    }\n}"]}

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

@@ -0,0 +1,17 @@
+import { Are } from '@adaas/are';
+import { e as AreHTMLNode } from '../AreBinding.attribute-C6qrxN8K.mjs';
+import '@adaas/a-concept';
+import '../lib/AreStyle/AreStyle.context.mjs';
+
+declare class AreComponentNode extends AreHTMLNode {
+    /**
+     * A custom component associated with this node, which can be used to provide custom logic and behavior for the node. This component is typically defined in the context and can be resolved based on the node's type or other identifying information. The component can include its own template, markup, styles, and features that are specific to the functionality it provides.
+     *
+     * Example: If the node type is "custom-component", the corresponding component would be resolved from the context and can be used to provide custom rendering and behavior for nodes of that type.
+     *
+     * [!] Note: The component is optional and may not be defined for all nodes. If no component is associated with the node, it will be treated as a standard HTML element or a basic node without custom logic.
+     */
+    get component(): Are | undefined;
+}
+
+export { AreComponentNode };

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

@@ -0,0 +1,17 @@
+import { Are } from '@adaas/are';
+import { e as AreHTMLNode } from '../AreBinding.attribute-C6JasbJL.js';
+import '@adaas/a-concept';
+import '../lib/AreStyle/AreStyle.context.js';
+
+declare class AreComponentNode extends AreHTMLNode {
+    /**
+     * A custom component associated with this node, which can be used to provide custom logic and behavior for the node. This component is typically defined in the context and can be resolved based on the node's type or other identifying information. The component can include its own template, markup, styles, and features that are specific to the functionality it provides.
+     *
+     * Example: If the node type is "custom-component", the corresponding component would be resolved from the context and can be used to provide custom rendering and behavior for nodes of that type.
+     *
+     * [!] Note: The component is optional and may not be defined for all nodes. If no component is associated with the node, it will be treated as a standard HTML element or a basic node without custom logic.
+     */
+    get component(): Are | undefined;
+}
+
+export { AreComponentNode };

package/dist/node/nodes/AreComponent.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var aConcept = require('@adaas/a-concept');
+var aFrame = require('@adaas/a-frame');
+var node = require('@adaas/are-html/node');
+
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(result)) || result;
+  return result;
+};
+exports.AreComponentNode = class AreComponentNode extends node.AreHTMLNode {
+  /**
+   * A custom component associated with this node, which can be used to provide custom logic and behavior for the node. This component is typically defined in the context and can be resolved based on the node's type or other identifying information. The component can include its own template, markup, styles, and features that are specific to the functionality it provides.
+   * 
+   * Example: If the node type is "custom-component", the corresponding component would be resolved from the context and can be used to provide custom rendering and behavior for nodes of that type.
+   * 
+   * [!] Note: The component is optional and may not be defined for all nodes. If no component is associated with the node, it will be treated as a standard HTML element or a basic node without custom logic.
+   */
+  get component() {
+    return this.scope.resolve(aConcept.A_FormatterHelper.toPascalCase(this.aseid.entity));
+  }
+};
+exports.AreComponentNode = __decorateClass([
+  aFrame.A_Frame.Entity({
+    namespace: "A-ARE",
+    name: "AreComponentNode",
+    description: "AreComponentNode represents a node in the scene graph that corresponds to a component. It extends the base AreNode and includes additional properties and methods specific to component nodes, such as handling attributes, bindings, directives, events, styles, and interpolations associated with the component."
+  })
+], exports.AreComponentNode);
+//# sourceMappingURL=AreComponent.js.map
+//# sourceMappingURL=AreComponent.js.map

package/dist/node/nodes/AreComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/nodes/AreComponent.ts"],"names":["AreComponentNode","AreHTMLNode","A_FormatterHelper","A_Frame"],"mappings":";;;;;;;;;;;;;;AAWaA,wBAAA,GAAN,+BAA+BC,gBAAA,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9C,IAAI,SAAA,GAA6B;AAC7B,IAAA,OAAO,IAAA,CAAK,MAAM,OAAA,CAAaC,0BAAA,CAAkB,aAAa,IAAA,CAAK,KAAA,CAAM,MAAM,CAAC,CAAA;AAAA,EACpF;AAEJ;AAbaF,wBAAA,GAAN,eAAA,CAAA;AAAA,EALNG,eAAQ,MAAA,CAAO;AAAA,IACZ,SAAA,EAAW,OAAA;AAAA,IACX,IAAA,EAAM,kBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GAChB;AAAA,CAAA,EACYH,wBAAA,CAAA","file":"AreComponent.js","sourcesContent":["import { A_FormatterHelper, } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame\";\nimport { Are } from \"@adaas/are\";\nimport { AreHTMLNode } from \"@adaas/are-html/node\";\n\n\n@A_Frame.Entity({\n    namespace: 'A-ARE',\n    name: 'AreComponentNode',\n    description: 'AreComponentNode represents a node in the scene graph that corresponds to a component. It extends the base AreNode and includes additional properties and methods specific to component nodes, such as handling attributes, bindings, directives, events, styles, and interpolations associated with the component.'\n})\nexport class AreComponentNode extends AreHTMLNode {\n\n    /**\n     * A custom component associated with this node, which can be used to provide custom logic and behavior for the node. This component is typically defined in the context and can be resolved based on the node's type or other identifying information. The component can include its own template, markup, styles, and features that are specific to the functionality it provides.\n     * \n     * Example: If the node type is \"custom-component\", the corresponding component would be resolved from the context and can be used to provide custom rendering and behavior for nodes of that type.\n     * \n     * [!] Note: The component is optional and may not be defined for all nodes. If no component is associated with the node, it will be treated as a standard HTML element or a basic node without custom logic.\n     */\n    get component(): Are | undefined {\n        return this.scope.resolve<Are>(A_FormatterHelper.toPascalCase(this.aseid.entity)) as Are | undefined;\n    }\n\n}"]}

package/dist/node/nodes/AreComponent.mjs

@@ -0,0 +1,28 @@
+import { __decorateClass } from '../chunk-EQQGB2QZ.mjs';
+import { A_FormatterHelper } from '@adaas/a-concept';
+import { A_Frame } from '@adaas/a-frame';
+import { AreHTMLNode } from '@adaas/are-html/node';
+
+let AreComponentNode = class extends AreHTMLNode {
+  /**
+   * A custom component associated with this node, which can be used to provide custom logic and behavior for the node. This component is typically defined in the context and can be resolved based on the node's type or other identifying information. The component can include its own template, markup, styles, and features that are specific to the functionality it provides.
+   * 
+   * Example: If the node type is "custom-component", the corresponding component would be resolved from the context and can be used to provide custom rendering and behavior for nodes of that type.
+   * 
+   * [!] Note: The component is optional and may not be defined for all nodes. If no component is associated with the node, it will be treated as a standard HTML element or a basic node without custom logic.
+   */
+  get component() {
+    return this.scope.resolve(A_FormatterHelper.toPascalCase(this.aseid.entity));
+  }
+};
+AreComponentNode = __decorateClass([
+  A_Frame.Entity({
+    namespace: "A-ARE",
+    name: "AreComponentNode",
+    description: "AreComponentNode represents a node in the scene graph that corresponds to a component. It extends the base AreNode and includes additional properties and methods specific to component nodes, such as handling attributes, bindings, directives, events, styles, and interpolations associated with the component."
+  })
+], AreComponentNode);
+
+export { AreComponentNode };
+//# sourceMappingURL=AreComponent.mjs.map
+//# sourceMappingURL=AreComponent.mjs.map

package/dist/node/nodes/AreComponent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/nodes/AreComponent.ts"],"names":[],"mappings":";;;;;AAWO,IAAM,gBAAA,GAAN,cAA+B,WAAA,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9C,IAAI,SAAA,GAA6B;AAC7B,IAAA,OAAO,IAAA,CAAK,MAAM,OAAA,CAAa,iBAAA,CAAkB,aAAa,IAAA,CAAK,KAAA,CAAM,MAAM,CAAC,CAAA;AAAA,EACpF;AAEJ;AAba,gBAAA,GAAN,eAAA,CAAA;AAAA,EALN,QAAQ,MAAA,CAAO;AAAA,IACZ,SAAA,EAAW,OAAA;AAAA,IACX,IAAA,EAAM,kBAAA;AAAA,IACN,WAAA,EAAa;AAAA,GAChB;AAAA,CAAA,EACY,gBAAA,CAAA","file":"AreComponent.mjs","sourcesContent":["import { A_FormatterHelper, } from \"@adaas/a-concept\";\nimport { A_Frame } from \"@adaas/a-frame\";\nimport { Are } from \"@adaas/are\";\nimport { AreHTMLNode } from \"@adaas/are-html/node\";\n\n\n@A_Frame.Entity({\n    namespace: 'A-ARE',\n    name: 'AreComponentNode',\n    description: 'AreComponentNode represents a node in the scene graph that corresponds to a component. It extends the base AreNode and includes additional properties and methods specific to component nodes, such as handling attributes, bindings, directives, events, styles, and interpolations associated with the component.'\n})\nexport class AreComponentNode extends AreHTMLNode {\n\n    /**\n     * A custom component associated with this node, which can be used to provide custom logic and behavior for the node. This component is typically defined in the context and can be resolved based on the node's type or other identifying information. The component can include its own template, markup, styles, and features that are specific to the functionality it provides.\n     * \n     * Example: If the node type is \"custom-component\", the corresponding component would be resolved from the context and can be used to provide custom rendering and behavior for nodes of that type.\n     * \n     * [!] Note: The component is optional and may not be defined for all nodes. If no component is associated with the node, it will be treated as a standard HTML element or a basic node without custom logic.\n     */\n    get component(): Are | undefined {\n        return this.scope.resolve<Are>(A_FormatterHelper.toPascalCase(this.aseid.entity)) as Are | undefined;\n    }\n\n}"]}

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

@@ -0,0 +1,10 @@
+import { AreNodeNewProps } from '@adaas/are';
+import { e as AreHTMLNode } from '../AreBinding.attribute-C6qrxN8K.mjs';
+import '@adaas/a-concept';
+import '../lib/AreStyle/AreStyle.context.mjs';
+
+declare class AreInterpolation extends AreHTMLNode {
+    fromNew(newEntity: AreNodeNewProps): void;
+}
+
+export { AreInterpolation };