@mk-kit/ui 0.34.0

package/fesm2022/mk-kit-ui-directives.mjs

@@ -0,0 +1,1779 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DOCUMENT, PLATFORM_ID, input, booleanAttribute, output, effect, Directive, numberAttribute, signal, afterNextRender, Injector, computed, Injectable, DestroyRef, TemplateRef, ViewContainerRef } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+/**
+ * Emits when a pointer press lands outside the host element — the building block
+ * for dismissing menus, popovers and custom dropdowns. Listens on the document
+ * in the capture phase so it fires before the target handles the event.
+ *
+ * ```html
+ * <div class="panel" (mkClickOutside)="close()">…</div>
+ * ```
+ */
+class MkClickOutside {
+    host = inject(ElementRef);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Disable the listener without removing the directive. */
+    enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'mkClickOutsideEnabled',
+        transform: booleanAttribute });
+    /** Emits the originating event when a pointerdown occurs outside the host. */
+    mkClickOutside = output();
+    onPointerdown = (event) => {
+        // Defensive: the listener detaches on the effect flush after `enabled`
+        // flips false, so also ignore any event racing in before that.
+        if (!this.enabled())
+            return;
+        const target = event.target;
+        if (target && !this.host.nativeElement.contains(target)) {
+            this.mkClickOutside.emit(event);
+        }
+    };
+    constructor() {
+        // The document listener exists only while `enabled()` — an idle directive
+        // must not run its handler (and wake change detection) on every pointer
+        // press on the page. Effect cleanup also detaches it on destroy.
+        effect((onCleanup) => {
+            if (!this.isBrowser || !this.enabled())
+                return;
+            this.document.addEventListener('pointerdown', this.onPointerdown, true);
+            onCleanup(() => this.document.removeEventListener('pointerdown', this.onPointerdown, true));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkClickOutside, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkClickOutside, isStandalone: true, selector: "[mkClickOutside]", inputs: { enabled: { classPropertyName: "enabled", publicName: "mkClickOutsideEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mkClickOutside: "mkClickOutside" }, exportAs: ["mkClickOutside"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkClickOutside, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkClickOutside]',
+                    exportAs: 'mkClickOutside',
+                }]
+        }], ctorParameters: () => [], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkClickOutsideEnabled", required: false }] }], mkClickOutside: [{ type: i0.Output, args: ["mkClickOutside"] }] } });
+
+/**
+ * Copies text to the clipboard when the host is clicked. Emits `(copied)` on
+ * success and `(copyFailed)` on error, and exposes a transient `copied` signal
+ * (via `exportAs`) so a template can show a "Copied!" state without extra code.
+ *
+ * ```html
+ * <button mkButton [mkCopyToClipboard]="token" #c="mkCopyToClipboard">
+ *   {{ c.justCopied() ? 'Copied!' : 'Copy' }}
+ * </button>
+ * ```
+ */
+class MkCopyToClipboard {
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** The text to copy. */
+    text = input.required({ ...(ngDevMode ? { debugName: "text" } : /* istanbul ignore next */ {}), alias: 'mkCopyToClipboard' });
+    /** How long (ms) the `copied` signal stays true after a successful copy. */
+    feedbackDuration = input(1500, { ...(ngDevMode ? { debugName: "feedbackDuration" } : /* istanbul ignore next */ {}), alias: 'mkCopyFeedbackDuration',
+        transform: numberAttribute });
+    /** Emits the copied text on success. */
+    copied = output({ alias: 'copiedText' });
+    /** Emits the error on failure. */
+    copyFailed = output();
+    _copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_copied" }] : /* istanbul ignore next */ []));
+    /** True for `feedbackDuration` ms after a successful copy. */
+    justCopied = this._copied.asReadonly();
+    resetTimer;
+    /** Copy the text now. Bound to the host click, but callable directly too. */
+    async copy() {
+        if (!this.isBrowser)
+            return;
+        const value = this.text();
+        try {
+            await this.write(value);
+            this.copied.emit(value);
+            this.flagCopied();
+        }
+        catch (err) {
+            this.copyFailed.emit(err);
+        }
+    }
+    async write(value) {
+        const clipboard = this.document.defaultView?.navigator?.clipboard;
+        if (clipboard?.writeText) {
+            await clipboard.writeText(value);
+            return;
+        }
+        // Fallback for non-secure contexts: a hidden textarea + execCommand.
+        const ta = this.document.createElement('textarea');
+        ta.value = value;
+        ta.setAttribute('readonly', '');
+        ta.style.cssText = 'position:fixed;top:-9999px;opacity:0;';
+        this.document.body.appendChild(ta);
+        ta.select();
+        const ok = typeof this.document.execCommand === 'function' &&
+            this.document.execCommand('copy');
+        ta.remove();
+        if (!ok)
+            throw new Error('Clipboard copy failed');
+    }
+    flagCopied() {
+        this._copied.set(true);
+        if (this.resetTimer)
+            clearTimeout(this.resetTimer);
+        // Reset after the feedback window (guarded so tests without a view work).
+        this.resetTimer = setTimeout(() => this._copied.set(false), this.feedbackDuration());
+    }
+    ngOnDestroy() {
+        if (this.resetTimer)
+            clearTimeout(this.resetTimer);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCopyToClipboard, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkCopyToClipboard, isStandalone: true, selector: "[mkCopyToClipboard]", inputs: { text: { classPropertyName: "text", publicName: "mkCopyToClipboard", isSignal: true, isRequired: true, transformFunction: null }, feedbackDuration: { classPropertyName: "feedbackDuration", publicName: "mkCopyFeedbackDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copiedText", copyFailed: "copyFailed" }, host: { listeners: { "click": "copy()" } }, exportAs: ["mkCopyToClipboard"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCopyToClipboard, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkCopyToClipboard]',
+                    exportAs: 'mkCopyToClipboard',
+                    host: {
+                        '(click)': 'copy()',
+                    },
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkCopyToClipboard", required: true }] }], feedbackDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkCopyFeedbackDuration", required: false }] }], copied: [{ type: i0.Output, args: ["copiedText"] }], copyFailed: [{ type: i0.Output, args: ["copyFailed"] }] } });
+
+/**
+ * Grows a `<textarea>` to fit its content, between `minRows` and `maxRows`
+ * (0 = unbounded). Resizes on input and when the bound value changes.
+ *
+ * ```html
+ * <textarea mkInput mkAutosize [mkAutosizeMaxRows]="8" [(ngModel)]="note"></textarea>
+ * ```
+ */
+class MkAutosize {
+    el = inject(ElementRef);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Minimum height in rows. */
+    minRows = input(1, { ...(ngDevMode ? { debugName: "minRows" } : /* istanbul ignore next */ {}), alias: 'mkAutosizeMinRows',
+        transform: numberAttribute });
+    /** Maximum height in rows before scrolling (0 = unbounded). */
+    maxRows = input(0, { ...(ngDevMode ? { debugName: "maxRows" } : /* istanbul ignore next */ {}), alias: 'mkAutosizeMaxRows',
+        transform: numberAttribute });
+    /** Bind the textarea's value so programmatic changes trigger a resize. */
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : /* istanbul ignore next */ {}), alias: 'mkAutosizeValue' });
+    constructor() {
+        afterNextRender(() => this.resize());
+        // Re-fit whenever the bound value (or the row bounds) change.
+        effect(() => {
+            this.value();
+            this.minRows();
+            this.maxRows();
+            if (this.isBrowser)
+                queueMicrotask(() => this.resize());
+        });
+    }
+    /** Recompute the textarea height from its content. */
+    resize() {
+        if (!this.isBrowser)
+            return;
+        const ta = this.el.nativeElement;
+        const style = this.document.defaultView?.getComputedStyle(ta);
+        const line = parseFloat(style?.lineHeight ?? '') || 20;
+        const vPad = parseFloat(style?.paddingTop ?? '0') +
+            parseFloat(style?.paddingBottom ?? '0') +
+            parseFloat(style?.borderTopWidth ?? '0') +
+            parseFloat(style?.borderBottomWidth ?? '0');
+        ta.style.height = 'auto';
+        const content = ta.scrollHeight;
+        const min = this.minRows() * line + vPad;
+        const max = this.maxRows() > 0 ? this.maxRows() * line + vPad : Infinity;
+        const height = Math.min(max, Math.max(min, content));
+        ta.style.height = `${height}px`;
+        ta.style.overflowY = content > max ? 'auto' : 'hidden';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAutosize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkAutosize, isStandalone: true, selector: "textarea[mkAutosize]", inputs: { minRows: { classPropertyName: "minRows", publicName: "mkAutosizeMinRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "mkAutosizeMaxRows", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "mkAutosizeValue", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "resize()" }, styleAttribute: "resize: none;" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAutosize, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'textarea[mkAutosize]',
+                    host: {
+                        '(input)': 'resize()',
+                        style: 'resize: none;',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkAutosizeMinRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkAutosizeMaxRows", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkAutosizeValue", required: false }] }] } });
+
+/**
+ * Focuses the host element once it renders. Handy for dialogs, drawers and
+ * newly-revealed forms. Disable conditionally with `[mkAutofocus]="cond"`.
+ *
+ * ```html
+ * <input mkInput mkAutofocus />
+ * <input mkInput [mkAutofocus]="isEditing()" [mkAutofocusDelay]="100" />
+ * ```
+ */
+class MkAutofocus {
+    el = inject(ElementRef);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Whether to focus. Bare `mkAutofocus` = true. */
+    enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'mkAutofocus',
+        transform: booleanAttribute });
+    /** Delay before focusing, in ms (e.g. to wait out an entrance animation). */
+    delay = input(0, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), alias: 'mkAutofocusDelay',
+        transform: numberAttribute });
+    timeoutId;
+    constructor() {
+        afterNextRender(() => {
+            if (!this.isBrowser || !this.enabled())
+                return;
+            if (this.delay() > 0) {
+                this.timeoutId = this.document.defaultView?.setTimeout(() => this.focus(), this.delay());
+            }
+            else {
+                this.focus();
+            }
+        });
+    }
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    ngOnDestroy() {
+        if (this.timeoutId != null) {
+            this.document.defaultView?.clearTimeout(this.timeoutId);
+            this.timeoutId = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAutofocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkAutofocus, isStandalone: true, selector: "[mkAutofocus]", inputs: { enabled: { classPropertyName: "enabled", publicName: "mkAutofocus", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "mkAutofocusDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAutofocus, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkAutofocus]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkAutofocus", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkAutofocusDelay", required: false }] }] } });
+
+/**
+ * Scrollspy — tracks which section is currently in view and exposes its `id`,
+ * so a table of contents / "on this page" nav can highlight the active link.
+ *
+ * Apply it to any element (typically the nav) and point `mkScrollspy` at a CSS
+ * selector matching the section elements to watch (each needs an `id`). Read the
+ * active id via the exported instance, or bind `(activeChange)`:
+ *
+ * ```html
+ * <nav mkScrollspy="main :is(h2, h3)[id]" #spy="mkScrollspy">
+ *   <a href="#intro" [class.is-active]="spy.activeId() === 'intro'">Intro</a>
+ *   …
+ * </nav>
+ * ```
+ *
+ * A section activates once its top passes `offset` px below the top of the
+ * scroll root (default the viewport). When scrolling through a gap between
+ * sections the previous one stays active until the next crosses the line.
+ */
+class MkScrollspy {
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** CSS selector for the section elements to track (queried within `root`). */
+    sections = input.required({ ...(ngDevMode ? { debugName: "sections" } : /* istanbul ignore next */ {}), alias: 'mkScrollspy' });
+    /**
+     * Scroll container. Sections are queried inside it and its top edge is the
+     * activation reference. Defaults to the whole document / viewport.
+     */
+    root = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
+    /**
+     * Distance (px) below the scroll root's top at which a section becomes
+     * active. Raise it to account for a sticky header.
+     */
+    offset = input(96, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /** The id of the currently active section (`null` before the first one). */
+    activeId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []));
+    /** Emitted whenever the active section changes. */
+    activeChange = output();
+    scrollSource;
+    constructor() {
+        // afterNextRender runs once inputs are bound, so root()/sections() resolve
+        // and the projected sections exist in the DOM.
+        afterNextRender(() => {
+            if (!this.isBrowser)
+                return;
+            const view = this.document.defaultView;
+            this.scrollSource = this.root() ?? view ?? undefined;
+            this.scrollSource?.addEventListener('scroll', this.onScroll, {
+                passive: true,
+            });
+            view?.addEventListener('resize', this.onScroll);
+            this.compute();
+        });
+    }
+    /** Re-evaluate the active section (call after sections change). */
+    refresh() {
+        if (this.isBrowser)
+            this.compute();
+    }
+    querySections() {
+        const rootEl = this.root() ?? this.document;
+        return Array.from(rootEl.querySelectorAll(this.sections()));
+    }
+    computeRaf = null;
+    /** rAF-coalesced — several scroll ticks per frame trigger one layout read. */
+    onScroll = () => {
+        if (this.computeRaf != null)
+            return;
+        this.computeRaf =
+            this.document.defaultView?.requestAnimationFrame(() => {
+                this.computeRaf = null;
+                this.compute();
+            }) ?? null;
+    };
+    compute() {
+        const sections = this.querySections();
+        if (!sections.length) {
+            this.setActive(null);
+            return;
+        }
+        // At the very bottom the final section may be too short to reach the line —
+        // activate it explicitly so the last nav item can still highlight.
+        if (this.atBottom()) {
+            this.setActive(sections[sections.length - 1].id || null);
+            return;
+        }
+        const rootEl = this.root();
+        const line = (rootEl ? rootEl.getBoundingClientRect().top : 0) + this.offset();
+        // Active = the last section whose top has crossed the activation line.
+        let active = null;
+        for (const section of sections) {
+            if (section.getBoundingClientRect().top - line <= 1)
+                active = section;
+            else
+                break;
+        }
+        // Nothing crossed yet (still above the first section) → highlight the first.
+        this.setActive((active ?? sections[0]).id || null);
+    }
+    /** Whether the scroll root is scrolled to (or within 1px of) its bottom. */
+    atBottom() {
+        const root = this.root();
+        if (root) {
+            return root.scrollTop + root.clientHeight >= root.scrollHeight - 1;
+        }
+        const view = this.document.defaultView;
+        if (!view)
+            return false;
+        const doc = this.document.documentElement;
+        return view.scrollY + view.innerHeight >= doc.scrollHeight - 1;
+    }
+    setActive(id) {
+        if (this.activeId() === id)
+            return;
+        this.activeId.set(id);
+        this.activeChange.emit(id);
+    }
+    ngOnDestroy() {
+        if (this.computeRaf != null) {
+            this.document.defaultView?.cancelAnimationFrame(this.computeRaf);
+            this.computeRaf = null;
+        }
+        this.scrollSource?.removeEventListener('scroll', this.onScroll);
+        this.document.defaultView?.removeEventListener('resize', this.onScroll);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkScrollspy, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkScrollspy, isStandalone: true, selector: "[mkScrollspy]", inputs: { sections: { classPropertyName: "sections", publicName: "mkScrollspy", isSignal: true, isRequired: true, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeChange: "activeChange" }, exportAs: ["mkScrollspy"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkScrollspy, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkScrollspy]',
+                    exportAs: 'mkScrollspy',
+                }]
+        }], ctorParameters: () => [], propDecorators: { sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkScrollspy", required: true }] }], root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }] } });
+
+/**
+ * Intersect — a thin `IntersectionObserver` wrapper. Emits `(mkIntersect)` with
+ * the host's visibility whenever it enters or leaves the viewport (or `root`),
+ * and exposes an `intersecting` signal via `exportAs`. Set `once` to fire a
+ * single time and disconnect — the primitive for reveal-on-scroll animations
+ * and lazy loading.
+ *
+ * ```html
+ * <img [attr.src]="loaded() ? src : null" mkIntersect once
+ *      (mkIntersect)="loaded.set(true)" />
+ *
+ * <div mkIntersect #io="mkIntersect" [class.in-view]="io.intersecting()">…</div>
+ * ```
+ */
+class MkIntersect {
+    host = inject(ElementRef);
+    document = inject(DOCUMENT);
+    injector = inject(Injector);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Element used as the viewport for the check (defaults to the browser one). */
+    root = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
+    /** Margin grown/shrunk around the root before computing intersection. */
+    rootMargin = input('0px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootMargin" }] : /* istanbul ignore next */ []));
+    /** Visibility ratio(s) at which the observer fires. */
+    threshold = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []));
+    /** Emit the first time the host becomes visible, then disconnect. */
+    once = input(false, { ...(ngDevMode ? { debugName: "once" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emits the host's `isIntersecting` state on every change. */
+    mkIntersect = output();
+    /** The current visibility, also readable via `exportAs`. */
+    intersecting = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "intersecting" }] : /* istanbul ignore next */ []));
+    observer;
+    constructor() {
+        afterNextRender(() => {
+            if (!this.isBrowser || typeof IntersectionObserver === 'undefined')
+                return;
+            this.observer = new IntersectionObserver((entries) => this.onEntries(entries), {
+                root: this.root(),
+                rootMargin: this.rootMargin(),
+                threshold: this.threshold(),
+            });
+            this.observer.observe(this.host.nativeElement);
+        }, { injector: this.injector });
+    }
+    onEntries(entries) {
+        // Ignore any callback queued before we disconnected (e.g. after `once`).
+        if (!this.observer)
+            return;
+        const entry = entries[entries.length - 1];
+        const visible = entry.isIntersecting;
+        if (visible === this.intersecting())
+            return;
+        this.intersecting.set(visible);
+        this.mkIntersect.emit(visible);
+        if (visible && this.once())
+            this.disconnect();
+    }
+    disconnect() {
+        this.observer?.disconnect();
+        this.observer = undefined;
+    }
+    ngOnDestroy() {
+        this.disconnect();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkIntersect, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkIntersect, isStandalone: true, selector: "[mkIntersect]", inputs: { root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null }, rootMargin: { classPropertyName: "rootMargin", publicName: "rootMargin", isSignal: true, isRequired: false, transformFunction: null }, threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, once: { classPropertyName: "once", publicName: "once", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mkIntersect: "mkIntersect" }, exportAs: ["mkIntersect"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkIntersect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkIntersect]',
+                    exportAs: 'mkIntersect',
+                }]
+        }], ctorParameters: () => [], propDecorators: { root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: false }] }], rootMargin: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootMargin", required: false }] }], threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], once: [{ type: i0.Input, args: [{ isSignal: true, alias: "once", required: false }] }], mkIntersect: [{ type: i0.Output, args: ["mkIntersect"] }] } });
+
+/**
+ * InfiniteScroll — emits `(mkInfiniteScroll)` when the host scroll container is
+ * scrolled within `distance` px of its bottom, so a list can load its next
+ * page. Apply it to the scrollable element (`overflow: auto`). It fires once per
+ * approach and re-arms after you scroll back up past the threshold, so a single
+ * gesture never triggers repeated loads. Set `disabled` while a page is loading
+ * or once everything is loaded.
+ *
+ * ```html
+ * <div class="feed" mkInfiniteScroll [disabled]="loading() || done()"
+ *      (mkInfiniteScroll)="loadMore()">
+ *   @for (item of items(); track item.id) { … }
+ * </div>
+ * ```
+ */
+class MkInfiniteScroll {
+    host = inject(ElementRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Distance (px) from the bottom at which the output fires. */
+    distance = input(200, { ...(ngDevMode ? { debugName: "distance" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Pause firing (e.g. while a page is loading or all items are loaded). */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted when the host is scrolled near its bottom. */
+    mkInfiniteScroll = output();
+    /** Whether the next bottom-approach is allowed to fire. */
+    armed = true;
+    constructor() {
+        afterNextRender(() => {
+            if (!this.isBrowser)
+                return;
+            this.host.nativeElement.addEventListener('scroll', this.onScroll, {
+                passive: true,
+            });
+            // Fire immediately if the initial content doesn't fill the container.
+            this.check();
+        });
+    }
+    onScroll = () => this.check();
+    check() {
+        const el = this.host.nativeElement;
+        const remaining = el.scrollHeight - el.scrollTop - el.clientHeight;
+        if (remaining > this.distance()) {
+            // Scrolled away from the bottom — allow the next approach to fire.
+            this.armed = true;
+            return;
+        }
+        if (!this.armed || this.disabled())
+            return;
+        this.armed = false;
+        this.mkInfiniteScroll.emit();
+    }
+    ngOnDestroy() {
+        this.host.nativeElement.removeEventListener('scroll', this.onScroll);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkInfiniteScroll, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkInfiniteScroll, isStandalone: true, selector: "[mkInfiniteScroll]", inputs: { distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mkInfiniteScroll: "mkInfiniteScroll" }, exportAs: ["mkInfiniteScroll"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkInfiniteScroll, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkInfiniteScroll]',
+                    exportAs: 'mkInfiniteScroll',
+                }]
+        }], ctorParameters: () => [], propDecorators: { distance: [{ type: i0.Input, args: [{ isSignal: true, alias: "distance", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], mkInfiniteScroll: [{ type: i0.Output, args: ["mkInfiniteScroll"] }] } });
+
+/**
+ * Ripple — a Material-style touch ripple that expands from the pointer on press.
+ * Apply it to any pressable surface (button, list item, card). The directive
+ * makes the host a positioned, clipping container and paints a short-lived wave;
+ * it respects `prefers-reduced-motion`.
+ *
+ * ```html
+ * <button mkRipple>Save</button>
+ * <li mkRipple mkRippleColor="var(--mk-primary)">Item</li>
+ * ```
+ */
+class MkRipple {
+    host = inject(ElementRef);
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    /** Wave colour (any CSS colour). Defaults to the host's `currentColor`. */
+    color = input('', { ...(ngDevMode ? { debugName: "color" } : /* istanbul ignore next */ {}), alias: 'mkRippleColor' });
+    /** Start every ripple from the centre instead of the pointer. */
+    centered = input(false, { ...(ngDevMode ? { debugName: "centered" } : /* istanbul ignore next */ {}), alias: 'mkRippleCentered',
+        transform: booleanAttribute });
+    /** Turn the effect off. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'mkRippleDisabled',
+        transform: booleanAttribute });
+    spawn(event) {
+        if (!this.isBrowser || this.disabled())
+            return;
+        const el = this.host.nativeElement;
+        const view = this.document.defaultView;
+        if (view?.matchMedia?.('(prefers-reduced-motion: reduce)').matches)
+            return;
+        // Make the host a positioned, clipping container (idempotent).
+        const cs = view?.getComputedStyle(el);
+        if (cs && cs.position === 'static')
+            el.style.position = 'relative';
+        el.style.overflow = 'hidden';
+        const rect = el.getBoundingClientRect();
+        const x = this.centered() ? rect.width / 2 : event.clientX - rect.left;
+        const y = this.centered() ? rect.height / 2 : event.clientY - rect.top;
+        // Radius that reaches the farthest corner from the origin.
+        const radius = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));
+        const wave = this.document.createElement('span');
+        wave.className = 'mk-ripple__wave';
+        Object.assign(wave.style, {
+            position: 'absolute',
+            left: `${x - radius}px`,
+            top: `${y - radius}px`,
+            width: `${radius * 2}px`,
+            height: `${radius * 2}px`,
+            borderRadius: '50%',
+            background: this.color() || 'currentColor',
+            pointerEvents: 'none',
+            transform: 'scale(0)',
+            opacity: '0.3',
+        });
+        el.appendChild(wave);
+        const cleanup = () => wave.remove();
+        const anim = wave.animate?.([
+            { transform: 'scale(0)', opacity: 0.3 },
+            { transform: 'scale(1)', opacity: 0 },
+        ], { duration: 500, easing: 'ease-out' });
+        if (anim)
+            anim.onfinish = cleanup;
+        // Fallback removal in case the animation never resolves (or is unsupported).
+        view?.setTimeout(cleanup, 650);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRipple, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkRipple, isStandalone: true, selector: "[mkRipple]", inputs: { color: { classPropertyName: "color", publicName: "mkRippleColor", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "mkRippleCentered", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "mkRippleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "spawn($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRipple, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkRipple]',
+                    host: {
+                        '(pointerdown)': 'spawn($event)',
+                    },
+                }]
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkRippleColor", required: false }] }], centered: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkRippleCentered", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkRippleDisabled", required: false }] }] } });
+
+/** Token → predicate for the character it accepts. */
+const MK_MASK_TOKENS = {
+    '0': /[0-9]/, // digit
+    A: /[A-Za-z]/, // letter
+    '*': /[0-9A-Za-z]/, // alphanumeric
+};
+const ALNUM = /[0-9A-Za-z]/;
+/**
+ * Format `value` against a mask `pattern`. Pattern tokens: `0` = digit,
+ * `A` = letter, `*` = alphanumeric; any other character is a literal that is
+ * inserted automatically. Characters that don't fit the current token are
+ * skipped, so pasted / mistyped input is coerced into shape.
+ *
+ * Returns the `masked` (display) string and the `unmasked` string (only the
+ * token characters — the value you usually store).
+ */
+function mkApplyMask(value, pattern) {
+    let masked = '';
+    let unmasked = '';
+    let vi = 0;
+    for (let pi = 0; pi < pattern.length; pi++) {
+        const pc = pattern[pi];
+        const rule = MK_MASK_TOKENS[pc];
+        if (rule) {
+            while (vi < value.length && !rule.test(value[vi]))
+                vi++;
+            if (vi >= value.length)
+                break;
+            masked += value[vi];
+            unmasked += value[vi];
+            vi++;
+        }
+        else {
+            // Stop rather than emit a trailing literal with no content after it.
+            if (vi >= value.length)
+                break;
+            masked += pc;
+            if (value[vi] === pc)
+                vi++;
+        }
+    }
+    return { masked, unmasked };
+}
+/**
+ * Compute where the caret belongs after re-masking: after the same number of
+ * value (alphanumeric) characters the caret used to sit behind, absorbing any
+ * literal(s) that immediately follow — so typing "1" in "(0)" lands the caret
+ * after the "(". Shared by {@link MkMask} and the masked form controls.
+ */
+function mkMaskCaret(oldValue, oldCaret, masked) {
+    const before = oldValue.slice(0, oldCaret);
+    const target = (before.match(/[0-9A-Za-z]/g) ?? []).length;
+    let pos = 0;
+    let seen = 0;
+    while (pos < masked.length && seen < target) {
+        if (ALNUM.test(masked[pos]))
+            seen++;
+        pos++;
+    }
+    while (pos < masked.length && !ALNUM.test(masked[pos]))
+        pos++;
+    return pos;
+}
+/**
+ * Mask — formats an `<input>` as the user types against a token pattern
+ * (phone, card, date, custom). Apply it to any text input; read the raw value
+ * via `(unmaskedChange)` (or the exported `unmasked` getter) and the formatted
+ * value via `(maskedChange)`.
+ *
+ * ```html
+ * <input mkInput mkMask="(000) 000-0000" (unmaskedChange)="phone.set($event)" />
+ * <input mkInput mkMask="0000 0000 0000 0000" />
+ * ```
+ */
+class MkMask {
+    host = inject(ElementRef);
+    /** The mask pattern (token string). */
+    pattern = input.required({ ...(ngDevMode ? { debugName: "pattern" } : /* istanbul ignore next */ {}), alias: 'mkMask' });
+    /** Override the derived `inputmode` (`numeric` for digit-only masks). */
+    maskInputmode = input(null, { ...(ngDevMode ? { debugName: "maskInputmode" } : /* istanbul ignore next */ {}), alias: 'mkMaskInputmode' });
+    /** Mobile keyboard hint: numeric for digit-only patterns unless overridden. */
+    inputMode = computed(() => this.maskInputmode() ?? (/[A*]/.test(this.pattern()) ? 'text' : 'numeric'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+    /** The formatted value, on every change. */
+    maskedChange = output();
+    /** The raw value (token characters only), on every change. */
+    unmaskedChange = output();
+    _masked = '';
+    _unmasked = '';
+    /** The current formatted value. */
+    get value() {
+        return this._masked;
+    }
+    /** The current raw value (token characters only). */
+    get unmasked() {
+        return this._unmasked;
+    }
+    onInput() {
+        const el = this.host.nativeElement;
+        const oldValue = el.value;
+        const oldCaret = el.selectionStart ?? oldValue.length;
+        const { masked, unmasked } = mkApplyMask(oldValue, this.pattern());
+        el.value = masked;
+        this.setCaret(el, oldValue, oldCaret, masked);
+        if (masked === this._masked)
+            return;
+        this._masked = masked;
+        this._unmasked = unmasked;
+        this.maskedChange.emit(masked);
+        this.unmaskedChange.emit(unmasked);
+    }
+    /** Position the caret after the same number of value chars as before. */
+    setCaret(el, oldValue, oldCaret, masked) {
+        const pos = mkMaskCaret(oldValue, oldCaret, masked);
+        try {
+            el.setSelectionRange(pos, pos);
+        }
+        catch {
+            // Some input types (e.g. number, email) don't support selection.
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMask, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkMask, isStandalone: true, selector: "[mkMask]", inputs: { pattern: { classPropertyName: "pattern", publicName: "mkMask", isSignal: true, isRequired: true, transformFunction: null }, maskInputmode: { classPropertyName: "maskInputmode", publicName: "mkMaskInputmode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maskedChange: "maskedChange", unmaskedChange: "unmaskedChange" }, host: { listeners: { "input": "onInput()" }, properties: { "attr.inputmode": "inputMode()" } }, exportAs: ["mkMask"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkMask, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkMask]',
+                    exportAs: 'mkMask',
+                    host: {
+                        '(input)': 'onInput()',
+                        '[attr.inputmode]': 'inputMode()',
+                    },
+                }]
+        }], propDecorators: { pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkMask", required: true }] }], maskInputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkMaskInputmode", required: false }] }], maskedChange: [{ type: i0.Output, args: ["maskedChange"] }], unmaskedChange: [{ type: i0.Output, args: ["unmaskedChange"] }] } });
+
+/** The attributes a field preset can control. */
+const MK_FIELD_ATTRS = [
+    'type',
+    'inputmode',
+    'autocomplete',
+    'autocapitalize',
+    'autocorrect',
+    'spellcheck',
+    'enterkeyhint',
+];
+/**
+ * The attribute bundle per field kind. Exported so hosts can inspect what a
+ * kind resolves to, or spread an entry into their own preset table.
+ *
+ * `autocorrect` (non-standard, honoured by iOS Safari) is set to `off`
+ * wherever `spellcheck` is `false`.
+ */
+const MK_FIELD_PRESETS = {
+    email: {
+        type: 'email',
+        inputmode: 'email',
+        autocomplete: 'email',
+        autocapitalize: 'off',
+        autocorrect: 'off',
+        spellcheck: 'false',
+    },
+    tel: { type: 'tel', inputmode: 'tel', autocomplete: 'tel' },
+    url: {
+        type: 'url',
+        inputmode: 'url',
+        autocomplete: 'url',
+        autocapitalize: 'off',
+        autocorrect: 'off',
+        spellcheck: 'false',
+    },
+    search: {
+        type: 'search',
+        inputmode: 'search',
+        autocomplete: 'off',
+        autocapitalize: 'off',
+        autocorrect: 'off',
+        spellcheck: 'false',
+        enterkeyhint: 'search',
+    },
+    numeric: { inputmode: 'numeric' },
+    'given-name': {
+        type: 'text',
+        autocomplete: 'given-name',
+        autocapitalize: 'words',
+    },
+    'family-name': {
+        type: 'text',
+        autocomplete: 'family-name',
+        autocapitalize: 'words',
+    },
+    name: { type: 'text', autocomplete: 'name', autocapitalize: 'words' },
+    organization: {
+        type: 'text',
+        autocomplete: 'organization',
+        autocapitalize: 'words',
+    },
+    street: {
+        type: 'text',
+        autocomplete: 'street-address',
+        autocapitalize: 'words',
+    },
+    'address-line1': {
+        type: 'text',
+        autocomplete: 'address-line1',
+        autocapitalize: 'words',
+    },
+    'address-line2': {
+        type: 'text',
+        autocomplete: 'address-line2',
+        autocapitalize: 'words',
+    },
+    city: {
+        type: 'text',
+        autocomplete: 'address-level2',
+        autocapitalize: 'words',
+    },
+    region: {
+        type: 'text',
+        autocomplete: 'address-level1',
+        autocapitalize: 'words',
+    },
+    country: {
+        type: 'text',
+        autocomplete: 'country-name',
+        autocapitalize: 'words',
+    },
+    'postal-code': {
+        type: 'text',
+        autocomplete: 'postal-code',
+        autocapitalize: 'characters',
+        autocorrect: 'off',
+        spellcheck: 'false',
+    },
+    username: {
+        type: 'text',
+        autocomplete: 'username',
+        autocapitalize: 'off',
+        autocorrect: 'off',
+        spellcheck: 'false',
+    },
+    'one-time-code': {
+        type: 'text',
+        inputmode: 'numeric',
+        autocomplete: 'one-time-code',
+        autocapitalize: 'off',
+        autocorrect: 'off',
+        spellcheck: 'false',
+    },
+};
+/**
+ * Field — applies the semantic mobile-keyboard and autofill attribute bundle
+ * for a kind of field, so you never again ship an email input that iOS
+ * capitalises or an address input the browser can't autofill.
+ *
+ * It sets `type`, `inputmode`, `autocomplete`, `autocapitalize`, `autocorrect`,
+ * `spellcheck` and `enterkeyhint` (see {@link MK_FIELD_PRESETS}) and nothing
+ * else — no styling, no value handling — so it composes with `mkInput`,
+ * `mk-form-field`, `[(ngModel)]` and reactive forms untouched.
+ *
+ * ```html
+ * <input mkInput mkField="email" formControlName="email" />
+ * <input mkInput mkField="street" formControlName="street" />
+ * <input mkInput [mkField]="isCompany() ? 'organization' : 'name'" />
+ * ```
+ *
+ * ## Precedence
+ *
+ * A **static** attribute you write on the element wins: the directive reads the
+ * seven attributes once at construction (before any host binding has run) and
+ * keeps whatever was already there, filling in only what you left out. So
+ * `<input mkField="username" type="password" />` stays a password field but
+ * still gets `autocomplete="username"`, `autocapitalize="off"`, …
+ *
+ * A **template binding** for the same attribute (`[attr.autocomplete]="…"`)
+ * does *not* win — Angular applies directive host bindings after template
+ * bindings, so the preset overwrites it. Use a static attribute to override, or
+ * drop `mkField` and set the bundle yourself.
+ */
+class MkField {
+    el = inject(ElementRef);
+    /** Which kind of field this is. */
+    kind = input.required({ ...(ngDevMode ? { debugName: "kind" } : /* istanbul ignore next */ {}), alias: 'mkField' });
+    /**
+     * Attributes the consumer put on the element themselves, read once before
+     * any host binding has run — these always win over the preset.
+     */
+    authored = Object.fromEntries(MK_FIELD_ATTRS.map((name) => [name, this.el.nativeElement.getAttribute(name)]).filter(([, value]) => value !== null));
+    /** The resolved attribute bundle: authored value, else preset, else unset. */
+    attrs = computed(() => {
+        const preset = MK_FIELD_PRESETS[this.kind()] ?? {};
+        const resolved = {};
+        for (const name of MK_FIELD_ATTRS) {
+            resolved[name] = this.authored[name] ?? preset[name] ?? null;
+        }
+        return resolved;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "attrs" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkField, isStandalone: true, selector: "[mkField]", inputs: { kind: { classPropertyName: "kind", publicName: "mkField", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.type": "attrs().type", "attr.inputmode": "attrs().inputmode", "attr.autocomplete": "attrs().autocomplete", "attr.autocapitalize": "attrs().autocapitalize", "attr.autocorrect": "attrs().autocorrect", "attr.spellcheck": "attrs().spellcheck", "attr.enterkeyhint": "attrs().enterkeyhint" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkField, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkField]',
+                    host: {
+                        '[attr.type]': 'attrs().type',
+                        '[attr.inputmode]': 'attrs().inputmode',
+                        '[attr.autocomplete]': 'attrs().autocomplete',
+                        '[attr.autocapitalize]': 'attrs().autocapitalize',
+                        '[attr.autocorrect]': 'attrs().autocorrect',
+                        '[attr.spellcheck]': 'attrs().spellcheck',
+                        '[attr.enterkeyhint]': 'attrs().enterkeyhint',
+                    },
+                }]
+        }], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkField", required: true }] }] } });
+
+/**
+ * MkHistoryStack — a pure, signal-based, linear undo/redo command stack with
+ * no Angular DI involved. Instantiate it directly for a local editing session
+ * (a dialog, a canvas, a form wizard), or use the app-wide singleton
+ * {@link MkHistoryService}.
+ *
+ * ```ts
+ * const stack = new MkHistoryStack();
+ * deleteRow(row);                                  // 1. do the work yourself
+ * stack.push({                                     // 2. record how to revert/redo it
+ *   label: 'Delete row',
+ *   undo: () => insertRow(row),
+ *   redo: () => deleteRow(row),
+ * });
+ * stack.undo();                                    // row is back
+ * ```
+ *
+ * ### Linear history
+ * `push()` clears the redo branch — after undoing twice and pushing a new
+ * entry, the two undone entries are gone (the standard editor model).
+ *
+ * ### ⚠️ Re-entrancy guard — the classic footgun
+ * Pushes made **while** `undo()` or `redo()` is executing are **silently
+ * ignored**. Naive consumers often record history from a generic change
+ * handler (`(cellEdit)`, `valueChanges`, …); when an undo replays the old
+ * value, that same handler fires again and would push a mirror entry,
+ * corrupting the stack into an undo/redo ping-pong. The guard makes that
+ * pattern safe by construction. If you need to record something new in
+ * response to an undo, do it after `undo()` returns.
+ */
+class MkHistoryStack {
+    undoStack = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "undoStack" }] : /* istanbul ignore next */ []));
+    redoStack = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "redoStack" }] : /* istanbul ignore next */ []));
+    /** True while an entry's `undo()`/`redo()` is running (re-entrancy guard). */
+    replaying = false;
+    /** Depth of nested `batch()` calls; > 0 while a batch is collecting. */
+    batchDepth = 0;
+    batchLabel = '';
+    batchBuffer = [];
+    maxSize = 100;
+    /** True when at least one entry can be undone. */
+    canUndo = computed(() => this.undoStack().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+    /** True when at least one undone entry can be redone. */
+    canRedo = computed(() => this.redoStack().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+    /** Label of the entry `undo()` would revert, or `null` ("Undo *Delete row*"). */
+    undoLabel = computed(() => this.undoStack().at(-1)?.label ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "undoLabel" }] : /* istanbul ignore next */ []));
+    /** Label of the entry `redo()` would re-apply, or `null`. */
+    redoLabel = computed(() => this.redoStack().at(-1)?.label ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "redoLabel" }] : /* istanbul ignore next */ []));
+    /** Number of undoable entries currently on the stack. */
+    size = computed(() => this.undoStack().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of undoable entries kept (default `100`). When exceeded the
+     * **oldest** entries are dropped. Settable at any time; lowering it trims
+     * the stack immediately. Values below 1 are clamped to 1.
+     */
+    get limit() {
+        return this.maxSize;
+    }
+    set limit(value) {
+        this.maxSize = Math.max(1, Math.floor(value));
+        this.undoStack.update((stack) => stack.length > this.maxSize ? stack.slice(stack.length - this.maxSize) : stack);
+    }
+    /**
+     * Record an already-performed action. Clears the redo branch and evicts the
+     * oldest entry beyond {@link limit}. Ignored while `undo()`/`redo()` is
+     * executing (see the re-entrancy note on the class) — inside a `batch()` the
+     * entry is collected into the composite instead.
+     */
+    push(entry) {
+        if (this.replaying)
+            return;
+        if (this.batchDepth > 0) {
+            this.batchBuffer.push(entry);
+            return;
+        }
+        this.commit(entry);
+    }
+    /** Undo the most recent entry. Returns `false` when there is nothing to undo. */
+    undo() {
+        const entry = this.undoStack().at(-1);
+        if (!entry)
+            return false;
+        this.undoStack.update((stack) => stack.slice(0, -1));
+        this.replaying = true;
+        try {
+            entry.undo();
+        }
+        finally {
+            this.replaying = false;
+        }
+        this.redoStack.update((stack) => [...stack, entry]);
+        return true;
+    }
+    /** Redo the most recently undone entry. Returns `false` when there is nothing to redo. */
+    redo() {
+        const entry = this.redoStack().at(-1);
+        if (!entry)
+            return false;
+        this.redoStack.update((stack) => stack.slice(0, -1));
+        this.replaying = true;
+        try {
+            entry.redo();
+        }
+        finally {
+            this.replaying = false;
+        }
+        this.undoStack.update((stack) => [...stack, entry]);
+        return true;
+    }
+    /** Drop all entries (both branches) and any in-flight batch collection. */
+    clear() {
+        this.undoStack.set([]);
+        this.redoStack.set([]);
+        this.batchBuffer = [];
+    }
+    /**
+     * Group every `push()` made during `work()` into **one** undoable step.
+     * Undo runs the children in reverse order; redo runs them forward. Nested
+     * `batch()` calls flatten into the outermost batch (its label wins). An
+     * empty batch records nothing. Returns `work()`'s result; if `work()`
+     * throws, entries pushed before the throw are still committed.
+     */
+    batch(label, work) {
+        if (this.replaying)
+            return work();
+        this.batchDepth++;
+        if (this.batchDepth === 1) {
+            this.batchLabel = label;
+            this.batchBuffer = [];
+        }
+        try {
+            return work();
+        }
+        finally {
+            this.batchDepth--;
+            if (this.batchDepth === 0 && this.batchBuffer.length > 0) {
+                const children = this.batchBuffer;
+                this.batchBuffer = [];
+                this.commit({
+                    label: this.batchLabel,
+                    undo: () => {
+                        for (let i = children.length - 1; i >= 0; i--)
+                            children[i].undo();
+                    },
+                    redo: () => {
+                        for (const child of children)
+                            child.redo();
+                    },
+                });
+            }
+        }
+    }
+    /**
+     * Create an **independent** stack with the same API — e.g. for a dialog's
+     * local editing session that should not pollute the app-wide history.
+     * Discard it (or `clear()` it) when the session ends.
+     */
+    createScope() {
+        return new MkHistoryStack();
+    }
+    /** Append to the undo stack: clear the redo branch, evict beyond the limit. */
+    commit(entry) {
+        this.redoStack.set([]);
+        this.undoStack.update((stack) => {
+            const next = [...stack, entry];
+            return next.length > this.maxSize ? next.slice(next.length - this.maxSize) : next;
+        });
+    }
+}
+/**
+ * MkHistoryService — the app-wide {@link MkHistoryStack} singleton. Inject it
+ * anywhere; call {@link MkHistoryStack.createScope} for an isolated local
+ * stack, or wire `mod+z` / `mod+shift+z` / `mod+y` with
+ * {@link registerHistoryHotkeys}.
+ *
+ * ### Recipe — undoable `mk-table` cell edits
+ * Wire the table's `(cellEdit)` output so each saved cell becomes one
+ * undoable step. Apply the edit yourself first (`push()` records an action
+ * that already happened), and match rows by a stable id — the row object is
+ * replaced by the immutable update:
+ *
+ * ```ts
+ * // <mk-table [rows]="rows()" [columns]="columns" (cellEdit)="onCellEdit($event)" />
+ * private readonly history = inject(MkHistoryService);
+ * readonly rows = signal<Order[]>([...]);
+ *
+ * onCellEdit(edit: MkCellEdit<Order>): void {
+ *   const previous = edit.row[edit.key as keyof Order];
+ *   const apply = (value: unknown) =>
+ *     this.rows.update((rows) =>
+ *       rows.map((r) => (r.id === edit.row.id ? { ...r, [edit.key]: value } : r)),
+ *     );
+ *   apply(edit.value); // first execution is the caller's job
+ *   this.history.push({
+ *     label: `Edit ${edit.key}`,
+ *     undo: () => apply(previous),
+ *     redo: () => apply(edit.value),
+ *   });
+ * }
+ * ```
+ *
+ * Undoing replays the old value through the same `apply` function; if your
+ * change pipeline re-emits into `onCellEdit` during that replay, the
+ * re-entrancy guard drops the spurious `push()` (see {@link MkHistoryStack}).
+ */
+class MkHistoryService extends MkHistoryStack {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHistoryService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHistoryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHistoryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/** Tokens that count as modifiers rather than the trigger key. */
+const MODIFIERS = new Set(['mod', 'ctrl', 'control', 'meta', 'cmd', 'command', 'alt', 'option', 'shift']);
+/** Human-friendly aliases mapped onto their `KeyboardEvent.key` (lowercased) form. */
+const KEY_ALIASES = {
+    esc: 'escape',
+    space: ' ',
+    spacebar: ' ',
+    up: 'arrowup',
+    down: 'arrowdown',
+    left: 'arrowleft',
+    right: 'arrowright',
+    del: 'delete',
+    return: 'enter',
+    plus: '+',
+};
+/** Keys that are themselves modifiers — ignored as sequence/trigger keys. */
+const MODIFIER_KEYS = new Set(['control', 'shift', 'alt', 'meta', 'os', 'altgraph']);
+/** True on Apple platforms, where `mod` maps to the Command (meta) key. */
+function mkIsMacPlatform() {
+    return typeof navigator !== 'undefined' && (navigator.platform ?? '').includes('Mac');
+}
+/**
+ * Parse a single hotkey combo (e.g. `'mod+k'`, `'ctrl+shift+p'`, `'?'`) into a
+ * structured {@link MkParsedHotkey}. Tokens are joined by `+`; the last
+ * non-modifier token is the trigger key. Pure and SSR-safe.
+ *
+ * For a chord (space-separated sequence like `'g i'`), split on whitespace and
+ * parse each step — {@link MkHotkeysService} does this for you.
+ */
+function mkParseHotkey(combo) {
+    const parsed = {
+        key: '',
+        mod: false,
+        ctrl: false,
+        meta: false,
+        alt: false,
+        shift: false,
+    };
+    const tokens = combo
+        .trim()
+        .split('+')
+        .map((t) => t.trim().toLowerCase())
+        .filter((t) => t.length > 0);
+    for (const token of tokens) {
+        switch (token) {
+            case 'mod':
+                parsed.mod = true;
+                break;
+            case 'ctrl':
+            case 'control':
+                parsed.ctrl = true;
+                break;
+            case 'meta':
+            case 'cmd':
+            case 'command':
+                parsed.meta = true;
+                break;
+            case 'alt':
+            case 'option':
+                parsed.alt = true;
+                break;
+            case 'shift':
+                parsed.shift = true;
+                break;
+            default:
+                parsed.key = KEY_ALIASES[token] ?? token;
+        }
+    }
+    return parsed;
+}
+/**
+ * Does a `keydown` event satisfy a hotkey? `combo` may be a raw string (parsed
+ * on the fly) or an already-parsed {@link MkParsedHotkey}.
+ *
+ * The key is compared case-insensitively; modifier flags must match exactly.
+ * `mod` resolves to Meta on macOS and Ctrl elsewhere. Shift is not enforced for
+ * symbol keys (e.g. `'?'`), whose shifted state varies by keyboard layout.
+ */
+function mkMatchesHotkey(event, combo) {
+    const parsed = typeof combo === 'string' ? mkParseHotkey(combo) : combo;
+    if (!parsed.key)
+        return false;
+    if (event.key.toLowerCase() !== parsed.key)
+        return false;
+    const mac = mkIsMacPlatform();
+    const wantCtrl = parsed.ctrl || (parsed.mod && !mac);
+    const wantMeta = parsed.meta || (parsed.mod && mac);
+    if (event.ctrlKey !== wantCtrl)
+        return false;
+    if (event.metaKey !== wantMeta)
+        return false;
+    if (event.altKey !== parsed.alt)
+        return false;
+    // Shift: enforce when requested; for symbol keys (non-alphanumeric single
+    // chars) the shifted state is layout-dependent, so don't enforce its absence.
+    if (parsed.shift) {
+        if (!event.shiftKey)
+            return false;
+    }
+    else {
+        const symbolKey = parsed.key.length === 1 && !/[a-z0-9]/i.test(parsed.key);
+        if (!symbolKey && event.shiftKey)
+            return false;
+    }
+    return true;
+}
+/** Window (ms) to complete a two-step chord before the pending key is dropped. */
+const SEQUENCE_TIMEOUT = 1000;
+/**
+ * MkHotkeysService — app-wide keyboard shortcuts. Register a combo string and a
+ * handler; a single `keydown` listener (attached lazily on the first
+ * registration, browser only) dispatches to every match.
+ *
+ * Supports single combos (`'mod+k'`, `'ctrl+shift+p'`, `'?'`) and simple
+ * two-step chords (`'g i'`). By default hotkeys are ignored while an editable
+ * field is focused — pass `allowInInput` to opt in per registration.
+ *
+ * ```ts
+ * const off = hotkeys.register('mod+k', (e) => openPalette(), { preventDefault: true });
+ * // …later
+ * off();
+ * ```
+ */
+class MkHotkeysService {
+    document = inject(DOCUMENT);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    registrations = new Set();
+    attached = false;
+    /** The first key of an in-progress chord, awaiting its second key. */
+    pendingEvent = null;
+    pendingTimer;
+    /**
+     * Register `combo` → `handler`. Returns a disposer that unregisters it.
+     * `combo` may be a single combo or a space-separated two-step chord.
+     */
+    register(combo, handler, options = {}) {
+        const steps = combo
+            .trim()
+            .split(/\s+/)
+            .filter((s) => s.length > 0)
+            .map(mkParseHotkey);
+        const registration = {
+            steps,
+            handler,
+            preventDefault: options.preventDefault ?? false,
+            allowInInput: options.allowInInput ?? false,
+        };
+        this.registrations.add(registration);
+        this.ensureAttached();
+        return () => {
+            this.registrations.delete(registration);
+            if (this.registrations.size === 0)
+                this.detach();
+        };
+    }
+    /** Remove every registration and detach the listener. */
+    unregisterAll() {
+        this.registrations.clear();
+        this.clearPending();
+        this.detach();
+    }
+    ensureAttached() {
+        if (this.attached || !this.isBrowser)
+            return;
+        this.document.addEventListener('keydown', this.onKeydown, true);
+        this.attached = true;
+    }
+    detach() {
+        if (!this.attached)
+            return;
+        this.document.removeEventListener('keydown', this.onKeydown, true);
+        this.attached = false;
+    }
+    onKeydown = (event) => {
+        const e = event;
+        // Bare modifier presses neither trigger nor advance a chord.
+        if (MODIFIER_KEYS.has(e.key.toLowerCase()))
+            return;
+        const editable = this.isEditable(e.target);
+        // 1. Try to complete an in-progress chord.
+        if (this.pendingEvent) {
+            const first = this.pendingEvent;
+            let completed = false;
+            for (const reg of this.registrations) {
+                if (reg.steps.length !== 2)
+                    continue;
+                if (editable && !reg.allowInInput)
+                    continue;
+                if (mkMatchesHotkey(first, reg.steps[0]) && mkMatchesHotkey(e, reg.steps[1])) {
+                    this.trigger(reg, e);
+                    completed = true;
+                }
+            }
+            this.clearPending();
+            if (completed)
+                return;
+            // Otherwise fall through: this key may fire a single hotkey or open a chord.
+        }
+        // 2. Single-combo matches.
+        let matched = false;
+        for (const reg of this.registrations) {
+            if (reg.steps.length !== 1)
+                continue;
+            if (editable && !reg.allowInInput)
+                continue;
+            if (mkMatchesHotkey(e, reg.steps[0])) {
+                this.trigger(reg, e);
+                matched = true;
+            }
+        }
+        if (matched)
+            return;
+        // 3. Open a chord if this key matches the first step of any two-step combo.
+        for (const reg of this.registrations) {
+            if (reg.steps.length !== 2)
+                continue;
+            if (editable && !reg.allowInInput)
+                continue;
+            if (mkMatchesHotkey(e, reg.steps[0])) {
+                this.pendingEvent = e;
+                this.pendingTimer = setTimeout(() => this.clearPending(), SEQUENCE_TIMEOUT);
+                return;
+            }
+        }
+    };
+    trigger(reg, e) {
+        if (reg.preventDefault)
+            e.preventDefault();
+        reg.handler(e);
+    }
+    clearPending() {
+        this.pendingEvent = null;
+        if (this.pendingTimer) {
+            clearTimeout(this.pendingTimer);
+            this.pendingTimer = undefined;
+        }
+    }
+    isEditable(target) {
+        const el = target;
+        if (!el || typeof el.tagName !== 'string')
+            return false;
+        const tag = el.tagName;
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT')
+            return true;
+        return el.isContentEditable === true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHotkeysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHotkeysService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHotkeysService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Opt-in helper wiring the standard editor shortcuts to a history stack
+ * through {@link MkHotkeysService}:
+ *
+ * - `mod+z` → `undo()`
+ * - `mod+shift+z` **and** `mod+y` → `redo()`
+ *
+ * Must be called in an **injection context** (constructor, field initializer,
+ * or `runInInjectionContext`). Nothing is registered automatically — apps own
+ * their shortcuts and call this where (and if) they want them:
+ *
+ * ```ts
+ * export class AppShell {
+ *   private readonly disposeHistoryKeys = registerHistoryHotkeys();
+ * }
+ * ```
+ *
+ * Pass a specific stack (e.g. a `createScope()` stack for a dialog) to bind
+ * the shortcuts to it instead of the app-wide {@link MkHistoryService}.
+ *
+ * Returns a dispose function that unregisters all three shortcuts; it is also
+ * called automatically when the current injection context is destroyed.
+ *
+ * Notes:
+ * - `MkHotkeysService` ignores keydowns while an editable element
+ *   (input/textarea/select/contentEditable) is focused, so native text-field
+ *   undo keeps working — no extra handling needed here.
+ * - The shortcuts register with `preventDefault` so the browser's own
+ *   history/document undo does not fire alongside yours.
+ */
+function registerHistoryHotkeys(history = inject(MkHistoryService)) {
+    const hotkeys = inject(MkHotkeysService);
+    const disposers = [
+        hotkeys.register('mod+z', () => void history.undo(), { preventDefault: true }),
+        hotkeys.register('mod+shift+z', () => void history.redo(), { preventDefault: true }),
+        hotkeys.register('mod+y', () => void history.redo(), { preventDefault: true }),
+    ];
+    let disposed = false;
+    const dispose = () => {
+        if (disposed)
+            return;
+        disposed = true;
+        for (const off of disposers)
+            off();
+    };
+    inject(DestroyRef, { optional: true })?.onDestroy(dispose);
+    return dispose;
+}
+
+/**
+ * `aria-keyshortcuts` names (UI Events `KeyboardEvent.key` values) keyed by
+ * the lowercase form {@link mkParseHotkey} produces. Space and plus have
+ * dedicated names because they collide with the ARIA separators.
+ */
+const ARIA_KEY_NAMES = {
+    ' ': 'Space',
+    '+': 'Plus',
+    escape: 'Escape',
+    enter: 'Enter',
+    tab: 'Tab',
+    backspace: 'Backspace',
+    delete: 'Delete',
+    insert: 'Insert',
+    home: 'Home',
+    end: 'End',
+    pageup: 'PageUp',
+    pagedown: 'PageDown',
+    arrowup: 'ArrowUp',
+    arrowdown: 'ArrowDown',
+    arrowleft: 'ArrowLeft',
+    arrowright: 'ArrowRight',
+};
+/** Map a parsed (lowercase) key to its `aria-keyshortcuts` spelling. */
+function ariaKeyName(key) {
+    const mapped = ARIA_KEY_NAMES[key];
+    if (mapped)
+        return mapped;
+    if (/^f\d{1,2}$/.test(key))
+        return key.toUpperCase(); // F1 … F12
+    return key.length === 1 ? key.toUpperCase() : key;
+}
+/**
+ * One parsed combo as an ARIA `+`-joined token, e.g. `Control+Shift+P`.
+ * `mod` resolves the same way the matcher does: Meta on macOS, Control
+ * elsewhere ({@link mkIsMacPlatform}).
+ */
+function ariaCombo(parsed) {
+    const mac = mkIsMacPlatform();
+    const tokens = [];
+    if (parsed.ctrl || (parsed.mod && !mac))
+        tokens.push('Control');
+    if (parsed.alt)
+        tokens.push('Alt');
+    if (parsed.shift)
+        tokens.push('Shift');
+    if (parsed.meta || (parsed.mod && mac))
+        tokens.push('Meta');
+    if (parsed.key)
+        tokens.push(ariaKeyName(parsed.key));
+    return tokens.join('+');
+}
+/**
+ * `[mkHotkey]` — declaratively bind a keyboard shortcut to a host element.
+ *
+ * When the combo fires, a `<button>` or `<a>` host is `click()`ed; any other
+ * host emits `(mkHotkeyPressed)`. Registration is scoped to the element's
+ * lifetime (auto-unregistered on destroy) via {@link MkHotkeysService}.
+ *
+ * ```html
+ * <button mkHotkey="mod+s" (click)="save()">Save</button>
+ * <div mkHotkey="?" (mkHotkeyPressed)="showHelp()">…</div>
+ * ```
+ */
+class MkHotkey {
+    host = inject(ElementRef);
+    hotkeys = inject(MkHotkeysService);
+    /** The combo (or space-separated chord) to bind, e.g. `mod+k`, `g i`, `?`. */
+    mkHotkey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mkHotkey" }] : /* istanbul ignore next */ []));
+    /** Fire even while an editable field is focused. */
+    mkHotkeyAllowInInput = input(false, { ...(ngDevMode ? { debugName: "mkHotkeyAllowInInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Call `preventDefault()` when the hotkey fires. Defaults to `true`. */
+    mkHotkeyPreventDefault = input(true, { ...(ngDevMode ? { debugName: "mkHotkeyPreventDefault" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Emitted when the hotkey fires and the host is not a button/link. */
+    mkHotkeyPressed = output();
+    /**
+     * The combo in `aria-keyshortcuts` syntax — per-step tokens `+`-joined
+     * (`Control+K`), chord steps space-separated (`G I`). Exposed on the host.
+     */
+    ariaKeyshortcuts = computed(() => {
+        const combos = this.mkHotkey()
+            .trim()
+            .split(/\s+/)
+            .filter((s) => s.length > 0)
+            .map((step) => ariaCombo(mkParseHotkey(step)))
+            .filter((s) => s.length > 0);
+        return combos.length ? combos.join(' ') : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaKeyshortcuts" }] : /* istanbul ignore next */ []));
+    dispose;
+    constructor() {
+        afterNextRender(() => {
+            this.dispose = this.hotkeys.register(this.mkHotkey(), (e) => this.onTrigger(e), {
+                allowInInput: this.mkHotkeyAllowInInput(),
+                preventDefault: this.mkHotkeyPreventDefault(),
+            });
+        });
+    }
+    onTrigger(e) {
+        const el = this.host.nativeElement;
+        const tag = el.tagName;
+        if (tag === 'BUTTON' || tag === 'A') {
+            el.click();
+            return;
+        }
+        this.mkHotkeyPressed.emit(e);
+    }
+    ngOnDestroy() {
+        this.dispose?.();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHotkey, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkHotkey, isStandalone: true, selector: "[mkHotkey]", inputs: { mkHotkey: { classPropertyName: "mkHotkey", publicName: "mkHotkey", isSignal: true, isRequired: true, transformFunction: null }, mkHotkeyAllowInInput: { classPropertyName: "mkHotkeyAllowInInput", publicName: "mkHotkeyAllowInInput", isSignal: true, isRequired: false, transformFunction: null }, mkHotkeyPreventDefault: { classPropertyName: "mkHotkeyPreventDefault", publicName: "mkHotkeyPreventDefault", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mkHotkeyPressed: "mkHotkeyPressed" }, host: { properties: { "attr.aria-keyshortcuts": "ariaKeyshortcuts()" } }, exportAs: ["mkHotkey"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkHotkey, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkHotkey]',
+                    exportAs: 'mkHotkey',
+                    host: {
+                        '[attr.aria-keyshortcuts]': 'ariaKeyshortcuts()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { mkHotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkHotkey", required: true }] }], mkHotkeyAllowInInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkHotkeyAllowInInput", required: false }] }], mkHotkeyPreventDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkHotkeyPreventDefault", required: false }] }], mkHotkeyPressed: [{ type: i0.Output, args: ["mkHotkeyPressed"] }] } });
+
+/**
+ * Permission policy — the contract the permission directives (`*mkCan`,
+ * `*mkCannot`, `[mkCanDisable]`) check against. Provide an implementation
+ * once at bootstrap; the directives inject it optionally and, when no policy
+ * is provided at all, treat every permission as **granted** — an app that
+ * never wires permissions must not have its whole UI hidden.
+ *
+ * `can` may return a plain `boolean` (static role checks) or a
+ * `Signal<boolean>` (live permissions). The directives normalise both, and a
+ * signal-returning policy re-evaluates reactively: views appear/disappear and
+ * controls enable/disable the moment the underlying permissions change.
+ *
+ * ```ts
+ * // A signal-based policy fed from an auth service:
+ * @Injectable()
+ * export class AppPermissionPolicy extends MkPermissionPolicy {
+ *   private readonly auth = inject(AuthService);
+ *
+ *   can(permission: string): Signal<boolean> {
+ *     // auth.permissions is a Signal<string[]> that updates on login/logout.
+ *     return computed(() => this.auth.permissions().includes(permission));
+ *   }
+ * }
+ *
+ * bootstrapApplication(App, {
+ *   providers: [
+ *     { provide: MkPermissionPolicy, useClass: AppPermissionPolicy },
+ *   ],
+ * });
+ * ```
+ *
+ * A static policy is just as valid:
+ *
+ * ```ts
+ * class StaticPolicy extends MkPermissionPolicy {
+ *   can(permission: string): boolean {
+ *     return CURRENT_USER.permissions.includes(permission);
+ *   }
+ * }
+ * ```
+ */
+class MkPermissionPolicy {
+}
+/**
+ * Resolve a policy verdict to a boolean, unwrapping signal-based results.
+ * Call it inside a reactive context (`computed` / `effect`) so a
+ * signal-returning policy stays live. A missing policy grants everything.
+ */
+function mkPermissionGranted(policy, permission) {
+    if (!policy)
+        return true;
+    const verdict = policy.can(permission);
+    return typeof verdict === 'boolean' ? verdict : verdict();
+}
+
+/**
+ * Shared view management for `*mkCan` / `*mkCannot`. Must be called from the
+ * directive's constructor (an injection context). Creates the embedded view
+ * while the (possibly negated) verdict holds, the `else` template while it
+ * does not, and destroys/recreates views when a signal-based policy flips.
+ */
+function setupPermissionView(permission, fallback, negate) {
+    const policy = inject(MkPermissionPolicy, { optional: true });
+    const templateRef = inject(TemplateRef);
+    const viewContainer = inject(ViewContainerRef);
+    const visible = computed(() => {
+        const granted = mkPermissionGranted(policy, permission());
+        return negate ? !granted : granted;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    // Tracks the currently rendered template so a change to the *other* branch
+    // (e.g. the else template resolving while the view is shown) is a no-op.
+    let rendered = null;
+    effect(() => {
+        const next = visible() ? templateRef : fallback();
+        if (next === rendered)
+            return;
+        rendered = next;
+        viewContainer.clear();
+        if (next)
+            viewContainer.createEmbeddedView(next);
+    });
+}
+/**
+ * Structural directive that renders its template only while the app's
+ * {@link MkPermissionPolicy} grants the given permission. With a
+ * signal-based policy the check is live — the view is created and destroyed
+ * as permissions change. When no policy is provided, everything is granted.
+ *
+ * ```html
+ * <button *mkCan="'posts.delete'" (click)="remove()">Delete</button>
+ *
+ * <!-- With a fallback template, like *ngIf's else: -->
+ * <section *mkCan="'billing.view'; else locked">…</section>
+ * <ng-template #locked><mk-empty-state title="No access" /></ng-template>
+ * ```
+ */
+class MkCan {
+    /** The permission key to check, e.g. `'posts.delete'`. */
+    permission = input.required({ ...(ngDevMode ? { debugName: "permission" } : /* istanbul ignore next */ {}), alias: 'mkCan' });
+    /** Template rendered while the permission is denied (`; else ref`). */
+    elseTemplate = input(null, { ...(ngDevMode ? { debugName: "elseTemplate" } : /* istanbul ignore next */ {}), alias: 'mkCanElse' });
+    constructor() {
+        setupPermissionView(this.permission, this.elseTemplate, false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCan, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkCan, isStandalone: true, selector: "[mkCan]", inputs: { permission: { classPropertyName: "permission", publicName: "mkCan", isSignal: true, isRequired: true, transformFunction: null }, elseTemplate: { classPropertyName: "elseTemplate", publicName: "mkCanElse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCan, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mkCan]' }]
+        }], ctorParameters: () => [], propDecorators: { permission: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkCan", required: true }] }], elseTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkCanElse", required: false }] }] } });
+/**
+ * The negation of {@link MkCan}: renders its template only while the
+ * permission is **denied** — for upsell hints, "ask an admin" notes and the
+ * like. With no policy provided everything is granted, so `*mkCannot`
+ * renders nothing.
+ *
+ * ```html
+ * <p *mkCannot="'reports.export'">Exporting requires an admin role.</p>
+ * ```
+ */
+class MkCannot {
+    /** The permission key to check. */
+    permission = input.required({ ...(ngDevMode ? { debugName: "permission" } : /* istanbul ignore next */ {}), alias: 'mkCannot' });
+    /** Template rendered while the permission is granted (`; else ref`). */
+    elseTemplate = input(null, { ...(ngDevMode ? { debugName: "elseTemplate" } : /* istanbul ignore next */ {}), alias: 'mkCannotElse' });
+    constructor() {
+        setupPermissionView(this.permission, this.elseTemplate, true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCannot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkCannot, isStandalone: true, selector: "[mkCannot]", inputs: { permission: { classPropertyName: "permission", publicName: "mkCannot", isSignal: true, isRequired: true, transformFunction: null }, elseTemplate: { classPropertyName: "elseTemplate", publicName: "mkCannotElse", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCannot, decorators: [{
+            type: Directive,
+            args: [{ selector: '[mkCannot]' }]
+        }], ctorParameters: () => [], propDecorators: { permission: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkCannot", required: true }] }], elseTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkCannotElse", required: false }] }] } });
+
+/**
+ * Disables the host while the app's {@link MkPermissionPolicy} denies the
+ * given permission — the "keep it visible but inert" alternative to `*mkCan`
+ * for buttons, inputs and menu items.
+ *
+ * While denied, the host gets `aria-disabled="true"`, and — when the element
+ * supports it (button, input, select, textarea, fieldset…) — its native
+ * `disabled` property is set too. Non-disableable elements (links, custom
+ * menu items) get `aria-disabled` only; pair it with CSS / a click guard as
+ * needed. The directive owns the disabled state: it also re-enables the host
+ * when the permission is granted. With a signal-based policy the state flips
+ * live; with no policy provided, everything is granted.
+ *
+ * ```html
+ * <button [mkCanDisable]="'posts.delete'" (click)="remove()">Delete</button>
+ * <a [mkCanDisable]="'billing.view'" routerLink="/billing">Billing</a>
+ * ```
+ */
+class MkCanDisable {
+    policy = inject(MkPermissionPolicy, { optional: true });
+    host = inject(ElementRef);
+    /** The permission key to check, e.g. `'posts.delete'`. */
+    permission = input.required({ ...(ngDevMode ? { debugName: "permission" } : /* istanbul ignore next */ {}), alias: 'mkCanDisable' });
+    /** Whether the permission is currently denied. */
+    denied = computed(() => !mkPermissionGranted(this.policy, this.permission()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "denied" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const el = this.host.nativeElement;
+        effect(() => {
+            const denied = this.denied();
+            // Only elements with a native `disabled` member (form controls) get the
+            // property; everything else relies on `aria-disabled` alone.
+            if ('disabled' in el)
+                el.disabled = denied;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCanDisable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkCanDisable, isStandalone: true, selector: "[mkCanDisable]", inputs: { permission: { classPropertyName: "permission", publicName: "mkCanDisable", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.aria-disabled": "denied() ? 'true' : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkCanDisable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mkCanDisable]',
+                    host: {
+                        '[attr.aria-disabled]': "denied() ? 'true' : null",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { permission: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkCanDisable", required: true }] }] } });
+
+/**
+ * DIRECTIVES / utilities group barrel for @mk-kit/ui.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MK_FIELD_PRESETS, MkAutofocus, MkAutosize, MkCan, MkCanDisable, MkCannot, MkClickOutside, MkCopyToClipboard, MkField, MkHistoryService, MkHistoryStack, MkHotkey, MkHotkeysService, MkInfiniteScroll, MkIntersect, MkMask, MkPermissionPolicy, MkRipple, MkScrollspy, mkApplyMask, mkMaskCaret, mkMatchesHotkey, mkParseHotkey, mkPermissionGranted, registerHistoryHotkeys };
+//# sourceMappingURL=mk-kit-ui-directives.mjs.map