npm - @adaas/are-html - Versions diffs - 0.0.23 → 0.0.25 - Mend

@adaas/are-html 0.0.23 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/examples/lazy-loading/dist/index.html ADDED Viewed

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ARE · Lazy Loading</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { background: #09090b; color: #f4f4f5; }
+    /* The mount root is a real block-level container. */
+    are-root { display: block; }
+    /*
+     * ARE wraps every component (and interpolated text) in a custom tag:
+     *   <app-shell><div class="shell">…  ·  <nav-bar><aside class="nav">…
+     * Left as default `display: inline`, those wrappers — and the empty
+     * whitespace <are-text> nodes between siblings — become the actual
+     * grid/flex items, so layout lands on the wrapper instead of the styled
+     * inner element and stray <are-text> items break the grid columns.
+     *
+     * `display: contents` makes each wrapper's box disappear while keeping its
+     * children in the parent's flow, so `.shell`'s grid sees `.nav` and `main`
+     * directly, and empty <are-text> nodes contribute nothing.
+     */
+    app-shell, nav-bar, lazy-outlet, are-text,
+    home-page, about-page, settings-page, reports-page { display: contents; }
+  </style>
+</head>
+<body>
+  <!-- Outer ARE root: renders the persistent AppShell (nav + dynamic outlet). -->
+  <are-root id="app"><app-shell></app-shell></are-root>
+  <script type="module" src="./app.js"></script>
+</body>
+</html>

package/examples/lazy-loading/dist/lazy/about-page.js ADDED Viewed

@@ -0,0 +1,59 @@
+import {
+  Are,
+  Yt,
+  __decorateClass,
+  __decorateParam,
+  __name,
+  te
+} from "../chunks/chunk-6K72IBO4.js";
+// examples/lazy-loading/src/lazy/AboutPage.component.ts
+var _AboutPage = class _AboutPage extends Are {
+  template(node) {
+    node.setContent(`
+            <section class="page">
+                <span class="eyebrow">Lazy \xB7 fetched on demand</span>
+                <h1 class="page-title">About this example</h1>
+                <p class="page-lead">
+                    You just triggered a dynamic <code>import('/lazy/about-page.js')</code>.
+                    The class was registered into the running scope and rendered into the
+                    outlet \u2014 no page reload, and it wasn't in the initial bundle.
+                </p>
+                <div class="grid">
+                    <div class="card"><h3>Code-split</h3><p>The app and every lazy bundle share framework chunks, so this class <code>extends</code> the same <code>Are</code> runtime.</p></div>
+                    <div class="card"><h3>Backend-driven</h3><p>The server's <code>/api/components</code> manifest decided this page exists and where to fetch it.</p></div>
+                    <div class="card"><h3>Cached</h3><p>Revisit /about \u2014 no second network request. The manifest marks it loaded.</p></div>
+                </div>
+            </section>
+        `);
+  }
+  styles(node) {
+    node.setStyles(`
+            .page { padding: 48px 56px; max-width: 860px; }
+            .eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; margin-bottom: 20px; color: #fcd34d; background: rgba(252, 211, 77, 0.12); }
+            .page-title { font-size: 32px; font-weight: 800; color: #f4f4f5; margin-bottom: 14px; letter-spacing: -0.02em; }
+            .page-lead { font-size: 16px; color: #a1a1aa; line-height: 1.7; margin-bottom: 28px; }
+            code { background: #27272a; padding: 2px 6px; border-radius: 4px; color: #a78bfa; font-size: 13px; }
+            .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
+            .card { background: #1c1c1f; border: 1px solid #27272a; border-radius: 12px; padding: 20px; }
+            .card h3 { font-size: 15px; font-weight: 600; color: #f4f4f5; margin-bottom: 8px; }
+            .card p { font-size: 13px; color: #71717a; line-height: 1.6; }
+            .card code { font-size: 12px; }
+        `);
+  }
+};
+__name(_AboutPage, "AboutPage");
+__decorateClass([
+  Are.Template,
+  __decorateParam(0, Yt(te))
+], _AboutPage.prototype, "template", 1);
+__decorateClass([
+  Are.Styles,
+  __decorateParam(0, Yt(te))
+], _AboutPage.prototype, "styles", 1);
+var AboutPage = _AboutPage;
+var AboutPage_component_default = AboutPage;
+export {
+  AboutPage,
+  AboutPage_component_default as default
+};

package/examples/lazy-loading/dist/lazy/reports-page.js ADDED Viewed

@@ -0,0 +1,65 @@
+import {
+  Are,
+  Yt,
+  __decorateClass,
+  __decorateParam,
+  __name,
+  te
+} from "../chunks/chunk-6K72IBO4.js";
+// examples/lazy-loading/src/lazy/ReportsPage.component.ts
+var _ReportsPage = class _ReportsPage extends Are {
+  template(node) {
+    node.setContent(`
+            <section class="page">
+                <span class="eyebrow">Lazy \xB7 fetched on demand</span>
+                <h1 class="page-title">Reports</h1>
+                <p class="page-lead">Heavy, rarely-visited views are ideal lazy-load candidates \u2014 they stay out of the critical path.</p>
+                <div class="stats">
+                    <div class="stat"><div class="stat-value">1,284</div><div class="stat-label">Components served</div></div>
+                    <div class="stat"><div class="stat-value">96 ms</div><div class="stat-label">Avg load time</div></div>
+                    <div class="stat"><div class="stat-value">3</div><div class="stat-label">Lazy bundles</div></div>
+                    <div class="stat"><div class="stat-value">100%</div><div class="stat-label">Cache hit on revisit</div></div>
+                </div>
+                <div class="bars">
+                    <div class="bar" style="height: 38%"></div>
+                    <div class="bar" style="height: 62%"></div>
+                    <div class="bar" style="height: 48%"></div>
+                    <div class="bar" style="height: 81%"></div>
+                    <div class="bar" style="height: 55%"></div>
+                    <div class="bar" style="height: 72%"></div>
+                    <div class="bar" style="height: 90%"></div>
+                </div>
+            </section>
+        `);
+  }
+  styles(node) {
+    node.setStyles(`
+            .page { padding: 48px 56px; max-width: 860px; }
+            .eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; margin-bottom: 20px; color: #fcd34d; background: rgba(252, 211, 77, 0.12); }
+            .page-title { font-size: 32px; font-weight: 800; color: #f4f4f5; margin-bottom: 14px; letter-spacing: -0.02em; }
+            .page-lead { font-size: 16px; color: #a1a1aa; line-height: 1.7; margin-bottom: 28px; }
+            .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin-bottom: 32px; }
+            .stat { background: #1c1c1f; border: 1px solid #27272a; border-radius: 12px; padding: 20px; }
+            .stat-value { font-size: 26px; font-weight: 800; color: #a78bfa; }
+            .stat-label { font-size: 12px; color: #71717a; margin-top: 6px; }
+            .bars { display: flex; align-items: flex-end; gap: 12px; height: 180px; padding: 20px; background: #1c1c1f; border: 1px solid #27272a; border-radius: 12px; }
+            .bar { flex: 1; background: linear-gradient(180deg, #a78bfa, #7c3aed); border-radius: 6px 6px 0 0; }
+        `);
+  }
+};
+__name(_ReportsPage, "ReportsPage");
+__decorateClass([
+  Are.Template,
+  __decorateParam(0, Yt(te))
+], _ReportsPage.prototype, "template", 1);
+__decorateClass([
+  Are.Styles,
+  __decorateParam(0, Yt(te))
+], _ReportsPage.prototype, "styles", 1);
+var ReportsPage = _ReportsPage;
+var ReportsPage_component_default = ReportsPage;
+export {
+  ReportsPage,
+  ReportsPage_component_default as default
+};

package/examples/lazy-loading/dist/lazy/settings-page.js ADDED Viewed

@@ -0,0 +1,54 @@
+import {
+  Are,
+  Yt,
+  __decorateClass,
+  __decorateParam,
+  __name,
+  te
+} from "../chunks/chunk-6K72IBO4.js";
+// examples/lazy-loading/src/lazy/SettingsPage.component.ts
+var _SettingsPage = class _SettingsPage extends Are {
+  template(node) {
+    node.setContent(`
+            <section class="page">
+                <span class="eyebrow">Lazy \xB7 fetched on demand</span>
+                <h1 class="page-title">Settings</h1>
+                <p class="page-lead">A second independently-served bundle. It shares the framework runtime with the app via code-split chunks.</p>
+                <div class="settings">
+                    <label class="row"><span>Dark theme</span><input type="checkbox" checked /></label>
+                    <label class="row"><span>Compact density</span><input type="checkbox" /></label>
+                    <label class="row"><span>Telemetry</span><input type="checkbox" /></label>
+                    <label class="row"><span>Auto-update components</span><input type="checkbox" checked /></label>
+                </div>
+            </section>
+        `);
+  }
+  styles(node) {
+    node.setStyles(`
+            .page { padding: 48px 56px; max-width: 640px; }
+            .eyebrow { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; margin-bottom: 20px; color: #fcd34d; background: rgba(252, 211, 77, 0.12); }
+            .page-title { font-size: 32px; font-weight: 800; color: #f4f4f5; margin-bottom: 14px; letter-spacing: -0.02em; }
+            .page-lead { font-size: 16px; color: #a1a1aa; line-height: 1.7; margin-bottom: 28px; }
+            .settings { display: flex; flex-direction: column; gap: 2px; border: 1px solid #27272a; border-radius: 12px; overflow: hidden; }
+            .row { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #1c1c1f; font-size: 14px; color: #e4e4e7; }
+            .row + .row { border-top: 1px solid #27272a; }
+            .row input { width: 18px; height: 18px; accent-color: #a78bfa; }
+        `);
+  }
+};
+__name(_SettingsPage, "SettingsPage");
+__decorateClass([
+  Are.Template,
+  __decorateParam(0, Yt(te))
+], _SettingsPage.prototype, "template", 1);
+__decorateClass([
+  Are.Styles,
+  __decorateParam(0, Yt(te))
+], _SettingsPage.prototype, "styles", 1);
+var SettingsPage = _SettingsPage;
+var SettingsPage_component_default = SettingsPage;
+export {
+  SettingsPage,
+  SettingsPage_component_default as default
+};

package/examples/lazy-loading/public/index.html ADDED Viewed

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ARE · Lazy Loading</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { background: #09090b; color: #f4f4f5; }
+    /* The mount root is a real block-level container. */
+    are-root { display: block; }
+    /*
+     * ARE wraps every component (and interpolated text) in a custom tag:
+     *   <app-shell><div class="shell">…  ·  <nav-bar><aside class="nav">…
+     * Left as default `display: inline`, those wrappers — and the empty
+     * whitespace <are-text> nodes between siblings — become the actual
+     * grid/flex items, so layout lands on the wrapper instead of the styled
+     * inner element and stray <are-text> items break the grid columns.
+     *
+     * `display: contents` makes each wrapper's box disappear while keeping its
+     * children in the parent's flow, so `.shell`'s grid sees `.nav` and `main`
+     * directly, and empty <are-text> nodes contribute nothing.
+     */
+    app-shell, nav-bar, lazy-outlet, are-text,
+    home-page, about-page, settings-page, reports-page { display: contents; }
+  </style>
+</head>
+<body>
+  <!-- Outer ARE root: renders the persistent AppShell (nav + dynamic outlet). -->
+  <are-root id="app"><app-shell></app-shell></are-root>
+  <script type="module" src="./app.js"></script>
+</body>
+</html>

package/examples/lazy-loading/src/components/AppShell.component.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+/**
+ * Persistent application shell: the sidebar nav + the dynamic `<lazy-outlet>`.
+ *
+ * `<lazy-outlet>` is this example's dynamic slot. It plays the role `AreRoot`
+ * plays in the signal-routing example, but it can also fetch + register a
+ * component that wasn't in the initial bundle before rendering it.
+ */
+export class AppShell extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(`
+            <div class="shell">
+                <nav-bar></nav-bar>
+                <main class="shell-main">
+                    <lazy-outlet></lazy-outlet>
+                </main>
+            </div>
+        `);
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .shell {
+                display: grid;
+                grid-template-columns: 240px 1fr;
+                min-height: 100vh;
+                background: #09090b;
+                color: #f4f4f5;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            }
+            .shell-main {
+                padding: 0;
+                overflow: auto;
+            }
+        `);
+    }
+}

package/examples/lazy-loading/src/components/HomePage.component.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { Are, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+/**
+ * Home page — EAGER. It ships in the initial app bundle and is registered at
+ * bootstrap, so it paints with no extra network request.
+ */
+export class HomePage extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(`
+            <section class="page">
+                <span class="eyebrow eyebrow-eager">Eager · bundled</span>
+                <h1 class="page-title">Runtime Lazy Component Loading</h1>
+                <p class="page-lead">
+                    This dashboard ships with only the shell, the navigation and this
+                    home page. The other pages are <strong>separate JS bundles served by
+                    the backend</strong> and fetched the first time you open them.
+                </p>
+                <ol class="steps">
+                    <li><strong>Discover</strong> — the app fetches <code>/api/components</code> to learn which components exist and where to load them.</li>
+                    <li><strong>Fetch</strong> — on first navigation the matching bundle is loaded via dynamic <code>import()</code>.</li>
+                    <li><strong>Register</strong> — the returned class is registered into the live scope (<code>scope.register</code>).</li>
+                    <li><strong>Render</strong> — the outlet builds + mounts the subtree; the new tag is now recognized.</li>
+                </ol>
+                <p class="hint">Open DevTools → Network and click a <em>Lazy</em> page to watch its bundle load once.</p>
+            </section>
+        `);
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .page { padding: 48px 56px; max-width: 820px; }
+            .eyebrow {
+                display: inline-block;
+                font-size: 11px;
+                font-weight: 700;
+                text-transform: uppercase;
+                letter-spacing: 0.06em;
+                padding: 4px 10px;
+                border-radius: 999px;
+                margin-bottom: 20px;
+            }
+            .eyebrow-eager { color: #34d399; background: rgba(52, 211, 153, 0.12); }
+            .page-title { font-size: 34px; font-weight: 800; color: #f4f4f5; margin-bottom: 16px; letter-spacing: -0.02em; }
+            .page-lead { font-size: 17px; color: #a1a1aa; line-height: 1.7; margin-bottom: 28px; }
+            .page-lead strong { color: #f4f4f5; }
+            .steps { color: #d4d4d8; font-size: 15px; line-height: 1.8; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
+            .steps strong { color: #a78bfa; }
+            code { background: #27272a; padding: 2px 6px; border-radius: 4px; color: #a78bfa; font-size: 13px; }
+            .hint { margin-top: 28px; font-size: 13px; color: #71717a; }
+            .hint em { color: #fcd34d; font-style: normal; }
+        `);
+    }
+}

package/examples/lazy-loading/src/components/LazyOutlet.component.ts ADDED Viewed

@@ -0,0 +1,108 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_Logger } from "@adaas/a-utils/a-logger";
+import { Are, AreNode, AreSignalsContext } from "@adaas/are";
+import { ComponentManifest } from "../runtime/ComponentManifest.fragment";
+/**
+ * LazyOutlet — the route-driven slot.
+ *
+ * Thanks to the engine primitives this is now tiny: it only decides WHICH tag
+ * to show for the current route and asks the node to (re)render. It does NOT
+ * fetch, import or register anything — when the engine hits an unregistered
+ * lazy tag during render it consults the app's `LazyComponentResolver`
+ * (an `AreComponentResolver`), which imports the bundle; the engine then
+ * registers the class globally. Teardown + build are the engine's `clear()` /
+ * `render()` primitives, so there is no copy-pasted lifecycle loop and no
+ * destroy-ordering hazard here anymore.
+ *
+ * [!] Production apps should prefer `<are-root>` for routing: it adds
+ * signal-aware teardown (unsubscribe + LRU cache of detached subtrees) on top
+ * of the same primitives. This outlet reproduces just the unsubscribe step so
+ * the swapped-out subtree stops receiving route signals (otherwise a detached
+ * subtree keeps reacting to the bus and throws on its torn-down scope).
+ */
+export class LazyOutlet extends Are {
+    @Are.Template
+    template(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(ComponentManifest) manifest: ComponentManifest,
+    ) {
+        // INITIAL render (supports deep links, e.g. a hard refresh on /about).
+        // Only set the content tag — the engine's load pipeline builds this
+        // outlet's children right after template() returns and will resolve the
+        // (possibly lazy) component via the registered AreComponentResolver.
+        const route = document.location.pathname || '/';
+        const entry = manifest.match(route) ?? manifest.match('/');
+        if (entry) {
+            node.setContent(`<${entry.tag}></${entry.tag}>`);
+        }
+    }
+    @Are.Signal
+    async onSignal(
+        @A_Inject(A_Caller) node: AreNode,
+        @A_Inject(A_Logger) logger: A_Logger,
+        @A_Inject(ComponentManifest) manifest: ComponentManifest,
+        @A_Inject(AreSignalsContext) signalsContext?: AreSignalsContext,
+    ) {
+        // RUNTIME route change. NavBar pushState()s before dispatching the route
+        // signal, so the live location already reflects the destination.
+        const route = document.location.pathname || '/';
+        const entry = manifest.match(route) ?? manifest.match('/');
+        if (!entry) {
+            logger.warning(`LazyOutlet: no component mapped to route "${route}".`);
+            return;
+        }
+        // Already showing the target component — nothing to do.
+        if (node.children[0]?.type === entry.tag) {
+            return;
+        }
+        // Unsubscribe the outgoing subtree from the signal bus BEFORE tearing it
+        // down. Without this the detached subtree keeps receiving route signals
+        // and reacts on a scope that no longer exists. (AreRoot does this too.)
+        if (signalsContext) {
+            for (const child of [...node.children]) {
+                for (const subscriber of this.collectSubscribers(child, signalsContext)) {
+                    signalsContext.unsubscribe(subscriber);
+                }
+            }
+        }
+        // Full swap via the engine primitives: tear down the old subtree, set
+        // the new tag, build + mount. The engine resolves a lazy class through
+        // the AreComponentResolver during render() if it isn't registered yet.
+        await node.clear();
+        node.setContent(`<${entry.tag}></${entry.tag}>`);
+        await node.render();
+    }
+    /**
+     * Walk a subtree and collect the nodes currently subscribed to the signal
+     * bus, so they can be unsubscribed before the subtree is detached.
+     */
+    protected collectSubscribers(
+        node: AreNode,
+        signalsContext: AreSignalsContext,
+    ): AreNode[] {
+        const result: AreNode[] = [];
+        const queue: AreNode[] = [node];
+        while (queue.length > 0) {
+            const current = queue.shift()!;
+            if (signalsContext.subscribers.has(current)) {
+                result.push(current);
+            }
+            queue.push(...current.children);
+        }
+        return result;
+    }
+}

package/examples/lazy-loading/src/components/NavBar.component.ts ADDED Viewed

@@ -0,0 +1,98 @@
+import { A_Caller, A_Inject } from "@adaas/a-concept";
+import { A_SignalBus } from "@adaas/a-utils/a-signal";
+import { Are, AreEvent, AreNode } from "@adaas/are";
+import { AreHTMLNode } from "src";
+import { AreRoute } from "@adaas/are-html/signals/AreRoute.signal";
+/**
+ * Sidebar navigation. Each link dispatches an `AreRoute` signal on the bus;
+ * `LazyOutlet` picks it up and swaps (lazy-loading if necessary) the page.
+ *
+ * The "Lazy" badge marks pages whose code is NOT in the initial bundle — open
+ * the network tab and watch the corresponding `.js` request fire the first time
+ * you click one.
+ */
+export class NavBar extends Are {
+    @Are.Template
+    template(@A_Inject(A_Caller) node: AreNode) {
+        node.setContent(`
+            <aside class="nav">
+                <div class="nav-brand">ARE · Lazy Loading</div>
+                <nav class="nav-links">
+                    <a href="/" @click="$navigate('/')">Home</a>
+                    <a href="/about" @click="$navigate('/about')">About <span class="badge">Lazy</span></a>
+                    <a href="/settings" @click="$navigate('/settings')">Settings <span class="badge">Lazy</span></a>
+                    <a href="/reports" @click="$navigate('/reports')">Reports <span class="badge">Lazy</span></a>
+                </nav>
+                <div class="nav-foot">Pages tagged <span class="badge">Lazy</span> are fetched on first visit.</div>
+            </aside>
+        `);
+    }
+    @Are.Styles
+    styles(@A_Inject(A_Caller) node: AreHTMLNode) {
+        node.setStyles(`
+            .nav {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+                padding: 24px 16px;
+                background: #18181b;
+                border-right: 1px solid #27272a;
+            }
+            .nav-brand {
+                font-size: 15px;
+                font-weight: 700;
+                color: #a78bfa;
+                letter-spacing: -0.02em;
+                margin-bottom: 16px;
+            }
+            .nav-links { display: flex; flex-direction: column; gap: 4px; }
+            .nav-links a {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 9px 14px;
+                border-radius: 8px;
+                text-decoration: none;
+                color: #a1a1aa;
+                font-size: 14px;
+                font-weight: 500;
+                transition: background 0.15s, color 0.15s;
+            }
+            .nav-links a:hover { background: #27272a; color: #f4f4f5; }
+            .badge {
+                font-size: 10px;
+                font-weight: 700;
+                text-transform: uppercase;
+                letter-spacing: 0.04em;
+                color: #fcd34d;
+                background: rgba(252, 211, 77, 0.12);
+                padding: 2px 6px;
+                border-radius: 999px;
+            }
+            .nav-foot {
+                margin-top: auto;
+                font-size: 11px;
+                color: #52525b;
+                line-height: 1.5;
+                padding: 12px 14px;
+            }
+        `);
+    }
+    @Are.EventHandler
+    navigate(
+        @A_Inject(AreEvent) event: AreEvent,
+        @A_Inject(A_SignalBus) bus: A_SignalBus,
+    ) {
+        const e = event.get('native') as MouseEvent;
+        e?.preventDefault();
+        const path = event.get('args')?.[0] as string ?? '/';
+        history.pushState({}, '', path);
+        bus.next(new AreRoute(path));
+    }
+}