@mmstack/router-core 19.2.10 → 19.3.1

package/README.md

@@ -146,3 +146,178 @@ import { RouterLink } from '@angular/router';
 })
 export class NavigationComponent {}
 ```
+
+## Headless breadcrumb utilities
+
+This library includes a signal-based, headless toolkit for generating and managing breadcrumbs in your Angular application. It provides the logic to derive breadcrumb data from your routes, allowing you to easily build a completely custom breadcrumb UI component & let the library worry about active routes :)
+
+### Consuming breadcrumbs
+
+The primary way to access the breadcrumb data is via the `injectBreadcrumbs` function. It returns a `Signal<Breadcrumb[]>` that updates automatically as navigation changes. Each `Breadcrumb` object in the array contains reactive signals for its `label`, `link`, `ariaLabel`, and a static id for iteration purposes.
+
+```typescript
+import { Component } from '@angular/core';
+import { injectBreadcrumbs } from '@mmstack/router-core'; // Adjust path if needed
+
+@Component({
+  selector: 'app-breadcrumbs',
+  standalone: true,
+  template: `
+    <nav aria-label="breadcrumb">
+      <ol>
+        @for (crumb of breadcrumbs(); track crumb.id) {
+          <li>
+            <a [href]="crumb.link()" [attr.aria-label]="crumb.ariaLabel()">{{ crumb.label() }}</a>
+          </li>
+        }
+      </ol>
+    </nav>
+  `,
+})
+export class CustomBreadcrumbsComponent {
+  protected readonly breadcrumbs = injectBreadcrumbs();
+}
+```
+
+### Registering custom breadcrumbs
+
+For routes where automatic breadcrumb generation isn't sufficient or when you need more control, you can manually define breadcrumbs using the `createBreadcrumb` route resolver.
+
+This function allows you to specify the label (static or dynamic via a function) and other properties for a breadcrumb associated with a particular route.
+You can use injection in the factory function, as you would with any resolver, making translations or subscribing to dynamic data a breaze! :)
+
+```typescript
+import { Routes } from '@angular/router';
+import { createBreadcrumb } from '@mmstack/router-core';
+import { HomeComponent } from './home.component';
+import { UserProfileComponent } from './user-profile.component';
+import { UserStore } from './user.store';
+import { inject } from '@angular/core';
+import { AdminComponent } from './admin.component';
+
+export const appRoutes: Routes = [
+  {
+    path: 'home',
+    component: HomeComponent,
+    resolve: {
+      // Simple static breadcrumb
+      breadcrumb: createBreadcrumb(() => ({
+        label: 'Home',
+      })),
+    },
+  },
+  {
+    path: 'admin',
+    component: AdminComponent,
+    data: {
+      skipBreadcrumb: true, // opt out of auto-generation for this specific route
+    },
+  },
+  {
+    path: 'users/:userId',
+    component: UserProfileComponent,
+    resolve: {
+      breadcrumb: createBreadcrumb(() => {
+        const userStore = inject(UserStore);
+        return {
+          label: () => `Profile: ${userStore.currentUser().name}` ?? 'Loading...',
+          ariaLabel: () => `View profile for ${userStore.currentUser().name ?? 'user'}`,
+        };
+      }),
+    },
+  },
+];
+```
+
+### Configuration [optional]
+
+The breadcrumb system can be configured globally using `provideBreadcrumbConfig`. This allows you to, for example, set the system to 'manual' mode (disabling all automatic generation) or provide a custom function for generating breadcrumb labels.
+
+```typescript
+import { provideRouter } from '@angular/router';
+import { provideBreadcrumbConfig, BreadcrumbConfig, ResolvedLeafRoute } from '@mmstack/router-core'; // Adjust path
+import { appRoutes } from './app.routes';
+import { ApplicationConfig } from '@angular/core';
+
+// Example: Custom label generation strategy
+const customLabelStrategy = () => {
+  // you can inject root injectable services/stores here.
+  return (leaf: ResolvedLeafRoute): string => {
+    return leaf.route.data?.['navTitle'] || leaf.route.title || 'Default Title';
+  };
+};
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...rest
+    provideBreadcrumbConfig({
+      // generation: 'manual' // When set to 'manual' the system only uses explicitly defined breadcrumbs
+      generation: customLabelStrategy, // Or provide a custom generation function
+    }),
+  ],
+};
+```
+
+## Title utilities
+
+This library provides a helper function, `createTitle`, to set the document title dynamically from within your route configuration. It integrates seamlessly with Angular's built-in `title` property on routes, allowing for both static and signal-based reactive titles.
+
+By default, the system will use a title defined on a route's `data` or `title` property. createTitle enhances this by allowing titles to be derived from reactive state.
+
+### Using `createTitle`
+
+The `createTitle` function is a route resolver that returns a title string. You use it directly in the `title` property of a route definition. It can accept a function that returns a static string or a function that returns a dynamic string (which will be converted to a `signal`).
+
+```typescript
+import { Routes } from '@angular/router';
+import { createTitle } from '@mmstack/router-core';
+import { inject } from '@angular/core';
+import { ProductStore } from './product.store';
+
+export const appRoutes: Routes = [
+  {
+    path: 'about',
+    // Example 1: Static title
+    title: createTitle(() => 'About Us'), // static
+    loadComponent: () => import('./about.component').then((m) => m.AboutComponent),
+  },
+  {
+    path: 'products/:id',
+    // Example 2: Dynamic, signal-based title from a store
+    title: createTitle(() => {
+      const productStore = inject(ProductStore);
+      // The inner function creates a computed signal under the hood
+      return () => `Product: ${productStore.product().name ?? 'Loading...'}`;
+    }),
+    loadComponent: () => import('./product-detail.component').then((m) => m.ProductComponent),
+  },
+  {
+    path: 'home',
+    title: 'Home', // works normally
+    loadComponent: () => import('./home.component').then((m) => m.HomeComponent),
+  },
+];
+```
+
+### Configuration [optional]
+
+You can provide a global configuration to prepend or append text to all titles using provideTitleConfig.
+
+```typescript
+import { provideRouter } from '@angular/router';
+import { provideTitleConfig } from '@mmstack/router-core';
+import { appRoutes } from './app.routes';
+import { ApplicationConfig } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(appRoutes),
+    provideTitleConfig({
+      // Prefix can be a static string...
+      // prefix: 'My Awesome App | '
+
+      // ...or a function for more control over the format
+      prefix: (title) => (title ? `${title} - MyApp` : 'MyApp'),
+    }),
+  ],
+};
+```

package/fesm2022/mmstack-router-core.mjs

@@ -1,23 +1,59 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, computed, untracked, Injectable, DestroyRef, input, booleanAttribute, output, effect, Directive, isSignal } from '@angular/core';
+import { InjectionToken, inject, computed, Injectable, effect, untracked, input, booleanAttribute, output, Directive, isSignal } from '@angular/core';
 import * as i1 from '@angular/router';
-import { EventType, Router, createUrlTreeFromSnapshot, PRIMARY_OUTLET, UrlTree, RouterLink, RouterLinkWithHref, ActivatedRoute } from '@angular/router';
+import { EventType, Router, PRIMARY_OUTLET, createUrlTreeFromSnapshot, UrlTree, RouterLink, RouterLinkWithHref, ActivatedRoute } from '@angular/router';
 import { mutable, mapArray, until, elementVisibility, toWritable } from '@mmstack/primitives';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { filter, map } from 'rxjs/operators';
 import { Subject, EMPTY, filter as filter$1, take, switchMap, finalize } from 'rxjs';
+import { Title } from '@angular/platform-browser';
 
-const token = new InjectionToken('MMSTACK_BREADCRUMB_CONFIG');
+/**
+ * @internal
+ */
+const token$1 = new InjectionToken('MMSTACK_BREADCRUMB_CONFIG');
+/**
+ * Provides configuration for the breadcrumb system.
+ * @param config - A partial `BreadcrumbConfig` object with the desired settings. *
+ * @see BreadcrumbConfig
+ * @example
+ * ```typescript
+ * // In your app.module.ts or a standalone component's providers:
+ * // import { provideBreadcrumbConfig } from './breadcrumb.config'; // Adjust path
+ * // import { ResolvedLeafRoute } from './breadcrumb.type'; // Adjust path
+ *
+ * // const customLabelStrategy: GenerateBreadcrumbFn = () => {
+ * //   return (leaf: ResolvedLeafRoute): string => {
+ * //     // Example: Prioritize a 'navTitle' data property
+ * //     if (leaf.route.data?.['navTitle']) {
+ * //       return leaf.route.data['navTitle'];
+ * //     }
+ * //     // Fallback to a default mechanism
+ * //     return leaf.route.title || leaf.segment.resolved || 'Unnamed';
+ * //   };
+ * // };
+ *
+ * export const appConfig = [
+ *  // ...rest
+ *  provideBreadcrumbConfig({
+ *   generation: customLabelStrategy, // or 'manual' to disable auto-generation
+ *  }),
+ * ]
+ * ```
+ */
 function provideBreadcrumbConfig(config) {
     return {
-        provide: token,
+        provide: token$1,
         useValue: {
             ...config,
         },
     };
 }
+/**
+ * @internal
+ */
 function injectBreadcrumbConfig() {
-    return (inject(token, {
+    return (inject(token$1, {
         optional: true,
     }) ?? {});
 }
@@ -66,23 +102,6 @@ function url() {
     });
 }
 
-const INTERNAL_BREADCRUMB_SYMBOL = Symbol.for('MMSTACK_INTERNAL_BREADCRUMB');
-function getBreadcrumbInternals(breadcrumb) {
-    return breadcrumb[INTERNAL_BREADCRUMB_SYMBOL];
-}
-function createInternalBreadcrumb(bc, active, registered = true) {
-    return {
-        ...bc,
-        [INTERNAL_BREADCRUMB_SYMBOL]: {
-            active,
-            registered,
-        },
-    };
-}
-function isInternalBreadcrumb(breadcrumb) {
-    return !!breadcrumb[INTERNAL_BREADCRUMB_SYMBOL];
-}
-
 function leafRoutes() {
     const router = inject(Router);
     const getLeafRoutes = (snapshot) => {
@@ -123,6 +142,51 @@ function leafRoutes() {
     });
     return leafRoutes;
 }
+class RouteLeafStore {
+    leaves = leafRoutes();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: RouteLeafStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: RouteLeafStore, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: RouteLeafStore, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+function injectLeafRoutes() {
+    const store = inject(RouteLeafStore);
+    return store.leaves;
+}
+
+/**
+ * @internal
+ */
+const INTERNAL_BREADCRUMB_SYMBOL = Symbol.for('MMSTACK_INTERNAL_BREADCRUMB');
+/**
+ * @internal
+ */
+function getBreadcrumbInternals(breadcrumb) {
+    return breadcrumb[INTERNAL_BREADCRUMB_SYMBOL];
+}
+/**
+ * @internal
+ */
+function createInternalBreadcrumb(bc, active, registered = true) {
+    return {
+        ...bc,
+        [INTERNAL_BREADCRUMB_SYMBOL]: {
+            active,
+            registered,
+        },
+    };
+}
+/**
+ * @internal
+ */
+function isInternalBreadcrumb(breadcrumb) {
+    return !!breadcrumb[INTERNAL_BREADCRUMB_SYMBOL];
+}
+
 function uppercaseFirst(str) {
     const lcs = str.toLowerCase();
     return lcs.charAt(0).toUpperCase() + lcs.slice(1);
@@ -194,7 +258,8 @@ class BreadcrumbStore {
     map = mutable(new Map());
     isManual = injectIsManual();
     autoGenerateLabelFn = injectGenerateLabelFn();
-    all = mapArray(leafRoutes(), (leaf) => {
+    leafRoutes = injectLeafRoutes();
+    all = mapArray(this.leafRoutes, (leaf) => {
         const stableId = computed(() => leaf().path);
         return exposeActiveSignal(computed(() => {
             const id = stableId();
@@ -215,11 +280,23 @@ class BreadcrumbStore {
     });
     crumbs = computed(() => this.all().filter((c) => c.active()));
     unwrapped = computed(() => this.crumbs().map((c) => c()));
+    constructor() {
+        const activePaths = computed(() => this.leafRoutes().map((l) => l.path));
+        effect(() => {
+            const paths = activePaths();
+            if (!paths.length)
+                return this.map.inline((m) => m.clear());
+            this.map.inline((m) => {
+                for (const key of m.keys()) {
+                    if (paths.includes(key))
+                        continue;
+                    m.delete(key);
+                }
+            });
+        });
+    }
     register(breadcrumb) {
         this.map.inline((m) => m.set(breadcrumb.id, breadcrumb));
-        return () => {
-            this.map.inline((m) => m.delete(breadcrumb.id));
-        };
     }
     has(id) {
         return untracked(this.map).has(id);
@@ -232,56 +309,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+/**
+ * Injects and provides access to a reactive list of breadcrumbs.
+ *
+ * The breadcrumbs are ordered and reflect the current active navigation path.
+ * @see Breadcrumb
+ * @returns `Signal<Breadcrumb[]>`
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ * selector: 'app-breadcrumbs',
+ * template: `
+ *  <nav aria-label="breadcrumb">
+ *    <ol>
+ *      @for (crumb of breadcrumbs(); track crumb.id) {
+ *        <li>
+ *          <a [href]="crumb.link()" [attr.aria-label]="crumb.ariaLabel()">{{ crumb.label() }}</a>
+ *        </li>
+ *      }
+ *    </ol>
+ *  </nav>
+ * `
+ * })
+ * export class MyBreadcrumbsComponent {
+ *  breadcrumbs = injectBreadcrumbs();
+ * }
+ * ```
+ */
 function injectBreadcrumbs() {
     const store = inject(BreadcrumbStore);
     return store.unwrapped;
 }
 
-function createBreadcrumb(factory) {
-    return async (route) => {
-        const router = inject(Router);
-        const store = inject(BreadcrumbStore);
-        const segments = route.pathFromRoot.flatMap((snap) => snap.routeConfig?.path ?? []);
-        const joinedSegments = segments.filter(Boolean).join('/');
-        const fp = router.serializeUrl(router.parseUrl(joinedSegments));
-        if (store.has(fp))
-            return Promise.resolve();
-        const tree = createUrlTreeFromSnapshot(route, [], route.queryParams, route.fragment);
-        const provided = factory();
-        const trigger = url();
-        const link = computed(() => router.serializeUrl(tree));
-        const { label, ariaLabel = label } = provided;
-        const bc = {
-            id: fp,
-            ariaLabel: typeof ariaLabel === 'string'
-                ? computed(() => ariaLabel)
-                : computed(ariaLabel),
-            label: typeof label === 'string' ? computed(() => label) : computed(label),
-            link,
-        };
-        const deregister = store.register(createInternalBreadcrumb(bc, computed(() => route.data?.['skipBreadcrumb'] !== true)));
-        inject(DestroyRef).onDestroy(deregister);
-        if (provided.awaitValue)
-            await until(trigger, (v) => !!v);
-        return Promise.resolve();
-    };
-}
-
-class PreloadService {
-    preloadOnDemand$ = new Subject();
-    preloadRequested$ = this.preloadOnDemand$.asObservable();
-    startPreload(routePath) {
-        this.preloadOnDemand$.next(routePath);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PreloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PreloadService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PreloadService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 function parsePathSegment(segmentString) {
     const parts = segmentString.split(';');
     const pathPart = parts[0];
@@ -459,6 +520,90 @@ const findPath = (config, route) => {
     return normalizedPath;
 };
 
+function injectSnapshotPathResolver() {
+    const router = inject(Router);
+    return (route) => {
+        const segments = route.pathFromRoot.flatMap((snap) => snap.routeConfig?.path ?? []);
+        const joinedSegments = segments.filter(Boolean).join('/');
+        return router.serializeUrl(router.parseUrl(joinedSegments));
+    };
+}
+
+/**
+ * Creates and registers a breadcrumb for a specific route.
+ * This function is designed to be used as an Angular Route `ResolveFn`.
+ * It handles the registration of the breadcrumb with the `BreadcrumbStore`
+ * and ensures automatic deregistration when the route is destroyed.
+ *
+ * @param factory A function that returns a `CreateBreadcrumbOptions` object.
+ * @see CreateBreadcrumbOptions
+ *
+ * @example
+ * ```typescript
+ * export const appRoutes: Routes = [
+ *   {
+ *     path: 'home',
+ *     component: HomeComponent,
+ *     resolve: {
+ *       breadcrumb: createBreadcrumb(() => ({
+ *         label: 'Home',
+ *       });
+ *     },
+ *     path: 'users/:userId',
+ *     component: UserProfileComponent,
+ *     resolve: {
+ *       breadcrumb: createBreadcrumb(() => {
+ *         const userStore = inject(UserStore);
+ *         return {
+ *            label: () => userStore.user().name ?? 'Loading...
+ *        };
+ *      })
+ *     },
+ *   }
+ * ];
+ * ```
+ */
+function createBreadcrumb(factory) {
+    return async (route) => {
+        const router = inject(Router);
+        const store = inject(BreadcrumbStore);
+        const resolver = injectSnapshotPathResolver();
+        const fp = resolver(route);
+        if (store.has(fp))
+            return Promise.resolve();
+        const tree = createUrlTreeFromSnapshot(route, [], route.queryParams, route.fragment);
+        const provided = factory();
+        const link = computed(() => router.serializeUrl(tree));
+        const { label, ariaLabel = label } = provided;
+        const bc = {
+            id: fp,
+            ariaLabel: typeof ariaLabel === 'string'
+                ? computed(() => ariaLabel)
+                : computed(ariaLabel),
+            label: typeof label === 'string' ? computed(() => label) : computed(label),
+            link,
+        };
+        store.register(createInternalBreadcrumb(bc, computed(() => route.data?.['skipBreadcrumb'] !== true)));
+        if (provided.awaitValue)
+            await until(bc.label, (v) => !!v);
+        return Promise.resolve();
+    };
+}
+
+class PreloadService {
+    preloadOnDemand$ = new Subject();
+    preloadRequested$ = this.preloadOnDemand$.asObservable();
+    startPreload(routePath) {
+        this.preloadOnDemand$.next(routePath);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PreloadService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PreloadService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: PreloadService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 function hasSlowConnection() {
     if (globalThis.window &&
         'navigator' in globalThis.window &&
@@ -551,7 +696,7 @@ class LinkDirective {
     relativeTo = input();
     skipLocationChange = input(false, { transform: booleanAttribute });
     replaceUrl = input(false, { transform: booleanAttribute });
-    mmLink = input.required();
+    mmLink = input(null);
     preloadOn = input('hover');
     preloading = output();
     urlTree = computed(() => {
@@ -585,7 +730,7 @@ class LinkDirective {
         return this.routerLink?.onClick(button, ctrlKey, shiftKey, altKey, metaKey);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: LinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: LinkDirective, isStandalone: true, selector: "[mmLink]", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, relativeTo: { classPropertyName: "relativeTo", publicName: "relativeTo", isSignal: true, isRequired: false, transformFunction: null }, skipLocationChange: { classPropertyName: "skipLocationChange", publicName: "skipLocationChange", isSignal: true, isRequired: false, transformFunction: null }, replaceUrl: { classPropertyName: "replaceUrl", publicName: "replaceUrl", isSignal: true, isRequired: false, transformFunction: null }, mmLink: { classPropertyName: "mmLink", publicName: "mmLink", isSignal: true, isRequired: true, transformFunction: null }, preloadOn: { classPropertyName: "preloadOn", publicName: "preloadOn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { preloading: "preloading" }, host: { listeners: { "mouseenter": "onHover()" } }, exportAs: ["mmLink"], hostDirectives: [{ directive: i1.RouterLink, inputs: ["routerLink", "mmLink", "target", "target", "queryParams", "queryParams", "fragment", "fragment", "queryParamsHandling", "queryParamsHandling", "state", "state", "relativeTo", "relativeTo", "skipLocationChange", "skipLocationChange", "replaceUrl", "replaceUrl"] }], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.3", type: LinkDirective, isStandalone: true, selector: "[mmLink]", inputs: { target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, queryParamsHandling: { classPropertyName: "queryParamsHandling", publicName: "queryParamsHandling", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, relativeTo: { classPropertyName: "relativeTo", publicName: "relativeTo", isSignal: true, isRequired: false, transformFunction: null }, skipLocationChange: { classPropertyName: "skipLocationChange", publicName: "skipLocationChange", isSignal: true, isRequired: false, transformFunction: null }, replaceUrl: { classPropertyName: "replaceUrl", publicName: "replaceUrl", isSignal: true, isRequired: false, transformFunction: null }, mmLink: { classPropertyName: "mmLink", publicName: "mmLink", isSignal: true, isRequired: false, transformFunction: null }, preloadOn: { classPropertyName: "preloadOn", publicName: "preloadOn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { preloading: "preloading" }, host: { listeners: { "mouseenter": "onHover()" } }, exportAs: ["mmLink"], hostDirectives: [{ directive: i1.RouterLink, inputs: ["routerLink", "mmLink", "target", "target", "queryParams", "queryParams", "fragment", "fragment", "queryParamsHandling", "queryParamsHandling", "state", "state", "relativeTo", "relativeTo", "skipLocationChange", "skipLocationChange", "replaceUrl", "replaceUrl"] }], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: LinkDirective, decorators: [{
             type: Directive,
@@ -725,9 +870,108 @@ function queryParam(key) {
     return toWritable(queryParam, set);
 }
 
+const token = new InjectionToken('MMSTACK_TITLE_CONFIG');
+/**
+ * used to provide the title configuration, will not be applied unless a `createTitle` resolver is used
+ */
+function provideTitleConfig(config) {
+    const prefix = config?.prefix ?? '';
+    const prefixFn = typeof prefix === 'function'
+        ? prefix
+        : (title) => `${prefix}${title}`;
+    return {
+        provide: token,
+        useValue: {
+            parser: prefixFn,
+        },
+    };
+}
+function injectTitleConfig() {
+    return inject(token);
+}
+
+class TitleStore {
+    title = inject(Title);
+    map = mutable(new Map());
+    leafRoutes = injectLeafRoutes();
+    activeLeafPath = computed(() => this.leafRoutes().at(-1)?.path);
+    constructor() {
+        const currentTitleSignal = computed(() => {
+            const path = this.activeLeafPath();
+            if (!path)
+                return null;
+            return this.map().get(path) ?? null;
+        });
+        const fallback = computed(() => this.leafRoutes()
+            .toReversed()
+            .find((leaf) => leaf.route.title)?.route.title ?? '');
+        const currentTitle = computed(() => currentTitleSignal()?.() ?? fallback());
+        effect(() => {
+            this.title.setTitle(currentTitle());
+        });
+        effect(() => {
+            const activeLeafPath = this.activeLeafPath();
+            if (!activeLeafPath)
+                return this.map.inline((cur) => cur.clear());
+            this.map.inline((cur) => {
+                for (const key of cur.keys()) {
+                    if (key === activeLeafPath)
+                        continue;
+                    cur.delete(key);
+                }
+            });
+        });
+    }
+    register(id, titleFn) {
+        this.map.inline((m) => m.set(id, titleFn));
+    }
+    get(id) {
+        const found = untracked(this.map).get(id);
+        return found ? untracked(found) : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TitleStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TitleStore, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: TitleStore, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+/**
+ *
+ * Creates a title resolver function that can be used in Angular's router.
+ *
+ * @param fn
+ * A function that returns a string or a Signal<string> representing the title.
+ * @param awaitValue
+ * If `true`, the resolver will wait until the title signal has a value before resolving.
+ * Defaults to `false`.
+ */
+function createTitle(fn, awaitValue = false) {
+    return async (route) => {
+        const store = inject(TitleStore);
+        const resolver = injectSnapshotPathResolver();
+        const fp = resolver(route);
+        const found = store.get(fp);
+        if (found)
+            return Promise.resolve(found);
+        const { parser } = injectTitleConfig();
+        const resolved = fn();
+        const titleSignal = typeof resolved === 'string'
+            ? computed(() => resolved)
+            : computed(resolved);
+        const parsedTitleSignal = computed(() => parser(titleSignal()));
+        store.register(fp, parsedTitleSignal);
+        if (awaitValue)
+            await until(parsedTitleSignal, (v) => !!v);
+        return Promise.resolve(untracked(parsedTitleSignal));
+    };
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LinkDirective, PreloadStrategy, createBreadcrumb, injectBreadcrumbs, injectTriggerPreload, provideBreadcrumbConfig, queryParam, url };
+export { LinkDirective, PreloadStrategy, createBreadcrumb, createTitle, injectBreadcrumbs, injectTriggerPreload, provideBreadcrumbConfig, provideTitleConfig, queryParam, url };
 //# sourceMappingURL=mmstack-router-core.mjs.map