@3dsource/angular-unreal-module 0.0.170 → 0.0.172

package/fesm2022/3dsource-angular-unreal-module.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { input, output, ChangeDetectionStrategy, Component, InjectionToken, inject, DestroyRef, Injectable, signal, effect, untracked, computed, ElementRef, viewChild, afterNextRender, HostListener, SecurityContext, Pipe, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
-import { Subject, skip, share, merge, map, scan, timestamp, startWith, pairwise, concatMap, of, animationFrameScheduler, interval, Observable, timer, take, defer, switchMap, from, throwError, EMPTY, retry, timeout as timeout$1, repeat, BehaviorSubject, takeUntil as takeUntil$1, fromEvent, tap as tap$1, throttleTime, delay, concat, debounceTime, mergeMap, NEVER, ignoreElements, shareReplay, firstValueFrom, asyncScheduler, filter as filter$1, withLatestFrom as withLatestFrom$1, Subscription, bufferTime, combineLatestWith } from 'rxjs';
-import { createAction, props, createReducer, on, createFeature, Store, createSelector, provideState } from '@ngrx/store';
-import { whereNot, Falsy, Logger, clampf, lerp, getCanvasCached, getSnapshot, fitIntoRectangle, generateUuid, Truthy, tapLog, Semaphore, COLOR_CODES, where, KeyboardNumericCode, InvertedKeyMap, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB } from '@3dsource/utils';
-import { filter, map as map$1, distinctUntilChanged, takeWhile, takeUntil, catchError, tap, timeout, finalize, first, switchMap as switchMap$1, withLatestFrom, exhaustMap, debounceTime as debounceTime$1, take as take$1, startWith as startWith$1 } from 'rxjs/operators';
+import { input, output, ChangeDetectionStrategy, Component, InjectionToken, inject, DestroyRef, Injectable, signal, effect, untracked, computed, ElementRef, viewChild, afterNextRender, HostListener, TemplateRef, Directive, SecurityContext, Pipe, contentChild, makeEnvironmentProviders, provideEnvironmentInitializer } from '@angular/core';
+import { NgTemplateOutlet, NgOptimizedImage, JsonPipe } from '@angular/common';
+import { createAction, props, createReducer, on, createFeature, createSelector, Store, provideState } from '@ngrx/store';
 import { Actions, ofType, createEffect, provideEffects } from '@ngrx/effects';
+import { Subject, skip, share, timer, of, take, defer, switchMap, from, throwError, Observable, EMPTY, retry, merge, timeout as timeout$1, repeat, BehaviorSubject, interval, map as map$1, takeUntil as takeUntil$1, fromEvent, tap as tap$1, throttleTime, delay, concat, debounceTime, mergeMap, NEVER, ignoreElements, startWith, scan, timestamp, pairwise, concatMap, animationFrameScheduler, shareReplay, firstValueFrom, asyncScheduler, filter as filter$1, withLatestFrom as withLatestFrom$1, Subscription, bufferTime, combineLatestWith } from 'rxjs';
+import { whereNot, lerp, clampf, Falsy, generateUuid, Truthy, Logger, tapLog, Semaphore, COLOR_CODES, getCanvasCached, getSnapshot, fitIntoRectangle, where, KeyboardNumericCode, InvertedKeyMap, HEXtoRGB, RGBtoHSV, inverseLerp, HSVtoRGB, RGBtoHEX, fpIsASameAsB } from '@3dsource/utils';
+import { filter, takeUntil, catchError, tap, map, timeout, finalize, first, switchMap as switchMap$1, distinctUntilChanged, withLatestFrom, exhaustMap, takeWhile, debounceTime as debounceTime$1, take as take$1, startWith as startWith$1 } from 'rxjs/operators';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 import { HttpClient } from '@angular/common/http';
 import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { MetaBoxCommand, EPayloadVersion } from '@3dsource/types-unreal';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgOptimizedImage, JsonPipe } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 
 class UnrealButtonComponent {
@@ -34,14 +34,246 @@ class UnrealButtonComponent {
         event.preventDefault();
         this.clicked.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: UnrealButtonComponent, isStandalone: true, selector: "app-unreal-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  (click)=\"handleClick($event)\"\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [class.unreal-button--primary]=\"weight() === 'primary'\"\n  [class.unreal-button--lg]=\"size() === 'lg'\"\n  [class.unreal-button--full-width]=\"fullWidth()\"\n  [disabled]=\"isDisabled()\"\n  [type]=\"type()\"\n  class=\"unreal-button\"\n>\n  <span><ng-content></ng-content></span>\n</button>\n", styles: [".unreal-button{--unrealButtonHeight: 36px;--unrealButtonPaddings: 0 12px;--unrealButtonBorderRadius: 6px;--unrealButtonFontSize: var(--src-font-size-sm, 14px);--unrealButtonLineHeight: var(--src-font-line-sm, 20px);--unrealButtonWidth: auto;--unrealButtonBgColor: transparent;--unrealButtonBorderColor: var(--src-border-button-basic, #e5e7eb);--unrealButtonBorder: 1px solid var(--unrealButtonBorderColor);--unrealButtonFontColor: var(--src-text-ui-secondary-main, #111827);--unrealButtonFontWeight: var(--src-font-weight-medium, 500);--unrealButtonFocusRingSize: 4px;--unrealButtonFocusRingColor: var( --src-shadow-light, rgba(148, 163, 184, .16) );--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 1px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));position:relative;display:flex;justify-content:center;align-items:center;width:var(--unrealButtonWidth);height:var(--unrealButtonHeight);padding:var(--unrealButtonPaddings);font-weight:var(--unrealButtonFontWeight);font-size:var(--unrealButtonFontSize);font-style:normal;line-height:var(--unrealButtonLineHeight);text-align:center;color:var(--unrealButtonFontColor);letter-spacing:0;white-space:nowrap;border:none;background-color:var(--unrealButtonBgColor);border-radius:var(--unrealButtonBorderRadius);box-shadow:var(--unrealButtonBoxShadow);cursor:pointer}.unreal-button:after{content:\"\";position:absolute;inset:0;border-radius:var(--unrealButtonBorderRadius);border:var(--unrealButtonBorder)}.unreal-button>span{display:flex;justify-content:center;align-items:center;gap:var(--src-gap-md, 6px);width:auto;font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit}.unreal-button:disabled{--unrealButtonBgColor: var( --src-ui-accent-disabled, rgba(148, 163, 184, .24) );--unrealButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);--unrealButtonBoxShadow: none;--unrealButtonBorder: none;--unrealButtonBorderColor: transparent;cursor:default;pointer-events:none}.unreal-button:focus-visible{--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);outline:none;box-shadow:0 0 0 var(--unrealButtonFocusRingSize) var(--unrealButtonFocusRingColor)}@media(pointer:fine){.unreal-button:hover{--unrealButtonBgColor: var( --src-ui-secondary-default-hover, rgba(148, 163, 184, .08) );--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af)}}.unreal-button--primary{--unrealButtonBgColor: var(--src-ui-accent-default, #017bff);--unrealButtonBorder: none;--unrealButtonFontColor: var(--src-text-ui-primary-main, #fff);--unrealButtonFocusRingColor: var( --src-shadow-accent-light, rgba(1, 123, 255, .16) )}@media(pointer:fine){.unreal-button--primary:hover{--unrealButtonBgColor: var(--src-ui-accent-default-hover, #016fe6);--unrealButtonFontColor: var(--src-text-ui-primary-main, #fff)}}.unreal-button--lg{--unrealButtonHeight: 44px;--unrealButtonPaddings: 0 16px;--unrealButtonBorderRadius: 8px;--unrealButtonFontSize: var(--src-font-size-base, 16px);--unrealButtonLineHeight: var(--src-font-line-base, 24px);--unrealButtonFocusRingSize: 6px;--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 2px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16))}.unreal-button--lg>span{gap:var(--src-gap-md, 8px)}.unreal-button--full-width{--unrealButtonWidth: 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: UnrealButtonComponent, isStandalone: true, selector: "app-unreal-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n  (click)=\"handleClick($event)\"\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [class.unreal-button--primary]=\"weight() === 'primary'\"\n  [class.unreal-button--lg]=\"size() === 'lg'\"\n  [class.unreal-button--full-width]=\"fullWidth()\"\n  [disabled]=\"isDisabled()\"\n  [type]=\"type()\"\n  class=\"unreal-button\"\n>\n  <span><ng-content></ng-content></span>\n</button>\n", styles: [".unreal-button{--unrealButtonHeight: 36px;--unrealButtonPaddings: 0 12px;--unrealButtonBorderRadius: 6px;--unrealButtonFontSize: var(--src-font-size-sm, 14px);--unrealButtonLineHeight: var(--src-font-line-sm, 20px);--unrealButtonWidth: auto;--unrealButtonBgColor: transparent;--unrealButtonBorderColor: var(--src-border-button-basic, #e5e7eb);--unrealButtonBorder: 1px solid var(--unrealButtonBorderColor);--unrealButtonFontColor: var(--src-text-ui-secondary-main, #111827);--unrealButtonFontWeight: var(--src-font-weight-medium, 500);--unrealButtonFocusRingSize: 4px;--unrealButtonFocusRingColor: var( --src-shadow-light, rgba(148, 163, 184, .16) );--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 1px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));position:relative;display:flex;justify-content:center;align-items:center;width:var(--unrealButtonWidth);height:var(--unrealButtonHeight);padding:var(--unrealButtonPaddings);font-weight:var(--unrealButtonFontWeight);font-size:var(--unrealButtonFontSize);font-style:normal;line-height:var(--unrealButtonLineHeight);text-align:center;color:var(--unrealButtonFontColor);letter-spacing:0;white-space:nowrap;border:none;background-color:var(--unrealButtonBgColor);border-radius:var(--unrealButtonBorderRadius);box-shadow:var(--unrealButtonBoxShadow);cursor:pointer}.unreal-button:after{content:\"\";position:absolute;inset:0;border-radius:var(--unrealButtonBorderRadius);border:var(--unrealButtonBorder)}.unreal-button>span{display:flex;justify-content:center;align-items:center;gap:var(--src-gap-md, 6px);width:auto;font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit}.unreal-button:disabled{--unrealButtonBgColor: var( --src-ui-accent-disabled, rgba(148, 163, 184, .24) );--unrealButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);--unrealButtonBoxShadow: none;--unrealButtonBorder: none;--unrealButtonBorderColor: transparent;cursor:default;pointer-events:none}.unreal-button:focus-visible{--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);outline:none;box-shadow:0 0 0 var(--unrealButtonFocusRingSize) var(--unrealButtonFocusRingColor)}@media(pointer:fine){.unreal-button:hover{--unrealButtonBgColor: var( --src-ui-secondary-default-hover, rgba(148, 163, 184, .08) );--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af)}}.unreal-button--primary{--unrealButtonBgColor: var(--unreal-accent, var(--src-ui-accent-default, #017bff));--unrealButtonBorder: none;--unrealButtonFontColor: var(--unreal-accent-text, var(--src-text-ui-primary-main, #fff));--unrealButtonFocusRingColor: var( --src-shadow-accent-light, rgba(1, 123, 255, .16) )}@media(pointer:fine){.unreal-button--primary:hover{--unrealButtonBgColor: var(--unreal-accent-hover, var(--src-ui-accent-default-hover, #016fe6));--unrealButtonFontColor: var(--unreal-accent-text, var(--src-text-ui-primary-main, #fff))}}.unreal-button--lg{--unrealButtonHeight: 44px;--unrealButtonPaddings: 0 16px;--unrealButtonBorderRadius: 8px;--unrealButtonFontSize: var(--src-font-size-base, 16px);--unrealButtonLineHeight: var(--src-font-line-base, 24px);--unrealButtonFocusRingSize: 6px;--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 2px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16))}.unreal-button--lg>span{gap:var(--src-gap-md, 8px)}.unreal-button--full-width{--unrealButtonWidth: 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-unreal-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"handleClick($event)\"\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [class.unreal-button--primary]=\"weight() === 'primary'\"\n  [class.unreal-button--lg]=\"size() === 'lg'\"\n  [class.unreal-button--full-width]=\"fullWidth()\"\n  [disabled]=\"isDisabled()\"\n  [type]=\"type()\"\n  class=\"unreal-button\"\n>\n  <span><ng-content></ng-content></span>\n</button>\n", styles: [".unreal-button{--unrealButtonHeight: 36px;--unrealButtonPaddings: 0 12px;--unrealButtonBorderRadius: 6px;--unrealButtonFontSize: var(--src-font-size-sm, 14px);--unrealButtonLineHeight: var(--src-font-line-sm, 20px);--unrealButtonWidth: auto;--unrealButtonBgColor: transparent;--unrealButtonBorderColor: var(--src-border-button-basic, #e5e7eb);--unrealButtonBorder: 1px solid var(--unrealButtonBorderColor);--unrealButtonFontColor: var(--src-text-ui-secondary-main, #111827);--unrealButtonFontWeight: var(--src-font-weight-medium, 500);--unrealButtonFocusRingSize: 4px;--unrealButtonFocusRingColor: var( --src-shadow-light, rgba(148, 163, 184, .16) );--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 1px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));position:relative;display:flex;justify-content:center;align-items:center;width:var(--unrealButtonWidth);height:var(--unrealButtonHeight);padding:var(--unrealButtonPaddings);font-weight:var(--unrealButtonFontWeight);font-size:var(--unrealButtonFontSize);font-style:normal;line-height:var(--unrealButtonLineHeight);text-align:center;color:var(--unrealButtonFontColor);letter-spacing:0;white-space:nowrap;border:none;background-color:var(--unrealButtonBgColor);border-radius:var(--unrealButtonBorderRadius);box-shadow:var(--unrealButtonBoxShadow);cursor:pointer}.unreal-button:after{content:\"\";position:absolute;inset:0;border-radius:var(--unrealButtonBorderRadius);border:var(--unrealButtonBorder)}.unreal-button>span{display:flex;justify-content:center;align-items:center;gap:var(--src-gap-md, 6px);width:auto;font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit}.unreal-button:disabled{--unrealButtonBgColor: var( --src-ui-accent-disabled, rgba(148, 163, 184, .24) );--unrealButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);--unrealButtonBoxShadow: none;--unrealButtonBorder: none;--unrealButtonBorderColor: transparent;cursor:default;pointer-events:none}.unreal-button:focus-visible{--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);outline:none;box-shadow:0 0 0 var(--unrealButtonFocusRingSize) var(--unrealButtonFocusRingColor)}@media(pointer:fine){.unreal-button:hover{--unrealButtonBgColor: var( --src-ui-secondary-default-hover, rgba(148, 163, 184, .08) );--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af)}}.unreal-button--primary{--unrealButtonBgColor: var(--src-ui-accent-default, #017bff);--unrealButtonBorder: none;--unrealButtonFontColor: var(--src-text-ui-primary-main, #fff);--unrealButtonFocusRingColor: var( --src-shadow-accent-light, rgba(1, 123, 255, .16) )}@media(pointer:fine){.unreal-button--primary:hover{--unrealButtonBgColor: var(--src-ui-accent-default-hover, #016fe6);--unrealButtonFontColor: var(--src-text-ui-primary-main, #fff)}}.unreal-button--lg{--unrealButtonHeight: 44px;--unrealButtonPaddings: 0 16px;--unrealButtonBorderRadius: 8px;--unrealButtonFontSize: var(--src-font-size-base, 16px);--unrealButtonLineHeight: var(--src-font-line-base, 24px);--unrealButtonFocusRingSize: 6px;--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 2px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16))}.unreal-button--lg>span{gap:var(--src-gap-md, 8px)}.unreal-button--full-width{--unrealButtonWidth: 100%}\n"] }]
+            args: [{ selector: 'app-unreal-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"handleClick($event)\"\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [class.unreal-button--primary]=\"weight() === 'primary'\"\n  [class.unreal-button--lg]=\"size() === 'lg'\"\n  [class.unreal-button--full-width]=\"fullWidth()\"\n  [disabled]=\"isDisabled()\"\n  [type]=\"type()\"\n  class=\"unreal-button\"\n>\n  <span><ng-content></ng-content></span>\n</button>\n", styles: [".unreal-button{--unrealButtonHeight: 36px;--unrealButtonPaddings: 0 12px;--unrealButtonBorderRadius: 6px;--unrealButtonFontSize: var(--src-font-size-sm, 14px);--unrealButtonLineHeight: var(--src-font-line-sm, 20px);--unrealButtonWidth: auto;--unrealButtonBgColor: transparent;--unrealButtonBorderColor: var(--src-border-button-basic, #e5e7eb);--unrealButtonBorder: 1px solid var(--unrealButtonBorderColor);--unrealButtonFontColor: var(--src-text-ui-secondary-main, #111827);--unrealButtonFontWeight: var(--src-font-weight-medium, 500);--unrealButtonFocusRingSize: 4px;--unrealButtonFocusRingColor: var( --src-shadow-light, rgba(148, 163, 184, .16) );--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 1px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16));position:relative;display:flex;justify-content:center;align-items:center;width:var(--unrealButtonWidth);height:var(--unrealButtonHeight);padding:var(--unrealButtonPaddings);font-weight:var(--unrealButtonFontWeight);font-size:var(--unrealButtonFontSize);font-style:normal;line-height:var(--unrealButtonLineHeight);text-align:center;color:var(--unrealButtonFontColor);letter-spacing:0;white-space:nowrap;border:none;background-color:var(--unrealButtonBgColor);border-radius:var(--unrealButtonBorderRadius);box-shadow:var(--unrealButtonBoxShadow);cursor:pointer}.unreal-button:after{content:\"\";position:absolute;inset:0;border-radius:var(--unrealButtonBorderRadius);border:var(--unrealButtonBorder)}.unreal-button>span{display:flex;justify-content:center;align-items:center;gap:var(--src-gap-md, 6px);width:auto;font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit}.unreal-button:disabled{--unrealButtonBgColor: var( --src-ui-accent-disabled, rgba(148, 163, 184, .24) );--unrealButtonFontColor: var(--src-text-ui-secondary-disabled, #9ca3af);--unrealButtonBoxShadow: none;--unrealButtonBorder: none;--unrealButtonBorderColor: transparent;cursor:default;pointer-events:none}.unreal-button:focus-visible{--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af);outline:none;box-shadow:0 0 0 var(--unrealButtonFocusRingSize) var(--unrealButtonFocusRingColor)}@media(pointer:fine){.unreal-button:hover{--unrealButtonBgColor: var( --src-ui-secondary-default-hover, rgba(148, 163, 184, .08) );--unrealButtonBorderColor: var(--src-border-button-basic-hover, #9ca3af)}}.unreal-button--primary{--unrealButtonBgColor: var(--unreal-accent, var(--src-ui-accent-default, #017bff));--unrealButtonBorder: none;--unrealButtonFontColor: var(--unreal-accent-text, var(--src-text-ui-primary-main, #fff));--unrealButtonFocusRingColor: var( --src-shadow-accent-light, rgba(1, 123, 255, .16) )}@media(pointer:fine){.unreal-button--primary:hover{--unrealButtonBgColor: var(--unreal-accent-hover, var(--src-ui-accent-default-hover, #016fe6));--unrealButtonFontColor: var(--unreal-accent-text, var(--src-text-ui-primary-main, #fff))}}.unreal-button--lg{--unrealButtonHeight: 44px;--unrealButtonPaddings: 0 16px;--unrealButtonBorderRadius: 8px;--unrealButtonFontSize: var(--src-font-size-base, 16px);--unrealButtonLineHeight: var(--src-font-line-base, 24px);--unrealButtonFocusRingSize: 6px;--unrealButtonBoxShadow: 0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, .24)) inset, 0 2px 0 0 var(--src-shadow-light, rgba(148, 163, 184, .16))}.unreal-button--lg>span{gap:var(--src-gap-md, 8px)}.unreal-button--full-width{--unrealButtonWidth: 100%}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
 
+function AnswerHandler(msg) {
+    this.onWebRtcAnswer$.next(msg);
+}
+
+function ConfigHandler(msg) {
+    this.onConfig$.next(msg);
+    //DO NOT REMOVE. Possible required in future for SFU
+    /*this.send({
+      type: OrchestrationMessageTypes.listStreamers,
+      correlationId: this.correlationId,
+    });*/
+}
+
+function IceCandidateHandler(msg) {
+    this.onWebRtcIce$.next(msg.candidate);
+}
+
+const scoped = (templateString) => `[UNREAL] ${templateString[0]}`;
+const unrealCommandCallback = createAction(scoped `unreal command callback`, props());
+const commandStarted = createAction(scoped `command started`, props());
+const commandCompleted = createAction(scoped `command completed`, props());
+const trackMixpanelEvent = createAction(scoped `track Mixpanel event`, props());
+const trackTelemetryData = createAction(scoped `track telemetry data`, props());
+const setMaxFps = createAction(scoped `change fps`, props());
+const destroyRemoteConnections = createAction(scoped `destroyRemoteConnections`, props());
+const destroyUnrealScene = createAction(scoped `destroyUnrealScene`);
+const setCirrusConnected = createAction(scoped `cirrusConnected`);
+const setCirrusDisconnected = createAction(scoped `cirrusDisconnected`);
+const changeStatusMainVideoOnScene = createAction(scoped `change status main video on scene`, props());
+const setAwsInstance = createAction(scoped `set aws instance`, props());
+const setStatusMessage = createAction(scoped `set status message`, props());
+const setStatusPercentSignallingServer = createAction(scoped `change status percent signalling server`, props());
+const setFreezeFrame = createAction(scoped `set freeze frame`, props());
+const setStreamClientCompanyId = createAction(scoped `set stream client company id`, props());
+const setStreamViewId = createAction(scoped `set stream view id`, props());
+const setIntroImageSrc = createAction(scoped `set intro image src`, props());
+const setLoadingImageSrc = createAction(scoped `set loading image src`, props());
+const setIntroVideoSrc = createAction(scoped `set intro video src`, props());
+const resetIntroSrc = createAction(scoped `reset intro src`);
+const setFreezeFrameFromVideo = createAction(scoped `set freeze frame from video`, props());
+const setEstablishingConnection = createAction(scoped `set establishing connection`, props());
+const dataChannelConnected = createAction(scoped `data channel connected`, props());
+const dataChannelReady = createAction(scoped `dataChannelReady`);
+const setConfig = createAction(scoped `set config`, props());
+const disconnectStream = createAction(scoped `disconnectStream`, props());
+const dropConnection = createAction(scoped `dropConnection`);
+const setViewportReady = createAction(scoped `set viewport ready`);
+const setViewportNotReady = createAction(scoped `set viewport not ready`);
+const changeStreamResolutionAction = createAction(scoped `change stream resolution`, props());
+const setSignalingName = createAction(scoped `set aws instanceName`, props());
+const setOrchestrationParameters = createAction(scoped `set orchestration parameters`, props());
+/**
+ * Dispatched when the orchestration server signals that the reserved
+ * instance is ready to serve the stream (`instanceReady` WS message).
+ * Carries the stream-machine coordinates — `originInstanceUri` is used to
+ * open the second (stream-machine) signalling socket. Also consumed by
+ * telemetry as a phase marker.
+ */
+const instanceReady = createAction(scoped `instance ready`, props());
+/**
+ * Dispatched when `RegionsPingService.getFastest()` begins — right
+ * before the region-list HTTP request goes out. Bookends the entire
+ * region-discovery flow together with {@link regionResolved}.
+ * Observability-only — no state change.
+ */
+const regionPingFetchStart = createAction(scoped `region ping fetch start`);
+/**
+ * Dispatched once `RegionsPingService.getProviders()` returns the region
+ * list — i.e., the fetch step is done and the actual per-region ping
+ * sweep is about to start. Splits the region-discovery waterfall into
+ * two legs: config fetch vs. ping sweep. Observability-only.
+ */
+const regionPingFetchEnd = createAction(scoped `region ping fetch end`);
+/**
+ * Dispatched once the closest region has been resolved by the
+ * regions-ping service. Carries every sampled ping RTT to the winning
+ * region (one entry per probe — `checkLatency` issues `ping_count`
+ * sequential pings per region) so consumers can inspect variance /
+ * jitter, not just the mean. Observability-only — no state change.
+ */
+const regionResolved = createAction(scoped `region resolved`, props());
+/**
+ * Dispatched around the HTTP polling roundup inside `getAwsInstance`
+ * (old orchestration flow). Only fires when polling is actually used
+ * (i.e., signaling URL is not a direct `ws://` / `wss://` endpoint).
+ * Observability-only — no state change.
+ */
+const pollingStarted = createAction(scoped `polling started`);
+const pollingEnded = createAction(scoped `polling ended`);
+/**
+ * Dispatched once for every `retry()` attempt inside the signalling
+ * connect pipeline. Two kinds:
+ *
+ *   - `'connect'` — outer retry around the whole connect pipeline
+ *     (region ping → AWS instance → WebSocket). Fires when the WS
+ *     errors (e.g. "WebSocket closed before open") and the entire
+ *     pipeline is re-subscribed. See `SIGNALLING.md` — every one of
+ *     these currently triggers a fresh region-ping storm.
+ *   - `'orchestration'` — inner retry inside `getAwsInstance`,
+ *     advancing `urlGen` to the next candidate signalling URL when
+ *     polling fails or returns an error payload.
+ *
+ * Observability-only — no state change. Surfaces in the viewer's
+ * Anomalies table as `signaling_retry` rows so a session that
+ * needed N tries shows N entries with their reasons.
+ */
+const signalingRetryAttempted = createAction(scoped `signaling retry attempted`, props());
+/**
+ * Dispatched when the client has just sent an SDP answer back to Cirrus
+ * after receiving the server-initiated offer. Observability-only.
+ */
+const answerSent = createAction(scoped `answer sent`);
+const setOrchestrationMessage = createAction(scoped `set orchestration message`, props());
+const setOrchestrationProgress = createAction(scoped `set orchestration progress`, props());
+const setOrchestrationContext = createAction(scoped `set orchestration params`, props());
+const updateCirrusInfo = createAction(scoped `set unrealInfo`, props());
+const setLoopBackCommandIsCompleted = createAction(scoped `set loopBack command is completed`);
+const setAfkTimerVisible = createAction(scoped `set afk timer visible`);
+const setAfkTimerHide = createAction(scoped `set afk timer hide`);
+const setAfkTimerCountdown = createAction(scoped `set afk timer count down`, props());
+const showUnrealErrorMessage = createAction(scoped `show unreal error message`, props());
+const initSignalling = createAction(scoped `init signalling`);
+/**
+ * Dispatched when a prefetched connection parked on `window.__stream` by the
+ * `stream-prefetch.js` head-script is adopted instead of opening a fresh
+ * `connectToSignaling`. Marks cirrus connected and records the adopted machine
+ * in one transaction; the data channel / app-init chain then proceeds via
+ * `dataChannelConnected` dispatched from `WebRtcPlayerService`.
+ *
+ * Deliberately does NOT touch `streamClientCompanyId` / `streamViewId`: the host
+ * app (e.g. metabox) sets those authoritatively from its own data before
+ * `initSignalling`, and the prefetch script's ids are connection-internal only.
+ */
+const streamAdopted = createAction(scoped `stream adopted`, props());
+const startStream = createAction(scoped `startStream`, props());
+const resetConfig = createAction(scoped `reset config`);
+const resetAfk = createAction(scoped `reset afk action`);
+const resetWarnTimeout = createAction(scoped `reset config warn timeout`);
+/**
+ * Fan-in for "cancel an in-flight signalling attempt". Dispatched by the
+ * abortEstablishingConnection$ effect whenever any of these source actions
+ * fire: `setCirrusDisconnected` (cirrus dropped), `dropConnection` (user
+ * called drop), `destroyUnrealScene` (component teardown). Consumers
+ * (`SignallingService.abort$`, `setDataChannelTimeoutCheck$.abort$`) listen
+ * to this one action instead of the trio so the "abort" intent has a single
+ * named entry in Redux DevTools and one subscription site to update.
+ */
+const abortEstablishingConnection = createAction(scoped `abortEstablishingConnection`);
+const setUnrealPlaywrightConfig = createAction(scoped `set unreal playwright config`);
+const saveAnalyticsEvent = createAction(scoped `save analytics event`, props());
+/** Action to trigger WebRTC peer reconnection (keeps signaling connection) */
+const reconnectPeer = createAction(scoped `reconnect peer`, props());
+/** Action to reset the data channel state before reconnection */
+const resetDataChannelForReconnect = createAction(scoped `reset data channel for reconnect`);
+/** Action dispatched when peer reconnection succeeds */
+const reconnectPeerSuccess = createAction(scoped `reconnect peer success`);
+/** Action dispatched when all peer reconnection attempts are exhausted */
+const reconnectPeerFailed = createAction(scoped `reconnect peer failed`, props());
+/** Action dispatched when ICE connection state changes to failed/disconnected */
+const iceConnectionFailed = createAction(scoped `ice connection failed`, props());
+const forceResizeViewport = createAction(scoped `force resize viewport`);
+const videoAdaptedToContainer = createAction(scoped `video adapted to container`);
+const videoStreamInitialized = createAction(scoped `video stream initialized`);
+const dropDC = createAction(scoped `drop data channel`);
+const dropPC = createAction(scoped `drop peer connection`);
+const showLoadingProgress = createAction(scoped `show loading progress`, props());
+const showResumeStreamPopup = createAction(scoped `show resume stream popup`, props());
+const showUserInactivityTimeoutPopup = createAction(scoped `show user inactivity timeout popup`, props());
+const setUserInactivityTimeout = createAction(scoped `set user inactivity timeout`, props());
+const resetUserInactivityTimeout = createAction(scoped `reset user inactivity timeout`);
+
+const WSCloseCode_NORMAL_CLOSURE = 3000;
+const WSCloseCode_NORMAL_AFK_TIMEOUT = 3001;
+const WSCloseCode_NORMAL_MANUAL_DISCONNECT = 3002;
+const WSCloseCode_FORCE_CIRRUS_CLOSE = 3003;
+const WSCloseCode_UNKNOWN = 1000;
+const WSCloseCode_CIRRUS_PLAYER_DISCONNECTED = 1001;
+const WSCloseCode_CIRRUS_ABNORMAL_CLOSURE = 1006;
+const WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR = 1013;
+const WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER = 1011;
+const WSCloseCodes = [
+    WSCloseCode_NORMAL_CLOSURE,
+    WSCloseCode_NORMAL_AFK_TIMEOUT,
+    WSCloseCode_NORMAL_MANUAL_DISCONNECT,
+    WSCloseCode_FORCE_CIRRUS_CLOSE,
+    WSCloseCode_UNKNOWN,
+    WSCloseCode_CIRRUS_PLAYER_DISCONNECTED,
+    WSCloseCode_CIRRUS_ABNORMAL_CLOSURE,
+    WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR,
+    WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER,
+];
+
+const DisconnectReason = {
+    Afk: 'Afk',
+    None: 'None',
+    Destroy: 'Destroy',
+    DataChannelClosed: 'DataChannelClosed',
+    DataChannelTimeout: 'DataChannelTimeout',
+    WebRTCError: 'WebRTCError',
+    WebSocketError: 'WebSocketError',
+    WebSocketClose: 'WebSocketClose',
+    DropConnection: 'DropConnection',
+    OrchestrationPlayerDisconnected: 'OrchestrationPlayerDisconnected',
+    OrchestrationStreamerDisconnected: 'OrchestrationStreamerDisconnected',
+    IceConnectionFailed: 'IceConnectionFailed',
+    ReconnectFailed: 'ReconnectFailed',
+    NewConnectionAttempt: 'NewConnectionAttempt',
+    AbortEstablishingConnection: 'AbortEstablishingConnection',
+};
+
+/*
+export interface RequestReservation extends InstanceMessageBase {
+  type: 'requestReservation';
+}
+*/
+const OrchestrationMessageTypes = {
+    error: 'error',
+    offer: 'offer',
+    answer: 'answer',
+    ssInfo: 'ssInfo',
+    config: 'config',
+    playerCount: 'playerCount',
+    iceCandidate: 'iceCandidate',
+    streamerList: 'streamerList',
+    requestStream: 'requestStream',
+    listStreamers: 'listStreamers',
+    instanceReady: 'instanceReady',
+    p2pEstablished: 'p2pEstablished',
+    instanceReserved: 'instanceReserved',
+    interruptClientStream: 'interruptClientStream',
+};
+
 const SpecialKeyCodes = {
     BackSpace: 8,
     Shift: 16,
@@ -140,67 +372,6 @@ const InputOptions = {
     suppressBrowserKeys: true,
 };
 
-const WSCloseCode_NORMAL_CLOSURE = 3000;
-const WSCloseCode_NORMAL_AFK_TIMEOUT = 3001;
-const WSCloseCode_NORMAL_MANUAL_DISCONNECT = 3002;
-const WSCloseCode_FORCE_CIRRUS_CLOSE = 3003;
-const WSCloseCode_UNKNOWN = 1000;
-const WSCloseCode_CIRRUS_PLAYER_DISCONNECTED = 1001;
-const WSCloseCode_CIRRUS_ABNORMAL_CLOSURE = 1006;
-const WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR = 1013;
-const WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER = 1011;
-const WSCloseCodes = [
-    WSCloseCode_NORMAL_CLOSURE,
-    WSCloseCode_NORMAL_AFK_TIMEOUT,
-    WSCloseCode_NORMAL_MANUAL_DISCONNECT,
-    WSCloseCode_FORCE_CIRRUS_CLOSE,
-    WSCloseCode_UNKNOWN,
-    WSCloseCode_CIRRUS_PLAYER_DISCONNECTED,
-    WSCloseCode_CIRRUS_ABNORMAL_CLOSURE,
-    WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR,
-    WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER,
-];
-
-const DisconnectReason = {
-    Afk: 'Afk',
-    None: 'None',
-    Destroy: 'Destroy',
-    DataChannelClosed: 'DataChannelClosed',
-    DataChannelTimeout: 'DataChannelTimeout',
-    WebRTCError: 'WebRTCError',
-    WebSocketError: 'WebSocketError',
-    WebSocketClose: 'WebSocketClose',
-    DropConnection: 'DropConnection',
-    OrchestrationPlayerDisconnected: 'OrchestrationPlayerDisconnected',
-    OrchestrationStreamerDisconnected: 'OrchestrationStreamerDisconnected',
-    IceConnectionFailed: 'IceConnectionFailed',
-    ReconnectFailed: 'ReconnectFailed',
-    NewConnectionAttempt: 'NewConnectionAttempt',
-    AbortEstablishingConnection: 'AbortEstablishingConnection',
-};
-
-/*
-export interface RequestReservation extends InstanceMessageBase {
-  type: 'requestReservation';
-}
-*/
-const OrchestrationMessageTypes = {
-    error: 'error',
-    offer: 'offer',
-    answer: 'answer',
-    ssInfo: 'ssInfo',
-    config: 'config',
-    playerCount: 'playerCount',
-    iceCandidate: 'iceCandidate',
-    streamerList: 'streamerList',
-    requestStream: 'requestStream',
-    listStreamers: 'listStreamers',
-    instanceReady: 'instanceReady',
-    p2pEstablished: 'p2pEstablished',
-    instanceReserved: 'instanceReserved',
-    interruptClientStream: 'interruptClientStream',
-};
-
 /** Disconnect reasons that should trigger remote connection cleanup. */
 const DESTROY_DISCONNECT_REASONS = [
     DisconnectReason.Afk,
@@ -300,160 +471,6 @@ const UnrealStatusMessage = {
     STARTING_YOUR_SESSION: 'Starting your session',
 };
 
-const scoped = (templateString) => `[UNREAL] ${templateString[0]}`;
-const unrealCommandCallback = createAction(scoped `unreal command callback`, props());
-const commandStarted = createAction(scoped `command started`, props());
-const commandCompleted = createAction(scoped `command completed`, props());
-const trackMixpanelEvent = createAction(scoped `track Mixpanel event`, props());
-const trackTelemetryData = createAction(scoped `track telemetry data`, props());
-const setMaxFps = createAction(scoped `change fps`, props());
-const destroyRemoteConnections = createAction(scoped `destroyRemoteConnections`, props());
-const destroyUnrealScene = createAction(scoped `destroyUnrealScene`);
-const setCirrusConnected = createAction(scoped `cirrusConnected`);
-const setCirrusDisconnected = createAction(scoped `cirrusDisconnected`);
-const changeStatusMainVideoOnScene = createAction(scoped `change status main video on scene`, props());
-const setAwsInstance = createAction(scoped `set aws instance`, props());
-const setStatusMessage = createAction(scoped `set status message`, props());
-const setStatusPercentSignallingServer = createAction(scoped `change status percent signalling server`, props());
-const setFreezeFrame = createAction(scoped `set freeze frame`, props());
-const setStreamClientCompanyId = createAction(scoped `set stream client company id`, props());
-const setStreamViewId = createAction(scoped `set stream view id`, props());
-const setIntroImageSrc = createAction(scoped `set intro image src`, props());
-const setLoadingImageSrc = createAction(scoped `set loading image src`, props());
-const setIntroVideoSrc = createAction(scoped `set intro video src`, props());
-const resetIntroSrc = createAction(scoped `reset intro src`);
-const setFreezeFrameFromVideo = createAction(scoped `set freeze frame from video`, props());
-const setEstablishingConnection = createAction(scoped `set establishing connection`, props());
-const dataChannelConnected = createAction(scoped `data channel connected`, props());
-const dataChannelReady = createAction(scoped `dataChannelReady`);
-const setConfig = createAction(scoped `set config`, props());
-const disconnectStream = createAction(scoped `disconnectStream`, props());
-const dropConnection = createAction(scoped `dropConnection`);
-const setViewportReady = createAction(scoped `set viewport ready`);
-const setViewportNotReady = createAction(scoped `set viewport not ready`);
-const changeStreamResolutionAction = createAction(scoped `change stream resolution`, props());
-const setSignalingName = createAction(scoped `set aws instanceName`, props());
-const setOrchestrationParameters = createAction(scoped `set orchestration parameters`, props());
-/**
- * Dispatched when the orchestration server signals that the reserved
- * instance is ready to serve the stream (`instanceReady` WS message).
- * Carries the stream-machine coordinates — `originInstanceUri` is used to
- * open the second (stream-machine) signalling socket. Also consumed by
- * telemetry as a phase marker.
- */
-const instanceReady = createAction(scoped `instance ready`, props());
-/**
- * Dispatched when `RegionsPingService.getFastest()` begins — right
- * before the region-list HTTP request goes out. Bookends the entire
- * region-discovery flow together with {@link regionResolved}.
- * Observability-only — no state change.
- */
-const regionPingFetchStart = createAction(scoped `region ping fetch start`);
-/**
- * Dispatched once `RegionsPingService.getProviders()` returns the region
- * list — i.e., the fetch step is done and the actual per-region ping
- * sweep is about to start. Splits the region-discovery waterfall into
- * two legs: config fetch vs. ping sweep. Observability-only.
- */
-const regionPingFetchEnd = createAction(scoped `region ping fetch end`);
-/**
- * Dispatched once the closest region has been resolved by the
- * regions-ping service. Carries every sampled ping RTT to the winning
- * region (one entry per probe — `checkLatency` issues `ping_count`
- * sequential pings per region) so consumers can inspect variance /
- * jitter, not just the mean. Observability-only — no state change.
- */
-const regionResolved = createAction(scoped `region resolved`, props());
-/**
- * Dispatched around the HTTP polling roundup inside `getAwsInstance`
- * (old orchestration flow). Only fires when polling is actually used
- * (i.e., signaling URL is not a direct `ws://` / `wss://` endpoint).
- * Observability-only — no state change.
- */
-const pollingStarted = createAction(scoped `polling started`);
-const pollingEnded = createAction(scoped `polling ended`);
-/**
- * Dispatched once for every `retry()` attempt inside the signalling
- * connect pipeline. Two kinds:
- *
- *   - `'connect'` — outer retry around the whole connect pipeline
- *     (region ping → AWS instance → WebSocket). Fires when the WS
- *     errors (e.g. "WebSocket closed before open") and the entire
- *     pipeline is re-subscribed. See `SIGNALLING.md` — every one of
- *     these currently triggers a fresh region-ping storm.
- *   - `'orchestration'` — inner retry inside `getAwsInstance`,
- *     advancing `urlGen` to the next candidate signalling URL when
- *     polling fails or returns an error payload.
- *
- * Observability-only — no state change. Surfaces in the viewer's
- * Anomalies table as `signaling_retry` rows so a session that
- * needed N tries shows N entries with their reasons.
- */
-const signalingRetryAttempted = createAction(scoped `signaling retry attempted`, props());
-/**
- * Dispatched when the client has just sent an SDP answer back to Cirrus
- * after receiving the server-initiated offer. Observability-only.
- */
-const answerSent = createAction(scoped `answer sent`);
-const setOrchestrationMessage = createAction(scoped `set orchestration message`, props());
-const setOrchestrationProgress = createAction(scoped `set orchestration progress`, props());
-const setOrchestrationContext = createAction(scoped `set orchestration params`, props());
-const updateCirrusInfo = createAction(scoped `set unrealInfo`, props());
-const setLoopBackCommandIsCompleted = createAction(scoped `set loopBack command is completed`);
-const setAfkTimerVisible = createAction(scoped `set afk timer visible`);
-const setAfkTimerHide = createAction(scoped `set afk timer hide`);
-const setAfkTimerCountdown = createAction(scoped `set afk timer count down`, props());
-const showUnrealErrorMessage = createAction(scoped `show unreal error message`, props());
-const initSignalling = createAction(scoped `init signalling`);
-/**
- * Dispatched when a prefetched connection parked on `window.__stream` by the
- * `stream-prefetch.js` head-script is adopted instead of opening a fresh
- * `connectToSignaling`. Marks cirrus connected and records the adopted machine
- * in one transaction; the data channel / app-init chain then proceeds via
- * `dataChannelConnected` dispatched from `WebRtcPlayerService`.
- *
- * Deliberately does NOT touch `streamClientCompanyId` / `streamViewId`: the host
- * app (e.g. metabox) sets those authoritatively from its own data before
- * `initSignalling`, and the prefetch script's ids are connection-internal only.
- */
-const streamAdopted = createAction(scoped `stream adopted`, props());
-const startStream = createAction(scoped `startStream`, props());
-const resetConfig = createAction(scoped `reset config`);
-const resetAfk = createAction(scoped `reset afk action`);
-const resetWarnTimeout = createAction(scoped `reset config warn timeout`);
-/**
- * Fan-in for "cancel an in-flight signalling attempt". Dispatched by the
- * abortEstablishingConnection$ effect whenever any of these source actions
- * fire: `setCirrusDisconnected` (cirrus dropped), `dropConnection` (user
- * called drop), `destroyUnrealScene` (component teardown). Consumers
- * (`SignallingService.abort$`, `setDataChannelTimeoutCheck$.abort$`) listen
- * to this one action instead of the trio so the "abort" intent has a single
- * named entry in Redux DevTools and one subscription site to update.
- */
-const abortEstablishingConnection = createAction(scoped `abortEstablishingConnection`);
-const setUnrealPlaywrightConfig = createAction(scoped `set unreal playwright config`);
-const saveAnalyticsEvent = createAction(scoped `save analytics event`, props());
-/** Action to trigger WebRTC peer reconnection (keeps signaling connection) */
-const reconnectPeer = createAction(scoped `reconnect peer`, props());
-/** Action to reset the data channel state before reconnection */
-const resetDataChannelForReconnect = createAction(scoped `reset data channel for reconnect`);
-/** Action dispatched when peer reconnection succeeds */
-const reconnectPeerSuccess = createAction(scoped `reconnect peer success`);
-/** Action dispatched when all peer reconnection attempts are exhausted */
-const reconnectPeerFailed = createAction(scoped `reconnect peer failed`, props());
-/** Action dispatched when ICE connection state changes to failed/disconnected */
-const iceConnectionFailed = createAction(scoped `ice connection failed`, props());
-const forceResizeViewport = createAction(scoped `force resize viewport`);
-const videoAdaptedToContainer = createAction(scoped `video adapted to container`);
-const videoStreamInitialized = createAction(scoped `video stream initialized`);
-const dropDC = createAction(scoped `drop data channel`);
-const dropPC = createAction(scoped `drop peer connection`);
-const showLoadingProgress = createAction(scoped `show loading progress`, props());
-const showResumeStreamPopup = createAction(scoped `show resume stream popup`, props());
-const showUserInactivityTimeoutPopup = createAction(scoped `show user inactivity timeout popup`, props());
-const setUserInactivityTimeout = createAction(scoped `set user inactivity timeout`, props());
-const resetUserInactivityTimeout = createAction(scoped `reset user inactivity timeout`);
-
 const COMMAND_EXILE_TIMEOUT_MS = 10_000;
 function exileExpiredCommands(commandsInProgress, idToRemove, now) {
     let remaining = commandsInProgress.filter(whereNot({ id: idToRemove }));
@@ -772,437 +789,18 @@ const unrealReducer = createReducer(initialState, on(changeStatusMainVideoOnScen
     ],
 })), on(commandCompleted, (state, { id, now }) => {
     const { commandsInProgress, exiled } = exileExpiredCommands(state.commandsInProgress, id, now);
-    return {
-        ...state,
-        commandsInProgress,
-        // +1 for the just-completed command, +exiled for stragglers we GC'd.
-        totalCommandsCompleted: state.totalCommandsCompleted + 1 + exiled,
-    };
-}));
-
-const unrealFeature = createFeature({
-    name: 'unrealFeature',
-    reducer: unrealReducer,
-});
-
-class SubService {
-    constructor() {
-        this.destroyRef = inject(DestroyRef);
-        this.destroy$ = new Subject();
-        this.actions$ = inject(Actions);
-        this.store = inject(Store);
-        this.disconnect$ = this.store
-            .select(unrealFeature.selectCirrusConnected)
-            .pipe(skip(1), filter(Falsy), share());
-        this.destroyRef.onDestroy(() => {
-            this.destroy$.next();
-            this.destroy$.complete();
-        });
-    }
-}
-
-function AnswerHandler(msg) {
-    this.onWebRtcAnswer$.next(msg);
-}
-
-function ConfigHandler(msg) {
-    this.onConfig$.next(msg);
-    //DO NOT REMOVE. Possible required in future for SFU
-    /*this.send({
-      type: OrchestrationMessageTypes.listStreamers,
-      correlationId: this.correlationId,
-    });*/
-}
-
-function IceCandidateHandler(msg) {
-    this.onWebRtcIce$.next(msg.candidate);
-}
-
-function InstanceReadyHandler(msg) {
-    const payload = msg?.payload;
-    if (!payload) {
-        Logger.warn('instanceReady received without payload — ignoring');
-        return;
-    }
-    if (!payload.originInstanceUri) {
-        Logger.warn('instanceReady without originInstanceUri — ignoring');
-        return;
-    }
-    // Emit for observability (telemetry) and store the stream-machine coords.
-    this.store.dispatch(instanceReady(payload));
-    // This is the answer `requestCirrusViaSocket` is waiting for: the Cirrus
-    // address (`originInstanceUri`) plus the connection id to hand it. The socket
-    // itself is opened by the shared `connectToCirrus`, not here.
-    this.onInstanceReady$.next(payload);
-}
-
-function InstanceReservedHandler(msg) {
-    this.store.dispatch(setOrchestrationParameters({
-        instanceName: msg.payload.instanceId,
-        streamRequestId: msg.payload.streamRequestId,
-        eta: msg.payload.eta ?? 150,
-    }));
-}
-
-function PlayerCountHandler(msg) {
-    Logger.log(msg);
-}
-
-function SSInfoHandler(msg) {
-    this.store.dispatch(updateCirrusInfo({ ssData: msg.data }));
-    return null;
-}
-
-const dropCodes = [
-    WSCloseCode_UNKNOWN,
-    WSCloseCode_CIRRUS_PLAYER_DISCONNECTED,
-    WSCloseCode_CIRRUS_ABNORMAL_CLOSURE,
-    WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER,
-    WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR,
-];
-function OnCloseHandler(e) {
-    const message = `WebSocket closed: ${JSON.stringify(e.code)} - ${e.reason}`;
-    Logger.warn(message);
-    this.store.dispatch(setCirrusDisconnected());
-    if (dropCodes.includes(e.code)) {
-        this.store.dispatch(dropConnection());
-    }
-}
-
-function OnErrorHandler(e) {
-    Logger.warn(`WS error: ${JSON.stringify(e)}`);
-    this.store.dispatch(disconnectStream({
-        reason: DisconnectReason.WebSocketError,
-        message: 'WebSocket Error',
-    }));
-}
-
-function OnMessageHandler(e) {
-    const handleData = (data) => {
-        //Logger.colored(...COLOR_CODES.FROM_SIGNALING, data);
-        const msg = JSON.parse(data);
-        this.handleMessage(msg);
-    };
-    if (typeof e.data === 'string') {
-        try {
-            handleData(e.data);
-        }
-        catch (err) {
-            Logger.warn('OnMessageHandler: failed to parse string message', err);
-        }
-    }
-    else if (e.data instanceof Blob) {
-        e.data
-            .text()
-            .then(handleData)
-            .catch((err) => Logger.warn('OnMessageHandler: failed to parse Blob message', err));
-    }
-}
-
-/**
- * Open handler of the CIRRUS socket only (`addWsHandlers`), so
- * `setCirrusConnected` now means what it says. It used to also send
- * `requestStream` here, which made the flag fire on the orchestration control
- * socket — a whole provisioning wait (`eta`, ~150 s) before any Cirrus existed.
- * `requestStream` belongs to the control socket and is sent by
- * `requestCirrusViaSocket`.
- */
-function OnOpenHandler() {
-    this.store.dispatch(setCirrusConnected());
-}
-
-/**
- * Keeps the max of numbers seen so far; resets to 0 whenever `reset$` emits.
- */
-const keepMaxUntilReset = (reset$) => (source$) => merge(source$, reset$.pipe(map(() => null))).pipe(scan((max, value) => (value === null ? 0 : Math.max(max, value)), 0));
-
-// Reused across every inbound data-channel message — instantiating a
-// TextDecoder per call adds needless GC churn on a hot path.
-const utf16Decoder = new TextDecoder('utf-16');
-function decodeData(anyData) {
-    try {
-        return utf16Decoder.decode(anyData);
-    }
-    catch {
-        return '';
-    }
-}
-
-const dispatchResize = () => {
-    window.dispatchEvent(new Event('resize'));
-};
-
-const errorCodes = {
-    code404: 'Your asset is being synced on Metabox servers and is not yet available in Metabox Studio or Metabox Configurator. Please check again later after syncing is complete. ',
-};
-function getRtcErrorMessage(code) {
-    if (code === null) {
-        return undefined;
-    }
-    return errorCodes[`code${code}`];
-}
-
-const JUMP_THRESHOLD = 0.95;
-const MAX_TRANSITION_DURATION_MS = 200;
-/**
- * Maps a 0..1 stream directly to a 0..100 integer percent stream.
- * No animation — emits whatever the source emits, rounded and clamped.
- */
-const floatToPercents = () => (source) => source.pipe(map$1((value) => clampf(0, 100, Math.round(value * 100))));
-/**
- * Maps a 0..1 progress stream to a smoothed 0..100 integer percent stream.
- * Animates between consecutive values over up to 200ms; jumps directly when
- * the delta exceeds 0.95 (treated as a reset, not a real progression).
- */
-const floatToSmoothPercents = () => (source) => source.pipe(timestamp(), startWith({ value: 0, timestamp: 0 }), pairwise(), concatMap(([prev, curr]) => {
-    const isJump = Math.abs(curr.value - prev.value) > JUMP_THRESHOLD;
-    const dt = prev.timestamp ? curr.timestamp - prev.timestamp : 0;
-    if (isJump || dt === 0) {
-        return of(curr.value);
-    }
-    return smoothTransition(prev.value, curr.value, Math.min(dt, MAX_TRANSITION_DURATION_MS));
-}), floatToPercents());
-/**
- * Smoothly interpolates from `start` to `end` over `duration`ms using the
- * animation frame scheduler. Completes when the transition finishes.
- *
- * NOTE: duplicates `smoothTransition` from `@3dsource/utils`. The utils version
- * is missing `takeWhile(... < 1, true)` and never completes — which would
- * deadlock the `concatMap` above. Keep this local copy until utils is fixed.
- * Not exported: internal to `floatToSmoothPercents`.
- */
-const smoothTransition = (start, end, duration) => {
-    const startTime = animationFrameScheduler.now();
-    return interval(0, animationFrameScheduler).pipe(map$1(() => clampf(0, 1, (animationFrameScheduler.now() - startTime) / duration)), distinctUntilChanged(), takeWhile((fraction) => fraction < 1, true), map$1((fraction) => lerp(start, end, fraction)));
-};
-
-const getImageFromVideoStream = (takeSizeFrom = 'video', imageOutput, sizes) => {
-    try {
-        const video = document.getElementById(STREAMING_VIDEO_ID);
-        const { canvas, ctx } = getCanvasCached('video');
-        canvas.width =
-            takeSizeFrom === 'video'
-                ? sizes?.width || video?.clientWidth || FULL_HD_WIDTH
-                : FULL_HD_WIDTH;
-        canvas.height =
-            takeSizeFrom === 'video'
-                ? sizes?.height || video?.clientHeight || FULL_HD_HEIGHT
-                : FULL_HD_HEIGHT;
-        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        return getSnapshot(canvas, canvas.width, imageOutput);
-    }
-    catch {
-        return null;
-    }
-};
-
-/**
- * Generator that cycles through `urls` indefinitely. Each call to
- * `getActiveUrl(urls)` returns a fresh generator with its own counter,
- * so concurrent generators (e.g., overlapping reconnect attempts) do
- * not share state. The counter is initialized once per generator
- * instance — before any `yield` — so each `.next()` call advances
- * within that single generator.
- */
-function* getActiveUrl(urls) {
-    let index = 0;
-    while (true) {
-        yield urls[index++ % urls.length];
-    }
-}
-
-class LatencyTimings {
-    constructor() {
-        this.TestStartTimeMs = null;
-        this.UEReceiptTimeMs = null;
-        this.UEEncodeMs = null;
-        this.UECaptureToSendMs = null;
-        this.UETransmissionTimeMs = null;
-        this.BrowserReceiptTimeMs = null;
-        this.FrameDisplayDeltaTimeMs = null;
-    }
-    Reset() {
-        this.TestStartTimeMs = null;
-        this.UEReceiptTimeMs = null;
-        this.UEEncodeMs = null;
-        this.UECaptureToSendMs = null;
-        this.UETransmissionTimeMs = null;
-        this.BrowserReceiptTimeMs = null;
-        this.FrameDisplayDeltaTimeMs = null;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    SetUETimings(UETimings) {
-        this.UEReceiptTimeMs = UETimings.ReceiptTimeMs;
-        this.UEEncodeMs = UETimings.EncodeMs;
-        this.UECaptureToSendMs = UETimings.CaptureToSendMs;
-        this.UETransmissionTimeMs = UETimings.TransmissionTimeMs;
-        this.BrowserReceiptTimeMs = Date.now();
-    }
-    SetFrameDisplayDeltaTime(DeltaTimeMs) {
-        if (this.FrameDisplayDeltaTimeMs == null) {
-            this.FrameDisplayDeltaTimeMs = Math.round(DeltaTimeMs);
-        }
-    }
-}
-
-function qpToQuality(VideoEncoderQP) {
-    const orangeQP = 26;
-    const redQP = 35;
-    let quality = 'lime';
-    if (VideoEncoderQP > redQP) {
-        quality = 'red';
-    }
-    else if (VideoEncoderQP > orangeQP) {
-        quality = 'orange';
-    }
-    return quality;
-}
-
-/**
- * Base64-encodes a byte array.
- *
- * Builds the intermediate binary string in fixed-size chunks instead of
- * concatenating one character at a time. The naive `bytes.reduce((s, b) => s +
- * String.fromCharCode(b), '')` is O(n²) (each `+` re-copies the growing string)
- * and stalls the main thread for a full-resolution frame; chunking keeps it
- * O(n). The chunk size stays under the argument-count limit of
- * `String.fromCharCode.apply`/spread.
- *
- * @param bytes - The raw bytes to encode.
- * @returns The Base64 representation of `bytes`.
- */
-function uint8ToBase64(bytes) {
-    const CHUNK_SIZE = 0x8000;
-    let binary = '';
-    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
-        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
-    }
-    return btoa(binary);
-}
-
-function fromResizeObserver(elem) {
-    return new Observable((subscriber) => {
-        const observer = new window.ResizeObserver((entries) => subscriber.next(entries));
-        observer.observe(elem);
-        return () => observer.unobserve(elem);
-    });
-}
-
-/*
- * Copyright (c) 2026.
- * 3DSource.com. Sergii Karanda steve@3dsource.com. All Rights Reserved.
- */
-/**
- * Rounds a number to the nearest even integer (rounding up for odd values).
- *
- * Video encoders (H.264/H.265) require even dimensions because chroma subsampling
- * operates on 2×2 pixel blocks. Odd dimensions cause encoding artifacts or failures.
- *
- * @param value - The number to round to the nearest even integer.
- * @returns The nearest even integer greater than or equal to the input.
- *
- * @example
- * makeEven(1079) // 1080
- * makeEven(1080) // 1080
- * makeEven(1081) // 1082
- */
-function makeEven(value) {
-    return Math.floor((value + 1) / 2) * 2;
-}
-
-const FULL_HD_PIXELS = FULL_HD_WIDTH * FULL_HD_HEIGHT;
-const UHD_PIXELS = FULL_HD_WIDTH * 2 * (FULL_HD_HEIGHT * 2);
-/**
- * Calculates the optimal stream resolution for studio mode.
- *
- * Fits the studio aspect ratio into the container (scaled by pixelRatio), then
- * caps the total pixel count to a budget (Full HD or 4K) to avoid overloading
- * the GPU/encoder while maximizing visual quality.
- *
- * The pixel budget approach (instead of per-dimension caps) ensures that
- * non-standard aspect ratios (portrait, ultra-wide, square) utilize available
- * pixels efficiently — e.g. a tall 1080×1920 stream uses the same pixel budget
- * as a wide 1920×1080 stream.
- *
- * Resolution is always capped at the studio dimensions — never upscaled beyond
- * what the Unreal scene was designed for.
- *
- * @param params.pixelRatio - Device pixel ratio (`window.devicePixelRatio`).
- * @param params.containerWidth - CSS width of the video container in pixels.
- * @param params.containerHeight - CSS height of the video container in pixels.
- * @param params.studioWidth - Target width of the MetaBox Studio scene.
- * @param params.studioHeight - Target height of the MetaBox Studio scene.
- * @param params.maxResolution - When `true`, uses 4K pixel budget (3840×2160);
- *   otherwise Full HD (1920×1080). Controlled by `?maxresolution` query param.
- * @returns An {@link Area} with the calculated `w`, `h`, position (`x`, `y`),
- *   and `scale` factor relative to the container's device-pixel size.
- */
-function getResizeStudioValues(params) {
-    const { pixelRatio, containerWidth, containerHeight, studioWidth, studioHeight, maxResolution, } = params;
-    const maxSpace = {
-        w: containerWidth * pixelRatio,
-        h: containerHeight * pixelRatio,
-    };
-    const maxPixels = maxResolution ? UHD_PIXELS : FULL_HD_PIXELS;
-    const videoSizePixelPerfect = fitIntoRectangle({ x: 0, y: 0, w: studioWidth, h: studioHeight }, { x: 0, y: 0, ...maxSpace });
-    let w = videoSizePixelPerfect.w;
-    let h = videoSizePixelPerfect.h;
-    if (w * h > maxPixels) {
-        // Derive uniform scale factor `s` from: (w*s) * (h*s) = maxPixels
-        // → w * h * s² = maxPixels → s = √(maxPixels / (w * h)).
-        // Applying the same `s` to both dimensions preserves the aspect ratio.
-        const scaleFactor = Math.sqrt(maxPixels / (w * h));
-        w = w * scaleFactor;
-        h = h * scaleFactor;
-    }
-    const out = fitIntoRectangle(videoSizePixelPerfect, {
-        x: videoSizePixelPerfect.x,
-        y: videoSizePixelPerfect.y,
-        w,
-        h,
-    });
-    out.w = makeEven(out.w);
-    out.h = makeEven(out.h);
-    return out;
-}
-/**
- * Calculates the optimal stream resolution for configurator (non-studio) mode.
- *
- * Uses the full container area (scaled by pixelRatio) as the stream resolution,
- * then caps total pixel count to a budget (Full HD or 4K) to prevent excessive
- * GPU/encoder load while preserving the container's aspect ratio.
- *
- * Unlike {@link getResizeStudioValues}, there is no fixed studio resolution to
- * fit into — the container itself defines the aspect ratio, and the stream fills
- * it entirely (no letterboxing).
- *
- * @param params.pixelRatio - Device pixel ratio (`window.devicePixelRatio`).
- * @param params.containerWidth - CSS width of the video container in pixels.
- * @param params.containerHeight - CSS height of the video container in pixels.
- * @param params.maxResolution - When `true`, uses 4K pixel budget (3840×2160);
- *   otherwise Full HD (1920×1080). Controlled by `?maxresolution` query param.
- * @returns An {@link Area} with the calculated `w`, `h`, position (`x`, `y`),
- *   and `scale` factor (1 when no downscale needed, <1 when capped).
- */
-function getResizeValuesUniversal(params) {
-    const { pixelRatio, containerWidth, containerHeight, maxResolution } = params;
-    const maxSpace = {
-        w: containerWidth * pixelRatio,
-        h: containerHeight * pixelRatio,
-    };
-    const maxPixels = maxResolution ? UHD_PIXELS : FULL_HD_PIXELS;
-    let w = maxSpace.w;
-    let h = maxSpace.h;
-    if (w * h > maxPixels) {
-        // Derive uniform scale factor `s` from: (w*s) * (h*s) = maxPixels
-        // → w * h * s² = maxPixels → s = √(maxPixels / (w * h)).
-        // Applying the same `s` to both dimensions preserves the aspect ratio.
-        const scaleFactor = Math.sqrt(maxPixels / (w * h));
-        w = w * scaleFactor;
-        h = h * scaleFactor;
-    }
-    return { w: makeEven(w), h: makeEven(h), x: 0, y: 0, scale: w / maxSpace.w };
-}
+    return {
+        ...state,
+        commandsInProgress,
+        // +1 for the just-completed command, +exiled for stragglers we GC'd.
+        totalCommandsCompleted: state.totalCommandsCompleted + 1 + exiled,
+    };
+}));
+
+const unrealFeature = createFeature({
+    name: 'unrealFeature',
+    reducer: unrealReducer,
+});
 
 /**
  * `'metabox'` — the default when `UNREAL_CONFIG` omits `mode` — speaks the full
@@ -1332,14 +930,30 @@ class WebrtcErrorModalComponent {
     close() {
         this.#dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"unreal-modal\">\n  <header class=\"unreal-modal__header\"></header>\n  <section class=\"unreal-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"unreal-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"unreal-modal__footer\">\n    <app-unreal-button\n      (clicked)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </app-unreal-button>\n  </footer>\n</div>\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__body{width:100%}.unreal-modal .unreal-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.unreal-modal .unreal-modal__body a{word-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WebrtcErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: WebrtcErrorModalComponent, isStandalone: true, selector: "app-webrtc-error-modal", ngImport: i0, template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"unreal-modal\">\n  <header class=\"unreal-modal__header\"></header>\n  <section class=\"unreal-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"unreal-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"unreal-modal__footer\">\n    <app-unreal-button\n      (clicked)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </app-unreal-button>\n  </footer>\n</div>\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__body{width:100%}.unreal-modal .unreal-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.unreal-modal .unreal-modal__body a{word-wrap:break-word;white-space:normal}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WebrtcErrorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-webrtc-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent], template: "<div [attr.data-testid]=\"'webrtc-error-modal'\" class=\"unreal-modal\">\n  <header class=\"unreal-modal__header\"></header>\n  <section class=\"unreal-modal__body\">\n    <div [attr.data-testid]=\"'title'\" class=\"unreal-modal__title\">\n      WebRTC error\n    </div>\n    <div style=\"text-align: left\">\n      An internet connection type (WebRTC) appears to be blocked either by your\n      browser settings or your current network. If WebRTC is blocked on your\n      browser you may be able to adjust these settings yourself based on\n      instructions here:\n      <a href=\"https://myownconference.com/blog/en/webrtc/\" target=\"blank\"\n        >https://myownconference.com/blog/en/webrtc/</a\n      >\n      <br /><br />\n      Trying a different web browser may help confirm this as well. If WebRTC is\n      blocked by your network, try switching to a different network if possible\n      or contact your network administrator.<br /><br />\n      WebRTC is common, safe and increasingly utilised method for streaming real\n      time 3D experiences via a web browser. It typically consumes no more\n      bandwidth than streaming an HD video.\n    </div>\n  </section>\n  <footer class=\"unreal-modal__footer\">\n    <app-unreal-button\n      (clicked)=\"closeModalWithCirrusDisconnect()\"\n      [data-testid]=\"'close-webrtc-error-modal'\"\n      weight=\"primary\"\n    >\n      Ok\n    </app-unreal-button>\n  </footer>\n</div>\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__body{width:100%}.unreal-modal .unreal-modal__body p{color:var(--src-text-body-main, #1f2937);font-size:14px;font-style:normal;font-weight:400;line-height:24px;margin-top:0}.unreal-modal .unreal-modal__body a{word-wrap:break-word;white-space:normal}\n"] }]
         }] });
 
+class SubService {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.destroy$ = new Subject();
+        this.actions$ = inject(Actions);
+        this.store = inject(Store);
+        this.disconnect$ = this.store
+            .select(unrealFeature.selectCirrusConnected)
+            .pipe(skip(1), filter(Falsy), share());
+        this.destroyRef.onDestroy(() => {
+            this.destroy$.next();
+            this.destroy$.complete();
+        });
+    }
+}
+
 class CommandTelemetryService extends SubService {
     constructor() {
         super();
@@ -1542,10 +1156,10 @@ class CommandTelemetryService extends SubService {
         this.trackTime(out);
         funcToDecorate(out);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CommandTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CommandTelemetryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CommandTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CommandTelemetryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CommandTelemetryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CommandTelemetryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -1566,10 +1180,10 @@ class DevModeService {
             localStorage.removeItem('devMode');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DevModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DevModeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DevModeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DevModeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DevModeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: DevModeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1615,7 +1229,7 @@ class RegionsPingService {
                 return of(cached).pipe(tap(() => this.store.dispatch(regionPingFetchEnd())), tap((data) => this.store.dispatch(regionResolved({
                     region: data.region_code,
                     pingsMs: data.result,
-                }))), map$1((data) => data.region_code));
+                }))), map((data) => data.region_code));
             }
             // No regions URL and no cache: there is nothing to ping. Bail out loudly
             // instead of letting `HttpClient.get('')` request the current document
@@ -1638,7 +1252,7 @@ class RegionsPingService {
             }), tap((data) => this.store.dispatch(regionResolved({
                 region: data?.region_code ?? '',
                 pingsMs: data?.result ?? [],
-            }))), map$1((data) => data?.region_code));
+            }))), map((data) => data?.region_code));
         });
     }
     /**
@@ -1888,10 +1502,10 @@ class RegionsPingService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: RegionsPingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: RegionsPingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RegionsPingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RegionsPingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: RegionsPingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: RegionsPingService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2162,24 +1776,20 @@ class SignallingService extends SubService {
         this.onConfig$ = new Subject();
         this.onWebRtcIce$ = new Subject();
         this.onWebRtcAnswer$ = new Subject();
-        // Fed by `InstanceReadyHandler`. `requestCirrusViaSocket` awaits it the same
-        // way `requestCirrusViaPolling` awaits a ready polling response — it is the
-        // socket flow's "here is your Cirrus URL" answer.
+        // Fed by `InstanceReadyHandler` — the socket flow's "here is your Cirrus URL".
         this.onInstanceReady$ = new Subject();
-        // Pure signal — no side-effects. The `close()` is wired ONCE in init()
-        // below so a single abort event triggers exactly one close, regardless
-        // of how many pipelines have `takeUntil(this.abort$)` attached.
+        // Pure signal, no side-effects: `close()` is wired ONCE in init(), so one abort
+        // triggers exactly one close however many pipelines `takeUntil` it.
         this.abort$ = this.actions$.pipe(ofType(abortEstablishingConnection));
-        // The CIRRUS signalling socket — the only socket that speaks WebRTC
-        // (config/offer/answer/iceCandidate/ping). Same field in all three flows:
-        // the polled `signallingServer`, the stream machine (`originInstanceUri`), or
-        // a direct dev URL.
+        // The CIRRUS signalling socket — the only one that speaks WebRTC. Same field in
+        // all three flows: polled `signallingServer`, stream machine, or direct dev URL.
         this.ws = null;
-        // The orchestration CONTROL socket (socket flow only). Opened by
-        // `requestCirrusViaSocket` to ask for a machine and closed the moment
-        // `instanceReady` arrives — per the backend contract nothing uses it after the
-        // handover, so it is never left open with dangling handlers.
+        // The orchestration CONTROL socket while we still talk to it (socket flow only).
+        // The only one `sendToOrchestration` can reach — `sendTo` ignores a null socket.
         this.controlWs = null;
+        // Handed over: open, only a log-only `onclose` left, waiting for orchestration
+        // to close it. Why we must not: SIGNALLING.md, "Who closes the control socket".
+        this.handedOverControlWs = null;
         // `requestStream` resends driven by `OrchestrationErrorHandler` within one
         // `requestCirrusViaSocket` wait. Reported as `kind: 'orchestration'` retries.
         this.orchestrationRetryCount = 0;
@@ -2191,22 +1801,18 @@ class SignallingService extends SubService {
             return;
         }
         this.setMessageHandlers();
-        // Single owner of the "close on abort" side-effect. Previously this
-        // lived as a `tap` inside `abort$` itself, which made every
-        // `takeUntil(this.abort$)` subscriber fire its own close().
+        // Single owner of the close-on-abort side-effect — must not live as a `tap`
+        // inside `abort$`, or every `takeUntil` subscriber fires its own close().
         this.abort$.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.close({
                 code: 1000,
                 reason: DisconnectReason.AbortEstablishingConnection,
             });
         });
-        // `dataChannelReady` is a per-session event. Bind ONLY to destroy$, not
-        // to abort$ — `abort$` fires on every destroyUnrealScene (route swap),
-        // and `init()` runs once in the constructor. If these subs were torn
-        // down by abort$, a second in-injector session (e.g. navigating between
-        // two routes that both host <app-unreal-scene>) would never send
-        // `p2pEstablished`. `send()` is already a no-op on a closed WS,
-        // so there's no risk of stray messages.
+        // Bind to destroy$, NOT abort$: `init()` runs once in the constructor, and
+        // abort$ fires on every route swap — tearing this down there would leave a
+        // second session unable to send `p2pEstablished`. `send()` no-ops on a closed
+        // WS anyway, so a stray message is not a risk.
         this.actions$
             .pipe(ofType(dataChannelReady), takeUntil(this.destroy$))
             .subscribe(() => {
@@ -2226,26 +1832,17 @@ class SignallingService extends SubService {
             return EMPTY;
         }
         Logger.log('CONNECT TO SIGNALLING');
-        // Side-effects that belong to one logical `connectToSignaling`
-        // invocation (NOT one retry attempt). Wrapping them in a `defer`
-        // makes them fire on subscribe (lazy), but only ONCE — the retry
-        // below sits INSIDE this defer's projection so re-subscribing the
-        // inner pipeline does not re-trigger these.
+        // These belong to one logical `connectToSignaling`, NOT to one retry attempt:
+        // the retry below sits INSIDE this defer, so re-subscribing does not re-run them.
         return defer(() => {
             this.correlationId = generateUuid();
             this.commandTelemetryService.reset();
             this.startEstablishingConnection();
-            // Staged retry:
-            //   * `getRegion()` is pulled in front of the retry — region
-            //     discovery happens once per outer cycle.
-            //   * `connectAttempt(urls)` owns inner retry + URL rotation +
-            //     WS connect. WS/orch failures stay inside it (capped at
-            //     `INNER_RETRY_LIMIT`).
-            //   * If the inner retry exhausts, the error propagates to the
-            //     OUTER retry below which re-runs `getRegion()` (rare, real
-            //     "region down" case). Outer delay > inner so escalation is
-            //     bounded.
-            const connectCycle$ = this.getRegion().pipe(tap((region) => this.region.set(region ?? '')), map$1((region) => this.adaptUrlsToRegion(urlList, region)), switchMap((urls) => this.connectAttempt(urls)), takeUntil(this.abort$));
+            // Staged retry: `connectAttempt` owns URL rotation + WS connect and caps
+            // itself at `INNER_RETRY_LIMIT`; only its exhaustion reaches the outer retry,
+            // which re-picks the region (rare, real "region down"). Outer delay > inner,
+            // so escalation is bounded and region discovery runs once per outer cycle.
+            const connectCycle$ = this.getRegion().pipe(tap((region) => this.region.set(region ?? '')), map((region) => this.adaptUrlsToRegion(urlList, region)), switchMap((urls) => this.connectAttempt(urls)), takeUntil(this.abort$));
             return connectCycle$.pipe(retry({
                 delay: (err, attempt) => {
                     this.store.dispatch(signalingRetryAttempted({
@@ -2260,41 +1857,32 @@ class SignallingService extends SubService {
         }).pipe(takeUntil(this.abort$));
     }
     /**
-     * One inner cycle: rotate `urlGen` over the pool, resolve via
-     * {@link requestCirrus}, open WS via {@link connectToCirrus},
-     * retry up to {@link INNER_RETRY_LIMIT} on any hard failure. The
-     * urlGen lives in this closure so retries advance through the
-     * pool. Exhaustion bubbles to {@link connectToSignaling}'s outer
-     * retry which re-pings the region.
+     * One inner cycle: {@link requestCirrus} → {@link connectToCirrus}, retried up to
+     * {@link INNER_RETRY_LIMIT}. `urlGen` lives in this closure so retries advance
+     * through the pool; exhaustion bubbles to the outer region-repick retry.
      */
     connectAttempt(urls) {
         const urlGen = getActiveUrl(urls);
         return defer(() => {
             // One control socket per ATTEMPT, whatever transport this attempt picks —
             // a rotation from a `wss://` orchestration URL to an `http://` one would
-            // otherwise leave the previous control socket behind. Deliberately NOT
-            // inside the WS-only tier below: that tier reuses the same resolved
-            // machine, so its control socket must survive.
+            // otherwise leave the previous control socket behind. This also releases a
+            // handed-over one: rotating abandons that reservation, so orchestration
+            // SHOULD see it close. Deliberately NOT inside the WS-only tier below —
+            // that tier reuses the same machine, so its control socket must survive.
             this.teardownControlWs();
             return this.requestCirrus(`${urlGen.next().value}`);
         }).pipe(tap((awsInstance) => this.store.dispatch(setAwsInstance(awsInstance))), switchMap(({ wsUrl, streamRequestId }) => 
         // ── WS-only retry tier ─────────────────────────────────────────────
-        // Tries the SAME `wsUrl` up to `WS_RETRY_PER_INSTANCE` extra times
-        // before letting the error bubble up to the outer (URL-rotating)
-        // retry. This is important because the outer retry calls
-        // `requestCirrus(url)` again, which asks orchestration again,
-        // which causes orchestrator to RESERVE A NEW instance — the
-        // previous reservation is orphaned (server-side leak).
+        // Retries the SAME `wsUrl` `WS_RETRY_PER_INSTANCE` times before letting the
+        // error reach the URL-rotating tier, because rotating re-asks orchestration
+        // and RESERVES A NEW instance, orphaning the previous one (server-side
+        // leak). So transient WS failures are absorbed here; only a genuinely
+        // unusable instance is worth that cost.
         //
-        // The same-wsUrl retry catches transient WS failures (network
-        // blip, brief region unavailability, slow cold handshake) without
-        // burning a second reservation. If WS still fails after these
-        // extra attempts, the instance is genuinely unusable and we
-        // accept the cost of rotating.
-        // `wsUrl` is always a CIRRUS address here, whichever request method
-        // produced it, so the orchestration-issued connection id always rides
-        // on this upgrade URL and Cirrus adopts it instead of generating its
-        // own. Absent id (older backend, direct dev URL) → URL unchanged.
+        // `wsUrl` is always a CIRRUS address, so the orchestration-issued
+        // connection id rides on the upgrade URL and Cirrus adopts it instead of
+        // generating its own. Absent id (older backend, dev URL) → URL unchanged.
         this.connectToCirrus(withStreamRequestId(wsUrl ?? '', streamRequestId)).pipe(filter(Truthy), take(1), retry({
             count: WS_RETRY_PER_INSTANCE,
             delay: (err, attempt) => {
@@ -2327,14 +1915,11 @@ class SignallingService extends SubService {
         }));
     }
     /**
-     * Status message for the connect branch. It does NOT dispatch
-     * `setEstablishingConnection` — `UnrealEffects.connectToSignaling$` already
-     * emits that once per logical attempt via `startWith(...)`, covering BOTH
-     * branches (prefetch adoption and a fresh connect). Dispatching it here as
-     * well fired the boundary twice on every cold start, and since
-     * `StreamStatusTelemetryService2` starts a session on that boundary, the
-     * first session was killed 2 ms in as `restart` — losing the only honest
-     * page-load measurement and the prefetch adoption with it.
+     * Status message only — must NOT dispatch `setEstablishingConnection`, which
+     * `UnrealEffects.connectToSignaling$` already emits once per logical attempt for
+     * both branches. Dispatching it here too fired that boundary twice on cold start,
+     * and `StreamStatusTelemetryService2` starts a session on it — so the first
+     * session died 2 ms in as `restart`, taking the page-load measurement with it.
      */
     startEstablishingConnection() {
         this.showStatusMessage(UnrealStatusMessage.STARTING_YOUR_SESSION);
@@ -2348,22 +1933,11 @@ class SignallingService extends SubService {
         });
     }
     /**
-     * Ask the orchestration for a Cirrus to connect to. All three
-     * implementations answer the same question — "which Cirrus, and with which
-     * `streamRequestId`?" — and emit ONE `AwsInstance` whose `wsUrl` is a Cirrus
-     * address. What differs is only how the answer is obtained and therefore how
-     * it can fail:
-     *
-     * | Method                     | Transport            | Fails on                       |
-     * | -------------------------- | -------------------- | ------------------------------ |
-     * | {@link requestCirrusViaPolling} | HTTP poll loop  | HTTP 4xx (dead URL)            |
-     * | {@link requestCirrusViaSocket}  | control WS      | socket drop / no `instanceReady` in {@link INSTANCE_READY_TIMEOUT} |
-     * | {@link requestCirrusDirect}     | none (dev)      | never — nothing is requested   |
-     *
-     * Whatever they return goes through the SAME downstream in
-     * {@link connectAttempt}: `setAwsInstance` → `connectToCirrus` → the WS-only
-     * and URL-rotating retry tiers. A failure inside any of them is just an
-     * error on this observable, so those tiers handle it uniformly.
+     * Ask the orchestration for a Cirrus to connect to. All three implementations
+     * answer the same question — which Cirrus, with which `streamRequestId` — and emit
+     * ONE `AwsInstance` whose `wsUrl` is a Cirrus address, so {@link connectAttempt}
+     * treats them uniformly: a failure in any of them is just an error here, which its
+     * retry tiers already handle. Per-transport failure surface: SIGNALLING.md.
      */
     requestCirrus(url) {
         if (!url.match(/^ws(s?):\/\//i)) {
@@ -2393,18 +1967,16 @@ class SignallingService extends SubService {
      * `kind`: nothing was requested.
      */
     requestCirrusDirect(url) {
-        return this.waitForClientAndViewIds().pipe(map$1(() => ({
+        return this.waitForClientAndViewIds().pipe(map(() => ({
             wsUrl: url,
             pollingUrl: null,
             instanceName: 'Direct Connection',
         })));
     }
     /**
-     * HTTP-orchestration path. Brackets {@link pollLoop} with the
-     * `pollingStarted`/`pollingEnded` actions and the `EXT-getSignaling`
-     * telemetry span (start in `defer`, stop in `finalize` with the
-     * last response captured in the closure). Maps the final ready
-     * response to an `AwsInstance`.
+     * HTTP-orchestration path. Brackets {@link pollLoop} with `pollingStarted`/
+     * `pollingEnded` and the `EXT-getSignaling` telemetry span (started in `defer`,
+     * stopped in `finalize` with the last response from the closure).
      */
     requestCirrusViaPolling(url) {
         return defer(() => {
@@ -2417,7 +1989,7 @@ class SignallingService extends SubService {
                 }
             }), filter(({ clientId, viewId }) => !!clientId && !!viewId), take(1), switchMap(({ clientId, viewId }) => this.pollLoop(`${url}${clientId}/${viewId}`).pipe(tap((data) => {
                 lastResp = data;
-            }))), map$1((data) => ({
+            }))), map((data) => ({
                 wsUrl: httpUrlToWs(`${location.protocol}//${data.signallingServer}`),
                 pollingUrl: url,
                 instanceName: data.signallingServer ?? '',
@@ -2432,19 +2004,14 @@ class SignallingService extends SubService {
         });
     }
     /**
-     * WS-orchestration path — the socket-transport twin of
-     * {@link requestCirrusViaPolling}. Opens the control socket, sends
-     * `requestStream` and waits for `instanceReady`, whose `originInstanceUri`
-     * IS the Cirrus address.
+     * WS-orchestration path — the socket twin of {@link requestCirrusViaPolling}.
+     * Opens the control socket, sends `requestStream`, waits for `instanceReady`
+     * whose `originInstanceUri` IS the Cirrus address.
      *
-     * Failure modes are handled here so they surface as a plain error and reach
-     * `connectAttempt`'s retry tiers (previously this branch lived outside them
-     * and a dead control socket silently hung the session):
-     *  - control socket closes/errors before `instanceReady` → error
-     *  - no `instanceReady` within {@link INSTANCE_READY_TIMEOUT} → error
-     *
-     * The control socket lives exactly as long as this wait — see
-     * {@link awaitInstanceReady}.
+     * Both failure modes — socket drop before `instanceReady`, or no `instanceReady`
+     * within {@link INSTANCE_READY_TIMEOUT} — must surface as a plain error so
+     * `connectAttempt`'s retry tiers see them; without that a dead control socket
+     * hangs the session silently. See {@link awaitInstanceReady}.
      */
     requestCirrusViaSocket(url) {
         return defer(() => {
@@ -2460,47 +2027,44 @@ class SignallingService extends SubService {
      * Send `requestStream` on the freshly opened control socket and resolve with
      * the machine coordinates from `instanceReady`.
      *
-     * The socket lives exactly as long as this wait: its close/error are HARD
-     * failures of the request, and on resolution it is closed with every handler
-     * detached (the backend does not use it after the handover). So the control
-     * socket has no post-handover state at all — nothing that could report a stale
-     * "disconnect" against a live stream.
+     * A race between one answer and two failure signals — until `instanceReady` the
+     * socket's close/error are HARD failures of the request. On success it is handed
+     * over, not closed: {@link handOverControlWs}.
+     *
+     * `on*` properties rather than `fromEvent`: that is how the rest of the file
+     * attaches, and how `teardownSocket` detaches.
      */
     awaitInstanceReady(control, orchestrationUrl) {
-        return new Observable((observer) => {
+        return defer(() => {
+            // Errors straight into `merge` — no value it could carry, so `error()` rather
+            // than `next()` and there is nothing to map.
+            const failure$ = new Subject();
             control.onmessage = OnMessageHandler.bind(this);
-            control.onclose = (e) => observer.error(new Error(`Orchestration socket closed before instanceReady (code ${e.code})`));
-            control.onerror = () => observer.error(new Error('Orchestration socket error before instanceReady'));
+            control.onclose = (e) => failure$.error(new Error(`Orchestration socket closed before instanceReady (code ${e.code})`));
+            control.onerror = () => failure$.error(new Error('Orchestration socket error before instanceReady'));
             this.controlWs = control;
             Logger.log('ORCHESTRATION CONTROL WS OPEN');
             this.sendRequestStream();
-            const sub = this.onInstanceReady$.pipe(take(1)).subscribe((payload) => {
-                // The control socket has done its only job. Per the backend contract it
-                // is not used after the handover, so it is closed here — with all its
-                // handlers detached by `teardownSocket`, which also means the close
-                // itself cannot come back as an error above.
-                this.teardownControlWs();
-                observer.next({
-                    wsUrl: payload.originInstanceUri,
-                    // The endpoint that answered — the orchestration URL here, the HTTP
-                    // polling URL in the other flow. Shown as `Orchestration:` in the overlay.
-                    pollingUrl: orchestrationUrl,
-                    instanceName: payload.originInstanceId,
-                    streamRequestId: payload.streamRequestId,
-                    kind: 'socket',
-                });
-                observer.complete();
-            });
-            // Errored, timed out or aborted before `instanceReady` — same teardown,
-            // the socket must not be left behind either way.
-            return () => {
-                sub.unsubscribe();
-                this.teardownControlWs();
-            };
+            return merge(this.onInstanceReady$.pipe(map((payload) => ({
+                wsUrl: payload.originInstanceUri,
+                // The endpoint that answered — the orchestration URL here, the HTTP
+                // polling URL in the other flow. Shown as `Orchestration:` in the overlay.
+                pollingUrl: orchestrationUrl,
+                instanceName: payload.originInstanceId,
+                streamRequestId: payload.streamRequestId,
+                kind: 'socket',
+            }))), failure$).pipe(first(), tap(() => this.handOverControlWs(control)));
         }).pipe(timeout$1({
             first: INSTANCE_READY_TIMEOUT,
             with: () => throwError(() => new Error(`No instanceReady within ${INSTANCE_READY_TIMEOUT}ms — requesting another machine`)),
-        }), takeUntil(this.abort$));
+        }), takeUntil(this.abort$), 
+        // After `takeUntil`, so every ending lands here. Still ours ⇒ the request
+        // failed; after a handover the field is null and we must NOT close.
+        finalize(() => {
+            if (this.controlWs === control) {
+                this.teardownControlWs();
+            }
+        }));
     }
     /**
      * Poll the SAME `url` until ready, or until HTTP 4xx says the URL
@@ -2513,9 +2077,8 @@ class SignallingService extends SubService {
      * | HTTP 4xx (except 429)                    | ❌ Hard    | Re-throw → caller rotates URL |
      * | HTTP 5xx / 429 / timeout / network       | ⚠️ Soft    | `EMPTY` → `repeat` same URL  |
      *
-     * `data.error` is NOT treated as fatal — the backend reuses it for
-     * progress strings like `"Ready in ~2m 23s"`. The only fatal exits
-     * are HTTP 4xx and `abort$` upstream.
+     * `data.error` is NOT fatal — the backend reuses it for progress strings like
+     * `"Ready in ~2m 23s"`. Only HTTP 4xx and upstream `abort$` are fatal.
      */
     pollLoop(url) {
         return defer(() => this.httpClient.get(url)).pipe(timeout$1(POLLING_TIME), catchError((err) => {
@@ -2550,16 +2113,12 @@ class SignallingService extends SubService {
         first((data) => !!data.signallingServer));
     }
     connectToCirrus(wsUrl) {
-        // Wrapped in `defer` so each subscription (including ws-retry
-        // re-subscriptions from `connectAttempt`) starts a FRESH WS attempt:
-        // the previous socket is closed and a new one is created. Without
-        // this, the WS-only retry would just re-subscribe the SAME WS
-        // observable, which in production-defer'd `createWebSocket` would
-        // still create a new socket, but in tests would re-emit the same
-        // (already-errored) mock observable.
+        // `defer` so every subscription — including ws-retry re-subscriptions — starts a
+        // FRESH attempt. Without it the retry re-subscribes the SAME observable, which in
+        // tests re-emits the already-errored mock.
         return defer(() => {
-            // Only the Cirrus socket — the control socket belongs to
-            // `requestCirrusViaSocket`, which already opened it to GET this `wsUrl`.
+            // Cirrus only: the control socket belongs to `requestCirrusViaSocket`, which
+            // opened it to GET this `wsUrl`.
             this.closeCirrus({
                 code: 1000,
                 reason: DisconnectReason.NewConnectionAttempt,
@@ -2571,9 +2130,9 @@ class SignallingService extends SubService {
         }));
     }
     /**
-     * Handlers for the CIRRUS socket — the only long-lived socket. Its close/error
-     * are real stream events (`setCirrusDisconnected` / `dropConnection`), unlike
-     * the control socket's, which never outlives {@link awaitInstanceReady}.
+     * Handlers for the CIRRUS socket — the only socket whose close/error are real
+     * stream events (`setCirrusDisconnected` / `dropConnection`). The control socket
+     * outlives {@link awaitInstanceReady} too, but with a log-only `onclose`.
      */
     addWsHandlers(ws) {
         ws.onmessage = OnMessageHandler.bind(this);
@@ -2584,12 +2143,10 @@ class SignallingService extends SubService {
         OnOpenHandler.call(this);
     }
     /**
-     * Adopt a live signalling socket opened by the `stream-prefetch.js`
-     * head-script. The socket is already OPEN and `requestStream` was already
-     * sent, so — unlike {@link addWsHandlers} — we attach message/close/error
-     * handlers but deliberately skip {@link OnOpenHandler} (which would
-     * `setCirrusConnected` + re-`sendRequestStream`). Reuses the head-script's
-     * `correlationId` so subsequent correlated messages line up.
+     * Adopt a live socket from the `stream-prefetch.js` head-script. Already OPEN with
+     * `requestStream` sent, so unlike {@link addWsHandlers} this skips
+     * {@link OnOpenHandler} (which would re-`setCirrusConnected`). Reuses the
+     * head-script's `correlationId` so correlated messages line up.
      */
     adoptSocket(ws, correlationId) {
         this.correlationId = correlationId;
@@ -2603,14 +2160,14 @@ class SignallingService extends SubService {
         this.store.dispatch(setStatusMessage({ statusMessage }));
     }
     /**
-     * Close everything: the Cirrus socket AND the orchestration control socket.
-     * Used on abort/teardown. A new connection attempt inside a live cycle uses
-     * {@link closeCirrus} instead, so it does not kill the control socket that
-     * produced the address it is about to connect to.
+     * Abort/teardown: closes the Cirrus socket AND the control one, handed over or
+     * not (`abort$` fans in `setCirrusDisconnected` / `dropConnection` /
+     * `destroyUnrealScene`). A new attempt inside a live cycle uses
+     * {@link closeCirrus}, so it does not kill the socket that produced the address
+     * it is about to connect to.
      */
     close(data) {
         const { code, reason } = data;
-        this.orchestrationRetrySub?.unsubscribe();
         this.closeCirrus(data);
         this.teardownControlWs(code, reason);
     }
@@ -2621,10 +2178,45 @@ class SignallingService extends SubService {
         this.teardownSocket(this.ws, code, reason);
         this.ws = null;
     }
+    /**
+     * No control socket survives this — the live one AND one left open by a handover,
+     * so callers need no extra knowledge about which state it is in.
+     */
     teardownControlWs(code = 1000, reason = DisconnectReason.NewConnectionAttempt) {
         this.teardownSocket(this.controlWs, code, reason);
+        this.teardownSocket(this.handedOverControlWs, code, reason);
         this.controlWs = null;
+        this.handedOverControlWs = null;
+        this.orchestrationRetryCount = 0;
+        // No control socket ⇒ no armed resend.
+        this.orchestrationRetrySub?.unsubscribe();
+    }
+    /**
+     * Handover, not teardown: strip the handlers, leave the socket OPEN for
+     * orchestration to close (SIGNALLING.md). Moving it out of `controlWs` is what
+     * closes the send path; dropping `onmessage` is what stops a late `error`
+     * (4001/4002) from arming a resend and reserving a second machine.
+     *
+     * Takes the socket explicitly so it is provably the caller's.
+     */
+    handOverControlWs(ws) {
+        this.orchestrationRetrySub?.unsubscribe();
         this.orchestrationRetryCount = 0;
+        ws.onmessage = () => null;
+        ws.onerror = () => null;
+        // Log-only: an expected close that says nothing about the stream, so no store
+        // event. Releasing the reference keeps the field meaning "open".
+        ws.onclose = (e) => {
+            Logger.log(`ORCHESTRATION CONTROL WS CLOSED BY BACKEND (code ${e.code})`);
+            if (this.handedOverControlWs === ws) {
+                this.handedOverControlWs = null;
+            }
+        };
+        if (this.controlWs === ws) {
+            this.controlWs = null;
+        }
+        this.handedOverControlWs = ws;
+        Logger.log('ORCHESTRATION CONTROL WS HANDED OVER — left open for orchestration');
     }
     teardownSocket(ws, code, reason) {
         if (!ws) {
@@ -2681,16 +2273,13 @@ class SignallingService extends SubService {
         }
     }
     /**
-     * One handler map shared by both sockets — `handleMessage` dispatches purely by
-     * message type. Which socket a type can arrive on is fixed, so registration is
-     * split by origin: {@link setOrchestrationHandlers} (control socket) and
-     * {@link setStreamHandlers} (Cirrus).
+     * One map shared by both sockets — `handleMessage` dispatches purely by type, so
+     * registration is split by origin only for readability.
      *
-     * Keepalive is deliberately absent: both servers ping at the WS **protocol**
-     * level (`ws.ping()`), which the browser answers on its own — the page never
-     * sees a ping and must never reply with an application-level `pong`. An
-     * unregistered type is dropped silently by `handleMessage`, so a `ping` from a
-     * not-yet-updated backend is simply ignored.
+     * Keepalive is deliberately absent: both servers ping at the WS **protocol** level,
+     * which the browser answers itself, so the page must never reply with an
+     * application-level `pong`. An unregistered type is dropped silently, so a `ping`
+     * from a not-yet-updated backend is simply ignored.
      */
     setMessageHandlers() {
         this.setOrchestrationHandlers();
@@ -2698,12 +2287,12 @@ class SignallingService extends SubService {
     }
     /**
      * Messages from the ORCHESTRATION control socket. Only reachable during the
-     * provisioning wait — `requestCirrusViaSocket` closes that socket the moment
-     * `instanceReady` lands.
+     * provisioning wait: the socket outlives `instanceReady`, but `handOverControlWs`
+     * drops its `onmessage`, so nothing routes here afterwards.
      */
     setOrchestrationHandlers() {
-        // `instanceReserved` (eta/progress) and `instanceReady` (the Cirrus address)
-        // ARE the request/response pair of `requestCirrusViaSocket`.
+        // `instanceReserved` (eta) + `instanceReady` (the Cirrus address) are the
+        // request/response pair of `requestCirrusViaSocket`.
         this.wsMsgHandlers.instanceReserved = InstanceReservedHandler.bind(this);
         this.wsMsgHandlers.instanceReady = InstanceReadyHandler.bind(this);
         // Orchestration-side refusals (4001 no instances / 4002 limit reached) →
@@ -2737,9 +2326,9 @@ class SignallingService extends SubService {
         });
     }
     /**
-     * Is the player-signalling socket open? Always the Cirrus socket — the
-     * control socket's state is irrelevant to the stream (orchestration closes it
-     * once the instance is occupied), so it must not be part of this gate.
+     * Cirrus only — the control socket's state says nothing about the stream
+     * (orchestration closes it once the instance is occupied), so it must stay out
+     * of this gate.
      */
     isConnected() {
         return !!(this.ws && this.ws.readyState === WS_OPEN_STATE);
@@ -2748,10 +2337,10 @@ class SignallingService extends SubService {
         Logger.log('Start Getting Region');
         return this.regionsPingService.getFastest().pipe(take(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SignallingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SignallingService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignallingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignallingService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SignallingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SignallingService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -2779,7 +2368,7 @@ class VideoService extends SubService {
         this.videoStats$ = this.videoTrack$.pipe(
         // If videoTrack$ emits null, switch to EMPTY → the current interval is canceled.
         switchMap$1((track) => track
-            ? interval(250).pipe(map(() => track.pcClient), switchMap$1((pcClient) => from(this.getStats(pcClient))), filter(Truthy))
+            ? interval(250).pipe(map$1(() => track.pcClient), switchMap$1((pcClient) => from(this.getStats(pcClient))), filter(Truthy))
             : of(null)), filter(Truthy), share());
         this.destroyAbort = new AbortController();
         // Teardown is wired ONCE here instead of per `create()`. The per-create
@@ -3166,10 +2755,10 @@ class VideoService extends SubService {
             this.armGestureRetry(audio);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VideoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VideoService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VideoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VideoService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VideoService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VideoService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -3625,25 +3214,25 @@ class WebRtcPlayerService extends SubService {
     }
     handlePeerConnectionEvents(pcClient) {
         fromEvent(pcClient, 'signalingstatechange')
-            .pipe(map$1(() => this.pcClient?.signalingState), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(map(() => this.pcClient?.signalingState), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((state) => {
             Logger.info('[Signaling state change] |', state, '|');
             this.commandTelemetryService.trackStopCommand('EXT-Signaling state change', true, { state, multi: true });
         });
         fromEvent(pcClient, 'iceconnectionstatechange')
-            .pipe(map$1(() => this.pcClient?.iceConnectionState), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(map(() => this.pcClient?.iceConnectionState), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((state) => {
             Logger.info('[Browser ICE connection] |', state, '|');
             this.commandTelemetryService.trackStopCommand('EXT-Browser ICE connection', true, { state, multi: true });
         });
         fromEvent(pcClient, 'icegatheringstatechange')
-            .pipe(map$1(() => this.pcClient?.iceGatheringState), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(map(() => this.pcClient?.iceGatheringState), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((state) => {
             Logger.info('[Browser ICE gathering] |', state, '|');
             this.commandTelemetryService.trackStopCommand('EXT-Browser ICE gathering', true, { state, multi: true });
         });
         fromEvent(pcClient, 'connectionstatechange')
-            .pipe(map$1(() => this.pcClient?.connectionState), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(map(() => this.pcClient?.connectionState), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((state) => {
             Logger.info('[RTCPeerConnection state] |', state, '|');
             // A genuine ICE failure (not a manual dropDC/dropPC, which recover via
@@ -3660,7 +3249,7 @@ class WebRtcPlayerService extends SubService {
             }
         });
         fromEvent(pcClient, 'icecandidate')
-            .pipe(map$1((e) => e.candidate), filter(Truthy), tap$1((candidate) => Logger.info('[Browser ICE candidate]', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|')), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(map((e) => e.candidate), filter(Truthy), tap$1((candidate) => Logger.info('[Browser ICE candidate]', '| Type=', candidate.type, '| Protocol=', candidate.protocol, '| Address=', candidate.address, '| Port=', candidate.port, '|')), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((candidate) => this.signallingSrv.send({
             type: 'iceCandidate',
             candidate,
@@ -3668,7 +3257,7 @@ class WebRtcPlayerService extends SubService {
         // When the server creates the DataChannel (server-offer flow),
         // we receive it here via the 'datachannel' event
         fromEvent(pcClient, 'datachannel')
-            .pipe(tap$1((e) => Logger.info(`[DATACHANNEL] Received remote DC: label="${e.channel.label}" id=${e.channel.id} protocol="${e.channel.protocol}" ordered=${e.channel.ordered}`)), map$1((e) => e.channel), takeUntil(merge(this.disconnect$, this.destroy$)))
+            .pipe(tap$1((e) => Logger.info(`[DATACHANNEL] Received remote DC: label="${e.channel.label}" id=${e.channel.id} protocol="${e.channel.protocol}" ordered=${e.channel.ordered}`)), map((e) => e.channel), takeUntil(merge(this.disconnect$, this.destroy$)))
             .subscribe((datachannel) => {
             this.dcClient = this.setupDataChannelCallbacks(datachannel);
         });
@@ -3679,10 +3268,10 @@ class WebRtcPlayerService extends SubService {
             ' readyState=' +
             e.track.readyState)), share());
         onTrack$
-            .pipe(filter((e) => e.track.kind === 'audio'), map$1((e) => e.streams[0]))
+            .pipe(filter((e) => e.track.kind === 'audio'), map((e) => e.streams[0]))
             .subscribe((stream) => this.videoService.attachAudioStream(stream));
         onTrack$
-            .pipe(filter((e) => e.track.kind === 'video'), map$1((e) => e.streams[0]), tap$1(() => Logger.info('Set video source from video track ontrack.')))
+            .pipe(filter((e) => e.track.kind === 'video'), map((e) => e.streams[0]), tap$1(() => Logger.info('Set video source from video track ontrack.')))
             .subscribe((stream) => {
             if (this.pcClient) {
                 this.videoService.attachVideoStream(stream, this.pcClient);
@@ -3783,7 +3372,7 @@ class WebRtcPlayerService extends SubService {
                 `[DATACHANNEL] Message received on "${datachannel.label}" id=${datachannel.id}, byteCode=${view[0]}, size=${view.byteLength}`,
               );
             }),*/
-            map$1((e) => e.data), takeUntil(merge(this.disconnect$, this.destroy$)))
+            map((e) => e.data), takeUntil(merge(this.disconnect$, this.destroy$)))
                 .subscribe((data) => this.onDataChannelMessage$.next(data));
             return datachannel;
         }
@@ -3835,10 +3424,10 @@ class WebRtcPlayerService extends SubService {
             Logger.error("Couldn't create answer", e);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WebRtcPlayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WebRtcPlayerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WebRtcPlayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WebRtcPlayerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WebRtcPlayerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WebRtcPlayerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -3964,10 +3553,10 @@ class StreamAdoptionService {
         this.webRtc.adopt(parked.pc, parked.dc, parked.stream, parked.config ?? {}, parked.dcBuffer);
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamAdoptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamAdoptionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamAdoptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamAdoptionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamAdoptionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamAdoptionService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -3999,10 +3588,10 @@ class UnrealCallbackService {
      * ```
      */
     fromUnrealCallback(command) {
-        return this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.command === command), 
+        return this.actions$.pipe(ofType(unrealCommandCallback), map(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.command === command), 
         // Cast is required: after a `command`-based filter TS cannot narrow to a
         // type discriminated on `callback`. The unwrapped object IS the full callback.
-        map$1((data) => data));
+        map((data) => data));
     }
     /**
      * Sends a command and observes the matching response by correlationId.
@@ -4026,19 +3615,19 @@ class UnrealCallbackService {
     observeCommandResponse(data, sender, timeOut = 60000, dispatchOnTimeout = true) {
         const correlationId = generateUuid();
         return defer(() => {
-            const observable = this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.correlationId === correlationId), timeout$1(timeOut), catchError(() => dispatchOnTimeout
+            const observable = this.actions$.pipe(ofType(unrealCommandCallback), map(({ json }) => 'commandCallback' in json ? json.commandCallback : json), filter((json) => json.correlationId === correlationId), timeout$1(timeOut), catchError(() => dispatchOnTimeout
                 ? of({ command: 'timeout', correlationId: 'timeout' })
                 : of(null)), take(1), tapLog('Command Response Observer'), filter(Truthy), 
             // Cast: response is matched by correlationId, so it is the callback for K.
-            map$1((data) => data));
+            map((data) => data));
             setTimeout(() => sender({ ...data, correlationId }), 0);
             return observable;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCallbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCallbackService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCallbackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCallbackService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCallbackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCallbackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4155,10 +3744,10 @@ class UnrealCommunicatorService extends SubService {
     requestQualityControl() {
         this.sendInputData(new Uint8Array([MessageType.RequestQualityControl]).buffer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCommunicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCommunicatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCommunicatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCommunicatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealCommunicatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealCommunicatorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -4172,10 +3761,10 @@ class UnrealErrorModalComponent {
     close() {
         this.#dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"unreal-modal\">\n  <header class=\"unreal-modal__header\">\n    <div\n      [attr.data-testid]=\"'unreal-error-header-title'\"\n      class=\"unreal-modal__title\"\n    >\n      Warning\n    </div>\n  </header>\n  <div class=\"unreal-modal__body\">\n    <div>{{ dialogData.content }}</div>\n  </div>\n  <div class=\"unreal-modal__footer\">\n    <app-unreal-button (clicked)=\"close()\">Ok</app-unreal-button>\n  </div>\n</div>\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__header{padding:16px 24px 0}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: UnrealErrorModalComponent, isStandalone: true, selector: "app-unreal-error-modal", ngImport: i0, template: "<div class=\"unreal-modal\">\n  <header class=\"unreal-modal__header\">\n    <div\n      [attr.data-testid]=\"'unreal-error-header-title'\"\n      class=\"unreal-modal__title\"\n    >\n      Warning\n    </div>\n  </header>\n  <div class=\"unreal-modal__body\">\n    <div>{{ dialogData.content }}</div>\n  </div>\n  <div class=\"unreal-modal__footer\">\n    <app-unreal-button (clicked)=\"close()\">Ok</app-unreal-button>\n  </div>\n</div>\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__header{padding:16px 24px 0}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealErrorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealErrorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-unreal-error-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent], template: "<div class=\"unreal-modal\">\n  <header class=\"unreal-modal__header\">\n    <div\n      [attr.data-testid]=\"'unreal-error-header-title'\"\n      class=\"unreal-modal__title\"\n    >\n      Warning\n    </div>\n  </header>\n  <div class=\"unreal-modal__body\">\n    <div>{{ dialogData.content }}</div>\n  </div>\n  <div class=\"unreal-modal__footer\">\n    <app-unreal-button (clicked)=\"close()\">Ok</app-unreal-button>\n  </div>\n</div>\n", styles: [".unreal-modal{--unrealModalWidth: 422px;--unrealModalMaxWidth: calc(100% - 16px) ;--unrealModalMaxHeight: 80vh;--unrealModalBg: var(--src-surface-container-main, #fff);--unrealModalBoxShadow: 0 16px 36px 4px var(--src-shadow-hard, rgba(71, 85, 105, .24)), 0 1px 4px 0 var(--src-shadow-light, rgba(148, 163, 184, .16));--unrealModalBorderRadius: var(--src-layout-radius-const-rounded-md, 12px);--unrealModalTitleSize: var(--src-font-size-base, 16px);--unrealModalTitleLineHeight: var(--src-font-line-base, 24px);--unrealModalTitleColor: var(--src-text-body-main, #111827);--unrealModalBodyPadding: var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-2xl, 32px) var(--src-layout-padding-const-xl, 24px);--unrealModalTitleBorder: none;--unrealModalFooterBorder: 1px solid var(--src-border-container-light, rgba(148, 163, 184, .16));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;width:var(--unrealModalWidth);max-width:var(--unrealModalMaxWidth);max-height:var(--unrealModalMaxHeight);margin:auto;background-color:var(--unrealModalBg);border-radius:var(--unrealModalBorderRadius);box-shadow:var(--unrealModalBoxShadow);color:var(--src-text-body-secondary, #4b5563);font-family:var(--src-font-family-header, Inter);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--src-font-line-sm, 20px)}.unreal-modal .unreal-modal__header{position:relative;display:flex;padding:0;width:100%;border-bottom:var(--unrealModalTitleBorder)}.unreal-modal .unreal-modal__body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--src-layout-gap-const-md, 12px);padding:var(--unrealModalBodyPadding);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--src-border-container-basic, rgba(148, 163, 184, .24)) transparent}.unreal-modal .unreal-modal__body .unreal-modal__title{grid-column:1/-1}.unreal-modal .unreal-modal__body::-webkit-scrollbar{width:4px}.unreal-modal .unreal-modal__body::-webkit-scrollbar-track{background:transparent}.unreal-modal .unreal-modal__body::-webkit-scrollbar-thumb{background-color:var(--src-border-container-basic, rgba(148, 163, 184, .24));border-radius:10px}.unreal-modal .unreal-modal__footer{display:flex;justify-content:flex-end;align-items:center;padding:var(--src-layout-padding-const-md, 12px) var(--src-layout-padding-const-xl, 24px) var(--src-layout-padding-const-lg, 16px) var(--src-layout-padding-const-xl, 24px);width:100%;border-top:var(--unrealModalFooterBorder);gap:var(--src-layout-gap-const-sm, 8px)}.unreal-modal .unreal-modal__title{font-size:var(--unrealModalTitleSize);font-weight:600;line-height:var(--unrealModalTitleLineHeight);color:var(--unrealModalTitleColor);word-break:break-word}.unreal-modal .unreal-modal__header{padding:16px 24px 0}\n"] }]
         }] });
@@ -4203,7 +3792,7 @@ class UnrealEffects {
             .select(unrealFeature.selectDataChannelConnected)
             .pipe(filter(Truthy));
         this.destroyConnections$ = createEffect(() => {
-            return this.actions$.pipe(ofType(destroyUnrealScene), map(() => destroyRemoteConnections({ reason: DisconnectReason.Destroy })));
+            return this.actions$.pipe(ofType(destroyUnrealScene), map$1(() => destroyRemoteConnections({ reason: DisconnectReason.Destroy })));
         });
         // Stage 3 — accurate region re-ping in the background once the stream is up.
         // A few seconds after the data channel is ready (so it doesn't compete with
@@ -4222,10 +3811,10 @@ class UnrealEffects {
         // subscribe to single intent (and it shows up as a distinct entry in the
         // Redux DevTools timeline).
         this.abortEstablishingConnection$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setCirrusDisconnected, dropConnection, destroyUnrealScene), map(() => abortEstablishingConnection()));
+            return this.actions$.pipe(ofType(setCirrusDisconnected, dropConnection, destroyUnrealScene), map$1(() => abortEstablishingConnection()));
         });
         this.resetAfk$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setConfig, setUserInactivityTimeout, resetWarnTimeout, resetConfig), map(() => resetAfk()));
+            return this.actions$.pipe(ofType(setConfig, setUserInactivityTimeout, resetWarnTimeout, resetConfig), map$1(() => resetAfk()));
         });
         this.iframeMessaging$ = createEffect(() => {
             const cirrusConnected$ = this.store
@@ -4238,16 +3827,16 @@ class UnrealEffects {
             // Skip initial false; emit null on every viewport state change
             const viewportReset$ = this.store
                 .select(unrealFeature.selectViewportReady)
-                .pipe(skip(1), delay(500), map(() => null));
+                .pipe(skip(1), delay(500), map$1(() => null));
             return merge(cirrusStatus$, this.store.select(unrealFeature.selectStatusMessage), viewportReset$).pipe(debounceTime(0), distinctUntilChanged(), tapLog('STATUS=>'), tap((status) => this.postToScreenLocker(status)));
         }, { dispatch: false });
         this.setSignalingTo100$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setAwsInstance), map(() => setStatusPercentSignallingServer({ percent: 100 })));
+            return this.actions$.pipe(ofType(setAwsInstance), map$1(() => setStatusPercentSignallingServer({ percent: 100 })));
         });
         this.setOrchestrationParameters$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setOrchestrationParameters), map(({ eta }) => eta), filter((value) => value > 0), switchMap((total) => {
+            return this.actions$.pipe(ofType(setOrchestrationParameters), map$1(({ eta }) => eta), filter((value) => value > 0), switchMap((total) => {
                 // Emit every second: 0,1,2,...,total (inclusive)
-                return timer(0, 1000).pipe(takeUntil(this.connectionCompleted$), take(total + 1), map((sec) => sec / total), distinctUntilChanged(), map((progressComplete) => setOrchestrationProgress({ progressComplete })));
+                return timer(0, 1000).pipe(takeUntil(this.connectionCompleted$), take(total + 1), map$1((sec) => sec / total), distinctUntilChanged(), map$1((progressComplete) => setOrchestrationProgress({ progressComplete })));
             }));
         });
         this.setDataChannelTimeoutCheck$ = createEffect(() => {
@@ -4294,7 +3883,7 @@ class UnrealEffects {
                             return of(null);
                         }), 
                         // map response to the destroy action that ngrx will dispatch
-                        map(() => disconnectStream({
+                        map$1(() => disconnectStream({
                             reason: DisconnectReason.DataChannelTimeout,
                             message: 'Data Channel Timeout',
                         })));
@@ -4318,24 +3907,24 @@ class UnrealEffects {
          * a visible flicker (video flashing to black).
          */
         this.forceViewportNotReady$ = createEffect(() => {
-            return this.actions$.pipe(ofType(destroyRemoteConnections), withLatestFrom(this.store.select(unrealFeature.selectViewportReady)), filter(([, viewportReady]) => viewportReady), map(() => setViewportNotReady()));
+            return this.actions$.pipe(ofType(destroyRemoteConnections), withLatestFrom(this.store.select(unrealFeature.selectViewportReady)), filter(([, viewportReady]) => viewportReady), map$1(() => setViewportNotReady()));
         });
         this.resetCirrusOnDestroy$ = createEffect(() => {
-            return this.actions$.pipe(ofType(destroyRemoteConnections), withLatestFrom(this.store.select(unrealFeature.selectCirrusConnected)), filter(([, cirrusConnected]) => cirrusConnected), map(() => setCirrusDisconnected()));
+            return this.actions$.pipe(ofType(destroyRemoteConnections), withLatestFrom(this.store.select(unrealFeature.selectCirrusConnected)), filter(([, cirrusConnected]) => cirrusConnected), map$1(() => setCirrusDisconnected()));
         });
         this.destroyRemoteConnections$ = createEffect(() => {
             return this.actions$.pipe(ofType(destroyRemoteConnections), tap(({ reason }) => {
                 this.webRtcPlayerService.releaseRemoteConnections(reason);
-            }), filter(({ reason }) => reason === DisconnectReason.DropConnection), map(() => dropConnection()));
+            }), filter(({ reason }) => reason === DisconnectReason.DropConnection), map$1(() => dropConnection()));
         });
         this.destroyConnectionAndRestart$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setCirrusDisconnected), withLatestFrom(this.store.select(unrealFeature.selectDisconnectReason)), filter(([, reason]) => reason === DisconnectReason.DataChannelTimeout), map(() => initSignalling()));
+            return this.actions$.pipe(ofType(setCirrusDisconnected), withLatestFrom(this.store.select(unrealFeature.selectDisconnectReason)), filter(([, reason]) => reason === DisconnectReason.DataChannelTimeout), map$1(() => initSignalling()));
         });
         this.showUnrealError$ = createEffect(() => {
-            return this.actions$.pipe(ofType(showUnrealErrorMessage), map(({ code }) => getRtcErrorMessage(code)), distinctUntilChanged(), filter(Truthy), switchMap((content) => this.dialog.open(UnrealErrorModalComponent, {
+            return this.actions$.pipe(ofType(showUnrealErrorMessage), map$1(({ code }) => getRtcErrorMessage(code)), distinctUntilChanged(), filter(Truthy), exhaustMap((content) => this.dialog.open(UnrealErrorModalComponent, {
                 scrollStrategy: this.scrollStrategy,
                 data: { content },
-            }).closed), map(() => showUnrealErrorMessage({ code: null })));
+            }).closed), map$1(() => showUnrealErrorMessage({ code: null })));
         });
         /**
          * `dataChannelReady` is a ONCE-PER-SESSION signal: it starts app init
@@ -4380,21 +3969,21 @@ class UnrealEffects {
                 // we proceed only after no more commands are started for 50 ms.
                 return this.actions$.pipe(ofType(commandStarted), debounceTime(50), take(1), switchMap(() => this.unrealCallbackService.observeCommandResponse({ command: MetaBoxCommand.FLoopBackCommand }, (data) => this.commandsSender.sendCommandToUnreal(data))), switchMap(() => this.videoService.videoStats$), filter(({ aggregatedStats: s }) => !!s.framesPerSecond &&
                     s.framesPerSecond > MINIMAL_FPS &&
-                    (s.framesDecoded ?? 0) > 15), take(1), map(() => setLoopBackCommandIsCompleted()));
+                    (s.framesDecoded ?? 0) > 15), take(1), map$1(() => setLoopBackCommandIsCompleted()));
             }));
         });
         this.setViewportReadyBySetLoopBackCommandIsCompleted$ = createEffect(() => {
-            return this.actions$.pipe(ofType(setLoopBackCommandIsCompleted, reconnectPeerSuccess), tap(() => this.commandTelemetryService.trackStopCommand('EXT-SetViewportReady', false, { ready: true })), map(() => setViewportReady()));
+            return this.actions$.pipe(ofType(setLoopBackCommandIsCompleted, reconnectPeerSuccess), tap(() => this.commandTelemetryService.trackStopCommand('EXT-SetViewportReady', false, { ready: true })), map$1(() => setViewportReady()));
         });
         this.startStream$ = createEffect(() => {
-            return this.actions$.pipe(ofType(startStream), map(() => initSignalling()));
+            return this.actions$.pipe(ofType(startStream), map$1(() => initSignalling()));
         });
         // When the video stream is initialized but autoplay didn't kick in
         // (browser blocked it; user gesture pending), the user may need extra
         // time before interacting. Refresh the AFK timer so it doesn't tick
         // toward an inactivity warning while we're waiting for permission.
         this.resetAfkOnPausedVideoInit$ = createEffect(() => {
-            return this.actions$.pipe(ofType(videoStreamInitialized), filter(() => !!this.videoService.video?.paused), map(() => resetAfk()));
+            return this.actions$.pipe(ofType(videoStreamInitialized), filter(() => !!this.videoService.video?.paused), map$1(() => resetAfk()));
         });
         /**
          * Effect: `disconnectReasonHandling$`
@@ -4417,7 +4006,7 @@ class UnrealEffects {
                     return false;
                 }
                 return DESTROY_DISCONNECT_REASONS.includes(reason);
-            }), map(({ reason }) => destroyRemoteConnections({ reason })));
+            }), map$1(({ reason }) => destroyRemoteConnections({ reason })));
         });
         /**
          * Effect: `handleDataChannelClosed$`
@@ -4431,7 +4020,7 @@ class UnrealEffects {
                 reason === DisconnectReason.IceConnectionFailed) &&
                 this.canPeerReconnect()), tap(({ reason }) => {
                 Logger.warn(`[Reconnect] ${reason}, initiating peer reconnection`);
-            }), map(() => reconnectPeer({
+            }), map$1(() => reconnectPeer({
                 attempt: 1,
                 maxAttempts: RECONNECT_CONFIG.maxAttempts,
                 delay: 0,
@@ -4449,7 +4038,7 @@ class UnrealEffects {
          */
         this.resetStateForPeerReconnect$ = createEffect(() => {
             return this.actions$.pipe(ofType(reconnectPeer), filter(() => RECONNECT_CONFIG.enabled), filter(({ attempt }) => attempt === 1), // Only reset on the first attempt
-            map(() => resetDataChannelForReconnect()));
+            map$1(() => resetDataChannelForReconnect()));
         });
         /**
          * Effect: `executePeerReconnect$`
@@ -4467,7 +4056,7 @@ class UnrealEffects {
                     return of(this.scheduleRetryOrFail(attempt, maxAttempts, 'Signaling connection lost during peer reconnection'));
                 }
                 // Monitor for successful data channel connection
-                return this.actions$.pipe(ofType(dataChannelConnected), take(1), timeout$1(this.dataChannelConnectionTimeout), tap(() => Logger.info('[Reconnect] Peer reconnection successful!')), map(() => reconnectPeerSuccess()), catchError(() => {
+                return this.actions$.pipe(ofType(dataChannelConnected), take(1), timeout$1(this.dataChannelConnectionTimeout), tap(() => Logger.info('[Reconnect] Peer reconnection successful!')), map$1(() => reconnectPeerSuccess()), catchError(() => {
                     if (attempt < maxAttempts) {
                         Logger.warn(`[Reconnect] Peer reconnection attempt ${attempt} timed out, scheduling retry`);
                     }
@@ -4485,7 +4074,7 @@ class UnrealEffects {
          * Falls back to full disconnection which may trigger full reconnection.
          */
         this.handlePeerReconnectFailed$ = createEffect(() => {
-            return this.actions$.pipe(ofType(reconnectPeerFailed), map(({ reason }) => disconnectStream({
+            return this.actions$.pipe(ofType(reconnectPeerFailed), map$1(({ reason }) => disconnectStream({
                 reason: DisconnectReason.ReconnectFailed,
                 message: reason,
             })));
@@ -4521,9 +4110,9 @@ class UnrealEffects {
         // carries a correlationId resolves a previously started command.
         // Skip in Playwright mode (deterministic command IDs are issued directly).
         this.listenUnrealCallbackByInitSignalling$ = createEffect(() => {
-            return this.actions$.pipe(ofType(initSignalling), filter(() => !this.unrealInitialConfig?.playwright), switchMap(() => this.actions$.pipe(ofType(unrealCommandCallback), map(({ json }) => 'commandCallback' in json
+            return this.actions$.pipe(ofType(initSignalling), filter(() => !this.unrealInitialConfig?.playwright), switchMap(() => this.actions$.pipe(ofType(unrealCommandCallback), map$1(({ json }) => 'commandCallback' in json
                 ? json.commandCallback?.correlationId
-                : json?.correlationId), filter(Truthy), map((id) => commandCompleted({ id, now: Date.now() })))));
+                : json?.correlationId), filter(Truthy), map$1((id) => commandCompleted({ id, now: Date.now() })))));
         });
         this.connectToSignaling$ = createEffect(() => {
             return this.actions$.pipe(ofType(initSignalling), withLatestFrom(this.store.select(unrealFeature.selectMatchUrls), this.store.select(selectIsAutostart), this.store.select(unrealFeature.selectCirrusConnected)), filter(([, , autoStart, cirrusConnected]) => {
@@ -4531,7 +4120,7 @@ class UnrealEffects {
                     Logger.warn(`SIGNALING REQUEST can't be called when cirrus connection is already established.`);
                 }
                 return autoStart && !cirrusConnected;
-            }), map(([, matchMakerUrls]) => [...matchMakerUrls].filter(Truthy)), filter((urls) => urls.length > 0), 
+            }), map$1(([, matchMakerUrls]) => [...matchMakerUrls].filter(Truthy)), filter((urls) => urls.length > 0), 
             // Ensure a single in-flight request per attempt.
             exhaustMap((urls) => 
             // If a prefetched `window.__stream` is ready — or still connecting —
@@ -4548,35 +4137,434 @@ class UnrealEffects {
             ignoreElements(), startWith(setEstablishingConnection({ value: true })))));
         });
     }
-    canPeerReconnect() {
-        return RECONNECT_CONFIG.enabled && this.signallingService.isConnected();
+    canPeerReconnect() {
+        return RECONNECT_CONFIG.enabled && this.signallingService.isConnected();
+    }
+    /**
+     * Either schedules the next peer-reconnect attempt or gives up with the
+     * supplied reason. Used in two `executePeerReconnect$` branches that share
+     * the same retry-or-fail decision.
+     */
+    scheduleRetryOrFail(attempt, maxAttempts, exhaustedReason) {
+        return attempt < maxAttempts
+            ? reconnectPeer({ attempt: attempt + 1, maxAttempts })
+            : reconnectPeerFailed({ reason: exhaustedReason });
+    }
+    postToScreenLocker(text) {
+        try {
+            const el = document.getElementById(this.unrealInitialConfig?.screenLockerContainerId ??
+                SCREEN_LOCKER_CONTAINER_ID);
+            el?.contentWindow?.postMessage(text, '*');
+        }
+        catch {
+            // Fails silently if cross-origin
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealEffects }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealEffects, decorators: [{
+            type: Injectable
+        }] });
+
+function InstanceReadyHandler(msg) {
+    const payload = msg?.payload;
+    if (!payload) {
+        Logger.warn('instanceReady received without payload — ignoring');
+        return;
+    }
+    if (!payload.originInstanceUri) {
+        Logger.warn('instanceReady without originInstanceUri — ignoring');
+        return;
+    }
+    // Emit for observability (telemetry) and store the stream-machine coords.
+    this.store.dispatch(instanceReady(payload));
+    // This is the answer `requestCirrusViaSocket` is waiting for: the Cirrus
+    // address (`originInstanceUri`) plus the connection id to hand it. The socket
+    // itself is opened by the shared `connectToCirrus`, not here.
+    this.onInstanceReady$.next(payload);
+}
+
+function InstanceReservedHandler(msg) {
+    this.store.dispatch(setOrchestrationParameters({
+        instanceName: msg.payload.instanceId,
+        streamRequestId: msg.payload.streamRequestId,
+        eta: msg.payload.eta ?? 150,
+    }));
+}
+
+function PlayerCountHandler(msg) {
+    Logger.log(msg);
+}
+
+function SSInfoHandler(msg) {
+    this.store.dispatch(updateCirrusInfo({ ssData: msg.data }));
+    return null;
+}
+
+const dropCodes = [
+    WSCloseCode_UNKNOWN,
+    WSCloseCode_CIRRUS_PLAYER_DISCONNECTED,
+    WSCloseCode_CIRRUS_ABNORMAL_CLOSURE,
+    WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER,
+    WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR,
+];
+function OnCloseHandler(e) {
+    const message = `WebSocket closed: ${JSON.stringify(e.code)} - ${e.reason}`;
+    Logger.warn(message);
+    this.store.dispatch(setCirrusDisconnected());
+    if (dropCodes.includes(e.code)) {
+        this.store.dispatch(dropConnection());
+    }
+}
+
+function OnErrorHandler(e) {
+    Logger.warn(`WS error: ${JSON.stringify(e)}`);
+    this.store.dispatch(disconnectStream({
+        reason: DisconnectReason.WebSocketError,
+        message: 'WebSocket Error',
+    }));
+}
+
+function OnMessageHandler(e) {
+    const handleData = (data) => {
+        //Logger.colored(...COLOR_CODES.FROM_SIGNALING, data);
+        const msg = JSON.parse(data);
+        this.handleMessage(msg);
+    };
+    if (typeof e.data === 'string') {
+        try {
+            handleData(e.data);
+        }
+        catch (err) {
+            Logger.warn('OnMessageHandler: failed to parse string message', err);
+        }
+    }
+    else if (e.data instanceof Blob) {
+        e.data
+            .text()
+            .then(handleData)
+            .catch((err) => Logger.warn('OnMessageHandler: failed to parse Blob message', err));
+    }
+}
+
+/**
+ * Open handler of the CIRRUS socket only (`addWsHandlers`), so
+ * `setCirrusConnected` now means what it says. It used to also send
+ * `requestStream` here, which made the flag fire on the orchestration control
+ * socket — a whole provisioning wait (`eta`, ~150 s) before any Cirrus existed.
+ * `requestStream` belongs to the control socket and is sent by
+ * `requestCirrusViaSocket`.
+ */
+function OnOpenHandler() {
+    this.store.dispatch(setCirrusConnected());
+}
+
+/**
+ * Keeps the max of numbers seen so far; resets to 0 whenever `reset$` emits.
+ */
+const keepMaxUntilReset = (reset$) => (source$) => merge(source$, reset$.pipe(map$1(() => null))).pipe(scan((max, value) => (value === null ? 0 : Math.max(max, value)), 0));
+
+// Reused across every inbound data-channel message — instantiating a
+// TextDecoder per call adds needless GC churn on a hot path.
+const utf16Decoder = new TextDecoder('utf-16');
+function decodeData(anyData) {
+    try {
+        return utf16Decoder.decode(anyData);
+    }
+    catch {
+        return '';
+    }
+}
+
+const dispatchResize = () => {
+    window.dispatchEvent(new Event('resize'));
+};
+
+const errorCodes = {
+    code404: 'Your asset is being synced on Metabox servers and is not yet available in Metabox Studio or Metabox Configurator. Please check again later after syncing is complete. ',
+};
+function getRtcErrorMessage(code) {
+    if (code === null) {
+        return undefined;
+    }
+    return errorCodes[`code${code}`];
+}
+
+const JUMP_THRESHOLD = 0.95;
+const MAX_TRANSITION_DURATION_MS = 200;
+/**
+ * Maps a 0..1 stream directly to a 0..100 integer percent stream.
+ * No animation — emits whatever the source emits, rounded and clamped.
+ */
+const floatToPercents = () => (source) => source.pipe(map((value) => clampf(0, 100, Math.round(value * 100))));
+/**
+ * Maps a 0..1 progress stream to a smoothed 0..100 integer percent stream.
+ * Animates between consecutive values over up to 200ms; jumps directly when
+ * the delta exceeds 0.95 (treated as a reset, not a real progression).
+ */
+const floatToSmoothPercents = () => (source) => source.pipe(timestamp(), startWith({ value: 0, timestamp: 0 }), pairwise(), concatMap(([prev, curr]) => {
+    const isJump = Math.abs(curr.value - prev.value) > JUMP_THRESHOLD;
+    const dt = prev.timestamp ? curr.timestamp - prev.timestamp : 0;
+    if (isJump || dt === 0) {
+        return of(curr.value);
+    }
+    return smoothTransition(prev.value, curr.value, Math.min(dt, MAX_TRANSITION_DURATION_MS));
+}), floatToPercents());
+/**
+ * Smoothly interpolates from `start` to `end` over `duration`ms using the
+ * animation frame scheduler. Completes when the transition finishes.
+ *
+ * NOTE: duplicates `smoothTransition` from `@3dsource/utils`. The utils version
+ * is missing `takeWhile(... < 1, true)` and never completes — which would
+ * deadlock the `concatMap` above. Keep this local copy until utils is fixed.
+ * Not exported: internal to `floatToSmoothPercents`.
+ */
+const smoothTransition = (start, end, duration) => {
+    const startTime = animationFrameScheduler.now();
+    return interval(0, animationFrameScheduler).pipe(map(() => clampf(0, 1, (animationFrameScheduler.now() - startTime) / duration)), distinctUntilChanged(), takeWhile((fraction) => fraction < 1, true), map((fraction) => lerp(start, end, fraction)));
+};
+
+const getImageFromVideoStream = (takeSizeFrom = 'video', imageOutput, sizes) => {
+    try {
+        const video = document.getElementById(STREAMING_VIDEO_ID);
+        const { canvas, ctx } = getCanvasCached('video');
+        canvas.width =
+            takeSizeFrom === 'video'
+                ? sizes?.width || video?.clientWidth || FULL_HD_WIDTH
+                : FULL_HD_WIDTH;
+        canvas.height =
+            takeSizeFrom === 'video'
+                ? sizes?.height || video?.clientHeight || FULL_HD_HEIGHT
+                : FULL_HD_HEIGHT;
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        return getSnapshot(canvas, canvas.width, imageOutput);
+    }
+    catch {
+        return null;
+    }
+};
+
+/**
+ * Generator that cycles through `urls` indefinitely. Each call to
+ * `getActiveUrl(urls)` returns a fresh generator with its own counter,
+ * so concurrent generators (e.g., overlapping reconnect attempts) do
+ * not share state. The counter is initialized once per generator
+ * instance — before any `yield` — so each `.next()` call advances
+ * within that single generator.
+ */
+function* getActiveUrl(urls) {
+    let index = 0;
+    while (true) {
+        yield urls[index++ % urls.length];
     }
-    /**
-     * Either schedules the next peer-reconnect attempt or gives up with the
-     * supplied reason. Used in two `executePeerReconnect$` branches that share
-     * the same retry-or-fail decision.
-     */
-    scheduleRetryOrFail(attempt, maxAttempts, exhaustedReason) {
-        return attempt < maxAttempts
-            ? reconnectPeer({ attempt: attempt + 1, maxAttempts })
-            : reconnectPeerFailed({ reason: exhaustedReason });
+}
+
+class LatencyTimings {
+    constructor() {
+        this.TestStartTimeMs = null;
+        this.UEReceiptTimeMs = null;
+        this.UEEncodeMs = null;
+        this.UECaptureToSendMs = null;
+        this.UETransmissionTimeMs = null;
+        this.BrowserReceiptTimeMs = null;
+        this.FrameDisplayDeltaTimeMs = null;
     }
-    postToScreenLocker(text) {
-        try {
-            const el = document.getElementById(this.unrealInitialConfig?.screenLockerContainerId ??
-                SCREEN_LOCKER_CONTAINER_ID);
-            el?.contentWindow?.postMessage(text, '*');
-        }
-        catch {
-            // Fails silently if cross-origin
+    Reset() {
+        this.TestStartTimeMs = null;
+        this.UEReceiptTimeMs = null;
+        this.UEEncodeMs = null;
+        this.UECaptureToSendMs = null;
+        this.UETransmissionTimeMs = null;
+        this.BrowserReceiptTimeMs = null;
+        this.FrameDisplayDeltaTimeMs = null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    SetUETimings(UETimings) {
+        this.UEReceiptTimeMs = UETimings.ReceiptTimeMs;
+        this.UEEncodeMs = UETimings.EncodeMs;
+        this.UECaptureToSendMs = UETimings.CaptureToSendMs;
+        this.UETransmissionTimeMs = UETimings.TransmissionTimeMs;
+        this.BrowserReceiptTimeMs = Date.now();
+    }
+    SetFrameDisplayDeltaTime(DeltaTimeMs) {
+        if (this.FrameDisplayDeltaTimeMs == null) {
+            this.FrameDisplayDeltaTimeMs = Math.round(DeltaTimeMs);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealEffects, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealEffects, decorators: [{
-            type: Injectable
-        }] });
+
+function qpToQuality(VideoEncoderQP) {
+    const orangeQP = 26;
+    const redQP = 35;
+    let quality = 'lime';
+    if (VideoEncoderQP > redQP) {
+        quality = 'red';
+    }
+    else if (VideoEncoderQP > orangeQP) {
+        quality = 'orange';
+    }
+    return quality;
+}
+
+/**
+ * Base64-encodes a byte array.
+ *
+ * Builds the intermediate binary string in fixed-size chunks instead of
+ * concatenating one character at a time. The naive `bytes.reduce((s, b) => s +
+ * String.fromCharCode(b), '')` is O(n²) (each `+` re-copies the growing string)
+ * and stalls the main thread for a full-resolution frame; chunking keeps it
+ * O(n). The chunk size stays under the argument-count limit of
+ * `String.fromCharCode.apply`/spread.
+ *
+ * @param bytes - The raw bytes to encode.
+ * @returns The Base64 representation of `bytes`.
+ */
+function uint8ToBase64(bytes) {
+    const CHUNK_SIZE = 0x8000;
+    let binary = '';
+    for (let i = 0; i < bytes.length; i += CHUNK_SIZE) {
+        binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK_SIZE));
+    }
+    return btoa(binary);
+}
+
+function fromResizeObserver(elem) {
+    return new Observable((subscriber) => {
+        const observer = new window.ResizeObserver((entries) => subscriber.next(entries));
+        observer.observe(elem);
+        return () => observer.unobserve(elem);
+    });
+}
+
+/*
+ * Copyright (c) 2026.
+ * 3DSource.com. Sergii Karanda steve@3dsource.com. All Rights Reserved.
+ */
+/**
+ * Rounds a number to the nearest even integer (rounding up for odd values).
+ *
+ * Video encoders (H.264/H.265) require even dimensions because chroma subsampling
+ * operates on 2×2 pixel blocks. Odd dimensions cause encoding artifacts or failures.
+ *
+ * @param value - The number to round to the nearest even integer.
+ * @returns The nearest even integer greater than or equal to the input.
+ *
+ * @example
+ * makeEven(1079) // 1080
+ * makeEven(1080) // 1080
+ * makeEven(1081) // 1082
+ */
+function makeEven(value) {
+    return Math.floor((value + 1) / 2) * 2;
+}
+
+const FULL_HD_PIXELS = FULL_HD_WIDTH * FULL_HD_HEIGHT;
+const UHD_PIXELS = FULL_HD_WIDTH * 2 * (FULL_HD_HEIGHT * 2);
+/**
+ * Calculates the optimal stream resolution for studio mode.
+ *
+ * Fits the studio aspect ratio into the container (scaled by pixelRatio), then
+ * caps the total pixel count to a budget (Full HD or 4K) to avoid overloading
+ * the GPU/encoder while maximizing visual quality.
+ *
+ * The pixel budget approach (instead of per-dimension caps) ensures that
+ * non-standard aspect ratios (portrait, ultra-wide, square) utilize available
+ * pixels efficiently — e.g. a tall 1080×1920 stream uses the same pixel budget
+ * as a wide 1920×1080 stream.
+ *
+ * Resolution is always capped at the studio dimensions — never upscaled beyond
+ * what the Unreal scene was designed for.
+ *
+ * @param params.pixelRatio - Device pixel ratio (`window.devicePixelRatio`).
+ * @param params.containerWidth - CSS width of the video container in pixels.
+ * @param params.containerHeight - CSS height of the video container in pixels.
+ * @param params.studioWidth - Target width of the MetaBox Studio scene.
+ * @param params.studioHeight - Target height of the MetaBox Studio scene.
+ * @param params.maxResolution - When `true`, uses 4K pixel budget (3840×2160);
+ *   otherwise Full HD (1920×1080). Controlled by `?maxresolution` query param.
+ * @returns An {@link Area} with the calculated `w`, `h`, position (`x`, `y`),
+ *   and `scale` factor relative to the container's device-pixel size.
+ */
+function getResizeStudioValues(params) {
+    const { pixelRatio, containerWidth, containerHeight, studioWidth, studioHeight, maxResolution, } = params;
+    const maxSpace = {
+        w: containerWidth * pixelRatio,
+        h: containerHeight * pixelRatio,
+    };
+    const maxPixels = maxResolution ? UHD_PIXELS : FULL_HD_PIXELS;
+    const videoSizePixelPerfect = fitIntoRectangle({ x: 0, y: 0, w: studioWidth, h: studioHeight }, { x: 0, y: 0, ...maxSpace });
+    let w = videoSizePixelPerfect.w;
+    let h = videoSizePixelPerfect.h;
+    if (w * h > maxPixels) {
+        // Derive uniform scale factor `s` from: (w*s) * (h*s) = maxPixels
+        // → w * h * s² = maxPixels → s = √(maxPixels / (w * h)).
+        // Applying the same `s` to both dimensions preserves the aspect ratio.
+        const scaleFactor = Math.sqrt(maxPixels / (w * h));
+        w = w * scaleFactor;
+        h = h * scaleFactor;
+    }
+    const out = fitIntoRectangle(videoSizePixelPerfect, {
+        x: videoSizePixelPerfect.x,
+        y: videoSizePixelPerfect.y,
+        w,
+        h,
+    });
+    out.w = makeEven(out.w);
+    out.h = makeEven(out.h);
+    return out;
+}
+/**
+ * Calculates the optimal stream resolution for configurator (non-studio) mode.
+ *
+ * Uses the full container area (scaled by pixelRatio) as the stream resolution,
+ * then caps total pixel count to a budget (Full HD or 4K) to prevent excessive
+ * GPU/encoder load while preserving the container's aspect ratio.
+ *
+ * Unlike {@link getResizeStudioValues}, there is no fixed studio resolution to
+ * fit into — the container itself defines the aspect ratio, and the stream fills
+ * it entirely (no letterboxing).
+ *
+ * @param params.pixelRatio - Device pixel ratio (`window.devicePixelRatio`).
+ * @param params.containerWidth - CSS width of the video container in pixels.
+ * @param params.containerHeight - CSS height of the video container in pixels.
+ * @param params.maxResolution - When `true`, uses 4K pixel budget (3840×2160);
+ *   otherwise Full HD (1920×1080). Controlled by `?maxresolution` query param.
+ * @returns An {@link Area} with the calculated `w`, `h`, position (`x`, `y`),
+ *   and `scale` factor (1 when no downscale needed, <1 when capped).
+ */
+function getResizeValuesUniversal(params) {
+    const { pixelRatio, containerWidth, containerHeight, maxResolution } = params;
+    const maxSpace = {
+        w: containerWidth * pixelRatio,
+        h: containerHeight * pixelRatio,
+    };
+    const maxPixels = maxResolution ? UHD_PIXELS : FULL_HD_PIXELS;
+    let w = maxSpace.w;
+    let h = maxSpace.h;
+    if (w * h > maxPixels) {
+        // Derive uniform scale factor `s` from: (w*s) * (h*s) = maxPixels
+        // → w * h * s² = maxPixels → s = √(maxPixels / (w * h)).
+        // Applying the same `s` to both dimensions preserves the aspect ratio.
+        const scaleFactor = Math.sqrt(maxPixels / (w * h));
+        w = w * scaleFactor;
+        h = h * scaleFactor;
+    }
+    return { w: makeEven(w), h: makeEven(h), x: 0, y: 0, scale: w / maxSpace.w };
+}
+
+/**
+ * Picks the class that carries the decoration of a UI part: the host class when
+ * one is supplied, the built-in one otherwise. An empty string counts as "not
+ * supplied" so a part never ends up with no styling at all.
+ */
+function resolveSkin(classes, part, fallback) {
+    const custom = classes[part];
+    if (custom === undefined || custom === '') {
+        return fallback;
+    }
+    return custom;
+}
 
 class AFKService extends SubService {
     constructor() {
@@ -4692,10 +4680,10 @@ class AFKService extends SubService {
             }
         }, 1000);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AFKService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AFKService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AFKService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AFKService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AFKService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AFKService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -4745,10 +4733,10 @@ class LoadingProgressService {
     // `switchMap` cancels the inner subscription on every visibility change
     // so stale emissions can't leak through.
     #boundedProgress$;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: LoadingProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: LoadingProgressService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoadingProgressService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoadingProgressService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: LoadingProgressService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: LoadingProgressService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -4834,10 +4822,10 @@ class FreezeFrameService extends SubService {
             progress: 1,
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FreezeFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FreezeFrameService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FreezeFrameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FreezeFrameService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FreezeFrameService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FreezeFrameService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5050,10 +5038,10 @@ class AggregatorService extends SubService {
                 Logger.warn(`unrecognized data received, packet ID ${view[0]}`);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AggregatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AggregatorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AggregatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AggregatorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AggregatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AggregatorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5199,7 +5187,7 @@ class ConsoleExtensionsService extends SubService {
         // `store.select` replays the current value synchronously, so if it already
         // equals `target` this resolves immediately; otherwise it waits for the
         // transition or falls back to `false` after `timeoutMs`.
-        return firstValueFrom(this.store.select(unrealFeature.selectDataChannelConnected).pipe(filter((connected) => connected === target), take(1), map(() => true), timeout$1({ first: timeoutMs, with: () => of(false) })));
+        return firstValueFrom(this.store.select(unrealFeature.selectDataChannelConnected).pipe(filter((connected) => connected === target), take(1), map$1(() => true), timeout$1({ first: timeoutMs, with: () => of(false) })));
     }
     sleep(ms) {
         return new Promise((resolve) => setTimeout(resolve, ms));
@@ -5214,10 +5202,10 @@ class ConsoleExtensionsService extends SubService {
         Logger.info('emitCommand(command) => send command to Unreal Engine.');
         Logger.info('stressTest({iterations}) => hammer reconnect: repeatedly drop DC/PC and assert recovery.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ConsoleExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ConsoleExtensionsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ConsoleExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ConsoleExtensionsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ConsoleExtensionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ConsoleExtensionsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5296,8 +5284,8 @@ class InputService extends SubService {
         if (this.unrealConfig?.playwright) {
             return;
         }
-        const visibilityHiddenTrigger$ = fromEvent(document, 'visibilitychange').pipe(map$1(() => document.visibilityState === 'hidden'), filter(Truthy));
-        const visibilityVisibleTrigger$ = fromEvent(document, 'visibilitychange').pipe(map$1(() => document.visibilityState === 'visible'), filter(Truthy), startWith(true));
+        const visibilityHiddenTrigger$ = fromEvent(document, 'visibilitychange').pipe(map(() => document.visibilityState === 'hidden'), filter(Truthy));
+        const visibilityVisibleTrigger$ = fromEvent(document, 'visibilitychange').pipe(map(() => document.visibilityState === 'visible'), filter(Truthy), startWith(true));
         this.deactivatedVideoTrigger$ = merge(this.disconnect$, this.reInit$, visibilityHiddenTrigger$, this.destroy$);
         merge(visibilityVisibleTrigger$, this.store.select(unrealFeature.selectViewportReady).pipe(filter(Truthy)))
             .pipe(filter(() => !!this.video), takeUntil$1(this.destroy$))
@@ -5718,10 +5706,10 @@ class InputService extends SubService {
             this.sendInputData(data.buffer);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InputService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InputService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: InputService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: InputService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5751,7 +5739,7 @@ class StreamStatusTelemetryService extends SubService {
             return this.videoService.videoStats$.pipe(throttleTime(5000, asyncScheduler, {
                 leading: true,
                 trailing: true,
-            }), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), signalingReadyTime$, viewPortReadyTime$), map$1(([data, signalingServer, signalingReadyTime, viewPortReadyTime,]) => this.mapEventData({
+            }), withLatestFrom(this.store.select(unrealFeature.selectAwsInstance), signalingReadyTime$, viewPortReadyTime$), map(([data, signalingServer, signalingReadyTime, viewPortReadyTime,]) => this.mapEventData({
                 data,
                 signalingServer,
                 startTimeUtc,
@@ -5767,7 +5755,7 @@ class StreamStatusTelemetryService extends SubService {
      * Used with `withLatestFrom` so events carry a stable duration for the whole session.
      */
     readyTimeSince(readyState$, startedAt) {
-        return readyState$.pipe(filter(Boolean), take$1(1), map$1(() => Date.now() - startedAt), startWith$1(undefined));
+        return readyState$.pipe(filter(Boolean), take$1(1), map(() => Date.now() - startedAt), startWith$1(undefined));
     }
     mapEventData(params) {
         const { data, signalingServer, startTimeUtc, signalingReadyTime, viewPortReadyTime, } = params;
@@ -5790,10 +5778,10 @@ class StreamStatusTelemetryService extends SubService {
             VideoEncoderQP,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -5918,7 +5906,7 @@ class StreamStatusTelemetryService2 {
          * `startWith(null)` seed makes `withLatestFrom` on this stream safe even
          * before the first video stat arrives (common at data-channel-open).
          */
-        this.selectedPair$ = this.videoService.videoStats$.pipe(map((s) => s.aggregatedStats.selectedPair ?? null), scan((acc, curr) => curr ?? acc, null), startWith(null));
+        this.selectedPair$ = this.videoService.videoStats$.pipe(map$1((s) => s.aggregatedStats.selectedPair ?? null), scan((acc, curr) => curr ?? acc, null), startWith(null));
         /**
          * Correlation-matched Observable: emits once when the first `loopBack`
          * command's corresponding `command completed` action fires. Built from
@@ -5988,7 +5976,7 @@ class StreamStatusTelemetryService2 {
                     // never ran or its cache expired.
                     {
                         id: 'region-resolved',
-                        event: this.actions$.pipe(ofType(regionResolved), take(1), map(({ region, pingsMs }) => ({
+                        event: this.actions$.pipe(ofType(regionResolved), take(1), map$1(({ region, pingsMs }) => ({
                             region,
                             pingsMs: pingsMs.length ? `${pingsMs.join(', ')} ms` : null,
                         }))),
@@ -6034,7 +6022,7 @@ class StreamStatusTelemetryService2 {
                     // is shipped under — see {@link SessionState.wireId}.
                     {
                         id: 'ssinfo-received',
-                        event: this.store.select(unrealFeature.selectSsData).pipe(filter$1(Boolean), take(1), withLatestFrom$1(this.store.select(unrealFeature.selectAwsInstance), this.store.select(selectCirrusConnectionId)), map(([ssData, aws, connectionId]) => ({
+                        event: this.store.select(unrealFeature.selectSsData).pipe(filter$1(Boolean), take(1), withLatestFrom$1(this.store.select(unrealFeature.selectAwsInstance), this.store.select(selectCirrusConnectionId)), map$1(([ssData, aws, connectionId]) => ({
                             client: aws.wsUrl,
                             instanceName: aws.instanceName,
                             ...ssData,
@@ -6079,7 +6067,7 @@ class StreamStatusTelemetryService2 {
                         id: 'datachannel-connected',
                         event: this.store
                             .select(unrealFeature.selectDataChannelConnected)
-                            .pipe(filter$1(Boolean), take(1), map(() => ({
+                            .pipe(filter$1(Boolean), take(1), map$1(() => ({
                             iceCandidateCount: this.session?.iceCandidateCount ?? 0,
                             handshakeFlow: this.session?.handshakeFlow ?? null,
                         }))),
@@ -6111,7 +6099,7 @@ class StreamStatusTelemetryService2 {
                     // fired at Unreal before the viewport was ready.
                     {
                         id: 'viewport-ready',
-                        event: this.store.select(unrealFeature.selectViewportReady).pipe(filter$1(Boolean), take(1), withLatestFrom$1(this.selectedPair$), map(([, selectedPair]) => ({
+                        event: this.store.select(unrealFeature.selectViewportReady).pipe(filter$1(Boolean), take(1), withLatestFrom$1(this.selectedPair$), map$1(([, selectedPair]) => ({
                             localCandidate: fmtCandidate(selectedPair?.local),
                             remoteCandidate: fmtCandidate(selectedPair?.remote),
                             commandCount: this.session?.commandCount ?? 0,
@@ -6895,10 +6883,10 @@ class StreamStatusTelemetryService2 {
     emit(event, data) {
         this.store.dispatch(trackTelemetryData({ event, data }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService2, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService2, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService2, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StreamStatusTelemetryService2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StreamStatusTelemetryService2, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -7034,10 +7022,10 @@ class AnalyticsService extends SubService {
         Logger.log('Analytics Event:', name, params);
         this.store.dispatch(saveAnalyticsEvent({ event: { name, params } }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AnalyticsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AnalyticsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AnalyticsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AnalyticsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -7404,10 +7392,10 @@ class FpsMonitorService extends SubService {
         }
         return { fps: fps / len, bitrate: bitrate / len, qp: qp / len };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FpsMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FpsMonitorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FpsMonitorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FpsMonitorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FpsMonitorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FpsMonitorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -7421,19 +7409,34 @@ class AfkTimeoutModalComponent {
         this.afkCountdown = this.#store.selectSignal(unrealFeature.selectAfkCountdown);
         this.isShowAfkPopup = computed(() => this.isAfkTimerVisible() && this.showAfkTimeoutPopup(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isShowAfkPopup" }] : /* istanbul ignore next */ []));
+        this.uiClasses = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uiClasses" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.scrimSkin = computed(() => resolveSkin(this.uiClasses(), 'afkScrim', 'afk-scrim'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrimSkin" }] : /* istanbul ignore next */ []));
+        this.cardSkin = computed(() => resolveSkin(this.uiClasses(), 'afkCard', 'resume-box'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cardSkin" }] : /* istanbul ignore next */ []));
+        this.buttonSkin = computed(() => resolveSkin(this.uiClasses(), 'afkButton', 'afk-button'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonSkin" }] : /* istanbul ignore next */ []));
+        // Created once: identity stays stable, reactivity lives in the signals.
+        this.slotContext = {
+            countdown: this.afkCountdown,
+            reset: () => this.resetAfk(),
+        };
     }
     #store;
     #afkService;
     resetAfk() {
         this.#afkService.reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", ngImport: i0, template: "@if (isShowAfkPopup()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <app-unreal-button\n        [fullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </app-unreal-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:#1f2937;text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AfkTimeoutModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: AfkTimeoutModalComponent, isStandalone: true, selector: "app-afk-timeout-modal", inputs: { uiClasses: { classPropertyName: "uiClasses", publicName: "uiClasses", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isShowAfkPopup()) {\n  <div\n    (click)=\"resetAfk()\"\n    [class]=\"scrimSkin()\"\n    class=\"afk-anchor clickableState\"\n    id=\"videoPlayOverlay\"\n  >\n    <div [class]=\"cardSkin()\">\n      @if (contentTemplate(); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n        />\n      } @else {\n        <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n          <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n        </div>\n        <div class=\"resume-box__text\">\n          <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n          <p>\n            No activity detected. Press 'Continue' if you wish to keep your\n            session active\n          </p>\n        </div>\n        <app-unreal-button\n          [fullWidth]=\"true\"\n          [data-testid]=\"'continue-session'\"\n          [class]=\"buttonSkin()\"\n          weight=\"primary\"\n          size=\"lg\"\n        >\n          Continue\n        </app-unreal-button>\n      }\n    </div>\n  </div>\n}\n", styles: [".afk-anchor{position:absolute;z-index:30;top:0;width:100%;height:100%}.afk-scrim{font-size:1.8em;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));background-color:var(--unreal-surface-scrim, rgba(100, 100, 100, .7))}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--unreal-radius-card, var(--src-border-rounded-parent, 8px));background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));box-shadow:var(--unreal-shadow-card, 0 26px 80px 0 rgba(0, 0, 0, .2), 0 0 1px 0 rgba(0, 0, 0, .2))}.resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.text-number{color:var(--unreal-text-main, #1f2937);text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--unreal-text-secondary, var(--src-text-body-secondary, #6b7280))}.resume-box__text .resume-box__heading{color:var(--unreal-text-main, var(--src-text-body-main, #1f2937));text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AfkTimeoutModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: AfkTimeoutModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-afk-timeout-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent], template: "@if (isShowAfkPopup()) {\n  <div (click)=\"resetAfk()\" class=\"clickableState\" id=\"videoPlayOverlay\">\n    <div class=\"resume-box\">\n      <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n        <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n      </div>\n      <div class=\"resume-box__text\">\n        <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n        <p>\n          No activity detected. Press 'Continue' if you wish to keep your\n          session active\n        </p>\n      </div>\n      <app-unreal-button\n        [fullWidth]=\"true\"\n        [data-testid]=\"'continue-session'\"\n        weight=\"primary\"\n        size=\"lg\"\n      >\n        Continue\n      </app-unreal-button>\n    </div>\n  </div>\n}\n", styles: ["#videoPlayOverlay{position:absolute;z-index:30;top:0;width:100%;height:100%;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif);background-color:#646464b3}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.resume-box .resume-box__pic .text-number{color:#1f2937;text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--src-text-body-secondary, #6b7280)}.resume-box__text .resume-box__heading{color:var(--src-text-body-main, #1f2937);text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
-        }] });
+            args: [{ selector: 'app-afk-timeout-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent, NgTemplateOutlet], template: "@if (isShowAfkPopup()) {\n  <div\n    (click)=\"resetAfk()\"\n    [class]=\"scrimSkin()\"\n    class=\"afk-anchor clickableState\"\n    id=\"videoPlayOverlay\"\n  >\n    <div [class]=\"cardSkin()\">\n      @if (contentTemplate(); as tpl) {\n        <ng-container\n          [ngTemplateOutlet]=\"tpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n        />\n      } @else {\n        <div aria-hidden=\"true\" class=\"resume-box__pic\" role=\"presentation\">\n          <div [innerHTML]=\"afkCountdown()\" class=\"text-number\"></div>\n        </div>\n        <div class=\"resume-box__text\">\n          <h3 class=\"resume-box__heading\">Session will time out soon</h3>\n          <p>\n            No activity detected. Press 'Continue' if you wish to keep your\n            session active\n          </p>\n        </div>\n        <app-unreal-button\n          [fullWidth]=\"true\"\n          [data-testid]=\"'continue-session'\"\n          [class]=\"buttonSkin()\"\n          weight=\"primary\"\n          size=\"lg\"\n        >\n          Continue\n        </app-unreal-button>\n      }\n    </div>\n  </div>\n}\n", styles: [".afk-anchor{position:absolute;z-index:30;top:0;width:100%;height:100%}.afk-scrim{font-size:1.8em;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));background-color:var(--unreal-surface-scrim, rgba(100, 100, 100, .7))}.clickableState{display:flex;justify-content:center;align-items:center;cursor:pointer}.textDisplayState{display:flex}.hiddenState{display:none}.resume-box{width:340px;padding:32px 20px 20px;flex-direction:column;align-items:center;border-radius:var(--unreal-radius-card, var(--src-border-rounded-parent, 8px));background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));box-shadow:var(--unreal-shadow-card, 0 26px 80px 0 rgba(0, 0, 0, .2), 0 0 1px 0 rgba(0, 0, 0, .2))}.resume-box__pic{width:72px;height:72px;margin:0 auto 22px;border-radius:48px;background:#ecf0f2;padding:12px;display:flex;align-items:center;justify-content:center}.text-number{color:var(--unreal-text-main, #1f2937);text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:30px;font-style:normal;font-weight:400;line-height:24px}.resume-box__text{margin-bottom:18px}.resume-box__text p{text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:var(--src-font-size-sm, 14px);font-style:normal;font-weight:400;line-height:24px;color:var(--unreal-text-secondary, var(--src-text-body-secondary, #6b7280))}.resume-box__text .resume-box__heading{color:var(--unreal-text-main, var(--src-text-body-main, #1f2937));text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:18px;font-style:normal;font-weight:500;line-height:26px;margin-bottom:8px}\n"] }]
+        }], propDecorators: { uiClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiClasses", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }] } });
 
 class FreezeFrameComponent {
     constructor() {
@@ -7442,10 +7445,10 @@ class FreezeFrameComponent {
         this.combinedFreeze = this.#store.selectSignal(selectFreezeFrameCombinedDataUrl);
     }
     #store;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FreezeFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: FreezeFrameComponent, isStandalone: true, selector: "app-freeze-frame", ngImport: i0, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FreezeFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: FreezeFrameComponent, isStandalone: true, selector: "app-freeze-frame", ngImport: i0, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FreezeFrameComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: FreezeFrameComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-freeze-frame', changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = combinedFreeze();\n@let progress = freezeFrameProgressMessageFromVideo();\n\n<div class=\"freeze-images\">\n  @if (image) {\n    <img [src]=\"image\" class=\"videoStillImage\" alt=\"freezeFrameImage\" />\n  }\n\n  @if (progress) {\n    <div class=\"progress-status\">\n      {{ progress }}\n    </div>\n  }\n</div>\n", styles: [".freeze-images{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}.freeze-images .freezeFrameOverlay{top:0;left:0;width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}.freeze-images .videoStillImage{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;object-fit:cover}.freeze-images .progress-status{position:absolute;top:50%;left:50%;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto;height:auto;margin:0;padding:10px;background-color:#ffffffb3;border:1px solid grey;transform:translate(-50%,-50%)}\n"] }]
         }] });
@@ -7460,12 +7463,12 @@ class ImageLoadingSrcComponent {
     loadingImageError() {
         this.#store.dispatch(setLoadingImageSrc({ src: '' }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ImageLoadingSrcComponent, isStandalone: true, selector: "app-image-loading-src", ngImport: i0, template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img\n          (error)=\"loadingImageError()\"\n          [ngSrc]=\"image\"\n          fill\n          loading=\"lazy\"\n          alt=\"image loading src\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ImageLoadingSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ImageLoadingSrcComponent, isStandalone: true, selector: "app-image-loading-src", ngImport: i0, template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img\n          (error)=\"loadingImageError()\"\n          [ngSrc]=\"image\"\n          fill\n          loading=\"lazy\"\n          alt=\"image loading src\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:var(--unreal-surface-screen, #fff)}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ImageLoadingSrcComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ImageLoadingSrcComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-image-loading-src', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage], template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img\n          (error)=\"loadingImageError()\"\n          [ngSrc]=\"image\"\n          fill\n          loading=\"lazy\"\n          alt=\"image loading src\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:#fff}\n"] }]
+            args: [{ selector: 'app-image-loading-src', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgOptimizedImage], template: "@let image = imageLoadingSrc();\n@if (isLoaderScreenVisible()) {\n  <div class=\"preload\">\n    <div class=\"back\">\n      @if (image) {\n        <img\n          (error)=\"loadingImageError()\"\n          [ngSrc]=\"image\"\n          fill\n          loading=\"lazy\"\n          alt=\"image loading src\"\n        />\n      }\n    </div>\n  </div>\n}\n", styles: [".preload{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center}.preload .back{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.preload .back img{width:100%;height:100%;object-fit:cover}.preload .back{background-color:var(--unreal-surface-screen, #fff)}\n"] }]
         }] });
 
 class StatGraphComponent {
@@ -7546,10 +7549,10 @@ class StatGraphComponent {
         }
         this.draw();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: StatGraphComponent, isStandalone: true, selector: "app-stat-graph", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, stat: { classPropertyName: "stat", publicName: "stat", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tickStep: { classPropertyName: "tickStep", publicName: "tickStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "graph", first: true, predicate: ["graph"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StatGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: StatGraphComponent, isStandalone: true, selector: "app-stat-graph", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, stat: { classPropertyName: "stat", publicName: "stat", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, tickStep: { classPropertyName: "tickStep", publicName: "tickStep", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resize()" } }, viewQueries: [{ propertyName: "graph", first: true, predicate: ["graph"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatGraphComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: StatGraphComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-stat-graph', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"content\">\n  <p>{{ label() }}: {{ current() }} | Min:{{ min() }} | Max:{{ max() }}</p>\n  <canvas #graph class=\"graph\"></canvas>\n</div>\n", styles: [".content{width:100%;height:100%}.content p{color:#fff;margin:5px 0 0;height:25px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], stat: [{ type: i0.Input, args: [{ isSignal: true, alias: "stat", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], tickStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickStep", required: false }] }], graph: [{ type: i0.ViewChild, args: ['graph', { isSignal: true }] }], resize: [{
@@ -7557,6 +7560,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 args: ['window:resize']
             }] } });
 
+class UnrealResumeSlotDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealResumeSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: UnrealResumeSlotDirective, isStandalone: true, selector: "ng-template[unrealResumeSlot]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealResumeSlotDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[unrealResumeSlot]' }]
+        }] });
+class UnrealAfkSlotDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealAfkSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: UnrealAfkSlotDirective, isStandalone: true, selector: "ng-template[unrealAfkSlot]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealAfkSlotDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[unrealAfkSlot]' }]
+        }] });
+class UnrealStatusSlotDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealStatusSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.1", type: UnrealStatusSlotDirective, isStandalone: true, selector: "ng-template[unrealStatusSlot]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealStatusSlotDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[unrealStatusSlot]' }]
+        }] });
+
 class UnrealSpinnerComponent {
     constructor() {
         this.size = input(32, /* @ts-ignore */
@@ -7575,10 +7621,10 @@ class UnrealSpinnerComponent {
         this.viewBox = computed(() => `0 0 ${this.size()} ${this.size()}`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: UnrealSpinnerComponent, isStandalone: true, selector: "app-unreal-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  class=\"unreal-spinner-container\"\n  role=\"status\"\n>\n  <svg\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.--unrealSpinnerSize]=\"size()\"\n    class=\"unreal-spinner unreal-spinner--animation\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style=\"transform: rotate(-90deg)\"\n    aria-hidden=\"true\"\n  >\n    <circle\n      [attr.r]=\"radius()\"\n      [attr.cx]=\"center()\"\n      [attr.cy]=\"center()\"\n      [attr.stroke]=\"strokeColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n    ></circle>\n  </svg>\n</div>\n", styles: [":host{display:block}.unreal-spinner-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.unreal-spinner{position:relative;display:inline-block}.unreal-spinner--animation{animation:1.4s linear 0s infinite normal none running unrealSpinnerRotate}.unreal-spinner--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--unrealSpinnerSize) * 2 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running unrealSpinnerDash}@keyframes unrealSpinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes unrealSpinnerDash{0%{stroke-dasharray:1px,calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * 3 * -1px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: UnrealSpinnerComponent, isStandalone: true, selector: "app-unreal-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, testID: { classPropertyName: "testID", publicName: "data-testid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  class=\"unreal-spinner-container\"\n  role=\"status\"\n>\n  <svg\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.--unrealSpinnerSize]=\"size()\"\n    class=\"unreal-spinner unreal-spinner--animation\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style=\"transform: rotate(-90deg)\"\n    aria-hidden=\"true\"\n  >\n    <circle\n      [attr.r]=\"radius()\"\n      [attr.cx]=\"center()\"\n      [attr.cy]=\"center()\"\n      [attr.stroke]=\"strokeColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n    ></circle>\n  </svg>\n</div>\n", styles: [":host{display:block}.unreal-spinner-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.unreal-spinner{position:relative;display:inline-block}.unreal-spinner--animation{animation:1.4s linear 0s infinite normal none running unrealSpinnerRotate}.unreal-spinner--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--unrealSpinnerSize) * 2 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running unrealSpinnerDash}@keyframes unrealSpinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes unrealSpinnerDash{0%{stroke-dasharray:1px,calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * 3 * -1px)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-unreal-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [attr.data-testid]=\"testID() || null\"\n  [attr.aria-label]=\"ariaLabel()\"\n  class=\"unreal-spinner-container\"\n  role=\"status\"\n>\n  <svg\n    [attr.width]=\"size()\"\n    [attr.height]=\"size()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.--unrealSpinnerSize]=\"size()\"\n    class=\"unreal-spinner unreal-spinner--animation\"\n    version=\"1.1\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    style=\"transform: rotate(-90deg)\"\n    aria-hidden=\"true\"\n  >\n    <circle\n      [attr.r]=\"radius()\"\n      [attr.cx]=\"center()\"\n      [attr.cy]=\"center()\"\n      [attr.stroke]=\"strokeColor()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"transparent\"\n      stroke-linecap=\"round\"\n    ></circle>\n  </svg>\n</div>\n", styles: [":host{display:block}.unreal-spinner-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.unreal-spinner{position:relative;display:inline-block}.unreal-spinner--animation{animation:1.4s linear 0s infinite normal none running unrealSpinnerRotate}.unreal-spinner--animation circle{transform-origin:50% 50%;stroke-dasharray:calc(var(--unrealSpinnerSize) * 2 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0;animation:1.6s ease-in-out 0s infinite normal none running unrealSpinnerDash}@keyframes unrealSpinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes unrealSpinnerDash{0%{stroke-dasharray:1px,calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:0}50%{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * .4 * -1px)}to{stroke-dasharray:calc(var(--unrealSpinnerSize) * 2.5 * 1px),calc(var(--unrealSpinnerSize) * 5 * 1px);stroke-dashoffset:calc(var(--unrealSpinnerSize) * 3 * -1px)}}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], strokeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeColor", required: false }] }], testID: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-testid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
@@ -7593,16 +7639,29 @@ class UnrealStatusComponent {
         this.showLoadingProgress = this.#store.selectSignal(unrealFeature.selectShowLoadingProgress);
         this.isShowLoadingPercentsPopup = computed(() => this.showLoader() && this.showLoadingProgress(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isShowLoadingPercentsPopup" }] : /* istanbul ignore next */ []));
+        this.uiClasses = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uiClasses" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.cardSkin = computed(() => resolveSkin(this.uiClasses(), 'statusCard', 'status-box'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cardSkin" }] : /* istanbul ignore next */ []));
+        this.messageSkin = computed(() => resolveSkin(this.uiClasses(), 'statusMessage', 'status-box__message'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "messageSkin" }] : /* istanbul ignore next */ []));
+        // Created once: identity stays stable, reactivity lives in the signals.
+        this.slotContext = {
+            percents: this.smoothPercents,
+            message: computed(() => this.awsInstance()?.message),
+        };
     }
     #store;
     #loadingProgress;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", ngImport: i0, template: "@if (isShowLoadingPercentsPopup()) {\n  @let _awsInstance = awsInstance();\n  <div class=\"status-box\">\n    @if (_awsInstance?.message) {\n      <p>{{ _awsInstance?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <app-unreal-spinner [size]=\"30\" [strokeColor]=\"'#1F2937'\" />\n        {{ smoothPercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message app-unreal-spinner{margin-right:12px}\n"], dependencies: [{ kind: "component", type: UnrealSpinnerComponent, selector: "app-unreal-spinner", inputs: ["size", "strokeWidth", "strokeColor", "data-testid", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UnrealStatusComponent, isStandalone: true, selector: "app-unreal-status", inputs: { uiClasses: { classPropertyName: "uiClasses", publicName: "uiClasses", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isShowLoadingPercentsPopup()) {\n  @let _awsInstance = awsInstance();\n  <div [class]=\"cardSkin()\" class=\"status-anchor\">\n    @if (contentTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n      />\n    } @else if (_awsInstance?.message) {\n      <p>{{ _awsInstance?.message }}</p>\n    } @else {\n      <div [class]=\"messageSkin()\">\n        <app-unreal-spinner [size]=\"30\" [strokeColor]=\"'#1F2937'\" />\n        {{ smoothPercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-anchor{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}.status-box{display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));border:none;border-radius:var(--unreal-radius-pill, var(--src-border-rounded-full, 9999px));box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814}.status-anchor p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--unreal-text-main, var(--src-text-body-main, #1f2937));font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message app-unreal-spinner{margin-right:12px}\n"], dependencies: [{ kind: "component", type: UnrealSpinnerComponent, selector: "app-unreal-spinner", inputs: ["size", "strokeWidth", "strokeColor", "data-testid", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealStatusComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-unreal-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealSpinnerComponent], template: "@if (isShowLoadingPercentsPopup()) {\n  @let _awsInstance = awsInstance();\n  <div class=\"status-box\">\n    @if (_awsInstance?.message) {\n      <p>{{ _awsInstance?.message }}</p>\n    } @else {\n      <div class=\"status-box__message\">\n        <app-unreal-spinner [size]=\"30\" [strokeColor]=\"'#1F2937'\" />\n        {{ smoothPercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-box{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--src-surface-container-main, #fff);border:none;border-radius:var(--src-border-rounded-full, 9999px);box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814;pointer-events:none}.status-box p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--src-text-body-main, #1f2937);font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message app-unreal-spinner{margin-right:12px}\n"] }]
-        }] });
+            args: [{ selector: 'app-unreal-status', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealSpinnerComponent, NgTemplateOutlet], template: "@if (isShowLoadingPercentsPopup()) {\n  @let _awsInstance = awsInstance();\n  <div [class]=\"cardSkin()\" class=\"status-anchor\">\n    @if (contentTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n      />\n    } @else if (_awsInstance?.message) {\n      <p>{{ _awsInstance?.message }}</p>\n    } @else {\n      <div [class]=\"messageSkin()\">\n        <app-unreal-spinner [size]=\"30\" [strokeColor]=\"'#1F2937'\" />\n        {{ smoothPercents() }}%\n      </div>\n    }\n  </div>\n}\n", styles: ["app-stat-graph{height:30px;width:100%}.status-anchor{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}.status-box{display:flex;justify-content:center;align-items:center;width:auto;max-width:500px;margin:0;background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));border:none;border-radius:var(--unreal-radius-pill, var(--src-border-rounded-full, 9999px));box-shadow:0 8px 20px #1718181f,0 3px 6px #17181814}.status-anchor p{padding:10px 15px;margin:0;text-align:center}.status-box__message{display:flex;align-items:center;padding:12px 20px 12px 16px;color:var(--unreal-text-main, var(--src-text-body-main, #1f2937));font-size:16px;font-weight:400;line-height:24px}.status-box__message .status-box__message_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.status-box__message app-unreal-spinner{margin-right:12px}\n"] }]
+        }], propDecorators: { uiClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiClasses", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }] } });
 
 class SafePipe {
     constructor() {
@@ -7632,10 +7691,10 @@ class SafePipe {
         // content instead of disabling framework security checks.
         return (this.sanitizer.sanitize(context, value) ?? '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.0", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SafePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: SafePipe, isStandalone: true, name: "safe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SafePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SafePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safe',
@@ -7748,10 +7807,10 @@ class VideoStatsComponent {
             elements: this.elementsToShow(),
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList(); track graph.key) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"graph.stat()\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssData() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatGraphComponent, selector: "app-stat-graph", inputs: ["label", "stat", "color", "tickStep"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VideoStatsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: VideoStatsComponent, isStandalone: true, selector: "app-video-stats", ngImport: i0, template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList(); track graph.key) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"graph.stat()\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssData() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"], dependencies: [{ kind: "component", type: StatGraphComponent, selector: "app-stat-graph", inputs: ["label", "stat", "color", "tickStep"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: SafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: VideoStatsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: VideoStatsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-video-stats', changeDetection: ChangeDetectionStrategy.OnPush, imports: [StatGraphComponent, JsonPipe, SafePipe], template: "@if (videoStatus() && viewportReady()) {\n  <div class=\"settings-container\">\n    <button (click)=\"toggle()\" class=\"gear-button\">Stats</button>\n    <div (click)=\"toggle()\" [class.min]=\"collapsed()\" id=\"aggregatedStats\">\n      <div class=\"forNerds\">\n        <div (click)=\"$event.stopPropagation()\" class=\"static\">\n          <li>\n            <app-stat-graph\n              [stat]=\"fpsTick()!\"\n              label=\"FPS (higher is better)\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"videoQP()!\"\n              label=\"QP (lower is better)\"\n              color=\"#D5ff07\"\n            />\n          </li>\n          <li>\n            <app-stat-graph\n              [stat]=\"bitrateTick()!\"\n              label=\"Bitrate\"\n              color=\"#D57F07\"\n            />\n          </li>\n        </div>\n        <div>\n          @for (graph of graphList(); track graph.key) {\n            <li (click)=\"toggleGraph($event, graph.key, 0)\" class=\"graph\">\n              <app-stat-graph\n                [label]=\"graph.key\"\n                [stat]=\"graph.stat()\"\n                [color]=\"graph.color\"\n              />\n            </li>\n          }\n        </div>\n      </div>\n\n      @for (el of videoStatus(); track el.key + $index) {\n        <div (click)=\"toggleGraph($event, el.key, el.value)\" class=\"stat\">\n          <span>{{ el.key }}: </span>{{ el.value | json }}\n        </div>\n      }\n    </div>\n  </div>\n  @if (!collapsed()) {\n    <div [innerHTML]=\"ssData() | safe: 'html'\" class=\"ssInfo\"></div>\n  }\n}\n", styles: [".settings-container{position:absolute;top:65px;left:10px;z-index:1000;bottom:10px}.gear-button{left:0;width:50px;position:absolute;background:none;cursor:pointer;font-size:10px;font-weight:500;border:1px solid;border-radius:9px;background:#0162cc;color:#fff;padding:4px}.gear-button>*{color:#fff;filter:drop-shadow(1px 1px 1px rgb(0,0,0))}#aggregatedStats{max-height:calc(100% - 25px);overflow-y:auto;margin-top:25px;left:20px;z-index:31;max-width:400px;padding:10px;background-color:#fff3;border:1px solid grey}#aggregatedStats>*{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}#aggregatedStats:empty{display:none}#aggregatedStats button{position:absolute;right:5px;top:5px}#aggregatedStats.min{display:none}#aggregatedStats .forNerds{width:100%}#aggregatedStats .forNerds li{list-style-type:none;height:60px}#aggregatedStats .forNerds li app-stat-graph{display:block;width:100%;height:100%}#aggregatedStats .stat span{font-weight:700}#aggregatedStats .stat,#aggregatedStats .graph{cursor:pointer}#aggregatedStats .static{pointer-events:all}.ssInfo{position:absolute;top:0;left:50%;transform:translate(-50%);color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;text-align:center;width:80%;pointer-events:none}\n"] }]
         }], ctorParameters: () => [] });
@@ -7760,6 +7819,16 @@ class ResumeStreamButtonComponent {
     #store;
     constructor() {
         this.#store = inject(Store);
+        this.uiClasses = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uiClasses" }] : /* istanbul ignore next */ []));
+        this.contentTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+        this.cardSkin = computed(() => resolveSkin(this.uiClasses(), 'resumeCard', 'resume-box'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cardSkin" }] : /* istanbul ignore next */ []));
+        this.textSkin = computed(() => resolveSkin(this.uiClasses(), 'resumeText', 'resume-box__text'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textSkin" }] : /* istanbul ignore next */ []));
+        this.buttonSkin = computed(() => resolveSkin(this.uiClasses(), 'resumeButton', 'connect-button'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonSkin" }] : /* istanbul ignore next */ []));
         this.streamConfig = this.#store.selectSignal(selectStreamConfig);
         this.isSecondStart = signal(this.streamConfig()?.autoStart && location.protocol === 'https:', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isSecondStart" }] : /* istanbul ignore next */ []));
@@ -7780,6 +7849,14 @@ class ResumeStreamButtonComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isAfkDisconnect" }] : /* istanbul ignore next */ []));
         this.cirrusConnected = this.#store.selectSignal(unrealFeature.selectCirrusConnected);
+        // Created once: the object identity must stay stable, reactivity lives in the
+        // signals it carries. Declared after the signals it references so field
+        // initialisation order holds.
+        this.slotContext = {
+            isSecondStart: this.isSecondStart,
+            isAfkDisconnect: this.isAfkDisconnect,
+            start: () => this.connect(),
+        };
         let wasConnected = this.cirrusConnected();
         effect(() => {
             const connected = this.cirrusConnected();
@@ -7795,13 +7872,13 @@ class ResumeStreamButtonComponent {
     disconnect() {
         this.isSecondStart.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", ngImport: i0, template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream {{ isAfkDisconnect() ? 'has been' : 'is' }} paused due to\n        inactivity\n      </div>\n    }\n\n    <app-unreal-button\n      (clicked)=\"connect()\"\n      [fullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </app-unreal-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ResumeStreamButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: ResumeStreamButtonComponent, isStandalone: true, selector: "app-resume-stream-button", inputs: { uiClasses: { classPropertyName: "uiClasses", publicName: "uiClasses", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isShowResumeButton()) {\n  <div [class]=\"cardSkin()\" class=\"resume-anchor\">\n    @if (contentTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n      />\n    } @else {\n      @if (isSecondStart()) {\n        <div [class]=\"textSkin()\">\n          Your stream {{ isAfkDisconnect() ? 'has been' : 'is' }} paused due to\n          inactivity\n        </div>\n      }\n\n      <app-unreal-button\n        (clicked)=\"connect()\"\n        [fullWidth]=\"true\"\n        [data-testid]=\"'connect-button'\"\n        [class]=\"buttonSkin()\"\n        size=\"lg\"\n        weight=\"primary\"\n      >\n        {{ isSecondStart() ? 'Resume' : 'Start' }}\n      </app-unreal-button>\n    }\n  </div>\n}\n", styles: [".resume-anchor{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%);z-index:6}.resume-box{padding:16px;gap:12px;display:flex;flex-direction:column;align-items:center;border-radius:var(--unreal-radius-card, var(--src-border-rounded-parent, 8px));background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));box-shadow:var(--unreal-shadow-card, 0 26px 80px 0 rgba(0, 0, 0, .2), 0 0 1px 0 rgba(0, 0, 0, .2))}.connect-button{width:100%}.resume-box__text{color:var(--unreal-text-secondary, var(--src-color-grey-500, #6b7280));text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"], dependencies: [{ kind: "component", type: UnrealButtonComponent, selector: "app-unreal-button", inputs: ["type", "weight", "size", "fullWidth", "isDisabled", "data-testid", "ariaLabel"], outputs: ["clicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ResumeStreamButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: ResumeStreamButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-resume-stream-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent], template: "@if (isShowResumeButton()) {\n  <div class=\"resume-box\">\n    @if (isSecondStart()) {\n      <div class=\"resume-box__text\">\n        Your stream {{ isAfkDisconnect() ? 'has been' : 'is' }} paused due to\n        inactivity\n      </div>\n    }\n\n    <app-unreal-button\n      (clicked)=\"connect()\"\n      [fullWidth]=\"true\"\n      [data-testid]=\"'connect-button'\"\n      size=\"lg\"\n      weight=\"primary\"\n      class=\"connect-button\"\n    >\n      {{ isSecondStart() ? 'Resume' : 'Start' }}\n    </app-unreal-button>\n  </div>\n}\n", styles: [".resume-box{padding:16px;position:absolute;bottom:0;left:50%;gap:12px;z-index:6;display:flex;transform:translate(-50%,-50%);flex-direction:column;align-items:center;border-radius:var(--src-border-rounded-parent, 8px);background:var(--src-surface-container-main, #fff);box-shadow:0 26px 80px #0003,0 0 1px #0003}.resume-box .connect-button{width:100%}.resume-box .resume-box__text{color:var(--src-color-grey-500, #6b7280);text-align:center;font-family:var(--src-font-family-body, system-ui, sans-serif);font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'app-resume-stream-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [UnrealButtonComponent, NgTemplateOutlet], template: "@if (isShowResumeButton()) {\n  <div [class]=\"cardSkin()\" class=\"resume-anchor\">\n    @if (contentTemplate(); as tpl) {\n      <ng-container\n        [ngTemplateOutlet]=\"tpl\"\n        [ngTemplateOutletContext]=\"{ $implicit: slotContext }\"\n      />\n    } @else {\n      @if (isSecondStart()) {\n        <div [class]=\"textSkin()\">\n          Your stream {{ isAfkDisconnect() ? 'has been' : 'is' }} paused due to\n          inactivity\n        </div>\n      }\n\n      <app-unreal-button\n        (clicked)=\"connect()\"\n        [fullWidth]=\"true\"\n        [data-testid]=\"'connect-button'\"\n        [class]=\"buttonSkin()\"\n        size=\"lg\"\n        weight=\"primary\"\n      >\n        {{ isSecondStart() ? 'Resume' : 'Start' }}\n      </app-unreal-button>\n    }\n  </div>\n}\n", styles: [".resume-anchor{position:absolute;bottom:0;left:50%;transform:translate(-50%,-50%);z-index:6}.resume-box{padding:16px;gap:12px;display:flex;flex-direction:column;align-items:center;border-radius:var(--unreal-radius-card, var(--src-border-rounded-parent, 8px));background:var(--unreal-surface-card, var(--src-surface-container-main, #fff));box-shadow:var(--unreal-shadow-card, 0 26px 80px 0 rgba(0, 0, 0, .2), 0 0 1px 0 rgba(0, 0, 0, .2))}.connect-button{width:100%}.resume-box__text{color:var(--unreal-text-secondary, var(--src-color-grey-500, #6b7280));text-align:center;font-family:var(--unreal-font-family, var(--src-font-family-body, system-ui, sans-serif));font-size:14px;font-style:normal;font-weight:400;line-height:24px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { uiClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiClasses", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }] } });
 
 class IntroSrcComponent {
     #store;
@@ -7865,10 +7942,10 @@ class IntroSrcComponent {
         sourceElement.addEventListener('error', () => this.#store.dispatch(resetIntroSrc()));
         videoContainer.appendChild(videoElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: IntroSrcComponent, isStandalone: true, selector: "app-intro-src", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoPlayerCover"], descendants: true, isSignal: true }], ngImport: i0, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img (error)=\"loadingImageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IntroSrcComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: IntroSrcComponent, isStandalone: true, selector: "app-intro-src", viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoPlayerCover"], descendants: true, isSignal: true }], ngImport: i0, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img (error)=\"loadingImageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: IntroSrcComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: IntroSrcComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-intro-src', imports: [NgOptimizedImage], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let image = imageIntroSrc();\n@if (image) {\n  <div class=\"backImage\">\n    <img (error)=\"loadingImageError()\" [ngSrc]=\"image\" fill alt=\"imageSrc\" />\n  </div>\n} @else if (videoIntroSrc()) {\n  <div #videoPlayerCover class=\"backVideo\"></div>\n}\n", styles: [".backVideo{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backVideo video{position:absolute;width:100%;height:100%;object-fit:cover}.backImage{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;z-index:1}.backImage img{position:absolute;width:100%;height:100%;object-fit:cover}\n"] }]
         }], ctorParameters: () => [], propDecorators: { videoElement: [{ type: i0.ViewChild, args: ['videoPlayerCover', { isSignal: true }] }] } });
@@ -7904,6 +7981,15 @@ class UnrealSceneComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resolutionSize" }] : /* istanbul ignore next */ []));
         this.changeMouseOverScene = output();
+        /** Host classes replacing the built-in decoration of the scene overlays. */
+        this.uiClasses = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uiClasses" }] : /* istanbul ignore next */ []));
+        this.resumeSlot = contentChild(UnrealResumeSlotDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resumeSlot" }] : /* istanbul ignore next */ []));
+        this.afkSlot = contentChild(UnrealAfkSlotDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "afkSlot" }] : /* istanbul ignore next */ []));
+        this.statusSlot = contentChild(UnrealStatusSlotDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "statusSlot" }] : /* istanbul ignore next */ []));
         this.videoElement = viewChild('videoContainer', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "videoElement" }] : /* istanbul ignore next */ []));
         this.resolutionValues$ = toObservable(this.resolutionSize);
@@ -8001,7 +8087,7 @@ class UnrealSceneComponent {
             this.height = height;
         }));
         const resizeRequired$ = merge(this.actions$.pipe(ofType(videoStreamInitialized)), fromEvent(window, 'resize'));
-        const videoStreamSizeChanged$ = this.videoService.videoStats$.pipe(filter(() => !this.isFreezeFrameLoading()), map$1((stats) => ({
+        const videoStreamSizeChanged$ = this.videoService.videoStats$.pipe(filter(() => !this.isFreezeFrameLoading()), map((stats) => ({
             w: stats.aggregatedStats.frameWidth || 0,
             h: stats.aggregatedStats.frameHeight || 0,
         })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
@@ -8010,8 +8096,8 @@ class UnrealSceneComponent {
             .pipe(debounceTime(DEBOUNCE_TO_MANY_RESIZE_CALLS), switchMap(() => {
             const key = Math.random();
             // Poll 3 times to capture late-arriving DOM measurements after layout settles
-            return timer(0, 300).pipe(take(3), map$1(() => key));
-        }), map$1((key) => ({ key, ...this.resizeValues })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
+            return timer(0, 300).pipe(take(3), map(() => key));
+        }), map((key) => ({ key, ...this.resizeValues })), distinctUntilChanged((previous, current) => fpIsASameAsB(previous.w, current.w, SAME_SIZE_THRESHOLD) &&
             fpIsASameAsB(previous.h, current.h, SAME_SIZE_THRESHOLD) &&
             previous.key === current.key), tap((size) => this.adaptVideo(size)), 
         // Key excluded: only dispatch when actual pixel dimensions change
@@ -8090,10 +8176,10 @@ class UnrealSceneComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealSceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: UnrealSceneComponent, isStandalone: true, selector: "app-unreal-scene", inputs: { useContainerAsSizeProvider: { classPropertyName: "useContainerAsSizeProvider", publicName: "useContainerAsSizeProvider", isSignal: true, isRequired: false, transformFunction: null }, isStudio: { classPropertyName: "isStudio", publicName: "isStudio", isSignal: true, isRequired: false, transformFunction: null }, resolutionSize: { classPropertyName: "resolutionSize", publicName: "resolutionSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeMouseOverScene: "changeMouseOverScene" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()", "contextmenu": "onContextMenu($event)" } }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame unreal-container\">\n  <div #videoContainer id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body, system-ui, sans-serif)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"], dependencies: [{ kind: "component", type: AfkTimeoutModalComponent, selector: "app-afk-timeout-modal" }, { kind: "component", type: UnrealStatusComponent, selector: "app-unreal-status" }, { kind: "component", type: FreezeFrameComponent, selector: "app-freeze-frame" }, { kind: "component", type: VideoStatsComponent, selector: "app-video-stats" }, { kind: "component", type: ResumeStreamButtonComponent, selector: "app-resume-stream-button" }, { kind: "component", type: ImageLoadingSrcComponent, selector: "app-image-loading-src" }, { kind: "component", type: IntroSrcComponent, selector: "app-intro-src" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealSceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: UnrealSceneComponent, isStandalone: true, selector: "app-unreal-scene", inputs: { useContainerAsSizeProvider: { classPropertyName: "useContainerAsSizeProvider", publicName: "useContainerAsSizeProvider", isSignal: true, isRequired: false, transformFunction: null }, isStudio: { classPropertyName: "isStudio", publicName: "isStudio", isSignal: true, isRequired: false, transformFunction: null }, resolutionSize: { classPropertyName: "resolutionSize", publicName: "resolutionSize", isSignal: true, isRequired: false, transformFunction: null }, uiClasses: { classPropertyName: "uiClasses", publicName: "uiClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeMouseOverScene: "changeMouseOverScene" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()", "contextmenu": "onContextMenu($event)" } }, queries: [{ propertyName: "resumeSlot", first: true, predicate: UnrealResumeSlotDirective, descendants: true, isSignal: true }, { propertyName: "afkSlot", first: true, predicate: UnrealAfkSlotDirective, descendants: true, isSignal: true }, { propertyName: "statusSlot", first: true, predicate: UnrealStatusSlotDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["videoContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"frame unreal-container\">\n  <div #videoContainer id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-freeze-frame />\n  <app-resume-stream-button\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"resumeSlot()?.template ?? null\"\n  />\n  <app-unreal-status\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"statusSlot()?.template ?? null\"\n  />\n  <app-afk-timeout-modal\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"afkSlot()?.template ?? null\"\n  />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body, system-ui, sans-serif)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"], dependencies: [{ kind: "component", type: AfkTimeoutModalComponent, selector: "app-afk-timeout-modal", inputs: ["uiClasses", "contentTemplate"] }, { kind: "component", type: UnrealStatusComponent, selector: "app-unreal-status", inputs: ["uiClasses", "contentTemplate"] }, { kind: "component", type: FreezeFrameComponent, selector: "app-freeze-frame" }, { kind: "component", type: VideoStatsComponent, selector: "app-video-stats" }, { kind: "component", type: ResumeStreamButtonComponent, selector: "app-resume-stream-button", inputs: ["uiClasses", "contentTemplate"] }, { kind: "component", type: ImageLoadingSrcComponent, selector: "app-image-loading-src" }, { kind: "component", type: IntroSrcComponent, selector: "app-intro-src" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: UnrealSceneComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: UnrealSceneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-unreal-scene', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AfkTimeoutModalComponent,
@@ -8103,8 +8189,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         ResumeStreamButtonComponent,
                         ImageLoadingSrcComponent,
                         IntroSrcComponent,
-                    ], template: "<div class=\"frame unreal-container\">\n  <div #videoContainer id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-resume-stream-button />\n  <app-unreal-status />\n  <app-freeze-frame />\n  <app-afk-timeout-modal />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body, system-ui, sans-serif)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { useContainerAsSizeProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContainerAsSizeProvider", required: false }] }], isStudio: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStudio", required: false }] }], resolutionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolutionSize", required: false }] }], changeMouseOverScene: [{ type: i0.Output, args: ["changeMouseOverScene"] }], videoElement: [{ type: i0.ViewChild, args: ['videoContainer', { isSignal: true }] }], onMouseOver: [{
+                    ], template: "<div class=\"frame unreal-container\">\n  <div #videoContainer id=\"player\"></div>\n\n  <app-intro-src />\n  <app-image-loading-src />\n  <app-freeze-frame />\n  <app-resume-stream-button\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"resumeSlot()?.template ?? null\"\n  />\n  <app-unreal-status\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"statusSlot()?.template ?? null\"\n  />\n  <app-afk-timeout-modal\n    [uiClasses]=\"uiClasses()\"\n    [contentTemplate]=\"afkSlot()?.template ?? null\"\n  />\n\n  <ng-content select=\"app-pdf\"></ng-content>\n  <ng-content select=\"app-show-case\"></ng-content>\n\n  @if (isDevMode) {\n    <app-video-stats />\n  }\n</div>\n", styles: [".unreal-container{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#fff}.unreal-container #player{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden}.unreal-container.select{cursor:url('data:image/svg+xml,<svg width=\"24\" height=\"24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.15 21.375a1.423 1.423 0 0 1-1.15.063 1.487 1.487 0 0 1-.85-.788l-3-6.45-2.325 3.25c-.283.4-.658.525-1.125.375-.467-.15-.7-.466-.7-.95V4.05c0-.417.188-.717.563-.9.375-.183.729-.142 1.062.125l10.1 7.95c.383.284.496.65.337 1.1-.158.45-.479.675-.962.675h-4.2l2.975 6.375c.183.384.204.767.063 1.15a1.487 1.487 0 0 1-.788.85Z\" fill=\"%23000\"/><path d=\"m12.697 20.861.002.005c.237.495.617.852 1.128 1.04.515.191 1.039.16 1.539-.08a1.987 1.987 0 0 0 1.04-1.128 1.922 1.922 0 0 0-.079-1.536v-.003L13.684 13.5H17.1c.32 0 .628-.075.89-.26.263-.184.438-.447.544-.749.106-.3.135-.617.04-.925a1.458 1.458 0 0 0-.545-.738L7.936 2.883a1.51 1.51 0 0 0-.768-.336 1.471 1.471 0 0 0-.825.154 1.495 1.495 0 0 0-.626.547 1.492 1.492 0 0 0-.217.802v12.825c0 .324.08.634.272.897.193.261.467.43.775.53.31.099.632.12.942.016.31-.103.555-.313.743-.578h.001l1.825-2.552 2.639 5.673Z\" stroke=\"%23fff\" stroke-opacity=\".7\"/></svg>') 6 2,auto}.unreal-container.orbit{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.998 21.6c-1.966 0-3.737-.53-5.312-1.588-1.575-1.058-2.738-2.437-3.488-4.137a.852.852 0 0 1 .013-.713.867.867 0 0 1 .512-.487.86.86 0 0 1 .688.037c.225.109.387.28.487.513.617 1.35 1.559 2.45 2.825 3.3 1.267.85 2.692 1.275 4.275 1.275 1.384 0 2.646-.33 3.788-.988a7.985 7.985 0 0 0 2.762-2.612h-.85a.873.873 0 0 1-.64-.257.863.863 0 0 1-.26-.638.88.88 0 0 1 .26-.643.864.864 0 0 1 .64-.262h3c.255 0 .47.086.642.259a.87.87 0 0 1 .258.64v3a.874.874 0 0 1-.257.642.863.863 0 0 1-.637.259.88.88 0 0 1-.643-.259.865.865 0 0 1-.263-.641v-.725a9.95 9.95 0 0 1-3.35 2.925c-1.35.733-2.833 1.1-4.45 1.1Zm0-17.4c-1.383 0-2.645.33-3.787.987A7.985 7.985 0 0 0 5.448 7.8h.85c.255 0 .47.086.642.257a.863.863 0 0 1 .258.638.88.88 0 0 1-.258.642.864.864 0 0 1-.642.263h-3a.87.87 0 0 1-.64-.259.87.87 0 0 1-.26-.641v-3c0-.255.086-.469.258-.641a.863.863 0 0 1 .637-.26.88.88 0 0 1 .643.26.864.864 0 0 1 .262.64v.726A9.95 9.95 0 0 1 7.548 3.5c1.35-.733 2.834-1.1 4.45-1.1 2 0 3.788.542 5.363 1.625 1.575 1.083 2.736 2.49 3.482 4.22a.724.724 0 0 1-.045.646.926.926 0 0 1-.525.437.87.87 0 0 1-.687-.04.977.977 0 0 1-.488-.513c-.616-1.35-1.558-2.45-2.825-3.3-1.266-.85-2.691-1.275-4.275-1.275Zm0 10.8a2.893 2.893 0 0 1-2.125-.875A2.893 2.893 0 0 1 8.998 12c0-.833.292-1.542.875-2.125A2.893 2.893 0 0 1 11.998 9c.834 0 1.542.292 2.125.875.584.583.875 1.292.875 2.125s-.291 1.542-.875 2.125a2.893 2.893 0 0 1-2.125.875Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"m2.739 16.072.002.005c.789 1.788 2.014 3.24 3.666 4.35 1.66 1.116 3.53 1.673 5.591 1.673 1.696 0 3.262-.386 4.69-1.16a10.54 10.54 0 0 0 2.714-2.097c.069.167.171.32.308.454.272.268.613.403.994.403.38 0 .722-.135.992-.406s.402-.614.402-.994v-3c0-.381-.134-.724-.405-.995a1.37 1.37 0 0 0-.995-.405h-3c-.383 0-.727.137-.997.411a1.38 1.38 0 0 0-.403.994c0 .38.135.723.407.992.238.237.532.369.858.397a7.552 7.552 0 0 1-2.027 1.685c-1.062.613-2.237.92-3.538.92-1.488 0-2.815-.397-3.996-1.19-1.19-.798-2.07-1.826-2.647-3.087-.147-.34-.393-.6-.727-.76a1.36 1.36 0 0 0-1.073-.058c-.37.133-.64.397-.8.754a1.351 1.351 0 0 0-.016 1.114Zm4.553-8.37a1.36 1.36 0 0 0-.858-.396A7.552 7.552 0 0 1 8.46 5.62c1.062-.613 2.237-.921 3.537-.921 1.489 0 2.816.398 3.997 1.19 1.19.8 2.07 1.827 2.646 3.088.148.34.394.6.728.76a1.37 1.37 0 0 0 1.068.063c.347-.12.62-.346.799-.668.187-.338.215-.71.072-1.072l-.003-.007-.003-.007c-.784-1.818-2.006-3.298-3.658-4.434C15.982 2.47 14.094 1.9 11.998 1.9c-1.695 0-3.261.385-4.688 1.16a10.536 10.536 0 0 0-2.715 2.096 1.364 1.364 0 0 0-.308-.453 1.38 1.38 0 0 0-.994-.403c-.38 0-.722.135-.992.406s-.403.614-.403.994v3c0 .38.135.724.406.995.27.27.614.405.994.405h3c.384 0 .727-.137.998-.412a1.38 1.38 0 0 0 .402-.993c0-.38-.135-.723-.406-.992ZM9.52 14.48a3.393 3.393 0 0 0 2.478 1.02c.965 0 1.8-.342 2.479-1.02a3.392 3.392 0 0 0 1.021-2.48c0-.963-.343-1.8-1.021-2.478A3.392 3.392 0 0 0 11.998 8.5c-.964 0-1.8.343-2.478 1.021A3.392 3.392 0 0 0 8.498 12c0 .964.344 1.8 1.022 2.479Z\"/></svg>') 12 12,auto}.unreal-container.pan{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><path fill=\"%23000\" d=\"M11.997 10.075a1.01 1.01 0 0 1-.738-.313 1.008 1.008 0 0 1-.312-.737V6.15l-.95.95a.998.998 0 0 1-.763.312 1.09 1.09 0 0 1-.763-.337 1.06 1.06 0 0 1-.324-.775c0-.3.108-.558.324-.775l2.776-2.775c.117-.116.237-.2.362-.25a1.04 1.04 0 0 1 .775 0c.125.05.246.134.363.25l2.8 2.8c.216.217.32.47.313.762a1.096 1.096 0 0 1-.338.763 1.058 1.058 0 0 1-.775.325c-.3 0-.558-.108-.775-.325l-.925-.925v2.875c0 .283-.104.53-.312.737a1.01 1.01 0 0 1-.738.313Zm0 11.5a1.04 1.04 0 0 1-.388-.075 1.103 1.103 0 0 1-.362-.25l-2.8-2.8a1.002 1.002 0 0 1-.313-.762c.009-.292.121-.546.337-.763.217-.217.475-.325.775-.325.3 0 .559.108.775.325l.926.925v-2.875c0-.283.104-.529.312-.737a1.01 1.01 0 0 1 .738-.313c.283 0 .529.104.738.313.208.208.312.454.312.737v2.875l.95-.95a.998.998 0 0 1 .762-.312c.292.008.546.12.763.337.216.217.324.475.324.775 0 .3-.108.559-.324.775l-2.775 2.775c-.117.116-.238.2-.363.25a1.04 1.04 0 0 1-.387.075Zm4.925-6.05a1.058 1.058 0 0 1-.326-.774c0-.3.109-.559.326-.776l.925-.925H14.97c-.283 0-.528-.104-.736-.312a1.01 1.01 0 0 1-.313-.738c0-.283.104-.53.313-.738.208-.208.453-.312.737-.312h2.875l-.95-.95a.998.998 0 0 1-.313-.762 1.09 1.09 0 0 1 .338-.764 1.06 1.06 0 0 1 .775-.324c.3 0 .558.108.775.324l2.774 2.776c.117.117.2.238.251.363a1.04 1.04 0 0 1 0 .775c-.05.124-.134.245-.25.362l-2.8 2.8c-.217.216-.471.32-.762.313a1.096 1.096 0 0 1-.763-.337Zm-11.4 0L2.746 12.75a1.103 1.103 0 0 1-.25-.362 1.04 1.04 0 0 1 0-.775c.05-.125.133-.246.25-.363l2.8-2.8c.216-.216.47-.32.762-.313.292.01.546.121.763.337.217.217.325.476.325.776 0 .3-.108.558-.325.775l-.925.925h2.875c.283 0 .529.104.737.312.208.209.313.455.313.738s-.105.53-.313.738a1.008 1.008 0 0 1-.737.312H6.147l.95.95c.217.217.32.471.312.762a1.09 1.09 0 0 1-.337.764 1.06 1.06 0 0 1-.775.324c-.3 0-.559-.108-.776-.324Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M9.22 7.912c.436.013.821-.15 1.13-.458l.097-.097v1.668c0 .422.16.793.458 1.09.298.299.67.46 1.092.46.422 0 .793-.161 1.091-.46.298-.297.459-.668.459-1.09V7.357l.071.072c.309.308.693.471 1.13.471.435 0 .82-.163 1.128-.471.301-.303.47-.676.483-1.102v-.001a1.501 1.501 0 0 0-.46-1.13l-2.799-2.8a1.6 1.6 0 0 0-.528-.36l-.003-.001a1.54 1.54 0 0 0-1.145 0l-.002.001a1.6 1.6 0 0 0-.529.36L8.118 5.172l-.001.001a1.56 1.56 0 0 0-.47 1.128c0 .435.163.82.47 1.128.303.303.676.472 1.103.484Zm0 0 .014-.5-.015.5Zm-1.311 6.865a1.497 1.497 0 0 0-.458-1.13l-.097-.097h1.668c.421 0 .793-.16 1.09-.458.298-.299.46-.67.46-1.092a1.51 1.51 0 0 0-.46-1.091 1.507 1.507 0 0 0-1.09-.459H7.354l.071-.072c.309-.308.472-.692.472-1.128 0-.436-.163-.82-.472-1.13a1.596 1.596 0 0 0-1.101-.482h-.002a1.501 1.501 0 0 0-1.129.459l-2.8 2.8a1.6 1.6 0 0 0-.36.528l-.001.003a1.54 1.54 0 0 0 0 1.144v.003c.081.2.208.375.362.529l2.774 2.775c.309.308.693.47 1.129.47.435 0 .82-.162 1.128-.47.303-.302.472-.676.484-1.102Zm0 0-.5-.014.5.015v-.001Zm3.038-8.627-.5.5.5.207V6.15Zm.475 15.814.002.001a1.54 1.54 0 0 0 1.145 0h.002c.2-.081.375-.208.53-.362l2.775-2.774a1.56 1.56 0 0 0 .47-1.129c0-.435-.162-.82-.47-1.128a1.589 1.589 0 0 0-1.103-.484 1.497 1.497 0 0 0-1.13.458l-.096.097v-1.668c0-.421-.161-.793-.459-1.09a1.509 1.509 0 0 0-1.091-.46c-.422 0-.794.161-1.092.46a1.507 1.507 0 0 0-.458 1.09v1.668l-.072-.072a1.558 1.558 0 0 0-1.129-.471c-.436 0-.82.163-1.128.471l-.001.001c-.301.302-.47.675-.483 1.101v.001c-.012.437.151.821.46 1.13l2.8 2.8c.153.153.328.28.528.36Zm5.146-6.085c.303.302.676.47 1.102.484a1.5 1.5 0 0 0 1.13-.46l2.8-2.8a1.6 1.6 0 0 0 .36-.528l.002-.003a1.54 1.54 0 0 0 0-1.144l-.001-.003a1.6 1.6 0 0 0-.361-.529l-2.774-2.775h-.001a1.56 1.56 0 0 0-1.128-.47c-.436 0-.82.162-1.128.47h-.001a1.59 1.59 0 0 0-.484 1.102c-.012.437.15.822.459 1.13l.097.097h-1.668c-.422 0-.793.16-1.09.459-.299.298-.46.67-.46 1.091 0 .422.161.793.46 1.092.297.297.668.458 1.09.458h1.668l-.072.072a1.558 1.558 0 0 0-.472 1.129c0 .435.164.82.472 1.128ZM6.147 13.05l.5.5.207-.5h-.707Z\"/></svg>') 12 12,auto}.unreal-container.dolly{cursor:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\"><mask id=\"a\" width=\"24\" height=\"24\" x=\"0\" y=\"0\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"%23127392\" d=\"M0 0h24v24H0z\"/></mask><g mask=\"url(%23a)\"><path fill=\"%23000\" d=\"M12.002 20.575a1.026 1.026 0 0 1-.75-.325l-2.55-2.55a.933.933 0 0 1-.287-.713c.008-.275.113-.513.313-.713.2-.2.441-.3.725-.3.283 0 .524.1.724.3l.776.776V6.95l-.8.8c-.2.2-.438.296-.712.288a1.018 1.018 0 0 1-.713-.312c-.2-.2-.3-.442-.3-.726s.1-.525.3-.725l2.524-2.525a1.026 1.026 0 0 1 1.5 0l2.55 2.55c.2.2.296.438.289.713a1.023 1.023 0 0 1-.314.713c-.2.2-.441.3-.724.3a.988.988 0 0 1-.725-.3l-.775-.776v10.1l.8-.8c.2-.2.437-.296.712-.288.275.008.512.112.712.312.2.2.3.442.3.726s-.1.525-.3.725l-2.524 2.525a1.026 1.026 0 0 1-.75.325Z\"/><path stroke=\"%23fff\" stroke-opacity=\".7\" d=\"M13.553 8.153c.28.245.62.373 1 .373.415 0 .784-.153 1.078-.447.287-.287.446-.644.46-1.05v-.002a1.432 1.432 0 0 0-.435-1.08l-2.55-2.55-.354.353.354-.354a1.526 1.526 0 0 0-2.207 0L8.374 5.921A1.487 1.487 0 0 0 7.928 7c0 .416.152.785.446 1.08.288.287.645.446 1.052.457l4.127-.384Zm0 0v7.693m0-7.693a1.667 1.667 0 0 1-.079-.074l-3.021.075v7.693a1.482 1.482 0 0 0-1-.373c-.416 0-.785.153-1.079.447a1.522 1.522 0 0 0-.46 1.05v.002c-.011.417.14.786.435 1.08l2.55 2.55a1.527 1.527 0 0 0 2.207 0l2.525-2.524c.294-.294.446-.663.446-1.079 0-.416-.152-.785-.446-1.08a1.518 1.518 0 0 0-1.052-.457m0 0-.014.5.014-.5Zm0 0a1.424 1.424 0 0 0-1.027.383m0 0a1.583 1.583 0 0 0-.053.05l.354.354m-.3-.404v.104l.3.3m0 0-.3-.3v.6l.3-.3Z\"/></g></svg>%0A') 12 12,auto}.unreal-container.disabled:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#playerUI{position:absolute;z-index:10;width:100%}#statsContainer{display:none;text-align:left;background-color:#000c}#stats{padding:6px;font-weight:700;font-size:14px;color:#0f0}canvas{position:absolute;image-rendering:crisp-edges}#overlay{position:absolute;top:0;right:2%;z-index:100;padding:4px;border-top-width:0;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.overlay{font-weight:lighter;font-family:var(--src-font-family-body, system-ui, sans-serif)}#overlayButton:hover{cursor:pointer}#overlayButton{font-size:40px;text-align:right}#overlaySettings{display:none;width:300px;padding:4px}#videoMessageOverlay{position:absolute;z-index:20;width:100%;margin:auto;font-size:1.8em;font-family:var(--src-font-family-body, system-ui, sans-serif)}#playButton{display:inline-block;height:auto}img#playButton{width:10%;max-width:241px}#UIInteraction{position:fixed}#UIInteractionButtonBoundary{padding:2px}#UIInteractionButton{cursor:pointer}#hiddenInput{position:absolute;left:-10%;width:0;opacity:0}#editTextButton{position:absolute;width:40px;height:40px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { useContainerAsSizeProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "useContainerAsSizeProvider", required: false }] }], isStudio: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStudio", required: false }] }], resolutionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resolutionSize", required: false }] }], changeMouseOverScene: [{ type: i0.Output, args: ["changeMouseOverScene"] }], uiClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiClasses", required: false }] }], resumeSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UnrealResumeSlotDirective), { isSignal: true }] }], afkSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UnrealAfkSlotDirective), { isSignal: true }] }], statusSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UnrealStatusSlotDirective), { isSignal: true }] }], videoElement: [{ type: i0.ViewChild, args: ['videoContainer', { isSignal: true }] }], onMouseOver: [{
                 type: HostListener,
                 args: ['mouseover']
             }], onMouseOut: [{
@@ -8163,5 +8249,5 @@ function provideUnrealModule() {
  * Generated bundle index. Do not edit.
  */
 
-export { AFKService, AUTO_HIGH_RESOLUTION_IDLE_MS, AfkTimeoutModalComponent, AggregatorService, AnalyticsService, AnswerHandler, CommandTelemetryService, ConfigHandler, ConsoleExtensionsService, ControlScheme, DATA_CHANNEL_CONNECTION_TIMEOUT, DEBOUNCE_TO_MANY_RESIZE_CALLS, DEFAULT_AFK_TIMEOUT, DEFAULT_AFK_TIMEOUT_PERIOD, DESTROY_DISCONNECT_REASONS, DevModeService, DisconnectReason, FULL_HD_HEIGHT, FULL_HD_WIDTH, FpsMonitorService, FreezeFrameComponent, FreezeFrameService, INNER_RETRY_LIMIT, INSTANCE_READY_TIMEOUT, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, InputService, InstanceReadyHandler, InstanceReservedHandler, IntroSrcComponent, LatencyTimings, LoadingProgressService, MINIMAL_FPS, MIN_CONTAINER_SIZE, MessageType, MouseButton, MouseButtonsMask, OUTER_RETRY_DELAY, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, POLLING_TIME, PlayerCountHandler, RECONNECT_CONFIG, REGION_PING_ACCURATE_SAMPLES, REGION_PING_BACKGROUND_REFRESH_DELAY_MS, REGION_PING_CACHE_KEY, REGION_PING_CACHE_TTL_MS, REGION_PING_WARMUP_DEADLINE_MS, RegionsPingService, SAME_SIZE_THRESHOLD, SCREEN_LOCKER_CONTAINER_ID, SIGNALLING_PERCENT_VALUE, SSInfoHandler, STREAMING_AUDIO_ID, STREAMING_VIDEO_ID, SafePipe, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamAdoptionService, StreamStatusTelemetryService, StreamStatusTelemetryService2, SubService, ToClientMessage, UNREAL_CONFIG, UnrealCallbackService, UnrealCommunicatorService, UnrealEffects, UnrealSceneComponent, UnrealStatusMessage, VideoService, VideoStatsComponent, WSCloseCode_CIRRUS_ABNORMAL_CLOSURE, WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR, WSCloseCode_CIRRUS_PLAYER_DISCONNECTED, WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER, WSCloseCode_FORCE_CIRRUS_CLOSE, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCode_UNKNOWN, WSCloseCodes, WS_OPEN_STATE, WS_RETRY_PER_INSTANCE, WS_TIMEOUT, WebRtcPlayerService, WebrtcErrorModalComponent, abortEstablishingConnection, answerSent, changeStatusMainVideoOnScene, changeStreamResolutionAction, commandCompleted, commandStarted, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, dropDC, dropPC, floatToPercents, floatToSmoothPercents, forceResizeViewport, fromResizeObserver, getActiveUrl, getImageFromVideoStream, getResizeStudioValues, getResizeValuesUniversal, getRtcErrorMessage, iceConnectionFailed, initSignalling, instanceReady, isMetaboxMode, keepMaxUntilReset, makeEven, pollingEnded, pollingStarted, provideUnrealModule, provideUnrealState, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, regionPingFetchEnd, regionPingFetchStart, regionResolved, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetUserInactivityTimeout, resetWarnTimeout, saveAnalyticsEvent, selectCirrusConnectionId, selectClientAndViewIds, selectCommandProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsFullyConnected, selectIsLoaderScreenVisible, selectIsVideoPlayingAndDataChannelConnected, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectUserInactivityDetected, selectWarnTimeout, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setUserInactivityTimeout, setViewportNotReady, setViewportReady, showLoadingProgress, showResumeStreamPopup, showUnrealErrorMessage, showUserInactivityTimeoutPopup, signalingRetryAttempted, startStream, streamAdopted, trackMixpanelEvent, trackTelemetryData, uint8ToBase64, unrealCommandCallback, unrealFeature, unrealReducer, updateCirrusInfo, videoAdaptedToContainer, videoStreamInitialized };
+export { AFKService, AUTO_HIGH_RESOLUTION_IDLE_MS, AfkTimeoutModalComponent, AggregatorService, AnalyticsService, AnswerHandler, CommandTelemetryService, ConfigHandler, ConsoleExtensionsService, ControlScheme, DATA_CHANNEL_CONNECTION_TIMEOUT, DEBOUNCE_TO_MANY_RESIZE_CALLS, DEFAULT_AFK_TIMEOUT, DEFAULT_AFK_TIMEOUT_PERIOD, DESTROY_DISCONNECT_REASONS, DevModeService, DisconnectReason, FULL_HD_HEIGHT, FULL_HD_WIDTH, FpsMonitorService, FreezeFrameComponent, FreezeFrameService, INNER_RETRY_LIMIT, INSTANCE_READY_TIMEOUT, IceCandidateHandler, ImageLoadingSrcComponent, InputOptions, InputService, InstanceReadyHandler, InstanceReservedHandler, IntroSrcComponent, LatencyTimings, LoadingProgressService, MINIMAL_FPS, MIN_CONTAINER_SIZE, MessageType, MouseButton, MouseButtonsMask, OUTER_RETRY_DELAY, OnCloseHandler, OnErrorHandler, OnMessageHandler, OnOpenHandler, OrchestrationMessageTypes, POLLING_TIME, PlayerCountHandler, RECONNECT_CONFIG, REGION_PING_ACCURATE_SAMPLES, REGION_PING_BACKGROUND_REFRESH_DELAY_MS, REGION_PING_CACHE_KEY, REGION_PING_CACHE_TTL_MS, REGION_PING_WARMUP_DEADLINE_MS, RegionsPingService, SAME_SIZE_THRESHOLD, SCREEN_LOCKER_CONTAINER_ID, SIGNALLING_PERCENT_VALUE, SSInfoHandler, STREAMING_AUDIO_ID, STREAMING_VIDEO_ID, SafePipe, SignallingService, SpecialKeyCodes, StatGraphComponent, StreamAdoptionService, StreamStatusTelemetryService, StreamStatusTelemetryService2, SubService, ToClientMessage, UNREAL_CONFIG, UnrealAfkSlotDirective, UnrealCallbackService, UnrealCommunicatorService, UnrealEffects, UnrealResumeSlotDirective, UnrealSceneComponent, UnrealStatusMessage, UnrealStatusSlotDirective, VideoService, VideoStatsComponent, WSCloseCode_CIRRUS_ABNORMAL_CLOSURE, WSCloseCode_CIRRUS_MAX_PLAYERS_ERROR, WSCloseCode_CIRRUS_PLAYER_DISCONNECTED, WSCloseCode_CIRRUS_STREAMER_KIKED_PLAYER, WSCloseCode_FORCE_CIRRUS_CLOSE, WSCloseCode_NORMAL_AFK_TIMEOUT, WSCloseCode_NORMAL_CLOSURE, WSCloseCode_NORMAL_MANUAL_DISCONNECT, WSCloseCode_UNKNOWN, WSCloseCodes, WS_OPEN_STATE, WS_RETRY_PER_INSTANCE, WS_TIMEOUT, WebRtcPlayerService, WebrtcErrorModalComponent, abortEstablishingConnection, answerSent, changeStatusMainVideoOnScene, changeStreamResolutionAction, commandCompleted, commandStarted, dataChannelConnected, dataChannelReady, decodeData, destroyRemoteConnections, destroyUnrealScene, disconnectStream, dispatchResize, dropConnection, dropDC, dropPC, floatToPercents, floatToSmoothPercents, forceResizeViewport, fromResizeObserver, getActiveUrl, getImageFromVideoStream, getResizeStudioValues, getResizeValuesUniversal, getRtcErrorMessage, iceConnectionFailed, initSignalling, instanceReady, isMetaboxMode, keepMaxUntilReset, makeEven, pollingEnded, pollingStarted, provideUnrealModule, provideUnrealState, qpToQuality, reconnectPeer, reconnectPeerFailed, reconnectPeerSuccess, regionPingFetchEnd, regionPingFetchStart, regionResolved, resetAfk, resetConfig, resetDataChannelForReconnect, resetIntroSrc, resetUserInactivityTimeout, resetWarnTimeout, resolveSkin, saveAnalyticsEvent, selectCirrusConnectionId, selectClientAndViewIds, selectCommandProgress, selectFreezeFrameCombinedDataUrl, selectFreezeFrameDataUrl, selectFreezeFrameDataUrlFromVideo, selectFreezeFrameProgressMessageFromVideo, selectIsAutostart, selectIsExistMatchUrls, selectIsFreezeFrameLoading, selectIsFullyConnected, selectIsLoaderScreenVisible, selectIsVideoPlayingAndDataChannelConnected, selectShowLoader, selectShowReconnectPopup, selectSignalingParameters, selectStreamConfig, selectTotalProgress, selectUserInactivityDetected, selectWarnTimeout, setAfkTimerCountdown, setAfkTimerHide, setAfkTimerVisible, setAwsInstance, setCirrusConnected, setCirrusDisconnected, setConfig, setEstablishingConnection, setFreezeFrame, setFreezeFrameFromVideo, setIntroImageSrc, setIntroVideoSrc, setLoadingImageSrc, setLoopBackCommandIsCompleted, setMaxFps, setOrchestrationContext, setOrchestrationMessage, setOrchestrationParameters, setOrchestrationProgress, setSignalingName, setStatusMessage, setStatusPercentSignallingServer, setStreamClientCompanyId, setStreamViewId, setUnrealPlaywrightConfig, setUserInactivityTimeout, setViewportNotReady, setViewportReady, showLoadingProgress, showResumeStreamPopup, showUnrealErrorMessage, showUserInactivityTimeoutPopup, signalingRetryAttempted, startStream, streamAdopted, trackMixpanelEvent, trackTelemetryData, uint8ToBase64, unrealCommandCallback, unrealFeature, unrealReducer, updateCirrusInfo, videoAdaptedToContainer, videoStreamInitialized };
 //# sourceMappingURL=3dsource-angular-unreal-module.mjs.map