@twick/visualizer 0.15.3 → 0.15.5

package/dist/project.js

@@ -306,4 +306,4 @@ as children to the spline using the \`Knot\` component:
 \`\`\`
 `,r6=class extends d1{constructor(r){super(r),(r.children===void 0||!Array.isArray(r.children)||r.children.length<2)&&(r.points===void 0||r.points.length<2)&&r.spawner===void 0&&ce().warn({message:"Insufficient number of knots specified for spline. A spline needs at least two knots.",remarks:kK,inspect:this.key})}profile(){return bK(this.knots(),this.closed(),this.smoothness())}knots(){const r=this.points();return r?r.map(t=>{const e=new Z(L1(t));return{position:e,startHandle:e,endHandle:e,auto:{start:1,end:1}}}):this.children().filter(this.isKnot).map(t=>t.points())}childrenBBox(){const r=this.profile().segments.flatMap(t=>t.points);return ue.fromPoints(...r)}lineWidthCoefficient(){const r=this.lineJoin();let t=super.lineWidthCoefficient();if(r!=="miter")return t;const{minSin:e}=this.profile();return e>0&&(t=Math.max(t,.5/e)),t}desiredSize(){return this.getTightBBox().size}offsetComputedLayout(r){return r.position=r.position.sub(this.getTightBBox().center),r}getTightBBox(){const r=this.profile().segments.map(t=>t.getBBox());return ue.fromBBoxes(...r)}drawOverlay(r,t){const e=this.computedSize(),n=this.childrenBBox().transformCorners(t),s=e.mul(this.offset()).scale(.5),a=T1(s,t),o=this.profile().segments;r.lineWidth=1,r.strokeStyle="white",r.fillStyle="white";const l=new Path2D;for(let u=0;u<o.length;u++){const h=o[u],[T,f,d,p]=h.transformPoints(t);v1(l,T),h instanceof _i?kf(l,f,d,p):Rf(l,f,d)}r.stroke(l);for(let u=0;u<o.length;u++){const h=o[u];r.fillStyle="white";const[T,f,d,p]=h.transformPoints(t),m=new Path2D;r.globalAlpha=.5,v1(m,T),O1(m,f),h instanceof _i?(v1(m,d),O1(m,p),r.beginPath(),r.stroke(m)):(O1(m,d),r.beginPath(),r.stroke(m)),r.globalAlpha=1,r.lineWidth=2,v1(r,T),r.beginPath(),xi(r,T,4),r.closePath(),r.stroke(),r.fill(),u===o.length-1&&p!==void 0&&(v1(r,p),r.beginPath(),xi(r,p,4),r.closePath(),r.stroke(),r.fill()),r.fillStyle="black";for(const y of[f,d])y.magnitude>0&&(v1(r,y),r.beginPath(),xi(r,y,4),r.closePath(),r.fill(),r.stroke())}r.lineWidth=1,r.beginPath(),i6(r,a),r.stroke(),r.beginPath(),A2(r,n),r.closePath(),r.stroke()}isKnot(r){return r instanceof V0}};k([dt(.4),ot()],r6.prototype,"smoothness",2);k([dt(null),ot()],r6.prototype,"points",2);k([vt()],r6.prototype,"profile",1);k([vt()],r6.prototype,"knots",1);k([vt()],r6.prototype,"childrenBBox",1);k([vt()],r6.prototype,"getTightBBox",1);function nv(r){const t=new Map;let e;for(const[n,s]of r.entries()){const a=t.get(s.id)??[];t.has(s.id)||t.set(s.id,a),a.push({before:e,current:s,beforeIdIndex:e?t.get(e.id).length-1:-1,currentIndex:n}),e=s}return t}function RK(r,t){const e={inserted:[],deleted:[],transformed:[]},n=nv(r),s=nv(t);for(const[a,o]of n.entries()){const l=s.get(a);if(l){s.delete(a);for(let u=0;u<Math.max(o.length,l.length);u++){const h=u>=o.length,T=u>=l.length,f=h?o[o.length-1]:o[u],d=T?l[l.length-1]:l[u];e.transformed.push({insert:h,remove:T,from:f,to:d})}}else for(const u of o)e.deleted.push(u)}for(const a of s.values())for(const o of a)e.inserted.push(o);return e}function BK(r,t,e){function n(a){let o=-1;const l=a.before?r.findIndex(({id:u})=>{var h;return u===((h=a.before)==null?void 0:h.id)&&(o++,o===a.beforeIdIndex)}):0;r.splice(l+1,0,a.current)}const s={inserted:t.inserted.map(a=>({item:a,order:a.currentIndex}))};for(const a of t.transformed){if(!a.insert)continue;const o=a.from;a.from={...a.to,current:e(o.current)},s.inserted.push({item:a.from,order:a.to.currentIndex})}s.inserted.sort((a,o)=>a.order-o.order);for(const a of s.inserted)n(a.item);return s}var L4=class de extends r1{constructor(t){super(t),this.lastTweenTargetSrc=null,this.lastTweenTargetDocument=null,this.wrapper=new Kt({}),this.wrapper.children(this.documentNodes),this.wrapper.scale(this.wrapperScale),this.add(this.wrapper)}getChildrenById(t){return this.document().nodes.filter(e=>e.id===t).map(({shape:e})=>e)}desiredSize(){const t=this.document().size,e=this.calculateWrapperScale(t,super.desiredSize());return t.mul(e)}getCurrentSize(){return{x:this.width.isInitial()?null:this.width(),y:this.height.isInitial()?null:this.height()}}calculateWrapperScale(t,e){const n=new Z(1,1);return e.x&&e.y?(n.x=e.x/t.width,n.y=e.y/t.height):e.x&&!e.y?(n.x=e.x/t.width,n.y=n.x):!e.x&&e.y&&(n.y=e.y/t.height,n.x=n.y),n}buildDocument(t){return{size:t.size,nodes:t.nodes.map(e=>this.buildShape(e))}}buildShape({id:t,type:e,props:n,children:s}){return{id:t,shape:new e({children:s==null?void 0:s.map(a=>this.buildShape(a).shape),...this.processElementStyle(n)})}}parseSVG(t){return this.buildDocument(de.parseSVGData(t))}*generateTransformer(t,e,n,s){yield t.position(e.position(),n,s),yield t.scale(e.scale(),n,s),yield t.rotation(e.rotation(),n,s),t instanceof fn&&e instanceof fn&&t.data()!==e.data()&&(yield t.data(e.data(),n,s)),t instanceof Ht&&e instanceof Ht&&(yield t.size(e.size(),n,s)),t instanceof r1&&e instanceof r1&&(yield t.fill(e.fill(),n,s),yield t.stroke(e.stroke(),n,s),yield t.lineWidth(e.lineWidth(),n,s));const a=t.children(),o=e.children();for(let l=0;l<a.length;l++)yield*this.generateTransformer(a[l],o[l],n,s)}*tweenSvg(t,e,n){const s=F2(t)?t():t,a=this.parseSVG(s),o=this.document(),l=RK(o.nodes,a.nodes);this.lastTweenTargetSrc=s,this.lastTweenTargetDocument=a,BK(o.nodes,l,({shape:Q,...g})=>({...g,shape:Q.clone()})),this.wrapper.children(o.nodes.map(Q=>Q.shape));for(const Q of o.nodes)Q.shape.parent(this.wrapper);const u=.2,h=.8,T=.15,f=[],d=(h-u)*e,p=u*e;for(const Q of l.transformed)f.push(...this.generateTransformer(Q.from.current.shape,Q.to.current.shape,d,n));const m=this.width.isInitial(),y=this.height.isInitial();this.wrapper.scale(this.calculateWrapperScale(o.size,this.getCurrentSize()));const c=rr(e,Q=>{const g=n(Q),v=la(u,h,0,1,g),L=this.wrapper.scale();m&&this.width(Uu(v,o.size.x,a.size.x)*L.x),y&&this.height(Uu(v,o.size.y,a.size.y)*L.y);const x=la(0,u+T,1,0,g);for(const{current:S}of l.deleted)S.shape.opacity(x);const b=la(h-T,1,0,1,g);for(const{current:S}of l.inserted)S.shape.opacity(b)},()=>{this.wrapper.children(this.documentNodes),m&&this.width.reset(),y&&this.height.reset();for(const{current:Q}of l.deleted)Q.shape.dispose();for(const{from:Q}of l.transformed)Q.current.shape.dispose();this.wrapper.scale(this.wrapperScale)});yield*xe(this.wrapper.scale(this.calculateWrapperScale(a.size,this.getCurrentSize()),e,n),c,$i(p,xe(...f)))}wrapperScale(){return this.calculateWrapperScale(this.document().size,this.getCurrentSize())}document(){try{const t=this.svg();return this.lastTweenTargetDocument&&t===this.lastTweenTargetSrc?this.lastTweenTargetDocument:this.parseSVG(t)}finally{this.lastTweenTargetSrc=null,this.lastTweenTargetDocument=null}}documentNodes(){return this.document().nodes.map(t=>t.shape)}processElementStyle({fill:t,stroke:e,...n}){return{fill:t==="currentColor"?this.fill:de.processSVGColor(t),stroke:e==="currentColor"?this.stroke:de.processSVGColor(e),...n}}static parseSVGData(t){const e=de.svgNodesPool[t];if(e&&(e.size.x>0||e.size.y>0))return e;de.containerElement.innerHTML=t;const n=de.containerElement.querySelector("svg");if(!n)return ce().error({message:"Invalid SVG",object:t}),{size:new Z(0,0),nodes:[]};let s=new ue,a=new Z;const o=n.hasAttribute("viewBox"),l=n.hasAttribute("width")||n.hasAttribute("height");if(o){const{x:p,y:m,width:y,height:c}=n.viewBox.baseVal;s=new ue(p,m,y,c),l||(a=s.size)}l&&(a=new Z(n.width.baseVal.value,n.height.baseVal.value),o||(s=new ue(0,0,a.width,a.height))),!o&&!l&&(s=new ue(n.getBBox()),a=s.size);const u=a.div(s.size),h=s.center,T=new DOMMatrix().scaleSelf(u.x,u.y).translateSelf(-h.x,-h.y),f=Array.from(de.extractGroupNodes(n,n,T,{})),d={size:a,nodes:f};return de.svgNodesPool[t]=d,d}static getMatrixTransformation(t){const e=new E5(t),n=e.translation,s=e.rotation,a={x:e.x.magnitude,y:e.y.magnitude};return e.determinant<0&&(e.values[0]<e.values[3]?a.x=-a.x:a.y=-a.y),{position:n,rotation:s,scale:a}}static processSVGColor(t){return t==="transparent"||t==="none"?null:t}static getElementTransformation(t,e){const n=t.transform.baseVal.consolidate();return(n?e.multiply(n.matrix):e).translate(de.parseNumberAttribute(t,"x"),de.parseNumberAttribute(t,"y"))}static parseLineCap(t){return t?t==="butt"||t==="round"||t==="square"?t:(ce().warn(`SVG: invalid line cap "${t}"`),null):null}static parseLineJoin(t){return t?t==="bevel"||t==="miter"||t==="round"?t:(t==="arcs"||t==="miter-clip"?ce().warn(`SVG: line join is not supported "${t}"`):ce().warn(`SVG: invalid line join "${t}"`),null):null}static parseLineDash(t){if(!t)return null;const e=t.split(/,|\s+/);return e.findIndex(n=>n.endsWith("%"))>0?(ce().warn("SVG: percentage line dash are ignored"),null):e.map(n=>parseFloat(n))}static parseDashOffset(t){if(!t)return null;const e=t.trim();return e.endsWith("%")&&ce().warn("SVG: percentage line dash offset are ignored"),parseFloat(e)}static parseOpacity(t){return t?t.endsWith("%")?parseFloat(t)/100:parseFloat(t):null}static getElementStyle(t,e){return{fill:t.getAttribute("fill")??e.fill,stroke:t.getAttribute("stroke")??e.stroke,lineWidth:t.hasAttribute("stroke-width")?parseFloat(t.getAttribute("stroke-width")):e.lineWidth,lineCap:this.parseLineCap(t.getAttribute("stroke-linecap"))??e.lineCap,lineJoin:this.parseLineJoin(t.getAttribute("stroke-linejoin"))??e.lineJoin,lineDash:this.parseLineDash(t.getAttribute("stroke-dasharray"))??e.lineDash,lineDashOffset:this.parseDashOffset(t.getAttribute("stroke-dashoffset"))??e.lineDashOffset,opacity:this.parseOpacity(t.getAttribute("opacity"))??e.opacity,layout:!1}}static*extractGroupNodes(t,e,n,s){for(const a of t.children)a instanceof SVGGraphicsElement&&(yield*this.extractElementNodes(a,e,n,s))}static parseNumberAttribute(t,e){return parseFloat(t.getAttribute(e)??"0")}static*extractElementNodes(t,e,n,s){const a=de.getElementTransformation(t,n),o=de.getElementStyle(t,s),l=t.id??"";if(t.tagName==="g")yield*de.extractGroupNodes(t,e,a,o);else if(t.tagName==="use"){const u=e.querySelector(t.href.baseVal);if(!(u instanceof SVGGraphicsElement)){ce().warn(`invalid SVG use tag. element "${t.outerHTML}"`);return}yield*de.extractElementNodes(u,e,a,s)}else if(t.tagName==="path"){const u=t.getAttribute("d");if(!u){ce().warn("blank path data at "+t.id);return}const h=a;yield{id:l||"path",type:fn,props:{data:u,tweenAlignPath:!0,...de.getMatrixTransformation(h),...o}}}else if(t.tagName==="rect"){const u=de.parseNumberAttribute(t,"width"),h=de.parseNumberAttribute(t,"height"),T=de.parseNumberAttribute(t,"rx"),f=de.parseNumberAttribute(t,"ry"),p=new ue(0,0,u,h).center,m=a.translate(p.x,p.y);yield{id:l||"rect",type:V1,props:{width:u,height:h,radius:[T,f],...de.getMatrixTransformation(m),...o}}}else if(["circle","ellipse"].includes(t.tagName)){const u=de.parseNumberAttribute(t,"cx"),h=de.parseNumberAttribute(t,"cy"),T=t.tagName==="circle"?de.parseNumberAttribute(t,"r")*2:[de.parseNumberAttribute(t,"rx")*2,de.parseNumberAttribute(t,"ry")*2],f=a.translate(u,h);yield{id:l||t.tagName,type:gr,props:{size:T,...o,...de.getMatrixTransformation(f)}}}else if(["line","polyline","polygon"].includes(t.tagName)){const h=(t.tagName==="line"?["x1","y1","x2","y2"].map(T=>de.parseNumberAttribute(t,T)):t.getAttribute("points").match(/-?[\d.e+-]+/g).map(T=>parseFloat(T))).reduce((T,f)=>{let d=T.at(-1);return(!d||d.length===2)&&(d=[],T.push(d)),d.push(f),T},[]);t.tagName==="polygon"&&h.push(h[0]),yield{id:l||t.tagName,type:u3,props:{points:h,...o,...de.getMatrixTransformation(a)}}}else if(t.tagName==="image"){const u=de.parseNumberAttribute(t,"x"),h=de.parseNumberAttribute(t,"y"),T=de.parseNumberAttribute(t,"width"),f=de.parseNumberAttribute(t,"height"),d=t.getAttribute("href")??"",m=new ue(u,h,T,f).center,y=a.translate(m.x,m.y);yield{id:l||t.tagName,type:Y1,props:{src:d,...o,...de.getMatrixTransformation(y)}}}}};L4.svgNodesPool={};k([ot()],L4.prototype,"svg",2);k([Ye()],L4.prototype,"tweenSvg",1);k([vt()],L4.prototype,"wrapperScale",1);k([vt()],L4.prototype,"document",1);k([vt()],L4.prototype,"documentNodes",1);k([Un(()=>{const r=document.createElement("div");return o3.shadowRoot.appendChild(r),r})],L4,"containerElement",2);var KS=Symbol("Txt"),H2=class extends r1{constructor({children:r,...t}){super(t),r&&this.text(r)}parentTxt(){const r=this.parent();return!r||!(KS in r)?null:r}async draw(r){var u;this.requestFontUpdate(),this.applyStyle(r),await((u=document.fonts)==null?void 0:u.ready),this.applyText(r),r.font=this.styles.font,r.textBaseline="bottom","letterSpacing"in r&&(r.letterSpacing=`${this.letterSpacing()}px`);const t=r.measureText("").fontBoundingBoxAscent,e=this.element.getBoundingClientRect(),{width:n,height:s}=this.size(),a=document.createRange();let o="";const l=new ue;for(const h of this.element.childNodes){if(!h.textContent)continue;a.selectNodeContents(h);const T=a.getBoundingClientRect(),f=n/-2+T.left-e.left,d=s/-2+T.top-e.top+t;l.y===d?(l.width+=T.width,o+=h.textContent):(await this.drawText(r,o,l),l.x=f,l.y=d,l.width=T.width,l.height=T.height,o=h.textContent)}await this.drawText(r,o,l)}async drawText(r,t,e){const n=e.y;t=t.replace(/\s+/g," "),this.lineWidth()<=0?r.fillText(t,e.x,n):this.strokeFirst()?(r.strokeText(t,e.x,n),r.fillText(t,e.x,n)):(r.fillText(t,e.x,n),r.strokeText(t,e.x,n))}getCacheBBox(){const r=this.computedSize(),t=document.createRange();t.selectNodeContents(this.element);const e=t.getBoundingClientRect(),n=this.lineWidth(),s=this.lineJoin()==="miter"?.5*10:.5;return new ue(-r.width/2,-r.height/2,e.width,e.height).expand([0,this.fontSize()*.5]).expand(n*s)}applyFlex(){super.applyFlex(),this.element.style.display="inline"}updateLayout(){if(this.applyFont(),this.applyFlex(),this.justifyContent.isInitial()&&(this.element.style.justifyContent=this.styles.getPropertyValue("text-align")),this.styles.whiteSpace!=="nowrap"&&this.styles.whiteSpace!=="pre")if(this.element.innerText="",H2.segmenter)for(const t of H2.segmenter.segment(this.text()))this.element.appendChild(document.createTextNode(t.segment));else for(const t of this.text().split(""))this.element.appendChild(document.createTextNode(t));else if(this.styles.whiteSpace==="pre"){this.element.innerText="";for(const t of this.text().split(`
 `))this.element.appendChild(document.createTextNode(t+`
-`))}else this.element.innerText=this.text()}};k([dt(""),Vf(Zv),ot()],H2.prototype,"text",2);k([vt()],H2.prototype,"parentTxt",1);k([Un(()=>{try{return new Intl.Segmenter(void 0,{granularity:"grapheme"})}catch{return null}})],H2,"segmenter",2);H2=k([P1("TxtLeaf")],H2);["fill","stroke","lineWidth","strokeFirst","lineCap","lineJoin","lineDash","lineDashOffset"].forEach(r=>{H2.prototype[`get${zr(r)}`]=function(){var t;return((t=this.parentTxt())==null?void 0:t[r]())??this[r].context.getInitial()}});var sv,av,r2=class extends(av=r1,sv=KS,av){constructor({children:r,text:t,...e}){super(e),this[sv]=!0,this.children(t??r)}static b(r){return new r2({...r,fontWeight:700})}static i(r){return new r2({...r,fontStyle:"italic"})}getText(){return this.innerText()}setText(r){const t=this.children();let e=null;for(let n=0;n<t.length;n++){const s=t[n];e===null&&s instanceof H2?e=s:s.parent(null)}e===null?(e=new H2({text:r}),e.parent(this)):e.text(r),this.setParsedChildren([e])}setChildren(r){this.children.context.raw()!==r&&(typeof r=="string"?this.text(r):super.setChildren(r))}*tweenText(r,t,e,n){var h;yield(h=document.fonts)==null?void 0:h.ready;const s=this.children();(s.length!==1||!(s[0]instanceof H2))&&this.text.save();const a=this.childAs(0),o=a.text.context.raw(),l=this.size.context.raw();a.text(r);const u=this.size();a.text(o??ju),this.height()===0&&this.height(u.height),yield*xe(this.size(u,t,e),a.text(r,t,e,n)),this.children.context.setter(r),this.size(l)}getLayout(){return!0}innerText(){const r=this.childrenAs();let t="";for(const e of r)t+=e.text();return t}parentTxt(){const r=this.parent();return r instanceof r2?r:null}parseChildren(r){const t=[],e=Array.isArray(r)?r:[r];for(const n of e)n instanceof r2||n instanceof H2?t.push(n):typeof n=="string"&&t.push(new H2({text:n}));return t}applyFlex(){super.applyFlex(),this.element.style.display=this.findAncestor(PS(r2))?"inline":"block"}async draw(r){var t;await((t=document.fonts)==null?void 0:t.ready),await this.drawChildren(r)}};k([dt(""),ot()],r2.prototype,"text",2);k([Ye()],r2.prototype,"tweenText",1);k([vt()],r2.prototype,"innerText",1);k([vt()],r2.prototype,"parentTxt",1);r2=k([P1("Txt")],r2);["fill","stroke","lineWidth","strokeFirst","lineCap","lineJoin","lineDash","lineDashOffset"].forEach(r=>{r2.prototype[`getDefault${zr(r)}`]=function(t){var e;return((e=this.parentTxt())==null?void 0:e[r]())??t}});var ov=class{constructor(r,t,e,n=0){this.segment=r,this.sourceFps=t,this.targetFps=e,this.sum=n,this.framesRequested=0}async getNextFrame(){var t;const r=this.sourceFps/this.targetFps;if(this.sum+=r,this.framesRequested+=1,this.sum<1&&this.lastFrame)return this.lastFrame;for(;this.sum>=2;){const e=await this.segment.getNextFrame();if(!e)return;e.close(),this.sum-=1}if(this.sum>=1||!this.lastFrame){this.sum-=1;const e=await this.segment.getNextFrame();return e?((t=this.lastFrame)==null||t.close(),this.lastFrame=e,e):void 0}throw new Error("Unreachable code")}getLastFrame(){return this.lastFrame}getSum(){return this.sum}getSegment(){return this.segment}getTime(r){return(this.framesRequested-r)/this.targetFps}},XS=class{constructor(r,t,e=0){this.file=r,this.setStatus=t,this.offset=e}write(r){const t=new ArrayBuffer(r.byteLength);new Uint8Array(t).set(r),t.fileStart=this.offset,this.offset+=t.byteLength,this.setStatus("fetch",(this.offset/1024**2).toFixed(1)+" MiB"),this.file.appendBuffer(t)}close(){this.setStatus("fetch","Done"),this.file.flush()}},FK=30,lv=class{constructor(r,t,e,n,s=0){this.done=!1,this.currentFramePastSegmentEndTime=!1,this.abortController=new AbortController,this.responseFinished=!1,this.framesProcessed=0,this.framesDue=0,this.frameBuffer=[],this.encodedChunkQueue=[],this.readMore=async()=>{},this.uri=r,this.file=t,this.file.onSamples=this.onSamples.bind(this),this.edit=e[n],this.startTime=s;const a=Math.floor(this.startTime*this.edit.fps);this.framesProcessed+=a,this.decoder=new VideoDecoder({output:this.onFrame.bind(this),error(o){console.error(o)}})}async start(r){if(this.edit.mediaTime===-1){this.done=!0,this.responseFinished=!0,this.decoder.close();const u=this.edit.segmentDuration/this.file.getInfo().videoTracks[0].movie_timescale,h=Math.ceil(u*this.edit.fps),T=this.file.getInfo().videoTracks[0].track_height,f=this.file.getInfo().videoTracks[0].track_width,d=T*f*4,p=new ArrayBuffer(d),m=new Uint8Array(p);m.fill(0),this.frameBuffer=Array.from({length:h},()=>new VideoFrame(m,{timestamp:0,duration:1/this.edit.fps,codedHeight:T,codedWidth:f,format:"BGRA"}));return}this.decoder.configure(r);const t=this.file.getInfo().videoTracks[0],e=this.file.getTrackById(t.id),n=this.edit.mediaTime,s=this.startTime*t.timescale,o=(n+s)/t.timescale,l=this.file.seekTrack(o,!0,e);this.readMore=await this.startStreamingAtOffset(this.file,this.uri,l.offset)}async startStreamingAtOffset(r,t,e){return fetch(t,{headers:{Range:`bytes=${e}-`},signal:this.abortController.signal}).then(async n=>{if(!n.body)throw new Error("Response body is null");const s=n.body.getReader(),a=new XS(r,()=>{},e);return async()=>s.read().then(({done:o,value:l})=>{if(o){this.responseFinished=!0,this.abortController.abort(),a.close();return}a.write(l)})})}onSamples(r,t,e){for(const n of e){const s=new EncodedVideoChunk({type:n.is_sync?"key":"delta",timestamp:1e6*n.cts/n.timescale,duration:1e6*n.duration/n.timescale,data:n.data});this.framesDue++,this.encodedChunkQueue.push(s);const a=this.file.getInfo().videoTracks[0],o=this.file.getTrackById(a.id);this.file.releaseSample(o,n.number)}}async decodeChunks(){for(;this.encodedChunkQueue.length>0&&this.decoder.decodeQueueSize<FK;){const r=this.encodedChunkQueue.shift();r&&this.decoder.decode(r)}if(this.done){this.currentFramePastSegmentEndTime=!0;return}if(this.responseFinished&&this.encodedChunkQueue.length===0){await this.flushDecoderWithRetry(),this.currentFramePastSegmentEndTime=!0;return}}async flushDecoderWithRetry(r=3,t=2e3){for(let e=0;e<r;e++){if(this.decoder.decodeQueueSize===0)return;try{await Promise.race([this.decoder.flush(),new Promise((n,s)=>setTimeout(()=>s(new Error("Flush timeout")),t))])}catch(n){if(e===r)throw n}}}async onFrame(r){this.framesDue--;const t=this.edit.mediaTime/this.file.getInfo().videoTracks[0].timescale,e=this.startTime+t,n=r.timestamp/1e6;if(n<e){r.close();return}const s=this.edit.segmentDuration/this.file.getInfo().videoTracks[0].movie_timescale,a=t+s;if(n>a){r.close(),this.done=!0,await this.decoder.flush();return}this.frameBuffer.push(r)}async populateBuffer(){for(;this.frameBuffer.length===0&&!this.currentFramePastSegmentEndTime;)this.responseFinished||await this.readMore(),await this.decodeChunks(),await new Promise(r=>setTimeout(r,0));if(this.frameBuffer.length===0&&this.framesDue>0){let r=200;for(;this.frameBuffer.length===0;)if(await new Promise(t=>setTimeout(t,10)),r--,this.done||r===0)return}}async getNextFrame(){await this.populateBuffer();const r=this.frameBuffer.shift();return r&&this.framesProcessed++,r}async close(){this.abortController.abort(),this.frameBuffer.forEach(r=>r.close());try{this.decoder.state==="configured"&&(await this.decoder.flush(),this.decoder.close())}catch{}}getFramesProcessed(){return this.framesProcessed}getStartTime(){return this.startTime}};function NK(r,t){const e=r.getTrackById(t.id);for(const n of e.mdia.minf.stbl.stsd.entries){const s=n.avcC||n.hvcC||n.vpcC||n.av1C;if(s){const a=new wo.DataStream(void 0,0,wo.DataStream.BIG_ENDIAN);return s.write(a),new Uint8Array(a.buffer,8)}}throw new Error("avcC, hvcC, vpcC, or av1C box not found")}function UK(r){return{mediaTime:r.media_time,segmentDuration:r.segment_duration,mediaRateInteger:r.media_rate_integer,mediaRateFraction:r.media_rate_fraction}}async function jK(r){return new Promise((t,e)=>{const n=wo.createFile();let s=!1;const a=new AbortController;return n.onReady=o=>{var p;s=!0,a.abort();const l=o.videoTracks[0],u={codec:l.codec.startsWith("vp08")?"vp8":l.codec,codedHeight:l.video.height,codedWidth:l.video.width,description:NK(n,l)},h={mediaTime:0,segmentDuration:l.duration,mediaRateInteger:1,mediaRateFraction:0},T=(p=l.edits)==null?void 0:p.map(m=>UK(m)),d=(T!=null&&T.length?T:[h]).map(m=>{const y=l.duration/l.timescale,c=m.segmentDuration/l.movie_timescale,Q=l.nb_samples*(c/y),g=m.mediaRateInteger+m.mediaRateFraction/65535,v=Q/c*g;return{...m,fps:v}});n.setExtractionOptions(l.id),n.start(),t({file:n,edits:d,config:u})},fetch(r,{signal:a.signal}).then(async o=>{if(!o.body)throw new Error("Response body is null");const l=o.body.getReader(),u=new XS(n,()=>{});for(;!s;)await l.read().then(({done:h,value:T})=>{if(h){n.flush(),a.abort(),e("Could not find moov");return}u.write(T)})})})}var GK=class{constructor(r,t,e){this.edits=[],this.nextSegment=0,this.uri=r,this.targetFps=t,this.startTime=e}async start(){const{file:r,edits:t,config:e}=await jK(this.uri);this.file=r,this.edits=t,this.decoderConfig=e}async getNextFrame(){var t;if(!this.sampler){let e=this.startTime;for(;this.nextSegment<this.edits.length;){const s=this.getSecondDurationOfSegment(this.edits[this.nextSegment]);if(e<s)break;e-=s,this.nextSegment++}if(this.nextSegment>=this.edits.length)throw new Error(`Timestamp ${this.startTime} is outside of the video, max timestamp is ${this.getDuration()}`);const n=new lv(this.uri,this.file,this.edits,this.nextSegment,e);await n.start(this.decoderConfig),this.sampler=new ov(n,this.edits[this.nextSegment].fps,this.targetFps,0),this.nextSegment++}let r=await this.sampler.getNextFrame();for(;!r&&this.nextSegment<this.edits.length;){this.sampler.getSegment().close(),(t=this.sampler.getLastFrame())==null||t.close();const e=new lv(this.uri,this.file,this.edits,this.nextSegment,0);await e.start(this.decoderConfig),this.sampler=new ov(e,this.edits[this.nextSegment].fps,this.targetFps,this.sampler.getSum()),this.nextSegment++,r=await this.sampler.getNextFrame()}if(!r&&(r=this.sampler.getLastFrame(),await this.sampler.getSegment().close(),!r))throw new Error("There are no frames in the video.");return r}getSecondDurationOfSegment(r){const t=r.mediaRateInteger+r.mediaRateFraction/65535;return r.segmentDuration/this.file.getInfo().videoTracks[0].movie_timescale/t}getDuration(){return this.edits.reduce((r,t)=>r+this.getSecondDurationOfSegment(t),0)}getTimeSubtractingFrames(r){const t=this.edits.slice(0,this.nextSegment-1).reduce((s,a)=>s+this.getSecondDurationOfSegment(a),0);if(!this.sampler)throw new Error("No current segment");const e=this.sampler.getSegment().getStartTime(),n=this.sampler.getTime(r);return t+e+n}getTime(){return this.getTimeSubtractingFrames(0)}getLastTime(){return this.getTimeSubtractingFrames(1)}getLastFrame(){var r;return(r=this.sampler)==null?void 0:r.getLastFrame()}close(){var r,t,e;(r=this.sampler)==null||r.getSegment().close(),(e=(t=this.sampler)==null?void 0:t.getLastFrame())==null||e.close(),this.file.flush()}},J4=new Map;async function zK(r,t){const e=t+"-"+r,n=J4.get(e);n&&(n.close(),J4.delete(e))}async function WK(r,t,e,n){const s=t+"-"+r;let a=J4.get(s);const o=1/n,l=a==null?void 0:a.getDuration();l&&e>l&&(e=l);const u=a&&Math.abs(e-a.getLastTime())<o/2;if(a&&u){const h=a.getLastFrame();if(!h)throw new Error("No last frame");return h}return a&&e+o<a.getTime()&&(a.close(),J4.delete(s),a=void 0),a&&e>a.getTime()+o*1.5&&(a.close(),J4.delete(s),a=void 0),a||(a=new GK(t,n,e),await a.start(),J4.set(s,a)),a.getNextFrame()}var y1=class extends c1{constructor(r){super(r),this.detectedFileType="unknown",this.fileTypeWasDetected=!1,this.lastFrame=null}createVideoElement(r,t){const e=document.createElement("video");if(e.crossOrigin="anonymous",r&&r!=="undefined"){try{if(new URL(r,window.location.origin).pathname.endsWith(".m3u8")){const a=new D3;a.loadSource(r),a.attachMedia(e)}else e.src=r}catch{e.src=r}const n=()=>{const s=e.error;if(s&&(s.code===4||s.code===2)){e.removeEventListener("error",n);const a=`${t}_no_cors`;let o=y1.pool[a];if(!o){o=document.createElement("video"),o.crossOrigin=null;try{if(new URL(r,window.location.origin).pathname.endsWith(".m3u8")){const u=new D3;u.loadSource(r),u.attachMedia(o)}else o.src=r}catch{o.src=r}y1.pool[a]=o}y1.pool[t]=o}};e.addEventListener("error",n,{once:!0})}return e}desiredSize(){const r=super.desiredSize();if(r.x===null&&r.y===null){const t=this.video();return{x:t.videoWidth,y:t.videoHeight}}return r}mediaElement(){return this.video()}seekedMedia(){return this.seekedVideo()}fastSeekedMedia(){return this.fastSeekedVideo()}getCacheKey(r){if(!r||r==="undefined")return`${this.key}/pending`;try{return new URL(r,window.location.origin).href.split("#")[0]}catch{return r}}video(){const r=this.src(),t=this.getCacheKey(r);let e=y1.pool[t];if(!e)e=this.createVideoElement(r,t),y1.pool[t]=e;else if(r&&r!=="undefined"){const s=l=>{try{return new URL(l,window.location.origin).href.split("#")[0]}catch{return l}},a=s(r);if((e.src?s(e.src):"")!==a)try{if(new URL(r,window.location.origin).pathname.endsWith(".m3u8")){const u=new D3;u.loadSource(r),u.attachMedia(e)}else e.src=r}catch{e.src=r}}return(!r||r==="undefined")&&i1.collectPromise(new Promise(s=>{const a=()=>{const o=this.src();o&&o!=="undefined"?s():setTimeout(a,10)};a()})),this.waitForCanPlayNecessary(e)&&i1.collectPromise(new Promise(s=>{this.waitForCanPlay(e,s)})),e}seekedVideo(){const r=this.video(),t=this.clampTime(this.time());return r.playbackRate=this.playbackRate(),r.paused||r.pause(),this.lastTime===t||this.setCurrentTime(t),r}fastSeekedVideo(){const r=this.video(),t=this.clampTime(this.time());if(r.playbackRate=this.playbackRate(),this.lastTime===t)return r;const e=this.playing()&&t<r.duration&&r.playbackRate>0;return e?r.paused&&i1.collectPromise(r.play()):r.paused||r.pause(),Math.abs(r.currentTime-t)>1?this.setCurrentTime(t):e||(r.currentTime=t),r}async webcodecSeekedVideo(){const r=this.video(),t=this.clampTime(this.time());if(r.playbackRate=this.playbackRate(),this.lastFrame&&this.lastTime===t)return this.lastFrame;const e=this.view().fps()/this.playbackRate();return WK(this.key,r.src,t,e)}async ffmpegSeekedVideo(){const r=this.video(),t=this.clampTime(this.time()),e=this.getDuration();if(r.playbackRate=this.playbackRate(),this.lastFrame&&this.lastTime===t)return this.lastFrame;const n=this.view().fps()/this.playbackRate();if(!y1.imageCommunication)throw new Error("ServerSeekedVideo can only be used with HMR.");const s=await y1.imageCommunication.getFrame(this.key,r.src,t,e,n);return this.lastFrame=s,this.lastTime=t,s}async seekFunction(){const r=this.view().playbackState();return r===i2.Playing||r===i2.Presenting?this.fastSeekedVideo():r===i2.Paused?this.seekedVideo():this.decoder()==="slow"?this.seekedVideo():this.decoder()==="ffmpeg"?this.ffmpegSeekedVideo():this.decoder()==="web"?this.webcodecSeekedVideo():(this.fileTypeWasDetected||this.detectFileType(),this.detectedFileType==="webm"?this.ffmpegSeekedVideo():this.detectedFileType==="hls"?this.seekedVideo():this.webcodecSeekedVideo())}async draw(r){this.autoPlayBasedOnTwick(),this.drawShape(r);const t=this.alpha();if(t>0){const e=await this.seekFunction(),n=ue.fromSizeCentered(this.computedSize());r.save(),r.clip(this.getPath()),t<1&&(r.globalAlpha*=t),r.imageSmoothingEnabled=this.smoothing(),VS(r,e,n),r.restore()}this.clip()&&r.clip(this.getPath()),await this.drawChildren(r)}applyFlex(){super.applyFlex();try{const r=this.video();r&&r.videoWidth>0&&r.videoHeight>0&&(this.element.style.aspectRatio=(this.ratio()??r.videoWidth/r.videoHeight).toString())}catch{}}remove(){return super.remove(),zK(this.key,this.src()),this}handleUnknownFileType(r){console.warn(`WARNING: Could not detect file type of video (${r}), will default to using mp4 decoder. If your video file is not an mp4 file, this will lead to an error - to fix this, reencode your video as an mp4 file (better performance) or specify a different decoder: https://docs.re.video/common-issues/slow-rendering#use-mp4-decoder`),this.detectedFileType="unknown",this.fileTypeWasDetected=!0}detectFileType(){return i1.collectPromise((async()=>{var s;const r=this.src(),t=(s=r.split("?")[0].split(".").pop())==null?void 0:s.toLowerCase();if(t==="mp4"||t==="webm"||t==="mov"){this.detectedFileType=t,this.fileTypeWasDetected=!0;return}if(t==="m3u8"){this.detectedFileType="hls",this.fileTypeWasDetected=!0;return}if(!r.startsWith("http://")&&!r.startsWith("https://")){this.handleUnknownFileType(r);return}const n=(await fetch(r,{method:"HEAD"})).headers.get("Content-Type");if(!n){this.handleUnknownFileType(r);return}if(n.includes("video/mp4")){this.detectedFileType="mp4",this.fileTypeWasDetected=!0;return}if(n.includes("video/webm")){this.detectedFileType="webm",this.fileTypeWasDetected=!0;return}if(n.includes("video/quicktime")){this.detectedFileType="mov",this.fileTypeWasDetected=!0;return}if(n.includes("application/vnd.apple.mpegurl")||n.includes("application/x-mpegURL")){this.detectedFileType="hls",this.fileTypeWasDetected=!0;return}this.handleUnknownFileType(r)})())}};y1.pool={};y1.imageCommunication=null;k([dt(1),ot()],y1.prototype,"alpha",2);k([dt(!0),ot()],y1.prototype,"smoothing",2);k([dt(null),ot()],y1.prototype,"decoder",2);k([vt()],y1.prototype,"video",1);k([vt()],y1.prototype,"seekedVideo",1);k([vt()],y1.prototype,"fastSeekedVideo",1);y1=k([P1("Video")],y1);function qK(r){var t;return!!((t=r.prototype)!=null&&t.isClass)}var ZK=({children:r})=>r;function Q1(r,t,e){const{ref:n,children:s,...a}=t,o=Array.isArray(s)?s.flat():s;if(r===ZK)return o;if(qK(r)){const l=new r({...a,children:o,key:e});return n==null||n(l),l}else return r({...a,ref:n,children:o,key:e})}var KK=class extends FM{constructor(r){super(r),this.view=null,this.registeredNodes=new Map,this.nodeCounters=new Map,this.assetHash=Date.now().toString(),this.recreateView()}getView(){return this.view}next(){var r;return(r=this.getView())==null||r.playbackState(this.playback.state).globalTime(this.playback.time),super.next()}async draw(r){r.save(),this.renderLifecycle.dispatch([e5.BeforeRender,r]),r.save(),this.renderLifecycle.dispatch([e5.BeginRender,r]),this.getView().playbackState(this.playback.state).globalTime(this.playback.time).fps(this.playback.fps),await this.getView().render(r),this.renderLifecycle.dispatch([e5.FinishRender,r]),r.restore(),this.renderLifecycle.dispatch([e5.AfterRender,r]),r.restore()}reset(r){for(const t of this.registeredNodes.keys())try{this.registeredNodes.get(t).dispose()}catch(e){this.logger.error(e)}return this.registeredNodes.clear(),this.registeredNodes=new Map,this.nodeCounters.clear(),this.recreateView(),super.reset(r)}inspectPosition(r,t){const e=this.getNodeByPosition(r,t);return e==null?void 0:e.key}getNodeByPosition(r,t){return this.execute(()=>this.getView().hit(new Z(r,t))??null)}validateInspection(r){var t;return((t=this.getNode(r))==null?void 0:t.key)??null}inspectAttributes(r){const t=this.getNode(r);if(!t)return null;const e={stack:t.creationStack,key:t.key};for(const{key:n,meta:s,signal:a}of t)s.inspectable&&(e[n]=a());return e}drawOverlay(r,t,e){const n=this.getNode(r);n&&this.execute(()=>{n.drawOverlay(e,t.multiply(n.localToWorld()))})}transformMousePosition(r,t){return T1(new Z(r,t),this.getView().localToParent().inverse())}registerNode(r,t){var a;const e=((a=r.constructor)==null?void 0:a.name)??"unknown",n=(this.nodeCounters.get(e)??0)+1;this.nodeCounters.set(e,n),t&&this.registeredNodes.has(t)&&(ce().error({message:`Duplicated node key: "${t}".`,inspect:t,stack:new Error().stack}),t=void 0),t??(t=`${this.name}/${e}[${n}]`),this.registeredNodes.set(t,r);const s=this.registeredNodes;return[t,()=>s.delete(t)]}getNode(r){return typeof r!="string"?null:this.registeredNodes.get(r)??null}*getDetachedNodes(){for(const r of this.registeredNodes.values())!r.parent()&&r!==this.view&&(yield r)}getMediaAssets(){const t=this.playback.state===i2.Rendering,e=Array.from(this.registeredNodes.values()).filter(l=>l instanceof y1),n=Array.from(this.registeredNodes.values()).filter(l=>l instanceof C2);t&&(e.forEach(l=>{const u=l.src();u&&u!=="undefined"&&!l.isPlaying()&&l.playing(!0)}),n.forEach(l=>{const u=l.src();u&&u!=="undefined"&&!l.isPlaying()&&l.playing(!0)}));const s=e.filter(l=>l.isPlaying()),a=n.filter(l=>l.isPlaying()),o=[];return o.push(...s.map(l=>({key:l.key,type:"video",src:l.src(),decoder:l.decoder(),playbackRate:typeof l.playbackRate=="function"?l.playbackRate():l.playbackRate,volume:l.getVolume(),currentTime:l.getCurrentTime(),duration:l.getDuration()}))),o.push(...a.map(l=>({key:l.key,type:"audio",src:l.src(),playbackRate:typeof l.playbackRate=="function"?l.playbackRate():l.playbackRate,volume:l.getVolume(),currentTime:l.getCurrentTime(),duration:l.getDuration()}))),o}stopAllMedia(){const r=Array.from(this.registeredNodes.values()).filter(t=>t instanceof c1).filter(t=>t.isPlaying());for(const t of r)t.dispose()}adjustVolume(r){const t=Array.from(this.registeredNodes.values()).filter(e=>e instanceof c1);for(const e of t)e.setVolume(e.getVolume()*r)}recreateView(){this.execute(()=>{const r=this.getSize();this.view=new o3({position:r.scale(this.resolutionScale/2),scale:this.resolutionScale,assetHash:this.assetHash,size:r})})}};function XK(r,t){return{klass:KK,name:r,config:t,stack:new Error().stack,plugins:["@twick/2d/editor"]}}const $S="#000000",YS={x:0,y:0},er="easeInOut",t5={VIDEO:"video",AUDIO:"audio",CAPTION:"caption",SCENE:"scene",ELEMENT:"element"},uv={highlight_bg:{rect:{alignItems:"center",gap:2},word:{lineWidth:.35,stroke:"#000000",fontWeight:700,shadowOffset:[-3,3],shadowColor:"#000000",fill:"#ffffff",fontFamily:"Bangers",bgColor:"#444444",bgOffsetWidth:30,bgOffsetHeight:8,fontSize:46}},word_by_word:{rect:{alignItems:"center",justifyContent:"center",gap:8},word:{lineWidth:.35,stroke:"#000000",fontWeight:700,strokeFirst:!0,shadowOffset:[-2,2],shadowColor:"#000000",shadowBlur:5,fontFamily:"Bangers",fill:"#FFFFFF",bgOffsetWidth:20,bgOffsetHeight:10,fontSize:46}},word_by_word_with_bg:{rect:{alignItems:"center",gap:8,padding:[10,20],radius:10},word:{lineWidth:.35,stroke:"#000000",fontWeight:700,strokeFirst:!0,shadowOffset:[-2,2],shadowColor:"#000000",shadowBlur:5,fontFamily:"Bangers",fill:"#FFFFFF",bgOffsetWidth:20,bgOffsetHeight:10,fontSize:46}}},$K={text:"#000000",bgColor:"#444444"},YK={family:"Poppins",size:48,weight:400},JK="#FFFFFF00",cv={VIDEO:"video",IMAGE:"image"},Ou={CONTAIN:"contain",COVER:"cover",FILL:"fill"},t2={SATURATED:"saturated",BRIGHT:"bright",VIBRANT:"vibrant",RETRO:"retro",BLACK_WHITE:"blackWhite",COOL:"cool",WARM:"warm",CINEMATIC:"cinematic",SOFT_GLOW:"softGlow",MOODY:"moody",DREAMY:"dreamy",INVERTED:"inverted",VINTAGE:"vintage",DRAMATIC:"dramatic",FADED:"faded"},hv={PLAYER_UPDATE:"twick:playerUpdate"};function P0(r,t){console.log(`[Visualizer] ${r}`,t||"")}const tX={name:"audio",*create({containerRef:r,element:t,view:e}){const n=b1();yield*Jt(t==null?void 0:t.s),yield r().add(Q1(C2,{ref:n,play:!0,...t.props},t.id)),yield*Jt(Math.max(0,t.e-t.s)),yield n().play(!1),yield n().remove()}};function eX({t:r,s:t,e}){const n=r.split(" "),s=e-t,a=n.join("").length;let o=t;return n.map(l=>{const u=l.length/a*s,h=o,T=h+u;return o=T,{t:l,s:parseFloat(h.toFixed(2)),e:parseFloat(T.toFixed(2))}})}const JS=r=>{let t=r.replace(/^#/,"");if(t.length===3&&(t=t.split("").map(o=>o+o).join("")),t.length!==6)throw new Error("Invalid hex color");const e=parseInt(t,16),n=e>>16&255,s=e>>8&255,a=e&255;return{r:n,g:s,b:a}},iX={name:"caption",*create({containerRef:r,caption:t}){var a,o,l,u,h,T;const e=eX(t);let n=0;e!=null&&e.length&&(n=e[0].s);let s={refs:[],props:[],idx:0,prevTime:n};for(const f of e){s.props.push(t.props);const d=b1(),p=t.props;if(r().add(Q1(r2,{ref:d,...p,text:f.t,opacity:0})),t.capStyle=="highlight_bg"){const m=b1(),y=b1(),c=new w2({...JS(p.colors.bgColor),a:(p==null?void 0:p.bgOpacity)??1});r().add(Q1(V1,{ref:m,fill:c,width:d().width()+(p.bgOffsetWidth??30),height:d().height()+(p.bgOffsetHeight??10),margin:p.bgMargin??[0,-5],radius:p.bgRadius??10,padding:p.bgPadding??[0,15],opacity:0,alignItems:"center",justifyContent:"center",layout:!0,children:Q1(r2,{ref:y,...p,text:f.t})})),d().remove(),s.refs.push({bgRef:m,textRef:y})}else s.refs.push({textRef:d});s.prevTime=f.e,s.idx=s.idx+1}s.prevTime=n,s.idx=0;for(const f of e)t.capStyle=="highlight_bg"?(yield*(o=(a=s.refs[s.idx])==null?void 0:a.bgRef)==null?void 0:o.call(a).opacity(1,0),yield*Jt(Math.max(0,f.e-f.s)),yield*(u=(l=s.refs[s.idx])==null?void 0:l.bgRef)==null?void 0:u.call(l).fill(JK,0)):(yield*(T=(h=s.refs[s.idx])==null?void 0:h.textRef)==null?void 0:T.call(h).opacity(1,0),yield*Jt(Math.max(0,f.e-f.s))),s.prevTime=f.e,s.idx=s.idx+1}},rX={name:"elastic",*run({elementRef:r,duration:t,delay:e}){e&&(yield*Jt(e)),r().scale(0),yield*r().scale(1,t,Yv)}},nX={name:"erase",*run({elementRef:r,duration:t,delay:e,bufferTime:n=.1}){const s=r().text(),a=r().size();r().setText(""),r().size(a),r().textAlign("left"),e&&(yield*Jt(e));let o=(t-n)/s.length;yield*Jt(o);for(let l=s.length;l>=0;l--)yield*Jt(o),r().setText(s.substring(0,l))}},sX={name:"stream-word",*run({elementRef:r,duration:t,delay:e,bufferTime:n=.1}){const s=r().text(),a=r().size(),o=s.split(" ");r().setText(""),r().size(a),e&&(yield*Jt(e)),r().textAlign("left");let l=(t-n)/o.length;for(let u=0;u<o.length;u++)yield*Jt(l),r().setText(o.slice(0,u+1).join(" "))}},aX={name:"typewriter",*run({elementRef:r,duration:t,delay:e,bufferTime:n=.1}){const s=r().text(),a=r().size();r().setText(""),r().size(a),r().textAlign("left"),e&&(yield*Jt(e));let o=(t-n)/s.length;yield*Jt(o);for(let l=0;l<s.length;l++)yield*Jt(o),r().setText(s.substring(0,l+1))}};class oX{constructor(){this.effects=new Map}register(t){this.effects.set(t.name,t)}get(t){return this.effects.get(t)}list(){return Array.from(this.effects.keys())}}const lX=()=>{l5.register(aX),l5.register(sX),l5.register(nX),l5.register(rX)},l5=new oX;lX();const uX={name:"blur",*run({elementRef:r,containerRef:t,interval:e,duration:n,intensity:s=25,animate:a}){const o=t??r;let l=Math.min(e,n);a==="enter"?(o().filters.blur(s),yield*o().filters.blur(0,l)):a==="exit"?(yield*Jt(n-l),yield*o().filters.blur(s,l)):a==="both"&&(l=Math.min(e,n/2),o().filters.blur(s),yield*o().filters.blur(0,l),yield*Jt(n-l),yield*o().filters.blur(s,l))}};function R3(r){switch(r){case"easeInSine":return DH;case"easeOutSine":return OH;case"easeInOutSine":return Uu;case"easeInQuad":return IH;case"easeOutQuad":return VH;case"easeInOutQuad":return PH;case"easeInCubic":return kH;case"easeOutCubic":return RH;case"easeInOutCubic":return S5;case"easeInQuart":return BH;case"easeOutQuart":return FH;case"easeInOutQuart":return NH;case"easeInQuint":return UH;case"easeOutQuint":return jH;case"easeInOutQuint":return GH;case"easeInExpo":return zH;case"easeOutExpo":return Xv;case"easeInOutExpo":return WH;case"easeInCirc":return qH;case"easeOutCirc":return ZH;case"easeInOutCirc":return KH;case"easeInBack":return nM;case"easeOutBack":return sM;case"easeInOutBack":return aM;case"easeInElastic":return cM;case"easeOutElastic":return Yv;case"easeInOutElastic":return hM;case"easeInBounce":return oM;case"easeOutBounce":return lM;case"easeInOutBounce":return uM;default:return $v}}const cX={name:"breathe",*run({elementRef:r,containerRef:t,mode:e,duration:n,intensity:s=.5}){const a=t??r,o=a().scale();e==="in"&&(yield*a().scale(new Z(o.x*s,o.y*s),n,R3("easeInSine"))),e==="out"&&(a().scale(new Z(o.x*s,o.y*s)),yield*a().scale(new Z(o.x,o.y),n,R3("easeOutSine")))}},hX={name:"fade",*run({elementRef:r,containerRef:t,interval:e,duration:n,animate:s}){const a=t??r;let o=Math.min(e,n);s==="enter"?(a().opacity(0),yield*a().opacity(1,o)):s==="exit"?(yield*Jt(n-o),yield*a().opacity(0,o)):s==="both"&&(o=Math.min(e,n/2),a().opacity(0),yield*a().opacity(1,o),yield*Jt(n-o),yield*a().opacity(0,o))}},TX={name:"photo-rise",*run({elementRef:r,containerRef:t,direction:e,duration:n,intensity:s=200}){if(t){const a=r().position();e==="up"?(r().y(a.y+s),yield*r().y(a.y,n)):e==="down"?(r().y(a.y-s),yield*r().y(a.y,n)):e==="left"?(r().x(a.x+s),yield*r().x(a.x,n)):e==="right"&&(r().x(a.x-s),yield*r().x(a.x,n))}}},fX={name:"photo-zoom",*run({elementRef:r,containerRef:t,mode:e,duration:n,intensity:s=1.5}){if(t){const a=r().scale();e==="in"&&(yield r().scale(new Z(a.x*s,a.y*s)),yield*r().scale(new Z(a.x,a.y),n)),e==="out"&&(r().scale(new Z(a.x,a.y)),yield*r().scale(new Z(a.x*s,a.y*s),n))}}},QX={name:"rise",*run({elementRef:r,containerRef:t,interval:e=.25,duration:n,animate:s,direction:a,intensity:o=200}){const l=t??r,u=l().position();let h=Math.min(e,n);s==="enter"?(l().opacity(0),a==="up"?(l().y(u.y+o),yield*xe(l().opacity(1,h/4),l().y(u.y,h))):a==="down"&&(l().y(u.y-o),yield*xe(l().opacity(1,h/4),l().y(u.y,h)))):s==="exit"?(yield*Jt(n-h),a==="up"?yield*xe($i(3*h/4,l().opacity(0,h/4)),l().y(u.y-o,h)):a==="down"&&(yield*xe($i(3*h/4,l().opacity(0,h/4)),l().y(u.y+o,h)))):s==="both"&&(h=Math.min(e,n/2),l().opacity(0),a==="up"?(l().y(u.y+o),yield*xe(l().opacity(1,h/4),l().y(u.y,h)),yield*Jt(n-h),yield*xe($i(3*h/4,l().opacity(0,h/4)),l().y(u.y-o,h))):a==="down"&&(l().y(u.y-o),yield*xe(l().opacity(1,h/4),l().y(u.y,h)),yield*Jt(n-h),yield*xe($i(3*h/4,l().opacity(0,h/4)),l().y(u.y+o,h))))}},dX={name:"succession",*run({elementRef:r,containerRef:t,interval:e,duration:n,animate:s}){const a=t??r,o=a().scale();let l=Math.min(e,n);s==="enter"?(a().opacity(0),a().scale(new Z(o.x/2,o.y/2)),yield*xe(a().scale(o,l),a().opacity(1,l/2))):s==="exit"?(yield*Jt(n-l),yield*xe(a().scale(new Z(o.x/2,o.y/2),l),$i(l/2,a().opacity(0,l/2)))):s==="both"&&(l=Math.min(e,n/2),a().opacity(0),a().scale(new Z(o.x/2,o.y/2)),yield*xe(a().scale(o,l),a().opacity(1,l/2)),yield*Jt(n-l),yield*xe(a().scale(new Z(o.x/2,o.y/2),l),$i(l/2,a().opacity(0,l/2))))}};class pX{constructor(){this.animations=new Map}register(t){this.animations.set(t.name,t)}get(t){return this.animations.get(t)}list(){return Array.from(this.animations.keys())}}const gX=()=>{Gi.register(hX),Gi.register(QX),Gi.register(cX),Gi.register(dX),Gi.register(uX),Gi.register(fX),Gi.register(TX)},Gi=new pX;gX();const mX={name:"circle",*run({containerRef:r,elementRef:t,initFrameState:e,frameEffect:n}){yield*Jt(n.s);const s=n.props,a=[];a.push(r().size({x:s.frameSize[0],y:s.frameSize[1]},s.transitionDuration,R3(s.transitionEasing??er))),a.push(r().position(s.framePosition??{x:0,y:0},s.transitionDuration,R3(s.transitionEasing??er))),a.push(t().position(s.elementPosition??YS,s.transitionDuration,R3(s.transitionEasing??er))),a.push(r().radius(s.frameSize[0]/2,s.transitionDuration,R3(s.transitionEasing??er))),s.objectFit&&a.push(k0({elementRef:t,containerSize:{x:s.frameSize[0],y:s.frameSize[1]},elementSize:e.element.size,objectFit:s.objectFit})),yield*xe(...a)}},yX={name:"rect",*run({containerRef:r,elementRef:t,initFrameState:e,frameEffect:n}){yield*Jt(n.s);const s=n.props,a=[];a.push(r().size(s.frameSize,s.transitionDuration,R3(s.transitionEasing??er))),a.push(r().position(s.framePosition??{x:0,y:0},s.transitionDuration,R3(s.transitionEasing??er))),a.push(t().position(s.elementPosition??YS,s.transitionDuration,R3(s.transitionEasing??er))),a.push(r().radius(s.radius??0,s.transitionDuration,R3(s.transitionEasing??er))),s.objectFit&&a.push(k0({elementRef:t,containerSize:{x:s.frameSize[0],y:s.frameSize[1]},elementSize:e.element.size,objectFit:s.objectFit})),yield*xe(...a)}};class vX{constructor(){this.frameEffects=new Map}register(t){this.frameEffects.set(t.name,t)}get(t){return this.frameEffects.get(t)}list(){return Array.from(this.frameEffects.keys())}}const LX=()=>{Hh.register(mX),Hh.register(yX)},Hh=new vX;LX();function*k0({containerSize:r,elementSize:t,elementRef:e,objectFit:n}){const s=r.x/r.y,a=t.x/t.y;switch(n){case Ou.CONTAIN:a>s?(yield e().size({x:r.x,y:r.x/a}),yield e().scale(r.x/t.x,r.x*a/t.y)):(yield e().size({x:r.y*a,y:r.y}),yield e().scale(r.y*a/t.x,r.y/t.y));break;case Ou.COVER:a>s?(yield e().size({x:r.y*a,y:r.y}),yield e().scale(r.y*a/t.x,r.y/t.y)):(yield e().size({x:r.x,y:r.x/a}),yield e().scale(r.x/t.x,r.x*a/t.y));break;case Ou.FILL:yield e().size(r),yield e().scale(r.x/t.x,r.x/t.y);break}}function*xX({elementRef:r,element:t}){if(yield r(),t.textEffect){const e=l5.get(t.textEffect.name);e&&(yield*e.run({elementRef:r,duration:t.e-t.s,...t.textEffect}))}}function*n6({elementRef:r,containerRef:t,element:e,view:n}){if(yield r(),e.animation){const s=Gi.get(e.animation.name);s&&(yield*s.run({elementRef:r,containerRef:t,view:n,duration:e.e-e.s,...e.animation}))}}function*tE({containerRef:r,elementRef:t,element:e}){var s;const n=_X({containerRef:r,elementRef:t});for(let a=0;a<((s=e==null?void 0:e.frameEffects)==null?void 0:s.length);a++){const o=e.frameEffects[a],l=a===e.frameEffects.length-1||e.frameEffects[a+1].s!==o.e,u=Hh.get(o.name);u&&(yield*u.run({containerRef:r,elementRef:t,initFrameState:n,frameEffect:o}),l&&(yield*bX({containerRef:r,elementRef:t,duration:o.e-o.s,element:e,initProps:n})))}}function _X({containerRef:r,elementRef:t}){return{frame:{size:r().size(),pos:r().position(),radius:r().radius(),scale:r().scale(),rotation:r().rotation()},element:{size:r().size(),pos:t().position(),scale:t().scale()}}}function*bX({containerRef:r,elementRef:t,duration:e,element:n,initProps:s}){yield*Jt(e),P0(`restoreFrameState: ${JSON.stringify(s)}`);let a=[];a.push(r().size(s.frame.size)),a.push(r().position(s.frame.pos)),a.push(r().scale(s.frame.scale)),a.push(r().rotation(s.frame.rotation)),a.push(r().radius(s.frame.radius)),a.push(t().size(s.element.size)),a.push(t().position(s.element.pos)),a.push(t().scale(s.element.scale)),a.push(k0({elementRef:t,containerSize:s.frame.size,elementSize:s.element.size,objectFit:n.objectFit??"none"})),yield*xe(...a)}const SX={name:"circle",*create({containerRef:r,element:t,view:e}){const n=b1();yield*Jt(t==null?void 0:t.s),yield r().add(Q1(gr,{ref:n,...t.props},t.id)),yield*xe(n6({elementRef:n,element:t,view:e}),Jt(Math.max(0,t.e-t.s))),yield n().remove()}},EX={name:"icon",*create({containerRef:r,element:t,view:e}){const n=b1();yield*Jt(t==null?void 0:t.s),yield r().add(Q1(fl,{ref:n,...t.props},t.id)),yield*xe(n6({elementRef:n,element:t,view:e}),Jt(Math.max(0,t.e-t.s))),yield n().remove()}},eE=(r,t)=>{switch(t){case t2.SATURATED:r().filters.saturate(1.4),r().filters.contrast(1.1);break;case t2.BRIGHT:r().filters.brightness(1.3),r().filters.contrast(1.05);break;case t2.VIBRANT:r().filters.saturate(1.6),r().filters.brightness(1.15),r().filters.contrast(1.1);break;case t2.RETRO:r().filters.sepia(.8),r().filters.contrast(1.3),r().filters.brightness(.85),r().filters.saturate(.8);break;case t2.BLACK_WHITE:r().filters.grayscale(1),r().filters.contrast(1.25),r().filters.brightness(1.05);break;case t2.COOL:r().filters.hue(15),r().filters.brightness(1.1),r().filters.saturate(1.3),r().filters.contrast(1.05);break;case t2.WARM:r().filters.hue(-15),r().filters.brightness(1.15),r().filters.saturate(1.3),r().filters.contrast(1.05);break;case t2.CINEMATIC:r().filters.contrast(1.4),r().filters.brightness(.95),r().filters.saturate(.85),r().filters.sepia(.2);break;case t2.SOFT_GLOW:r().filters.brightness(1.2),r().filters.contrast(.95),r().filters.blur(1.2),r().filters.saturate(1.1);break;case t2.MOODY:r().filters.brightness(1.05),r().filters.contrast(1.4),r().filters.saturate(.65),r().filters.sepia(.2);break;case t2.DREAMY:r().filters.brightness(1.3),r().filters.blur(2),r().filters.saturate(1.4),r().filters.contrast(.95);break;case t2.INVERTED:r().filters.invert(1),r().filters.hue(180);break;case t2.VINTAGE:r().filters.sepia(.4),r().filters.saturate(1.4),r().filters.contrast(1.2),r().filters.brightness(1.1);break;case t2.DRAMATIC:r().filters.contrast(1.5),r().filters.brightness(.9),r().filters.saturate(1.2);break;case t2.FADED:r().filters.opacity(.9),r().filters.brightness(1.2),r().filters.saturate(.8),r().filters.contrast(.9);break}},iE={name:"image",*create({containerRef:r,element:t,view:e}){var a;yield*Jt(t==null?void 0:t.s);const n=b1(),s=b1();yield r().add(Q1(V1,{ref:n,...t.frame,children:Q1(Y1,{ref:s,...t.props},`child-${t.id}`)},t.id)),n()&&(yield k0({elementRef:s,containerSize:n().size(),elementSize:s().size(),objectFit:t.objectFit}),(a=t==null?void 0:t.props)!=null&&a.mediaFilter&&eE(s,t.props.mediaFilter),yield*xe(n6({elementRef:s,containerRef:n,element:t,view:e}),tE({containerRef:n,elementRef:s,element:t}),Jt(Math.max(0,t.e-t.s))),yield s().remove(),yield n().remove())}},AX={name:"rect",*create({containerRef:r,element:t,view:e}){const n=b1();yield*Jt(t==null?void 0:t.s),P0(`RectElement: ${JSON.stringify(t)}`),yield r().add(Q1(V1,{ref:n,...t.props},t.id)),yield*xe(n6({elementRef:n,element:t,view:e}),Jt(Math.max(0,t.e-t.s))),yield n().remove()}},rE={name:"video",*create({containerRef:r,element:t,view:e}){var a;yield*Jt(t==null?void 0:t.s);const n=b1(),s=b1();yield r().add(Q1(V1,{ref:n,...t.frame,children:Q1(y1,{ref:s,play:!0,...t.props},`child-${t.id}`)},t.id)),n()&&(yield k0({elementRef:s,containerSize:n().size(),elementSize:s().size(),objectFit:t.objectFit}),(a=t==null?void 0:t.props)!=null&&a.mediaFilter&&eE(s,t.props.mediaFilter),yield*xe(n6({elementRef:s,containerRef:n,element:t,view:e}),tE({containerRef:n,elementRef:s,element:t}),Jt(Math.max(0,t.e-t.s))),yield s().play(!1),yield s().remove(),yield n().remove())}},HX={name:"scene",*create({containerRef:r,element:t,view:e}){yield*Jt(t==null?void 0:t.s);const n=b1();P0(`SceneElement: ${JSON.stringify(t)}`),yield r().add(Q1(V1,{ref:n,fill:t.backgroundColor??$S,size:"100%"})),t.type===cv.IMAGE?yield*iE.create({containerRef:r,element:t,view:e}):t.type===cv.VIDEO&&(yield*rE.create({containerRef:r,element:t,view:e})),yield n().remove()}},MX={name:"text",*create({containerRef:r,element:t,view:e}){var s,a;const n=b1();yield*Jt(t==null?void 0:t.s),yield r().add(Q1(r2,{ref:n,text:t.t,textWrap:((s=t.props)==null?void 0:s.textWrap)??!0,textAlign:((a=t.props)==null?void 0:a.textAlign)??"center",...t.props},t.id)),yield*xe(n6({elementRef:n,element:t,view:e}),xX({elementRef:n,element:t}),Jt(Math.max(0,t.e-t.s))),yield n().remove()}};class wX{constructor(){this.elements=new Map}register(t){this.elements.set(t.name,t)}get(t){return this.elements.get(t)}list(){return Array.from(this.elements.keys())}}const CX=()=>{x2.register(rE),x2.register(iX),x2.register(HX),x2.register(iE),x2.register(MX),x2.register(tX),x2.register(SX),x2.register(EX),x2.register(AX)},x2=new wX;CX();function*DX({view:r,track:t}){var s;const e=b1();let n=0;r.add(Q1(Ht,{size:"100%",ref:e,layout:!0}));for(const a of t.elements||[])yield*Jt((a==null?void 0:a.s)-n),yield*(s=x2.get("video"))==null?void 0:s.create({containerRef:e,element:a,view:r}),n=a.e;yield e().remove()}function*OX({view:r,track:t}){let e=0;for(const n of t.elements){const s=b1();yield*Jt((n==null?void 0:n.s)-e),e=n==null?void 0:n.e,P0(`Adding audio element ${n.id}`),r.add(Q1(C2,{ref:s,...n.props},n.id)),yield*Jt(Math.max(0,n.e-n.s)),yield s().playing(!1),yield s().remove()}}function*IX({view:r,track:t}){var l;let e=0;const n=b1();r.add(Q1(Ht,{size:"100%",ref:n}));const s=t==null?void 0:t.props,a=(s==null?void 0:s.applyToAll)??!1,o=(uv[(s==null?void 0:s.capStyle)??""]||{}).word||{};for(const u of t.elements){const h=u.props,T=(uv[(h==null?void 0:h.capStyle)??(s==null?void 0:s.capStyle)??""]||{}).rect||{},f={...T,justifyContent:T.justifyContent,alignItems:T.alignItems},d=a?s==null?void 0:s.colors:(h==null?void 0:h.colors)??(s==null?void 0:s.colors)??$K,p={...o,...(s==null?void 0:s.captionProps)||{},colors:d,font:a?s==null?void 0:s.font:(h==null?void 0:h.font)??(s==null?void 0:s.font)??YK,fill:d.text,bgColor:d.bgColor,bgOpacity:(s==null?void 0:s.bgOpacity)??1};yield*Jt((u==null?void 0:u.s)-e);const m=b1();if(n().add(Q1(V1,{ref:m,...f,x:a?s==null?void 0:s.x:(h==null?void 0:h.x)??(s==null?void 0:s.x),y:a?s==null?void 0:s.y:(h==null?void 0:h.y)??(s==null?void 0:s.y),layout:!0},u.id)),(s==null?void 0:s.capStyle)==="word_by_word_with_bg"){const y=new w2({...JS(p.bgColor),a:(p==null?void 0:p.bgOpacity)??1});m().fill(y)}yield*(l=x2.get("caption"))==null?void 0:l.create({containerRef:m,caption:{...u,t:u.t??"",capStyle:(h==null?void 0:h.capStyle)??(s==null?void 0:s.capStyle),props:p},view:r}),e=u.e,yield m().remove()}}function*VX({view:r,track:t}){var n;const e=b1();r.add(Q1(Ht,{size:"100%",ref:e,layout:!0}));for(const s of t.elements||[])yield*(n=x2.get("scene"))==null?void 0:n.create({containerRef:e,element:s,view:r});yield e().remove()}function*PX({view:r,track:t}){var s;const e=b1();r.add(Q1(Ht,{size:"100%",ref:e}));const n=[];try{for(const a of t.elements)n.push((s=x2.get(a.type))==null?void 0:s.create({containerRef:e,element:a,view:r}))}catch(a){P0("Error creating element track",a)}yield*xe(...n),yield e().remove()}const Tv=(r,t)=>{if(typeof window<"u"){const e=new CustomEvent(r,t);return window.dispatchEvent(e)}},kX=XK("scene",function*(r){const t=b5().variables.get("input",null)(),e=b5().variables.get("playerId",null)();if(t)if(console.log("Scene updated",{playerId:e,input:t}),yield r.add(Q1(V1,{fill:t.backgroundColor??$S,size:"100%"})),t.tracks){const n=[];for(const s of t.tracks)switch(s.type){case t5.VIDEO:n.push(DX({view:r,track:s}));break;case t5.AUDIO:n.push(OX({view:r,track:s}));break;case t5.CAPTION:n.push(IX({view:r,track:s}));break;case t5.SCENE:n.push(VX({view:r,track:s}));break;case t5.ELEMENT:n.push(PX({view:r,track:s}));break}yield*xe(...n),Tv(hv.PLAYER_UPDATE,{detail:{status:"ready",playerId:e,message:"All elements created"}})}else Tv(hv.PLAYER_UPDATE,{detail:{status:"ready",playerId:e,message:"No elements to create"}})}),qX=bM({scenes:[kX]});export{qX as default};
+`))}else this.element.innerText=this.text()}};k([dt(""),Vf(Zv),ot()],H2.prototype,"text",2);k([vt()],H2.prototype,"parentTxt",1);k([Un(()=>{try{return new Intl.Segmenter(void 0,{granularity:"grapheme"})}catch{return null}})],H2,"segmenter",2);H2=k([P1("TxtLeaf")],H2);["fill","stroke","lineWidth","strokeFirst","lineCap","lineJoin","lineDash","lineDashOffset"].forEach(r=>{H2.prototype[`get${zr(r)}`]=function(){var t;return((t=this.parentTxt())==null?void 0:t[r]())??this[r].context.getInitial()}});var sv,av,r2=class extends(av=r1,sv=KS,av){constructor({children:r,text:t,...e}){super(e),this[sv]=!0,this.children(t??r)}static b(r){return new r2({...r,fontWeight:700})}static i(r){return new r2({...r,fontStyle:"italic"})}getText(){return this.innerText()}setText(r){const t=this.children();let e=null;for(let n=0;n<t.length;n++){const s=t[n];e===null&&s instanceof H2?e=s:s.parent(null)}e===null?(e=new H2({text:r}),e.parent(this)):e.text(r),this.setParsedChildren([e])}setChildren(r){this.children.context.raw()!==r&&(typeof r=="string"?this.text(r):super.setChildren(r))}*tweenText(r,t,e,n){var h;yield(h=document.fonts)==null?void 0:h.ready;const s=this.children();(s.length!==1||!(s[0]instanceof H2))&&this.text.save();const a=this.childAs(0),o=a.text.context.raw(),l=this.size.context.raw();a.text(r);const u=this.size();a.text(o??ju),this.height()===0&&this.height(u.height),yield*xe(this.size(u,t,e),a.text(r,t,e,n)),this.children.context.setter(r),this.size(l)}getLayout(){return!0}innerText(){const r=this.childrenAs();let t="";for(const e of r)t+=e.text();return t}parentTxt(){const r=this.parent();return r instanceof r2?r:null}parseChildren(r){const t=[],e=Array.isArray(r)?r:[r];for(const n of e)n instanceof r2||n instanceof H2?t.push(n):typeof n=="string"&&t.push(new H2({text:n}));return t}applyFlex(){super.applyFlex(),this.element.style.display=this.findAncestor(PS(r2))?"inline":"block"}async draw(r){var t;await((t=document.fonts)==null?void 0:t.ready),await this.drawChildren(r)}};k([dt(""),ot()],r2.prototype,"text",2);k([Ye()],r2.prototype,"tweenText",1);k([vt()],r2.prototype,"innerText",1);k([vt()],r2.prototype,"parentTxt",1);r2=k([P1("Txt")],r2);["fill","stroke","lineWidth","strokeFirst","lineCap","lineJoin","lineDash","lineDashOffset"].forEach(r=>{r2.prototype[`getDefault${zr(r)}`]=function(t){var e;return((e=this.parentTxt())==null?void 0:e[r]())??t}});var ov=class{constructor(r,t,e,n=0){this.segment=r,this.sourceFps=t,this.targetFps=e,this.sum=n,this.framesRequested=0}async getNextFrame(){var t;const r=this.sourceFps/this.targetFps;if(this.sum+=r,this.framesRequested+=1,this.sum<1&&this.lastFrame)return this.lastFrame;for(;this.sum>=2;){const e=await this.segment.getNextFrame();if(!e)return;e.close(),this.sum-=1}if(this.sum>=1||!this.lastFrame){this.sum-=1;const e=await this.segment.getNextFrame();return e?((t=this.lastFrame)==null||t.close(),this.lastFrame=e,e):void 0}throw new Error("Unreachable code")}getLastFrame(){return this.lastFrame}getSum(){return this.sum}getSegment(){return this.segment}getTime(r){return(this.framesRequested-r)/this.targetFps}},XS=class{constructor(r,t,e=0){this.file=r,this.setStatus=t,this.offset=e}write(r){const t=new ArrayBuffer(r.byteLength);new Uint8Array(t).set(r),t.fileStart=this.offset,this.offset+=t.byteLength,this.setStatus("fetch",(this.offset/1024**2).toFixed(1)+" MiB"),this.file.appendBuffer(t)}close(){this.setStatus("fetch","Done"),this.file.flush()}},FK=30,lv=class{constructor(r,t,e,n,s=0){this.done=!1,this.currentFramePastSegmentEndTime=!1,this.abortController=new AbortController,this.responseFinished=!1,this.framesProcessed=0,this.framesDue=0,this.frameBuffer=[],this.encodedChunkQueue=[],this.readMore=async()=>{},this.uri=r,this.file=t,this.file.onSamples=this.onSamples.bind(this),this.edit=e[n],this.startTime=s;const a=Math.floor(this.startTime*this.edit.fps);this.framesProcessed+=a,this.decoder=new VideoDecoder({output:this.onFrame.bind(this),error(o){console.error(o)}})}async start(r){if(this.edit.mediaTime===-1){this.done=!0,this.responseFinished=!0,this.decoder.close();const u=this.edit.segmentDuration/this.file.getInfo().videoTracks[0].movie_timescale,h=Math.ceil(u*this.edit.fps),T=this.file.getInfo().videoTracks[0].track_height,f=this.file.getInfo().videoTracks[0].track_width,d=T*f*4,p=new ArrayBuffer(d),m=new Uint8Array(p);m.fill(0),this.frameBuffer=Array.from({length:h},()=>new VideoFrame(m,{timestamp:0,duration:1/this.edit.fps,codedHeight:T,codedWidth:f,format:"BGRA"}));return}this.decoder.configure(r);const t=this.file.getInfo().videoTracks[0],e=this.file.getTrackById(t.id),n=this.edit.mediaTime,s=this.startTime*t.timescale,o=(n+s)/t.timescale,l=this.file.seekTrack(o,!0,e);this.readMore=await this.startStreamingAtOffset(this.file,this.uri,l.offset)}async startStreamingAtOffset(r,t,e){return fetch(t,{headers:{Range:`bytes=${e}-`},signal:this.abortController.signal}).then(async n=>{if(!n.body)throw new Error("Response body is null");const s=n.body.getReader(),a=new XS(r,()=>{},e);return async()=>s.read().then(({done:o,value:l})=>{if(o){this.responseFinished=!0,this.abortController.abort(),a.close();return}a.write(l)})})}onSamples(r,t,e){for(const n of e){const s=new EncodedVideoChunk({type:n.is_sync?"key":"delta",timestamp:1e6*n.cts/n.timescale,duration:1e6*n.duration/n.timescale,data:n.data});this.framesDue++,this.encodedChunkQueue.push(s);const a=this.file.getInfo().videoTracks[0],o=this.file.getTrackById(a.id);this.file.releaseSample(o,n.number)}}async decodeChunks(){for(;this.encodedChunkQueue.length>0&&this.decoder.decodeQueueSize<FK;){const r=this.encodedChunkQueue.shift();r&&this.decoder.decode(r)}if(this.done){this.currentFramePastSegmentEndTime=!0;return}if(this.responseFinished&&this.encodedChunkQueue.length===0){await this.flushDecoderWithRetry(),this.currentFramePastSegmentEndTime=!0;return}}async flushDecoderWithRetry(r=3,t=2e3){for(let e=0;e<r;e++){if(this.decoder.decodeQueueSize===0)return;try{await Promise.race([this.decoder.flush(),new Promise((n,s)=>setTimeout(()=>s(new Error("Flush timeout")),t))])}catch(n){if(e===r)throw n}}}async onFrame(r){this.framesDue--;const t=this.edit.mediaTime/this.file.getInfo().videoTracks[0].timescale,e=this.startTime+t,n=r.timestamp/1e6;if(n<e){r.close();return}const s=this.edit.segmentDuration/this.file.getInfo().videoTracks[0].movie_timescale,a=t+s;if(n>a){r.close(),this.done=!0,await this.decoder.flush();return}this.frameBuffer.push(r)}async populateBuffer(){for(;this.frameBuffer.length===0&&!this.currentFramePastSegmentEndTime;)this.responseFinished||await this.readMore(),await this.decodeChunks(),await new Promise(r=>setTimeout(r,0));if(this.frameBuffer.length===0&&this.framesDue>0){let r=200;for(;this.frameBuffer.length===0;)if(await new Promise(t=>setTimeout(t,10)),r--,this.done||r===0)return}}async getNextFrame(){await this.populateBuffer();const r=this.frameBuffer.shift();return r&&this.framesProcessed++,r}async close(){this.abortController.abort(),this.frameBuffer.forEach(r=>r.close());try{this.decoder.state==="configured"&&(await this.decoder.flush(),this.decoder.close())}catch{}}getFramesProcessed(){return this.framesProcessed}getStartTime(){return this.startTime}};function NK(r,t){const e=r.getTrackById(t.id);for(const n of e.mdia.minf.stbl.stsd.entries){const s=n.avcC||n.hvcC||n.vpcC||n.av1C;if(s){const a=new wo.DataStream(void 0,0,wo.DataStream.BIG_ENDIAN);return s.write(a),new Uint8Array(a.buffer,8)}}throw new Error("avcC, hvcC, vpcC, or av1C box not found")}function UK(r){return{mediaTime:r.media_time,segmentDuration:r.segment_duration,mediaRateInteger:r.media_rate_integer,mediaRateFraction:r.media_rate_fraction}}async function jK(r){return new Promise((t,e)=>{const n=wo.createFile();let s=!1;const a=new AbortController;return n.onReady=o=>{var p;s=!0,a.abort();const l=o.videoTracks[0],u={codec:l.codec.startsWith("vp08")?"vp8":l.codec,codedHeight:l.video.height,codedWidth:l.video.width,description:NK(n,l)},h={mediaTime:0,segmentDuration:l.duration,mediaRateInteger:1,mediaRateFraction:0},T=(p=l.edits)==null?void 0:p.map(m=>UK(m)),d=(T!=null&&T.length?T:[h]).map(m=>{const y=l.duration/l.timescale,c=m.segmentDuration/l.movie_timescale,Q=l.nb_samples*(c/y),g=m.mediaRateInteger+m.mediaRateFraction/65535,v=Q/c*g;return{...m,fps:v}});n.setExtractionOptions(l.id),n.start(),t({file:n,edits:d,config:u})},fetch(r,{signal:a.signal}).then(async o=>{if(!o.body)throw new Error("Response body is null");const l=o.body.getReader(),u=new XS(n,()=>{});for(;!s;)await l.read().then(({done:h,value:T})=>{if(h){n.flush(),a.abort(),e("Could not find moov");return}u.write(T)})})})}var GK=class{constructor(r,t,e){this.edits=[],this.nextSegment=0,this.uri=r,this.targetFps=t,this.startTime=e}async start(){const{file:r,edits:t,config:e}=await jK(this.uri);this.file=r,this.edits=t,this.decoderConfig=e}async getNextFrame(){var t;if(!this.sampler){let e=this.startTime;for(;this.nextSegment<this.edits.length;){const s=this.getSecondDurationOfSegment(this.edits[this.nextSegment]);if(e<s)break;e-=s,this.nextSegment++}if(this.nextSegment>=this.edits.length)throw new Error(`Timestamp ${this.startTime} is outside of the video, max timestamp is ${this.getDuration()}`);const n=new lv(this.uri,this.file,this.edits,this.nextSegment,e);await n.start(this.decoderConfig),this.sampler=new ov(n,this.edits[this.nextSegment].fps,this.targetFps,0),this.nextSegment++}let r=await this.sampler.getNextFrame();for(;!r&&this.nextSegment<this.edits.length;){this.sampler.getSegment().close(),(t=this.sampler.getLastFrame())==null||t.close();const e=new lv(this.uri,this.file,this.edits,this.nextSegment,0);await e.start(this.decoderConfig),this.sampler=new ov(e,this.edits[this.nextSegment].fps,this.targetFps,this.sampler.getSum()),this.nextSegment++,r=await this.sampler.getNextFrame()}if(!r&&(r=this.sampler.getLastFrame(),await this.sampler.getSegment().close(),!r))throw new Error("There are no frames in the video.");return r}getSecondDurationOfSegment(r){const t=r.mediaRateInteger+r.mediaRateFraction/65535;return r.segmentDuration/this.file.getInfo().videoTracks[0].movie_timescale/t}getDuration(){return this.edits.reduce((r,t)=>r+this.getSecondDurationOfSegment(t),0)}getTimeSubtractingFrames(r){const t=this.edits.slice(0,this.nextSegment-1).reduce((s,a)=>s+this.getSecondDurationOfSegment(a),0);if(!this.sampler)throw new Error("No current segment");const e=this.sampler.getSegment().getStartTime(),n=this.sampler.getTime(r);return t+e+n}getTime(){return this.getTimeSubtractingFrames(0)}getLastTime(){return this.getTimeSubtractingFrames(1)}getLastFrame(){var r;return(r=this.sampler)==null?void 0:r.getLastFrame()}close(){var r,t,e;(r=this.sampler)==null||r.getSegment().close(),(e=(t=this.sampler)==null?void 0:t.getLastFrame())==null||e.close(),this.file.flush()}},J4=new Map;async function zK(r,t){const e=t+"-"+r,n=J4.get(e);n&&(n.close(),J4.delete(e))}async function WK(r,t,e,n){const s=t+"-"+r;let a=J4.get(s);const o=1/n,l=a==null?void 0:a.getDuration();l&&e>l&&(e=l);const u=a&&Math.abs(e-a.getLastTime())<o/2;if(a&&u){const h=a.getLastFrame();if(!h)throw new Error("No last frame");return h}return a&&e+o<a.getTime()&&(a.close(),J4.delete(s),a=void 0),a&&e>a.getTime()+o*1.5&&(a.close(),J4.delete(s),a=void 0),a||(a=new GK(t,n,e),await a.start(),J4.set(s,a)),a.getNextFrame()}var y1=class extends c1{constructor(r){super(r),this.detectedFileType="unknown",this.fileTypeWasDetected=!1,this.lastFrame=null}createVideoElement(r,t){const e=document.createElement("video");if(e.crossOrigin="anonymous",r&&r!=="undefined"){try{if(new URL(r,window.location.origin).pathname.endsWith(".m3u8")){const a=new D3;a.loadSource(r),a.attachMedia(e)}else e.src=r}catch{e.src=r}const n=()=>{const s=e.error;if(s&&(s.code===4||s.code===2)){e.removeEventListener("error",n);const a=`${t}_no_cors`;let o=y1.pool[a];if(!o){o=document.createElement("video"),o.crossOrigin=null;try{if(new URL(r,window.location.origin).pathname.endsWith(".m3u8")){const u=new D3;u.loadSource(r),u.attachMedia(o)}else o.src=r}catch{o.src=r}y1.pool[a]=o}y1.pool[t]=o}};e.addEventListener("error",n,{once:!0})}return e}desiredSize(){const r=super.desiredSize();if(r.x===null&&r.y===null){const t=this.video();return{x:t.videoWidth,y:t.videoHeight}}return r}mediaElement(){return this.video()}seekedMedia(){return this.seekedVideo()}fastSeekedMedia(){return this.fastSeekedVideo()}getCacheKey(r){if(!r||r==="undefined")return`${this.key}/pending`;try{return new URL(r,window.location.origin).href.split("#")[0]}catch{return r}}video(){const r=this.src(),t=this.getCacheKey(r);let e=y1.pool[t];if(!e)e=this.createVideoElement(r,t),y1.pool[t]=e;else if(r&&r!=="undefined"){const s=l=>{try{return new URL(l,window.location.origin).href.split("#")[0]}catch{return l}},a=s(r);if((e.src?s(e.src):"")!==a)try{if(new URL(r,window.location.origin).pathname.endsWith(".m3u8")){const u=new D3;u.loadSource(r),u.attachMedia(e)}else e.src=r}catch{e.src=r}}return(!r||r==="undefined")&&i1.collectPromise(new Promise(s=>{const a=()=>{const o=this.src();o&&o!=="undefined"?s():setTimeout(a,10)};a()})),this.waitForCanPlayNecessary(e)&&i1.collectPromise(new Promise(s=>{this.waitForCanPlay(e,s)})),e}seekedVideo(){const r=this.video(),t=this.clampTime(this.time());return r.playbackRate=this.playbackRate(),r.paused||r.pause(),this.lastTime===t||this.setCurrentTime(t),r}fastSeekedVideo(){const r=this.video(),t=this.clampTime(this.time());if(r.playbackRate=this.playbackRate(),this.lastTime===t)return r;const e=this.playing()&&t<r.duration&&r.playbackRate>0;return e?r.paused&&i1.collectPromise(r.play()):r.paused||r.pause(),Math.abs(r.currentTime-t)>1?this.setCurrentTime(t):e||(r.currentTime=t),r}async webcodecSeekedVideo(){const r=this.video(),t=this.clampTime(this.time());if(r.playbackRate=this.playbackRate(),this.lastFrame&&this.lastTime===t)return this.lastFrame;const e=this.view().fps()/this.playbackRate();return WK(this.key,r.src,t,e)}async ffmpegSeekedVideo(){const r=this.video(),t=this.clampTime(this.time()),e=this.getDuration();if(r.playbackRate=this.playbackRate(),this.lastFrame&&this.lastTime===t)return this.lastFrame;const n=this.view().fps()/this.playbackRate();if(!y1.imageCommunication)throw new Error("ServerSeekedVideo can only be used with HMR.");const s=await y1.imageCommunication.getFrame(this.key,r.src,t,e,n);return this.lastFrame=s,this.lastTime=t,s}async seekFunction(){const r=this.view().playbackState();return r===i2.Playing||r===i2.Presenting?this.fastSeekedVideo():r===i2.Paused?this.seekedVideo():this.decoder()==="slow"?this.seekedVideo():this.decoder()==="ffmpeg"?this.ffmpegSeekedVideo():this.decoder()==="web"?this.webcodecSeekedVideo():(this.fileTypeWasDetected||this.detectFileType(),this.detectedFileType==="webm"?this.ffmpegSeekedVideo():this.detectedFileType==="hls"?this.seekedVideo():this.webcodecSeekedVideo())}async draw(r){this.autoPlayBasedOnTwick(),this.drawShape(r);const t=this.alpha();if(t>0){const e=await this.seekFunction(),n=ue.fromSizeCentered(this.computedSize());r.save(),r.clip(this.getPath()),t<1&&(r.globalAlpha*=t),r.imageSmoothingEnabled=this.smoothing(),VS(r,e,n),r.restore()}this.clip()&&r.clip(this.getPath()),await this.drawChildren(r)}applyFlex(){super.applyFlex();try{const r=this.video();r&&r.videoWidth>0&&r.videoHeight>0&&(this.element.style.aspectRatio=(this.ratio()??r.videoWidth/r.videoHeight).toString())}catch{}}remove(){return super.remove(),zK(this.key,this.src()),this}handleUnknownFileType(r){console.warn(`WARNING: Could not detect file type of video (${r}), will default to using mp4 decoder. If your video file is not an mp4 file, this will lead to an error - to fix this, reencode your video as an mp4 file (better performance) or specify a different decoder: https://docs.re.video/common-issues/slow-rendering#use-mp4-decoder`),this.detectedFileType="unknown",this.fileTypeWasDetected=!0}detectFileType(){return i1.collectPromise((async()=>{var s;const r=this.src(),t=(s=r.split("?")[0].split(".").pop())==null?void 0:s.toLowerCase();if(t==="mp4"||t==="webm"||t==="mov"){this.detectedFileType=t,this.fileTypeWasDetected=!0;return}if(t==="m3u8"){this.detectedFileType="hls",this.fileTypeWasDetected=!0;return}if(!r.startsWith("http://")&&!r.startsWith("https://")){this.handleUnknownFileType(r);return}const n=(await fetch(r,{method:"HEAD"})).headers.get("Content-Type");if(!n){this.handleUnknownFileType(r);return}if(n.includes("video/mp4")){this.detectedFileType="mp4",this.fileTypeWasDetected=!0;return}if(n.includes("video/webm")){this.detectedFileType="webm",this.fileTypeWasDetected=!0;return}if(n.includes("video/quicktime")){this.detectedFileType="mov",this.fileTypeWasDetected=!0;return}if(n.includes("application/vnd.apple.mpegurl")||n.includes("application/x-mpegURL")){this.detectedFileType="hls",this.fileTypeWasDetected=!0;return}this.handleUnknownFileType(r)})())}};y1.pool={};y1.imageCommunication=null;k([dt(1),ot()],y1.prototype,"alpha",2);k([dt(!0),ot()],y1.prototype,"smoothing",2);k([dt(null),ot()],y1.prototype,"decoder",2);k([vt()],y1.prototype,"video",1);k([vt()],y1.prototype,"seekedVideo",1);k([vt()],y1.prototype,"fastSeekedVideo",1);y1=k([P1("Video")],y1);function qK(r){var t;return!!((t=r.prototype)!=null&&t.isClass)}var ZK=({children:r})=>r;function Q1(r,t,e){const{ref:n,children:s,...a}=t,o=Array.isArray(s)?s.flat():s;if(r===ZK)return o;if(qK(r)){const l=new r({...a,children:o,key:e});return n==null||n(l),l}else return r({...a,ref:n,children:o,key:e})}var KK=class extends FM{constructor(r){super(r),this.view=null,this.registeredNodes=new Map,this.nodeCounters=new Map,this.assetHash=Date.now().toString(),this.recreateView()}getView(){return this.view}next(){var r;return(r=this.getView())==null||r.playbackState(this.playback.state).globalTime(this.playback.time),super.next()}async draw(r){r.save(),this.renderLifecycle.dispatch([e5.BeforeRender,r]),r.save(),this.renderLifecycle.dispatch([e5.BeginRender,r]),this.getView().playbackState(this.playback.state).globalTime(this.playback.time).fps(this.playback.fps),await this.getView().render(r),this.renderLifecycle.dispatch([e5.FinishRender,r]),r.restore(),this.renderLifecycle.dispatch([e5.AfterRender,r]),r.restore()}reset(r){for(const t of this.registeredNodes.keys())try{this.registeredNodes.get(t).dispose()}catch(e){this.logger.error(e)}return this.registeredNodes.clear(),this.registeredNodes=new Map,this.nodeCounters.clear(),this.recreateView(),super.reset(r)}inspectPosition(r,t){const e=this.getNodeByPosition(r,t);return e==null?void 0:e.key}getNodeByPosition(r,t){return this.execute(()=>this.getView().hit(new Z(r,t))??null)}validateInspection(r){var t;return((t=this.getNode(r))==null?void 0:t.key)??null}inspectAttributes(r){const t=this.getNode(r);if(!t)return null;const e={stack:t.creationStack,key:t.key};for(const{key:n,meta:s,signal:a}of t)s.inspectable&&(e[n]=a());return e}drawOverlay(r,t,e){const n=this.getNode(r);n&&this.execute(()=>{n.drawOverlay(e,t.multiply(n.localToWorld()))})}transformMousePosition(r,t){return T1(new Z(r,t),this.getView().localToParent().inverse())}registerNode(r,t){var a;const e=((a=r.constructor)==null?void 0:a.name)??"unknown",n=(this.nodeCounters.get(e)??0)+1;this.nodeCounters.set(e,n),t&&this.registeredNodes.has(t)&&(ce().error({message:`Duplicated node key: "${t}".`,inspect:t,stack:new Error().stack}),t=void 0),t??(t=`${this.name}/${e}[${n}]`),this.registeredNodes.set(t,r);const s=this.registeredNodes;return[t,()=>s.delete(t)]}getNode(r){return typeof r!="string"?null:this.registeredNodes.get(r)??null}*getDetachedNodes(){for(const r of this.registeredNodes.values())!r.parent()&&r!==this.view&&(yield r)}getMediaAssets(){const t=this.playback.state===i2.Rendering,e=Array.from(this.registeredNodes.values()).filter(l=>l instanceof y1),n=Array.from(this.registeredNodes.values()).filter(l=>l instanceof C2);t&&(e.forEach(l=>{const u=l.src();u&&u!=="undefined"&&!l.isPlaying()&&l.playing(!0)}),n.forEach(l=>{const u=l.src();u&&u!=="undefined"&&!l.isPlaying()&&l.playing(!0)}));const s=e.filter(l=>l.isPlaying()),a=n.filter(l=>l.isPlaying()),o=[];return o.push(...s.map(l=>({key:l.key,type:"video",src:l.src(),decoder:l.decoder(),playbackRate:typeof l.playbackRate=="function"?l.playbackRate():l.playbackRate,volume:l.getVolume(),currentTime:l.getCurrentTime(),duration:l.getDuration()}))),o.push(...a.map(l=>({key:l.key,type:"audio",src:l.src(),playbackRate:typeof l.playbackRate=="function"?l.playbackRate():l.playbackRate,volume:l.getVolume(),currentTime:l.getCurrentTime(),duration:l.getDuration()}))),o}stopAllMedia(){const r=Array.from(this.registeredNodes.values()).filter(t=>t instanceof c1).filter(t=>t.isPlaying());for(const t of r)t.dispose()}adjustVolume(r){const t=Array.from(this.registeredNodes.values()).filter(e=>e instanceof c1);for(const e of t)e.setVolume(e.getVolume()*r)}recreateView(){this.execute(()=>{const r=this.getSize();this.view=new o3({position:r.scale(this.resolutionScale/2),scale:this.resolutionScale,assetHash:this.assetHash,size:r})})}};function XK(r,t){return{klass:KK,name:r,config:t,stack:new Error().stack,plugins:["@twick/2d/editor"]}}const $S="#000000",YS={x:0,y:0},er="easeInOut",t5={VIDEO:"video",AUDIO:"audio",CAPTION:"caption",SCENE:"scene",ELEMENT:"element"},uv={highlight_bg:{rect:{alignItems:"center",gap:2},word:{lineWidth:.35,stroke:"#000000",fontWeight:700,shadowOffset:[-3,3],shadowColor:"#000000",fill:"#ffffff",fontFamily:"Bangers",bgColor:"#444444",bgOffsetWidth:30,bgOffsetHeight:8,fontSize:46}},word_by_word:{rect:{alignItems:"center",justifyContent:"center",gap:8},word:{lineWidth:.35,stroke:"#000000",fontWeight:700,strokeFirst:!0,shadowOffset:[-2,2],shadowColor:"#000000",shadowBlur:5,fontFamily:"Bangers",fill:"#FFFFFF",bgOffsetWidth:20,bgOffsetHeight:10,fontSize:46}},word_by_word_with_bg:{rect:{alignItems:"center",gap:8,padding:[10,20],radius:10},word:{lineWidth:.35,stroke:"#000000",fontWeight:700,strokeFirst:!0,shadowOffset:[-2,2],shadowColor:"#000000",shadowBlur:5,fontFamily:"Bangers",fill:"#FFFFFF",bgOffsetWidth:20,bgOffsetHeight:10,fontSize:46}}},$K={text:"#000000",bgColor:"#444444"},YK={family:"Poppins",size:48,weight:400},JK="#FFFFFF00",cv={VIDEO:"video",IMAGE:"image"},Ou={CONTAIN:"contain",COVER:"cover",FILL:"fill"},t2={SATURATED:"saturated",BRIGHT:"bright",VIBRANT:"vibrant",RETRO:"retro",BLACK_WHITE:"blackWhite",COOL:"cool",WARM:"warm",CINEMATIC:"cinematic",SOFT_GLOW:"softGlow",MOODY:"moody",DREAMY:"dreamy",INVERTED:"inverted",VINTAGE:"vintage",DRAMATIC:"dramatic",FADED:"faded"},hv={PLAYER_UPDATE:"twick:playerUpdate"};function P0(r,t){console.log(`[Visualizer] ${r}`,t||"")}const tX={name:"audio",*create({containerRef:r,element:t,view:e}){const n=b1();yield*Jt(t==null?void 0:t.s),yield r().add(Q1(C2,{ref:n,play:!0,...t.props},t.id)),yield*Jt(Math.max(0,t.e-t.s)),yield n().play(!1),yield n().remove()}};function eX({t:r,s:t,e}){const n=r.split(" "),s=e-t,a=n.join("").length;let o=t;return n.map(l=>{const u=l.length/a*s,h=o,T=h+u;return o=T,{t:l,s:parseFloat(h.toFixed(2)),e:parseFloat(T.toFixed(2))}})}const JS=r=>{let t=r.replace(/^#/,"");if(t.length===3&&(t=t.split("").map(o=>o+o).join("")),t.length!==6)throw new Error("Invalid hex color");const e=parseInt(t,16),n=e>>16&255,s=e>>8&255,a=e&255;return{r:n,g:s,b:a}},iX={name:"caption",*create({containerRef:r,caption:t}){var a,o,l,u,h,T;const e=eX(t);let n=0;e!=null&&e.length&&(n=e[0].s);let s={refs:[],props:[],idx:0,prevTime:n};for(const f of e){s.props.push(t.props);const d=b1(),p=t.props;if(r().add(Q1(r2,{ref:d,...p,text:f.t,opacity:0})),t.capStyle=="highlight_bg"){const m=b1(),y=b1(),c=new w2({...JS(p.colors.bgColor),a:(p==null?void 0:p.bgOpacity)??1});r().add(Q1(V1,{ref:m,fill:c,width:d().width()+(p.bgOffsetWidth??30),height:d().height()+(p.bgOffsetHeight??10),margin:p.bgMargin??[0,-5],radius:p.bgRadius??10,padding:p.bgPadding??[0,15],opacity:0,alignItems:"center",justifyContent:"center",layout:!0,children:Q1(r2,{ref:y,...p,text:f.t})})),d().remove(),s.refs.push({bgRef:m,textRef:y})}else s.refs.push({textRef:d});s.prevTime=f.e,s.idx=s.idx+1}s.prevTime=n,s.idx=0;for(const f of e)t.capStyle=="highlight_bg"?(yield*(o=(a=s.refs[s.idx])==null?void 0:a.bgRef)==null?void 0:o.call(a).opacity(1,0),yield*Jt(Math.max(0,f.e-f.s)),yield*(u=(l=s.refs[s.idx])==null?void 0:l.bgRef)==null?void 0:u.call(l).fill(JK,0)):(yield*(T=(h=s.refs[s.idx])==null?void 0:h.textRef)==null?void 0:T.call(h).opacity(1,0),yield*Jt(Math.max(0,f.e-f.s))),s.prevTime=f.e,s.idx=s.idx+1}},rX={name:"elastic",*run({elementRef:r,duration:t,delay:e}){e&&(yield*Jt(e)),r().scale(0),yield*r().scale(1,t,Yv)}},nX={name:"erase",*run({elementRef:r,duration:t,delay:e,bufferTime:n=.1}){const s=r().text(),a=r().size();r().setText(""),r().size(a),r().textAlign("left"),e&&(yield*Jt(e));let o=(t-n)/s.length;yield*Jt(o);for(let l=s.length;l>=0;l--)yield*Jt(o),r().setText(s.substring(0,l))}},sX={name:"stream-word",*run({elementRef:r,duration:t,delay:e,bufferTime:n=.1}){const s=r().text(),a=r().size(),o=s.split(" ");r().setText(""),r().size(a),e&&(yield*Jt(e)),r().textAlign("left");let l=(t-n)/o.length;for(let u=0;u<o.length;u++)yield*Jt(l),r().setText(o.slice(0,u+1).join(" "))}},aX={name:"typewriter",*run({elementRef:r,duration:t,delay:e,bufferTime:n=.1}){const s=r().text(),a=r().size();r().setText(""),r().size(a),r().textAlign("left"),e&&(yield*Jt(e));let o=(t-n)/s.length;yield*Jt(o);for(let l=0;l<s.length;l++)yield*Jt(o),r().setText(s.substring(0,l+1))}};class oX{constructor(){this.effects=new Map}register(t){this.effects.set(t.name,t)}get(t){return this.effects.get(t)}list(){return Array.from(this.effects.keys())}}const lX=()=>{l5.register(aX),l5.register(sX),l5.register(nX),l5.register(rX)},l5=new oX;lX();const uX={name:"blur",*run({elementRef:r,containerRef:t,interval:e,duration:n,intensity:s=25,animate:a}){const o=t??r;let l=Math.min(e,n);a==="enter"?(o().filters.blur(s),yield*o().filters.blur(0,l)):a==="exit"?(yield*Jt(n-l),yield*o().filters.blur(s,l)):a==="both"&&(l=Math.min(e,n/2),o().filters.blur(s),yield*o().filters.blur(0,l),yield*Jt(n-l),yield*o().filters.blur(s,l))}};function R3(r){switch(r){case"easeInSine":return DH;case"easeOutSine":return OH;case"easeInOutSine":return Uu;case"easeInQuad":return IH;case"easeOutQuad":return VH;case"easeInOutQuad":return PH;case"easeInCubic":return kH;case"easeOutCubic":return RH;case"easeInOutCubic":return S5;case"easeInQuart":return BH;case"easeOutQuart":return FH;case"easeInOutQuart":return NH;case"easeInQuint":return UH;case"easeOutQuint":return jH;case"easeInOutQuint":return GH;case"easeInExpo":return zH;case"easeOutExpo":return Xv;case"easeInOutExpo":return WH;case"easeInCirc":return qH;case"easeOutCirc":return ZH;case"easeInOutCirc":return KH;case"easeInBack":return nM;case"easeOutBack":return sM;case"easeInOutBack":return aM;case"easeInElastic":return cM;case"easeOutElastic":return Yv;case"easeInOutElastic":return hM;case"easeInBounce":return oM;case"easeOutBounce":return lM;case"easeInOutBounce":return uM;default:return $v}}const cX={name:"breathe",*run({elementRef:r,containerRef:t,mode:e,duration:n,intensity:s=.5}){const a=t??r,o=a().scale();e==="in"&&(yield*a().scale(new Z(o.x*s,o.y*s),n,R3("easeInSine"))),e==="out"&&(a().scale(new Z(o.x*s,o.y*s)),yield*a().scale(new Z(o.x,o.y),n,R3("easeOutSine")))}},hX={name:"fade",*run({elementRef:r,containerRef:t,interval:e,duration:n,animate:s}){const a=t??r;let o=Math.min(e,n);s==="enter"?(a().opacity(0),yield*a().opacity(1,o)):s==="exit"?(yield*Jt(n-o),yield*a().opacity(0,o)):s==="both"&&(o=Math.min(e,n/2),a().opacity(0),yield*a().opacity(1,o),yield*Jt(n-o),yield*a().opacity(0,o))}},TX={name:"photo-rise",*run({elementRef:r,containerRef:t,direction:e,duration:n,intensity:s=200}){if(t){const a=r().position();e==="up"?(r().y(a.y+s),yield*r().y(a.y,n)):e==="down"?(r().y(a.y-s),yield*r().y(a.y,n)):e==="left"?(r().x(a.x+s),yield*r().x(a.x,n)):e==="right"&&(r().x(a.x-s),yield*r().x(a.x,n))}}},fX={name:"photo-zoom",*run({elementRef:r,containerRef:t,mode:e,duration:n,intensity:s=1.5}){if(t){const a=r().scale();e==="in"&&(yield r().scale(new Z(a.x*s,a.y*s)),yield*r().scale(new Z(a.x,a.y),n)),e==="out"&&(r().scale(new Z(a.x,a.y)),yield*r().scale(new Z(a.x*s,a.y*s),n))}}},QX={name:"rise",*run({elementRef:r,containerRef:t,interval:e=.25,duration:n,animate:s,direction:a,intensity:o=200}){const l=t??r,u=l().position();let h=Math.min(e,n);s==="enter"?(l().opacity(0),a==="up"?(l().y(u.y+o),yield*xe(l().opacity(1,h/4),l().y(u.y,h))):a==="down"&&(l().y(u.y-o),yield*xe(l().opacity(1,h/4),l().y(u.y,h)))):s==="exit"?(yield*Jt(n-h),a==="up"?yield*xe($i(3*h/4,l().opacity(0,h/4)),l().y(u.y-o,h)):a==="down"&&(yield*xe($i(3*h/4,l().opacity(0,h/4)),l().y(u.y+o,h)))):s==="both"&&(h=Math.min(e,n/2),l().opacity(0),a==="up"?(l().y(u.y+o),yield*xe(l().opacity(1,h/4),l().y(u.y,h)),yield*Jt(n-h),yield*xe($i(3*h/4,l().opacity(0,h/4)),l().y(u.y-o,h))):a==="down"&&(l().y(u.y-o),yield*xe(l().opacity(1,h/4),l().y(u.y,h)),yield*Jt(n-h),yield*xe($i(3*h/4,l().opacity(0,h/4)),l().y(u.y+o,h))))}},dX={name:"succession",*run({elementRef:r,containerRef:t,interval:e,duration:n,animate:s}){const a=t??r,o=a().scale();let l=Math.min(e,n);s==="enter"?(a().opacity(0),a().scale(new Z(o.x/2,o.y/2)),yield*xe(a().scale(o,l),a().opacity(1,l/2))):s==="exit"?(yield*Jt(n-l),yield*xe(a().scale(new Z(o.x/2,o.y/2),l),$i(l/2,a().opacity(0,l/2)))):s==="both"&&(l=Math.min(e,n/2),a().opacity(0),a().scale(new Z(o.x/2,o.y/2)),yield*xe(a().scale(o,l),a().opacity(1,l/2)),yield*Jt(n-l),yield*xe(a().scale(new Z(o.x/2,o.y/2),l),$i(l/2,a().opacity(0,l/2))))}};class pX{constructor(){this.animations=new Map}register(t){this.animations.set(t.name,t)}get(t){return this.animations.get(t)}list(){return Array.from(this.animations.keys())}}const gX=()=>{Gi.register(hX),Gi.register(QX),Gi.register(cX),Gi.register(dX),Gi.register(uX),Gi.register(fX),Gi.register(TX)},Gi=new pX;gX();const mX={name:"circle",*run({containerRef:r,elementRef:t,initFrameState:e,frameEffect:n}){yield*Jt(n.s);const s=n.props,a=[];a.push(r().size({x:s.frameSize[0],y:s.frameSize[1]},s.transitionDuration,R3(s.transitionEasing??er))),a.push(r().position(s.framePosition??{x:0,y:0},s.transitionDuration,R3(s.transitionEasing??er))),a.push(t().position(s.elementPosition??YS,s.transitionDuration,R3(s.transitionEasing??er))),a.push(r().radius(s.frameSize[0]/2,s.transitionDuration,R3(s.transitionEasing??er))),s.objectFit&&a.push(k0({elementRef:t,containerSize:{x:s.frameSize[0],y:s.frameSize[1]},elementSize:e.element.size,objectFit:s.objectFit})),yield*xe(...a)}},yX={name:"rect",*run({containerRef:r,elementRef:t,initFrameState:e,frameEffect:n}){yield*Jt(n.s);const s=n.props,a=[];a.push(r().size(s.frameSize,s.transitionDuration,R3(s.transitionEasing??er))),a.push(r().position(s.framePosition??{x:0,y:0},s.transitionDuration,R3(s.transitionEasing??er))),a.push(t().position(s.elementPosition??YS,s.transitionDuration,R3(s.transitionEasing??er))),a.push(r().radius(s.radius??0,s.transitionDuration,R3(s.transitionEasing??er))),s.objectFit&&a.push(k0({elementRef:t,containerSize:{x:s.frameSize[0],y:s.frameSize[1]},elementSize:e.element.size,objectFit:s.objectFit})),yield*xe(...a)}};class vX{constructor(){this.frameEffects=new Map}register(t){this.frameEffects.set(t.name,t)}get(t){return this.frameEffects.get(t)}list(){return Array.from(this.frameEffects.keys())}}const LX=()=>{Hh.register(mX),Hh.register(yX)},Hh=new vX;LX();function*k0({containerSize:r,elementSize:t,elementRef:e,objectFit:n}){const s=r.x/r.y,a=t.x/t.y;switch(n){case Ou.CONTAIN:a>s?(yield e().size({x:r.x,y:r.x/a}),yield e().scale(r.x/t.x,r.x*a/t.y)):(yield e().size({x:r.y*a,y:r.y}),yield e().scale(r.y*a/t.x,r.y/t.y));break;case Ou.COVER:a>s?(yield e().size({x:r.y*a,y:r.y}),yield e().scale(r.y*a/t.x,r.y/t.y)):(yield e().size({x:r.x,y:r.x/a}),yield e().scale(r.x/t.x,r.x*a/t.y));break;case Ou.FILL:yield e().size(r),yield e().scale(r.x/t.x,r.x/t.y);break}}function*xX({elementRef:r,element:t}){if(yield r(),t.textEffect){const e=l5.get(t.textEffect.name);e&&(yield*e.run({elementRef:r,duration:t.e-t.s,...t.textEffect}))}}function*n6({elementRef:r,containerRef:t,element:e,view:n}){if(yield r(),e.animation){const s=Gi.get(e.animation.name);s&&(yield*s.run({elementRef:r,containerRef:t,view:n,duration:e.e-e.s,...e.animation}))}}function*tE({containerRef:r,elementRef:t,element:e}){var s;const n=_X({containerRef:r,elementRef:t});for(let a=0;a<((s=e==null?void 0:e.frameEffects)==null?void 0:s.length);a++){const o=e.frameEffects[a],l=a===e.frameEffects.length-1||e.frameEffects[a+1].s!==o.e,u=Hh.get(o.name);u&&(yield*u.run({containerRef:r,elementRef:t,initFrameState:n,frameEffect:o}),l&&(yield*bX({containerRef:r,elementRef:t,duration:o.e-o.s,element:e,initProps:n})))}}function _X({containerRef:r,elementRef:t}){return{frame:{size:r().size(),pos:r().position(),radius:r().radius(),scale:r().scale(),rotation:r().rotation()},element:{size:r().size(),pos:t().position(),scale:t().scale()}}}function*bX({containerRef:r,elementRef:t,duration:e,element:n,initProps:s}){yield*Jt(e),P0(`restoreFrameState: ${JSON.stringify(s)}`);let a=[];a.push(r().size(s.frame.size)),a.push(r().position(s.frame.pos)),a.push(r().scale(s.frame.scale)),a.push(r().rotation(s.frame.rotation)),a.push(r().radius(s.frame.radius)),a.push(t().size(s.element.size)),a.push(t().position(s.element.pos)),a.push(t().scale(s.element.scale)),a.push(k0({elementRef:t,containerSize:s.frame.size,elementSize:s.element.size,objectFit:n.objectFit??"none"})),yield*xe(...a)}const SX={name:"circle",*create({containerRef:r,element:t,view:e}){const n=b1();yield*Jt(t==null?void 0:t.s),yield r().add(Q1(gr,{ref:n,...t.props},t.id)),yield*xe(n6({elementRef:n,element:t,view:e}),Jt(Math.max(0,t.e-t.s))),yield n().remove()}},EX={name:"icon",*create({containerRef:r,element:t,view:e}){const n=b1();yield*Jt(t==null?void 0:t.s),yield r().add(Q1(fl,{ref:n,...t.props},t.id)),yield*xe(n6({elementRef:n,element:t,view:e}),Jt(Math.max(0,t.e-t.s))),yield n().remove()}},eE=(r,t)=>{switch(t){case t2.SATURATED:r().filters.saturate(1.4),r().filters.contrast(1.1);break;case t2.BRIGHT:r().filters.brightness(1.3),r().filters.contrast(1.05);break;case t2.VIBRANT:r().filters.saturate(1.6),r().filters.brightness(1.15),r().filters.contrast(1.1);break;case t2.RETRO:r().filters.sepia(.8),r().filters.contrast(1.3),r().filters.brightness(.85),r().filters.saturate(.8);break;case t2.BLACK_WHITE:r().filters.grayscale(1),r().filters.contrast(1.25),r().filters.brightness(1.05);break;case t2.COOL:r().filters.hue(15),r().filters.brightness(1.1),r().filters.saturate(1.3),r().filters.contrast(1.05);break;case t2.WARM:r().filters.hue(-15),r().filters.brightness(1.15),r().filters.saturate(1.3),r().filters.contrast(1.05);break;case t2.CINEMATIC:r().filters.contrast(1.4),r().filters.brightness(.95),r().filters.saturate(.85),r().filters.sepia(.2);break;case t2.SOFT_GLOW:r().filters.brightness(1.2),r().filters.contrast(.95),r().filters.blur(1.2),r().filters.saturate(1.1);break;case t2.MOODY:r().filters.brightness(1.05),r().filters.contrast(1.4),r().filters.saturate(.65),r().filters.sepia(.2);break;case t2.DREAMY:r().filters.brightness(1.3),r().filters.blur(2),r().filters.saturate(1.4),r().filters.contrast(.95);break;case t2.INVERTED:r().filters.invert(1),r().filters.hue(180);break;case t2.VINTAGE:r().filters.sepia(.4),r().filters.saturate(1.4),r().filters.contrast(1.2),r().filters.brightness(1.1);break;case t2.DRAMATIC:r().filters.contrast(1.5),r().filters.brightness(.9),r().filters.saturate(1.2);break;case t2.FADED:r().filters.opacity(.9),r().filters.brightness(1.2),r().filters.saturate(.8),r().filters.contrast(.9);break}},iE={name:"image",*create({containerRef:r,element:t,view:e}){var a;yield*Jt(t==null?void 0:t.s);const n=b1(),s=b1();yield r().add(Q1(V1,{ref:n,...t.frame,children:Q1(Y1,{ref:s,...t.props},`child-${t.id}`)},t.id)),n()&&(yield k0({elementRef:s,containerSize:n().size(),elementSize:s().size(),objectFit:t.objectFit}),(a=t==null?void 0:t.props)!=null&&a.mediaFilter&&eE(s,t.props.mediaFilter),yield*xe(n6({elementRef:s,containerRef:n,element:t,view:e}),tE({containerRef:n,elementRef:s,element:t}),Jt(Math.max(0,t.e-t.s))),yield s().remove(),yield n().remove())}},AX={name:"rect",*create({containerRef:r,element:t,view:e}){const n=b1();yield*Jt(t==null?void 0:t.s),P0(`RectElement: ${JSON.stringify(t)}`),yield r().add(Q1(V1,{ref:n,...t.props},t.id)),yield*xe(n6({elementRef:n,element:t,view:e}),Jt(Math.max(0,t.e-t.s))),yield n().remove()}},rE={name:"video",*create({containerRef:r,element:t,view:e}){var a;yield*Jt(t==null?void 0:t.s);const n=b1(),s=b1();yield r().add(Q1(V1,{ref:n,...t.frame,children:Q1(y1,{ref:s,play:!0,...t.props},`child-${t.id}`)},t.id)),n()&&(yield k0({elementRef:s,containerSize:n().size(),elementSize:s().size(),objectFit:t.objectFit}),(a=t==null?void 0:t.props)!=null&&a.mediaFilter&&eE(s,t.props.mediaFilter),yield*xe(n6({elementRef:s,containerRef:n,element:t,view:e}),tE({containerRef:n,elementRef:s,element:t}),Jt(Math.max(0,t.e-t.s))),yield s().play(!1),yield s().remove(),yield n().remove())}},HX={name:"scene",*create({containerRef:r,element:t,view:e}){yield*Jt(t==null?void 0:t.s);const n=b1();P0(`SceneElement: ${JSON.stringify(t)}`),yield r().add(Q1(V1,{ref:n,fill:t.backgroundColor??$S,size:"100%"})),t.type===cv.IMAGE?yield*iE.create({containerRef:r,element:t,view:e}):t.type===cv.VIDEO&&(yield*rE.create({containerRef:r,element:t,view:e})),yield n().remove()}},MX={name:"text",*create({containerRef:r,element:t,view:e}){var s,a;const n=b1();yield*Jt(t==null?void 0:t.s),yield r().add(Q1(r2,{ref:n,text:t.t,textWrap:((s=t.props)==null?void 0:s.textWrap)??!0,textAlign:((a=t.props)==null?void 0:a.textAlign)??"center",...t.props},t.id)),yield*xe(n6({elementRef:n,element:t,view:e}),xX({elementRef:n,element:t}),Jt(Math.max(0,t.e-t.s))),yield n().remove()}};class wX{constructor(){this.elements=new Map}register(t){this.elements.set(t.name,t)}get(t){return this.elements.get(t)}list(){return Array.from(this.elements.keys())}}const CX=()=>{x2.register(rE),x2.register(iX),x2.register(HX),x2.register(iE),x2.register(MX),x2.register(tX),x2.register(SX),x2.register(EX),x2.register(AX)},x2=new wX;CX();function*DX({view:r,track:t}){var s;const e=b1();let n=0;r.add(Q1(Ht,{size:"100%",ref:e}));for(const a of t.elements||[])yield*Jt((a==null?void 0:a.s)-n),yield*(s=x2.get("video"))==null?void 0:s.create({containerRef:e,element:a,view:r}),n=a.e;yield e().remove()}function*OX({view:r,track:t}){let e=0;for(const n of t.elements){const s=b1();yield*Jt((n==null?void 0:n.s)-e),e=n==null?void 0:n.e,P0(`Adding audio element ${n.id}`),r.add(Q1(C2,{ref:s,...n.props},n.id)),yield*Jt(Math.max(0,n.e-n.s)),yield s().playing(!1),yield s().remove()}}function*IX({view:r,track:t}){var l;let e=0;const n=b1();r.add(Q1(Ht,{size:"100%",ref:n}));const s=t==null?void 0:t.props,a=(s==null?void 0:s.applyToAll)??!1,o=(uv[(s==null?void 0:s.capStyle)??""]||{}).word||{};for(const u of t.elements){const h=u.props,T=(uv[(h==null?void 0:h.capStyle)??(s==null?void 0:s.capStyle)??""]||{}).rect||{},f={...T,justifyContent:T.justifyContent,alignItems:T.alignItems},d=a?s==null?void 0:s.colors:(h==null?void 0:h.colors)??(s==null?void 0:s.colors)??$K,p={...o,...(s==null?void 0:s.captionProps)||{},colors:d,font:a?s==null?void 0:s.font:(h==null?void 0:h.font)??(s==null?void 0:s.font)??YK,fill:d.text,bgColor:d.bgColor,bgOpacity:(s==null?void 0:s.bgOpacity)??1};yield*Jt((u==null?void 0:u.s)-e);const m=b1();if(n().add(Q1(V1,{ref:m,...f,x:a?s==null?void 0:s.x:(h==null?void 0:h.x)??(s==null?void 0:s.x),y:a?s==null?void 0:s.y:(h==null?void 0:h.y)??(s==null?void 0:s.y),layout:!0},u.id)),(s==null?void 0:s.capStyle)==="word_by_word_with_bg"){const y=new w2({...JS(p.bgColor),a:(p==null?void 0:p.bgOpacity)??1});m().fill(y)}yield*(l=x2.get("caption"))==null?void 0:l.create({containerRef:m,caption:{...u,t:u.t??"",capStyle:(h==null?void 0:h.capStyle)??(s==null?void 0:s.capStyle),props:p},view:r}),e=u.e,yield m().remove()}}function*VX({view:r,track:t}){var n;const e=b1();r.add(Q1(Ht,{size:"100%",ref:e}));for(const s of t.elements||[])yield*(n=x2.get("scene"))==null?void 0:n.create({containerRef:e,element:s,view:r});yield e().remove()}function*PX({view:r,track:t}){var s;const e=b1();r.add(Q1(Ht,{size:"100%",ref:e}));const n=[];try{for(const a of t.elements)n.push((s=x2.get(a.type))==null?void 0:s.create({containerRef:e,element:a,view:r}))}catch(a){P0("Error creating element track",a)}yield*xe(...n),yield e().remove()}const Tv=(r,t)=>{if(typeof window<"u"){const e=new CustomEvent(r,t);return window.dispatchEvent(e)}},kX=XK("scene",function*(r){const t=b5().variables.get("input",null)(),e=b5().variables.get("playerId",null)();if(t)if(console.log("Scene updated",{playerId:e,input:t}),yield r.add(Q1(V1,{fill:t.backgroundColor??$S,size:"100%"})),t.tracks){const n=[];for(const s of t.tracks)switch(s.type){case t5.VIDEO:n.push(DX({view:r,track:s}));break;case t5.AUDIO:n.push(OX({view:r,track:s}));break;case t5.CAPTION:n.push(IX({view:r,track:s}));break;case t5.SCENE:n.push(VX({view:r,track:s}));break;case t5.ELEMENT:n.push(PX({view:r,track:s}));break}yield*xe(...n),Tv(hv.PLAYER_UPDATE,{detail:{status:"ready",playerId:e,message:"All elements created"}})}else Tv(hv.PLAYER_UPDATE,{detail:{status:"ready",playerId:e,message:"No elements to create"}})}),qX=bM({scenes:[kX]});export{qX as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/visualizer",
-  "version": "0.15.3",
+  "version": "0.15.5",
   "license": "SEE LICENSE IN LICENSE.md",
   "scripts": {
     "start": "twick editor --projectFile ./src/live.tsx",
@@ -22,18 +22,18 @@
   },
   "dependencies": {
     "@preact/signals": "^1.2.1",
-    "@twick/2d": "^0.15.3",
-    "@twick/core": "^0.15.3",
-    "@twick/renderer": "^0.15.3",
-    "@twick/vite-plugin": "^0.15.3",
+    "@twick/2d": "^0.15.5",
+    "@twick/core": "^0.15.5",
+    "@twick/renderer": "^0.15.5",
+    "@twick/vite-plugin": "^0.15.5",
     "date-fns": "^4.1.0",
     "preact": "^10.19.2",
     "crelt": "^1.0.6",
-    "@twick/media-utils": "0.15.3"
+    "@twick/media-utils": "0.15.5"
   },
   "devDependencies": {
-    "@twick/cli": "^0.15.3",
-    "@twick/ui": "^0.15.3",
+    "@twick/cli": "^0.15.5",
+    "@twick/ui": "^0.15.5",
     "typescript": "5.4.2",
     "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "^3.17.1",

package/src/components/track.tsx

@@ -31,7 +31,7 @@ export function* makeVideoTrack({
 }) {
   const frameRef = createRef<any>();
   let prevTime = 0;
-  view.add(<Layout size={"100%"} ref={frameRef} layout />);
+  view.add(<Layout size={"100%"} ref={frameRef} />);
   for (const element of track.elements || []) {
     yield* waitFor(element?.s - prevTime);
     yield* elementController.get("video")?.create({
@@ -171,7 +171,7 @@ export function* makeSceneTrack({
   track: VisualizerTrack;
 }) {
   const frameRef = createRef<any>();
-  view.add(<Layout size={"100%"} ref={frameRef} layout />);
+  view.add(<Layout size={"100%"} ref={frameRef} />);
   for (const sceneElement of track.elements || []) {
     yield* elementController.get("scene")?.create({
       containerRef: frameRef,