@mohamedatia/fly-design-system 2.4.0 → 2.6.1

package/fesm2022/mohamedatia-fly-design-system.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, PLATFORM_ID, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, Output, Input, forwardRef, Injector, viewChild, effect, afterNextRender, ViewEncapsulation, model } from '@angular/core';
+import { InjectionToken, signal, computed, Injectable, inject, ErrorHandler, PLATFORM_ID, Pipe, DOCUMENT, ElementRef, input, output, HostListener, ViewChild, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, Output, Input, forwardRef, Injector, viewChild, effect, afterNextRender, ViewEncapsulation, model, Directive } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import { Router } from '@angular/router';
+import { isPlatformBrowser, CommonModule, DOCUMENT as DOCUMENT$1 } from '@angular/common';
+import { Router, NavigationEnd } from '@angular/router';
 import { of, ReplaySubject, Subject } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
@@ -375,6 +375,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
             type: Injectable
         }] });
 
+/**
+ * FlyOS standard navigation surface for Business / Supporting App remotes.
+ *
+ * Problem this solves
+ * -------------------
+ * A federated remote ships with its own Angular `Routes` table that works
+ * perfectly in **standalone** mode (e.g. `http://localhost:7202/signals/:id`).
+ * Once the same remote is mounted inside the FlyOS desktop shell via
+ * `*ngComponentOutlet`, `inject(Router)` resolves to the **host shell's**
+ * Router — which has no knowledge of `/signals/:id`. Calls like
+ * `router.navigate(['/signals', id])` then silently no-op and the click
+ * "does nothing."
+ *
+ * The fix
+ * -------
+ * Inject `FlyRemoteRouter` instead of `Router`. It mirrors `Router.navigate` /
+ * `Router.navigateByUrl` and:
+ *
+ *  - **Standalone** (no `WINDOW_DATA`): delegates to the real Angular Router,
+ *    so the URL bar, browser back button, and `RouterLink` continue to work
+ *    exactly as before.
+ *  - **Embedded** (mounted in the shell via `WINDOW_DATA`): writes the target
+ *    URL to an internal signal (`url`, `segments`) and does **not** touch the
+ *    host's Router. The remote's root component watches the signal and renders
+ *    the right view (typically a `@switch` on the first segment, plus an inline
+ *    overlay for detail pages).
+ *
+ * Usage in a list page
+ * --------------------
+ * ```ts
+ * private readonly router = inject(FlyRemoteRouter);
+ *
+ * openDetail(item: Signal): void {
+ *   this.router.navigate(['/signals', item.id]); // works in both modes
+ * }
+ * ```
+ *
+ * Usage in the remote's root component (embedded dispatcher)
+ * ----------------------------------------------------------
+ * ```ts
+ * private readonly router = inject(FlyRemoteRouter);
+ *
+ * readonly view = computed(() => {
+ *   if (!this.router.isEmbedded) return null;        // standalone: <router-outlet> handles it
+ *   const [head, id] = this.router.segments();
+ *   if (head === 'signals' && id) return { kind: 'signal-detail', id };
+ *   if (head === 'signals')      return { kind: 'signals-list' };
+ *   return { kind: head ?? 'home' };
+ * });
+ * ```
+ *
+ * Notes
+ * -----
+ * - `WINDOW_DATA` is the canonical "I am running inside the shell" marker; the
+ *   shell provides it per window, and it is `null` everywhere else.
+ * - `Router` is injected as `optional`. A remote that does not register a Router
+ *   (e.g. a tiny chromeless utility app) still gets a working `navigate` that
+ *   updates the `url` signal in embedded mode.
+ */
+class FlyRemoteRouter {
+    windowData = inject(WINDOW_DATA, { optional: true });
+    router = inject(Router, { optional: true });
+    /** True when this remote is rendered inside the FlyOS desktop shell. */
+    isEmbedded = this.windowData != null;
+    _url = signal('/', ...(ngDevMode ? [{ debugName: "_url" }] : /* istanbul ignore next */ []));
+    /**
+     * Current logical URL of the remote — `/signals/abc` etc.
+     *
+     * Standalone: mirrors `Router.url` and is updated on every `NavigationEnd`.
+     * Embedded:   updated by `navigate` / `navigateByUrl` only.
+     */
+    url = this._url.asReadonly();
+    /**
+     * `url` parsed into path segments, e.g. `'/signals/abc'` → `['signals', 'abc']`.
+     * Query string and hash are stripped. Empty segments removed.
+     */
+    segments = computed(() => {
+        const u = this._url();
+        return u.split('?')[0].split('#')[0].split('/').filter(Boolean);
+    }, ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    constructor() {
+        if (!this.isEmbedded && this.router) {
+            // Seed with the current standalone URL so consumers can read `segments()`
+            // synchronously during initial render, before any NavigationEnd fires.
+            this._url.set(this.router.url);
+            this.router.events.subscribe(event => {
+                if (event instanceof NavigationEnd) {
+                    this._url.set(event.urlAfterRedirects);
+                }
+            });
+        }
+    }
+    /**
+     * Navigate to a route, identified by an array of commands as you would pass
+     * to Angular's `Router.navigate`. In embedded mode `extras` is ignored — the
+     * shell owns history and query-param handling for the window's URL.
+     */
+    navigate(commands, extras) {
+        if (!this.isEmbedded && this.router) {
+            return this.router.navigate(commands, extras);
+        }
+        this._url.set(this.buildUrl(commands));
+        return Promise.resolve(true);
+    }
+    /**
+     * Navigate to a route given as a full URL string. Mirrors `Router.navigateByUrl`.
+     */
+    navigateByUrl(url, extras) {
+        if (!this.isEmbedded && this.router) {
+            return this.router.navigateByUrl(url, extras);
+        }
+        this._url.set(url.startsWith('/') ? url : '/' + url);
+        return Promise.resolve(true);
+    }
+    /**
+     * Convenience: pop the last two segments (the typical "go back from detail
+     * to list" gesture). In standalone mode this falls through to `history.back()`
+     * so the browser's back stack is respected.
+     */
+    back() {
+        if (!this.isEmbedded) {
+            if (typeof history !== 'undefined')
+                history.back();
+            return;
+        }
+        const segs = [...this.segments()];
+        if (segs.length === 0)
+            return;
+        segs.pop();
+        this._url.set('/' + segs.join('/'));
+    }
+    buildUrl(commands) {
+        const parts = commands
+            .map(c => (c == null ? '' : String(c)))
+            .map(s => s.replace(/^\/+|\/+$/g, ''))
+            .filter(Boolean);
+        return '/' + parts.join('/');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyRemoteRouter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyRemoteRouter, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyRemoteRouter, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 /**
  * Translates a key using the shared I18nService.
  *
@@ -619,11 +765,11 @@ class ContextMenuComponent {
         this.previouslyFocused = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ContextMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ContextMenuComponent, isStandalone: true, selector: "fly-context-menu", inputs: { x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action", closed: "closed" }, host: { listeners: { "document:mousedown": "onClickOutside($event)", "document:keydown.escape": "onEscape()", "document:contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<div\n  #contextMenu\n  class=\"context-menu\"\n  [style.left.px]=\"clampedPos().left\"\n  [style.top.px]=\"clampedPos().top\"\n  role=\"menu\"\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\n\n  @for (section of sections(); track $index) {\n    @if ($index > 0) {\n      <div class=\"menu-divider\"></div>\n    }\n    @if (section.label) {\n      <div class=\"menu-section-label\">{{ section.label }}</div>\n    }\n    @for (item of section.items; track item.id) {\n      <button\n        type=\"button\"\n        class=\"vos-btn sm rect menu-item\"\n        role=\"menuitem\"\n        (click)=\"onAction(item.id)\">\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\n        <span>{{ item.label }}</span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{display:contents}.context-menu{position:fixed;min-width:200px;padding:6px;border-radius:14px;background:var(--glass-bg, rgba(30, 30, 34, .72));backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid var(--glass-border, rgba(255, 255, 255, .15));box-shadow:0 12px 40px #00000059,0 2px 8px #0003,inset 0 .5px #ffffff1a;animation:menuEnter .18s cubic-bezier(.22,1,.36,1) both;transform-origin:top left}@keyframes menuEnter{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.menu-section-label{padding:6px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-color-secondary, rgba(255, 255, 255, .45));pointer-events:none}.menu-item{gap:10px;width:100%;padding:8px 12px;color:var(--text-color, #fff);font-size:var(--link-font-size, 13px);font-weight:var(--btn-symbol-font-weight, 510);justify-content:flex-start}.menu-item i{font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item:hover{background:var(--primary-color, #E8732A);color:#fff}.menu-item:hover i{opacity:1}.menu-item:focus-visible{background:var(--primary-color, #E8732A);outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass-border, rgba(255, 255, 255, .12))}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: ContextMenuComponent, isStandalone: true, selector: "fly-context-menu", inputs: { x: { classPropertyName: "x", publicName: "x", isSignal: true, isRequired: true, transformFunction: null }, y: { classPropertyName: "y", publicName: "y", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action", closed: "closed" }, host: { listeners: { "document:mousedown": "onClickOutside($event)", "document:keydown.escape": "onEscape()", "document:contextmenu": "onContextMenu($event)", "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: ["contextMenu"], descendants: true }], ngImport: i0, template: "<div\n  #contextMenu\n  class=\"context-menu\"\n  [style.left.px]=\"clampedPos().left\"\n  [style.top.px]=\"clampedPos().top\"\n  role=\"menu\"\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\n\n  @for (section of sections(); track $index) {\n    @if ($index > 0) {\n      <div class=\"menu-divider\"></div>\n    }\n    @if (section.label) {\n      <div class=\"menu-section-label\">{{ section.label }}</div>\n    }\n    @for (item of section.items; track item.id) {\n      <button\n        type=\"button\"\n        class=\"vos-btn sm rect menu-item\"\n        role=\"menuitem\"\n        (click)=\"onAction(item.id)\">\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\n        <span>{{ item.label }}</span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{display:contents}.context-menu{position:fixed;min-width:200px;padding:6px;border-radius:14px;background:var(--glass-bg, rgba(30, 30, 34, .72));-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);border:1px solid var(--glass-border, rgba(255, 255, 255, .15));box-shadow:0 12px 40px #00000059,0 2px 8px #0003,inset 0 .5px #ffffff1a;animation:menuEnter .18s cubic-bezier(.22,1,.36,1) both;transform-origin:top left}@keyframes menuEnter{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.menu-section-label{padding:6px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-color-secondary, rgba(255, 255, 255, .45));pointer-events:none}.menu-item{gap:10px;width:100%;padding:8px 12px;color:var(--text-color, #fff);font-size:var(--link-font-size, 13px);font-weight:var(--btn-symbol-font-weight, 510);justify-content:flex-start}.menu-item i{font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item:hover{background:var(--primary-color, #E8732A);color:#fff}.menu-item:hover i{opacity:1}.menu-item:focus-visible{background:var(--primary-color, #E8732A);outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass-border, rgba(255, 255, 255, .12))}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-context-menu', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #contextMenu\n  class=\"context-menu\"\n  [style.left.px]=\"clampedPos().left\"\n  [style.top.px]=\"clampedPos().top\"\n  role=\"menu\"\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\n\n  @for (section of sections(); track $index) {\n    @if ($index > 0) {\n      <div class=\"menu-divider\"></div>\n    }\n    @if (section.label) {\n      <div class=\"menu-section-label\">{{ section.label }}</div>\n    }\n    @for (item of section.items; track item.id) {\n      <button\n        type=\"button\"\n        class=\"vos-btn sm rect menu-item\"\n        role=\"menuitem\"\n        (click)=\"onAction(item.id)\">\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\n        <span>{{ item.label }}</span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{display:contents}.context-menu{position:fixed;min-width:200px;padding:6px;border-radius:14px;background:var(--glass-bg, rgba(30, 30, 34, .72));backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:1px solid var(--glass-border, rgba(255, 255, 255, .15));box-shadow:0 12px 40px #00000059,0 2px 8px #0003,inset 0 .5px #ffffff1a;animation:menuEnter .18s cubic-bezier(.22,1,.36,1) both;transform-origin:top left}@keyframes menuEnter{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.menu-section-label{padding:6px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-color-secondary, rgba(255, 255, 255, .45));pointer-events:none}.menu-item{gap:10px;width:100%;padding:8px 12px;color:var(--text-color, #fff);font-size:var(--link-font-size, 13px);font-weight:var(--btn-symbol-font-weight, 510);justify-content:flex-start}.menu-item i{font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item:hover{background:var(--primary-color, #E8732A);color:#fff}.menu-item:hover i{opacity:1}.menu-item:focus-visible{background:var(--primary-color, #E8732A);outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass-border, rgba(255, 255, 255, .12))}\n"] }]
+            args: [{ selector: 'fly-context-menu', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #contextMenu\n  class=\"context-menu\"\n  [style.left.px]=\"clampedPos().left\"\n  [style.top.px]=\"clampedPos().top\"\n  role=\"menu\"\n  [attr.aria-label]=\"'shell.context_menu' | translate\">\n\n  @for (section of sections(); track $index) {\n    @if ($index > 0) {\n      <div class=\"menu-divider\"></div>\n    }\n    @if (section.label) {\n      <div class=\"menu-section-label\">{{ section.label }}</div>\n    }\n    @for (item of section.items; track item.id) {\n      <button\n        type=\"button\"\n        class=\"vos-btn sm rect menu-item\"\n        role=\"menuitem\"\n        (click)=\"onAction(item.id)\">\n        <i [class]=\"'pi ' + item.icon\" aria-hidden=\"true\"></i>\n        <span>{{ item.label }}</span>\n      </button>\n    }\n  }\n</div>\n", styles: [":host{display:contents}.context-menu{position:fixed;min-width:200px;padding:6px;border-radius:14px;background:var(--glass-bg, rgba(30, 30, 34, .72));-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);border:1px solid var(--glass-border, rgba(255, 255, 255, .15));box-shadow:0 12px 40px #00000059,0 2px 8px #0003,inset 0 .5px #ffffff1a;animation:menuEnter .18s cubic-bezier(.22,1,.36,1) both;transform-origin:top left}@keyframes menuEnter{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.menu-section-label{padding:6px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-color-secondary, rgba(255, 255, 255, .45));pointer-events:none}.menu-item{gap:10px;width:100%;padding:8px 12px;color:var(--text-color, #fff);font-size:var(--link-font-size, 13px);font-weight:var(--btn-symbol-font-weight, 510);justify-content:flex-start}.menu-item i{font-size:14px;width:18px;text-align:center;opacity:.7}.menu-item:hover{background:var(--primary-color, #E8732A);color:#fff}.menu-item:hover i{opacity:1}.menu-item:focus-visible{background:var(--primary-color, #E8732A);outline:2px solid var(--focus-ring);outline-offset:-2px}.menu-divider{height:1px;margin:4px 8px;background:var(--glass-border, rgba(255, 255, 255, .12))}\n"] }]
         }], propDecorators: { menuEl: [{
                 type: ViewChild,
                 args: ['contextMenu']
@@ -676,29 +822,65 @@ class MessageBoxService {
     message = signal('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
     icon = signal(MessageBoxIcon.None, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     buttons = signal([], ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
+    /**
+     * Active "Don't ask again" config — populated only by `showAcknowledged()`.
+     * `show()` callers cannot reach this signal because the type system rejects
+     * `dontAskAgain` on the base `MessageBoxOptions`.
+     */
+    dontAskAgain = signal(undefined, ...(ngDevMode ? [{ debugName: "dontAskAgain" }] : /* istanbul ignore next */ []));
+    /**
+     * Component-side checkbox state. The component (`MessageBoxComponent`) wires
+     * its own signal to this one; the service explicitly re-seeds it on every
+     * `_open()` so reusing a constant `options` literal across two opens does
+     * NOT leak the previous user's checkbox state through signal `===` dedupe.
+     * Exposed for the component to read/write; not for general callers.
+     */
+    dontAskAgainChecked = signal(false, ...(ngDevMode ? [{ debugName: "dontAskAgainChecked" }] : /* istanbul ignore next */ []));
     resolver = null;
     show(options) {
-        // Dismiss any pending dialog so its Promise resolves rather than leaking
+        return this._open(options).then((r) => r.result);
+    }
+    /**
+     * Opens a message box with a "Don't ask again" checkbox and resolves to both
+     * the dialog result and the checkbox state. Throws when `options.dontAskAgain`
+     * is missing — the checkbox config is mandatory for this entry point. The
+     * compile-time signature already guarantees presence; the runtime check is
+     * defense-in-depth for callers that bypass the type system via `as never`.
+     */
+    showAcknowledged(options) {
+        if (!options.dontAskAgain) {
+            throw new Error('MessageBoxService.showAcknowledged() requires options.dontAskAgain — use show() for plain dialogs.');
+        }
+        return this._open(options);
+    }
+    resolve(result, dontAskAgain = false) {
+        this.visible.set(false);
+        if (this.resolver) {
+            this.resolver({ result, dontAskAgain });
+            this.resolver = null;
+        }
+    }
+    _open(options) {
+        // Dismiss any pending dialog so its Promise resolves rather than leaking.
         if (this.resolver) {
-            this.resolver(DialogResult.None);
+            this.resolver({ result: DialogResult.None, dontAskAgain: false });
             this.resolver = null;
         }
+        const daa = 'dontAskAgain' in options ? options.dontAskAgain : undefined;
         this.title.set(options.title);
         this.message.set(options.message);
         this.icon.set(options.icon ?? MessageBoxIcon.None);
         this.buttons.set(this.resolveButtons(options.buttons ?? MessageBoxButtons.OK));
+        this.dontAskAgain.set(daa);
+        // Explicit re-seed: signal `set` dedupes by `===`, so an `effect()` on
+        // `dontAskAgain` would not re-fire when a caller passes the SAME options
+        // literal twice. Set the checkbox state directly each open.
+        this.dontAskAgainChecked.set(daa?.defaultChecked ?? false);
         this.visible.set(true);
         return new Promise((resolve) => {
             this.resolver = resolve;
         });
     }
-    resolve(result) {
-        this.visible.set(false);
-        if (this.resolver) {
-            this.resolver(result);
-            this.resolver = null;
-        }
-    }
     resolveButtons(buttons) {
         const t = (key) => this.i18n.t(key);
         switch (buttons) {
@@ -746,6 +928,19 @@ class MessageBoxComponent {
     elRef = inject(ElementRef);
     MessageBoxIcon = MessageBoxIcon;
     DialogResult = DialogResult;
+    /** Mirror of the service's `dontAskAgain` config so the template can read it directly. */
+    dontAskAgainConfig = computed(() => this.service.dontAskAgain(), ...(ngDevMode ? [{ debugName: "dontAskAgainConfig" }] : /* istanbul ignore next */ []));
+    /**
+     * User-driven checkbox state, owned by the service and re-seeded on every
+     * `_open()` so reusing a constant options literal cannot leak prior state.
+     */
+    dontAskAgainChecked = this.service.dontAskAgainChecked;
+    /**
+     * Concatenated id list for the dialog's `aria-describedby`. Always includes
+     * the message; appends the checkbox label id when the checkbox is rendered
+     * so screen readers announce the checkbox as part of the description.
+     */
+    ariaDescribedBy = computed(() => this.dontAskAgainConfig() ? 'mb-message mb-dont-ask' : 'mb-message', ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
     previouslyFocused = null;
     ngAfterViewInit() {
         // Store focus origin so we can restore it on close
@@ -754,18 +949,22 @@ class MessageBoxComponent {
     }
     onEscape() {
         if (this.service.visible()) {
-            this.service.resolve(DialogResult.Cancel);
+            this.service.resolve(DialogResult.Cancel, this.dontAskAgainChecked());
             this.restoreFocus();
         }
     }
     onBackdropClick() {
-        this.service.resolve(DialogResult.Cancel);
+        this.service.resolve(DialogResult.Cancel, this.dontAskAgainChecked());
         this.restoreFocus();
     }
     onButtonClick(result) {
-        this.service.resolve(result);
+        this.service.resolve(result, this.dontAskAgainChecked());
         this.restoreFocus();
     }
+    onDontAskAgainToggle(ev) {
+        const target = ev.target;
+        this.dontAskAgainChecked.set(!!target?.checked);
+    }
     iconClass() {
         switch (this.service.icon()) {
             case MessageBoxIcon.Information: return 'pi pi-info-circle';
@@ -788,11 +987,11 @@ class MessageBoxComponent {
         this.previouslyFocused = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MessageBoxComponent, isStandalone: true, selector: "fly-message-box", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (service.visible()) {\n  <div\n    class=\"mb-backdrop\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\">\n    <div\n      class=\"mb-dialog\"\n      [class.mb-info]=\"service.icon() === MessageBoxIcon.Information\"\n      [class.mb-warning]=\"service.icon() === MessageBoxIcon.Warning\"\n      [class.mb-danger]=\"service.icon() === MessageBoxIcon.Error\"\n      [class.mb-question]=\"service.icon() === MessageBoxIcon.Question\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"mb-title\"\n      aria-describedby=\"mb-message\">\n\n      @if (iconClass()) {\n        <div class=\"mb-icon-wrap\">\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\n        </div>\n      }\n\n      <div class=\"mb-title\" id=\"mb-title\">{{ service.title() }}</div>\n      <div class=\"mb-message\" id=\"mb-message\">{{ service.message() }}</div>\n\n      <div class=\"mb-actions\">\n        @for (btn of service.buttons(); track btn.result) {\n          <button\n            type=\"button\"\n            class=\"vos-btn sm mb-btn\"\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\n            (click)=\"onButtonClick(btn.result)\">\n            {{ btn.label }}\n          </button>\n        }\n      </div>\n\n    </div>\n  </div>\n}\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color, #E8732A);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MessageBoxComponent, isStandalone: true, selector: "fly-message-box", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (service.visible()) {\r\n  <div\r\n    class=\"mb-backdrop\"\r\n    (click)=\"onBackdropClick()\"\r\n    role=\"presentation\">\r\n    <div\r\n      class=\"mb-dialog\"\r\n      [class.mb-info]=\"service.icon() === MessageBoxIcon.Information\"\r\n      [class.mb-warning]=\"service.icon() === MessageBoxIcon.Warning\"\r\n      [class.mb-danger]=\"service.icon() === MessageBoxIcon.Error\"\r\n      [class.mb-question]=\"service.icon() === MessageBoxIcon.Question\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"mb-title\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\">\r\n\r\n      @if (iconClass()) {\r\n        <div class=\"mb-icon-wrap\">\r\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"mb-title\" id=\"mb-title\">{{ service.title() }}</div>\r\n      <div class=\"mb-message\" id=\"mb-message\">{{ service.message() }}</div>\r\n\r\n      @if (dontAskAgainConfig(); as daa) {\r\n        <label class=\"mb-dont-ask-again\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"dontAskAgainChecked()\"\r\n            (change)=\"onDontAskAgainToggle($event)\" />\r\n          <span id=\"mb-dont-ask\">{{ daa.labelKey | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <div class=\"mb-actions\">\r\n        @for (btn of service.buttons(); track btn.result) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"vos-btn sm mb-btn\"\r\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\r\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\r\n            (click)=\"onButtonClick(btn.result)\">\r\n            {{ btn.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-dont-ask-again{display:flex;align-items:center;gap:8px;margin-block-start:12px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;align-self:flex-start;-webkit-user-select:none;user-select:none}.mb-dont-ask-again input[type=checkbox]{margin:0;cursor:pointer}.mb-dont-ask-again span{line-height:1.3}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color, #E8732A);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MessageBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-message-box', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (service.visible()) {\n  <div\n    class=\"mb-backdrop\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\">\n    <div\n      class=\"mb-dialog\"\n      [class.mb-info]=\"service.icon() === MessageBoxIcon.Information\"\n      [class.mb-warning]=\"service.icon() === MessageBoxIcon.Warning\"\n      [class.mb-danger]=\"service.icon() === MessageBoxIcon.Error\"\n      [class.mb-question]=\"service.icon() === MessageBoxIcon.Question\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"mb-title\"\n      aria-describedby=\"mb-message\">\n\n      @if (iconClass()) {\n        <div class=\"mb-icon-wrap\">\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\n        </div>\n      }\n\n      <div class=\"mb-title\" id=\"mb-title\">{{ service.title() }}</div>\n      <div class=\"mb-message\" id=\"mb-message\">{{ service.message() }}</div>\n\n      <div class=\"mb-actions\">\n        @for (btn of service.buttons(); track btn.result) {\n          <button\n            type=\"button\"\n            class=\"vos-btn sm mb-btn\"\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\n            (click)=\"onButtonClick(btn.result)\">\n            {{ btn.label }}\n          </button>\n        }\n      </div>\n\n    </div>\n  </div>\n}\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color, #E8732A);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}\n"] }]
+            args: [{ selector: 'fly-message-box', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (service.visible()) {\r\n  <div\r\n    class=\"mb-backdrop\"\r\n    (click)=\"onBackdropClick()\"\r\n    role=\"presentation\">\r\n    <div\r\n      class=\"mb-dialog\"\r\n      [class.mb-info]=\"service.icon() === MessageBoxIcon.Information\"\r\n      [class.mb-warning]=\"service.icon() === MessageBoxIcon.Warning\"\r\n      [class.mb-danger]=\"service.icon() === MessageBoxIcon.Error\"\r\n      [class.mb-question]=\"service.icon() === MessageBoxIcon.Question\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      role=\"alertdialog\"\r\n      aria-modal=\"true\"\r\n      aria-labelledby=\"mb-title\"\r\n      [attr.aria-describedby]=\"ariaDescribedBy()\">\r\n\r\n      @if (iconClass()) {\r\n        <div class=\"mb-icon-wrap\">\r\n          <i [class]=\"iconClass() + ' mb-icon'\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"mb-title\" id=\"mb-title\">{{ service.title() }}</div>\r\n      <div class=\"mb-message\" id=\"mb-message\">{{ service.message() }}</div>\r\n\r\n      @if (dontAskAgainConfig(); as daa) {\r\n        <label class=\"mb-dont-ask-again\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [checked]=\"dontAskAgainChecked()\"\r\n            (change)=\"onDontAskAgainToggle($event)\" />\r\n          <span id=\"mb-dont-ask\">{{ daa.labelKey | translate }}</span>\r\n        </label>\r\n      }\r\n\r\n      <div class=\"mb-actions\">\r\n        @for (btn of service.buttons(); track btn.result) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"vos-btn sm mb-btn\"\r\n            [class.mb-btn--primary]=\"btn.variant === 'primary'\"\r\n            [class.mb-btn--danger]=\"btn.variant === 'danger'\"\r\n            (click)=\"onButtonClick(btn.result)\">\r\n            {{ btn.label }}\r\n          </button>\r\n        }\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".mb-backdrop{position:absolute;inset:0;z-index:5100;background:#00000073;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:mbFadeIn .15s ease both}@keyframes mbFadeIn{0%{opacity:0}to{opacity:1}}.mb-dialog{background:var(--surface-card, rgba(30, 30, 30, .98));border:1px solid var(--surface-border);border-radius:16px;padding:28px 28px 20px;width:400px;max-width:90%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:0 20px 60px #0006;animation:mbScaleIn .2s cubic-bezier(.22,1,.36,1) both}@keyframes mbScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.mb-icon-wrap{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.mb-icon{font-size:24px}.mb-info .mb-icon-wrap{background:#3b82f61f}.mb-info .mb-icon{color:#3b82f6}.mb-warning .mb-icon-wrap{background:#f59e0b1f}.mb-warning .mb-icon{color:#f59e0b}.mb-danger .mb-icon-wrap{background:#ef44441f}.mb-danger .mb-icon{color:#ef4444}.mb-question .mb-icon-wrap{background:#8b5cf61f}.mb-question .mb-icon{color:#8b5cf6}.mb-title{font-size:15px;font-weight:700;color:var(--text-color)}.mb-message{font-size:13px;color:var(--text-color-secondary);line-height:1.55;max-width:340px;white-space:pre-line}.mb-dont-ask-again{display:flex;align-items:center;gap:8px;margin-block-start:12px;font-size:12px;color:var(--text-color-secondary);cursor:pointer;align-self:flex-start;-webkit-user-select:none;user-select:none}.mb-dont-ask-again input[type=checkbox]{margin:0;cursor:pointer}.mb-dont-ask-again span{line-height:1.3}.mb-actions{display:flex;gap:10px;margin-top:16px;width:100%;justify-content:center;flex-wrap:wrap}.mb-btn{min-width:90px}.mb-btn--primary{background:var(--primary-color, #E8732A);color:#fff}.mb-btn--primary:hover{filter:brightness(1.1)}.mb-btn--danger{background:#ef4444;color:#fff}.mb-btn--danger:hover{background:#dc2626}\n"] }]
         }], propDecorators: { onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -1832,11 +2031,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.5", ngImport: i0, type: FlyBlockUiComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", 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);backdrop-filter:blur(6px) saturate(120%);-webkit-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.5", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", 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);backdrop-filter:blur(6px) saturate(120%);-webkit-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()) {\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"] }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], messageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKey", required: false }] }] } });
 
 /**
@@ -2017,110 +2216,110 @@ class FlyImageUploadComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyImageUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FlyImageUploadComponent, isStandalone: true, selector: "fly-image-upload", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, maxSizeBytes: { classPropertyName: "maxSizeBytes", publicName: "maxSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, currentImageId: { classPropertyName: "currentImageId", publicName: "currentImageId", isSignal: true, isRequired: false, transformFunction: null }, sourceApp: { classPropertyName: "sourceApp", publicName: "sourceApp", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityType: { classPropertyName: "sourceEntityType", publicName: "sourceEntityType", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityId: { classPropertyName: "sourceEntityId", publicName: "sourceEntityId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploaded: "uploaded", removed: "removed" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "cropImage", first: true, predicate: ["cropImage"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="fly-image-upload">
-      @if (previewUrl()) {
-        <div class="fly-image-upload__preview">
-          <img [src]="previewUrl()" alt="" class="fly-image-upload__img" />
-          <div class="fly-image-upload__overlay">
-            <button type="button" class="fly-image-upload__action-btn" (click)="triggerFileInput()" [title]="'files.imageUpload.change' | translate">
-              <span class="pi pi-pencil" aria-hidden="true"></span>
-            </button>
-            <button type="button" class="fly-image-upload__action-btn fly-image-upload__action-btn--danger" (click)="removeImage()" [title]="'files.imageUpload.remove' | translate">
-              <span class="pi pi-trash" aria-hidden="true"></span>
-            </button>
-          </div>
-        </div>
-      } @else {
-        <button type="button" class="fly-image-upload__dropzone" (click)="triggerFileInput()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
-          @if (uploading()) {
-            <span class="pi pi-spin pi-spinner fly-image-upload__icon" aria-hidden="true"></span>
-            <span class="fly-image-upload__label">{{ 'files.imageUpload.uploading' | translate }}</span>
-          } @else {
-            <span class="pi pi-image fly-image-upload__icon" aria-hidden="true"></span>
-            <span class="fly-image-upload__label">{{ 'files.imageUpload.placeholder' | translate }}</span>
-            <span class="fly-image-upload__hint">{{ sizeHint() }}</span>
-          }
-        </button>
-      }
-
-      @if (error()) {
-        <div class="fly-image-upload__error">{{ error() }}</div>
-      }
-
-      <input #fileInput type="file" accept="image/*" class="fly-image-upload__hidden" (change)="onFileSelected($event)" />
-
-      @if (showCropper()) {
-        <div class="fly-image-upload__crop-backdrop" (click)="cancelCrop()">
-          <div class="fly-image-upload__crop-modal" (click)="$event.stopPropagation()">
-            <div class="fly-image-upload__crop-header">
-              <h3>{{ 'files.imageUpload.crop' | translate }}</h3>
-            </div>
-            <div class="fly-image-upload__crop-body">
-              <img #cropImage [src]="rawImageUrl()" alt="" />
-            </div>
-            <div class="fly-image-upload__crop-footer">
-              <button type="button" class="vos-btn sm platter" (click)="cancelCrop()">{{ 'common.cancel' | translate }}</button>
-              <button type="button" class="vos-btn sm primary" (click)="applyCrop()">{{ 'files.imageUpload.apply' | translate }}</button>
-            </div>
-          </div>
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: FlyImageUploadComponent, isStandalone: true, selector: "fly-image-upload", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, maxSizeBytes: { classPropertyName: "maxSizeBytes", publicName: "maxSizeBytes", isSignal: true, isRequired: false, transformFunction: null }, currentImageId: { classPropertyName: "currentImageId", publicName: "currentImageId", isSignal: true, isRequired: false, transformFunction: null }, sourceApp: { classPropertyName: "sourceApp", publicName: "sourceApp", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityType: { classPropertyName: "sourceEntityType", publicName: "sourceEntityType", isSignal: true, isRequired: false, transformFunction: null }, sourceEntityId: { classPropertyName: "sourceEntityId", publicName: "sourceEntityId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { uploaded: "uploaded", removed: "removed" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "cropImage", first: true, predicate: ["cropImage"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="fly-image-upload">
+      @if (previewUrl()) {
+        <div class="fly-image-upload__preview">
+          <img [src]="previewUrl()" alt="" class="fly-image-upload__img" />
+          <div class="fly-image-upload__overlay">
+            <button type="button" class="fly-image-upload__action-btn" (click)="triggerFileInput()" [title]="'files.imageUpload.change' | translate">
+              <span class="pi pi-pencil" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="fly-image-upload__action-btn fly-image-upload__action-btn--danger" (click)="removeImage()" [title]="'files.imageUpload.remove' | translate">
+              <span class="pi pi-trash" aria-hidden="true"></span>
+            </button>
+          </div>
+        </div>
+      } @else {
+        <button type="button" class="fly-image-upload__dropzone" (click)="triggerFileInput()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
+          @if (uploading()) {
+            <span class="pi pi-spin pi-spinner fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.uploading' | translate }}</span>
+          } @else {
+            <span class="pi pi-image fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.placeholder' | translate }}</span>
+            <span class="fly-image-upload__hint">{{ sizeHint() }}</span>
+          }
+        </button>
+      }
+
+      @if (error()) {
+        <div class="fly-image-upload__error">{{ error() }}</div>
+      }
+
+      <input #fileInput type="file" accept="image/*" class="fly-image-upload__hidden" (change)="onFileSelected($event)" />
+
+      @if (showCropper()) {
+        <div class="fly-image-upload__crop-backdrop" (click)="cancelCrop()">
+          <div class="fly-image-upload__crop-modal" (click)="$event.stopPropagation()">
+            <div class="fly-image-upload__crop-header">
+              <h3>{{ 'files.imageUpload.crop' | translate }}</h3>
+            </div>
+            <div class="fly-image-upload__crop-body">
+              <img #cropImage [src]="rawImageUrl()" alt="" />
+            </div>
+            <div class="fly-image-upload__crop-footer">
+              <button type="button" class="vos-btn sm platter" (click)="cancelCrop()">{{ 'common.cancel' | translate }}</button>
+              <button type="button" class="vos-btn sm primary" (click)="applyCrop()">{{ 'files.imageUpload.apply' | translate }}</button>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{inset:0;position:absolute}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}\n", ".fly-image-upload{display:flex;flex-direction:column;gap:6px}.fly-image-upload__hidden{display:none}.fly-image-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:12px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s;min-height:120px}.fly-image-upload__dropzone:hover{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__icon{font-size:28px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-image-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__preview{position:relative;border-radius:12px;overflow:hidden}.fly-image-upload__img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}.fly-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;opacity:0;transition:opacity .15s}.fly-image-upload__preview:hover .fly-image-upload__overlay{opacity:1}.fly-image-upload__action-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;color:var(--label-primary, #1f2937);font-size:14px;transition:background .15s}.fly-image-upload__action-btn:hover{background:#fff}.fly-image-upload__action-btn--danger:hover{background:#fee2e2;color:#dc2626}.fly-image-upload__error{font-size:12px;color:var(--system-red, #ef4444)}.fly-image-upload__crop-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);color:var(--label-primary, #1f2937);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0006;border:1px solid var(--separator-primary, rgba(0,0,0,.1))}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1f2937)}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden;background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__crop-body img{display:block;max-width:100%}.fly-image-upload__crop-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}html.spatial-theme .fly-image-upload__crop-modal{background:#ffffffa6;backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);border:1px solid rgba(255,255,255,.4)}html.spatial-theme .fly-image-upload__crop-header,html.spatial-theme .fly-image-upload__crop-footer{background:transparent}html.spatial-theme .fly-image-upload__crop-body{background:#0000000d}html.dark-theme .fly-image-upload__crop-modal{background:var(--bg-primary, #1c1c1e);border:1px solid var(--separator-primary, rgba(255,255,255,.1))}html.dark-theme .fly-image-upload__crop-body{background:var(--fill-tertiary, #2c2c2e)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyImageUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-image-upload', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
-    <div class="fly-image-upload">
-      @if (previewUrl()) {
-        <div class="fly-image-upload__preview">
-          <img [src]="previewUrl()" alt="" class="fly-image-upload__img" />
-          <div class="fly-image-upload__overlay">
-            <button type="button" class="fly-image-upload__action-btn" (click)="triggerFileInput()" [title]="'files.imageUpload.change' | translate">
-              <span class="pi pi-pencil" aria-hidden="true"></span>
-            </button>
-            <button type="button" class="fly-image-upload__action-btn fly-image-upload__action-btn--danger" (click)="removeImage()" [title]="'files.imageUpload.remove' | translate">
-              <span class="pi pi-trash" aria-hidden="true"></span>
-            </button>
-          </div>
-        </div>
-      } @else {
-        <button type="button" class="fly-image-upload__dropzone" (click)="triggerFileInput()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
-          @if (uploading()) {
-            <span class="pi pi-spin pi-spinner fly-image-upload__icon" aria-hidden="true"></span>
-            <span class="fly-image-upload__label">{{ 'files.imageUpload.uploading' | translate }}</span>
-          } @else {
-            <span class="pi pi-image fly-image-upload__icon" aria-hidden="true"></span>
-            <span class="fly-image-upload__label">{{ 'files.imageUpload.placeholder' | translate }}</span>
-            <span class="fly-image-upload__hint">{{ sizeHint() }}</span>
-          }
-        </button>
-      }
-
-      @if (error()) {
-        <div class="fly-image-upload__error">{{ error() }}</div>
-      }
-
-      <input #fileInput type="file" accept="image/*" class="fly-image-upload__hidden" (change)="onFileSelected($event)" />
-
-      @if (showCropper()) {
-        <div class="fly-image-upload__crop-backdrop" (click)="cancelCrop()">
-          <div class="fly-image-upload__crop-modal" (click)="$event.stopPropagation()">
-            <div class="fly-image-upload__crop-header">
-              <h3>{{ 'files.imageUpload.crop' | translate }}</h3>
-            </div>
-            <div class="fly-image-upload__crop-body">
-              <img #cropImage [src]="rawImageUrl()" alt="" />
-            </div>
-            <div class="fly-image-upload__crop-footer">
-              <button type="button" class="vos-btn sm platter" (click)="cancelCrop()">{{ 'common.cancel' | translate }}</button>
-              <button type="button" class="vos-btn sm primary" (click)="applyCrop()">{{ 'files.imageUpload.apply' | translate }}</button>
-            </div>
-          </div>
-        </div>
-      }
-    </div>
+            args: [{ selector: 'fly-image-upload', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    <div class="fly-image-upload">
+      @if (previewUrl()) {
+        <div class="fly-image-upload__preview">
+          <img [src]="previewUrl()" alt="" class="fly-image-upload__img" />
+          <div class="fly-image-upload__overlay">
+            <button type="button" class="fly-image-upload__action-btn" (click)="triggerFileInput()" [title]="'files.imageUpload.change' | translate">
+              <span class="pi pi-pencil" aria-hidden="true"></span>
+            </button>
+            <button type="button" class="fly-image-upload__action-btn fly-image-upload__action-btn--danger" (click)="removeImage()" [title]="'files.imageUpload.remove' | translate">
+              <span class="pi pi-trash" aria-hidden="true"></span>
+            </button>
+          </div>
+        </div>
+      } @else {
+        <button type="button" class="fly-image-upload__dropzone" (click)="triggerFileInput()" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
+          @if (uploading()) {
+            <span class="pi pi-spin pi-spinner fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.uploading' | translate }}</span>
+          } @else {
+            <span class="pi pi-image fly-image-upload__icon" aria-hidden="true"></span>
+            <span class="fly-image-upload__label">{{ 'files.imageUpload.placeholder' | translate }}</span>
+            <span class="fly-image-upload__hint">{{ sizeHint() }}</span>
+          }
+        </button>
+      }
+
+      @if (error()) {
+        <div class="fly-image-upload__error">{{ error() }}</div>
+      }
+
+      <input #fileInput type="file" accept="image/*" class="fly-image-upload__hidden" (change)="onFileSelected($event)" />
+
+      @if (showCropper()) {
+        <div class="fly-image-upload__crop-backdrop" (click)="cancelCrop()">
+          <div class="fly-image-upload__crop-modal" (click)="$event.stopPropagation()">
+            <div class="fly-image-upload__crop-header">
+              <h3>{{ 'files.imageUpload.crop' | translate }}</h3>
+            </div>
+            <div class="fly-image-upload__crop-body">
+              <img #cropImage [src]="rawImageUrl()" alt="" />
+            </div>
+            <div class="fly-image-upload__crop-footer">
+              <button type="button" class="vos-btn sm platter" (click)="cancelCrop()">{{ 'common.cancel' | translate }}</button>
+              <button type="button" class="vos-btn sm primary" (click)="applyCrop()">{{ 'files.imageUpload.apply' | translate }}</button>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
   `, styles: [".cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{inset:0;position:absolute}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:\" \";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}\n", ".fly-image-upload{display:flex;flex-direction:column;gap:6px}.fly-image-upload__hidden{display:none}.fly-image-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:12px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s;min-height:120px}.fly-image-upload__dropzone:hover{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__icon{font-size:28px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-image-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-image-upload__preview{position:relative;border-radius:12px;overflow:hidden}.fly-image-upload__img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:12px}.fly-image-upload__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;background:#00000059;opacity:0;transition:opacity .15s}.fly-image-upload__preview:hover .fly-image-upload__overlay{opacity:1}.fly-image-upload__action-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#ffffffe6;color:var(--label-primary, #1f2937);font-size:14px;transition:background .15s}.fly-image-upload__action-btn:hover{background:#fff}.fly-image-upload__action-btn--danger:hover{background:#fee2e2;color:#dc2626}.fly-image-upload__error{font-size:12px;color:var(--system-red, #ef4444)}.fly-image-upload__crop-backdrop{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.fly-image-upload__crop-modal{background:var(--bg-primary, #fff);color:var(--label-primary, #1f2937);border-radius:16px;overflow:hidden;max-width:700px;width:90vw;box-shadow:0 20px 60px #0006;border:1px solid var(--separator-primary, rgba(0,0,0,.1))}.fly-image-upload__crop-header{padding:16px 20px;border-bottom:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}.fly-image-upload__crop-header h3{margin:0;font-size:16px;font-weight:600;color:var(--label-primary, #1f2937)}.fly-image-upload__crop-body{max-height:60vh;overflow:hidden;background:var(--fill-tertiary, #f3f4f6)}.fly-image-upload__crop-body img{display:block;max-width:100%}.fly-image-upload__crop-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--separator-primary, #e5e7eb);background:var(--fill-quaternary, transparent)}html.spatial-theme .fly-image-upload__crop-modal{background:#ffffffa6;backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);border:1px solid rgba(255,255,255,.4)}html.spatial-theme .fly-image-upload__crop-header,html.spatial-theme .fly-image-upload__crop-footer{background:transparent}html.spatial-theme .fly-image-upload__crop-body{background:#0000000d}html.dark-theme .fly-image-upload__crop-modal{background:var(--bg-primary, #1c1c1e);border:1px solid var(--separator-primary, rgba(255,255,255,.1))}html.dark-theme .fly-image-upload__crop-body{background:var(--fill-tertiary, #2c2c2e)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], maxSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeBytes", required: false }] }], currentImageId: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentImageId", required: false }] }], sourceApp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceApp", required: false }] }], sourceEntityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityType", required: false }] }], sourceEntityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityId", required: false }] }], uploaded: [{ type: i0.Output, args: ["uploaded"] }], removed: [{ type: i0.Output, args: ["removed"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], cropImage: [{ type: i0.ViewChild, args: ['cropImage', { isSignal: true }] }] } });
 
@@ -2456,6 +2655,1113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
   `, styles: [".fly-file-upload{display:flex;flex-direction:column;gap:8px}.fly-file-upload__hidden{display:none}.fly-file-upload__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;border:2px dashed var(--separator-primary, #e5e7eb);border-radius:10px;background:var(--fill-quaternary, #f9fafb);cursor:pointer;transition:border-color .15s,background .15s}.fly-file-upload__dropzone:hover,.fly-file-upload__dropzone--drag{border-color:var(--accent-primary, #0071e3);background:var(--fill-tertiary, #f3f4f6)}.fly-file-upload__icon{font-size:24px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__label{font-size:13px;color:var(--label-secondary, #6b7280)}.fly-file-upload__hint{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__error{font-size:12px;color:var(--system-red, #ef4444);padding:4px 0}.fly-file-upload__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.fly-file-upload__item{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--separator-primary, #e5e7eb);border-radius:8px;background:var(--fill-quaternary, #f9fafb);font-size:13px}.fly-file-upload__file-icon{font-size:18px;color:var(--label-tertiary, #9ca3af);flex-shrink:0}.fly-file-upload__file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.fly-file-upload__file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--label-primary, #1f2937)}.fly-file-upload__file-size{font-size:11px;color:var(--label-tertiary, #9ca3af)}.fly-file-upload__progress-track{width:60px;height:4px;border-radius:2px;background:var(--fill-tertiary, #e5e7eb);overflow:hidden}.fly-file-upload__progress-fill{height:100%;background:var(--accent-primary, #0071e3);border-radius:2px;transition:width .2s}.fly-file-upload__file-ok{color:var(--system-green, #22c55e);font-size:14px}.fly-file-upload__file-error{color:var(--system-red, #ef4444);font-size:14px}.fly-file-upload__remove-btn{background:none;border:none;cursor:pointer;color:var(--label-tertiary, #9ca3af);width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:color .15s,background .15s;flex-shrink:0}.fly-file-upload__remove-btn:hover{color:var(--system-red, #ef4444);background:var(--fill-tertiary, #f3f4f6)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxFileSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeBytes", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], sourceApp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceApp", required: false }] }], sourceEntityType: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityType", required: false }] }], sourceEntityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceEntityId", required: false }] }], existingFileIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFileIds", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], filesChanged: [{ type: i0.Output, args: ["filesChanged"] }], fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
 
+/**
+ * Singleton registry of slash commands offered by the agent input palette.
+ *
+ * Lives in the DS so it crosses the federation boundary as a single instance via
+ * `sharedMappings: ['@mohamedatia/fly-design-system']`. Federated remotes register
+ * their commands at boot (and dispose on window close) without forking the shell.
+ *
+ * Storage is a signal store. `register` is O(1) for the unique-id case and O(n) when
+ * replacing an existing id (filter then push). The append-then-replace strategy is
+ * deliberate: registrations are rare (each one corresponds to a remote's app-init
+ * effect), and the tradeoff buys us a stable id-collision contract — the *latest*
+ * registration wins, and the previous handle's `dispose()` becomes a no-op rather
+ * than removing the new entry.
+ */
+class AgentCommandRegistry {
+    _commands = signal([], ...(ngDevMode ? [{ debugName: "_commands" }] : /* istanbul ignore next */ []));
+    /** All currently-registered commands, in insertion order. */
+    all = this._commands.asReadonly();
+    /**
+     * Returns a signal of commands whose scope is `'global'` OR whose `scope.appId` is in
+     * the live app set. The signal recomputes when either the registry or `liveAppIds`
+     * changes — pass a `Signal<ReadonlySet<string>>` from the host's app-registry service
+     * for reactive filtering.
+     */
+    visible(liveAppIds) {
+        const liveSignal = isSignal(liveAppIds) ? liveAppIds : signal(liveAppIds).asReadonly();
+        return computed(() => {
+            const live = liveSignal();
+            return this._commands().filter((cmd) => {
+                if (cmd.scope === 'global')
+                    return true;
+                return live.has(cmd.scope.appId);
+            });
+        });
+    }
+    /**
+     * Register a single command. Returns a handle whose `dispose()` removes the row by
+     * id. If the same id is later re-registered, the original handle's `dispose()`
+     * becomes a no-op (the newer registration owns the row). Idempotent disposal.
+     */
+    register(cmd) {
+        const generation = ++this._generation;
+        this._commands.update((rows) => [...rows.filter((r) => r.id !== cmd.id), cmd]);
+        this._owners.set(cmd.id, generation);
+        return {
+            dispose: () => {
+                if (this._owners.get(cmd.id) === generation) {
+                    this._owners.delete(cmd.id);
+                    this._commands.update((rows) => rows.filter((r) => r.id !== cmd.id));
+                }
+            },
+        };
+    }
+    /**
+     * Bulk register. Rolls back on duplicate id within the input batch (throws before any
+     * row lands). Cross-batch duplicates against existing rows follow the standard
+     * "latest wins" rule and do NOT trigger rollback.
+     *
+     * Returns a handle whose `dispose()` tears down every row registered by this call.
+     */
+    registerAll(cmds) {
+        const seen = new Set();
+        for (const c of cmds) {
+            if (seen.has(c.id)) {
+                throw new Error(`AgentCommandRegistry.registerAll: duplicate id "${c.id}" in batch`);
+            }
+            seen.add(c.id);
+        }
+        const handles = cmds.map((c) => this.register(c));
+        let disposed = false;
+        return {
+            dispose: () => {
+                if (disposed)
+                    return;
+                disposed = true;
+                for (const h of handles)
+                    h.dispose();
+            },
+        };
+    }
+    /** Tear down by id. Idempotent. */
+    unregister(id) {
+        if (this._owners.delete(id)) {
+            this._commands.update((rows) => rows.filter((r) => r.id !== id));
+        }
+    }
+    /** Monotonic counter; identifies which registration call currently owns each id. */
+    _generation = 0;
+    /** id → generation. Used so a stale handle's `dispose()` is a no-op after replacement. */
+    _owners = new Map();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AgentCommandRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AgentCommandRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AgentCommandRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/** `isSignal` shim — narrows to either `Signal<T>` or a plain value. */
+function isSignal(v) {
+    return typeof v === 'function';
+}
+
+/**
+ * Singleton registry of chip-renderer components and keyboard-alternative draggable
+ * items, keyed by `kind` and `appId`.
+ *
+ * Like {@link AgentCommandRegistry}, this lives in the DS so it crosses the federation
+ * boundary as a single instance. Hosts (the shell `<fly-agent-input>`) lookup
+ * renderers; remotes register them.
+ *
+ * Renderer lookup is `O(n)` over the registered list — the registry is small (one or
+ * two entries per app) and lookups happen on drop, not per frame.
+ *
+ * Draggable storage is per-`appId` writable signal cached in a Map, so each `appId`
+ * gets a stable {@link Signal} reference across reads (callers can `===`-compare).
+ */
+class AgentDropRegistry {
+    _renderers = signal([], ...(ngDevMode ? [{ debugName: "_renderers" }] : /* istanbul ignore next */ []));
+    /** Per-appId writable store for draggables. Read-only mirror returned to callers. */
+    _draggablesByApp = new Map();
+    /**
+     * Look up the chip-renderer component class for a `kind`. The newest registration for
+     * a given `kind` wins, regardless of `appId` — we scan the list in reverse so a later
+     * `register` call shadows an earlier one for the same `kind`.
+     *
+     * Returns `null` when no renderer is registered; the host falls back to a generic
+     * `plainTextFallback` chip.
+     */
+    rendererFor(kind) {
+        const list = this._renderers();
+        for (let i = list.length - 1; i >= 0; i--) {
+            if (list[i].kind === kind)
+                return list[i].component;
+        }
+        return null;
+    }
+    /**
+     * Register a renderer for a `(kind, appId)` pair. Re-registering the same pair
+     * replaces the prior entry; the disposal handle for the prior registration becomes
+     * a no-op.
+     *
+     * Returns a {@link AgentCommandHandle} (re-used to keep the disposable shape uniform
+     * across registries) whose `dispose()` removes this exact registration.
+     */
+    register(reg) {
+        const generation = ++this._generation;
+        const key = compositeKey(reg.kind, reg.appId);
+        this._renderers.update((rows) => [
+            ...rows.filter((r) => compositeKey(r.kind, r.appId) !== key),
+            reg,
+        ]);
+        this._owners.set(key, generation);
+        return {
+            dispose: () => {
+                if (this._owners.get(key) === generation) {
+                    this._owners.delete(key);
+                    this._renderers.update((rows) => rows.filter((r) => compositeKey(r.kind, r.appId) !== key));
+                }
+            },
+        };
+    }
+    /**
+     * Apps publish their live "draggable from focused window" set so the keyboard
+     * "Attach from app…" menu can offer them. Hosts call this each time the user-visible
+     * draggable list changes; passing an empty array clears the entry for this `appId`.
+     */
+    publishDraggables(appId, items) {
+        if (items.length === 0) {
+            const existing = this._draggablesByApp.get(appId);
+            if (existing)
+                existing.set([]);
+            return;
+        }
+        this.bucketFor(appId).set(items);
+    }
+    /**
+     * Reactive read of the draggable set published for `appId`. Empty when none. The
+     * returned signal is stable across calls (cached by `appId`), so consumers can use
+     * it as a stable input to `computed()`.
+     */
+    draggablesFor(appId) {
+        return this.bucketFor(appId).asReadonly();
+    }
+    /** Lazy-init the per-appId writable bucket. Returns the writable handle for internal use. */
+    bucketFor(appId) {
+        let bucket = this._draggablesByApp.get(appId);
+        if (!bucket) {
+            bucket = signal([]);
+            this._draggablesByApp.set(appId, bucket);
+        }
+        return bucket;
+    }
+    _generation = 0;
+    _owners = new Map();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AgentDropRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AgentDropRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AgentDropRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function compositeKey(kind, appId) {
+    return `${kind}::${appId}`;
+}
+
+/**
+ * Agent input contracts.
+ *
+ * These types define the wire and DI surface for the new `<fly-agent-input>` orchestrator
+ * (Phase 2+). Phase 1 ships only the contracts: payload envelope, command/drop registry
+ * shapes, and chip-host inputs. The concrete components consume them later.
+ *
+ * Design rules:
+ *   - All fields are `readonly` — the registries store these in signal stores and we never
+ *     want a host mutating after registration. Hosts construct fresh objects to update.
+ *   - The discriminated kinds (`scope`, `mode`, `kind`) carry the entire variance — no
+ *     boolean flags. New variants extend the union without breaking existing consumers.
+ *   - The `Type<AgentChipHostInputs<T>>` shape is intentional: chip components declare
+ *     `payload`, `mode`, optional `onRemove` as Angular `input()` signals; the registry
+ *     wires them via `NgComponentOutlet` inputs in the consumer. The component reference
+ *     itself never leaks across the federation boundary by value — only by class identity.
+ */
+/** Frozen MIME used by `flyAgentDraggable` and the drop-zone reader. Never change without a DS major. */
+const AGENT_DRAG_MIME = 'application/x-fly-agent-payload+json';
+/** Frozen payload envelope version. Bump only with a published DS major. */
+const AGENT_PAYLOAD_VERSION = 1;
+const DEFAULT_AGENT_PAYLOAD_LIMITS = Object.freeze({
+    maxJsonBytes: 32 * 1024,
+    maxPlainTextFallbackBytes: 8 * 1024,
+    maxStringFieldBytes: 4 * 1024,
+});
+
+/**
+ * Pure utility helpers for agent drag payload size guarding.
+ *
+ * Used by `flyAgentDraggable` at `dragstart` (Phase 2) and by app pre-flight code that
+ * wants a clean payload before constructing the directive input. No Angular DI, no
+ * runtime side effects — safe to import from anywhere.
+ *
+ * Performance notes:
+ *   - The `TextEncoder` is lazily allocated and cached. The constructor runs once per
+ *     module instance even under federation (singleton DS).
+ *   - String trimming uses `Intl.Segmenter` when available (all evergreen browsers
+ *     including Safari 14.1+) so we cut on grapheme boundaries — emoji ZWJ sequences,
+ *     combining marks, regional indicator pairs all stay intact. Fallback is
+ *     UTF-16 code-unit slice, which is a graceful degradation: it can split a
+ *     surrogate pair, but the resulting JSON is still syntactically valid and
+ *     downstream renderers handle the replacement char.
+ */
+/**
+ * Thrown by {@link trimAgentPayload} when even a fully string-trimmed envelope still
+ * exceeds `maxJsonBytes` (e.g. an envelope with thousands of nested empty objects /
+ * array entries / property keys). Subclasses `RangeError` so callers using the standard
+ * `instanceof RangeError` check still match, while exposing the structured fields
+ * (`actualBytes`, `limitBytes`, `reason: 'json_too_large'`) needed for telemetry and
+ * symmetric handling with {@link AgentPayloadValidationResult} failures.
+ */
+class AgentPayloadOversizeError extends RangeError {
+    actualBytes;
+    limitBytes;
+    reason = 'json_too_large';
+    constructor(message, actualBytes, limitBytes) {
+        super(message);
+        this.actualBytes = actualBytes;
+        this.limitBytes = limitBytes;
+        this.name = 'AgentPayloadOversizeError';
+    }
+}
+/** Cap on the dotted `fieldPath` string so a 10 MB property-key payload can't lock dev tools when `console.warn`d. */
+const FIELD_PATH_MAX_CHARS = 256;
+/** Append a path segment, capping the result at {@link FIELD_PATH_MAX_CHARS} chars (with `…` marker). */
+function appendPath(base, segment) {
+    const next = base + segment;
+    if (next.length <= FIELD_PATH_MAX_CHARS)
+        return next;
+    return next.slice(0, FIELD_PATH_MAX_CHARS - 1) + '…';
+}
+let _cachedEncoder = null;
+function getEncoder() {
+    return (_cachedEncoder ??= new TextEncoder());
+}
+/** UTF-8 byte length of `s`. Cheap; cached encoder. */
+function utf8ByteLength(s) {
+    return getEncoder().encode(s).length;
+}
+/**
+ * Trim `input` so the UTF-8 byte length of the result is `<= maxBytes`. When trimming
+ * occurs, append `ellipsis` (default `…`, U+2026) — its bytes are included in the cap.
+ *
+ * Idempotent: `trimAgentString(trimAgentString(s, n), n)` equals `trimAgentString(s, n)`.
+ *
+ * Edge cases:
+ *   - `maxBytes` shorter than the ellipsis itself returns an empty string.
+ *   - `Intl.Segmenter` (when present) ensures we never split a grapheme cluster.
+ *   - When the encoded length is already within the cap, returns `input` unchanged.
+ */
+function trimAgentString(input, maxBytes, ellipsis = '…') {
+    if (maxBytes <= 0)
+        return '';
+    const enc = getEncoder();
+    const inputLen = enc.encode(input).length;
+    if (inputLen <= maxBytes)
+        return input;
+    const ellipsisLen = enc.encode(ellipsis).length;
+    if (maxBytes < ellipsisLen)
+        return '';
+    const budget = maxBytes - ellipsisLen;
+    // Segmenter path: walk graphemes, accumulate until next would overflow.
+    const segmenterCtor = typeof Intl !== 'undefined' && Intl.Segmenter;
+    if (segmenterCtor) {
+        const segmenter = new segmenterCtor(undefined, { granularity: 'grapheme' });
+        let used = 0;
+        let acc = '';
+        for (const seg of segmenter.segment(input)) {
+            const segLen = enc.encode(seg.segment).length;
+            if (used + segLen > budget)
+                break;
+            acc += seg.segment;
+            used += segLen;
+        }
+        return acc + ellipsis;
+    }
+    // Fallback: code-unit slice; verify byte length and shrink until under budget.
+    let cut = input.length;
+    while (cut > 0 && enc.encode(input.slice(0, cut)).length > budget) {
+        cut--;
+    }
+    return input.slice(0, cut) + ellipsis;
+}
+/**
+ * Validate an {@link AgentDragPayload} against the supplied limits (or
+ * {@link DEFAULT_AGENT_PAYLOAD_LIMITS} when omitted). Returns `{ ok: true }` or a
+ * structured failure with the offending field path and byte counts.
+ *
+ * Order of checks (cheap → expensive):
+ *   1. `version` matches the frozen {@link AGENT_PAYLOAD_VERSION}.
+ *   2. `kind` is a non-empty string.
+ *   3. `plainTextFallback` fits its cap.
+ *   4. Every string in `payload` (recursively) fits the per-field cap.
+ *   5. The full `JSON.stringify(envelope)` fits the JSON cap.
+ *
+ * The walker stops on the first oversize string field — the intent is to surface
+ * actionable feedback, not enumerate every offender.
+ */
+function validateAgentPayload(payload, limits) {
+    const eff = { ...DEFAULT_AGENT_PAYLOAD_LIMITS, ...(limits ?? {}) };
+    if (payload.version !== AGENT_PAYLOAD_VERSION) {
+        return { ok: false, reason: 'invalid_version' };
+    }
+    if (typeof payload.kind !== 'string' || payload.kind.length === 0) {
+        return { ok: false, reason: 'invalid_kind' };
+    }
+    const fbBytes = utf8ByteLength(payload.plainTextFallback ?? '');
+    if (fbBytes > eff.maxPlainTextFallbackBytes) {
+        return {
+            ok: false,
+            reason: 'fallback_too_large',
+            fieldPath: 'plainTextFallback',
+            actualBytes: fbBytes,
+            limitBytes: eff.maxPlainTextFallbackBytes,
+        };
+    }
+    const fieldFailure = walkStringsForOverage(payload.payload, 'payload', eff.maxStringFieldBytes);
+    if (fieldFailure)
+        return fieldFailure;
+    const json = safeStringify(payload);
+    const jsonBytes = utf8ByteLength(json);
+    if (jsonBytes > eff.maxJsonBytes) {
+        return {
+            ok: false,
+            reason: 'json_too_large',
+            actualBytes: jsonBytes,
+            limitBytes: eff.maxJsonBytes,
+        };
+    }
+    return { ok: true };
+}
+/**
+ * Returns a NEW payload with all string fields trimmed to fit the per-field cap, the
+ * `plainTextFallback` trimmed to its cap, and the full envelope re-checked against the
+ * JSON cap. Idempotent — a second call against the trimmed result yields equal output.
+ *
+ * Throws {@link AgentPayloadOversizeError} only if even an empty trim couldn't shrink it
+ * under the cap (e.g. an envelope with 1000+ nested empty objects). The error subclasses
+ * `RangeError`, so legacy `instanceof RangeError` checks still match. Apps that hit this
+ * should re-shape `payload` rather than call again.
+ */
+function trimAgentPayload(payload, limits) {
+    const eff = { ...DEFAULT_AGENT_PAYLOAD_LIMITS, ...(limits ?? {}) };
+    const trimmedFallback = trimAgentString(payload.plainTextFallback ?? '', eff.maxPlainTextFallbackBytes);
+    const trimmedPayload = mapStrings(payload.payload, (s) => trimAgentString(s, eff.maxStringFieldBytes));
+    const next = {
+        ...payload,
+        plainTextFallback: trimmedFallback,
+        payload: trimmedPayload,
+    };
+    const jsonBytes = utf8ByteLength(safeStringify(next));
+    if (jsonBytes > eff.maxJsonBytes) {
+        throw new AgentPayloadOversizeError(`AgentDragPayload exceeds maxJsonBytes (${jsonBytes} > ${eff.maxJsonBytes}) after string trimming. Re-shape the payload.`, jsonBytes, eff.maxJsonBytes);
+    }
+    return next;
+}
+// ─── Internal helpers ───────────────────────────────────────────────────────
+/**
+ * Recursively walks `value`, returning the first string field that exceeds `maxBytes`
+ * (as a structured failure). Returns `null` when every string fits.
+ *
+ * Path uses dotted property-access notation: `payload.body`, `payload.tags[2]`. Cycles
+ * are detected via a WeakSet so attacker-crafted self-references don't loop forever.
+ * Path strings are capped at {@link FIELD_PATH_MAX_CHARS} characters via {@link appendPath}
+ * to prevent a malicious payload with multi-MB property keys from producing a multi-MB
+ * `fieldPath` that locks up dev tools when logged.
+ */
+function walkStringsForOverage(value, path, maxBytes, seen = new WeakSet()) {
+    if (typeof value === 'string') {
+        const bytes = utf8ByteLength(value);
+        if (bytes > maxBytes) {
+            return {
+                ok: false,
+                reason: 'field_too_large',
+                fieldPath: path,
+                actualBytes: bytes,
+                limitBytes: maxBytes,
+            };
+        }
+        return null;
+    }
+    if (value === null || typeof value !== 'object')
+        return null;
+    if (seen.has(value))
+        return null;
+    seen.add(value);
+    if (Array.isArray(value)) {
+        for (let i = 0; i < value.length; i++) {
+            const r = walkStringsForOverage(value[i], appendPath(path, `[${i}]`), maxBytes, seen);
+            if (r)
+                return r;
+        }
+        return null;
+    }
+    for (const [k, v] of Object.entries(value)) {
+        const r = walkStringsForOverage(v, appendPath(path, `.${k}`), maxBytes, seen);
+        if (r)
+            return r;
+    }
+    return null;
+}
+/**
+ * Recursively maps every string leaf via `fn`, preserving object/array structure.
+ * Cycles are short-circuited to `null` rather than throwing — the caller already
+ * has a JSON.stringify cap that will catch any pathological input.
+ */
+function mapStrings(value, fn, seen = new WeakSet()) {
+    if (typeof value === 'string')
+        return fn(value);
+    if (value === null || typeof value !== 'object')
+        return value;
+    if (seen.has(value))
+        return null;
+    seen.add(value);
+    if (Array.isArray(value)) {
+        return value.map((v) => mapStrings(v, fn, seen));
+    }
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+        out[k] = mapStrings(v, fn, seen);
+    }
+    return out;
+}
+/** `JSON.stringify` with a cycle-safe replacer — defends against attacker-crafted graphs. */
+function safeStringify(value) {
+    const seen = new WeakSet();
+    return JSON.stringify(value, (_k, v) => {
+        if (v !== null && typeof v === 'object') {
+            if (seen.has(v))
+                return '[Circular]';
+            seen.add(v);
+        }
+        return v;
+    });
+}
+
+/**
+ * Strict whitelist for the ghost element id. Letter-led ASCII, allows word/hyphen/colon/dot,
+ * capped at 128 chars. Anything else is rejected before reaching `getElementById` so a
+ * future maintainer can't swap to `querySelector` and quietly reintroduce a CSS-injection
+ * vector. (`getElementById` itself is string-equality-safe; the whitelist is defence-in-depth.)
+ */
+const GHOST_ID_PATTERN = /^[A-Za-z][\w\-:.]{0,127}$/;
+/**
+ * Single canonical way to declare a drag source for the agent input.
+ *
+ * Apply on any element a remote wants to make draggable into the `<fly-agent-input>`:
+ *
+ * ```html
+ * <article [flyAgentDraggable]="() => buildPayload(trend)" flyAgentDraggableGhostId="trend-ghost">…</article>
+ * ```
+ *
+ * On `dragstart` the directive:
+ *   1. Resolves the payload (calls the builder fn if supplied; otherwise reads the
+ *      static value).
+ *   2. Validates against {@link DEFAULT_AGENT_PAYLOAD_LIMITS} via
+ *      {@link validateAgentPayload}. On failure it `console.warn`s with the structured
+ *      reason and writes ONLY the `text/plain` fallback — the receiver still sees a
+ *      legible drop, but the typed envelope is skipped so a misconfigured app can't
+ *      corrupt downstream consumers with an oversize payload.
+ *   3. Writes the typed MIME (`application/x-fly-agent-payload+json`) plus the
+ *      `text/plain` fallback so non-Fly drop targets still get useful text.
+ *   4. Sets `effectAllowed = 'copy'` (we never *move* domain objects across windows).
+ *   5. When `flyAgentDraggableGhostId` resolves to an element in the DOM, calls
+ *      `setDragImage` to use that element as the drag preview; otherwise the browser
+ *      default applies.
+ *
+ * Notes:
+ *   - Builder form is preferred over static — it captures fresh state at `dragstart`,
+ *     not at directive init. A static `AgentDragPayload` is fine for items whose
+ *     domain object never changes after the row mounts.
+ *   - The directive sets `[attr.draggable]="true"` so callers don't have to.
+ */
+class FlyAgentDraggableDirective {
+    /**
+     * Either a static payload or a builder evaluated at `dragstart` (preferred — captures
+     * fresh state). `input.required` so misuse fails at template compile time.
+     */
+    flyAgentDraggable = input.required(...(ngDevMode ? [{ debugName: "flyAgentDraggable" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional ghost element id (an existing element in the DOM whose snapshot becomes
+     * the drag image). Falls back to the default browser drag image when absent or the
+     * element can't be resolved.
+     *
+     * Must be a valid HTML id (ASCII, letter-led). `getElementById` is intentional —
+     * do NOT swap to `querySelector` without re-introducing this whitelist.
+     */
+    flyAgentDraggableGhostId = input(undefined, ...(ngDevMode ? [{ debugName: "flyAgentDraggableGhostId" }] : /* istanbul ignore next */ []));
+    doc = inject(DOCUMENT$1);
+    onDragStart(ev) {
+        const dt = ev.dataTransfer;
+        if (!dt)
+            return;
+        const payload = this.resolvePayload();
+        const validation = validateAgentPayload(payload);
+        if (!validation.ok) {
+            // eslint-disable-next-line no-console
+            console.warn('[flyAgentDraggable] payload validation failed; degrading to text/plain', validation);
+            dt.setData('text/plain', payload.plainTextFallback ?? '');
+            dt.effectAllowed = 'copy';
+            return;
+        }
+        dt.setData(AGENT_DRAG_MIME, JSON.stringify(payload));
+        dt.setData('text/plain', payload.plainTextFallback ?? '');
+        dt.effectAllowed = 'copy';
+        const ghostId = this.flyAgentDraggableGhostId();
+        if (ghostId) {
+            if (!GHOST_ID_PATTERN.test(ghostId)) {
+                // Don't echo the rejected id (caller-controlled, could be huge).
+                // eslint-disable-next-line no-console
+                console.warn('[flyAgentDraggable] ignoring ghost id', { reason: 'invalid_ghost_id' });
+            }
+            else {
+                const ghost = this.doc.getElementById(ghostId);
+                if (ghost) {
+                    // Center the drag image; ResizeObserver-aware sizing is left to the host element.
+                    dt.setDragImage(ghost, ghost.clientWidth / 2, ghost.clientHeight / 2);
+                }
+            }
+        }
+    }
+    resolvePayload() {
+        const raw = this.flyAgentDraggable();
+        return typeof raw === 'function' ? raw() : raw;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyAgentDraggableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: FlyAgentDraggableDirective, isStandalone: true, selector: "[flyAgentDraggable]", inputs: { flyAgentDraggable: { classPropertyName: "flyAgentDraggable", publicName: "flyAgentDraggable", isSignal: true, isRequired: true, transformFunction: null }, flyAgentDraggableGhostId: { classPropertyName: "flyAgentDraggableGhostId", publicName: "flyAgentDraggableGhostId", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "dragstart": "onDragStart($event)" }, properties: { "attr.draggable": "\"true\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: FlyAgentDraggableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[flyAgentDraggable]',
+                    standalone: true,
+                    host: {
+                        '[attr.draggable]': '"true"',
+                    },
+                }]
+        }], propDecorators: { flyAgentDraggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "flyAgentDraggable", required: true }] }], flyAgentDraggableGhostId: [{ type: i0.Input, args: [{ isSignal: true, alias: "flyAgentDraggableGhostId", required: false }] }], onDragStart: [{
+                type: HostListener,
+                args: ['dragstart', ['$event']]
+            }] } });
+
+/**
+ * Verbatim TypeScript port of the C# `LanguageDTO[] _AllLanguages` array supplied by
+ * product. **31 entries**, in the canonical order. Three RTL flagged: `he-IL`, `ur-IN`,
+ * `ar-AE`. Includes `cmn-Hant-TW` for Chinese and `ka-GE` for Georgian.
+ *
+ * The order matches the C# source byte-for-byte — do not re-sort. Downstream tests
+ * (`fly-locale-catalog.spec.ts`) pin the count, the unique-key constraints, and the
+ * RTL set; if you reorder or add an entry, those tests will guide the fix.
+ *
+ * The strings carry Cyrillic, Hebrew, Vietnamese, Thai, Indonesian, Bengali, Devanagari,
+ * Urdu, Catalan, Polish, Korean, Russian, Japanese, Han, Turkish, Romanian, Norwegian,
+ * Hungarian, Greek, Finnish, Danish, Dutch, Swedish, Portuguese, Italian, German,
+ * Spanish, French, English, Arabic, and Georgian. The file is saved as UTF-8 without
+ * BOM (matches every other locale file in the repo). The `…` (U+2026) ellipsis is
+ * preserved verbatim.
+ */
+const FLY_LOCALE_CATALOG = Object.freeze([
+    {
+        prefix: 'UK',
+        dialect: 'uk-UA',
+        englishName: 'Ukrainian',
+        arabicName: 'الأوكرانية',
+        nativeName: 'Українська',
+        detected: 'Виявлена мова',
+        searching: 'Шукаючи',
+        elevating: 'Підняття до',
+        translating: 'Переклад на',
+        generatingAnswersForYou: 'Створення відповідей для вас...',
+        learnMore: 'Дізнайтеся більше',
+        waitingForResponseMsg: 'Будь ласка, наберіться терпіння, ми ще думаємо',
+        isRtl: false,
+    },
+    {
+        prefix: 'HE',
+        dialect: 'he-IL',
+        englishName: 'Hebrew',
+        arabicName: 'العبرية',
+        nativeName: 'עברית',
+        detected: 'שפה מזוהה',
+        searching: 'מחפש אחר',
+        elevating: 'מרומם ל',
+        translating: 'תרגום ל',
+        generatingAnswersForYou: 'מייצר עבורך תשובות...',
+        learnMore: 'למידע נוסף',
+        waitingForResponseMsg: 'אנא התאזרו בסבלנות, אנחנו עדיין חושבים',
+        isRtl: true,
+    },
+    {
+        prefix: 'VI',
+        dialect: 'vi-VN',
+        englishName: 'Vietnamese',
+        arabicName: 'الفيتنامية',
+        nativeName: 'Tiếng Việt',
+        detected: 'Ngôn ngữ được phát hiện',
+        searching: 'Tìm kiếm',
+        elevating: 'Nâng lên',
+        translating: 'Dịch sang',
+        generatingAnswersForYou: 'Đang tạo câu trả lời cho bạn...',
+        learnMore: 'Tìm hiểu thêm',
+        waitingForResponseMsg: 'Vui lòng kiên nhẫn, chúng tôi vẫn đang suy nghĩ',
+        isRtl: false,
+    },
+    {
+        prefix: 'TH',
+        dialect: 'th-TH',
+        englishName: 'Thai',
+        arabicName: 'التايلاندية',
+        nativeName: 'ไทย',
+        detected: 'ภาษาที่ตรวจพบ',
+        searching: 'ค้นหา',
+        elevating: 'ยกระดับเป็น',
+        translating: 'การแปล',
+        generatingAnswersForYou: 'กำลังสร้างคำตอบให้กับคุณ...',
+        learnMore: 'เรียนรู้เพิ่มเติม',
+        waitingForResponseMsg: 'โปรดอดใจรอ, พวกเรายังคงกำลังคิดอยู่',
+        isRtl: false,
+    },
+    {
+        prefix: 'ID',
+        dialect: 'id-ID',
+        englishName: 'Indonesian',
+        arabicName: 'الإندونيسية',
+        nativeName: 'Bahasa Indonesia',
+        detected: 'Bahasa yang terdeteksi',
+        searching: 'Mencari',
+        elevating: 'Meninggalkan ke',
+        translating: 'Menerjemahkan ke',
+        generatingAnswersForYou: 'Menghasilkan jawaban untuk Anda...',
+        learnMore: 'Cari tahu lebih lanjut',
+        waitingForResponseMsg: 'Harap bersabar, kami masih sedang berpikir',
+        isRtl: false,
+    },
+    {
+        prefix: 'BN',
+        dialect: 'bn-BD',
+        englishName: 'Bengali',
+        arabicName: 'البنغالية',
+        nativeName: 'বাংলা',
+        detected: 'সনাক্ত করা ভাষা',
+        searching: 'খুঁজছি',
+        elevating: 'উন্নত',
+        translating: 'অনুবাদ',
+        generatingAnswersForYou: 'আপনার জন্য উত্তর তৈরি করা হচ্ছে...',
+        learnMore: 'আরো জানুন',
+        waitingForResponseMsg: 'অনুগ্রহ করে ধৈর্য ধরুন, আমরা এখনও চিন্তা করছি',
+        isRtl: false,
+    },
+    {
+        prefix: 'HI',
+        dialect: 'hi-IN',
+        englishName: 'Hindi',
+        arabicName: 'الهندية',
+        nativeName: 'हिन्दी',
+        detected: 'पता चला भाषा',
+        searching: 'के लिए खोज रहे हैं',
+        elevating: 'के लिए ऊंचा',
+        translating: 'अनुवाद करना',
+        generatingAnswersForYou: 'आपके लिए उत्तर तैयार किया जा रहा है...',
+        learnMore: 'और जानें',
+        waitingForResponseMsg: 'कृपया धैर्य रखें, हम अभी सोच रहे हैं',
+        isRtl: false,
+    },
+    {
+        prefix: 'UR',
+        dialect: 'ur-IN',
+        englishName: 'Urdu',
+        arabicName: 'الأردية',
+        nativeName: 'اردو',
+        detected: 'پتہ چلا زبان',
+        searching: 'کے لیے تلاش',
+        elevating: 'بلند کرنا',
+        translating: 'ترجمہ کرنا',
+        generatingAnswersForYou: 'آپ کے لیے جوابات تیار کیے جا رہے ہیں...',
+        learnMore: 'مزید جانیں',
+        waitingForResponseMsg: 'براہ کرم صبر کریں، ہم ابھی سوچ رہے ہیں۔',
+        isRtl: true,
+    },
+    {
+        prefix: 'CA',
+        dialect: 'ca-ES',
+        englishName: 'Catalan',
+        arabicName: 'الكتالانية',
+        nativeName: 'Català',
+        detected: 'Idioma detectat',
+        searching: 'Buscant',
+        elevating: 'Elevant a',
+        translating: 'Traduir a',
+        generatingAnswersForYou: 'Generant respostes per a tu...',
+        learnMore: 'Aprèn més',
+        waitingForResponseMsg: 'Si us plau, tingueu paciència, encara estem pensant',
+        isRtl: false,
+    },
+    {
+        prefix: 'PL',
+        dialect: 'pl-PL',
+        englishName: 'Polish',
+        arabicName: 'البولندية',
+        nativeName: 'Polski',
+        detected: 'Wykryty język',
+        searching: 'Szukać',
+        elevating: 'Podniesienie do',
+        translating: 'Tłumaczenie na',
+        generatingAnswersForYou: 'Generowanie odpowiedzi dla Ciebie...',
+        learnMore: 'Dowiedz się więcej',
+        waitingForResponseMsg: 'Proszę o cierpliwość, nadal myślimy',
+        isRtl: false,
+    },
+    {
+        prefix: 'KO',
+        dialect: 'ko-KR',
+        englishName: 'Korean',
+        arabicName: 'الكورية',
+        nativeName: '한국어',
+        detected: '탐지 언어',
+        searching: '검색',
+        elevating: '상승',
+        translating: '번역',
+        generatingAnswersForYou: '답변을 생성하는 중...',
+        learnMore: '더 알아보기',
+        waitingForResponseMsg: '잠시만 기다려 주세요, 저희는 아직 생각 중입니다',
+        isRtl: false,
+    },
+    {
+        prefix: 'RU',
+        dialect: 'ru-RU',
+        englishName: 'Russian',
+        arabicName: 'الروسية',
+        nativeName: 'Русский',
+        detected: 'Обнаруженный язык',
+        searching: 'В поисках',
+        elevating: 'Поднимаясь до',
+        translating: 'Перевод',
+        generatingAnswersForYou: 'Генерация ответов для вас...',
+        learnMore: 'Узнать больше',
+        waitingForResponseMsg: 'Пожалуйста, подождите, мы всё ещё думаем',
+        isRtl: false,
+    },
+    {
+        prefix: 'JA',
+        dialect: 'ja-JP',
+        englishName: 'Japanese',
+        arabicName: 'اليابانية',
+        nativeName: '日本語',
+        detected: '検出言語',
+        searching: '探している',
+        elevating: '昇格',
+        translating: '翻訳',
+        generatingAnswersForYou: 'あなたのための答えを生成中...',
+        learnMore: 'もっと詳しく',
+        waitingForResponseMsg: '少々お待ちください、ただいま考え中です',
+        isRtl: false,
+    },
+    {
+        prefix: 'ZH',
+        dialect: 'cmn-Hant-TW',
+        englishName: 'Chinese',
+        arabicName: 'الصينية',
+        nativeName: '中文',
+        detected: '检测语言',
+        searching: '搜索',
+        elevating: '提升到',
+        translating: '翻译成',
+        generatingAnswersForYou: '为您生成答案...',
+        learnMore: '了解更多',
+        waitingForResponseMsg: '请耐心等待，我们还在思考',
+        isRtl: false,
+    },
+    {
+        prefix: 'TR',
+        dialect: 'tr-TR',
+        englishName: 'Turkish',
+        arabicName: 'التركية',
+        nativeName: 'Türkçe',
+        detected: 'Tespit edilen dil',
+        searching: 'Arama',
+        elevating: 'Yükseltme',
+        translating: 'Çevirme',
+        generatingAnswersForYou: 'Sizin için yanıtlar üretiliyor...',
+        learnMore: 'Daha fazla bilgi edin',
+        waitingForResponseMsg: 'Lütfen sabırlı olun, hâlâ düşünüyoruz',
+        isRtl: false,
+    },
+    {
+        prefix: 'RO',
+        dialect: 'ro-RO',
+        englishName: 'Romanian',
+        arabicName: 'الرومانية',
+        nativeName: 'Română',
+        detected: 'Limba detectată',
+        searching: 'Căutare de',
+        elevating: 'Elevator la',
+        translating: 'Traducerea în',
+        generatingAnswersForYou: 'Generarea de răspunsuri pentru tine...',
+        learnMore: 'Află mai multe',
+        waitingForResponseMsg: 'Vă rugăm să aveți răbdare, încă ne gândim',
+        isRtl: false,
+    },
+    {
+        prefix: 'NO',
+        dialect: 'nb-NO',
+        englishName: 'Norwegian',
+        arabicName: 'النرويجية',
+        nativeName: 'Norsk',
+        detected: 'Oppdaget språk',
+        searching: 'Leter etter',
+        elevating: 'Løfter til',
+        translating: 'Oversette til',
+        generatingAnswersForYou: 'Genererer svar for deg...',
+        learnMore: 'Lær mer',
+        waitingForResponseMsg: 'Vennligst vær tålmodig, vi tenker fortsatt',
+        isRtl: false,
+    },
+    {
+        prefix: 'HU',
+        dialect: 'hu-HU',
+        englishName: 'Hungarian',
+        arabicName: 'الهنغارية',
+        nativeName: 'Magyar',
+        detected: 'Detektált nyelv',
+        searching: 'Keresés-ra,-re',
+        elevating: 'Felemelve',
+        translating: 'Fordítás',
+        generatingAnswersForYou: 'Válaszok generálása az Ön számára...',
+        learnMore: 'Tudj meg többet',
+        waitingForResponseMsg: 'Kérjük, legyen türelemmel, még gondolkodunk',
+        isRtl: false,
+    },
+    {
+        prefix: 'EL',
+        dialect: 'el-GR',
+        englishName: 'Greek',
+        arabicName: 'اليونانية',
+        nativeName: 'Ελληνικά',
+        detected: 'Εντοπισμένη γλώσσα',
+        searching: 'Ψάχνοντας για',
+        elevating: 'Ανυψώ',
+        translating: 'Μεταφράζοντας σε',
+        generatingAnswersForYou: 'Δημιουργία απαντήσεων για εσάς...',
+        learnMore: 'Μάθε περισσότερα',
+        waitingForResponseMsg: 'Παρακαλώ περιμένετε με υπομονή, σκεφτόμαστε ακόμα',
+        isRtl: false,
+    },
+    {
+        prefix: 'FI',
+        dialect: 'fi-FI',
+        englishName: 'Finnish',
+        arabicName: 'الفنلندية',
+        nativeName: 'Suomi',
+        detected: 'Havaittu kieli',
+        searching: 'Etsimässä',
+        elevating: 'Nousee jhk',
+        translating: 'Kääntäen',
+        generatingAnswersForYou: 'Luodaan vastauksia sinulle...',
+        learnMore: 'Lue lisää',
+        waitingForResponseMsg: 'Ole hyvä ja ole kärsivällinen, ajattelemme yhä',
+        isRtl: false,
+    },
+    {
+        prefix: 'DA',
+        dialect: 'da-DK',
+        englishName: 'Danish',
+        arabicName: 'الدانماركية',
+        nativeName: 'Dansk',
+        detected: 'Opdaget sprog',
+        searching: 'Leder efter',
+        elevating: 'Hæve til',
+        translating: 'Oversættelse til',
+        generatingAnswersForYou: 'Generer svar til dig...',
+        learnMore: 'Lær mere',
+        waitingForResponseMsg: 'Vent venligst tålmodigt, vi tænker stadig',
+        isRtl: false,
+    },
+    {
+        prefix: 'NL',
+        dialect: 'nl-NL',
+        englishName: 'Dutch',
+        arabicName: 'الهولندية',
+        nativeName: 'Nederlands',
+        detected: 'Gedetecteerde taal',
+        searching: 'Op zoek naar',
+        elevating: 'Verheffen tot',
+        translating: 'Vertalen naar',
+        generatingAnswersForYou: 'Antwoorden voor u genereren...',
+        learnMore: 'Lees meer',
+        waitingForResponseMsg: 'Gelieve geduld te hebben, we zijn nog aan het nadenken',
+        isRtl: false,
+    },
+    {
+        prefix: 'SV',
+        dialect: 'sv-SE',
+        englishName: 'Swedish',
+        arabicName: 'السويدية',
+        nativeName: 'Svenska',
+        detected: 'Upptäckt språk',
+        searching: 'Söker efter',
+        elevating: 'Upphöjande till',
+        translating: 'Översätta till',
+        generatingAnswersForYou: 'Genererar svar åt dig...',
+        learnMore: 'Läs mer',
+        waitingForResponseMsg: 'Vänligen ha tålamod, vi tänker fortfarande',
+        isRtl: false,
+    },
+    {
+        prefix: 'PT',
+        dialect: 'pt-PT',
+        englishName: 'Portuguese',
+        arabicName: 'البرتغالية',
+        nativeName: 'Português',
+        detected: 'Idioma detectado',
+        searching: 'Procurando por',
+        elevating: 'Elevando para',
+        translating: 'Traduzindo para',
+        generatingAnswersForYou: 'Gerando respostas para você...',
+        learnMore: 'Saiba mais',
+        waitingForResponseMsg: 'Por favor, tenha paciência, ainda estamos a pensar',
+        isRtl: false,
+    },
+    {
+        prefix: 'IT',
+        dialect: 'it-IT',
+        englishName: 'Italian',
+        arabicName: 'الإيطالية',
+        nativeName: 'Italiano',
+        detected: 'Lingua rilevata',
+        searching: 'Alla ricerca di',
+        elevating: 'Elevare a',
+        translating: 'Tradurre in',
+        generatingAnswersForYou: 'Generazione di risposte per te...',
+        learnMore: 'Scopri di più',
+        waitingForResponseMsg: 'Per favore, abbi pazienza, stiamo ancora pensando',
+        isRtl: false,
+    },
+    {
+        prefix: 'DE',
+        dialect: 'de-DE',
+        englishName: 'German',
+        arabicName: 'الألمانية',
+        nativeName: 'Deutsch',
+        detected: 'Erkannte Sprache',
+        searching: 'Auf der Suche nach',
+        elevating: 'Erhöhung zu',
+        translating: 'Übersetzung auf',
+        generatingAnswersForYou: 'Wir generieren Antworten für Sie...',
+        learnMore: 'Erfahre mehr',
+        waitingForResponseMsg: 'Bitte haben Sie Geduld, wir denken noch nach',
+        isRtl: false,
+    },
+    {
+        prefix: 'ES',
+        dialect: 'es-AR',
+        englishName: 'Spanish',
+        arabicName: 'الأسبانية',
+        nativeName: 'Español',
+        detected: 'Idioma detectado',
+        searching: 'Buscando',
+        elevating: 'Elevando a',
+        translating: 'Traduciendo a',
+        generatingAnswersForYou: 'Generando respuestas para ti...',
+        learnMore: 'Aprende más',
+        waitingForResponseMsg: 'Por favor, ten paciencia, todavía estamos pensando',
+        isRtl: false,
+    },
+    {
+        prefix: 'FR',
+        dialect: 'fr-FR',
+        englishName: 'French',
+        arabicName: 'الفرنسية',
+        nativeName: 'Français',
+        detected: 'Langue détectée',
+        searching: 'À la recherche de',
+        elevating: 'Élever à',
+        translating: 'Traduire par',
+        generatingAnswersForYou: 'Générer des réponses pour vous...',
+        learnMore: 'En savoir plus',
+        waitingForResponseMsg: 'Veuillez patienter, nous réfléchissons encore',
+        isRtl: false,
+    },
+    {
+        prefix: 'EN',
+        dialect: 'en-US',
+        englishName: 'English',
+        arabicName: 'الإنجليزية',
+        nativeName: 'English',
+        detected: 'Detected language',
+        searching: 'Searching for',
+        elevating: 'Elevating to',
+        translating: 'Translating to',
+        generatingAnswersForYou: 'Generating answers for you...',
+        learnMore: 'Learn more',
+        waitingForResponseMsg: 'Please bear with us, we are still thinking',
+        isRtl: false,
+    },
+    {
+        prefix: 'AR',
+        dialect: 'ar-AE',
+        englishName: 'Arabic',
+        arabicName: 'العربية',
+        nativeName: 'العربية',
+        detected: 'اللغة المكتشفة',
+        searching: 'البحث عن',
+        elevating: 'رفع إلى',
+        translating: 'ترجمة إلى',
+        generatingAnswersForYou: 'جارٍ إنشاء إجابات لك...',
+        learnMore: 'تعرف على المزيد',
+        waitingForResponseMsg: 'نرجو منك التحلّي بالصبر، نحن ما زلنا نفكر',
+        isRtl: true,
+    },
+    {
+        prefix: 'KA',
+        dialect: 'ka-GE',
+        englishName: 'Georgian',
+        arabicName: 'الجورجية',
+        nativeName: 'ქართული',
+        detected: 'გამოვლენილი ენა',
+        searching: 'ძიება',
+        elevating: 'ამაღლება',
+        translating: 'თარგმნა',
+        generatingAnswersForYou: 'პასუხების გენერირება თქვენთვის...',
+        learnMore: 'გაიგე მეტი',
+        waitingForResponseMsg: 'გთხოვთ მოითმინოთ, ჯერ კიდევ ვფიქრობთ',
+        isRtl: false,
+    },
+]);
+/**
+ * Lookup by BCP-47 dialect (e.g. `'ar-AE'`). Case-insensitive per BCP-47 §2.1.1
+ * (subtags are case-insensitive on the wire) — accepts `'en-US'`, `'en-us'`,
+ * `'EN-US'`, etc. all as the canonical EN entry. The catalog itself keeps its
+ * canonical casing for display.
+ *
+ * Returns `undefined` when not found; callers decide whether to fall back to `'en-US'`.
+ */
+function findLocaleByDialect(dialect) {
+    if (typeof dialect !== 'string' || dialect.length === 0)
+        return undefined;
+    const lower = dialect.toLowerCase();
+    return FLY_LOCALE_CATALOG.find((e) => e.dialect.toLowerCase() === lower);
+}
+/**
+ * Lookup by short prefix (e.g. `'AR'`). Prefixes are unique in the catalog (asserted by tests).
+ * Case-insensitive — accepts `'AR'`, `'ar'`, `'Ar'`. Catalog stores prefixes uppercase
+ * for display.
+ */
+function findLocaleByPrefix(prefix) {
+    if (typeof prefix !== 'string' || prefix.length === 0)
+        return undefined;
+    const lower = prefix.toLowerCase();
+    return FLY_LOCALE_CATALOG.find((e) => e.prefix.toLowerCase() === lower);
+}
+/**
+ * Type-narrowing helper for entries flagged RTL.
+ *
+ * Named with the `Entry` suffix to avoid colliding with the existing
+ * `isRtlLocale(lang: string)` from `i18n.service.ts`, which answers a different
+ * question (is the *UI* locale code RTL?). Both helpers coexist in `public-api`.
+ */
+function isRtlLocaleEntry(entry) {
+    return entry.isRtl === true;
+}
+
 /*
  * @mohamedatia/fly-design-system — Public API
  * https://www.npmjs.com/package/@mohamedatia/fly-design-system
@@ -2526,6 +3832,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  *         `systemKey` field so platform-managed charts (`'apps'`, `'default-company'`) are
  *         identifiable across tenants. New `SHARE_ORG_CHART_SYSTEM_KEY_APPS` /
  *         `SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT` constants exported.
+ * v2.5.0: Agent input contracts (Phase 1 of the `<fly-agent-input>` plan) — additive only.
+ *         `AgentCommandRegistry` + `AgentDropRegistry` (singletons via `providedIn: 'root'`,
+ *         shared across federation), `flyAgentDraggable` directive, payload-guard helpers
+ *         (`validateAgentPayload`, `trimAgentPayload`, `trimAgentString`, `utf8ByteLength`),
+ *         and the cross-cutting `FLY_LOCALE_CATALOG` (31 entries, frozen — verbatim port of
+ *         `Fly.Shared.Core.LanguageDTO[]`). Three RTL flagged: `he-IL`, `ur-IN`, `ar-AE`.
+ *         The catalog's RTL helper is exported as `isRtlLocaleEntry` to avoid colliding with
+ *         the existing `isRtlLocale(lang: string)` from `i18n.service.ts`.
+ *         No UI consumers yet — Phase 2 wires the registries into the shell input component.
+ * v2.5.1: New `MessageBoxService.showAcknowledged()` entry point returning
+ *         `DialogResultWithAcknowledgement` for "Don't ask again"-style flows.
+ *         The `dontAskAgain` config (`MessageBoxDontAskAgainConfig`) lives ONLY on
+ *         `MessageBoxOptionsWithAcknowledgement` — the base `MessageBoxOptions`
+ *         no longer carries it, so the type system enforces "checkbox ⇒ caller
+ *         MUST use `showAcknowledged()`" and eliminates the silent-discard path
+ *         on `show()`. Existing `show()` callers are unaffected. Case-insensitive
+ *         `findLocaleByDialect` / `findLocaleByPrefix` (BCP-47 §2.1.1). See
+ *         `.workflow/plans/agent-input-component.md` Phase 2b-1.
  * See docs/ExternalAppsGuide/03-frontend-app.md.
  */
 /**
@@ -2544,5 +3868,5 @@ const AUDIENCE_ERROR_CODES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AudienceBuilderComponent, AuthService, ContextMenuComponent, DEFAULT_FLY_THEME_MODE, DialogResult, FLY_THEME_MODE_IDS, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyThemeService, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, SharePanelComponent, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WindowManagerService, isRtlLocale, normalizeFlyTheme };
+export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentCommandRegistry, AgentDropRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DialogResult, FLY_LOCALE_CATALOG, FLY_THEME_MODE_IDS, FlyAgentDraggableDirective, FlyBlockUiComponent, FlyFileUploadComponent, FlyImageUploadComponent, FlyRemoteRouter, FlyThemeService, I18nService, LAUNCH_CONTEXT, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, SharePanelComponent, StandaloneWindowManagerService, TranslatePipe, WINDOW_DATA, WindowManagerService, findLocaleByDialect, findLocaleByPrefix, isRtlLocale, isRtlLocaleEntry, normalizeFlyTheme, trimAgentPayload, trimAgentString, utf8ByteLength, validateAgentPayload };
 //# sourceMappingURL=mohamedatia-fly-design-system.mjs.map