npm - @kouji-ui/core - Versions diffs - 0.1.5 → 0.3.0 - Mend

@kouji-ui/core 0.1.5 → 0.3.0

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

Files changed (7) hide show

package/fesm2022/kouji-ui-core-engine-CKMr0aiZ.mjs +390 -0
package/fesm2022/kouji-ui-core-engine-CKMr0aiZ.mjs.map +1 -0
package/fesm2022/kouji-ui-core.mjs +3183 -181
package/fesm2022/kouji-ui-core.mjs.map +1 -1
package/motion/motion.css +90 -0
package/package.json +50 -2
package/types/kouji-ui-core.d.ts +2066 -68

package/fesm2022/kouji-ui-core.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, Directive, inject, ElementRef, DestroyRef, PLATFORM_ID, signal, afterNextRender, forwardRef, InjectionToken, Injectable, computed, viewChild, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, Injector, createComponent, model, effect, untracked, isSignal, DOCUMENT, output, contentChildren, isDevMode, LOCALE_ID, numberAttribute, contentChild, makeEnvironmentProviders, runInInjectionContext, HostListener, linkedSignal, TemplateRef, resource, EventEmitter, Output, afterEveryRender } from '@angular/core';
+import { input, booleanAttribute, Directive, inject, ElementRef, DestroyRef, PLATFORM_ID, signal, afterNextRender, forwardRef, InjectionToken, Injectable, computed, viewChild, ViewContainerRef, ViewEncapsulation, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, Injector, createComponent, model, effect, untracked, isSignal, DOCUMENT, output, contentChildren, makeEnvironmentProviders, LOCALE_ID, provideEnvironmentInitializer, isDevMode, numberAttribute, contentChild, runInInjectionContext, HostListener, linkedSignal, TemplateRef, resource, EventEmitter, Output, afterEveryRender } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgForm, FormGroupDirective, FormGroup, FormArray } from '@angular/forms';
 import { Subject } from 'rxjs';
@@ -3773,6 +3773,626 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }] });
+/**
+ * DI token for the initial locale configuration. Default factory yields an
+ * empty config, so {@link KjLocale} resolves entirely from `LOCALE_ID` and
+ * `<html dir>` when {@link provideKjLocale} is not called.
+ */
+const KJ_LOCALE_CONFIG = new InjectionToken('kj.locale.config', { factory: () => ({}) });
+/**
+ * Configures the application (or route) locale — the single source of truth
+ * every locale-sensitive kouji-ui primitive falls back to for number, currency,
+ * and date formatting plus logical text direction.
+ *
+ * Call once at the application scope (`bootstrapApplication`'s `providers`) or
+ * on a route to scope a sub-tree. Runtime changes go through the
+ * {@link KjLocale} service (`setLocale` / `setDirection` / `setCurrency`) — the
+ * seam the upcoming RTL switch and language menu build on.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [provideKjLocale({ locale: 'de-DE', currency: 'EUR' })],
+ * });
+ * ```
+ * @doc
+ *  @doc-example Basic
+ *    Switch the active locale and watch every `Intl`-backed formatter (number,
+ *    currency, date) and the resolved direction update reactively.
+ *    @doc-file locale.basic.example.ts
+ * @doc-name locale
+ * @doc-order 1
+ */
+function provideKjLocale(config = {}) {
+    return makeEnvironmentProviders([
+        { provide: KJ_LOCALE_CONFIG, useValue: config },
+    ]);
+}
+/**
+ * Minimal RTL-script allow-list for engines whose `Intl.Locale` lacks
+ * `getTextInfo` / `textInfo`. Keyed by the ISO 639 language subtag.
+ */
+const RTL_LANGUAGES = new Set([
+    'ar', // Arabic
+    'he', // Hebrew
+    'fa', // Persian
+    'ur', // Urdu
+    'ps', // Pashto
+    'sd', // Sindhi
+    'ug', // Uyghur
+    'yi', // Yiddish
+    'dv', // Divehi
+    'ku', // Kurdish (Sorani)
+]);
+/**
+ * Derive `'ltr'` / `'rtl'` from a BCP-47 tag. Prefers the standard
+ * `Intl.Locale` text-info APIs; falls back to a language-subtag allow-list.
+ */
+function directionFromLocale(tag) {
+    try {
+        const loc = new Intl.Locale(tag);
+        // `getTextInfo()` (newer) and `.textInfo` (older) both expose `.direction`.
+        const info = loc.getTextInfo?.() ??
+            loc.textInfo;
+        if (info?.direction === 'rtl')
+            return 'rtl';
+        if (info?.direction === 'ltr')
+            return 'ltr';
+        const language = loc.language ?? tag.toLowerCase().split('-')[0];
+        return RTL_LANGUAGES.has(language) ? 'rtl' : 'ltr';
+    }
+    catch {
+        const language = tag.toLowerCase().split('-')[0];
+        return RTL_LANGUAGES.has(language) ? 'rtl' : 'ltr';
+    }
+}
+/**
+ * Application-wide source of truth for **how locale-sensitive data renders** —
+ * number / currency / date formatting and the logical text direction
+ * (`ltr` / `rtl`). Every locale-aware primitive (NumberInput, DatePicker,
+ * TimePicker, Calendar, currency display) falls back to this service instead of
+ * re-reading `LOCALE_ID` or drilling a `kjLocale` prop.
+ *
+ * Configure the initial state with {@link provideKjLocale}; change it at runtime
+ * with {@link setLocale} / {@link setDirection} / {@link setCurrency} — the seam
+ * the RTL switch and language menu build on. Everything is `Intl`-backed and
+ * SSR-safe, so anything Angular's `LOCALE_ID` already supports works with zero
+ * configuration.
+ *
+ * @example
+ * ```ts
+ * private readonly locale = inject(KjLocale);
+ * readonly price = computed(() => this.locale.formatCurrency(19.9)); // '€19.90'
+ * readonly isRtl = this.locale.isRtl;
+ * ```
+ * @doc
+ * @doc-name locale
+ * @doc-category Core/Primitives
+ * @doc-description One DI provider for locale-aware number, currency, and date formatting plus the ltr/rtl direction every primitive falls back to.
+ * @doc-is-main
+ */
+class KjLocale {
+    defaultLocale = inject(LOCALE_ID);
+    directionality = inject(KjDirectionality);
+    config = inject(KJ_LOCALE_CONFIG);
+    _locale = signal(this.config.locale ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_locale" }] : /* istanbul ignore next */ []));
+    _direction = signal(this.config.direction ?? 'auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_direction" }] : /* istanbul ignore next */ []));
+    _currency = signal(this.config.currency, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currency" }] : /* istanbul ignore next */ []));
+    /** Resolved BCP-47 locale tag. Falls back to Angular's `LOCALE_ID`. */
+    locale = computed(() => this._locale() || this.defaultLocale, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved logical text direction. When set to `'auto'`, derives from the
+     * locale script, then falls back to the document's `<html dir>`.
+     */
+    direction = computed(() => {
+        const explicit = this._direction();
+        if (explicit === 'ltr' || explicit === 'rtl')
+            return explicit;
+        const fromLocale = directionFromLocale(this.locale());
+        // Only honour a locale that positively resolves to RTL; otherwise defer to
+        // the document direction so an app that sets `<html dir="rtl">` still wins
+        // for a direction-neutral locale.
+        if (fromLocale === 'rtl')
+            return 'rtl';
+        return this.directionality.current();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** `true` when the resolved {@link direction} is `'rtl'`. */
+    isRtl = computed(() => this.direction() === 'rtl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
+    /** Resolved default currency (ISO 4217), or `undefined`. */
+    currency = this._currency.asReadonly();
+    /** Override the active locale at runtime. */
+    setLocale(tag) {
+        this._locale.set(tag);
+    }
+    /** Override the active direction at runtime. `'auto'` re-enables derivation. */
+    setDirection(dir) {
+        this._direction.set(dir);
+    }
+    /** Override the default currency at runtime. */
+    setCurrency(code) {
+        this._currency.set(code);
+    }
+    /**
+     * Build an `Intl.NumberFormat` bound to the resolved locale. Pass options to
+     * override; `undefined` locale in options is ignored.
+     */
+    numberFormat(options) {
+        return new Intl.NumberFormat(this.locale(), options);
+    }
+    /** Build an `Intl.DateTimeFormat` bound to the resolved locale. */
+    dateTimeFormat(options) {
+        return new Intl.DateTimeFormat(this.locale(), options);
+    }
+    /** Format a number with the resolved locale. */
+    formatNumber(value, options) {
+        return this.numberFormat(options).format(value);
+    }
+    /**
+     * Format a currency amount. Uses `currency` when given, else the provider's
+     * default {@link currency}. Returns a plain number format when neither is set.
+     */
+    formatCurrency(value, currency, options) {
+        const code = currency ?? this._currency();
+        if (!code)
+            return this.formatNumber(value, options);
+        return this.numberFormat({
+            style: 'currency',
+            currency: code,
+            ...options,
+        }).format(value);
+    }
+    /** Format a `Date` with the resolved locale. */
+    formatDate(value, options) {
+        return this.dateTimeFormat(options).format(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjLocale, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjLocale, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjLocale, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Reflects {@link KjLocale}'s resolved logical direction onto the document's
+ * `<html dir>` attribute, keeping the whole page (and every assistive
+ * technology) in sync whenever the direction changes at runtime.
+ *
+ * This is the single writer of `<html dir>`; {@link KjDirectionality} stays the
+ * *reader* that feeds `KjLocale`'s `'auto'` derivation. The write is idempotent
+ * (skipped when the attribute already matches), so it never fights an app that
+ * sets `dir` itself, and it is **SSR-safe** — on the server no DOM APIs are
+ * touched and the attribute is left to the app's own template.
+ *
+ * Register once at the application scope. It is the piece the visible RTL
+ * toggle (`KjDirectionToggle`) relies on to actually flip the layout: the toggle
+ * calls `KjLocale.setDirection(...)`, this effect propagates it to `<html dir>`.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(App, {
+ *   providers: [
+ *     provideKjLocale({ direction: 'auto' }),
+ *     provideKjDocumentDirection(),
+ *   ],
+ * });
+ * ```
+ * @doc
+ * @doc-name locale
+ * @doc-order 2
+ */
+function provideKjDocumentDirection() {
+    return makeEnvironmentProviders([
+        provideEnvironmentInitializer(() => {
+            const platformId = inject(PLATFORM_ID);
+            const doc = inject(DOCUMENT, { optional: true });
+            // SSR / no-DOM: leave `<html dir>` to the app's template.
+            if (!isPlatformBrowser(platformId) || !doc)
+                return;
+            const locale = inject(KjLocale);
+            effect(() => {
+                const dir = locale.direction();
+                const html = doc.documentElement;
+                if (html.getAttribute('dir') !== dir) {
+                    html.setAttribute('dir', dir);
+                }
+            });
+        }),
+    ]);
+}
+/**
+ * Media query that matches when the user has asked the OS to reduce motion.
+ */
+const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+/**
+ * Reads the user's `prefers-reduced-motion` OS setting via `matchMedia` and
+ * exposes it as a signal that updates live when the setting flips. SSR-safe —
+ * on the server (or where `matchMedia` is unavailable) the signal returns
+ * `false` and no DOM APIs are touched.
+ *
+ * Pair this with the `motion.css` presets (which already no-op under reduced
+ * motion in pure CSS) whenever a directive needs the value in TypeScript — e.g.
+ * to shorten a JS-driven timeout, skip an imperative animation, or await
+ * `animationend` only when motion is actually running.
+ *
+ * @example
+ * ```ts
+ * private readonly motion = inject(KjReducedMotion);
+ * readonly animate = computed(() => !this.motion.prefersReducedMotion());
+ * ```
+ * @doc-category Core/Primitives
+ * @doc-name reduced-motion
+ * @doc-description SSR-safe signal of the user's prefers-reduced-motion setting.
+ */
+class KjReducedMotion {
+    platformId = inject(PLATFORM_ID);
+    destroyRef = inject(DestroyRef);
+    _prefersReducedMotion = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_prefersReducedMotion" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` when the user has requested reduced motion. `false` on the server
+     * and as the fallback when `matchMedia` is unavailable.
+     */
+    prefersReducedMotion = this._prefersReducedMotion.asReadonly();
+    constructor() {
+        if (!isPlatformBrowser(this.platformId) || typeof window === 'undefined' || !window.matchMedia) {
+            // SSR / no matchMedia: keep the default `false` and skip all DOM access.
+            return;
+        }
+        // Read the initial value once a browser context is guaranteed, then track
+        // changes. afterNextRender avoids reading during SSR.
+        afterNextRender(() => {
+            const mql = window.matchMedia(REDUCED_MOTION_QUERY);
+            this._prefersReducedMotion.set(mql.matches);
+            const onChange = (event) => {
+                this._prefersReducedMotion.set(event.matches);
+            };
+            mql.addEventListener('change', onChange);
+            this.destroyRef.onDestroy(() => mql.removeEventListener('change', onChange));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjReducedMotion, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjReducedMotion, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjReducedMotion, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * Applies a named motion preset from `motion.css` to its host element. The
+ * animation itself lives entirely in CSS (keyed off the reflected
+ * `data-kj-motion` / `data-kj-motion-state` attributes and the `--kj-motion-*`
+ * custom properties); this directive is a thin, declarative opt-in.
+ *
+ * Presets are composable, pre-bundled names — `fade`, `slide-up`, `slide-down`,
+ * `slide-left`, `slide-right`, `scale`, `slide-up-fade`, `scale-spring`. Under
+ * `prefers-reduced-motion: reduce` every preset collapses to a ~1ms opacity
+ * fade with no transform (WCAG 2.1 AAA 2.3.3), so consumers never have to
+ * branch on the setting for the visual result. The `reduced()` signal is
+ * exposed for the rare case that needs to gate JS-driven timing.
+ *
+ * Requires `@kouji-ui/core/motion/motion.css` to be loaded (globally or in the
+ * component's styles).
+ *
+ * @example
+ * ```html
+ * <div kjMotion="slide-up-fade" [kjMotionState]="open() ? 'enter' : 'exit'">…</div>
+ * ```
+ *
+ * @doc-aria
+ *   data-kj-motion        — reflects the active preset name for CSS targeting
+ *   data-kj-motion-state  — "enter" | "exit"
+ *   data-kj-reduced-motion — present when the user prefers reduced motion
+ *
+ * @doc-a11y
+ *   Motion is decorative and opt-in; the directive adds no interactive
+ *   semantics (no role, no tabindex). Every preset honours
+ *   prefers-reduced-motion by collapsing to a near-instant opacity fade with no
+ *   transform, satisfying WCAG 2.1 AAA 2.3.3 (Animation from Interactions).
+ *
+ * @doc
+ *  @doc-example Presets
+ *    @doc-file motion.example.ts
+ *  @doc-example Reduced motion
+ *    @doc-file motion.reduced.example.ts
+ * @doc-category Core/Primitives
+ * @doc-name motion
+ * @doc-is-main
+ * @doc-description Applies a named, reduced-motion-aware CSS motion preset to any element.
+ */
+class KjMotion {
+    motion = inject(KjReducedMotion);
+    /** Named preset to apply, e.g. `'fade'`, `'slide-up-fade'`, `'scale-spring'`. */
+    kjMotion = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjMotion" }] : /* istanbul ignore next */ []));
+    /** Whether to play the entrance or exit keyframe. Defaults to `'enter'`. */
+    kjMotionState = input('enter', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjMotionState" }] : /* istanbul ignore next */ []));
+    /** `true` when the user prefers reduced motion. Mirrors `KjReducedMotion`. */
+    reduced = computed(() => this.motion.prefersReducedMotion(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reduced" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjMotion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjMotion, isStandalone: true, selector: "[kjMotion]", inputs: { kjMotion: { classPropertyName: "kjMotion", publicName: "kjMotion", isSignal: true, isRequired: true, transformFunction: null }, kjMotionState: { classPropertyName: "kjMotionState", publicName: "kjMotionState", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-kj-motion": "kjMotion()", "attr.data-kj-motion-state": "kjMotionState()", "attr.data-kj-reduced-motion": "reduced() ? \"\" : null" }, classAttribute: "kj-motion" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjMotion, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kjMotion]',
+                    standalone: true,
+                    host: {
+                        class: 'kj-motion',
+                        '[attr.data-kj-motion]': 'kjMotion()',
+                        '[attr.data-kj-motion-state]': 'kjMotionState()',
+                        '[attr.data-kj-reduced-motion]': 'reduced() ? "" : null',
+                    },
+                }]
+        }], propDecorators: { kjMotion: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMotion", required: true }] }], kjMotionState: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMotionState", required: false }] }] } });
+/**
+ * Canonical English (`en`) message catalog — the **source of truth** for
+ * kouji-ui's visible / assistive-text strings. Every translation key the
+ * library understands is spelled exactly once here; the {@link KjTranslationKey}
+ * union and the {@link KjTranslationCatalog} shape are derived from it, so a
+ * typo in any alternate catalog is a compile error and no key can be forgotten.
+ *
+ * Values may contain `{name}` placeholders — see {@link KjTranslationParams} —
+ * which {@link KjTranslateService.translate} substitutes at lookup time.
+ */
+const EN_CATALOG = {
+    // -- Overlays --
+    'toast.close': 'Close notification',
+    'dialog.close': 'Close dialog',
+    // -- Pagination --
+    'pagination.nav': 'Pagination',
+    'pagination.previous': 'Previous page',
+    'pagination.next': 'Next page',
+    'pagination.first': 'First page',
+    'pagination.last': 'Last page',
+    'pagination.more': 'More pages',
+    'pagination.page': 'Page {page}',
+    'pagination.pageOf': 'Page {page} of {total}',
+    // -- Accessibility live-region announcements --
+    'a11y.pageChanged': 'Page {page} of {total}',
+    'a11y.selected': 'Selected',
+    'a11y.sortApplied': 'Sort applied, {rows} rows',
+};
+/**
+ * French (`fr`) message catalog — shipped as proof that alternate locales plug
+ * in. Typed as `Partial<KjTranslationCatalog>`: a translator may omit keys and
+ * each missing one falls through to the English source at lookup time. The key
+ * union is derived from `en`, so a misspelled key here fails `tsc`.
+ *
+ * Import it explicitly and register with `provideKjTranslations({ fr: FR_CATALOG })`
+ * — because it is a plain module, bundlers tree-shake it away when unused.
+ */
+const FR_CATALOG = {
+    // -- Overlays --
+    'toast.close': 'Fermer la notification',
+    'dialog.close': 'Fermer la boîte de dialogue',
+    // -- Pagination --
+    'pagination.nav': 'Pagination',
+    'pagination.previous': 'Page précédente',
+    'pagination.next': 'Page suivante',
+    'pagination.first': 'Première page',
+    'pagination.last': 'Dernière page',
+    'pagination.more': 'Plus de pages',
+    'pagination.page': 'Page {page}',
+    'pagination.pageOf': 'Page {page} sur {total}',
+    // -- Accessibility live-region announcements --
+    'a11y.pageChanged': 'Page {page} sur {total}',
+    'a11y.selected': 'Sélectionné',
+    'a11y.sortApplied': 'Tri appliqué, {rows} lignes',
+};
+/**
+ * Multi-provider DI token holding every registered {@link KjTranslationCatalogs}
+ * group. {@link KjTranslateService} reads it once at construction and merges the
+ * groups over the always-present English source.
+ */
+const KJ_TRANSLATION_CATALOGS = new InjectionToken('kj.translation.catalogs');
+/**
+ * Registers one or more alternate message catalogs for the enclosing injector.
+ * The English (`en`) catalog is always available without registration, so this
+ * only adds the languages you ship. Composes — several calls accumulate.
+ *
+ * Because catalogs are plain `import`-able modules, only the languages you
+ * actually import are bundled (tree-shakable).
+ *
+ * @example
+ * ```ts
+ * import { FR_CATALOG, provideKjTranslations, provideKjLocale } from '@kouji-ui/core';
+ *
+ * bootstrapApplication(App, {
+ *   providers: [
+ *     provideKjLocale({ locale: 'fr-FR' }),  // selects the catalog at runtime
+ *     provideKjTranslations({ fr: FR_CATALOG }),
+ *   ],
+ * });
+ * ```
+ * @doc
+ * @doc-name i18n
+ * @doc-order 1
+ */
+function provideKjTranslations(catalogs) {
+    return makeEnvironmentProviders([
+        { provide: KJ_TRANSLATION_CATALOGS, useValue: catalogs, multi: true },
+    ]);
+}
+/** Replace every `{name}` token in `template` with `params[name]`. */
+function interpolate(template, params) {
+    if (!params)
+        return template;
+    return template.replace(/\{(\w+)\}/g, (match, name) => name in params ? String(params[name]) : match);
+}
+/**
+ * Resolves kouji-ui's visible / assistive-text strings from **typed, per-locale
+ * catalogs**, selecting the active catalog from the locale that already exists —
+ * {@link KjLocale.locale} — and guaranteeing a fallback to the English source so
+ * the UI never blanks out on a missing key.
+ *
+ * Selection for a key resolves in order: exact locale tag (`fr-FR`) → bare
+ * language subtag (`fr`) → `en`; within the chosen catalog a missing key falls
+ * through to the English value, then to the key string itself. Values may carry
+ * `{name}` placeholders substituted from `params`.
+ *
+ * Register alternate catalogs with {@link provideKjTranslations}; switch locale
+ * at runtime with `KjLocale.setLocale()` — lookups are reactive, so
+ * {@link translation} signals and the {@link KjTranslate} directive re-render.
+ *
+ * @example
+ * ```ts
+ * private readonly i18n = inject(KjTranslateService);
+ * readonly closeLabel = this.i18n.translation('toast.close'); // Signal<string>
+ * readonly info = computed(() =>
+ *   this.i18n.translate('pagination.pageOf', { page: 3, total: 12 }));
+ * ```
+ * @doc
+ * @doc-name i18n
+ * @doc-is-main
+ * @doc-category Core/Accessibility
+ * @doc-description Resolves visible and ARIA strings from typed, tree-shakable per-locale catalogs, selected by KjLocale with an English fallback.
+ */
+class KjTranslateService {
+    locale = inject(KjLocale);
+    catalogs = new Map();
+    constructor() {
+        // English is always present as the source-language fallback.
+        this.catalogs.set('en', EN_CATALOG);
+        const groups = inject(KJ_TRANSLATION_CATALOGS, { optional: true }) ?? [];
+        for (const group of groups) {
+            for (const [tag, catalog] of Object.entries(group)) {
+                this.register(tag, catalog);
+            }
+        }
+    }
+    /**
+     * Register (or extend) a catalog at runtime. Merges over any catalog already
+     * registered for the same tag. Locale tags are matched case-insensitively.
+     * @param locale - BCP-47 tag or bare language subtag (e.g. `'fr'`, `'fr-CA'`).
+     * @param catalog - Partial catalog; omitted keys fall through to English.
+     */
+    register(locale, catalog) {
+        const key = locale.toLowerCase();
+        const existing = this.catalogs.get(key);
+        this.catalogs.set(key, existing ? { ...existing, ...catalog } : catalog);
+    }
+    /**
+     * Look up a key for the active locale and interpolate `params`. Reads
+     * {@link KjLocale.locale}, so call it inside a `computed`/`effect` (or use
+     * {@link translation}) to react to locale changes.
+     */
+    translate(key, params) {
+        const catalog = this.selectCatalog(this.locale.locale());
+        const value = catalog[key] ?? EN_CATALOG[key] ?? key;
+        return interpolate(value, params);
+    }
+    /**
+     * Reactive wrapper around {@link translate} — a `Signal` that re-emits when
+     * the active locale or the resolved value changes. Ideal for host bindings
+     * and template interpolation.
+     */
+    translation(key, params) {
+        return computed(() => this.translate(key, params));
+    }
+    /**
+     * Pick the best catalog for a locale tag: exact tag → bare language subtag →
+     * English. Never returns `undefined`.
+     */
+    selectCatalog(tag) {
+        const lower = tag.toLowerCase();
+        const exact = this.catalogs.get(lower);
+        if (exact)
+            return exact;
+        const subtag = lower.split('-')[0];
+        const byLanguage = this.catalogs.get(subtag);
+        if (byLanguage)
+            return byLanguage;
+        return EN_CATALOG;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTranslateService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTranslateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+/**
+ * Writes a localized string into its host — either the element's text content
+ * or a named attribute (for `aria-label`, `title`, …). Fully reactive: the host
+ * re-renders when the active locale (`KjLocale.locale()`) or the interpolation
+ * params change, with no change-detection cost between changes (signals +
+ * `effect`, no pipe).
+ *
+ * The key is compile-checked against the {@link KjTranslationKey} union, so a
+ * typo fails `tsc`. Values may contain `{name}` placeholders filled from
+ * `kjTranslateParams`.
+ *
+ * @example
+ * ```html
+ * <!-- visible text -->
+ * <span [kjTranslate]="'pagination.pageOf'"
+ *       [kjTranslateParams]="{ page: page(), total: total() }"></span>
+ *
+ * <!-- localized aria-label on an icon-only button -->
+ * <button [kjTranslate]="'toast.close'" kjTranslateAttr="aria-label">×</button>
+ * ```
+ * @doc
+ *  @doc-example Basic
+ *    @doc-theme default
+ *      @doc-file i18n.basic.example.ts
+ * @doc-name i18n
+ * @doc-category Core/Accessibility
+ */
+class KjTranslate {
+    svc = inject(KjTranslateService);
+    el = inject(ElementRef);
+    /** Translation key to render. Compile-checked against the catalog. */
+    kjTranslate = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjTranslate" }] : /* istanbul ignore next */ []));
+    /** Values for `{name}` placeholders in the resolved string. */
+    kjTranslateParams = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "kjTranslateParams" }] : /* istanbul ignore next */ []));
+    /**
+     * Target attribute to write (e.g. `'aria-label'`, `'title'`). When unset, the
+     * translation is written to the host's text content.
+     */
+    kjTranslateAttr = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "kjTranslateAttr" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const value = this.svc.translate(this.kjTranslate(), this.kjTranslateParams());
+            const attr = this.kjTranslateAttr();
+            if (attr) {
+                this.el.nativeElement.setAttribute(attr, value);
+            }
+            else {
+                this.el.nativeElement.textContent = value;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTranslate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTranslate, isStandalone: true, selector: "[kjTranslate]", inputs: { kjTranslate: { classPropertyName: "kjTranslate", publicName: "kjTranslate", isSignal: true, isRequired: true, transformFunction: null }, kjTranslateParams: { classPropertyName: "kjTranslateParams", publicName: "kjTranslateParams", isSignal: true, isRequired: false, transformFunction: null }, kjTranslateAttr: { classPropertyName: "kjTranslateAttr", publicName: "kjTranslateAttr", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTranslate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kjTranslate]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { kjTranslate: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTranslate", required: true }] }], kjTranslateParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTranslateParams", required: false }] }], kjTranslateAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTranslateAttr", required: false }] }] } });
 /**
  * DI token holding the variant preset for the current consumer's injector
  * scope. Resolved by `KjVariant` at construction time.
@@ -5786,7 +6406,8 @@ class KjNumberInput {
     /** @internal */
     formCtrl = inject(KjFormControl);
     el = inject(ElementRef);
-    localeId = inject(LOCALE_ID);
+    /** Locale provider — the fallback source of truth for locale + currency. */
+    locale = inject(KjLocale);
     group = inject(KjNumberInputGroup, { optional: true, skipSelf: true });
     /** Two-way bindable numeric model. `null` for empty. */
     kjValue = model(null, /* @ts-ignore */
@@ -5816,10 +6437,13 @@ class KjNumberInput {
     /** Drives `Intl.NumberFormat` style. Ignored when `kjUseNativeNumber=true`. */
     kjFormat = input('decimal', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjFormat" }] : /* istanbul ignore next */ []));
-    /** BCP-47 tag. Falls back to the injected `LOCALE_ID`. */
+    /** BCP-47 tag. Falls back to the `KjLocale` provider (`provideKjLocale`). */
     kjLocale = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjLocale" }] : /* istanbul ignore next */ []));
-    /** ISO 4217 code (e.g. `'USD'`). Required when `kjFormat="currency"`. */
+    /**
+     * ISO 4217 code (e.g. `'USD'`). Required when `kjFormat="currency"` unless a
+     * default currency is supplied via `provideKjLocale`.
+     */
     kjCurrency = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjCurrency" }] : /* istanbul ignore next */ []));
     /** Currency display mode. */
@@ -5889,9 +6513,9 @@ class KjNumberInput {
     ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
     /** Formatter options derived from the public inputs. */
     formatOptions = computed(() => ({
-        locale: this.kjLocale() ?? this.localeId,
+        locale: this.kjLocale() ?? this.locale.locale(),
         format: this.kjFormat(),
-        currency: this.kjCurrency(),
+        currency: this.kjCurrency() ?? this.locale.currency(),
         currencyDisplay: this.kjCurrencyDisplay(),
         unit: this.kjUnit(),
         unitDisplay: this.kjUnitDisplay(),
@@ -5955,7 +6579,7 @@ class KjNumberInput {
             else if (editing) {
                 // Percent: the user thinks of `50` even though we store `0.5`.
                 const display = this.kjFormat() === 'percent' ? value * 100 : value;
-                next = formatForEdit(display, this.kjLocale() ?? this.localeId);
+                next = formatForEdit(display, this.kjLocale() ?? this.locale.locale());
             }
             else {
                 next = formatNumber(value, this.formatOptions());
@@ -6117,7 +6741,7 @@ class KjNumberInput {
             return;
         }
         el.value = this.editing()
-            ? formatForEdit(this.kjFormat() === 'percent' ? value * 100 : value, this.kjLocale() ?? this.localeId)
+            ? formatForEdit(this.kjFormat() === 'percent' ? value * 100 : value, this.kjLocale() ?? this.locale.locale())
             : formatNumber(value, this.formatOptions());
     }
     fallbackForStep() {
@@ -10723,46 +11347,421 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { kjState: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjState", required: false }] }] } });
+let _msgId = 0;
+/** Allocate a stable message id. */
+function nextChatMessageId() {
+    return `kj-msg-${++_msgId}`;
+}
 /**
- * Marks a paragraph as the lead-in paragraph for a section — slightly larger
- * size with a softer tone. Reflects `data-tone="lead"` so theme CSS keys off
- * it; the directive owns no styling itself.
+ * Headless, **provider-agnostic** streaming chat state.
  *
- * Lead semantics are paragraph-bound; applied to a non-`<p>` host the
- * directive emits a dev-mode warning but does not enforce the tag.
+ * Owns the `messages` signal, the stream `status`, and the append API. It has
+ * **no** LLM SDK, `fetch`, or backend — the consumer wires their own model /
+ * stream and drives this store: `sendUser()`, `beginAssistant()`, then
+ * `pushChunk()` per token/chunk, and finally `endAssistant()` (or `fail()` /
+ * `stop()`).
+ *
+ * Provided **per thread** (no `providedIn`); `KjChatThread` provides one, or
+ * the consumer provides their own to share state.
  *
  * @example
- * ```html
- * <p kjLead>Atlas helps engineering teams plan quarterly roadmaps.</p>
+ * ```ts
+ * const store = inject(KjChatStore);
+ * store.sendUser('Summarise the spec');
+ * store.beginAssistant();
+ * for await (const token of myModelStream()) store.pushChunk(token);
+ * store.endAssistant();
  * ```
- * @doc-category Core/Data display
+ * @doc-category Core/AI
  * @doc
- * @doc-name typography
- */
-class KjLead {
-    el = inject(ElementRef);
-    constructor() {
-        if (isDevMode()) {
-            afterNextRender(() => {
-                const host = this.el.nativeElement;
-                if (host.tagName?.toLowerCase() !== 'p') {
-                    console.warn(`[kj] kjLead applied to <${host.tagName?.toLowerCase()}>. ` +
-                        `Lead semantics are paragraph-bound; recommended host is <p>.`);
-                }
-            });
-        }
+ * @doc-name chat-store
+ * @doc-description Headless provider-agnostic streaming chat state — messages, status, and the token-append API.
+ */
+class KjChatStore {
+    _messages = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_messages" }] : /* istanbul ignore next */ []));
+    _status = signal('idle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_status" }] : /* istanbul ignore next */ []));
+    _streamingId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_streamingId" }] : /* istanbul ignore next */ []));
+    /** The full message list. */
+    messages = this._messages.asReadonly();
+    /** Current stream status. */
+    status = this._status.asReadonly();
+    /** Id of the in-flight assistant message, or `null`. */
+    streamingId = this._streamingId.asReadonly();
+    /** True while an assistant message is streaming. */
+    isStreaming = computed(() => this._status() === 'streaming', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStreaming" }] : /* istanbul ignore next */ []));
+    /** The current thread-level error, if any. */
+    error = computed(() => this._messages().find((m) => m.id === this._streamingId())?.error ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Append a user message; returns its id. */
+    sendUser(content) {
+        const id = nextChatMessageId();
+        this.append({ id, role: 'user', content, createdAt: Date.now() });
+        return id;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjLead, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: KjLead, isStandalone: true, selector: "[kjLead]", host: { properties: { "attr.data-tone": "\"lead\"" } }, exportAs: ["kjLead"], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjLead, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kjLead]',
-                    standalone: true,
-                    exportAs: 'kjLead',
-                    host: {
-                        '[attr.data-tone]': '"lead"',
+    /** Append a system message; returns its id. */
+    addSystem(content) {
+        const id = nextChatMessageId();
+        this.append({ id, role: 'system', content, createdAt: Date.now() });
+        return id;
+    }
+    /**
+     * Start an in-flight assistant message. Sets `status → 'streaming'` and
+     * `streamingId`. Returns the new message id.
+     */
+    beginAssistant(seed = '') {
+        const id = nextChatMessageId();
+        this.append({
+            id,
+            role: 'assistant',
+            content: seed,
+            streaming: true,
+            createdAt: Date.now(),
+        });
+        this._streamingId.set(id);
+        this._status.set('streaming');
+        return id;
+    }
+    /**
+     * Append a token / chunk to the in-flight assistant message. No-op (with a
+     * dev warning) if there is no in-flight message.
+     */
+    pushChunk(text) {
+        const id = this._streamingId();
+        if (id === null)
+            return;
+        this.patch(id, (m) => ({ ...m, content: m.content + text }));
+    }
+    /** Add a tool call to the in-flight assistant message. */
+    addToolCall(tc) {
+        const id = this._streamingId();
+        if (id === null)
+            return;
+        this.patch(id, (m) => ({ ...m, toolCalls: [...(m.toolCalls ?? []), tc] }));
+    }
+    /** Patch an existing tool call by id on the in-flight message. */
+    updateToolCall(toolCallId, patch) {
+        const id = this._streamingId();
+        if (id === null)
+            return;
+        this.patch(id, (m) => ({
+            ...m,
+            toolCalls: (m.toolCalls ?? []).map((tc) => (tc.id === toolCallId ? { ...tc, ...patch } : tc)),
+        }));
+    }
+    /** Attach citations to the in-flight assistant message. */
+    addCitations(citations) {
+        const id = this._streamingId();
+        if (id === null)
+            return;
+        this.patch(id, (m) => ({
+            ...m,
+            citations: [...(m.citations ?? []), ...citations],
+        }));
+    }
+    /** Complete the in-flight message; `status → 'idle'`. */
+    endAssistant() {
+        const id = this._streamingId();
+        if (id !== null)
+            this.patch(id, (m) => ({ ...m, streaming: false }));
+        this._streamingId.set(null);
+        this._status.set('idle');
+    }
+    /**
+     * Fail the in-flight turn. Sets `status → 'error'` and records the error on
+     * the message. The message stops streaming but keeps any partial content.
+     */
+    fail(message) {
+        const id = this._streamingId();
+        if (id !== null) {
+            this.patch(id, (m) => ({ ...m, streaming: false, error: message }));
+        }
+        this._status.set('error');
+    }
+    /**
+     * Consumer-initiated stop (abort). Freezes whatever partial content exists
+     * and returns to `idle`. The consumer is responsible for aborting their own
+     * network stream.
+     */
+    stop() {
+        const id = this._streamingId();
+        if (id !== null)
+            this.patch(id, (m) => ({ ...m, streaming: false }));
+        this._streamingId.set(null);
+        this._status.set('idle');
+    }
+    /** Replace the whole message list (e.g. load history). */
+    setMessages(messages) {
+        this._messages.set([...messages]);
+    }
+    /** Clear the thread and return to `idle`. */
+    reset() {
+        this._messages.set([]);
+        this._streamingId.set(null);
+        this._status.set('idle');
+    }
+    append(msg) {
+        this._messages.update((list) => [...list, msg]);
+    }
+    patch(id, fn) {
+        this._messages.update((list) => list.map((m) => (m.id === id ? fn(m) : m)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChatStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChatStore });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChatStore, decorators: [{
+            type: Injectable
+        }] });
+/** Sentence-ending punctuation we flush on. */
+const SENTENCE_END = /[.!?\n]/g;
+/**
+ * Pure coalescing logic for the streaming live region — **the differentiator**.
+ *
+ * Screen readers announce every mutation of an `aria-live` region, so pushing a
+ * streamed reply char-by-char produces an unusable torrent. This function holds
+ * the streamed `buffer` and releases it only in **whole units**:
+ *
+ * 1. Flush up to and including the **last sentence boundary** (`.`, `!`, `?`,
+ *    newline). The trailing partial sentence stays in `remainder`.
+ * 2. If no boundary exists but the buffer exceeds `maxChars`, flush up to the
+ *    last **word** boundary (space) so a long clause is not held silent.
+ * 3. Otherwise announce nothing yet (`toAnnounce: ''`).
+ *
+ * The caller appends new chunks to `remainder` and calls this again; on stream
+ * completion it flushes the final remainder unconditionally (see
+ * {@link KjChatAnnouncer.flush}).
+ *
+ * @example
+ * ```ts
+ * coalesceAnnouncement('Hello there. How ar')
+ * // → { toAnnounce: 'Hello there.', remainder: ' How ar' }
+ * ```
+ */
+function coalesceAnnouncement(buffer, opts = {}) {
+    const maxChars = opts.maxChars ?? 160;
+    // Find the last sentence boundary.
+    let lastEnd = -1;
+    SENTENCE_END.lastIndex = 0;
+    for (let m = SENTENCE_END.exec(buffer); m; m = SENTENCE_END.exec(buffer)) {
+        lastEnd = m.index;
+    }
+    if (lastEnd >= 0) {
+        const cut = lastEnd + 1;
+        return {
+            toAnnounce: buffer.slice(0, cut).trim(),
+            remainder: buffer.slice(cut),
+        };
+    }
+    // No sentence boundary — flush at a word boundary only if over budget.
+    if (buffer.length > maxChars) {
+        const lastSpace = buffer.lastIndexOf(' ');
+        if (lastSpace > 0) {
+            return {
+                toAnnounce: buffer.slice(0, lastSpace).trim(),
+                remainder: buffer.slice(lastSpace + 1),
+            };
+        }
+        // A single very long token — flush it whole rather than hold forever.
+        return { toAnnounce: buffer.trim(), remainder: '' };
+    }
+    return { toAnnounce: '', remainder: buffer };
+}
+/**
+ * Stateful wrapper around {@link coalesceAnnouncement} that exposes the current
+ * announcement as a signal for a visually-hidden `aria-live="polite"` region.
+ *
+ * `push()` accumulates streamed text and emits coalesced sentences; `flush()`
+ * (called on stream completion) releases the final remainder; `announce()`
+ * pushes a discrete status line (e.g. an error) immediately.
+ *
+ * The emitted string toggles through empty between announcements so repeated
+ * identical sentences are still re-announced by AT.
+ *
+ * @doc-category Core/AI
+ * @doc
+ * @doc-name chat-announcer
+ * @doc-description Coalesces streamed tokens into whole-sentence polite live-region announcements.
+ */
+class KjChatAnnouncer {
+    buffer = '';
+    _message = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_message" }] : /* istanbul ignore next */ []));
+    toggle = false;
+    /** The current announcement text for the polite live region. */
+    message = this._message.asReadonly();
+    /** Max chars held without a boundary before a word-boundary flush. */
+    maxChars = 160;
+    /** Append streamed text; emits any newly-completed sentence(s). */
+    push(chunk) {
+        this.buffer += chunk;
+        const { toAnnounce, remainder } = coalesceAnnouncement(this.buffer, {
+            maxChars: this.maxChars,
+        });
+        this.buffer = remainder;
+        if (toAnnounce)
+            this.emit(toAnnounce);
+    }
+    /** Force-release the buffered remainder (call on stream completion). */
+    flush() {
+        const text = this.buffer.trim();
+        this.buffer = '';
+        if (text)
+            this.emit(text);
+    }
+    /** Announce a discrete status line immediately (bypasses coalescing). */
+    announce(text) {
+        if (text.trim())
+            this.emit(text.trim());
+    }
+    /** Clear buffered text and the current announcement. */
+    clear() {
+        this.buffer = '';
+        this._message.set('');
+    }
+    emit(text) {
+        // Alternate a trailing zero-width space so identical consecutive
+        // sentences still register as a live-region change for AT.
+        this.toggle = !this.toggle;
+        this._message.set(this.toggle ? text : text + '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChatAnnouncer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChatAnnouncer });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChatAnnouncer, decorators: [{
+            type: Injectable
+        }] });
+/**
+ * Strip diacritic marks from a string (e.g. `café` → `cafe`).
+ * Uses NFD normalisation followed by removal of Unicode diacritic characters.
+ * Note: locale-naive for v1 (Turkish/German edge cases are documented).
+ */
+function stripDiacritics(str) {
+    return str.normalize('NFD').replace(/\p{Diacritic}/gu, '');
+}
+/**
+ * Default filter: case- and diacritic-insensitive substring match.
+ * Returns score 1 if any haystack contains the needle, 0 otherwise.
+ * Returns 1 for empty queries (all items visible).
+ */
+const kjSubstringFilter = (query, haystacks) => {
+    if (!query)
+        return 1;
+    const needle = stripDiacritics(query.toLowerCase());
+    return haystacks.some(h => stripDiacritics(h.toLowerCase()).includes(needle)) ? 1 : 0;
+};
+/**
+ * Optional fuzzy filter: checks whether all characters of the query appear
+ * in the haystack in order (abbreviation matching).
+ * E.g. `gth` matches `git checkout`.
+ * Returns score 1 if any haystack matches, 0 otherwise.
+ * Returns 1 for empty queries.
+ *
+ * @example
+ * ```html
+ * <div kjCommandPalette [kjFilter]="kjFuzzyFilter">…</div>
+ * ```
+ */
+const kjFuzzyFilter = (query, haystacks) => {
+    if (!query)
+        return 1;
+    const needle = query.toLowerCase();
+    return haystacks.some(h => {
+        const hay = h.toLowerCase();
+        let i = 0;
+        for (const c of needle) {
+            const j = hay.indexOf(c, i);
+            if (j < 0)
+                return false;
+            i = j + 1;
+        }
+        return true;
+    }) ? 1 : 0;
+};
+/**
+ * Parse prompt text for an in-progress slash command. The menu is active only
+ * when the text starts with `/` and the command token has not been completed by
+ * whitespace yet — so `/sum` is active but `/summarize now` is not.
+ *
+ * @example
+ * ```ts
+ * parseSlash('/sum')        // → { active: true, query: 'sum' }
+ * parseSlash('/sum arg')    // → { active: false, query: '' }
+ * parseSlash('hi')          // → { active: false, query: '' }
+ * ```
+ */
+function parseSlash(text) {
+    if (!text.startsWith('/'))
+        return { active: false, query: '' };
+    const rest = text.slice(1);
+    if (/\s/.test(rest))
+        return { active: false, query: '' };
+    return { active: true, query: rest };
+}
+/**
+ * Filter slash commands against a query using the **command-palette filter**
+ * (`kjSubstringFilter` by default — case- and diacritic-insensitive). Each
+ * command's `[name, label, description]` form the haystack.
+ *
+ * @param query      the text after the leading slash
+ * @param commands   the available commands
+ * @param filter     palette filter (defaults to {@link kjSubstringFilter})
+ */
+function matchSlashCommands(query, commands, filter = kjSubstringFilter) {
+    return commands
+        .map((cmd) => ({
+        cmd,
+        score: filter(query, [cmd.name, cmd.label, cmd.description ?? '']),
+    }))
+        .filter(({ score }) => score > 0)
+        .map(({ cmd }) => cmd);
+}
+/**
+ * Marks a paragraph as the lead-in paragraph for a section — slightly larger
+ * size with a softer tone. Reflects `data-tone="lead"` so theme CSS keys off
+ * it; the directive owns no styling itself.
+ *
+ * Lead semantics are paragraph-bound; applied to a non-`<p>` host the
+ * directive emits a dev-mode warning but does not enforce the tag.
+ *
+ * @example
+ * ```html
+ * <p kjLead>Atlas helps engineering teams plan quarterly roadmaps.</p>
+ * ```
+ * @doc-category Core/Data display
+ * @doc
+ * @doc-name typography
+ */
+class KjLead {
+    el = inject(ElementRef);
+    constructor() {
+        if (isDevMode()) {
+            afterNextRender(() => {
+                const host = this.el.nativeElement;
+                if (host.tagName?.toLowerCase() !== 'p') {
+                    console.warn(`[kj] kjLead applied to <${host.tagName?.toLowerCase()}>. ` +
+                        `Lead semantics are paragraph-bound; recommended host is <p>.`);
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjLead, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: KjLead, isStandalone: true, selector: "[kjLead]", host: { properties: { "attr.data-tone": "\"lead\"" } }, exportAs: ["kjLead"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjLead, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kjLead]',
+                    standalone: true,
+                    exportAs: 'kjLead',
+                    host: {
+                        '[attr.data-tone]': '"lead"',
                     },
                 }]
         }], ctorParameters: () => [] });
@@ -11628,9 +12627,9 @@ const DRAWER_SIDE = new InjectionToken('KjDrawerSide');
 const DRAWER_DRAG = new InjectionToken('KjDrawerDrag');
 /** Downward drag fraction past which release dismisses (bottom side). */
-const DEFAULT_DISMISS_THRESHOLD = 0.4;
+const DEFAULT_DISMISS_THRESHOLD$1 = 0.4;
 /** Downward velocity (px/s) past which release dismisses (bottom side). */
-const DEFAULT_DISMISS_VELOCITY = 600;
+const DEFAULT_DISMISS_VELOCITY$1 = 600;
 /**
  * Drawer body component. Composes {@link KjOverlayPanel} so the host element
  * inherits `role`, `[data-state]`, and the configured side strategy from
@@ -11689,8 +12688,8 @@ class KjDrawer {
         const velocity = (dy / dt) * 1000;
         this.endDrag();
         const panelHeight = this.el.nativeElement.getBoundingClientRect().height || 200;
-        if (velocity > DEFAULT_DISMISS_VELOCITY
-            || dy / panelHeight >= DEFAULT_DISMISS_THRESHOLD) {
+        if (velocity > DEFAULT_DISMISS_VELOCITY$1
+            || dy / panelHeight >= DEFAULT_DISMISS_THRESHOLD$1) {
             this.ref?.close();
         }
     }
@@ -11739,55 +12738,331 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 args: ['keydown.escape']
             }] } });
-class KjTooltipTrigger {
-    kjOpenDelay = input(200, { ...(ngDevMode ? { debugName: "kjOpenDelay" } : /* istanbul ignore next */ {}), transform: (v) => Number(v) || 200 });
-    kjCloseDelay = input(0, { ...(ngDevMode ? { debugName: "kjCloseDelay" } : /* istanbul ignore next */ {}), transform: (v) => Number(v) || 0 });
-    kjDisabled = input(false, { ...(ngDevMode ? { debugName: "kjDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    constructor() {
-        const strat = inject(KJ_OVERLAY_TRIGGER_EVENT_STRATEGY);
-        if ('configure' in strat) {
-            strat.configure({ openDelay: this.kjOpenDelay, closeDelay: this.kjCloseDelay });
-        }
+/**
+ * Reference returned by `KjSheetService.open()`. Mirrors
+ * {@link import('../drawer/drawer.ref').KjDrawerRef}.
+ *
+ * Use `close(result?)` to dismiss the bottom sheet programmatically. Subscribe
+ * to `afterClosed$` for the close result, or await the `result` promise.
+ *
+ * @doc-category Core/Overlay
+ */
+class KjSheetRef {
+    controller;
+    _instance = null;
+    _result;
+    resolveResult;
+    /** Promise resolving with the close result. */
+    result;
+    _afterOpened = new Subject();
+    _afterClosed = new Subject();
+    /** Emits once after the sheet has finished opening. */
+    afterOpened$ = this._afterOpened.asObservable();
+    /** Emits the close result once the sheet has finished closing. */
+    afterClosed$ = this._afterClosed.asObservable();
+    /** Reactive lifecycle state mirrored from the underlying controller. */
+    state;
+    /** Convenience for `state() === 'open' || 'opening'`. */
+    isOpen;
+    constructor(controller) {
+        this.controller = controller;
+        this.state = controller.state;
+        this.isOpen = controller.isOpen;
+        this.result = new Promise((res) => {
+            this.resolveResult = res;
+        });
     }
-    _overlayTrigger = inject(KjOverlayTrigger, { self: true });
-    /** The controller of the composed `KjOverlayTrigger`, exposed for sibling `[kjFor]` panels. */
-    get controller() {
-        return this._overlayTrigger.controller;
+    /** @internal Bind the rendered component instance for `instance`. */
+    bindInstance(instance) {
+        this._instance = instance;
     }
-    attachPanel(panel) {
-        this._overlayTrigger.attachPanel(panel);
+    /** The rendered sheet body component instance. */
+    get instance() {
+        if (!this._instance) {
+            throw new Error('KjSheetRef: instance not bound');
+        }
+        return this._instance;
+    }
+    /** Close the sheet with an optional result payload. */
+    close(result) {
+        this._result = result;
+        this.controller.close('programmatic');
+        queueMicrotask(() => {
+            this._afterClosed.next(this._result);
+            this._afterClosed.complete();
+            this.resolveResult(this._result);
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTooltipTrigger, isStandalone: true, selector: "[kjTooltipTrigger]", inputs: { kjOpenDelay: { classPropertyName: "kjOpenDelay", publicName: "kjOpenDelay", isSignal: true, isRequired: false, transformFunction: null }, kjCloseDelay: { classPropertyName: "kjCloseDelay", publicName: "kjCloseDelay", isSignal: true, isRequired: false, transformFunction: null }, kjDisabled: { classPropertyName: "kjDisabled", publicName: "kjDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            KjOverlayController,
-            {
-                provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
-                useFactory: () => onHover({ openDelay: 200, closeDelay: 0 }),
-            },
-            { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'tooltip' },
-        ], exportAs: ["kjTooltipTrigger"], hostDirectives: [{ directive: KjOverlayTrigger, inputs: ["kjOpen", "kjOpen"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTooltipTrigger, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kjTooltipTrigger]',
-                    exportAs: 'kjTooltipTrigger',
-                    standalone: true,
-                    hostDirectives: [
-                        { directive: KjOverlayTrigger, inputs: ['kjOpen'] },
-                    ],
-                    providers: [
-                        KjOverlayController,
-                        {
-                            provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
-                            useFactory: () => onHover({ openDelay: 200, closeDelay: 0 }),
-                        },
-                        { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'tooltip' },
-                    ],
-                }]
-        }], ctorParameters: () => [], propDecorators: { kjOpenDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOpenDelay", required: false }] }], kjCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjCloseDelay", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }] } });
-// tooltip-content.ts
+/**
+ * Programmatic service for opening bottom sheets — a mobile-first,
+ * bottom-anchored modal surface with a grab handle and drag-to-dismiss.
+ *
+ * Composes the same overlay primitive stack as `KjDrawer` and `KjDialog`
+ * (`edgeSheet` position, `solidBackdrop`, `tabCycle` focus trap,
+ * `htmlOverflow` scroll lock) through {@link KjOverlayBuilder} — the overlay
+ * engine is reused, not reinvented.
+ *
+ * @doc-category Core/Overlay
+ */
+class KjSheetService {
+    builder = inject(KjOverlayBuilder);
+    env = inject(EnvironmentInjector);
+    /**
+     * Open a component as a modal bottom sheet.
+     *
+     * @param component - The body component rendered inside the sheet.
+     * @param opts - Data, detent, dismissible, and close-on-outside controls.
+     * @returns A {@link KjSheetRef} for closing and observing the sheet.
+     */
+    open(component, opts = {}) {
+        const dismissible = opts.dismissible ?? true;
+        const handle = this.builder.create({
+            mount: inPlace(),
+            position: edgeSheet({ side: 'bottom' }),
+            backdrop: solidBackdrop({
+                inert: true,
+                closeOnClick: opts.closeOnOutside ?? true,
+            }),
+            focusTrap: tabCycle({ returnFocus: true }),
+            scrollLock: htmlOverflow(),
+            liveAnnouncer: silent(),
+            trigger: programmatic(),
+            panelRole: 'dialog',
+        });
+        const ref = new KjSheetRef(handle.controller);
+        const cmpRef = this.builder.attachComponent(handle, component, {
+            providers: [
+                { provide: KjSheetRef, useValue: ref },
+                { provide: SHEET_DATA, useValue: opts.data },
+                { provide: SHEET_DETENT, useValue: opts.detent ?? 'auto' },
+                { provide: SHEET_DISMISSIBLE, useValue: dismissible },
+                { provide: SHEET_ARIA_LABEL, useValue: opts.ariaLabel ?? null },
+            ],
+        });
+        ref.bindInstance(cmpRef.instance);
+        runInInjectionContext(this.env, () => {
+            let wasOpen = false;
+            const eff = effect(() => {
+                const s = handle.controller.state();
+                if (s === 'open' || s === 'opening')
+                    wasOpen = true;
+                if (s === 'closed' && wasOpen) {
+                    eff.destroy();
+                    queueMicrotask(() => handle.destroy());
+                }
+            }, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "eff" }] : /* istanbul ignore next */ []));
+        });
+        handle.controller.open();
+        return ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSheetService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSheetService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSheetService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** Token for passing data to a programmatically opened sheet body. */
+const SHEET_DATA = new InjectionToken('KjSheetData');
+/** Token exposing the resolved initial detent to the rendered body. */
+const SHEET_DETENT = new InjectionToken('KjSheetDetent');
+/** Token exposing whether drag-to-dismiss is enabled to the rendered body. */
+const SHEET_DISMISSIBLE = new InjectionToken('KjSheetDismissible');
+/** Token exposing the fallback accessible name to the rendered body. */
+const SHEET_ARIA_LABEL = new InjectionToken('KjSheetAriaLabel');
+/** Downward drag fraction past which release dismisses. */
+const DEFAULT_DISMISS_THRESHOLD = 0.4;
+/** Downward velocity (px/s) past which release dismisses. */
+const DEFAULT_DISMISS_VELOCITY = 600;
+/**
+ * Bottom-sheet body component. Composes {@link KjOverlayPanel} so the host
+ * inherits `role="dialog"`, `aria-modal`, `[data-state]`, and the bottom
+ * edge-sheet position from `KjSheetService.open()`.
+ *
+ * Renders a grab handle (a real `<button>` for keyboard/click dismissal) and
+ * hosts drag-to-dismiss: a downward pointer drag past 40% of the panel height
+ * or 600 px/s velocity calls `ref.close()`. The drag mechanics mirror the
+ * proven drawer bottom-drag path — no new gesture surface.
+ *
+ * @doc-category Core/Overlay
+ */
+class KjSheet {
+    /** Resolved initial detent (provided by `KjSheetService.open`). */
+    detent = inject(SHEET_DETENT, { optional: true }) ?? 'auto';
+    /** Whether grab-handle + drag-to-dismiss is active. */
+    dismissible = inject(SHEET_DISMISSIBLE, { optional: true }) ?? true;
+    /** Fallback accessible name applied to the host when no heading is projected. */
+    ariaLabel = inject(SHEET_ARIA_LABEL, { optional: true }) ?? null;
+    ref = inject(KjSheetRef, { optional: true });
+    el = inject(ElementRef);
+    startY = 0;
+    startTime = 0;
+    pointerId = null;
+    _dragging = false;
+    /** Reactive flag for the `data-kj-dragging` host binding. */
+    dragging = computed(() => this._dragging, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onPointerDown(event) {
+        if (!this.dismissible)
+            return;
+        if (event.button !== undefined && event.button !== 0)
+            return;
+        this.pointerId = event.pointerId;
+        this.startY = event.clientY;
+        this.startTime = typeof performance !== 'undefined' ? performance.now() : Date.now();
+        this._dragging = true;
+        event.target?.setPointerCapture?.(event.pointerId);
+    }
+    /** @internal */
+    onPointerMove(event) {
+        if (!this._dragging)
+            return;
+        if (this.pointerId !== null && event.pointerId !== this.pointerId)
+            return;
+        const offset = Math.max(0, event.clientY - this.startY);
+        this.el.nativeElement.style.setProperty('--kj-sheet-drag-offset', `${offset}px`);
+    }
+    /** @internal */
+    onPointerUp(event) {
+        if (!this._dragging)
+            return;
+        if (this.pointerId !== null && event.pointerId !== this.pointerId)
+            return;
+        const now = typeof performance !== 'undefined' ? performance.now() : Date.now();
+        const dy = Math.max(0, event.clientY - this.startY);
+        const dt = Math.max(1, now - this.startTime);
+        const velocity = (dy / dt) * 1000;
+        this.endDrag();
+        const panelHeight = this.el.nativeElement.getBoundingClientRect().height || 200;
+        if (velocity > DEFAULT_DISMISS_VELOCITY
+            || dy / panelHeight >= DEFAULT_DISMISS_THRESHOLD) {
+            this.ref?.close();
+        }
+    }
+    /** @internal */
+    onPointerCancel(_event) {
+        this.endDrag();
+    }
+    endDrag() {
+        this._dragging = false;
+        this.pointerId = null;
+        this.el.nativeElement.style.removeProperty('--kj-sheet-drag-offset');
+    }
+    /** Close the sheet with an optional payload. */
+    close(result) {
+        this.ref?.close(result);
+    }
+    /** Esc closes via the overlay-stack coordinator on the controller. */
+    onEscape() {
+        this.ref?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjSheet, isStandalone: true, selector: "kj-sheet", host: { listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerCancel($event)", "keydown.escape": "onEscape()" }, properties: { "attr.data-kj-detent": "detent", "attr.aria-label": "ariaLabel", "attr.data-kj-dragging": "dragging() ? \"\" : null", "style.touch-action": "dragging() ? \"none\" : null" }, classAttribute: "kj-sheet" }, hostDirectives: [{ directive: KjOverlayPanel }], ngImport: i0, template: `
+    @if (dismissible) {
+      <button
+        type="button"
+        class="kj-sheet__handle"
+        aria-label="Close sheet"
+        (click)="close()"
+      >
+        <span class="kj-sheet__grip" aria-hidden="true"></span>
+      </button>
+    }
+    <div class="kj-sheet__content"><ng-content /></div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSheet, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kj-sheet',
+                    standalone: true,
+                    hostDirectives: [{ directive: KjOverlayPanel }],
+                    host: {
+                        'class': 'kj-sheet',
+                        '[attr.data-kj-detent]': 'detent',
+                        '[attr.aria-label]': 'ariaLabel',
+                        '[attr.data-kj-dragging]': 'dragging() ? "" : null',
+                        '[style.touch-action]': 'dragging() ? "none" : null',
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerup)': 'onPointerUp($event)',
+                        '(pointercancel)': 'onPointerCancel($event)',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+    @if (dismissible) {
+      <button
+        type="button"
+        class="kj-sheet__handle"
+        aria-label="Close sheet"
+        (click)="close()"
+      >
+        <span class="kj-sheet__grip" aria-hidden="true"></span>
+      </button>
+    }
+    <div class="kj-sheet__content"><ng-content /></div>
+  `,
+                }]
+        }], propDecorators: { onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+class KjTooltipTrigger {
+    kjOpenDelay = input(200, { ...(ngDevMode ? { debugName: "kjOpenDelay" } : /* istanbul ignore next */ {}), transform: (v) => Number(v) || 200 });
+    kjCloseDelay = input(0, { ...(ngDevMode ? { debugName: "kjCloseDelay" } : /* istanbul ignore next */ {}), transform: (v) => Number(v) || 0 });
+    kjDisabled = input(false, { ...(ngDevMode ? { debugName: "kjDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    constructor() {
+        const strat = inject(KJ_OVERLAY_TRIGGER_EVENT_STRATEGY);
+        if ('configure' in strat) {
+            strat.configure({ openDelay: this.kjOpenDelay, closeDelay: this.kjCloseDelay });
+        }
+    }
+    _overlayTrigger = inject(KjOverlayTrigger, { self: true });
+    /** The controller of the composed `KjOverlayTrigger`, exposed for sibling `[kjFor]` panels. */
+    get controller() {
+        return this._overlayTrigger.controller;
+    }
+    attachPanel(panel) {
+        this._overlayTrigger.attachPanel(panel);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjTooltipTrigger, isStandalone: true, selector: "[kjTooltipTrigger]", inputs: { kjOpenDelay: { classPropertyName: "kjOpenDelay", publicName: "kjOpenDelay", isSignal: true, isRequired: false, transformFunction: null }, kjCloseDelay: { classPropertyName: "kjCloseDelay", publicName: "kjCloseDelay", isSignal: true, isRequired: false, transformFunction: null }, kjDisabled: { classPropertyName: "kjDisabled", publicName: "kjDisabled", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            KjOverlayController,
+            {
+                provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
+                useFactory: () => onHover({ openDelay: 200, closeDelay: 0 }),
+            },
+            { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'tooltip' },
+        ], exportAs: ["kjTooltipTrigger"], hostDirectives: [{ directive: KjOverlayTrigger, inputs: ["kjOpen", "kjOpen"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTooltipTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kjTooltipTrigger]',
+                    exportAs: 'kjTooltipTrigger',
+                    standalone: true,
+                    hostDirectives: [
+                        { directive: KjOverlayTrigger, inputs: ['kjOpen'] },
+                    ],
+                    providers: [
+                        KjOverlayController,
+                        {
+                            provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
+                            useFactory: () => onHover({ openDelay: 200, closeDelay: 0 }),
+                        },
+                        { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'tooltip' },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { kjOpenDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOpenDelay", required: false }] }], kjCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjCloseDelay", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }] } });
+// tooltip-content.ts
 class KjTooltipContent {
     kjSide = input('top', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjSide" }] : /* istanbul ignore next */ []));
@@ -14000,22 +15275,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * for new code — this directive is for cases where the dismiss target id is
  * known outside the template context.
  *
+ * Carries a **localized default `aria-label`** (from the `'toast.close'`
+ * translation key), so an icon-only close button is named for assistive tech in
+ * the active locale with no extra markup. Override per-instance with
+ * `[kjToastCloseLabel]`.
+ *
  * @example
  * ```html
- * <button [kjToastClose]="toast.id" aria-label="Dismiss">×</button>
+ * <button [kjToastClose]="toast.id">×</button>
  * ```
  * @doc-category Core/Overlay
  */
 class KjToastClose {
     svc = inject(KjToastService);
+    i18n = inject(KjTranslateService);
     /** The id of the toast to dismiss on click. */
     kjToastClose = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjToastClose" }] : /* istanbul ignore next */ []));
+    /** Overrides the localized default `aria-label`. */
+    kjToastCloseLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "kjToastCloseLabel" }] : /* istanbul ignore next */ []));
+    /** Resolved `aria-label`: explicit override, else the localized default. */
+    closeLabel = computed(() => this.kjToastCloseLabel() ?? this.i18n.translate('toast.close'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
     dismiss() {
         this.svc.dismiss(this.kjToastClose());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjToastClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjToastClose, isStandalone: true, selector: "[kjToastClose]", inputs: { kjToastClose: { classPropertyName: "kjToastClose", publicName: "kjToastClose", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "dismiss()" }, classAttribute: "kj-toast-close" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjToastClose, isStandalone: true, selector: "[kjToastClose]", inputs: { kjToastClose: { classPropertyName: "kjToastClose", publicName: "kjToastClose", isSignal: true, isRequired: true, transformFunction: null }, kjToastCloseLabel: { classPropertyName: "kjToastCloseLabel", publicName: "kjToastCloseLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "dismiss()" }, properties: { "attr.aria-label": "closeLabel()" }, classAttribute: "kj-toast-close" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjToastClose, decorators: [{
             type: Directive,
@@ -14025,9 +15312,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     host: {
                         'class': 'kj-toast-close',
                         '(click)': 'dismiss()',
+                        '[attr.aria-label]': 'closeLabel()',
                     },
                 }]
-        }], propDecorators: { kjToastClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjToastClose", required: true }] }] } });
+        }], propDecorators: { kjToastClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjToastClose", required: true }] }], kjToastCloseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjToastCloseLabel", required: false }] }] } });
 /**
  * Service-launched toast panel. Composes `KjOverlayPanel` as a host directive
  * so the overlay primitives wire role/state/aria management. The role is
@@ -14256,6 +15544,19 @@ class KjCommandInput {
     palette = inject(KjCommandPalette);
     nav = inject(KjListNavigator);
     el = inject(ElementRef);
+    constructor() {
+        // Reflect the query signal back onto the DOM input. The `(input)` binding
+        // is one-way (DOM → signal), so an external reset of `kjQuery` (e.g. the
+        // wrapper clearing it when the palette closes) would otherwise leave the
+        // previous text visible on reopen. During typing the values already match,
+        // so this is a no-op and never disturbs the caret position.
+        effect(() => {
+            const q = this.palette.query();
+            const el = this.el.nativeElement;
+            if (el.value !== q)
+                el.value = q;
+        });
+    }
     ngOnInit() {
         this.palette._setNavigator(this.nav);
     }
@@ -14296,7 +15597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '(input)': 'palette.setQuery($any($event.target).value)',
                     },
                 }]
-        }], propDecorators: { onKeydown: [{
+        }], ctorParameters: () => [], propDecorators: { onKeydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
@@ -14608,54 +15909,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], propDecorators: { kjHotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjHotkey", required: false }] }] } });
-/**
- * Strip diacritic marks from a string (e.g. `café` → `cafe`).
- * Uses NFD normalisation followed by removal of Unicode diacritic characters.
- * Note: locale-naive for v1 (Turkish/German edge cases are documented).
- */
-function stripDiacritics(str) {
-    return str.normalize('NFD').replace(/\p{Diacritic}/gu, '');
-}
-/**
- * Default filter: case- and diacritic-insensitive substring match.
- * Returns score 1 if any haystack contains the needle, 0 otherwise.
- * Returns 1 for empty queries (all items visible).
- */
-const kjSubstringFilter = (query, haystacks) => {
-    if (!query)
-        return 1;
-    const needle = stripDiacritics(query.toLowerCase());
-    return haystacks.some(h => stripDiacritics(h.toLowerCase()).includes(needle)) ? 1 : 0;
-};
-/**
- * Optional fuzzy filter: checks whether all characters of the query appear
- * in the haystack in order (abbreviation matching).
- * E.g. `gth` matches `git checkout`.
- * Returns score 1 if any haystack matches, 0 otherwise.
- * Returns 1 for empty queries.
- *
- * @example
- * ```html
- * <div kjCommandPalette [kjFilter]="kjFuzzyFilter">…</div>
- * ```
- */
-const kjFuzzyFilter = (query, haystacks) => {
-    if (!query)
-        return 1;
-    const needle = query.toLowerCase();
-    return haystacks.some(h => {
-        const hay = h.toLowerCase();
-        let i = 0;
-        for (const c of needle) {
-            const j = hay.indexOf(c, i);
-            if (j < 0)
-                return false;
-            i = j + 1;
-        }
-        return true;
-    }) ? 1 : 0;
-};
 /**
  * Structured filter models — a near-direct adaptation of AG-Grid's
  * `FilterModel` shape. Each built-in filter writes one of these models
@@ -23162,7 +24415,7 @@ function nextPanelId() {
  */
 class KjDatePicker {
     disabledHost = inject(KjDisabled);
-    defaultLocale = inject(LOCALE_ID);
+    localeProvider = inject(KjLocale);
     /** Current selected value. Two-way bindable — `[(kjValue)]`. */
     kjValue = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjValue" }] : /* istanbul ignore next */ []));
@@ -23175,7 +24428,7 @@ class KjDatePicker {
     /** Per-date predicate. */
     kjDisabledDates = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjDisabledDates" }] : /* istanbul ignore next */ []));
-    /** BCP-47 locale tag. Defaults to Angular's `LOCALE_ID`. */
+    /** BCP-47 locale tag. Falls back to the `KjLocale` provider (`provideKjLocale`). */
     kjLocale = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjLocale" }] : /* istanbul ignore next */ []));
     /** First day of the week override (0=Sun … 6=Sat). */
@@ -23205,7 +24458,7 @@ class KjDatePicker {
     ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
     disabledDates = computed(() => this.kjDisabledDates(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
-    locale = computed(() => this.kjLocale() || this.defaultLocale, /* @ts-ignore */
+    locale = computed(() => this.kjLocale() || this.localeProvider.locale(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
     disabled = this.disabledHost.disabled;
     readonly = computed(() => this.kjReadonly(), /* @ts-ignore */
@@ -23319,9 +24572,20 @@ class KjDatePickerTrigger {
     el = inject(ElementRef);
     /** Cached typed text — avoids overwriting mid-edit. */
     editing = false;
+    /**
+     * Optional custom display formatter, e.g. for datetime pickers that show
+     * the time next to the date. Free-text parsing (`commitTyped`) still uses
+     * the locale date parser — text that doesn't parse as a plain date is
+     * reverted to the formatted value on the next value change.
+     */
+    kjDisplayFormat = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjDisplayFormat" }] : /* istanbul ignore next */ []));
     displayValue = computed(() => {
         const v = this.ctx.value();
-        return v ? formatDateShort(v, this.ctx.locale()) : '';
+        if (!v)
+            return '';
+        const fmt = this.kjDisplayFormat();
+        return fmt ? fmt(v, this.ctx.locale()) : formatDateShort(v, this.ctx.locale());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -23425,7 +24689,7 @@ class KjDatePickerTrigger {
         return false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDatePickerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: KjDatePickerTrigger, isStandalone: true, selector: "input[kjDatePickerTrigger]", host: { attributes: { "role": "combobox", "autocomplete": "off", "spellcheck": "false" }, listeners: { "input": "onInput($event)", "blur": "onBlur()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-disabled": "ctx.disabled() ? \"true\" : null", "attr.aria-readonly": "ctx.readonly() ? \"true\" : null", "attr.disabled": "ctx.disabled() ? \"\" : null", "attr.readonly": "ctx.readonly() ? \"\" : null" } }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjDatePickerTrigger, isStandalone: true, selector: "input[kjDatePickerTrigger]", inputs: { kjDisplayFormat: { classPropertyName: "kjDisplayFormat", publicName: "kjDisplayFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "combobox", "autocomplete": "off", "spellcheck": "false" }, listeners: { "input": "onInput($event)", "blur": "onBlur()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-disabled": "ctx.disabled() ? \"true\" : null", "attr.aria-readonly": "ctx.readonly() ? \"true\" : null", "attr.disabled": "ctx.disabled() ? \"\" : null", "attr.readonly": "ctx.readonly() ? \"\" : null" } }, providers: [
             KjOverlayController,
             { provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY, useFactory: () => clickOrFocus() },
             { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'dialog' },
@@ -23460,7 +24724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '(keydown)': 'onKeydown($event)',
                     },
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { kjDisplayFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisplayFormat", required: false }] }] } });
 /**
  * Marker directive for the calendar slot of a Date Picker. Composes the
@@ -23528,58 +24792,1711 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }], ctorParameters: () => [], propDecorators: { kjSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSide", required: false }] }], kjAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAlign", required: false }] }], kjOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOffset", required: false }] }] } });
 /**
- * Wraps Apache ECharts. Initializes after first render, updates reactively, disposes on destroy.
- * Always provide `kjChartLabel` for WCAG AAA compliance.
+ * Resolves a preset against `now`, normalizing both bounds to `startOfDay`.
+ * `null` when the preset produces an inverted range (`start > end`).
+ */
+function resolveDateRangePreset(preset, now) {
+    const raw = preset.getRange(now);
+    const start = startOfDay(raw.start);
+    const end = startOfDay(raw.end);
+    if (start.getTime() > end.getTime())
+        return null;
+    return { start, end };
+}
+const KJ_DATE_RANGE_PRESETS = new InjectionToken('KjDateRangePresets');
+/** First day of the week containing `date`, given a week start (0=Sun…6=Sat). */
+function startOfWeek(date, weekStartsOn) {
+    const day = startOfDay(date);
+    const diff = (day.getDay() - weekStartsOn + 7) % 7;
+    return addDays(day, -diff);
+}
+/** First day of the calendar quarter containing `date`. */
+function startOfQuarter(date) {
+    const q = Math.floor(date.getMonth() / 3) * 3;
+    return new Date(date.getFullYear(), q, 1);
+}
+/**
+ * The built-in date range presets — Today, Yesterday, Last 7 / 30 days, This
+ * week / month, Last month, This quarter, Year to date, Last year.
  *
- * @example
+ * All ranges are inclusive of both bounds. `Last 7 days` spans 7 calendar days
+ * *including* today (today − 6 … today), matching how analytics tools count.
+ *
+ * @param weekStartsOn - First day of the week (0=Sun … 6=Sat) used by the
+ *   `This week` preset. Defaults to Sunday; pass the locale's week start to
+ *   align with the calendar.
+ *
+ * @doc-category Core/Data input
+ * @doc
+ * @doc-name date-range-presets
+ */
+function defaultDateRangePresets(weekStartsOn = 0) {
+    return [
+        {
+            id: 'today',
+            label: 'Today',
+            getRange: (now) => ({ start: now, end: now }),
+        },
+        {
+            id: 'yesterday',
+            label: 'Yesterday',
+            getRange: (now) => {
+                const d = addDays(now, -1);
+                return { start: d, end: d };
+            },
+        },
+        {
+            id: 'last-7-days',
+            label: 'Last 7 days',
+            getRange: (now) => ({ start: addDays(now, -6), end: now }),
+        },
+        {
+            id: 'last-30-days',
+            label: 'Last 30 days',
+            getRange: (now) => ({ start: addDays(now, -29), end: now }),
+        },
+        {
+            id: 'this-week',
+            label: 'This week',
+            getRange: (now) => ({ start: startOfWeek(now, weekStartsOn), end: now }),
+        },
+        {
+            id: 'this-month',
+            label: 'This month',
+            getRange: (now) => ({ start: startOfMonth(now), end: now }),
+        },
+        {
+            id: 'last-month',
+            label: 'Last month',
+            getRange: (now) => {
+                const prev = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+                return { start: startOfMonth(prev), end: endOfMonth(prev) };
+            },
+        },
+        {
+            id: 'this-quarter',
+            label: 'This quarter',
+            getRange: (now) => ({ start: startOfQuarter(now), end: now }),
+        },
+        {
+            id: 'year-to-date',
+            label: 'Year to date',
+            getRange: (now) => ({ start: new Date(now.getFullYear(), 0, 1), end: now }),
+        },
+        {
+            id: 'last-year',
+            label: 'Last year',
+            getRange: (now) => ({
+                start: new Date(now.getFullYear() - 1, 0, 1),
+                end: new Date(now.getFullYear() - 1, 11, 31),
+            }),
+        },
+    ];
+}
+/**
+ * Headless Date Range Presets listbox. Renders a set of named quick-selects
+ * ("Last 7 days", "This quarter", …) as `role="option"` children; picking one
+ * resolves its `{ start, end }` range and commits the two-way `kjValue`.
+ *
+ * Designed to slot beside a range calendar, but usable standalone against any
+ * `signal<KjDateRange | null>`.
+ *
+ * **Compound shape:**
+ *
+ * ```html
+ * <div kjDateRangePresets [(kjValue)]="range">
+ *   @for (p of presets.presets(); track p.id) {
+ *     <button kjDateRangePresetOption [kjPreset]="p">{{ p.label }}</button>
+ *   }
+ * </div>
+ * ```
+ *
+ * Composes {@link KjRovingTabindex} (vertical) so the whole list is a single
+ * tab stop with Arrow / Home / End navigation.
+ *
+ * @doc-category Core/Data input
+ * @doc
+ * @doc-name date-range-presets
+ * @doc-description Unstyled listbox of named date-range quick-selects that resolve to an inclusive `{ start, end }` range.
+ * @doc-is-main
+ */
+class KjDateRangePresets {
+    disabledHost = inject(KjDisabled);
+    /** Selected range. Two-way bindable — `[(kjValue)]`. `null` when empty. */
+    kjValue = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjValue" }] : /* istanbul ignore next */ []));
+    /** Presets to render as options. Defaults to {@link defaultDateRangePresets}. */
+    kjPresets = input(defaultDateRangePresets(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjPresets" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the listbox. */
+    kjLabel = input('Date range presets', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Injectable "now" for the preset math — defaults to the current instant.
+     * Pass a fixed `Date` to freeze "today" (tests, storybook, replay).
+     */
+    kjNow = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjNow" }] : /* istanbul ignore next */ []));
+    /** Read-only — value displays but cannot be edited. */
+    kjReadonly = input(false, { ...(ngDevMode ? { debugName: "kjReadonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // ── KjDateRangePresetsContext implementation ───────────────────────
+    presets = computed(() => this.kjPresets(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    disabled = this.disabledHost.disabled;
+    /**
+     * Id of the preset whose resolved range matches `kjValue`, or `null`. Derived
+     * from the value so an externally-set range still highlights its preset.
+     */
+    selectedId = computed(() => {
+        const value = this.kjValue();
+        if (!value)
+            return null;
+        const now = this.now();
+        for (const preset of this.presets()) {
+            const range = resolveDateRangePreset(preset, now);
+            if (range
+                && range.start.getTime() === value.start.getTime()
+                && range.end.getTime() === value.end.getTime()) {
+                return preset.id;
+            }
+        }
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []));
+    now() {
+        return this.kjNow() ?? new Date();
+    }
+    select(preset) {
+        if (this.disabled() || this.kjReadonly())
+            return;
+        const range = resolveDateRangePreset(preset, this.now());
+        if (range)
+            this.kjValue.set(range);
+    }
+    isSelected(id) {
+        return this.selectedId() === id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDateRangePresets, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjDateRangePresets, isStandalone: true, selector: "[kjDateRangePresets]", inputs: { kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjPresets: { classPropertyName: "kjPresets", publicName: "kjPresets", isSignal: true, isRequired: false, transformFunction: null }, kjLabel: { classPropertyName: "kjLabel", publicName: "kjLabel", isSignal: true, isRequired: false, transformFunction: null }, kjNow: { classPropertyName: "kjNow", publicName: "kjNow", isSignal: true, isRequired: false, transformFunction: null }, kjReadonly: { classPropertyName: "kjReadonly", publicName: "kjReadonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjValue: "kjValueChange" }, host: { attributes: { "role": "listbox", "aria-orientation": "vertical" }, properties: { "attr.aria-label": "kjLabel()", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, providers: [
+            { provide: KJ_DATE_RANGE_PRESETS, useExisting: KjDateRangePresets },
+        ], exportAs: ["kjDateRangePresets"], hostDirectives: [{ directive: KjDisabled, inputs: ["kjDisabled", "kjDisabled"] }, { directive: KjRovingTabindex }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDateRangePresets, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kjDateRangePresets]',
+                    standalone: true,
+                    exportAs: 'kjDateRangePresets',
+                    hostDirectives: [
+                        { directive: KjDisabled, inputs: ['kjDisabled'] },
+                        KjRovingTabindex,
+                    ],
+                    providers: [
+                        { provide: KJ_DATE_RANGE_PRESETS, useExisting: KjDateRangePresets },
+                    ],
+                    host: {
+                        'role': 'listbox',
+                        'aria-orientation': 'vertical',
+                        '[attr.aria-label]': 'kjLabel()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                    },
+                }]
+        }], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPresets", required: false }] }], kjLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLabel", required: false }] }], kjNow: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjNow", required: false }] }], kjReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReadonly", required: false }] }] } });
+/**
+ * One option inside a `[kjDateRangePresets]` listbox. Apply to a native
+ * `<button>` so Enter / Space activation comes for free; the composed
+ * {@link KjRovingTabindexItemDirective} manages its `tabindex` so the list is
+ * a single tab stop.
+ *
+ * ```html
+ * <button kjDateRangePresetOption [kjPreset]="preset">{{ preset.label }}</button>
+ * ```
+ *
+ * @doc-category Core/Data input
+ * @doc
+ * @doc-name date-range-presets
+ */
+class KjDateRangePresetOption {
+    /** @internal */
+    ctx = inject(KJ_DATE_RANGE_PRESETS);
+    /** The preset this option represents. */
+    kjPreset = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjPreset" }] : /* istanbul ignore next */ []));
+    /** Whether this option is the selected one. */
+    selected = computed(() => this.ctx.isSelected(this.kjPreset().id), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    onClick() {
+        this.ctx.select(this.kjPreset());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDateRangePresetOption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjDateRangePresetOption, isStandalone: true, selector: "button[kjDateRangePresetOption]", inputs: { kjPreset: { classPropertyName: "kjPreset", publicName: "kjPreset", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "type": "button", "role": "option" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-selected": "selected() ? \"true\" : \"false\"", "attr.disabled": "ctx.disabled() ? \"\" : null" } }, exportAs: ["kjDateRangePresetOption"], hostDirectives: [{ directive: KjRovingTabindexItemDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDateRangePresetOption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[kjDateRangePresetOption]',
+                    standalone: true,
+                    exportAs: 'kjDateRangePresetOption',
+                    hostDirectives: [KjRovingTabindexItemDirective],
+                    host: {
+                        'type': 'button',
+                        'role': 'option',
+                        '[attr.aria-selected]': 'selected() ? "true" : "false"',
+                        '[attr.disabled]': 'ctx.disabled() ? "" : null',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], propDecorators: { kjPreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPreset", required: true }] }] } });
+/**
+ * Resolves the chart color palette from kj theme tokens on the given host element.
+ * Reads `--kj-chart-1..6` first; for any empty slot, falls back to the matching
+ * intent token (`--kj-bg-primary`, `--kj-bg-accent`, `--kj-bg-success`,
+ * `--kj-bg-warning`, `--kj-bg-danger`) in that order. Slots that remain empty
+ * after fallback are dropped.
+ */
+function resolveChartPalette(host) {
+    const cs = getComputedStyle(host);
+    const fallbacks = [
+        '--kj-bg-primary',
+        '--kj-bg-accent',
+        '--kj-bg-success',
+        '--kj-bg-warning',
+        '--kj-bg-danger',
+    ];
+    const out = [];
+    for (let i = 0; i < 6; i++) {
+        const chart = cs.getPropertyValue(`--kj-chart-${i + 1}`).trim();
+        if (chart) {
+            out.push(chart);
+            continue;
+        }
+        const fallback = fallbacks[i];
+        if (fallback) {
+            const v = cs.getPropertyValue(fallback).trim();
+            if (v)
+                out.push(v);
+        }
+    }
+    return out;
+}
+/**
+ * Projects a screen-reader-only table fallback for a `KjChart`. When present
+ * inside a `[kjChart]` host, the host directive renders the template as a table
+ * *sibling* of the chart element — outside the `role="img"` subtree — so
+ * assistive technology reads structured data instead of the canvas.
+ *
+ * This directive only exposes its `TemplateRef`; `KjChart` performs the
+ * rendering (see its `_fallback` content query). Rendering it standalone,
+ * without a `[kjChart]` host, produces no output.
+ *
+ * @example
+ * ```html
+ * <div kjChart [kjChartOption]="opt()" kjChartLabel="Sales">
+ *   <ng-container *kjChartTableFallback>
+ *     <table>...</table>
+ *   </ng-container>
+ * </div>
+ * ```
+ */
+class KjChartTableFallback {
+    tpl = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChartTableFallback, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: KjChartTableFallback, isStandalone: true, selector: "[kjChartTableFallback]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChartTableFallback, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kjChartTableFallback]',
+                    standalone: true,
+                }]
+        }] });
+/**
+ * DI token holding the optional {@link KjEChartsLoader}. When unset (default),
+ * {@link KjChart} falls back to a dynamic `import('echarts')` of the full
+ * build — zero-config convenience at the cost of bundle size.
+ *
+ * Prefer {@link provideECharts} over binding this token directly.
+ * @doc
+ * @doc-name chart
+ * @doc-order 2
+ */
+const KJ_ECHARTS = new InjectionToken('KJ_ECHARTS', { providedIn: 'root', factory: () => null });
+/**
+ * Registers a tree-shaken ECharts build for {@link KjChart}. Call at app
+ * bootstrap (or a route's `providers`) so every `[kjChart]` uses the minimal
+ * engine instead of the full `import('echarts')` fallback.
+ *
+ * @example
+ * ```ts
+ * // main.ts
+ * import { provideECharts } from '@kouji-ui/core';
+ * import * as echarts from 'echarts/core';
+ * import { LineChart, BarChart } from 'echarts/charts';
+ * import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
+ * import { CanvasRenderer } from 'echarts/renderers';
+ *
+ * echarts.use([LineChart, BarChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer]);
+ *
+ * bootstrapApplication(App, {
+ *   providers: [provideECharts(() => echarts)],
+ * });
+ * ```
+ * @doc
+ * @doc-name chart
+ * @doc-order 1
+ */
+function provideECharts(loader) {
+    return makeEnvironmentProviders([
+        { provide: KJ_ECHARTS, useValue: loader },
+    ]);
+}
+let nextDescId = 0;
+/**
+ * Wraps Apache ECharts. Initializes after first render, updates reactively
+ * (resize, reduced-motion, kj theme palette), disposes on destroy.
+ * Always provide `kjChartLabel` for WCAG AAA compliance.
+ *
+ * @example
+ * ```html
+ * <div kjChart [kjChartOption]="chartOption()" kjChartLabel="Monthly revenue" style="height:300px"></div>
+ * ```
+ * @doc-category Core/Data
+ * @doc
+ * @doc-name chart
+ * @doc-description Renders a reactive ECharts chart on any sized element with an accessible label.
+ * @doc-is-main
+ * @doc-example Line
+ *   @doc-file chart.example.ts
+ * @doc-example Bar
+ *   @doc-file chart.bar.example.ts
+ * @doc-example Donut
+ *   @doc-file chart.donut.example.ts
+ * @doc-example Area
+ *   @doc-file chart.area.example.ts
+ * @doc-example Sparkline
+ *   @doc-file chart.sparkline.example.ts
+ * @doc-example Events
+ *   @doc-file chart.events.example.ts
+ * @doc-example Loading
+ *   @doc-file chart.loading.example.ts
+ * @doc-example Table fallback
+ *   @doc-file chart.fallback.example.ts
+ * @doc-example Pluggable engine + general events
+ *   @doc-file chart.pluggable.example.ts
+ */
+class KjChart {
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    vcr = inject(ViewContainerRef);
+    /** Optional consumer-supplied ECharts loader (via `provideECharts`); null → full-import fallback. */
+    echartsLoader = inject(KJ_ECHARTS, { optional: true });
+    /** ECharts option object defining the chart. */
+    kjChartOption = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjChartOption" }] : /* istanbul ignore next */ []));
+    /** Accessible short label for the chart. Required for WCAG AAA compliance. */
+    kjChartLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjChartLabel" }] : /* istanbul ignore next */ []));
+    /** Longer description; rendered visually-hidden and wired via aria-describedby. */
+    kjChartDescription = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjChartDescription" }] : /* istanbul ignore next */ []));
+    /** Toggles ECharts showLoading/hideLoading. */
+    kjChartLoading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjChartLoading" }] : /* istanbul ignore next */ []));
+    /** Explicit color array; falls back to kj theme palette (resolveChartPalette) when undefined. */
+    kjChartPalette = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjChartPalette" }] : /* istanbul ignore next */ []));
+    /** Honored unless prefers-reduced-motion: reduce is set. */
+    kjChartAnimate = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjChartAnimate" }] : /* istanbul ignore next */ []));
+    /**
+     * ECharts event names to forward through `(kjChartEvent)`. Bound via
+     * `chart.on(name, …)` and re-bound reactively when this list changes.
+     * e.g. `['click', 'datazoom', 'legendselectchanged']`.
+     */
+    kjChartOn = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjChartOn" }] : /* istanbul ignore next */ []));
+    /** Emits the ECharts instance after its first `setOption` (ready with data). Re-emits on re-init. */
+    kjChartReady = output();
+    /**
+     * Emits `{ type, params }` for every ECharts event named in `kjChartOn`.
+     * Use this for arbitrary events; `kjChartReady` still exposes the raw
+     * instance for full manual `.on(...)` wiring.
+     */
+    kjChartEvent = output();
+    /** Emits ECharts 'click' events. Convenience — also available via `kjChartOn`. */
+    kjChartClick = output();
+    /** Emits ECharts 'legendselectchanged' events. Convenience — also available via `kjChartOn`. */
+    kjChartLegendSelect = output();
+    /** Unique id for the description div; used by host's aria-describedby binding. */
+    descriptionId = computed(() => this.kjChartDescription() ? `kj-chart-desc-${this._descSeq}` : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
+    _descSeq = ++nextDescId;
+    /** Projected `*kjChartTableFallback`, if any. Rendered as an SR table sibling. */
+    _fallback = contentChild(KjChartTableFallback, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_fallback" }] : /* istanbul ignore next */ []));
+    /** The live ECharts instance. A signal so event-binding + loading effects react to init/dispose. */
+    chart = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chart" }] : /* istanbul ignore next */ []));
+    prefersReducedMotion = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "prefersReducedMotion" }] : /* istanbul ignore next */ []));
+    /** Currently-bound `kjChartOn` forwarders, tracked so they can be unbound on re-bind/destroy. */
+    forwarded = [];
+    constructor() {
+        afterNextRender(async () => {
+            try {
+                // Resolve ECharts from DI: a consumer-provided (tree-shaken) build via
+                // provideECharts, else fall back to a dynamic import of the full module.
+                const echarts = this.echartsLoader
+                    ? await this.echartsLoader()
+                    : await import('echarts');
+                const chart = echarts.init(this.el.nativeElement);
+                // prefers-reduced-motion — subscribe and re-apply on change. Guarded:
+                // matchMedia is absent in some non-browser/test environments.
+                const mql = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+                    ? window.matchMedia('(prefers-reduced-motion: reduce)')
+                    : null;
+                if (mql) {
+                    this.prefersReducedMotion.set(mql.matches);
+                    const onMqlChange = () => {
+                        this.prefersReducedMotion.set(mql.matches);
+                        chart.setOption(this.resolveOption());
+                    };
+                    mql.addEventListener('change', onMqlChange);
+                    this.destroyRef.onDestroy(() => mql.removeEventListener('change', onMqlChange));
+                }
+                // First setOption populates the chart, THEN we publish it — so both the
+                // signal-driven effects (events, loading) and kjChartReady observers get
+                // an instance that is already showing data.
+                chart.setOption(this.resolveOption());
+                this.chart.set(chart);
+                this.kjChartReady.emit(chart);
+                // Convenience events — always emitted regardless of kjChartOn.
+                chart.on('click', (e) => this.kjChartClick.emit(e));
+                chart.on('legendselectchanged', (e) => this.kjChartLegendSelect.emit(e));
+                // Initial general-event binding (the reactive effect below re-binds on
+                // any later kjChartOn change; this guarantees the first bind even before
+                // the next change-detection pass).
+                this.bindForwardedEvents(chart, this.kjChartOn());
+                // ResizeObserver — coalesce via rAF so a burst of entries collapses to one resize.
+                // Guarded: ResizeObserver is absent in some non-browser environments.
+                if (typeof ResizeObserver !== 'undefined') {
+                    let pendingRaf = 0;
+                    const ro = new ResizeObserver(() => {
+                        if (pendingRaf)
+                            return;
+                        pendingRaf = requestAnimationFrame(() => {
+                            pendingRaf = 0;
+                            chart.resize();
+                        });
+                    });
+                    ro.observe(this.el.nativeElement);
+                    this.destroyRef.onDestroy(() => {
+                        if (pendingRaf)
+                            cancelAnimationFrame(pendingRaf);
+                        ro.disconnect();
+                    });
+                }
+                // Theme changes on <html> re-resolve the kj palette and re-apply the
+                // option. This never disposes the instance, so kjChartReady fires once.
+                if (typeof MutationObserver !== 'undefined') {
+                    const themeMo = new MutationObserver(() => chart.setOption(this.resolveOption()));
+                    themeMo.observe(document.documentElement, {
+                        attributes: true,
+                        attributeFilter: ['class', 'data-theme'],
+                    });
+                    this.destroyRef.onDestroy(() => themeMo.disconnect());
+                }
+                this.destroyRef.onDestroy(() => {
+                    chart.dispose();
+                    this.chart.set(null);
+                });
+            }
+            catch {
+                // ECharts cannot initialize in non-browser environments (jsdom, SSR)
+            }
+        });
+        afterEveryRender(() => {
+            this.chart()?.setOption(this.resolveOption());
+        });
+        // General event API — re-forward kjChartOn through (kjChartEvent) whenever
+        // the list changes (the initial bind happens imperatively at init).
+        // bindForwardedEvents is idempotent, so a redundant first run is harmless.
+        effect(() => {
+            const names = this.kjChartOn();
+            const chart = this.chart();
+            if (chart)
+                this.bindForwardedEvents(chart, names);
+        });
+        // Loading overlay driven reactively by [kjChartLoading].
+        effect(() => {
+            const loading = this.kjChartLoading();
+            const chart = this.chart();
+            if (!chart)
+                return;
+            if (loading)
+                chart.showLoading();
+            else
+                chart.hideLoading();
+        });
+        // Visually-hidden description element, referenced by the host's aria-describedby.
+        let descDiv = null;
+        effect(() => {
+            const text = this.kjChartDescription();
+            const id = this.descriptionId();
+            const host = this.el.nativeElement;
+            if (!text) {
+                descDiv?.remove();
+                descDiv = null;
+                return;
+            }
+            if (!descDiv) {
+                descDiv = document.createElement('div');
+                Object.assign(descDiv.style, {
+                    position: 'absolute',
+                    width: '1px',
+                    height: '1px',
+                    padding: '0',
+                    margin: '-1px',
+                    overflow: 'hidden',
+                    clip: 'rect(0 0 0 0)',
+                    whiteSpace: 'nowrap',
+                    border: '0',
+                });
+                host.appendChild(descDiv);
+            }
+            descDiv.id = id;
+            descDiv.textContent = text;
+        });
+        // Project a *kjChartTableFallback as an SR table *outside* the role="img"
+        // host (as a sibling), so assistive tech reads structured data while the
+        // canvas subtree stays presentational.
+        effect(() => {
+            const fb = this._fallback();
+            this.vcr.clear();
+            if (fb)
+                this.vcr.createEmbeddedView(fb.tpl);
+        });
+    }
+    /**
+     * (Re)binds the `kjChartOn` event forwarders: unbinds the previous set, then
+     * binds `chart.on(name, …)` for each name, emitting `(kjChartEvent)`.
+     * Idempotent — safe to call from both init and the reactive effect.
+     */
+    bindForwardedEvents(chart, names) {
+        for (const { name, handler } of this.forwarded)
+            chart.off(name, handler);
+        this.forwarded = names.map((name) => {
+            const handler = (params) => this.kjChartEvent.emit({ type: name, params });
+            chart.on(name, handler);
+            return { name, handler };
+        });
+    }
+    /** Merges reactive concerns (palette, reduced-motion) into the user option. */
+    resolveOption() {
+        const base = this.kjChartOption();
+        const animate = this.kjChartAnimate() && !this.prefersReducedMotion();
+        const explicit = this.kjChartPalette();
+        const color = explicit ?? resolveChartPalette(this.el.nativeElement);
+        return {
+            ...base,
+            color: color.length ? color : base.color,
+            animation: animate,
+            animationDuration: animate
+                ? base.animationDuration ?? 1000
+                : 0,
+        };
+    }
+    /** Imperative resize — wraps chart.resize(). */
+    resize() {
+        this.chart()?.resize();
+    }
+    /** Imperative dispatch — passes through to ECharts. */
+    dispatchAction(payload) {
+        this.chart()?.dispatchAction(payload);
+    }
+    /** Reads current option — passes through to ECharts. */
+    getOption() {
+        return this.chart()?.getOption();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.5", type: KjChart, isStandalone: true, selector: "[kjChart]", inputs: { kjChartOption: { classPropertyName: "kjChartOption", publicName: "kjChartOption", isSignal: true, isRequired: true, transformFunction: null }, kjChartLabel: { classPropertyName: "kjChartLabel", publicName: "kjChartLabel", isSignal: true, isRequired: true, transformFunction: null }, kjChartDescription: { classPropertyName: "kjChartDescription", publicName: "kjChartDescription", isSignal: true, isRequired: false, transformFunction: null }, kjChartLoading: { classPropertyName: "kjChartLoading", publicName: "kjChartLoading", isSignal: true, isRequired: false, transformFunction: null }, kjChartPalette: { classPropertyName: "kjChartPalette", publicName: "kjChartPalette", isSignal: true, isRequired: false, transformFunction: null }, kjChartAnimate: { classPropertyName: "kjChartAnimate", publicName: "kjChartAnimate", isSignal: true, isRequired: false, transformFunction: null }, kjChartOn: { classPropertyName: "kjChartOn", publicName: "kjChartOn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjChartReady: "kjChartReady", kjChartEvent: "kjChartEvent", kjChartClick: "kjChartClick", kjChartLegendSelect: "kjChartLegendSelect" }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "kjChartLabel() || null", "attr.aria-describedby": "descriptionId() || null" } }, queries: [{ propertyName: "_fallback", first: true, predicate: KjChartTableFallback, descendants: true, isSignal: true }], exportAs: ["kjChart"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kjChart]',
+                    standalone: true,
+                    exportAs: 'kjChart',
+                    host: {
+                        role: 'img',
+                        '[attr.aria-label]': 'kjChartLabel() || null',
+                        '[attr.aria-describedby]': 'descriptionId() || null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { kjChartOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjChartOption", required: true }] }], kjChartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjChartLabel", required: true }] }], kjChartDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjChartDescription", required: false }] }], kjChartLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjChartLoading", required: false }] }], kjChartPalette: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjChartPalette", required: false }] }], kjChartAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjChartAnimate", required: false }] }], kjChartOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjChartOn", required: false }] }], kjChartReady: [{ type: i0.Output, args: ["kjChartReady"] }], kjChartEvent: [{ type: i0.Output, args: ["kjChartEvent"] }], kjChartClick: [{ type: i0.Output, args: ["kjChartClick"] }], kjChartLegendSelect: [{ type: i0.Output, args: ["kjChartLegendSelect"] }], _fallback: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KjChartTableFallback), { isSignal: true }] }] } });
+/**
+ * Context token for the rich-text editor. A {@link KjRichTextEditor} provides it
+ * pointing to itself; descendants (toolbars, feature directives) inject it.
+ */
+const KJ_RICH_TEXT = new InjectionToken('KJ_RICH_TEXT');
+/**
+ * Multi-provider token for app- or scope-wide rich-text features. Contribute to
+ * it with {@link provideKjRichText}; every {@link KjRichTextEditor} in that
+ * injector scope activates them.
+ */
+const KJ_RICH_TEXT_FEATURES = new InjectionToken('KJ_RICH_TEXT_FEATURES');
+/** @deprecated Renamed to {@link KJ_RICH_TEXT_FEATURES}. Same token instance. */
+const KJ_RICH_TEXT_EXTENSIONS = KJ_RICH_TEXT_FEATURES;
+/**
+ * Register one or more rich-text features for every editor in this injector
+ * scope (app config, a route, or a component's `providers`). Only the chosen
+ * features load their packages and contribute toolbar/overlay UI.
+ *
+ * @example
+ * ```ts
+ * providers: [provideKjRichText(bold(), italic(), link())]
+ * ```
+ */
+function provideKjRichText(...features) {
+    return features.map((feature) => ({
+        provide: KJ_RICH_TEXT_FEATURES,
+        useValue: feature,
+        multi: true,
+    }));
+}
+/**
+ * Injection token holding the Lexical node instance being decorated. An Angular
+ * component mounted for a decorator node injects it (via {@link injectRichTextNode})
+ * to read the node's data.
+ */
+const KJ_RICH_TEXT_NODE = new InjectionToken('KJ_RICH_TEXT_NODE');
+/** Inject the Lexical node instance a decorator-node component is rendering. */
+function injectRichTextNode() {
+    return inject(KJ_RICH_TEXT_NODE);
+}
+/** Injection token holding the data a feature passed to `context.openOverlay(id, data)`. */
+const KJ_RTE_OVERLAY_DATA = new InjectionToken('KJ_RTE_OVERLAY_DATA');
+/** Inject the data supplied to the currently rendered rich-text overlay component. */
+function injectRteOverlayData() {
+    return inject(KJ_RTE_OVERLAY_DATA);
+}
+const EMPTY_STATE = {
+    activeFormats: new Set(),
+    blockType: 'paragraph',
+    canUndo: false,
+    canRedo: false,
+    isLink: false,
+    empty: true,
+};
+/** Stable ordering for toolbar groups; unknown groups sort last, alphabetically. */
+const GROUP_ORDER = ['format', 'block', 'list', 'insert', 'history'];
+/**
+ * Headless, client-driven rich-text editor wrapping [Lexical](https://lexical.dev).
+ *
+ * Apply to a block element to turn it into an editable, accessible surface
+ * (`role="textbox"`, `aria-multiline`). The editor is composed from **features**
+ * (see {@link KjRichTextFeature}) supplied via {@link provideKjRichText}, the
+ * `kjFeatures` input, or `[kjRichTextExtension]` child directives. Each feature
+ * lazily loads its own `@lexical/*` package(s) in the browser, so disabling a
+ * feature keeps its code out of the bundle. SSR-safe: the engine loads via
+ * dynamic `import()` inside `afterNextRender`.
+ *
+ * Exposes the aggregated {@link toolbarItems}, reactive `state`, and imperative
+ * helpers (`runItem`, `undo`, …) for a dynamic toolbar to bind to, and
+ * implements {@link ControlValueAccessor} (HTML string model) for Angular forms.
+ *
+ * @doc-category Core/Forms
+ * @doc
+ * @doc-name rich-text-editor
+ * @doc-description Headless, feature-composed Lexical rich-text editor directive with a dynamic toolbar contract and form support.
+ * @doc-is-main
+ */
+class KjRichTextEditor {
+    el = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    envInjector = inject(EnvironmentInjector);
+    appRef = inject(ApplicationRef);
+    /** App-/scope-wide features contributed via {@link provideKjRichText}. */
+    providedFeatures = inject(KJ_RICH_TEXT_FEATURES, { optional: true }) ?? [];
+    /** Features registered by child directives via {@link registerFeature}. */
+    childFeatures = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childFeatures" }] : /* istanbul ignore next */ []));
+    /** Initial content as an HTML string. Ongoing edits are reported via outputs / forms. */
+    kjValue = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjValue" }] : /* istanbul ignore next */ []));
+    /** Per-instance features, merged with provided + child-registered features. */
+    kjFeatures = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjFeatures" }] : /* istanbul ignore next */ []));
+    /** @deprecated Renamed to {@link kjFeatures}. Still honored (merged). */
+    kjExtensions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjExtensions" }] : /* istanbul ignore next */ []));
+    /** @deprecated Renamed to {@link kjFeatures}. Still honored (merged). */
+    kjPlugins = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjPlugins" }] : /* istanbul ignore next */ []));
+    /** Makes the editor non-editable while still selectable. */
+    kjReadonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjReadonly" }] : /* istanbul ignore next */ []));
+    /** Native spellcheck toggle. */
+    kjSpellcheck = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjSpellcheck" }] : /* istanbul ignore next */ []));
+    /** Lexical namespace (diagnostics only). */
+    kjNamespace = input('kj-rich-text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjNamespace" }] : /* istanbul ignore next */ []));
+    /** Emits the serialized HTML whenever the document changes. */
+    valueChange = output();
+    /** Emits the plain-text content whenever the document changes. */
+    textChange = output();
+    /** Emits the Lexical `SerializedEditorState` whenever the document changes. */
+    jsonChange = output();
+    /** Emits messages a feature asked to announce to assistive technology. */
+    announce = output();
+    editorSig = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editorSig" }] : /* istanbul ignore next */ []));
+    /** The live Lexical editor instance, or `null` before initialization. */
+    editor = this.editorSig.asReadonly();
+    /** Current formatting state derived from the selection. */
+    state = signal(EMPTY_STATE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    isBold = computed(() => this.state().activeFormats.has('bold'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBold" }] : /* istanbul ignore next */ []));
+    isItalic = computed(() => this.state().activeFormats.has('italic'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isItalic" }] : /* istanbul ignore next */ []));
+    isUnderline = computed(() => this.state().activeFormats.has('underline'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isUnderline" }] : /* istanbul ignore next */ []));
+    isStrikethrough = computed(() => this.state().activeFormats.has('strikethrough'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isStrikethrough" }] : /* istanbul ignore next */ []));
+    isCode = computed(() => this.state().activeFormats.has('code'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCode" }] : /* istanbul ignore next */ []));
+    blockType = computed(() => this.state().blockType, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blockType" }] : /* istanbul ignore next */ []));
+    canUndo = computed(() => this.state().canUndo, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+    canRedo = computed(() => this.state().canRedo, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
+    isLink = computed(() => this.state().isLink, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
+    empty = computed(() => this.state().empty, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    /** All active features (provided + inputs + child-registered). */
+    features = computed(() => [
+        ...this.providedFeatures,
+        ...this.kjFeatures(),
+        ...this.kjExtensions(),
+        ...this.kjPlugins(),
+        ...this.childFeatures(),
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+    /** Toolbar items contributed by active features, sorted by group then order. */
+    toolbarItems = computed(() => this.features()
+        .flatMap((feature) => feature.toolbar ?? [])
+        .slice()
+        .sort((a, b) => {
+        const ga = GROUP_ORDER.indexOf(a.group);
+        const gb = GROUP_ORDER.indexOf(b.group);
+        const oa = ga === -1 ? GROUP_ORDER.length : ga;
+        const ob = gb === -1 ? GROUP_ORDER.length : gb;
+        if (oa !== ob)
+            return oa - ob;
+        if (a.group !== b.group)
+            return a.group.localeCompare(b.group);
+        return a.order - b.order;
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarItems" }] : /* istanbul ignore next */ []));
+    /** Toolbar items grouped into contiguous runs (for rendering separators). */
+    toolbarGroups = computed(() => {
+        const groups = [];
+        for (const item of this.toolbarItems()) {
+            const last = groups[groups.length - 1];
+            if (!last || last.group !== item.group)
+                groups.push({ group: item.group, items: [item] });
+            else
+                last.items.push(item);
+        }
+        return groups;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarGroups" }] : /* istanbul ignore next */ []));
+    /** Overlay descriptors contributed by active features. */
+    overlays = computed(() => this.features().flatMap((feature) => feature.overlay ?? []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlays" }] : /* istanbul ignore next */ []));
+    /** The overlay currently open (opened by a feature), or `null`. */
+    activeOverlay = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOverlay" }] : /* istanbul ignore next */ []));
+    /** @internal CVA disabled flag. */
+    disabledState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    engine = null;
+    pendingValue = null;
+    lastHtml = '';
+    applyingExternal = false;
+    destroyed = false;
+    onChange = () => { };
+    /** @internal blur handler wired via host bindings. */
+    onTouched = () => { };
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.destroyed = true;
+            this.engine?.destroy();
+            this.engine = null;
+        });
+        effect(() => {
+            const editable = !this.kjReadonly() && !this.disabledState();
+            this.engine?.setEditable(editable);
+        });
+        afterNextRender(async () => {
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            const { createRichTextEngine } = await import('./kouji-ui-core-engine-CKMr0aiZ.mjs');
+            if (this.destroyed)
+                return;
+            const initial = this.pendingValue ?? this.kjValue();
+            this.applyingExternal = true;
+            const engine = await createRichTextEngine(this.el.nativeElement, {
+                initialHtml: initial,
+                features: this.features(),
+                namespace: this.kjNamespace(),
+                mount: this.createMountAdapter(),
+                onOverlayOpen: (id, data) => this.openOverlayById(id, data),
+                onOverlayClose: () => this.activeOverlay.set(null),
+                onAnnounce: (message) => this.announce.emit(message),
+            }, {
+                onState: (s) => this.state.set(s),
+                onValue: (v) => this.emitValue(v.html, v.text, v.json),
+            });
+            this.applyingExternal = false;
+            if (this.destroyed) {
+                engine.destroy();
+                return;
+            }
+            this.engine = engine;
+            this.editorSig.set(engine.editor);
+            this.pendingValue = null;
+            this.lastHtml = engine.getHtml();
+            engine.setEditable(!this.kjReadonly() && !this.disabledState());
+        });
+    }
+    emitValue(html, text, json) {
+        this.lastHtml = html;
+        if (this.applyingExternal)
+            return;
+        this.onChange(html);
+        this.valueChange.emit(html);
+        this.textChange.emit(text);
+        this.jsonChange.emit(json);
+    }
+    openOverlayById(id, data) {
+        const overlay = this.overlays().find((o) => o.id === id);
+        if (overlay)
+            this.activeOverlay.set({ overlay, data });
+    }
+    // -- feature registration + toolbar API ----------------------------------
+    /** {@inheritDoc KjRichTextHost.registerFeature} */
+    registerFeature(feature) {
+        this.childFeatures.update((list) => [...list, feature]);
+    }
+    /** @deprecated Renamed to {@link registerFeature}. */
+    registerExtension(feature) {
+        this.registerFeature(feature);
+    }
+    /** Run a toolbar item's action against the live editor (no-op until ready). */
+    runItem(item) {
+        if (this.engine)
+            item.run(this.engine.context);
+    }
+    /** Whether a toggle toolbar item is currently active. */
+    itemActive(item) {
+        return item.kind === 'toggle' && !!item.isActive?.(this.state());
+    }
+    /** Whether a toolbar item is currently disabled. */
+    itemDisabled(item) {
+        return !!item.isDisabled?.(this.state());
+    }
+    /** Close any open feature overlay. */
+    closeOverlay() {
+        this.activeOverlay.set(null);
+    }
+    // -- imperative editor helpers -------------------------------------------
+    /** Undo the last edit. */
+    undo() {
+        this.engine?.undo();
+    }
+    /** Redo the last undone edit. */
+    redo() {
+        this.engine?.redo();
+    }
+    /** Move focus into the editor. */
+    focus() {
+        this.engine?.focus();
+    }
+    /** Remove all content, leaving a single empty paragraph. */
+    clear() {
+        this.engine?.clear();
+    }
+    /** Serialize the current content to HTML. */
+    getHtml() {
+        return this.engine?.getHtml() ?? this.lastHtml;
+    }
+    /** Replace the content from an HTML string. */
+    setHtml(html) {
+        this.writeValue(html);
+    }
+    /** Serialize the current content to a Lexical `SerializedEditorState`. */
+    getJson() {
+        return this.engine?.getJson() ?? null;
+    }
+    /** Replace the content from a Lexical `SerializedEditorState`. */
+    setJson(json) {
+        if (!this.engine)
+            return;
+        this.applyingExternal = true;
+        this.engine.setJson(json);
+        this.applyingExternal = false;
+    }
+    /** Build the Angular mount adapter the engine uses for decorator-node components. */
+    createMountAdapter() {
+        return {
+            mount: (component, node) => {
+                const elementInjector = Injector.create({
+                    parent: this.envInjector,
+                    providers: [{ provide: KJ_RICH_TEXT_NODE, useValue: node }],
+                });
+                const ref = createComponent(component, {
+                    environmentInjector: this.envInjector,
+                    elementInjector,
+                });
+                this.appRef.attachView(ref.hostView);
+                return {
+                    element: ref.location.nativeElement,
+                    destroy: () => {
+                        this.appRef.detachView(ref.hostView);
+                        ref.destroy();
+                    },
+                };
+            },
+        };
+    }
+    // -- ControlValueAccessor ------------------------------------------------
+    writeValue(value) {
+        const html = value ?? '';
+        if (html === this.lastHtml)
+            return;
+        if (this.engine) {
+            this.applyingExternal = true;
+            this.engine.setHtml(html);
+            this.applyingExternal = false;
+            this.lastHtml = html;
+        }
+        else {
+            this.pendingValue = html;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledState.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjRichTextEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjRichTextEditor, isStandalone: true, selector: "[kjRichTextEditor]", inputs: { kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjFeatures: { classPropertyName: "kjFeatures", publicName: "kjFeatures", isSignal: true, isRequired: false, transformFunction: null }, kjExtensions: { classPropertyName: "kjExtensions", publicName: "kjExtensions", isSignal: true, isRequired: false, transformFunction: null }, kjPlugins: { classPropertyName: "kjPlugins", publicName: "kjPlugins", isSignal: true, isRequired: false, transformFunction: null }, kjReadonly: { classPropertyName: "kjReadonly", publicName: "kjReadonly", isSignal: true, isRequired: false, transformFunction: null }, kjSpellcheck: { classPropertyName: "kjSpellcheck", publicName: "kjSpellcheck", isSignal: true, isRequired: false, transformFunction: null }, kjNamespace: { classPropertyName: "kjNamespace", publicName: "kjNamespace", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", textChange: "textChange", jsonChange: "jsonChange", announce: "announce" }, host: { attributes: { "role": "textbox", "aria-multiline": "true" }, listeners: { "blur": "onTouched()" }, properties: { "attr.contenteditable": "kjReadonly() || disabledState() ? \"false\" : \"true\"", "attr.spellcheck": "kjSpellcheck()", "attr.aria-readonly": "kjReadonly() ? \"true\" : null", "attr.aria-disabled": "disabledState() ? \"true\" : null", "attr.data-empty": "empty() ? \"true\" : null" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => KjRichTextEditor), multi: true },
+            { provide: KJ_RICH_TEXT, useExisting: forwardRef(() => KjRichTextEditor) },
+        ], exportAs: ["kjRichTextEditor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjRichTextEditor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kjRichTextEditor]',
+                    standalone: true,
+                    exportAs: 'kjRichTextEditor',
+                    host: {
+                        role: 'textbox',
+                        'aria-multiline': 'true',
+                        // Lexical listens on this element but does NOT set `contenteditable` itself —
+                        // the host must. Without this the editor attaches but the surface can't be
+                        // clicked into or typed in. Readonly/disabled → non-editable (still selectable).
+                        '[attr.contenteditable]': 'kjReadonly() || disabledState() ? "false" : "true"',
+                        '[attr.spellcheck]': 'kjSpellcheck()',
+                        '[attr.aria-readonly]': 'kjReadonly() ? "true" : null',
+                        '[attr.aria-disabled]': 'disabledState() ? "true" : null',
+                        '[attr.data-empty]': 'empty() ? "true" : null',
+                        '(blur)': 'onTouched()',
+                    },
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => KjRichTextEditor), multi: true },
+                        { provide: KJ_RICH_TEXT, useExisting: forwardRef(() => KjRichTextEditor) },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }], kjFeatures: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFeatures", required: false }] }], kjExtensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjExtensions", required: false }] }], kjPlugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlugins", required: false }] }], kjReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReadonly", required: false }] }], kjSpellcheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSpellcheck", required: false }] }], kjNamespace: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjNamespace", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], textChange: [{ type: i0.Output, args: ["textChange"] }], jsonChange: [{ type: i0.Output, args: ["jsonChange"] }], announce: [{ type: i0.Output, args: ["announce"] }] } });
+/**
+ * Registers one or more {@link KjRichTextFeature}s with the nearest
+ * {@link KjRichTextEditor} — the signal-context pattern (like `Option`
+ * registering with `Select`).
+ *
+ * Place it on the same element as `[kjRichTextEditor]`, or on a descendant that
+ * can inject {@link KJ_RICH_TEXT} (e.g. an `<ng-container>`). Registration
+ * happens in `ngOnInit`, before the editor initializes, so node-contributing
+ * features are picked up.
+ *
+ * @example
  * ```html
- * <div kjChart [kjChartOption]="chartOption()" kjChartLabel="Monthly revenue" style="height:300px"></div>
+ * <div kjRichTextEditor [kjFeatures]="[mentionFeature]"></div>
+ * <!-- or as a child directive -->
+ * <div kjRichTextEditor [kjRichTextFeature]="mentionFeature"></div>
+ * ```
+ * @doc-category Core/Forms
+ * @doc
+ * @doc-name rich-text-editor
+ */
+class KjRichTextExtensionDirective {
+    host = inject(KJ_RICH_TEXT);
+    /** The feature (or features) to register with the host editor. */
+    kjRichTextFeature = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "kjRichTextFeature" }] : /* istanbul ignore next */ []));
+    /** @deprecated Renamed to {@link kjRichTextFeature}. */
+    kjRichTextExtension = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "kjRichTextExtension" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        const value = this.kjRichTextFeature() ?? this.kjRichTextExtension();
+        if (!value)
+            return;
+        const features = Array.isArray(value) ? value : [value];
+        for (const feature of features) {
+            this.host.registerFeature(feature);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjRichTextExtensionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjRichTextExtensionDirective, isStandalone: true, selector: "[kjRichTextFeature], [kjRichTextExtension]", inputs: { kjRichTextFeature: { classPropertyName: "kjRichTextFeature", publicName: "kjRichTextFeature", isSignal: true, isRequired: false, transformFunction: null }, kjRichTextExtension: { classPropertyName: "kjRichTextExtension", publicName: "kjRichTextExtension", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjRichTextExtensionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kjRichTextFeature], [kjRichTextExtension]',
+                    standalone: true,
+                }]
+        }], propDecorators: { kjRichTextFeature: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjRichTextFeature", required: false }] }], kjRichTextExtension: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjRichTextExtension", required: false }] }] } });
+/**
+ * Build a self-contained Lexical `DecoratorNode` subclass whose instances render
+ * an Angular component (mounted by the editor's decorator bridge). This is the
+ * reusable "render an Angular component as an editor node" framework — define a
+ * custom node from outside the engine in a handful of lines.
+ *
+ * The node stores an arbitrary JSON-serializable `data` object; the mounted
+ * component reads it via {@link injectRichTextNode}. `lexical` is passed in (not
+ * imported here) so this stays SSR-safe and out of the base bundle.
+ *
+ * @example
+ * ```ts
+ * const badge = createKjDecoratorNode(lexical, { type: 'badge', component: BadgeChip, inline: true });
+ * // badge.Node -> register via extension.nodes; badge.$create({ label }) -> insert
+ * ```
+ */
+function createKjDecoratorNode(lexical, config) {
+    const { DecoratorNode, $applyNodeReplacement } = lexical;
+    class KjBridgedDecoratorNode extends DecoratorNode {
+        __data;
+        static getType() {
+            return config.type;
+        }
+        static clone(node) {
+            return new KjBridgedDecoratorNode(node.__data, node.__key);
+        }
+        static importJSON(json) {
+            return new KjBridgedDecoratorNode((json.data ?? {}));
+        }
+        constructor(data = {}, key) {
+            super(key);
+            this.__data = data;
+        }
+        exportJSON() {
+            return { ...super.exportJSON(), type: config.type, version: 1, data: this.__data };
+        }
+        /** The node's payload; read by the mounted component. */
+        getData() {
+            return this.__data;
+        }
+        createDOM() {
+            const el = document.createElement(config.inline ? 'span' : 'div');
+            el.setAttribute('data-lexical-decorator', config.type);
+            el.className = 'kj-rte-decorator';
+            // Decorator content is not directly editable; selection steps over it.
+            el.contentEditable = 'false';
+            if (config.inline)
+                el.style.display = 'inline-block';
+            if (config.ariaLabel)
+                el.setAttribute('aria-label', config.ariaLabel);
+            return el;
+        }
+        updateDOM() {
+            return false;
+        }
+        isInline() {
+            return !!config.inline;
+        }
+        /** Returned to the decorator bridge, which maps the node → its component. */
+        decorate() {
+            return this;
+        }
+    }
+    return {
+        Node: KjBridgedDecoratorNode,
+        $create: (data) => $applyNodeReplacement(new KjBridgedDecoratorNode(data ?? {})),
+        $is: (node) => node instanceof KjBridgedDecoratorNode,
+    };
+}
+/**
+ * Build a self-rendering block image `DecoratorNode` subclass. It paints its own
+ * `<figure><img></figure>` in `createDOM` (no framework decorator infra needed)
+ * and round-trips through HTML via `importDOM`/`exportDOM`.
+ *
+ * `lexical` is passed in (not imported here) so this module carries no eager
+ * Lexical import and stays SSR-safe — the image feature calls it inside `load()`.
+ */
+function createKjImageNode(lexical) {
+    const { DecoratorNode, $applyNodeReplacement } = lexical;
+    class KjImageNode extends DecoratorNode {
+        __src;
+        __alt;
+        __width;
+        __height;
+        static getType() {
+            return 'kj-image';
+        }
+        static clone(node) {
+            return new KjImageNode({ src: node.__src, alt: node.__alt, width: node.__width, height: node.__height }, node.__key);
+        }
+        static importJSON(json) {
+            return new KjImageNode({
+                src: json.src,
+                alt: json.alt,
+                width: json.width,
+                height: json.height,
+            });
+        }
+        constructor(props, key) {
+            super(key);
+            this.__src = props.src;
+            this.__alt = props.alt ?? '';
+            this.__width = props.width;
+            this.__height = props.height;
+        }
+        exportJSON() {
+            return {
+                ...super.exportJSON(),
+                type: 'kj-image',
+                version: 1,
+                src: this.__src,
+                alt: this.__alt,
+                width: this.__width,
+                height: this.__height,
+            };
+        }
+        createDOM() {
+            const figure = document.createElement('figure');
+            figure.className = 'kj-rte-image';
+            figure.contentEditable = 'false';
+            const img = document.createElement('img');
+            img.src = this.__src;
+            img.alt = this.__alt;
+            img.setAttribute('data-lexical-image', 'true');
+            if (this.__width)
+                img.width = this.__width;
+            if (this.__height)
+                img.height = this.__height;
+            figure.appendChild(img);
+            return figure;
+        }
+        updateDOM(prev) {
+            return (prev.__src !== this.__src ||
+                prev.__alt !== this.__alt ||
+                prev.__width !== this.__width ||
+                prev.__height !== this.__height);
+        }
+        decorate() {
+            return null;
+        }
+        exportDOM() {
+            const element = document.createElement('img');
+            element.setAttribute('data-lexical-image', 'true');
+            element.src = this.__src;
+            element.alt = this.__alt;
+            if (this.__width)
+                element.width = this.__width;
+            if (this.__height)
+                element.height = this.__height;
+            return { element };
+        }
+        static importDOM() {
+            return {
+                img: () => ({
+                    conversion: (domNode) => {
+                        const img = domNode;
+                        const src = img.getAttribute('src');
+                        if (!src)
+                            return null;
+                        return {
+                            node: $create({
+                                src,
+                                alt: img.alt || '',
+                                width: img.width || undefined,
+                                height: img.height || undefined,
+                            }),
+                        };
+                    },
+                    priority: 0,
+                }),
+            };
+        }
+        isInline() {
+            return false;
+        }
+        getSrc() {
+            return this.__src;
+        }
+        getAlt() {
+            return this.__alt;
+        }
+    }
+    const $create = (image) => $applyNodeReplacement(new KjImageNode(image));
+    return {
+        Node: KjImageNode,
+        $create,
+        $is: (node) => node instanceof KjImageNode,
+    };
+}
+// Only SSR-safe (Lexical-free at runtime) symbols are re-exported here so that
+// importing `@kouji-ui/core` never eagerly loads Lexical or any feature package.
+// The node factories (`createKjDecoratorNode`, `createKjImageNode`) receive the
+// `lexical` namespace as an argument, so they carry no eager import.
+/** DI token holding the resolved {@link KjMonacoConfig}. Defaults to `{}`. */
+const KJ_MONACO_CONFIG = new InjectionToken('KJ_MONACO_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({}),
+});
+/**
+ * Registered per-language lazy loaders, keyed by (normalised) language id.
+ * `multi` so several `provideMonacoLanguages` calls compose; later
+ * registrations win on key collision. Consumed by `KjEditorLoader.ensureLanguage`.
+ */
+const KJ_MONACO_LANGUAGE_LOADERS = new InjectionToken('KJ_MONACO_LANGUAGE_LOADERS', { providedIn: 'root', factory: () => [] });
+/**
+ * Register lazy loaders for individual Monaco languages so only the languages an
+ * editor actually uses are downloaded, and only when first used. This keeps the
+ * base editor lean when you bundle a **minimal** Monaco (the `provideMonaco({ loader })`
+ * path); with the default CDN loader every language is already bundled, so
+ * registering loaders is optional (a missing id simply falls back to the
+ * built-in language).
+ *
+ * @example
+ * provideMonacoLanguages({
+ *   python: () => import('monaco-editor/esm/vs/basic-languages/python/python.contribution'),
+ *   rust:   () => import('monaco-editor/esm/vs/basic-languages/rust/rust.contribution'),
+ * })
+ *
+ * @doc
+ * @doc-name editor
+ * @doc-order 2
+ */
+function provideMonacoLanguages(loaders) {
+    return makeEnvironmentProviders([
+        { provide: KJ_MONACO_LANGUAGE_LOADERS, useValue: loaders, multi: true },
+    ]);
+}
+/** Short aliases → canonical Monaco language ids. */
+const LANGUAGE_ALIASES = {
+    ts: 'typescript',
+    js: 'javascript',
+    jsx: 'javascript',
+    tsx: 'typescript',
+    md: 'markdown',
+    yml: 'yaml',
+    sh: 'shell',
+    bash: 'shell',
+    py: 'python',
+    rb: 'ruby',
+    'c++': 'cpp',
+    'c#': 'csharp',
+    cs: 'csharp',
+    htm: 'html',
+    text: 'plaintext',
+    '': 'plaintext',
+};
+/** Map a friendly/alias language name to the canonical Monaco language id. */
+function normalizeLanguage(lang) {
+    if (!lang)
+        return 'plaintext';
+    const lower = lang.toLowerCase();
+    return LANGUAGE_ALIASES[lower] ?? lower;
+}
+/**
+ * Resolves the Monaco namespace **once** and memoises the promise, so every
+ * `KjEditor` on the page shares a single Monaco instance.
+ *
+ * Resolution strategy (see {@link KjMonacoConfig}):
+ * 1. A consumer-supplied `loader` wins — self-hosted / bundled Monaco.
+ * 2. Otherwise dynamically `import('@monaco-editor/loader')` and `init()` it,
+ *    applying `vsPath` when provided. The dynamic import keeps both Monaco and
+ *    the loader out of the base bundle (their own lazy chunk).
+ *
+ * Browser-only: callers must gate `load()` behind `afterNextRender` /
+ * `isPlatformBrowser`. Naming keeps the `Loader` suffix because `KjEditor`
+ * already names the directive.
+ *
+ * @doc
+ * @doc-name editor
+ * @doc-description Loads and memoises Monaco for the code editor; source is configurable via provideMonaco.
+ */
+class KjEditorLoader {
+    config = inject(KJ_MONACO_CONFIG);
+    languageLoaders = inject(KJ_MONACO_LANGUAGE_LOADERS);
+    promise = null;
+    loadedLanguages = new Map();
+    /** Resolve Monaco (cached after the first call). */
+    load() {
+        if (!this.promise) {
+            this.promise = this.config.loader ? this.config.loader() : this.loadFromCdn();
+        }
+        return this.promise;
+    }
+    /**
+     * Ensure a language's contribution is loaded before it's used. Runs the loader
+     * registered via {@link provideMonacoLanguages} for this id (once, memoised).
+     * No-ops when no loader is registered — the default CDN Monaco already ships
+     * every language, so this only does work for lean/self-hosted setups.
+     */
+    ensureLanguage(language) {
+        const id = normalizeLanguage(language);
+        const existing = this.loadedLanguages.get(id);
+        if (existing)
+            return existing;
+        let loader;
+        for (const map of this.languageLoaders) {
+            if (map[id])
+                loader = map[id];
+        }
+        const done = loader ? loader().then(() => undefined) : Promise.resolve();
+        this.loadedLanguages.set(id, done);
+        return done;
+    }
+    async loadFromCdn() {
+        // Dynamic import → separate lazy chunk. `@monaco-editor/loader` injects
+        // Monaco (and its language workers) from a CDN at runtime, sidestepping the
+        // esbuild worker-URL setup entirely.
+        const mod = await import('@monaco-editor/loader');
+        const loader = mod.default;
+        if (this.config.vsPath) {
+            loader.config({ paths: { vs: this.config.vsPath } });
+        }
+        return loader.init();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjEditorLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjEditorLoader, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjEditorLoader, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Headless code editor — wraps [Monaco](https://microsoft.github.io/monaco-editor/)
+ * (VS Code's editor) on its host element. Loads Monaco lazily after first
+ * render (SSR-safe), binds `kjValue` two-way, and disposes on destroy.
+ *
+ * Monaco is browser-only and heavy: it is resolved through {@link KjEditorLoader}
+ * whose source is configurable via `provideMonaco()` (defaults to a CDN loader
+ * so nothing bloats the base bundle). The styled `<kj-editor>` wrapper in
+ * `@kouji-ui/components` adds theming, a toolbar and a status bar on top.
+ *
+ * @example
+ * ```html
+ * <div kjEditor [(kjValue)]="code" kjLanguage="typescript" style="height:320px"></div>
  * ```
  * @doc-category Core/Data
  * @doc
- * @doc-name chart
- * @doc-description Renders a reactive ECharts chart on any sized element with an accessible label.
+ * @doc-name editor
  * @doc-is-main
+ * @doc-description Headless Monaco-wrapped code editor directive — two-way value, language, options, SSR-safe lazy load.
  */
-class KjChart {
+class KjEditor {
     el = inject(ElementRef);
     destroyRef = inject(DestroyRef);
-    /** ECharts option object defining the chart. */
-    kjChartOption = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "kjChartOption" }] : /* istanbul ignore next */ []));
-    /** Accessible label for the chart. Required for WCAG AAA compliance. */
-    kjChartLabel = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "kjChartLabel" }] : /* istanbul ignore next */ []));
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    chart;
+    loader = inject(KjEditorLoader);
+    /** Two-way editor text. */
+    kjValue = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjValue" }] : /* istanbul ignore next */ []));
+    /** Code language — friendly name or Monaco id; short aliases (`ts`, `md`) normalised. */
+    kjLanguage = input('plaintext', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLanguage" }] : /* istanbul ignore next */ []));
+    /** Read-only mode. */
+    kjReadonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjReadonly" }] : /* istanbul ignore next */ []));
+    /** Show the minimap. */
+    kjMinimap = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjMinimap" }] : /* istanbul ignore next */ []));
+    /** Gutter line-number mode. */
+    kjLineNumbers = input('on', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLineNumbers" }] : /* istanbul ignore next */ []));
+    /** Soft wrap. */
+    kjWordWrap = input('off', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjWordWrap" }] : /* istanbul ignore next */ []));
+    /** Font size in px. */
+    kjFontSize = input(13, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjFontSize" }] : /* istanbul ignore next */ []));
+    /** Grow the host to fit content instead of filling its container. */
+    kjAutoHeight = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjAutoHeight" }] : /* istanbul ignore next */ []));
+    /** Cap for `kjAutoHeight` in px (content scrolls past it). Uncapped when unset. */
+    kjMaxHeight = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjMaxHeight" }] : /* istanbul ignore next */ []));
+    /** Explicit Monaco theme id; overrides the wrapper's auto light/dark. */
+    kjTheme = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjTheme" }] : /* istanbul ignore next */ []));
+    /** Accessible name — set as Monaco `ariaLabel` and the host `aria-label`. */
+    kjAriaLabel = input('Code editor', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Start with Tab moving focus out instead of inserting a tab. Consumers who
+     * embed the editor in a form flow may prefer this so keyboard users are never
+     * trapped; the `Ctrl+M` toggle remains available either way.
+     */
+    kjTabFocusMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjTabFocusMode" }] : /* istanbul ignore next */ []));
+    /** Escape hatch — merged last into Monaco's construction options. */
+    kjOptions = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjOptions" }] : /* istanbul ignore next */ []));
+    /** Emits the live Monaco editor once created, for imperative use. */
+    kjReady = output();
+    editor = null;
+    monaco = null;
+    applyingExternal = false;
+    /** Our tracked copy of Monaco's tabFocusMode (no public getter exists). */
+    tabFocusOn = false;
+    /** Recompute-height callback, wired once auto-height is set up. */
+    autoHeightUpdate = null;
+    reducedMotion = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "reducedMotion" }] : /* istanbul ignore next */ []));
     constructor() {
-        afterNextRender(async () => {
-            try {
-                const echarts = await import('echarts');
-                this.chart = echarts.init(this.el.nativeElement);
-                this.chart.setOption(this.kjChartOption());
-                this.destroyRef.onDestroy(() => this.chart?.dispose());
-            }
-            catch {
-                // ECharts cannot initialize in non-browser environments (jsdom, SSR)
+        afterNextRender(() => {
+            if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+                const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
+                this.reducedMotion.set(mql.matches);
+                const onChange = (e) => this.reducedMotion.set(e.matches);
+                mql.addEventListener('change', onChange);
+                this.destroyRef.onDestroy(() => mql.removeEventListener('change', onChange));
             }
+            void this.init();
         });
-        afterEveryRender(() => {
-            if (this.chart) {
-                this.chart.setOption(this.kjChartOption());
+        // Push external value changes into the model (guard against typing echo).
+        effect(() => {
+            const next = this.kjValue();
+            if (this.editor && !this.applyingExternal) {
+                const model = this.editor.getModel();
+                if (model && model.getValue() !== next) {
+                    model.setValue(next);
+                }
             }
         });
+        // Language switch — lazy-load the language contribution first, then apply.
+        effect(() => {
+            const lang = normalizeLanguage(this.kjLanguage());
+            const editor = this.editor;
+            const monaco = this.monaco;
+            if (!editor || !monaco)
+                return;
+            const model = editor.getModel();
+            if (!model || model.getLanguageId() === lang)
+                return;
+            void this.loader.ensureLanguage(lang).then(() => {
+                if (this.editor === editor && this.monaco) {
+                    this.monaco.editor.setModelLanguage(model, lang);
+                }
+            });
+        });
+        // Live option updates (readonly / minimap / line-numbers / wrap / font / motion / overrides).
+        effect(() => {
+            const opts = this.resolveOptions();
+            if (this.editor)
+                this.editor.updateOptions(opts);
+        });
+        // Keep the auto-height fit in sync when the cap or toggle changes.
+        effect(() => {
+            this.kjAutoHeight();
+            this.kjMaxHeight();
+            this.autoHeightUpdate?.();
+        });
+        // Tab-focus mode (keyboard-trap escape) — keep Monaco in sync with the input.
+        effect(() => {
+            const tabMoves = this.kjTabFocusMode();
+            if (this.editor)
+                this.syncTabFocus(tabMoves);
+        });
+        this.destroyRef.onDestroy(() => this.dispose());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjChart, isStandalone: true, selector: "[kjChart]", inputs: { kjChartOption: { classPropertyName: "kjChartOption", publicName: "kjChartOption", isSignal: true, isRequired: true, transformFunction: null }, kjChartLabel: { classPropertyName: "kjChartLabel", publicName: "kjChartLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "kjChartLabel() || null" } }, ngImport: i0 });
+    /** Focus the editor. */
+    focus() {
+        this.editor?.focus();
+    }
+    /** Relayout the editor to its host size. */
+    layout() {
+        this.editor?.layout();
+    }
+    /** The live Monaco editor instance, or `null` before mount / after destroy. */
+    getEditor() {
+        return this.editor;
+    }
+    async init() {
+        const host = this.el.nativeElement;
+        if (!host)
+            return;
+        try {
+            this.monaco = await this.loader.load();
+        }
+        catch {
+            // Monaco cannot load in non-browser / offline environments — leave the
+            // host empty; the styled wrapper keeps showing its loading region.
+            return;
+        }
+        if (!this.monaco)
+            return;
+        const language = normalizeLanguage(this.kjLanguage());
+        await this.loader.ensureLanguage(language);
+        if (!this.monaco)
+            return;
+        this.editor = this.monaco.editor.create(host, {
+            value: this.kjValue(),
+            language,
+            ...this.resolveOptions(),
+        });
+        // Typing → model (mark as external-safe so the value effect doesn't echo).
+        const instance = this.editor;
+        instance.onDidChangeModelContent(() => {
+            this.applyingExternal = true;
+            this.kjValue.set(instance.getValue());
+            this.applyingExternal = false;
+        });
+        if (this.kjAutoHeight())
+            this.setupAutoHeight(instance, host);
+        this.syncTabFocus(this.kjTabFocusMode());
+        this.kjReady.emit(instance);
+    }
+    /**
+     * Size the host to the editor's content height (capped by `kjMaxHeight`),
+     * updating whenever the content grows/shrinks. Mirrors the docs code-viewer
+     * behaviour so a snippet fits its lines instead of needing a fixed height.
+     */
+    setupAutoHeight(editor, host) {
+        const update = () => {
+            if (!this.kjAutoHeight())
+                return;
+            const cap = this.kjMaxHeight() ?? Number.POSITIVE_INFINITY;
+            const height = Math.min(cap, editor.getContentHeight());
+            host.style.height = `${height}px`;
+            editor.layout({ width: host.clientWidth, height });
+        };
+        this.autoHeightUpdate = update;
+        const sub = editor.onDidContentSizeChange(update);
+        this.destroyRef.onDestroy(() => sub.dispose());
+        update();
+    }
+    resolveOptions() {
+        const reduced = this.reducedMotion();
+        const base = {
+            readOnly: this.kjReadonly(),
+            minimap: { enabled: this.kjMinimap() },
+            lineNumbers: this.kjLineNumbers(),
+            wordWrap: this.kjWordWrap(),
+            fontSize: this.kjFontSize(),
+            ariaLabel: this.kjAriaLabel(),
+            // AAA: let Monaco detect a screen reader and switch to accessible rendering.
+            accessibilitySupport: 'auto',
+            automaticLayout: true,
+            scrollBeyondLastLine: false,
+            // Reduced-motion (2.3.3): kill caret/scroll animation.
+            cursorBlinking: reduced ? 'solid' : 'blink',
+            cursorSmoothCaretAnimation: reduced ? 'off' : 'on',
+            smoothScrolling: !reduced,
+        };
+        const theme = this.kjTheme();
+        if (theme)
+            base.theme = theme;
+        return { ...base, ...this.kjOptions() };
+    }
+    /**
+     * Force Monaco's tabFocusMode to a specific state (idempotent). `tabFocusMode`
+     * is not a construction option — it's a context key flipped by the
+     * `toggleTabFocusMode` command (bound to `Ctrl+M`). We track our own copy
+     * since Monaco exposes no public getter, and only trigger the toggle when the
+     * desired state differs from what we last applied.
+     */
+    syncTabFocus(tabMoves) {
+        if (!this.editor || this.tabFocusOn === tabMoves)
+            return;
+        this.editor.trigger('kjEditor', 'editor.action.toggleTabFocusMode', undefined);
+        this.tabFocusOn = tabMoves;
+    }
+    dispose() {
+        this.editor?.getModel()?.dispose();
+        this.editor?.dispose();
+        this.editor = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjEditor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjEditor, isStandalone: true, selector: "[kjEditor]", inputs: { kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjLanguage: { classPropertyName: "kjLanguage", publicName: "kjLanguage", isSignal: true, isRequired: false, transformFunction: null }, kjReadonly: { classPropertyName: "kjReadonly", publicName: "kjReadonly", isSignal: true, isRequired: false, transformFunction: null }, kjMinimap: { classPropertyName: "kjMinimap", publicName: "kjMinimap", isSignal: true, isRequired: false, transformFunction: null }, kjLineNumbers: { classPropertyName: "kjLineNumbers", publicName: "kjLineNumbers", isSignal: true, isRequired: false, transformFunction: null }, kjWordWrap: { classPropertyName: "kjWordWrap", publicName: "kjWordWrap", isSignal: true, isRequired: false, transformFunction: null }, kjFontSize: { classPropertyName: "kjFontSize", publicName: "kjFontSize", isSignal: true, isRequired: false, transformFunction: null }, kjAutoHeight: { classPropertyName: "kjAutoHeight", publicName: "kjAutoHeight", isSignal: true, isRequired: false, transformFunction: null }, kjMaxHeight: { classPropertyName: "kjMaxHeight", publicName: "kjMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, kjTheme: { classPropertyName: "kjTheme", publicName: "kjTheme", isSignal: true, isRequired: false, transformFunction: null }, kjAriaLabel: { classPropertyName: "kjAriaLabel", publicName: "kjAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, kjTabFocusMode: { classPropertyName: "kjTabFocusMode", publicName: "kjTabFocusMode", isSignal: true, isRequired: false, transformFunction: null }, kjOptions: { classPropertyName: "kjOptions", publicName: "kjOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjValue: "kjValueChange", kjReady: "kjReady" }, host: { properties: { "attr.aria-label": "kjAriaLabel()" } }, exportAs: ["kjEditor"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjEditor, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kjChart]', standalone: true,
-                    host: { role: 'img', '[attr.aria-label]': 'kjChartLabel() || null' },
+                    selector: '[kjEditor]',
+                    standalone: true,
+                    exportAs: 'kjEditor',
+                    host: {
+                        '[attr.aria-label]': 'kjAriaLabel()',
+                    },
                 }]
-        }], ctorParameters: () => [], propDecorators: { kjChartOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjChartOption", required: true }] }], kjChartLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjChartLabel", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLanguage", required: false }] }], kjReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReadonly", required: false }] }], kjMinimap: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMinimap", required: false }] }], kjLineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLineNumbers", required: false }] }], kjWordWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjWordWrap", required: false }] }], kjFontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFontSize", required: false }] }], kjAutoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAutoHeight", required: false }] }], kjMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMaxHeight", required: false }] }], kjTheme: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTheme", required: false }] }], kjAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjAriaLabel", required: false }] }], kjTabFocusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTabFocusMode", required: false }] }], kjOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOptions", required: false }] }], kjReady: [{ type: i0.Output, args: ["kjReady"] }] } });
+/**
+ * Configure the Monaco source for `KjEditor` / `<kj-editor>`. Call once at the
+ * app (or route) level. With no arguments the editor loads Monaco from the
+ * default CDN via `@monaco-editor/loader`.
+ *
+ * @example
+ * // Default CDN loader (nothing to install beyond the peer deps):
+ * provideMonaco()
+ *
+ * @example
+ * // Self-hosted Monaco assets:
+ * provideMonaco({ vsPath: '/assets/monaco/vs' })
+ *
+ * @example
+ * // Fully custom / bundled Monaco (you own the worker setup):
+ * provideMonaco({ loader: () => import('monaco-editor') })
+ *
+ * @doc
+ * @doc-name editor
+ * @doc-order 1
+ */
+function provideMonaco(config = {}) {
+    return makeEnvironmentProviders([{ provide: KJ_MONACO_CONFIG, useValue: config }]);
+}
 /**
  * Marks an element as a kouji divider / separator. Owns the small a11y opinion
@@ -23992,6 +26909,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }], kjUnderline: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjUnderline", required: false }] }], kjExternal: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjExternal", required: false }] }] } });
+/**
+ * Headless "skip to content" link. Turns a native `<a>` into a
+ * [WCAG 2.4.1 Bypass Blocks](https://www.w3.org/TR/WCAG21/#bypass-blocks)
+ * mechanism: a fragment link that, when activated, moves **keyboard focus** to
+ * the page's main-content landmark — not merely the scroll position.
+ *
+ * Owns the two behaviours a CSS-only skip link cannot deliver:
+ *
+ * 1. **Fragment `href`.** `[attr.href]` reflects `#<target-id>`, so the element
+ *    is a real anchor (role=link, Enter activates) and carries the id in the
+ *    SSR-prerendered HTML.
+ * 2. **Deterministic focus move.** On `click` (which Enter also fires on an
+ *    anchor) the directive `preventDefault()`s the navigation, looks the target
+ *    up by id, makes it programmatically focusable via `tabindex="-1"` when it
+ *    has no `tabindex`, and calls `focus()` (which also scrolls it into view).
+ *
+ *    `preventDefault()` is required, not optional: under a `<base href="/">`
+ *    (the norm for Angular SPAs) a fragment-only reference like `#main-content`
+ *    resolves against the **base URL**, not the current document — so the native
+ *    click would navigate to `/#main-content` (the root route), swapping the
+ *    page out and discarding focus. Moving focus programmatically is both the
+ *    correct behaviour and immune to that gotcha.
+ *
+ * Styling (visually-hidden-until-focused) is a component-layer concern; see
+ * `KjSkipLinkComponent` in `@kouji-ui/components`.
+ *
+ * @example
+ * ```html
+ * <a kjSkipLink>Skip to main content</a>
+ * <main id="main-content" tabindex="-1">…</main>
+ * ```
+ * @example
+ * ```html
+ * <a kjSkipLink="page-body">Skip to content</a>
+ * <section id="page-body" tabindex="-1">…</section>
+ * ```
+ *
+ * @doc-category Core/Navigation
+ * @doc
+ * @doc-name skip-link
+ * @doc-description Turns a native anchor into a focus-moving "skip to content" bypass link.
+ * @doc-is-main
+ */
+class KjSkipLink {
+    document = inject(DOCUMENT$1);
+    /**
+     * `id` of the element to move focus to. Aliased to the selector attribute so
+     * `<a kjSkipLink="page-body">` sets it directly. Defaults to `'main-content'`.
+     *
+     * The `transform` maps an empty value to the default: a bare `<a kjSkipLink>`
+     * binds the attribute as `''` (the selector attribute is present but valueless),
+     * which would otherwise shadow the initial value.
+     */
+    kjSkipLink = input('main-content', { ...(ngDevMode ? { debugName: "kjSkipLink" } : /* istanbul ignore next */ {}), transform: (value) => value || 'main-content' });
+    /**
+     * Moves keyboard focus to the target landmark. Suppresses the anchor's native
+     * navigation (see class docs — it is base-relative and would leave the page),
+     * then adds `tabindex="-1"` when the target is not already focusable so
+     * `focus()` succeeds while keeping it out of the sequential tab order.
+     */
+    onActivate(event) {
+        event.preventDefault();
+        const target = this.document.getElementById(this.kjSkipLink());
+        if (!target)
+            return;
+        if (!target.hasAttribute('tabindex')) {
+            target.setAttribute('tabindex', '-1');
+        }
+        target.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSkipLink, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjSkipLink, isStandalone: true, selector: "a[kjSkipLink]", inputs: { kjSkipLink: { classPropertyName: "kjSkipLink", publicName: "kjSkipLink", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onActivate($event)" }, properties: { "attr.href": "\"#\" + kjSkipLink()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjSkipLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[kjSkipLink]',
+                    standalone: true,
+                    host: {
+                        '[attr.href]': '"#" + kjSkipLink()',
+                        '(click)': 'onActivate($event)',
+                    },
+                }]
+        }], propDecorators: { kjSkipLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSkipLink", required: false }] }] } });
 /**
  * Default Breadcrumb presets shipped by kouji-ui. Exported so consumers can
  * spread when extending: `[...KJ_BREADCRUMB_DEFAULTS.sizes, 'xl']`.
@@ -26785,5 +29787,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { DRAWER_DATA, DRAWER_DRAG, DRAWER_SIDE, KJ_ACCORDION, KJ_ACCORDION_ITEM, KJ_ALERT, KJ_ALERT_CONFIG, KJ_ALERT_DEFAULTS, KJ_AVATAR, KJ_AVATAR_GROUP, KJ_BREADCRUMB, KJ_BREADCRUMB_CONFIG, KJ_BREADCRUMB_DEFAULTS, KJ_BUTTON_CONFIG, KJ_BUTTON_DEFAULTS, KJ_BUTTON_GROUP, KJ_CALENDAR, KJ_CAROUSEL, KJ_CAROUSEL_INDICATORS, KJ_CAROUSEL_SLIDE, KJ_CASCADE_SELECT, KJ_CHAT, KJ_CHAT_BUBBLE_CONFIG, KJ_CHAT_BUBBLE_DEFAULTS, KJ_CHAT_LOG, KJ_COLOR_PICKER, KJ_CONFIRM_POPUP, KJ_DATE_PICKER, KJ_DROPDOWN_MENU, KJ_FIELD, KJ_FILE_UPLOAD, KJ_FILE_UPLOAD_DEFAULT_MESSAGES, KJ_FILE_UPLOAD_ITEM, KJ_FORM, KJ_FORM_FIELD, KJ_ICON_CSS_PATH, KJ_ICON_ENTRIES, KJ_ICON_LOADER, KJ_ICON_REGISTRY, KJ_ICON_RESOLVER, KJ_INPUT_GROUP, KJ_INPUT_MASK_PRESETS, KJ_INPUT_MASK_TOKENS, KJ_INPUT_OTP, KJ_KBD_SIZE_PRESET, KJ_LINK_CONFIG, KJ_LINK_DEFAULTS, KJ_LIST, KJ_LIST_FOCUS_MODE, KJ_LIST_NAVIGATOR_CONFIG, KJ_LIST_ROW, KJ_MENUBAR, KJ_NUMBER_INPUT, KJ_OVERLAY_BACKDROP_STRATEGY, KJ_OVERLAY_BADGE, KJ_OVERLAY_FOCUS_TRAP_STRATEGY, KJ_OVERLAY_LIVE_ANNOUNCER_STRATEGY, KJ_OVERLAY_MOUNT_STRATEGY, KJ_OVERLAY_PANEL_ROLE, KJ_OVERLAY_POSITION_STRATEGY, KJ_OVERLAY_SCROLL_LOCK_STRATEGY, KJ_OVERLAY_TRIGGER_EVENT_STRATEGY, KJ_PAGINATION, KJ_PAGINATION_CONFIG, KJ_PAGINATION_DEFAULTS, KJ_PASSWORD_INPUT, KJ_PROGRESS_BAR, KJ_PROGRESS_BAR_CONFIG, KJ_PROGRESS_BAR_DEFAULTS, KJ_PROSE_CSS_PATH, KJ_RADIO_GROUP, KJ_ROVING_TABINDEX, KJ_SELECT, KJ_SIZE_PRESET, KJ_SLIDER, KJ_SPEED_DIAL, KJ_SPINNER_CONFIG, KJ_SPINNER_DEFAULTS, KJ_STEP, KJ_STEPPER, KJ_TABLE, KJ_TABLE_STORAGE, KJ_TABS, KJ_TAG, KJ_TAG_CONFIG, KJ_TAG_DEFAULTS, KJ_TAG_LIST, KJ_TEXTAREA_CONFIG, KJ_TEXTAREA_DEFAULTS, KJ_TIME_PICKER, KJ_TOAST_LIST_STRATEGY, KJ_TOAST_SONNER_STRATEGY, KJ_TOAST_STRATEGY, KJ_TREE_SELECT, KJ_VARIANT_PRESET, KjAccordion, KjAccordionContent, KjAccordionItem, KjAccordionTrigger, KjAlert, KjAlertActions, KjAlertDescription, KjAlertDismiss, KjAlertIcon, KjAlertTitle, KjAriaDescribedBy, KjAriaLabelledBy, KjAvatar, KjAvatarFallback, KjAvatarGroup, KjAvatarImage, KjBackdrop, KjBadge, KjBlockquote, KjBreadcrumb, KjBreadcrumbCurrent, KjBreadcrumbEllipsis, KjBreadcrumbItem, KjBreadcrumbLink, KjBreadcrumbList, KjBreadcrumbSeparator, KjButton, KjButtonGroup, KjCalendar, KjCalendarDay, KjCalendarGrid, KjCalendarHeader, KjCarousel, KjCarouselAutoplay, KjCarouselIndicator, KjCarouselIndicators, KjCarouselNext, KjCarouselPauseToggle, KjCarouselPrevious, KjCarouselSlide, KjCarouselViewport, KjCascadeSelect, KjCascadeSelectOption, KjCascadeSelectPanel, KjCascadeSelectSubPanel, KjCascadeSelectTrigger, KjChart, KjChat, KjChatAvatar, KjChatBubble, KjChatFooter, KjChatHeader, KjChatLog, KjCheckbox, KjCode, KjColorPicker, KjColorPickerAlphaSlider, KjColorPickerArea, KjColorPickerHueSlider, KjColorPickerInput, KjColorPickerPanel, KjColorPickerTrigger, KjCombobox, KjComboboxInput, KjComboboxListbox, KjComboboxOption, KjCommandEmpty, KjCommandGroup, KjCommandInput, KjCommandItem, KjCommandList, KjCommandPalette, KjCommandPaletteDialog, KjCommandPaletteTrigger, KjCommandSeparator, KjConfirmPopup, KjConfirmPopupAction, KjConfirmPopupCancel, KjConfirmPopupContent, KjConfirmPopupMessage, KjConfirmPopupTrigger, KjDatePicker, KjDatePickerCalendar, KjDatePickerTrigger, KjDialog$1 as KjDialog, KjDialogRef, KjDialog as KjDialogService, KjDirectionality, KjDisabled, KjDivider, KjDrawer, KjDrawerRef, KjDrawerService, KjDropdownMenu, KjDropdownMenuContent, KjDropdownMenuGroup, KjDropdownMenuItem, KjDropdownMenuLabel, KjDropdownMenuSeparator, KjDropdownMenuTrigger, KjField, KjFieldError, KjFieldGroup, KjFieldHelp, KjFieldLabel, KjFileUpload, KjFileUploadDropzone, KjFileUploadItem, KjFileUploadList, KjFileUploadTrigger, KjFilterableList, KjFocusRing, KjFocusTrap, KjForm, KjFormControl, KjFormError, KjFormErrorSummary, KjFormField, KjFormLabel, KjIconDirective, KjId, KjInput, KjInputGroup, KjInputGroupAddon, KjInputMask, KjInputOtp, KjInputOtpCell, KjKbd, KjLead, KjLink, KjList, KjListGroup, KjListGroupLabel, KjListItem, KjListNavigator, KjListRow, KjListSeparator, KjLiveRegion, KjMenubar, KjMenubarItem, KjMuted, KjNumberInput, KjNumberInputGroup, KjNumberStepper, KjOption, KjOverlayBadge, KjOverlayBadgeContent, KjOverlayBuilder, KjOverlayController, KjOverlayHandle, KjOverlayPanel, KjOverlayStack, KjOverlayTrigger, KjOverlayWrapper, KjPagination, KjPaginationEllipsis, KjPaginationFirst, KjPaginationInfo, KjPaginationItem, KjPaginationLast, KjPaginationNext, KjPaginationPrevious, KjPasswordCapsLockWarning, KjPasswordInput, KjPasswordInputScope, KjPasswordStrength, KjPasswordToggle, KjPopoverArrow, KjPopoverClose, KjPopoverContent, KjPopoverTitle, KjPopoverTrigger, KjProgressBar, KjProgressBarFill, KjRadio, KjRadioGroup, KjRovingTabindex, KjRovingTabindexItemDirective, KjSelect, KjSelectContent, KjSelectTrigger, KjSelectionModel, KjSize, KjSkeleton, KjSlider, KjSliderRange, KjSliderThumb, KjSliderTrack, KjSpeedDial, KjSpeedDialAction, KjSpeedDialActions, KjSpeedDialTrigger, KjSpinner, KjStep, KjStepContent, KjStepLabel, KjStepper, KjStepperNext, KjStepperPrevious, KjStepperReset, KjTab, KjTabList, KjTabPanel, KjTable, KjTableCell, KjTableFilterOutlet, KjTableHeader, KjTableKeyboardNav, KjTableRow, KjTabs, KjTag, KjTagList, KjTagRemove, KjTextarea, KjTimePicker, KjTimePickerHours, KjTimePickerMeridiem, KjTimePickerMinutes, KjTimePickerSeconds, KjToast, KjToastClose, KjToastPanel, KjToastRef, KjToastService, KjToastViewport, KjToggle, KjTooltipArrow, KjTooltipContent, KjTooltipGroup, KjTooltipTrigger, KjTreeSelect, KjTreeSelectContent, KjTreeSelectNode, KjTreeSelectToggle, KjTreeSelectTrigger, KjTruncate, KjTypeAhead, KjVariant, KjVisuallyHidden, MaskEngine, addDays, addMonths, addYears, anchoredTo, assertive, bindPresets, blurredBackdrop, bodyPortal, buildMonthMatrix, compareDay, compileMask, corner, cssClip, defaultMaskTokens, defaultPasswordScorer, edgeSheet, endOfMonth, firstDayOfWeek, formatDateLong, formatDateShort, formatMonthYear, getIconMode, htmlOverflow, inContainer, inMemoryAdapter, inPlace, inPlaceSibling, inertBased, injectFilterableList, injectKjFilterParams, injectKjIconResolver, injectListItem, injectSelectionModel, isInRange, isKjFilterModel, isSameDay, isSameMonth, kjColumn, kjColumnGroup, kjContainsFilter, kjDateFilterFn, kjFileMatchesAccept, kjFuzzyFilter, kjHsvToHsl, kjHsvToRgb, kjMultiFilterFn, kjNumberFilterFn, kjParseHex, kjRgbToHex, kjRgbToHsv, kjSetFilterFn, kjStartsWithFilter, kjSubstringFilter, kjTableResource, kjTextFilterFn, localStorageAdapter, nextCascadeId, nextDropdownMenuLabelId, nextPopoverTitleId, noBackdrop, noScrollLock, noTrap, onClick, onContextMenu, onFocus, onFocusOrInput, onHotkey, onHover, parseDate, pointAt, polite, programmatic, provideIconLoader, provideIconResolver, provideIcons, provideKjAlert, provideKjBreadcrumb, provideKjButton, provideKjChatBubble, provideKjFilterParams, provideKjInputMaskTokens, provideKjLink, provideKjPagination, provideKjProgressBar, provideKjSpinner, provideKjTableStorage, provideKjTag, provideKjTextarea, provideKjToastListStrategy, provideKjToastSonnerStrategy, provideKjToastStrategy, sessionStorageAdapter, silent, solidBackdrop, startOfDay, startOfMonth, stripDiacritics, tabCycle, toDeepSignal, viewportCentered, weekdayLongNames, weekdayShortNames };
+export { DRAWER_DATA, DRAWER_DRAG, DRAWER_SIDE, EN_CATALOG, FR_CATALOG, KJ_ACCORDION, KJ_ACCORDION_ITEM, KJ_ALERT, KJ_ALERT_CONFIG, KJ_ALERT_DEFAULTS, KJ_AVATAR, KJ_AVATAR_GROUP, KJ_BREADCRUMB, KJ_BREADCRUMB_CONFIG, KJ_BREADCRUMB_DEFAULTS, KJ_BUTTON_CONFIG, KJ_BUTTON_DEFAULTS, KJ_BUTTON_GROUP, KJ_CALENDAR, KJ_CAROUSEL, KJ_CAROUSEL_INDICATORS, KJ_CAROUSEL_SLIDE, KJ_CASCADE_SELECT, KJ_CHAT, KJ_CHAT_BUBBLE_CONFIG, KJ_CHAT_BUBBLE_DEFAULTS, KJ_CHAT_LOG, KJ_COLOR_PICKER, KJ_CONFIRM_POPUP, KJ_DATE_PICKER, KJ_DATE_RANGE_PRESETS, KJ_DROPDOWN_MENU, KJ_ECHARTS, KJ_FIELD, KJ_FILE_UPLOAD, KJ_FILE_UPLOAD_DEFAULT_MESSAGES, KJ_FILE_UPLOAD_ITEM, KJ_FORM, KJ_FORM_FIELD, KJ_ICON_CSS_PATH, KJ_ICON_ENTRIES, KJ_ICON_LOADER, KJ_ICON_REGISTRY, KJ_ICON_RESOLVER, KJ_INPUT_GROUP, KJ_INPUT_MASK_PRESETS, KJ_INPUT_MASK_TOKENS, KJ_INPUT_OTP, KJ_KBD_SIZE_PRESET, KJ_LINK_CONFIG, KJ_LINK_DEFAULTS, KJ_LIST, KJ_LIST_FOCUS_MODE, KJ_LIST_NAVIGATOR_CONFIG, KJ_LIST_ROW, KJ_LOCALE_CONFIG, KJ_MENUBAR, KJ_MONACO_CONFIG, KJ_MONACO_LANGUAGE_LOADERS, KJ_NUMBER_INPUT, KJ_OVERLAY_BACKDROP_STRATEGY, KJ_OVERLAY_BADGE, KJ_OVERLAY_FOCUS_TRAP_STRATEGY, KJ_OVERLAY_LIVE_ANNOUNCER_STRATEGY, KJ_OVERLAY_MOUNT_STRATEGY, KJ_OVERLAY_PANEL_ROLE, KJ_OVERLAY_POSITION_STRATEGY, KJ_OVERLAY_SCROLL_LOCK_STRATEGY, KJ_OVERLAY_TRIGGER_EVENT_STRATEGY, KJ_PAGINATION, KJ_PAGINATION_CONFIG, KJ_PAGINATION_DEFAULTS, KJ_PASSWORD_INPUT, KJ_PROGRESS_BAR, KJ_PROGRESS_BAR_CONFIG, KJ_PROGRESS_BAR_DEFAULTS, KJ_PROSE_CSS_PATH, KJ_RADIO_GROUP, KJ_RICH_TEXT, KJ_RICH_TEXT_EXTENSIONS, KJ_RICH_TEXT_FEATURES, KJ_RICH_TEXT_NODE, KJ_ROVING_TABINDEX, KJ_RTE_OVERLAY_DATA, KJ_SELECT, KJ_SIZE_PRESET, KJ_SLIDER, KJ_SPEED_DIAL, KJ_SPINNER_CONFIG, KJ_SPINNER_DEFAULTS, KJ_STEP, KJ_STEPPER, KJ_TABLE, KJ_TABLE_STORAGE, KJ_TABS, KJ_TAG, KJ_TAG_CONFIG, KJ_TAG_DEFAULTS, KJ_TAG_LIST, KJ_TEXTAREA_CONFIG, KJ_TEXTAREA_DEFAULTS, KJ_TIME_PICKER, KJ_TOAST_LIST_STRATEGY, KJ_TOAST_SONNER_STRATEGY, KJ_TOAST_STRATEGY, KJ_TRANSLATION_CATALOGS, KJ_TREE_SELECT, KJ_VARIANT_PRESET, KjAccordion, KjAccordionContent, KjAccordionItem, KjAccordionTrigger, KjAlert, KjAlertActions, KjAlertDescription, KjAlertDismiss, KjAlertIcon, KjAlertTitle, KjAriaDescribedBy, KjAriaLabelledBy, KjAvatar, KjAvatarFallback, KjAvatarGroup, KjAvatarImage, KjBackdrop, KjBadge, KjBlockquote, KjBreadcrumb, KjBreadcrumbCurrent, KjBreadcrumbEllipsis, KjBreadcrumbItem, KjBreadcrumbLink, KjBreadcrumbList, KjBreadcrumbSeparator, KjButton, KjButtonGroup, KjCalendar, KjCalendarDay, KjCalendarGrid, KjCalendarHeader, KjCarousel, KjCarouselAutoplay, KjCarouselIndicator, KjCarouselIndicators, KjCarouselNext, KjCarouselPauseToggle, KjCarouselPrevious, KjCarouselSlide, KjCarouselViewport, KjCascadeSelect, KjCascadeSelectOption, KjCascadeSelectPanel, KjCascadeSelectSubPanel, KjCascadeSelectTrigger, KjChart, KjChartTableFallback, KjChat, KjChatAnnouncer, KjChatAvatar, KjChatBubble, KjChatFooter, KjChatHeader, KjChatLog, KjChatStore, KjCheckbox, KjCode, KjColorPicker, KjColorPickerAlphaSlider, KjColorPickerArea, KjColorPickerHueSlider, KjColorPickerInput, KjColorPickerPanel, KjColorPickerTrigger, KjCombobox, KjComboboxInput, KjComboboxListbox, KjComboboxOption, KjCommandEmpty, KjCommandGroup, KjCommandInput, KjCommandItem, KjCommandList, KjCommandPalette, KjCommandPaletteDialog, KjCommandPaletteTrigger, KjCommandSeparator, KjConfirmPopup, KjConfirmPopupAction, KjConfirmPopupCancel, KjConfirmPopupContent, KjConfirmPopupMessage, KjConfirmPopupTrigger, KjDatePicker, KjDatePickerCalendar, KjDatePickerTrigger, KjDateRangePresetOption, KjDateRangePresets, KjDialog$1 as KjDialog, KjDialogRef, KjDialog as KjDialogService, KjDirectionality, KjDisabled, KjDivider, KjDrawer, KjDrawerRef, KjDrawerService, KjDropdownMenu, KjDropdownMenuContent, KjDropdownMenuGroup, KjDropdownMenuItem, KjDropdownMenuLabel, KjDropdownMenuSeparator, KjDropdownMenuTrigger, KjEditor, KjEditorLoader, KjField, KjFieldError, KjFieldGroup, KjFieldHelp, KjFieldLabel, KjFileUpload, KjFileUploadDropzone, KjFileUploadItem, KjFileUploadList, KjFileUploadTrigger, KjFilterableList, KjFocusRing, KjFocusTrap, KjForm, KjFormControl, KjFormError, KjFormErrorSummary, KjFormField, KjFormLabel, KjIconDirective, KjId, KjInput, KjInputGroup, KjInputGroupAddon, KjInputMask, KjInputOtp, KjInputOtpCell, KjKbd, KjLead, KjLink, KjList, KjListGroup, KjListGroupLabel, KjListItem, KjListNavigator, KjListRow, KjListSeparator, KjLiveRegion, KjLocale, KjMenubar, KjMenubarItem, KjMotion, KjMuted, KjNumberInput, KjNumberInputGroup, KjNumberStepper, KjOption, KjOverlayBadge, KjOverlayBadgeContent, KjOverlayBuilder, KjOverlayController, KjOverlayHandle, KjOverlayPanel, KjOverlayStack, KjOverlayTrigger, KjOverlayWrapper, KjPagination, KjPaginationEllipsis, KjPaginationFirst, KjPaginationInfo, KjPaginationItem, KjPaginationLast, KjPaginationNext, KjPaginationPrevious, KjPasswordCapsLockWarning, KjPasswordInput, KjPasswordInputScope, KjPasswordStrength, KjPasswordToggle, KjPopoverArrow, KjPopoverClose, KjPopoverContent, KjPopoverTitle, KjPopoverTrigger, KjProgressBar, KjProgressBarFill, KjRadio, KjRadioGroup, KjReducedMotion, KjRichTextEditor, KjRichTextExtensionDirective, KjRovingTabindex, KjRovingTabindexItemDirective, KjSelect, KjSelectContent, KjSelectTrigger, KjSelectionModel, KjSheet, KjSheetRef, KjSheetService, KjSize, KjSkeleton, KjSkipLink, KjSlider, KjSliderRange, KjSliderThumb, KjSliderTrack, KjSpeedDial, KjSpeedDialAction, KjSpeedDialActions, KjSpeedDialTrigger, KjSpinner, KjStep, KjStepContent, KjStepLabel, KjStepper, KjStepperNext, KjStepperPrevious, KjStepperReset, KjTab, KjTabList, KjTabPanel, KjTable, KjTableCell, KjTableFilterOutlet, KjTableHeader, KjTableKeyboardNav, KjTableRow, KjTabs, KjTag, KjTagList, KjTagRemove, KjTextarea, KjTimePicker, KjTimePickerHours, KjTimePickerMeridiem, KjTimePickerMinutes, KjTimePickerSeconds, KjToast, KjToastClose, KjToastPanel, KjToastRef, KjToastService, KjToastViewport, KjToggle, KjTooltipArrow, KjTooltipContent, KjTooltipGroup, KjTooltipTrigger, KjTranslate, KjTranslateService, KjTreeSelect, KjTreeSelectContent, KjTreeSelectNode, KjTreeSelectToggle, KjTreeSelectTrigger, KjTruncate, KjTypeAhead, KjVariant, KjVisuallyHidden, MaskEngine, SHEET_ARIA_LABEL, SHEET_DATA, SHEET_DETENT, SHEET_DISMISSIBLE, addDays, addMonths, addYears, anchoredTo, assertive, bindPresets, blurredBackdrop, bodyPortal, buildMonthMatrix, coalesceAnnouncement, compareDay, compileMask, corner, createKjDecoratorNode, createKjImageNode, cssClip, defaultDateRangePresets, defaultMaskTokens, defaultPasswordScorer, edgeSheet, endOfMonth, firstDayOfWeek, formatDateLong, formatDateShort, formatMonthYear, getIconMode, htmlOverflow, inContainer, inMemoryAdapter, inPlace, inPlaceSibling, inertBased, injectFilterableList, injectKjFilterParams, injectKjIconResolver, injectListItem, injectRichTextNode, injectRteOverlayData, injectSelectionModel, isInRange, isKjFilterModel, isSameDay, isSameMonth, kjColumn, kjColumnGroup, kjContainsFilter, kjDateFilterFn, kjFileMatchesAccept, kjFuzzyFilter, kjHsvToHsl, kjHsvToRgb, kjMultiFilterFn, kjNumberFilterFn, kjParseHex, kjRgbToHex, kjRgbToHsv, kjSetFilterFn, kjStartsWithFilter, kjSubstringFilter, kjTableResource, kjTextFilterFn, localStorageAdapter, matchSlashCommands, nextCascadeId, nextChatMessageId, nextDropdownMenuLabelId, nextPopoverTitleId, noBackdrop, noScrollLock, noTrap, normalizeLanguage, onClick, onContextMenu, onFocus, onFocusOrInput, onHotkey, onHover, parseDate, parseSlash, pointAt, polite, programmatic, provideECharts, provideIconLoader, provideIconResolver, provideIcons, provideKjAlert, provideKjBreadcrumb, provideKjButton, provideKjChatBubble, provideKjDocumentDirection, provideKjFilterParams, provideKjInputMaskTokens, provideKjLink, provideKjLocale, provideKjPagination, provideKjProgressBar, provideKjRichText, provideKjSpinner, provideKjTableStorage, provideKjTag, provideKjTextarea, provideKjToastListStrategy, provideKjToastSonnerStrategy, provideKjToastStrategy, provideKjTranslations, provideMonaco, provideMonacoLanguages, resolveChartPalette, resolveDateRangePreset, sessionStorageAdapter, silent, solidBackdrop, startOfDay, startOfMonth, stripDiacritics, tabCycle, toDeepSignal, viewportCentered, weekdayLongNames, weekdayShortNames };
 //# sourceMappingURL=kouji-ui-core.mjs.map