@flyos/design-system 1.2.0 → 1.4.0

package/fesm2022/flyos-design-system.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, inject, TemplateRef, ViewContainerRef, effect, Input, Directive, ErrorHandler, Pipe, ChangeDetectionStrategy, Component, makeEnvironmentProviders, provideAppInitializer, PLATFORM_ID, DestroyRef, ElementRef, input, output, afterNextRender, HostListener, ViewChild, NgZone, viewChild, DOCUMENT as DOCUMENT$1, EventEmitter, Output, forwardRef, model, viewChildren, untracked, Injector, ViewEncapsulation, Renderer2, isDevMode, contentChildren, contentChild } from '@angular/core';
-import { catchError, throwError, Subject, from, firstValueFrom, of, ReplaySubject, retry, timer, map } from 'rxjs';
+import { InjectionToken, signal, computed, Injectable, inject, TemplateRef, ViewContainerRef, effect, Input, Directive, ErrorHandler, isDevMode, Pipe, ChangeDetectionStrategy, Component, makeEnvironmentProviders, provideAppInitializer, PLATFORM_ID, DestroyRef, ElementRef, input, output, afterNextRender, HostListener, ViewChild, NgZone, viewChild, DOCUMENT as DOCUMENT$1, EventEmitter, Output, forwardRef, model, viewChildren, untracked, Injector, ViewEncapsulation, Renderer2, contentChildren, contentChild } from '@angular/core';
+import { catchError, throwError, Subject, from, firstValueFrom, of, Observable, map, ReplaySubject, retry, timer } from 'rxjs';
 import { HttpClient, HttpParams, HttpHeaders, HttpErrorResponse, HttpEventType } from '@angular/common/http';
 import { switchMap, debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
 import { HubConnectionBuilder, HttpTransportType, LogLevel, HubConnectionState } from '@microsoft/signalr';
@@ -48,7 +48,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 // tools/publish-library.ps1 at bump time, and asserted by the spec beside this file.
 // Used only for the diagnostic message; the duplicate-instance detection itself is
 // version-agnostic, so a stale literal misnames a fork rather than hiding one.
-const FLY_DS_VERSION = '1.2.0';
+const FLY_DS_VERSION = '1.4.0';
 const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
 /**
  * Records this design-system instance on the shared `scope` and returns the
@@ -1585,6 +1585,7 @@ const DS_BASELINE_LOCALES = {
         'ui.action.confirm': 'Confirm',
         'ui.action.dismiss': 'Dismiss',
         'ui.action.fewerOptions': 'Fewer options',
+        'ui.action.open': 'Open',
         'ui.action.retry': 'Retry',
         'ui.action.save': 'Save',
         'ui.action.search': 'Search',
@@ -1594,6 +1595,7 @@ const DS_BASELINE_LOCALES = {
         'ui.form.autoSaving': 'Auto-saving',
         'ui.nav.breadcrumbs': 'Breadcrumbs',
         'ui.nav.home': 'Home',
+        'ui.nav.modules': 'Modules',
         'ui.nav.selectModule': 'Select a module',
         'ui.nav.sections': 'Sections',
         'ui.nav.switchModule': 'Switch module',
@@ -1931,6 +1933,7 @@ const DS_BASELINE_LOCALES = {
         'ui.action.confirm': 'تأكيد',
         'ui.action.dismiss': 'تجاهل',
         'ui.action.fewerOptions': 'خيارات أقل',
+        'ui.action.open': 'فتح',
         'ui.action.retry': 'إعادة المحاولة',
         'ui.action.save': 'حفظ',
         'ui.action.search': 'بحث',
@@ -1940,6 +1943,7 @@ const DS_BASELINE_LOCALES = {
         'ui.form.autoSaving': 'حفظ تلقائي',
         'ui.nav.breadcrumbs': 'مسار التنقل',
         'ui.nav.home': 'الرئيسية',
+        'ui.nav.modules': 'الوحدات',
         'ui.nav.selectModule': 'اختر وحدة',
         'ui.nav.sections': 'الأقسام',
         'ui.nav.switchModule': 'تبديل الوحدة',
@@ -2277,6 +2281,7 @@ const DS_BASELINE_LOCALES = {
         'ui.action.confirm': 'Confirmer',
         'ui.action.dismiss': 'Ignorer',
         'ui.action.fewerOptions': 'Moins d\'options',
+        'ui.action.open': 'Ouvrir',
         'ui.action.retry': 'Réessayer',
         'ui.action.save': 'Enregistrer',
         'ui.action.search': 'Rechercher',
@@ -2286,6 +2291,7 @@ const DS_BASELINE_LOCALES = {
         'ui.form.autoSaving': 'Enregistrement automatique',
         'ui.nav.breadcrumbs': 'Fil d\'Ariane',
         'ui.nav.home': 'Accueil',
+        'ui.nav.modules': 'Modules',
         'ui.nav.selectModule': 'Choisir un module',
         'ui.nav.sections': 'Sections',
         'ui.nav.switchModule': 'Changer de module',
@@ -2622,6 +2628,7 @@ const DS_BASELINE_LOCALES = {
         'ui.action.confirm': 'تصدیق کریں',
         'ui.action.dismiss': 'مسترد کریں',
         'ui.action.fewerOptions': 'کم اختیارات',
+        'ui.action.open': 'کھولیں',
         'ui.action.retry': 'دوبارہ کوشش کریں',
         'ui.action.save': 'محفوظ کریں',
         'ui.action.search': 'تلاش کریں',
@@ -2631,6 +2638,7 @@ const DS_BASELINE_LOCALES = {
         'ui.form.autoSaving': 'خودکار محفوظ ہو رہا ہے',
         'ui.nav.breadcrumbs': 'بریڈکرمب',
         'ui.nav.home': 'ہوم',
+        'ui.nav.modules': 'ماڈیولز',
         'ui.nav.selectModule': 'ماڈیول منتخب کریں',
         'ui.nav.sections': 'حصے',
         'ui.nav.switchModule': 'ماڈیول تبدیل کریں',
@@ -2689,14 +2697,18 @@ function normalizeLocaleJson(raw) {
 /**
  * Shared I18nService for the shell and Business Apps.
  *
- * **Merge order** (later keys win): DS baseline → shell layer → remote bundles
- * in registration order.
+ * **Merge order** (later keys win): DS baseline → remote bundles in registration
+ * order → shell layer.
  *
  * - Baseline: {@link DS_BASELINE_LOCALES} — built-in strings for DS components
  *   (markdown editor, entity lookup) so they render localized labels even in a
  *   standalone consumer that never populated the shell layer. Always overridable.
- * - Shell: `setShellTranslations()` after loading `locale/{lang}.json` and API overrides.
- * - Remotes: `loadBundle()` per manifest `localeBaseUrl`.
+ * - Remotes: `loadBundle()` per manifest `localeBaseUrl`. May ADD any key and may
+ *   override the baseline, but cannot redefine a key the shell owns — the dictionary
+ *   is global, so allowing that let one remote restyle the whole desktop's wording.
+ * - Shell: `setShellTranslations()` after loading `locale/{lang}.json` and API
+ *   overrides. Highest priority, which also makes the per-tenant
+ *   `/api/i18n/desktop-shell/{lang}` overrides authoritative over every app.
  */
 class I18nService {
     // NOTE (NG0200 / federation): the ErrorHandler ↔ I18nService cycle is broken on the
@@ -2711,20 +2723,43 @@ class I18nService {
     _bundleOrder = signal([], ...(ngDevMode ? [{ debugName: "_bundleOrder" }] : /* istanbul ignore next */ []));
     _locale = signal('en', ...(ngDevMode ? [{ debugName: "_locale" }] : /* istanbul ignore next */ []));
     _version = signal(0, ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
+    /** `${bundleId}|${locale}` pairs already reported by {@link warnOnSuppressedShellKeys}. */
+    _warnedCollisions = new Set();
     /** Built-in DS strings for the active locale (falls back to `en` for any
      *  locale we don't ship). Lowest-priority layer — always overridable. */
     _baseline = computed(() => DS_BASELINE_LOCALES[this._locale()] ?? DS_BASELINE_LOCALES['en'] ?? {}, ...(ngDevMode ? [{ debugName: "_baseline" }] : /* istanbul ignore next */ []));
+    /**
+     * Merge order, lowest priority first: DS baseline → remote bundles (registration
+     * order) → shell.
+     *
+     * The shell layer is LAST, and that is the whole point. Translations live in one
+     * flat, global dictionary with no per-app scoping, so when remote bundles were
+     * merged last, any remote that happened to define a key the shell also defines
+     * silently rewrote that string for the ENTIRE desktop — every other app included.
+     *
+     * That was not hypothetical: the Circles remote's bundle shares 63 keys with the
+     * shell and differed on 27 of them, one being `common.label.dashboard`, which is
+     * how it came to own the Arabic display name of a Core App it has nothing to do
+     * with. The symptom is near-impossible to chase from the outside — editing the
+     * shell's own `locale/{lang}.json` simply has no effect at runtime, with nothing
+     * logged.
+     *
+     * A remote may still override the DS baseline (bundles are merged after it), which
+     * is the layer explicitly documented as always-overridable, and it may still add
+     * any key the shell does not define. What it can no longer do is redefine a string
+     * the shell owns. {@link loadBundle} warns in dev when a bundle tries.
+     */
     _merged = computed(() => {
         const shell = this._shell();
         const order = this._bundleOrder();
         const bundles = this._bundles();
-        let out = { ...this._baseline(), ...shell };
+        let out = { ...this._baseline() };
         for (const id of order) {
             const b = bundles[id];
             if (b)
                 out = { ...out, ...b };
         }
-        return out;
+        return { ...out, ...shell };
     }, ...(ngDevMode ? [{ debugName: "_merged" }] : /* istanbul ignore next */ []));
     locale = this._locale.asReadonly();
     version = this._version.asReadonly();
@@ -2738,6 +2773,17 @@ class I18nService {
         this._shell.set(data);
         this._locale.set(lang);
         this.bump();
+        // Bundles routinely land BEFORE this — the shell kicks off remote locale loads
+        // and its own fetch together, and the remotes often win the race. Re-checking
+        // here is what makes the diagnostic order-independent; without it the warning
+        // fired only when the shell happened to arrive first, which in practice was
+        // never.
+        const bundles = this._bundles();
+        for (const id of this._bundleOrder()) {
+            const b = bundles[id];
+            if (b)
+                this.warnOnSuppressedShellKeys(id, b);
+        }
     }
     setLanguage(lang) {
         this._locale.set(lang);
@@ -2763,6 +2809,7 @@ class I18nService {
             const data = normalizeLocaleJson(await resp.json());
             if (abortSignal?.aborted)
                 return false;
+            this.warnOnSuppressedShellKeys(id, data);
             this._bundles.update((b) => ({ ...b, [id]: data }));
             this._bundleOrder.update((order) => (order.includes(id) ? order : [...order, id]));
             this._locale.set(lang);
@@ -2777,6 +2824,45 @@ class I18nService {
             return false;
         }
     }
+    /**
+     * Dev-only: report keys a bundle defines that the shell already owns.
+     *
+     * These are now silently ignored (the shell wins), so without this the app would
+     * simply not use strings the remote shipped and nobody would know which ones. The
+     * previous precedence was worse — it applied them, changing wording across the
+     * whole desktop, also silently. Either way the failure is invisible, which is the
+     * argument for saying it out loud exactly once, when the bundle loads.
+     *
+     * A hit is not automatically a bug: an app legitimately reuses shared keys it does
+     * not intend to redefine, so only keys whose VALUE differs are worth reporting.
+     * The fix on the app's side is to namespace the key under its own app id.
+     */
+    warnOnSuppressedShellKeys(id, data) {
+        if (!isDevMode())
+            return;
+        const shell = this._shell();
+        // Nothing to conflict with yet — a standalone consumer, or a bundle that raced
+        // ahead of setShellTranslations. Not a collision, so stay quiet; the shell
+        // re-runs this check for every stored bundle once it lands.
+        if (Object.keys(shell).length === 0)
+            return;
+        const suppressed = Object.keys(data).filter((k) => k in shell && shell[k] !== data[k]);
+        if (suppressed.length === 0)
+            return;
+        // Both entry points can reach the same (bundle, locale) pair — a bundle stored
+        // before the shell is checked again when the shell lands, and every locale
+        // switch replays both. Report each pair once so a real signal doesn't drown in
+        // repeats.
+        const seen = `${id}|${this._locale()}`;
+        if (this._warnedCollisions.has(seen))
+            return;
+        this._warnedCollisions.add(seen);
+        const sample = suppressed.slice(0, 10).join(', ');
+        const more = suppressed.length > 10 ? `, …and ${suppressed.length - 10} more` : '';
+        console.warn(`[I18n] Locale bundle "${id}" redefines ${suppressed.length} key(s) the shell owns; ` +
+            `the shell's values win and the bundle's are ignored. Namespace these under "${id}." ` +
+            `if they are meant to be app-specific: ${sample}${more}`);
+    }
     removeBundle(id) {
         this._bundles.update((b) => {
             const next = { ...b };
@@ -3986,6 +4072,290 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/** `POST /api/users/resolve` accepts at most this many ids per call (platform contract). */
+const RESOLVE_BATCH_SIZE = 200;
+/**
+ * **`FlyUserDirectoryService`** — the one id→person adapter for the platform user
+ * directory (`GET /api/users/lookup?q=`, `POST /api/users/resolve`).
+ *
+ * Every app that renders a *list* of people — comment authors, contributors,
+ * approvers, credits, audit rows — needs the same thing: turn a `userId` into a
+ * name without issuing one request per row. Before this service each app wrote
+ * its own copy (Circles `UserResolverService`, Thoughts `UserLookupService`,
+ * plus hand-rolled `/api/users/resolve` calls in the shell and admin portal),
+ * and every copy re-derived the same read-through cache. This is that cache,
+ * once, in the design system.
+ *
+ * The HTTP call rides the **host's** `HttpClient`, so the host's gateway routing,
+ * auth interceptor, and correlation headers all apply — the same arrangement
+ * `fly-entity-lookup` uses. The DS never configures a base URL of its own.
+ *
+ * ## `label()` is read-through — hosts do not prime
+ *
+ * {@link label} is a *signal-backed* accessor: on a cache miss it queues the id
+ * and returns `null`, then the queued ids are resolved in ONE batched request a
+ * microtask later. Because the read happens inside Angular's reactive context,
+ * a template calling `label(id)` re-renders by itself when the answer lands —
+ * no `computed` shadow state, no `prime()` call at each fetch site.
+ *
+ * That last point is the whole reason this exists. The prime-then-read shape it
+ * replaces required every host to (a) keep the raw page separate from the mapped
+ * page, (b) derive the mapped page through a `computed`, and (c) remember to
+ * prime on *every* fetch path — root load, load-more, load-replies, refetch. Miss
+ * one path and that path silently renders GUIDs, with nothing failing. Making the
+ * cache read-through deletes the whole bug class.
+ *
+ * ## Failure is graceful, and never a retry storm
+ *
+ * A failed lookup caches nothing, so callers fall back to whatever they render
+ * for an unresolved id (typically the raw id). Deliberate asymmetry in retry
+ * behaviour, because a render-driven read must not hammer a broken endpoint:
+ *
+ * - **Render-driven** ({@link label}) attempts an id **once**. After a failure it
+ *   stays unresolved for the session rather than re-requesting on every
+ *   change-detection pass.
+ * - **Explicit** ({@link prime}, {@link resolve}, {@link invalidate}) always
+ *   re-attempts. A host re-fetching a page therefore retries naturally, and a
+ *   retry button can call {@link invalidate}.
+ *
+ * Unknown / cross-tenant ids are omitted by the endpoint rather than erroring, so
+ * they simply never resolve — which is also the correct behaviour for a
+ * standalone External App where `/api/users/*` isn't reachable at all.
+ *
+ * @example Comment thread — one binding, no plumbing
+ * ```html
+ * <fly-comment-thread
+ *   [rootPage]="rootPage()"
+ *   [resolveDisplayName]="directory.label" />
+ * ```
+ * ```ts
+ * protected readonly directory = inject(FlyUserDirectoryService);
+ * ```
+ *
+ * @example People picker — search + prefill
+ * ```html
+ * <fly-people-picker
+ *   [searchFn]="directory.search()"
+ *   [initialSelection]="selected()" />
+ * ```
+ */
+class FlyUserDirectoryService {
+    http = inject(HttpClient);
+    /** id → person, for everything resolved so far. Signal-backed so {@link label} is reactive. */
+    entries = signal({}, ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    /** Ids with a request in the air — so a re-render cannot duplicate an in-flight lookup. */
+    inFlight = new Set();
+    /**
+     * Ids {@link label} has already attempted at least once. Checked ONLY on the
+     * render-driven path: it is what stops a persistently failing endpoint from
+     * being re-requested on every change-detection pass. Explicit callers ignore it.
+     */
+    attempted = new Set();
+    /** Ids queued by {@link label}, awaiting the batched microtask flush. */
+    queued = new Set();
+    flushScheduled = false;
+    // ── Read ─────────────────────────────────────────────────────────────────────
+    /**
+     * Display name for `id`, or `null` when it is not (yet) resolved — on a miss the
+     * id is queued for the next batched resolve. Null rather than the raw id on
+     * purpose: a GUID is not a name, and the caller should render its own fallback
+     * (or localized placeholder) instead of the DS guessing one.
+     *
+     * Bound as a value (`[resolveDisplayName]="directory.label"`), so it is an arrow
+     * property rather than a method — `this` stays correct without the host wrapping
+     * it in a closure.
+     */
+    label = (id) => {
+        if (!id)
+            return null;
+        const hit = this.entries()[id];
+        if (hit)
+            return hit.displayName;
+        this.queueForRender(id);
+        return null;
+    };
+    /**
+     * The full resolved person for `id` (name, email, avatar), or `null` when not yet
+     * known. Same read-through queueing as {@link label} — use it when a surface can
+     * render an avatar rather than just a name.
+     */
+    option = (id) => {
+        if (!id)
+            return null;
+        const hit = this.entries()[id];
+        if (hit)
+            return hit;
+        this.queueForRender(id);
+        return null;
+    };
+    // ── Explicit population ──────────────────────────────────────────────────────
+    /**
+     * Eagerly resolves any ids not already known, merging them into the cache.
+     * Optional — {@link label} resolves on demand — but useful to warm the cache
+     * before a render, or to force a retry after a failed auto-attempt (explicit
+     * calls are not subject to the once-only rule; see the class doc).
+     */
+    prime(ids) {
+        const fresh = this.distinct(ids).filter(id => !this.entries()[id] && !this.inFlight.has(id));
+        if (fresh.length === 0)
+            return;
+        this.fetch(fresh);
+    }
+    /**
+     * Bulk-resolves ids to picker options — for prefilling `fly-people-picker`'s
+     * `[initialSelection]` from stored ids. Requests are chunked to the endpoint's
+     * {@link RESOLVE_BATCH_SIZE} cap rather than truncated, so a large selection
+     * resolves fully instead of silently losing its tail. Resolved rows also land in
+     * the cache, so a later {@link label} for the same id is free. Empty in → empty
+     * out with no request.
+     */
+    resolve(ids) {
+        const distinct = this.distinct(ids);
+        if (distinct.length === 0)
+            return of([]);
+        return new Observable(subscriber => {
+            const chunks = this.chunk(distinct);
+            const collected = [];
+            let remaining = chunks.length;
+            let failed = false;
+            for (const batch of chunks) {
+                this.post(batch).subscribe({
+                    next: rows => {
+                        this.merge(rows);
+                        collected.push(...rows);
+                    },
+                    error: (err) => {
+                        if (failed)
+                            return;
+                        failed = true;
+                        subscriber.error(err);
+                    },
+                    complete: () => {
+                        if (failed)
+                            return;
+                        if (--remaining === 0) {
+                            subscriber.next(collected);
+                            subscriber.complete();
+                        }
+                    },
+                });
+            }
+        });
+    }
+    /**
+     * Drops cached entries so the next read re-resolves them — the retry hook for a
+     * host that surfaces a "couldn't load names" affordance. Omit `ids` to clear the
+     * whole cache.
+     */
+    invalidate(ids) {
+        if (!ids) {
+            this.entries.set({});
+            this.inFlight.clear();
+            this.attempted.clear();
+            this.queued.clear();
+            return;
+        }
+        const targets = this.distinct(ids);
+        if (targets.length === 0)
+            return;
+        targets.forEach(id => {
+            this.inFlight.delete(id);
+            this.attempted.delete(id);
+        });
+        this.entries.update(prev => {
+            const next = { ...prev };
+            targets.forEach(id => delete next[id]);
+            return next;
+        });
+    }
+    // ── Search ───────────────────────────────────────────────────────────────────
+    /**
+     * A `searchFn` over the platform users directory — bind straight to
+     * `<fly-people-picker [searchFn]>`. Results are cached too, so picking someone
+     * makes their name available to {@link label} without another round-trip.
+     */
+    search() {
+        return (query) => this.http
+            .get('/api/users/lookup', { params: { q: query } })
+            .pipe(map(res => (res.data ?? []).map(toOption)), map(rows => {
+            this.merge(rows);
+            return rows;
+        }));
+    }
+    // ── Internals ────────────────────────────────────────────────────────────────
+    /** Queues a render-driven miss, honouring the once-only rule. */
+    queueForRender(id) {
+        if (this.entries()[id] || this.inFlight.has(id) || this.attempted.has(id) || this.queued.has(id))
+            return;
+        this.queued.add(id);
+        if (this.flushScheduled)
+            return;
+        this.flushScheduled = true;
+        // A microtask, not a synchronous call: `label()` runs during template
+        // evaluation, and firing the request (and its signal write) inline would
+        // mutate state mid-change-detection. Deferring also batches every miss in
+        // the pass into ONE request — a 20-comment page costs one round-trip.
+        queueMicrotask(() => this.flush());
+    }
+    flush() {
+        this.flushScheduled = false;
+        const batch = [...this.queued];
+        this.queued.clear();
+        if (batch.length === 0)
+            return;
+        batch.forEach(id => this.attempted.add(id));
+        this.fetch(batch);
+    }
+    /** Issues the (chunked) resolve calls for `ids` and merges whatever comes back. */
+    fetch(ids) {
+        for (const batch of this.chunk(ids)) {
+            batch.forEach(id => this.inFlight.add(id));
+            this.post(batch).subscribe({
+                next: rows => this.merge(rows),
+                // Unknown / cross-tenant ids are omitted by the endpoint rather than
+                // erroring, so reaching here means a transport-level failure. Cache
+                // nothing — a wrong answer is worse than an unresolved one.
+                error: () => batch.forEach(id => this.inFlight.delete(id)),
+                complete: () => batch.forEach(id => this.inFlight.delete(id)),
+            });
+        }
+    }
+    post(ids) {
+        return this.http
+            .post('/api/users/resolve', { ids })
+            .pipe(map(res => (res.data ?? []).map(toOption)));
+    }
+    merge(rows) {
+        if (rows.length === 0)
+            return;
+        this.entries.update(prev => {
+            const next = { ...prev };
+            rows.forEach(r => (next[r.id] = r));
+            return next;
+        });
+    }
+    distinct(ids) {
+        return [...new Set(ids.filter((id) => !!id))];
+    }
+    chunk(ids) {
+        const out = [];
+        for (let i = 0; i < ids.length; i += RESOLVE_BATCH_SIZE) {
+            out.push(ids.slice(i, i + RESOLVE_BATCH_SIZE));
+        }
+        return out;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyUserDirectoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyUserDirectoryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyUserDirectoryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** `UserLookupDto`/`UserResolvedDto` → the picker option shape, 1:1. */
+function toOption(u) {
+    return { id: u.id, displayName: u.displayName, email: u.email, avatarUrl: u.avatarUrl };
+}
+
 /**
  * The page's CSP nonce, read once at module init from `<meta name="csp-nonce">`.
  *
@@ -5363,6 +5733,22 @@ const MARGIN = 4;
  * host's `getBoundingClientRect()`, so it escapes every overflow-clip and app-window
  * bound. It flips placement + clamps to the viewport so it's always fully visible.
  *
+ * ## `data-tooltip` is the SAME primitive now (the global clipping fix)
+ * `[data-tooltip]` used to be a CSS-only `::before`/`::after` pair in
+ * `_app-surface-utilities.scss`. A pseudo-element is a child box of its host, so it is
+ * clipped by ANY scrolling / `overflow: hidden` ancestor — which is why the boards
+ * toolbar rail (a `overflow-y: auto` plate) rendered every tool tip cut off inside its
+ * own 47px-wide column. No z-index can fix that: clipping is not a stacking question.
+ * `position: fixed` on the pseudo would not fix it either, because the same plates carry
+ * `backdrop-filter`, and a filtered ancestor is a containing block for fixed descendants.
+ *
+ * The fix is to have ONE tooltip implementation, and it is this one: the selector now
+ * also matches `[data-tooltip]`, and when no `flyTooltip` text is bound the directive
+ * reads the host's `data-tooltip` attribute at show time. Reading it lazily (rather than
+ * binding it) is what lets components that write the attribute IMPERATIVELY — the DS icon
+ * button resolves an i18n key into it — participate by simply listing this directive in
+ * `hostDirectives`, with no input to keep in sync.
+ *
  * ## Behaviour
  * - Shows on `mouseenter` AND `focus` (keyboard users), after `flyTooltipDelay` ms.
  * - Hides immediately on `mouseleave` / `blur` / `Escape` / scroll / wheel / destroy.
@@ -5429,9 +5815,19 @@ class FlyTooltipDirective {
         // Belt-and-braces alongside DestroyRef (a plain `new` in a test won't run the effect).
         this.hide();
     }
-    /** Trimmed text, or `''` when there's nothing meaningful to show. */
+    /**
+     * Trimmed text, or `''` when there's nothing meaningful to show.
+     *
+     * Falls back to the host's `data-tooltip` attribute — read from the DOM rather than through an
+     * input, because the DS icon button writes it imperatively from a resolved i18n key (and re-writes
+     * it on every locale change). A signal input could not see that; an attribute read at show time
+     * always reports the current label.
+     */
     normalizedText() {
-        return (this.text() ?? '').trim();
+        const bound = (this.text() ?? '').trim();
+        if (bound)
+            return bound;
+        return (this.host.nativeElement.getAttribute('data-tooltip') ?? '').trim();
     }
     scheduleShow() {
         if (this.flyTooltipDisabled() || !this.normalizedText())
@@ -5599,12 +5995,12 @@ class FlyTooltipDirective {
         this.doc.head.appendChild(style);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: FlyTooltipDirective, isStandalone: true, selector: "[flyTooltip]", inputs: { text: { classPropertyName: "text", publicName: "flyTooltip", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipPlacement: { classPropertyName: "flyTooltipPlacement", publicName: "flyTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipDisabled: { classPropertyName: "flyTooltipDisabled", publicName: "flyTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipDelay: { classPropertyName: "flyTooltipDelay", publicName: "flyTooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "scheduleShow()", "focus": "scheduleShow()", "mouseleave": "hide()", "blur": "hide()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.19", type: FlyTooltipDirective, isStandalone: true, selector: "[flyTooltip], [data-tooltip]", inputs: { text: { classPropertyName: "text", publicName: "flyTooltip", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipPlacement: { classPropertyName: "flyTooltipPlacement", publicName: "flyTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipDisabled: { classPropertyName: "flyTooltipDisabled", publicName: "flyTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, flyTooltipDelay: { classPropertyName: "flyTooltipDelay", publicName: "flyTooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "scheduleShow()", "focus": "scheduleShow()", "mouseleave": "hide()", "blur": "hide()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyTooltipDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[flyTooltip]',
+                    selector: '[flyTooltip], [data-tooltip]',
                     standalone: true,
                     host: {
                         '(mouseenter)': 'scheduleShow()',
@@ -6919,7 +7315,7 @@ class FlyEmojiPickerComponent {
         this.selectionChange.emit(next);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyEmojiPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyEmojiPickerComponent, isStandalone: true, selector: "fly-emoji-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, defaultCategory: { classPropertyName: "defaultCategory", publicName: "defaultCategory", isSignal: true, isRequired: false, transformFunction: null }, skinTones: { classPropertyName: "skinTones", publicName: "skinTones", isSignal: true, isRequired: false, transformFunction: null }, skinTone: { classPropertyName: "skinTone", publicName: "skinTone", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, previewCount: { classPropertyName: "previewCount", publicName: "previewCount", isSignal: true, isRequired: false, transformFunction: null }, emojiAnimation: { classPropertyName: "emojiAnimation", publicName: "emojiAnimation", isSignal: true, isRequired: false, transformFunction: null }, dismissOnOutsidePress: { classPropertyName: "dismissOnOutsidePress", publicName: "dismissOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stickerPicked: "stickerPicked", toggled: "toggled", selectionChange: "selectionChange", skinToneChange: "skinToneChange", dismissed: "dismissed" }, host: { properties: { "class.fly-emoji-picker--small": "size() === 'small'", "class.fly-emoji-picker--medium": "size() === 'medium'", "class.fly-emoji-picker--large": "size() === 'large'" } }, viewQueries: [{ propertyName: "searchRef", first: true, predicate: ["searchRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"fly-emoji-picker\"\r\n  [flyClickOutsideEnabled]=\"dismissOnOutsidePress()\"\r\n  (flyClickOutside)=\"dismissed.emit()\"\r\n  [attr.aria-label]=\"'common.label.emoji_picker' | translate\">\r\n  <!-- Stickers mode only: the emoji grid is unchanged, stickers are an ADDITIONAL surface. -->\r\n  @if (showTabs()) {\r\n    <div\r\n      class=\"fly-emoji-picker__tabs\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"'common.label.emoji_tabs' | translate\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-emoji-picker__tab\"\r\n        role=\"tab\"\r\n        id=\"fly-emoji-tab-emoji\"\r\n        aria-controls=\"fly-emoji-panel-emoji\"\r\n        [class.is-active]=\"activeTab() === 'emoji'\"\r\n        [attr.aria-selected]=\"activeTab() === 'emoji'\"\r\n        [attr.tabindex]=\"activeTab() === 'emoji' ? 0 : -1\"\r\n        (keydown)=\"onTabKeydown($event)\"\r\n        (click)=\"selectTab('emoji')\">\r\n        {{ 'common.label.emoji_tab_emoji' | translate }}\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-emoji-picker__tab\"\r\n        role=\"tab\"\r\n        id=\"fly-emoji-tab-stickers\"\r\n        aria-controls=\"fly-emoji-panel-stickers\"\r\n        [class.is-active]=\"activeTab() === 'stickers'\"\r\n        [attr.aria-selected]=\"activeTab() === 'stickers'\"\r\n        [attr.tabindex]=\"activeTab() === 'stickers' ? 0 : -1\"\r\n        (keydown)=\"onTabKeydown($event)\"\r\n        (click)=\"selectTab('stickers')\">\r\n        {{ 'common.label.emoji_tab_stickers' | translate }}\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (showTabs() && activeTab() === 'stickers') {\r\n    <div\r\n      class=\"fly-emoji-picker__stickers\"\r\n      id=\"fly-emoji-panel-stickers\"\r\n      role=\"tabpanel\"\r\n      aria-labelledby=\"fly-emoji-tab-stickers\">\r\n      @for (entry of stickers(); track entry.id) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-emoji-picker__sticker\"\r\n          [flyTooltip]=\"entry.label\"\r\n          [attr.aria-label]=\"entry.label\"\r\n          (pointerenter)=\"onCellHover(sticker)\"\r\n          (pointerleave)=\"cancelHover()\"\r\n          (click)=\"pickSticker(entry)\">\r\n          <fly-animated-emoji #sticker [id]=\"entry.id\" [size]=\"64\" />\r\n        </button>\r\n      } @empty {\r\n        <p class=\"fly-emoji-picker__empty\">{{ 'agent.lookup.no_results' | translate }}</p>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (!showTabs() || activeTab() === 'emoji') {\r\n  <!-- Search + tone sit together as one chrome bar: the tone swatches are hands, and on their own row\r\n       above the grid they read as pickable content rather than a setting. -->\r\n  <div class=\"fly-emoji-picker__bar\">\r\n    <input\r\n      class=\"fly-emoji-picker__search\"\r\n      type=\"text\"\r\n      #searchRef\r\n      [value]=\"query()\"\r\n      (input)=\"onQueryInput(searchRef.value)\"\r\n      [placeholder]=\"'common.label.search_emoji' | translate\"\r\n      [attr.aria-label]=\"'common.label.search_emoji' | translate\"\r\n      spellcheck=\"false\"\r\n      autocomplete=\"off\" />\r\n\r\n    @if (showToneStrip()) {\r\n      <!-- Escape-to-close listener only \u2014 every actual control inside (trigger + options) is its\r\n           own focusable button, so this wrapper itself doesn't need to be. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        class=\"fly-emoji-picker__tones\"\r\n        [flyClickOutsideEnabled]=\"toneMenuOpen()\"\r\n        (flyClickOutside)=\"toneMenuOpen.set(false)\"\r\n        (keydown.escape)=\"toneMenuOpen.set(false)\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-emoji-picker__tone-trigger\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-expanded]=\"toneMenuOpen()\"\r\n          [attr.aria-label]=\"'common.label.skin_tone' | translate\"\r\n          [flyTooltip]=\"toneLabelKey(effectiveTone()) | translate\"\r\n          (click)=\"toneMenuOpen.set(!toneMenuOpen())\">\r\n          <span class=\"fly-emoji-picker__tone-glyph\">{{ toneSwatch(effectiveTone()) }}</span>\r\n          <i class=\"pi pi-chevron-down fly-emoji-picker__tone-caret\" aria-hidden=\"true\"></i>\r\n        </button>\r\n\r\n        @if (toneMenuOpen()) {\r\n          <div\r\n            class=\"fly-emoji-picker__tone-menu\"\r\n            role=\"listbox\"\r\n            [attr.aria-label]=\"'common.label.skin_tone' | translate\">\r\n            @for (tone of tones; track tone) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"fly-emoji-picker__tone-option\"\r\n                role=\"option\"\r\n                [class.is-active]=\"effectiveTone() === tone\"\r\n                [attr.aria-selected]=\"effectiveTone() === tone\"\r\n                [flyTooltip]=\"toneLabelKey(tone) | translate\"\r\n                (click)=\"onToneOptionClick(tone)\">\r\n                {{ toneSwatch(tone) }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- ONE scrolling list; each category is a separator label over its own grid. Tabs wrapped to three\r\n       rows in a sidebar drawer and cost a click to reach any group. -->\r\n  <div\r\n    class=\"fly-emoji-picker__list\"\r\n    role=\"listbox\"\r\n    [attr.id]=\"showTabs() ? 'fly-emoji-panel-emoji' : null\"\r\n    [attr.aria-labelledby]=\"showTabs() ? 'fly-emoji-tab-emoji' : null\"\r\n    [attr.aria-multiselectable]=\"selectionMode() === 'multi'\">\r\n    @for (section of sections(); track section.id) {\r\n      <div class=\"fly-emoji-picker__section\" role=\"group\" [attr.aria-label]=\"sectionLabel(section)\">\r\n        <h4 class=\"fly-emoji-picker__heading\">{{ sectionLabel(section) }}</h4>\r\n        <div class=\"fly-emoji-picker__grid\">\r\n          @for (cell of section.cells; track cell.entry.id) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-emoji-picker__cell\"\r\n              role=\"option\"\r\n              [class.is-active]=\"cell.selected\"\r\n              [attr.aria-selected]=\"cell.selected\"\r\n              [flyTooltip]=\"cell.entry.label\"\r\n              [attr.aria-label]=\"cell.entry.label\"\r\n              (click)=\"pick(cell.entry)\">\r\n              @if (section.animated) {\r\n                <!-- Hover lives on the animated element, not the button: a template reference\r\n                     declared inside a control-flow block isn't visible to the block's parent. -->\r\n                <fly-animated-emoji\r\n                  #anim\r\n                  class=\"fly-emoji-picker__glyph\"\r\n                  [id]=\"cell.entry.id\"\r\n                  [size]=\"20\"\r\n                  (pointerenter)=\"onCellHover(anim)\"\r\n                  (pointerleave)=\"cancelHover()\" />\r\n              } @else {\r\n                <span class=\"fly-emoji-picker__glyph\">{{ cell.glyph }}</span>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @empty {\r\n      <p class=\"fly-emoji-picker__empty\">{{ 'agent.lookup.no_results' | translate }}</p>\r\n    }\r\n\r\n    <!-- Lives INSIDE the scroller, as the last row, rather than pinned below it \u2014 a static\r\n         footer row permanently ate into the vertical space actual emoji rows could use;\r\n         scrolled into view instead, it only costs space once you reach the end. -->\r\n    @if (hasMore()) {\r\n      <button type=\"button\" class=\"fly-emoji-picker__more\" (click)=\"toggleExpanded()\">\r\n        {{ (isExpanded() ? 'common.label.emoji_show_less' : 'common.label.emoji_show_more') | translate }}\r\n      </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;block-size:100%;-webkit-backdrop-filter:blur(24px) saturate(130%);backdrop-filter:blur(24px) saturate(130%);--fly-emoji-cell: 36px;--fly-emoji-cell-gap: 6px;--fly-emoji-glyph: 17px;--fly-emoji-section-gap: 14px;--fly-emoji-bar-gap: 8px;--fly-emoji-search-font: 12px;--fly-emoji-search-padding: 8px 10px;--fly-emoji-heading-display: block}:host(.fly-emoji-picker--medium){--fly-emoji-cell: 30px;--fly-emoji-cell-gap: 5px;--fly-emoji-glyph: 16px;--fly-emoji-section-gap: 10px;--fly-emoji-bar-gap: 6px;--fly-emoji-search-font: 11.5px;--fly-emoji-search-padding: 6px 9px}:host(.fly-emoji-picker--small){--fly-emoji-cell: 24px;--fly-emoji-cell-gap: 3px;--fly-emoji-glyph: 15px;--fly-emoji-section-gap: 6px;--fly-emoji-bar-gap: 5px;--fly-emoji-search-font: 11px;--fly-emoji-search-padding: 4px 7px;--fly-emoji-heading-display: none;--fly-emoji-picker-list-max: 132px}.fly-emoji-picker{display:flex;flex-direction:column;gap:var(--fly-emoji-bar-gap);box-sizing:border-box;block-size:100%;color:var(--text-color, inherit)}.fly-emoji-picker__bar{display:flex;align-items:center;gap:10px}.fly-emoji-picker__search{flex:1 1 auto;min-inline-size:0;box-sizing:border-box;padding:var(--fly-emoji-search-padding);font:inherit;font-size:var(--fly-emoji-search-font);border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:5px;background:transparent;color:var(--text-color, inherit);outline:none}.fly-emoji-picker__search:focus{border-color:var(--primary-color)}.fly-emoji-picker__list{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--fly-emoji-section-gap);min-block-size:0;max-block-size:var(--fly-emoji-picker-list-max, 320px);overflow-y:auto;padding-inline-end:4px}.fly-emoji-picker__section{display:flex;flex-direction:column;gap:6px}.fly-emoji-picker__heading{display:var(--fly-emoji-heading-display);position:sticky;inset-block-start:0;z-index:1;margin:0;padding-block:3px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-color-secondary, rgba(235, 235, 245, .55));background:var(--surface-overlay, var(--surface-card, #1c1c1e))}.fly-emoji-picker__tones{position:relative;flex:0 0 auto}.fly-emoji-picker__tone-trigger{display:flex;align-items:center;gap:2px;inline-size:auto;block-size:22px;padding:0 4px;font-size:14px;line-height:1;border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:5px;background:transparent;color:var(--text-color-secondary, rgba(235, 235, 245, .55));cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__tone-trigger:hover{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__tone-trigger:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__tone-glyph{line-height:1}.fly-emoji-picker__tone-caret{font-size:8px}.fly-emoji-picker__tone-menu{position:absolute;inset-block-start:calc(100% + 4px);inset-inline-end:0;z-index:21;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:4px;background:var(--surface-overlay-strong, var(--surface-overlay, var(--surface-card, #1c1c1e)));border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:8px;box-shadow:0 8px 24px #00000047}.fly-emoji-picker__tone-option{display:grid;place-items:center;inline-size:26px;block-size:26px;padding:0;font-size:15px;line-height:1;border:1px solid transparent;border-radius:5px;background:transparent;cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__tone-option:hover{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__tone-option:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__tone-option.is-active{border-color:var(--primary-color);background:var(--surface-hover, rgba(255, 255, 255, .1))}.fly-emoji-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--fly-emoji-cell),1fr));gap:var(--fly-emoji-cell-gap)}.fly-emoji-picker__cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-block-size:var(--fly-emoji-cell);padding:4px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-color, inherit);cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__cell:hover{background:var(--surface-hover, rgba(255, 255, 255, .08));border-color:var(--surface-border, rgba(255, 255, 255, .12))}.fly-emoji-picker__cell:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__cell.is-active{border-color:var(--primary-color);background:var(--selection-bg, rgba(0, 113, 227, .24))}.fly-emoji-picker__glyph{direction:ltr;font-size:var(--fly-emoji-glyph);line-height:1}.fly-emoji-picker__more{align-self:flex-start;padding:3px 8px;font:inherit;font-size:11px;border:none;border-radius:999px;background:transparent;color:var(--primary-color);cursor:pointer}.fly-emoji-picker__more:hover{background:var(--surface-hover, rgba(255, 255, 255, .06))}.fly-emoji-picker__more:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-emoji-picker__empty{margin:0;padding:12px 4px;text-align:center;font-size:12px;color:var(--text-color-secondary, rgba(235, 235, 245, .5))}.fly-emoji-picker__tabs{display:flex;gap:4px;border-block-end:1px solid var(--surface-border, rgba(255, 255, 255, .12))}.fly-emoji-picker__tab{appearance:none;padding:6px 12px;font:inherit;font-size:12px;border:none;border-block-end:2px solid transparent;background:transparent;color:var(--text-color-secondary, rgba(235, 235, 245, .6));cursor:pointer}.fly-emoji-picker__tab.is-active{color:var(--text-color, inherit);border-block-end-color:var(--primary-color)}.fly-emoji-picker__tab:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.fly-emoji-picker__stickers{flex:1 1 auto;min-block-size:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;padding:4px}.fly-emoji-picker__sticker{appearance:none;display:flex;align-items:center;justify-content:center;padding:4px;border:none;border-radius:10px;background:transparent;cursor:pointer}.fly-emoji-picker__sticker:hover,.fly-emoji-picker__sticker:focus-visible{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__sticker:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}\n"], dependencies: [{ kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled"], outputs: ["flyClickOutside"] }, { kind: "directive", type: FlyTooltipDirective, selector: "[flyTooltip]", inputs: ["flyTooltip", "flyTooltipPlacement", "flyTooltipDisabled", "flyTooltipDelay"] }, { kind: "component", type: FlyAnimatedEmojiComponent, selector: "fly-animated-emoji", inputs: ["id", "size", "autoplayOnFirstVisible", "playOnHover"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyEmojiPickerComponent, isStandalone: true, selector: "fly-emoji-picker", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, defaultCategory: { classPropertyName: "defaultCategory", publicName: "defaultCategory", isSignal: true, isRequired: false, transformFunction: null }, skinTones: { classPropertyName: "skinTones", publicName: "skinTones", isSignal: true, isRequired: false, transformFunction: null }, skinTone: { classPropertyName: "skinTone", publicName: "skinTone", isSignal: true, isRequired: false, transformFunction: null }, showMore: { classPropertyName: "showMore", publicName: "showMore", isSignal: true, isRequired: false, transformFunction: null }, previewCount: { classPropertyName: "previewCount", publicName: "previewCount", isSignal: true, isRequired: false, transformFunction: null }, emojiAnimation: { classPropertyName: "emojiAnimation", publicName: "emojiAnimation", isSignal: true, isRequired: false, transformFunction: null }, dismissOnOutsidePress: { classPropertyName: "dismissOnOutsidePress", publicName: "dismissOnOutsidePress", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stickerPicked: "stickerPicked", toggled: "toggled", selectionChange: "selectionChange", skinToneChange: "skinToneChange", dismissed: "dismissed" }, host: { properties: { "class.fly-emoji-picker--small": "size() === 'small'", "class.fly-emoji-picker--medium": "size() === 'medium'", "class.fly-emoji-picker--large": "size() === 'large'" } }, viewQueries: [{ propertyName: "searchRef", first: true, predicate: ["searchRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  class=\"fly-emoji-picker\"\r\n  [flyClickOutsideEnabled]=\"dismissOnOutsidePress()\"\r\n  (flyClickOutside)=\"dismissed.emit()\"\r\n  [attr.aria-label]=\"'common.label.emoji_picker' | translate\">\r\n  <!-- Stickers mode only: the emoji grid is unchanged, stickers are an ADDITIONAL surface. -->\r\n  @if (showTabs()) {\r\n    <div\r\n      class=\"fly-emoji-picker__tabs\"\r\n      role=\"tablist\"\r\n      [attr.aria-label]=\"'common.label.emoji_tabs' | translate\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-emoji-picker__tab\"\r\n        role=\"tab\"\r\n        id=\"fly-emoji-tab-emoji\"\r\n        aria-controls=\"fly-emoji-panel-emoji\"\r\n        [class.is-active]=\"activeTab() === 'emoji'\"\r\n        [attr.aria-selected]=\"activeTab() === 'emoji'\"\r\n        [attr.tabindex]=\"activeTab() === 'emoji' ? 0 : -1\"\r\n        (keydown)=\"onTabKeydown($event)\"\r\n        (click)=\"selectTab('emoji')\">\r\n        {{ 'common.label.emoji_tab_emoji' | translate }}\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-emoji-picker__tab\"\r\n        role=\"tab\"\r\n        id=\"fly-emoji-tab-stickers\"\r\n        aria-controls=\"fly-emoji-panel-stickers\"\r\n        [class.is-active]=\"activeTab() === 'stickers'\"\r\n        [attr.aria-selected]=\"activeTab() === 'stickers'\"\r\n        [attr.tabindex]=\"activeTab() === 'stickers' ? 0 : -1\"\r\n        (keydown)=\"onTabKeydown($event)\"\r\n        (click)=\"selectTab('stickers')\">\r\n        {{ 'common.label.emoji_tab_stickers' | translate }}\r\n      </button>\r\n    </div>\r\n  }\r\n\r\n  @if (showTabs() && activeTab() === 'stickers') {\r\n    <div\r\n      class=\"fly-emoji-picker__stickers\"\r\n      id=\"fly-emoji-panel-stickers\"\r\n      role=\"tabpanel\"\r\n      aria-labelledby=\"fly-emoji-tab-stickers\">\r\n      @for (entry of stickers(); track entry.id) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-emoji-picker__sticker\"\r\n          [flyTooltip]=\"entry.label\"\r\n          [attr.aria-label]=\"entry.label\"\r\n          (pointerenter)=\"onCellHover(sticker)\"\r\n          (pointerleave)=\"cancelHover()\"\r\n          (click)=\"pickSticker(entry)\">\r\n          <fly-animated-emoji #sticker [id]=\"entry.id\" [size]=\"64\" />\r\n        </button>\r\n      } @empty {\r\n        <p class=\"fly-emoji-picker__empty\">{{ 'agent.lookup.no_results' | translate }}</p>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (!showTabs() || activeTab() === 'emoji') {\r\n  <!-- Search + tone sit together as one chrome bar: the tone swatches are hands, and on their own row\r\n       above the grid they read as pickable content rather than a setting. -->\r\n  <div class=\"fly-emoji-picker__bar\">\r\n    <input\r\n      class=\"fly-emoji-picker__search\"\r\n      type=\"text\"\r\n      #searchRef\r\n      [value]=\"query()\"\r\n      (input)=\"onQueryInput(searchRef.value)\"\r\n      [placeholder]=\"'common.label.search_emoji' | translate\"\r\n      [attr.aria-label]=\"'common.label.search_emoji' | translate\"\r\n      spellcheck=\"false\"\r\n      autocomplete=\"off\" />\r\n\r\n    @if (showToneStrip()) {\r\n      <!-- Escape-to-close listener only \u2014 every actual control inside (trigger + options) is its\r\n           own focusable button, so this wrapper itself doesn't need to be. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        class=\"fly-emoji-picker__tones\"\r\n        [flyClickOutsideEnabled]=\"toneMenuOpen()\"\r\n        (flyClickOutside)=\"toneMenuOpen.set(false)\"\r\n        (keydown.escape)=\"toneMenuOpen.set(false)\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-emoji-picker__tone-trigger\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-expanded]=\"toneMenuOpen()\"\r\n          [attr.aria-label]=\"'common.label.skin_tone' | translate\"\r\n          [flyTooltip]=\"toneLabelKey(effectiveTone()) | translate\"\r\n          (click)=\"toneMenuOpen.set(!toneMenuOpen())\">\r\n          <span class=\"fly-emoji-picker__tone-glyph\">{{ toneSwatch(effectiveTone()) }}</span>\r\n          <i class=\"pi pi-chevron-down fly-emoji-picker__tone-caret\" aria-hidden=\"true\"></i>\r\n        </button>\r\n\r\n        @if (toneMenuOpen()) {\r\n          <div\r\n            class=\"fly-emoji-picker__tone-menu\"\r\n            role=\"listbox\"\r\n            [attr.aria-label]=\"'common.label.skin_tone' | translate\">\r\n            @for (tone of tones; track tone) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"fly-emoji-picker__tone-option\"\r\n                role=\"option\"\r\n                [class.is-active]=\"effectiveTone() === tone\"\r\n                [attr.aria-selected]=\"effectiveTone() === tone\"\r\n                [flyTooltip]=\"toneLabelKey(tone) | translate\"\r\n                (click)=\"onToneOptionClick(tone)\">\r\n                {{ toneSwatch(tone) }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- ONE scrolling list; each category is a separator label over its own grid. Tabs wrapped to three\r\n       rows in a sidebar drawer and cost a click to reach any group. -->\r\n  <div\r\n    class=\"fly-emoji-picker__list\"\r\n    role=\"listbox\"\r\n    [attr.id]=\"showTabs() ? 'fly-emoji-panel-emoji' : null\"\r\n    [attr.aria-labelledby]=\"showTabs() ? 'fly-emoji-tab-emoji' : null\"\r\n    [attr.aria-multiselectable]=\"selectionMode() === 'multi'\">\r\n    @for (section of sections(); track section.id) {\r\n      <div class=\"fly-emoji-picker__section\" role=\"group\" [attr.aria-label]=\"sectionLabel(section)\">\r\n        <h4 class=\"fly-emoji-picker__heading\">{{ sectionLabel(section) }}</h4>\r\n        <div class=\"fly-emoji-picker__grid\">\r\n          @for (cell of section.cells; track cell.entry.id) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-emoji-picker__cell\"\r\n              role=\"option\"\r\n              [class.is-active]=\"cell.selected\"\r\n              [attr.aria-selected]=\"cell.selected\"\r\n              [flyTooltip]=\"cell.entry.label\"\r\n              [attr.aria-label]=\"cell.entry.label\"\r\n              (click)=\"pick(cell.entry)\">\r\n              @if (section.animated) {\r\n                <!-- Hover lives on the animated element, not the button: a template reference\r\n                     declared inside a control-flow block isn't visible to the block's parent. -->\r\n                <fly-animated-emoji\r\n                  #anim\r\n                  class=\"fly-emoji-picker__glyph\"\r\n                  [id]=\"cell.entry.id\"\r\n                  [size]=\"20\"\r\n                  (pointerenter)=\"onCellHover(anim)\"\r\n                  (pointerleave)=\"cancelHover()\" />\r\n              } @else {\r\n                <span class=\"fly-emoji-picker__glyph\">{{ cell.glyph }}</span>\r\n              }\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    } @empty {\r\n      <p class=\"fly-emoji-picker__empty\">{{ 'agent.lookup.no_results' | translate }}</p>\r\n    }\r\n\r\n    <!-- Lives INSIDE the scroller, as the last row, rather than pinned below it \u2014 a static\r\n         footer row permanently ate into the vertical space actual emoji rows could use;\r\n         scrolled into view instead, it only costs space once you reach the end. -->\r\n    @if (hasMore()) {\r\n      <button type=\"button\" class=\"fly-emoji-picker__more\" (click)=\"toggleExpanded()\">\r\n        {{ (isExpanded() ? 'common.label.emoji_show_less' : 'common.label.emoji_show_more') | translate }}\r\n      </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;block-size:100%;-webkit-backdrop-filter:blur(24px) saturate(130%);backdrop-filter:blur(24px) saturate(130%);--fly-emoji-cell: 36px;--fly-emoji-cell-gap: 6px;--fly-emoji-glyph: 17px;--fly-emoji-section-gap: 14px;--fly-emoji-bar-gap: 8px;--fly-emoji-search-font: 12px;--fly-emoji-search-padding: 8px 10px;--fly-emoji-heading-display: block}:host(.fly-emoji-picker--medium){--fly-emoji-cell: 30px;--fly-emoji-cell-gap: 5px;--fly-emoji-glyph: 16px;--fly-emoji-section-gap: 10px;--fly-emoji-bar-gap: 6px;--fly-emoji-search-font: 11.5px;--fly-emoji-search-padding: 6px 9px}:host(.fly-emoji-picker--small){--fly-emoji-cell: 24px;--fly-emoji-cell-gap: 3px;--fly-emoji-glyph: 15px;--fly-emoji-section-gap: 6px;--fly-emoji-bar-gap: 5px;--fly-emoji-search-font: 11px;--fly-emoji-search-padding: 4px 7px;--fly-emoji-heading-display: none;--fly-emoji-picker-list-max: 132px}.fly-emoji-picker{display:flex;flex-direction:column;gap:var(--fly-emoji-bar-gap);box-sizing:border-box;block-size:100%;color:var(--text-color, inherit)}.fly-emoji-picker__bar{display:flex;align-items:center;gap:10px}.fly-emoji-picker__search{flex:1 1 auto;min-inline-size:0;box-sizing:border-box;padding:var(--fly-emoji-search-padding);font:inherit;font-size:var(--fly-emoji-search-font);border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:5px;background:transparent;color:var(--text-color, inherit);outline:none}.fly-emoji-picker__search:focus{border-color:var(--primary-color)}.fly-emoji-picker__list{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--fly-emoji-section-gap);min-block-size:0;max-block-size:var(--fly-emoji-picker-list-max, 320px);overflow-y:auto;padding-inline-end:4px}.fly-emoji-picker__section{display:flex;flex-direction:column;gap:6px}.fly-emoji-picker__heading{display:var(--fly-emoji-heading-display);position:sticky;inset-block-start:0;z-index:1;margin:0;padding-block:3px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-color-secondary, rgba(235, 235, 245, .55));background:var(--surface-overlay, var(--surface-card, #1c1c1e))}.fly-emoji-picker__tones{position:relative;flex:0 0 auto}.fly-emoji-picker__tone-trigger{display:flex;align-items:center;gap:2px;inline-size:auto;block-size:22px;padding:0 4px;font-size:14px;line-height:1;border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:5px;background:transparent;color:var(--text-color-secondary, rgba(235, 235, 245, .55));cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__tone-trigger:hover{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__tone-trigger:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__tone-glyph{line-height:1}.fly-emoji-picker__tone-caret{font-size:8px}.fly-emoji-picker__tone-menu{position:absolute;inset-block-start:calc(100% + 4px);inset-inline-end:0;z-index:21;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:4px;background:var(--surface-overlay-strong, var(--surface-overlay, var(--surface-card, #1c1c1e)));border:1px solid var(--surface-border, rgba(255, 255, 255, .12));border-radius:8px;box-shadow:0 8px 24px #00000047}.fly-emoji-picker__tone-option{display:grid;place-items:center;inline-size:26px;block-size:26px;padding:0;font-size:15px;line-height:1;border:1px solid transparent;border-radius:5px;background:transparent;cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__tone-option:hover{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__tone-option:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__tone-option.is-active{border-color:var(--primary-color);background:var(--surface-hover, rgba(255, 255, 255, .1))}.fly-emoji-picker__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--fly-emoji-cell),1fr));gap:var(--fly-emoji-cell-gap)}.fly-emoji-picker__cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-block-size:var(--fly-emoji-cell);padding:4px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-color, inherit);cursor:pointer;transition:background .1s ease,border-color .1s ease}.fly-emoji-picker__cell:hover{background:var(--surface-hover, rgba(255, 255, 255, .08));border-color:var(--surface-border, rgba(255, 255, 255, .12))}.fly-emoji-picker__cell:focus-visible{outline:2px solid var(--primary-color);outline-offset:-1px}.fly-emoji-picker__cell.is-active{border-color:var(--primary-color);background:var(--selection-bg, rgba(0, 113, 227, .24))}.fly-emoji-picker__glyph{direction:ltr;font-size:var(--fly-emoji-glyph);line-height:1}.fly-emoji-picker__more{align-self:flex-start;padding:3px 8px;font:inherit;font-size:11px;border:none;border-radius:999px;background:transparent;color:var(--primary-color);cursor:pointer}.fly-emoji-picker__more:hover{background:var(--surface-hover, rgba(255, 255, 255, .06))}.fly-emoji-picker__more:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px}.fly-emoji-picker__empty{margin:0;padding:12px 4px;text-align:center;font-size:12px;color:var(--text-color-secondary, rgba(235, 235, 245, .5))}.fly-emoji-picker__tabs{display:flex;gap:4px;border-block-end:1px solid var(--surface-border, rgba(255, 255, 255, .12))}.fly-emoji-picker__tab{appearance:none;padding:6px 12px;font:inherit;font-size:12px;border:none;border-block-end:2px solid transparent;background:transparent;color:var(--text-color-secondary, rgba(235, 235, 245, .6));cursor:pointer}.fly-emoji-picker__tab.is-active{color:var(--text-color, inherit);border-block-end-color:var(--primary-color)}.fly-emoji-picker__tab:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}.fly-emoji-picker__stickers{flex:1 1 auto;min-block-size:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;padding:4px}.fly-emoji-picker__sticker{appearance:none;display:flex;align-items:center;justify-content:center;padding:4px;border:none;border-radius:10px;background:transparent;cursor:pointer}.fly-emoji-picker__sticker:hover,.fly-emoji-picker__sticker:focus-visible{background:var(--surface-hover, rgba(255, 255, 255, .08))}.fly-emoji-picker__sticker:focus-visible{outline:2px solid var(--primary-color);outline-offset:-2px}\n"], dependencies: [{ kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled"], outputs: ["flyClickOutside"] }, { kind: "directive", type: FlyTooltipDirective, selector: "[flyTooltip], [data-tooltip]", inputs: ["flyTooltip", "flyTooltipPlacement", "flyTooltipDisabled", "flyTooltipDelay"] }, { kind: "component", type: FlyAnimatedEmojiComponent, selector: "fly-animated-emoji", inputs: ["id", "size", "autoplayOnFirstVisible", "playOnHover"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyEmojiPickerComponent, decorators: [{
             type: Component,
@@ -8745,11 +9141,11 @@ class FlyBlockUiComponent {
         return k && k.length > 0 ? k : 'common.loading';
     }, ...(ngDevMode ? [{ debugName: "resolvedMessageKey" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBlockUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBlockUiComponent, isStandalone: true, selector: "fly-block-ui", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\n  <div\n    class=\"fly-block-ui\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\n    <div class=\"fly-block-ui__card\">\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyBlockUiComponent, isStandalone: true, selector: "fly-block-ui", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (active()) {\r\n  <div\r\n    class=\"fly-block-ui\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\r\n    <div class=\"fly-block-ui__card\">\r\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\r\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyBlockUiComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-block-ui', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\n  <div\n    class=\"fly-block-ui\"\n    role=\"status\"\n    aria-live=\"polite\"\n    aria-busy=\"true\"\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\n    <div class=\"fly-block-ui__card\">\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\n    </div>\n  </div>\n}\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"] }]
+            args: [{ selector: 'fly-block-ui', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\r\n  <div\r\n    class=\"fly-block-ui\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\r\n    <div class=\"fly-block-ui__card\">\r\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\r\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"] }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], messageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKey", required: false }] }] } });
 
 /**
@@ -9528,11 +9924,11 @@ class FlyDrawerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDrawerComponent, isStandalone: true, selector: "fly-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, dismissOnScrim: { classPropertyName: "dismissOnScrim", publicName: "dismissOnScrim", isSignal: true, isRequired: false, transformFunction: null }, dismissOnEscape: { classPropertyName: "dismissOnEscape", publicName: "dismissOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bodyPadding: { classPropertyName: "bodyPadding", publicName: "bodyPadding", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.fly-drawer--fixed": "position() === 'fixed'" } }, ngImport: i0, template: "<!--\r\n  Windowed overlay drawer. Renders only while mounted (open or sliding out).\r\n  Scrim + panel are absolutely positioned within the nearest positioned\r\n  ancestor (the consuming app root must be position:relative).\r\n-->\r\n@if (rendered()) {\r\n  <div\r\n    class=\"fly-drawer__scrim\"\r\n    [class.fly-drawer__scrim--leaving]=\"leaving()\"\r\n    (click)=\"onScrimClick()\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n\r\n  <div\r\n    class=\"fly-drawer__panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    [class.fly-drawer__panel--leaving]=\"leaving()\"\r\n    [style.--fly-drawer-width]=\"width()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"labelledBy()\"\r\n    [attr.aria-label]=\"!labelledBy() && ariaLabel() ? (ariaLabel()! | translate) : null\"\r\n    cdkTrapFocus\r\n    (animationend)=\"onPanelAnimationEnd($event.animationName)\"\r\n  >\r\n    <!-- Header: custom slot, else heading + close \u2715. -->\r\n    <ng-content select=\"[flyDrawerHeader]\">\r\n      @if (heading()) {\r\n        <header class=\"fly-drawer__header\">\r\n          <h2 class=\"fly-drawer__title\" [id]=\"headingId\">{{ heading()! | translate }}</h2>\r\n          @if (!hideCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-drawer__close\"\r\n              (click)=\"requestClose()\"\r\n              [attr.aria-label]=\"'common.action.close' | translate\"\r\n            >\r\n              <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n    </ng-content>\r\n\r\n    <div class=\"fly-drawer__body\" [ngClass]=\"'fly-drawer__body--pad-' + bodyPadding()\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-content select=\"[flyDrawerFooter]\"></ng-content>\r\n  </div>\r\n}\r\n", styles: [":host{position:absolute;inset:0;z-index:60;pointer-events:none}:host(.fly-drawer--fixed){position:fixed;block-size:100dvh;z-index:var(--z-overlay, 100)}.fly-drawer__scrim{position:absolute;inset:0;pointer-events:auto;background:#00000061;opacity:1;animation:fly-drawer-scrim-in .24s ease both}.fly-drawer__scrim--leaving{animation-name:fly-drawer-scrim-out;animation-duration:.2s}.fly-drawer__panel{--fly-drawer-offset: 100%;position:absolute;inset-block:0;inset-inline-end:0;pointer-events:auto;display:flex;flex-direction:column;min-block-size:0;inline-size:var(--fly-drawer-width, min(480px, 100%));max-inline-size:100%;background:var(--surface-overlay, #fff);-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);border-inline-start:1px solid var(--surface-border, rgba(0, 0, 0, .08));box-shadow:-16px 0 48px #00000038;animation:fly-drawer-in .28s cubic-bezier(.32,.72,0,1) both;will-change:transform}.fly-drawer__panel--sm{inline-size:var(--fly-drawer-width, min(360px, 100%))}.fly-drawer__panel--md{inline-size:var(--fly-drawer-width, min(480px, 100%))}.fly-drawer__panel--lg{inline-size:var(--fly-drawer-width, min(640px, 100%))}.fly-drawer__panel--xl{inline-size:var(--fly-drawer-width, min(960px, 94%))}.fly-drawer__panel--side-start{--fly-drawer-offset: -100%;inset-inline:0 auto;border-inline-start:none;border-inline-end:1px solid var(--surface-border, rgba(0, 0, 0, .08));box-shadow:16px 0 48px #00000038}.fly-drawer__panel--leaving{animation-name:fly-drawer-out;animation-duration:.24s;animation-timing-function:cubic-bezier(.4,0,1,1)}@keyframes fly-drawer-in{0%{transform:translate(var(--fly-drawer-offset))}to{transform:translate(0)}}@keyframes fly-drawer-out{0%{transform:translate(0)}to{transform:translate(var(--fly-drawer-offset))}}@keyframes fly-drawer-scrim-in{0%{opacity:0}to{opacity:1}}@keyframes fly-drawer-scrim-out{0%{opacity:1}to{opacity:0}}:host-context([dir=rtl]) .fly-drawer__panel{--fly-drawer-offset: -100%;box-shadow:16px 0 48px #00000038;border-inline-start:1px solid var(--surface-border, rgba(0, 0, 0, .08))}:host-context([dir=rtl]) .fly-drawer__panel--side-start{--fly-drawer-offset: 100%}.fly-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-block-end:1px solid var(--surface-border, rgba(0, 0, 0, .08));flex:0 0 auto}.fly-drawer__title{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1d1d1f)}.fly-drawer__close{display:inline-flex;align-items:center;justify-content:center;inline-size:30px;block-size:30px;border:none;border-radius:8px;background:transparent;color:var(--label-secondary, #6e6e73);cursor:pointer}.fly-drawer__close:hover{background:#0000000f}.fly-drawer__body{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding:var(--fly-drawer-body-padding, 16px 18px)}.fly-drawer__body--pad-none{--fly-drawer-body-padding: 0}.fly-drawer__body--pad-sm{--fly-drawer-body-padding: 12px 14px}.fly-drawer__body--pad-md{--fly-drawer-body-padding: 16px 18px}.fly-drawer__body--pad-lg{--fly-drawer-body-padding: 20px 22px}:host ::ng-deep [flyDrawerFooter]{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-block-start:1px solid var(--surface-border, rgba(0, 0, 0, .08))}:host-context(html.dark-theme) .fly-drawer__close:hover{background:#ffffff14}@media(prefers-reduced-motion:reduce){.fly-drawer__scrim,.fly-drawer__panel,.fly-drawer__scrim--leaving,.fly-drawer__panel--leaving{animation:none}}@media(forced-colors:active){.fly-drawer__panel{border:1px solid CanvasText}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDrawerComponent, isStandalone: true, selector: "fly-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, dismissOnScrim: { classPropertyName: "dismissOnScrim", publicName: "dismissOnScrim", isSignal: true, isRequired: false, transformFunction: null }, dismissOnEscape: { classPropertyName: "dismissOnEscape", publicName: "dismissOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null }, bodyPadding: { classPropertyName: "bodyPadding", publicName: "bodyPadding", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.fly-drawer--fixed": "position() === 'fixed'" } }, ngImport: i0, template: "<!--\r\n  Windowed overlay drawer. Renders only while mounted (open or sliding out).\r\n  Scrim + panel are absolutely positioned within the nearest positioned\r\n  ancestor (the consuming app root must be position:relative).\r\n-->\r\n@if (rendered()) {\r\n  <div\r\n    class=\"fly-drawer__scrim\"\r\n    [class.fly-drawer__scrim--leaving]=\"leaving()\"\r\n    (click)=\"onScrimClick()\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n\r\n  <div\r\n    class=\"fly-drawer__panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    [class.fly-drawer__panel--leaving]=\"leaving()\"\r\n    [style.--fly-drawer-width]=\"width()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"labelledBy()\"\r\n    [attr.aria-label]=\"!labelledBy() && ariaLabel() ? (ariaLabel()! | translate) : null\"\r\n    cdkTrapFocus\r\n    (animationend)=\"onPanelAnimationEnd($event.animationName)\"\r\n  >\r\n    <!-- Header: custom slot, else heading + close \u2715. -->\r\n    <ng-content select=\"[flyDrawerHeader]\">\r\n      @if (heading()) {\r\n        <header class=\"fly-drawer__header\">\r\n          <h2 class=\"fly-drawer__title\" [id]=\"headingId\">{{ heading()! | translate }}</h2>\r\n          @if (!hideCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-drawer__close\"\r\n              (click)=\"requestClose()\"\r\n              [attr.aria-label]=\"'common.action.close' | translate\"\r\n            >\r\n              <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n    </ng-content>\r\n\r\n    <div class=\"fly-drawer__body\" [ngClass]=\"'fly-drawer__body--pad-' + bodyPadding()\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-content select=\"[flyDrawerFooter]\"></ng-content>\r\n  </div>\r\n}\r\n", styles: [":host{position:absolute;inset:0;z-index:60;pointer-events:none}:host(.fly-drawer--fixed){position:fixed;block-size:100dvh;z-index:var(--z-overlay, 100)}.fly-drawer__scrim{position:absolute;inset:0;pointer-events:auto;background:#00000061;opacity:1;animation:fly-drawer-scrim-in .24s ease both}.fly-drawer__scrim--leaving{animation-name:fly-drawer-scrim-out;animation-duration:.2s}.fly-drawer__panel{--fly-drawer-offset: 100%;position:absolute;inset-block:0;inset-inline-end:0;pointer-events:auto;display:flex;flex-direction:column;min-block-size:0;inline-size:var(--fly-drawer-width, min(480px, 100%));max-inline-size:100%;background:var(--surface-overlay, #fff);-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);border-inline-start:1px solid var(--surface-border, rgba(0, 0, 0, .08));box-shadow:-16px 0 48px #00000038;animation:fly-drawer-in .28s cubic-bezier(.32,.72,0,1) both;will-change:transform}.fly-drawer__panel--sm{inline-size:var(--fly-drawer-width, min(360px, 100%))}.fly-drawer__panel--md{inline-size:var(--fly-drawer-width, min(480px, 100%))}.fly-drawer__panel--lg{inline-size:var(--fly-drawer-width, min(640px, 100%))}.fly-drawer__panel--xl{inline-size:var(--fly-drawer-width, min(960px, 94%))}.fly-drawer__panel--side-start{--fly-drawer-offset: -100%;inset-inline:0 auto;border-inline-start:none;border-inline-end:1px solid var(--surface-border, rgba(0, 0, 0, .08));box-shadow:16px 0 48px #00000038}.fly-drawer__panel--leaving{animation-name:fly-drawer-out;animation-duration:.24s;animation-timing-function:cubic-bezier(.4,0,1,1)}@keyframes fly-drawer-in{0%{transform:translate(var(--fly-drawer-offset))}to{transform:translate(0)}}@keyframes fly-drawer-out{0%{transform:translate(0)}to{transform:translate(var(--fly-drawer-offset))}}@keyframes fly-drawer-scrim-in{0%{opacity:0}to{opacity:1}}@keyframes fly-drawer-scrim-out{0%{opacity:1}to{opacity:0}}:host-context([dir=rtl]) .fly-drawer__panel{--fly-drawer-offset: -100%;box-shadow:16px 0 48px #00000038;border-inline-start:1px solid var(--surface-border, rgba(0, 0, 0, .08))}:host-context([dir=rtl]) .fly-drawer__panel--side-start{--fly-drawer-offset: 100%}.fly-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-block-end:1px solid var(--surface-border, rgba(0, 0, 0, .08));flex:0 0 auto}.fly-drawer__title{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1d1d1f)}.fly-drawer__close{display:inline-flex;align-items:center;justify-content:center;inline-size:30px;block-size:30px;border:none;border-radius:8px;background:transparent;color:var(--label-secondary, #6e6e73);cursor:pointer}.fly-drawer__close:hover{background:#0000000f}.fly-drawer__body{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding:var(--fly-drawer-body-padding, 16px 18px);container-type:inline-size}.fly-drawer__body--pad-none{--fly-drawer-body-padding: 0}.fly-drawer__body--pad-sm{--fly-drawer-body-padding: 12px 14px}.fly-drawer__body--pad-md{--fly-drawer-body-padding: 16px 18px}.fly-drawer__body--pad-lg{--fly-drawer-body-padding: 20px 22px}:host ::ng-deep [flyDrawerFooter]{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-block-start:1px solid var(--surface-border, rgba(0, 0, 0, .08))}:host-context(html.dark-theme) .fly-drawer__close:hover{background:#ffffff14}@media(prefers-reduced-motion:reduce){.fly-drawer__scrim,.fly-drawer__panel,.fly-drawer__scrim--leaving,.fly-drawer__panel--leaving{animation:none}}@media(forced-colors:active){.fly-drawer__panel{border:1px solid CanvasText}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-drawer', standalone: true, imports: [CommonModule, A11yModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.fly-drawer--fixed]': "position() === 'fixed'" }, template: "<!--\r\n  Windowed overlay drawer. Renders only while mounted (open or sliding out).\r\n  Scrim + panel are absolutely positioned within the nearest positioned\r\n  ancestor (the consuming app root must be position:relative).\r\n-->\r\n@if (rendered()) {\r\n  <div\r\n    class=\"fly-drawer__scrim\"\r\n    [class.fly-drawer__scrim--leaving]=\"leaving()\"\r\n    (click)=\"onScrimClick()\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n\r\n  <div\r\n    class=\"fly-drawer__panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    [class.fly-drawer__panel--leaving]=\"leaving()\"\r\n    [style.--fly-drawer-width]=\"width()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"labelledBy()\"\r\n    [attr.aria-label]=\"!labelledBy() && ariaLabel() ? (ariaLabel()! | translate) : null\"\r\n    cdkTrapFocus\r\n    (animationend)=\"onPanelAnimationEnd($event.animationName)\"\r\n  >\r\n    <!-- Header: custom slot, else heading + close \u2715. -->\r\n    <ng-content select=\"[flyDrawerHeader]\">\r\n      @if (heading()) {\r\n        <header class=\"fly-drawer__header\">\r\n          <h2 class=\"fly-drawer__title\" [id]=\"headingId\">{{ heading()! | translate }}</h2>\r\n          @if (!hideCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-drawer__close\"\r\n              (click)=\"requestClose()\"\r\n              [attr.aria-label]=\"'common.action.close' | translate\"\r\n            >\r\n              <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n    </ng-content>\r\n\r\n    <div class=\"fly-drawer__body\" [ngClass]=\"'fly-drawer__body--pad-' + bodyPadding()\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-content select=\"[flyDrawerFooter]\"></ng-content>\r\n  </div>\r\n}\r\n", styles: [":host{position:absolute;inset:0;z-index:60;pointer-events:none}:host(.fly-drawer--fixed){position:fixed;block-size:100dvh;z-index:var(--z-overlay, 100)}.fly-drawer__scrim{position:absolute;inset:0;pointer-events:auto;background:#00000061;opacity:1;animation:fly-drawer-scrim-in .24s ease both}.fly-drawer__scrim--leaving{animation-name:fly-drawer-scrim-out;animation-duration:.2s}.fly-drawer__panel{--fly-drawer-offset: 100%;position:absolute;inset-block:0;inset-inline-end:0;pointer-events:auto;display:flex;flex-direction:column;min-block-size:0;inline-size:var(--fly-drawer-width, min(480px, 100%));max-inline-size:100%;background:var(--surface-overlay, #fff);-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);border-inline-start:1px solid var(--surface-border, rgba(0, 0, 0, .08));box-shadow:-16px 0 48px #00000038;animation:fly-drawer-in .28s cubic-bezier(.32,.72,0,1) both;will-change:transform}.fly-drawer__panel--sm{inline-size:var(--fly-drawer-width, min(360px, 100%))}.fly-drawer__panel--md{inline-size:var(--fly-drawer-width, min(480px, 100%))}.fly-drawer__panel--lg{inline-size:var(--fly-drawer-width, min(640px, 100%))}.fly-drawer__panel--xl{inline-size:var(--fly-drawer-width, min(960px, 94%))}.fly-drawer__panel--side-start{--fly-drawer-offset: -100%;inset-inline:0 auto;border-inline-start:none;border-inline-end:1px solid var(--surface-border, rgba(0, 0, 0, .08));box-shadow:16px 0 48px #00000038}.fly-drawer__panel--leaving{animation-name:fly-drawer-out;animation-duration:.24s;animation-timing-function:cubic-bezier(.4,0,1,1)}@keyframes fly-drawer-in{0%{transform:translate(var(--fly-drawer-offset))}to{transform:translate(0)}}@keyframes fly-drawer-out{0%{transform:translate(0)}to{transform:translate(var(--fly-drawer-offset))}}@keyframes fly-drawer-scrim-in{0%{opacity:0}to{opacity:1}}@keyframes fly-drawer-scrim-out{0%{opacity:1}to{opacity:0}}:host-context([dir=rtl]) .fly-drawer__panel{--fly-drawer-offset: -100%;box-shadow:16px 0 48px #00000038;border-inline-start:1px solid var(--surface-border, rgba(0, 0, 0, .08))}:host-context([dir=rtl]) .fly-drawer__panel--side-start{--fly-drawer-offset: 100%}.fly-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-block-end:1px solid var(--surface-border, rgba(0, 0, 0, .08));flex:0 0 auto}.fly-drawer__title{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1d1d1f)}.fly-drawer__close{display:inline-flex;align-items:center;justify-content:center;inline-size:30px;block-size:30px;border:none;border-radius:8px;background:transparent;color:var(--label-secondary, #6e6e73);cursor:pointer}.fly-drawer__close:hover{background:#0000000f}.fly-drawer__body{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding:var(--fly-drawer-body-padding, 16px 18px)}.fly-drawer__body--pad-none{--fly-drawer-body-padding: 0}.fly-drawer__body--pad-sm{--fly-drawer-body-padding: 12px 14px}.fly-drawer__body--pad-md{--fly-drawer-body-padding: 16px 18px}.fly-drawer__body--pad-lg{--fly-drawer-body-padding: 20px 22px}:host ::ng-deep [flyDrawerFooter]{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-block-start:1px solid var(--surface-border, rgba(0, 0, 0, .08))}:host-context(html.dark-theme) .fly-drawer__close:hover{background:#ffffff14}@media(prefers-reduced-motion:reduce){.fly-drawer__scrim,.fly-drawer__panel,.fly-drawer__scrim--leaving,.fly-drawer__panel--leaving{animation:none}}@media(forced-colors:active){.fly-drawer__panel{border:1px solid CanvasText}}\n"] }]
+            args: [{ selector: 'fly-drawer', standalone: true, imports: [CommonModule, A11yModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.fly-drawer--fixed]': "position() === 'fixed'" }, template: "<!--\r\n  Windowed overlay drawer. Renders only while mounted (open or sliding out).\r\n  Scrim + panel are absolutely positioned within the nearest positioned\r\n  ancestor (the consuming app root must be position:relative).\r\n-->\r\n@if (rendered()) {\r\n  <div\r\n    class=\"fly-drawer__scrim\"\r\n    [class.fly-drawer__scrim--leaving]=\"leaving()\"\r\n    (click)=\"onScrimClick()\"\r\n    aria-hidden=\"true\"\r\n  ></div>\r\n\r\n  <div\r\n    class=\"fly-drawer__panel\"\r\n    [ngClass]=\"panelClass()\"\r\n    [class.fly-drawer__panel--leaving]=\"leaving()\"\r\n    [style.--fly-drawer-width]=\"width()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"labelledBy()\"\r\n    [attr.aria-label]=\"!labelledBy() && ariaLabel() ? (ariaLabel()! | translate) : null\"\r\n    cdkTrapFocus\r\n    (animationend)=\"onPanelAnimationEnd($event.animationName)\"\r\n  >\r\n    <!-- Header: custom slot, else heading + close \u2715. -->\r\n    <ng-content select=\"[flyDrawerHeader]\">\r\n      @if (heading()) {\r\n        <header class=\"fly-drawer__header\">\r\n          <h2 class=\"fly-drawer__title\" [id]=\"headingId\">{{ heading()! | translate }}</h2>\r\n          @if (!hideCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"fly-drawer__close\"\r\n              (click)=\"requestClose()\"\r\n              [attr.aria-label]=\"'common.action.close' | translate\"\r\n            >\r\n              <i class=\"pi pi-times\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          }\r\n        </header>\r\n      }\r\n    </ng-content>\r\n\r\n    <div class=\"fly-drawer__body\" [ngClass]=\"'fly-drawer__body--pad-' + bodyPadding()\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-content select=\"[flyDrawerFooter]\"></ng-content>\r\n  </div>\r\n}\r\n", styles: [":host{position:absolute;inset:0;z-index:60;pointer-events:none}:host(.fly-drawer--fixed){position:fixed;block-size:100dvh;z-index:var(--z-overlay, 100)}.fly-drawer__scrim{position:absolute;inset:0;pointer-events:auto;background:#00000061;opacity:1;animation:fly-drawer-scrim-in .24s ease both}.fly-drawer__scrim--leaving{animation-name:fly-drawer-scrim-out;animation-duration:.2s}.fly-drawer__panel{--fly-drawer-offset: 100%;position:absolute;inset-block:0;inset-inline-end:0;pointer-events:auto;display:flex;flex-direction:column;min-block-size:0;inline-size:var(--fly-drawer-width, min(480px, 100%));max-inline-size:100%;background:var(--surface-overlay, #fff);-webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);border-inline-start:1px solid var(--surface-border, rgba(0, 0, 0, .08));box-shadow:-16px 0 48px #00000038;animation:fly-drawer-in .28s cubic-bezier(.32,.72,0,1) both;will-change:transform}.fly-drawer__panel--sm{inline-size:var(--fly-drawer-width, min(360px, 100%))}.fly-drawer__panel--md{inline-size:var(--fly-drawer-width, min(480px, 100%))}.fly-drawer__panel--lg{inline-size:var(--fly-drawer-width, min(640px, 100%))}.fly-drawer__panel--xl{inline-size:var(--fly-drawer-width, min(960px, 94%))}.fly-drawer__panel--side-start{--fly-drawer-offset: -100%;inset-inline:0 auto;border-inline-start:none;border-inline-end:1px solid var(--surface-border, rgba(0, 0, 0, .08));box-shadow:16px 0 48px #00000038}.fly-drawer__panel--leaving{animation-name:fly-drawer-out;animation-duration:.24s;animation-timing-function:cubic-bezier(.4,0,1,1)}@keyframes fly-drawer-in{0%{transform:translate(var(--fly-drawer-offset))}to{transform:translate(0)}}@keyframes fly-drawer-out{0%{transform:translate(0)}to{transform:translate(var(--fly-drawer-offset))}}@keyframes fly-drawer-scrim-in{0%{opacity:0}to{opacity:1}}@keyframes fly-drawer-scrim-out{0%{opacity:1}to{opacity:0}}:host-context([dir=rtl]) .fly-drawer__panel{--fly-drawer-offset: -100%;box-shadow:16px 0 48px #00000038;border-inline-start:1px solid var(--surface-border, rgba(0, 0, 0, .08))}:host-context([dir=rtl]) .fly-drawer__panel--side-start{--fly-drawer-offset: 100%}.fly-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-block-end:1px solid var(--surface-border, rgba(0, 0, 0, .08));flex:0 0 auto}.fly-drawer__title{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1d1d1f)}.fly-drawer__close{display:inline-flex;align-items:center;justify-content:center;inline-size:30px;block-size:30px;border:none;border-radius:8px;background:transparent;color:var(--label-secondary, #6e6e73);cursor:pointer}.fly-drawer__close:hover{background:#0000000f}.fly-drawer__body{flex:1 1 auto;min-block-size:0;overflow-y:auto;padding:var(--fly-drawer-body-padding, 16px 18px);container-type:inline-size}.fly-drawer__body--pad-none{--fly-drawer-body-padding: 0}.fly-drawer__body--pad-sm{--fly-drawer-body-padding: 12px 14px}.fly-drawer__body--pad-md{--fly-drawer-body-padding: 16px 18px}.fly-drawer__body--pad-lg{--fly-drawer-body-padding: 20px 22px}:host ::ng-deep [flyDrawerFooter]{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 18px;border-block-start:1px solid var(--surface-border, rgba(0, 0, 0, .08))}:host-context(html.dark-theme) .fly-drawer__close:hover{background:#ffffff14}@media(prefers-reduced-motion:reduce){.fly-drawer__scrim,.fly-drawer__panel,.fly-drawer__scrim--leaving,.fly-drawer__panel--leaving{animation:none}}@media(forced-colors:active){.fly-drawer__panel{border:1px solid CanvasText}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], dismissOnScrim: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissOnScrim", required: false }] }], dismissOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hideCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCloseButton", required: false }] }], bodyPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyPadding", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -12894,6 +13290,13 @@ const ROOT_DRAFT_KEY = '__root__';
  * eager load-all) — the explicit fix for the legacy unpaged-children scale bug
  * — and each level pages independently via `loadMore`.
  *
+ * The `comments` core app owns no user profile data, so `FlyComment` carries
+ * `authorUserId` and an OPTIONAL `authorDisplayName`. Rather than make every host
+ * map names in itself (and render GUIDs when it forgets), bind
+ * `[resolveDisplayName]` to `FlyUserDirectoryService.label` — see
+ * {@link FlyCommentThreadComponent.resolveDisplayName}. Still transport-agnostic:
+ * the resolver is a function the host hands over, not a call this component makes.
+ *
  * i18n is self-sufficient through the `comment.*` keys in `DS_BASELINE_LOCALES`
  * (en/ar/fr/ur), overridable by any consumer key of the same name. RTL works via
  * logical CSS. Styling uses DS theme tokens (`--surface-*`, `--label-*`,
@@ -12906,6 +13309,7 @@ const ROOT_DRAFT_KEY = '__root__';
  *   [rootPage]="rootPage()"
  *   [repliesByParent]="repliesByParent()"
  *   [currentUserId]="me.id"
+ *   [resolveDisplayName]="directory.label"
  *   [canModerateThread]="canModerate()"
  *   [isLocked]="thread().isLocked"
  *   (loadReplies)="onLoadReplies($event)"
@@ -12942,6 +13346,23 @@ class FlyCommentThreadComponent {
     /** Thread-scoped moderator permission (lock/unlock). Additive — distinct from the
      *  per-comment `canModerate` flag, which gates delete-any on that specific comment. */
     canModerateThread = input(false, ...(ngDevMode ? [{ debugName: "canModerateThread" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional id→name lookup, for the common case where the backend DTO carries only
+     * `authorUserId`. The `comments` core app owns no user profile data, so without
+     * this every host had to map display names into `authorDisplayName` itself — and
+     * a host that forgot rendered raw GUIDs at the reader.
+     *
+     * Bind `FlyUserDirectoryService.label` (a signal-backed read-through cache that
+     * resolves on demand and batches). Because the component reads it during render,
+     * the name appears by itself once the lookup lands — the host keeps a plain
+     * page signal, with no `computed` derivation and no priming.
+     *
+     * The component still never calls an API: this is a function the HOST supplies,
+     * exactly like `fly-entity-lookup`'s `LOOKUP_APP_NAME_RESOLVER`. Absent (or
+     * returning `null`), rendering falls back as before. See {@link authorLabel} for
+     * the resolution order.
+     */
+    resolveDisplayName = input(null, ...(ngDevMode ? [{ debugName: "resolveDisplayName" }] : /* istanbul ignore next */ []));
     // ── Outputs ──────────────────────────────────────────────────────────────────
     /** Expand a collapsed reply subtree — always page 1 of that parent. */
     loadReplies = output();
@@ -13002,6 +13423,25 @@ class FlyCommentThreadComponent {
         const me = this.currentUserId();
         return !!me && me === comment.authorUserId;
     }
+    /**
+     * The name to render for a comment's author. Resolution order:
+     * explicit `authorDisplayName` (a host that already knows the name, or a
+     * backend that returns one, always wins) → {@link resolveDisplayName} →
+     * the raw `authorUserId`.
+     *
+     * The raw id remains the last resort rather than a placeholder: it is stable,
+     * unique, and lets a reader correlate two comments by the same author even
+     * when the directory is unreachable.
+     */
+    authorLabel(comment) {
+        if (comment.authorDisplayName)
+            return comment.authorDisplayName;
+        return this.resolveDisplayName()?.(comment.authorUserId) || comment.authorUserId;
+    }
+    /** First character of {@link authorLabel}, for the avatar-initials fallback. */
+    authorInitial(comment) {
+        return this.authorLabel(comment).charAt(0);
+    }
     canReport(comment) {
         return !this.isReadonly() && !comment.isDeleted && !this.isOwn(comment) && !!this.currentUserId();
     }
@@ -13172,16 +13612,16 @@ class FlyCommentThreadComponent {
         this._drafts.set(map);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyCommentThreadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyCommentThreadComponent, isStandalone: true, selector: "fly-comment-thread", inputs: { rootPage: { classPropertyName: "rootPage", publicName: "rootPage", isSignal: true, isRequired: true, transformFunction: null }, repliesByParent: { classPropertyName: "repliesByParent", publicName: "repliesByParent", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, canModerateThread: { classPropertyName: "canModerateThread", publicName: "canModerateThread", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadReplies: "loadReplies", loadMore: "loadMore", submit: "submit", edit: "edit", delete: "delete", report: "report", lockToggle: "lockToggle", sortChange: "sortChange" }, host: { properties: { "class.fly-comment-thread--locked": "isLocked()", "class.fly-comment-thread--readonly": "isReadonly()" }, classAttribute: "fly-comment-thread" }, ngImport: i0, template: "<div class=\"fly-comment-thread__body\">\r\n  <!-- \u2500\u2500 Header: count + sort + lock toggle \u2500\u2500 -->\r\n  <header class=\"fly-comment-thread__header\">\r\n    <span class=\"fly-comment-thread__count\">\r\n      {{ 'comment.count' | translate: { n: rootPage().total } }}\r\n    </span>\r\n\r\n    <div class=\"fly-comment-thread__header-actions\">\r\n      <div class=\"fly-comment-thread__sort\" role=\"group\" [attr.aria-label]=\"'comment.sort_label' | translate\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-comment-thread__sort-btn\"\r\n          [class.fly-comment-thread__sort-btn--active]=\"sort() === 'newest'\"\r\n          (click)=\"onSortPick('newest')\">\r\n          {{ 'comment.sort_newest' | translate }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-comment-thread__sort-btn\"\r\n          [class.fly-comment-thread__sort-btn--active]=\"sort() === 'oldest'\"\r\n          (click)=\"onSortPick('oldest')\">\r\n          {{ 'comment.sort_oldest' | translate }}\r\n        </button>\r\n      </div>\r\n\r\n      @if (canModerateThread() && !isReadonly()) {\r\n        <button type=\"button\" class=\"fly-comment-thread__lock-btn\" (click)=\"toggleLock()\">\r\n          {{ (isLocked() ? 'comment.unlock' : 'comment.lock') | translate }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  @if (isLocked()) {\r\n    <p class=\"fly-comment-thread__locked-notice\">{{ 'comment.locked_notice' | translate }}</p>\r\n  }\r\n\r\n  <!-- \u2500\u2500 Root composer \u2500\u2500 -->\r\n  @if (canReply()) {\r\n    <div class=\"fly-comment-thread__composer\">\r\n      <textarea\r\n        class=\"fly-comment-thread__textarea\"\r\n        rows=\"3\"\r\n        [id]=\"fieldId('root-composer')\"\r\n        [attr.aria-label]=\"'comment.composer_placeholder' | translate\"\r\n        [placeholder]=\"'comment.composer_placeholder' | translate\"\r\n        [ngModel]=\"rootDraft()\"\r\n        (ngModelChange)=\"onRootDraftChange($event)\"></textarea>\r\n      <div class=\"fly-comment-thread__composer-actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-comment-thread__submit-btn\"\r\n          [disabled]=\"!rootDraft().trim()\"\r\n          (click)=\"submitRoot()\">\r\n          {{ 'comment.post' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- \u2500\u2500 Root comments \u2500\u2500 -->\r\n  @if (rootPage().items.length === 0) {\r\n    <p class=\"fly-comment-thread__empty\">{{ 'comment.empty' | translate }}</p>\r\n  } @else {\r\n    <ul class=\"fly-comment-thread__list\" role=\"list\">\r\n      @for (c of rootPage().items; track c.id) {\r\n        <ng-container [ngTemplateOutlet]=\"commentNode\" [ngTemplateOutletContext]=\"{ $implicit: c }\"></ng-container>\r\n      }\r\n    </ul>\r\n\r\n    @if (rootPage().hasMore) {\r\n      <button type=\"button\" class=\"fly-comment-thread__load-more\" (click)=\"loadMoreRoot()\">\r\n        {{ 'comment.load_more' | translate }}\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 Recursive comment node template \u2500\u2500 -->\r\n<ng-template #commentNode let-comment>\r\n  <li class=\"fly-comment-thread__item\" [attr.data-depth]=\"comment.depth\">\r\n    <div class=\"fly-comment-thread__row\">\r\n      <div class=\"fly-comment-thread__avatar\" aria-hidden=\"true\">\r\n        @if (comment.authorAvatarUrl) {\r\n          <img [src]=\"comment.authorAvatarUrl\" alt=\"\" />\r\n        } @else {\r\n          <span class=\"fly-comment-thread__avatar-fallback\">{{ (comment.authorDisplayName || comment.authorUserId)[0] }}</span>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fly-comment-thread__content\">\r\n        <div class=\"fly-comment-thread__meta\">\r\n          <span class=\"fly-comment-thread__author\">{{ comment.authorDisplayName || comment.authorUserId }}</span>\r\n          <span class=\"fly-comment-thread__timestamp\">{{ formatDate(comment.createdAt) }}</span>\r\n          @if (comment.isEdited && !comment.isDeleted) {\r\n            <span class=\"fly-comment-thread__edited\">{{ 'comment.edited' | translate }}</span>\r\n          }\r\n        </div>\r\n\r\n        @if (comment.isDeleted) {\r\n          <p class=\"fly-comment-thread__tombstone\">{{ 'comment.deleted' | translate }}</p>\r\n        } @else if (editingId() === comment.id) {\r\n          <div class=\"fly-comment-thread__edit-box\">\r\n            <textarea\r\n              class=\"fly-comment-thread__textarea\"\r\n              rows=\"3\"\r\n              [ngModel]=\"comment.body\"\r\n              (ngModelChange)=\"onEditDraftChange($event)\"></textarea>\r\n            <div class=\"fly-comment-thread__composer-actions\">\r\n              <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"cancelEdit()\">\r\n                {{ 'common.action.cancel' | translate }}\r\n              </button>\r\n              <button type=\"button\" class=\"fly-comment-thread__submit-btn\" (click)=\"saveEdit(comment)\">\r\n                {{ 'comment.save' | translate }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <p class=\"fly-comment-thread__text\">{{ comment.body }}</p>\r\n        }\r\n\r\n        @if (!isReadonly() && !comment.isDeleted && editingId() !== comment.id) {\r\n          <div class=\"fly-comment-thread__actions\">\r\n            @if (canReply()) {\r\n              <button type=\"button\" class=\"fly-comment-thread__action-btn\" (click)=\"openReplyBox(comment.id)\">\r\n                {{ 'comment.reply' | translate }}\r\n              </button>\r\n            }\r\n            @if (canEditComment(comment)) {\r\n              <button type=\"button\" class=\"fly-comment-thread__action-btn\" (click)=\"startEdit(comment)\">\r\n                {{ 'comment.edit' | translate }}\r\n              </button>\r\n            }\r\n            @if (canDeleteComment(comment)) {\r\n              <button type=\"button\" class=\"fly-comment-thread__action-btn fly-comment-thread__action-btn--danger\" (click)=\"requestDelete(comment)\">\r\n                {{ 'comment.delete' | translate }}\r\n              </button>\r\n            }\r\n            @if (canReport(comment)) {\r\n              <button type=\"button\" class=\"fly-comment-thread__action-btn\" (click)=\"openReport(comment)\">\r\n                {{ 'comment.report' | translate }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (confirmingDeleteId() === comment.id) {\r\n          <div class=\"fly-comment-thread__confirm\">\r\n            <span>{{ 'comment.delete_confirm' | translate }}</span>\r\n            <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"cancelDelete()\">\r\n              {{ 'common.action.cancel' | translate }}\r\n            </button>\r\n            <button type=\"button\" class=\"fly-comment-thread__danger-btn\" (click)=\"confirmDelete(comment)\">\r\n              {{ 'comment.delete' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n\r\n        @if (isReplyBoxOpen(comment.id)) {\r\n          <div class=\"fly-comment-thread__composer fly-comment-thread__composer--reply\">\r\n            <textarea\r\n              class=\"fly-comment-thread__textarea\"\r\n              rows=\"2\"\r\n              [attr.aria-label]=\"'comment.reply_placeholder' | translate\"\r\n              [placeholder]=\"'comment.reply_placeholder' | translate\"\r\n              [ngModel]=\"replyDraft(comment.id)\"\r\n              (ngModelChange)=\"onReplyDraftChange(comment.id, $event)\"></textarea>\r\n            <div class=\"fly-comment-thread__composer-actions\">\r\n              <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"closeReplyBox(comment.id)\">\r\n                {{ 'common.action.cancel' | translate }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"fly-comment-thread__submit-btn\"\r\n                [disabled]=\"!replyDraft(comment.id).trim()\"\r\n                (click)=\"submitReply(comment.id)\">\r\n                {{ 'comment.post' | translate }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (comment.replyCount > 0) {\r\n          <button type=\"button\" class=\"fly-comment-thread__toggle-replies\" (click)=\"toggleReplies(comment)\">\r\n            {{ (isExpanded(comment.id) ? 'comment.hide_replies' : 'comment.show_replies') | translate: { n: comment.replyCount } }}\r\n          </button>\r\n        }\r\n\r\n        @if (isExpanded(comment.id)) {\r\n          <ul class=\"fly-comment-thread__list fly-comment-thread__list--nested\" role=\"list\">\r\n            @for (child of repliesFor(comment.id)?.items ?? []; track child.id) {\r\n              <ng-container [ngTemplateOutlet]=\"commentNode\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\r\n            }\r\n          </ul>\r\n          @if (repliesFor(comment.id)?.hasMore) {\r\n            <button type=\"button\" class=\"fly-comment-thread__load-more fly-comment-thread__load-more--nested\" (click)=\"loadMoreReplies(comment.id)\">\r\n              {{ 'comment.load_more' | translate }}\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </li>\r\n</ng-template>\r\n\r\n<!-- \u2500\u2500 Report dialog \u2500\u2500 -->\r\n@if (reportingId()) {\r\n  <div class=\"fly-comment-thread__overlay\">\r\n    <div class=\"fly-comment-thread__overlay-backdrop\" role=\"button\" tabindex=\"0\"\r\n         [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n         (click)=\"closeReport()\"\r\n         (keydown.enter)=\"closeReport()\"\r\n         (keydown.space)=\"onOverlayBackdropSpace($event)\"></div>\r\n    <div class=\"fly-comment-thread__dialog\" role=\"dialog\" [attr.aria-label]=\"'comment.report_title' | translate\">\r\n      <h3 class=\"fly-comment-thread__dialog-title\">{{ 'comment.report_title' | translate }}</h3>\r\n\r\n      <fieldset class=\"fly-comment-thread__reason-group\">\r\n        <legend>{{ 'comment.report_reason_label' | translate }}</legend>\r\n        @for (reason of reportReasons; track reason) {\r\n          <label class=\"fly-comment-thread__reason-option\">\r\n            <input\r\n              type=\"radio\"\r\n              name=\"fly-comment-report-reason\"\r\n              [value]=\"reason\"\r\n              [checked]=\"reportReason() === reason\"\r\n              (change)=\"onReportReasonChange(reason)\" />\r\n            <span>{{ 'comment.reason.' + reason | translate }}</span>\r\n          </label>\r\n        }\r\n      </fieldset>\r\n\r\n      <textarea\r\n        class=\"fly-comment-thread__textarea\"\r\n        rows=\"3\"\r\n        [attr.aria-label]=\"'comment.report_detail_label' | translate\"\r\n        [placeholder]=\"'comment.report_detail_label' | translate\"\r\n        [ngModel]=\"reportDetail()\"\r\n        (ngModelChange)=\"onReportDetailChange($event)\"></textarea>\r\n\r\n      <div class=\"fly-comment-thread__composer-actions\">\r\n        <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"closeReport()\">\r\n          {{ 'common.action.cancel' | translate }}\r\n        </button>\r\n        <button type=\"button\" class=\"fly-comment-thread__submit-btn\" [disabled]=\"!reportReason()\" (click)=\"submitReport()\">\r\n          {{ 'comment.report_submit' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_text-tertiary: var(--label-tertiary, #94a3b8);--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 8px;display:block;inline-size:100%;color:var(--_text);font-size:13px}.fly-comment-thread__body{display:flex;flex-direction:column;gap:16px}.fly-comment-thread__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.fly-comment-thread__count{font-weight:700;font-size:14px}.fly-comment-thread__header-actions{display:flex;align-items:center;gap:10px}.fly-comment-thread__sort{display:inline-flex;border:1px solid var(--_border);border-radius:var(--_radius);overflow:hidden}.fly-comment-thread__sort-btn{padding:5px 12px;border:none;border-inline-end:1px solid var(--_border);background:transparent;color:var(--_text-subtle);font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__sort-btn:last-child{border-inline-end:none}.fly-comment-thread__sort-btn--active{background:var(--_accent);color:#fff}.fly-comment-thread__lock-btn{padding:5px 12px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__lock-btn:hover{background:var(--_surface-hover)}.fly-comment-thread__locked-notice{margin:0;padding:8px 12px;border-radius:var(--_radius);background:var(--_fill);color:var(--_text-subtle);font-size:12px}.fly-comment-thread__empty{margin:0;color:var(--_text-subtle);text-align:center;padding:16px 0}.fly-comment-thread__composer{display:flex;flex-direction:column;gap:8px}.fly-comment-thread__composer--reply{margin-block-start:8px}.fly-comment-thread__textarea{inline-size:100%;padding:8px 12px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;line-height:1.5;resize:vertical}.fly-comment-thread__textarea:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}.fly-comment-thread__composer-actions{display:flex;justify-content:flex-end;gap:8px}.fly-comment-thread__submit-btn{padding:6px 16px;border:none;border-radius:var(--_radius);background:var(--_accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__submit-btn:hover:not(:disabled){opacity:.9}.fly-comment-thread__submit-btn:disabled{opacity:.5;cursor:not-allowed}.fly-comment-thread__cancel-btn{padding:6px 14px;border:1px solid var(--_border);border-radius:var(--_radius);background:transparent;color:var(--_text-subtle);font:inherit;cursor:pointer}.fly-comment-thread__cancel-btn:hover{background:var(--_surface-hover)}.fly-comment-thread__danger-btn{padding:6px 14px;border:none;border-radius:var(--_radius);background:var(--_danger);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__danger-btn:hover{opacity:.9}.fly-comment-thread__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.fly-comment-thread__list--nested{margin-block-start:10px;margin-inline-start:20px;padding-inline-start:12px;border-inline-start:2px solid var(--_border);gap:12px}.fly-comment-thread__item{display:block}.fly-comment-thread__row{display:flex;gap:10px;align-items:flex-start}.fly-comment-thread__avatar{inline-size:32px;block-size:32px;border-radius:50%;overflow:hidden;flex:none;background:var(--_fill);display:flex;align-items:center;justify-content:center}.fly-comment-thread__avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-comment-thread__avatar-fallback{font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-comment-thread__content{flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;gap:4px}.fly-comment-thread__meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.fly-comment-thread__author{font-weight:700;color:var(--_text)}.fly-comment-thread__timestamp{font-size:11px;color:var(--_text-tertiary)}.fly-comment-thread__edited{font-size:11px;color:var(--_text-tertiary);font-style:italic}.fly-comment-thread__text{margin:0;color:var(--_text);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.fly-comment-thread__tombstone{margin:0;color:var(--_text-tertiary);font-style:italic}.fly-comment-thread__edit-box{display:flex;flex-direction:column;gap:6px}.fly-comment-thread__actions{display:flex;gap:12px;margin-block-start:2px}.fly-comment-thread__action-btn{border:none;background:transparent;padding:0;color:var(--_text-subtle);font:inherit;font-size:12px;font-weight:600;cursor:pointer}.fly-comment-thread__action-btn:hover{color:var(--_accent);text-decoration:underline}.fly-comment-thread__action-btn--danger:hover{color:var(--_danger)}.fly-comment-thread__confirm{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--_radius);background:var(--_fill);font-size:12px;color:var(--_text-subtle)}.fly-comment-thread__toggle-replies{align-self:flex-start;border:none;background:transparent;padding:0;margin-block-start:4px;color:var(--_accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer}.fly-comment-thread__toggle-replies:hover{text-decoration:underline}.fly-comment-thread__load-more{align-self:flex-start;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:6px 14px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__load-more:hover{background:var(--_surface-hover)}.fly-comment-thread__load-more--nested{margin-inline-start:20px}.fly-comment-thread__overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.fly-comment-thread__overlay-backdrop{position:absolute;inset:0;background:#00000073;border:none;padding:0;margin:0;cursor:pointer}.fly-comment-thread__dialog{position:relative;z-index:1;inline-size:min(420px,90vw);max-block-size:85vh;overflow-y:auto;background:var(--_surface);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 32px #00000040}.fly-comment-thread__dialog-title{margin:0;font-size:16px;font-weight:700}.fly-comment-thread__reason-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:none}.fly-comment-thread__reason-group legend{font-weight:600;padding:0;margin-block-end:4px}.fly-comment-thread__reason-option{display:flex;align-items:center;gap:8px;cursor:pointer}.fly-comment-thread__reason-option input{accent-color:var(--_accent);cursor:pointer}:host(.fly-comment-thread--readonly) .fly-comment-thread__composer,:host(.fly-comment-thread--readonly) .fly-comment-thread__actions{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyCommentThreadComponent, isStandalone: true, selector: "fly-comment-thread", inputs: { rootPage: { classPropertyName: "rootPage", publicName: "rootPage", isSignal: true, isRequired: true, transformFunction: null }, repliesByParent: { classPropertyName: "repliesByParent", publicName: "repliesByParent", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, isLocked: { classPropertyName: "isLocked", publicName: "isLocked", isSignal: true, isRequired: false, transformFunction: null }, currentUserId: { classPropertyName: "currentUserId", publicName: "currentUserId", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, canModerateThread: { classPropertyName: "canModerateThread", publicName: "canModerateThread", isSignal: true, isRequired: false, transformFunction: null }, resolveDisplayName: { classPropertyName: "resolveDisplayName", publicName: "resolveDisplayName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadReplies: "loadReplies", loadMore: "loadMore", submit: "submit", edit: "edit", delete: "delete", report: "report", lockToggle: "lockToggle", sortChange: "sortChange" }, host: { properties: { "class.fly-comment-thread--locked": "isLocked()", "class.fly-comment-thread--readonly": "isReadonly()" }, classAttribute: "fly-comment-thread" }, ngImport: i0, template: "<div class=\"fly-comment-thread__body\">\r\n  <!-- \u2500\u2500 Header: count + one combined sort/lock icon-button toolbar \u2500\u2500 -->\r\n  <header class=\"fly-comment-thread__header\">\r\n    <span class=\"fly-comment-thread__count\">\r\n      {{ 'comment.count' | translate: { n: rootPage().total } }}\r\n    </span>\r\n\r\n    <div class=\"fly-comment-thread__toolbar\" role=\"group\" [attr.aria-label]=\"'comment.sort_label' | translate\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-comment-thread__icon-btn\"\r\n        [class.fly-comment-thread__icon-btn--active]=\"sort() === 'newest'\"\r\n        [attr.aria-pressed]=\"sort() === 'newest'\"\r\n        [flyTooltip]=\"'comment.sort_newest' | translate\"\r\n        [attr.aria-label]=\"'comment.sort_newest' | translate\"\r\n        (click)=\"onSortPick('newest')\">\r\n        <i class=\"pi pi-sort-amount-down\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-comment-thread__icon-btn\"\r\n        [class.fly-comment-thread__icon-btn--active]=\"sort() === 'oldest'\"\r\n        [attr.aria-pressed]=\"sort() === 'oldest'\"\r\n        [flyTooltip]=\"'comment.sort_oldest' | translate\"\r\n        [attr.aria-label]=\"'comment.sort_oldest' | translate\"\r\n        (click)=\"onSortPick('oldest')\">\r\n        <i class=\"pi pi-sort-amount-up\" aria-hidden=\"true\"></i>\r\n      </button>\r\n\r\n      @if (canModerateThread() && !isReadonly()) {\r\n        <span class=\"fly-comment-thread__toolbar-sep\" aria-hidden=\"true\"></span>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-comment-thread__icon-btn\"\r\n          [class.fly-comment-thread__icon-btn--active]=\"isLocked()\"\r\n          [attr.aria-pressed]=\"isLocked()\"\r\n          [flyTooltip]=\"(isLocked() ? 'comment.unlock' : 'comment.lock') | translate\"\r\n          [attr.aria-label]=\"(isLocked() ? 'comment.unlock' : 'comment.lock') | translate\"\r\n          (click)=\"toggleLock()\">\r\n          <i class=\"pi\" [class.pi-lock]=\"!isLocked()\" [class.pi-lock-open]=\"isLocked()\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  @if (isLocked()) {\r\n    <p class=\"fly-comment-thread__locked-notice\">{{ 'comment.locked_notice' | translate }}</p>\r\n  }\r\n\r\n  <!-- \u2500\u2500 Root composer \u2500\u2500 -->\r\n  @if (canReply()) {\r\n    <div class=\"fly-comment-thread__composer\">\r\n      <textarea\r\n        class=\"fly-comment-thread__textarea\"\r\n        rows=\"3\"\r\n        [id]=\"fieldId('root-composer')\"\r\n        [attr.aria-label]=\"'comment.composer_placeholder' | translate\"\r\n        [placeholder]=\"'comment.composer_placeholder' | translate\"\r\n        [ngModel]=\"rootDraft()\"\r\n        (ngModelChange)=\"onRootDraftChange($event)\"></textarea>\r\n      <div class=\"fly-comment-thread__composer-actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-comment-thread__submit-btn\"\r\n          [disabled]=\"!rootDraft().trim()\"\r\n          (click)=\"submitRoot()\">\r\n          {{ 'comment.post' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- \u2500\u2500 Root comments \u2500\u2500 -->\r\n  @if (rootPage().items.length === 0) {\r\n    <p class=\"fly-comment-thread__empty\">{{ 'comment.empty' | translate }}</p>\r\n  } @else {\r\n    <ul class=\"fly-comment-thread__list\" role=\"list\">\r\n      @for (c of rootPage().items; track c.id) {\r\n        <ng-container [ngTemplateOutlet]=\"commentNode\" [ngTemplateOutletContext]=\"{ $implicit: c }\"></ng-container>\r\n      }\r\n    </ul>\r\n\r\n    @if (rootPage().hasMore) {\r\n      <button type=\"button\" class=\"fly-comment-thread__load-more\" (click)=\"loadMoreRoot()\">\r\n        {{ 'comment.load_more' | translate }}\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 Recursive comment node template \u2500\u2500 -->\r\n<ng-template #commentNode let-comment>\r\n  <li class=\"fly-comment-thread__item\" [attr.data-depth]=\"comment.depth\">\r\n    <div class=\"fly-comment-thread__row\">\r\n      <div class=\"fly-comment-thread__avatar\" aria-hidden=\"true\">\r\n        @if (comment.authorAvatarUrl) {\r\n          <img [src]=\"comment.authorAvatarUrl\" alt=\"\" />\r\n        } @else {\r\n          <span class=\"fly-comment-thread__avatar-fallback\">{{ authorInitial(comment) }}</span>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fly-comment-thread__content\">\r\n        <div class=\"fly-comment-thread__meta\">\r\n          <span class=\"fly-comment-thread__author\">{{ authorLabel(comment) }}</span>\r\n          <span class=\"fly-comment-thread__timestamp\">{{ formatDate(comment.createdAt) }}</span>\r\n          @if (comment.isEdited && !comment.isDeleted) {\r\n            <span class=\"fly-comment-thread__edited\">{{ 'comment.edited' | translate }}</span>\r\n          }\r\n        </div>\r\n\r\n        @if (comment.isDeleted) {\r\n          <p class=\"fly-comment-thread__tombstone\">{{ 'comment.deleted' | translate }}</p>\r\n        } @else if (editingId() === comment.id) {\r\n          <div class=\"fly-comment-thread__edit-box\">\r\n            <textarea\r\n              class=\"fly-comment-thread__textarea\"\r\n              rows=\"3\"\r\n              [ngModel]=\"comment.body\"\r\n              (ngModelChange)=\"onEditDraftChange($event)\"></textarea>\r\n            <div class=\"fly-comment-thread__composer-actions\">\r\n              <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"cancelEdit()\">\r\n                {{ 'common.action.cancel' | translate }}\r\n              </button>\r\n              <button type=\"button\" class=\"fly-comment-thread__submit-btn\" (click)=\"saveEdit(comment)\">\r\n                {{ 'comment.save' | translate }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <div class=\"fly-comment-thread__text-row\">\r\n            <p class=\"fly-comment-thread__text\">{{ comment.body }}</p>\r\n            @if (!isReadonly()) {\r\n              <div class=\"fly-comment-thread__actions\">\r\n                @if (canReply()) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fly-comment-thread__icon-btn\"\r\n                    [flyTooltip]=\"'comment.reply' | translate\"\r\n                    [attr.aria-label]=\"'comment.reply' | translate\"\r\n                    (click)=\"openReplyBox(comment.id)\">\r\n                    <i class=\"pi pi-reply\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                }\r\n                @if (canEditComment(comment)) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fly-comment-thread__icon-btn\"\r\n                    [flyTooltip]=\"'comment.edit' | translate\"\r\n                    [attr.aria-label]=\"'comment.edit' | translate\"\r\n                    (click)=\"startEdit(comment)\">\r\n                    <i class=\"pi pi-pencil\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                }\r\n                @if (canDeleteComment(comment)) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fly-comment-thread__icon-btn fly-comment-thread__icon-btn--danger\"\r\n                    [flyTooltip]=\"'comment.delete' | translate\"\r\n                    [attr.aria-label]=\"'comment.delete' | translate\"\r\n                    (click)=\"requestDelete(comment)\">\r\n                    <i class=\"pi pi-trash\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                }\r\n                @if (canReport(comment)) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fly-comment-thread__icon-btn\"\r\n                    [flyTooltip]=\"'comment.report' | translate\"\r\n                    [attr.aria-label]=\"'comment.report' | translate\"\r\n                    (click)=\"openReport(comment)\">\r\n                    <i class=\"pi pi-flag\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (confirmingDeleteId() === comment.id) {\r\n          <div class=\"fly-comment-thread__confirm\">\r\n            <span>{{ 'comment.delete_confirm' | translate }}</span>\r\n            <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"cancelDelete()\">\r\n              {{ 'common.action.cancel' | translate }}\r\n            </button>\r\n            <button type=\"button\" class=\"fly-comment-thread__danger-btn\" (click)=\"confirmDelete(comment)\">\r\n              {{ 'comment.delete' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n\r\n        @if (isReplyBoxOpen(comment.id)) {\r\n          <div class=\"fly-comment-thread__composer fly-comment-thread__composer--reply\">\r\n            <textarea\r\n              class=\"fly-comment-thread__textarea\"\r\n              rows=\"2\"\r\n              [attr.aria-label]=\"'comment.reply_placeholder' | translate\"\r\n              [placeholder]=\"'comment.reply_placeholder' | translate\"\r\n              [ngModel]=\"replyDraft(comment.id)\"\r\n              (ngModelChange)=\"onReplyDraftChange(comment.id, $event)\"></textarea>\r\n            <div class=\"fly-comment-thread__composer-actions\">\r\n              <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"closeReplyBox(comment.id)\">\r\n                {{ 'common.action.cancel' | translate }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"fly-comment-thread__submit-btn\"\r\n                [disabled]=\"!replyDraft(comment.id).trim()\"\r\n                (click)=\"submitReply(comment.id)\">\r\n                {{ 'comment.post' | translate }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (comment.replyCount > 0) {\r\n          <button type=\"button\" class=\"fly-comment-thread__toggle-replies\" (click)=\"toggleReplies(comment)\">\r\n            {{ (isExpanded(comment.id) ? 'comment.hide_replies' : 'comment.show_replies') | translate: { n: comment.replyCount } }}\r\n          </button>\r\n        }\r\n\r\n        @if (isExpanded(comment.id)) {\r\n          <ul class=\"fly-comment-thread__list fly-comment-thread__list--nested\" role=\"list\">\r\n            @for (child of repliesFor(comment.id)?.items ?? []; track child.id) {\r\n              <ng-container [ngTemplateOutlet]=\"commentNode\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\r\n            }\r\n          </ul>\r\n          @if (repliesFor(comment.id)?.hasMore) {\r\n            <button type=\"button\" class=\"fly-comment-thread__load-more fly-comment-thread__load-more--nested\" (click)=\"loadMoreReplies(comment.id)\">\r\n              {{ 'comment.load_more' | translate }}\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </li>\r\n</ng-template>\r\n\r\n<!-- \u2500\u2500 Report dialog \u2500\u2500 -->\r\n@if (reportingId()) {\r\n  <div class=\"fly-comment-thread__overlay\">\r\n    <div class=\"fly-comment-thread__overlay-backdrop\" role=\"button\" tabindex=\"0\"\r\n         [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n         (click)=\"closeReport()\"\r\n         (keydown.enter)=\"closeReport()\"\r\n         (keydown.space)=\"onOverlayBackdropSpace($event)\"></div>\r\n    <div class=\"fly-comment-thread__dialog\" role=\"dialog\" [attr.aria-label]=\"'comment.report_title' | translate\">\r\n      <h3 class=\"fly-comment-thread__dialog-title\">{{ 'comment.report_title' | translate }}</h3>\r\n\r\n      <fieldset class=\"fly-comment-thread__reason-group\">\r\n        <legend>{{ 'comment.report_reason_label' | translate }}</legend>\r\n        @for (reason of reportReasons; track reason) {\r\n          <label class=\"fly-comment-thread__reason-option\">\r\n            <input\r\n              type=\"radio\"\r\n              name=\"fly-comment-report-reason\"\r\n              [value]=\"reason\"\r\n              [checked]=\"reportReason() === reason\"\r\n              (change)=\"onReportReasonChange(reason)\" />\r\n            <span>{{ 'comment.reason.' + reason | translate }}</span>\r\n          </label>\r\n        }\r\n      </fieldset>\r\n\r\n      <textarea\r\n        class=\"fly-comment-thread__textarea\"\r\n        rows=\"3\"\r\n        [attr.aria-label]=\"'comment.report_detail_label' | translate\"\r\n        [placeholder]=\"'comment.report_detail_label' | translate\"\r\n        [ngModel]=\"reportDetail()\"\r\n        (ngModelChange)=\"onReportDetailChange($event)\"></textarea>\r\n\r\n      <div class=\"fly-comment-thread__composer-actions\">\r\n        <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"closeReport()\">\r\n          {{ 'common.action.cancel' | translate }}\r\n        </button>\r\n        <button type=\"button\" class=\"fly-comment-thread__submit-btn\" [disabled]=\"!reportReason()\" (click)=\"submitReport()\">\r\n          {{ 'comment.report_submit' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_text-tertiary: var(--label-tertiary, #94a3b8);--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 8px;display:block;inline-size:100%;color:var(--_text);font-size:13px}.fly-comment-thread__body{display:flex;flex-direction:column;gap:16px}.fly-comment-thread__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.fly-comment-thread__count{font-weight:700;font-size:14px}.fly-comment-thread__toolbar{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--_border);border-radius:calc(var(--_radius) + 2px);background:var(--_surface)}.fly-comment-thread__toolbar-sep{inline-size:1px;block-size:18px;margin-inline:2px;background:var(--_border)}.fly-comment-thread__icon-btn{display:inline-flex;align-items:center;justify-content:center;inline-size:26px;block-size:26px;flex:none;padding:0;border:none;border-radius:50%;background:transparent;color:var(--_text-subtle);cursor:pointer;transition:background var(--t-state, .15s),color var(--t-state, .15s)}.fly-comment-thread__icon-btn .pi{font-size:13px}.fly-comment-thread__icon-btn:hover{background:var(--_surface-hover);color:var(--_text)}.fly-comment-thread__icon-btn:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}.fly-comment-thread__icon-btn--active{background:var(--_accent);color:#fff}.fly-comment-thread__icon-btn--active:hover{background:var(--_accent);opacity:.9}.fly-comment-thread__icon-btn--danger:hover{background:var(--_danger);color:#fff}.fly-comment-thread__locked-notice{margin:0;padding:8px 12px;border-radius:var(--_radius);background:var(--_fill);color:var(--_text-subtle);font-size:12px}.fly-comment-thread__empty{margin:0;color:var(--_text-subtle);text-align:center;padding:16px 0}.fly-comment-thread__composer{display:flex;flex-direction:column;gap:8px}.fly-comment-thread__composer--reply{margin-block-start:8px}.fly-comment-thread__textarea{inline-size:100%;padding:8px 12px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;line-height:1.5;resize:vertical}.fly-comment-thread__textarea:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}.fly-comment-thread__composer-actions{display:flex;justify-content:flex-end;gap:8px}.fly-comment-thread__submit-btn{padding:6px 16px;border:none;border-radius:var(--_radius);background:var(--_accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__submit-btn:hover:not(:disabled){opacity:.9}.fly-comment-thread__submit-btn:disabled{opacity:.5;cursor:not-allowed}.fly-comment-thread__cancel-btn{padding:6px 14px;border:1px solid var(--_border);border-radius:var(--_radius);background:transparent;color:var(--_text-subtle);font:inherit;cursor:pointer}.fly-comment-thread__cancel-btn:hover{background:var(--_surface-hover)}.fly-comment-thread__danger-btn{padding:6px 14px;border:none;border-radius:var(--_radius);background:var(--_danger);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__danger-btn:hover{opacity:.9}.fly-comment-thread__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.fly-comment-thread__list--nested{margin-block-start:10px;margin-inline-start:20px;padding-inline-start:12px;border-inline-start:2px solid var(--_border);gap:12px}.fly-comment-thread__item{display:block}.fly-comment-thread__row{display:flex;gap:10px;align-items:flex-start}.fly-comment-thread__avatar{inline-size:32px;block-size:32px;border-radius:50%;overflow:hidden;flex:none;background:var(--_fill);display:flex;align-items:center;justify-content:center}.fly-comment-thread__avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-comment-thread__avatar-fallback{font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-comment-thread__content{flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;gap:4px}.fly-comment-thread__meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.fly-comment-thread__author{font-weight:700;color:var(--_text)}.fly-comment-thread__timestamp{font-size:11px;color:var(--_text-tertiary)}.fly-comment-thread__edited{font-size:11px;color:var(--_text-tertiary);font-style:italic}.fly-comment-thread__text-row{display:flex;align-items:flex-start;gap:4px}.fly-comment-thread__text{flex:1 1 auto;min-inline-size:0;margin:0;color:var(--_text);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.fly-comment-thread__tombstone{margin:0;color:var(--_text-tertiary);font-style:italic}.fly-comment-thread__edit-box{display:flex;flex-direction:column;gap:6px}.fly-comment-thread__actions{display:flex;align-items:center;gap:2px;flex:none;margin-inline-start:auto}.fly-comment-thread__confirm{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--_radius);background:var(--_fill);font-size:12px;color:var(--_text-subtle)}.fly-comment-thread__toggle-replies{align-self:flex-start;border:none;background:transparent;padding:0;margin-block-start:4px;color:var(--_accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer}.fly-comment-thread__toggle-replies:hover{text-decoration:underline}.fly-comment-thread__load-more{align-self:flex-start;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:6px 14px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__load-more:hover{background:var(--_surface-hover)}.fly-comment-thread__load-more--nested{margin-inline-start:20px}.fly-comment-thread__overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.fly-comment-thread__overlay-backdrop{position:absolute;inset:0;background:#00000073;border:none;padding:0;margin:0;cursor:pointer}.fly-comment-thread__dialog{position:relative;z-index:1;inline-size:min(420px,90vw);max-block-size:85vh;overflow-y:auto;background:var(--_surface);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 32px #00000040}.fly-comment-thread__dialog-title{margin:0;font-size:16px;font-weight:700}.fly-comment-thread__reason-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:none}.fly-comment-thread__reason-group legend{font-weight:600;padding:0;margin-block-end:4px}.fly-comment-thread__reason-option{display:flex;align-items:center;gap:8px;cursor:pointer}.fly-comment-thread__reason-option input{accent-color:var(--_accent);cursor:pointer}:host(.fly-comment-thread--readonly) .fly-comment-thread__composer,:host(.fly-comment-thread--readonly) .fly-comment-thread__actions{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: FlyTooltipDirective, selector: "[flyTooltip], [data-tooltip]", inputs: ["flyTooltip", "flyTooltipPlacement", "flyTooltipDisabled", "flyTooltipDelay"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyCommentThreadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-comment-thread', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'fly-comment-thread', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe, FlyTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'fly-comment-thread',
                         '[class.fly-comment-thread--locked]': 'isLocked()',
                         '[class.fly-comment-thread--readonly]': 'isReadonly()',
-                    }, template: "<div class=\"fly-comment-thread__body\">\r\n  <!-- \u2500\u2500 Header: count + sort + lock toggle \u2500\u2500 -->\r\n  <header class=\"fly-comment-thread__header\">\r\n    <span class=\"fly-comment-thread__count\">\r\n      {{ 'comment.count' | translate: { n: rootPage().total } }}\r\n    </span>\r\n\r\n    <div class=\"fly-comment-thread__header-actions\">\r\n      <div class=\"fly-comment-thread__sort\" role=\"group\" [attr.aria-label]=\"'comment.sort_label' | translate\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-comment-thread__sort-btn\"\r\n          [class.fly-comment-thread__sort-btn--active]=\"sort() === 'newest'\"\r\n          (click)=\"onSortPick('newest')\">\r\n          {{ 'comment.sort_newest' | translate }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-comment-thread__sort-btn\"\r\n          [class.fly-comment-thread__sort-btn--active]=\"sort() === 'oldest'\"\r\n          (click)=\"onSortPick('oldest')\">\r\n          {{ 'comment.sort_oldest' | translate }}\r\n        </button>\r\n      </div>\r\n\r\n      @if (canModerateThread() && !isReadonly()) {\r\n        <button type=\"button\" class=\"fly-comment-thread__lock-btn\" (click)=\"toggleLock()\">\r\n          {{ (isLocked() ? 'comment.unlock' : 'comment.lock') | translate }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  @if (isLocked()) {\r\n    <p class=\"fly-comment-thread__locked-notice\">{{ 'comment.locked_notice' | translate }}</p>\r\n  }\r\n\r\n  <!-- \u2500\u2500 Root composer \u2500\u2500 -->\r\n  @if (canReply()) {\r\n    <div class=\"fly-comment-thread__composer\">\r\n      <textarea\r\n        class=\"fly-comment-thread__textarea\"\r\n        rows=\"3\"\r\n        [id]=\"fieldId('root-composer')\"\r\n        [attr.aria-label]=\"'comment.composer_placeholder' | translate\"\r\n        [placeholder]=\"'comment.composer_placeholder' | translate\"\r\n        [ngModel]=\"rootDraft()\"\r\n        (ngModelChange)=\"onRootDraftChange($event)\"></textarea>\r\n      <div class=\"fly-comment-thread__composer-actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-comment-thread__submit-btn\"\r\n          [disabled]=\"!rootDraft().trim()\"\r\n          (click)=\"submitRoot()\">\r\n          {{ 'comment.post' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- \u2500\u2500 Root comments \u2500\u2500 -->\r\n  @if (rootPage().items.length === 0) {\r\n    <p class=\"fly-comment-thread__empty\">{{ 'comment.empty' | translate }}</p>\r\n  } @else {\r\n    <ul class=\"fly-comment-thread__list\" role=\"list\">\r\n      @for (c of rootPage().items; track c.id) {\r\n        <ng-container [ngTemplateOutlet]=\"commentNode\" [ngTemplateOutletContext]=\"{ $implicit: c }\"></ng-container>\r\n      }\r\n    </ul>\r\n\r\n    @if (rootPage().hasMore) {\r\n      <button type=\"button\" class=\"fly-comment-thread__load-more\" (click)=\"loadMoreRoot()\">\r\n        {{ 'comment.load_more' | translate }}\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 Recursive comment node template \u2500\u2500 -->\r\n<ng-template #commentNode let-comment>\r\n  <li class=\"fly-comment-thread__item\" [attr.data-depth]=\"comment.depth\">\r\n    <div class=\"fly-comment-thread__row\">\r\n      <div class=\"fly-comment-thread__avatar\" aria-hidden=\"true\">\r\n        @if (comment.authorAvatarUrl) {\r\n          <img [src]=\"comment.authorAvatarUrl\" alt=\"\" />\r\n        } @else {\r\n          <span class=\"fly-comment-thread__avatar-fallback\">{{ (comment.authorDisplayName || comment.authorUserId)[0] }}</span>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fly-comment-thread__content\">\r\n        <div class=\"fly-comment-thread__meta\">\r\n          <span class=\"fly-comment-thread__author\">{{ comment.authorDisplayName || comment.authorUserId }}</span>\r\n          <span class=\"fly-comment-thread__timestamp\">{{ formatDate(comment.createdAt) }}</span>\r\n          @if (comment.isEdited && !comment.isDeleted) {\r\n            <span class=\"fly-comment-thread__edited\">{{ 'comment.edited' | translate }}</span>\r\n          }\r\n        </div>\r\n\r\n        @if (comment.isDeleted) {\r\n          <p class=\"fly-comment-thread__tombstone\">{{ 'comment.deleted' | translate }}</p>\r\n        } @else if (editingId() === comment.id) {\r\n          <div class=\"fly-comment-thread__edit-box\">\r\n            <textarea\r\n              class=\"fly-comment-thread__textarea\"\r\n              rows=\"3\"\r\n              [ngModel]=\"comment.body\"\r\n              (ngModelChange)=\"onEditDraftChange($event)\"></textarea>\r\n            <div class=\"fly-comment-thread__composer-actions\">\r\n              <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"cancelEdit()\">\r\n                {{ 'common.action.cancel' | translate }}\r\n              </button>\r\n              <button type=\"button\" class=\"fly-comment-thread__submit-btn\" (click)=\"saveEdit(comment)\">\r\n                {{ 'comment.save' | translate }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <p class=\"fly-comment-thread__text\">{{ comment.body }}</p>\r\n        }\r\n\r\n        @if (!isReadonly() && !comment.isDeleted && editingId() !== comment.id) {\r\n          <div class=\"fly-comment-thread__actions\">\r\n            @if (canReply()) {\r\n              <button type=\"button\" class=\"fly-comment-thread__action-btn\" (click)=\"openReplyBox(comment.id)\">\r\n                {{ 'comment.reply' | translate }}\r\n              </button>\r\n            }\r\n            @if (canEditComment(comment)) {\r\n              <button type=\"button\" class=\"fly-comment-thread__action-btn\" (click)=\"startEdit(comment)\">\r\n                {{ 'comment.edit' | translate }}\r\n              </button>\r\n            }\r\n            @if (canDeleteComment(comment)) {\r\n              <button type=\"button\" class=\"fly-comment-thread__action-btn fly-comment-thread__action-btn--danger\" (click)=\"requestDelete(comment)\">\r\n                {{ 'comment.delete' | translate }}\r\n              </button>\r\n            }\r\n            @if (canReport(comment)) {\r\n              <button type=\"button\" class=\"fly-comment-thread__action-btn\" (click)=\"openReport(comment)\">\r\n                {{ 'comment.report' | translate }}\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (confirmingDeleteId() === comment.id) {\r\n          <div class=\"fly-comment-thread__confirm\">\r\n            <span>{{ 'comment.delete_confirm' | translate }}</span>\r\n            <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"cancelDelete()\">\r\n              {{ 'common.action.cancel' | translate }}\r\n            </button>\r\n            <button type=\"button\" class=\"fly-comment-thread__danger-btn\" (click)=\"confirmDelete(comment)\">\r\n              {{ 'comment.delete' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n\r\n        @if (isReplyBoxOpen(comment.id)) {\r\n          <div class=\"fly-comment-thread__composer fly-comment-thread__composer--reply\">\r\n            <textarea\r\n              class=\"fly-comment-thread__textarea\"\r\n              rows=\"2\"\r\n              [attr.aria-label]=\"'comment.reply_placeholder' | translate\"\r\n              [placeholder]=\"'comment.reply_placeholder' | translate\"\r\n              [ngModel]=\"replyDraft(comment.id)\"\r\n              (ngModelChange)=\"onReplyDraftChange(comment.id, $event)\"></textarea>\r\n            <div class=\"fly-comment-thread__composer-actions\">\r\n              <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"closeReplyBox(comment.id)\">\r\n                {{ 'common.action.cancel' | translate }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"fly-comment-thread__submit-btn\"\r\n                [disabled]=\"!replyDraft(comment.id).trim()\"\r\n                (click)=\"submitReply(comment.id)\">\r\n                {{ 'comment.post' | translate }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (comment.replyCount > 0) {\r\n          <button type=\"button\" class=\"fly-comment-thread__toggle-replies\" (click)=\"toggleReplies(comment)\">\r\n            {{ (isExpanded(comment.id) ? 'comment.hide_replies' : 'comment.show_replies') | translate: { n: comment.replyCount } }}\r\n          </button>\r\n        }\r\n\r\n        @if (isExpanded(comment.id)) {\r\n          <ul class=\"fly-comment-thread__list fly-comment-thread__list--nested\" role=\"list\">\r\n            @for (child of repliesFor(comment.id)?.items ?? []; track child.id) {\r\n              <ng-container [ngTemplateOutlet]=\"commentNode\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\r\n            }\r\n          </ul>\r\n          @if (repliesFor(comment.id)?.hasMore) {\r\n            <button type=\"button\" class=\"fly-comment-thread__load-more fly-comment-thread__load-more--nested\" (click)=\"loadMoreReplies(comment.id)\">\r\n              {{ 'comment.load_more' | translate }}\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </li>\r\n</ng-template>\r\n\r\n<!-- \u2500\u2500 Report dialog \u2500\u2500 -->\r\n@if (reportingId()) {\r\n  <div class=\"fly-comment-thread__overlay\">\r\n    <div class=\"fly-comment-thread__overlay-backdrop\" role=\"button\" tabindex=\"0\"\r\n         [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n         (click)=\"closeReport()\"\r\n         (keydown.enter)=\"closeReport()\"\r\n         (keydown.space)=\"onOverlayBackdropSpace($event)\"></div>\r\n    <div class=\"fly-comment-thread__dialog\" role=\"dialog\" [attr.aria-label]=\"'comment.report_title' | translate\">\r\n      <h3 class=\"fly-comment-thread__dialog-title\">{{ 'comment.report_title' | translate }}</h3>\r\n\r\n      <fieldset class=\"fly-comment-thread__reason-group\">\r\n        <legend>{{ 'comment.report_reason_label' | translate }}</legend>\r\n        @for (reason of reportReasons; track reason) {\r\n          <label class=\"fly-comment-thread__reason-option\">\r\n            <input\r\n              type=\"radio\"\r\n              name=\"fly-comment-report-reason\"\r\n              [value]=\"reason\"\r\n              [checked]=\"reportReason() === reason\"\r\n              (change)=\"onReportReasonChange(reason)\" />\r\n            <span>{{ 'comment.reason.' + reason | translate }}</span>\r\n          </label>\r\n        }\r\n      </fieldset>\r\n\r\n      <textarea\r\n        class=\"fly-comment-thread__textarea\"\r\n        rows=\"3\"\r\n        [attr.aria-label]=\"'comment.report_detail_label' | translate\"\r\n        [placeholder]=\"'comment.report_detail_label' | translate\"\r\n        [ngModel]=\"reportDetail()\"\r\n        (ngModelChange)=\"onReportDetailChange($event)\"></textarea>\r\n\r\n      <div class=\"fly-comment-thread__composer-actions\">\r\n        <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"closeReport()\">\r\n          {{ 'common.action.cancel' | translate }}\r\n        </button>\r\n        <button type=\"button\" class=\"fly-comment-thread__submit-btn\" [disabled]=\"!reportReason()\" (click)=\"submitReport()\">\r\n          {{ 'comment.report_submit' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_text-tertiary: var(--label-tertiary, #94a3b8);--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 8px;display:block;inline-size:100%;color:var(--_text);font-size:13px}.fly-comment-thread__body{display:flex;flex-direction:column;gap:16px}.fly-comment-thread__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.fly-comment-thread__count{font-weight:700;font-size:14px}.fly-comment-thread__header-actions{display:flex;align-items:center;gap:10px}.fly-comment-thread__sort{display:inline-flex;border:1px solid var(--_border);border-radius:var(--_radius);overflow:hidden}.fly-comment-thread__sort-btn{padding:5px 12px;border:none;border-inline-end:1px solid var(--_border);background:transparent;color:var(--_text-subtle);font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__sort-btn:last-child{border-inline-end:none}.fly-comment-thread__sort-btn--active{background:var(--_accent);color:#fff}.fly-comment-thread__lock-btn{padding:5px 12px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__lock-btn:hover{background:var(--_surface-hover)}.fly-comment-thread__locked-notice{margin:0;padding:8px 12px;border-radius:var(--_radius);background:var(--_fill);color:var(--_text-subtle);font-size:12px}.fly-comment-thread__empty{margin:0;color:var(--_text-subtle);text-align:center;padding:16px 0}.fly-comment-thread__composer{display:flex;flex-direction:column;gap:8px}.fly-comment-thread__composer--reply{margin-block-start:8px}.fly-comment-thread__textarea{inline-size:100%;padding:8px 12px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;line-height:1.5;resize:vertical}.fly-comment-thread__textarea:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}.fly-comment-thread__composer-actions{display:flex;justify-content:flex-end;gap:8px}.fly-comment-thread__submit-btn{padding:6px 16px;border:none;border-radius:var(--_radius);background:var(--_accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__submit-btn:hover:not(:disabled){opacity:.9}.fly-comment-thread__submit-btn:disabled{opacity:.5;cursor:not-allowed}.fly-comment-thread__cancel-btn{padding:6px 14px;border:1px solid var(--_border);border-radius:var(--_radius);background:transparent;color:var(--_text-subtle);font:inherit;cursor:pointer}.fly-comment-thread__cancel-btn:hover{background:var(--_surface-hover)}.fly-comment-thread__danger-btn{padding:6px 14px;border:none;border-radius:var(--_radius);background:var(--_danger);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__danger-btn:hover{opacity:.9}.fly-comment-thread__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.fly-comment-thread__list--nested{margin-block-start:10px;margin-inline-start:20px;padding-inline-start:12px;border-inline-start:2px solid var(--_border);gap:12px}.fly-comment-thread__item{display:block}.fly-comment-thread__row{display:flex;gap:10px;align-items:flex-start}.fly-comment-thread__avatar{inline-size:32px;block-size:32px;border-radius:50%;overflow:hidden;flex:none;background:var(--_fill);display:flex;align-items:center;justify-content:center}.fly-comment-thread__avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-comment-thread__avatar-fallback{font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-comment-thread__content{flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;gap:4px}.fly-comment-thread__meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.fly-comment-thread__author{font-weight:700;color:var(--_text)}.fly-comment-thread__timestamp{font-size:11px;color:var(--_text-tertiary)}.fly-comment-thread__edited{font-size:11px;color:var(--_text-tertiary);font-style:italic}.fly-comment-thread__text{margin:0;color:var(--_text);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.fly-comment-thread__tombstone{margin:0;color:var(--_text-tertiary);font-style:italic}.fly-comment-thread__edit-box{display:flex;flex-direction:column;gap:6px}.fly-comment-thread__actions{display:flex;gap:12px;margin-block-start:2px}.fly-comment-thread__action-btn{border:none;background:transparent;padding:0;color:var(--_text-subtle);font:inherit;font-size:12px;font-weight:600;cursor:pointer}.fly-comment-thread__action-btn:hover{color:var(--_accent);text-decoration:underline}.fly-comment-thread__action-btn--danger:hover{color:var(--_danger)}.fly-comment-thread__confirm{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--_radius);background:var(--_fill);font-size:12px;color:var(--_text-subtle)}.fly-comment-thread__toggle-replies{align-self:flex-start;border:none;background:transparent;padding:0;margin-block-start:4px;color:var(--_accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer}.fly-comment-thread__toggle-replies:hover{text-decoration:underline}.fly-comment-thread__load-more{align-self:flex-start;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:6px 14px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__load-more:hover{background:var(--_surface-hover)}.fly-comment-thread__load-more--nested{margin-inline-start:20px}.fly-comment-thread__overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.fly-comment-thread__overlay-backdrop{position:absolute;inset:0;background:#00000073;border:none;padding:0;margin:0;cursor:pointer}.fly-comment-thread__dialog{position:relative;z-index:1;inline-size:min(420px,90vw);max-block-size:85vh;overflow-y:auto;background:var(--_surface);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 32px #00000040}.fly-comment-thread__dialog-title{margin:0;font-size:16px;font-weight:700}.fly-comment-thread__reason-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:none}.fly-comment-thread__reason-group legend{font-weight:600;padding:0;margin-block-end:4px}.fly-comment-thread__reason-option{display:flex;align-items:center;gap:8px;cursor:pointer}.fly-comment-thread__reason-option input{accent-color:var(--_accent);cursor:pointer}:host(.fly-comment-thread--readonly) .fly-comment-thread__composer,:host(.fly-comment-thread--readonly) .fly-comment-thread__actions{display:none}\n"] }]
-        }], propDecorators: { rootPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootPage", required: true }] }], repliesByParent: [{ type: i0.Input, args: [{ isSignal: true, alias: "repliesByParent", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], isLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocked", required: false }] }], currentUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUserId", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], canModerateThread: [{ type: i0.Input, args: [{ isSignal: true, alias: "canModerateThread", required: false }] }], loadReplies: [{ type: i0.Output, args: ["loadReplies"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], submit: [{ type: i0.Output, args: ["submit"] }], edit: [{ type: i0.Output, args: ["edit"] }], delete: [{ type: i0.Output, args: ["delete"] }], report: [{ type: i0.Output, args: ["report"] }], lockToggle: [{ type: i0.Output, args: ["lockToggle"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
+                    }, template: "<div class=\"fly-comment-thread__body\">\r\n  <!-- \u2500\u2500 Header: count + one combined sort/lock icon-button toolbar \u2500\u2500 -->\r\n  <header class=\"fly-comment-thread__header\">\r\n    <span class=\"fly-comment-thread__count\">\r\n      {{ 'comment.count' | translate: { n: rootPage().total } }}\r\n    </span>\r\n\r\n    <div class=\"fly-comment-thread__toolbar\" role=\"group\" [attr.aria-label]=\"'comment.sort_label' | translate\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-comment-thread__icon-btn\"\r\n        [class.fly-comment-thread__icon-btn--active]=\"sort() === 'newest'\"\r\n        [attr.aria-pressed]=\"sort() === 'newest'\"\r\n        [flyTooltip]=\"'comment.sort_newest' | translate\"\r\n        [attr.aria-label]=\"'comment.sort_newest' | translate\"\r\n        (click)=\"onSortPick('newest')\">\r\n        <i class=\"pi pi-sort-amount-down\" aria-hidden=\"true\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-comment-thread__icon-btn\"\r\n        [class.fly-comment-thread__icon-btn--active]=\"sort() === 'oldest'\"\r\n        [attr.aria-pressed]=\"sort() === 'oldest'\"\r\n        [flyTooltip]=\"'comment.sort_oldest' | translate\"\r\n        [attr.aria-label]=\"'comment.sort_oldest' | translate\"\r\n        (click)=\"onSortPick('oldest')\">\r\n        <i class=\"pi pi-sort-amount-up\" aria-hidden=\"true\"></i>\r\n      </button>\r\n\r\n      @if (canModerateThread() && !isReadonly()) {\r\n        <span class=\"fly-comment-thread__toolbar-sep\" aria-hidden=\"true\"></span>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-comment-thread__icon-btn\"\r\n          [class.fly-comment-thread__icon-btn--active]=\"isLocked()\"\r\n          [attr.aria-pressed]=\"isLocked()\"\r\n          [flyTooltip]=\"(isLocked() ? 'comment.unlock' : 'comment.lock') | translate\"\r\n          [attr.aria-label]=\"(isLocked() ? 'comment.unlock' : 'comment.lock') | translate\"\r\n          (click)=\"toggleLock()\">\r\n          <i class=\"pi\" [class.pi-lock]=\"!isLocked()\" [class.pi-lock-open]=\"isLocked()\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  @if (isLocked()) {\r\n    <p class=\"fly-comment-thread__locked-notice\">{{ 'comment.locked_notice' | translate }}</p>\r\n  }\r\n\r\n  <!-- \u2500\u2500 Root composer \u2500\u2500 -->\r\n  @if (canReply()) {\r\n    <div class=\"fly-comment-thread__composer\">\r\n      <textarea\r\n        class=\"fly-comment-thread__textarea\"\r\n        rows=\"3\"\r\n        [id]=\"fieldId('root-composer')\"\r\n        [attr.aria-label]=\"'comment.composer_placeholder' | translate\"\r\n        [placeholder]=\"'comment.composer_placeholder' | translate\"\r\n        [ngModel]=\"rootDraft()\"\r\n        (ngModelChange)=\"onRootDraftChange($event)\"></textarea>\r\n      <div class=\"fly-comment-thread__composer-actions\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-comment-thread__submit-btn\"\r\n          [disabled]=\"!rootDraft().trim()\"\r\n          (click)=\"submitRoot()\">\r\n          {{ 'comment.post' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <!-- \u2500\u2500 Root comments \u2500\u2500 -->\r\n  @if (rootPage().items.length === 0) {\r\n    <p class=\"fly-comment-thread__empty\">{{ 'comment.empty' | translate }}</p>\r\n  } @else {\r\n    <ul class=\"fly-comment-thread__list\" role=\"list\">\r\n      @for (c of rootPage().items; track c.id) {\r\n        <ng-container [ngTemplateOutlet]=\"commentNode\" [ngTemplateOutletContext]=\"{ $implicit: c }\"></ng-container>\r\n      }\r\n    </ul>\r\n\r\n    @if (rootPage().hasMore) {\r\n      <button type=\"button\" class=\"fly-comment-thread__load-more\" (click)=\"loadMoreRoot()\">\r\n        {{ 'comment.load_more' | translate }}\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 Recursive comment node template \u2500\u2500 -->\r\n<ng-template #commentNode let-comment>\r\n  <li class=\"fly-comment-thread__item\" [attr.data-depth]=\"comment.depth\">\r\n    <div class=\"fly-comment-thread__row\">\r\n      <div class=\"fly-comment-thread__avatar\" aria-hidden=\"true\">\r\n        @if (comment.authorAvatarUrl) {\r\n          <img [src]=\"comment.authorAvatarUrl\" alt=\"\" />\r\n        } @else {\r\n          <span class=\"fly-comment-thread__avatar-fallback\">{{ authorInitial(comment) }}</span>\r\n        }\r\n      </div>\r\n\r\n      <div class=\"fly-comment-thread__content\">\r\n        <div class=\"fly-comment-thread__meta\">\r\n          <span class=\"fly-comment-thread__author\">{{ authorLabel(comment) }}</span>\r\n          <span class=\"fly-comment-thread__timestamp\">{{ formatDate(comment.createdAt) }}</span>\r\n          @if (comment.isEdited && !comment.isDeleted) {\r\n            <span class=\"fly-comment-thread__edited\">{{ 'comment.edited' | translate }}</span>\r\n          }\r\n        </div>\r\n\r\n        @if (comment.isDeleted) {\r\n          <p class=\"fly-comment-thread__tombstone\">{{ 'comment.deleted' | translate }}</p>\r\n        } @else if (editingId() === comment.id) {\r\n          <div class=\"fly-comment-thread__edit-box\">\r\n            <textarea\r\n              class=\"fly-comment-thread__textarea\"\r\n              rows=\"3\"\r\n              [ngModel]=\"comment.body\"\r\n              (ngModelChange)=\"onEditDraftChange($event)\"></textarea>\r\n            <div class=\"fly-comment-thread__composer-actions\">\r\n              <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"cancelEdit()\">\r\n                {{ 'common.action.cancel' | translate }}\r\n              </button>\r\n              <button type=\"button\" class=\"fly-comment-thread__submit-btn\" (click)=\"saveEdit(comment)\">\r\n                {{ 'comment.save' | translate }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <div class=\"fly-comment-thread__text-row\">\r\n            <p class=\"fly-comment-thread__text\">{{ comment.body }}</p>\r\n            @if (!isReadonly()) {\r\n              <div class=\"fly-comment-thread__actions\">\r\n                @if (canReply()) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fly-comment-thread__icon-btn\"\r\n                    [flyTooltip]=\"'comment.reply' | translate\"\r\n                    [attr.aria-label]=\"'comment.reply' | translate\"\r\n                    (click)=\"openReplyBox(comment.id)\">\r\n                    <i class=\"pi pi-reply\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                }\r\n                @if (canEditComment(comment)) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fly-comment-thread__icon-btn\"\r\n                    [flyTooltip]=\"'comment.edit' | translate\"\r\n                    [attr.aria-label]=\"'comment.edit' | translate\"\r\n                    (click)=\"startEdit(comment)\">\r\n                    <i class=\"pi pi-pencil\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                }\r\n                @if (canDeleteComment(comment)) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fly-comment-thread__icon-btn fly-comment-thread__icon-btn--danger\"\r\n                    [flyTooltip]=\"'comment.delete' | translate\"\r\n                    [attr.aria-label]=\"'comment.delete' | translate\"\r\n                    (click)=\"requestDelete(comment)\">\r\n                    <i class=\"pi pi-trash\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                }\r\n                @if (canReport(comment)) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"fly-comment-thread__icon-btn\"\r\n                    [flyTooltip]=\"'comment.report' | translate\"\r\n                    [attr.aria-label]=\"'comment.report' | translate\"\r\n                    (click)=\"openReport(comment)\">\r\n                    <i class=\"pi pi-flag\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (confirmingDeleteId() === comment.id) {\r\n          <div class=\"fly-comment-thread__confirm\">\r\n            <span>{{ 'comment.delete_confirm' | translate }}</span>\r\n            <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"cancelDelete()\">\r\n              {{ 'common.action.cancel' | translate }}\r\n            </button>\r\n            <button type=\"button\" class=\"fly-comment-thread__danger-btn\" (click)=\"confirmDelete(comment)\">\r\n              {{ 'comment.delete' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n\r\n        @if (isReplyBoxOpen(comment.id)) {\r\n          <div class=\"fly-comment-thread__composer fly-comment-thread__composer--reply\">\r\n            <textarea\r\n              class=\"fly-comment-thread__textarea\"\r\n              rows=\"2\"\r\n              [attr.aria-label]=\"'comment.reply_placeholder' | translate\"\r\n              [placeholder]=\"'comment.reply_placeholder' | translate\"\r\n              [ngModel]=\"replyDraft(comment.id)\"\r\n              (ngModelChange)=\"onReplyDraftChange(comment.id, $event)\"></textarea>\r\n            <div class=\"fly-comment-thread__composer-actions\">\r\n              <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"closeReplyBox(comment.id)\">\r\n                {{ 'common.action.cancel' | translate }}\r\n              </button>\r\n              <button\r\n                type=\"button\"\r\n                class=\"fly-comment-thread__submit-btn\"\r\n                [disabled]=\"!replyDraft(comment.id).trim()\"\r\n                (click)=\"submitReply(comment.id)\">\r\n                {{ 'comment.post' | translate }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (comment.replyCount > 0) {\r\n          <button type=\"button\" class=\"fly-comment-thread__toggle-replies\" (click)=\"toggleReplies(comment)\">\r\n            {{ (isExpanded(comment.id) ? 'comment.hide_replies' : 'comment.show_replies') | translate: { n: comment.replyCount } }}\r\n          </button>\r\n        }\r\n\r\n        @if (isExpanded(comment.id)) {\r\n          <ul class=\"fly-comment-thread__list fly-comment-thread__list--nested\" role=\"list\">\r\n            @for (child of repliesFor(comment.id)?.items ?? []; track child.id) {\r\n              <ng-container [ngTemplateOutlet]=\"commentNode\" [ngTemplateOutletContext]=\"{ $implicit: child }\"></ng-container>\r\n            }\r\n          </ul>\r\n          @if (repliesFor(comment.id)?.hasMore) {\r\n            <button type=\"button\" class=\"fly-comment-thread__load-more fly-comment-thread__load-more--nested\" (click)=\"loadMoreReplies(comment.id)\">\r\n              {{ 'comment.load_more' | translate }}\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </div>\r\n  </li>\r\n</ng-template>\r\n\r\n<!-- \u2500\u2500 Report dialog \u2500\u2500 -->\r\n@if (reportingId()) {\r\n  <div class=\"fly-comment-thread__overlay\">\r\n    <div class=\"fly-comment-thread__overlay-backdrop\" role=\"button\" tabindex=\"0\"\r\n         [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n         (click)=\"closeReport()\"\r\n         (keydown.enter)=\"closeReport()\"\r\n         (keydown.space)=\"onOverlayBackdropSpace($event)\"></div>\r\n    <div class=\"fly-comment-thread__dialog\" role=\"dialog\" [attr.aria-label]=\"'comment.report_title' | translate\">\r\n      <h3 class=\"fly-comment-thread__dialog-title\">{{ 'comment.report_title' | translate }}</h3>\r\n\r\n      <fieldset class=\"fly-comment-thread__reason-group\">\r\n        <legend>{{ 'comment.report_reason_label' | translate }}</legend>\r\n        @for (reason of reportReasons; track reason) {\r\n          <label class=\"fly-comment-thread__reason-option\">\r\n            <input\r\n              type=\"radio\"\r\n              name=\"fly-comment-report-reason\"\r\n              [value]=\"reason\"\r\n              [checked]=\"reportReason() === reason\"\r\n              (change)=\"onReportReasonChange(reason)\" />\r\n            <span>{{ 'comment.reason.' + reason | translate }}</span>\r\n          </label>\r\n        }\r\n      </fieldset>\r\n\r\n      <textarea\r\n        class=\"fly-comment-thread__textarea\"\r\n        rows=\"3\"\r\n        [attr.aria-label]=\"'comment.report_detail_label' | translate\"\r\n        [placeholder]=\"'comment.report_detail_label' | translate\"\r\n        [ngModel]=\"reportDetail()\"\r\n        (ngModelChange)=\"onReportDetailChange($event)\"></textarea>\r\n\r\n      <div class=\"fly-comment-thread__composer-actions\">\r\n        <button type=\"button\" class=\"fly-comment-thread__cancel-btn\" (click)=\"closeReport()\">\r\n          {{ 'common.action.cancel' | translate }}\r\n        </button>\r\n        <button type=\"button\" class=\"fly-comment-thread__submit-btn\" [disabled]=\"!reportReason()\" (click)=\"submitReport()\">\r\n          {{ 'comment.report_submit' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_text-tertiary: var(--label-tertiary, #94a3b8);--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 8px;display:block;inline-size:100%;color:var(--_text);font-size:13px}.fly-comment-thread__body{display:flex;flex-direction:column;gap:16px}.fly-comment-thread__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.fly-comment-thread__count{font-weight:700;font-size:14px}.fly-comment-thread__toolbar{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--_border);border-radius:calc(var(--_radius) + 2px);background:var(--_surface)}.fly-comment-thread__toolbar-sep{inline-size:1px;block-size:18px;margin-inline:2px;background:var(--_border)}.fly-comment-thread__icon-btn{display:inline-flex;align-items:center;justify-content:center;inline-size:26px;block-size:26px;flex:none;padding:0;border:none;border-radius:50%;background:transparent;color:var(--_text-subtle);cursor:pointer;transition:background var(--t-state, .15s),color var(--t-state, .15s)}.fly-comment-thread__icon-btn .pi{font-size:13px}.fly-comment-thread__icon-btn:hover{background:var(--_surface-hover);color:var(--_text)}.fly-comment-thread__icon-btn:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}.fly-comment-thread__icon-btn--active{background:var(--_accent);color:#fff}.fly-comment-thread__icon-btn--active:hover{background:var(--_accent);opacity:.9}.fly-comment-thread__icon-btn--danger:hover{background:var(--_danger);color:#fff}.fly-comment-thread__locked-notice{margin:0;padding:8px 12px;border-radius:var(--_radius);background:var(--_fill);color:var(--_text-subtle);font-size:12px}.fly-comment-thread__empty{margin:0;color:var(--_text-subtle);text-align:center;padding:16px 0}.fly-comment-thread__composer{display:flex;flex-direction:column;gap:8px}.fly-comment-thread__composer--reply{margin-block-start:8px}.fly-comment-thread__textarea{inline-size:100%;padding:8px 12px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;line-height:1.5;resize:vertical}.fly-comment-thread__textarea:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}.fly-comment-thread__composer-actions{display:flex;justify-content:flex-end;gap:8px}.fly-comment-thread__submit-btn{padding:6px 16px;border:none;border-radius:var(--_radius);background:var(--_accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__submit-btn:hover:not(:disabled){opacity:.9}.fly-comment-thread__submit-btn:disabled{opacity:.5;cursor:not-allowed}.fly-comment-thread__cancel-btn{padding:6px 14px;border:1px solid var(--_border);border-radius:var(--_radius);background:transparent;color:var(--_text-subtle);font:inherit;cursor:pointer}.fly-comment-thread__cancel-btn:hover{background:var(--_surface-hover)}.fly-comment-thread__danger-btn{padding:6px 14px;border:none;border-radius:var(--_radius);background:var(--_danger);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__danger-btn:hover{opacity:.9}.fly-comment-thread__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.fly-comment-thread__list--nested{margin-block-start:10px;margin-inline-start:20px;padding-inline-start:12px;border-inline-start:2px solid var(--_border);gap:12px}.fly-comment-thread__item{display:block}.fly-comment-thread__row{display:flex;gap:10px;align-items:flex-start}.fly-comment-thread__avatar{inline-size:32px;block-size:32px;border-radius:50%;overflow:hidden;flex:none;background:var(--_fill);display:flex;align-items:center;justify-content:center}.fly-comment-thread__avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-comment-thread__avatar-fallback{font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-comment-thread__content{flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;gap:4px}.fly-comment-thread__meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.fly-comment-thread__author{font-weight:700;color:var(--_text)}.fly-comment-thread__timestamp{font-size:11px;color:var(--_text-tertiary)}.fly-comment-thread__edited{font-size:11px;color:var(--_text-tertiary);font-style:italic}.fly-comment-thread__text-row{display:flex;align-items:flex-start;gap:4px}.fly-comment-thread__text{flex:1 1 auto;min-inline-size:0;margin:0;color:var(--_text);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.fly-comment-thread__tombstone{margin:0;color:var(--_text-tertiary);font-style:italic}.fly-comment-thread__edit-box{display:flex;flex-direction:column;gap:6px}.fly-comment-thread__actions{display:flex;align-items:center;gap:2px;flex:none;margin-inline-start:auto}.fly-comment-thread__confirm{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--_radius);background:var(--_fill);font-size:12px;color:var(--_text-subtle)}.fly-comment-thread__toggle-replies{align-self:flex-start;border:none;background:transparent;padding:0;margin-block-start:4px;color:var(--_accent);font:inherit;font-size:12px;font-weight:700;cursor:pointer}.fly-comment-thread__toggle-replies:hover{text-decoration:underline}.fly-comment-thread__load-more{align-self:flex-start;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:6px 14px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-comment-thread__load-more:hover{background:var(--_surface-hover)}.fly-comment-thread__load-more--nested{margin-inline-start:20px}.fly-comment-thread__overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.fly-comment-thread__overlay-backdrop{position:absolute;inset:0;background:#00000073;border:none;padding:0;margin:0;cursor:pointer}.fly-comment-thread__dialog{position:relative;z-index:1;inline-size:min(420px,90vw);max-block-size:85vh;overflow-y:auto;background:var(--_surface);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 32px #00000040}.fly-comment-thread__dialog-title{margin:0;font-size:16px;font-weight:700}.fly-comment-thread__reason-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:none}.fly-comment-thread__reason-group legend{font-weight:600;padding:0;margin-block-end:4px}.fly-comment-thread__reason-option{display:flex;align-items:center;gap:8px;cursor:pointer}.fly-comment-thread__reason-option input{accent-color:var(--_accent);cursor:pointer}:host(.fly-comment-thread--readonly) .fly-comment-thread__composer,:host(.fly-comment-thread--readonly) .fly-comment-thread__actions{display:none}\n"] }]
+        }], propDecorators: { rootPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rootPage", required: true }] }], repliesByParent: [{ type: i0.Input, args: [{ isSignal: true, alias: "repliesByParent", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], isLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLocked", required: false }] }], currentUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentUserId", required: false }] }], isReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], canModerateThread: [{ type: i0.Input, args: [{ isSignal: true, alias: "canModerateThread", required: false }] }], resolveDisplayName: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolveDisplayName", required: false }] }], loadReplies: [{ type: i0.Output, args: ["loadReplies"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], submit: [{ type: i0.Output, args: ["submit"] }], edit: [{ type: i0.Output, args: ["edit"] }], delete: [{ type: i0.Output, args: ["delete"] }], report: [{ type: i0.Output, args: ["report"] }], lockToggle: [{ type: i0.Output, args: ["lockToggle"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
 
 // ── Vendored synchronous SHA-256 (FIPS 180-4) ────────────────────────────────
 // Why this exists: `fly-captcha`'s PoW solver must brute-force up to
@@ -15422,32 +15862,56 @@ function isChunkLoadError(err) {
     return looksLikeModuleUrl && looksLikeFetchStatus;
 }
 /**
- * sessionStorage key recording that this tab session's single chunk-error
- * reload was already spent. It persists across the reload it triggers (an
- * in-memory flag resets on reload and cannot guard a loop).
+ * sessionStorage key recording WHEN this tab session last spent its chunk-error
+ * reload (epoch ms). It persists across the reload it triggers (an in-memory
+ * flag resets on reload and cannot guard a loop).
  */
 const FLY_CHUNK_RELOAD_FLAG = 'fly:chunk-reload-attempted';
 /**
- * One-shot self-heal for a stale client after a redeploy. Permits exactly ONE
- * reload per tab session, so a reload that keeps failing (a chunk truly missing
- * from the current build, or a genuinely-down host) does NOT loop.
+ * How long a spent self-heal attempt stays spent. Within the window a repeat
+ * failure falls through to the caller's error UI (loop guard); after it the
+ * heal re-arms. A permanent one-shot stranded long-lived tabs on environments
+ * that redeploy repeatedly (e.g. a Helm upgrade→rollback→retry cycle flips the
+ * served build several times in an afternoon — each flip needs its own reload,
+ * but only the first ever got one). 10 min is far above any error→reload→error
+ * loop period (seconds) while well below the gap between distinct redeploys.
+ */
+const FLY_RELOAD_REARM_MS = 10 * 60 * 1000;
+/**
+ * Self-heal for a stale client after a redeploy. Permits ONE reload per
+ * {@link FLY_RELOAD_REARM_MS} window per tab session, so a reload that keeps
+ * failing (a chunk truly missing from the current build, or a genuinely-down
+ * host) does NOT loop — but a LATER redeploy re-arms it.
  *
  * @returns `true` when a reload was initiated (the page will navigate away);
- *   `false` when the session's reload was already spent or sessionStorage is
+ *   `false` when the window's reload was already spent or sessionStorage is
  *   unavailable — callers should surface a fallback / stop rather than spin.
  */
 function reloadOnceForChunkError() {
+    if (!trySpendHealAttempt(FLY_CHUNK_RELOAD_FLAG))
+        return false;
+    window.location.reload();
+    return true;
+}
+/**
+ * Records a heal attempt under `key` unless one was already recorded within the
+ * last {@link FLY_RELOAD_REARM_MS}. A legacy `'1'` value (pre-timestamp builds)
+ * parses to epoch 1 and therefore counts as expired — one extra reload on
+ * upgrade, never a loop. Returns `false` on sessionStorage failure (private
+ * mode / quota / non-browser): cannot record the attempt, so cannot prove a
+ * reload wouldn't loop — prefer the caller's fallback over a spin.
+ */
+function trySpendHealAttempt(key) {
     try {
-        if (sessionStorage.getItem(FLY_CHUNK_RELOAD_FLAG))
+        const last = Number(sessionStorage.getItem(key));
+        if (Number.isFinite(last) && last > 0 && Date.now() - last < FLY_RELOAD_REARM_MS) {
             return false;
-        sessionStorage.setItem(FLY_CHUNK_RELOAD_FLAG, '1');
+        }
+        sessionStorage.setItem(key, String(Date.now()));
     }
     catch {
-        // Private mode / quota / non-browser: cannot record the attempt, so cannot
-        // prove a reload wouldn't loop. Prefer the fallback over a spin.
         return false;
     }
-    window.location.reload();
     return true;
 }
 /**
@@ -15474,10 +15938,11 @@ function isNativeFederationCacheError(err) {
     return /Unable to resolve specifier ['"]?@nf-internal\/chunk-/i.test(msg);
 }
 /**
- * sessionStorage key recording that this tab session's single Native-Federation
- * cache-heal (revalidation sweep + reload) was already spent — separate from
- * {@link FLY_CHUNK_RELOAD_FLAG} so a plain chunk-404 reload and a shared-bundle
- * revalidation sweep each get one independent attempt.
+ * sessionStorage key recording WHEN this tab session last spent its
+ * Native-Federation cache-heal (revalidation sweep + reload; epoch ms) —
+ * separate from {@link FLY_CHUNK_RELOAD_FLAG} so a plain chunk-404 reload and a
+ * shared-bundle revalidation sweep each get one independent attempt per
+ * {@link FLY_RELOAD_REARM_MS} window.
  */
 const FLY_NF_CACHE_HEAL_FLAG = 'nf-cache-heal-attempted';
 /**
@@ -15496,14 +15961,8 @@ const FLY_NF_CACHE_HEAL_FLAG = 'nf-cache-heal-attempted';
  *   sessionStorage is unavailable (caller should surface a fallback).
  */
 function healNativeFederationCacheOnce() {
-    try {
-        if (sessionStorage.getItem(FLY_NF_CACHE_HEAL_FLAG))
-            return false;
-        sessionStorage.setItem(FLY_NF_CACHE_HEAL_FLAG, '1');
-    }
-    catch {
+    if (!trySpendHealAttempt(FLY_NF_CACHE_HEAL_FLAG))
         return false;
-    }
     const reload = () => {
         try {
             window.location.reload();
@@ -15930,6 +16389,13 @@ class FlyModerationQueueComponent {
     error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     /** The currently applied status filter; `null` = "All". Host-controlled, like `[sort]` on `fly-comment-thread`. */
     status = input(null, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional id→name lookup for the reporter column, mirroring
+     * `fly-comment-thread`'s input of the same name. Bind
+     * `FlyUserDirectoryService.label`; absent, rows fall back to the raw id.
+     * See {@link reporterLabel} for the resolution order.
+     */
+    resolveDisplayName = input(null, ...(ngDevMode ? [{ debugName: "resolveDisplayName" }] : /* istanbul ignore next */ []));
     // ── Outputs ──────────────────────────────────────────────────────────────────
     /** A status-filter pick (page resets to 1) or a `loadMore` (next page at the current filter). */
     loadPage = output();
@@ -15974,6 +16440,16 @@ class FlyModerationQueueComponent {
     subjectDisplay(r) {
         return r.subjectLabel || `${r.subjectType} #${this.shortId(r.subjectId)}`;
     }
+    /**
+     * Who filed the report. Resolution order: explicit `reporterDisplayName` →
+     * {@link resolveDisplayName} → the raw `reporterUserId`. Same contract as
+     * `fly-comment-thread`'s `authorLabel`.
+     */
+    reporterLabel(r) {
+        if (r.reporterDisplayName)
+            return r.reporterDisplayName;
+        return this.resolveDisplayName()?.(r.reporterUserId) || r.reporterUserId;
+    }
     formatDate(iso) {
         const d = new Date(iso);
         return Number.isNaN(d.getTime()) ? '' : d.toLocaleString();
@@ -16090,12 +16566,12 @@ class FlyModerationQueueComponent {
         btn?.focus({ preventScroll: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyModerationQueueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyModerationQueueComponent, isStandalone: true, selector: "fly-moderation-queue", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadPage: "loadPage", resolve: "resolve", lockThread: "lockThread", openSubject: "openSubject" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "fly-moderation-queue" }, ngImport: i0, template: "<div class=\"fly-moderation-queue__body\">\r\n  <!-- \u2500\u2500 Header: count + status filter \u2500\u2500 -->\r\n  <header class=\"fly-moderation-queue__header\">\r\n    <span class=\"fly-moderation-queue__count\">\r\n      {{ 'moderation.count' | translate: { n: page().total } }}\r\n    </span>\r\n\r\n    <div class=\"fly-moderation-queue__status-filter\" role=\"group\" [attr.aria-label]=\"'moderation.status_label' | translate\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-moderation-queue__status-btn\"\r\n        [class.fly-moderation-queue__status-btn--active]=\"status() === null\"\r\n        [attr.aria-pressed]=\"status() === null\"\r\n        [disabled]=\"loading()\"\r\n        (click)=\"onStatusPick(null)\">\r\n        {{ 'moderation.status_all' | translate }}\r\n      </button>\r\n      @for (s of statuses; track s) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-moderation-queue__status-btn\"\r\n          [class.fly-moderation-queue__status-btn--active]=\"status() === s\"\r\n          [attr.aria-pressed]=\"status() === s\"\r\n          [disabled]=\"loading()\"\r\n          (click)=\"onStatusPick(s)\">\r\n          {{ 'moderation.status.' + s | translate }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  <!-- \u2500\u2500 States \u2500\u2500 -->\r\n  @if (error()) {\r\n    <p class=\"fly-moderation-queue__error\" role=\"alert\">{{ error() }}</p>\r\n  } @else if (loading() && page().items.length === 0) {\r\n    <p class=\"fly-moderation-queue__status-msg\">{{ 'moderation.loading' | translate }}</p>\r\n  } @else if (page().items.length === 0) {\r\n    <p class=\"fly-moderation-queue__empty\">{{ 'moderation.empty' | translate }}</p>\r\n  } @else {\r\n    <!-- \u2500\u2500 Report table \u2500\u2500 -->\r\n    <div class=\"fly-moderation-queue__table-wrap\">\r\n      <table class=\"fly-moderation-queue__table\">\r\n        <caption class=\"fly-moderation-queue__sr-only\">{{ 'moderation.table_caption' | translate }}</caption>\r\n        <thead>\r\n          <tr>\r\n            <th scope=\"col\">{{ 'moderation.col_reason' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_reporter' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_reported' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_excerpt' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_subject' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_status' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_actions' | translate }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (r of page().items; track r.id) {\r\n            <tr>\r\n              <td class=\"fly-moderation-queue__reason-cell\">\r\n                <span class=\"fly-moderation-queue__reason\">{{ 'comment.reason.' + r.reason | translate }}</span>\r\n                @if (r.detail) {\r\n                  <span class=\"fly-moderation-queue__detail\" [title]=\"r.detail\">{{ r.detail }}</span>\r\n                }\r\n              </td>\r\n              <td>{{ r.reporterDisplayName || r.reporterUserId }}</td>\r\n              <td>{{ formatDate(r.createdAt) }}</td>\r\n              <td class=\"fly-moderation-queue__excerpt\">{{ r.commentExcerpt || '\u2014' }}</td>\r\n              <td>\r\n                <button type=\"button\" class=\"fly-moderation-queue__subject-link\" [title]=\"subjectHref(r)\" (click)=\"onOpenSubject(r)\">\r\n                  {{ subjectDisplay(r) }}\r\n                </button>\r\n              </td>\r\n              <td>\r\n                <span class=\"fly-moderation-queue__badge\" [class]=\"'fly-moderation-queue__badge--' + r.status\">\r\n                  {{ 'moderation.status.' + r.status | translate }}\r\n                </span>\r\n                @if (r.resolutionNote) {\r\n                  <div class=\"fly-moderation-queue__resolution-note\">{{ r.resolutionNote }}</div>\r\n                }\r\n              </td>\r\n              <td class=\"fly-moderation-queue__actions\">\r\n                @if (isResolvable(r.status)) {\r\n                  <button type=\"button\" class=\"fly-moderation-queue__action-btn\" [disabled]=\"loading()\" (click)=\"openResolve(r)\">\r\n                    {{ 'moderation.resolve' | translate }}\r\n                  </button>\r\n                }\r\n                @if (confirmingLockId() === r.id) {\r\n                  <span class=\"fly-moderation-queue__lock-confirm\">\r\n                    <button type=\"button\" class=\"fly-moderation-queue__cancel-btn\" (click)=\"cancelLock()\">\r\n                      {{ 'common.action.cancel' | translate }}\r\n                    </button>\r\n                    <button type=\"button\" class=\"fly-moderation-queue__danger-btn\" (click)=\"confirmLock(r)\">\r\n                      {{ 'moderation.lock_thread' | translate }}\r\n                    </button>\r\n                  </span>\r\n                } @else {\r\n                  <button type=\"button\" class=\"fly-moderation-queue__action-btn\" [disabled]=\"loading()\" (click)=\"requestLock(r)\">\r\n                    {{ 'moderation.lock_thread' | translate }}\r\n                  </button>\r\n                }\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n\r\n    @if (page().hasMore) {\r\n      <button type=\"button\" class=\"fly-moderation-queue__load-more\" [disabled]=\"loading()\" (click)=\"loadMore()\">\r\n        {{ 'comment.load_more' | translate }}\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 Resolve dialog \u2500\u2500 -->\r\n@if (resolvingReport(); as r) {\r\n  <div class=\"fly-moderation-queue__overlay\">\r\n    <div class=\"fly-moderation-queue__overlay-backdrop\" role=\"button\" tabindex=\"0\"\r\n         [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n         (click)=\"closeResolve()\"\r\n         (keydown.enter)=\"closeResolve()\"\r\n         (keydown.space)=\"onOverlayBackdropSpace($event)\"></div>\r\n    <div\r\n      class=\"fly-moderation-queue__dialog\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"'moderation.resolve_title' | translate\">\r\n      <h3 class=\"fly-moderation-queue__dialog-title\">{{ 'moderation.resolve_title' | translate }}</h3>\r\n\r\n      <fieldset class=\"fly-moderation-queue__resolution-group\">\r\n        <legend>{{ 'moderation.resolution_label' | translate }}</legend>\r\n        <label class=\"fly-moderation-queue__resolution-option\">\r\n          <input\r\n            type=\"radio\"\r\n            [name]=\"resolutionGroupName\"\r\n            [checked]=\"resolutionStatus() === 'ActionTaken'\"\r\n            (change)=\"onResolutionStatusChange('ActionTaken')\" />\r\n          <span>{{ 'moderation.resolution.ActionTaken' | translate }}</span>\r\n        </label>\r\n        <label class=\"fly-moderation-queue__resolution-option\">\r\n          <input\r\n            type=\"radio\"\r\n            [name]=\"resolutionGroupName\"\r\n            [checked]=\"resolutionStatus() === 'Dismissed'\"\r\n            (change)=\"onResolutionStatusChange('Dismissed')\" />\r\n          <span>{{ 'moderation.resolution.Dismissed' | translate }}</span>\r\n        </label>\r\n      </fieldset>\r\n\r\n      @if (resolutionStatus() === 'ActionTaken') {\r\n        <label class=\"fly-moderation-queue__checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"deleteComment()\" (change)=\"onDeleteCommentToggle($event)\" />\r\n          <span>{{ 'moderation.delete_comment_label' | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <textarea\r\n        class=\"fly-moderation-queue__textarea\"\r\n        rows=\"3\"\r\n        [attr.aria-label]=\"'moderation.resolution_note_label' | translate\"\r\n        [placeholder]=\"'moderation.resolution_note_label' | translate\"\r\n        [ngModel]=\"resolutionNote()\"\r\n        (ngModelChange)=\"onResolutionNoteChange($event)\"></textarea>\r\n\r\n      <div class=\"fly-moderation-queue__dialog-actions\">\r\n        <button type=\"button\" class=\"fly-moderation-queue__cancel-btn\" (click)=\"closeResolve()\">\r\n          {{ 'common.action.cancel' | translate }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-moderation-queue__submit-btn\"\r\n          [disabled]=\"!resolutionStatus()\"\r\n          (click)=\"submitResolve(r)\">\r\n          {{ 'moderation.resolve_submit' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_text-tertiary: var(--label-tertiary, #94a3b8);--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_blue: var(--system-blue, #0a84ff);--_orange: var(--system-orange, #ff9f0a);--_green: var(--system-green, #32d74b);--_radius: 8px;--_blue-text: #1d4ed8;--_orange-text: #9a3412;--_green-text: #166534;--_danger-text: #b91c1c;display:block;inline-size:100%;color:var(--_text);font-size:13px}.fly-moderation-queue__body{display:flex;flex-direction:column;gap:16px}.fly-moderation-queue__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.fly-moderation-queue__count{font-weight:700;font-size:14px}.fly-moderation-queue__status-filter{display:inline-flex;flex-wrap:wrap;border:1px solid var(--_border);border-radius:var(--_radius);overflow:hidden}.fly-moderation-queue__status-btn{padding:5px 12px;border:none;border-inline-end:1px solid var(--_border);background:transparent;color:var(--_text-subtle);font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__status-btn:last-child{border-inline-end:none}.fly-moderation-queue__status-btn:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__status-btn--active{background:var(--_accent);color:#fff}.fly-moderation-queue__empty,.fly-moderation-queue__status-msg{margin:0;color:var(--_text-subtle);text-align:center;padding:16px 0}.fly-moderation-queue__error{margin:0;padding:8px 12px;border-radius:var(--_radius);background:color-mix(in srgb,var(--_danger) 12%,transparent);color:var(--_danger);font-size:12px}.fly-moderation-queue__sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.fly-moderation-queue__table-wrap{overflow-x:auto}.fly-moderation-queue__table{inline-size:100%;border-collapse:collapse;font-size:12px}.fly-moderation-queue__table th{text-align:start;padding:6px 10px;color:var(--_text-subtle);font-weight:600;border-block-end:1px solid var(--_border);white-space:nowrap}.fly-moderation-queue__table td{padding:8px 10px;border-block-end:1px solid var(--_border);vertical-align:top}.fly-moderation-queue__reason-cell{display:table-cell}.fly-moderation-queue__reason{display:block;font-weight:600}.fly-moderation-queue__detail{display:block;margin-block-start:2px;color:var(--_text-tertiary);font-size:11px;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-moderation-queue__excerpt{max-inline-size:260px;color:var(--_text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-moderation-queue__subject-link{border:none;background:transparent;padding:0;color:var(--_accent);font:inherit;font-weight:600;cursor:pointer;text-align:start}.fly-moderation-queue__subject-link:hover{text-decoration:underline}.fly-moderation-queue__badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;white-space:nowrap}.fly-moderation-queue__badge--Open{background:color-mix(in srgb,var(--_blue) 12%,#fff);color:var(--_blue-text)}.fly-moderation-queue__badge--UnderReview{background:color-mix(in srgb,var(--_orange) 12%,#fff);color:var(--_orange-text)}.fly-moderation-queue__badge--ActionTaken{background:color-mix(in srgb,var(--_danger) 12%,#fff);color:var(--_danger-text)}.fly-moderation-queue__badge--Dismissed{background:color-mix(in srgb,var(--_green) 12%,#fff);color:var(--_green-text)}.fly-moderation-queue__resolution-note{margin-block-start:4px;color:var(--_text-tertiary);font-size:11px;max-inline-size:200px}.fly-moderation-queue__actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;white-space:nowrap}.fly-moderation-queue__action-btn{border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:4px 10px;color:var(--_text);font:inherit;font-size:11px;font-weight:600;cursor:pointer}.fly-moderation-queue__action-btn:hover:not(:disabled){background:var(--_surface-hover)}.fly-moderation-queue__action-btn:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__lock-confirm{display:inline-flex;align-items:center;gap:6px}.fly-moderation-queue__load-more{align-self:flex-start;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:6px 14px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__load-more:hover:not(:disabled){background:var(--_surface-hover)}.fly-moderation-queue__load-more:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.fly-moderation-queue__overlay-backdrop{position:absolute;inset:0;background:#00000073;border:none;padding:0;margin:0;cursor:pointer}.fly-moderation-queue__dialog{position:relative;z-index:1;inline-size:min(440px,90vw);max-block-size:85vh;overflow-y:auto;background:var(--_surface);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 32px #00000040}.fly-moderation-queue__dialog:focus-visible{outline:2px solid var(--_accent);outline-offset:2px}.fly-moderation-queue__dialog-title{margin:0;font-size:16px;font-weight:700}.fly-moderation-queue__resolution-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:none}.fly-moderation-queue__resolution-group legend{font-weight:600;padding:0;margin-block-end:4px}.fly-moderation-queue__resolution-option,.fly-moderation-queue__checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.fly-moderation-queue__resolution-option input,.fly-moderation-queue__checkbox-row input{accent-color:var(--_accent);cursor:pointer}.fly-moderation-queue__textarea{inline-size:100%;padding:8px 12px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;line-height:1.5;resize:vertical}.fly-moderation-queue__textarea:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}.fly-moderation-queue__dialog-actions{display:flex;justify-content:flex-end;gap:8px}.fly-moderation-queue__submit-btn{padding:6px 16px;border:none;border-radius:var(--_radius);background:var(--_accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__submit-btn:hover:not(:disabled){opacity:.9}.fly-moderation-queue__submit-btn:disabled{opacity:.5;cursor:not-allowed}.fly-moderation-queue__cancel-btn{padding:6px 14px;border:1px solid var(--_border);border-radius:var(--_radius);background:transparent;color:var(--_text-subtle);font:inherit;cursor:pointer}.fly-moderation-queue__cancel-btn:hover{background:var(--_surface-hover)}.fly-moderation-queue__danger-btn{padding:6px 14px;border:none;border-radius:var(--_radius);background:var(--_danger);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__danger-btn:hover{opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyModerationQueueComponent, isStandalone: true, selector: "fly-moderation-queue", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, resolveDisplayName: { classPropertyName: "resolveDisplayName", publicName: "resolveDisplayName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loadPage: "loadPage", resolve: "resolve", lockThread: "lockThread", openSubject: "openSubject" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "fly-moderation-queue" }, ngImport: i0, template: "<div class=\"fly-moderation-queue__body\">\r\n  <!-- \u2500\u2500 Header: count + status filter \u2500\u2500 -->\r\n  <header class=\"fly-moderation-queue__header\">\r\n    <span class=\"fly-moderation-queue__count\">\r\n      {{ 'moderation.count' | translate: { n: page().total } }}\r\n    </span>\r\n\r\n    <div class=\"fly-moderation-queue__status-filter\" role=\"group\" [attr.aria-label]=\"'moderation.status_label' | translate\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-moderation-queue__status-btn\"\r\n        [class.fly-moderation-queue__status-btn--active]=\"status() === null\"\r\n        [attr.aria-pressed]=\"status() === null\"\r\n        [disabled]=\"loading()\"\r\n        (click)=\"onStatusPick(null)\">\r\n        {{ 'moderation.status_all' | translate }}\r\n      </button>\r\n      @for (s of statuses; track s) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-moderation-queue__status-btn\"\r\n          [class.fly-moderation-queue__status-btn--active]=\"status() === s\"\r\n          [attr.aria-pressed]=\"status() === s\"\r\n          [disabled]=\"loading()\"\r\n          (click)=\"onStatusPick(s)\">\r\n          {{ 'moderation.status.' + s | translate }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  <!-- \u2500\u2500 States \u2500\u2500 -->\r\n  @if (error()) {\r\n    <p class=\"fly-moderation-queue__error\" role=\"alert\">{{ error() }}</p>\r\n  } @else if (loading() && page().items.length === 0) {\r\n    <p class=\"fly-moderation-queue__status-msg\">{{ 'moderation.loading' | translate }}</p>\r\n  } @else if (page().items.length === 0) {\r\n    <p class=\"fly-moderation-queue__empty\">{{ 'moderation.empty' | translate }}</p>\r\n  } @else {\r\n    <!-- \u2500\u2500 Report table \u2500\u2500 -->\r\n    <div class=\"fly-moderation-queue__table-wrap\">\r\n      <table class=\"fly-moderation-queue__table\">\r\n        <caption class=\"fly-moderation-queue__sr-only\">{{ 'moderation.table_caption' | translate }}</caption>\r\n        <thead>\r\n          <tr>\r\n            <th scope=\"col\">{{ 'moderation.col_reason' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_reporter' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_reported' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_excerpt' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_subject' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_status' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_actions' | translate }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (r of page().items; track r.id) {\r\n            <tr>\r\n              <td class=\"fly-moderation-queue__reason-cell\">\r\n                <span class=\"fly-moderation-queue__reason\">{{ 'comment.reason.' + r.reason | translate }}</span>\r\n                @if (r.detail) {\r\n                  <span class=\"fly-moderation-queue__detail\" [title]=\"r.detail\">{{ r.detail }}</span>\r\n                }\r\n              </td>\r\n              <td>{{ reporterLabel(r) }}</td>\r\n              <td>{{ formatDate(r.createdAt) }}</td>\r\n              <td class=\"fly-moderation-queue__excerpt\">{{ r.commentExcerpt || '\u2014' }}</td>\r\n              <td>\r\n                <button type=\"button\" class=\"fly-moderation-queue__subject-link\" [title]=\"subjectHref(r)\" (click)=\"onOpenSubject(r)\">\r\n                  {{ subjectDisplay(r) }}\r\n                </button>\r\n              </td>\r\n              <td>\r\n                <span class=\"fly-moderation-queue__badge\" [class]=\"'fly-moderation-queue__badge--' + r.status\">\r\n                  {{ 'moderation.status.' + r.status | translate }}\r\n                </span>\r\n                @if (r.resolutionNote) {\r\n                  <div class=\"fly-moderation-queue__resolution-note\">{{ r.resolutionNote }}</div>\r\n                }\r\n              </td>\r\n              <td class=\"fly-moderation-queue__actions\">\r\n                @if (isResolvable(r.status)) {\r\n                  <button type=\"button\" class=\"fly-moderation-queue__action-btn\" [disabled]=\"loading()\" (click)=\"openResolve(r)\">\r\n                    {{ 'moderation.resolve' | translate }}\r\n                  </button>\r\n                }\r\n                @if (confirmingLockId() === r.id) {\r\n                  <span class=\"fly-moderation-queue__lock-confirm\">\r\n                    <button type=\"button\" class=\"fly-moderation-queue__cancel-btn\" (click)=\"cancelLock()\">\r\n                      {{ 'common.action.cancel' | translate }}\r\n                    </button>\r\n                    <button type=\"button\" class=\"fly-moderation-queue__danger-btn\" (click)=\"confirmLock(r)\">\r\n                      {{ 'moderation.lock_thread' | translate }}\r\n                    </button>\r\n                  </span>\r\n                } @else {\r\n                  <button type=\"button\" class=\"fly-moderation-queue__action-btn\" [disabled]=\"loading()\" (click)=\"requestLock(r)\">\r\n                    {{ 'moderation.lock_thread' | translate }}\r\n                  </button>\r\n                }\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n\r\n    @if (page().hasMore) {\r\n      <button type=\"button\" class=\"fly-moderation-queue__load-more\" [disabled]=\"loading()\" (click)=\"loadMore()\">\r\n        {{ 'comment.load_more' | translate }}\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 Resolve dialog \u2500\u2500 -->\r\n@if (resolvingReport(); as r) {\r\n  <div class=\"fly-moderation-queue__overlay\">\r\n    <div class=\"fly-moderation-queue__overlay-backdrop\" role=\"button\" tabindex=\"0\"\r\n         [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n         (click)=\"closeResolve()\"\r\n         (keydown.enter)=\"closeResolve()\"\r\n         (keydown.space)=\"onOverlayBackdropSpace($event)\"></div>\r\n    <div\r\n      class=\"fly-moderation-queue__dialog\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"'moderation.resolve_title' | translate\">\r\n      <h3 class=\"fly-moderation-queue__dialog-title\">{{ 'moderation.resolve_title' | translate }}</h3>\r\n\r\n      <fieldset class=\"fly-moderation-queue__resolution-group\">\r\n        <legend>{{ 'moderation.resolution_label' | translate }}</legend>\r\n        <label class=\"fly-moderation-queue__resolution-option\">\r\n          <input\r\n            type=\"radio\"\r\n            [name]=\"resolutionGroupName\"\r\n            [checked]=\"resolutionStatus() === 'ActionTaken'\"\r\n            (change)=\"onResolutionStatusChange('ActionTaken')\" />\r\n          <span>{{ 'moderation.resolution.ActionTaken' | translate }}</span>\r\n        </label>\r\n        <label class=\"fly-moderation-queue__resolution-option\">\r\n          <input\r\n            type=\"radio\"\r\n            [name]=\"resolutionGroupName\"\r\n            [checked]=\"resolutionStatus() === 'Dismissed'\"\r\n            (change)=\"onResolutionStatusChange('Dismissed')\" />\r\n          <span>{{ 'moderation.resolution.Dismissed' | translate }}</span>\r\n        </label>\r\n      </fieldset>\r\n\r\n      @if (resolutionStatus() === 'ActionTaken') {\r\n        <label class=\"fly-moderation-queue__checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"deleteComment()\" (change)=\"onDeleteCommentToggle($event)\" />\r\n          <span>{{ 'moderation.delete_comment_label' | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <textarea\r\n        class=\"fly-moderation-queue__textarea\"\r\n        rows=\"3\"\r\n        [attr.aria-label]=\"'moderation.resolution_note_label' | translate\"\r\n        [placeholder]=\"'moderation.resolution_note_label' | translate\"\r\n        [ngModel]=\"resolutionNote()\"\r\n        (ngModelChange)=\"onResolutionNoteChange($event)\"></textarea>\r\n\r\n      <div class=\"fly-moderation-queue__dialog-actions\">\r\n        <button type=\"button\" class=\"fly-moderation-queue__cancel-btn\" (click)=\"closeResolve()\">\r\n          {{ 'common.action.cancel' | translate }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-moderation-queue__submit-btn\"\r\n          [disabled]=\"!resolutionStatus()\"\r\n          (click)=\"submitResolve(r)\">\r\n          {{ 'moderation.resolve_submit' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_text-tertiary: var(--label-tertiary, #94a3b8);--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_blue: var(--system-blue, #0a84ff);--_orange: var(--system-orange, #ff9f0a);--_green: var(--system-green, #32d74b);--_radius: 8px;--_blue-text: #1d4ed8;--_orange-text: #9a3412;--_green-text: #166534;--_danger-text: #b91c1c;display:block;inline-size:100%;color:var(--_text);font-size:13px}.fly-moderation-queue__body{display:flex;flex-direction:column;gap:16px}.fly-moderation-queue__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.fly-moderation-queue__count{font-weight:700;font-size:14px}.fly-moderation-queue__status-filter{display:inline-flex;flex-wrap:wrap;border:1px solid var(--_border);border-radius:var(--_radius);overflow:hidden}.fly-moderation-queue__status-btn{padding:5px 12px;border:none;border-inline-end:1px solid var(--_border);background:transparent;color:var(--_text-subtle);font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__status-btn:last-child{border-inline-end:none}.fly-moderation-queue__status-btn:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__status-btn--active{background:var(--_accent);color:#fff}.fly-moderation-queue__empty,.fly-moderation-queue__status-msg{margin:0;color:var(--_text-subtle);text-align:center;padding:16px 0}.fly-moderation-queue__error{margin:0;padding:8px 12px;border-radius:var(--_radius);background:color-mix(in srgb,var(--_danger) 12%,transparent);color:var(--_danger);font-size:12px}.fly-moderation-queue__sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.fly-moderation-queue__table-wrap{overflow-x:auto}.fly-moderation-queue__table{inline-size:100%;border-collapse:collapse;font-size:12px}.fly-moderation-queue__table th{text-align:start;padding:6px 10px;color:var(--_text-subtle);font-weight:600;border-block-end:1px solid var(--_border);white-space:nowrap}.fly-moderation-queue__table td{padding:8px 10px;border-block-end:1px solid var(--_border);vertical-align:top}.fly-moderation-queue__reason-cell{display:table-cell}.fly-moderation-queue__reason{display:block;font-weight:600}.fly-moderation-queue__detail{display:block;margin-block-start:2px;color:var(--_text-tertiary);font-size:11px;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-moderation-queue__excerpt{max-inline-size:260px;color:var(--_text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-moderation-queue__subject-link{border:none;background:transparent;padding:0;color:var(--_accent);font:inherit;font-weight:600;cursor:pointer;text-align:start}.fly-moderation-queue__subject-link:hover{text-decoration:underline}.fly-moderation-queue__badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;white-space:nowrap}.fly-moderation-queue__badge--Open{background:color-mix(in srgb,var(--_blue) 12%,#fff);color:var(--_blue-text)}.fly-moderation-queue__badge--UnderReview{background:color-mix(in srgb,var(--_orange) 12%,#fff);color:var(--_orange-text)}.fly-moderation-queue__badge--ActionTaken{background:color-mix(in srgb,var(--_danger) 12%,#fff);color:var(--_danger-text)}.fly-moderation-queue__badge--Dismissed{background:color-mix(in srgb,var(--_green) 12%,#fff);color:var(--_green-text)}.fly-moderation-queue__resolution-note{margin-block-start:4px;color:var(--_text-tertiary);font-size:11px;max-inline-size:200px}.fly-moderation-queue__actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;white-space:nowrap}.fly-moderation-queue__action-btn{border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:4px 10px;color:var(--_text);font:inherit;font-size:11px;font-weight:600;cursor:pointer}.fly-moderation-queue__action-btn:hover:not(:disabled){background:var(--_surface-hover)}.fly-moderation-queue__action-btn:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__lock-confirm{display:inline-flex;align-items:center;gap:6px}.fly-moderation-queue__load-more{align-self:flex-start;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:6px 14px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__load-more:hover:not(:disabled){background:var(--_surface-hover)}.fly-moderation-queue__load-more:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.fly-moderation-queue__overlay-backdrop{position:absolute;inset:0;background:#00000073;border:none;padding:0;margin:0;cursor:pointer}.fly-moderation-queue__dialog{position:relative;z-index:1;inline-size:min(440px,90vw);max-block-size:85vh;overflow-y:auto;background:var(--_surface);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 32px #00000040}.fly-moderation-queue__dialog:focus-visible{outline:2px solid var(--_accent);outline-offset:2px}.fly-moderation-queue__dialog-title{margin:0;font-size:16px;font-weight:700}.fly-moderation-queue__resolution-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:none}.fly-moderation-queue__resolution-group legend{font-weight:600;padding:0;margin-block-end:4px}.fly-moderation-queue__resolution-option,.fly-moderation-queue__checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.fly-moderation-queue__resolution-option input,.fly-moderation-queue__checkbox-row input{accent-color:var(--_accent);cursor:pointer}.fly-moderation-queue__textarea{inline-size:100%;padding:8px 12px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;line-height:1.5;resize:vertical}.fly-moderation-queue__textarea:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}.fly-moderation-queue__dialog-actions{display:flex;justify-content:flex-end;gap:8px}.fly-moderation-queue__submit-btn{padding:6px 16px;border:none;border-radius:var(--_radius);background:var(--_accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__submit-btn:hover:not(:disabled){opacity:.9}.fly-moderation-queue__submit-btn:disabled{opacity:.5;cursor:not-allowed}.fly-moderation-queue__cancel-btn{padding:6px 14px;border:1px solid var(--_border);border-radius:var(--_radius);background:transparent;color:var(--_text-subtle);font:inherit;cursor:pointer}.fly-moderation-queue__cancel-btn:hover{background:var(--_surface-hover)}.fly-moderation-queue__danger-btn{padding:6px 14px;border:none;border-radius:var(--_radius);background:var(--_danger);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__danger-btn:hover{opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyModerationQueueComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-moderation-queue', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-moderation-queue' }, template: "<div class=\"fly-moderation-queue__body\">\r\n  <!-- \u2500\u2500 Header: count + status filter \u2500\u2500 -->\r\n  <header class=\"fly-moderation-queue__header\">\r\n    <span class=\"fly-moderation-queue__count\">\r\n      {{ 'moderation.count' | translate: { n: page().total } }}\r\n    </span>\r\n\r\n    <div class=\"fly-moderation-queue__status-filter\" role=\"group\" [attr.aria-label]=\"'moderation.status_label' | translate\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-moderation-queue__status-btn\"\r\n        [class.fly-moderation-queue__status-btn--active]=\"status() === null\"\r\n        [attr.aria-pressed]=\"status() === null\"\r\n        [disabled]=\"loading()\"\r\n        (click)=\"onStatusPick(null)\">\r\n        {{ 'moderation.status_all' | translate }}\r\n      </button>\r\n      @for (s of statuses; track s) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-moderation-queue__status-btn\"\r\n          [class.fly-moderation-queue__status-btn--active]=\"status() === s\"\r\n          [attr.aria-pressed]=\"status() === s\"\r\n          [disabled]=\"loading()\"\r\n          (click)=\"onStatusPick(s)\">\r\n          {{ 'moderation.status.' + s | translate }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  <!-- \u2500\u2500 States \u2500\u2500 -->\r\n  @if (error()) {\r\n    <p class=\"fly-moderation-queue__error\" role=\"alert\">{{ error() }}</p>\r\n  } @else if (loading() && page().items.length === 0) {\r\n    <p class=\"fly-moderation-queue__status-msg\">{{ 'moderation.loading' | translate }}</p>\r\n  } @else if (page().items.length === 0) {\r\n    <p class=\"fly-moderation-queue__empty\">{{ 'moderation.empty' | translate }}</p>\r\n  } @else {\r\n    <!-- \u2500\u2500 Report table \u2500\u2500 -->\r\n    <div class=\"fly-moderation-queue__table-wrap\">\r\n      <table class=\"fly-moderation-queue__table\">\r\n        <caption class=\"fly-moderation-queue__sr-only\">{{ 'moderation.table_caption' | translate }}</caption>\r\n        <thead>\r\n          <tr>\r\n            <th scope=\"col\">{{ 'moderation.col_reason' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_reporter' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_reported' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_excerpt' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_subject' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_status' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_actions' | translate }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (r of page().items; track r.id) {\r\n            <tr>\r\n              <td class=\"fly-moderation-queue__reason-cell\">\r\n                <span class=\"fly-moderation-queue__reason\">{{ 'comment.reason.' + r.reason | translate }}</span>\r\n                @if (r.detail) {\r\n                  <span class=\"fly-moderation-queue__detail\" [title]=\"r.detail\">{{ r.detail }}</span>\r\n                }\r\n              </td>\r\n              <td>{{ r.reporterDisplayName || r.reporterUserId }}</td>\r\n              <td>{{ formatDate(r.createdAt) }}</td>\r\n              <td class=\"fly-moderation-queue__excerpt\">{{ r.commentExcerpt || '\u2014' }}</td>\r\n              <td>\r\n                <button type=\"button\" class=\"fly-moderation-queue__subject-link\" [title]=\"subjectHref(r)\" (click)=\"onOpenSubject(r)\">\r\n                  {{ subjectDisplay(r) }}\r\n                </button>\r\n              </td>\r\n              <td>\r\n                <span class=\"fly-moderation-queue__badge\" [class]=\"'fly-moderation-queue__badge--' + r.status\">\r\n                  {{ 'moderation.status.' + r.status | translate }}\r\n                </span>\r\n                @if (r.resolutionNote) {\r\n                  <div class=\"fly-moderation-queue__resolution-note\">{{ r.resolutionNote }}</div>\r\n                }\r\n              </td>\r\n              <td class=\"fly-moderation-queue__actions\">\r\n                @if (isResolvable(r.status)) {\r\n                  <button type=\"button\" class=\"fly-moderation-queue__action-btn\" [disabled]=\"loading()\" (click)=\"openResolve(r)\">\r\n                    {{ 'moderation.resolve' | translate }}\r\n                  </button>\r\n                }\r\n                @if (confirmingLockId() === r.id) {\r\n                  <span class=\"fly-moderation-queue__lock-confirm\">\r\n                    <button type=\"button\" class=\"fly-moderation-queue__cancel-btn\" (click)=\"cancelLock()\">\r\n                      {{ 'common.action.cancel' | translate }}\r\n                    </button>\r\n                    <button type=\"button\" class=\"fly-moderation-queue__danger-btn\" (click)=\"confirmLock(r)\">\r\n                      {{ 'moderation.lock_thread' | translate }}\r\n                    </button>\r\n                  </span>\r\n                } @else {\r\n                  <button type=\"button\" class=\"fly-moderation-queue__action-btn\" [disabled]=\"loading()\" (click)=\"requestLock(r)\">\r\n                    {{ 'moderation.lock_thread' | translate }}\r\n                  </button>\r\n                }\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n\r\n    @if (page().hasMore) {\r\n      <button type=\"button\" class=\"fly-moderation-queue__load-more\" [disabled]=\"loading()\" (click)=\"loadMore()\">\r\n        {{ 'comment.load_more' | translate }}\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 Resolve dialog \u2500\u2500 -->\r\n@if (resolvingReport(); as r) {\r\n  <div class=\"fly-moderation-queue__overlay\">\r\n    <div class=\"fly-moderation-queue__overlay-backdrop\" role=\"button\" tabindex=\"0\"\r\n         [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n         (click)=\"closeResolve()\"\r\n         (keydown.enter)=\"closeResolve()\"\r\n         (keydown.space)=\"onOverlayBackdropSpace($event)\"></div>\r\n    <div\r\n      class=\"fly-moderation-queue__dialog\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"'moderation.resolve_title' | translate\">\r\n      <h3 class=\"fly-moderation-queue__dialog-title\">{{ 'moderation.resolve_title' | translate }}</h3>\r\n\r\n      <fieldset class=\"fly-moderation-queue__resolution-group\">\r\n        <legend>{{ 'moderation.resolution_label' | translate }}</legend>\r\n        <label class=\"fly-moderation-queue__resolution-option\">\r\n          <input\r\n            type=\"radio\"\r\n            [name]=\"resolutionGroupName\"\r\n            [checked]=\"resolutionStatus() === 'ActionTaken'\"\r\n            (change)=\"onResolutionStatusChange('ActionTaken')\" />\r\n          <span>{{ 'moderation.resolution.ActionTaken' | translate }}</span>\r\n        </label>\r\n        <label class=\"fly-moderation-queue__resolution-option\">\r\n          <input\r\n            type=\"radio\"\r\n            [name]=\"resolutionGroupName\"\r\n            [checked]=\"resolutionStatus() === 'Dismissed'\"\r\n            (change)=\"onResolutionStatusChange('Dismissed')\" />\r\n          <span>{{ 'moderation.resolution.Dismissed' | translate }}</span>\r\n        </label>\r\n      </fieldset>\r\n\r\n      @if (resolutionStatus() === 'ActionTaken') {\r\n        <label class=\"fly-moderation-queue__checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"deleteComment()\" (change)=\"onDeleteCommentToggle($event)\" />\r\n          <span>{{ 'moderation.delete_comment_label' | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <textarea\r\n        class=\"fly-moderation-queue__textarea\"\r\n        rows=\"3\"\r\n        [attr.aria-label]=\"'moderation.resolution_note_label' | translate\"\r\n        [placeholder]=\"'moderation.resolution_note_label' | translate\"\r\n        [ngModel]=\"resolutionNote()\"\r\n        (ngModelChange)=\"onResolutionNoteChange($event)\"></textarea>\r\n\r\n      <div class=\"fly-moderation-queue__dialog-actions\">\r\n        <button type=\"button\" class=\"fly-moderation-queue__cancel-btn\" (click)=\"closeResolve()\">\r\n          {{ 'common.action.cancel' | translate }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-moderation-queue__submit-btn\"\r\n          [disabled]=\"!resolutionStatus()\"\r\n          (click)=\"submitResolve(r)\">\r\n          {{ 'moderation.resolve_submit' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_text-tertiary: var(--label-tertiary, #94a3b8);--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_blue: var(--system-blue, #0a84ff);--_orange: var(--system-orange, #ff9f0a);--_green: var(--system-green, #32d74b);--_radius: 8px;--_blue-text: #1d4ed8;--_orange-text: #9a3412;--_green-text: #166534;--_danger-text: #b91c1c;display:block;inline-size:100%;color:var(--_text);font-size:13px}.fly-moderation-queue__body{display:flex;flex-direction:column;gap:16px}.fly-moderation-queue__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.fly-moderation-queue__count{font-weight:700;font-size:14px}.fly-moderation-queue__status-filter{display:inline-flex;flex-wrap:wrap;border:1px solid var(--_border);border-radius:var(--_radius);overflow:hidden}.fly-moderation-queue__status-btn{padding:5px 12px;border:none;border-inline-end:1px solid var(--_border);background:transparent;color:var(--_text-subtle);font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__status-btn:last-child{border-inline-end:none}.fly-moderation-queue__status-btn:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__status-btn--active{background:var(--_accent);color:#fff}.fly-moderation-queue__empty,.fly-moderation-queue__status-msg{margin:0;color:var(--_text-subtle);text-align:center;padding:16px 0}.fly-moderation-queue__error{margin:0;padding:8px 12px;border-radius:var(--_radius);background:color-mix(in srgb,var(--_danger) 12%,transparent);color:var(--_danger);font-size:12px}.fly-moderation-queue__sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.fly-moderation-queue__table-wrap{overflow-x:auto}.fly-moderation-queue__table{inline-size:100%;border-collapse:collapse;font-size:12px}.fly-moderation-queue__table th{text-align:start;padding:6px 10px;color:var(--_text-subtle);font-weight:600;border-block-end:1px solid var(--_border);white-space:nowrap}.fly-moderation-queue__table td{padding:8px 10px;border-block-end:1px solid var(--_border);vertical-align:top}.fly-moderation-queue__reason-cell{display:table-cell}.fly-moderation-queue__reason{display:block;font-weight:600}.fly-moderation-queue__detail{display:block;margin-block-start:2px;color:var(--_text-tertiary);font-size:11px;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-moderation-queue__excerpt{max-inline-size:260px;color:var(--_text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-moderation-queue__subject-link{border:none;background:transparent;padding:0;color:var(--_accent);font:inherit;font-weight:600;cursor:pointer;text-align:start}.fly-moderation-queue__subject-link:hover{text-decoration:underline}.fly-moderation-queue__badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;white-space:nowrap}.fly-moderation-queue__badge--Open{background:color-mix(in srgb,var(--_blue) 12%,#fff);color:var(--_blue-text)}.fly-moderation-queue__badge--UnderReview{background:color-mix(in srgb,var(--_orange) 12%,#fff);color:var(--_orange-text)}.fly-moderation-queue__badge--ActionTaken{background:color-mix(in srgb,var(--_danger) 12%,#fff);color:var(--_danger-text)}.fly-moderation-queue__badge--Dismissed{background:color-mix(in srgb,var(--_green) 12%,#fff);color:var(--_green-text)}.fly-moderation-queue__resolution-note{margin-block-start:4px;color:var(--_text-tertiary);font-size:11px;max-inline-size:200px}.fly-moderation-queue__actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;white-space:nowrap}.fly-moderation-queue__action-btn{border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:4px 10px;color:var(--_text);font:inherit;font-size:11px;font-weight:600;cursor:pointer}.fly-moderation-queue__action-btn:hover:not(:disabled){background:var(--_surface-hover)}.fly-moderation-queue__action-btn:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__lock-confirm{display:inline-flex;align-items:center;gap:6px}.fly-moderation-queue__load-more{align-self:flex-start;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:6px 14px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__load-more:hover:not(:disabled){background:var(--_surface-hover)}.fly-moderation-queue__load-more:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.fly-moderation-queue__overlay-backdrop{position:absolute;inset:0;background:#00000073;border:none;padding:0;margin:0;cursor:pointer}.fly-moderation-queue__dialog{position:relative;z-index:1;inline-size:min(440px,90vw);max-block-size:85vh;overflow-y:auto;background:var(--_surface);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 32px #00000040}.fly-moderation-queue__dialog:focus-visible{outline:2px solid var(--_accent);outline-offset:2px}.fly-moderation-queue__dialog-title{margin:0;font-size:16px;font-weight:700}.fly-moderation-queue__resolution-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:none}.fly-moderation-queue__resolution-group legend{font-weight:600;padding:0;margin-block-end:4px}.fly-moderation-queue__resolution-option,.fly-moderation-queue__checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.fly-moderation-queue__resolution-option input,.fly-moderation-queue__checkbox-row input{accent-color:var(--_accent);cursor:pointer}.fly-moderation-queue__textarea{inline-size:100%;padding:8px 12px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;line-height:1.5;resize:vertical}.fly-moderation-queue__textarea:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}.fly-moderation-queue__dialog-actions{display:flex;justify-content:flex-end;gap:8px}.fly-moderation-queue__submit-btn{padding:6px 16px;border:none;border-radius:var(--_radius);background:var(--_accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__submit-btn:hover:not(:disabled){opacity:.9}.fly-moderation-queue__submit-btn:disabled{opacity:.5;cursor:not-allowed}.fly-moderation-queue__cancel-btn{padding:6px 14px;border:1px solid var(--_border);border-radius:var(--_radius);background:transparent;color:var(--_text-subtle);font:inherit;cursor:pointer}.fly-moderation-queue__cancel-btn:hover{background:var(--_surface-hover)}.fly-moderation-queue__danger-btn{padding:6px 14px;border:none;border-radius:var(--_radius);background:var(--_danger);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__danger-btn:hover{opacity:.9}\n"] }]
-        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], loadPage: [{ type: i0.Output, args: ["loadPage"] }], resolve: [{ type: i0.Output, args: ["resolve"] }], lockThread: [{ type: i0.Output, args: ["lockThread"] }], openSubject: [{ type: i0.Output, args: ["openSubject"] }], onEscape: [{
+            args: [{ selector: 'fly-moderation-queue', standalone: true, imports: [CommonModule, FormsModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-moderation-queue' }, template: "<div class=\"fly-moderation-queue__body\">\r\n  <!-- \u2500\u2500 Header: count + status filter \u2500\u2500 -->\r\n  <header class=\"fly-moderation-queue__header\">\r\n    <span class=\"fly-moderation-queue__count\">\r\n      {{ 'moderation.count' | translate: { n: page().total } }}\r\n    </span>\r\n\r\n    <div class=\"fly-moderation-queue__status-filter\" role=\"group\" [attr.aria-label]=\"'moderation.status_label' | translate\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"fly-moderation-queue__status-btn\"\r\n        [class.fly-moderation-queue__status-btn--active]=\"status() === null\"\r\n        [attr.aria-pressed]=\"status() === null\"\r\n        [disabled]=\"loading()\"\r\n        (click)=\"onStatusPick(null)\">\r\n        {{ 'moderation.status_all' | translate }}\r\n      </button>\r\n      @for (s of statuses; track s) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-moderation-queue__status-btn\"\r\n          [class.fly-moderation-queue__status-btn--active]=\"status() === s\"\r\n          [attr.aria-pressed]=\"status() === s\"\r\n          [disabled]=\"loading()\"\r\n          (click)=\"onStatusPick(s)\">\r\n          {{ 'moderation.status.' + s | translate }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </header>\r\n\r\n  <!-- \u2500\u2500 States \u2500\u2500 -->\r\n  @if (error()) {\r\n    <p class=\"fly-moderation-queue__error\" role=\"alert\">{{ error() }}</p>\r\n  } @else if (loading() && page().items.length === 0) {\r\n    <p class=\"fly-moderation-queue__status-msg\">{{ 'moderation.loading' | translate }}</p>\r\n  } @else if (page().items.length === 0) {\r\n    <p class=\"fly-moderation-queue__empty\">{{ 'moderation.empty' | translate }}</p>\r\n  } @else {\r\n    <!-- \u2500\u2500 Report table \u2500\u2500 -->\r\n    <div class=\"fly-moderation-queue__table-wrap\">\r\n      <table class=\"fly-moderation-queue__table\">\r\n        <caption class=\"fly-moderation-queue__sr-only\">{{ 'moderation.table_caption' | translate }}</caption>\r\n        <thead>\r\n          <tr>\r\n            <th scope=\"col\">{{ 'moderation.col_reason' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_reporter' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_reported' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_excerpt' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_subject' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_status' | translate }}</th>\r\n            <th scope=\"col\">{{ 'moderation.col_actions' | translate }}</th>\r\n          </tr>\r\n        </thead>\r\n        <tbody>\r\n          @for (r of page().items; track r.id) {\r\n            <tr>\r\n              <td class=\"fly-moderation-queue__reason-cell\">\r\n                <span class=\"fly-moderation-queue__reason\">{{ 'comment.reason.' + r.reason | translate }}</span>\r\n                @if (r.detail) {\r\n                  <span class=\"fly-moderation-queue__detail\" [title]=\"r.detail\">{{ r.detail }}</span>\r\n                }\r\n              </td>\r\n              <td>{{ reporterLabel(r) }}</td>\r\n              <td>{{ formatDate(r.createdAt) }}</td>\r\n              <td class=\"fly-moderation-queue__excerpt\">{{ r.commentExcerpt || '\u2014' }}</td>\r\n              <td>\r\n                <button type=\"button\" class=\"fly-moderation-queue__subject-link\" [title]=\"subjectHref(r)\" (click)=\"onOpenSubject(r)\">\r\n                  {{ subjectDisplay(r) }}\r\n                </button>\r\n              </td>\r\n              <td>\r\n                <span class=\"fly-moderation-queue__badge\" [class]=\"'fly-moderation-queue__badge--' + r.status\">\r\n                  {{ 'moderation.status.' + r.status | translate }}\r\n                </span>\r\n                @if (r.resolutionNote) {\r\n                  <div class=\"fly-moderation-queue__resolution-note\">{{ r.resolutionNote }}</div>\r\n                }\r\n              </td>\r\n              <td class=\"fly-moderation-queue__actions\">\r\n                @if (isResolvable(r.status)) {\r\n                  <button type=\"button\" class=\"fly-moderation-queue__action-btn\" [disabled]=\"loading()\" (click)=\"openResolve(r)\">\r\n                    {{ 'moderation.resolve' | translate }}\r\n                  </button>\r\n                }\r\n                @if (confirmingLockId() === r.id) {\r\n                  <span class=\"fly-moderation-queue__lock-confirm\">\r\n                    <button type=\"button\" class=\"fly-moderation-queue__cancel-btn\" (click)=\"cancelLock()\">\r\n                      {{ 'common.action.cancel' | translate }}\r\n                    </button>\r\n                    <button type=\"button\" class=\"fly-moderation-queue__danger-btn\" (click)=\"confirmLock(r)\">\r\n                      {{ 'moderation.lock_thread' | translate }}\r\n                    </button>\r\n                  </span>\r\n                } @else {\r\n                  <button type=\"button\" class=\"fly-moderation-queue__action-btn\" [disabled]=\"loading()\" (click)=\"requestLock(r)\">\r\n                    {{ 'moderation.lock_thread' | translate }}\r\n                  </button>\r\n                }\r\n              </td>\r\n            </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n\r\n    @if (page().hasMore) {\r\n      <button type=\"button\" class=\"fly-moderation-queue__load-more\" [disabled]=\"loading()\" (click)=\"loadMore()\">\r\n        {{ 'comment.load_more' | translate }}\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- \u2500\u2500 Resolve dialog \u2500\u2500 -->\r\n@if (resolvingReport(); as r) {\r\n  <div class=\"fly-moderation-queue__overlay\">\r\n    <div class=\"fly-moderation-queue__overlay-backdrop\" role=\"button\" tabindex=\"0\"\r\n         [attr.aria-label]=\"'common.action.cancel' | translate\"\r\n         (click)=\"closeResolve()\"\r\n         (keydown.enter)=\"closeResolve()\"\r\n         (keydown.space)=\"onOverlayBackdropSpace($event)\"></div>\r\n    <div\r\n      class=\"fly-moderation-queue__dialog\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"'moderation.resolve_title' | translate\">\r\n      <h3 class=\"fly-moderation-queue__dialog-title\">{{ 'moderation.resolve_title' | translate }}</h3>\r\n\r\n      <fieldset class=\"fly-moderation-queue__resolution-group\">\r\n        <legend>{{ 'moderation.resolution_label' | translate }}</legend>\r\n        <label class=\"fly-moderation-queue__resolution-option\">\r\n          <input\r\n            type=\"radio\"\r\n            [name]=\"resolutionGroupName\"\r\n            [checked]=\"resolutionStatus() === 'ActionTaken'\"\r\n            (change)=\"onResolutionStatusChange('ActionTaken')\" />\r\n          <span>{{ 'moderation.resolution.ActionTaken' | translate }}</span>\r\n        </label>\r\n        <label class=\"fly-moderation-queue__resolution-option\">\r\n          <input\r\n            type=\"radio\"\r\n            [name]=\"resolutionGroupName\"\r\n            [checked]=\"resolutionStatus() === 'Dismissed'\"\r\n            (change)=\"onResolutionStatusChange('Dismissed')\" />\r\n          <span>{{ 'moderation.resolution.Dismissed' | translate }}</span>\r\n        </label>\r\n      </fieldset>\r\n\r\n      @if (resolutionStatus() === 'ActionTaken') {\r\n        <label class=\"fly-moderation-queue__checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"deleteComment()\" (change)=\"onDeleteCommentToggle($event)\" />\r\n          <span>{{ 'moderation.delete_comment_label' | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <textarea\r\n        class=\"fly-moderation-queue__textarea\"\r\n        rows=\"3\"\r\n        [attr.aria-label]=\"'moderation.resolution_note_label' | translate\"\r\n        [placeholder]=\"'moderation.resolution_note_label' | translate\"\r\n        [ngModel]=\"resolutionNote()\"\r\n        (ngModelChange)=\"onResolutionNoteChange($event)\"></textarea>\r\n\r\n      <div class=\"fly-moderation-queue__dialog-actions\">\r\n        <button type=\"button\" class=\"fly-moderation-queue__cancel-btn\" (click)=\"closeResolve()\">\r\n          {{ 'common.action.cancel' | translate }}\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-moderation-queue__submit-btn\"\r\n          [disabled]=\"!resolutionStatus()\"\r\n          (click)=\"submitResolve(r)\">\r\n          {{ 'moderation.resolve_submit' | translate }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_text-tertiary: var(--label-tertiary, #94a3b8);--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_blue: var(--system-blue, #0a84ff);--_orange: var(--system-orange, #ff9f0a);--_green: var(--system-green, #32d74b);--_radius: 8px;--_blue-text: #1d4ed8;--_orange-text: #9a3412;--_green-text: #166534;--_danger-text: #b91c1c;display:block;inline-size:100%;color:var(--_text);font-size:13px}.fly-moderation-queue__body{display:flex;flex-direction:column;gap:16px}.fly-moderation-queue__header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.fly-moderation-queue__count{font-weight:700;font-size:14px}.fly-moderation-queue__status-filter{display:inline-flex;flex-wrap:wrap;border:1px solid var(--_border);border-radius:var(--_radius);overflow:hidden}.fly-moderation-queue__status-btn{padding:5px 12px;border:none;border-inline-end:1px solid var(--_border);background:transparent;color:var(--_text-subtle);font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__status-btn:last-child{border-inline-end:none}.fly-moderation-queue__status-btn:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__status-btn--active{background:var(--_accent);color:#fff}.fly-moderation-queue__empty,.fly-moderation-queue__status-msg{margin:0;color:var(--_text-subtle);text-align:center;padding:16px 0}.fly-moderation-queue__error{margin:0;padding:8px 12px;border-radius:var(--_radius);background:color-mix(in srgb,var(--_danger) 12%,transparent);color:var(--_danger);font-size:12px}.fly-moderation-queue__sr-only{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.fly-moderation-queue__table-wrap{overflow-x:auto}.fly-moderation-queue__table{inline-size:100%;border-collapse:collapse;font-size:12px}.fly-moderation-queue__table th{text-align:start;padding:6px 10px;color:var(--_text-subtle);font-weight:600;border-block-end:1px solid var(--_border);white-space:nowrap}.fly-moderation-queue__table td{padding:8px 10px;border-block-end:1px solid var(--_border);vertical-align:top}.fly-moderation-queue__reason-cell{display:table-cell}.fly-moderation-queue__reason{display:block;font-weight:600}.fly-moderation-queue__detail{display:block;margin-block-start:2px;color:var(--_text-tertiary);font-size:11px;max-inline-size:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-moderation-queue__excerpt{max-inline-size:260px;color:var(--_text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-moderation-queue__subject-link{border:none;background:transparent;padding:0;color:var(--_accent);font:inherit;font-weight:600;cursor:pointer;text-align:start}.fly-moderation-queue__subject-link:hover{text-decoration:underline}.fly-moderation-queue__badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;white-space:nowrap}.fly-moderation-queue__badge--Open{background:color-mix(in srgb,var(--_blue) 12%,#fff);color:var(--_blue-text)}.fly-moderation-queue__badge--UnderReview{background:color-mix(in srgb,var(--_orange) 12%,#fff);color:var(--_orange-text)}.fly-moderation-queue__badge--ActionTaken{background:color-mix(in srgb,var(--_danger) 12%,#fff);color:var(--_danger-text)}.fly-moderation-queue__badge--Dismissed{background:color-mix(in srgb,var(--_green) 12%,#fff);color:var(--_green-text)}.fly-moderation-queue__resolution-note{margin-block-start:4px;color:var(--_text-tertiary);font-size:11px;max-inline-size:200px}.fly-moderation-queue__actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;white-space:nowrap}.fly-moderation-queue__action-btn{border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:4px 10px;color:var(--_text);font:inherit;font-size:11px;font-weight:600;cursor:pointer}.fly-moderation-queue__action-btn:hover:not(:disabled){background:var(--_surface-hover)}.fly-moderation-queue__action-btn:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__lock-confirm{display:inline-flex;align-items:center;gap:6px}.fly-moderation-queue__load-more{align-self:flex-start;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);padding:6px 14px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__load-more:hover:not(:disabled){background:var(--_surface-hover)}.fly-moderation-queue__load-more:disabled{opacity:.6;cursor:not-allowed}.fly-moderation-queue__overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000}.fly-moderation-queue__overlay-backdrop{position:absolute;inset:0;background:#00000073;border:none;padding:0;margin:0;cursor:pointer}.fly-moderation-queue__dialog{position:relative;z-index:1;inline-size:min(440px,90vw);max-block-size:85vh;overflow-y:auto;background:var(--_surface);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 12px 32px #00000040}.fly-moderation-queue__dialog:focus-visible{outline:2px solid var(--_accent);outline-offset:2px}.fly-moderation-queue__dialog-title{margin:0;font-size:16px;font-weight:700}.fly-moderation-queue__resolution-group{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:none}.fly-moderation-queue__resolution-group legend{font-weight:600;padding:0;margin-block-end:4px}.fly-moderation-queue__resolution-option,.fly-moderation-queue__checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.fly-moderation-queue__resolution-option input,.fly-moderation-queue__checkbox-row input{accent-color:var(--_accent);cursor:pointer}.fly-moderation-queue__textarea{inline-size:100%;padding:8px 12px;border:1px solid var(--_border);border-radius:var(--_radius);background:var(--_surface);color:var(--_text);font:inherit;line-height:1.5;resize:vertical}.fly-moderation-queue__textarea:focus-visible{outline:2px solid var(--_accent);outline-offset:1px}.fly-moderation-queue__dialog-actions{display:flex;justify-content:flex-end;gap:8px}.fly-moderation-queue__submit-btn{padding:6px 16px;border:none;border-radius:var(--_radius);background:var(--_accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__submit-btn:hover:not(:disabled){opacity:.9}.fly-moderation-queue__submit-btn:disabled{opacity:.5;cursor:not-allowed}.fly-moderation-queue__cancel-btn{padding:6px 14px;border:1px solid var(--_border);border-radius:var(--_radius);background:transparent;color:var(--_text-subtle);font:inherit;cursor:pointer}.fly-moderation-queue__cancel-btn:hover{background:var(--_surface-hover)}.fly-moderation-queue__danger-btn{padding:6px 14px;border:none;border-radius:var(--_radius);background:var(--_danger);color:#fff;font:inherit;font-weight:600;cursor:pointer}.fly-moderation-queue__danger-btn:hover{opacity:.9}\n"] }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], resolveDisplayName: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolveDisplayName", required: false }] }], loadPage: [{ type: i0.Output, args: ["loadPage"] }], resolve: [{ type: i0.Output, args: ["resolve"] }], lockThread: [{ type: i0.Output, args: ["lockThread"] }], openSubject: [{ type: i0.Output, args: ["openSubject"] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }] } });
@@ -16245,11 +16721,11 @@ class FlyPeoplePickerComponent {
         this.selectionChange.emit(this._selected().map((o) => o.id));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPeoplePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyPeoplePickerComponent, isStandalone: true, selector: "fly-people-picker", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, excludeIds: { classPropertyName: "excludeIds", publicName: "excludeIds", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "fly-people-picker" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: FlyTypeaheadComponent, descendants: true }], ngImport: i0, template: "@if (selected().length > 0) {\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\n    @for (o of selected(); track o.id) {\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\n          @if (o.avatarUrl) {\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\n          } @else {\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\n          }\n        </span>\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\n        <button\n          type=\"button\"\n          class=\"fly-people-picker__chip-remove\"\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\n          (click)=\"remove(o.id)\">\n          \u2715\n        </button>\n      </li>\n    }\n  </ul>\n}\n\n@if (showSearch()) {\n  <fly-typeahead\n    [searchFn]=\"typeaheadSearchFn\"\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\n    [allowFreeText]=\"false\"\n    (selected)=\"onPicked($event)\" />\n} @else {\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\n    {{ 'people_picker.change' | translate }}\n  </button>\n}\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FlyTypeaheadComponent, selector: "fly-typeahead", inputs: ["searchFn", "debounceMs", "placeholder", "ariaLabel", "value", "allowFreeText", "openOnFocus"], outputs: ["valueChange", "selected", "cleared"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyPeoplePickerComponent, isStandalone: true, selector: "fly-people-picker", inputs: { searchFn: { classPropertyName: "searchFn", publicName: "searchFn", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, excludeIds: { classPropertyName: "excludeIds", publicName: "excludeIds", isSignal: true, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "fly-people-picker" }, viewQueries: [{ propertyName: "typeahead", first: true, predicate: FlyTypeaheadComponent, descendants: true }], ngImport: i0, template: "@if (selected().length > 0) {\r\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\r\n    @for (o of selected(); track o.id) {\r\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\r\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\r\n          @if (o.avatarUrl) {\r\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\r\n          } @else {\r\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\r\n          }\r\n        </span>\r\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-people-picker__chip-remove\"\r\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\r\n          (click)=\"remove(o.id)\">\r\n          \u2715\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n\r\n@if (showSearch()) {\r\n  <fly-typeahead\r\n    [searchFn]=\"typeaheadSearchFn\"\r\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\r\n    [allowFreeText]=\"false\"\r\n    (selected)=\"onPicked($event)\" />\r\n} @else {\r\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\r\n    {{ 'people_picker.change' | translate }}\r\n  </button>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FlyTypeaheadComponent, selector: "fly-typeahead", inputs: ["searchFn", "debounceMs", "placeholder", "ariaLabel", "value", "allowFreeText", "openOnFocus"], outputs: ["valueChange", "selected", "cleared"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyPeoplePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-people-picker', standalone: true, imports: [CommonModule, TranslatePipe, FlyTypeaheadComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-people-picker' }, template: "@if (selected().length > 0) {\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\n    @for (o of selected(); track o.id) {\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\n          @if (o.avatarUrl) {\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\n          } @else {\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\n          }\n        </span>\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\n        <button\n          type=\"button\"\n          class=\"fly-people-picker__chip-remove\"\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\n          (click)=\"remove(o.id)\">\n          \u2715\n        </button>\n      </li>\n    }\n  </ul>\n}\n\n@if (showSearch()) {\n  <fly-typeahead\n    [searchFn]=\"typeaheadSearchFn\"\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\n    [allowFreeText]=\"false\"\n    (selected)=\"onPicked($event)\" />\n} @else {\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\n    {{ 'people_picker.change' | translate }}\n  </button>\n}\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"] }]
+            args: [{ selector: 'fly-people-picker', standalone: true, imports: [CommonModule, TranslatePipe, FlyTypeaheadComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'fly-people-picker' }, template: "@if (selected().length > 0) {\r\n  <ul class=\"fly-people-picker__chips\" role=\"list\">\r\n    @for (o of selected(); track o.id) {\r\n      <li class=\"fly-people-picker__chip\" role=\"listitem\">\r\n        <span class=\"fly-people-picker__chip-avatar\" aria-hidden=\"true\">\r\n          @if (o.avatarUrl) {\r\n            <img [src]=\"o.avatarUrl\" alt=\"\" />\r\n          } @else {\r\n            <span class=\"fly-people-picker__chip-initials\">{{ initialsFor(o.displayName) }}</span>\r\n          }\r\n        </span>\r\n        <span class=\"fly-people-picker__chip-name\" [title]=\"o.email || o.displayName\">{{ o.displayName }}</span>\r\n        <button\r\n          type=\"button\"\r\n          class=\"fly-people-picker__chip-remove\"\r\n          [attr.aria-label]=\"'people_picker.remove' | translate: { name: o.displayName }\"\r\n          (click)=\"remove(o.id)\">\r\n          \u2715\r\n        </button>\r\n      </li>\r\n    }\r\n  </ul>\r\n}\r\n\r\n@if (showSearch()) {\r\n  <fly-typeahead\r\n    [searchFn]=\"typeaheadSearchFn\"\r\n    [placeholder]=\"placeholder() || ('people_picker.search_placeholder' | translate)\"\r\n    [allowFreeText]=\"false\"\r\n    (selected)=\"onPicked($event)\" />\r\n} @else {\r\n  <button type=\"button\" class=\"fly-people-picker__change-btn\" (click)=\"change()\">\r\n    {{ 'people_picker.change' | translate }}\r\n  </button>\r\n}\r\n", styles: [":host,:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--_surface: var(--surface-card, #fff);--_surface-hover: var(--surface-hover, #f1f5f9);--_border: var(--separator, var(--surface-border, #e2e8f0));--_text: var(--label-primary, var(--text-color, #0f172a));--_text-subtle: var(--label-secondary, var(--text-color-secondary, #64748b));--_fill: var(--fill-tertiary, #f3f4f6);--_accent: var(--accent);--_danger: var(--system-red, #ef4444);--_radius: 999px;display:flex;flex-direction:column;gap:8px;inline-size:100%;color:var(--_text);font-size:13px}.fly-people-picker__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}.fly-people-picker__chip{display:inline-flex;align-items:center;gap:6px;padding-block:3px;padding-inline:3px 6px;border-radius:var(--_radius);background:var(--_fill);max-inline-size:220px}.fly-people-picker__chip-avatar{inline-size:22px;block-size:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--_surface);display:flex;align-items:center;justify-content:center}.fly-people-picker__chip-avatar img{inline-size:100%;block-size:100%;object-fit:cover}.fly-people-picker__chip-initials{font-size:9px;font-weight:700;color:var(--_text-subtle);text-transform:uppercase}.fly-people-picker__chip-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-people-picker__chip-remove{border:none;background:transparent;padding:2px;margin-inline-start:2px;border-radius:50%;color:var(--_text-subtle);font-size:10px;line-height:1;cursor:pointer;flex:none}.fly-people-picker__chip-remove:hover{background:color-mix(in srgb,var(--_danger) 18%,transparent);color:var(--_danger)}.fly-people-picker__change-btn{align-self:flex-start;border:1px solid var(--_border);border-radius:8px;background:var(--_surface);padding:5px 12px;color:var(--_text);font:inherit;font-weight:600;cursor:pointer}.fly-people-picker__change-btn:hover{background:var(--_surface-hover)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFn", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], excludeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "excludeIds", required: false }] }], initialSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelection", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], typeahead: [{
                 type: ViewChild,
                 args: [FlyTypeaheadComponent]
@@ -17322,8 +17798,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Circular 34px icon-only button (ported from the legacy global
  * `.circles-iconbtn` disc — both render identically until the P6 sweep).
  *
- * `tooltipKey` resolves through {@link I18nService} and wires BOTH
- * `data-tooltip` (CSS tooltip) and `aria-label`, re-resolving on locale change.
+ * `tooltipKey` resolves through {@link I18nService} and wires BOTH `data-tooltip` and
+ * `aria-label`, re-resolving on locale change.
+ *
+ * The label is FLOATED by {@link FlyTooltipDirective} (a body-parented `position: fixed`
+ * node), listed here as a host directive. It used to be a CSS `::before` on
+ * `[data-tooltip]`, which any scrolling or `overflow: hidden` ancestor clipped — the
+ * boards toolbar rail cut every tip off inside its own column. The directive reads the
+ * attribute this component writes, so there is no input to keep in sync.
  */
 class FlyIconButtonComponent {
     i18n = inject(I18nService);
@@ -17356,11 +17838,11 @@ class FlyIconButtonComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: FlyIconButtonComponent, isStandalone: true, selector: "button[fly-icon-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, tooltipKey: { classPropertyName: "tooltipKey", publicName: "tooltipKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "class.on": "active()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;padding:0;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;font-family:inherit;transition:background var(--t-state),border-color var(--t-state),color var(--t-state)}:host:hover{background:var(--bg-3);color:var(--ink);border-color:var(--line-2)}:host:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host:disabled{opacity:.5;cursor:not-allowed}:host ::ng-deep svg{width:16px;height:16px}:host .pi,:host ::ng-deep .pi{font-size:16px}:host(.on){background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}:host([data-variant=primary]){background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}:host([data-variant=primary]):hover{background:var(--grad);border:0;color:var(--ink-inverse);filter:brightness(1.05);box-shadow:var(--shadow-accent)}:host([data-variant=danger]){color:var(--danger)}:host([data-variant=danger]):hover{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: FlyIconButtonComponent, isStandalone: true, selector: "button[fly-icon-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, tooltipKey: { classPropertyName: "tooltipKey", publicName: "tooltipKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "class.on": "active()" } }, hostDirectives: [{ directive: FlyTooltipDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;padding:0;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;font-family:inherit;transition:background var(--t-state),border-color var(--t-state),color var(--t-state)}:host:hover{background:var(--bg-3);color:var(--ink);border-color:var(--line-2)}:host:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host:disabled{opacity:.5;cursor:not-allowed}:host ::ng-deep svg{width:16px;height:16px}:host .pi,:host ::ng-deep .pi{font-size:16px}:host(.on){background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}:host([data-variant=primary]){background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}:host([data-variant=primary]):hover{background:var(--grad);border:0;color:var(--ink-inverse);filter:brightness(1.05);box-shadow:var(--shadow-accent)}:host([data-variant=danger]){color:var(--danger)}:host([data-variant=danger]):hover{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[fly-icon-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'button[fly-icon-button]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [FlyTooltipDirective], host: {
                         '[attr.data-variant]': 'variant()',
                         '[class.on]': 'active()',
                     }, template: '<ng-content />', styles: [":host{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;padding:0;border-radius:50%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;font-family:inherit;transition:background var(--t-state),border-color var(--t-state),color var(--t-state)}:host:hover{background:var(--bg-3);color:var(--ink);border-color:var(--line-2)}:host:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host:disabled{opacity:.5;cursor:not-allowed}:host ::ng-deep svg{width:16px;height:16px}:host .pi,:host ::ng-deep .pi{font-size:16px}:host(.on){background:var(--bg-3);border-color:var(--line-2);color:var(--ink)}:host([data-variant=primary]){background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}:host([data-variant=primary]):hover{background:var(--grad);border:0;color:var(--ink-inverse);filter:brightness(1.05);box-shadow:var(--shadow-accent)}:host([data-variant=danger]){color:var(--danger)}:host([data-variant=danger]):hover{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}\n"] }]
@@ -17519,11 +18001,11 @@ class StatusBadgeComponent {
         return `common.status.${this.status().toLowerCase()}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: StatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: StatusBadgeComponent, isStandalone: true, selector: "fly-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, domain: { classPropertyName: "domain", publicName: "domain", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (dot()) {\r\n  <!-- \"Status light\": a colour-coded dot with a soft concentric halo in the\r\n       status colour. The label is shown on hover (global [data-tooltip]) and\r\n       read by screen readers (aria-label) \u2014 compact, glanceable, and modern. -->\r\n  <span\r\n    class=\"status-dot\"\r\n    [ngClass]=\"'status-dot--' + statusClass()\"\r\n    [attr.data-tooltip]=\"labelKey() | translate\"\r\n    [attr.aria-label]=\"labelKey() | translate\"\r\n    role=\"img\"\r\n    tabindex=\"0\"\r\n  ></span>\r\n} @else {\r\n  <span class=\"status-badge\" [ngClass]=\"'status-badge--' + statusClass()\">\r\n    {{ labelKey() | translate }}\r\n  </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";.status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:var(--fw-medium)}.status-dot{display:inline-block;inline-size:10px;block-size:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);cursor:default;transition:transform var(--t-state),box-shadow var(--t-state)}.status-dot:hover,.status-dot:focus-visible{transform:scale(1.18);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 26%,transparent);outline:none}.status-dot--draft{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--review{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--approved{color:var(--color-aegreen-800, var(--success))}.status-dot--published{color:var(--color-techblue-800, var(--st-approved))}.status-dot--archived{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--planned{color:var(--color-techblue-800, var(--st-approved))}.status-dot--inprogress{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--completed{color:var(--color-aegreen-800, var(--success))}.status-dot--onhold{color:var(--color-aeorange-800, var(--warning-fg))}.status-dot--cancelled{color:var(--color-aered-800, var(--danger))}.status-badge--draft{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-700, var(--st-draft))}.status-badge--review{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--approved{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--published{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--archived{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-500, var(--ink-3))}.status-badge--planned{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--inprogress{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--completed{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--onhold{background:var(--color-aeorange-200, var(--warning-bg));color:var(--color-aeorange-800, var(--warning-fg))}.status-badge--cancelled{background:var(--color-aered-100, var(--danger-bg));color:var(--color-aered-800, var(--danger))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: StatusBadgeComponent, isStandalone: true, selector: "fly-status-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, domain: { classPropertyName: "domain", publicName: "domain", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (dot()) {\r\n  <!-- \"Status light\": a colour-coded dot with a soft concentric halo in the\r\n       status colour. The label is shown on hover (`flyTooltip`) and read by screen readers\r\n       (aria-label) \u2014 compact, glanceable, and modern.\r\n       `[flyTooltip]` and NOT `[attr.data-tooltip]`: Angular does not selector-match a directive\r\n       against an `attr.`-prefixed binding, so the attribute form compiles to a bare attribute with\r\n       nothing listening \u2014 which, now that the CSS pseudo-element tooltip is gone, would show no\r\n       label at all. `data-tooltip` stays alongside it as the styling/test hook it always was. -->\r\n  <span\r\n    class=\"status-dot\"\r\n    [ngClass]=\"'status-dot--' + statusClass()\"\r\n    [flyTooltip]=\"labelKey() | translate\"\r\n    [attr.data-tooltip]=\"labelKey() | translate\"\r\n    [attr.aria-label]=\"labelKey() | translate\"\r\n    role=\"img\"\r\n    tabindex=\"0\"\r\n  ></span>\r\n} @else {\r\n  <span class=\"status-badge\" [ngClass]=\"'status-badge--' + statusClass()\">\r\n    {{ labelKey() | translate }}\r\n  </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";.status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:var(--fw-medium)}.status-dot{display:inline-block;inline-size:10px;block-size:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);cursor:default;transition:transform var(--t-state),box-shadow var(--t-state)}.status-dot:hover,.status-dot:focus-visible{transform:scale(1.18);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 26%,transparent);outline:none}.status-dot--draft{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--review{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--approved{color:var(--color-aegreen-800, var(--success))}.status-dot--published{color:var(--color-techblue-800, var(--st-approved))}.status-dot--archived{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--planned{color:var(--color-techblue-800, var(--st-approved))}.status-dot--inprogress{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--completed{color:var(--color-aegreen-800, var(--success))}.status-dot--onhold{color:var(--color-aeorange-800, var(--warning-fg))}.status-dot--cancelled{color:var(--color-aered-800, var(--danger))}.status-badge--draft{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-700, var(--st-draft))}.status-badge--review{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--approved{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--published{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--archived{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-500, var(--ink-3))}.status-badge--planned{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--inprogress{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--completed{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--onhold{background:var(--color-aeorange-200, var(--warning-bg));color:var(--color-aeorange-800, var(--warning-fg))}.status-badge--cancelled{background:var(--color-aered-100, var(--danger-bg));color:var(--color-aered-800, var(--danger))}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FlyTooltipDirective, selector: "[flyTooltip], [data-tooltip]", inputs: ["flyTooltip", "flyTooltipPlacement", "flyTooltipDisabled", "flyTooltipDelay"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: StatusBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-status-badge', standalone: true, imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (dot()) {\r\n  <!-- \"Status light\": a colour-coded dot with a soft concentric halo in the\r\n       status colour. The label is shown on hover (global [data-tooltip]) and\r\n       read by screen readers (aria-label) \u2014 compact, glanceable, and modern. -->\r\n  <span\r\n    class=\"status-dot\"\r\n    [ngClass]=\"'status-dot--' + statusClass()\"\r\n    [attr.data-tooltip]=\"labelKey() | translate\"\r\n    [attr.aria-label]=\"labelKey() | translate\"\r\n    role=\"img\"\r\n    tabindex=\"0\"\r\n  ></span>\r\n} @else {\r\n  <span class=\"status-badge\" [ngClass]=\"'status-badge--' + statusClass()\">\r\n    {{ labelKey() | translate }}\r\n  </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";.status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:var(--fw-medium)}.status-dot{display:inline-block;inline-size:10px;block-size:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);cursor:default;transition:transform var(--t-state),box-shadow var(--t-state)}.status-dot:hover,.status-dot:focus-visible{transform:scale(1.18);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 26%,transparent);outline:none}.status-dot--draft{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--review{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--approved{color:var(--color-aegreen-800, var(--success))}.status-dot--published{color:var(--color-techblue-800, var(--st-approved))}.status-dot--archived{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--planned{color:var(--color-techblue-800, var(--st-approved))}.status-dot--inprogress{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--completed{color:var(--color-aegreen-800, var(--success))}.status-dot--onhold{color:var(--color-aeorange-800, var(--warning-fg))}.status-dot--cancelled{color:var(--color-aered-800, var(--danger))}.status-badge--draft{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-700, var(--st-draft))}.status-badge--review{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--approved{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--published{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--archived{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-500, var(--ink-3))}.status-badge--planned{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--inprogress{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--completed{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--onhold{background:var(--color-aeorange-200, var(--warning-bg));color:var(--color-aeorange-800, var(--warning-fg))}.status-badge--cancelled{background:var(--color-aered-100, var(--danger-bg));color:var(--color-aered-800, var(--danger))}\n"] }]
+            args: [{ selector: 'fly-status-badge', standalone: true, imports: [NgClass, TranslatePipe, FlyTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (dot()) {\r\n  <!-- \"Status light\": a colour-coded dot with a soft concentric halo in the\r\n       status colour. The label is shown on hover (`flyTooltip`) and read by screen readers\r\n       (aria-label) \u2014 compact, glanceable, and modern.\r\n       `[flyTooltip]` and NOT `[attr.data-tooltip]`: Angular does not selector-match a directive\r\n       against an `attr.`-prefixed binding, so the attribute form compiles to a bare attribute with\r\n       nothing listening \u2014 which, now that the CSS pseudo-element tooltip is gone, would show no\r\n       label at all. `data-tooltip` stays alongside it as the styling/test hook it always was. -->\r\n  <span\r\n    class=\"status-dot\"\r\n    [ngClass]=\"'status-dot--' + statusClass()\"\r\n    [flyTooltip]=\"labelKey() | translate\"\r\n    [attr.data-tooltip]=\"labelKey() | translate\"\r\n    [attr.aria-label]=\"labelKey() | translate\"\r\n    role=\"img\"\r\n    tabindex=\"0\"\r\n  ></span>\r\n} @else {\r\n  <span class=\"status-badge\" [ngClass]=\"'status-badge--' + statusClass()\">\r\n    {{ labelKey() | translate }}\r\n  </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";.status-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:var(--fw-medium)}.status-dot{display:inline-block;inline-size:10px;block-size:10px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);cursor:default;transition:transform var(--t-state),box-shadow var(--t-state)}.status-dot:hover,.status-dot:focus-visible{transform:scale(1.18);box-shadow:0 0 0 4px color-mix(in srgb,currentColor 26%,transparent);outline:none}.status-dot--draft{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--review{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--approved{color:var(--color-aegreen-800, var(--success))}.status-dot--published{color:var(--color-techblue-800, var(--st-approved))}.status-dot--archived{color:var(--color-aeblack-500, var(--ink-3))}.status-dot--planned{color:var(--color-techblue-800, var(--st-approved))}.status-dot--inprogress{color:var(--color-aeorange-700, var(--warning-fg))}.status-dot--completed{color:var(--color-aegreen-800, var(--success))}.status-dot--onhold{color:var(--color-aeorange-800, var(--warning-fg))}.status-dot--cancelled{color:var(--color-aered-800, var(--danger))}.status-badge--draft{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-700, var(--st-draft))}.status-badge--review{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--approved{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--published{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--archived{background:var(--color-aeblack-100, var(--st-draft-bg));color:var(--color-aeblack-500, var(--ink-3))}.status-badge--planned{background:var(--color-techblue-100, var(--st-approved-bg));color:var(--color-techblue-800, var(--st-approved))}.status-badge--inprogress{background:var(--color-aeorange-100, var(--warning-bg));color:var(--color-aeorange-700, var(--warning-fg))}.status-badge--completed{background:var(--color-aegreen-100, var(--success-bg));color:var(--color-aegreen-800, var(--success))}.status-badge--onhold{background:var(--color-aeorange-200, var(--warning-bg));color:var(--color-aeorange-800, var(--warning-fg))}.status-badge--cancelled{background:var(--color-aered-100, var(--danger-bg));color:var(--color-aered-800, var(--danger))}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], domain: [{ type: i0.Input, args: [{ isSignal: true, alias: "domain", required: false }] }] } });
 
 // Class name and selector kept as `DashboardKpiComponent` / `fly-dashboard-kpi`
@@ -18023,11 +18505,11 @@ class FlyFilterPanelComponent {
     /** Whether the `[filter-more]` advanced fields are revealed. */
     showMore = signal(false, ...(ngDevMode ? [{ debugName: "showMore" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyFilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyFilterPanelComponent, isStandalone: true, selector: "fly-filter-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, showSearchButton: { classPropertyName: "showSearchButton", publicName: "showSearchButton", isSignal: true, isRequired: false, transformFunction: null }, anchored: { classPropertyName: "anchored", publicName: "anchored", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cleared: "cleared", closed: "closed", searched: "searched" }, host: { properties: { "class.fp--anchored": "anchored()" } }, ngImport: i0, template: "    @if (open()) {\r\n      <div class=\"fp\" [attr.data-layout]=\"layout()\">\r\n        <div class=\"fp__head\">\r\n          <div class=\"fp__title\">{{ titleKey() | translate }}</div>\r\n          <div class=\"fp__actions\">\r\n            <button type=\"button\" class=\"fp__clear\" (click)=\"cleared.emit()\">\r\n              {{ 'ui.action.clearFilters' | translate }}\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fp__close\"\r\n              (click)=\"closed.emit()\"\r\n              [attr.aria-label]=\"'ui.action.close' | translate\"\r\n            >\u00D7</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"fp__body\">\r\n          <ng-content select=\"[filter-status]\" />\r\n\r\n          <div class=\"fp__grid\">\r\n            <ng-content />\r\n          </div>\r\n\r\n          @if (hasMore()) {\r\n            <div class=\"fp__more\" [hidden]=\"!showMore()\">\r\n              <div class=\"fp__grid\">\r\n                <ng-content select=\"[filter-more]\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"fp__morebar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"fp__morebtn\"\r\n                (click)=\"showMore.set(!showMore())\"\r\n                [attr.aria-expanded]=\"showMore()\"\r\n              >\r\n                <svg class=\"fp__moreico\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n                  <path [attr.d]=\"showMore() ? 'M3.5 8h9' : 'M8 3.5v9M3.5 8h9'\" />\r\n                </svg>\r\n                {{ (showMore() ? 'ui.action.fewerOptions' : 'ui.action.addMoreOptions') | translate }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (showSearchButton()) {\r\n          <div class=\"fp__footer\">\r\n            <button type=\"button\" fly-button variant=\"primary\" (click)=\"searched.emit()\">\r\n              {{ 'ui.action.search' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  \r\n", styles: [":host{display:block}.fp{margin-block-end:var(--sp-4);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden;animation:fly-fp-in var(--t-overlay)}:host(.fp--anchored){position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,100vw - 2 * var(--sp-4))}:host(.fp--anchored) .fp{margin-block-end:0;box-shadow:var(--shadow-filter)}:host(.fp--anchored) .fp__body{max-height:min(320px,44vh);overflow-y:auto}.fp__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--line-3);background:var(--bg-3)}.fp__title{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.fp__actions{display:flex;align-items:center;gap:var(--sp-1)}.fp__clear{border:0;background:transparent;font-size:12px;color:var(--ink-3);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.fp__clear:hover{color:var(--ink);background:var(--bg-hover)}.fp__clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:var(--text-xl);line-height:1;display:grid;place-items:center}.fp__close:hover{color:var(--ink);background:var(--bg-hover)}.fp__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp ::ng-deep [filter-status]{display:flex;flex-direction:column;gap:var(--sp-2);padding:14px var(--sp-4);border-block-end:1px solid var(--line-3)}.fp__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px var(--sp-4);padding:var(--sp-4)}@media(width<=1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(width<=820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.fp[data-layout=rows] .fp__grid{grid-template-columns:1fr;gap:var(--sp-2)}.fp[data-layout=rows] ::ng-deep .fld{display:grid;grid-template-columns:minmax(110px,168px) 1fr;align-items:center;gap:var(--sp-1) var(--sp-4)}.fp[data-layout=rows] ::ng-deep .fld__l{margin:0;color:var(--ink-2)}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:2}@media(width<=640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}.fp__more{border-block-start:1px solid var(--line-3)}.fp__more .fp__grid{padding-block-start:var(--sp-3)}.fp__morebar{padding:0 var(--sp-4) var(--sp-3)}.fp__morebtn{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:transparent;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-family:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--accent);cursor:pointer;transition:background var(--t-state)}.fp__morebtn:hover{background:var(--bg-hover)}.fp__morebtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__moreico{width:14px;height:14px;flex-shrink:0}.fp__footer{display:flex;justify-content:flex-end;padding:var(--sp-3) var(--sp-4);border-block-start:1px solid var(--line-3);background:var(--bg-3)}.fp__footer button{background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}.fp__footer button:hover{background:var(--grad);border:0;filter:brightness(1.05);box-shadow:var(--shadow-accent)}@keyframes fly-fp-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"], dependencies: [{ kind: "component", type: FlyButtonComponent, selector: "button[fly-button], a[fly-button]", inputs: ["variant", "size", "loading"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyFilterPanelComponent, isStandalone: true, selector: "fly-filter-panel", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: true, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, hasMore: { classPropertyName: "hasMore", publicName: "hasMore", isSignal: true, isRequired: false, transformFunction: null }, showSearchButton: { classPropertyName: "showSearchButton", publicName: "showSearchButton", isSignal: true, isRequired: false, transformFunction: null }, anchored: { classPropertyName: "anchored", publicName: "anchored", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cleared: "cleared", closed: "closed", searched: "searched" }, host: { properties: { "class.fp--anchored": "anchored()" } }, ngImport: i0, template: "    @if (open()) {\r\n      <div class=\"fp\" [attr.data-layout]=\"layout()\">\r\n        <div class=\"fp__head\">\r\n          <div class=\"fp__title\">{{ titleKey() | translate }}</div>\r\n          <div class=\"fp__actions\">\r\n            <button type=\"button\" class=\"fp__clear\" (click)=\"cleared.emit()\">\r\n              {{ 'ui.action.clearFilters' | translate }}\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fp__close\"\r\n              (click)=\"closed.emit()\"\r\n              [attr.aria-label]=\"'ui.action.close' | translate\"\r\n            >\u00D7</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"fp__body\">\r\n          <ng-content select=\"[filter-status]\" />\r\n\r\n          <div class=\"fp__grid\">\r\n            <ng-content />\r\n          </div>\r\n\r\n          @if (hasMore()) {\r\n            <div class=\"fp__more\" [hidden]=\"!showMore()\">\r\n              <div class=\"fp__grid\">\r\n                <ng-content select=\"[filter-more]\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"fp__morebar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"fp__morebtn\"\r\n                (click)=\"showMore.set(!showMore())\"\r\n                [attr.aria-expanded]=\"showMore()\"\r\n              >\r\n                <svg class=\"fp__moreico\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n                  <path [attr.d]=\"showMore() ? 'M3.5 8h9' : 'M8 3.5v9M3.5 8h9'\" />\r\n                </svg>\r\n                {{ (showMore() ? 'ui.action.fewerOptions' : 'ui.action.addMoreOptions') | translate }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (showSearchButton()) {\r\n          <div class=\"fp__footer\">\r\n            <button type=\"button\" fly-button variant=\"primary\" (click)=\"searched.emit()\">\r\n              {{ 'ui.action.search' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  \r\n", styles: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.fp{margin-block-end:var(--sp-4);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden;animation:fly-fp-in var(--t-overlay)}:host(.fp--anchored){position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,100vw - 2 * var(--sp-4))}:host(.fp--anchored) .fp{margin-block-end:0;box-shadow:var(--shadow-filter)}:host(.fp--anchored) .fp__body{max-height:min(320px,44vh);overflow-y:auto}.fp__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--line-3);background:var(--bg-3)}.fp__title{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.fp__actions{display:flex;align-items:center;gap:var(--sp-1)}.fp__clear{border:0;background:transparent;font-size:12px;color:var(--ink-3);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.fp__clear:hover{color:var(--ink);background:var(--bg-hover)}.fp__clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:var(--text-xl);line-height:1;display:grid;place-items:center}.fp__close:hover{color:var(--ink);background:var(--bg-hover)}.fp__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp ::ng-deep [filter-status]{display:flex;flex-direction:column;gap:var(--sp-2);padding:14px var(--sp-4);border-block-end:1px solid var(--line-3)}.fp__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px var(--sp-4);padding:var(--sp-4)}@container (width <= 1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(width<=1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@container (width <= 820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width<=820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.fp[data-layout=rows] .fp__grid{grid-template-columns:1fr;gap:var(--sp-2)}.fp[data-layout=rows] ::ng-deep .fld{display:grid;grid-template-columns:minmax(110px,168px) 1fr;align-items:center;gap:var(--sp-1) var(--sp-4)}.fp[data-layout=rows] ::ng-deep .fld__l{margin:0;color:var(--ink-2)}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:2}@container (width <= 640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}@media(width<=640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}.fp__more{border-block-start:1px solid var(--line-3)}.fp__more .fp__grid{padding-block-start:var(--sp-3)}.fp__morebar{padding:0 var(--sp-4) var(--sp-3)}.fp__morebtn{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:transparent;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-family:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--accent);cursor:pointer;transition:background var(--t-state)}.fp__morebtn:hover{background:var(--bg-hover)}.fp__morebtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__moreico{width:14px;height:14px;flex-shrink:0}.fp__footer{display:flex;justify-content:flex-end;padding:var(--sp-3) var(--sp-4);border-block-start:1px solid var(--line-3);background:var(--bg-3)}.fp__footer button{background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}.fp__footer button:hover{background:var(--grad);border:0;filter:brightness(1.05);box-shadow:var(--shadow-accent)}@keyframes fly-fp-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"], dependencies: [{ kind: "component", type: FlyButtonComponent, selector: "button[fly-button], a[fly-button]", inputs: ["variant", "size", "loading"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyFilterPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-filter-panel', standalone: true, imports: [TranslatePipe, FlyButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.fp--anchored]': 'anchored()' }, template: "    @if (open()) {\r\n      <div class=\"fp\" [attr.data-layout]=\"layout()\">\r\n        <div class=\"fp__head\">\r\n          <div class=\"fp__title\">{{ titleKey() | translate }}</div>\r\n          <div class=\"fp__actions\">\r\n            <button type=\"button\" class=\"fp__clear\" (click)=\"cleared.emit()\">\r\n              {{ 'ui.action.clearFilters' | translate }}\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fp__close\"\r\n              (click)=\"closed.emit()\"\r\n              [attr.aria-label]=\"'ui.action.close' | translate\"\r\n            >\u00D7</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"fp__body\">\r\n          <ng-content select=\"[filter-status]\" />\r\n\r\n          <div class=\"fp__grid\">\r\n            <ng-content />\r\n          </div>\r\n\r\n          @if (hasMore()) {\r\n            <div class=\"fp__more\" [hidden]=\"!showMore()\">\r\n              <div class=\"fp__grid\">\r\n                <ng-content select=\"[filter-more]\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"fp__morebar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"fp__morebtn\"\r\n                (click)=\"showMore.set(!showMore())\"\r\n                [attr.aria-expanded]=\"showMore()\"\r\n              >\r\n                <svg class=\"fp__moreico\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n                  <path [attr.d]=\"showMore() ? 'M3.5 8h9' : 'M8 3.5v9M3.5 8h9'\" />\r\n                </svg>\r\n                {{ (showMore() ? 'ui.action.fewerOptions' : 'ui.action.addMoreOptions') | translate }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (showSearchButton()) {\r\n          <div class=\"fp__footer\">\r\n            <button type=\"button\" fly-button variant=\"primary\" (click)=\"searched.emit()\">\r\n              {{ 'ui.action.search' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  \r\n", styles: [":host{display:block}.fp{margin-block-end:var(--sp-4);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden;animation:fly-fp-in var(--t-overlay)}:host(.fp--anchored){position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,100vw - 2 * var(--sp-4))}:host(.fp--anchored) .fp{margin-block-end:0;box-shadow:var(--shadow-filter)}:host(.fp--anchored) .fp__body{max-height:min(320px,44vh);overflow-y:auto}.fp__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--line-3);background:var(--bg-3)}.fp__title{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.fp__actions{display:flex;align-items:center;gap:var(--sp-1)}.fp__clear{border:0;background:transparent;font-size:12px;color:var(--ink-3);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.fp__clear:hover{color:var(--ink);background:var(--bg-hover)}.fp__clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:var(--text-xl);line-height:1;display:grid;place-items:center}.fp__close:hover{color:var(--ink);background:var(--bg-hover)}.fp__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp ::ng-deep [filter-status]{display:flex;flex-direction:column;gap:var(--sp-2);padding:14px var(--sp-4);border-block-end:1px solid var(--line-3)}.fp__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px var(--sp-4);padding:var(--sp-4)}@media(width<=1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(width<=820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.fp[data-layout=rows] .fp__grid{grid-template-columns:1fr;gap:var(--sp-2)}.fp[data-layout=rows] ::ng-deep .fld{display:grid;grid-template-columns:minmax(110px,168px) 1fr;align-items:center;gap:var(--sp-1) var(--sp-4)}.fp[data-layout=rows] ::ng-deep .fld__l{margin:0;color:var(--ink-2)}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:2}@media(width<=640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}.fp__more{border-block-start:1px solid var(--line-3)}.fp__more .fp__grid{padding-block-start:var(--sp-3)}.fp__morebar{padding:0 var(--sp-4) var(--sp-3)}.fp__morebtn{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:transparent;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-family:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--accent);cursor:pointer;transition:background var(--t-state)}.fp__morebtn:hover{background:var(--bg-hover)}.fp__morebtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__moreico{width:14px;height:14px;flex-shrink:0}.fp__footer{display:flex;justify-content:flex-end;padding:var(--sp-3) var(--sp-4);border-block-start:1px solid var(--line-3);background:var(--bg-3)}.fp__footer button{background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}.fp__footer button:hover{background:var(--grad);border:0;filter:brightness(1.05);box-shadow:var(--shadow-accent)}@keyframes fly-fp-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"] }]
+            args: [{ selector: 'fly-filter-panel', standalone: true, imports: [TranslatePipe, FlyButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.fp--anchored]': 'anchored()' }, template: "    @if (open()) {\r\n      <div class=\"fp\" [attr.data-layout]=\"layout()\">\r\n        <div class=\"fp__head\">\r\n          <div class=\"fp__title\">{{ titleKey() | translate }}</div>\r\n          <div class=\"fp__actions\">\r\n            <button type=\"button\" class=\"fp__clear\" (click)=\"cleared.emit()\">\r\n              {{ 'ui.action.clearFilters' | translate }}\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"fp__close\"\r\n              (click)=\"closed.emit()\"\r\n              [attr.aria-label]=\"'ui.action.close' | translate\"\r\n            >\u00D7</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"fp__body\">\r\n          <ng-content select=\"[filter-status]\" />\r\n\r\n          <div class=\"fp__grid\">\r\n            <ng-content />\r\n          </div>\r\n\r\n          @if (hasMore()) {\r\n            <div class=\"fp__more\" [hidden]=\"!showMore()\">\r\n              <div class=\"fp__grid\">\r\n                <ng-content select=\"[filter-more]\" />\r\n              </div>\r\n            </div>\r\n            <div class=\"fp__morebar\">\r\n              <button\r\n                type=\"button\"\r\n                class=\"fp__morebtn\"\r\n                (click)=\"showMore.set(!showMore())\"\r\n                [attr.aria-expanded]=\"showMore()\"\r\n              >\r\n                <svg class=\"fp__moreico\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\r\n                  <path [attr.d]=\"showMore() ? 'M3.5 8h9' : 'M8 3.5v9M3.5 8h9'\" />\r\n                </svg>\r\n                {{ (showMore() ? 'ui.action.fewerOptions' : 'ui.action.addMoreOptions') | translate }}\r\n              </button>\r\n            </div>\r\n          }\r\n        </div>\r\n\r\n        @if (showSearchButton()) {\r\n          <div class=\"fp__footer\">\r\n            <button type=\"button\" fly-button variant=\"primary\" (click)=\"searched.emit()\">\r\n              {{ 'ui.action.search' | translate }}\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  \r\n", styles: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.fp{margin-block-end:var(--sp-4);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden;animation:fly-fp-in var(--t-overlay)}:host(.fp--anchored){position:absolute;inset-block-start:calc(100% + var(--sp-2));inset-inline-end:0;z-index:var(--z-overlay);width:min(600px,100vw - 2 * var(--sp-4))}:host(.fp--anchored) .fp{margin-block-end:0;box-shadow:var(--shadow-filter)}:host(.fp--anchored) .fp__body{max-height:min(320px,44vh);overflow-y:auto}.fp__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-block-end:1px solid var(--line-3);background:var(--bg-3)}.fp__title{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.fp__actions{display:flex;align-items:center;gap:var(--sp-1)}.fp__clear{border:0;background:transparent;font-size:12px;color:var(--ink-3);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.fp__clear:hover{color:var(--ink);background:var(--bg-hover)}.fp__clear:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:var(--text-xl);line-height:1;display:grid;place-items:center}.fp__close:hover{color:var(--ink);background:var(--bg-hover)}.fp__close:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp ::ng-deep [filter-status]{display:flex;flex-direction:column;gap:var(--sp-2);padding:14px var(--sp-4);border-block-end:1px solid var(--line-3)}.fp__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px var(--sp-4);padding:var(--sp-4)}@container (width <= 1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(width<=1180px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@container (width <= 820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width<=820px){.fp[data-layout=grid] .fp__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.fp[data-layout=rows] .fp__grid{grid-template-columns:1fr;gap:var(--sp-2)}.fp[data-layout=rows] ::ng-deep .fld{display:grid;grid-template-columns:minmax(110px,168px) 1fr;align-items:center;gap:var(--sp-1) var(--sp-4)}.fp[data-layout=rows] ::ng-deep .fld__l{margin:0;color:var(--ink-2)}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:2}@container (width <= 640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}@media(width<=640px){.fp[data-layout=rows] ::ng-deep .fld{grid-template-columns:1fr}.fp[data-layout=rows] ::ng-deep .fld__hint,.fp[data-layout=rows] ::ng-deep .fld__err{grid-column:1}}.fp__more{border-block-start:1px solid var(--line-3)}.fp__more .fp__grid{padding-block-start:var(--sp-3)}.fp__morebar{padding:0 var(--sp-4) var(--sp-3)}.fp__morebtn{display:inline-flex;align-items:center;gap:var(--sp-1);border:0;background:transparent;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-family:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--accent);cursor:pointer;transition:background var(--t-state)}.fp__morebtn:hover{background:var(--bg-hover)}.fp__morebtn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fp__moreico{width:14px;height:14px;flex-shrink:0}.fp__footer{display:flex;justify-content:flex-end;padding:var(--sp-3) var(--sp-4);border-block-start:1px solid var(--line-3);background:var(--bg-3)}.fp__footer button{background:var(--grad);border:0;color:var(--ink-inverse);box-shadow:var(--shadow-raised)}.fp__footer button:hover{background:var(--grad);border:0;filter:brightness(1.05);box-shadow:var(--shadow-accent)}@keyframes fly-fp-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: true }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], hasMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMore", required: false }] }], showSearchButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearchButton", required: false }] }], anchored: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchored", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }] } });
 
 /**
@@ -18167,11 +18649,11 @@ class FlyDataTableComponent {
         this.sortChange.emit(nextSort(this.sort(), col.id));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDataTableComponent, isStandalone: true, selector: "fly-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyKey: { classPropertyName: "emptyKey", publicName: "emptyKey", isSignal: true, isRequired: false, transformFunction: null }, emptyIconClass: { classPropertyName: "emptyIconClass", publicName: "emptyIconClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", rowActivated: "rowActivated" }, queries: [{ propertyName: "cellTemplates", predicate: FlyCellDirective, isSignal: true }], ngImport: i0, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--line)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FlyStateMessageComponent, selector: "fly-state-message", inputs: ["kind", "messageKey", "iconClass", "retryLabelKey", "showRetry"], outputs: ["retried"] }, { kind: "component", type: FlySkeletonComponent, selector: "fly-skeleton", inputs: ["layout", "shape", "count", "lines", "animation", "fill", "messageKey", "announce"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDataTableComponent, isStandalone: true, selector: "fly-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyKey: { classPropertyName: "emptyKey", publicName: "emptyKey", isSignal: true, isRequired: false, transformFunction: null }, emptyIconClass: { classPropertyName: "emptyIconClass", publicName: "emptyIconClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", rowActivated: "rowActivated" }, queries: [{ propertyName: "cellTemplates", predicate: FlyCellDirective, isSignal: true }], ngImport: i0, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);container-type:inline-size}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--line)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@container (width <= 720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FlyStateMessageComponent, selector: "fly-state-message", inputs: ["kind", "messageKey", "iconClass", "retryLabelKey", "showRetry"], outputs: ["retried"] }, { kind: "component", type: FlySkeletonComponent, selector: "fly-skeleton", inputs: ["layout", "shape", "count", "lines", "animation", "fill", "messageKey", "announce"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-data-table', standalone: true, imports: [DatePipe, NgTemplateOutlet, TranslatePipe, FlyStateMessageComponent, FlySkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--line)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}\n"] }]
+            args: [{ selector: 'fly-data-table', standalone: true, imports: [DatePipe, NgTemplateOutlet, TranslatePipe, FlyStateMessageComponent, FlySkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);container-type:inline-size}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--line)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@container (width <= 720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowActivated: [{ type: i0.Output, args: ["rowActivated"] }], emptyKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyKey", required: false }] }], emptyIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIconClass", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlyCellDirective), { isSignal: true }] }] } });
 
 /**
@@ -18384,11 +18866,11 @@ class PageHeaderComponent {
         return '#';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PageHeaderComponent, isStandalone: true, selector: "fly-page-header", inputs: { variant: "variant", title: "title", titleKey: "titleKey", subtitle: "subtitle", subtitleKey: "subtitleKey", titleAr: "titleAr", eyebrow: "eyebrow", eyebrowKey: "eyebrowKey", metricValue: "metricValue", metricLabel: "metricLabel", metricLabelKey: "metricLabelKey", breadcrumbs: "breadcrumbs" }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6)}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;transition:color var(--t-state)}.crumb--link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1;min-width:0}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@media(max-width:980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PageHeaderComponent, isStandalone: true, selector: "fly-page-header", inputs: { variant: "variant", title: "title", titleKey: "titleKey", subtitle: "subtitle", subtitleKey: "subtitleKey", titleAr: "titleAr", eyebrow: "eyebrow", eyebrowKey: "eyebrowKey", metricValue: "metricValue", metricLabel: "metricLabel", metricLabelKey: "metricLabelKey", breadcrumbs: "breadcrumbs" }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;transition:color var(--t-state)}.crumb--link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1;min-width:0}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (max-width: 980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(max-width:980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-page-header', standalone: true, imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6)}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;transition:color var(--t-state)}.crumb--link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1;min-width:0}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@media(max-width:980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"] }]
+            args: [{ selector: 'fly-page-header', standalone: true, imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;transition:color var(--t-state)}.crumb--link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1;min-width:0}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (max-width: 980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(max-width:980px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-direction:row;flex-wrap:wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], title: [{
@@ -18507,30 +18989,30 @@ class FlyDetailCardComponent {
     /** Drop the body padding — for a child that brings its own list/table chrome. */
     flush = input(false, ...(ngDevMode ? [{ debugName: "flush" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailCardComponent, isStandalone: true, selector: "fly-detail-card", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedTitle: { classPropertyName: "hasProjectedTitle", publicName: "hasProjectedTitle", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (titleKey() || hasProjectedTitle()) {
-      <fly-section-header [titleKey]="titleKey()">
-        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
-        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
-      </fly-section-header>
-    }
-    <div class="dc__body" [class.dc__body--flush]="flush()">
-      <ng-content />
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailCardComponent, isStandalone: true, selector: "fly-detail-card", inputs: { titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, hasProjectedTitle: { classPropertyName: "hasProjectedTitle", publicName: "hasProjectedTitle", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (titleKey() || hasProjectedTitle()) {
+      <fly-section-header [titleKey]="titleKey()">
+        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
+        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
+      </fly-section-header>
+    }
+    <div class="dc__body" [class.dc__body--flush]="flush()">
+      <ng-content />
+    </div>
   `, isInline: true, styles: [":host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}.dc__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.dc__body--flush{padding:0}\n"], dependencies: [{ kind: "component", type: FlySectionHeaderComponent, selector: "fly-section-header", inputs: ["titleKey"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-detail-card', standalone: true, imports: [FlySectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (titleKey() || hasProjectedTitle()) {
-      <fly-section-header [titleKey]="titleKey()">
-        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
-        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
-      </fly-section-header>
-    }
-    <div class="dc__body" [class.dc__body--flush]="flush()">
-      <ng-content />
-    </div>
+            args: [{ selector: 'fly-detail-card', standalone: true, imports: [FlySectionHeaderComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (titleKey() || hasProjectedTitle()) {
+      <fly-section-header [titleKey]="titleKey()">
+        <ng-content select="[card-title]" ngProjectAs="[section-title]" />
+        <ng-content select="[card-actions]" ngProjectAs="[section-actions]" />
+      </fly-section-header>
+    }
+    <div class="dc__body" [class.dc__body--flush]="flush()">
+      <ng-content />
+    </div>
   `, styles: [":host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}.dc__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}.dc__body--flush{padding:0}\n"] }]
         }], propDecorators: { titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], hasProjectedTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasProjectedTitle", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }] } });
 
@@ -18658,109 +19140,109 @@ class FlyDetailShellComponent {
         buttons?.[next]?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailShellComponent, isStandalone: true, selector: "fly-detail-shell", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionsLabelKey: { classPropertyName: "sectionsLabelKey", publicName: "sectionsLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, viewQueries: [{ propertyName: "rail", first: true, predicate: ["rail"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="ds__layout">
-      <aside class="ds__aside">
-        <div class="ds__pinned">
-          <ng-content select="[detail-aside]" />
-        </div>
-
-        @if (sections().length > 0) {
-          <div
-            #rail
-            class="ds__rail"
-            role="tablist"
-            tabindex="-1"
-            [attr.aria-orientation]="'vertical'"
-            [attr.aria-label]="sectionsLabelKey() | translate"
-            (keydown)="onKey($event)"
-          >
-            @for (s of sections(); track s.id) {
-              <button
-                type="button"
-                class="ds__tab"
-                role="tab"
-                [id]="tabId(s.id)"
-                [class.ds__tab--active]="activeId() === s.id"
-                [attr.aria-selected]="activeId() === s.id"
-                [attr.aria-controls]="panelId()"
-                [attr.tabindex]="activeId() === s.id ? 0 : -1"
-                [attr.title]="s.labelKey | translate"
-                (click)="select(s.id)"
-              >
-                @if (s.icon) {
-                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
-                }
-                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
-              </button>
-            }
-          </div>
-        }
-      </aside>
-
-      <div
-        class="ds__panel"
-        [id]="panelId()"
-        [attr.role]="sections().length ? 'tabpanel' : null"
-        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
-      >
-        <ng-content />
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:block}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--bg-hover);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(max-width:980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDetailShellComponent, isStandalone: true, selector: "fly-detail-shell", inputs: { sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionsLabelKey: { classPropertyName: "sectionsLabelKey", publicName: "sectionsLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, viewQueries: [{ propertyName: "rail", first: true, predicate: ["rail"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="ds__layout">
+      <aside class="ds__aside">
+        <div class="ds__pinned">
+          <ng-content select="[detail-aside]" />
+        </div>
+
+        @if (sections().length > 0) {
+          <div
+            #rail
+            class="ds__rail"
+            role="tablist"
+            tabindex="-1"
+            [attr.aria-orientation]="'vertical'"
+            [attr.aria-label]="sectionsLabelKey() | translate"
+            (keydown)="onKey($event)"
+          >
+            @for (s of sections(); track s.id) {
+              <button
+                type="button"
+                class="ds__tab"
+                role="tab"
+                [id]="tabId(s.id)"
+                [class.ds__tab--active]="activeId() === s.id"
+                [attr.aria-selected]="activeId() === s.id"
+                [attr.aria-controls]="panelId()"
+                [attr.tabindex]="activeId() === s.id ? 0 : -1"
+                [attr.title]="s.labelKey | translate"
+                (click)="select(s.id)"
+              >
+                @if (s.icon) {
+                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
+                }
+                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
+              </button>
+            }
+          </div>
+        }
+      </aside>
+
+      <div
+        class="ds__panel"
+        [id]="panelId()"
+        [attr.role]="sections().length ? 'tabpanel' : null"
+        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
+      >
+        <ng-content />
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;container-type:inline-size}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--bg-hover);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@container (max-width: 980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}@media(max-width:980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDetailShellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-detail-shell', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="ds__layout">
-      <aside class="ds__aside">
-        <div class="ds__pinned">
-          <ng-content select="[detail-aside]" />
-        </div>
-
-        @if (sections().length > 0) {
-          <div
-            #rail
-            class="ds__rail"
-            role="tablist"
-            tabindex="-1"
-            [attr.aria-orientation]="'vertical'"
-            [attr.aria-label]="sectionsLabelKey() | translate"
-            (keydown)="onKey($event)"
-          >
-            @for (s of sections(); track s.id) {
-              <button
-                type="button"
-                class="ds__tab"
-                role="tab"
-                [id]="tabId(s.id)"
-                [class.ds__tab--active]="activeId() === s.id"
-                [attr.aria-selected]="activeId() === s.id"
-                [attr.aria-controls]="panelId()"
-                [attr.tabindex]="activeId() === s.id ? 0 : -1"
-                [attr.title]="s.labelKey | translate"
-                (click)="select(s.id)"
-              >
-                @if (s.icon) {
-                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
-                }
-                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
-              </button>
-            }
-          </div>
-        }
-      </aside>
-
-      <div
-        class="ds__panel"
-        [id]="panelId()"
-        [attr.role]="sections().length ? 'tabpanel' : null"
-        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
-      >
-        <ng-content />
-      </div>
-    </div>
-  `, styles: [":host{display:block}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--bg-hover);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@media(max-width:980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}\n"] }]
+            args: [{ selector: 'fly-detail-shell', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ds__layout">
+      <aside class="ds__aside">
+        <div class="ds__pinned">
+          <ng-content select="[detail-aside]" />
+        </div>
+
+        @if (sections().length > 0) {
+          <div
+            #rail
+            class="ds__rail"
+            role="tablist"
+            tabindex="-1"
+            [attr.aria-orientation]="'vertical'"
+            [attr.aria-label]="sectionsLabelKey() | translate"
+            (keydown)="onKey($event)"
+          >
+            @for (s of sections(); track s.id) {
+              <button
+                type="button"
+                class="ds__tab"
+                role="tab"
+                [id]="tabId(s.id)"
+                [class.ds__tab--active]="activeId() === s.id"
+                [attr.aria-selected]="activeId() === s.id"
+                [attr.aria-controls]="panelId()"
+                [attr.tabindex]="activeId() === s.id ? 0 : -1"
+                [attr.title]="s.labelKey | translate"
+                (click)="select(s.id)"
+              >
+                @if (s.icon) {
+                  <span class="pi {{ s.icon }} ds__tab-ico" aria-hidden="true"></span>
+                }
+                <span class="ds__tab-label">{{ s.labelKey | translate }}</span>
+              </button>
+            }
+          </div>
+        }
+      </aside>
+
+      <div
+        class="ds__panel"
+        [id]="panelId()"
+        [attr.role]="sections().length ? 'tabpanel' : null"
+        [attr.aria-labelledby]="activeId() ? tabId(activeId()!) : null"
+      >
+        <ng-content />
+      </div>
+    </div>
+  `, styles: [":host{display:block;container-type:inline-size}.ds__layout{display:grid;grid-template-columns:var(--fly-detail-aside, 300px) minmax(0,1fr);gap:var(--sp-4);align-items:start}.ds__aside{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__aside .ds__rail{order:-1}.ds__pinned{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.ds__panel{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0;align-self:stretch}.ds__panel>:only-child{flex:1}.ds__rail{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.ds__tab{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-2);border:0;background:transparent;border-radius:var(--r-md);color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:var(--text-sm);text-align:start;white-space:nowrap;overflow:hidden;transition:background var(--t-state),color var(--t-state)}.ds__tab:hover{background:var(--bg-hover);color:var(--ink)}.ds__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ds__tab--active{background:var(--accent-fill);color:var(--on-accent-fill);font-weight:var(--fw-semibold)}.ds__tab-ico{font-size:var(--text-md);flex-shrink:0;width:20px;text-align:center}.ds__tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis}@container (max-width: 980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}@media(max-width:980px){.ds__layout{grid-template-columns:minmax(0,1fr)}.ds__rail{flex-direction:row;flex-wrap:wrap}.ds__tab{width:auto}}\n"] }]
         }], propDecorators: { rail: [{ type: i0.ViewChild, args: ['rail', { isSignal: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], sectionsLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionsLabelKey", required: false }] }] } });
 
 /** Every module across every section, in visual order. */
@@ -18996,6 +19478,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: 'fly-app-topbar', standalone: true, imports: [TranslatePipe, FlyClickOutsideDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(document:keydown.escape)': 'onEscape()' }, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"switchAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);box-shadow:var(--shadow-panel)}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--bg-hover)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:1px solid var(--line-3);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { brandLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabelKey", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], footerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLabel", required: false }] }], moduleSelected: [{ type: i0.Output, args: ["moduleSelected"] }], brandSelected: [{ type: i0.Output, args: ["brandSelected"] }], icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlyModuleIconDirective), { isSignal: true }] }], rows: [{ type: i0.ViewChildren, args: ['row', { isSignal: true }] }], trigger: [{ type: i0.ViewChildren, args: ['trigger', { isSignal: true }] }] } });
 
+/**
+ * The section's card shape, applying the default when it declares none: the FIRST
+ * section is the app's front door and gets tall feature cards; everything after it is
+ * secondary and gets compact rows.
+ *
+ * Positional rather than required because the common case — one prominent section plus
+ * a "supporting" tail — should need no configuration at all, and an app that wants
+ * something else says so explicitly.
+ */
+function sectionLayout(section, index) {
+    return section.layout ?? (index === 0 ? 'feature' : 'compact');
+}
+/**
+ * Which sections start expanded: every non-collapsible one, plus none of the
+ * collapsible ones.
+ *
+ * Returned as a `Set` of indices rather than mutating the sections, so the input array
+ * stays the app's immutable declaration and re-rendering with new data cannot resurrect
+ * a stale open/closed state.
+ */
+function initialExpanded(sections) {
+    const open = new Set();
+    sections.forEach((s, i) => {
+        if (!s.collapsible)
+            open.add(i);
+    });
+    return open;
+}
+/**
+ * The hint key for a collapsible section in its current state, or null when it has none.
+ *
+ * `collapsedHintKey` falls back to `hintKey` so an app that wants one message in both
+ * states declares one key. A non-collapsible section never shows a hint — the hint
+ * exists to explain what is hidden.
+ */
+function sectionHintKey(section, expanded) {
+    if (!section.collapsible)
+        return null;
+    return (expanded ? section.hintKey : (section.collapsedHintKey ?? section.hintKey)) ?? null;
+}
+
+/**
+ * `<fly-app-home>` — a business app's landing page: brand strip, hero, and one card
+ * per module.
+ *
+ * The sibling of {@link FlyAppTopbarComponent}, and deliberately fed by the SAME
+ * `FlyAppModuleSection[]`. An app declares its modules once; the switcher is how you
+ * move between them once you are inside, this is the front door you arrive at. Two
+ * registries would drift, and the drift would show as a module reachable from one and
+ * not the other.
+ *
+ * ```html
+ * <fly-app-home
+ *   brandLabelKey="common.label.thoughts"
+ *   titleKey="thoughts.home.title"
+ *   subtitleKey="thoughts.home.subtitle"
+ *   [sections]="navSections"
+ *   (moduleSelected)="open($event)">
+ *   <span app-home-brand><fly-thoughts-logo /></span>
+ *   <div app-home-actions><!-- locale / theme / profile --></div>
+ *   <ng-template flyModuleIcon="ideas"><svg …></svg></ng-template>
+ * </fly-app-home>
+ * ```
+ *
+ * Generalized from the Circles landing, whose layout was sound but whose content was
+ * hardcoded — one inline `<svg>` and one `@if` per module, plus a bespoke card for each
+ * non-module destination. Here every card is data, and a destination that is not really
+ * a module (a gallery, a cross-cutting control room) is just another {@link FlyAppModule}
+ * with a projected icon. That was the test of whether this abstraction was real.
+ *
+ * Icons reuse `flyModuleIcon` — the SAME directive the topbar takes — so an app that
+ * renders both declares its icon templates once per surface, in the same syntax.
+ *
+ * a11y: cards are real `<button>`s in a labelled group; a collapsible section is a
+ * disclosure (`aria-expanded` + `aria-controls`), and the region carries the section
+ * heading. Layout is logical-property only, so it mirrors under `dir="rtl"` on its own —
+ * the one exception is the chevron/arrow glyphs, which are directional by meaning and
+ * flip explicitly.
+ */
+class FlyAppHomeComponent {
+    /** i18n key for the brand name beside the mark. Omit to render the mark alone. */
+    brandLabelKey = input(...(ngDevMode ? [undefined, { debugName: "brandLabelKey" }] : /* istanbul ignore next */ []));
+    /** i18n key for the hero headline. */
+    titleKey = input(...(ngDevMode ? [undefined, { debugName: "titleKey" }] : /* istanbul ignore next */ []));
+    /** i18n key for the hero sub-line. */
+    subtitleKey = input(...(ngDevMode ? [undefined, { debugName: "subtitleKey" }] : /* istanbul ignore next */ []));
+    /** The app's modules, grouped. Same array the topbar takes. */
+    sections = input([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    /** i18n key for the card group's `aria-label`. */
+    modulesLabelKey = input('ui.nav.modules', ...(ngDevMode ? [{ debugName: "modulesLabelKey" }] : /* istanbul ignore next */ []));
+    /** Emits the selected module's `key`. Disabled modules never emit. */
+    moduleSelected = output();
+    /** Emits when the brand is activated. */
+    brandSelected = output();
+    icons = contentChildren(FlyModuleIconDirective, ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
+    /**
+     * Expanded section indices. Seeded from the inputs and then owned by the user —
+     * `linkedSignal` semantics on purpose: re-declaring `sections` (a locale switch
+     * re-evaluating labels, say) must not slam a section the user opened shut again.
+     */
+    userToggled = signal(null, ...(ngDevMode ? [{ debugName: "userToggled" }] : /* istanbul ignore next */ []));
+    expandedSet = computed(() => this.userToggled() ?? initialExpanded(this.sections()), ...(ngDevMode ? [{ debugName: "expandedSet" }] : /* istanbul ignore next */ []));
+    /** Presentation-resolved sections, so the template stays declarative. */
+    rows = computed(() => this.sections().map((section, index) => ({
+        index,
+        section,
+        layout: sectionLayout(section, index),
+        expanded: this.expandedSet().has(index),
+        hintKey: sectionHintKey(section, this.expandedSet().has(index)),
+    })), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    iconFor(key) {
+        return this.icons().find(d => d.flyModuleIcon() === key)?.template;
+    }
+    toggle(index) {
+        const next = new Set(this.expandedSet());
+        if (!next.delete(index))
+            next.add(index);
+        this.userToggled.set(next);
+    }
+    select(module) {
+        if (module.disabled)
+            return;
+        this.moduleSelected.emit(module.key);
+    }
+    sectionId(index) {
+        return `fly-app-home-sec-${index}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyAppHomeComponent, isStandalone: true, selector: "fly-app-home", inputs: { brandLabelKey: { classPropertyName: "brandLabelKey", publicName: "brandLabelKey", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, subtitleKey: { classPropertyName: "subtitleKey", publicName: "subtitleKey", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, modulesLabelKey: { classPropertyName: "modulesLabelKey", publicName: "modulesLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moduleSelected: "moduleSelected", brandSelected: "brandSelected" }, queries: [{ propertyName: "icons", predicate: FlyModuleIconDirective, isSignal: true }], ngImport: i0, template: "<div class=\"ah\">\r\n  <header class=\"ah__util\">\r\n    <button type=\"button\" class=\"ah__brand\" (click)=\"brandSelected.emit()\">\r\n      <span class=\"ah__brand-mark\"><ng-content select=\"[app-home-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"ah__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n    <ng-content select=\"[app-home-actions]\" />\r\n  </header>\r\n\r\n  <main class=\"ah__main\">\r\n    @if (titleKey() || subtitleKey()) {\r\n      <section class=\"ah__hero\">\r\n        @if (titleKey(); as key) {\r\n          <h1 class=\"ah__title\">{{ key | translate }}</h1>\r\n        }\r\n        @if (subtitleKey(); as key) {\r\n          <p class=\"ah__sub\">{{ key | translate }}</p>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @for (row of rows(); track row.index) {\r\n      <section\r\n        class=\"ah__sec\"\r\n        [class.ah__sec--secondary]=\"row.index > 0\"\r\n        [attr.aria-label]=\"row.section.titleKey ? null : (modulesLabelKey() | translate)\"\r\n      >\r\n        @if (row.section.titleKey; as titleKey) {\r\n          @if (row.section.collapsible) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ah__sec-hd\"\r\n              (click)=\"toggle(row.index)\"\r\n              [attr.aria-expanded]=\"row.expanded\"\r\n              [attr.aria-controls]=\"sectionId(row.index)\"\r\n            >\r\n              <!-- Points end-ward when shut, down when open. `--open` wins over the RTL\r\n                   flip below because a downward chevron has no direction to mirror. -->\r\n              <svg\r\n                class=\"ah__sec-chev\"\r\n                [class.ah__sec-chev--open]=\"row.expanded\"\r\n                width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n              >\r\n                <polyline points=\"9 6 15 12 9 18\" />\r\n              </svg>\r\n              <span class=\"ah__sec-title\">{{ titleKey | translate }}</span>\r\n              <span class=\"ah__sec-count\">{{ row.section.modules.length }}</span>\r\n              @if (row.hintKey; as hint) {\r\n                <span class=\"ah__sec-hint\">{{ hint | translate }}</span>\r\n              }\r\n            </button>\r\n          } @else {\r\n            <h2 class=\"ah__sec-title ah__sec-title--static\">{{ titleKey | translate }}</h2>\r\n          }\r\n        }\r\n\r\n        @if (row.expanded) {\r\n          <div class=\"ah__grid\" [class.ah__grid--compact]=\"row.layout === 'compact'\" [id]=\"sectionId(row.index)\">\r\n            @for (mod of row.section.modules; track mod.key) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"ah__card\"\r\n                [class.ah__card--compact]=\"row.layout === 'compact'\"\r\n                [disabled]=\"mod.disabled\"\r\n                (click)=\"select(mod)\"\r\n              >\r\n                <span class=\"ah__card-ico\">\r\n                  @if (iconFor(mod.key); as tpl) {\r\n                    <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                  } @else if (mod.iconClass) {\r\n                    <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                  }\r\n                </span>\r\n\r\n                @if (row.layout === 'compact') {\r\n                  <span class=\"ah__card-main\">\r\n                    <span class=\"ah__card-title\">{{ mod.labelKey | translate }}</span>\r\n                    @if (mod.descKey; as descKey) {\r\n                      <span class=\"ah__card-desc\">{{ descKey | translate }}</span>\r\n                    }\r\n                  </span>\r\n                  <svg\r\n                    class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n                  >\r\n                    <polyline points=\"9 6 15 12 9 18\" />\r\n                  </svg>\r\n                } @else {\r\n                  <span class=\"ah__card-title ah__card-title--feature\">{{ mod.labelKey | translate }}</span>\r\n                  @if (mod.descKey; as descKey) {\r\n                    <span class=\"ah__card-desc ah__card-desc--feature\">{{ descKey | translate }}</span>\r\n                  }\r\n                  <span class=\"ah__card-open\">\r\n                    {{ 'ui.action.open' | translate }}\r\n                    <svg\r\n                      class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                      stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n                    >\r\n                      <polyline points=\"9 6 15 12 9 18\" />\r\n                    </svg>\r\n                  </span>\r\n                }\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </main>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:100%;container-type:inline-size}.ah{display:flex;flex-direction:column;flex:1;min-height:100%}.ah__util{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6)}.ah__brand{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0;border:0;background:none;color:var(--ink);font-family:inherit;cursor:pointer}.ah__brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__brand-name{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__main{flex:1;inline-size:100%;max-inline-size:1120px;margin-inline:auto;padding:56px 40px;display:flex;flex-direction:column;justify-content:center;gap:44px}.ah__hero{max-inline-size:640px}.ah__title{margin:0 0 var(--sp-3);font-size:44px;font-weight:var(--fw-semibold);letter-spacing:-.03em;text-wrap:balance;background:linear-gradient(180deg,var(--ink),var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent}.ah__sub{margin:0;max-inline-size:560px;font-size:var(--text-lg);line-height:1.55;color:var(--ink-3);text-wrap:pretty}.ah__sec{display:flex;flex-direction:column;gap:var(--sp-4)}.ah__sec--secondary{padding-block-start:28px;border-block-start:1px solid var(--line)}.ah__sec-hd{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;color:var(--ink);text-align:start}.ah__sec-hd:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__sec-chev{flex-shrink:0;color:var(--ink-3);transition:transform var(--t-overlay)}.ah__sec-title{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__sec-title--static{margin:0;color:var(--ink-3);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.ah__sec-count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);font-size:var(--text-2xs);font-weight:var(--fw-medium);color:var(--ink-3)}.ah__sec-hint{margin-inline-start:auto;font-size:var(--text-xs);color:var(--ink-3)}.ah__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}.ah__card{display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;text-align:start;padding:22px 22px 18px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);color:inherit;font-family:inherit;cursor:pointer;transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}.ah__card:before{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--t-overlay)}.ah__card:hover:not(:disabled){transform:translateY(-2px);border-color:transparent;box-shadow:var(--shadow-filter)}.ah__card:hover:not(:disabled):before{opacity:1}.ah__card:focus-visible{outline:0;border-color:transparent;box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-filter)}.ah__card:focus-visible:before{opacity:1}.ah__card:disabled{cursor:default;opacity:.5}.ah__card-ico{display:grid;place-items:center;inline-size:40px;block-size:40px;margin-block-end:18px;border-radius:11px;background:var(--bg-3);border:0;color:var(--ink);font-size:var(--icon-lg);transition:background var(--t-overlay),color var(--t-overlay)}.ah__card:hover:not(:disabled) .ah__card-ico,.ah__card:focus-visible .ah__card-ico{background:var(--grad);color:var(--ink-inverse)}.ah__card-title{font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:-.01em;color:var(--ink)}.ah__card-title--feature{margin-block-end:4px;font-size:18px;letter-spacing:-.015em}.ah__card-desc{font-size:var(--text-xs);line-height:1.45;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ah__card-desc--feature{margin-block-end:18px;font-size:var(--text-sm);line-height:1.5;text-wrap:pretty;overflow:visible;white-space:normal}.ah__card-open{display:inline-flex;align-items:center;gap:4px;margin-block-start:auto;font-size:var(--text-2xs);color:var(--ink-3);transition:color var(--t-overlay),gap var(--t-overlay)}.ah__card:hover:not(:disabled) .ah__card-open,.ah__card:focus-visible .ah__card-open{color:var(--accent);gap:8px}.ah__card-arrow{flex-shrink:0;transition:color var(--t-overlay),transform var(--t-overlay)}.ah__card--compact{flex-direction:row;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}.ah__card--compact .ah__card-ico{inline-size:34px;block-size:34px;margin-block-end:0;flex-shrink:0;border-radius:9px;font-size:var(--icon-md)}.ah__card-main{display:flex;flex-direction:column;gap:2px;flex:1;min-inline-size:0}.ah__card--compact .ah__card-arrow{color:var(--ink-4)}.ah__card--compact:hover:not(:disabled) .ah__card-arrow{color:var(--accent);transform:translate(2px)}:host-context([dir=rtl]) .ah__card-arrow{transform:scaleX(-1)}:host-context([dir=rtl]) .ah__sec-chev:not(.ah__sec-chev--open){transform:scaleX(-1)}:host-context([dir=rtl]) .ah__card--compact:hover:not(:disabled) .ah__card-arrow{transform:scaleX(-1) translate(2px)}.ah__sec-chev--open{transform:rotate(90deg)}@container (width <= 900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@media(width<=900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@container (width <= 560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}@media(width<=560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppHomeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-app-home', standalone: true, imports: [NgTemplateOutlet, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ah\">\r\n  <header class=\"ah__util\">\r\n    <button type=\"button\" class=\"ah__brand\" (click)=\"brandSelected.emit()\">\r\n      <span class=\"ah__brand-mark\"><ng-content select=\"[app-home-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"ah__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n    <ng-content select=\"[app-home-actions]\" />\r\n  </header>\r\n\r\n  <main class=\"ah__main\">\r\n    @if (titleKey() || subtitleKey()) {\r\n      <section class=\"ah__hero\">\r\n        @if (titleKey(); as key) {\r\n          <h1 class=\"ah__title\">{{ key | translate }}</h1>\r\n        }\r\n        @if (subtitleKey(); as key) {\r\n          <p class=\"ah__sub\">{{ key | translate }}</p>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @for (row of rows(); track row.index) {\r\n      <section\r\n        class=\"ah__sec\"\r\n        [class.ah__sec--secondary]=\"row.index > 0\"\r\n        [attr.aria-label]=\"row.section.titleKey ? null : (modulesLabelKey() | translate)\"\r\n      >\r\n        @if (row.section.titleKey; as titleKey) {\r\n          @if (row.section.collapsible) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ah__sec-hd\"\r\n              (click)=\"toggle(row.index)\"\r\n              [attr.aria-expanded]=\"row.expanded\"\r\n              [attr.aria-controls]=\"sectionId(row.index)\"\r\n            >\r\n              <!-- Points end-ward when shut, down when open. `--open` wins over the RTL\r\n                   flip below because a downward chevron has no direction to mirror. -->\r\n              <svg\r\n                class=\"ah__sec-chev\"\r\n                [class.ah__sec-chev--open]=\"row.expanded\"\r\n                width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n              >\r\n                <polyline points=\"9 6 15 12 9 18\" />\r\n              </svg>\r\n              <span class=\"ah__sec-title\">{{ titleKey | translate }}</span>\r\n              <span class=\"ah__sec-count\">{{ row.section.modules.length }}</span>\r\n              @if (row.hintKey; as hint) {\r\n                <span class=\"ah__sec-hint\">{{ hint | translate }}</span>\r\n              }\r\n            </button>\r\n          } @else {\r\n            <h2 class=\"ah__sec-title ah__sec-title--static\">{{ titleKey | translate }}</h2>\r\n          }\r\n        }\r\n\r\n        @if (row.expanded) {\r\n          <div class=\"ah__grid\" [class.ah__grid--compact]=\"row.layout === 'compact'\" [id]=\"sectionId(row.index)\">\r\n            @for (mod of row.section.modules; track mod.key) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"ah__card\"\r\n                [class.ah__card--compact]=\"row.layout === 'compact'\"\r\n                [disabled]=\"mod.disabled\"\r\n                (click)=\"select(mod)\"\r\n              >\r\n                <span class=\"ah__card-ico\">\r\n                  @if (iconFor(mod.key); as tpl) {\r\n                    <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                  } @else if (mod.iconClass) {\r\n                    <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                  }\r\n                </span>\r\n\r\n                @if (row.layout === 'compact') {\r\n                  <span class=\"ah__card-main\">\r\n                    <span class=\"ah__card-title\">{{ mod.labelKey | translate }}</span>\r\n                    @if (mod.descKey; as descKey) {\r\n                      <span class=\"ah__card-desc\">{{ descKey | translate }}</span>\r\n                    }\r\n                  </span>\r\n                  <svg\r\n                    class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n                  >\r\n                    <polyline points=\"9 6 15 12 9 18\" />\r\n                  </svg>\r\n                } @else {\r\n                  <span class=\"ah__card-title ah__card-title--feature\">{{ mod.labelKey | translate }}</span>\r\n                  @if (mod.descKey; as descKey) {\r\n                    <span class=\"ah__card-desc ah__card-desc--feature\">{{ descKey | translate }}</span>\r\n                  }\r\n                  <span class=\"ah__card-open\">\r\n                    {{ 'ui.action.open' | translate }}\r\n                    <svg\r\n                      class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                      stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n                    >\r\n                      <polyline points=\"9 6 15 12 9 18\" />\r\n                    </svg>\r\n                  </span>\r\n                }\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </main>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:100%;container-type:inline-size}.ah{display:flex;flex-direction:column;flex:1;min-height:100%}.ah__util{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6)}.ah__brand{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0;border:0;background:none;color:var(--ink);font-family:inherit;cursor:pointer}.ah__brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__brand-name{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__main{flex:1;inline-size:100%;max-inline-size:1120px;margin-inline:auto;padding:56px 40px;display:flex;flex-direction:column;justify-content:center;gap:44px}.ah__hero{max-inline-size:640px}.ah__title{margin:0 0 var(--sp-3);font-size:44px;font-weight:var(--fw-semibold);letter-spacing:-.03em;text-wrap:balance;background:linear-gradient(180deg,var(--ink),var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent}.ah__sub{margin:0;max-inline-size:560px;font-size:var(--text-lg);line-height:1.55;color:var(--ink-3);text-wrap:pretty}.ah__sec{display:flex;flex-direction:column;gap:var(--sp-4)}.ah__sec--secondary{padding-block-start:28px;border-block-start:1px solid var(--line)}.ah__sec-hd{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;color:var(--ink);text-align:start}.ah__sec-hd:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__sec-chev{flex-shrink:0;color:var(--ink-3);transition:transform var(--t-overlay)}.ah__sec-title{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__sec-title--static{margin:0;color:var(--ink-3);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.ah__sec-count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);font-size:var(--text-2xs);font-weight:var(--fw-medium);color:var(--ink-3)}.ah__sec-hint{margin-inline-start:auto;font-size:var(--text-xs);color:var(--ink-3)}.ah__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}.ah__card{display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;text-align:start;padding:22px 22px 18px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);color:inherit;font-family:inherit;cursor:pointer;transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}.ah__card:before{content:\"\";position:absolute;inset:0;pointer-events:none;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--t-overlay)}.ah__card:hover:not(:disabled){transform:translateY(-2px);border-color:transparent;box-shadow:var(--shadow-filter)}.ah__card:hover:not(:disabled):before{opacity:1}.ah__card:focus-visible{outline:0;border-color:transparent;box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-filter)}.ah__card:focus-visible:before{opacity:1}.ah__card:disabled{cursor:default;opacity:.5}.ah__card-ico{display:grid;place-items:center;inline-size:40px;block-size:40px;margin-block-end:18px;border-radius:11px;background:var(--bg-3);border:0;color:var(--ink);font-size:var(--icon-lg);transition:background var(--t-overlay),color var(--t-overlay)}.ah__card:hover:not(:disabled) .ah__card-ico,.ah__card:focus-visible .ah__card-ico{background:var(--grad);color:var(--ink-inverse)}.ah__card-title{font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:-.01em;color:var(--ink)}.ah__card-title--feature{margin-block-end:4px;font-size:18px;letter-spacing:-.015em}.ah__card-desc{font-size:var(--text-xs);line-height:1.45;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ah__card-desc--feature{margin-block-end:18px;font-size:var(--text-sm);line-height:1.5;text-wrap:pretty;overflow:visible;white-space:normal}.ah__card-open{display:inline-flex;align-items:center;gap:4px;margin-block-start:auto;font-size:var(--text-2xs);color:var(--ink-3);transition:color var(--t-overlay),gap var(--t-overlay)}.ah__card:hover:not(:disabled) .ah__card-open,.ah__card:focus-visible .ah__card-open{color:var(--accent);gap:8px}.ah__card-arrow{flex-shrink:0;transition:color var(--t-overlay),transform var(--t-overlay)}.ah__card--compact{flex-direction:row;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4)}.ah__card--compact .ah__card-ico{inline-size:34px;block-size:34px;margin-block-end:0;flex-shrink:0;border-radius:9px;font-size:var(--icon-md)}.ah__card-main{display:flex;flex-direction:column;gap:2px;flex:1;min-inline-size:0}.ah__card--compact .ah__card-arrow{color:var(--ink-4)}.ah__card--compact:hover:not(:disabled) .ah__card-arrow{color:var(--accent);transform:translate(2px)}:host-context([dir=rtl]) .ah__card-arrow{transform:scaleX(-1)}:host-context([dir=rtl]) .ah__sec-chev:not(.ah__sec-chev--open){transform:scaleX(-1)}:host-context([dir=rtl]) .ah__card--compact:hover:not(:disabled) .ah__card-arrow{transform:scaleX(-1) translate(2px)}.ah__sec-chev--open{transform:rotate(90deg)}@container (width <= 900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@media(width<=900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@container (width <= 560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}@media(width<=560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}\n"] }]
+        }], propDecorators: { brandLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabelKey", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], subtitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleKey", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], modulesLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "modulesLabelKey", required: false }] }], moduleSelected: [{ type: i0.Output, args: ["moduleSelected"] }], brandSelected: [{ type: i0.Output, args: ["brandSelected"] }], icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlyModuleIconDirective), { isSignal: true }] }] } });
+
 /**
  * Resolve which tab is active: the selected id when it exists in the tab set,
  * otherwise the first tab (or null with no tabs). Pure so the fallback rules
@@ -19959,7 +20576,7 @@ class FlyFormSectionComponent {
       }
     </div>
     <div class="sec__c"><ng-content /></div>
-  `, isInline: true, styles: [":host{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line-3)}:host(:last-of-type){border-bottom:0}.sec__l{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding-top:8px;position:sticky;top:8px;align-self:start}.sec__c{min-width:0}@media(width<=720px){:host{grid-template-columns:1fr;gap:8px}.sec__l{padding-top:0;position:static}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line-3)}:host(:last-of-type){border-bottom:0}.sec__l{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding-top:8px;position:sticky;top:8px;align-self:start}.sec__c{min-width:0}@container (width <= 720px){:host{grid-template-columns:1fr;gap:8px}.sec__l{padding-top:0;position:static}}@media(width<=720px){:host{grid-template-columns:1fr;gap:8px}.sec__l{padding-top:0;position:static}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyFormSectionComponent, decorators: [{
             type: Component,
@@ -19970,7 +20587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
       }
     </div>
     <div class="sec__c"><ng-content /></div>
-  `, styles: [":host{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line-3)}:host(:last-of-type){border-bottom:0}.sec__l{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding-top:8px;position:sticky;top:8px;align-self:start}.sec__c{min-width:0}@media(width<=720px){:host{grid-template-columns:1fr;gap:8px}.sec__l{padding-top:0;position:static}}\n"] }]
+  `, styles: [":host{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line-3)}:host(:last-of-type){border-bottom:0}.sec__l{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding-top:8px;position:sticky;top:8px;align-self:start}.sec__c{min-width:0}@container (width <= 720px){:host{grid-template-columns:1fr;gap:8px}.sec__l{padding-top:0;position:static}}@media(width<=720px){:host{grid-template-columns:1fr;gap:8px}.sec__l{padding-top:0;position:static}}\n"] }]
         }], propDecorators: { labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }] } });
 /**
  * Responsive field grid (port of the legacy `.dr__grid/--2/--3`): 1–3 equal
@@ -21224,5 +21841,5 @@ const AUDIENCE_ERROR_CODES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, BilingualFieldComponent, CRON_MODES, CRON_WEEKDAYS, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DS_BASELINE_LOCALES, DashboardKpiComponent, DialogResult, EntityLookupComponent, FLYOS_LAUNCH_EVENT, FLYOS_LAUNCH_REQUEST_EVENT, FLYOS_REMOTE_ROUTE_EVENT, FLY_ACCENT_PROPERTY, FLY_ADMIN_ROLES, FLY_CHUNK_RELOAD_FLAG, FLY_COMPACT_THRESHOLD, FLY_COUNTRIES, FLY_EMOJI_BY_ID, FLY_EMOJI_CATEGORIES, FLY_EMOJI_CATEGORY_BY_ID, FLY_EMOJI_DEFAULT_CATEGORIES, FLY_EMOJI_PACK, FLY_EMOJI_PACK_MISSING_MESSAGE, FLY_EMOJI_PREVIEW_COUNT, FLY_EMPTY_VALUE, FLY_LOCALE_CATALOG, FLY_NF_CACHE_HEAL_FLAG, FLY_RELOAD_DEBOUNCE_MS, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_SEARCH_DEBOUNCE_MS, FLY_SKIN_TONES, FLY_STANDALONE_AUTH_CONFIG, FLY_THEME_MODE_IDS, FLY_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppTopbarComponent, FlyAuthLiveRefresh, FlyBadgeWallComponent, FlyBlockUiComponent, FlyBreadcrumbComponent, FlyButtonComponent, FlyBytesPipe, FlyCaptchaComponent, FlyCardActionsComponent, FlyCardBodyComponent, FlyCardComponent, FlyCardFooterComponent, FlyCardGridComponent, FlyCardMediaComponent, FlyCardMetaComponent, FlyCardStatusComponent, FlyCardTitleComponent, FlyCellDirective, FlyCheckboxComponent, FlyChipComponent, FlyChunkReloadErrorHandler, FlyClickOutsideDirective, FlyCollapsibleComponent, FlyCommentThreadComponent, FlyCompactNumberPipe, FlyConfirmDialogComponent, FlyControlDirective, FlyCronBuilderComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, FlyDetailCardComponent, FlyDetailShellComponent, FlyDrawerComponent, FlyDurationPipe, FlyDynamicFormComponent, FlyEmojiPickerComponent, FlyFieldComponent, FlyFileUploadComponent, FlyFilterPanelComponent, FlyFormBannerComponent, FlyFormFooterComponent, FlyFormGridComponent, FlyFormSectionComponent, FlyFullNumberPipe, FlyGanttComponent, FlyHubClient, FlyIconButtonComponent, FlyIfAdminDirective, FlyIfRoleDirective, FlyImageUploadComponent, FlyLeaderboardComponent, FlyMetaListComponent, FlyModalComponent, FlyModerationQueueComponent, FlyModuleIconDirective, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, GANTT_ZOOMS, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, OverlayStack, PRESENCE_COLORS, PageHeaderComponent, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, STATE_DEFAULT_ICONS, STATE_DEFAULT_MESSAGE_KEYS, STEP_UP_CODE, STEP_UP_REAUTH_HANDLER, STEP_UP_RETURN_KEY, SUPPORTED_AGENT_PAYLOAD_VERSIONS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, StatusBadgeComponent, StepUpService, ToastHostComponent, TranslatePipe, WINDOW_DATA, WINDOW_HELP_HINT, WindowManagerService, applySkinTone, applySuggestion, ariaSort, buildCron, canConfirm, canGoNext, canGoPrev, captureFocus, clampPage, clampSliderValue, connectRemoteLaunch, enterActivatesNatively, filterGroup, filterSuggestions, findLocaleByDialect, findLocaleByPrefix, firstEnabledIndex, firstModuleIndex, flattenModules, flyAdminGuard, flyCaptchaBase64Utf8, flyCaptchaBuildToken, flyCaptchaSha256Hex, flyCompactNumber, flyDebounced, flyDecimalNumber, flyDownloadBlob, flyDuration, flyEmojiFor, flyEmojiIsTonable, flyEmojiPackUrl, flyExportFileName, flyFirstEnabledIndex, flyFormatBytes, flyFormatDate, flyFormatDateTime, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, hasAnyRoleIn, healNativeFederationCacheOnce, isAccentColor, isChunkLoadError, isFlyAuthStorePopulated, isNativeFederationCacheError, isRtlLocale, isRtlLocaleEntry, isValidCron, isValidSingleField, loadRemoteStyles, matchFlyRoutePattern, nextEnabledIndex, nextModuleIndex, nextSegmentIndex, nextSort, normalizeFlyTheme, normalizeRoles, overlayStack, parseCron, parseStepUpChallenge, parseTags, presenceColorFor, printConsoleSecurityWarning, provideFlyChunkReloadRecovery, provideFlyEmojiPack, provideFlyStandaloneAuth, reloadOnceForChunkError, requestAppLaunch, resolveActiveModule, resolveActiveSection, resolveActiveTab, resolveCellValue, resolveStateIcon, resolveStateMessageKey, restoreFocus, sameTags, sliderTrackGradient, sparklinePath, sparklinePoints, stepUpInterceptor, stepUpReturnKey, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload, warnIfEmbeddedSessionMissing };
+export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, BilingualFieldComponent, CRON_MODES, CRON_WEEKDAYS, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DS_BASELINE_LOCALES, DashboardKpiComponent, DialogResult, EntityLookupComponent, FLYOS_LAUNCH_EVENT, FLYOS_LAUNCH_REQUEST_EVENT, FLYOS_REMOTE_ROUTE_EVENT, FLY_ACCENT_PROPERTY, FLY_ADMIN_ROLES, FLY_CHUNK_RELOAD_FLAG, FLY_COMPACT_THRESHOLD, FLY_COUNTRIES, FLY_EMOJI_BY_ID, FLY_EMOJI_CATEGORIES, FLY_EMOJI_CATEGORY_BY_ID, FLY_EMOJI_DEFAULT_CATEGORIES, FLY_EMOJI_PACK, FLY_EMOJI_PACK_MISSING_MESSAGE, FLY_EMOJI_PREVIEW_COUNT, FLY_EMPTY_VALUE, FLY_LOCALE_CATALOG, FLY_NF_CACHE_HEAL_FLAG, FLY_RELOAD_DEBOUNCE_MS, FLY_RELOAD_REARM_MS, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_SEARCH_DEBOUNCE_MS, FLY_SKIN_TONES, FLY_STANDALONE_AUTH_CONFIG, FLY_THEME_MODE_IDS, FLY_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppHomeComponent, FlyAppTopbarComponent, FlyAuthLiveRefresh, FlyBadgeWallComponent, FlyBlockUiComponent, FlyBreadcrumbComponent, FlyButtonComponent, FlyBytesPipe, FlyCaptchaComponent, FlyCardActionsComponent, FlyCardBodyComponent, FlyCardComponent, FlyCardFooterComponent, FlyCardGridComponent, FlyCardMediaComponent, FlyCardMetaComponent, FlyCardStatusComponent, FlyCardTitleComponent, FlyCellDirective, FlyCheckboxComponent, FlyChipComponent, FlyChunkReloadErrorHandler, FlyClickOutsideDirective, FlyCollapsibleComponent, FlyCommentThreadComponent, FlyCompactNumberPipe, FlyConfirmDialogComponent, FlyControlDirective, FlyCronBuilderComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, FlyDetailCardComponent, FlyDetailShellComponent, FlyDrawerComponent, FlyDurationPipe, FlyDynamicFormComponent, FlyEmojiPickerComponent, FlyFieldComponent, FlyFileUploadComponent, FlyFilterPanelComponent, FlyFormBannerComponent, FlyFormFooterComponent, FlyFormGridComponent, FlyFormSectionComponent, FlyFullNumberPipe, FlyGanttComponent, FlyHubClient, FlyIconButtonComponent, FlyIfAdminDirective, FlyIfRoleDirective, FlyImageUploadComponent, FlyLeaderboardComponent, FlyMetaListComponent, FlyModalComponent, FlyModerationQueueComponent, FlyModuleIconDirective, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyUserDirectoryService, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, GANTT_ZOOMS, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, OverlayStack, PRESENCE_COLORS, PageHeaderComponent, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, STATE_DEFAULT_ICONS, STATE_DEFAULT_MESSAGE_KEYS, STEP_UP_CODE, STEP_UP_REAUTH_HANDLER, STEP_UP_RETURN_KEY, SUPPORTED_AGENT_PAYLOAD_VERSIONS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, StatusBadgeComponent, StepUpService, ToastHostComponent, TranslatePipe, WINDOW_DATA, WINDOW_HELP_HINT, WindowManagerService, applySkinTone, applySuggestion, ariaSort, buildCron, canConfirm, canGoNext, canGoPrev, captureFocus, clampPage, clampSliderValue, connectRemoteLaunch, enterActivatesNatively, filterGroup, filterSuggestions, findLocaleByDialect, findLocaleByPrefix, firstEnabledIndex, firstModuleIndex, flattenModules, flyAdminGuard, flyCaptchaBase64Utf8, flyCaptchaBuildToken, flyCaptchaSha256Hex, flyCompactNumber, flyDebounced, flyDecimalNumber, flyDownloadBlob, flyDuration, flyEmojiFor, flyEmojiIsTonable, flyEmojiPackUrl, flyExportFileName, flyFirstEnabledIndex, flyFormatBytes, flyFormatDate, flyFormatDateTime, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, hasAnyRoleIn, healNativeFederationCacheOnce, initialExpanded, isAccentColor, isChunkLoadError, isFlyAuthStorePopulated, isNativeFederationCacheError, isRtlLocale, isRtlLocaleEntry, isValidCron, isValidSingleField, loadRemoteStyles, matchFlyRoutePattern, nextEnabledIndex, nextModuleIndex, nextSegmentIndex, nextSort, normalizeFlyTheme, normalizeRoles, overlayStack, parseCron, parseStepUpChallenge, parseTags, presenceColorFor, printConsoleSecurityWarning, provideFlyChunkReloadRecovery, provideFlyEmojiPack, provideFlyStandaloneAuth, reloadOnceForChunkError, requestAppLaunch, resolveActiveModule, resolveActiveSection, resolveActiveTab, resolveCellValue, resolveStateIcon, resolveStateMessageKey, restoreFocus, sameTags, sectionHintKey, sectionLayout, sliderTrackGradient, sparklinePath, sparklinePoints, stepUpInterceptor, stepUpReturnKey, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload, warnIfEmbeddedSessionMissing };
 //# sourceMappingURL=flyos-design-system.mjs.map