@livepeer-frameworks/streamcrafter-wc 0.1.0

package/dist/fw-streamcrafter.iife.js

@@ -0,0 +1,3121 @@
+var FwStreamCrafter=function(e){"use strict";var t="undefined"!=typeof document?document.currentScript:null;function r(e,t,r,i){var s,o=arguments.length,n=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,i);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(n=(o<3?s(n):o>3?s(t,r,n):s(t,r))||n);return o>3&&n&&Object.defineProperty(t,r,n),n}"function"==typeof SuppressedError&&SuppressedError;
+/**
+     * @license
+     * Copyright 2019 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+const i=globalThis,s=i.ShadowRoot&&(void 0===i.ShadyCSS||i.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,o=Symbol(),n=new WeakMap;let a=class{constructor(e,t,r){if(this._$cssResult$=!0,r!==o)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(s&&void 0===e){const r=void 0!==t&&1===t.length;r&&(e=n.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),r&&n.set(t,e))}return e}toString(){return this.cssText}};const c=(e,...t)=>{const r=1===e.length?e[0]:t.reduce((t,r,i)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(r)+e[i+1],e[0]);return new a(r,e,o)},l=s?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const r of e.cssRules)t+=r.cssText;return(e=>new a("string"==typeof e?e:e+"",void 0,o))(t)})(e):e,{is:d,defineProperty:h,getOwnPropertyDescriptor:u,getOwnPropertyNames:p,getOwnPropertySymbols:g,getPrototypeOf:f}=Object,m=globalThis,w=m.trustedTypes,v=w?w.emptyScript:"",y=m.reactiveElementPolyfillSupport,b=(e,t)=>e,x={toAttribute(e,t){switch(t){case Boolean:e=e?v:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let r=e;switch(t){case Boolean:r=null!==e;break;case Number:r=null===e?null:Number(e);break;case Object:case Array:try{r=JSON.parse(e)}catch(e){r=null}}return r}},S=(e,t)=>!d(e,t),k={attribute:!0,type:String,converter:x,reflect:!1,useDefault:!1,hasChanged:S};
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */Symbol.metadata??=Symbol("metadata"),m.litPropertyMetadata??=new WeakMap;let C=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=k){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const r=Symbol(),i=this.getPropertyDescriptor(e,r,t);void 0!==i&&h(this.prototype,e,i)}}static getPropertyDescriptor(e,t,r){const{get:i,set:s}=u(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:i,set(t){const o=i?.call(this);s?.call(this,t),this.requestUpdate(e,o,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??k}static _$Ei(){if(this.hasOwnProperty(b("elementProperties")))return;const e=f(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(b("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(b("properties"))){const e=this.properties,t=[...p(e),...g(e)];for(const r of t)this.createProperty(r,e[r])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,r]of t)this.elementProperties.set(e,r)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const r=this._$Eu(e,t);void 0!==r&&this._$Eh.set(r,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const r=new Set(e.flat(1/0).reverse());for(const e of r)t.unshift(l(e))}else void 0!==e&&t.push(l(e));return t}static _$Eu(e,t){const r=t.attribute;return!1===r?void 0:"string"==typeof r?r:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const r of t.keys())this.hasOwnProperty(r)&&(e.set(r,this[r]),delete this[r]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,t)=>{if(s)e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const r of t){const t=document.createElement("style"),s=i.litNonce;void 0!==s&&t.setAttribute("nonce",s),t.textContent=r.cssText,e.appendChild(t)}})(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,r){this._$AK(e,r)}_$ET(e,t){const r=this.constructor.elementProperties.get(e),i=this.constructor._$Eu(e,r);if(void 0!==i&&!0===r.reflect){const s=(void 0!==r.converter?.toAttribute?r.converter:x).toAttribute(t,r.type);this._$Em=e,null==s?this.removeAttribute(i):this.setAttribute(i,s),this._$Em=null}}_$AK(e,t){const r=this.constructor,i=r._$Eh.get(e);if(void 0!==i&&this._$Em!==i){const e=r.getPropertyOptions(i),s="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:x;this._$Em=i;const o=s.fromAttribute(t,e.type);this[i]=o??this._$Ej?.get(i)??o,this._$Em=null}}requestUpdate(e,t,r,i=!1,s){if(void 0!==e){const o=this.constructor;if(!1===i&&(s=this[e]),r??=o.getPropertyOptions(e),!((r.hasChanged??S)(s,t)||r.useDefault&&r.reflect&&s===this._$Ej?.get(e)&&!this.hasAttribute(o._$Eu(e,r))))return;this.C(e,t,r)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:r,reflect:i,wrapped:s},o){r&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,o??t??this[e]),!0!==s||void 0!==o)||(this._$AL.has(e)||(this.hasUpdated||r||(t=void 0),this._$AL.set(e,t)),!0===i&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,r]of e){const{wrapped:e}=r,i=this[t];!0!==e||this._$AL.has(t)||void 0===i||this.C(t,void 0,r,i)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}};C.elementStyles=[],C.shadowRootOptions={mode:"open"},C[b("elementProperties")]=new Map,C[b("finalized")]=new Map,y?.({ReactiveElement:C}),(m.reactiveElementVersions??=[]).push("2.1.2");
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+const $=globalThis,M=e=>e,T=$.trustedTypes,A=T?T.createPolicy("lit-html",{createHTML:e=>e}):void 0,_="$lit$",E=`lit$${Math.random().toFixed(9).slice(2)}$`,I="?"+E,P=`<${I}>`,R=document,W=()=>R.createComment(""),z=e=>null===e||"object"!=typeof e&&"function"!=typeof e,U=Array.isArray,L="[ \t\n\f\r]",D=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,V=/-->/g,O=/>/g,j=RegExp(`>|${L}(?:([^\\s"'>=/]+)(${L}*=${L}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),N=/'/g,F=/"/g,H=/^(?:script|style|textarea|title)$/i,q=(e=>(t,...r)=>({_$litType$:e,strings:t,values:r}))(1),B=Symbol.for("lit-noChange"),G=Symbol.for("lit-nothing"),Q=new WeakMap,X=R.createTreeWalker(R,129);function K(e,t){if(!U(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==A?A.createHTML(t):t}const J=(e,t)=>{const r=e.length-1,i=[];let s,o=2===t?"<svg>":3===t?"<math>":"",n=D;for(let t=0;t<r;t++){const r=e[t];let a,c,l=-1,d=0;for(;d<r.length&&(n.lastIndex=d,c=n.exec(r),null!==c);)d=n.lastIndex,n===D?"!--"===c[1]?n=V:void 0!==c[1]?n=O:void 0!==c[2]?(H.test(c[2])&&(s=RegExp("</"+c[2],"g")),n=j):void 0!==c[3]&&(n=j):n===j?">"===c[0]?(n=s??D,l=-1):void 0===c[1]?l=-2:(l=n.lastIndex-c[2].length,a=c[1],n=void 0===c[3]?j:'"'===c[3]?F:N):n===F||n===N?n=j:n===V||n===O?n=D:(n=j,s=void 0);const h=n===j&&e[t+1].startsWith("/>")?" ":"";o+=n===D?r+P:l>=0?(i.push(a),r.slice(0,l)+_+r.slice(l)+E+h):r+E+(-2===l?t:h)}return[K(e,o+(e[r]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),i]};class Z{constructor({strings:e,_$litType$:t},r){let i;this.parts=[];let s=0,o=0;const n=e.length-1,a=this.parts,[c,l]=J(e,t);if(this.el=Z.createElement(c,r),X.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(i=X.nextNode())&&a.length<n;){if(1===i.nodeType){if(i.hasAttributes())for(const e of i.getAttributeNames())if(e.endsWith(_)){const t=l[o++],r=i.getAttribute(e).split(E),n=/([.?@])?(.*)/.exec(t);a.push({type:1,index:s,name:n[2],strings:r,ctor:"."===n[1]?ie:"?"===n[1]?se:"@"===n[1]?oe:re}),i.removeAttribute(e)}else e.startsWith(E)&&(a.push({type:6,index:s}),i.removeAttribute(e));if(H.test(i.tagName)){const e=i.textContent.split(E),t=e.length-1;if(t>0){i.textContent=T?T.emptyScript:"";for(let r=0;r<t;r++)i.append(e[r],W()),X.nextNode(),a.push({type:2,index:++s});i.append(e[t],W())}}}else if(8===i.nodeType)if(i.data===I)a.push({type:2,index:s});else{let e=-1;for(;-1!==(e=i.data.indexOf(E,e+1));)a.push({type:7,index:s}),e+=E.length-1}s++}}static createElement(e,t){const r=R.createElement("template");return r.innerHTML=e,r}}function Y(e,t,r=e,i){if(t===B)return t;let s=void 0!==i?r._$Co?.[i]:r._$Cl;const o=z(t)?void 0:t._$litDirective$;return s?.constructor!==o&&(s?._$AO?.(!1),void 0===o?s=void 0:(s=new o(e),s._$AT(e,r,i)),void 0!==i?(r._$Co??=[])[i]=s:r._$Cl=s),void 0!==s&&(t=Y(e,s._$AS(e,t.values),s,i)),t}class ee{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:r}=this._$AD,i=(e?.creationScope??R).importNode(t,!0);X.currentNode=i;let s=X.nextNode(),o=0,n=0,a=r[0];for(;void 0!==a;){if(o===a.index){let t;2===a.type?t=new te(s,s.nextSibling,this,e):1===a.type?t=new a.ctor(s,a.name,a.strings,this,e):6===a.type&&(t=new ne(s,this,e)),this._$AV.push(t),a=r[++n]}o!==a?.index&&(s=X.nextNode(),o++)}return X.currentNode=R,i}p(e){let t=0;for(const r of this._$AV)void 0!==r&&(void 0!==r.strings?(r._$AI(e,r,t),t+=r.strings.length-2):r._$AI(e[t])),t++}}class te{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,r,i){this.type=2,this._$AH=G,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=r,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=Y(this,e,t),z(e)?e===G||null==e||""===e?(this._$AH!==G&&this._$AR(),this._$AH=G):e!==this._$AH&&e!==B&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>U(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==G&&z(this._$AH)?this._$AA.nextSibling.data=e:this.T(R.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:r}=e,i="number"==typeof r?this._$AC(e):(void 0===r.el&&(r.el=Z.createElement(K(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===i)this._$AH.p(t);else{const e=new ee(i,this),r=e.u(this.options);e.p(t),this.T(r),this._$AH=e}}_$AC(e){let t=Q.get(e.strings);return void 0===t&&Q.set(e.strings,t=new Z(e)),t}k(e){U(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let r,i=0;for(const s of e)i===t.length?t.push(r=new te(this.O(W()),this.O(W()),this,this.options)):r=t[i],r._$AI(s),i++;i<t.length&&(this._$AR(r&&r._$AB.nextSibling,i),t.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const t=M(e).nextSibling;M(e).remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class re{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,r,i,s){this.type=1,this._$AH=G,this._$AN=void 0,this.element=e,this.name=t,this._$AM=i,this.options=s,r.length>2||""!==r[0]||""!==r[1]?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=G}_$AI(e,t=this,r,i){const s=this.strings;let o=!1;if(void 0===s)e=Y(this,e,t,0),o=!z(e)||e!==this._$AH&&e!==B,o&&(this._$AH=e);else{const i=e;let n,a;for(e=s[0],n=0;n<s.length-1;n++)a=Y(this,i[r+n],t,n),a===B&&(a=this._$AH[n]),o||=!z(a)||a!==this._$AH[n],a===G?e=G:e!==G&&(e+=(a??"")+s[n+1]),this._$AH[n]=a}o&&!i&&this.j(e)}j(e){e===G?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class ie extends re{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===G?void 0:e}}class se extends re{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==G)}}class oe extends re{constructor(e,t,r,i,s){super(e,t,r,i,s),this.type=5}_$AI(e,t=this){if((e=Y(this,e,t,0)??G)===B)return;const r=this._$AH,i=e===G&&r!==G||e.capture!==r.capture||e.once!==r.once||e.passive!==r.passive,s=e!==G&&(r===G||i);i&&this.element.removeEventListener(this.name,this,r),s&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class ne{constructor(e,t,r){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(e){Y(this,e)}}const ae=$.litHtmlPolyfillSupport;ae?.(Z,te),($.litHtmlVersions??=[]).push("3.3.2");const ce=globalThis;
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */let le=class extends C{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=((e,t,r)=>{const i=r?.renderBefore??t;let s=i._$litPart$;if(void 0===s){const e=r?.renderBefore??null;i._$litPart$=s=new te(t.insertBefore(W(),e),e,void 0,r??{})}return s._$AI(e),s})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return B}};le._$litElement$=!0,le.finalized=!0,ce.litElementHydrateSupport?.({LitElement:le});const de=ce.litElementPolyfillSupport;de?.({LitElement:le}),(ce.litElementVersions??=[]).push("4.2.2");
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+const he=e=>(t,r)=>{void 0!==r?r.addInitializer(()=>{customElements.define(e,t)}):customElements.define(e,t)},ue={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:S},pe=(e=ue,t,r)=>{const{kind:i,metadata:s}=r;let o=globalThis.litPropertyMetadata.get(s);if(void 0===o&&globalThis.litPropertyMetadata.set(s,o=new Map),"setter"===i&&((e=Object.create(e)).wrapped=!0),o.set(r.name,e),"accessor"===i){const{name:i}=r;return{set(r){const s=t.get.call(this);t.set.call(this,r),this.requestUpdate(i,s,e,!0,r)},init(t){return void 0!==t&&this.C(i,void 0,e,t),t}}}if("setter"===i){const{name:i}=r;return function(r){const s=this[i];t.call(this,r),this.requestUpdate(i,s,e,!0,r)}}throw Error("Unsupported decorator location: "+i)};
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */function ge(e){return(t,r)=>"object"==typeof r?pe(e,t,r):((e,t,r)=>{const i=t.hasOwnProperty(r);return t.constructor.createProperty(r,e),i?Object.getOwnPropertyDescriptor(t,r):void 0})(e,t,r)}
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */function fe(e){return ge({...e,state:!0,attribute:!1})}
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+function me(e,t){return(t,r,i)=>((e,t,r)=>(r.configurable=!0,r.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,r),r))(t,r,{get(){return(t=>t.renderRoot?.querySelector(e)??null)(this)}})}
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */const we=1;class ve{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,r){this._$Ct=e,this._$AM=t,this._$Ci=r}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}
+/**
+     * @license
+     * Copyright 2018 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */const ye=(e=>(...t)=>({_$litDirective$:e,values:t}))(class extends ve{constructor(e){if(super(e),e.type!==we||"class"!==e.name||e.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){if(void 0===this.st){this.st=new Set,void 0!==e.strings&&(this.nt=new Set(e.strings.join(" ").split(/\s/).filter(e=>""!==e)));for(const e in t)t[e]&&!this.nt?.has(e)&&this.st.add(e);return this.render(t)}const r=e.element.classList;for(const e of this.st)e in t||(r.remove(e),this.st.delete(e));for(const e in t){const i=!!t[e];i===this.st.has(e)||this.nt?.has(e)||(i?(r.add(e),this.st.add(e)):(r.remove(e),this.st.delete(e)))}return B}}),be=c`
+/**
+ * StreamCrafter CSS
+ * Wrapped in @layer fw-streamcrafter for cascade isolation.
+ * Host app unlayered styles will always take precedence.
+ *
+ * Import this file in your application:
+ * import '@livepeer-frameworks/streamcrafter-core/styles/streamcrafter.css';
+ */
+
+/* Declare layer upfront for lowest priority */
+@layer fw-streamcrafter;
+
+@layer fw-streamcrafter {
+  /* =============================================
+     Root Container (with scoped CSS variables)
+     ============================================= */
+  .fw-sc-root {
+    /* Tokyo Night color tokens - scoped to component */
+    --tn-bg-dark: 240 15% 10%; /* #16161e - Darkest surface */
+    --tn-bg: 235 19% 13%; /* #1a1b26 - Main background */
+    --tn-bg-highlight: 229 24% 19%; /* #24283b - Elevated surfaces */
+
+    --tn-fg: 229 73% 86%; /* #c0caf5 - Primary text */
+    --tn-fg-dark: 229 35% 75%; /* #a9b1d6 - Secondary text */
+    --tn-fg-gutter: 229 24% 31%; /* #3b4261 - Borders, seams */
+    --tn-comment: 229 23% 44%; /* #565f89 - Comments, muted */
+
+    --tn-blue: 225 86% 70%; /* #7aa2f7 - Primary actions */
+    --tn-green: 89 51% 61%; /* #9ece6a - Success, live */
+    --tn-red: 349 89% 72%; /* #f7768e - Destructive, errors */
+    --tn-yellow: 36 66% 64%; /* #e0af68 - Warnings */
+    --tn-purple: 264 85% 74%; /* #bb9af7 - Special */
+    --tn-cyan: 197 95% 74%; /* #7dcfff - Info */
+
+    /* Component styles */
+    background: hsl(var(--tn-bg-dark));
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    color: hsl(var(--tn-fg));
+    /* Allow root to take full height of parent and manage its children */
+    height: 100%;
+    min-height: 500px;
+    display: flex;
+    flex-direction: column;
+
+    overflow: hidden; /* Prevent content from overflowing the root container */
+
+    /* Container query support for responsive layout */
+    container-type: inline-size;
+    container-name: streamcrafter;
+  }
+
+  /* Dev mode - flex layout for side panel */
+  .fw-sc-root--devmode {
+    display: flex;
+    flex-direction: row;
+  }
+
+  /* Main content wrapper */
+  .fw-sc-main {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    /* Occupy remaining vertical space in root */
+    flex: 1;
+    overflow: hidden; /* Manage internal overflow */
+  }
+
+  /* Content area (preview + mixer) - responsive layout */
+  .fw-sc-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1; /* Occupy remaining vertical space in fw-sc-main */
+    min-height: 0; /* Allow flex item to shrink below content size */
+  }
+
+  /* Preview wrapper for flex sizing */
+  .fw-sc-preview-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Mixer panel class for responsive targeting */
+  .fw-sc-mixer {
+    /* Default: takes full width below preview */
+  }
+
+  /* =============================================
+   Responsive Layout: Mixer on Right (Wide Screens)
+   Uses container queries for container-aware layout
+   ============================================= */
+  @container streamcrafter (min-width: 600px) {
+    .fw-sc-content {
+      flex-direction: row;
+      align-items: stretch; /* Ensure full height */
+    }
+
+    .fw-sc-preview-wrapper {
+      flex: 1;
+      min-width: 0;
+      /* Center preview vertically if needed */
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      background: black;
+    }
+
+    .fw-sc-mixer {
+      width: 320px; /* Slightly wider for better ergonomics */
+      flex-shrink: 0;
+      border-left: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+      border-bottom: none;
+      background: hsl(var(--tn-bg));
+      display: flex;
+      flex-direction: column;
+      max-height: none;
+      overflow-y: auto;
+      transition: width 0.2s ease-out; /* Smooth collapse transition */
+    }
+
+    /* Collapsed state for sidebar mixer */
+    .fw-sc-mixer.fw-sc-section--collapsed {
+      width: 48px; /* Collapsed width */
+      overflow-x: hidden; /* Hide overflowing content */
+    }
+
+    .fw-sc-mixer.fw-sc-section--collapsed .fw-sc-section-header {
+      justify-content: center; /* Center icon */
+    }
+
+    .fw-sc-mixer.fw-sc-section--collapsed .fw-sc-section-header span {
+      display: none; /* Hide text */
+    }
+
+    .fw-sc-mixer.fw-sc-section--collapsed .fw-sc-section-header svg {
+      transform: rotate(0deg) !important; /* Reset chevron rotation */
+    }
+
+    .fw-sc-mixer.fw-sc-section--collapsed .fw-sc-sources {
+      display: none; /* Hide source list content */
+    }
+
+    /* Redesign Source Items for Sidebar Context */
+    .fw-sc-mixer .fw-sc-source {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.375rem 0.5rem;
+      background: hsl(var(--tn-bg-highlight) / 0.1);
+      border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+      transition: background 0.2s;
+      height: 48px;
+    }
+
+    .fw-sc-mixer .fw-sc-source:hover {
+      background: hsl(var(--tn-bg-highlight) / 0.3);
+    }
+
+    /* Icon */
+    .fw-sc-mixer .fw-sc-source-icon {
+      flex: 0 0 auto;
+    }
+
+    /* Name + Type */
+    .fw-sc-mixer .fw-sc-source-info {
+      flex: 1;
+      min-width: 0; /* Enable truncation */
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .fw-sc-mixer .fw-sc-source-label {
+      font-size: 0.8rem;
+      font-weight: 600;
+    }
+
+    /* Hide the source type in sidebar to save space */
+    .fw-sc-mixer .fw-sc-source-type {
+      display: none;
+    }
+
+    /* Controls */
+    .fw-sc-mixer .fw-sc-source-controls {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      margin: 0;
+      width: auto;
+    }
+
+    /* Volume Slider fixed width in compact mode */
+    .fw-sc-mixer .fw-sc-volume-slider {
+      width: 60px;
+      flex: 0 0 auto;
+      height: 6px;
+    }
+
+    /* Hide the percentage text in this compact view */
+    .fw-sc-mixer .fw-sc-volume-label {
+      display: none;
+    }
+  }
+
+  /* Advanced Panel styling - matches Player DevModePanel */
+  .fw-sc-advanced-panel {
+    background: hsl(var(--tn-bg));
+    border-left: 1px solid hsl(var(--tn-fg-gutter) / 0.5);
+    width: 280px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 12px;
+    z-index: 40;
+  }
+
+  /* =============================================
+   Header Zone
+   ============================================= */
+  .fw-sc-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    background: hsl(var(--tn-bg-highlight) / 0.5);
+  }
+
+  .fw-sc-header-title {
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 0.75rem;
+    color: hsl(var(--tn-fg-dark));
+  }
+
+  .fw-sc-header-status {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .fw-sc-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  /* Header Button - visible gear/wrench like Player */
+  .fw-sc-header-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: hsl(var(--tn-comment));
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .fw-sc-header-btn:hover {
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg));
+  }
+
+  .fw-sc-header-btn--active {
+    background: hsl(var(--tn-blue) / 0.2);
+    color: hsl(var(--tn-blue));
+  }
+
+  .fw-sc-header-btn--active:hover {
+    background: hsl(var(--tn-blue) / 0.3);
+    color: hsl(var(--tn-blue));
+  }
+
+  /* =============================================
+   Video Preview (Flush - No Padding)
+   ============================================= */
+  .fw-sc-preview {
+    position: relative;
+    /* Use flex-grow instead of aspect-ratio to fill available height */
+    flex: 1;
+    background: black;
+    overflow: hidden;
+    display: flex; /* Make it a flex container for the video */
+    align-items: center;
+    justify-content: center;
+  }
+
+  .fw-sc-preview video {
+    width: 100%;
+    height: 100%;
+    object-fit: contain; /* Ensure video fits within the preview area */
+  }
+
+  .fw-sc-preview-placeholder {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: hsl(var(--tn-comment));
+    gap: 0.5rem;
+  }
+
+  .fw-sc-preview-placeholder svg {
+    width: 48px;
+    height: 48px;
+    opacity: 0.5;
+  }
+
+  /* =============================================
+   Live Badge Overlay
+   ============================================= */
+  .fw-sc-live-badge {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    background: hsl(var(--tn-red));
+    color: white;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .fw-sc-live-badge::before {
+    content: "";
+    width: 0.5rem;
+    height: 0.5rem;
+    background: white;
+    border-radius: 50%;
+    animation: fw-sc-pulse 1.5s infinite;
+  }
+
+  @keyframes fw-sc-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+
+  /* =============================================
+   Status Overlay
+   ============================================= */
+  .fw-sc-status-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: hsl(var(--tn-bg-dark) / 0.9);
+    gap: 1rem;
+  }
+
+  .fw-sc-status-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid hsl(var(--tn-fg-gutter) / 0.3);
+    border-top-color: hsl(var(--tn-blue));
+    border-radius: 50%;
+    animation: fw-sc-spin 1s linear infinite;
+  }
+
+  @keyframes fw-sc-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .fw-sc-status-text {
+    font-size: 0.875rem;
+    color: hsl(var(--tn-fg-dark));
+  }
+
+  /* =============================================
+   VU Meter
+   ============================================= */
+  .fw-sc-vu-meter {
+    height: 8px;
+    background: hsl(var(--tn-bg-highlight));
+    position: relative;
+    overflow: hidden;
+  }
+
+  .fw-sc-vu-meter-fill {
+    height: 100%;
+    background: linear-gradient(
+      to right,
+      hsl(var(--tn-green)) 0%,
+      hsl(var(--tn-green)) 60%,
+      hsl(var(--tn-yellow)) 80%,
+      hsl(var(--tn-red)) 100%
+    );
+    transition: width 50ms ease-out;
+  }
+
+  .fw-sc-vu-meter-peak {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 2px;
+    background: hsl(var(--tn-fg));
+    transition: left 50ms ease-out;
+  }
+
+  /* Vertical VU Meter variant */
+  .fw-sc-vu-meter--vertical {
+    width: 4px;
+    height: 100%;
+    background: hsl(var(--tn-bg-highlight));
+  }
+
+  .fw-sc-vu-meter--vertical .fw-sc-vu-meter-fill {
+    width: 100%;
+    background: linear-gradient(
+      to top,
+      hsl(var(--tn-green)) 0%,
+      hsl(var(--tn-green)) 60%,
+      hsl(var(--tn-yellow)) 80%,
+      hsl(var(--tn-red)) 100%
+    );
+    transition: height 50ms ease-out;
+  }
+
+  /* =============================================
+   Section (Collapsible Areas)
+   ============================================= */
+  .fw-sc-section {
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+  }
+
+  .fw-sc-section:last-child {
+    border-bottom: none;
+  }
+
+  .fw-sc-section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-comment));
+    cursor: pointer;
+    user-select: none;
+    background: hsl(var(--tn-bg-highlight) / 0.3);
+  }
+
+  .fw-sc-section-header:hover {
+    background: hsl(var(--tn-bg-highlight) / 0.5);
+  }
+
+  .fw-sc-section-header svg {
+    width: 14px;
+    height: 14px;
+    transition: transform 0.2s;
+  }
+
+  .fw-sc-section--collapsed .fw-sc-section-header svg {
+    transform: rotate(-90deg);
+  }
+
+  .fw-sc-section-body {
+    padding: 0.75rem 1rem;
+  }
+
+  .fw-sc-section-body--flush {
+    padding: 0;
+  }
+
+  /* =============================================
+   Source List
+   ============================================= */
+  .fw-sc-sources {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .fw-sc-source {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    gap: 0.5rem;
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);
+  }
+
+  .fw-sc-source:last-child {
+    border-bottom: none;
+  }
+
+  .fw-sc-source--hidden {
+    opacity: 0.5;
+    background: hsl(var(--tn-bg-dark) / 0.3);
+  }
+
+  .fw-sc-source-icon {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-source-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .fw-sc-source-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .fw-sc-primary-badge {
+    font-size: 0.55rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.125rem 0.375rem;
+    background: hsl(var(--tn-green) / 0.2);
+    color: hsl(var(--tn-green));
+    border-radius: 2px;
+  }
+
+  .fw-sc-source-type {
+    font-size: 0.7rem;
+    color: hsl(var(--tn-comment));
+    text-transform: uppercase;
+  }
+
+  .fw-sc-source-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-wrap: wrap; /* Allow items to wrap */
+    justify-content: flex-end; /* Align to the right when wrapped */
+  }
+
+  /* =============================================
+   Icon Buttons (Small Controls)
+   ============================================= */
+  .fw-sc-icon-btn {
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: hsl(var(--tn-comment));
+    cursor: pointer;
+    transition:
+      background 0.15s,
+      color 0.15s;
+  }
+
+  .fw-sc-icon-btn:hover {
+    background: hsl(var(--tn-bg-highlight) / 0.5);
+    color: hsl(var(--tn-fg));
+  }
+
+  .fw-sc-icon-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .fw-sc-icon-btn--active {
+    color: hsl(var(--tn-blue));
+  }
+
+  .fw-sc-icon-btn--inactive {
+    opacity: 0.45;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-icon-btn--primary {
+    color: hsl(var(--tn-green));
+  }
+
+  .fw-sc-icon-btn--primary:disabled {
+    color: hsl(var(--tn-green));
+    opacity: 1;
+  }
+
+  .fw-sc-icon-btn--destructive:hover {
+    color: hsl(var(--tn-red));
+  }
+
+  .fw-sc-icon-btn--muted {
+    color: hsl(var(--tn-comment) / 0.5);
+  }
+
+  .fw-sc-icon-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* =============================================
+   Settings Panel
+   ============================================= */
+  .fw-sc-settings {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .fw-sc-setting-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  .fw-sc-setting-label {
+    font-size: 0.875rem;
+    color: hsl(var(--tn-fg-dark));
+  }
+
+  .fw-sc-select {
+    padding: 0.25rem 0.5rem;
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    border-radius: 4px;
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg));
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+
+  .fw-sc-select:focus {
+    outline: none;
+    border-color: hsl(var(--tn-blue));
+  }
+
+  /* =============================================
+   Action Bar (Bottom Controls)
+   ============================================= */
+  .fw-sc-actions {
+    display: flex;
+    border-top: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+  }
+
+  .fw-sc-actions button {
+    padding: 1rem;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    color: hsl(var(--tn-fg));
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s;
+    border-right: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+  }
+
+  .fw-sc-actions button:last-child {
+    border-right: none;
+  }
+
+  .fw-sc-actions button:hover:not(:disabled) {
+    background: hsl(var(--tn-bg-highlight) / 0.5);
+  }
+
+  .fw-sc-actions button:disabled {
+    color: hsl(var(--tn-comment));
+    cursor: not-allowed;
+  }
+
+  .fw-sc-actions button svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  /* Secondary actions (Camera, Screen, Settings) - smaller */
+  .fw-sc-action-secondary {
+    flex: 0 0 auto;
+  }
+
+  .fw-sc-action-secondary--active {
+    background: hsl(var(--tn-blue) / 0.2) !important;
+    color: hsl(var(--tn-blue)) !important;
+  }
+
+  /* Settings icon rotation on hover */
+  .fw-sc-action-secondary .settings-icon-wrapper {
+    display: inline-flex;
+    transition: transform 0.2s ease;
+  }
+
+  .fw-sc-action-secondary:hover .settings-icon-wrapper {
+    transform: rotate(90deg);
+  }
+
+  /* Primary action (Go Live) - takes remaining space */
+  .fw-sc-action-primary {
+    flex: 1;
+    font-weight: 600 !important;
+    background: hsl(var(--tn-red)) !important;
+    color: white !important;
+  }
+
+  .fw-sc-action-primary:hover:not(:disabled) {
+    background: hsl(var(--tn-red) / 0.8) !important;
+  }
+
+  .fw-sc-action-primary:disabled {
+    background: hsl(var(--tn-bg-highlight)) !important;
+    color: hsl(var(--tn-comment)) !important;
+  }
+
+  /* Stop action (when streaming) */
+  .fw-sc-action-stop {
+    background: hsl(var(--tn-bg-highlight)) !important;
+  }
+
+  .fw-sc-action-stop:hover:not(:disabled) {
+    background: hsl(var(--tn-red) / 0.3) !important;
+  }
+
+  /* =============================================
+   Status Badge
+   ============================================= */
+  .fw-sc-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+    border-radius: 2px;
+  }
+
+  .fw-sc-badge--idle {
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-badge--ready {
+    background: hsl(var(--tn-blue) / 0.2);
+    color: hsl(var(--tn-blue));
+  }
+
+  .fw-sc-badge--live {
+    background: hsl(var(--tn-red));
+    color: white;
+  }
+
+  .fw-sc-badge--connecting {
+    background: hsl(var(--tn-yellow) / 0.2);
+    color: hsl(var(--tn-yellow));
+  }
+
+  .fw-sc-badge--error {
+    background: hsl(var(--tn-red) / 0.2);
+    color: hsl(var(--tn-red));
+  }
+
+  /* =============================================
+   Volume Slider
+   ============================================= */
+  .fw-sc-volume-label {
+    font-size: 0.65rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    color: hsl(var(--tn-fg-dark));
+    min-width: 32px;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .fw-sc-volume-slider {
+    width: 80px; /* Slightly wider by default */
+    height: 6px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: hsl(var(--tn-bg-highlight));
+    border-radius: 3px;
+    cursor: pointer;
+    position: relative;
+    transition: opacity 0.2s;
+  }
+
+  .fw-sc-volume-slider:hover {
+    opacity: 0.9;
+  }
+
+  /* Track fill simulation (Note: WebKit requires JS to update background-size for true fill before thumb, 
+   but we can use a gradient trick if value is known, or just keep the clean track look) */
+
+  .fw-sc-volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: hsl(var(--tn-fg));
+    border: 2px solid hsl(var(--tn-bg)); /* Ring effect */
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    margin-top: -4px; /* Center thumb on 6px track */
+    transition: transform 0.1s;
+  }
+
+  .fw-sc-volume-slider:hover::-webkit-slider-thumb {
+    transform: scale(1.1);
+    background: white;
+  }
+
+  .fw-sc-volume-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: hsl(var(--tn-fg));
+    border: 2px solid hsl(var(--tn-bg));
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    transition: transform 0.1s;
+  }
+
+  .fw-sc-volume-slider:hover::-moz-range-thumb {
+    transform: scale(1.1);
+    background: white;
+  }
+
+  /* Boosted state (>100%) - Add a glow */
+  .fw-sc-volume-slider--boosted::-webkit-slider-thumb {
+    background: hsl(var(--tn-yellow));
+    box-shadow: 0 0 5px hsl(var(--tn-yellow) / 0.5);
+  }
+
+  .fw-sc-volume-slider--boosted::-moz-range-thumb {
+    background: hsl(var(--tn-yellow));
+    box-shadow: 0 0 5px hsl(var(--tn-yellow) / 0.5);
+  }
+
+  /* =============================================
+   Error State
+   ============================================= */
+  .fw-sc-error {
+    padding: 1rem;
+    background: hsl(var(--tn-red) / 0.1);
+    border-left: 3px solid hsl(var(--tn-red));
+  }
+
+  .fw-sc-error-title {
+    font-weight: 600;
+    color: hsl(var(--tn-red));
+    margin-bottom: 0.25rem;
+  }
+
+  .fw-sc-error-message {
+    font-size: 0.875rem;
+    color: hsl(var(--tn-fg-dark));
+  }
+
+  /* =============================================
+   Utility Classes
+   ============================================= */
+  .fw-sc-hidden {
+    display: none !important;
+  }
+
+  .fw-sc-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* =============================================
+   Settings Dropdown
+   ============================================= */
+  .fw-sc-settings-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    min-width: 200px;
+    background: hsl(var(--tn-bg-dark));
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    z-index: 50;
+    overflow: hidden;
+  }
+
+  .fw-sc-dropdown-section {
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);
+  }
+
+  .fw-sc-dropdown-section:last-child {
+    border-bottom: none;
+  }
+
+  .fw-sc-dropdown-label {
+    padding: 0.5rem 0.75rem 0.25rem;
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-dropdown-options {
+    display: flex;
+    flex-direction: column;
+    padding: 0 0.25rem 0.5rem;
+  }
+
+  .fw-sc-dropdown-option {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+    padding: 0.375rem 0.5rem;
+    margin: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: hsl(var(--tn-fg));
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    transition: background 0.15s;
+  }
+
+  .fw-sc-dropdown-option:hover:not(:disabled) {
+    background: hsl(var(--tn-bg-highlight) / 0.5);
+  }
+
+  .fw-sc-dropdown-option:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .fw-sc-dropdown-option--active {
+    background: hsl(var(--tn-blue) / 0.2);
+  }
+
+  .fw-sc-dropdown-option--active:hover:not(:disabled) {
+    background: hsl(var(--tn-blue) / 0.3);
+  }
+
+  .fw-sc-dropdown-option-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .fw-sc-dropdown-option-desc {
+    font-size: 0.7rem;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-dropdown-info {
+    padding: 0.25rem 0.75rem 0.5rem;
+  }
+
+  .fw-sc-dropdown-info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.25rem 0;
+    font-size: 0.75rem;
+    color: hsl(var(--tn-fg-dark));
+  }
+
+  .fw-sc-dropdown-info-value {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    color: hsl(var(--tn-fg));
+  }
+
+  /* =============================================
+   Context Menu
+   ============================================= */
+  .fw-sc-context-menu {
+    position: fixed;
+    min-width: 160px;
+    background: hsl(var(--tn-bg-dark));
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    z-index: 100;
+    overflow: hidden;
+  }
+
+  .fw-sc-context-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    color: hsl(var(--tn-fg));
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    width: 100%;
+    text-align: left;
+    transition:
+      background 0.15s,
+      color 0.15s;
+  }
+
+  .fw-sc-context-menu-item:hover {
+    background: hsl(var(--tn-bg-highlight) / 0.7);
+    color: hsl(var(--tn-fg));
+  }
+
+  .fw-sc-context-menu-item--destructive {
+    color: hsl(var(--tn-red));
+  }
+
+  .fw-sc-context-menu-item--destructive:hover {
+    background: hsl(var(--tn-red) / 0.15);
+    color: hsl(var(--tn-red));
+  }
+
+  .fw-sc-context-menu-separator {
+    height: 1px;
+    background: hsl(var(--tn-fg-gutter) / 0.3);
+    margin: 0.25rem 0;
+  }
+
+  .fw-sc-context-menu-label {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-comment));
+  }
+
+  /* =============================================
+   Compositor Controls (Phase 3)
+   ============================================= */
+  .fw-sc-compositor-controls {
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+  }
+
+  .fw-sc-compositor-controls--disabled,
+  .fw-sc-compositor-controls--loading {
+    padding: 1rem;
+  }
+
+  .fw-sc-compositor-enable {
+    text-align: center;
+  }
+
+  .fw-sc-compositor-enable p {
+    font-size: 0.875rem;
+    color: hsl(var(--tn-fg-dark));
+    margin-bottom: 0.75rem;
+  }
+
+  .fw-sc-compositor-enable-btn {
+    padding: 0.5rem 1rem;
+    border: 1px solid hsl(var(--tn-blue));
+    border-radius: 4px;
+    background: hsl(var(--tn-blue) / 0.1);
+    color: hsl(var(--tn-blue));
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .fw-sc-compositor-enable-btn:hover {
+    background: hsl(var(--tn-blue) / 0.2);
+  }
+
+  .fw-sc-compositor-loading {
+    text-align: center;
+    color: hsl(var(--tn-comment));
+    font-size: 0.875rem;
+  }
+
+  .fw-sc-compositor-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);
+    background: hsl(var(--tn-bg-highlight) / 0.3);
+  }
+
+  .fw-sc-compositor-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .fw-sc-compositor-title {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-compositor-renderer {
+    font-size: 0.7rem;
+    color: hsl(var(--tn-fg-dark));
+  }
+
+  .fw-sc-compositor-stats-inline {
+    font-size: 0.65rem;
+    color: hsl(var(--tn-fg-gutter));
+    font-family:
+      ui-monospace,
+      SFMono-Regular,
+      SF Mono,
+      Menlo,
+      Consolas,
+      monospace;
+    margin-left: 0.5rem;
+  }
+
+  .fw-sc-compositor-disable-btn {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: hsl(var(--tn-comment));
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .fw-sc-compositor-disable-btn:hover {
+    background: hsl(var(--tn-red) / 0.2);
+    color: hsl(var(--tn-red));
+  }
+
+  .fw-sc-compositor-stats {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.25rem 1rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.7rem;
+    color: hsl(var(--tn-fg-dark));
+    background: hsl(var(--tn-bg-dark) / 0.5);
+  }
+
+  .fw-sc-stat {
+    color: hsl(var(--tn-cyan));
+  }
+
+  /* =============================================
+   Compositor Actions (Header Right Side)
+   ============================================= */
+  .fw-sc-compositor-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .fw-sc-scaling-mode-select {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.7rem;
+    background: hsl(var(--tn-bg-dark));
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    border-radius: 4px;
+    color: hsl(var(--tn-fg));
+    cursor: pointer;
+  }
+
+  .fw-sc-scaling-mode-select:hover {
+    border-color: hsl(var(--tn-fg-gutter) / 0.5);
+  }
+
+  /* =============================================
+   Compositor Sources (Simplified)
+   ============================================= */
+  .fw-sc-compositor-sources {
+    padding: 0.5rem;
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);
+  }
+
+  .fw-sc-section-label {
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-comment));
+    margin-bottom: 0.5rem;
+    padding-left: 0.5rem;
+  }
+
+  .fw-sc-source-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .fw-sc-source-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    background: hsl(var(--tn-bg-highlight) / 0.3);
+    border-radius: 4px;
+    transition: opacity 0.15s;
+  }
+
+  .fw-sc-source-row--hidden {
+    opacity: 0.4;
+  }
+
+  .fw-sc-visibility-btn {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: hsl(var(--tn-fg-dark));
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .fw-sc-visibility-btn:hover {
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg));
+  }
+
+  .fw-sc-source-icon {
+    display: flex;
+    align-items: center;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-source-label {
+    flex: 1;
+    font-size: 0.8rem;
+    color: hsl(var(--tn-fg));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* =============================================
+   Layout Presets (Grid)
+   ============================================= */
+  .fw-sc-layout-presets {
+    padding: 0.5rem;
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);
+  }
+
+  .fw-sc-layout-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 0.25rem;
+  }
+
+  .fw-sc-layout-btn {
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    border-radius: 4px;
+    background: hsl(var(--tn-bg-highlight) / 0.3);
+    color: hsl(var(--tn-fg-dark));
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .fw-sc-layout-btn:hover {
+    background: hsl(var(--tn-bg-highlight));
+    border-color: hsl(var(--tn-fg-gutter) / 0.5);
+  }
+
+  .fw-sc-layout-btn--active {
+    background: hsl(var(--tn-blue) / 0.2);
+    border-color: hsl(var(--tn-blue) / 0.5);
+    color: hsl(var(--tn-blue));
+  }
+
+  .fw-sc-layout-btn--disabled,
+  .fw-sc-layout-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .fw-sc-layout-btn--disabled:hover,
+  .fw-sc-layout-btn:disabled:hover {
+    background: hsl(var(--tn-bg-highlight) / 0.3);
+    border-color: hsl(var(--tn-fg-gutter) / 0.3);
+  }
+
+  /* Legacy layout preset buttons (for backwards compat) */
+  .fw-sc-layout-presets-label {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-layout-preset-buttons {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .fw-sc-layout-preset-btn {
+    width: 32px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    border-radius: 4px;
+    background: hsl(var(--tn-bg-highlight) / 0.3);
+    color: hsl(var(--tn-fg-dark));
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .fw-sc-layout-preset-btn:hover {
+    background: hsl(var(--tn-bg-highlight));
+    border-color: hsl(var(--tn-fg-gutter) / 0.5);
+  }
+
+  .fw-sc-layout-preset-btn--active {
+    background: hsl(var(--tn-blue) / 0.2);
+    border-color: hsl(var(--tn-blue) / 0.5);
+    color: hsl(var(--tn-blue));
+  }
+
+  .fw-sc-layout-preset-btn--disabled,
+  .fw-sc-layout-preset-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .fw-sc-layout-preset-btn--disabled:hover,
+  .fw-sc-layout-preset-btn:disabled:hover {
+    background: transparent;
+    border-color: hsl(var(--tn-fg-gutter) / 0.3);
+  }
+
+  /* =============================================
+   Scene Switcher
+   ============================================= */
+  .fw-sc-scene-switcher {
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);
+  }
+
+  .fw-sc-scene-switcher-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+  }
+
+  .fw-sc-scene-switcher-title {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-transition-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .fw-sc-transition-select {
+    padding: 0.25rem 0.5rem;
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    border-radius: 4px;
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg));
+    font-size: 0.75rem;
+    cursor: pointer;
+  }
+
+  .fw-sc-transition-select:focus {
+    outline: none;
+    border-color: hsl(var(--tn-blue));
+  }
+
+  .fw-sc-transition-duration {
+    width: 60px;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    border-radius: 4px;
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg));
+    font-size: 0.75rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  }
+
+  .fw-sc-transition-duration:focus {
+    outline: none;
+    border-color: hsl(var(--tn-blue));
+  }
+
+  .fw-sc-transition-unit {
+    font-size: 0.7rem;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-scene-list {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0 1rem 0.75rem;
+    overflow-x: auto;
+  }
+
+  .fw-sc-scene-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0.5rem 0.75rem;
+    min-width: 100px;
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    border-radius: 4px;
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg));
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .fw-sc-scene-item:hover {
+    border-color: hsl(var(--tn-fg-gutter) / 0.5);
+  }
+
+  .fw-sc-scene-item--active {
+    border-color: hsl(var(--tn-green));
+    box-shadow: 0 0 0 1px hsl(var(--tn-green) / 0.3);
+  }
+
+  .fw-sc-scene-item--transitioning {
+    opacity: 0.7;
+    pointer-events: none;
+  }
+
+  .fw-sc-scene-name {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .fw-sc-scene-layer-count {
+    font-size: 0.7rem;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-scene-delete {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 2px;
+    background: transparent;
+    color: hsl(var(--tn-comment));
+    font-size: 14px;
+    cursor: pointer;
+    opacity: 0;
+    transition: all 0.15s;
+  }
+
+  .fw-sc-scene-item:hover .fw-sc-scene-delete {
+    opacity: 1;
+  }
+
+  .fw-sc-scene-delete:hover {
+    background: hsl(var(--tn-red) / 0.2);
+    color: hsl(var(--tn-red));
+  }
+
+  .fw-sc-scene-add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    padding: 0.5rem;
+    border: 1px dashed hsl(var(--tn-fg-gutter) / 0.5);
+    border-radius: 4px;
+    background: transparent;
+    color: hsl(var(--tn-comment));
+    font-size: 1.25rem;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .fw-sc-scene-add:hover {
+    border-color: hsl(var(--tn-blue));
+    color: hsl(var(--tn-blue));
+    background: hsl(var(--tn-blue) / 0.1);
+  }
+
+  /* New Scene Input */
+  .fw-sc-new-scene-input {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: hsl(var(--tn-bg-dark) / 0.5);
+  }
+
+  .fw-sc-new-scene-input input {
+    flex: 1;
+    padding: 0.375rem 0.5rem;
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    border-radius: 4px;
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg));
+    font-size: 0.875rem;
+  }
+
+  .fw-sc-new-scene-input input:focus {
+    outline: none;
+    border-color: hsl(var(--tn-blue));
+  }
+
+  .fw-sc-new-scene-input button {
+    padding: 0.375rem 0.75rem;
+    border: none;
+    border-radius: 4px;
+    background: hsl(var(--tn-blue));
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .fw-sc-new-scene-input button:hover {
+    background: hsl(var(--tn-blue) / 0.8);
+  }
+
+  .fw-sc-new-scene-input button:last-child {
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg-dark));
+  }
+
+  .fw-sc-new-scene-input button:last-child:hover {
+    background: hsl(var(--tn-bg-highlight) / 0.8);
+  }
+
+  /* =============================================
+   Layer List
+   ============================================= */
+  .fw-sc-layer-list {
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.2);
+  }
+
+  .fw-sc-layer-list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    background: hsl(var(--tn-bg-highlight) / 0.3);
+  }
+
+  .fw-sc-layer-list-title {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-comment));
+  }
+
+  .fw-sc-layer-count {
+    font-size: 0.7rem;
+    color: hsl(var(--tn-fg-dark));
+    background: hsl(var(--tn-bg-highlight));
+    padding: 0.125rem 0.375rem;
+    border-radius: 8px;
+  }
+
+  .fw-sc-layer-items {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .fw-sc-layer-empty {
+    padding: 1rem;
+    text-align: center;
+    color: hsl(var(--tn-comment));
+    font-size: 0.875rem;
+  }
+
+  .fw-sc-layer-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid hsl(var(--tn-fg-gutter) / 0.15);
+    cursor: pointer;
+    transition: background 0.15s;
+  }
+
+  .fw-sc-layer-item:last-child {
+    border-bottom: none;
+  }
+
+  .fw-sc-layer-item:hover {
+    background: hsl(var(--tn-bg-highlight) / 0.3);
+  }
+
+  .fw-sc-layer-item--selected {
+    background: hsl(var(--tn-blue) / 0.1);
+  }
+
+  .fw-sc-layer-item--selected:hover {
+    background: hsl(var(--tn-blue) / 0.15);
+  }
+
+  .fw-sc-layer-item--dragging {
+    opacity: 0.5;
+  }
+
+  .fw-sc-layer-item--drag-over {
+    border-top: 2px solid hsl(var(--tn-blue));
+  }
+
+  .fw-sc-layer-item--hidden {
+    opacity: 0.5;
+  }
+
+  .fw-sc-layer-visibility {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: hsl(var(--tn-comment));
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .fw-sc-layer-visibility:hover {
+    background: hsl(var(--tn-bg-highlight));
+  }
+
+  .fw-sc-layer-visibility--visible {
+    color: hsl(var(--tn-fg));
+  }
+
+  .fw-sc-layer-icon {
+    font-size: 1rem;
+  }
+
+  .fw-sc-layer-name {
+    flex: 1;
+    font-size: 0.875rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .fw-sc-layer-opacity {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .fw-sc-layer-opacity input[type="range"] {
+    width: 60px;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: hsl(var(--tn-bg-highlight));
+    border-radius: 2px;
+    cursor: pointer;
+  }
+
+  .fw-sc-layer-opacity input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: hsl(var(--tn-fg));
+    cursor: pointer;
+  }
+
+  .fw-sc-layer-opacity input[type="range"]::-moz-range-thumb {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: hsl(var(--tn-fg));
+    border: none;
+    cursor: pointer;
+  }
+
+  .fw-sc-layer-opacity span {
+    font-size: 0.7rem;
+    color: hsl(var(--tn-fg-dark));
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    min-width: 32px;
+  }
+
+  .fw-sc-layer-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+  }
+
+  .fw-sc-layer-btn {
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: hsl(var(--tn-comment));
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .fw-sc-layer-btn:hover:not(:disabled) {
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg));
+  }
+
+  .fw-sc-layer-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .fw-sc-layer-btn--active {
+    background: hsl(var(--tn-blue) / 0.2);
+    color: hsl(var(--tn-blue));
+  }
+
+  .fw-sc-layer-btn--danger:hover:not(:disabled) {
+    background: hsl(var(--tn-red) / 0.2);
+    color: hsl(var(--tn-red));
+  }
+
+  /* ============================================================================
+ * Compact Layout Overlay
+ * ============================================================================ */
+
+  .fw-sc-layout-overlay {
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+  }
+
+  .fw-sc-layout-overlay:hover,
+  .fw-sc-layout-overlay--expanded {
+    opacity: 1;
+  }
+
+  .fw-sc-layout-bar {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    padding: 4px 6px;
+    background: hsl(var(--tn-bg-dark) / 0.9);
+    backdrop-filter: blur(8px);
+    border-radius: 6px;
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .fw-sc-layout-icons,
+  .fw-sc-scaling-icons {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+  }
+
+  .fw-sc-layout-icon {
+    width: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: hsl(var(--tn-fg-dark));
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .fw-sc-layout-icon:hover {
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg));
+  }
+
+  .fw-sc-layout-icon--active {
+    background: hsl(var(--tn-blue) / 0.2);
+    color: hsl(var(--tn-blue));
+  }
+
+  .fw-sc-layout-icon--active:hover {
+    background: hsl(var(--tn-blue) / 0.3);
+  }
+
+  .fw-sc-layout-separator {
+    width: 1px;
+    height: 14px;
+    background: hsl(var(--tn-fg-gutter) / 0.5);
+    margin: 0 4px;
+  }
+
+  .fw-sc-layout-stats {
+    font-size: 0.65rem;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    color: hsl(var(--tn-fg-dark));
+    white-space: nowrap;
+    padding: 0 2px;
+  }
+
+  /* Source chips (expanded on hover) */
+  .fw-sc-layout-sources {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 6px;
+    background: hsl(var(--tn-bg-dark) / 0.9);
+    backdrop-filter: blur(8px);
+    border-radius: 6px;
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.3);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .fw-sc-source-chip {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    border: none;
+    border-radius: 4px;
+    background: hsl(var(--tn-bg-highlight));
+    color: hsl(var(--tn-fg));
+    font-size: 0.7rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .fw-sc-source-chip:hover {
+    background: hsl(var(--tn-bg-highlight) / 1.5);
+  }
+
+  .fw-sc-source-chip--hidden {
+    background: hsl(var(--tn-bg-dark));
+    color: hsl(var(--tn-comment));
+    opacity: 0.6;
+  }
+
+  .fw-sc-source-chip--hidden:hover {
+    opacity: 0.9;
+  }
+
+  .fw-sc-source-chip-icon {
+    font-size: 0.75rem;
+  }
+
+  .fw-sc-source-chip-label {
+    max-width: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ============================================================================
+ * Layout Bar Sections & Labels
+ * ============================================================================ */
+
+  .fw-sc-layout-section {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .fw-sc-layout-label {
+    font-size: 0.6rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: hsl(var(--tn-comment));
+    padding: 0 4px;
+  }
+
+  /* ============================================================================
+ * Custom Instant Tooltips
+ * ============================================================================ */
+
+  .fw-sc-tooltip-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .fw-sc-tooltip {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 8px;
+    background: hsl(var(--tn-bg-dark));
+    border: 1px solid hsl(var(--tn-fg-gutter) / 0.5);
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: 500;
+    color: hsl(var(--tn-fg));
+    white-space: nowrap;
+    z-index: 100;
+    pointer-events: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+
+  .fw-sc-tooltip::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: hsl(var(--tn-fg-gutter) / 0.5);
+  }
+
+  .fw-sc-tooltip::before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 4px solid transparent;
+    border-top-color: hsl(var(--tn-bg-dark));
+    margin-top: -1px;
+  }
+} /* End @layer fw-streamcrafter */
+
+`,xe=c`
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .block {
+    display: block;
+  }
+  .hidden {
+    display: none;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .flex-1 {
+    flex: 1 1 0%;
+  }
+  .flex-none {
+    flex: none;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .gap-0\\.5 {
+    gap: 0.125rem;
+  }
+  .gap-1 {
+    gap: 0.25rem;
+  }
+  .gap-2 {
+    gap: 0.5rem;
+  }
+  .gap-3 {
+    gap: 0.75rem;
+  }
+  .gap-4 {
+    gap: 1rem;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .min-w-0 {
+    min-width: 0;
+  }
+  .relative {
+    position: relative;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .inset-0 {
+    inset: 0;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
+  .text-xs {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+  .text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+  .font-mono {
+    font-family:
+      ui-monospace,
+      SFMono-Regular,
+      SF Mono,
+      Menlo,
+      Consolas,
+      monospace;
+  }
+  .font-medium {
+    font-weight: 500;
+  }
+  .font-semibold {
+    font-weight: 600;
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .tracking-wider {
+    letter-spacing: 0.05em;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .tabular-nums {
+    font-variant-numeric: tabular-nums;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-md {
+    border-radius: 0.375rem;
+  }
+  .rounded-lg {
+    border-radius: 0.5rem;
+  }
+  .border-none {
+    border: none;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .select-none {
+    user-select: none;
+  }
+  .opacity-50 {
+    opacity: 0.5;
+  }
+  .opacity-70 {
+    opacity: 0.7;
+  }
+  .transition {
+    transition: all 150ms ease;
+  }
+  .p-0 {
+    padding: 0;
+  }
+  .p-2 {
+    padding: 0.5rem;
+  }
+  .px-2 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  .py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .m-0 {
+    margin: 0;
+  }
+  .bg-none {
+    background: none;
+  }
+`,Se=(e=18)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M23 7l-7 5 7 5V7z" />
+    <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+  </svg>`,ke=(e=18)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+    <line x1="8" y1="21" x2="16" y2="21" />
+    <line x1="12" y1="17" x2="12" y2="21" />
+  </svg>`,Ce=(e=14)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>`,$e=(e=14)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <polygon points="23 7 16 12 23 17 23 7" />
+    <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+  </svg>`,Me={enabled:!1,width:1920,height:1080,frameRate:30,renderer:"auto",defaultTransition:{type:"fade",durationMs:500,easing:"ease-in-out"}},Te={x:0,y:0,width:1,height:1,opacity:1,rotation:0,borderRadius:0,crop:{top:0,right:0,bottom:0,left:0}};class Ae{constructor(){this.listeners=new Map}on(e,t){return this.listeners.has(e)||this.listeners.set(e,new Set),this.listeners.get(e).add(t),()=>this.off(e,t)}once(e,t){const r=i=>{this.off(e,r),t(i)};return this.on(e,r)}off(e,t){const r=this.listeners.get(e);r&&(r.delete(t),0===r.size&&this.listeners.delete(e))}emit(e,t){const r=this.listeners.get(e);r&&r.forEach(r=>{try{r(t)}catch(t){console.error(`Error in event handler for "${String(e)}":`,t)}})}removeAllListeners(e){e?this.listeners.delete(e):this.listeners.clear()}listenerCount(e){return this.listeners.get(e)?.size??0}}function _e(e="professional"){const t={professional:{width:{ideal:1920},height:{ideal:1080},frameRate:{ideal:30}},broadcast:{width:{ideal:1920},height:{ideal:1080},frameRate:{ideal:30}},conference:{width:{ideal:1280},height:{ideal:720},frameRate:{ideal:24}},auto:{width:{ideal:1920},height:{ideal:1080},frameRate:{ideal:30}}};return t[e]||t.professional}function Ee(e,t){const r=function(e="professional"){const t={professional:{echoCancellation:!1,noiseSuppression:!1,autoGainControl:!1,sampleRate:48e3,channelCount:2,latency:.01},broadcast:{echoCancellation:!1,noiseSuppression:!0,autoGainControl:!1,sampleRate:48e3,channelCount:2,latency:.02},conference:{echoCancellation:!0,noiseSuppression:!0,autoGainControl:!0,sampleRate:44100,channelCount:1,latency:.05},auto:{echoCancellation:!1,noiseSuppression:!1,autoGainControl:!1,sampleRate:48e3,channelCount:2}};return t[e]||t.professional}(e),i=_e(e);return{audio:{echoCancellation:r.echoCancellation,noiseSuppression:r.noiseSuppression,autoGainControl:r.autoGainControl,sampleRate:r.sampleRate,channelCount:r.channelCount,...t?.audioDeviceId&&{deviceId:{exact:t.audioDeviceId}}},video:{width:i.width,height:i.height,frameRate:i.frameRate,...t?.videoDeviceId&&{deviceId:{exact:t.videoDeviceId}},...t?.facingMode&&{facingMode:t.facingMode}}}}class Ie extends Ae{constructor(){super(),this.devices=[],this.currentStream=null,this.permissionStatus={video:!1,audio:!1},this.setupDeviceChangeListener()}setupDeviceChangeListener(){"undefined"!=typeof navigator&&navigator.mediaDevices&&navigator.mediaDevices.addEventListener("devicechange",async()=>{await this.enumerateDevices(),this.emit("devicesChanged",{devices:this.devices})})}async enumerateDevices(){if(!navigator.mediaDevices?.enumerateDevices)throw new Error("enumerateDevices not supported");const e=await navigator.mediaDevices.enumerateDevices();return this.devices=e.filter(e=>"audioinput"===e.kind||"videoinput"===e.kind||"audiooutput"===e.kind).map(e=>({deviceId:e.deviceId,kind:e.kind,label:e.label||`${e.kind} (${e.deviceId.slice(0,8)}...)`,groupId:e.groupId})),this.devices}async getVideoInputs(){return await this.enumerateDevices(),this.devices.filter(e=>"videoinput"===e.kind)}async getAudioInputs(){return await this.enumerateDevices(),this.devices.filter(e=>"audioinput"===e.kind)}async getAudioOutputs(){return await this.enumerateDevices(),this.devices.filter(e=>"audiooutput"===e.kind)}async requestPermissions(e={video:!0,audio:!0}){try{return(await navigator.mediaDevices.getUserMedia({video:e.video,audio:e.audio})).getTracks().forEach(e=>e.stop()),e.video&&(this.permissionStatus.video=!0),e.audio&&(this.permissionStatus.audio=!0),await this.enumerateDevices(),this.emit("permissionChanged",{granted:!0,denied:!1}),this.permissionStatus}catch(e){const t=e instanceof Error?e:new Error(String(e));throw"NotAllowedError"!==t.name&&"PermissionDeniedError"!==t.name||this.emit("permissionChanged",{granted:!1,denied:!0}),this.emit("error",{message:`Permission request failed: ${t.message}`,error:t}),e}}hasPermission(e){return this.permissionStatus[e]}async getUserMedia(e={}){const t=e.profile||"professional";let r;r=e.customConstraints?e.customConstraints:Ee(t,{videoDeviceId:e.videoDeviceId,audioDeviceId:e.audioDeviceId,facingMode:e.facingMode});try{const e=await navigator.mediaDevices.getUserMedia(r);return this.currentStream=e,e.getVideoTracks().length>0&&(this.permissionStatus.video=!0),e.getAudioTracks().length>0&&(this.permissionStatus.audio=!0),e}catch(e){const t=e instanceof Error?e:new Error(String(e));if("OverconstrainedError"===t.name){const e={video:!!r.video,audio:!!r.audio},t=await navigator.mediaDevices.getUserMedia(e);return this.currentStream=t,t}throw this.emit("error",{message:`getUserMedia failed: ${t.message}`,error:t}),e}}getStream(){return this.currentStream}stopAllTracks(){this.currentStream&&(this.currentStream.getTracks().forEach(e=>{e.stop()}),this.currentStream=null)}async replaceVideoTrack(e,t="professional"){if(!this.currentStream)throw new Error("No active stream to replace track in");const r=this.currentStream.getVideoTracks()[0];r&&(r.stop(),this.currentStream.removeTrack(r));const i=Ee(t,{videoDeviceId:e}),s=(await navigator.mediaDevices.getUserMedia({video:i.video,audio:!1})).getVideoTracks()[0];return s&&this.currentStream.addTrack(s),s||null}async replaceAudioTrack(e,t="professional"){if(!this.currentStream)throw new Error("No active stream to replace track in");const r=this.currentStream.getAudioTracks()[0];r&&(r.stop(),this.currentStream.removeTrack(r));const i=Ee(t,{audioDeviceId:e}),s=(await navigator.mediaDevices.getUserMedia({video:!1,audio:i.audio})).getAudioTracks()[0];return s&&this.currentStream.addTrack(s),s||null}getAllDevices(){return[...this.devices]}destroy(){this.stopAllTracks(),this.removeAllListeners()}}class Pe extends Ae{constructor(){super(...arguments),this.captures=new Map,this.captureCounter=0}async start(e={}){try{let t;if(!1===e.video)t=!1;else if("object"==typeof e.video){t={frameRate:{ideal:30,max:60},width:{ideal:1920},height:{ideal:1080},...e.video,...void 0!==e.cursor?{cursor:e.cursor}:{}}}else t={frameRate:{ideal:30,max:60},width:{ideal:1920},height:{ideal:1080},...void 0!==e.cursor?{cursor:e.cursor}:{}};const r={video:t,audio:e.audio??!1};e.preferCurrentTab&&"preferCurrentTab"in r&&(r.preferCurrentTab=!0),e.surfaceSwitching&&(r.surfaceSwitching="include"),void 0!==e.selfBrowserSurface&&(r.selfBrowserSurface=e.selfBrowserSurface),e.monitorTypeSurfaces&&(r.monitorTypeSurfaces=e.monitorTypeSurfaces),e.systemAudio&&r.audio&&"object"==typeof r.audio&&(r.audio.systemAudio=e.systemAudio);const i=await navigator.mediaDevices.getDisplayMedia(r),s=`screen-${++this.captureCounter}-${Date.now()}`,o=i.getVideoTracks()[0],n=o?.label||`Screen ${this.captureCounter}`;return this.captures.set(s,{stream:i,label:n}),i.getTracks().forEach(e=>{e.addEventListener("ended",()=>{this.handleTrackEnded(s,i)})}),this.emit("started",{stream:i,captureId:s}),i}catch(e){const t=e instanceof Error?e:new Error(String(e));if("AbortError"===t.name||"NotAllowedError"===t.name)return this.emit("ended",{captureId:"",stream:null,reason:"cancelled"}),null;throw this.emit("error",{message:`Screen capture failed: ${t.message}`,error:t}),e}}handleTrackEnded(e,t){const r=t.getTracks().filter(e=>"live"===e.readyState);0===r.length&&(this.captures.delete(e),this.emit("ended",{captureId:e,stream:t,reason:"user_stopped"}))}stopByStream(e){for(const[t,r]of this.captures)if(r.stream===e)return r.stream.getTracks().forEach(e=>e.stop()),this.captures.delete(t),void this.emit("ended",{captureId:t,stream:e,reason:"stopped"})}stop(){for(const[e,t]of this.captures)t.stream.getTracks().forEach(e=>e.stop()),this.emit("ended",{captureId:e,stream:t.stream,reason:"stopped"});this.captures.clear()}getCaptures(){return Array.from(this.captures.entries()).map(([e,t])=>({captureId:e,stream:t.stream,label:t.label}))}isActive(){return this.captures.size>0}getCaptureCount(){return this.captures.size}getStream(){const e=this.captures.values().next().value;return e?.stream??null}getVideoTrack(){const e=this.getStream();return e?.getVideoTracks()[0]??null}getAudioTrack(){const e=this.getStream();return e?.getAudioTracks()[0]??null}hasAudio(){for(const[,e]of this.captures)if(e.stream.getAudioTracks().length>0)return!0;return!1}destroy(){this.stop(),this.removeAllListeners()}}class Re extends Ae{constructor(e){super(),this.peerConnection=null,this.videoTrackGenerator=null,this.audioTrackGenerator=null,this.state="disconnected",this.videoWriter=null,this.audioWriter=null,this.videoWriteQueue=[],this.audioWriteQueue=[],this.isProcessingVideoQueue=!1,this.isProcessingAudioQueue=!1,this.videoTransformWorker=null,this.audioTransformWorker=null,this.encoderListenerCleanup=null,this.negotiatedVideoCodec=null,this.negotiatedAudioCodec=null,this.resourceUrl=null,this.config=e}log(e,t){this.config.debug&&console.log(`[WHIP] ${e}`,t??"")}logError(e,t){console.error(`[WHIP ERROR] ${e}`,t??""),this.emit("error",{message:e,error:t})}setState(e){const t=this.state;this.state=e,this.emit("stateChange",{state:e,previousState:t})}preferCodecs(e){const t=e.getTransceivers();for(const e of t){if(!e.setCodecPreferences)continue;const t=e.sender.track?.kind;if("video"===t){const t=RTCRtpSender.getCapabilities("video");if(!t?.codecs)continue;const r=t.codecs.filter(e=>"video/VP9"===e.mimeType||"video/H264"===e.mimeType).sort((e,t)=>"video/VP9"===e.mimeType&&"video/VP9"!==t.mimeType?-1:"video/VP9"!==e.mimeType&&"video/VP9"===t.mimeType?1:0);if(r.length>0)try{e.setCodecPreferences(r),this.log("Set video codec preferences",r.map(e=>e.mimeType))}catch(e){this.log("Failed to set video codec preferences",e)}}if("audio"===t){const t=RTCRtpSender.getCapabilities("audio");if(!t?.codecs)continue;const r=t.codecs.filter(e=>"audio/opus"===e.mimeType);if(r.length>0)try{e.setCodecPreferences(r),this.log("Set audio codec preferences",r.map(e=>e.mimeType))}catch(e){this.log("Failed to set audio codec preferences",e)}}}}verifyCodecAlignment(){if(!this.peerConnection)return;const e=this.peerConnection.getSenders();for(const t of e){const e=t.getParameters(),r=e.codecs?.[0];"video"===t.track?.kind&&r?.mimeType&&(this.negotiatedVideoCodec=r.mimeType,this.log("Negotiated video codec",r.mimeType)),"audio"===t.track?.kind&&r?.mimeType&&(this.negotiatedAudioCodec=r.mimeType,this.log("Negotiated audio codec",r.mimeType))}}canUseEncodedInsertion(){if(!this.peerConnection||"connected"!==this.state)return this.log("canUseEncodedInsertion: no connection",{hasPC:!!this.peerConnection,state:this.state}),!1;if("undefined"==typeof RTCRtpScriptTransform)return this.log("canUseEncodedInsertion: RTCRtpScriptTransform not supported"),!1;const e=this.peerConnection.getSenders().some(e=>"transform"in e);if(!e)return this.log("Sender transform not supported"),!1;if(this.negotiatedVideoCodec){if(!("video/VP9"===this.negotiatedVideoCodec||"video/H264"===this.negotiatedVideoCodec))return this.log("Video codec not compatible with WebCodecs",this.negotiatedVideoCodec),!1}if(this.negotiatedAudioCodec){if(!("audio/opus"===this.negotiatedAudioCodec))return this.log("Audio codec not compatible with WebCodecs",this.negotiatedAudioCodec),!1}return!0}getNegotiatedVideoCodec(){return this.negotiatedVideoCodec}getNegotiatedAudioCodec(){return this.negotiatedAudioCodec}get isConnected(){return"connected"===this.state}async connect(e){try{if(this.log("Starting WHIP connection"),this.setState("connecting"),!this.config.whipUrl)throw new Error("WHIP URL is required");const t={iceServers:this.config.iceServers||[]};this.log("Creating RTCPeerConnection",t);const r=new RTCPeerConnection(t);r.onconnectionstatechange=()=>{const e=r.connectionState;switch(this.log(`Connection state changed: ${e}`),e){case"connected":this.log("WHIP streaming connected successfully"),this.setState("connected");break;case"disconnected":this.setState("disconnected");break;case"failed":this.setState("failed");break;case"closed":this.setState("closed")}},r.oniceconnectionstatechange=()=>{this.log(`ICE connection state: ${r.iceConnectionState}`)},r.onicegatheringstatechange=()=>{this.log(`ICE gathering state: ${r.iceGatheringState}`)},r.onicecandidate=e=>{this.emit("iceCandidate",{candidate:e.candidate}),e.candidate?this.log("ICE candidate generated",e.candidate.candidate):this.log("ICE candidate gathering complete")},this.log("Adding tracks to peer connection"),e.getTracks().forEach((t,i)=>{this.log(`Adding ${t.kind} track ${i}`,{id:t.id,kind:t.kind,enabled:t.enabled,readyState:t.readyState}),r.addTrack(t,e)}),this.peerConnection=r,this.preferCodecs(r),this.log("Creating offer");const i=await r.createOffer({offerToReceiveAudio:!1,offerToReceiveVideo:!1});this.log("Setting local description"),await r.setLocalDescription(i),this.log("Local SDP offer created",{type:i.type,sdpLength:i.sdp?.length}),this.log(`Sending offer to WHIP endpoint: ${this.config.whipUrl}`);const s=await fetch(this.config.whipUrl,{method:"POST",headers:{"Content-Type":"application/sdp",Accept:"application/sdp"},body:i.sdp});if(this.log(`WHIP response status: ${s.status} ${s.statusText}`),!s.ok){const e=await s.text().catch(()=>"Unknown error");throw new Error(`WHIP request failed: ${s.status} ${s.statusText} - ${e}`)}this.resourceUrl=s.headers.get("Location"),this.resourceUrl&&this.log("WHIP resource URL:",this.resourceUrl);const o=await s.text();this.log("Received SDP answer",{length:o.length}),await r.setRemoteDescription({type:"answer",sdp:o}),this.log("Remote description set successfully"),this.verifyCodecAlignment(),this.log("WHIP connection established, waiting for ICE connection...")}catch(e){throw this.logError("Failed to connect",e instanceof Error?e:new Error(String(e))),this.setState("failed"),this.cleanup(),e}}async connectWithGenerators(){try{if(this.log("Starting WHIP connection with track generators"),this.setState("connecting"),!this.config.whipUrl)throw new Error("WHIP URL is required");this.log("Creating MediaStreamTrackGenerators");const e=new MediaStreamTrackGenerator({kind:"video"}),t=new MediaStreamTrackGenerator({kind:"audio"});this.videoTrackGenerator=e,this.audioTrackGenerator=t,this.log("Track generators created successfully");const r={iceServers:this.config.iceServers||[]};this.log("Creating RTCPeerConnection",r);const i=new RTCPeerConnection(r);i.onconnectionstatechange=()=>{const e=i.connectionState;switch(this.log(`Connection state changed: ${e}`),e){case"connected":this.log("WHIP streaming connected successfully"),this.setState("connected");break;case"disconnected":this.setState("disconnected");break;case"failed":this.setState("failed");break;case"closed":this.setState("closed")}},i.oniceconnectionstatechange=()=>{this.log(`ICE connection state: ${i.iceConnectionState}`)},i.onicegatheringstatechange=()=>{this.log(`ICE gathering state: ${i.iceGatheringState}`)},i.onicecandidate=e=>{this.emit("iceCandidate",{candidate:e.candidate}),e.candidate?this.log("ICE candidate generated",e.candidate.candidate):this.log("ICE candidate gathering complete")};const s=new MediaStream([e,t]);this.log("Adding tracks to peer connection"),s.getTracks().forEach((e,t)=>{this.log(`Adding ${e.kind} track ${t}`,{id:e.id,kind:e.kind,enabled:e.enabled,readyState:e.readyState}),i.addTrack(e,s)}),this.peerConnection=i,this.preferCodecs(i),this.log("Creating offer");const o=await i.createOffer({offerToReceiveAudio:!1,offerToReceiveVideo:!1});this.log("Setting local description"),await i.setLocalDescription(o),this.log(`Sending offer to WHIP endpoint: ${this.config.whipUrl}`);const n=await fetch(this.config.whipUrl,{method:"POST",headers:{"Content-Type":"application/sdp",Accept:"application/sdp"},body:o.sdp});if(this.log(`WHIP response status: ${n.status} ${n.statusText}`),!n.ok){const e=await n.text().catch(()=>"Unknown error");throw new Error(`WHIP request failed: ${n.status} ${n.statusText} - ${e}`)}this.resourceUrl=n.headers.get("Location"),this.resourceUrl&&this.log("WHIP resource URL:",this.resourceUrl);const a=await n.text();return this.log("Received SDP answer",{length:a.length}),await i.setRemoteDescription({type:"answer",sdp:a}),this.log("Remote description set successfully"),this.verifyCodecAlignment(),this.log("WHIP connection established with generators"),{videoGenerator:e,audioGenerator:t}}catch(e){throw this.logError("Failed to connect with generators",e instanceof Error?e:new Error(String(e))),this.setState("failed"),this.cleanup(),e}}async processVideoQueue(){if(!this.isProcessingVideoQueue&&0!==this.videoWriteQueue.length){this.isProcessingVideoQueue=!0;try{for(;this.videoWriteQueue.length>0;){const e=this.videoWriteQueue.shift();if(!e)continue;const{frame:t,resolve:r,reject:i}=e;if(this.videoTrackGenerator)try{this.videoWriter||(this.videoWriter=this.videoTrackGenerator.writable.getWriter()),await this.videoWriter.write(t),r(!0)}catch(e){if(this.videoWriter){try{this.videoWriter.releaseLock()}catch{}this.videoWriter=null}i(e instanceof Error?e:new Error(String(e)))}else i(new Error("Video track generator not available"))}}finally{this.isProcessingVideoQueue=!1}}}async processAudioQueue(){if(!this.isProcessingAudioQueue&&0!==this.audioWriteQueue.length){this.isProcessingAudioQueue=!0;try{for(;this.audioWriteQueue.length>0;){const e=this.audioWriteQueue.shift();if(!e)continue;const{audioData:t,resolve:r,reject:i}=e;if(this.audioTrackGenerator)try{this.audioWriter||(this.audioWriter=this.audioTrackGenerator.writable.getWriter()),await this.audioWriter.write(t),r(!0)}catch(e){if(this.audioWriter){try{this.audioWriter.releaseLock()}catch{}this.audioWriter=null}i(e instanceof Error?e:new Error(String(e)))}else i(new Error("Audio track generator not available"))}}finally{this.isProcessingAudioQueue=!1}}}async sendVideoFrame(e){if(!this.videoTrackGenerator){if(e)try{e.close()}catch{}return!1}return new Promise((t,r)=>{this.videoWriteQueue.push({frame:e,resolve:t,reject:r}),this.processVideoQueue()})}async sendAudioData(e){if(!this.audioTrackGenerator){if(e)try{e.close()}catch{}return!1}return new Promise((t,r)=>{this.audioWriteQueue.push({audioData:e,resolve:t,reject:r}),this.processAudioQueue()})}async replaceTrack(e,t){if(!this.peerConnection)throw new Error("No peer connection");const r=this.peerConnection.getSenders().find(t=>t.track?.kind===e.kind);if(!r)throw new Error(`No sender found for ${e.kind} track`);await r.replaceTrack(t),this.log(`Replaced ${e.kind} track`)}async addTrack(e,t){if(!this.peerConnection)throw new Error("No peer connection");this.peerConnection.addTrack(e,t||new MediaStream([e])),this.log(`Added ${e.kind} track`)}async getStats(){if(!this.peerConnection)return null;try{return await this.peerConnection.getStats()}catch(e){return this.logError("Failed to get connection stats",e instanceof Error?e:new Error(String(e))),null}}getState(){return this.state}getPeerConnection(){return this.peerConnection}attachEncoderTransform(e,r){if(!this.peerConnection)throw new Error("No peer connection - call connect() first");if("undefined"==typeof RTCRtpScriptTransform)return void this.log("RTCRtpScriptTransform not supported, skipping encoder transform");this.log("Attaching encoder transform");const i=()=>{if(r)return new Worker(r,{type:"module"});try{const e=new URL("../workers/rtcTransform.worker.js",t&&"SCRIPT"===t.tagName.toUpperCase()&&t.src||new URL("fw-streamcrafter.iife.js",document.baseURI).href);return new Worker(e,{type:"module"})}catch(e){this.log("Packaged worker URL failed, trying fallback paths",e)}const e=["/workers/rtcTransform.worker.js","./workers/rtcTransform.worker.js","/node_modules/@livepeer-frameworks/streamcrafter-core/dist/workers/rtcTransform.worker.js"];for(const t of e)try{return new Worker(t,{type:"module"})}catch{try{return new Worker(t)}catch{}}return null},s=this.peerConnection.getSenders(),o=s.find(e=>"video"===e.track?.kind),n=s.find(e=>"audio"===e.track?.kind);o&&"transform"in o&&(this.log("Creating video transform worker"),this.videoTransformWorker=i(),this.videoTransformWorker?(this.videoTransformWorker.postMessage({type:"configure",config:{debug:this.config.debug,maxQueueSize:30}}),o.transform=new RTCRtpScriptTransform(this.videoTransformWorker,{kind:"video"}),this.log("Video transform attached")):this.logError("Failed to create video transform worker")),n&&"transform"in n&&(this.log("Creating audio transform worker"),this.audioTransformWorker=i(),this.audioTransformWorker?(this.audioTransformWorker.postMessage({type:"configure",config:{debug:this.config.debug,maxQueueSize:50}}),n.transform=new RTCRtpScriptTransform(this.audioTransformWorker,{kind:"audio"}),this.log("Audio transform attached")):this.logError("Failed to create audio transform worker"));const a=e=>{this.videoTransformWorker&&this.videoTransformWorker.postMessage({type:"videoChunk",data:e},[e.data])},c=e=>{this.audioTransformWorker&&this.audioTransformWorker.postMessage({type:"audioChunk",data:e},[e.data])};e.on("videoChunk",a),e.on("audioChunk",c),this.encoderListenerCleanup=()=>{e.off("videoChunk",a),e.off("audioChunk",c)},this.log("Encoder transform attached successfully")}hasEncoderTransform(){return null!==this.videoTransformWorker||null!==this.audioTransformWorker}detachEncoderTransform(){this.encoderListenerCleanup&&(this.encoderListenerCleanup(),this.encoderListenerCleanup=null),this.videoTransformWorker&&(this.videoTransformWorker.postMessage({type:"stop"}),this.videoTransformWorker.terminate(),this.videoTransformWorker=null),this.audioTransformWorker&&(this.audioTransformWorker.postMessage({type:"stop"}),this.audioTransformWorker.terminate(),this.audioTransformWorker=null),this.log("Encoder transform detached")}cleanupWriters(){if(this.videoWriter){try{this.videoWriter.releaseLock()}catch{}this.videoWriter=null}if(this.audioWriter){try{this.audioWriter.releaseLock()}catch{}this.audioWriter=null}this.videoWriteQueue=[],this.audioWriteQueue=[],this.isProcessingVideoQueue=!1,this.isProcessingAudioQueue=!1}cleanup(){this.cleanupWriters(),this.detachEncoderTransform(),this.videoTrackGenerator&&(this.videoTrackGenerator.stop(),this.videoTrackGenerator=null),this.audioTrackGenerator&&(this.audioTrackGenerator.stop(),this.audioTrackGenerator=null),this.peerConnection&&(this.peerConnection.close(),this.peerConnection=null),this.resourceUrl=null}async disconnect(){if(this.log("Disconnecting WHIP"),this.resourceUrl){try{this.log("Sending DELETE to WHIP resource:",this.resourceUrl),await fetch(this.resourceUrl,{method:"DELETE"})}catch(e){this.log("Failed to delete WHIP resource (non-fatal)",e)}this.resourceUrl=null}this.cleanup(),this.setState("disconnected")}destroy(){this.cleanup(),this.removeAllListeners()}}class We extends Ae{constructor(e={}){super(),this.audioContext=null,this.destination=null,this.masterGain=null,this.compressor=null,this.limiter=null,this.analyzer=null,this.sources=new Map,this.outputStream=null,this.levelMonitoringActive=!1,this.peakLevel=0,this.peakDecayRate=.95,this.config={sampleRate:e.sampleRate??48e3,channelCount:e.channelCount??2}}async initialize(){if(!this.audioContext)try{this.audioContext=new AudioContext({sampleRate:this.config.sampleRate}),this.destination=this.audioContext.createMediaStreamDestination(),this.destination.channelCount=this.config.channelCount,this.masterGain=this.audioContext.createGain(),this.compressor=this.audioContext.createDynamicsCompressor(),this.compressor.threshold.value=-24,this.compressor.knee.value=30,this.compressor.ratio.value=4,this.compressor.attack.value=.003,this.compressor.release.value=.25,this.limiter=this.audioContext.createDynamicsCompressor(),this.limiter.threshold.value=-1,this.limiter.knee.value=0,this.limiter.ratio.value=20,this.limiter.attack.value=.001,this.limiter.release.value=.1,this.analyzer=this.audioContext.createAnalyser(),this.analyzer.fftSize=256,this.analyzer.smoothingTimeConstant=.3,this.masterGain.connect(this.compressor),this.compressor.connect(this.analyzer),this.analyzer.connect(this.limiter),this.limiter.connect(this.destination),this.outputStream=this.destination.stream,console.log("[AudioMixer] Initialized with compressor/limiter chain",{sampleRate:this.audioContext.sampleRate,channelCount:this.config.channelCount})}catch(e){const t=e instanceof Error?e:new Error(String(e));throw console.error("[AudioMixer] Failed to initialize:",t),this.emit("error",{message:t.message,error:t}),t}}addSource(e,t,r={}){if(!this.audioContext||!this.masterGain)throw new Error("AudioMixer not initialized. Call initialize() first.");if("audio"!==t.kind)throw new Error("Track must be an audio track");this.sources.has(e)&&this.removeSource(e);try{const i=new MediaStream([t]),s=this.audioContext.createMediaStreamSource(i),o=this.audioContext.createGain();o.gain.value=r.muted?0:r.volume??1;const n=this.audioContext.createStereoPanner();n.pan.value=r.pan??0,s.connect(o),o.connect(n),n.connect(this.masterGain);const a={id:e,sourceNode:s,gainNode:o,panNode:n,track:t,options:{volume:r.volume??1,muted:r.muted??!1,pan:r.pan??0}};this.sources.set(e,a),console.log("[AudioMixer] Added source:",e),this.emit("sourceAdded",{sourceId:e})}catch(e){const t=e instanceof Error?e:new Error(String(e));throw console.error("[AudioMixer] Failed to add source:",t),this.emit("error",{message:`Failed to add source: ${t.message}`,error:t}),t}}removeSource(e){const t=this.sources.get(e);if(t)try{t.sourceNode.disconnect(),t.gainNode.disconnect(),t.panNode.disconnect(),this.sources.delete(e),console.log("[AudioMixer] Removed source:",e),this.emit("sourceRemoved",{sourceId:e})}catch(e){console.error("[AudioMixer] Error removing source:",e)}}updateSource(e,t){const r=this.sources.get(e);r?(void 0!==t.volume&&(r.options.volume=t.volume,r.options.muted||r.gainNode.gain.setTargetAtTime(t.volume,this.audioContext?.currentTime??0,.01)),void 0!==t.muted&&(r.options.muted=t.muted,r.gainNode.gain.setTargetAtTime(t.muted?0:r.options.volume,this.audioContext?.currentTime??0,.01)),void 0!==t.pan&&(r.options.pan=t.pan,r.panNode.pan.setTargetAtTime(t.pan,this.audioContext?.currentTime??0,.01))):console.warn("[AudioMixer] Source not found:",e)}setVolume(e,t){this.updateSource(e,{volume:Math.max(0,Math.min(2,t))})}mute(e){this.updateSource(e,{muted:!0})}unmute(e){this.updateSource(e,{muted:!1})}toggleMute(e){const t=this.sources.get(e);if(!t)return!1;const r=!t.options.muted;return this.updateSource(e,{muted:r}),r}setPan(e,t){this.updateSource(e,{pan:Math.max(-1,Math.min(1,t))})}setMasterVolume(e){this.masterGain&&this.masterGain.gain.setTargetAtTime(Math.max(0,Math.min(2,e)),this.audioContext?.currentTime??0,.01)}getMasterVolume(){return this.masterGain?.gain.value??1}getOutputStream(){return this.outputStream}getOutputTrack(){return this.outputStream?.getAudioTracks()[0]??null}getSourceIds(){return Array.from(this.sources.keys())}getSourceOptions(e){const t=this.sources.get(e);return t?{...t.options}:null}hasSource(e){return this.sources.has(e)}getSourceCount(){return this.sources.size}async resume(){this.audioContext&&"suspended"===this.audioContext.state&&await this.audioContext.resume()}async suspend(){this.audioContext&&"running"===this.audioContext.state&&await this.audioContext.suspend()}getState(){return this.audioContext?.state??null}getLevel(){if(!this.analyzer)return 0;const e=new Uint8Array(this.analyzer.frequencyBinCount);this.analyzer.getByteTimeDomainData(e);let t=0;for(let r=0;r<e.length;r++){const i=Math.abs(e[r]-128)/128;i>t&&(t=i)}if(t<1e-4)return 0;const r=(20*Math.log10(t)- -60)/60;return Math.max(0,Math.min(1,r))}getLevels(){const e=this.getLevel();return e>this.peakLevel?this.peakLevel=e:this.peakLevel*=this.peakDecayRate,{level:e,peakLevel:this.peakLevel}}startLevelMonitoring(){if(this.levelMonitoringActive)return;this.levelMonitoringActive=!0;const e=()=>{if(!this.levelMonitoringActive||"running"!==this.audioContext?.state)return;const{level:t,peakLevel:r}=this.getLevels();this.emit("levelUpdate",{level:t,peakLevel:r}),requestAnimationFrame(e)};requestAnimationFrame(e),console.log("[AudioMixer] Level monitoring started")}stopLevelMonitoring(){this.levelMonitoringActive=!1,this.peakLevel=0,console.log("[AudioMixer] Level monitoring stopped")}isMonitoringLevels(){return this.levelMonitoringActive}destroy(){this.stopLevelMonitoring();for(const e of this.sources.keys())this.removeSource(e);this.compressor&&(this.compressor.disconnect(),this.compressor=null),this.limiter&&(this.limiter.disconnect(),this.limiter=null),this.analyzer&&(this.analyzer.disconnect(),this.analyzer=null),this.audioContext&&(this.audioContext.close().catch(()=>{}),this.audioContext=null),this.destination=null,this.masterGain=null,this.outputStream=null,this.removeAllListeners()}}const ze={enabled:!0,maxAttempts:5,baseDelay:1e3,maxDelay:3e4,backoffMultiplier:2};class Ue extends Ae{constructor(e={}){super(),this.reconnectTimeout=null,this.countdownInterval=null,this.reconnectCallback=null,this.config={...ze,...e},this.state={isReconnecting:!1,attemptNumber:0,nextAttemptIn:null,lastError:null}}calculateDelay(e){const t=this.config.baseDelay*Math.pow(this.config.backoffMultiplier,e-1),r=.1*t*(2*Math.random()-1);return Math.min(t+r,this.config.maxDelay)}start(e){this.config.enabled?this.state.isReconnecting?console.log("[ReconnectionManager] Already reconnecting"):(this.reconnectCallback=e,this.state={isReconnecting:!0,attemptNumber:0,nextAttemptIn:null,lastError:null},this.scheduleNextAttempt()):console.log("[ReconnectionManager] Reconnection disabled")}scheduleNextAttempt(){if(!this.state.isReconnecting)return;if(this.state.attemptNumber++,this.state.attemptNumber>this.config.maxAttempts)return void this.handleExhausted();const e=this.calculateDelay(this.state.attemptNumber);this.state.nextAttemptIn=e,console.log(`[ReconnectionManager] Scheduling attempt ${this.state.attemptNumber}/${this.config.maxAttempts} in ${e}ms`),this.emit("attemptStart",{attempt:this.state.attemptNumber,delay:e}),this.startCountdown(e),this.reconnectTimeout=setTimeout(()=>{this.executeAttempt()},e)}startCountdown(e){this.stopCountdown();const t=Date.now();this.countdownInterval=setInterval(()=>{const r=Date.now()-t;this.state.nextAttemptIn=Math.max(0,e-r)},100)}stopCountdown(){this.countdownInterval&&(clearInterval(this.countdownInterval),this.countdownInterval=null)}async executeAttempt(){if(this.stopCountdown(),this.state.nextAttemptIn=null,this.reconnectCallback){console.log(`[ReconnectionManager] Executing attempt ${this.state.attemptNumber}`);try{await this.reconnectCallback(),this.handleSuccess()}catch(e){const t=e instanceof Error?e.message:String(e);this.handleFailure(t)}}else console.error("[ReconnectionManager] No reconnect callback set")}handleSuccess(){console.log("[ReconnectionManager] Reconnection successful"),this.state={isReconnecting:!1,attemptNumber:0,nextAttemptIn:null,lastError:null},this.cleanup(),this.emit("attemptSuccess",void 0)}handleFailure(e){console.log(`[ReconnectionManager] Attempt ${this.state.attemptNumber} failed:`,e),this.state.lastError=e,this.emit("attemptFailed",{attempt:this.state.attemptNumber,error:e}),this.scheduleNextAttempt()}handleExhausted(){console.log("[ReconnectionManager] All reconnection attempts exhausted"),this.emit("exhausted",{totalAttempts:this.config.maxAttempts}),this.stop()}stop(){console.log("[ReconnectionManager] Stopping reconnection"),this.cleanup(),this.state={isReconnecting:!1,attemptNumber:0,nextAttemptIn:null,lastError:this.state.lastError}}cleanup(){this.reconnectTimeout&&(clearTimeout(this.reconnectTimeout),this.reconnectTimeout=null),this.stopCountdown(),this.reconnectCallback=null}reset(){this.stop(),this.state.lastError=null}getState(){return{...this.state}}isReconnecting(){return this.state.isReconnecting}getAttemptNumber(){return this.state.attemptNumber}getMaxAttempts(){return this.config.maxAttempts}updateConfig(e){this.config={...this.config,...e}}destroy(){this.cleanup(),this.removeAllListeners()}}const Le=[{mode:"solo",label:"Solo",icon:"⬜",minSources:1,maxSources:1},{mode:"pip-br",label:"PiP ↘",icon:"◳",minSources:2,maxSources:2},{mode:"pip-bl",label:"PiP ↙",icon:"◲",minSources:2,maxSources:2},{mode:"pip-tr",label:"PiP ↗",icon:"◱",minSources:2,maxSources:2},{mode:"pip-tl",label:"PiP ↖",icon:"◰",minSources:2,maxSources:2},{mode:"split-h",label:"Split ⬌",icon:"▥",minSources:2,maxSources:2},{mode:"split-v",label:"Split ⬍",icon:"▤",minSources:2,maxSources:2},{mode:"focus-l",label:"Focus ◀",icon:"◧",minSources:2,maxSources:2},{mode:"focus-r",label:"Focus ▶",icon:"◨",minSources:2,maxSources:2},{mode:"pip-dual-br",label:"Main+2 PiP",icon:"⊞",minSources:3,maxSources:3},{mode:"pip-dual-bl",label:"Main+2 PiP ↙",icon:"⊟",minSources:3,maxSources:3},{mode:"split-pip-l",label:"Split+PiP",icon:"⊠",minSources:3,maxSources:3},{mode:"split-pip-r",label:"Split+PiP ▶",icon:"⊡",minSources:3,maxSources:3},{mode:"featured",label:"Featured",icon:"⬒",minSources:3,maxSources:99},{mode:"featured-r",label:"Featured ▶",icon:"⬓",minSources:3,maxSources:99},{mode:"grid",label:"Grid",icon:"▦",minSources:2,maxSources:99},{mode:"stack",label:"Stack",icon:"☰",minSources:2,maxSources:99}];let De="letterbox";function Ve(e,t,r,i=De){return{id:`layer-${t}-${e}`,sourceId:e,visible:!0,locked:!1,zIndex:t,transform:{...Te,...r},scalingMode:i}}const Oe=.25,je=.02,Ne=.005;function Fe(e){return[Ve(e[0],0,{x:0,y:0,width:1,height:1})]}function He(e,t,r=.25){if(e.length<2)return Fe(e);const i={tl:{x:je,y:je},tr:{x:1-r-je,y:je},bl:{x:je,y:1-r-je},br:{x:1-r-je,y:1-r-je}}[t];return[Ve(e[0],0,{x:0,y:0,width:1,height:1}),Ve(e[1],1,{x:i.x,y:i.y,width:r,height:r,borderRadius:8})]}function qe(e,t,r=.5){if(e.length<2)return Fe(e);const i=.0025;return"h"===t?[Ve(e[0],0,{x:0,y:0,width:r-i,height:1}),Ve(e[1],0,{x:r+i,y:0,width:1-r-i,height:1})]:[Ve(e[0],0,{x:0,y:0,width:1,height:r-i}),Ve(e[1],0,{x:0,y:r+i,width:1,height:1-r-i})]}function Be(e,t){if(e.length<3)return He(e,"br"===t?"br":"bl");const r=Oe,i=[Ve(e[0],0,{x:0,y:0,width:1,height:1})];return"br"===t?i.push(Ve(e[1],1,{x:.73,y:.47,width:r,height:r,borderRadius:8}),Ve(e[2],2,{x:.73,y:.73,width:r,height:r,borderRadius:8})):i.push(Ve(e[1],1,{x:je,y:.47,width:r,height:r,borderRadius:8}),Ve(e[2],2,{x:je,y:.73,width:r,height:r,borderRadius:8})),i}function Ge(e,t){if(e.length<3)return qe(e,"h");const r=Oe,i=[Ve(e[0],0,{x:0,y:0,width:.4975,height:1}),Ve(e[1],0,{x:.5025,y:0,width:.4975,height:1})];return"l"===t?i.push(Ve(e[2],1,{x:.2275,y:.73,width:r,height:r,borderRadius:8})):i.push(Ve(e[2],1,{x:.73,y:.73,width:r,height:r,borderRadius:8})),i}function Qe(e,t){const r=e.length;if(r<=2)return qe(e,"bottom"===t?"v":"h",.75);const i=Ne,s=.795,o=[];if("bottom"===t){o.push(Ve(e[0],0,{x:0,y:0,width:1,height:s}));const t=r-1,n=(1-i*(t-1))/t;for(let t=1;t<r;t++)o.push(Ve(e[t],0,{x:(t-1)*(n+i),y:.8,width:n,height:.2}))}else{o.push(Ve(e[0],0,{x:0,y:0,width:s,height:1}));const t=r-1,n=(1-i*(t-1))/t;for(let t=1;t<r;t++)o.push(Ve(e[t],0,{x:.8,y:(t-1)*(n+i),width:.2,height:n}))}return o}function Xe(e,t){if(0===t.length)return[];De=e.scalingMode??"letterbox";const r=e.pipScale??Oe,i=e.splitRatio??.5,s=Math.min(Math.max(i,.0025),.9975);switch(e.mode){case"solo":case"fullscreen":default:return Fe(t);case"pip-br":case"pip":return He(t,"br",r);case"pip-bl":return He(t,"bl",r);case"pip-tr":return He(t,"tr",r);case"pip-tl":return He(t,"tl",r);case"split-h":case"side-by-side":return qe(t,"h",s);case"split-v":return qe(t,"v",s);case"focus-l":return qe(t,"h",.7);case"focus-r":return qe(t,"h",.3);case"pip-dual-br":return Be(t,"br");case"pip-dual-bl":return Be(t,"bl");case"split-pip-l":return Ge(t,"l");case"split-pip-r":return Ge(t,"r");case"featured":return Qe(t,"bottom");case"featured-r":return Qe(t,"right");case"grid":return function(e){const t=e.length;if(0===t)return[];if(1===t)return Fe(e);if(2===t)return qe(e,"h");const r=Ne,i=Math.ceil(Math.sqrt(t)),s=Math.ceil(t/i),o=(1-r*(i-1))/i,n=(1-r*(s-1))/s,a=[];for(let c=0;c<t;c++){const l=c%i,d=Math.floor(c/i),h=d===s-1,u=h?(t-1)%i+1:i;let p=0;h&&u<i&&(p=(1-(u*o+(u-1)*r))/2);const g=p+l*(o+r),f=d*(n+r);a.push(Ve(e[c],c,{x:g,y:f,width:o,height:n}))}return a}(t);case"stack":return function(e){const t=e.length;if(0===t)return[];if(1===t)return Fe(e);const r=Ne,i=(1-r*(t-1))/t;return e.map((e,t)=>Ve(e,0,{x:0,y:t*(i+r),width:1,height:i}))}(t)}}const Ke={durationMs:300,easing:"ease-out"};class Je extends Ae{constructor(e){super(),this.scenes=new Map,this.activeSceneId=null,this.defaultLayoutTransition=Ke,this.isAnimating=!1,this.worker=null,this.workerReady=!1,this.pendingMessages=[],this.frameProcessors=new Map,this.frameReaders=new Map,this.outputCanvas=null,this.outputStream=null,this.lastStats={fps:0,frameTimeMs:0},this.config={...Me,...e},this.defaultTransition=this.config.defaultTransition||{type:"fade",durationMs:500,easing:"ease-in-out"},this.currentLayout={mode:"solo",scalingMode:"letterbox"}}async initializeWorker(){let e=null;const r=[new URL("../workers/compositor.worker.js",t&&"SCRIPT"===t.tagName.toUpperCase()&&t.src||new URL("fw-streamcrafter.iife.js",document.baseURI).href).href,"/node_modules/@livepeer-frameworks/streamcrafter-core/dist/workers/compositor.worker.js","/workers/compositor.worker.js","./workers/compositor.worker.js"];console.log("[SceneManager] Trying fallback worker paths:",r);for(const t of r){if(this.worker)break;try{console.log(`[SceneManager] Trying worker path: ${t}`);const e=(()=>{try{return new Worker(t,{type:"module"})}catch{return new Worker(t)}})();if(await new Promise(t=>{const r=setTimeout(()=>{e.terminate(),t(!1)},2e3);e.onerror=()=>{clearTimeout(r),e.terminate(),t(!1)},e.onmessage=()=>{clearTimeout(r),t(!0)},setTimeout(()=>{clearTimeout(r),t(!0)},500)})){e.terminate();try{this.worker=new Worker(t,{type:"module"})}catch{this.worker=new Worker(t)}console.log(`[SceneManager] Worker loaded from: ${t}`);break}console.warn(`[SceneManager] Worker failed to load from: ${t}`)}catch(r){e=r instanceof Error?r:new Error(String(r)),console.warn(`[SceneManager] Failed to load worker from ${t}:`,e.message),this.worker=null}}if(!this.worker)throw new Error(`Failed to initialize compositor worker. Make sure the worker is bundled correctly. Last error: ${e?.message??"unknown"}`)}async initialize(){if(console.log("[SceneManager] initialize() called"),this.worker)throw new Error("SceneManager already initialized");console.log("[SceneManager] Creating output canvas",{width:this.config.width,height:this.config.height}),this.outputCanvas=document.createElement("canvas"),this.outputCanvas.width=this.config.width,this.outputCanvas.height=this.config.height;const e=this.outputCanvas.transferControlToOffscreen();console.log("[SceneManager] Created OffscreenCanvas"),console.log("[SceneManager] Initializing worker..."),await this.initializeWorker(),console.log("[SceneManager] Worker initialized, waiting for ready...");const t=new Promise((e,t)=>{const r=setTimeout(()=>{console.error("[SceneManager] Worker initialization timeout"),t(new Error("Compositor worker initialization timeout"))},1e4);this.worker.onmessage=t=>{console.log("[SceneManager] Worker message:",t.data.type),"ready"===t.data.type&&(clearTimeout(r),e()),this.handleWorkerMessage(t.data)},this.worker.onerror=e=>{console.error("[SceneManager] Worker error:",e.message),clearTimeout(r),t(new Error(e.message))}});console.log("[SceneManager] Sending init message to worker"),this.worker.postMessage({type:"init",config:this.config,canvas:e},[e]),await t,console.log("[SceneManager] Worker is ready"),console.log("[SceneManager] Creating default scene");const r=this.createScene("Default");console.log("[SceneManager] Setting active scene:",r.id),this.setActiveScene(r.id),console.log("[SceneManager] Initialize complete")}handleWorkerMessage(e){switch(e.type){case"ready":this.workerReady=!0;for(const e of this.pendingMessages)this.worker?.postMessage(e);this.pendingMessages=[];break;case"stats":this.lastStats=e.stats,this.emit("statsUpdate",{stats:e.stats});break;case"transitionComplete":this.emit("transitionCompleted",{sceneId:e.sceneId});break;case"layoutAnimationComplete":{this.isAnimating=!1;const e=this.getActiveScene();if(e){const t=e.layers.filter(e=>e.visible).map(e=>e.sourceId);e.layers=Xe(this.currentLayout,t)}this.emit("layoutAnimationCompleted",{layout:this.currentLayout});break}case"rendererChanged":this.config.renderer=e.renderer,this.emit("rendererChanged",{renderer:e.renderer});break;case"error":this.emit("error",{message:e.message})}}sendToWorker(e,t){this.workerReady&&this.worker?this.worker.postMessage(e,t||[]):this.pendingMessages.push(e)}createScene(e,t="#000000"){const r=`scene-${Date.now()}-${Math.random().toString(36).slice(2,9)}`,i={id:r,name:e,layers:[],backgroundColor:t};return this.scenes.set(r,i),this.emit("sceneCreated",{scene:i}),i}deleteScene(e){if(!this.scenes.has(e))throw new Error(`Scene not found: ${e}`);if(this.activeSceneId===e)throw new Error("Cannot delete the active scene");this.scenes.delete(e),this.emit("sceneDeleted",{sceneId:e})}getScene(e){return this.scenes.get(e)}getAllScenes(){return Array.from(this.scenes.values())}getActiveScene(){return this.activeSceneId?this.scenes.get(this.activeSceneId):void 0}setActiveScene(e){const t=this.scenes.get(e);if(!t)throw new Error(`Scene not found: ${e}`);const r=this.activeSceneId;this.activeSceneId=e,this.sendToWorker({type:"updateScene",scene:t}),this.emit("sceneActivated",{scene:t,previousSceneId:r})}async transitionTo(e,t){const r=this.scenes.get(e);if(!r)throw new Error(`Scene not found: ${e}`);const i=t||this.defaultTransition;this.sendToWorker({type:"updateScene",scene:r}),this.sendToWorker({type:"startTransition",transition:i,toSceneId:e});const s=this.activeSceneId;this.emit("transitionStarted",{fromSceneId:s||"",toSceneId:e,transition:i}),this.activeSceneId=e}addLayer(e,t,r){const i=this.scenes.get(e);if(!i)throw new Error(`Scene not found: ${e}`);const s=`layer-${Date.now()}-${Math.random().toString(36).slice(2,9)}`,o=i.layers.reduce((e,t)=>Math.max(e,t.zIndex),-1),n={id:s,sourceId:t,visible:!0,locked:!1,zIndex:o+1,transform:{...Te,...r},scalingMode:this.currentLayout.scalingMode??"letterbox"};return i.layers.push(n),this.updateSceneInWorker(i),this.emit("layerAdded",{sceneId:e,layer:n}),n}removeLayer(e,t){const r=this.scenes.get(e);if(!r)throw new Error(`Scene not found: ${e}`);const i=r.layers.findIndex(e=>e.id===t);if(-1===i)throw new Error(`Layer not found: ${t}`);r.layers.splice(i,1),this.updateSceneInWorker(r),this.emit("layerRemoved",{sceneId:e,layerId:t})}updateLayerTransform(e,t,r){const i=this.scenes.get(e);if(!i)throw new Error(`Scene not found: ${e}`);const s=i.layers.find(e=>e.id===t);if(!s)throw new Error(`Layer not found: ${t}`);s.transform={...s.transform,...r},this.updateSceneInWorker(i),this.emit("layerUpdated",{sceneId:e,layer:s})}setLayerVisibility(e,t,r){const i=this.scenes.get(e);if(!i)throw new Error(`Scene not found: ${e}`);const s=i.layers.find(e=>e.id===t);if(!s)throw new Error(`Layer not found: ${t}`);s.visible=r,this.updateSceneInWorker(i),this.emit("layerUpdated",{sceneId:e,layer:s})}reorderLayers(e,t){const r=this.scenes.get(e);if(!r)throw new Error(`Scene not found: ${e}`);t.forEach((e,t)=>{const i=r.layers.find(t=>t.id===e);i&&(i.zIndex=t)}),this.updateSceneInWorker(r)}cycleSourceOrder(e="forward"){const t=this.getActiveScene();if(!t||t.layers.length<2)return void console.warn("[SceneManager] cycleSourceOrder: Need at least 2 layers");console.log("[SceneManager] cycleSourceOrder BEFORE:",{direction:e,layers:t.layers.map(e=>({id:e.id,sourceId:e.sourceId,zIndex:e.zIndex}))});const r=[...t.layers].sort((e,t)=>e.zIndex-t.zIndex),i=r.map(e=>e.id);if(console.log("[SceneManager] sorted layerIds before rotate:",[...i]),"forward"===e){const e=i.shift();e&&i.push(e)}else{const e=i.pop();e&&i.unshift(e)}console.log("[SceneManager] layerIds after rotate:",[...i]),this.reorderLayers(t.id,i),console.log("[SceneManager] after reorderLayers:",{layers:t.layers.map(e=>({id:e.id,sourceId:e.sourceId,zIndex:e.zIndex}))}),this.currentLayout&&this.applyLayout(this.currentLayout,!0,{durationMs:200,easing:"ease-out"}),console.log("[SceneManager] cycleSourceOrder AFTER applyLayout:",{layers:t.layers.map(e=>({id:e.id,sourceId:e.sourceId,zIndex:e.zIndex}))}),this.emit("layerUpdated",{sceneId:t.id,layer:t.layers[0]})}updateSceneInWorker(e){this.activeSceneId===e.id&&this.sendToWorker({type:"updateScene",scene:e})}applyLayout(e,t=!0,r){const i=this.getActiveScene();if(!i)return void console.warn("[SceneManager] applyLayout: No active scene");this.currentLayout=e;const s=[...i.layers].filter(e=>e.visible).sort((e,t)=>e.zIndex-t.zIndex).map(e=>e.sourceId);console.log("[SceneManager] applyLayout",{mode:e.mode,sourceIds:s,currentLayerCount:i.layers.length,animate:t});const o=Xe(e,s),n={...i,layers:o};if(i.layers=o,t&&o.length>0){const t={...this.defaultLayoutTransition,...r};this.isAnimating=!0,this.emit("layoutAnimationStarted",{layout:e}),this.sendToWorker({type:"animateLayout",targetScene:n,transition:t})}else this.updateSceneInWorker(i);this.sendToWorker({type:"updateLayout",layout:e})}setDefaultLayoutTransition(e){this.defaultLayoutTransition={...this.defaultLayoutTransition,...e}}isLayoutAnimating(){return this.isAnimating}getCurrentLayout(){return this.currentLayout}bindSource(e,t){const r=t.getVideoTracks()[0];if(!r)throw new Error("No video track in stream");const i=globalThis.MediaStreamTrackProcessor;if(!i)return void console.warn("[SceneManager] MediaStreamTrackProcessor not available, compositor will not work");const s=new i({track:r});this.frameProcessors.set(e,s);const o=s.readable.getReader();this.frameReaders.set(e,o);const n=async()=>{try{const{done:t,value:r}=await o.read();if(t||!r)return;const i=r;this.sendToWorker({type:"sourceFrame",sourceId:e,frame:i},[i]),n()}catch(e){"AbortError"!==e?.name&&console.error("[SceneManager] Frame read error:",e)}};n()}unbindSource(e){const t=this.frameReaders.get(e);t&&(t.cancel().catch(()=>{}),this.frameReaders.delete(e));this.frameProcessors.get(e)&&this.frameProcessors.delete(e)}async bindImageSource(e,t){const r=await fetch(t),i=await r.blob(),s=await createImageBitmap(i);this.sendToWorker({type:"sourceImage",sourceId:e,bitmap:s},[s])}applyFilter(e,t){this.sendToWorker({type:"applyFilter",layerId:e,filter:t})}getOutputTrack(){return this.outputCanvas?(this.outputStream||(this.outputStream=this.outputCanvas.captureStream(this.config.frameRate)),this.outputStream.getVideoTracks()[0]||null):null}getOutputStream(){return this.outputCanvas?(this.outputStream||(this.outputStream=this.outputCanvas.captureStream(this.config.frameRate)),this.outputStream):null}getRendererType(){return this.config.renderer}setRenderer(e){this.config.renderer=e,this.sendToWorker({type:"setRenderer",renderer:e})}getStats(){return this.lastStats}getConfig(){return{...this.config}}updateOutputConfig(e){const t=e.width??this.config.width,r=e.height??this.config.height,i=e.frameRate??this.config.frameRate;return(t!==this.config.width||r!==this.config.height||i!==this.config.frameRate)&&(this.config.width=t,this.config.height=r,this.config.frameRate=i,this.sendToWorker({type:"resize",width:t,height:r,frameRate:i}),!0)}isInitialized(){return this.workerReady}destroy(){for(const[e]of this.frameProcessors)this.unbindSource(e);this.frameProcessors.clear(),this.frameReaders.clear(),this.worker&&(this.sendToWorker({type:"destroy"}),this.worker.terminate(),this.worker=null),this.scenes.clear(),this.activeSceneId=null,this.outputStream=null,this.outputCanvas=null,this.workerReady=!1,this.removeAllListeners()}}const Ze={professional:{codec:"avc1.4d0032",width:1920,height:1080,bitrate:8e6,framerate:30},broadcast:{codec:"avc1.4d0028",width:1920,height:1080,bitrate:45e5,framerate:30},conference:{codec:"avc1.4d001f",width:1280,height:720,bitrate:25e5,framerate:30},low:{codec:"avc1.42001e",width:640,height:480,bitrate:1e6,framerate:24}},Ye={codec:"opus",sampleRate:48e3,numberOfChannels:2,bitrate:128e3};class et extends Ae{constructor(e={}){super(),this.worker=null,this.videoProcessor=null,this.audioProcessor=null,this.videoReader=null,this.audioReader=null,this.isRunning=!1,this.isInitialized=!1,this.stats=null,this.config=null,this.pendingRequests=new Map,this.requestCounter=0,this.providedWorker=null,this.options={workerUrl:e.workerUrl??"",debug:e.debug??!1,timeout:e.timeout??1e4},this.providedWorker=e.worker??null}log(e,t){this.options.debug&&console.log(`[EncoderManager] ${e}`,t??"")}generateRequestId(){return`req_${++this.requestCounter}_${Date.now()}`}sendRequest(e){return new Promise((t,r)=>{if(!this.worker)return void r(new Error("Worker not created"));const i=e.requestId;if(!i)return this.worker.postMessage(e),void t(void 0);const s=setTimeout(()=>{this.pendingRequests.delete(i),r(new Error(`Request ${i} timed out`))},this.options.timeout);this.pendingRequests.set(i,{resolve:t,reject:r,timer:s}),this.worker.postMessage(e)})}handleResponse(e,t,r){const i=this.pendingRequests.get(e);i&&(clearTimeout(i.timer),this.pendingRequests.delete(e),t?i.resolve():i.reject(new Error(r??"Unknown error")))}tryCreateWorker(e,t=!0){return new Promise(r=>{try{const i=new Worker(e,t?{type:"module"}:void 0);let s=!1;const o=()=>{i.removeEventListener("message",n),i.removeEventListener("error",a)},n=e=>{s||(s=!0,o(),r(i))},a=t=>{s||(s=!0,o(),this.log("Worker failed to load from: "+e.toString(),t.message),i.terminate(),r(null))};i.addEventListener("message",n),i.addEventListener("error",a),setTimeout(()=>{s||(s=!0,o(),r(i))},2e3)}catch(t){this.log("Failed to create worker: "+e.toString(),t),r(null)}})}async createWorkerAsync(){if(this.providedWorker)return this.log("Using provided worker instance"),this.providedWorker;if(this.options.workerUrl){this.log("Creating worker from URL:",this.options.workerUrl);const e=await this.tryCreateWorker(this.options.workerUrl);if(e)return e}const e=[];try{const r=new URL("../workers/encoder.worker.js",t&&"SCRIPT"===t.tagName.toUpperCase()&&t.src||new URL("fw-streamcrafter.iife.js",document.baseURI).href);e.push({url:r,description:"import.meta.url relative"})}catch{}e.push({url:"/workers/encoder.worker.js",description:"Vite dev server"},{url:"/node_modules/@livepeer-frameworks/streamcrafter-core/dist/workers/encoder.worker.js",description:"node_modules"},{url:"./workers/encoder.worker.js",description:"relative path"});for(const{url:t,description:r}of e){this.log(`Trying worker path: ${t.toString()} (${r})`);const e=await this.tryCreateWorker(t);if(e)return this.log("Worker loaded from:",t.toString()),e}throw new Error("Failed to create encoder worker. Provide a worker URL via options.workerUrl or ensure workers are served correctly.")}createWorker(){if(this.providedWorker)return this.providedWorker;if(this.options.workerUrl)return new Worker(this.options.workerUrl,{type:"module"});try{const e=new URL("../workers/encoder.worker.js",t&&"SCRIPT"===t.tagName.toUpperCase()&&t.src||new URL("fw-streamcrafter.iife.js",document.baseURI).href);return new Worker(e,{type:"module"})}catch{}return new Worker("/workers/encoder.worker.js",{type:"module"})}handleWorkerMessage(e){switch(e.type){case"ready":this.log("Worker ready"),e.requestId&&this.handleResponse(e.requestId,!0),this.emit("ready",void 0);break;case"started":this.log("Encoding started"),e.requestId&&this.handleResponse(e.requestId,!0),this.emit("started",void 0);break;case"stopped":this.log("Encoding stopped"),e.requestId&&this.handleResponse(e.requestId,!0),this.emit("stopped",void 0);break;case"flushed":this.log("Encoder flushed"),e.requestId&&this.handleResponse(e.requestId,!0);break;case"stats":this.stats=e.data,this.emit("stats",this.stats);break;case"error":{const t=e.data;console.error("[EncoderManager] Worker error:",t),e.requestId&&this.handleResponse(e.requestId,!1,t.message),this.emit("error",t);break}case"encodedVideoChunk":this.emit("videoChunk",e.data);break;case"encodedAudioChunk":this.emit("audioChunk",e.data);break;default:this.log("Unknown message from worker",e)}}async initialize(e,t){if(this.log("Initializing encoder",t),this.config=t,"undefined"==typeof VideoEncoder||"undefined"==typeof AudioEncoder)throw new Error("WebCodecs not supported in this browser");if("undefined"==typeof MediaStreamTrackProcessor)throw new Error("MediaStreamTrackProcessor not supported in this browser");const r=e.getVideoTracks()[0],i=e.getAudioTracks()[0];r&&(this.videoProcessor=new MediaStreamTrackProcessor({track:r})),i&&(this.audioProcessor=new MediaStreamTrackProcessor({track:i})),this.worker=await this.createWorkerAsync(),this.worker.onmessage=e=>{this.handleWorkerMessage(e.data)},this.worker.onerror=e=>{console.error("[EncoderManager] Worker error:",e),this.emit("error",{message:e.message,fatal:!0})};const s=this.generateRequestId();this.log("Sending initialize to worker",{requestId:s}),await this.sendRequest({type:"initialize",requestId:s,data:{config:t}}),this.isInitialized=!0,this.log("Worker initialized and ready")}async start(){if(!this.isInitialized)throw new Error("EncoderManager not initialized");if(this.isRunning)return;this.log("Starting encoder");const e=this.generateRequestId();await this.sendRequest({type:"start",requestId:e}),this.isRunning=!0,this.videoProcessor&&this.startVideoProcessing(),this.audioProcessor&&this.startAudioProcessing(),this.log("Encoder started, frame processing active")}async startVideoProcessing(){if(this.videoProcessor&&this.worker)try{this.videoReader=this.videoProcessor.readable.getReader();const e=this.videoReader;for(;this.isRunning;){const{value:t,done:r}=await e.read();if(r||!t)break;try{this.worker.postMessage({type:"videoFrame",data:t},[t])}catch(e){console.error("[EncoderManager] Error sending video frame:",e);try{t.close()}catch{}}}}catch(e){this.isRunning&&console.error("[EncoderManager] Video processing error:",e)}}async startAudioProcessing(){if(this.audioProcessor&&this.worker)try{this.audioReader=this.audioProcessor.readable.getReader();const e=this.audioReader;for(;this.isRunning;){const{value:t,done:r}=await e.read();if(r||!t)break;try{this.worker.postMessage({type:"audioData",data:t},[t])}catch(e){console.error("[EncoderManager] Error sending audio data:",e);try{t.close()}catch{}}}}catch(e){this.isRunning&&console.error("[EncoderManager] Audio processing error:",e)}}async stop(){if(this.isRunning){if(this.isRunning=!1,this.log("Stopping encoder"),this.videoReader){try{await this.videoReader.cancel(),this.videoReader.releaseLock()}catch{}this.videoReader=null}if(this.audioReader){try{await this.audioReader.cancel(),this.audioReader.releaseLock()}catch{}this.audioReader=null}if(this.worker&&this.isInitialized){const e=this.generateRequestId();try{await this.sendRequest({type:"stop",requestId:e})}catch(e){this.log("Stop request failed (may be expected)",e)}}this.emit("stopped",void 0)}}async updateConfig(e){if(!this.worker||!this.isInitialized)throw new Error("EncoderManager not initialized");const t=this.generateRequestId();await this.sendRequest({type:"updateConfig",requestId:t,data:e}),this.config&&(e.video&&(this.config.video={...this.config.video,...e.video}),e.audio&&(this.config.audio={...this.config.audio,...e.audio}))}async updateInputStream(e){if(!this.isInitialized||!this.worker)throw new Error("EncoderManager not initialized");const t=this.isRunning;if(this.log("Updating input stream (hot-swap)",{wasRunning:t}),this.videoReader){try{await this.videoReader.cancel(),this.videoReader.releaseLock()}catch{}this.videoReader=null}if(this.audioReader){try{await this.audioReader.cancel(),this.audioReader.releaseLock()}catch{}this.audioReader=null}const r=e.getVideoTracks()[0],i=e.getAudioTracks()[0];this.videoProcessor=r?new MediaStreamTrackProcessor({track:r}):null,this.audioProcessor=i?new MediaStreamTrackProcessor({track:i}):null,t&&(this.videoProcessor&&this.startVideoProcessing(),this.audioProcessor&&this.startAudioProcessing(),this.log("Input stream updated, processing restarted"))}async flush(){if(!this.worker||!this.isInitialized)return;const e=this.generateRequestId();await this.sendRequest({type:"flush",requestId:e})}getStats(){return this.stats}getConfig(){return this.config}getIsInitialized(){return this.isInitialized}getIsRunning(){return this.isRunning}destroy(){this.stop(),this.isInitialized=!1,this.videoProcessor=null,this.audioProcessor=null;for(const[,e]of this.pendingRequests)clearTimeout(e.timer),e.reject(new Error("EncoderManager destroyed"));this.pendingRequests.clear(),this.worker&&(this.worker.terminate(),this.worker=null),this.removeAllListeners()}}function tt(){const e={videoEncoder:"undefined"!=typeof VideoEncoder,audioEncoder:"undefined"!=typeof AudioEncoder,mediaStreamTrackProcessor:"undefined"!=typeof MediaStreamTrackProcessor,mediaStreamTrackGenerator:"undefined"!=typeof MediaStreamTrackGenerator};return{webcodecs:e,webrtc:{peerConnection:"undefined"!=typeof RTCPeerConnection,replaceTrack:"undefined"!=typeof RTCRtpSender&&"replaceTrack"in RTCRtpSender.prototype,insertableStreams:"undefined"!=typeof RTCRtpSender&&"createEncodedStreams"in RTCRtpSender.prototype,scriptTransform:"undefined"!=typeof RTCRtpScriptTransform},mediaDevices:{getUserMedia:"undefined"!=typeof navigator&&void 0!==navigator.mediaDevices&&"function"==typeof navigator.mediaDevices.getUserMedia,getDisplayMedia:"undefined"!=typeof navigator&&void 0!==navigator.mediaDevices&&"function"==typeof navigator.mediaDevices.getDisplayMedia,enumerateDevices:"undefined"!=typeof navigator&&void 0!==navigator.mediaDevices&&"function"==typeof navigator.mediaDevices.enumerateDevices},recommended:e.videoEncoder&&e.audioEncoder&&e.mediaStreamTrackProcessor&&e.mediaStreamTrackGenerator?"webcodecs":"mediastream"}}function rt(){return"undefined"!=typeof RTCRtpScriptTransform}function it(){return"undefined"!=typeof VideoEncoder&&"undefined"!=typeof AudioEncoder&&"undefined"!=typeof MediaStreamTrackProcessor&&"undefined"!=typeof MediaStreamTrackGenerator&&rt()}let st=0;class ot extends Ae{constructor(e){super(),this.whipClient=null,this.whipEndpoints=[],this.currentEndpointIndex=0,this.isStoppingIntentionally=!1,this.state="idle",this.stateContext={},this.sources=new Map,this.outputStream=null,this.statsInterval=null,this.lastStats=null,this.statsInFlight=!1,this.sceneManager=null,this.compositorBaseConfig=null,this.encoderManager=null,this.encoderOverrides={},this.config=e,this.currentProfile=e.profile||"broadcast",this.whipEndpoints=this.buildWhipEndpoints(e),this.deviceManager=new Ie,this.screenCapture=new Pe,this.audioMixer=new We,this.reconnectionManager=new Ue(e.reconnection);const t=tt();this.useWebCodecs=e.useWebCodecs??"webcodecs"===t.recommended,this.setupEventForwarding(),this.log("IngestControllerV2 initialized",{useWebCodecs:this.useWebCodecs,profile:this.currentProfile,audioMixing:e.audioMixing??!1})}buildWhipEndpoints(e){if(e.whipUrls&&e.whipUrls.length>0){return[e.whipUrl,...e.whipUrls].filter((e,t,r)=>r.indexOf(e)===t)}return[e.whipUrl]}getCurrentWhipUrl(){return this.whipEndpoints[this.currentEndpointIndex]??this.config.whipUrl}getNextWhipUrl(){return this.whipEndpoints.length>1&&(this.currentEndpointIndex=(this.currentEndpointIndex+1)%this.whipEndpoints.length),this.getCurrentWhipUrl()}log(e,t){this.config.debug&&console.log(`[IngestControllerV2] ${e}`,t??"")}setupEventForwarding(){this.deviceManager.on("devicesChanged",e=>{this.emit("deviceChange",e)}),this.deviceManager.on("error",e=>{this.emit("error",{error:e.message,recoverable:!0})}),this.screenCapture.on("ended",e=>{if(this.log("Screen capture ended",e),e.stream)for(const[t,r]of this.sources)if("screen"===r.type&&r.stream===e.stream){this.removeSource(t);break}}),this.screenCapture.on("error",e=>{this.emit("error",{error:e.message,recoverable:!0})}),this.reconnectionManager.on("attemptStart",e=>{this.emit("reconnectionAttempt",{attempt:e.attempt,maxAttempts:this.reconnectionManager.getMaxAttempts()})}),this.reconnectionManager.on("attemptSuccess",()=>{this.emit("reconnectionSuccess",void 0),this.setState("streaming")}),this.reconnectionManager.on("attemptFailed",e=>{this.log("Reconnection attempt failed",e)}),this.reconnectionManager.on("exhausted",()=>{this.emit("reconnectionFailed",{error:"All reconnection attempts exhausted"}),this.setState("error",{error:"Connection lost - reconnection failed"})})}setState(e,t){this.state=e,t&&(this.stateContext={...this.stateContext,...t}),this.stateContext.sources=Array.from(this.sources.values()),this.stateContext.activeProfile=this.currentProfile,this.stateContext.reconnection=this.reconnectionManager.getState(),this.emit("stateChange",{state:this.state,context:this.stateContext})}async ensureAudioMixer(){this.config.audioMixing&&null===this.audioMixer.getState()&&await this.audioMixer.initialize()}addMediaSource(e,t,r){const i=function(e){return`${e}-${++st}-${Date.now()}`}(e),s=t.getVideoTracks().length>0,o=Array.from(this.sources.values()).filter(e=>e.stream.getVideoTracks().length>0),n=s&&0===o.length,a={id:i,type:e,stream:t,label:r,active:!0,muted:!1,volume:1,primaryVideo:n};if(this.sources.set(i,a),this.log(`Added source: ${i} (${e})`,{label:r,tracks:t.getTracks().length,primaryVideo:n}),this.config.audioMixing){const e=t.getAudioTracks()[0];e&&this.audioMixer.addSource(i,e,{volume:1})}if(this.sceneManager&&this.sceneManager.isInitialized()){this.log("Binding source to compositor",{sourceId:i}),this.sceneManager.bindSource(i,t);const e=this.sceneManager.getActiveScene();this.log("Adding layer to scene",{sourceId:i,activeSceneId:e?.id,sceneLayers:e?.layers.length}),e&&(this.sceneManager.addLayer(e.id,i),this.log("Layer added",{sourceId:i,layerCount:e.layers.length}))}else this.log("Compositor not ready when adding source",{sourceId:i,hasSceneManager:!!this.sceneManager,isInitialized:this.sceneManager?.isInitialized()??!1});return this.emit("sourceAdded",{source:a}),this.updateOutputStreamFromSources(),a}removeSource(e){const t=this.sources.get(e);if(!t)return;const r=t.primaryVideo;if(t.stream.getTracks().forEach(e=>e.stop()),this.config.audioMixing&&this.audioMixer.removeSource(e),this.sceneManager){this.sceneManager.unbindSource(e);const t=this.sceneManager.getActiveScene();if(t){const r=t.layers.find(t=>t.sourceId===e);r&&this.sceneManager.removeLayer(t.id,r.id)}}if(this.sources.delete(e),this.log(`Removed source: ${e}`),r){const e=Array.from(this.sources.values()).filter(e=>e.stream.getVideoTracks().length>0);e.length>0&&(e[0].primaryVideo=!0,this.sources.set(e[0].id,e[0]),this.log(`Reassigned primary video to: ${e[0].id}`))}this.emit("sourceRemoved",{sourceId:e}),this.updateOutputStreamFromSources()}setPrimaryVideoSource(e){const t=this.sources.get(e);if(t)if(0!==t.stream.getVideoTracks().length){for(const[e,t]of this.sources)t.primaryVideo&&(t.primaryVideo=!1,this.sources.set(e,t));t.primaryVideo=!0,this.sources.set(e,t),this.log(`Set primary video source: ${e}`),this.emit("sourceUpdated",{source:t,changes:{primaryVideo:!0}}),this.updateOutputStreamFromSources()}else this.log(`Cannot set source ${e} as primary - no video track`)}getPrimaryVideoSource(){for(const e of this.sources.values())if(e.primaryVideo)return e;return null}updateOutputStreamFromSources(){const e=Array.from(this.sources.values()).filter(e=>e.active);if(0===e.length)return void(this.outputStream=null);const t=[];if(this.sceneManager&&this.sceneManager.isInitialized()){const e=this.sceneManager.getOutputTrack();e&&t.push(e)}else{const r=e.filter(e=>e.stream.getVideoTracks().length>0),i=r.find(e=>e.primaryVideo)||r[0];if(i){const e=i.stream.getVideoTracks()[0];e&&t.push(e)}}if(this.config.audioMixing&&"running"===this.audioMixer.getState()){const e=this.audioMixer.getOutputTrack();e&&t.push(e)}else for(const r of e){const e=r.stream.getAudioTracks()[0];if(e&&!r.muted){t.push(e);break}}this.outputStream=t.length>0?new MediaStream(t):null,this.whipClient&&"streaming"===this.state&&this.updateWhipTracks(),this.encoderManager&&this.outputStream&&this.encoderManager.updateInputStream(this.outputStream).catch(e=>{this.log("Failed to update encoder input stream",e)}),this.log("Output stream updated",{videoTracks:this.outputStream?.getVideoTracks().length??0,audioTracks:this.outputStream?.getAudioTracks().length??0,usingCompositor:!!this.sceneManager})}async updateWhipTracks(){if(this.whipClient&&this.outputStream)try{const e=this.whipClient.getPeerConnection();if(!e)return;const t=e.getSenders(),r=this.outputStream.getVideoTracks()[0],i=t.find(e=>"video"===e.track?.kind);i&&await i.replaceTrack(r??null);const s=this.outputStream.getAudioTracks()[0],o=t.find(e=>"audio"===e.track?.kind);o&&await o.replaceTrack(s??null)}catch(e){this.log("Error updating WHIP tracks",e)}}async startCamera(e={}){this.log("Starting camera capture",e),this.setState("requesting_permissions");try{await this.ensureAudioMixer();const t=e.profile||this.currentProfile,r={...e,profile:t};if(this.encoderOverrides?.video){const e=this.encoderOverrides.video,i=_e(t);r.customConstraints={video:{...i,...e.width&&{width:{ideal:e.width}},...e.height&&{height:{ideal:e.height}},...e.framerate&&{frameRate:{ideal:e.framerate}}},audio:!0},this.log("Using encoder overrides for capture constraints:",r.customConstraints)}const i=await this.deviceManager.getUserMedia(r),s=await this.getCameraLabel(i),o=this.addMediaSource("camera",i,s);return this.setState("capturing",{hasVideo:i.getVideoTracks().length>0,hasAudio:i.getAudioTracks().length>0}),o}catch(e){throw this.setState("error",{error:e instanceof Error?e.message:String(e)}),e}}async getCameraLabel(e){const t=e.getVideoTracks()[0];return t&&t.label||"Camera"}async startScreenShare(e={}){this.log("Starting screen share",e),this.setState("requesting_permissions");try{await this.ensureAudioMixer();const t={...e};if(this.encoderOverrides?.video){const e=this.encoderOverrides.video;t.video={...e.width&&{width:{ideal:e.width}},...e.height&&{height:{ideal:e.height}},...e.framerate&&{frameRate:{ideal:e.framerate}}},this.log("Using encoder overrides for screen capture constraints:",t.video)}const r=await this.screenCapture.start(t);if(r){const e=r.getVideoTracks()[0],t=e?.label||`Screen ${this.screenCapture.getCaptureCount()}`,i=this.addMediaSource("screen",r,t);return this.setState("capturing",{hasVideo:!0,isScreenShare:!0}),i}return this.sources.size>0?this.setState("capturing"):this.setState("idle"),null}catch(e){throw this.setState("error",{error:e instanceof Error?e.message:String(e)}),e}}addCustomSource(e,t){return this.addMediaSource("custom",e,t)}setSourceVolume(e,t){const r=this.sources.get(e);r&&(r.volume=Math.max(0,Math.min(2,t)),this.sources.set(e,r),this.config.audioMixing&&this.audioMixer.setVolume(e,r.volume),this.emit("sourceUpdated",{source:r,changes:{volume:r.volume}}))}setSourceMuted(e,t){const r=this.sources.get(e);r&&(r.muted=t,this.sources.set(e,r),this.config.audioMixing?t?this.audioMixer.mute(e):this.audioMixer.unmute(e):r.stream.getAudioTracks().forEach(e=>{e.enabled=!t}),this.emit("sourceUpdated",{source:r,changes:{muted:t}}),this.updateOutputStreamFromSources())}setSourceActive(e,t){const r=this.sources.get(e);r&&(r.active=t,this.sources.set(e,r),this.emit("sourceUpdated",{source:r,changes:{active:t}}),this.updateOutputStreamFromSources())}setMasterVolume(e){this.config.audioMixing&&this.audioMixer.setMasterVolume(e)}getMasterVolume(){return this.config.audioMixing?this.audioMixer.getMasterVolume():1}async stopCapture(){this.log("Stopping all capture");for(const e of Array.from(this.sources.keys()))this.removeSource(e);this.deviceManager.stopAllTracks(),this.screenCapture.stop(),this.outputStream=null,"streaming"!==this.state&&this.setState("idle",{hasVideo:!1,hasAudio:!1,isScreenShare:!1})}async setQualityProfile(e){if(e===this.currentProfile)return;const t=this.currentProfile;this.currentProfile=e,this.log(`Changing quality profile: ${t} -> ${e}`);for(const[t,r]of this.sources)if("camera"===r.type){const t=r.stream.getVideoTracks()[0];if(t)try{const r=_e(e);await t.applyConstraints(r)}catch(e){this.log("Failed to apply new constraints",e)}}this.emit("qualityChanged",{profile:e,previousProfile:t}),this.setState(this.state,{activeProfile:e})}setupWhipClientHandlers(){this.whipClient&&(this.whipClient.on("stateChange",e=>{if(this.log("WHIP state changed",e),this.stateContext={...this.stateContext,connectionState:e.state},"connected"===e.state){if(this.setState("streaming"),this.startStatsPolling(),this.reconnectionManager.reset(),this.useWebCodecs&&this.encoderManager&&this.whipClient){this.log("Attempting to attach WebCodecs encoder transform");const e=this.whipClient.canUseEncodedInsertion();if(this.log("canUseEncodedInsertion result:",e),e)try{this.whipClient.attachEncoderTransform(this.encoderManager),this.encoderManager.start(),this.log("WebCodecs encoder transform attached",{videoCodec:this.whipClient.getNegotiatedVideoCodec(),audioCodec:this.whipClient.getNegotiatedAudioCodec()}),this.emit("webCodecsActive",{active:!0})}catch(e){this.log("Failed to attach encoder transform, continuing with browser encoding",e),this.encoderManager&&(this.encoderManager.destroy(),this.encoderManager=null)}else this.log("Codec alignment check failed, using browser encoding",{videoCodec:this.whipClient.getNegotiatedVideoCodec(),audioCodec:this.whipClient.getNegotiatedAudioCodec()}),this.encoderManager&&(this.encoderManager.destroy(),this.encoderManager=null)}}else if("failed"===e.state||"disconnected"===e.state){if(this.isStoppingIntentionally)return;"streaming"===this.state&&!1!==this.config.reconnection?.enabled?this.handleConnectionLost():(this.setState("error",{error:"failed"===e.state?"Connection failed":"Connection lost"}),this.stopStatsPolling())}}),this.whipClient.on("error",e=>{this.isStoppingIntentionally||this.emit("error",{error:e.message,recoverable:!1})}))}async startStreaming(){if(!this.outputStream)throw new Error("No media source available. Add a camera or screen share first.");this.log("Starting streaming"),this.currentEndpointIndex=0,this.setState("connecting");try{if(this.whipClient=new Re({whipUrl:this.getCurrentWhipUrl(),iceServers:this.config.iceServers,debug:this.config.debug}),this.setupWhipClientHandlers(),this.config.audioMixing&&await this.audioMixer.resume(),this.useWebCodecs&&rt()){this.log("Initializing WebCodecs encoder (Path C: RTCRtpScriptTransform)");try{this.encoderManager=new et({debug:this.config.debug}),this.encoderManager.on("error",e=>{this.emit("error",{error:e.message,recoverable:!e.fatal}),e.fatal&&"streaming"===this.state&&(this.log("Fatal encoder error, reconnecting without WebCodecs"),this.handleEncoderFailure())}),this.encoderManager.on("stats",e=>{this.log("Encoder stats",e)});const e=function(e="broadcast",t){const r=Ze[e],i=Ye,s=t?.video?.width??r.width,o=t?.video?.height??r.height,n=t?.video?.framerate??r.framerate,a=function(e,t,r){const i=e*t;return i>=8294400?r>30?"avc1.640034":"avc1.640033":i>=3686400?r>30?"avc1.640033":"avc1.640032":i>=2073600?r>30?"avc1.640032":"avc1.64002a":i>=921600?r>30?"avc1.64002a":"avc1.640028":"avc1.64001f"}(s,o,n);return{video:{...r,codec:a,width:s,height:o,framerate:n,...void 0!==t?.video?.bitrate&&{bitrate:t.video.bitrate}},audio:{...i,...void 0!==t?.audio?.bitrate&&{bitrate:t.audio.bitrate},...void 0!==t?.audio?.sampleRate&&{sampleRate:t.audio.sampleRate},...void 0!==t?.audio?.numberOfChannels&&{numberOfChannels:t.audio.numberOfChannels}}}}("auto"===this.currentProfile?"broadcast":this.currentProfile,this.encoderOverrides);this.log("Encoder config with overrides:",e),await this.encoderManager.initialize(this.outputStream,e),this.log("WebCodecs encoder initialized")}catch(e){this.log("WebCodecs encoder initialization failed, falling back to browser encoding",e),this.encoderManager&&(this.encoderManager.destroy(),this.encoderManager=null)}}else this.useWebCodecs&&this.log("WebCodecs requested but RTCRtpScriptTransform not supported, using browser encoding");await this.whipClient.connect(this.outputStream)}catch(e){throw this.encoderManager&&(this.encoderManager.destroy(),this.encoderManager=null),this.setState("error",{error:e instanceof Error?e.message:String(e)}),e}}async handleEncoderFailure(){if(this.log("Handling encoder failure - reconnecting without WebCodecs"),this.setState("reconnecting"),this.stopStatsPolling(),this.encoderManager&&(this.encoderManager.destroy(),this.encoderManager=null),this.useWebCodecs=!1,this.whipClient)try{await this.whipClient.disconnect()}finally{this.whipClient.destroy(),this.whipClient=null}if(this.outputStream)try{this.whipClient=new Re({whipUrl:this.getNextWhipUrl(),iceServers:this.config.iceServers,debug:this.config.debug}),this.setupWhipClientHandlers(),await this.whipClient.connect(this.outputStream)}catch(e){this.setState("error",{error:`Reconnection failed: ${e instanceof Error?e.message:String(e)}`})}else this.setState("error",{error:"No output stream available for reconnection"})}handleConnectionLost(){this.log("Connection lost, starting reconnection"),this.setState("reconnecting"),this.stopStatsPolling(),this.reconnectionManager.start(async()=>{if(this.whipClient)try{await this.whipClient.disconnect()}finally{this.whipClient.destroy(),this.whipClient=null}if(!this.outputStream)throw new Error("No output stream available");this.whipClient=new Re({whipUrl:this.getNextWhipUrl(),iceServers:this.config.iceServers,debug:this.config.debug}),this.setupWhipClientHandlers(),await new Promise((e,t)=>{const r=setTimeout(()=>{t(new Error("Connection timeout"))},3e4),i=s=>{"connected"===s.state?(clearTimeout(r),this.whipClient?.off("stateChange",i),e()):"failed"===s.state&&(clearTimeout(r),this.whipClient?.off("stateChange",i),t(new Error("Connection failed")))};this.whipClient.on("stateChange",i),this.whipClient.connect(this.outputStream).catch(t)})})}async stopStreaming(){this.log("Stopping streaming"),this.isStoppingIntentionally=!0;try{this.stopStatsPolling(),this.reconnectionManager.stop(),this.encoderManager&&(await this.encoderManager.stop(),this.encoderManager.destroy(),this.encoderManager=null),this.whipClient&&(await this.whipClient.disconnect(),this.whipClient.destroy(),this.whipClient=null),this.sources.size>0?this.setState("capturing"):this.setState("idle"),this.stateContext={...this.stateContext,connectionState:"disconnected"}}finally{this.isStoppingIntentionally=!1}}async switchVideoDevice(e){const t=await this.deviceManager.replaceVideoTrack(e,this.currentProfile);if(t&&this.whipClient){const e=this.whipClient.getPeerConnection();if(e){const r=e.getSenders().find(e=>"video"===e.track?.kind);r&&await r.replaceTrack(t)}}}async switchAudioDevice(e){const t=await this.deviceManager.replaceAudioTrack(e,this.currentProfile);if(t&&this.whipClient){const e=this.whipClient.getPeerConnection();if(e){const r=e.getSenders().find(e=>"audio"===e.track?.kind);r&&await r.replaceTrack(t)}}}startStatsPolling(){this.statsInterval||(this.statsInterval=setInterval(async()=>{if(!this.statsInFlight){this.statsInFlight=!0;try{const e=await this.getStats();e&&(this.lastStats=e,this.emit("statsUpdate",e))}finally{this.statsInFlight=!1}}},1e3))}stopStatsPolling(){this.statsInterval&&(clearInterval(this.statsInterval),this.statsInterval=null)}async getStats(){if(!this.whipClient)return null;const e=await this.whipClient.getStats();if(!e)return null;const t={video:{bytesSent:0,packetsSent:0,packetsLost:0,framesEncoded:0,framesPerSecond:0,bitrate:0},audio:{bytesSent:0,packetsSent:0,packetsLost:0,bitrate:0},connection:{rtt:0,state:this.whipClient.getPeerConnection()?.connectionState??"new",iceState:this.whipClient.getPeerConnection()?.iceConnectionState??"new"},timestamp:Date.now()},r=this.lastStats;return e.forEach(e=>{if("outbound-rtp"===e.type){const i=e;if("video"===i.kind){if(t.video.bytesSent=i.bytesSent??0,t.video.packetsSent=i.packetsSent??0,t.video.framesEncoded=i.framesEncoded??0,t.video.framesPerSecond=i.framesPerSecond??0,r){const e=(t.timestamp-r.timestamp)/1e3,i=t.video.bytesSent-r.video.bytesSent;t.video.bitrate=Math.round(8*i/e)}}else if("audio"===i.kind&&(t.audio.bytesSent=i.bytesSent??0,t.audio.packetsSent=i.packetsSent??0,r)){const e=(t.timestamp-r.timestamp)/1e3,i=t.audio.bytesSent-r.audio.bytesSent;t.audio.bitrate=Math.round(8*i/e)}}else"candidate-pair"===e.type&&"succeeded"===e.state&&(t.connection.rtt=e.currentRoundTripTime??0)}),t}async enableCompositor(e){if(this.log("enableCompositor called",{alreadyEnabled:!!this.sceneManager}),this.sceneManager)return void this.log("Compositor already enabled");const t={...Me,...this.config.compositor,...e};this.log("Creating SceneManager with config",t),this.sceneManager=new Je(t),this.compositorBaseConfig=t;try{this.log("Initializing SceneManager..."),await this.sceneManager.initialize(),this.log("SceneManager initialized successfully")}catch(e){this.sceneManager=null;const t=e instanceof Error?e.message:String(e);throw this.log("Compositor initialization failed:",t),new Error(`Compositor initialization failed: ${t}`)}if(!this.sceneManager)throw this.log("ERROR: SceneManager was unexpectedly null after initialization"),new Error("SceneManager was unexpectedly null after initialization");this.log("SceneManager is valid, getting active scene...");const r=this.sceneManager.getActiveScene();this.log("Compositor active scene:",r?.id??"none");for(const[e,t]of this.sources){if(!this.sceneManager)break;this.sceneManager.bindSource(e,t.stream),r&&this.sceneManager.addLayer(r.id,e)}this.sceneManager&&this.sceneManager.on("error",e=>{this.emit("error",{error:e.message,recoverable:!0})}),this.log("Compositor enabled",t),this.updateOutputStreamFromSources()}disableCompositor(){this.sceneManager&&(this.sceneManager.destroy(),this.sceneManager=null,this.log("Compositor disabled"),this.updateOutputStreamFromSources())}getSceneManager(){return this.sceneManager}isCompositorEnabled(){return null!==this.sceneManager&&this.sceneManager.isInitialized()}getState(){return this.state}getStateContext(){return{...this.stateContext}}getMediaStream(){return this.outputStream}getSources(){return Array.from(this.sources.values())}getSource(e){return this.sources.get(e)}getQualityProfile(){return this.currentProfile}getDeviceManager(){return this.deviceManager}getScreenCapture(){return this.screenCapture}getAudioMixer(){return this.audioMixer}getReconnectionManager(){return this.reconnectionManager}async getDevices(){return this.deviceManager.enumerateDevices()}isStreaming(){return"streaming"===this.state}isCapturing(){return"capturing"===this.state||"streaming"===this.state}isReconnecting(){return"reconnecting"===this.state}setUseWebCodecs(e){"streaming"!==this.state?(this.useWebCodecs=e,this.log("useWebCodecs set to",e)):this.log("Cannot change useWebCodecs while streaming")}setEncoderOverrides(e){if("streaming"!==this.state){if(this.encoderOverrides=e,this.log("Encoder overrides set:",e),this.sceneManager){const t=this.compositorBaseConfig??this.sceneManager.getConfig(),r=e.video?.width??t.width,i=e.video?.height??t.height,s=e.video?.framerate??t.frameRate;this.sceneManager.updateOutputConfig({width:r,height:i,frameRate:s})&&this.updateOutputStreamFromSources()}}else this.log("Cannot change encoder overrides while streaming")}getEncoderOverrides(){return this.encoderOverrides}getUseWebCodecs(){return this.useWebCodecs}getEncoderManager(){return this.encoderManager}isWebCodecsActive(){return null!==this.encoderManager&&!0===this.whipClient?.hasEncoderTransform()}destroy(){this.log("Destroying IngestControllerV2"),this.stopStatsPolling(),this.reconnectionManager.destroy(),this.encoderManager&&(this.encoderManager.destroy(),this.encoderManager=null),this.whipClient&&(this.whipClient.destroy(),this.whipClient=null),this.sceneManager&&(this.sceneManager.destroy(),this.sceneManager=null);for(const e of Array.from(this.sources.keys()))this.removeSource(e);this.deviceManager.destroy(),this.screenCapture.destroy(),this.audioMixer.destroy(),this.removeAllListeners(),this.setState("destroyed")}}class nt{constructor(e,t="broadcast"){this.controller=null,this.unsubs=[],this.encoderStatsCleanup=null,this.host=e,e.addController(this);const r=tt();this.s={state:"idle",stateContext:{},isStreaming:!1,isCapturing:!1,isReconnecting:!1,error:null,mediaStream:null,sources:[],qualityProfile:t,reconnectionState:null,stats:null,useWebCodecs:"webcodecs"===r.recommended,isWebCodecsActive:!1,isWebCodecsAvailable:it(),encoderStats:null}}initialize(e){this.teardown();const t=new ot({...e,useWebCodecs:this.s.useWebCodecs});this.controller=t,this.subscribeToEvents(t)}hostConnected(){}hostDisconnected(){this.teardown()}teardown(){this.unsubs.forEach(e=>e()),this.unsubs=[],this.encoderStatsCleanup&&(this.encoderStatsCleanup(),this.encoderStatsCleanup=null),this.controller?.destroy(),this.controller=null}update(e){Object.assign(this.s,e),this.host.requestUpdate()}subscribeToEvents(e){const t=this.unsubs;t.push(e.on("stateChange",t=>{const r=t.state,i=t.context??{};this.update({state:r,stateContext:i,isStreaming:"streaming"===r,isCapturing:"capturing"===r||"streaming"===r,isReconnecting:"reconnecting"===r,mediaStream:e.getMediaStream(),sources:e.getSources(),reconnectionState:i.reconnection??this.s.reconnectionState}),this.dispatchEvent("fw-sc-state-change",{state:r,context:i})})),t.push(e.on("statsUpdate",e=>{this.update({stats:e})})),t.push(e.on("error",e=>{this.update({error:e.error}),this.dispatchEvent("fw-sc-error",{error:e.error})})),t.push(e.on("sourceAdded",()=>{this.update({sources:e.getSources(),mediaStream:e.getMediaStream()})})),t.push(e.on("sourceRemoved",()=>{this.update({sources:e.getSources(),mediaStream:e.getMediaStream()})})),t.push(e.on("sourceUpdated",()=>{this.update({sources:e.getSources(),mediaStream:e.getMediaStream()})})),t.push(e.on("qualityChanged",e=>{this.update({qualityProfile:e.profile})})),t.push(e.on("reconnectionAttempt",()=>{this.update({reconnectionState:e.getReconnectionManager().getState()})})),t.push(e.on("webCodecsActive",e=>{this.update({isWebCodecsActive:e.active}),e.active&&this.setupEncoderStatsListener()})),t.push(e.on("stateChange",t=>{"streaming"===t.state?setTimeout(()=>{this.update({isWebCodecsActive:e.isWebCodecsActive()}),e.isWebCodecsActive()&&!this.encoderStatsCleanup&&this.setupEncoderStatsListener()},200):"idle"!==t.state&&"capturing"!==t.state||(this.update({isWebCodecsActive:!1,encoderStats:null}),this.encoderStatsCleanup&&(this.encoderStatsCleanup(),this.encoderStatsCleanup=null))}))}setupEncoderStatsListener(){if(!this.controller)return;const e=this.controller.getEncoderManager();e&&(this.encoderStatsCleanup=e.on("stats",e=>{this.update({encoderStats:e})}))}dispatchEvent(e,t){this.host.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}async startCamera(e){if(!this.controller)throw new Error("Controller not initialized");return this.update({error:null}),this.controller.startCamera(e)}async startScreenShare(e){if(!this.controller)throw new Error("Controller not initialized");return this.update({error:null}),this.controller.startScreenShare(e)}addCustomSource(e,t){if(!this.controller)throw new Error("Controller not initialized");return this.controller.addCustomSource(e,t)}removeSource(e){this.controller?.removeSource(e)}async stopCapture(){await(this.controller?.stopCapture())}setSourceVolume(e,t){this.controller?.setSourceVolume(e,t)}setSourceMuted(e,t){this.controller?.setSourceMuted(e,t)}setSourceActive(e,t){this.controller?.setSourceActive(e,t)}setPrimaryVideoSource(e){this.controller?.setPrimaryVideoSource(e)}setMasterVolume(e){this.controller?.setMasterVolume(e)}getMasterVolume(){return this.controller?.getMasterVolume()??1}async setQualityProfile(e){await(this.controller?.setQualityProfile(e))}async startStreaming(){if(!this.controller)throw new Error("Controller not initialized");this.update({error:null}),await this.controller.startStreaming()}async stopStreaming(){await(this.controller?.stopStreaming())}async getDevices(){return this.controller?.getDevices()??[]}async switchVideoDevice(e){await(this.controller?.switchVideoDevice(e))}async switchAudioDevice(e){await(this.controller?.switchAudioDevice(e))}async getStats(){return this.controller?.getStats()??null}setUseWebCodecs(e){this.update({useWebCodecs:e}),this.controller?.setUseWebCodecs(e)}setEncoderOverrides(e){this.controller?.setEncoderOverrides(e)}getController(){return this.controller}}const at=[{id:"professional",label:"Professional",description:"1080p @ 8 Mbps"},{id:"broadcast",label:"Broadcast",description:"1080p @ 4.5 Mbps"},{id:"conference",label:"Conference",description:"720p @ 2.5 Mbps"}];e.FwStreamCrafter=class extends le{constructor(){super(),this.whipUrl="",this.gatewayUrl="",this.streamKey="",this.initialProfile="broadcast",this.autoStartCamera=!1,this.devMode=!1,this.debug=!1,this.enableCompositor=!1,this._showSettings=!1,this._showSources=!0,this._isAdvancedPanelOpen=!1,this.pc=new nt(this,this.initialProfile)}connectedCallback(){super.connectedCallback(),this._initController()}willUpdate(e){(e.has("whipUrl")||e.has("initialProfile")||e.has("debug"))&&this._initController()}updated(e){e.has("_showSources")||e.has("_showSettings"),this._syncVideoPreview()}_initController(){this.whipUrl&&(this.pc.initialize({whipUrl:this.whipUrl,profile:this.initialProfile,debug:this.debug,reconnection:{enabled:!0,maxAttempts:5},audioMixing:!0}),this.autoStartCamera&&"idle"===this.pc.s.state&&this.pc.startCamera().catch(console.error))}_syncVideoPreview(){const e=this._videoEl,t=this.pc.s.mediaStream;e&&t&&e.srcObject!==t?(e.srcObject=t,e.play().catch(()=>{})):e&&!t&&(e.srcObject=null)}async startCamera(e){return this.pc.startCamera(e)}async startScreenShare(e){return this.pc.startScreenShare(e)}async startStreaming(){return this.pc.startStreaming()}async stopStreaming(){return this.pc.stopStreaming()}async stopCapture(){return this.pc.stopCapture()}removeSource(e){this.pc.removeSource(e)}setSourceVolume(e,t){this.pc.setSourceVolume(e,t)}setSourceMuted(e,t){this.pc.setSourceMuted(e,t)}setPrimaryVideoSource(e){this.pc.setPrimaryVideoSource(e)}setMasterVolume(e){this.pc.setMasterVolume(e)}async setQualityProfile(e){return this.pc.setQualityProfile(e)}destroy(){this.pc.getController()?.destroy()}render(){const e=this.pc.s,t=function(e,t){if(t?.isReconnecting)return`Reconnecting (${t.attemptNumber}/5)...`;switch(e){case"idle":return"Idle";case"requesting_permissions":return"Permissions...";case"capturing":return"Ready";case"connecting":return"Connecting...";case"streaming":return"Live";case"reconnecting":return"Reconnecting...";case"error":return"Error";case"destroyed":return"Destroyed";default:return e}}(e.state,e.reconnectionState),r=(i=e.state,s=e.isReconnecting,"streaming"===i?"fw-sc-badge fw-sc-badge--live":s?"fw-sc-badge fw-sc-badge--connecting":"error"===i?"fw-sc-badge fw-sc-badge--error":"capturing"===i?"fw-sc-badge fw-sc-badge--ready":"fw-sc-badge fw-sc-badge--idle");var i,s;const o="destroyed"!==e.state&&"error"!==e.state,n=e.isCapturing&&!e.isStreaming&&!!this.whipUrl,a=e.sources.some(e=>"camera"===e.type);return q`
+      <div
+        class=${ye({root:!0,"fw-sc-root":!0,"fw-sc-root--devmode":this.devMode})}
+      >
+        <div class="main fw-sc-main">
+          <!-- Header -->
+          <div class="fw-sc-header">
+            <span class="fw-sc-header-title">StreamCrafter</span>
+            <div class="fw-sc-header-status">
+              <span class=${r}>${t}</span>
+            </div>
+          </div>
+
+          <!-- Content -->
+          <div class="fw-sc-content">
+            <div class="fw-sc-preview-wrapper">
+              <div class="fw-sc-preview">
+                <video playsinline muted autoplay aria-label="Stream preview"></video>
+
+                ${e.mediaStream?G:q`
+                      <div class="fw-sc-preview-placeholder">
+                        ${Se(48)}
+                        <span>Add a camera or screen to preview</span>
+                      </div>
+                    `}
+                ${"connecting"===e.state||"reconnecting"===e.state?q`
+                      <div class="fw-sc-status-overlay">
+                        <div class="fw-sc-status-spinner"></div>
+                        <span class="fw-sc-status-text">${t}</span>
+                      </div>
+                    `:G}
+                ${e.isStreaming?q`<div class="fw-sc-live-badge">Live</div>`:G}
+                ${this.enableCompositor?q` <fw-sc-compositor .ic=${this.pc}></fw-sc-compositor> `:G}
+              </div>
+            </div>
+
+            <!-- Sources Mixer -->
+            ${e.sources.length>0?q`
+                  <div
+                    class=${ye({"fw-sc-section":!0,"fw-sc-mixer":!0,"fw-sc-section--collapsed":!this._showSources})}
+                  >
+                    <div
+                      class="fw-sc-section-header"
+                      @click=${()=>{this._showSources=!this._showSources}}
+                    >
+                      <span>Mixer (${e.sources.length})</span>
+                      ${this._showSources?((e=14)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <polyline points="13 17 18 12 13 7" />
+    <polyline points="6 17 11 12 6 7" />
+  </svg>`)(14):((e=14)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <polyline points="11 17 6 12 11 7" />
+    <polyline points="18 17 13 12 18 7" />
+  </svg>`)(14)}
+                    </div>
+                    ${this._showSources?q`
+                          <div class="fw-sc-section-body--flush">
+                            <div class="fw-sc-sources">
+                              ${e.sources.map(e=>this._renderSourceRow(e))}
+                            </div>
+                          </div>
+                        `:G}
+                  </div>
+                `:G}
+          </div>
+
+          <!-- Error -->
+          ${e.error?q`
+                <div class="fw-sc-error">
+                  <div class="fw-sc-error-title">Error</div>
+                  <div class="fw-sc-error-message">${e.error}</div>
+                </div>
+              `:G}
+          ${this.whipUrl||e.error?G:q`
+                <div class="fw-sc-error" style="border-left-color: hsl(40 80% 65%)">
+                  <div class="fw-sc-error-title" style="color: hsl(40 80% 65%)">Warning</div>
+                  <div class="fw-sc-error-message">Configure WHIP endpoint to stream</div>
+                </div>
+              `}
+
+          <!-- Action Bar -->
+          <div class="fw-sc-actions">
+            <button
+              type="button"
+              class="fw-sc-action-secondary"
+              @click=${()=>this.pc.startCamera().catch(console.error)}
+              ?disabled=${!o||a}
+              title=${a?"Camera active":"Add Camera"}
+            >
+              ${Se(18)}
+            </button>
+            <button
+              type="button"
+              class="fw-sc-action-secondary"
+              @click=${()=>this.pc.startScreenShare({audio:!0}).catch(console.error)}
+              ?disabled=${!o}
+              title="Share Screen"
+            >
+              ${ke(18)}
+            </button>
+
+            <!-- Settings -->
+            <div style="position:relative">
+              <button
+                type="button"
+                class=${ye({"fw-sc-action-secondary":!0,"fw-sc-action-secondary--active":this._showSettings})}
+                @click=${()=>{this._showSettings=!this._showSettings}}
+                title="Settings"
+              >
+                ${((e=16)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="12" cy="12" r="3" />
+    <path
+      d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
+    />
+  </svg>`)(16)}
+              </button>
+              ${this._showSettings?this._renderSettingsPopup():G}
+            </div>
+
+            <!-- Go Live / Stop -->
+            ${e.isStreaming?q`
+                  <button
+                    type="button"
+                    class="fw-sc-action-primary fw-sc-action-stop"
+                    @click=${()=>this.pc.stopStreaming().catch(console.error)}
+                  >
+                    Stop Streaming
+                  </button>
+                `:q`
+                  <button
+                    type="button"
+                    class="fw-sc-action-primary"
+                    @click=${()=>this.pc.startStreaming().catch(console.error)}
+                    ?disabled=${!n}
+                  >
+                    ${"connecting"===e.state?"Connecting...":"Go Live"}
+                  </button>
+                `}
+          </div>
+        </div>
+
+        <!-- Advanced Panel -->
+        ${this.devMode&&this._isAdvancedPanelOpen?q`
+              <fw-sc-advanced
+                .ic=${this.pc}
+                @fw-close=${()=>{this._isAdvancedPanelOpen=!1}}
+              ></fw-sc-advanced>
+            `:G}
+      </div>
+    `}_renderSourceRow(e){const t=this.pc.s,r=e.stream.getVideoTracks().length>0;return q`
+      <div class=${ye({"fw-sc-source":!0})}>
+        <div class="fw-sc-source-icon">
+          ${"camera"===e.type?Se(16):ke(16)}
+        </div>
+        <div class="fw-sc-source-info">
+          <div class="fw-sc-source-label">
+            ${e.label}
+            ${e.primaryVideo&&!this.enableCompositor?q`<span class="fw-sc-primary-badge">PRIMARY</span>`:G}
+          </div>
+          <div class="fw-sc-source-type">${e.type}</div>
+        </div>
+        <div class="fw-sc-source-controls">
+          ${r&&!this.enableCompositor?q`
+                <button
+                  type="button"
+                  class=${ye({"fw-sc-icon-btn":!0,"fw-sc-icon-btn--primary":!!e.primaryVideo})}
+                  @click=${()=>this.pc.setPrimaryVideoSource(e.id)}
+                  ?disabled=${e.primaryVideo}
+                  title=${e.primaryVideo?"Primary video source":"Set as primary video"}
+                >
+                  ${$e(14)}
+                </button>
+              `:G}
+          <span class="fw-sc-volume-label">${Math.round(100*e.volume)}%</span>
+          <fw-sc-volume
+            .value=${e.volume}
+            @fw-sc-volume-change=${t=>this.pc.setSourceVolume(e.id,t.detail.value)}
+            compact
+          ></fw-sc-volume>
+          <button
+            type="button"
+            class=${ye({"fw-sc-icon-btn":!0,"fw-sc-icon-btn--active":e.muted})}
+            @click=${()=>this.pc.setSourceMuted(e.id,!e.muted)}
+            title=${e.muted?"Unmute":"Mute"}
+          >
+            ${e.muted?((e=16)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <line x1="1" y1="1" x2="23" y2="23" />
+    <path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6" />
+    <path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23" />
+    <line x1="12" y1="19" x2="12" y2="23" />
+    <line x1="8" y1="23" x2="16" y2="23" />
+  </svg>`)(14):((e=16)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+    <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+    <line x1="12" y1="19" x2="12" y2="23" />
+    <line x1="8" y1="23" x2="16" y2="23" />
+  </svg>`)(14)}
+          </button>
+          <button
+            type="button"
+            class="fw-sc-icon-btn fw-sc-icon-btn--destructive"
+            @click=${()=>this.pc.removeSource(e.id)}
+            ?disabled=${t.isStreaming}
+            title=${t.isStreaming?"Cannot remove source while streaming":"Remove source"}
+          >
+            ${Ce(14)}
+          </button>
+        </div>
+      </div>
+    `}_renderSettingsPopup(){const e=this.pc.s;return q`
+      <div
+        class="fw-sc-settings-popup"
+        style="position:absolute;bottom:100%;left:0;margin-bottom:8px;width:192px;background:#1a1b26;border:1px solid rgba(90,96,127,0.3);box-shadow:0 4px 12px rgba(0,0,0,0.4);border-radius:4px;overflow:hidden;z-index:50"
+      >
+        <div style="padding:8px;border-bottom:1px solid rgba(90,96,127,0.3)">
+          <div
+            style="font-size:10px;color:#565f89;text-transform:uppercase;font-weight:600;margin-bottom:4px;padding-left:4px"
+          >
+            Quality
+          </div>
+          <div style="display:flex;flex-direction:column;gap:2px">
+            ${at.map(t=>q`
+                <button
+                  type="button"
+                  @click=${()=>{e.isStreaming||(this.pc.setQualityProfile(t.id),this.devMode||(this._showSettings=!1))}}
+                  ?disabled=${e.isStreaming}
+                  style="width:100%;padding:6px 8px;text-align:left;font-size:12px;border-radius:4px;border:none;cursor:${e.isStreaming?"not-allowed":"pointer"};opacity:${e.isStreaming?"0.5":"1"};background:${e.qualityProfile===t.id?"rgba(122,162,247,0.2)":"transparent"};color:${e.qualityProfile===t.id?"#7aa2f7":"#a9b1d6"}"
+                >
+                  <div style="font-weight:500">${t.label}</div>
+                  <div style="font-size:10px;color:#565f89">${t.description}</div>
+                </button>
+              `)}
+          </div>
+        </div>
+        ${this.devMode?q`
+              <div style="padding:8px">
+                <div
+                  style="font-size:10px;color:#565f89;text-transform:uppercase;font-weight:600;margin-bottom:4px;padding-left:4px"
+                >
+                  Debug
+                </div>
+                <div
+                  style="display:flex;flex-direction:column;gap:4px;padding-left:4px;font-size:12px;font-family:ui-monospace,monospace"
+                >
+                  <div style="display:flex;justify-content:space-between">
+                    <span style="color:#565f89">State</span
+                    ><span style="color:#c0caf5">${e.state}</span>
+                  </div>
+                  <div style="display:flex;justify-content:space-between">
+                    <span style="color:#565f89">WHIP</span
+                    ><span style="color:${this.whipUrl?"#9ece6a":"#f7768e"}"
+                      >${this.whipUrl?"OK":"Not set"}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            `:G}
+      </div>
+    `}},e.FwStreamCrafter.styles=[be,xe,c`
+      :host {
+        display: block;
+      }
+      .root {
+        display: flex;
+        height: 100%;
+      }
+      .main {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-width: 0;
+      }
+    `],r([ge({type:String,attribute:"whip-url"})],e.FwStreamCrafter.prototype,"whipUrl",void 0),r([ge({type:String,attribute:"gateway-url"})],e.FwStreamCrafter.prototype,"gatewayUrl",void 0),r([ge({type:String,attribute:"stream-key"})],e.FwStreamCrafter.prototype,"streamKey",void 0),r([ge({type:String,attribute:"initial-profile"})],e.FwStreamCrafter.prototype,"initialProfile",void 0),r([ge({type:Boolean,attribute:"auto-start-camera"})],e.FwStreamCrafter.prototype,"autoStartCamera",void 0),r([ge({type:Boolean,attribute:"dev-mode"})],e.FwStreamCrafter.prototype,"devMode",void 0),r([ge({type:Boolean})],e.FwStreamCrafter.prototype,"debug",void 0),r([ge({type:Boolean,attribute:"enable-compositor"})],e.FwStreamCrafter.prototype,"enableCompositor",void 0),r([fe()],e.FwStreamCrafter.prototype,"_showSettings",void 0),r([fe()],e.FwStreamCrafter.prototype,"_showSources",void 0),r([fe()],e.FwStreamCrafter.prototype,"_isAdvancedPanelOpen",void 0),r([me(".fw-sc-preview video")],e.FwStreamCrafter.prototype,"_videoEl",void 0),e.FwStreamCrafter=r([he("fw-streamcrafter")],e.FwStreamCrafter);const ct=[{mode:"solo",label:"Solo",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="10" height="10" rx="1" />
+  </svg>`,minSources:1},{mode:"pip-br",label:"PiP ↘",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="10" height="10" rx="1" fill-opacity="0.3" />
+    <rect x="6.5" y="6.5" width="4" height="3" rx="0.5" />
+  </svg>`,minSources:2},{mode:"pip-bl",label:"PiP ↙",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="10" height="10" rx="1" fill-opacity="0.3" />
+    <rect x="1.5" y="6.5" width="4" height="3" rx="0.5" />
+  </svg>`,minSources:2},{mode:"pip-tr",label:"PiP ↗",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="10" height="10" rx="1" fill-opacity="0.3" />
+    <rect x="6.5" y="2.5" width="4" height="3" rx="0.5" />
+  </svg>`,minSources:2},{mode:"pip-tl",label:"PiP ↖",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="10" height="10" rx="1" fill-opacity="0.3" />
+    <rect x="1.5" y="2.5" width="4" height="3" rx="0.5" />
+  </svg>`,minSources:2},{mode:"split-h",label:"Split ⬌",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="4.5" height="10" rx="1" />
+    <rect x="6.5" y="1" width="4.5" height="10" rx="1" />
+  </svg>`,minSources:2},{mode:"split-v",label:"Split ⬍",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="10" height="4.5" rx="1" />
+    <rect x="1" y="6.5" width="10" height="4.5" rx="1" />
+  </svg>`,minSources:2},{mode:"focus-l",label:"Focus ◀",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="7" height="10" rx="1" />
+    <rect x="8.5" y="1" width="2.5" height="10" rx="1" fill-opacity="0.5" />
+  </svg>`,minSources:2},{mode:"focus-r",label:"Focus ▶",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="2.5" height="10" rx="1" fill-opacity="0.5" />
+    <rect x="4" y="1" width="7" height="10" rx="1" />
+  </svg>`,minSources:2},{mode:"pip-dual-br",label:"Main+2 PiP",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="10" height="10" rx="1" fill-opacity="0.3" />
+    <rect x="7" y="4" width="3.5" height="2.5" rx="0.5" />
+    <rect x="7" y="7" width="3.5" height="2.5" rx="0.5" />
+  </svg>`,minSources:3},{mode:"split-pip-r",label:"Split+PiP",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="4.5" height="10" rx="1" />
+    <rect x="6.5" y="1" width="4.5" height="10" rx="1" fill-opacity="0.5" />
+    <rect x="7.5" y="7" width="2.5" height="2.5" rx="0.5" />
+  </svg>`,minSources:3},{mode:"featured",label:"Featured",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="10" height="7.5" rx="1" />
+    <rect x="1" y="9" width="3" height="2" rx="0.5" fill-opacity="0.5" />
+    <rect x="4.5" y="9" width="3" height="2" rx="0.5" fill-opacity="0.5" />
+    <rect x="8" y="9" width="3" height="2" rx="0.5" fill-opacity="0.5" />
+  </svg>`,minSources:3},{mode:"featured-r",label:"Featured ▶",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="8" height="10" rx="1" />
+    <rect x="9.5" y="1" width="1.5" height="3" rx="0.5" fill-opacity="0.5" />
+    <rect x="9.5" y="4.5" width="1.5" height="3" rx="0.5" fill-opacity="0.5" />
+    <rect x="9.5" y="8" width="1.5" height="3" rx="0.5" fill-opacity="0.5" />
+  </svg>`,minSources:3},{mode:"grid",label:"Grid",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="4.5" height="4.5" rx="1" />
+    <rect x="6.5" y="1" width="4.5" height="4.5" rx="1" />
+    <rect x="1" y="6.5" width="4.5" height="4.5" rx="1" />
+    <rect x="6.5" y="6.5" width="4.5" height="4.5" rx="1" />
+  </svg>`,minSources:2},{mode:"stack",label:"Stack",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="10" height="2.8" rx="0.5" />
+    <rect x="1" y="4.6" width="10" height="2.8" rx="0.5" />
+    <rect x="1" y="8.2" width="10" height="2.8" rx="0.5" />
+  </svg>`,minSources:2}],lt=[{mode:"letterbox",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="3" width="10" height="6" rx="1" />
+    <rect x="0" y="1" width="12" height="1.5" fill-opacity="0.3" />
+    <rect x="0" y="9.5" width="12" height="1.5" fill-opacity="0.3" />
+  </svg>`,label:"Letterbox (fit)"},{mode:"crop",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="0" y="0" width="12" height="12" rx="1" />
+    <path
+      d="M2 0v2H0v1h3V0H2zM10 0v3h2V2h-2V0H9v3h3V2h-2V0h1zM0 9v1h2v2h1V9H0zM12 9H9v3h1v-2h2v-1z"
+      fill-opacity="0.5"
+    />
+  </svg>`,label:"Crop (fill)"},{mode:"stretch",icon:()=>q`<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+    <rect x="1" y="1" width="10" height="10" rx="1" fill-opacity="0.3" />
+    <path
+      d="M3 5.5h6M3 5l-1.5 1L3 7M9 5l1.5 1L9 7M5.5 3v6M5 3L6 1.5 7 3M5 9l1 1.5 1-1.5"
+      stroke="currentColor"
+      stroke-width="1"
+      fill="none"
+    />
+  </svg>`,label:"Stretch"}];let dt=class extends le{constructor(){super(...arguments),this._tooltipText="",this._tooltipTarget=null}render(){const e=this.ic.s.sources.length,t=ct.filter(t=>function(e,t){const r=Le.find(t=>t.mode===e);return!!r&&t>=r.minSources&&t<=r.maxSources}(t.mode,e));return q`
+      <div class="fw-sc-layout-overlay">
+        <div class="fw-sc-layout-bar">
+          <div class="fw-sc-layout-section">
+            <span class="fw-sc-layout-label">Layout</span>
+            <div class="fw-sc-layout-icons">
+              ${t.map(e=>q`
+                  <button
+                    type="button"
+                    class="fw-sc-layout-icon"
+                    @click=${t=>{t.stopPropagation(),this._handleLayoutSelect(e.mode)}}
+                    title=${e.label}
+                  >
+                    ${e.icon()}
+                  </button>
+                `)}
+            </div>
+          </div>
+          <div class="fw-sc-layout-separator"></div>
+          <div class="fw-sc-layout-section">
+            <span class="fw-sc-layout-label">Display</span>
+            <div class="fw-sc-scaling-icons">
+              ${lt.map(e=>q`
+                  <button
+                    type="button"
+                    class="fw-sc-layout-icon"
+                    @click=${e=>{e.stopPropagation()}}
+                    title=${e.label}
+                  >
+                    ${e.icon()}
+                  </button>
+                `)}
+            </div>
+          </div>
+        </div>
+      </div>
+    `}_handleLayoutSelect(e){this.dispatchEvent(new CustomEvent("fw-sc-layout-select",{detail:{mode:e},bubbles:!0,composed:!0}))}};dt.styles=[be,xe,c`
+      :host {
+        display: contents;
+      }
+    `],r([ge({attribute:!1})],dt.prototype,"ic",void 0),r([fe()],dt.prototype,"_tooltipText",void 0),r([fe()],dt.prototype,"_tooltipTarget",void 0),dt=r([he("fw-sc-compositor")],dt);let ht=class extends le{constructor(){super(...arguments),this.scenes=[],this.activeSceneId=null,this.showTransitionControls=!0,this._selectedTransition="fade",this._transitionDuration=500,this._isTransitioning=!1}render(){return q`
+      <div class="fw-sc-scene-switcher">
+        <div class="fw-sc-scene-switcher-header">
+          <span class="fw-sc-scene-switcher-title">Scenes</span>
+          ${this.showTransitionControls?q`
+                <div class="fw-sc-transition-controls">
+                  <select
+                    class="fw-sc-transition-select"
+                    .value=${this._selectedTransition}
+                    @change=${e=>{this._selectedTransition=e.target.value}}
+                  >
+                    <option value="cut">Cut</option>
+                    <option value="fade">Fade</option>
+                    <option value="slide-left">Slide Left</option>
+                    <option value="slide-right">Slide Right</option>
+                    <option value="slide-up">Slide Up</option>
+                    <option value="slide-down">Slide Down</option>
+                  </select>
+                  <input
+                    type="number"
+                    class="fw-sc-transition-duration"
+                    .value=${String(this._transitionDuration)}
+                    @change=${e=>{this._transitionDuration=Number(e.target.value)}}
+                    min="0"
+                    max="3000"
+                    step="100"
+                    title="Transition duration (ms)"
+                  />
+                  <span class="fw-sc-transition-unit">ms</span>
+                </div>
+              `:G}
+        </div>
+
+        <div class="fw-sc-scene-list">
+          ${this.scenes.map(e=>q`
+              <div
+                class=${ye({"fw-sc-scene-item":!0,"fw-sc-scene-item--active":e.id===this.activeSceneId,"fw-sc-scene-item--transitioning":this._isTransitioning})}
+                @click=${()=>this._handleSceneClick(e.id)}
+                style="background-color:${e.backgroundColor}"
+              >
+                <span class="fw-sc-scene-name">${e.name}</span>
+                <span class="fw-sc-scene-layer-count">${e.layers.length} layers</span>
+                ${this.scenes.length>1&&e.id!==this.activeSceneId?q`
+                      <button
+                        class="fw-sc-scene-delete"
+                        @click=${t=>{t.stopPropagation(),this._handleDelete(e.id)}}
+                        title="Delete scene"
+                      >
+                        ×
+                      </button>
+                    `:G}
+              </div>
+            `)}
+
+          <button
+            class="fw-sc-scene-add"
+            @click=${()=>this.dispatchEvent(new CustomEvent("fw-sc-scene-create",{bubbles:!0,composed:!0}))}
+            title="Create new scene"
+          >
+            +
+          </button>
+        </div>
+      </div>
+    `}async _handleSceneClick(e){if(e!==this.activeSceneId&&!this._isTransitioning){this._isTransitioning=!0;try{this.dispatchEvent(new CustomEvent("fw-sc-scene-select",{detail:{sceneId:e,transition:{type:this._selectedTransition,durationMs:this._transitionDuration,easing:"ease-in-out"}},bubbles:!0,composed:!0}))}finally{this._isTransitioning=!1}}}_handleDelete(e){this.scenes.length<=1||this.dispatchEvent(new CustomEvent("fw-sc-scene-delete",{detail:{sceneId:e},bubbles:!0,composed:!0}))}};ht.styles=[be,xe,c`
+      :host {
+        display: block;
+      }
+    `],r([ge({attribute:!1})],ht.prototype,"scenes",void 0),r([ge({type:String,attribute:"active-scene-id"})],ht.prototype,"activeSceneId",void 0),r([ge({type:Boolean,attribute:"show-transition-controls"})],ht.prototype,"showTransitionControls",void 0),r([fe()],ht.prototype,"_selectedTransition",void 0),r([fe()],ht.prototype,"_transitionDuration",void 0),r([fe()],ht.prototype,"_isTransitioning",void 0),ht=r([he("fw-sc-scene-switcher")],ht);let ut=class extends le{constructor(){super(...arguments),this.layers=[],this.sources=[],this.selectedLayerId=null,this._draggedId=null,this._dragOverId=null,this._editingLayerId=null}get _sortedLayers(){return[...this.layers].sort((e,t)=>t.zIndex-e.zIndex)}_getSourceLabel(e){const t=this.sources.find(t=>t.id===e);return t?.label||e}_getSourceIcon(e){const t=this.sources.find(t=>t.id===e);switch(t?.type){case"camera":return Se(14);case"screen":return ke(14);default:return $e(14)}}render(){const e=this._sortedLayers;return q`
+      <div class="fw-sc-layer-list">
+        <div class="fw-sc-layer-list-header">
+          <span class="fw-sc-layer-list-title">Layers</span>
+          <span class="fw-sc-layer-count">${this.layers.length}</span>
+        </div>
+
+        <div class="fw-sc-layer-items">
+          ${0===e.length?q` <div class="fw-sc-layer-empty">No layers. Add a source to get started.</div> `:e.map((t,r)=>q`
+                  <div
+                    class=${ye({"fw-sc-layer-item":!0,"fw-sc-layer-item--selected":t.id===this.selectedLayerId,"fw-sc-layer-item--dragging":t.id===this._draggedId,"fw-sc-layer-item--drag-over":t.id===this._dragOverId,"fw-sc-layer-item--hidden":!t.visible})}
+                    draggable="true"
+                    @dragstart=${e=>this._handleDragStart(e,t.id)}
+                    @dragover=${e=>this._handleDragOver(e,t.id)}
+                    @dragleave=${()=>{this._dragOverId=null}}
+                    @drop=${e=>this._handleDrop(e,t.id)}
+                    @dragend=${()=>{this._draggedId=null,this._dragOverId=null}}
+                    @click=${()=>this._dispatch("fw-sc-layer-select",{layerId:t.id===this.selectedLayerId?null:t.id})}
+                  >
+                    <button
+                      class=${ye({"fw-sc-layer-visibility":!0,"fw-sc-layer-visibility--visible":t.visible})}
+                      @click=${e=>{e.stopPropagation(),this._dispatch("fw-sc-visibility-toggle",{layerId:t.id,visible:!t.visible})}}
+                      title=${t.visible?"Hide layer":"Show layer"}
+                    >
+                      ${t.visible?((e=14)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>`)(14):((e=14)=>q` <svg
+    width="${e}"
+    height="${e}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path
+      d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+    />
+    <line x1="1" y1="1" x2="23" y2="23" />
+  </svg>`)(14)}
+                    </button>
+                    <span class="fw-sc-layer-icon">${this._getSourceIcon(t.sourceId)}</span>
+                    <span class="fw-sc-layer-name">${this._getSourceLabel(t.sourceId)}</span>
+
+                    ${this._editingLayerId===t.id?q`
+                          <div class="fw-sc-layer-opacity">
+                            <input
+                              type="range"
+                              min="0"
+                              max="1"
+                              step="0.1"
+                              .value=${String(t.transform.opacity)}
+                              @input=${e=>this._dispatch("fw-sc-transform-edit",{layerId:t.id,transform:{opacity:Number(e.target.value)}})}
+                              @click=${e=>e.stopPropagation()}
+                            />
+                            <span>${Math.round(100*t.transform.opacity)}%</span>
+                          </div>
+                        `:G}
+
+                    <div class="fw-sc-layer-controls">
+                      <button
+                        class="fw-sc-layer-btn"
+                        @click=${e=>{e.stopPropagation(),this._moveUp(t.id)}}
+                        ?disabled=${0===r}
+                        title="Move up"
+                      >
+                        ↑
+                      </button>
+                      <button
+                        class="fw-sc-layer-btn"
+                        @click=${e=>{e.stopPropagation(),this._moveDown(t.id)}}
+                        ?disabled=${r===e.length-1}
+                        title="Move down"
+                      >
+                        ↓
+                      </button>
+                      <button
+                        class=${ye({"fw-sc-layer-btn":!0,"fw-sc-layer-btn--active":this._editingLayerId===t.id})}
+                        @click=${e=>{e.stopPropagation(),this._editingLayerId=this._editingLayerId===t.id?null:t.id}}
+                        title="Edit opacity"
+                      >
+                        ⚙
+                      </button>
+                      <button
+                        class="fw-sc-layer-btn fw-sc-layer-btn--danger"
+                        @click=${e=>{e.stopPropagation(),this._dispatch("fw-sc-layer-remove",{layerId:t.id})}}
+                        title="Remove layer"
+                      >
+                        ×
+                      </button>
+                    </div>
+                  </div>
+                `)}
+        </div>
+      </div>
+    `}_dispatch(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}_handleDragStart(e,t){this._draggedId=t,e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t)}_handleDragOver(e,t){e.preventDefault(),e.dataTransfer.dropEffect="move",this._dragOverId=t}_handleDrop(e,t){if(e.preventDefault(),this._dragOverId=null,!this._draggedId||this._draggedId===t)return void(this._draggedId=null);const r=this._sortedLayers.map(e=>e.id),i=r.indexOf(this._draggedId),s=r.indexOf(t);if(-1===i||-1===s)return void(this._draggedId=null);const o=[...r];o.splice(i,1),o.splice(s,0,this._draggedId),this._dispatch("fw-sc-reorder",{layerIds:o}),this._draggedId=null}_moveUp(e){const t=this._sortedLayers.map(e=>e.id),r=t.indexOf(e);r<=0||([t[r-1],t[r]]=[t[r],t[r-1]],this._dispatch("fw-sc-reorder",{layerIds:t}))}_moveDown(e){const t=this._sortedLayers.map(e=>e.id),r=t.indexOf(e);r>=t.length-1||([t[r],t[r+1]]=[t[r+1],t[r]],this._dispatch("fw-sc-reorder",{layerIds:t}))}};ut.styles=[be,xe,c`
+      :host {
+        display: block;
+      }
+    `],r([ge({attribute:!1})],ut.prototype,"layers",void 0),r([ge({attribute:!1})],ut.prototype,"sources",void 0),r([ge({type:String,attribute:"selected-layer-id"})],ut.prototype,"selectedLayerId",void 0),r([fe()],ut.prototype,"_draggedId",void 0),r([fe()],ut.prototype,"_dragOverId",void 0),r([fe()],ut.prototype,"_editingLayerId",void 0),ut=r([he("fw-sc-layer-list")],ut);let pt=class extends le{constructor(){super(...arguments),this.value=1,this.min=0,this.max=2,this.snapThreshold=.05,this.compact=!1,this._isDragging=!1,this._popupPosition=0}get _displayValue(){return Math.round(100*this.value)}get _isBoost(){return this.value>1}get _isDefault(){return 1===this.value}get _accentColor(){return this._isBoost?"#e0af68":this._isDefault?"#9ece6a":"#7aa2f7"}_handleChange(e){let t=parseInt(e.target.value,10)/100;Math.abs(t-1)<=this.snapThreshold&&(t=1),this.dispatchEvent(new CustomEvent("fw-sc-volume-change",{detail:{value:t},bubbles:!0,composed:!0})),this._updatePopupPosition(t)}_handleMouseDown(){this._isDragging=!0,this._updatePopupPosition(this.value)}_handleMouseUp(){this._isDragging=!1}_updatePopupPosition(e){if(this._slider){const t=this._slider.getBoundingClientRect(),r=(e-this.min)/(this.max-this.min);this._popupPosition=r*t.width}}render(){const e=1/this.max*100+"%",t=this._isDefault?"#9ece6a":"rgba(158, 206, 106, 0.3)";return q`
+      ${this._isDragging?q`
+            <div
+              class="popup"
+              style="left:${this._popupPosition}px;background:${this._accentColor}"
+            >
+              ${this._displayValue}%${this._isDefault?" (default)":""}
+              <div class="popup-arrow" style="border-top:6px solid ${this._accentColor}"></div>
+            </div>
+          `:""}
+      <div class="track">
+        <div class="marker" style="left:${e};background:${t}"></div>
+        <input
+          type="range"
+          .min=${String(100*this.min)}
+          .max=${String(100*this.max)}
+          .value=${String(Math.round(100*this.value))}
+          @input=${this._handleChange}
+          @mousedown=${this._handleMouseDown}
+          @mouseup=${this._handleMouseUp}
+          @mouseleave=${this._handleMouseUp}
+          @touchstart=${this._handleMouseDown}
+          @touchend=${this._handleMouseUp}
+          style="accent-color:${this._accentColor}"
+        />
+      </div>
+    `}};pt.styles=[be,c`
+      :host {
+        display: inline-flex;
+        position: relative;
+        flex: 1;
+      }
+      :host([compact]) {
+        min-width: 60px;
+      }
+      :host(:not([compact])) {
+        min-width: 100px;
+      }
+      .track {
+        position: relative;
+        width: 100%;
+      }
+      .marker {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        border-radius: 1px;
+        z-index: 1;
+        pointer-events: none;
+        transform: translateX(-50%);
+      }
+      input[type="range"] {
+        width: 100%;
+        height: 6px;
+        border-radius: 3px;
+        cursor: pointer;
+      }
+      .popup {
+        position: absolute;
+        bottom: 100%;
+        transform: translateX(-50%);
+        margin-bottom: 8px;
+        padding: 4px 8px;
+        color: #1a1b26;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        font-family: monospace;
+        white-space: nowrap;
+        pointer-events: none;
+        z-index: 100;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+      }
+      .popup-arrow {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+      }
+    `],r([ge({type:Number})],pt.prototype,"value",void 0),r([ge({type:Number})],pt.prototype,"min",void 0),r([ge({type:Number})],pt.prototype,"max",void 0),r([ge({type:Number,attribute:"snap-threshold"})],pt.prototype,"snapThreshold",void 0),r([ge({type:Boolean})],pt.prototype,"compact",void 0),r([fe()],pt.prototype,"_isDragging",void 0),r([fe()],pt.prototype,"_popupPosition",void 0),r([me("input[type=range]")],pt.prototype,"_slider",void 0),pt=r([he("fw-sc-volume")],pt);let gt=class extends le{constructor(){super(...arguments),this._activeTab="stats"}render(){return q`
+      <div class="panel">
+        <div class="header">
+          <div class="tabs">
+            <button
+              class=${ye({tab:!0,"tab--active":"stats"===this._activeTab})}
+              @click=${()=>{this._activeTab="stats"}}
+            >
+              Stats
+            </button>
+            <button
+              class=${ye({tab:!0,"tab--active":"info"===this._activeTab})}
+              @click=${()=>{this._activeTab="info"}}
+            >
+              Info
+            </button>
+          </div>
+          <button
+            class="close"
+            @click=${()=>this.dispatchEvent(new CustomEvent("fw-close",{bubbles:!0,composed:!0}))}
+            aria-label="Close panel"
+          >
+            ${Ce(14)}
+          </button>
+        </div>
+        <div class="body">
+          ${"stats"===this._activeTab?this._renderStats():this._renderInfo()}
+        </div>
+      </div>
+    `}_renderStats(){const e=this.ic.s,t=e.stats;return q`
+      <div class="section">
+        <div class="label">Connection</div>
+        ${this._row("State",e.state)}
+        ${this._row("WebCodecs",e.isWebCodecsActive?"Active":e.useWebCodecs?"Pending":"Off")}
+      </div>
+      ${t?q`
+            <div class="section">
+              <div class="label">WebRTC Stats</div>
+              ${this._row("Video bitrate",t.video.bitrate?`${Math.round(t.video.bitrate/1e3)} kbps`:"—")}
+              ${this._row("Audio bitrate",t.audio.bitrate?`${Math.round(t.audio.bitrate/1e3)} kbps`:"—")}
+              ${this._row("RTT",t.connection.rtt?`${(1e3*t.connection.rtt).toFixed(0)} ms`:"—")}
+              ${this._row("FPS",t.video.framesPerSecond?String(t.video.framesPerSecond):"—")}
+              ${this._row("Packets sent",String(t.video.packetsSent))}
+              ${this._row("Packets lost",String(t.video.packetsLost))}
+            </div>
+          `:G}
+      ${e.encoderStats?q`
+            <div class="section">
+              <div class="label">Encoder</div>
+              ${this._row("Video frames",String(e.encoderStats.video.framesEncoded))}
+              ${this._row("Video pending",String(e.encoderStats.video.framesPending))}
+              ${this._row("Audio samples",String(e.encoderStats.audio.samplesEncoded))}
+            </div>
+          `:G}
+    `}_renderInfo(){const e=this.ic.s;return q`
+      <div class="section">
+        <div class="label">Configuration</div>
+        ${this._row("Profile",e.qualityProfile)} ${this._row("Sources",String(e.sources.length))}
+        ${this._row("WebCodecs Available",e.isWebCodecsAvailable?"Yes":"No")}
+      </div>
+      <div class="section">
+        <div class="label">Sources</div>
+        ${e.sources.map(e=>q`
+            ${this._row(e.label,`${e.type} ${e.muted?"(muted)":""}`)}
+          `)}
+      </div>
+    `}_row(e,t){return q`<div class="row">
+      <span class="row-label">${e}</span><span class="row-value">${t}</span>
+    </div>`}};function ft(e,t){customElements.get(e)||customElements.define(e,t)}return gt.styles=[be,xe,c`
+      :host {
+        display: block;
+      }
+      .panel {
+        width: 320px;
+        height: 100%;
+        border-left: 1px solid rgba(90, 96, 127, 0.3);
+        background: #1a1b26;
+        overflow: auto;
+        font-size: 0.75rem;
+        color: #a9b1d6;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem 0.75rem;
+        border-bottom: 1px solid rgba(90, 96, 127, 0.3);
+      }
+      .tabs {
+        display: flex;
+        gap: 0.5rem;
+      }
+      .tab {
+        padding: 0.25rem 0.5rem;
+        border: none;
+        background: none;
+        color: #565f89;
+        font-size: 0.6875rem;
+        font-weight: 600;
+        cursor: pointer;
+        border-radius: 0.25rem;
+      }
+      .tab--active {
+        color: #c0caf5;
+        background: rgba(90, 96, 127, 0.2);
+      }
+      .close {
+        display: flex;
+        background: none;
+        border: none;
+        color: #565f89;
+        cursor: pointer;
+        padding: 0;
+      }
+      .close:hover {
+        color: #c0caf5;
+      }
+      .body {
+        padding: 0.75rem;
+      }
+      .section {
+        margin-bottom: 0.75rem;
+      }
+      .label {
+        font-size: 0.625rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: #565f89;
+        margin-bottom: 0.375rem;
+      }
+      .row {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.125rem 0;
+      }
+      .row-label {
+        color: #565f89;
+      }
+      .row-value {
+        color: #c0caf5;
+        font-family: ui-monospace, monospace;
+        font-variant-numeric: tabular-nums;
+      }
+    `],r([ge({attribute:!1})],gt.prototype,"ic",void 0),r([fe()],gt.prototype,"_activeTab",void 0),gt=r([he("fw-sc-advanced")],gt),ft("fw-streamcrafter",e.FwStreamCrafter),ft("fw-sc-compositor",dt),ft("fw-sc-scene-switcher",ht),ft("fw-sc-layer-list",ut),ft("fw-sc-volume",pt),ft("fw-sc-advanced",gt),e.IngestControllerHost=nt,e}({});
+//# sourceMappingURL=fw-streamcrafter.iife.js.map