@flyos/design-system 2.6.0 → 3.0.0

package/fesm2022/flyos-design-system.mjs

@@ -47,7 +47,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 // tools/publish-library.ps1 at bump time, and asserted by the spec beside this file.
 // Used only for the diagnostic message; the duplicate-instance detection itself is
 // version-agnostic, so a stale literal misnames a fork rather than hiding one.
-const FLY_DS_VERSION = '2.6.0';
+const FLY_DS_VERSION = '3.0.0';
 const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
 /**
  * Records this design-system instance on the shared `scope` and returns the
@@ -1313,6 +1313,15 @@ function flyStandaloneAuthInterceptor(req, next) {
  */
 const DS_BASELINE_LOCALES = {
     en: {
+        'app_unavailable.fallback_app': 'This app',
+        'app_unavailable.not_licensed.title': 'App not licensed',
+        'app_unavailable.not_licensed.message': "{{app}} isn't part of your organization's plan, so this action can't run. An administrator can add it.",
+        'app_unavailable.not_installed.title': 'App not installed',
+        'app_unavailable.not_installed.message': "{{app}} isn't installed for your organization yet. An administrator can install it.",
+        'app_unavailable.no_permission.title': 'No access to this app',
+        'app_unavailable.no_permission.message': "You don't have permission to use {{app}}. Ask an administrator for access.",
+        'app_unavailable.unreachable.title': 'App unavailable',
+        'app_unavailable.unreachable.message': "{{app}} can't be reached right now. Nothing was changed — please try again in a moment.",
         'common.action.cancel': 'Cancel',
         'common.label.apply': 'Apply',
         'common.label.formatting_toolbar': 'Formatting toolbar',
@@ -1678,6 +1687,15 @@ const DS_BASELINE_LOCALES = {
         'magic_actions.radio_menu.trigger_label': '{{label}}: {{value}}',
     },
     ar: {
+        'app_unavailable.fallback_app': 'هذا التطبيق',
+        'app_unavailable.not_licensed.title': 'التطبيق غير مُرخّص',
+        'app_unavailable.not_licensed.message': '{{app}} ليس ضمن خطة مؤسستك، لذا تعذّر تنفيذ هذا الإجراء. يمكن للمسؤول إضافته.',
+        'app_unavailable.not_installed.title': 'التطبيق غير مُثبّت',
+        'app_unavailable.not_installed.message': 'لم يتم تثبيت {{app}} لمؤسستك بعد. يمكن للمسؤول تثبيته.',
+        'app_unavailable.no_permission.title': 'لا تملك صلاحية الوصول',
+        'app_unavailable.no_permission.message': 'ليست لديك صلاحية لاستخدام {{app}}. اطلب الوصول من المسؤول.',
+        'app_unavailable.unreachable.title': 'التطبيق غير متاح',
+        'app_unavailable.unreachable.message': 'تعذّر الوصول إلى {{app}} حاليًا. لم يتم تغيير أي شيء — يرجى المحاولة بعد قليل.',
         'common.action.cancel': 'إلغاء',
         'common.label.apply': 'تطبيق',
         'common.label.formatting_toolbar': 'شريط أدوات التنسيق',
@@ -2042,6 +2060,15 @@ const DS_BASELINE_LOCALES = {
         'magic_actions.radio_menu.trigger_label': '{{label}}: {{value}}',
     },
     fr: {
+        'app_unavailable.fallback_app': 'Cette application',
+        'app_unavailable.not_licensed.title': 'Application sans licence',
+        'app_unavailable.not_licensed.message': "{{app}} ne fait pas partie du forfait de votre organisation, cette action ne peut donc pas s'exécuter. Un administrateur peut l'ajouter.",
+        'app_unavailable.not_installed.title': 'Application non installée',
+        'app_unavailable.not_installed.message': "{{app}} n'est pas encore installée pour votre organisation. Un administrateur peut l'installer.",
+        'app_unavailable.no_permission.title': 'Accès non autorisé',
+        'app_unavailable.no_permission.message': "Vous n'avez pas l'autorisation d'utiliser {{app}}. Demandez l'accès à un administrateur.",
+        'app_unavailable.unreachable.title': 'Application indisponible',
+        'app_unavailable.unreachable.message': '{{app}} est injoignable pour le moment. Rien n’a été modifié — veuillez réessayer dans un instant.',
         'common.action.cancel': 'Annuler',
         'common.label.apply': 'Appliquer',
         'common.label.formatting_toolbar': "Barre d'outils de mise en forme",
@@ -2406,6 +2433,15 @@ const DS_BASELINE_LOCALES = {
         'magic_actions.radio_menu.trigger_label': '{{label}} : {{value}}',
     },
     ur: {
+        'app_unavailable.fallback_app': 'یہ ایپ',
+        'app_unavailable.not_licensed.title': 'ایپ لائسنس یافتہ نہیں',
+        'app_unavailable.not_licensed.message': '{{app}} آپ کے ادارے کے پلان میں شامل نہیں، اس لیے یہ عمل مکمل نہیں ہو سکا۔ منتظم اسے شامل کر سکتا ہے۔',
+        'app_unavailable.not_installed.title': 'ایپ انسٹال نہیں ہے',
+        'app_unavailable.not_installed.message': '{{app}} ابھی آپ کے ادارے کے لیے انسٹال نہیں ہوئی۔ منتظم اسے انسٹال کر سکتا ہے۔',
+        'app_unavailable.no_permission.title': 'اس ایپ تک رسائی نہیں',
+        'app_unavailable.no_permission.message': 'آپ کو {{app}} استعمال کرنے کی اجازت نہیں ہے۔ منتظم سے رسائی طلب کریں۔',
+        'app_unavailable.unreachable.title': 'ایپ دستیاب نہیں',
+        'app_unavailable.unreachable.message': '{{app}} تک ابھی رسائی ممکن نہیں۔ کچھ تبدیل نہیں ہوا — براہِ کرم تھوڑی دیر بعد کوشش کریں۔',
         'common.action.cancel': 'منسوخ کریں',
         'common.label.apply': 'لاگو کریں',
         'common.label.formatting_toolbar': 'فارمیٹنگ ٹول بار',
@@ -9643,6 +9679,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: 'fly-block-ui', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (active()) {\r\n  <div\r\n    class=\"fly-block-ui\"\r\n    role=\"status\"\r\n    aria-live=\"polite\"\r\n    aria-busy=\"true\"\r\n    [attr.aria-label]=\"resolvedMessageKey() | translate\">\r\n    <div class=\"fly-block-ui__card\">\r\n      <i class=\"pi pi-spin pi-spinner fly-block-ui__spinner\" aria-hidden=\"true\"></i>\r\n      <span class=\"fly-block-ui__text\">{{ resolvedMessageKey() | translate }}</span>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}.fly-block-ui{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--surface-ground, #0c0c12) 58%,transparent);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}.fly-block-ui__card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 36px;border-radius:12px;background:var(--glass-bg, rgba(255, 255, 255, .14));border:1px solid var(--glass-border, rgba(255, 255, 255, .22));box-shadow:0 8px 32px #0000002e}.fly-block-ui__spinner{font-size:2rem;color:var(--primary-color)}.fly-block-ui__text{font-size:.875rem;color:var(--text-color-secondary)}\n"] }]
         }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], messageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKey", required: false }] }] } });
 
+const STATE_KEY = {
+    'not-licensed': 'not_licensed',
+    'not-installed': 'not_installed',
+    'no-permission': 'no_permission',
+    unreachable: 'unreachable',
+};
+const STATE_ICON = {
+    'not-licensed': 'pi-lock',
+    'not-installed': 'pi-download',
+    'no-permission': 'pi-ban',
+    unreachable: 'pi-exclamation-triangle',
+};
+/**
+ * Explains that another app is not available, instead of failing at the user in the vocabulary of
+ * whatever call happened to break.
+ *
+ * Cross-app integrations (a "convert this into a project" action, a deep link into another app)
+ * have no way to say *why* nothing happened. Left alone they surface the underlying transport
+ * error, which is usually both alarming and wrong — a decommissioned or unlicensed target reads to
+ * the user as "your data is in the wrong state".
+ *
+ * Project the reason, not the exception:
+ * ```html
+ * <fly-app-unavailable state="not-licensed" appName="PPM">
+ *   <button fly-button (click)="requestAccess()">Request access</button>
+ * </fly-app-unavailable>
+ * ```
+ *
+ * Projected content renders as the action row and is optional — omit it when there is nothing the
+ * user can usefully do.
+ */
+class FlyAppUnavailableComponent {
+    /** Which situation this is. Drives the default icon, title and message. */
+    state = input('not-licensed', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /**
+     * Display name of the unavailable app, interpolated into the message as `{{app}}`.
+     * Left empty, the message falls back to a generic "this app" phrasing that still reads correctly
+     * in all four locales.
+     */
+    appName = input('', ...(ngDevMode ? [{ debugName: "appName" }] : /* istanbul ignore next */ []));
+    /** Overrides the state's default title key. */
+    titleKey = input('', ...(ngDevMode ? [{ debugName: "titleKey" }] : /* istanbul ignore next */ []));
+    /** Overrides the state's default message key. */
+    messageKey = input('', ...(ngDevMode ? [{ debugName: "messageKey" }] : /* istanbul ignore next */ []));
+    /** Overrides the state's default PrimeIcons class (e.g. `pi-lock`). */
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Inline density, for showing this inside an existing panel rather than as a full empty state. */
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    stateSlug = computed(() => STATE_KEY[this.state()] ?? STATE_KEY['not-licensed'], ...(ngDevMode ? [{ debugName: "stateSlug" }] : /* istanbul ignore next */ []));
+    resolvedIcon = computed(() => {
+        const override = this.icon()?.trim();
+        return override && override.length > 0 ? override : (STATE_ICON[this.state()] ?? STATE_ICON['not-licensed']);
+    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
+    resolvedTitleKey = computed(() => {
+        const override = this.titleKey()?.trim();
+        return override && override.length > 0 ? override : `app_unavailable.${this.stateSlug()}.title`;
+    }, ...(ngDevMode ? [{ debugName: "resolvedTitleKey" }] : /* istanbul ignore next */ []));
+    resolvedMessageKey = computed(() => {
+        const override = this.messageKey()?.trim();
+        return override && override.length > 0 ? override : `app_unavailable.${this.stateSlug()}.message`;
+    }, ...(ngDevMode ? [{ debugName: "resolvedMessageKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Trimmed app name, or empty when none was given. The template substitutes the localized
+     * `app_unavailable.fallback_app` noun phrase in that case, so the sentence never opens with a
+     * blank — and it does so through the pipe, so it re-resolves on a locale switch.
+     */
+    trimmedAppName = computed(() => this.appName()?.trim() ?? '', ...(ngDevMode ? [{ debugName: "trimmedAppName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppUnavailableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.19", type: FlyAppUnavailableComponent, isStandalone: true, selector: "fly-app-unavailable", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, appName: { classPropertyName: "appName", publicName: "appName", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, messageKey: { classPropertyName: "messageKey", publicName: "messageKey", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"fly-app-unavailable\"\r\n  [class.fly-app-unavailable--compact]=\"compact()\"\r\n  [attr.data-state]=\"state()\"\r\n  role=\"status\"\r\n  aria-live=\"polite\">\r\n  <i class=\"pi {{ resolvedIcon() }} fly-app-unavailable__icon\" aria-hidden=\"true\"></i>\r\n\r\n  <div class=\"fly-app-unavailable__body\">\r\n    <p class=\"fly-app-unavailable__title\">{{ resolvedTitleKey() | translate }}</p>\r\n    <p class=\"fly-app-unavailable__message\">\r\n      {{\r\n        resolvedMessageKey()\r\n          | translate: { app: trimmedAppName() || ('app_unavailable.fallback_app' | translate) }\r\n      }}\r\n    </p>\r\n  </div>\r\n\r\n  <div class=\"fly-app-unavailable__actions\">\r\n    <ng-content />\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.fly-app-unavailable{display:flex;align-items:flex-start;gap:12px;padding:20px;text-align:start;border:1px solid var(--surface-border);border-radius:10px;background:var(--surface-card);color:var(--text-color)}.fly-app-unavailable__icon{flex:0 0 auto;margin-block-start:2px;font-size:1.25rem;line-height:1;color:var(--text-color-secondary)}.fly-app-unavailable[data-state=unreachable] .fly-app-unavailable__icon{color:var(--system-red, var(--text-color-secondary))}.fly-app-unavailable__body{flex:1 1 auto;min-width:0}.fly-app-unavailable__title{margin:0;font-weight:600;font-size:.95rem;color:var(--text-color)}.fly-app-unavailable__message{margin:4px 0 0;font-size:.875rem;line-height:1.5;color:var(--text-color-secondary);overflow-wrap:anywhere}.fly-app-unavailable__actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}.fly-app-unavailable__actions:empty{display:none}.fly-app-unavailable--compact{padding:12px 14px;border-radius:8px;gap:10px}.fly-app-unavailable--compact .fly-app-unavailable__icon{font-size:1rem}.fly-app-unavailable--compact .fly-app-unavailable__title{font-size:.875rem}.fly-app-unavailable--compact .fly-app-unavailable__message{font-size:.8125rem}@container (max-width: 380px){.fly-app-unavailable{flex-wrap:wrap}.fly-app-unavailable__actions{inline-size:100%;padding-inline-start:32px}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppUnavailableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-app-unavailable', standalone: true, imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"fly-app-unavailable\"\r\n  [class.fly-app-unavailable--compact]=\"compact()\"\r\n  [attr.data-state]=\"state()\"\r\n  role=\"status\"\r\n  aria-live=\"polite\">\r\n  <i class=\"pi {{ resolvedIcon() }} fly-app-unavailable__icon\" aria-hidden=\"true\"></i>\r\n\r\n  <div class=\"fly-app-unavailable__body\">\r\n    <p class=\"fly-app-unavailable__title\">{{ resolvedTitleKey() | translate }}</p>\r\n    <p class=\"fly-app-unavailable__message\">\r\n      {{\r\n        resolvedMessageKey()\r\n          | translate: { app: trimmedAppName() || ('app_unavailable.fallback_app' | translate) }\r\n      }}\r\n    </p>\r\n  </div>\r\n\r\n  <div class=\"fly-app-unavailable__actions\">\r\n    <ng-content />\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;container-type:inline-size}.fly-app-unavailable{display:flex;align-items:flex-start;gap:12px;padding:20px;text-align:start;border:1px solid var(--surface-border);border-radius:10px;background:var(--surface-card);color:var(--text-color)}.fly-app-unavailable__icon{flex:0 0 auto;margin-block-start:2px;font-size:1.25rem;line-height:1;color:var(--text-color-secondary)}.fly-app-unavailable[data-state=unreachable] .fly-app-unavailable__icon{color:var(--system-red, var(--text-color-secondary))}.fly-app-unavailable__body{flex:1 1 auto;min-width:0}.fly-app-unavailable__title{margin:0;font-weight:600;font-size:.95rem;color:var(--text-color)}.fly-app-unavailable__message{margin:4px 0 0;font-size:.875rem;line-height:1.5;color:var(--text-color-secondary);overflow-wrap:anywhere}.fly-app-unavailable__actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}.fly-app-unavailable__actions:empty{display:none}.fly-app-unavailable--compact{padding:12px 14px;border-radius:8px;gap:10px}.fly-app-unavailable--compact .fly-app-unavailable__icon{font-size:1rem}.fly-app-unavailable--compact .fly-app-unavailable__title{font-size:.875rem}.fly-app-unavailable--compact .fly-app-unavailable__message{font-size:.8125rem}@container (max-width: 380px){.fly-app-unavailable{flex-wrap:wrap}.fly-app-unavailable__actions{inline-size:100%;padding-inline-start:32px}}\n"] }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], appName: [{ type: i0.Input, args: [{ isSignal: true, alias: "appName", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], messageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageKey", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
+
 /**
  * `<fly-card-grid>` — a responsive grid for {@link FlyCardComponent} (or anything else).
  *
@@ -16007,10 +16118,7 @@ class MagicBarRegistry {
      */
     active = computed(() => {
         const owner = this._activeOwner();
-        if (!owner)
-            return null;
-        const views = this._views();
-        return resolveView((key) => views.get(key), owner);
+        return owner ? this.resolve(owner) : null;
     }, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
     constructor() {
         const g = globalThis;
@@ -16113,6 +16221,20 @@ class MagicBarRegistry {
         this.sync();
         emitSync();
     }
+    /**
+     * Resolve one owner's view from the reactive MIRROR — {@link viewFor}'s
+     * signal-consuming sibling, and the read behind {@link active}. Calling it
+     * inside a `computed()`/`effect()` tracks the mirror, so the caller re-runs
+     * whenever this owner's slot changes — which is what an inline renderer
+     * outside the shell (an External App's standalone chrome, D5 §4 dynamic 6's
+     * mobile bar) needs, since no shell ever nominates an owner there. Applies
+     * the same resolution as {@link active}: exact slot, then the `appId`
+     * fallback, then the ownership assertion.
+     */
+    resolve(owner) {
+        const views = this._views();
+        return resolveView((key) => views.get(key), owner);
+    }
     /**
      * Direct, non-reactive read of one owner's contribution — the split-proof
      * escape hatch for callers outside an injection/reactive context. Applies the
@@ -16955,6 +17077,86 @@ const FLY_MAGIC_BAR_ICONS = {
     ...ORIGINAL_SAME_CONVENTION,
 };
 
+/**
+ * `<fly-standalone-magic-actions>` — renders an app's OWN magic-bar contribution
+ * inline, for the one mode that has no shell chrome to render it: an External
+ * App running standalone.
+ *
+ * ## The gap this closes
+ * A view publishes one `MagicBarContribution` (skill: `magic-bar-actions.md`)
+ * and, embedded in the desktop shell, the top-bar pill renders it. Standalone,
+ * nothing did — so every screen also kept a bespoke header-actions row
+ * (`[page-header-actions]` buttons) that duplicated the published actions in
+ * BOTH modes: two Create buttons inside the shell, and a second diverging
+ * toolbar implementation outside it. With this component the contribution is
+ * authored once and rendered by whichever chrome exists: the shell's pill when
+ * embedded, this inline cluster when standalone.
+ *
+ * ## Usage — the `[page-header-actions]` slot is the intended position
+ * ```html
+ * <fly-page-header variant="listing" titleKey="…">
+ *   <div page-header-actions>
+ *     <fly-standalone-magic-actions appId="ppm" />
+ *   </div>
+ * </fly-page-header>
+ * ```
+ * `appId` is the same id the view passes to `MagicBarRegistry.publisher`.
+ * Nothing else to wire: the screen's existing publish `effect` feeds both
+ * renderers.
+ *
+ * ## Embedded, it renders NOTHING — by its own decision, not the consumer's
+ * `FlyRemoteRouter.isEmbedded` is read here precisely so every consumer does
+ * not re-author the `@if (!isEmbedded)` guard (and so none can forget it: the
+ * shell pill already renders the same contribution, and a second copy in the
+ * page header is exactly the duplication this component exists to delete).
+ *
+ * ## What it resolves, and why not `active()`
+ * `MagicBarRegistry.active` is arbitrated by the SHELL (focused window →
+ * `setActiveOwner`), and standalone no shell exists to nominate anyone — it is
+ * permanently `null` there by design. This component instead resolves the
+ * caller-named owner via {@link MagicBarRegistry.resolve}, the reactive
+ * per-owner read, with the same slot fallback the shell applies. No `windowId`
+ * input: standalone there is no window manager, so the publisher's
+ * `WINDOW_DATA` is null and its contribution lands in the `appId`-keyed
+ * fallback slot — which an `{ appId }` owner resolves exactly.
+ *
+ * ## What it deliberately does NOT render
+ * - **`search`** — standalone screens keep their in-page `fly-search-input`
+ *   (the shell's expanding search field is shell chrome, not part of
+ *   `fly-magic-actions`). A second search box is the exact bug the embedded
+ *   mode's `@if` guards exist to avoid; standalone the in-page field is the
+ *   only one.
+ * - **`overflow` / `quickCommandIds`** — the kebab is a deliberate deferral
+ *   (see `magic-actions.component.ts`), and quick commands resolve against the
+ *   shell's `AgentCommandRegistry` + Ask-AI orb, which do not exist standalone.
+ */
+class FlyStandaloneMagicActionsComponent {
+    registry = inject(MagicBarRegistry);
+    remoteRouter = inject(FlyRemoteRouter);
+    /** The publishing app whose contribution to mirror — the `appId` its view passes to `MagicBarRegistry.publisher`. */
+    appId = input.required(...(ngDevMode ? [{ debugName: "appId" }] : /* istanbul ignore next */ []));
+    /**
+     * The view to paint, or `null` for "render nothing": embedded (the shell's
+     * pill owns the contribution there), unpublished, or published with no
+     * painted actions (a bare `viewKey` is "no toolbar", not "an empty toolbar" —
+     * same rule the shell pill applies).
+     */
+    standaloneView = computed(() => {
+        if (this.remoteRouter.isEmbedded)
+            return null;
+        const view = this.registry.resolve({ appId: this.appId() });
+        if (!view)
+            return null;
+        return view.groups.length > 0 || view.primary ? view : null;
+    }, ...(ngDevMode ? [{ debugName: "standaloneView" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyStandaloneMagicActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyStandaloneMagicActionsComponent, isStandalone: true, selector: "fly-standalone-magic-actions", inputs: { appId: { classPropertyName: "appId", publicName: "appId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<!-- Null when embedded, unpublished, or nothing painted \u2014 see standaloneView. -->\r\n@if (standaloneView(); as view) {\r\n  <fly-magic-actions [groups]=\"view.groups\" [primary]=\"view.primary\" />\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: FlyMagicActionsComponent, selector: "fly-magic-actions", inputs: ["groups", "primary"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyStandaloneMagicActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fly-standalone-magic-actions', standalone: true, imports: [FlyMagicActionsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Null when embedded, unpublished, or nothing painted \u2014 see standaloneView. -->\r\n@if (standaloneView(); as view) {\r\n  <fly-magic-actions [groups]=\"view.groups\" [primary]=\"view.primary\" />\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { appId: [{ type: i0.Input, args: [{ isSignal: true, alias: "appId", required: true }] }] } });
+
 /**
  * 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
@@ -21401,7 +21603,7 @@ class FlyCardComponent {
     <ng-content select="fly-card-status" />
     <ng-content select="fly-card-footer" />
     <ng-content select="fly-card-actions" />
-  `, isInline: true, styles: ["@charset \"UTF-8\";:host{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--sp-4);position:relative;min-width:0}:host(.is-interactive){cursor:pointer;transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}:host(.is-interactive):hover{border-color:var(--line-2);box-shadow:var(--shadow-card)}:host(.is-interactive):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host(.is-interactive.is-lift){transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}:host(.is-interactive.is-lift):hover{transform:translateY(-2px);box-shadow:var(--shadow-filter)}:host([aria-disabled=true]){opacity:.5;cursor:default}:host([data-layout=column]){display:grid;grid-template:\"status actions\" auto \"media  media\" auto \"main   main\" 1fr \"footer footer\" auto/1fr auto;align-items:start;column-gap:var(--sp-2);animation:riseIn .34s var(--nova-ease-micro) both}:host([data-layout=column]):nth-child(1){animation-delay:0ms}:host([data-layout=column]):nth-child(2){animation-delay:55ms}:host([data-layout=column]):nth-child(3){animation-delay:.11s}:host([data-layout=column]):nth-child(4){animation-delay:165ms}:host([data-layout=column]):nth-child(5){animation-delay:.22s}:host([data-layout=column]):nth-child(6){animation-delay:275ms}:host([data-layout=column]):nth-child(7){animation-delay:.33s}:host([data-layout=column]):nth-child(8){animation-delay:385ms}:host([data-layout=column]):nth-child(9){animation-delay:.44s}:host([data-layout=column]):nth-child(10){animation-delay:495ms}:host([data-layout=column]):nth-child(11){animation-delay:.55s}:host([data-layout=column]):nth-child(12){animation-delay:605ms}:host([data-layout=column]):nth-child(n+13){animation-delay:605ms}:host([data-layout=row]){display:flex;align-items:flex-start;gap:12px;padding:14px 12px;border-color:transparent;background:transparent;box-shadow:none;animation:itemIn .4s var(--nova-ease-micro) both}:host([data-layout=row]):nth-child(1){animation-delay:0ms}:host([data-layout=row]):nth-child(2){animation-delay:40ms}:host([data-layout=row]):nth-child(3){animation-delay:80ms}:host([data-layout=row]):nth-child(4){animation-delay:.12s}:host([data-layout=row]):nth-child(5){animation-delay:.16s}:host([data-layout=row]):nth-child(6){animation-delay:.2s}:host([data-layout=row]):nth-child(7){animation-delay:.24s}:host([data-layout=row]):nth-child(8){animation-delay:.28s}:host([data-layout=row]):nth-child(9){animation-delay:.32s}:host([data-layout=row]):nth-child(10){animation-delay:.36s}:host([data-layout=row]):nth-child(11){animation-delay:.4s}:host([data-layout=row]):nth-child(12){animation-delay:.44s}:host([data-layout=row]):nth-child(n+13){animation-delay:.44s}:host([data-layout=row]){transition:padding-inline-start var(--t-overlay),background var(--t-state),border-color var(--t-state),box-shadow var(--t-state)}:host([data-layout=row]):hover{background:var(--w04)}:host([data-layout=row]):not(.is-selectable,:first-child):before{content:\"\";position:absolute;inset-block-start:0;inset-inline:12px;block-size:1px;background:var(--w07)}:host([data-layout=row].is-selectable:hover),:host([data-layout=row].is-selectable.is-selected){padding-inline-start:48px}:host([data-layout=row].is-selectable){padding:13px 14px;border:1px solid var(--w07);background:var(--w04)}:host([data-layout=row].is-selectable):hover{background:var(--w06);border-color:var(--w14)}:host([data-layout=row].is-selected){background:var(--tint-sel);border-color:var(--accent)}:host([data-layout=row].is-selected):hover{background:var(--tint-sel);border-color:var(--accent)}:host([data-layout=column].is-selected){background:color-mix(in srgb,var(--accent-soft) 65%,var(--bg-2));border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.card__check{position:absolute;inset-inline-start:14px;inset-block-start:15px;display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--t-state)}.card__check input{position:absolute;opacity:0;width:14px;height:14px;margin:0;cursor:pointer}:host(:hover) .card__check,:host(:focus-visible) .card__check,:host(:has(:focus-visible)) .card__check,:host(.is-selected) .card__check{opacity:1;pointer-events:auto}.card__check-box{position:relative;display:inline-block;width:14px;height:14px;border:1.5px solid var(--ink-4);border-radius:4px;background:var(--bg-2);transition:background var(--t-state),border-color var(--t-state);flex-shrink:0}.card__check-box:after{content:\"\";position:absolute;inset:0;margin:auto;width:4px;height:7px;border:solid var(--ink-inverse);border-width:0 1.6px 1.6px 0;transform:translateY(-1px) rotate(45deg);opacity:0;transition:opacity var(--t-state)}input:checked+.card__check-box{background:var(--accent);border-color:var(--accent)}input:checked+.card__check-box:after{opacity:1}.card__main{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;flex:1}:host([data-layout=column]) .card__main{grid-area:main;gap:var(--sp-3);height:100%}:host([data-layout=row]) .card__main{font-size:13px;line-height:1.5;color:var(--w55);text-wrap:pretty}:host([data-layout=column]) .card__main ::ng-deep fly-card-body{margin-block-start:auto}:host([data-layout=column]) .card__main ::ng-deep fly-card-meta{margin-block-start:auto}:host([data-layout=column]) .card__main ::ng-deep fly-card-body~fly-card-meta{margin-block-start:0}:host ::ng-deep fly-card-media{display:block;flex-shrink:0}:host([data-layout=column]) ::ng-deep fly-card-media{grid-area:media;margin-block-end:var(--sp-3)}:host ::ng-deep fly-card-title{display:block;font-size:15px;color:var(--ink);letter-spacing:-.01em;overflow:hidden;min-width:0}:host([data-layout=column]) ::ng-deep fly-card-title{font-weight:var(--fw-medium);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host([data-layout=row]) ::ng-deep fly-card-title{font-weight:var(--fw-semibold);font-size:14px;line-height:1.35;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;transition:font-size var(--t-state)}:host([data-density=compact]) ::ng-deep fly-card-title{font-size:12.5px}:host([data-density=compact]) ::ng-deep fly-card-status{display:none}:host ::ng-deep fly-card-meta{display:flex;flex-wrap:wrap;gap:var(--sp-1);min-width:0}:host([data-layout=row]) ::ng-deep fly-card-meta{align-items:center;gap:8px;font-size:11.5px;color:var(--w55)}:host([data-layout=row]) ::ng-deep fly-card-meta>span{display:inline-flex;align-items:center}:host([data-layout=row]) ::ng-deep fly-card-meta>span:not(:first-child){position:relative;padding-inline-start:8px}:host([data-layout=row]) ::ng-deep fly-card-meta>span:not(:first-child):before{content:\"\";position:absolute;inset-inline-start:0;inset-block:2px;inline-size:1px;background:var(--w12)}:host ::ng-deep fly-card-meta dl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--sp-2);width:100%;margin:0}:host ::ng-deep fly-card-meta dl>div{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}:host ::ng-deep fly-card-meta dl dt{margin:0;font-size:10px;font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}:host ::ng-deep fly-card-meta dl dd{margin:0;font-size:var(--text-sm);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep fly-card-status{display:inline-flex;align-items:center;min-width:0}:host([data-layout=column]) ::ng-deep fly-card-status{grid-area:status;place-self:center start;min-height:24px;margin-block-end:var(--sp-3)}:host([data-layout=row]) ::ng-deep fly-card-status{flex-shrink:0;align-self:center}:host ::ng-deep fly-card-body{display:block;min-width:0}:host ::ng-deep fly-card-footer{display:flex;align-items:center;gap:6px}:host([data-layout=column]) ::ng-deep fly-card-footer{grid-area:footer;justify-content:space-between;margin-block-start:var(--sp-3);padding-block-start:10px;border-block-start:1px solid var(--line-3);font-size:10.5px;font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4)}:host([data-layout=row]) ::ng-deep fly-card-footer{flex-shrink:0;align-self:center;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}:host ::ng-deep fly-card-actions{display:inline-flex;align-items:center;gap:2px}:host([data-layout=column]) ::ng-deep fly-card-actions{grid-area:actions;place-self:center end;margin-block-end:var(--sp-3)}:host([data-layout=row]) ::ng-deep fly-card-actions{flex-shrink:0;align-self:center}@media(width<=640px){:host([data-layout=row]){padding:14px var(--sp-4);gap:var(--sp-3)}:host([data-layout=row].is-selectable:hover),:host([data-layout=row].is-selectable.is-selected){padding-inline-start:44px}.card__check{inset-inline-start:14px}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--sp-4);position:relative;min-width:0}:host(.is-interactive){cursor:pointer;transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}:host(.is-interactive):hover{border-color:var(--line-2);box-shadow:var(--shadow-card)}:host(.is-interactive):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host(.is-interactive.is-lift){transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}:host(.is-interactive.is-lift):hover{transform:translateY(-2px);box-shadow:var(--shadow-filter)}:host([aria-disabled=true]){opacity:.5;cursor:default}:host([data-layout=column]){display:grid;grid-template:\"status actions\" auto \"media  media\" auto \"main   main\" 1fr \"footer footer\" auto/1fr auto;align-items:start;column-gap:var(--sp-2);animation:riseIn .34s var(--nova-ease-micro) both}:host([data-layout=column]):nth-child(1){animation-delay:0ms}:host([data-layout=column]):nth-child(2){animation-delay:55ms}:host([data-layout=column]):nth-child(3){animation-delay:.11s}:host([data-layout=column]):nth-child(4){animation-delay:165ms}:host([data-layout=column]):nth-child(5){animation-delay:.22s}:host([data-layout=column]):nth-child(6){animation-delay:275ms}:host([data-layout=column]):nth-child(7){animation-delay:.33s}:host([data-layout=column]):nth-child(8){animation-delay:385ms}:host([data-layout=column]):nth-child(9){animation-delay:.44s}:host([data-layout=column]):nth-child(10){animation-delay:495ms}:host([data-layout=column]):nth-child(11){animation-delay:.55s}:host([data-layout=column]):nth-child(12){animation-delay:605ms}:host([data-layout=column]):nth-child(n+13){animation-delay:605ms}:host([data-layout=row]){display:flex;align-items:flex-start;gap:12px;padding:14px 12px;border-color:transparent;background:transparent;box-shadow:none;animation:itemIn .4s var(--nova-ease-micro) both}:host([data-layout=row]):nth-child(1){animation-delay:0ms}:host([data-layout=row]):nth-child(2){animation-delay:40ms}:host([data-layout=row]):nth-child(3){animation-delay:80ms}:host([data-layout=row]):nth-child(4){animation-delay:.12s}:host([data-layout=row]):nth-child(5){animation-delay:.16s}:host([data-layout=row]):nth-child(6){animation-delay:.2s}:host([data-layout=row]):nth-child(7){animation-delay:.24s}:host([data-layout=row]):nth-child(8){animation-delay:.28s}:host([data-layout=row]):nth-child(9){animation-delay:.32s}:host([data-layout=row]):nth-child(10){animation-delay:.36s}:host([data-layout=row]):nth-child(11){animation-delay:.4s}:host([data-layout=row]):nth-child(12){animation-delay:.44s}:host([data-layout=row]):nth-child(n+13){animation-delay:.44s}:host([data-layout=row]){transition:padding-inline-start var(--t-overlay),background var(--t-state),border-color var(--t-state),box-shadow var(--t-state)}:host([data-layout=row]):hover{background:var(--w04)}:host([data-layout=row]):not(.is-selectable,:first-child):before{content:\"\";position:absolute;inset-block-start:0;inset-inline:12px;block-size:1px;background:var(--w07)}:host([data-layout=row].is-selectable:hover),:host([data-layout=row].is-selectable.is-selected){padding-inline-start:48px}:host([data-layout=row].is-selectable){padding:13px 14px;border:1px solid var(--w07);background:var(--w04)}:host([data-layout=row].is-selectable):hover{background:var(--w06);border-color:var(--w14)}:host([data-layout=row].is-selected){background:var(--tint-sel);border-color:var(--accent)}:host([data-layout=row].is-selected):hover{background:var(--tint-sel);border-color:var(--accent)}:host([data-layout=column].is-selected){background:color-mix(in srgb,var(--accent-soft) 65%,var(--bg-2));border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.card__check{position:absolute;inset-inline-start:14px;inset-block-start:15px;display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--t-state)}.card__check input{position:absolute;opacity:0;width:14px;height:14px;margin:0;cursor:pointer}:host(:hover) .card__check,:host(:focus-visible) .card__check,:host(:has(:focus-visible)) .card__check,:host(.is-selected) .card__check{opacity:1;pointer-events:auto}.card__check-box{position:relative;display:inline-block;width:14px;height:14px;border:1.5px solid var(--ink-4);border-radius:4px;background:var(--bg-2);transition:background var(--t-state),border-color var(--t-state);flex-shrink:0}.card__check-box:after{content:\"\";position:absolute;inset:0;margin:auto;width:4px;height:7px;border:solid var(--ink-inverse);border-width:0 1.6px 1.6px 0;transform:translateY(-1px) rotate(45deg);opacity:0;transition:opacity var(--t-state)}input:checked+.card__check-box{background:var(--accent);border-color:var(--accent)}input:checked+.card__check-box:after{opacity:1}.card__main{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;flex:1}:host([data-layout=column]) .card__main{grid-area:main;gap:var(--sp-3);height:100%}:host([data-layout=row]) .card__main{font-size:13px;line-height:1.5;color:var(--w55);text-wrap:pretty}:host([data-layout=column]) .card__main ::ng-deep fly-card-body{margin-block-start:auto}:host([data-layout=column]) .card__main ::ng-deep fly-card-meta{margin-block-start:auto}:host([data-layout=column]) .card__main ::ng-deep fly-card-body~fly-card-meta{margin-block-start:0}:host ::ng-deep fly-card-media{display:block;flex-shrink:0}:host([data-layout=column]) ::ng-deep fly-card-media{grid-area:media;margin-block-end:var(--sp-3)}:host ::ng-deep fly-card-title{display:block;font-size:15px;color:var(--ink);letter-spacing:-.01em;overflow:hidden;min-width:0}:host([data-layout=column]) ::ng-deep fly-card-title{font-weight:var(--fw-medium);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host([data-layout=row]) ::ng-deep fly-card-title{font-weight:var(--fw-semibold);font-size:14px;line-height:1.35;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;transition:font-size var(--t-state)}:host([data-density=compact]) ::ng-deep fly-card-title{font-size:12.5px}:host([data-density=compact]) ::ng-deep fly-card-status{display:none}:host ::ng-deep fly-card-meta{display:flex;flex-wrap:wrap;gap:var(--sp-1);min-width:0}:host([data-layout=row]) ::ng-deep fly-card-meta{align-items:center;gap:8px;font-size:11.5px;color:var(--w55)}:host([data-layout=row]) ::ng-deep fly-card-meta>span{display:inline-flex;align-items:center}:host([data-layout=row]) ::ng-deep fly-card-meta>span:not(:first-child){position:relative;padding-inline-start:8px}:host([data-layout=row]) ::ng-deep fly-card-meta>span:not(:first-child):before{content:\"\";position:absolute;inset-inline-start:0;inset-block:2px;inline-size:1px;background:var(--w12)}:host ::ng-deep fly-card-meta dl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--sp-2);width:100%;margin:0}:host ::ng-deep fly-card-meta dl>div{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}:host ::ng-deep fly-card-meta dl dt{margin:0;font-size:10px;font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}:host ::ng-deep fly-card-meta dl dd{margin:0;font-size:var(--text-sm);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep fly-card-status{display:inline-flex;align-items:center;min-width:0}:host([data-layout=column]) ::ng-deep fly-card-status{grid-area:status;place-self:center start;min-height:24px;margin-block-end:var(--sp-3)}:host([data-layout=row]) ::ng-deep fly-card-status{flex-shrink:0;align-self:center}:host ::ng-deep fly-card-body{display:block;min-width:0}:host ::ng-deep fly-card-footer{display:flex;align-items:center;gap:6px}:host([data-layout=column]) ::ng-deep fly-card-footer{grid-area:footer;justify-content:space-between;margin-block-start:var(--sp-3);padding-block-start:10px;border-block-start:1px solid var(--line-3);font-size:10.5px;font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4)}:host([data-layout=row]) ::ng-deep fly-card-footer{flex-shrink:0;align-self:center;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}:host ::ng-deep fly-card-actions{display:inline-flex;align-items:center;gap:2px}:host([data-layout=column]) ::ng-deep fly-card-actions{grid-area:actions;place-self:center end;margin-block-end:var(--sp-3)}:host([data-layout=row]) ::ng-deep fly-card-actions{flex-shrink:0;align-self:center}@media(width<=640px){:host([data-layout=row]){padding:14px var(--sp-4);gap:var(--sp-3)}:host([data-layout=row].is-selectable:hover),:host([data-layout=row].is-selectable.is-selected){padding-inline-start:44px}.card__check{inset-inline-start:14px}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyCardComponent, decorators: [{
             type: Component,
@@ -21441,7 +21643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
     <ng-content select="fly-card-status" />
     <ng-content select="fly-card-footer" />
     <ng-content select="fly-card-actions" />
-  `, styles: ["@charset \"UTF-8\";:host{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--sp-4);position:relative;min-width:0}:host(.is-interactive){cursor:pointer;transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}:host(.is-interactive):hover{border-color:var(--line-2);box-shadow:var(--shadow-card)}:host(.is-interactive):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host(.is-interactive.is-lift){transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}:host(.is-interactive.is-lift):hover{transform:translateY(-2px);box-shadow:var(--shadow-filter)}:host([aria-disabled=true]){opacity:.5;cursor:default}:host([data-layout=column]){display:grid;grid-template:\"status actions\" auto \"media  media\" auto \"main   main\" 1fr \"footer footer\" auto/1fr auto;align-items:start;column-gap:var(--sp-2);animation:riseIn .34s var(--nova-ease-micro) both}:host([data-layout=column]):nth-child(1){animation-delay:0ms}:host([data-layout=column]):nth-child(2){animation-delay:55ms}:host([data-layout=column]):nth-child(3){animation-delay:.11s}:host([data-layout=column]):nth-child(4){animation-delay:165ms}:host([data-layout=column]):nth-child(5){animation-delay:.22s}:host([data-layout=column]):nth-child(6){animation-delay:275ms}:host([data-layout=column]):nth-child(7){animation-delay:.33s}:host([data-layout=column]):nth-child(8){animation-delay:385ms}:host([data-layout=column]):nth-child(9){animation-delay:.44s}:host([data-layout=column]):nth-child(10){animation-delay:495ms}:host([data-layout=column]):nth-child(11){animation-delay:.55s}:host([data-layout=column]):nth-child(12){animation-delay:605ms}:host([data-layout=column]):nth-child(n+13){animation-delay:605ms}:host([data-layout=row]){display:flex;align-items:flex-start;gap:12px;padding:14px 12px;border-color:transparent;background:transparent;box-shadow:none;animation:itemIn .4s var(--nova-ease-micro) both}:host([data-layout=row]):nth-child(1){animation-delay:0ms}:host([data-layout=row]):nth-child(2){animation-delay:40ms}:host([data-layout=row]):nth-child(3){animation-delay:80ms}:host([data-layout=row]):nth-child(4){animation-delay:.12s}:host([data-layout=row]):nth-child(5){animation-delay:.16s}:host([data-layout=row]):nth-child(6){animation-delay:.2s}:host([data-layout=row]):nth-child(7){animation-delay:.24s}:host([data-layout=row]):nth-child(8){animation-delay:.28s}:host([data-layout=row]):nth-child(9){animation-delay:.32s}:host([data-layout=row]):nth-child(10){animation-delay:.36s}:host([data-layout=row]):nth-child(11){animation-delay:.4s}:host([data-layout=row]):nth-child(12){animation-delay:.44s}:host([data-layout=row]):nth-child(n+13){animation-delay:.44s}:host([data-layout=row]){transition:padding-inline-start var(--t-overlay),background var(--t-state),border-color var(--t-state),box-shadow var(--t-state)}:host([data-layout=row]):hover{background:var(--w04)}:host([data-layout=row]):not(.is-selectable,:first-child):before{content:\"\";position:absolute;inset-block-start:0;inset-inline:12px;block-size:1px;background:var(--w07)}:host([data-layout=row].is-selectable:hover),:host([data-layout=row].is-selectable.is-selected){padding-inline-start:48px}:host([data-layout=row].is-selectable){padding:13px 14px;border:1px solid var(--w07);background:var(--w04)}:host([data-layout=row].is-selectable):hover{background:var(--w06);border-color:var(--w14)}:host([data-layout=row].is-selected){background:var(--tint-sel);border-color:var(--accent)}:host([data-layout=row].is-selected):hover{background:var(--tint-sel);border-color:var(--accent)}:host([data-layout=column].is-selected){background:color-mix(in srgb,var(--accent-soft) 65%,var(--bg-2));border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.card__check{position:absolute;inset-inline-start:14px;inset-block-start:15px;display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--t-state)}.card__check input{position:absolute;opacity:0;width:14px;height:14px;margin:0;cursor:pointer}:host(:hover) .card__check,:host(:focus-visible) .card__check,:host(:has(:focus-visible)) .card__check,:host(.is-selected) .card__check{opacity:1;pointer-events:auto}.card__check-box{position:relative;display:inline-block;width:14px;height:14px;border:1.5px solid var(--ink-4);border-radius:4px;background:var(--bg-2);transition:background var(--t-state),border-color var(--t-state);flex-shrink:0}.card__check-box:after{content:\"\";position:absolute;inset:0;margin:auto;width:4px;height:7px;border:solid var(--ink-inverse);border-width:0 1.6px 1.6px 0;transform:translateY(-1px) rotate(45deg);opacity:0;transition:opacity var(--t-state)}input:checked+.card__check-box{background:var(--accent);border-color:var(--accent)}input:checked+.card__check-box:after{opacity:1}.card__main{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;flex:1}:host([data-layout=column]) .card__main{grid-area:main;gap:var(--sp-3);height:100%}:host([data-layout=row]) .card__main{font-size:13px;line-height:1.5;color:var(--w55);text-wrap:pretty}:host([data-layout=column]) .card__main ::ng-deep fly-card-body{margin-block-start:auto}:host([data-layout=column]) .card__main ::ng-deep fly-card-meta{margin-block-start:auto}:host([data-layout=column]) .card__main ::ng-deep fly-card-body~fly-card-meta{margin-block-start:0}:host ::ng-deep fly-card-media{display:block;flex-shrink:0}:host([data-layout=column]) ::ng-deep fly-card-media{grid-area:media;margin-block-end:var(--sp-3)}:host ::ng-deep fly-card-title{display:block;font-size:15px;color:var(--ink);letter-spacing:-.01em;overflow:hidden;min-width:0}:host([data-layout=column]) ::ng-deep fly-card-title{font-weight:var(--fw-medium);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host([data-layout=row]) ::ng-deep fly-card-title{font-weight:var(--fw-semibold);font-size:14px;line-height:1.35;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;transition:font-size var(--t-state)}:host([data-density=compact]) ::ng-deep fly-card-title{font-size:12.5px}:host([data-density=compact]) ::ng-deep fly-card-status{display:none}:host ::ng-deep fly-card-meta{display:flex;flex-wrap:wrap;gap:var(--sp-1);min-width:0}:host([data-layout=row]) ::ng-deep fly-card-meta{align-items:center;gap:8px;font-size:11.5px;color:var(--w55)}:host([data-layout=row]) ::ng-deep fly-card-meta>span{display:inline-flex;align-items:center}:host([data-layout=row]) ::ng-deep fly-card-meta>span:not(:first-child){position:relative;padding-inline-start:8px}:host([data-layout=row]) ::ng-deep fly-card-meta>span:not(:first-child):before{content:\"\";position:absolute;inset-inline-start:0;inset-block:2px;inline-size:1px;background:var(--w12)}:host ::ng-deep fly-card-meta dl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--sp-2);width:100%;margin:0}:host ::ng-deep fly-card-meta dl>div{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}:host ::ng-deep fly-card-meta dl dt{margin:0;font-size:10px;font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}:host ::ng-deep fly-card-meta dl dd{margin:0;font-size:var(--text-sm);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep fly-card-status{display:inline-flex;align-items:center;min-width:0}:host([data-layout=column]) ::ng-deep fly-card-status{grid-area:status;place-self:center start;min-height:24px;margin-block-end:var(--sp-3)}:host([data-layout=row]) ::ng-deep fly-card-status{flex-shrink:0;align-self:center}:host ::ng-deep fly-card-body{display:block;min-width:0}:host ::ng-deep fly-card-footer{display:flex;align-items:center;gap:6px}:host([data-layout=column]) ::ng-deep fly-card-footer{grid-area:footer;justify-content:space-between;margin-block-start:var(--sp-3);padding-block-start:10px;border-block-start:1px solid var(--line-3);font-size:10.5px;font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4)}:host([data-layout=row]) ::ng-deep fly-card-footer{flex-shrink:0;align-self:center;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}:host ::ng-deep fly-card-actions{display:inline-flex;align-items:center;gap:2px}:host([data-layout=column]) ::ng-deep fly-card-actions{grid-area:actions;place-self:center end;margin-block-end:var(--sp-3)}:host([data-layout=row]) ::ng-deep fly-card-actions{flex-shrink:0;align-self:center}@media(width<=640px){:host([data-layout=row]){padding:14px var(--sp-4);gap:var(--sp-3)}:host([data-layout=row].is-selectable:hover),:host([data-layout=row].is-selectable.is-selected){padding-inline-start:44px}.card__check{inset-inline-start:14px}}\n"] }]
+  `, styles: ["@charset \"UTF-8\";:host{background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--sp-4);position:relative;min-width:0}:host(.is-interactive){cursor:pointer;transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}:host(.is-interactive):hover{border-color:var(--line-2);box-shadow:var(--shadow-card)}:host(.is-interactive):focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}:host(.is-interactive.is-lift){transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-overlay)}:host(.is-interactive.is-lift):hover{transform:translateY(-2px);box-shadow:var(--shadow-filter)}:host([aria-disabled=true]){opacity:.5;cursor:default}:host([data-layout=column]){display:grid;grid-template:\"status actions\" auto \"media  media\" auto \"main   main\" 1fr \"footer footer\" auto/1fr auto;align-items:start;column-gap:var(--sp-2);animation:riseIn .34s var(--nova-ease-micro) both}:host([data-layout=column]):nth-child(1){animation-delay:0ms}:host([data-layout=column]):nth-child(2){animation-delay:55ms}:host([data-layout=column]):nth-child(3){animation-delay:.11s}:host([data-layout=column]):nth-child(4){animation-delay:165ms}:host([data-layout=column]):nth-child(5){animation-delay:.22s}:host([data-layout=column]):nth-child(6){animation-delay:275ms}:host([data-layout=column]):nth-child(7){animation-delay:.33s}:host([data-layout=column]):nth-child(8){animation-delay:385ms}:host([data-layout=column]):nth-child(9){animation-delay:.44s}:host([data-layout=column]):nth-child(10){animation-delay:495ms}:host([data-layout=column]):nth-child(11){animation-delay:.55s}:host([data-layout=column]):nth-child(12){animation-delay:605ms}:host([data-layout=column]):nth-child(n+13){animation-delay:605ms}:host([data-layout=row]){display:flex;align-items:flex-start;gap:12px;padding:14px 12px;border-color:transparent;background:transparent;box-shadow:none;animation:itemIn .4s var(--nova-ease-micro) both}:host([data-layout=row]):nth-child(1){animation-delay:0ms}:host([data-layout=row]):nth-child(2){animation-delay:40ms}:host([data-layout=row]):nth-child(3){animation-delay:80ms}:host([data-layout=row]):nth-child(4){animation-delay:.12s}:host([data-layout=row]):nth-child(5){animation-delay:.16s}:host([data-layout=row]):nth-child(6){animation-delay:.2s}:host([data-layout=row]):nth-child(7){animation-delay:.24s}:host([data-layout=row]):nth-child(8){animation-delay:.28s}:host([data-layout=row]):nth-child(9){animation-delay:.32s}:host([data-layout=row]):nth-child(10){animation-delay:.36s}:host([data-layout=row]):nth-child(11){animation-delay:.4s}:host([data-layout=row]):nth-child(12){animation-delay:.44s}:host([data-layout=row]):nth-child(n+13){animation-delay:.44s}:host([data-layout=row]){transition:padding-inline-start var(--t-overlay),background var(--t-state),border-color var(--t-state),box-shadow var(--t-state)}:host([data-layout=row]):hover{background:var(--w04)}:host([data-layout=row]):not(.is-selectable,:first-child):before{content:\"\";position:absolute;inset-block-start:0;inset-inline:12px;block-size:1px;background:var(--w07)}:host([data-layout=row].is-selectable:hover),:host([data-layout=row].is-selectable.is-selected){padding-inline-start:48px}:host([data-layout=row].is-selectable){padding:13px 14px;border:1px solid var(--w07);background:var(--w04)}:host([data-layout=row].is-selectable):hover{background:var(--w06);border-color:var(--w14)}:host([data-layout=row].is-selected){background:var(--tint-sel);border-color:var(--accent)}:host([data-layout=row].is-selected):hover{background:var(--tint-sel);border-color:var(--accent)}:host([data-layout=column].is-selected){background:color-mix(in srgb,var(--accent-soft) 65%,var(--bg-2));border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.card__check{position:absolute;inset-inline-start:14px;inset-block-start:15px;display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--t-state)}.card__check input{position:absolute;opacity:0;width:14px;height:14px;margin:0;cursor:pointer}:host(:hover) .card__check,:host(:focus-visible) .card__check,:host(:has(:focus-visible)) .card__check,:host(.is-selected) .card__check{opacity:1;pointer-events:auto}.card__check-box{position:relative;display:inline-block;width:14px;height:14px;border:1.5px solid var(--ink-4);border-radius:4px;background:var(--bg-2);transition:background var(--t-state),border-color var(--t-state);flex-shrink:0}.card__check-box:after{content:\"\";position:absolute;inset:0;margin:auto;width:4px;height:7px;border:solid var(--ink-inverse);border-width:0 1.6px 1.6px 0;transform:translateY(-1px) rotate(45deg);opacity:0;transition:opacity var(--t-state)}input:checked+.card__check-box{background:var(--accent);border-color:var(--accent)}input:checked+.card__check-box:after{opacity:1}.card__main{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;flex:1}:host([data-layout=column]) .card__main{grid-area:main;gap:var(--sp-3);height:100%}:host([data-layout=row]) .card__main{font-size:13px;line-height:1.5;color:var(--w55);text-wrap:pretty}:host([data-layout=column]) .card__main ::ng-deep fly-card-body{margin-block-start:auto}:host([data-layout=column]) .card__main ::ng-deep fly-card-meta{margin-block-start:auto}:host([data-layout=column]) .card__main ::ng-deep fly-card-body~fly-card-meta{margin-block-start:0}:host ::ng-deep fly-card-media{display:block;flex-shrink:0}:host([data-layout=column]) ::ng-deep fly-card-media{grid-area:media;margin-block-end:var(--sp-3)}:host ::ng-deep fly-card-title{display:block;font-size:15px;color:var(--ink);letter-spacing:-.01em;overflow:hidden;min-width:0}:host([data-layout=column]) ::ng-deep fly-card-title{font-weight:var(--fw-medium);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host([data-layout=row]) ::ng-deep fly-card-title{font-weight:var(--fw-semibold);font-size:14px;line-height:1.35;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;transition:font-size var(--t-state)}:host([data-density=compact]) ::ng-deep fly-card-title{font-size:12.5px}:host([data-density=compact]) ::ng-deep fly-card-status{display:none}:host ::ng-deep fly-card-meta{display:flex;flex-wrap:wrap;gap:var(--sp-1);min-width:0}:host([data-layout=row]) ::ng-deep fly-card-meta{align-items:center;gap:8px;font-size:11.5px;color:var(--w55)}:host([data-layout=row]) ::ng-deep fly-card-meta>span{display:inline-flex;align-items:center}:host([data-layout=row]) ::ng-deep fly-card-meta>span:not(:first-child){position:relative;padding-inline-start:8px}:host([data-layout=row]) ::ng-deep fly-card-meta>span:not(:first-child):before{content:\"\";position:absolute;inset-inline-start:0;inset-block:2px;inline-size:1px;background:var(--w12)}:host ::ng-deep fly-card-meta dl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--sp-2);width:100%;margin:0}:host ::ng-deep fly-card-meta dl>div{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}:host ::ng-deep fly-card-meta dl dt{margin:0;font-size:10px;font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}:host ::ng-deep fly-card-meta dl dd{margin:0;font-size:var(--text-sm);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host ::ng-deep fly-card-status{display:inline-flex;align-items:center;min-width:0}:host([data-layout=column]) ::ng-deep fly-card-status{grid-area:status;place-self:center start;min-height:24px;margin-block-end:var(--sp-3)}:host([data-layout=row]) ::ng-deep fly-card-status{flex-shrink:0;align-self:center}:host ::ng-deep fly-card-body{display:block;min-width:0}:host ::ng-deep fly-card-footer{display:flex;align-items:center;gap:6px}:host([data-layout=column]) ::ng-deep fly-card-footer{grid-area:footer;justify-content:space-between;margin-block-start:var(--sp-3);padding-block-start:10px;border-block-start:1px solid var(--line-3);font-size:10.5px;font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4)}:host([data-layout=row]) ::ng-deep fly-card-footer{flex-shrink:0;align-self:center;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}:host ::ng-deep fly-card-actions{display:inline-flex;align-items:center;gap:2px}:host([data-layout=column]) ::ng-deep fly-card-actions{grid-area:actions;place-self:center end;margin-block-end:var(--sp-3)}:host([data-layout=row]) ::ng-deep fly-card-actions{flex-shrink:0;align-self:center}@media(width<=640px){:host([data-layout=row]){padding:14px var(--sp-4);gap:var(--sp-3)}:host([data-layout=row].is-selectable:hover),:host([data-layout=row].is-selectable.is-selected){padding-inline-start:44px}.card__check{inset-inline-start:14px}}\n"] }]
         }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], lift: [{ type: i0.Input, args: [{ isSignal: true, alias: "lift", required: false }] }], selectLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabelKey", required: false }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
 /**
@@ -21842,11 +22044,11 @@ class FlyDataTableComponent {
         this.sortChange.emit(nextSort(this.sort(), col.id));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDataTableComponent, isStandalone: true, selector: "fly-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyKey: { classPropertyName: "emptyKey", publicName: "emptyKey", isSignal: true, isRequired: false, transformFunction: null }, emptyIconClass: { classPropertyName: "emptyIconClass", publicName: "emptyIconClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", rowActivated: "rowActivated" }, queries: [{ propertyName: "cellTemplates", predicate: FlyCellDirective, isSignal: true }], ngImport: i0, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);container-type:inline-size}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--line)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@container (width <= 720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FlyStateMessageComponent, selector: "fly-state-message", inputs: ["kind", "messageKey", "iconClass", "noteKey", "retryLabelKey", "showRetry"], outputs: ["retried"] }, { kind: "component", type: FlySkeletonComponent, selector: "fly-skeleton", inputs: ["layout", "shape", "count", "lines", "animation", "fill", "messageKey", "announce"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyDataTableComponent, isStandalone: true, selector: "fly-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelKey: { classPropertyName: "ariaLabelKey", publicName: "ariaLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, emptyKey: { classPropertyName: "emptyKey", publicName: "emptyKey", isSignal: true, isRequired: false, transformFunction: null }, emptyIconClass: { classPropertyName: "emptyIconClass", publicName: "emptyIconClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", rowActivated: "rowActivated" }, queries: [{ propertyName: "cellTemplates", predicate: FlyCellDirective, isSignal: true }], ngImport: i0, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);container-type:inline-size}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--w1)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@container (width <= 720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--ink-4);text-align:start}}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--ink-4);text-align:start}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FlyStateMessageComponent, selector: "fly-state-message", inputs: ["kind", "messageKey", "iconClass", "noteKey", "retryLabelKey", "showRetry"], outputs: ["retried"] }, { kind: "component", type: FlySkeletonComponent, selector: "fly-skeleton", inputs: ["layout", "shape", "count", "lines", "animation", "fill", "messageKey", "announce"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-data-table', standalone: true, imports: [DatePipe, NgTemplateOutlet, TranslatePipe, FlyStateMessageComponent, FlySkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);container-type:inline-size}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--line)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@container (width <= 720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-4);text-align:start}}\n"] }]
+            args: [{ selector: 'fly-data-table', standalone: true, imports: [DatePipe, NgTemplateOutlet, TranslatePipe, FlyStateMessageComponent, FlySkeletonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"dt\" [attr.aria-label]=\"ariaLabelKey() ? (ariaLabelKey()! | translate) : null\">\r\n  <thead>\r\n    <tr>\r\n      @for (col of columns(); track col.id) {\r\n        <th\r\n          scope=\"col\"\r\n          [class.dt__th--end]=\"col.align === 'end'\"\r\n          [attr.aria-sort]=\"headerAriaSort(col)\"\r\n        >\r\n          @if (col.sortable) {\r\n            <button type=\"button\" class=\"dt__sort\" (click)=\"onHeaderClick(col)\">\r\n              <span>{{ col.headerKey | translate }}</span>\r\n              <span class=\"dt__sort-icon\" [attr.data-dir]=\"sortDirFor(col)\" aria-hidden=\"true\"></span>\r\n            </button>\r\n          } @else {\r\n            {{ col.headerKey | translate }}\r\n          }\r\n        </th>\r\n      }\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    @if (loading()) {\r\n      @for (i of skeletonRows; track i) {\r\n        <tr class=\"dt__row dt__row--skel\">\r\n          <td [attr.colspan]=\"columns().length\">\r\n            <!-- shape=\"lines\" is the DS skeleton's no-chrome text shimmer\r\n                 (the kit's former shape=\"text\"); one line per collapsed row.\r\n                 No backticks in here: this is an INLINE template literal. -->\r\n            <fly-skeleton shape=\"lines\" [lines]=\"1\" />\r\n          </td>\r\n        </tr>\r\n      }\r\n    } @else {\r\n      @for (row of rows(); track $index) {\r\n        <tr\r\n          class=\"dt__row\"\r\n          tabindex=\"0\"\r\n          (click)=\"onRowActivate($event, row)\"\r\n          (keydown.enter)=\"onRowActivate($event, row)\"\r\n        >\r\n          @for (col of columns(); track col.id) {\r\n            <td\r\n              [class.dt__td--end]=\"col.align === 'end'\"\r\n              [class.mono]=\"col.kind === 'mono'\"\r\n              [class.dt__td--date]=\"col.kind === 'date'\"\r\n              [class.dt__td--num]=\"col.kind === 'number'\"\r\n              [attr.data-label]=\"col.headerKey | translate\"\r\n            >\r\n              @if (templateFor(col.id); as tpl) {\r\n                <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: row }\" />\r\n              } @else {\r\n                @switch (col.kind ?? 'text') {\r\n                  @case ('date') {\r\n                    @if (cellValue(row, col); as value) {\r\n                      {{ $any(value) | date: 'yyyy-MM-dd' : 'UTC' }}\r\n                    } @else { \u2014 }\r\n                  }\r\n                  @default {\r\n                    {{ displayValue(row, col) }}\r\n                  }\r\n                }\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      }\r\n    }\r\n  </tbody>\r\n</table>\r\n@if (!loading() && rows().length === 0 && emptyKey()) {\r\n  <fly-state-message kind=\"empty\" [messageKey]=\"emptyKey()\" [iconClass]=\"emptyIconClass()\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block;background:var(--bg-2);border:1px solid var(--w08);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);container-type:inline-size}.dt{width:100%;border-collapse:collapse;font-size:var(--text-base)}.dt thead th{text-align:start;padding:var(--sp-2) var(--sp-3);font-size:12px;font-weight:var(--fw-bold);color:var(--ink-3);background:var(--bg-3);border-block-end:1px solid var(--w1)}.dt__th--end{text-align:end}.dt__sort{display:inline-flex;align-items:center;gap:var(--sp-1);padding:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}.dt__sort:hover{color:var(--ink)}.dt__sort:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.dt__sort-icon{inline-size:0;block-size:0;border-inline:4px solid transparent;border-block-start:5px solid var(--ink-4);opacity:.45;transition:transform var(--t-state),opacity var(--t-state)}.dt__sort-icon[data-dir=asc]{opacity:1;border-block-start-color:var(--accent);transform:rotate(180deg)}.dt__sort-icon[data-dir=desc]{opacity:1;border-block-start-color:var(--accent)}.dt tbody td{height:var(--row-h);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line-3);color:var(--ink);transition:background var(--t-state)}.dt tbody tr:last-child td{border-block-end:0}.dt__row{cursor:pointer}.dt__row:hover td{background:var(--bg-hover)}.dt__row:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.dt__row--skel{cursor:default}.dt__row--skel:hover td{background:transparent}.dt__td--end{text-align:end}.dt__td--date,.dt__td--num{color:var(--ink-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}@container (width <= 720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--ink-4);text-align:start}}@media(width<=720px){.dt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dt,.dt tbody,.dt tbody tr,.dt tbody td{display:block}.dt__row{padding:var(--sp-2) 0;border-block-end:1px solid var(--line-3)}.dt__row:last-child{border-block-end:0}.dt tbody td{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);height:auto;border-block-end:0;padding:var(--sp-1) var(--sp-3);text-align:end}.dt tbody td:before{content:attr(data-label);flex-shrink:0;font-size:var(--text-xs);font-weight:var(--fw-medium);color:var(--ink-4);text-align:start}}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], rowActivated: [{ type: i0.Output, args: ["rowActivated"] }], emptyKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyKey", required: false }] }], emptyIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIconClass", required: false }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlyCellDirective), { isSignal: true }] }] } });
 
 /**
@@ -22059,11 +22261,11 @@ class PageHeaderComponent {
         return '#';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PageHeaderComponent, isStandalone: true, selector: "fly-page-header", inputs: { variant: "variant", title: "title", titleKey: "titleKey", subtitle: "subtitle", subtitleKey: "subtitleKey", titleAr: "titleAr", eyebrow: "eyebrow", eyebrowKey: "eyebrowKey", metricValue: "metricValue", metricLabel: "metricLabel", metricLabelKey: "metricLabelKey", breadcrumbs: "breadcrumbs" }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1;min-width:min(100%,320px)}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: PageHeaderComponent, isStandalone: true, selector: "fly-page-header", inputs: { variant: "variant", title: "title", titleKey: "titleKey", subtitle: "subtitle", subtitleKey: "subtitleKey", titleAr: "titleAr", eyebrow: "eyebrow", eyebrowKey: "eyebrowKey", metricValue: "metricValue", metricLabel: "metricLabel", metricLabelKey: "metricLabelKey", breadcrumbs: "breadcrumbs" }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-page-header', standalone: true, imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1;min-width:min(100%,320px)}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"] }]
+            args: [{ selector: 'fly-page-header', standalone: true, imports: [NgClass, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"ph\" [ngClass]=\"'ph--' + variant\">\r\n  <!-- \u2500\u2500\u2500 Breadcrumbs \u2500\u2500\u2500 -->\r\n  @if (breadcrumbs?.length) {\r\n    <nav class=\"crumbs\" [attr.aria-label]=\"'ui.nav.breadcrumbs' | translate\">\r\n      @for (bc of breadcrumbs; track $index; let i = $index, last = $last) {\r\n        @if (i > 0) {\r\n          <span class=\"crumb__sep\" aria-hidden=\"true\">/</span>\r\n        }\r\n        @if (last || bc.ariaCurrent) {\r\n          <span class=\"crumb crumb--active\" aria-current=\"page\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        } @else if (bc.onClick) {\r\n          <button type=\"button\" class=\"crumb crumb--link\" (click)=\"onCrumb(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </button>\r\n        } @else if (bc.link) {\r\n          <a class=\"crumb crumb--link\" (click)=\"onCrumb(bc); $event.preventDefault()\" [attr.href]=\"hrefFor(bc)\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else if (bc.href) {\r\n          <a class=\"crumb crumb--link\" [attr.href]=\"bc.href\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </a>\r\n        } @else {\r\n          <span class=\"crumb\">\r\n            {{ bc.labelKey ? (bc.labelKey | translate) : bc.label }}\r\n          </span>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n\r\n  <!-- \u2500\u2500\u2500 Title row \u2500\u2500\u2500 -->\r\n  <div class=\"ph__row\">\r\n    <div class=\"ph__l\">\r\n      @if (eyebrow || eyebrowKey) {\r\n        <div class=\"ph__eyebrow\">\r\n          @if (eyebrow) { <span class=\"mono\">{{ eyebrow }}</span> }\r\n          @if (eyebrowKey) { <span>{{ eyebrowKey | translate }}</span> }\r\n        </div>\r\n      }\r\n      <h1 class=\"ph__title\" [ngClass]=\"{ 'ph__title--detail': variant === 'detail' }\">\r\n        {{ titleKey ? (titleKey | translate) : title }}\r\n      </h1>\r\n      @if (subtitle || subtitleKey) {\r\n        <p class=\"ph__sub\">{{ subtitleKey ? (subtitleKey | translate) : subtitle }}</p>\r\n      }\r\n      @if (titleAr) {\r\n        <p class=\"ph__title-ar\">{{ titleAr }}</p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ph__r\">\r\n      <!-- Right-side metric (listing) -->\r\n      @if (metricValue || metricLabel || metricLabelKey) {\r\n        <div class=\"ph__metric\">\r\n          @if (metricValue) { <div class=\"ph__metric-v mono\">{{ metricValue }}</div> }\r\n          <div class=\"ph__metric-l\">{{ metricLabelKey ? (metricLabelKey | translate) : metricLabel }}</div>\r\n        </div>\r\n      }\r\n\r\n      <!-- Status chip (detail) stacked over the action button row. Listing/circles/module\r\n           project no status, so this collapses to just the right-aligned action row.\r\n           NOTE: a single [page-header-actions] slot \u2014 duplicating it across @if branches\r\n           silently drops projected content in the non-first branch (Angular binds projection\r\n           to the first declared matching <ng-content>). -->\r\n      <div class=\"ph__hd-actions\">\r\n        <ng-content select=\"[page-header-status]\"></ng-content>\r\n        <div class=\"ph__hd-btns\">\r\n          <ng-content select=\"[page-header-actions]\"></ng-content>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Default slot: anything the consumer wants directly below the title row\r\n       (e.g. a detail-page stat bar). -->\r\n  <ng-content></ng-content>\r\n</header>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;margin-block-end:var(--sp-6);container-type:inline-size}.ph{display:flex;flex-direction:column;gap:0;color:var(--ink);font-family:var(--font-sans, var(--font-family, system-ui, sans-serif))}.crumbs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;margin-bottom:14px;color:var(--ink-3)}.crumb{font-size:12px;line-height:1.4;color:var(--ink-3);padding:2px 0;background:none;border:0;font-family:inherit;letter-spacing:-.005em;text-decoration:none}.crumb--link{cursor:pointer;padding-inline:4px;margin-inline:-4px;border-radius:6px;transition:color var(--t-state),background var(--t-state)}.crumb--link:hover{color:var(--ink);background:var(--w08)}.crumb--active{color:var(--ink);font-weight:var(--fw-medium);max-width:480px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crumb__sep{color:var(--ink-4);font-size:11px;-webkit-user-select:none;user-select:none}.ph__row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap}.ph--detail .ph__row{align-items:flex-start}.ph__l{flex:1}.ph__r{display:flex;align-items:flex-end;gap:16px;flex-shrink:0}.ph--detail .ph__r{align-items:flex-end;flex-direction:column}.ph__eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);font-weight:var(--fw-medium);margin-bottom:4px}.ph__eyebrow .mono{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;font-family:var(--font-mono, ui-monospace, monospace)}.ph__title{margin:0 0 6px;font-size:32px;font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}.ph__title--detail{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0}.ph__sub{margin:0;font-size:13.5px;color:var(--ink-3)}.ph__title-ar{margin:6px 0 0;font-size:17px;color:var(--ink-3);font-family:Noto Kufi Arabic,sans-serif;letter-spacing:0;line-height:1.5;font-weight:var(--fw-medium)}.ph__metric{text-align:end}.ph__metric-v{font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;font-size:22px;font-weight:var(--fw-medium);letter-spacing:-.02em;color:var(--ink)}.ph__metric-l{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}.ph__hd-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.ph__hd-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.ph--listing,.ph--detail{margin-bottom:0}@container (width <= 640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}@media(width<=640px){.ph__row{flex-direction:column;align-items:flex-start;gap:16px}.ph__r{align-items:flex-start;flex-flow:row wrap}.ph--detail .ph__r{flex-direction:row-reverse}.ph__title{font-size:26px}.ph__title--detail{font-size:24px}}\n"] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], title: [{
@@ -22478,6 +22680,38 @@ function nextModuleIndex(modules, from, step) {
 function firstModuleIndex(modules) {
     return modules.findIndex(m => !m.disabled);
 }
+/**
+ * Attribute a HOST CHROME stamps on an empty element to say "an app's header row
+ * belongs in here". The desktop shell puts one in its window titlebar; nothing
+ * else in the design system knows or cares which chrome that is.
+ */
+const TITLEBAR_DOCK_ATTR = 'data-fly-titlebar-dock';
+/**
+ * The dock this topbar should move itself into, or `null` when it is rendering
+ * standalone (its own page, no host chrome around it).
+ *
+ * Walks ANCESTORS rather than searching the document, which is what makes it
+ * safe with several windows open: the first ancestor that contains a dock is
+ * this topbar's own window, because a sibling window's chrome is never an
+ * ancestor of this element.
+ *
+ * `dock.contains(host)` is the re-entry guard. Once docked, the walk would find
+ * the very dock we are already sitting in and re-append us — harmless today
+ * (the caller runs once) but a trap for anyone who later re-runs it on a
+ * re-render.
+ */
+function findTitlebarDock(host) {
+    const selector = `[${TITLEBAR_DOCK_ATTR}]`;
+    const root = host.ownerDocument.documentElement;
+    for (let el = host.parentElement; el; el = el.parentElement) {
+        const dock = el.querySelector(selector);
+        if (dock)
+            return dock.contains(host) ? null : dock;
+        if (el === root)
+            break;
+    }
+    return null;
+}
 
 /**
  * Per-module icon template: `<ng-template flyModuleIcon="signals">…</ng-template>`.
@@ -22519,6 +22753,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * per module, so adding a module meant editing the component. Here the modules
  * are data ({@link FlyAppModule}) and the icons are projected templates.
  *
+ * ## Docking into a host chrome's titlebar
+ *
+ * The desktop shell draws its own header strip on every window (app icon, title,
+ * window controls). An app rendering this bar underneath it printed the app name
+ * twice, one line apart — and the design draws exactly ONE such row
+ * (`UX/FlyOS Desktop-app/MainContent.dc.html`: app crumb ▸ module crumb ▸ close).
+ *
+ * So when a host chrome offers a dock ({@link findTitlebarDock}), this component
+ * MOVES ITS OWN HOST ELEMENT into it once, after the first render, and flips to a
+ * flat presentation ({@link docked}) that inherits the strip's plate instead of
+ * painting its own. Relocating the element rather than re-implementing the row in
+ * the shell is what keeps the switcher — its popover, roving focus, projected
+ * icon templates and i18n — in ONE place: Angular binds a view to its component,
+ * not to a position in the DOM, so everything keeps working from the new parent.
+ *
+ * Standalone (no dock anywhere above), nothing happens and the bar renders as the
+ * app's own first row, exactly as before.
+ *
  * a11y: the trigger is `aria-haspopup="menu"` + `aria-expanded`; the popover is
  * `role="menu"` with `role="menuitem"` rows carrying `aria-current="page"` on
  * the active one. Arrow keys rove (RTL-aware, wrapping, skipping disabled),
@@ -22540,12 +22792,19 @@ class FlyAppTopbarComponent {
     /** The brand was clicked — conventionally "go to this app's home". */
     brandSelected = output();
     i18n = inject(I18nService);
+    host = inject(ElementRef);
     icons = contentChildren(FlyModuleIconDirective, ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
     rows = viewChildren('row', ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     trigger = viewChildren('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     focusIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusIndex" }] : /* istanbul ignore next */ []));
     stackHandle = null;
+    /**
+     * True once this bar has moved itself into a host chrome's titlebar dock — see
+     * the class doc. Drives `.fly-topbar--docked`, which drops the bar's own plate
+     * and hairline so it reads as part of the strip rather than a row inside it.
+     */
+    docked = signal(false, ...(ngDevMode ? [{ debugName: "docked" }] : /* istanbul ignore next */ []));
     /**
      * Set when the menu opens, cleared once focus has actually landed on a row.
      *
@@ -22575,6 +22834,12 @@ class FlyAppTopbarComponent {
     }, ...(ngDevMode ? [{ debugName: "triggerAriaLabel" }] : /* istanbul ignore next */ []));
     constructor() {
         inject(DestroyRef).onDestroy(() => overlayStack.remove(this.stackHandle));
+        // After the FIRST render, not on every one: the dock is host chrome, which is
+        // already on screen before a remote's first paint, and re-checking would cost
+        // an ancestor walk per change-detection pass for a decision that cannot
+        // change. No teardown pairs with it — Angular removes a destroyed component's
+        // host element through the node itself, so the move does not strand it.
+        afterNextRender(() => this.dockIntoHostChrome());
         effect(() => {
             const rows = this.rows();
             if (!this.pendingFocus() || rows.length === 0)
@@ -22583,6 +22848,14 @@ class FlyAppTopbarComponent {
             this.pendingFocus.set(false);
         });
     }
+    dockIntoHostChrome() {
+        const el = this.host.nativeElement;
+        const dock = findTitlebarDock(el);
+        if (!dock)
+            return;
+        dock.appendChild(el);
+        this.docked.set(true);
+    }
     iconFor(key) {
         return this.icons().find(d => d.flyModuleIcon() === key)?.template ?? null;
     }
@@ -22678,11 +22951,14 @@ class FlyAppTopbarComponent {
         this.rows()[index]?.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppTopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyAppTopbarComponent, isStandalone: true, selector: "fly-app-topbar", inputs: { brandLabelKey: { classPropertyName: "brandLabelKey", publicName: "brandLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, footerLabel: { classPropertyName: "footerLabel", publicName: "footerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moduleSelected: "moduleSelected", brandSelected: "brandSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "icons", predicate: FlyModuleIconDirective, isSignal: true }], viewQueries: [{ propertyName: "rows", predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "trigger", predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"], dependencies: [{ kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled"], outputs: ["flyClickOutside"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyAppTopbarComponent, isStandalone: true, selector: "fly-app-topbar", inputs: { brandLabelKey: { classPropertyName: "brandLabelKey", publicName: "brandLabelKey", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, footerLabel: { classPropertyName: "footerLabel", publicName: "footerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moduleSelected: "moduleSelected", brandSelected: "brandSelected" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.fly-topbar--docked": "docked()" } }, queries: [{ propertyName: "icons", predicate: FlyModuleIconDirective, isSignal: true }], viewQueries: [{ propertyName: "rows", predicate: ["row"], descendants: true, isSignal: true }, { propertyName: "trigger", predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--w1);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}:host(.fly-topbar--docked){flex:1 1 auto;min-inline-size:0;z-index:auto}:host(.fly-topbar--docked) .fly-topbar{padding:0;background:transparent;border-block-end:0}:host(.fly-topbar--docked) .fly-topbar__lead{gap:2px}:host(.fly-topbar--docked) .fly-topbar__brand,:host(.fly-topbar--docked) .fly-topbar__module{block-size:26px;padding-block:0;padding-inline:var(--sp-2);border-radius:var(--r-sm);font-size:var(--text-sm);line-height:1;color:var(--label-secondary)}:host(.fly-topbar--docked) .fly-topbar__brand:hover,:host(.fly-topbar--docked) .fly-topbar__module:hover{background:var(--w08);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module{color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module--on{background:var(--w08)}:host(.fly-topbar--docked) .fly-topbar__brand-name{font-weight:var(--fw-medium)}:host(.fly-topbar--docked) .fly-topbar__module-label{font-weight:var(--fw-semibold)}:host(.fly-topbar--docked) .fly-topbar__sep{color:var(--w28)}:host(.fly-topbar--docked) .fly-topbar__module-icon{inline-size:14px;block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark{max-block-size:22px}:host(.fly-topbar--docked) .fly-topbar__brand-mark ::ng-deep *{max-inline-size:22px;max-block-size:22px}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"], dependencies: [{ kind: "directive", type: FlyClickOutsideDirective, selector: "[flyClickOutside]", inputs: ["flyClickOutsideEnabled"], outputs: ["flyClickOutside"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppTopbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-app-topbar', standalone: true, imports: [TranslatePipe, FlyClickOutsideDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { '(document:keydown.escape)': 'onEscape()' }, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--line);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"] }]
+            args: [{ selector: 'fly-app-topbar', standalone: true, imports: [TranslatePipe, FlyClickOutsideDirective, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(document:keydown.escape)': 'onEscape()',
+                        '[class.fly-topbar--docked]': 'docked()',
+                    }, template: "<header class=\"fly-topbar\">\r\n  <div class=\"fly-topbar__lead\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fly-topbar__brand\"\r\n      (click)=\"brandSelected.emit()\"\r\n      [attr.aria-label]=\"brandAriaLabel()\"\r\n    >\r\n      <span class=\"fly-topbar__brand-mark\"><ng-content select=\"[app-topbar-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"fly-topbar__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n\r\n    @if (activeModule()) {\r\n      <span class=\"fly-topbar__sep\" aria-hidden=\"true\">/</span>\r\n    }\r\n\r\n    <div class=\"fly-topbar__anchor\" (flyClickOutside)=\"close()\" [flyClickOutsideEnabled]=\"open()\">\r\n      <button\r\n        #trigger\r\n        type=\"button\"\r\n        class=\"fly-topbar__module\"\r\n        [class.fly-topbar__module--on]=\"open()\"\r\n        (click)=\"toggle()\"\r\n        (keydown)=\"onTriggerKeydown($event)\"\r\n        aria-haspopup=\"menu\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-label]=\"triggerAriaLabel()\"\r\n      >\r\n        @if (activeModule(); as active) {\r\n          <span class=\"fly-topbar__module-icon\">\r\n            @if (iconFor(active.key); as tpl) {\r\n              <ng-container *ngTemplateOutlet=\"tpl\" />\r\n            } @else if (active.iconClass) {\r\n              <i [class]=\"active.iconClass\" aria-hidden=\"true\"></i>\r\n            }\r\n          </span>\r\n          <span class=\"fly-topbar__module-label\">{{ active.labelKey | translate }}</span>\r\n        } @else {\r\n          <span class=\"fly-topbar__module-label fly-topbar__module-label--empty\">\r\n            {{ 'ui.nav.selectModule' | translate }}\r\n          </span>\r\n        }\r\n        <svg class=\"fly-topbar__chevron\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n             stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n             aria-hidden=\"true\">\r\n          <polyline points=\"6 9 12 15 18 9\" />\r\n        </svg>\r\n      </button>\r\n\r\n      @if (open()) {\r\n        <div class=\"fly-topbar__pop\" role=\"menu\" [attr.aria-label]=\"switchAriaLabel()\">\r\n          <div class=\"fly-topbar__cols\">\r\n            @for (section of sections(); track $index) {\r\n              <div class=\"fly-topbar__col\">\r\n                @if (section.titleKey; as titleKey) {\r\n                  <div class=\"fly-topbar__col-title\">{{ titleKey | translate }}</div>\r\n                }\r\n                @for (mod of section.modules; track mod.key) {\r\n                  <button\r\n                    #row\r\n                    type=\"button\"\r\n                    class=\"fly-topbar__item\"\r\n                    [class.fly-topbar__item--on]=\"mod.key === activeKey()\"\r\n                    role=\"menuitem\"\r\n                    [disabled]=\"mod.disabled ?? false\"\r\n                    [attr.tabindex]=\"indexOf(mod) === focusIndex() ? 0 : -1\"\r\n                    [attr.aria-current]=\"mod.key === activeKey() ? 'page' : null\"\r\n                    (click)=\"select(mod)\"\r\n                    (keydown)=\"onRowKeydown($event)\"\r\n                  >\r\n                    <span class=\"fly-topbar__item-icon\">\r\n                      @if (iconFor(mod.key); as tpl) {\r\n                        <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                      } @else if (mod.iconClass) {\r\n                        <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                      }\r\n                    </span>\r\n                    <span class=\"fly-topbar__item-main\">\r\n                      <span class=\"fly-topbar__item-label\">{{ mod.labelKey | translate }}</span>\r\n                      @if (mod.descKey; as descKey) {\r\n                        <span class=\"fly-topbar__item-desc\">{{ descKey | translate }}</span>\r\n                      }\r\n                    </span>\r\n                  </button>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (footerLabel()) {\r\n            <div class=\"fly-topbar__foot\">{{ footerLabel() }}</div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"fly-topbar__actions\"><ng-content select=\"[app-topbar-actions]\" /></div>\r\n</header>\r\n", styles: [":host{display:block;position:relative;z-index:var(--z-sticky)}.fly-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-block-end:1px solid var(--w1);background:var(--bg-3)}.fly-topbar__lead{display:flex;align-items:center;gap:var(--sp-2);min-inline-size:0}.fly-topbar__brand,.fly-topbar__module{display:inline-flex;align-items:center;gap:var(--sp-2);appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__brand:hover,.fly-topbar__module:hover{background:var(--bg-hover)}.fly-topbar__brand:focus-visible,.fly-topbar__module:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.fly-topbar__brand-name{font-weight:var(--fw-semibold);white-space:nowrap}.fly-topbar__brand-mark{display:inline-flex;align-items:center;max-block-size:var(--icon-lg)}.fly-topbar__sep{color:var(--ink-4);-webkit-user-select:none;user-select:none}.fly-topbar__module{min-inline-size:0}.fly-topbar__module--on{background:var(--bg-hover)}.fly-topbar__module-label{font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fly-topbar__module-label--empty{color:var(--ink-3)}.fly-topbar__module-icon,.fly-topbar__item-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:var(--icon-md);block-size:var(--icon-md);flex:0 0 auto;color:var(--accent)}.fly-topbar__chevron{flex:0 0 auto;color:var(--ink-3);transition:transform var(--t-state)}.fly-topbar__module--on .fly-topbar__chevron{transform:rotate(180deg)}.fly-topbar__anchor{position:relative}:host(.fly-topbar--docked){flex:1 1 auto;min-inline-size:0;z-index:auto}:host(.fly-topbar--docked) .fly-topbar{padding:0;background:transparent;border-block-end:0}:host(.fly-topbar--docked) .fly-topbar__lead{gap:2px}:host(.fly-topbar--docked) .fly-topbar__brand,:host(.fly-topbar--docked) .fly-topbar__module{block-size:26px;padding-block:0;padding-inline:var(--sp-2);border-radius:var(--r-sm);font-size:var(--text-sm);line-height:1;color:var(--label-secondary)}:host(.fly-topbar--docked) .fly-topbar__brand:hover,:host(.fly-topbar--docked) .fly-topbar__module:hover{background:var(--w08);color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module{color:var(--label-primary)}:host(.fly-topbar--docked) .fly-topbar__module--on{background:var(--w08)}:host(.fly-topbar--docked) .fly-topbar__brand-name{font-weight:var(--fw-medium)}:host(.fly-topbar--docked) .fly-topbar__module-label{font-weight:var(--fw-semibold)}:host(.fly-topbar--docked) .fly-topbar__sep{color:var(--w28)}:host(.fly-topbar--docked) .fly-topbar__module-icon{inline-size:14px;block-size:14px}:host(.fly-topbar--docked) .fly-topbar__brand-mark{max-block-size:22px}:host(.fly-topbar--docked) .fly-topbar__brand-mark ::ng-deep *{max-inline-size:22px;max-block-size:22px}.fly-topbar__pop{position:absolute;inset-block-start:calc(100% + var(--sp-1));inset-inline-start:0;z-index:var(--z-overlay);min-inline-size:260px;max-inline-size:min(680px,92vw);padding:var(--sp-3);border-radius:var(--r-lg);border:1px solid var(--glass2-border);background-image:radial-gradient(70% 60% at 50% 100%,var(--w07),transparent 70%),linear-gradient(180deg,var(--w08),transparent 20%),linear-gradient(180deg,var(--mat-menu-solid-a),var(--mat-menu-solid-b));box-shadow:0 16px 40px #0003,0 4px 10px #0000001a,var(--glass2-inset)}@media(prefers-reduced-transparency:reduce){.fly-topbar__pop{border-color:transparent;background-color:light-dark(#eef2f8,#2c2c2e);background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.fly-topbar__pop:before,.fly-topbar__pop:after{display:none}}@media(prefers-contrast:more){.fly-topbar__pop{border-color:var(--w6)}}@media(prefers-reduced-motion:reduce){.fly-topbar__pop:after{animation:none}}.fly-topbar__cols{display:flex;gap:var(--sp-4);align-items:flex-start}@media(width<=720px){.fly-topbar__cols{flex-direction:column;gap:var(--sp-3)}}.fly-topbar__col{display:flex;flex-direction:column;gap:2px;min-inline-size:220px;flex:1 1 0}.fly-topbar__col-title{font-size:var(--text-2xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--ink-3);padding:var(--sp-2) var(--sp-2) var(--sp-1)}.fly-topbar__item{display:flex;align-items:flex-start;gap:var(--sp-2);inline-size:100%;text-align:start;appearance:none;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink);padding:var(--sp-2);border-radius:var(--r-md);transition:background var(--t-state)}.fly-topbar__item:hover:not(:disabled){background:var(--w1)}.fly-topbar__item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.fly-topbar__item:disabled{opacity:.5;cursor:default}.fly-topbar__item--on{background:var(--accent-soft);color:var(--on-accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.fly-topbar__item-main{display:flex;flex-direction:column;gap:1px;min-inline-size:0}.fly-topbar__item-label{font-weight:var(--fw-medium);line-height:1.3}.fly-topbar__item-desc{font-size:var(--text-xs);color:var(--ink-3);line-height:1.35}.fly-topbar__foot{margin-block-start:var(--sp-3);padding-block-start:var(--sp-2);border-block-start:.5px solid var(--w08);font-size:var(--text-2xs);color:var(--ink-4)}.fly-topbar__actions{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}@media(forced-colors:active){.fly-topbar__item--on{border-inline-start:2px solid CanvasText}}@media(prefers-reduced-motion:reduce){.fly-topbar__brand,.fly-topbar__module,.fly-topbar__item,.fly-topbar__chevron{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { brandLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabelKey", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], footerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerLabel", required: false }] }], moduleSelected: [{ type: i0.Output, args: ["moduleSelected"] }], brandSelected: [{ type: i0.Output, args: ["brandSelected"] }], icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlyModuleIconDirective), { isSignal: true }] }], rows: [{ type: i0.ViewChildren, args: ['row', { isSignal: true }] }], trigger: [{ type: i0.ViewChildren, args: ['trigger', { isSignal: true }] }] } });
 
 /**
@@ -22813,11 +23089,11 @@ class FlyAppHomeComponent {
         return `fly-app-home-sec-${index}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyAppHomeComponent, isStandalone: true, selector: "fly-app-home", inputs: { brandLabelKey: { classPropertyName: "brandLabelKey", publicName: "brandLabelKey", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, subtitleKey: { classPropertyName: "subtitleKey", publicName: "subtitleKey", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, modulesLabelKey: { classPropertyName: "modulesLabelKey", publicName: "modulesLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moduleSelected: "moduleSelected", brandSelected: "brandSelected" }, queries: [{ propertyName: "icons", predicate: FlyModuleIconDirective, isSignal: true }], ngImport: i0, template: "<div class=\"ah\">\r\n  <header class=\"ah__util\">\r\n    <button type=\"button\" class=\"ah__brand\" (click)=\"brandSelected.emit()\">\r\n      <span class=\"ah__brand-mark\"><ng-content select=\"[app-home-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"ah__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n    <ng-content select=\"[app-home-actions]\" />\r\n  </header>\r\n\r\n  <main class=\"ah__main\">\r\n    @if (titleKey() || subtitleKey()) {\r\n      <section class=\"ah__hero\">\r\n        @if (titleKey(); as key) {\r\n          <h1 class=\"ah__title\">{{ key | translate }}</h1>\r\n        }\r\n        @if (subtitleKey(); as key) {\r\n          <p class=\"ah__sub\">{{ key | translate }}</p>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @for (row of rows(); track row.index) {\r\n      <section\r\n        class=\"ah__sec\"\r\n        [class.ah__sec--secondary]=\"row.index > 0\"\r\n        [attr.aria-label]=\"row.section.titleKey ? null : (modulesLabelKey() | translate)\"\r\n      >\r\n        @if (row.section.titleKey; as titleKey) {\r\n          @if (row.section.collapsible) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ah__sec-hd\"\r\n              (click)=\"toggle(row.index)\"\r\n              [attr.aria-expanded]=\"row.expanded\"\r\n              [attr.aria-controls]=\"sectionId(row.index)\"\r\n            >\r\n              <!-- Points end-ward when shut, down when open. `--open` wins over the RTL\r\n                   flip below because a downward chevron has no direction to mirror. -->\r\n              <svg\r\n                class=\"ah__sec-chev\"\r\n                [class.ah__sec-chev--open]=\"row.expanded\"\r\n                width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n              >\r\n                <polyline points=\"9 6 15 12 9 18\" />\r\n              </svg>\r\n              <span class=\"ah__sec-title\">{{ titleKey | translate }}</span>\r\n              <span class=\"ah__sec-count\">{{ row.section.modules.length }}</span>\r\n              @if (row.hintKey; as hint) {\r\n                <span class=\"ah__sec-hint\">{{ hint | translate }}</span>\r\n              }\r\n            </button>\r\n          } @else {\r\n            <h2 class=\"ah__sec-title ah__sec-title--static\">{{ titleKey | translate }}</h2>\r\n          }\r\n        }\r\n\r\n        @if (row.expanded) {\r\n          <div class=\"ah__grid\" [class.ah__grid--compact]=\"row.layout === 'compact'\" [id]=\"sectionId(row.index)\">\r\n            @for (mod of row.section.modules; track mod.key) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"ah__card\"\r\n                [class.ah__card--compact]=\"row.layout === 'compact'\"\r\n                [disabled]=\"mod.disabled\"\r\n                (click)=\"select(mod)\"\r\n              >\r\n                <span class=\"ah__card-ico\">\r\n                  @if (iconFor(mod.key); as tpl) {\r\n                    <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                  } @else if (mod.iconClass) {\r\n                    <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                  }\r\n                </span>\r\n\r\n                @if (row.layout === 'compact') {\r\n                  <span class=\"ah__card-main\">\r\n                    <span class=\"ah__card-title\">{{ mod.labelKey | translate }}</span>\r\n                    @if (mod.descKey; as descKey) {\r\n                      <span class=\"ah__card-desc\">{{ descKey | translate }}</span>\r\n                    }\r\n                  </span>\r\n                  <svg\r\n                    class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n                  >\r\n                    <polyline points=\"9 6 15 12 9 18\" />\r\n                  </svg>\r\n                } @else {\r\n                  <span class=\"ah__card-title ah__card-title--feature\">{{ mod.labelKey | translate }}</span>\r\n                  @if (mod.descKey; as descKey) {\r\n                    <span class=\"ah__card-desc ah__card-desc--feature\">{{ descKey | translate }}</span>\r\n                  }\r\n                  <span class=\"ah__card-open\">\r\n                    {{ 'ui.action.open' | translate }}\r\n                    <svg\r\n                      class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                      stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n                    >\r\n                      <polyline points=\"9 6 15 12 9 18\" />\r\n                    </svg>\r\n                  </span>\r\n                }\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </main>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:100%;container-type:inline-size}.ah{display:flex;flex-direction:column;flex:1;min-height:100%}.ah__util{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6)}.ah__brand{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0;border:0;background:none;color:var(--ink);font-family:inherit;cursor:pointer}.ah__brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__brand-name{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__main{flex:1;inline-size:100%;max-inline-size:1120px;margin-inline:auto;padding:56px 40px;display:flex;flex-direction:column;justify-content:center;gap:44px}.ah__hero{max-inline-size:640px}.ah__title{margin:0 0 var(--sp-3);font-size:44px;font-weight:var(--fw-semibold);letter-spacing:-.03em;text-wrap:balance;background:linear-gradient(180deg,var(--ink),var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent}.ah__sub{margin:0;max-inline-size:560px;font-size:var(--text-lg);line-height:1.55;color:var(--ink-3);text-wrap:pretty}.ah__sec{display:flex;flex-direction:column;gap:var(--sp-4)}.ah__sec--secondary{padding-block-start:28px;border-block-start:1px solid var(--line)}.ah__sec-hd{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;color:var(--ink);text-align:start}.ah__sec-hd:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__sec-chev{flex-shrink:0;color:var(--ink-3);transition:transform var(--t-overlay)}.ah__sec-title{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__sec-title--static{margin:0;color:var(--ink-3);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.ah__sec-count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);font-size:var(--text-2xs);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;color:var(--ink-3)}.ah__sec-hint{margin-inline-start:auto;font-size:var(--text-xs);color:var(--ink-3)}.ah__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}.ah__card{display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;text-align:start;padding:20px 20px 18px;background-color:var(--bg);background-image:linear-gradient(160deg,var(--w055),var(--w02));border:1px solid var(--w09);border-radius:20px;color:inherit;font-family:inherit;cursor:pointer;animation:appTileIn .3s var(--nova-ease-micro) both}.ah__card:nth-child(1){animation-delay:0ms}.ah__card:nth-child(2){animation-delay:20ms}.ah__card:nth-child(3){animation-delay:40ms}.ah__card:nth-child(4){animation-delay:60ms}.ah__card:nth-child(5){animation-delay:80ms}.ah__card:nth-child(6){animation-delay:.1s}.ah__card:nth-child(7){animation-delay:.12s}.ah__card:nth-child(8){animation-delay:.14s}.ah__card:nth-child(9){animation-delay:.16s}.ah__card:nth-child(10){animation-delay:.18s}.ah__card:nth-child(11){animation-delay:.2s}.ah__card:nth-child(12){animation-delay:.22s}.ah__card:nth-child(n+13){animation-delay:.22s}.ah__card{transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-state),background-image var(--t-state)}.ah__card:hover:not(:disabled){transform:translateY(-3px);border-color:color-mix(in oklab,var(--accent) 50%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent);box-shadow:0 20px 46px color-mix(in oklab,var(--accent) 16%,transparent),var(--shadow-filter)}.ah__card:focus-visible{outline:0;border-color:color-mix(in oklab,var(--accent) 50%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent);box-shadow:0 0 0 3px var(--accent-soft),0 20px 46px color-mix(in oklab,var(--accent) 16%,transparent),var(--shadow-filter)}.ah__card:disabled{cursor:default;opacity:.5}.ah__card-ico{display:grid;place-items:center;inline-size:42px;block-size:42px;margin-block-end:18px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--sys-teal));box-shadow:inset 0 1px 0 var(--edge-highlight);border:0;color:var(--on-accent);font-size:var(--icon-lg)}.ah__card--compact:hover:not(:disabled) .ah__card-ico,.ah__card--compact:focus-visible .ah__card-ico{background:linear-gradient(135deg,var(--accent),var(--sys-teal));box-shadow:inset 0 1px 0 var(--edge-highlight);color:var(--on-accent)}.ah__card-title{font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:-.01em;color:var(--ink)}.ah__card-title--feature{margin-block-end:4px;font-size:18px;letter-spacing:-.015em}.ah__card-desc{font-size:var(--text-xs);line-height:1.45;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ah__card-desc--feature{margin-block-end:18px;font-size:var(--text-sm);line-height:1.5;text-wrap:pretty;overflow:visible;white-space:normal}.ah__card-open{display:inline-flex;align-items:center;gap:4px;margin-block-start:auto;font-size:var(--text-2xs);color:var(--ink-3);transition:color var(--t-overlay),gap var(--t-overlay)}.ah__card:hover:not(:disabled) .ah__card-open,.ah__card:focus-visible .ah__card-open{color:var(--accent);gap:8px}.ah__card-arrow{flex-shrink:0;transition:color var(--t-overlay),transform var(--t-overlay)}.ah__card--compact{flex-direction:row;align-items:center;gap:var(--sp-3);padding:14px 16px;background-color:var(--bg);background-image:linear-gradient(160deg,var(--w035),var(--w035));border-radius:16px;border-color:var(--w08)}.ah__card--compact:hover:not(:disabled),.ah__card--compact:focus-visible{border-color:color-mix(in oklab,var(--accent) 40%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent)}.ah__card--compact .ah__card-ico{inline-size:32px;block-size:32px;margin-block-end:0;flex-shrink:0;border-radius:10px;font-size:var(--icon-md);background:var(--bg-3);box-shadow:none;color:var(--ink)}.ah__card-main{display:flex;flex-direction:column;gap:2px;flex:1;min-inline-size:0}.ah__card--compact .ah__card-arrow{color:var(--ink-4)}.ah__card--compact:hover:not(:disabled) .ah__card-arrow{color:var(--accent);transform:translate(2px)}:host-context([dir=rtl]) .ah__card-arrow{transform:scaleX(-1)}:host-context([dir=rtl]) .ah__sec-chev:not(.ah__sec-chev--open){transform:scaleX(-1)}:host-context([dir=rtl]) .ah__card--compact:hover:not(:disabled) .ah__card-arrow{transform:scaleX(-1) translate(2px)}.ah__sec-chev--open{transform:rotate(90deg)}@container (width <= 900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@media(width<=900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@container (width <= 560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}@media(width<=560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyAppHomeComponent, isStandalone: true, selector: "fly-app-home", inputs: { brandLabelKey: { classPropertyName: "brandLabelKey", publicName: "brandLabelKey", isSignal: true, isRequired: false, transformFunction: null }, titleKey: { classPropertyName: "titleKey", publicName: "titleKey", isSignal: true, isRequired: false, transformFunction: null }, subtitleKey: { classPropertyName: "subtitleKey", publicName: "subtitleKey", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, modulesLabelKey: { classPropertyName: "modulesLabelKey", publicName: "modulesLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { moduleSelected: "moduleSelected", brandSelected: "brandSelected" }, queries: [{ propertyName: "icons", predicate: FlyModuleIconDirective, isSignal: true }], ngImport: i0, template: "<div class=\"ah\">\r\n  <header class=\"ah__util\">\r\n    <button type=\"button\" class=\"ah__brand\" (click)=\"brandSelected.emit()\">\r\n      <span class=\"ah__brand-mark\"><ng-content select=\"[app-home-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"ah__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n    <ng-content select=\"[app-home-actions]\" />\r\n  </header>\r\n\r\n  <main class=\"ah__main\">\r\n    @if (titleKey() || subtitleKey()) {\r\n      <section class=\"ah__hero\">\r\n        @if (titleKey(); as key) {\r\n          <h1 class=\"ah__title\">{{ key | translate }}</h1>\r\n        }\r\n        @if (subtitleKey(); as key) {\r\n          <p class=\"ah__sub\">{{ key | translate }}</p>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @for (row of rows(); track row.index) {\r\n      <section\r\n        class=\"ah__sec\"\r\n        [class.ah__sec--secondary]=\"row.index > 0\"\r\n        [attr.aria-label]=\"row.section.titleKey ? null : (modulesLabelKey() | translate)\"\r\n      >\r\n        @if (row.section.titleKey; as titleKey) {\r\n          @if (row.section.collapsible) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ah__sec-hd\"\r\n              (click)=\"toggle(row.index)\"\r\n              [attr.aria-expanded]=\"row.expanded\"\r\n              [attr.aria-controls]=\"sectionId(row.index)\"\r\n            >\r\n              <!-- Points end-ward when shut, down when open. `--open` wins over the RTL\r\n                   flip below because a downward chevron has no direction to mirror. -->\r\n              <svg\r\n                class=\"ah__sec-chev\"\r\n                [class.ah__sec-chev--open]=\"row.expanded\"\r\n                width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n              >\r\n                <polyline points=\"9 6 15 12 9 18\" />\r\n              </svg>\r\n              <span class=\"ah__sec-title\">{{ titleKey | translate }}</span>\r\n              <span class=\"ah__sec-count\">{{ row.section.modules.length }}</span>\r\n              @if (row.hintKey; as hint) {\r\n                <span class=\"ah__sec-hint\">{{ hint | translate }}</span>\r\n              }\r\n            </button>\r\n          } @else {\r\n            <h2 class=\"ah__sec-title ah__sec-title--static\">{{ titleKey | translate }}</h2>\r\n          }\r\n        }\r\n\r\n        @if (row.expanded) {\r\n          <div class=\"ah__grid\" [class.ah__grid--compact]=\"row.layout === 'compact'\" [id]=\"sectionId(row.index)\">\r\n            @for (mod of row.section.modules; track mod.key) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"ah__card\"\r\n                [class.ah__card--compact]=\"row.layout === 'compact'\"\r\n                [disabled]=\"mod.disabled\"\r\n                (click)=\"select(mod)\"\r\n              >\r\n                <span class=\"ah__card-ico\">\r\n                  @if (iconFor(mod.key); as tpl) {\r\n                    <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                  } @else if (mod.iconClass) {\r\n                    <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                  }\r\n                </span>\r\n\r\n                @if (row.layout === 'compact') {\r\n                  <span class=\"ah__card-main\">\r\n                    <span class=\"ah__card-title\">{{ mod.labelKey | translate }}</span>\r\n                    @if (mod.descKey; as descKey) {\r\n                      <span class=\"ah__card-desc\">{{ descKey | translate }}</span>\r\n                    }\r\n                  </span>\r\n                  <svg\r\n                    class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n                  >\r\n                    <polyline points=\"9 6 15 12 9 18\" />\r\n                  </svg>\r\n                } @else {\r\n                  <!-- No \"Open \u203A\" affordance row \u2014 the design's module card (MainContent.dc.html)\r\n                       ends at the description; the whole card is the click target and hover carries\r\n                       the affordance. Removed at the 2026-08-17 fidelity pass. -->\r\n                  <span class=\"ah__card-title ah__card-title--feature\">{{ mod.labelKey | translate }}</span>\r\n                  @if (mod.descKey; as descKey) {\r\n                    <span class=\"ah__card-desc ah__card-desc--feature\">{{ descKey | translate }}</span>\r\n                  }\r\n                }\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </main>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:100%;container-type:inline-size}.ah{display:flex;flex-direction:column;flex:1;min-height:100%}.ah__util{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6)}:host-context(.window-content) .ah__brand{display:none}:host-context(.window-content) .ah__util{justify-content:flex-end}:host-context(.window-content) .ah__util:not(:has(>:not(.ah__brand))){display:none}.ah__brand{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0;border:0;background:none;color:var(--ink);font-family:inherit;cursor:pointer}.ah__brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__brand-name{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__main{flex:1;inline-size:100%;max-inline-size:1120px;margin-inline:auto;padding:56px 40px;display:flex;flex-direction:column;justify-content:center;gap:44px}.ah__hero{max-inline-size:640px}.ah__title{margin:0 0 var(--sp-3);font-size:44px;font-weight:var(--fw-semibold);letter-spacing:-.03em;text-wrap:balance;background:linear-gradient(180deg,var(--ink),var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent}.ah__sub{margin:0;max-inline-size:560px;font-size:var(--text-lg);line-height:1.55;color:var(--ink-3);text-wrap:pretty}.ah__sec{display:flex;flex-direction:column;gap:var(--sp-4)}.ah__sec--secondary{padding-block-start:28px;border-block-start:1px solid var(--w08)}.ah__sec-hd{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;color:var(--ink);text-align:start}.ah__sec-hd:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__sec-chev{flex-shrink:0;color:var(--ink-3);transition:transform var(--t-overlay)}.ah__sec-title{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__sec-title--static{margin:0;color:var(--ink-3);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.ah__sec-count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);font-size:var(--text-2xs);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;color:var(--ink-3)}.ah__sec-hint{margin-inline-start:auto;font-size:var(--text-xs);color:var(--ink-3)}.ah__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.ah__card{display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;text-align:start;padding:20px;background-image:linear-gradient(160deg,var(--w055),var(--w02));border:1px solid var(--w09);border-radius:20px;color:inherit;font-family:inherit;cursor:pointer;animation:appTileIn .3s var(--nova-ease-micro) both}.ah__card:nth-child(1){animation-delay:0ms}.ah__card:nth-child(2){animation-delay:20ms}.ah__card:nth-child(3){animation-delay:40ms}.ah__card:nth-child(4){animation-delay:60ms}.ah__card:nth-child(5){animation-delay:80ms}.ah__card:nth-child(6){animation-delay:.1s}.ah__card:nth-child(7){animation-delay:.12s}.ah__card:nth-child(8){animation-delay:.14s}.ah__card:nth-child(9){animation-delay:.16s}.ah__card:nth-child(10){animation-delay:.18s}.ah__card:nth-child(11){animation-delay:.2s}.ah__card:nth-child(12){animation-delay:.22s}.ah__card:nth-child(n+13){animation-delay:.22s}.ah__card{transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-state),background-image var(--t-state)}.ah__card:hover:not(:disabled){transform:translateY(-3px);border-color:color-mix(in oklab,var(--accent) 50%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent);box-shadow:0 20px 46px color-mix(in oklab,var(--accent) 16%,transparent),var(--shadow-filter)}.ah__card:focus-visible{outline:0;border-color:color-mix(in oklab,var(--accent) 50%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent);box-shadow:0 0 0 3px var(--accent-soft),0 20px 46px color-mix(in oklab,var(--accent) 16%,transparent),var(--shadow-filter)}.ah__card:disabled{cursor:default;opacity:.5}.ah__card-ico{display:grid;place-items:center;inline-size:42px;block-size:42px;margin-block-end:16px;border-radius:13px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 50%,transparent),color-mix(in srgb,var(--sys-teal) 22%,transparent));box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 1px 0 var(--edge-highlight);border:0;color:var(--on-accent);font-size:var(--icon-lg)}.ah__card--compact:hover:not(:disabled) .ah__card-ico,.ah__card--compact:focus-visible .ah__card-ico{background:linear-gradient(135deg,var(--accent),var(--sys-teal));box-shadow:inset 0 1px 0 var(--edge-highlight);color:var(--on-accent)}.ah__card-title{font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:-.01em;color:var(--ink)}.ah__card-title--feature{margin-block-end:5px;font-size:16.5px;line-height:1.25;letter-spacing:-.005em}.ah__card-desc{font-size:var(--text-xs);line-height:1.45;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ah__card-desc--feature{margin-block-end:0;font-size:13px;line-height:1.45;text-wrap:pretty;overflow:visible;white-space:normal}.ah__card-arrow{flex-shrink:0;transition:color var(--t-overlay),transform var(--t-overlay)}.ah__card--compact{flex-direction:row;align-items:center;gap:var(--sp-3);padding:14px 16px;background-color:var(--bg);background-image:linear-gradient(160deg,var(--w035),var(--w035));border-radius:16px;border-color:var(--w08)}.ah__card--compact:hover:not(:disabled),.ah__card--compact:focus-visible{border-color:color-mix(in oklab,var(--accent) 40%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent)}.ah__card--compact .ah__card-ico{inline-size:32px;block-size:32px;margin-block-end:0;flex-shrink:0;border-radius:10px;font-size:var(--icon-md);background:var(--bg-3);box-shadow:none;color:var(--ink)}.ah__card-main{display:flex;flex-direction:column;gap:2px;flex:1;min-inline-size:0}.ah__card--compact .ah__card-arrow{color:var(--ink-4)}.ah__card--compact:hover:not(:disabled) .ah__card-arrow{color:var(--accent);transform:translate(2px)}:host-context([dir=rtl]) .ah__card-arrow{transform:scaleX(-1)}:host-context([dir=rtl]) .ah__sec-chev:not(.ah__sec-chev--open){transform:scaleX(-1)}:host-context([dir=rtl]) .ah__card--compact:hover:not(:disabled) .ah__card-arrow{transform:scaleX(-1) translate(2px)}.ah__sec-chev--open{transform:rotate(90deg)}@container (width <= 900px){.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@media(width<=900px){.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@container (width <= 560px){.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}@media(width<=560px){.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyAppHomeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fly-app-home', standalone: true, imports: [NgTemplateOutlet, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ah\">\r\n  <header class=\"ah__util\">\r\n    <button type=\"button\" class=\"ah__brand\" (click)=\"brandSelected.emit()\">\r\n      <span class=\"ah__brand-mark\"><ng-content select=\"[app-home-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"ah__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n    <ng-content select=\"[app-home-actions]\" />\r\n  </header>\r\n\r\n  <main class=\"ah__main\">\r\n    @if (titleKey() || subtitleKey()) {\r\n      <section class=\"ah__hero\">\r\n        @if (titleKey(); as key) {\r\n          <h1 class=\"ah__title\">{{ key | translate }}</h1>\r\n        }\r\n        @if (subtitleKey(); as key) {\r\n          <p class=\"ah__sub\">{{ key | translate }}</p>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @for (row of rows(); track row.index) {\r\n      <section\r\n        class=\"ah__sec\"\r\n        [class.ah__sec--secondary]=\"row.index > 0\"\r\n        [attr.aria-label]=\"row.section.titleKey ? null : (modulesLabelKey() | translate)\"\r\n      >\r\n        @if (row.section.titleKey; as titleKey) {\r\n          @if (row.section.collapsible) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ah__sec-hd\"\r\n              (click)=\"toggle(row.index)\"\r\n              [attr.aria-expanded]=\"row.expanded\"\r\n              [attr.aria-controls]=\"sectionId(row.index)\"\r\n            >\r\n              <!-- Points end-ward when shut, down when open. `--open` wins over the RTL\r\n                   flip below because a downward chevron has no direction to mirror. -->\r\n              <svg\r\n                class=\"ah__sec-chev\"\r\n                [class.ah__sec-chev--open]=\"row.expanded\"\r\n                width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n              >\r\n                <polyline points=\"9 6 15 12 9 18\" />\r\n              </svg>\r\n              <span class=\"ah__sec-title\">{{ titleKey | translate }}</span>\r\n              <span class=\"ah__sec-count\">{{ row.section.modules.length }}</span>\r\n              @if (row.hintKey; as hint) {\r\n                <span class=\"ah__sec-hint\">{{ hint | translate }}</span>\r\n              }\r\n            </button>\r\n          } @else {\r\n            <h2 class=\"ah__sec-title ah__sec-title--static\">{{ titleKey | translate }}</h2>\r\n          }\r\n        }\r\n\r\n        @if (row.expanded) {\r\n          <div class=\"ah__grid\" [class.ah__grid--compact]=\"row.layout === 'compact'\" [id]=\"sectionId(row.index)\">\r\n            @for (mod of row.section.modules; track mod.key) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"ah__card\"\r\n                [class.ah__card--compact]=\"row.layout === 'compact'\"\r\n                [disabled]=\"mod.disabled\"\r\n                (click)=\"select(mod)\"\r\n              >\r\n                <span class=\"ah__card-ico\">\r\n                  @if (iconFor(mod.key); as tpl) {\r\n                    <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                  } @else if (mod.iconClass) {\r\n                    <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                  }\r\n                </span>\r\n\r\n                @if (row.layout === 'compact') {\r\n                  <span class=\"ah__card-main\">\r\n                    <span class=\"ah__card-title\">{{ mod.labelKey | translate }}</span>\r\n                    @if (mod.descKey; as descKey) {\r\n                      <span class=\"ah__card-desc\">{{ descKey | translate }}</span>\r\n                    }\r\n                  </span>\r\n                  <svg\r\n                    class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n                  >\r\n                    <polyline points=\"9 6 15 12 9 18\" />\r\n                  </svg>\r\n                } @else {\r\n                  <span class=\"ah__card-title ah__card-title--feature\">{{ mod.labelKey | translate }}</span>\r\n                  @if (mod.descKey; as descKey) {\r\n                    <span class=\"ah__card-desc ah__card-desc--feature\">{{ descKey | translate }}</span>\r\n                  }\r\n                  <span class=\"ah__card-open\">\r\n                    {{ 'ui.action.open' | translate }}\r\n                    <svg\r\n                      class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                      stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\r\n                      stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n                    >\r\n                      <polyline points=\"9 6 15 12 9 18\" />\r\n                    </svg>\r\n                  </span>\r\n                }\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </main>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:100%;container-type:inline-size}.ah{display:flex;flex-direction:column;flex:1;min-height:100%}.ah__util{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6)}.ah__brand{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0;border:0;background:none;color:var(--ink);font-family:inherit;cursor:pointer}.ah__brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__brand-name{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__main{flex:1;inline-size:100%;max-inline-size:1120px;margin-inline:auto;padding:56px 40px;display:flex;flex-direction:column;justify-content:center;gap:44px}.ah__hero{max-inline-size:640px}.ah__title{margin:0 0 var(--sp-3);font-size:44px;font-weight:var(--fw-semibold);letter-spacing:-.03em;text-wrap:balance;background:linear-gradient(180deg,var(--ink),var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent}.ah__sub{margin:0;max-inline-size:560px;font-size:var(--text-lg);line-height:1.55;color:var(--ink-3);text-wrap:pretty}.ah__sec{display:flex;flex-direction:column;gap:var(--sp-4)}.ah__sec--secondary{padding-block-start:28px;border-block-start:1px solid var(--line)}.ah__sec-hd{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;color:var(--ink);text-align:start}.ah__sec-hd:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__sec-chev{flex-shrink:0;color:var(--ink-3);transition:transform var(--t-overlay)}.ah__sec-title{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__sec-title--static{margin:0;color:var(--ink-3);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.ah__sec-count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);font-size:var(--text-2xs);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;color:var(--ink-3)}.ah__sec-hint{margin-inline-start:auto;font-size:var(--text-xs);color:var(--ink-3)}.ah__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}.ah__card{display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;text-align:start;padding:20px 20px 18px;background-color:var(--bg);background-image:linear-gradient(160deg,var(--w055),var(--w02));border:1px solid var(--w09);border-radius:20px;color:inherit;font-family:inherit;cursor:pointer;animation:appTileIn .3s var(--nova-ease-micro) both}.ah__card:nth-child(1){animation-delay:0ms}.ah__card:nth-child(2){animation-delay:20ms}.ah__card:nth-child(3){animation-delay:40ms}.ah__card:nth-child(4){animation-delay:60ms}.ah__card:nth-child(5){animation-delay:80ms}.ah__card:nth-child(6){animation-delay:.1s}.ah__card:nth-child(7){animation-delay:.12s}.ah__card:nth-child(8){animation-delay:.14s}.ah__card:nth-child(9){animation-delay:.16s}.ah__card:nth-child(10){animation-delay:.18s}.ah__card:nth-child(11){animation-delay:.2s}.ah__card:nth-child(12){animation-delay:.22s}.ah__card:nth-child(n+13){animation-delay:.22s}.ah__card{transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-state),background-image var(--t-state)}.ah__card:hover:not(:disabled){transform:translateY(-3px);border-color:color-mix(in oklab,var(--accent) 50%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent);box-shadow:0 20px 46px color-mix(in oklab,var(--accent) 16%,transparent),var(--shadow-filter)}.ah__card:focus-visible{outline:0;border-color:color-mix(in oklab,var(--accent) 50%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent);box-shadow:0 0 0 3px var(--accent-soft),0 20px 46px color-mix(in oklab,var(--accent) 16%,transparent),var(--shadow-filter)}.ah__card:disabled{cursor:default;opacity:.5}.ah__card-ico{display:grid;place-items:center;inline-size:42px;block-size:42px;margin-block-end:18px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--sys-teal));box-shadow:inset 0 1px 0 var(--edge-highlight);border:0;color:var(--on-accent);font-size:var(--icon-lg)}.ah__card--compact:hover:not(:disabled) .ah__card-ico,.ah__card--compact:focus-visible .ah__card-ico{background:linear-gradient(135deg,var(--accent),var(--sys-teal));box-shadow:inset 0 1px 0 var(--edge-highlight);color:var(--on-accent)}.ah__card-title{font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:-.01em;color:var(--ink)}.ah__card-title--feature{margin-block-end:4px;font-size:18px;letter-spacing:-.015em}.ah__card-desc{font-size:var(--text-xs);line-height:1.45;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ah__card-desc--feature{margin-block-end:18px;font-size:var(--text-sm);line-height:1.5;text-wrap:pretty;overflow:visible;white-space:normal}.ah__card-open{display:inline-flex;align-items:center;gap:4px;margin-block-start:auto;font-size:var(--text-2xs);color:var(--ink-3);transition:color var(--t-overlay),gap var(--t-overlay)}.ah__card:hover:not(:disabled) .ah__card-open,.ah__card:focus-visible .ah__card-open{color:var(--accent);gap:8px}.ah__card-arrow{flex-shrink:0;transition:color var(--t-overlay),transform var(--t-overlay)}.ah__card--compact{flex-direction:row;align-items:center;gap:var(--sp-3);padding:14px 16px;background-color:var(--bg);background-image:linear-gradient(160deg,var(--w035),var(--w035));border-radius:16px;border-color:var(--w08)}.ah__card--compact:hover:not(:disabled),.ah__card--compact:focus-visible{border-color:color-mix(in oklab,var(--accent) 40%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent)}.ah__card--compact .ah__card-ico{inline-size:32px;block-size:32px;margin-block-end:0;flex-shrink:0;border-radius:10px;font-size:var(--icon-md);background:var(--bg-3);box-shadow:none;color:var(--ink)}.ah__card-main{display:flex;flex-direction:column;gap:2px;flex:1;min-inline-size:0}.ah__card--compact .ah__card-arrow{color:var(--ink-4)}.ah__card--compact:hover:not(:disabled) .ah__card-arrow{color:var(--accent);transform:translate(2px)}:host-context([dir=rtl]) .ah__card-arrow{transform:scaleX(-1)}:host-context([dir=rtl]) .ah__sec-chev:not(.ah__sec-chev--open){transform:scaleX(-1)}:host-context([dir=rtl]) .ah__card--compact:hover:not(:disabled) .ah__card-arrow{transform:scaleX(-1) translate(2px)}.ah__sec-chev--open{transform:rotate(90deg)}@container (width <= 900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@media(width<=900px){.ah__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@container (width <= 560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}@media(width<=560px){.ah__grid{grid-template-columns:1fr}.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}\n"] }]
+            args: [{ selector: 'fly-app-home', standalone: true, imports: [NgTemplateOutlet, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ah\">\r\n  <header class=\"ah__util\">\r\n    <button type=\"button\" class=\"ah__brand\" (click)=\"brandSelected.emit()\">\r\n      <span class=\"ah__brand-mark\"><ng-content select=\"[app-home-brand]\" /></span>\r\n      @if (brandLabelKey(); as key) {\r\n        <span class=\"ah__brand-name\">{{ key | translate }}</span>\r\n      }\r\n    </button>\r\n    <ng-content select=\"[app-home-actions]\" />\r\n  </header>\r\n\r\n  <main class=\"ah__main\">\r\n    @if (titleKey() || subtitleKey()) {\r\n      <section class=\"ah__hero\">\r\n        @if (titleKey(); as key) {\r\n          <h1 class=\"ah__title\">{{ key | translate }}</h1>\r\n        }\r\n        @if (subtitleKey(); as key) {\r\n          <p class=\"ah__sub\">{{ key | translate }}</p>\r\n        }\r\n      </section>\r\n    }\r\n\r\n    @for (row of rows(); track row.index) {\r\n      <section\r\n        class=\"ah__sec\"\r\n        [class.ah__sec--secondary]=\"row.index > 0\"\r\n        [attr.aria-label]=\"row.section.titleKey ? null : (modulesLabelKey() | translate)\"\r\n      >\r\n        @if (row.section.titleKey; as titleKey) {\r\n          @if (row.section.collapsible) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"ah__sec-hd\"\r\n              (click)=\"toggle(row.index)\"\r\n              [attr.aria-expanded]=\"row.expanded\"\r\n              [attr.aria-controls]=\"sectionId(row.index)\"\r\n            >\r\n              <!-- Points end-ward when shut, down when open. `--open` wins over the RTL\r\n                   flip below because a downward chevron has no direction to mirror. -->\r\n              <svg\r\n                class=\"ah__sec-chev\"\r\n                [class.ah__sec-chev--open]=\"row.expanded\"\r\n                width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n              >\r\n                <polyline points=\"9 6 15 12 9 18\" />\r\n              </svg>\r\n              <span class=\"ah__sec-title\">{{ titleKey | translate }}</span>\r\n              <span class=\"ah__sec-count\">{{ row.section.modules.length }}</span>\r\n              @if (row.hintKey; as hint) {\r\n                <span class=\"ah__sec-hint\">{{ hint | translate }}</span>\r\n              }\r\n            </button>\r\n          } @else {\r\n            <h2 class=\"ah__sec-title ah__sec-title--static\">{{ titleKey | translate }}</h2>\r\n          }\r\n        }\r\n\r\n        @if (row.expanded) {\r\n          <div class=\"ah__grid\" [class.ah__grid--compact]=\"row.layout === 'compact'\" [id]=\"sectionId(row.index)\">\r\n            @for (mod of row.section.modules; track mod.key) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"ah__card\"\r\n                [class.ah__card--compact]=\"row.layout === 'compact'\"\r\n                [disabled]=\"mod.disabled\"\r\n                (click)=\"select(mod)\"\r\n              >\r\n                <span class=\"ah__card-ico\">\r\n                  @if (iconFor(mod.key); as tpl) {\r\n                    <ng-container *ngTemplateOutlet=\"tpl\" />\r\n                  } @else if (mod.iconClass) {\r\n                    <i [class]=\"mod.iconClass\" aria-hidden=\"true\"></i>\r\n                  }\r\n                </span>\r\n\r\n                @if (row.layout === 'compact') {\r\n                  <span class=\"ah__card-main\">\r\n                    <span class=\"ah__card-title\">{{ mod.labelKey | translate }}</span>\r\n                    @if (mod.descKey; as descKey) {\r\n                      <span class=\"ah__card-desc\">{{ descKey | translate }}</span>\r\n                    }\r\n                  </span>\r\n                  <svg\r\n                    class=\"ah__card-arrow\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                    stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\" aria-hidden=\"true\"\r\n                  >\r\n                    <polyline points=\"9 6 15 12 9 18\" />\r\n                  </svg>\r\n                } @else {\r\n                  <!-- No \"Open \u203A\" affordance row \u2014 the design's module card (MainContent.dc.html)\r\n                       ends at the description; the whole card is the click target and hover carries\r\n                       the affordance. Removed at the 2026-08-17 fidelity pass. -->\r\n                  <span class=\"ah__card-title ah__card-title--feature\">{{ mod.labelKey | translate }}</span>\r\n                  @if (mod.descKey; as descKey) {\r\n                    <span class=\"ah__card-desc ah__card-desc--feature\">{{ descKey | translate }}</span>\r\n                  }\r\n                }\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </main>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column;min-height:100%;container-type:inline-size}.ah{display:flex;flex-direction:column;flex:1;min-height:100%}.ah__util{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-6)}:host-context(.window-content) .ah__brand{display:none}:host-context(.window-content) .ah__util{justify-content:flex-end}:host-context(.window-content) .ah__util:not(:has(>:not(.ah__brand))){display:none}.ah__brand{display:inline-flex;align-items:center;gap:var(--sp-2);padding:0;border:0;background:none;color:var(--ink);font-family:inherit;cursor:pointer}.ah__brand:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__brand-name{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__main{flex:1;inline-size:100%;max-inline-size:1120px;margin-inline:auto;padding:56px 40px;display:flex;flex-direction:column;justify-content:center;gap:44px}.ah__hero{max-inline-size:640px}.ah__title{margin:0 0 var(--sp-3);font-size:44px;font-weight:var(--fw-semibold);letter-spacing:-.03em;text-wrap:balance;background:linear-gradient(180deg,var(--ink),var(--ink-2));-webkit-background-clip:text;background-clip:text;color:transparent}.ah__sub{margin:0;max-inline-size:560px;font-size:var(--text-lg);line-height:1.55;color:var(--ink-3);text-wrap:pretty}.ah__sec{display:flex;flex-direction:column;gap:var(--sp-4)}.ah__sec--secondary{padding-block-start:28px;border-block-start:1px solid var(--w08)}.ah__sec-hd{display:flex;align-items:center;gap:var(--sp-3);inline-size:100%;padding:0;background:none;border:0;cursor:pointer;font-family:inherit;color:var(--ink);text-align:start}.ah__sec-hd:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.ah__sec-chev{flex-shrink:0;color:var(--ink-3);transition:transform var(--t-overlay)}.ah__sec-title{font-size:var(--text-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.ah__sec-title--static{margin:0;color:var(--ink-3);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase}.ah__sec-count{display:inline-grid;place-items:center;min-inline-size:22px;block-size:20px;padding-inline:6px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);font-size:var(--text-2xs);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;color:var(--ink-3)}.ah__sec-hint{margin-inline-start:auto;font-size:var(--text-xs);color:var(--ink-3)}.ah__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.ah__card{display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;text-align:start;padding:20px;background-image:linear-gradient(160deg,var(--w055),var(--w02));border:1px solid var(--w09);border-radius:20px;color:inherit;font-family:inherit;cursor:pointer;animation:appTileIn .3s var(--nova-ease-micro) both}.ah__card:nth-child(1){animation-delay:0ms}.ah__card:nth-child(2){animation-delay:20ms}.ah__card:nth-child(3){animation-delay:40ms}.ah__card:nth-child(4){animation-delay:60ms}.ah__card:nth-child(5){animation-delay:80ms}.ah__card:nth-child(6){animation-delay:.1s}.ah__card:nth-child(7){animation-delay:.12s}.ah__card:nth-child(8){animation-delay:.14s}.ah__card:nth-child(9){animation-delay:.16s}.ah__card:nth-child(10){animation-delay:.18s}.ah__card:nth-child(11){animation-delay:.2s}.ah__card:nth-child(12){animation-delay:.22s}.ah__card:nth-child(n+13){animation-delay:.22s}.ah__card{transition:transform var(--t-overlay),box-shadow var(--t-overlay),border-color var(--t-state),background-image var(--t-state)}.ah__card:hover:not(:disabled){transform:translateY(-3px);border-color:color-mix(in oklab,var(--accent) 50%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent);box-shadow:0 20px 46px color-mix(in oklab,var(--accent) 16%,transparent),var(--shadow-filter)}.ah__card:focus-visible{outline:0;border-color:color-mix(in oklab,var(--accent) 50%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent);box-shadow:0 0 0 3px var(--accent-soft),0 20px 46px color-mix(in oklab,var(--accent) 16%,transparent),var(--shadow-filter)}.ah__card:disabled{cursor:default;opacity:.5}.ah__card-ico{display:grid;place-items:center;inline-size:42px;block-size:42px;margin-block-end:16px;border-radius:13px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 50%,transparent),color-mix(in srgb,var(--sys-teal) 22%,transparent));box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 1px 0 var(--edge-highlight);border:0;color:var(--on-accent);font-size:var(--icon-lg)}.ah__card--compact:hover:not(:disabled) .ah__card-ico,.ah__card--compact:focus-visible .ah__card-ico{background:linear-gradient(135deg,var(--accent),var(--sys-teal));box-shadow:inset 0 1px 0 var(--edge-highlight);color:var(--on-accent)}.ah__card-title{font-size:var(--text-sm);font-weight:var(--fw-semibold);letter-spacing:-.01em;color:var(--ink)}.ah__card-title--feature{margin-block-end:5px;font-size:16.5px;line-height:1.25;letter-spacing:-.005em}.ah__card-desc{font-size:var(--text-xs);line-height:1.45;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ah__card-desc--feature{margin-block-end:0;font-size:13px;line-height:1.45;text-wrap:pretty;overflow:visible;white-space:normal}.ah__card-arrow{flex-shrink:0;transition:color var(--t-overlay),transform var(--t-overlay)}.ah__card--compact{flex-direction:row;align-items:center;gap:var(--sp-3);padding:14px 16px;background-color:var(--bg);background-image:linear-gradient(160deg,var(--w035),var(--w035));border-radius:16px;border-color:var(--w08)}.ah__card--compact:hover:not(:disabled),.ah__card--compact:focus-visible{border-color:color-mix(in oklab,var(--accent) 40%,transparent);background-image:linear-gradient(160deg,var(--tint-hover),transparent)}.ah__card--compact .ah__card-ico{inline-size:32px;block-size:32px;margin-block-end:0;flex-shrink:0;border-radius:10px;font-size:var(--icon-md);background:var(--bg-3);box-shadow:none;color:var(--ink)}.ah__card-main{display:flex;flex-direction:column;gap:2px;flex:1;min-inline-size:0}.ah__card--compact .ah__card-arrow{color:var(--ink-4)}.ah__card--compact:hover:not(:disabled) .ah__card-arrow{color:var(--accent);transform:translate(2px)}:host-context([dir=rtl]) .ah__card-arrow{transform:scaleX(-1)}:host-context([dir=rtl]) .ah__sec-chev:not(.ah__sec-chev--open){transform:scaleX(-1)}:host-context([dir=rtl]) .ah__card--compact:hover:not(:disabled) .ah__card-arrow{transform:scaleX(-1) translate(2px)}.ah__sec-chev--open{transform:rotate(90deg)}@container (width <= 900px){.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@media(width<=900px){.ah__main{padding:40px 24px;gap:36px}.ah__title{font-size:36px}.ah__util{padding:var(--sp-3) var(--sp-5)}}@container (width <= 560px){.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}@media(width<=560px){.ah__title{font-size:30px}.ah__sub{font-size:var(--text-sm)}.ah__sec-hint{display:none}}\n"] }]
         }], propDecorators: { brandLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabelKey", required: false }] }], titleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleKey", required: false }] }], subtitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitleKey", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], modulesLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "modulesLabelKey", required: false }] }], moduleSelected: [{ type: i0.Output, args: ["moduleSelected"] }], brandSelected: [{ type: i0.Output, args: ["brandSelected"] }], icons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FlyModuleIconDirective), { isSignal: true }] }] } });
 
 /**
@@ -22926,7 +23202,7 @@ class FlyTabsComponent {
       }
     </div>
     <ng-content />
-  `, isInline: true, styles: [":host{display:block}.tb{display:flex;gap:0;min-inline-size:0;border-block-end:1px solid var(--line)}.tb__tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 10px;background:transparent;border:0;border-block-end:2px solid transparent;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--ink-3);cursor:pointer;font-family:inherit;margin-block-end:-1px;white-space:nowrap;transition:color var(--t-state),border-color var(--t-state)}.tb__tab:hover{color:var(--ink)}.tb__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.tb__tab.tb__tab--active{color:var(--ink);border-block-end-color:var(--accent);font-weight:var(--fw-semibold)}.tb__count{font-family:var(--font-mono);font-size:10.5px;padding:1px 5px;background:var(--bg-3);border-radius:4px;color:var(--ink-4);font-variant-numeric:tabular-nums}.tb__tab--active .tb__count{color:var(--ink-3)}:host([data-variant=segmented]) .tb{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:var(--w07);border:1px solid var(--w08);border-block-end:1px solid var(--w08)}:host([data-variant=segmented]) .tb__tab{min-block-size:28px;padding:0 13px;margin-block-end:0;border-radius:99px;border-block-end:0;font-weight:var(--fw-medium);color:var(--w55)}:host([data-variant=segmented]) .tb__tab--active{background:var(--w14);box-shadow:var(--shadow-raised),inset 0 .5px 0 var(--w22);font-weight:var(--fw-semibold);color:var(--ink)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.tb{display:flex;gap:0;min-inline-size:0;border-block-end:1px solid var(--w1)}.tb__tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 10px;background:transparent;border:0;border-block-end:2px solid transparent;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--ink-3);cursor:pointer;font-family:inherit;margin-block-end:-1px;white-space:nowrap;transition:color var(--t-state),border-color var(--t-state)}.tb__tab:hover{color:var(--ink)}.tb__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.tb__tab.tb__tab--active{color:var(--ink);border-block-end-color:var(--accent);font-weight:var(--fw-semibold)}.tb__count{font-family:var(--font-mono);font-size:10.5px;padding:1px 5px;background:var(--bg-3);border-radius:4px;color:var(--ink-4);font-variant-numeric:tabular-nums}.tb__tab--active .tb__count{color:var(--ink-3)}:host([data-variant=segmented]) .tb{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:var(--w07);border:1px solid var(--w08);border-block-end:1px solid var(--w08)}:host([data-variant=segmented]) .tb__tab{min-block-size:28px;padding:0 13px;margin-block-end:0;border-radius:99px;border-block-end:0;font-weight:var(--fw-medium);color:var(--w55)}:host([data-variant=segmented]) .tb__tab--active{background:var(--w14);box-shadow:var(--shadow-raised),inset 0 .5px 0 var(--w22);font-weight:var(--fw-semibold);color:var(--ink)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyTabsComponent, decorators: [{
             type: Component,
@@ -22961,7 +23237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
       }
     </div>
     <ng-content />
-  `, styles: [":host{display:block}.tb{display:flex;gap:0;min-inline-size:0;border-block-end:1px solid var(--line)}.tb__tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 10px;background:transparent;border:0;border-block-end:2px solid transparent;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--ink-3);cursor:pointer;font-family:inherit;margin-block-end:-1px;white-space:nowrap;transition:color var(--t-state),border-color var(--t-state)}.tb__tab:hover{color:var(--ink)}.tb__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.tb__tab.tb__tab--active{color:var(--ink);border-block-end-color:var(--accent);font-weight:var(--fw-semibold)}.tb__count{font-family:var(--font-mono);font-size:10.5px;padding:1px 5px;background:var(--bg-3);border-radius:4px;color:var(--ink-4);font-variant-numeric:tabular-nums}.tb__tab--active .tb__count{color:var(--ink-3)}:host([data-variant=segmented]) .tb{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:var(--w07);border:1px solid var(--w08);border-block-end:1px solid var(--w08)}:host([data-variant=segmented]) .tb__tab{min-block-size:28px;padding:0 13px;margin-block-end:0;border-radius:99px;border-block-end:0;font-weight:var(--fw-medium);color:var(--w55)}:host([data-variant=segmented]) .tb__tab--active{background:var(--w14);box-shadow:var(--shadow-raised),inset 0 .5px 0 var(--w22);font-weight:var(--fw-semibold);color:var(--ink)}\n"] }]
+  `, styles: [":host{display:block}.tb{display:flex;gap:0;min-inline-size:0;border-block-end:1px solid var(--w1)}.tb__tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 10px;background:transparent;border:0;border-block-end:2px solid transparent;font-size:var(--text-sm);font-weight:var(--fw-medium);color:var(--ink-3);cursor:pointer;font-family:inherit;margin-block-end:-1px;white-space:nowrap;transition:color var(--t-state),border-color var(--t-state)}.tb__tab:hover{color:var(--ink)}.tb__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;outline-offset:-2px}.tb__tab.tb__tab--active{color:var(--ink);border-block-end-color:var(--accent);font-weight:var(--fw-semibold)}.tb__count{font-family:var(--font-mono);font-size:10.5px;padding:1px 5px;background:var(--bg-3);border-radius:4px;color:var(--ink-4);font-variant-numeric:tabular-nums}.tb__tab--active .tb__count{color:var(--ink-3)}:host([data-variant=segmented]) .tb{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:var(--w07);border:1px solid var(--w08);border-block-end:1px solid var(--w08)}:host([data-variant=segmented]) .tb__tab{min-block-size:28px;padding:0 13px;margin-block-end:0;border-radius:99px;border-block-end:0;font-weight:var(--fw-medium);color:var(--w55)}:host([data-variant=segmented]) .tb__tab--active{background:var(--w14);box-shadow:var(--shadow-raised),inset 0 .5px 0 var(--w22);font-weight:var(--fw-semibold);color:var(--ink)}\n"] }]
         }], propDecorators: { tablist: [{ type: i0.ViewChild, args: ['tablist', { isSignal: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], ariaLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelKey", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabItems: [{ type: i0.ContentChildren, args: [forwardRef(() => FlyTabComponent), { isSignal: true }] }] } });
 /**
  * One tab of a `fly-tabs` group: declares the tab button (id, label, optional
@@ -24597,7 +24873,7 @@ class ToastHostComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".ts{position:fixed;inset-inline-end:20px;inset-block-end:20px;z-index:var(--z-toast);display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none;max-width:calc(100vw - 40px);width:min(400px,100vw - 40px)}.ts__t{pointer-events:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding-block:11px;padding-inline:13px 12px;display:flex;align-items:flex-start;gap:11px;box-shadow:var(--shadow-card),var(--shadow-toast);animation:ts-in .28s cubic-bezier(.32,.72,0,1);position:relative}.ts__t--leave{animation:ts-out .22s ease forwards}@keyframes ts-in{0%{opacity:0;transform:translate(16px) translateY(4px)}to{opacity:1;transform:none}}@keyframes ts-out{to{opacity:0;transform:translate(20px) scale(.97)}}:host-context(.rtl) .ts__t,:host-context([dir=rtl]) .ts__t{animation-name:ts-in-rtl}:host-context(.rtl) .ts__t--leave,:host-context([dir=rtl]) .ts__t--leave{animation-name:ts-out-rtl}@keyframes ts-in-rtl{0%{opacity:0;transform:translate(-16px) translateY(4px)}to{opacity:1;transform:none}}@keyframes ts-out-rtl{to{opacity:0;transform:translate(-20px) scale(.97)}}.ts__t--success{border-inline-start:3px solid var(--success)}.ts__t--warn{border-inline-start:3px solid var(--warning)}.ts__t--danger{border-inline-start:3px solid var(--danger)}.ts__t--neutral{border-inline-start:3px solid var(--ink-3)}.ts__icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;margin-block-start:1px}.ts__icon--success{background:var(--success-bg);color:var(--success)}.ts__icon--warn{background:var(--warning-bg);color:var(--warning-fg)}.ts__icon--danger{background:var(--danger-bg);color:var(--danger)}.ts__icon--neutral{background:var(--bg-3);color:var(--ink-2)}.ts__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-inline-end:4px}.ts__title{font-size:13px;font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:-.005em;line-height:1.35}.ts__msg{font-size:var(--text-sm);color:var(--ink-2);line-height:1.45;word-break:break-word}.ts__action{background:transparent;border:1px solid var(--line-2);color:var(--ink);font-size:var(--text-2xs);font-weight:var(--fw-medium);padding:4px 9px;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;font-family:inherit;transition:background var(--t-state),border-color var(--t-state)}.ts__action:hover{background:var(--bg-hover);border-color:var(--ink-4)}.ts__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:16px;line-height:1;display:grid;place-items:center;flex-shrink:0;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.ts__close:hover{color:var(--ink);background:var(--bg-hover)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".ts{position:fixed;inset-inline-end:20px;inset-block-end:20px;z-index:var(--z-toast);display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none;max-width:calc(100vw - 40px);width:min(400px,100vw - 40px)}.ts__t{pointer-events:auto;background:var(--surface-overlay, var(--bg-2));border:1px solid var(--line);border-radius:var(--r-md);padding-block:11px;padding-inline:13px 12px;display:flex;align-items:flex-start;gap:11px;box-shadow:var(--shadow-card),var(--shadow-toast);animation:ts-in .28s cubic-bezier(.32,.72,0,1);position:relative}.ts__t--leave{animation:ts-out .22s ease forwards}@keyframes ts-in{0%{opacity:0;transform:translate(16px) translateY(4px)}to{opacity:1;transform:none}}@keyframes ts-out{to{opacity:0;transform:translate(20px) scale(.97)}}:host-context(.rtl) .ts__t,:host-context([dir=rtl]) .ts__t{animation-name:ts-in-rtl}:host-context(.rtl) .ts__t--leave,:host-context([dir=rtl]) .ts__t--leave{animation-name:ts-out-rtl}@keyframes ts-in-rtl{0%{opacity:0;transform:translate(-16px) translateY(4px)}to{opacity:1;transform:none}}@keyframes ts-out-rtl{to{opacity:0;transform:translate(-20px) scale(.97)}}.ts__t--success{border-inline-start:3px solid var(--success)}.ts__t--warn{border-inline-start:3px solid var(--warning)}.ts__t--danger{border-inline-start:3px solid var(--danger)}.ts__t--neutral{border-inline-start:3px solid var(--ink-3)}.ts__icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;margin-block-start:1px}.ts__icon--success{background:var(--success-bg);color:var(--success)}.ts__icon--warn{background:var(--warning-bg);color:var(--warning-fg)}.ts__icon--danger{background:var(--danger-bg);color:var(--danger)}.ts__icon--neutral{background:var(--bg-3);color:var(--ink-2)}.ts__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-inline-end:4px}.ts__title{font-size:13px;font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:-.005em;line-height:1.35}.ts__msg{font-size:var(--text-sm);color:var(--ink-2);line-height:1.45;word-break:break-word}.ts__action{background:transparent;border:1px solid var(--line-2);color:var(--ink);font-size:var(--text-2xs);font-weight:var(--fw-medium);padding:4px 9px;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;font-family:inherit;transition:background var(--t-state),border-color var(--t-state)}.ts__action:hover{background:var(--bg-hover);border-color:var(--ink-4)}.ts__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:16px;line-height:1;display:grid;place-items:center;flex-shrink:0;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.ts__close:hover{color:var(--ink);background:var(--bg-hover)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ToastHostComponent, decorators: [{
             type: Component,
@@ -24648,7 +24924,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         </div>
       }
     </div>
-  `, styles: [".ts{position:fixed;inset-inline-end:20px;inset-block-end:20px;z-index:var(--z-toast);display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none;max-width:calc(100vw - 40px);width:min(400px,100vw - 40px)}.ts__t{pointer-events:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);padding-block:11px;padding-inline:13px 12px;display:flex;align-items:flex-start;gap:11px;box-shadow:var(--shadow-card),var(--shadow-toast);animation:ts-in .28s cubic-bezier(.32,.72,0,1);position:relative}.ts__t--leave{animation:ts-out .22s ease forwards}@keyframes ts-in{0%{opacity:0;transform:translate(16px) translateY(4px)}to{opacity:1;transform:none}}@keyframes ts-out{to{opacity:0;transform:translate(20px) scale(.97)}}:host-context(.rtl) .ts__t,:host-context([dir=rtl]) .ts__t{animation-name:ts-in-rtl}:host-context(.rtl) .ts__t--leave,:host-context([dir=rtl]) .ts__t--leave{animation-name:ts-out-rtl}@keyframes ts-in-rtl{0%{opacity:0;transform:translate(-16px) translateY(4px)}to{opacity:1;transform:none}}@keyframes ts-out-rtl{to{opacity:0;transform:translate(-20px) scale(.97)}}.ts__t--success{border-inline-start:3px solid var(--success)}.ts__t--warn{border-inline-start:3px solid var(--warning)}.ts__t--danger{border-inline-start:3px solid var(--danger)}.ts__t--neutral{border-inline-start:3px solid var(--ink-3)}.ts__icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;margin-block-start:1px}.ts__icon--success{background:var(--success-bg);color:var(--success)}.ts__icon--warn{background:var(--warning-bg);color:var(--warning-fg)}.ts__icon--danger{background:var(--danger-bg);color:var(--danger)}.ts__icon--neutral{background:var(--bg-3);color:var(--ink-2)}.ts__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-inline-end:4px}.ts__title{font-size:13px;font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:-.005em;line-height:1.35}.ts__msg{font-size:var(--text-sm);color:var(--ink-2);line-height:1.45;word-break:break-word}.ts__action{background:transparent;border:1px solid var(--line-2);color:var(--ink);font-size:var(--text-2xs);font-weight:var(--fw-medium);padding:4px 9px;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;font-family:inherit;transition:background var(--t-state),border-color var(--t-state)}.ts__action:hover{background:var(--bg-hover);border-color:var(--ink-4)}.ts__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:16px;line-height:1;display:grid;place-items:center;flex-shrink:0;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.ts__close:hover{color:var(--ink);background:var(--bg-hover)}\n"] }]
+  `, styles: [".ts{position:fixed;inset-inline-end:20px;inset-block-end:20px;z-index:var(--z-toast);display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none;max-width:calc(100vw - 40px);width:min(400px,100vw - 40px)}.ts__t{pointer-events:auto;background:var(--surface-overlay, var(--bg-2));border:1px solid var(--line);border-radius:var(--r-md);padding-block:11px;padding-inline:13px 12px;display:flex;align-items:flex-start;gap:11px;box-shadow:var(--shadow-card),var(--shadow-toast);animation:ts-in .28s cubic-bezier(.32,.72,0,1);position:relative}.ts__t--leave{animation:ts-out .22s ease forwards}@keyframes ts-in{0%{opacity:0;transform:translate(16px) translateY(4px)}to{opacity:1;transform:none}}@keyframes ts-out{to{opacity:0;transform:translate(20px) scale(.97)}}:host-context(.rtl) .ts__t,:host-context([dir=rtl]) .ts__t{animation-name:ts-in-rtl}:host-context(.rtl) .ts__t--leave,:host-context([dir=rtl]) .ts__t--leave{animation-name:ts-out-rtl}@keyframes ts-in-rtl{0%{opacity:0;transform:translate(-16px) translateY(4px)}to{opacity:1;transform:none}}@keyframes ts-out-rtl{to{opacity:0;transform:translate(-20px) scale(.97)}}.ts__t--success{border-inline-start:3px solid var(--success)}.ts__t--warn{border-inline-start:3px solid var(--warning)}.ts__t--danger{border-inline-start:3px solid var(--danger)}.ts__t--neutral{border-inline-start:3px solid var(--ink-3)}.ts__icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;margin-block-start:1px}.ts__icon--success{background:var(--success-bg);color:var(--success)}.ts__icon--warn{background:var(--warning-bg);color:var(--warning-fg)}.ts__icon--danger{background:var(--danger-bg);color:var(--danger)}.ts__icon--neutral{background:var(--bg-3);color:var(--ink-2)}.ts__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding-inline-end:4px}.ts__title{font-size:13px;font-weight:var(--fw-semibold);color:var(--ink);letter-spacing:-.005em;line-height:1.35}.ts__msg{font-size:var(--text-sm);color:var(--ink-2);line-height:1.45;word-break:break-word}.ts__action{background:transparent;border:1px solid var(--line-2);color:var(--ink);font-size:var(--text-2xs);font-weight:var(--fw-medium);padding:4px 9px;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;font-family:inherit;transition:background var(--t-state),border-color var(--t-state)}.ts__action:hover{background:var(--bg-hover);border-color:var(--ink-4)}.ts__close{width:24px;height:24px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;border-radius:var(--r-sm);font-size:16px;line-height:1;display:grid;place-items:center;flex-shrink:0;font-family:inherit;transition:background var(--t-state),color var(--t-state)}.ts__close:hover{color:var(--ink);background:var(--bg-hover)}\n"] }]
         }], ctorParameters: () => [] });
 
 // Barrel for the app-surface component library — the business-app CRUD/list/form
@@ -25142,6 +25418,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  *         does not yet ship a magic-bar search-field renderer, so this ships as a pure
  *         helper for that future consumer rather than as UI. See
  *         `.workflow/plans/ux-refresh/notes/S1.4-magic-actions.md`.
+ * v2.8.0: `FlyStandaloneMagicActionsComponent` (`<fly-standalone-magic-actions appId="…">`) —
+ *         inline renderer of an app's OWN magic-bar contribution for standalone mode, closing
+ *         the gap that made every External App screen keep a bespoke `[page-header-actions]`
+ *         button row duplicating the actions it already publishes: drop this in that slot and
+ *         the contribution is authored once, rendered by the shell's pill when embedded and by
+ *         this cluster when standalone (it renders NOTHING embedded — it reads
+ *         `FlyRemoteRouter.isEmbedded` itself so consumers cannot forget the guard). Renders
+ *         `groups` + `primary` only; search stays the screen's in-page field, and
+ *         `overflow`/`quickCommandIds` are shell-chrome concerns that do not exist standalone.
+ *         Backed by new `MagicBarRegistry.resolve(owner)` — the reactive per-owner sibling of
+ *         `viewFor` (same slot fallback + ownership assertion as `active()`, but read from the
+ *         signal mirror so a `computed()` tracks it); needed because `active()` is arbitrated
+ *         by the shell's `setActiveOwner`, which never fires standalone.
  * See docs/ExternalAppsGuide/03-frontend-app.md.
  */
 // ─── Federation singleton self-check (side effect; must run first) ───────────
@@ -25163,5 +25452,5 @@ const AUDIENCE_ERROR_CODES = {
  * Generated bundle index. Do not edit.
  */
 
-export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, BilingualFieldComponent, CRON_MODES, CRON_WEEKDAYS, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DS_BASELINE_LOCALES, DashboardKpiComponent, DialogResult, ENTITY_LINK_LAUNCHER, EntityLookupComponent, FLYOS_LAUNCH_EVENT, FLYOS_LAUNCH_REQUEST_EVENT, FLYOS_REMOTE_ROUTE_EVENT, FLY_ACCENT_PROPERTY, FLY_ADMIN_ROLES, FLY_CHUNK_RELOAD_FLAG, FLY_COMPACT_THRESHOLD, FLY_COUNTRIES, FLY_CURRENCIES_BRIEF_ENDPOINT, FLY_EMOJI_BY_ID, FLY_EMOJI_CATEGORIES, FLY_EMOJI_CATEGORY_BY_ID, FLY_EMOJI_DEFAULT_CATEGORIES, FLY_EMOJI_PACK, FLY_EMOJI_PACK_MISSING_MESSAGE, FLY_EMOJI_PREVIEW_COUNT, FLY_EMPTY_VALUE, FLY_LOCALE_CATALOG, FLY_MAGIC_BAR_EVENT, FLY_MAGIC_BAR_ICONS, FLY_MAGIC_BAR_STORE_KEY, FLY_NF_CACHE_HEAL_FLAG, FLY_RELOAD_DEBOUNCE_MS, FLY_RELOAD_REARM_MS, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_SCAN_PENDING_DEFAULT_DELAY_MS, FLY_SCAN_PENDING_MAX_RETRIES, FLY_SCAN_PENDING_STATUS, FLY_SEARCH_DEBOUNCE_MS, FLY_SKIN_TONES, FLY_STANDALONE_AUTH_CONFIG, FLY_THEME_MODE_IDS, FLY_VIEWPORT_IS_MOBILE, FLY_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppHomeComponent, FlyAppTopbarComponent, FlyAuthLiveRefresh, FlyBadgeWallComponent, FlyBlockUiComponent, FlyBreadcrumbComponent, FlyButtonComponent, FlyBytesPipe, FlyCaptchaComponent, FlyCardActionsComponent, FlyCardBodyComponent, FlyCardComponent, FlyCardFooterComponent, FlyCardGridComponent, FlyCardMediaComponent, FlyCardMetaComponent, FlyCardStatusComponent, FlyCardTitleComponent, FlyCellDirective, FlyCheckboxComponent, FlyChipComponent, FlyChunkReloadErrorHandler, FlyClickOutsideDirective, FlyCollapsibleComponent, FlyCommentThreadComponent, FlyCompactNumberPipe, FlyConfirmDialogComponent, FlyControlDirective, FlyCronBuilderComponent, FlyCurrencyCatalogService, FlyCurrencySelectorComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, FlyDeepLinkPrefetchService, FlyDetailCardComponent, FlyDetailShellComponent, FlyDrawerComponent, FlyDurationPipe, FlyDynamicFormComponent, FlyEmojiPickerComponent, FlyFieldComponent, FlyFileDownloadService, FlyFileUploadComponent, FlyFilterPanelComponent, FlyFormBannerComponent, FlyFormFooterComponent, FlyFormGridComponent, FlyFormSectionComponent, FlyFullNumberPipe, FlyGanttComponent, FlyHubClient, FlyIconButtonComponent, FlyIfAdminDirective, FlyIfRoleDirective, FlyImageUploadComponent, FlyLeaderboardComponent, FlyMagicActionsComponent, FlyMetaListComponent, FlyModalComponent, FlyModerationQueueComponent, FlyModuleIconDirective, FlyMoneyPipe, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyUserDirectoryService, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, GANTT_ZOOMS, I18nService, LAUNCH_CONTEXT, MAGIC_BAR_SEARCH_WIDTH_DEFAULT, MAGIC_BAR_SEARCH_WIDTH_MAX, MAGIC_BAR_SEARCH_WIDTH_MIN, MagicBarRegistry, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, NOVA_PRIORITY_TONE, NOVA_STATUS_TONE, NOVA_TONE_FALLBACK, OverlayStack, PRESENCE_COLORS, PageHeaderComponent, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, STATE_DEFAULT_ICONS, STATE_DEFAULT_MESSAGE_KEYS, STEP_UP_CODE, STEP_UP_REAUTH_HANDLER, STEP_UP_RETURN_KEY, SUPPORTED_AGENT_PAYLOAD_VERSIONS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, StatusBadgeComponent, StepUpService, ToastHostComponent, TranslatePipe, WINDOW_DATA, WINDOW_HELP_HINT, WindowManagerService, applySkinTone, applySuggestion, ariaSort, buildCron, canConfirm, canGoNext, canGoPrev, captureFocus, clampMagicBarSearchWidth, clampPage, clampSliderValue, connectRemoteLaunch, enterActivatesNatively, filterGroup, filterSuggestions, findLocaleByDialect, findLocaleByPrefix, firstEnabledIndex, firstModuleIndex, flattenModules, flyAdminGuard, flyApiErrorMessage, flyCaptchaBase64Utf8, flyCaptchaBuildToken, flyCaptchaSha256Hex, flyCompactNumber, flyDebounced, flyDecimalNumber, flyDownloadBlob, flyDuration, flyEmojiFor, flyEmojiIsTonable, flyEmojiPackUrl, flyExportFileName, flyFirstEnabledIndex, flyFormatBytes, flyFormatDate, flyFormatDateTime, flyFormatMoney, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flyScanPendingDelayMs, flyScanRetry, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, flyToPage, flyUnwrap, flyUnwrapCurrencies, flyUnwrapLenient, hasAnyRoleIn, healNativeFederationCacheOnce, initialExpanded, isAccentColor, isChunkLoadError, isFlyAuthStorePopulated, isNativeFederationCacheError, isRtlLocale, isRtlLocaleEntry, isValidCron, isValidSingleField, loadRemoteStyles, magicBarOwnerKey, magicBarSearchText, matchFlyRoutePattern, nextEnabledIndex, nextModuleIndex, nextSegmentIndex, nextSort, normalizeFlyTheme, normalizeRoles, novaPriorityToneVar, novaStatusToneVar, overlayStack, parseCron, parseStepUpChallenge, parseTags, prefetchRemoteStyles, presenceColorFor, printConsoleSecurityWarning, provideFlyChunkReloadRecovery, provideFlyEmojiPack, provideFlyStandaloneAuth, reloadOnceForChunkError, requestAppLaunch, resolveActiveModule, resolveActiveSection, resolveActiveTab, resolveCellValue, resolveStateIcon, resolveStateMessageKey, restoreFocus, sameTags, sectionHintKey, sectionLayout, sliderTrackGradient, sparklinePath, sparklinePoints, stepUpInterceptor, stepUpReturnKey, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload, warnIfEmbeddedSessionMissing };
+export { AGENT_DRAG_MIME, AGENT_PAYLOAD_VERSION, APP_LOOKUP, AUDIENCE_ERROR_CODES, AUDIENCE_LIMITS, AUDIENCE_PRESETS, AUDIENCE_TERM_KINDS, AgentActionBus, AgentActionUnsupportedDispatchError, AgentCommandRegistry, AgentDropRegistry, AgentFlightAnimator, AgentLookupRegistry, AgentPayloadOversizeError, AudienceBuilderComponent, AuthService, BilingualFieldComponent, CRON_MODES, CRON_WEEKDAYS, ContextMenuComponent, DEFAULT_AGENT_PAYLOAD_LIMITS, DEFAULT_FLY_THEME_MODE, DS_BASELINE_LOCALES, DashboardKpiComponent, DialogResult, ENTITY_LINK_LAUNCHER, EntityLookupComponent, FLYOS_LAUNCH_EVENT, FLYOS_LAUNCH_REQUEST_EVENT, FLYOS_REMOTE_ROUTE_EVENT, FLY_ACCENT_PROPERTY, FLY_ADMIN_ROLES, FLY_CHUNK_RELOAD_FLAG, FLY_COMPACT_THRESHOLD, FLY_COUNTRIES, FLY_CURRENCIES_BRIEF_ENDPOINT, FLY_EMOJI_BY_ID, FLY_EMOJI_CATEGORIES, FLY_EMOJI_CATEGORY_BY_ID, FLY_EMOJI_DEFAULT_CATEGORIES, FLY_EMOJI_PACK, FLY_EMOJI_PACK_MISSING_MESSAGE, FLY_EMOJI_PREVIEW_COUNT, FLY_EMPTY_VALUE, FLY_LOCALE_CATALOG, FLY_MAGIC_BAR_EVENT, FLY_MAGIC_BAR_ICONS, FLY_MAGIC_BAR_STORE_KEY, FLY_NF_CACHE_HEAL_FLAG, FLY_RELOAD_DEBOUNCE_MS, FLY_RELOAD_REARM_MS, FLY_REMOTE_BASE_PATH, FLY_REMOTE_CONTEXT_EVENT, FLY_REMOTE_CONTEXT_STORE_KEY, FLY_REMOTE_ROUTES, FLY_SCAN_PENDING_DEFAULT_DELAY_MS, FLY_SCAN_PENDING_MAX_RETRIES, FLY_SCAN_PENDING_STATUS, FLY_SEARCH_DEBOUNCE_MS, FLY_SKIN_TONES, FLY_STANDALONE_AUTH_CONFIG, FLY_THEME_MODE_IDS, FLY_VIEWPORT_IS_MOBILE, FLY_WINDOW_HELP_HINT_EVENT, FLY_WINDOW_PAGE_TITLE_EVENT, FlyAchievementProgressComponent, FlyActionMenuComponent, FlyActionStackComponent, FlyAgentDraggableDirective, FlyAnimatedEmojiComponent, FlyAppHomeComponent, FlyAppTopbarComponent, FlyAppUnavailableComponent, FlyAuthLiveRefresh, FlyBadgeWallComponent, FlyBlockUiComponent, FlyBreadcrumbComponent, FlyButtonComponent, FlyBytesPipe, FlyCaptchaComponent, FlyCardActionsComponent, FlyCardBodyComponent, FlyCardComponent, FlyCardFooterComponent, FlyCardGridComponent, FlyCardMediaComponent, FlyCardMetaComponent, FlyCardStatusComponent, FlyCardTitleComponent, FlyCellDirective, FlyCheckboxComponent, FlyChipComponent, FlyChunkReloadErrorHandler, FlyClickOutsideDirective, FlyCollapsibleComponent, FlyCommentThreadComponent, FlyCompactNumberPipe, FlyConfirmDialogComponent, FlyControlDirective, FlyCronBuilderComponent, FlyCurrencyCatalogService, FlyCurrencySelectorComponent, FlyDataTableComponent, FlyDatePipe, FlyDateTimePipe, FlyDebouncer, FlyDecimalNumberPipe, FlyDeepLinkPrefetchService, FlyDetailCardComponent, FlyDetailShellComponent, FlyDrawerComponent, FlyDurationPipe, FlyDynamicFormComponent, FlyEmojiPickerComponent, FlyFieldComponent, FlyFileDownloadService, FlyFileUploadComponent, FlyFilterPanelComponent, FlyFormBannerComponent, FlyFormFooterComponent, FlyFormGridComponent, FlyFormSectionComponent, FlyFullNumberPipe, FlyGanttComponent, FlyHubClient, FlyIconButtonComponent, FlyIfAdminDirective, FlyIfRoleDirective, FlyImageUploadComponent, FlyLeaderboardComponent, FlyMagicActionsComponent, FlyMetaListComponent, FlyModalComponent, FlyModerationQueueComponent, FlyModuleIconDirective, FlyMoneyPipe, FlyPaginationComponent, FlyPeoplePickerComponent, FlyPointsTierComponent, FlyProgressComponent, FlyRelativeTimePipe, FlyRemoteContextService, FlyRemoteRouter, FlyRemoteRouterOutletComponent, FlySearchInputComponent, FlySectionHeaderComponent, FlySecureSrcDirective, FlySegmentedComponent, FlySelectComponent, FlySkeletonComponent, FlySliderComponent, FlySparklineComponent, FlySpinnerComponent, FlyStandaloneAuthCallbackComponent, FlyStandaloneAuthService, FlyStandaloneMagicActionsComponent, FlyStateMessageComponent, FlyDynamicFormComponent as FlySurveyFormComponent, FlyTabComponent, FlyTabsComponent, FlyTagsInputComponent, FlyThemeService, FlyTimePipe, FlyToastService, FlyToggleComponent, FlyTooltipDirective, FlyTreeNavComponent, FlyTypeaheadComponent, FlyUserDirectoryService, FlyWindowHelpService, FlyWindowTitleService, FlyosPendingLaunchesGlobalKey, FlyosShellHandlesLaunchRequestsGlobalKey, FlyosShellOwnsHistoryGlobalKey, GANTT_ZOOMS, I18nService, LAUNCH_CONTEXT, MAGIC_BAR_SEARCH_WIDTH_DEFAULT, MAGIC_BAR_SEARCH_WIDTH_MAX, MAGIC_BAR_SEARCH_WIDTH_MIN, MagicBarRegistry, MessageBoxButtons, MessageBoxComponent, MessageBoxIcon, MessageBoxService, MockAuthService, NOVA_PRIORITY_TONE, NOVA_STATUS_TONE, NOVA_TONE_FALLBACK, OverlayStack, PRESENCE_COLORS, PageHeaderComponent, RTL_LOCALE_SET, SHARE_ORG_CHART_SYSTEM_KEY_APPS, SHARE_ORG_CHART_SYSTEM_KEY_DEFAULT, SHARE_PANEL_DEFAULT_FILE_LEVELS, STATE_DEFAULT_ICONS, STATE_DEFAULT_MESSAGE_KEYS, STEP_UP_CODE, STEP_UP_REAUTH_HANDLER, STEP_UP_RETURN_KEY, SUPPORTED_AGENT_PAYLOAD_VERSIONS, SharePanelComponent, SourceAppResolver, StandaloneWindowManagerService, StatusBadgeComponent, StepUpService, ToastHostComponent, TranslatePipe, WINDOW_DATA, WINDOW_HELP_HINT, WindowManagerService, applySkinTone, applySuggestion, ariaSort, buildCron, canConfirm, canGoNext, canGoPrev, captureFocus, clampMagicBarSearchWidth, clampPage, clampSliderValue, connectRemoteLaunch, enterActivatesNatively, filterGroup, filterSuggestions, findLocaleByDialect, findLocaleByPrefix, firstEnabledIndex, firstModuleIndex, flattenModules, flyAdminGuard, flyApiErrorMessage, flyCaptchaBase64Utf8, flyCaptchaBuildToken, flyCaptchaSha256Hex, flyCompactNumber, flyDebounced, flyDecimalNumber, flyDownloadBlob, flyDuration, flyEmojiFor, flyEmojiIsTonable, flyEmojiPackUrl, flyExportFileName, flyFirstEnabledIndex, flyFormatBytes, flyFormatDate, flyFormatDateTime, flyFormatMoney, flyFormatTime, flyFullNumber, flyNextEnabledIndex, flyNextSegmentIndex, flyRelativeTime, flyResolveActiveTab, flyRoleGuard, flyScanPendingDelayMs, flyScanRetry, flySignedCompact, flySkinToneLabelKey, flyStandaloneAuthGuard, flyStandaloneAuthInterceptor, flyToDateOnly, flyToPage, flyUnwrap, flyUnwrapCurrencies, flyUnwrapLenient, hasAnyRoleIn, healNativeFederationCacheOnce, initialExpanded, isAccentColor, isChunkLoadError, isFlyAuthStorePopulated, isNativeFederationCacheError, isRtlLocale, isRtlLocaleEntry, isValidCron, isValidSingleField, loadRemoteStyles, magicBarOwnerKey, magicBarSearchText, matchFlyRoutePattern, nextEnabledIndex, nextModuleIndex, nextSegmentIndex, nextSort, normalizeFlyTheme, normalizeRoles, novaPriorityToneVar, novaStatusToneVar, overlayStack, parseCron, parseStepUpChallenge, parseTags, prefetchRemoteStyles, presenceColorFor, printConsoleSecurityWarning, provideFlyChunkReloadRecovery, provideFlyEmojiPack, provideFlyStandaloneAuth, reloadOnceForChunkError, requestAppLaunch, resolveActiveModule, resolveActiveSection, resolveActiveTab, resolveCellValue, resolveStateIcon, resolveStateMessageKey, restoreFocus, sameTags, sectionHintKey, sectionLayout, sliderTrackGradient, sparklinePath, sparklinePoints, stepUpInterceptor, stepUpReturnKey, trimAgentPayload, trimAgentString, unloadRemoteStyles, utf8ByteLength, validateAgentPayload, warnIfEmbeddedSessionMissing };
 //# sourceMappingURL=flyos-design-system.mjs.map