framefields 2.14.0 → 2.15.0

package/dist/preview-page/main.js

@@ -0,0 +1,327 @@
+async function Se(n,e){let t=await n.snapshot(e.frame),r=Math.min(1,1600/t.width),i=Math.round(t.width*r),s=Math.round(t.height*r),o=document.createElement("canvas");o.width=i,o.height=s;let a=o.getContext("2d");if(!a)throw new Error("no 2D canvas to draw the note's picture");a.drawImage(t,0,0,i,s),t.close();let l=Math.max(3,i/400),p=f=>{for(let[m,x]of[[l+5,"rgba(0,0,0,0.5)"],[l+2.5,"#fff"],[l,"#3b82f6"]])a.lineWidth=m,a.strokeStyle=x,f()},{x:c,y:h}=e;if(e.w!=null&&e.h!=null){let{w:f,h:m}=e;p(()=>a.strokeRect(c*i,h*s,f*i,m*s))}else{let f=Math.max(16,i/40);p(()=>{a.beginPath(),a.arc(c*i,h*s,f,0,Math.PI*2),a.stroke()}),a.fillStyle="#3b82f6",a.beginPath(),a.arc(c*i,h*s,l,0,Math.PI*2),a.fill()}return o.toDataURL("image/jpeg",.88)}function v(n,e){let t=n/e,r=Math.floor(t/60);return`${r}:${(t-r*60).toFixed(2).padStart(5,"0")}`}function _(n,e){return Math.max(0,Math.min(e-1,Math.round(n)))}function le(n,e){return e>1?n/(e-1)*100:0}function pe(n,e,t){let r=/[#&]t=([\d.]+)/.exec(n);if(r)return _(Number(r[1])*e,t);let i=/[#&]frame=(\d+)/.exec(n);return i?_(Number(i[1]),t):null}function Me(n,e){return n>0?`#t=${Number((n/e).toFixed(3))}`:""}var Pt=[.5,1,2,5,10,15,30,60,120,300,600];function _e(n,e){if(n<=0)return[];let r=(Pt.find(s=>s/n*e>=80)??1200)/5,i=[];for(let s=0;s*r<=n+1e-6;s++){let o=s*r,a=s%5===0,l=o/n*e,p={left:o/n*100,major:a};if(a&&l<e-34){let c=Math.floor(o/60),h=Math.round((o-c*60)*10)/10;p.label=`${c}:${h<10?"0":""}${h}`}i.push(p)}return i}function U(n,e){return n.frame-e.frame||n.id-e.id}function Ce(n,e,t){let r=[];return[...n].sort(U).map(i=>{let s=le(i.frame,e),o=s/100*t,a=r.findIndex(l=>o-l>=16);return a<0&&(a=r.length<3?r.length:2),r[a]=o,{note:i,lane:a,left:s}})}function M(n){return`${Math.round(n*100)}%`}function At(n){return n.w!=null&&n.h!=null?`area ${M(n.x)},${M(n.y)} to ${M(n.x+n.w)},${M(n.y+n.h)}`:`spot ${M(n.x)},${M(n.y)}`}function Te(n,e,t){let r=[`Notes on the preview of ${JSON.stringify(n)}:`];for(let i of e.filter(s=>!s.done).sort(U))r.push(`- Note ${i.id} at ${v(i.frame,t)} (frame ${i.frame}), ${At(i)}: ${i.text}${i.image?` [picture: ${i.image}]`:""}`);return r.join(`
+`)}function Ne(n){return n?n.split("/").slice(-2).join("/"):""}var z=class{constructor(e=()=>Number.POSITIVE_INFINITY,t=()=>performance.now()){this.cap=e;this.now=t}cap;now;#e=null;#t=null;#i=[];#r=null;read(){if(this.#e===null)return{state:"paused",fps:this.#r};let e=this.now(),t=Math.min(2e3,e-this.#e);return this.#i=this.#i.filter(r=>r>e-2e3),t<1e3?{state:"measuring",fps:null}:{state:"playing",fps:Math.min(this.cap(),this.#i.length*1e3/t)}}start(){this.#e=this.now(),this.#t=null,this.#i=[]}stop(){if(this.#e===null)return;let e=this.read();this.#r=e.state==="playing"?e.fps:null,this.#e=null,this.#i=[]}record(e){this.#e===null||e===this.#t||(this.#t=e,this.#i.push(this.now()))}};function Et(n){if(n instanceof Error||typeof n=="object"&&n&&"message"in n){let{message:e,stack:t}=n,r=String(e);if(typeof t=="string"&&t.includes(r))return t.split(`
+`).slice(0,4).join(`
+`);if(r)return r}return typeof n=="string"?n:String(n)}function Re(n){let e=new Set;return(t,r)=>{let i=r.map(Et).join(" ").trim(),s=t+i.replace(/\d+/g,"#");!i||e.has(s)||e.size>100||(e.add(s),n({level:t,message:i.slice(0,4e3)}))}}function Le(n,e){let t=n.error.bind(n),r=n.warn.bind(n);n.error=(...i)=>{t(...i),e("error",i)},n.warn=(...i)=>{r(...i),typeof i[0]=="string"&&i[0].startsWith("[framefields]")&&e("warning",i)}}var He="/@framefields/player.js";async function he(n){let e=await n;if(!e.ok)throw new Error(`HTTP ${e.status}`);return await e.json()}function Oe(n,e,t=!1){return fetch(n,{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify(e),keepalive:t})}function Be(){return{meta:()=>he(fetch("/meta")),listNotes:async()=>{let n=await he(fetch("/@framefields/notes"));return Array.isArray(n)?n:[]},changeNote:n=>he(Oe("/@framefields/notes",n)),log(n){Oe("/@framefields/log",n,!0).catch(()=>{})},mixAudio(){fetch("/audio/mix",{method:"POST"}).catch(()=>{})},async audio(){let n=await fetch("/audio");if(!n.ok)throw new Error(`HTTP ${n.status}`);return n.arrayBuffer()},events(n){let e=new EventSource("/events"),t=r=>JSON.parse(r.data);return e.addEventListener("hello",r=>n.hello(t(r).session)),e.addEventListener("error",()=>n.lost()),e.addEventListener("notes",r=>n.notes(t(r))),e.addEventListener("audio",r=>n.audio(t(r))),()=>e.close()}}}var C=1200,De=.001;var F={mixing:"Mixing audio",loading:"Loading audio",ready:"Audio ready",none:"No audio",error:"Audio failed"},b=2,St=4,Mt=64;function _t(){let n;try{n=new Worker(He,{type:"module"})}catch{return null}let e=new Map,t=0,r=null,i=o=>{r??=o;for(let a of e.values())a.reject(r);e.clear()},s=new Promise((o,a)=>{n.onmessage=l=>{let p=l.data;if("ready"in p){if(p.ready)o();else{let h=new Error(p.error);a(h),i(h)}return}let c=e.get(p.id);c&&(e.delete(p.id),"error"in p?c.reject(new Error(p.error)):c.resolve(p.mix))},n.onerror=l=>{let p=new Error(l.message||"the mixing worker failed");a(p),i(p)}});return s.catch(()=>{}),{async mix(o,a){if(await s,r)throw r;return new Promise((l,p)=>{let c=++t;e.set(c,{resolve:l,reject:p}),n.postMessage({id:c,range:o,chain:a})})},stop(){n.terminate(),i(new Error("stopped"))}}}var de=class{constructor(e,t){this.player=e;this.total=Math.max(1,Math.ceil(t/b))}player;worker=_t();blocks=new Map;order=[];pending=new Map;queue=[];busy=!1;seen=new Set;peak=0;gain=1;fill=0;filling=!1;total;mix(e,t){let r=this.worker;return r?r.mix(e,t).catch(i=>(this.worker&&(console.warn("The soundtrack's mixing worker failed, so the page mixes it:",i),this.worker.stop(),this.worker=null),this.player.mixAudio(e,t))):this.player.mixAudio(e,t)}};function Ie(n,e){let t=new Float32Array(n.length);for(let r=0;r<n.length;r++){let i=Math.tanh(n[r]*e);t[r]=Number.isNaN(i)?0:i}return t}var q=class{constructor(e){this.host=e}host;mode="browser";state="mixing";error="";buffer=null;peaks=null;peaksVersion=0;muted=!1;volume=.9;#e=null;#t=null;#i=null;#r=null;#s=null;#o=null;get usable(){return this.state==="ready"&&(!!this.buffer||!!this.#r)}get durationSec(){return this.buffer?this.buffer.duration:null}get mixed(){let e=this.#r;if(!e)return null;let t=0;for(let r of e.blocks.values())r.exact&&t++;return{blocks:e.seen.size,of:e.total,exact:t}}get mixer(){return this.#r?this.#r.worker?"worker":"page":this.mode==="server"?"server":null}attach(e,t){this.#o=e,this.mode==="browser"&&this.#f(e,t)}load(e,t){if(e?.state==="browser"){this.mode="browser",this.#n("mixing"),this.#o&&this.#f(this.#o,t);return}if(this.mode="server",this.stopClock(),this.buffer=null,this.#l(null),e?.state!=="ready"){this.#n(e?.state??"none",e?.state==="error"?e.error:"");return}this.#l(e.peaks),this.#n("loading");let r=this.#c();this.host.server.audio().then(i=>r.decodeAudioData(i)).then(i=>{this.buffer=i,this.#n("ready")},i=>this.#n("error",String(i?.message??i)))}async ready(e){let t=this.#r;!t||this.state==="none"||(await this.#d(t,this.#p(e),!0).catch(()=>{}),this.#r&&this.state==="mixing"&&this.#n("ready"))}get waitsBeforePlay(){return!!this.#r&&this.state!=="none"}setMuted(e){this.muted=e,this.#h()}setVolume(e){this.volume=e,this.muted=e===0,this.#h()}startClock(e,t){let r=this.#e;if(this.#r&&r&&this.state==="ready")return this.#k(this.#r,r,e/t);if(this.buffer&&r&&this.#t){r.resume();let s=r.createBufferSource();s.buffer=this.buffer,s.connect(this.#t);let o=r.currentTime+.06,a=e/t;return a<this.buffer.duration&&s.start(o,a),this.#i=s,()=>Math.max(0,r.currentTime-o)}let i=performance.now();return()=>(performance.now()-i)/1e3}stopClock(){this.#m();let e=this.#i;if(e){try{e.stop()}catch{}e.disconnect(),this.#i=null}}#n(e,t=""){this.state=e,this.error=t,this.host.changed()}#l(e){this.peaks=e,this.peaksVersion++}#a(){let e=this.host.film();return e?e.frameCount/e.fps:0}#p(e){let t=this.host.film()?.fps??30;return Math.floor(e/t/b)}#c(){if(this.#e)return this.#e;let e=window.AudioContext??window.webkitAudioContext,t=new e;return this.#t=t.createGain(),this.#t.connect(t.destination),this.#e=t,this.#h(),t}#h(){this.#t&&(this.#t.gain.value=this.muted?0:this.volume),this.host.changed()}#f(e,t){this.#r?.worker?.stop(),this.stopClock(),this.buffer=null,this.#l(new Array(C).fill(0));let r=new de(e,this.#a());this.#r=r,this.#c(),this.#n("mixing"),this.#d(r,this.#p(t),!0).then(()=>{this.#r===r&&this.state==="mixing"&&this.#n("ready")},()=>{})}#d(e,t,r){let i=e.blocks.get(t);if(i)return Promise.resolve(i);let s=e.pending.get(t);if(s)return r&&Ct(e,t),s;let o=je(e,t,t===e.fill?"fill":"play",r,!0);return this.#u(e),o}#u(e){if(e.busy||this.#r!==e||!e.queue.length&&(!e.filling&&e.fill<e.total&&je(e,e.fill,"fill",!1,!e.pending.has(e.fill)),!e.queue.length))return;e.busy=!0;let t=e.queue.shift(),r=this.#a(),i={startSec:t.i*b,endSec:Math.min(r,(t.i+1)*b)};e.mix(i,t.chain).then(s=>{this.#r===e&&this.#y(e,t.i,s),t.chain==="fill"&&(e.fill=t.i+1,e.filling=!1),t.resolve(e.blocks.get(t.i))},s=>{t.chain==="fill"&&(e.filling=!1),t.reject(s),this.#w(e,s)}).then(()=>{t.own&&e.pending.delete(t.i),e.busy=!1,this.#u(e)})}#y(e,t,r){let i={left:r.left,right:r.right,sampleRate:r.sampleRate,exact:r.exact},s=e.blocks.get(t);if(!s||!s.exact||i.exact)for(e.blocks.set(t,i),e.order.push(t);e.order.length>Mt;)e.blocks.delete(e.order.shift());if(!e.seen.has(t)){if(e.seen.add(t),e.peak=Math.max(e.peak,r.peak),this.#g(t,i),e.seen.size<e.total){this.host.changed();return}e.gain=e.peak>.95?.92/e.peak:1,e.peak<De?this.#n("none"):this.host.changed()}}#g(e,t){let r=this.peaks;if(!r)return;let i=this.#a(),s=Math.floor(e*b/i*C),o=Math.min(C,Math.ceil(Math.min(i,(e+1)*b)/i*C)),a=i/C*t.sampleRate,l=e*b*t.sampleRate;for(let p=s;p<o;p++){let c=Math.max(0,Math.floor(p*a-l)),h=Math.min(t.left.length,Math.floor((p+1)*a-l)),f=r[p];for(let m=c;m<h;m++)f=Math.max(f,Math.abs(t.left[m]),Math.abs(t.right[m]));r[p]=Math.min(1,f)}this.peaksVersion++}#w(e,t){this.#r===e&&(e.worker?.stop(),this.#r=null,this.stopClock(),console.warn("Mixing the soundtrack in the browser failed, so the preview server mixes it:",t),this.mode="server",this.#n("mixing"),this.host.server.mixAudio())}#k(e,t,r){t.resume();let i={t0:r,startAt:t.currentTime+.08,next:Math.floor(r/b),sources:[],timer:void 0};this.#s=i;let s=()=>{if(this.#s!==i||this.#r!==e)return;let o=t.currentTime-i.startAt+i.t0;for(;i.next<e.total&&i.next*b<o+St;){let a=e.blocks.get(i.next);if(!a){this.#d(e,i.next,!0).then(s,()=>{});return}this.#$(t,i,i.next,a,e.gain),i.next++}};return i.timer=setInterval(s,250),s(),()=>Math.max(0,t.currentTime-i.startAt)}#$(e,t,r,i,s){if(!this.#t)return;let o=e.createBuffer(2,i.left.length,i.sampleRate);o.copyToChannel(Ie(i.left,s),0),o.copyToChannel(Ie(i.right,s),1);let a=e.createBufferSource();a.buffer=o,a.connect(this.#t);let l=t.startAt+(r*b-t.t0),p=Math.max(l,e.currentTime+.02),c=p-l;c>=o.duration||(a.start(p,c),t.sources.push(a),a.onended=()=>{t.sources=t.sources.filter(h=>h!==a)})}#m(){let e=this.#s;if(this.#s=null,!!e){clearInterval(e.timer);for(let t of e.sources){try{t.stop()}catch{}t.disconnect()}}}};function je(n,e,t,r,i){t==="fill"&&(n.filling=!0);let s=new Promise((o,a)=>{let l={i:e,chain:t,own:i,resolve:o,reject:a};r?n.queue.unshift(l):n.queue.push(l)});return i?n.pending.set(e,s):s.catch(()=>{}),s}function Ct(n,e){let t=n.queue.findIndex(r=>r.i===e);t>0&&n.queue.unshift(n.queue.splice(t,1)[0])}function Tt(n,e,t){return t&&t.w>.01&&t.h>.01?{frame:n,...t,text:""}:{frame:n,x:e.x,y:e.y,text:""}}var ce=n=>new Promise(e=>setTimeout(e,n)),W=class extends EventTarget{meta=null;player=null;pageState="loading";error=null;frame=0;playing=!1;stalled=!1;offline=!1;fps={state:"paused",fps:null};notesOn=!1;notes=[];draft=null;openId=null;saving=!1;saveError=!1;panelOpen=!1;toastText="";toastOn=!1;soundtrack;report;server;#e;#t;#i;#r=null;#s=!1;#o=0;#n;#l=0;#a=new Set;#p=[];#c;#h;#f=new AbortController;#d=!1;constructor(e={}){super(),this.server=e.server??Be(),this.#e=e.win??window,this.#t=e.embedder!==void 0?e.embedder:this.#e.parent!==this.#e?this.#e.parent:null,this.report=Re(t=>this.server.log(t)),this.#i=new z(()=>this.meta?.fps??1/0),this.soundtrack=new q({server:this.server,film:()=>this.meta,changed:()=>this.changed()})}get lastFrame(){return(this.meta?.frameCount??1)-1}get buffering(){return this.pageState!=="error"&&(this.#s||this.stalled)}noteById(e){return this.notes.find(t=>t.id===e)}get openCount(){return this.notes.filter(e=>!e.done).length}get canNote(){return this.notesOn&&!!this.player&&!this.playing}changed(){this.#d||(this.#d=!0,queueMicrotask(()=>{this.#d=!1,this.dispatchEvent(new Event("change"))}))}subscribe(e){return this.addEventListener("change",e),()=>this.removeEventListener("change",e)}async start(){let e=this.#e,t=this.#f.signal,r=this.server.events({hello:l=>this.#w(l),lost:()=>this.#k(),notes:l=>this.#S(l),audio:l=>this.#$(l)});t.addEventListener("abort",r);let i={signal:t};e.addEventListener("framefields:player",()=>{this.meta&&this.#u()},i),e.addEventListener("error",l=>{this.player?this.report("error",[l.error??l.message]):this.showError(l.error??l.message)},i),e.addEventListener("unhandledrejection",l=>this.report("error",[l.reason]),i),e.addEventListener("hashchange",()=>this.#_(),i),e.document.addEventListener("visibilitychange",()=>{e.document.hidden&&this.playing&&this.pause()},i),e.framefieldsPreview=this.api();let s=await this.server.meta(),{audio:o,...a}=s;this.#r=a.session,this.meta=a,e.document.title=`${a.title} \xB7 preview`,this.notesOn=!!a.notesDir,this.#N(),this.soundtrack.load(o,this.frame),this.#m(pe(e.location.hash,a.fps,a.frameCount)??0),this.#s=!0,this.#u()}close(){this.#f.abort(),this.#b()}#u(){let e=this.#e.framefieldsPlayer;e&&e.then(t=>{this.player=t,this.soundtrack.attach(t,this.frame),this.changed(),this.#P(this.frame).then(()=>this.#y())},t=>{this.showError(t),this.#e.document.documentElement.dataset.preview="error",this.#g(t instanceof Error?t:new Error(String(t)))})}#y(){this.pageState="ready",this.#e.document.documentElement.dataset.preview="ready",this.#g(),this.#v(),this.changed(),this.#t?.postMessage({type:"framefields-preview:ready",seekByHash:!0},"*")}whenReady(){return this.player?Promise.resolve():this.pageState==="error"?Promise.reject(new Error(this.error??"the preview failed")):new Promise((e,t)=>this.#p.push([e,t]))}#g(e){for(let[t,r]of this.#p.splice(0))e?r(e):t()}showError(e){this.report("error",[e]),this.pageState="error",this.error=String(e?.message??e),this.changed()}#w(e){if(this.#r&&e!==this.#r){this.#e.location.reload();return}this.offline=!1,this.changed()}#k(){this.meta&&(this.playing&&(this.#b(),this.#A()),this.offline=!0,this.changed())}#$(e){this.meta&&this.soundtrack.load(e,this.frame)}#m(e){this.frame=e,this.changed()}#P(e){this.#m(e);let t=this.player;return t?(this.#s=!0,t.render(e).then(()=>{this.#s=!1,this.changed()})):Promise.resolve()}seek(e){this.#b();let t=this.#P(_(e,this.meta?.frameCount??1));return this.#A(),this.#v(),t}step(e){return this.seek(this.frame+e)}#A(){if(!this.meta)return;let{location:e,history:t}=this.#e,r=Me(this.frame,this.meta.fps)||e.pathname+e.search;try{t.replaceState(null,"",r)}catch{}}#_(){let e=this.meta;if(!e)return;let t=pe(this.#e.location.hash,e.fps,e.frameCount);t!==null&&(this.playing&&this.pause(),t!==this.frame&&this.seek(t))}#v(){clearTimeout(this.#n),this.#l++,!(!this.player?.hasVision||this.playing)&&(this.#n=setTimeout(()=>{this.#C()},1e3))}async#C(){let e=this.player,t=this.meta;if(!e||!t)return;let r=++this.#l,i=Math.min(this.lastFrame,this.frame+Math.round(t.fps*20));for(let s=this.frame+1;s<=i&&r===this.#l&&!this.playing;s++)if(!this.#a.has(s)){if(!await e.warm(s)){this.#v();return}this.#a.add(s),await ce(0)}}play(){if(this.playing||!this.player)return;this.playing=!0,clearTimeout(this.#n),this.#l++;let e=++this.#o,t=()=>this.playing&&e===this.#o;this.openId!=null&&this.closePop(),this.draft&&!this.draft.text.trim()&&this.cancelDraft(),this.frame>=this.lastFrame&&(this.frame=0),this.changed(),this.#T(this.player,t).catch(r=>this.report("error",[r])).finally(()=>{e===this.#o&&this.playing&&this.pause()})}pause(){this.#b(),this.#A(),this.#P(this.frame).then(()=>this.#v())}togglePlay(){this.playing?this.pause():this.play()}#b(){this.playing=!1,this.soundtrack.stopClock(),this.stalled=!1,this.#i.stop(),clearInterval(this.#h),this.#h=void 0,this.#E()}#E(){this.fps=this.#i.read(),this.changed()}#x(e){this.stalled=e,this.changed()}async#T(e,t){let r=this.meta?.fps??30;if(this.#i.start(),this.#E(),this.#h=setInterval(()=>this.#E(),500),this.soundtrack.waitsBeforePlay){if(this.#x(!0),await this.soundtrack.ready(this.frame),!t())return;this.#x(!1)}if(this.soundtrack.state==="loading"){for(this.#x(!0);t()&&this.soundtrack.state==="loading";)await ce(50);if(!t())return;this.#x(!1)}let i=this.frame,s=this.soundtrack.startClock(i,r),o=-1;for(;t();){let a=Math.min(this.lastFrame,i+Math.floor(s()*r));if(a===o){await ce(4);continue}this.#m(a);let l=await e.render(a,{cache:!1});if(!t()||(o=l,this.#i.record(l),l>=this.lastFrame))return}}#N(){this.notesOn&&this.server.listNotes().then(e=>this.#S(e),()=>{})}#S(e){this.notes=e,this.openId!=null&&!this.noteById(this.openId)&&this.closePop(),this.changed()}#M(e){let t=this.notes.findIndex(r=>r.id===e.id);t>=0?this.notes[t]=e:this.notes.push(e),this.changed()}beginDraft(e,t){this.openId=null,this.saveError=!1,this.draft=Tt(this.frame,e,t),this.changed()}setDraftText(e){this.draft&&(this.draft.text=e,this.changed())}cancelDraft(){this.draft&&(this.draft=null,this.closePop())}async saveDraft(){let e=this.draft,t=this.meta,r=e?.text.trim();if(!e||!t||!r||this.saving)return!1;this.saving=!0,this.saveError=!1,this.changed();try{let i;try{this.player&&(i=await Se(this.player,e))}catch(o){this.report("warning",["[framefields] no picture for the note:",o])}let s=await this.server.changeNote({op:"add",note:{frame:e.frame,time:e.frame/t.fps,x:e.x,y:e.y,w:e.w,h:e.h,text:r,image:i}});return this.draft===e&&(this.draft=null),this.closePop(),this.#M(s),this.toast(`Note ${s.id} saved`),!0}catch{return this.saveError=!0,!1}finally{this.saving=!1,this.changed()}}openCard(e){this.noteById(e)&&(this.draft&&this.cancelDraft(),this.openId=e,this.changed())}closePop(){this.openId=null,this.changed()}setDone(e,t){this.server.changeNote({op:"update",id:e,done:t}).then(r=>this.#M(r),()=>this.toast("Couldn't save. Is the preview running?"))}removeNote(e){this.server.changeNote({op:"remove",id:e}).then(()=>{this.notes=this.notes.filter(t=>t.id!==e),this.closePop()},()=>this.toast("Couldn't delete. Is the preview running?"))}goToNote(e){let t=this.noteById(e);t&&(this.panelOpen=!1,this.seek(t.frame).then(()=>this.openCard(e)))}setPanel(e){this.panelOpen=e,this.changed()}toast(e){this.toastText=e,this.toastOn=!0,clearTimeout(this.#c),this.#c=setTimeout(()=>{this.toastOn=!1,this.changed()},2200),this.changed()}api(){return{seek:async e=>(await this.whenReady(),this.seek(Number(e)*(this.meta?.fps??30))),seekFrame:async e=>(await this.whenReady(),this.seek(e)),play:async()=>{await this.whenReady(),this.play()},pause:()=>{this.playing&&this.pause()},notes:()=>this.notes.slice(),state:()=>this.snapshot()}}snapshot(){let e=this.meta,t=this.#i.read().fps;return{state:this.pageState,error:this.pageState==="error"?this.error:null,frame:this.frame,time:e?Number((this.frame/e.fps).toFixed(3)):0,playing:this.playing,buffering:this.stalled,audio:this.soundtrack.state,audioMixed:this.soundtrack.mixed,audioMixer:this.soundtrack.mixer,connected:!this.offline,playbackFps:t==null?null:Number(t.toFixed(1)),renderMs:this.player?Math.round(this.player.lastRenderMs):null,meta:e&&{title:e.title,width:e.width,height:e.height,fps:e.fps,frameCount:e.frameCount,duration:Number((this.lastFrame/e.fps).toFixed(3))}}}};var V=globalThis,X=V.ShadowRoot&&(V.ShadyCSS===void 0||V.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,ze=Symbol(),Ue=new WeakMap,K=class{constructor(e,t,r){if(this._$cssResult$=!0,r!==ze)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,t=this.t;if(X&&e===void 0){let r=t!==void 0&&t.length===1;r&&(e=Ue.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),r&&Ue.set(t,e))}return e}toString(){return this.cssText}},qe=n=>new K(typeof n=="string"?n:n+"",void 0,ze);var Fe=(n,e)=>{if(X)n.adoptedStyleSheets=e.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(let t of e){let r=document.createElement("style"),i=V.litNonce;i!==void 0&&r.setAttribute("nonce",i),r.textContent=t.cssText,n.appendChild(r)}},ue=X?n=>n:n=>n instanceof CSSStyleSheet?(e=>{let t="";for(let r of e.cssRules)t+=r.cssText;return qe(t)})(n):n;var{is:Nt,defineProperty:Rt,getOwnPropertyDescriptor:Lt,getOwnPropertyNames:Ot,getOwnPropertySymbols:Ht,getPrototypeOf:Bt}=Object,J=globalThis,We=J.trustedTypes,Dt=We?We.emptyScript:"",It=J.reactiveElementPolyfillSupport,L=(n,e)=>n,fe={toAttribute(n,e){switch(e){case Boolean:n=n?Dt:null;break;case Object:case Array:n=n==null?n:JSON.stringify(n)}return n},fromAttribute(n,e){let t=n;switch(e){case Boolean:t=n!==null;break;case Number:t=n===null?null:Number(n);break;case Object:case Array:try{t=JSON.parse(n)}catch{t=null}}return t}},Ke=(n,e)=>!Nt(n,e),Ve={attribute:!0,type:String,converter:fe,reflect:!1,useDefault:!1,hasChanged:Ke};Symbol.metadata??=Symbol("metadata"),J.litPropertyMetadata??=new WeakMap;var y=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=Ve){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){let r=Symbol(),i=this.getPropertyDescriptor(e,r,t);i!==void 0&&Rt(this.prototype,e,i)}}static getPropertyDescriptor(e,t,r){let{get:i,set:s}=Lt(this.prototype,e)??{get(){return this[t]},set(o){this[t]=o}};return{get:i,set(o){let a=i?.call(this);s?.call(this,o),this.requestUpdate(e,a,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??Ve}static _$Ei(){if(this.hasOwnProperty(L("elementProperties")))return;let e=Bt(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(L("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(L("properties"))){let t=this.properties,r=[...Ot(t),...Ht(t)];for(let i of r)this.createProperty(i,t[i])}let e=this[Symbol.metadata];if(e!==null){let t=litPropertyMetadata.get(e);if(t!==void 0)for(let[r,i]of t)this.elementProperties.set(r,i)}this._$Eh=new Map;for(let[t,r]of this.elementProperties){let i=this._$Eu(t,r);i!==void 0&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let t=[];if(Array.isArray(e)){let r=new Set(e.flat(1/0).reverse());for(let i of r)t.unshift(ue(i))}else e!==void 0&&t.push(ue(e));return t}static _$Eu(e,t){let r=t.attribute;return r===!1?void 0:typeof r=="string"?r:typeof e=="string"?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map,t=this.constructor.elementProperties;for(let r of t.keys())this.hasOwnProperty(r)&&(e.set(r,this[r]),delete this[r]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return Fe(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,r){this._$AK(e,r)}_$ET(e,t){let r=this.constructor.elementProperties.get(e),i=this.constructor._$Eu(e,r);if(i!==void 0&&r.reflect===!0){let s=(r.converter?.toAttribute!==void 0?r.converter:fe).toAttribute(t,r.type);this._$Em=e,s==null?this.removeAttribute(i):this.setAttribute(i,s),this._$Em=null}}_$AK(e,t){let r=this.constructor,i=r._$Eh.get(e);if(i!==void 0&&this._$Em!==i){let s=r.getPropertyOptions(i),o=typeof s.converter=="function"?{fromAttribute:s.converter}:s.converter?.fromAttribute!==void 0?s.converter:fe;this._$Em=i;let a=o.fromAttribute(t,s.type);this[i]=a??this._$Ej?.get(i)??a,this._$Em=null}}requestUpdate(e,t,r,i=!1,s){if(e!==void 0){let o=this.constructor;if(i===!1&&(s=this[e]),r??=o.getPropertyOptions(e),!((r.hasChanged??Ke)(s,t)||r.useDefault&&r.reflect&&s===this._$Ej?.get(e)&&!this.hasAttribute(o._$Eu(e,r))))return;this.C(e,t,r)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(e,t,{useDefault:r,reflect:i,wrapped:s},o){r&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,o??t??this[e]),s!==!0||o!==void 0)||(this._$AL.has(e)||(this.hasUpdated||r||(t=void 0),this._$AL.set(e,t)),i===!0&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[i,s]of this._$Ep)this[i]=s;this._$Ep=void 0}let r=this.constructor.elementProperties;if(r.size>0)for(let[i,s]of r){let{wrapped:o}=s,a=this[i];o!==!0||this._$AL.has(i)||a===void 0||this.C(i,void 0,s,a)}}let e=!1,t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(r=>r.hostUpdate?.()),this.update(t)):this._$EM()}catch(r){throw e=!1,this._$EM(),r}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(e){}firstUpdated(e){}};y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[L("elementProperties")]=new Map,y[L("finalized")]=new Map,It?.({ReactiveElement:y}),(J.reactiveElementVersions??=[]).push("2.1.2");var we=globalThis,Xe=n=>n,Y=we.trustedTypes,Je=Y?Y.createPolicy("lit-html",{createHTML:n=>n}):void 0,tt="$lit$",k=`lit$${Math.random().toFixed(9).slice(2)}$`,rt="?"+k,jt=`<${rt}>`,E=document,H=()=>E.createComment(""),B=n=>n===null||typeof n!="object"&&typeof n!="function",ke=Array.isArray,Ut=n=>ke(n)||typeof n?.[Symbol.iterator]=="function",me=`[ 	
+\f\r]`,O=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Ye=/-->/g,Ge=/>/g,P=RegExp(`>|${me}(?:([^\\s"'>=/]+)(${me}*=${me}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),Ze=/'/g,Qe=/"/g,it=/^(?:script|style|textarea|title)$/i,$e=n=>(e,...t)=>({_$litType$:n,strings:e,values:t}),d=$e(1),nt=$e(2),_r=$e(3),w=Symbol.for("lit-noChange"),u=Symbol.for("lit-nothing"),et=new WeakMap,A=E.createTreeWalker(E,129);function st(n,e){if(!ke(n)||!n.hasOwnProperty("raw"))throw Error("invalid template strings array");return Je!==void 0?Je.createHTML(e):e}var zt=(n,e)=>{let t=n.length-1,r=[],i,s=e===2?"<svg>":e===3?"<math>":"",o=O;for(let a=0;a<t;a++){let l=n[a],p,c,h=-1,f=0;for(;f<l.length&&(o.lastIndex=f,c=o.exec(l),c!==null);)f=o.lastIndex,o===O?c[1]==="!--"?o=Ye:c[1]!==void 0?o=Ge:c[2]!==void 0?(it.test(c[2])&&(i=RegExp("</"+c[2],"g")),o=P):c[3]!==void 0&&(o=P):o===P?c[0]===">"?(o=i??O,h=-1):c[1]===void 0?h=-2:(h=o.lastIndex-c[2].length,p=c[1],o=c[3]===void 0?P:c[3]==='"'?Qe:Ze):o===Qe||o===Ze?o=P:o===Ye||o===Ge?o=O:(o=P,i=void 0);let m=o===P&&n[a+1].startsWith("/>")?" ":"";s+=o===O?l+jt:h>=0?(r.push(p),l.slice(0,h)+tt+l.slice(h)+k+m):l+k+(h===-2?a:m)}return[st(n,s+(n[t]||"<?>")+(e===2?"</svg>":e===3?"</math>":"")),r]},D=class n{constructor({strings:e,_$litType$:t},r){let i;this.parts=[];let s=0,o=0,a=e.length-1,l=this.parts,[p,c]=zt(e,t);if(this.el=n.createElement(p,r),A.currentNode=this.el.content,t===2||t===3){let h=this.el.content.firstChild;h.replaceWith(...h.childNodes)}for(;(i=A.nextNode())!==null&&l.length<a;){if(i.nodeType===1){if(i.hasAttributes())for(let h of i.getAttributeNames())if(h.endsWith(tt)){let f=c[o++],m=i.getAttribute(h).split(k),x=/([.?@])?(.*)/.exec(f);l.push({type:1,index:s,name:x[2],strings:m,ctor:x[1]==="."?ve:x[1]==="?"?be:x[1]==="@"?xe:N}),i.removeAttribute(h)}else h.startsWith(k)&&(l.push({type:6,index:s}),i.removeAttribute(h));if(it.test(i.tagName)){let h=i.textContent.split(k),f=h.length-1;if(f>0){i.textContent=Y?Y.emptyScript:"";for(let m=0;m<f;m++)i.append(h[m],H()),A.nextNode(),l.push({type:2,index:++s});i.append(h[f],H())}}}else if(i.nodeType===8)if(i.data===rt)l.push({type:2,index:s});else{let h=-1;for(;(h=i.data.indexOf(k,h+1))!==-1;)l.push({type:7,index:s}),h+=k.length-1}s++}}static createElement(e,t){let r=E.createElement("template");return r.innerHTML=e,r}};function T(n,e,t=n,r){if(e===w)return e;let i=r!==void 0?t._$Co?.[r]:t._$Cl,s=B(e)?void 0:e._$litDirective$;return i?.constructor!==s&&(i?._$AO?.(!1),s===void 0?i=void 0:(i=new s(n),i._$AT(n,t,r)),r!==void 0?(t._$Co??=[])[r]=i:t._$Cl=i),i!==void 0&&(e=T(n,i._$AS(n,e.values),i,r)),e}var ge=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:r}=this._$AD,i=(e?.creationScope??E).importNode(t,!0);A.currentNode=i;let s=A.nextNode(),o=0,a=0,l=r[0];for(;l!==void 0;){if(o===l.index){let p;l.type===2?p=new I(s,s.nextSibling,this,e):l.type===1?p=new l.ctor(s,l.name,l.strings,this,e):l.type===6&&(p=new ye(s,this,e)),this._$AV.push(p),l=r[++a]}o!==l?.index&&(s=A.nextNode(),o++)}return A.currentNode=E,i}p(e){let t=0;for(let r of this._$AV)r!==void 0&&(r.strings!==void 0?(r._$AI(e,r,t),t+=r.strings.length-2):r._$AI(e[t])),t++}},I=class n{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,r,i){this.type=2,this._$AH=u,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=r,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=T(this,e,t),B(e)?e===u||e==null||e===""?(this._$AH!==u&&this._$AR(),this._$AH=u):e!==this._$AH&&e!==w&&this._(e):e._$litType$!==void 0?this.$(e):e.nodeType!==void 0?this.T(e):Ut(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==u&&B(this._$AH)?this._$AA.nextSibling.data=e:this.T(E.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:r}=e,i=typeof r=="number"?this._$AC(e):(r.el===void 0&&(r.el=D.createElement(st(r.h,r.h[0]),this.options)),r);if(this._$AH?._$AD===i)this._$AH.p(t);else{let s=new ge(i,this),o=s.u(this.options);s.p(t),this.T(o),this._$AH=s}}_$AC(e){let t=et.get(e.strings);return t===void 0&&et.set(e.strings,t=new D(e)),t}k(e){ke(this._$AH)||(this._$AH=[],this._$AR());let t=this._$AH,r,i=0;for(let s of e)i===t.length?t.push(r=new n(this.O(H()),this.O(H()),this,this.options)):r=t[i],r._$AI(s),i++;i<t.length&&(this._$AR(r&&r._$AB.nextSibling,i),t.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let r=Xe(e).nextSibling;Xe(e).remove(),e=r}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},N=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,r,i,s){this.type=1,this._$AH=u,this._$AN=void 0,this.element=e,this.name=t,this._$AM=i,this.options=s,r.length>2||r[0]!==""||r[1]!==""?(this._$AH=Array(r.length-1).fill(new String),this.strings=r):this._$AH=u}_$AI(e,t=this,r,i){let s=this.strings,o=!1;if(s===void 0)e=T(this,e,t,0),o=!B(e)||e!==this._$AH&&e!==w,o&&(this._$AH=e);else{let a=e,l,p;for(e=s[0],l=0;l<s.length-1;l++)p=T(this,a[r+l],t,l),p===w&&(p=this._$AH[l]),o||=!B(p)||p!==this._$AH[l],p===u?e=u:e!==u&&(e+=(p??"")+s[l+1]),this._$AH[l]=p}o&&!i&&this.j(e)}j(e){e===u?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}},ve=class extends N{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===u?void 0:e}},be=class extends N{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==u)}},xe=class extends N{constructor(e,t,r,i,s){super(e,t,r,i,s),this.type=5}_$AI(e,t=this){if((e=T(this,e,t,0)??u)===w)return;let r=this._$AH,i=e===u&&r!==u||e.capture!==r.capture||e.once!==r.once||e.passive!==r.passive,s=e!==u&&(r===u||i);i&&this.element.removeEventListener(this.name,this,r),s&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},ye=class{constructor(e,t,r){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=r}get _$AU(){return this._$AM._$AU}_$AI(e){T(this,e)}};var qt=we.litHtmlPolyfillSupport;qt?.(D,I),(we.litHtmlVersions??=[]).push("3.3.3");var ot=(n,e,t)=>{let r=t?.renderBefore??e,i=r._$litPart$;if(i===void 0){let s=t?.renderBefore??null;r._$litPart$=i=new I(e.insertBefore(H(),s),s,void 0,t??{})}return i._$AI(n),i};var Pe=globalThis,$=class extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=ot(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return w}};$._$litElement$=!0,$.finalized=!0,Pe.litElementHydrateSupport?.({LitElement:$});var Ft=Pe.litElementPolyfillSupport;Ft?.({LitElement:$});(Pe.litElementVersions??=[]).push("4.2.2");var g=class extends ${static properties={app:{attribute:!1}};#e;createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.#t()}disconnectedCallback(){super.disconnectedCallback(),this.#e?.(),this.#e=void 0}willUpdate(e){e.has("app")&&this.#t()}#t(){this.#e?.(),this.#e=this.app?.subscribe(()=>this.requestUpdate())}};var at=nt`<g fill="none" stroke="currentColor" stroke-linecap="round"><path d="M184 56H86q-30 0-30 30v98M328 56h98q30 0 30 30v98M184 456H86q-30 0-30-30v-98M328 456h98q30 0 30-30v-98" stroke-width="34" stroke-linejoin="round"/><path d="M176 182v148m0-148c0 74 60 74 100 74" stroke-width="28"/></g><g fill="currentColor"><circle cx="176" cy="172" r="32"/><circle cx="176" cy="340" r="32"/><path d="M284 200l78 56-78 56z" stroke="currentColor" stroke-width="34" stroke-linejoin="round"/></g>`,R=d`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 8.5l3 3 6-7"/></svg>`,G=d`<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>`,lt=d`<svg viewBox="0 0 16 16" fill="currentColor"><path d="M3 3h1.6v10H3zM13 3.6v8.8a.6.6 0 0 1-.92.5L5.8 8.5a.6.6 0 0 1 0-1l6.28-4.4a.6.6 0 0 1 .92.5z"/></svg>`,pt=d`<svg viewBox="0 0 16 16" fill="currentColor"><path d="M11.4 3H13v10h-1.6zM3 3.6v8.8a.6.6 0 0 0 .92.5l6.28-4.4a.6.6 0 0 0 0-1L3.92 3.1A.6.6 0 0 0 3 3.6z"/></svg>`,ht=d`<svg viewBox="0 0 16 16" fill="currentColor"><path d="M4.5 2.9v10.2a.7.7 0 0 0 1.06.6l8.1-5.1a.7.7 0 0 0 0-1.2l-8.1-5.1a.7.7 0 0 0-1.06.6z"/></svg>`,dt=d`<svg viewBox="0 0 16 16" fill="currentColor"><rect x="3.5" y="2.5" width="3.2" height="11" rx=".8"/><rect x="9.3" y="2.5" width="3.2" height="11" rx=".8"/></svg>`,ct=d`<svg class="spin" viewBox="0 0 50 50" aria-hidden="true"><circle cx="25" cy="25" r="18"/></svg>`,ut=d`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><path d="M3 2.75h10a1.25 1.25 0 0 1 1.25 1.25v6.5A1.25 1.25 0 0 1 13 11.75H7.5L4.5 14v-2.25H3A1.25 1.25 0 0 1 1.75 10.5V4A1.25 1.25 0 0 1 3 2.75z"/></svg>`,ft=d`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="5.25" y="5.25" width="8" height="8" rx="1.5"/><path d="M10.75 3.5V3.25a1.5 1.5 0 0 0-1.5-1.5h-5.5a1.5 1.5 0 0 0-1.5 1.5v5.5a1.5 1.5 0 0 0 1.5 1.5H4"/></svg>`,mt=d`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6h2.2L8 3.2v9.6L4.7 10H2.5z" fill="currentColor" stroke="none"/><path d="M10.6 5.6a3.4 3.4 0 0 1 0 4.8M12.4 3.9a5.8 5.8 0 0 1 0 8.2"/></svg>`,gt=d`<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M2.5 6h2.2L8 3.2v9.6L4.7 10H2.5z" fill="currentColor" stroke="none"/><path d="M10.5 6l3.5 4M14 6l-3.5 4"/></svg>`,vt=d`<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20"/></svg>`;var Z=class extends g{render(){let t=this.app?.meta;return d`<header class="top">
+			<svg class="logo" viewBox="0 0 512 512" aria-label="framefields" role="img">${at}</svg>
+			<span class="sep" aria-hidden="true"></span>
+			<h1>${t?.title??"framefields preview"}</h1>
+			<span class="grow"></span>
+			<span class="spec tnum"
+				>${t?`${t.width}\xD7${t.height} \xB7 ${t.fps} fps \xB7 ${v(t.frameCount-1,t.fps)}`:""}</span
+			>
+			${this.#e()}
+		</header>`}#e(){let e=this.app,t=e?.soundtrack;if(e?.offline)return d`<span
+				class="chip"
+				data-state="offline"
+				role="status"
+				aria-live="polite"
+				title="The preview command isn't running. This tab reconnects when it starts again."
+				><span class="dot"></span><span>Preview stopped</span></span
+			>`;let r=t?.state??"mixing",i=r==="mixing"||r==="loading";return d`<span
+			class="chip"
+			data-state=${r}
+			role="status"
+			aria-live="polite"
+			title=${t?.error??""}
+			><span class=${i?"spinner":"dot"}></span
+			><span>${F[r]}</span></span
+		>`}};var Q=class extends g{#e=null;#t=new ResizeObserver(()=>this.#a());connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this.#a)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.#a),this.#t.disconnect()}get#i(){let e=this.app;if(e)return e.draft?e.draft:e.openId==null?void 0:e.noteById(e.openId)}render(){let e=this.app,t=this.#i,r=e?.meta?e.draft?this.#r(e.draft,e.meta.fps):t?this.#s(t,e.meta.fps):u:u;return d`<div class="pop ${t?"on":""}" role="dialog" aria-label="Note">
+			${r}
+		</div>`}updated(){let e=this.#l();e&&this.#t.observe(e),this.#a();let t=this.app?.draft??null;t&&t!==this.#e&&this.querySelector("textarea")?.focus(),this.#e=t}#r(e,t){let r=this.app;if(!r)return u;let i=r.saving?"Saving\u2026":r.saveError?"Couldn't save. Is the preview running?":"Enter to add";return d`<div class="pop-head">
+				<span class="badge">+</span>
+				<span class="tnum"
+					>${v(e.frame,t)} · ${e.w!=null?"area":"spot"}</span
+				>
+			</div>
+			<textarea
+				placeholder="What should change here?"
+				rows="2"
+				aria-label="Note"
+				.value=${e.text}
+				?readonly=${r.saving}
+				@input=${this.#o}
+				@keydown=${this.#n}
+			></textarea>
+			<div class="pop-foot">
+				<span class="grow ${r.saveError?"err":""}">${i}</span>
+				<button class="btn" @click=${()=>r.cancelDraft()}>Cancel</button>
+				<button
+					class="btn primary"
+					?disabled=${!e.text.trim()||r.saving}
+					@click=${()=>{r.saveDraft()}}
+				>
+					Add note
+				</button>
+			</div>`}#s(e,t){let r=this.app;return r?d`<div class="pop-head">
+				<span class="badge ${e.done?"done":""}">${e.id}</span>
+				<span class="tnum grow">${v(e.frame,t)} · frame ${e.frame}</span>
+				<button
+					class="btn x-btn"
+					title="Close"
+					aria-label="Close"
+					@click=${()=>r.closePop()}
+				>
+					${G}
+				</button>
+			</div>
+			<div class="pop-text">${e.text}</div>
+			<div class="pop-foot">
+				<button class="btn" @click=${()=>r.setDone(e.id,!e.done)}>
+					${R}${e.done?"Reopen":"Mark done"}
+				</button>
+				<span class="grow"></span>
+				<button class="btn danger" @click=${()=>r.removeNote(e.id)}>
+					Delete
+				</button>
+			</div>`:u}#o=e=>{let t=e.target;this.app?.setDraftText(t.value),t.style.height="auto",t.style.height=`${Math.min(180,t.scrollHeight)}px`};#n=e=>{e.key==="Enter"&&!e.shiftKey&&!e.isComposing&&(e.preventDefault(),this.app?.saveDraft()),e.key==="Escape"&&(e.preventDefault(),this.app?.cancelDraft())};#l(){return this.closest("ff-preview")?.querySelector("ff-stage .stage")??null}#a=()=>{let e=this.querySelector(".pop"),t=this.#l(),r=this.#i;if(!e||!t||!r)return;let i=t.getBoundingClientRect(),s=(r.w??0)*i.width,o=(r.h??0)*i.height,a=i.left+r.x*i.width+s,l=i.top+r.y*i.height+o,p=e.offsetWidth,c=e.offsetHeight,h=16,f=a+h+p<=innerWidth-8?a+h:a-h-p-s,m=l+h+c<=innerHeight-8?l+h/2:l-c-h/2-o;e.style.left=`${Math.max(8,Math.min(innerWidth-p-8,f))}px`,e.style.top=`${Math.max(8,Math.min(innerHeight-c-8,m))}px`}};var ee=class extends g{#e=!1;render(){let e=this.app;if(!e)return d``;let t=e.meta?.fps??30,r=[...e.notes].sort(U);return d`<div
+			class="notes-panel ${e.panelOpen?"on":""}"
+			role="dialog"
+			aria-label="Notes"
+		>
+			<div class="np-head">
+				<h2>Notes</h2>
+				<span class="grow"></span>
+				<button
+					class="btn"
+					title="Copy the open notes, to paste into a chat"
+					?disabled=${e.openCount===0}
+					@click=${this.#t}
+				>
+					${ft}<span>${this.#e?"Copied":"Copy"}</span>
+				</button>
+				<button
+					class="btn x-btn"
+					title="Close"
+					aria-label="Close"
+					@click=${()=>e.setPanel(!1)}
+				>
+					${G}
+				</button>
+			</div>
+			<div class="np-list">
+				${r.length?r.map(i=>{let s=i.done?"Reopen":"Mark done";return d`<div
+									class="note-row ${i.done?"done":""}"
+									@click=${()=>e.goToNote(i.id)}
+								>
+									<span class="badge ${i.done?"done":""}">${i.id}</span>
+									<div>
+										<div class="when tnum">
+											${v(i.frame,t)} · frame ${i.frame}
+										</div>
+										<div class="text">${i.text}</div>
+									</div>
+									<button
+										class="check ${i.done?"on":""}"
+										title=${s}
+										aria-label=${s}
+										@click=${o=>{o.stopPropagation(),e.setDone(i.id,!i.done)}}
+									>
+										${R}
+									</button>
+								</div>`}):d`<div class="np-empty">
+								Pause and click the picture to pin a note to that spot and
+								moment. Drag to mark an area.
+							</div>`}
+			</div>
+			<div class="np-foot">
+				Saved in ${Ne(e.meta?.notesDir??null)} with a picture of each
+				spot. Ask your agent to go through them.
+			</div>
+		</div>`}#t=async()=>{let e=this.app;if(!e?.meta)return;let t=Te(e.meta.title,e.notes,e.meta.fps);try{await navigator.clipboard.writeText(t)}catch{let r=document.createElement("textarea");r.value=t,document.body.append(r),r.select();let i=document.execCommand("copy");if(r.remove(),!i)return}this.#e=!0,this.requestUpdate(),setTimeout(()=>{this.#e=!1,this.requestUpdate()},1600)}};var te=class extends g{connectedCallback(){super.connectedCallback(),document.addEventListener("pointerdown",this.#e),document.addEventListener("keydown",this.#t)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("pointerdown",this.#e),document.removeEventListener("keydown",this.#t)}render(){let e=this.app;return d`<ff-header .app=${e}></ff-header>
+			<main class="player" aria-label="Player">
+				<ff-stage .app=${e}></ff-stage>
+				<ff-transport .app=${e}></ff-transport>
+				<ff-timeline .app=${e}></ff-timeline>
+			</main>
+			<ff-note-editor .app=${e}></ff-note-editor>`}#e=e=>{let t=this.app,r=e.target;if(!t||!r)return;let i=this.querySelector(".pop"),s=this.querySelector("ff-stage"),o=!!i?.contains(r)||!!s?.contains(r);i?.classList.contains("on")&&!o&&!r.closest(".note-mark, .note-row")&&(t.openId!=null?t.closePop():t.draft&&!t.draft.text.trim()&&t.cancelDraft());let a=this.querySelector(".notes-panel"),l=this.querySelector(".notes-btn");t.panelOpen&&!a?.contains(r)&&!l?.contains(r)&&t.setPanel(!1)};#t=e=>{e.key!=="Escape"||!this.app||(this.app.openId!=null&&this.app.closePop(),this.app.setPanel(!1))}};var bt={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},xt=n=>(...e)=>({_$litDirective$:n,values:e}),re=class{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,r){this._$Ct=e,this._$AM=t,this._$Ci=r}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}};var yt="important",Wt=" !"+yt,S=xt(class extends re{constructor(n){if(super(n),n.type!==bt.ATTRIBUTE||n.name!=="style"||n.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(n){return Object.keys(n).reduce((e,t)=>{let r=n[t];return r==null?e:e+`${t=t.includes("-")?t:t.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(n,[e]){let{style:t}=n.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(e)),this.render(e);for(let r of this.ft)e[r]==null&&(this.ft.delete(r),r.includes("-")?t.removeProperty(r):t[r]=null);for(let r in e){let i=e[r];if(i!=null){this.ft.add(r);let s=typeof i=="string"&&i.endsWith(Wt);r.includes("-")||s?t.setProperty(r,s?i.slice(0,-11):i,s?yt:""):t[r]=i}}return w}});var Vt=6,ie=n=>S({left:`${n.x*100}%`,top:`${n.y*100}%`,width:n.w==null?void 0:`${n.w*100}%`,height:n.h==null?void 0:`${n.h*100}%`}),ne=class extends g{#e=null;render(){let e=this.app,t=e?.meta,r=["stage",e?.canNote?"can-note":"",e&&e.notes.length===0&&!e.draft?"hint":""].join(" "),i=t?{"--ar":`${t.width} / ${t.height}`,"--ar-n":String(t.width/t.height)}:{},s=this.#e?.area;return d`<div class="stage-wrap">
+			<div
+				class=${r}
+				style=${S(i)}
+				@pointerdown=${this.#r}
+				@pointermove=${this.#s}
+				@pointerup=${this.#o}
+				@pointercancel=${this.#n}
+			>
+				<canvas id="canvas" aria-label="Rendered frame"></canvas>
+				<div class="stage-msg ${e?.pageState==="error"?"on":""}" role="alert">
+					${e?.pageState==="error"?e.error:""}
+				</div>
+				<div class="overlay">${this.#t()}</div>
+				<div
+					class="marquee"
+					style=${s?ie(s):S({display:"none"})}
+				></div>
+				<div class="stage-hint">Click to pin a note · drag to mark an area</div>
+				<div class="toast ${e?.toastOn?"on":""}" role="status" aria-live="polite">
+					${e?.toastText}
+				</div>
+				<div
+					class="buffering ${e?.buffering?"on":""}"
+					role="status"
+					aria-label="Loading"
+				>
+					${vt}
+				</div>
+			</div>
+		</div>`}get picture(){return this.querySelector(".stage")}#t(){let e=this.app;if(!e?.meta||e.playing)return u;let t=e.notes.filter(r=>r.frame===e.frame);return e.draft&&e.draft.frame===e.frame&&t.push(e.draft),t.map(r=>{let i="done"in r&&r.done,s=r.w!=null?d`<div class="area ${i?"done":""}" style=${ie(r)}></div>`:u;if(!("id"in r))return d`${s}<button
+						class="pin draft"
+						style=${ie({x:r.x,y:r.y})}
+						aria-label="New note"
+					></button>`;let o=["pin",i?"done":"",r.id===e.openId?"active":""];return d`${s}<button
+					class=${o.join(" ")}
+					style=${ie({x:r.x,y:r.y})}
+					title=${r.text}
+					aria-label="Note ${r.id}"
+					@click=${a=>{a.stopPropagation(),e.openCard(r.id)}}
+				>
+					${i?R:String(r.id)}
+				</button>`})}#i(e){let t=e.currentTarget.getBoundingClientRect();return{x:Math.min(1,Math.max(0,(e.clientX-t.left)/t.width)),y:Math.min(1,Math.max(0,(e.clientY-t.top)/t.height))}}#r=e=>{let t=this.app,r=e.target;if(e.button!==0||!t?.player||r.closest(".pin"))return;if(t.playing){t.pause();return}if(!t.notesOn)return;if(t.draft?.text.trim()){this.closest("ff-preview")?.querySelector(".pop textarea")?.focus();return}t.cancelDraft();let i=this.#i(e);this.#e={...i,cx:e.clientX,cy:e.clientY,area:null},e.currentTarget.setPointerCapture(e.pointerId),e.preventDefault()};#s=e=>{let t=this.#e;if(!t||!t.area&&Math.hypot(e.clientX-t.cx,e.clientY-t.cy)<Vt)return;let r=this.#i(e);t.area={x:Math.min(t.x,r.x),y:Math.min(t.y,r.y),w:Math.abs(r.x-t.x),h:Math.abs(r.y-t.y)},this.requestUpdate()};#o=()=>{let e=this.#e;e&&(this.#e=null,this.app?.beginDraft({x:e.x,y:e.y},e.area))};#n=()=>{this.#e=null,this.requestUpdate()}};var Kt=3,se=class extends g{#e=800;#t=null;#i=!1;#r="";#s=new ResizeObserver(()=>{let e=this.#o()?.clientWidth;e&&e!==this.#e&&(this.#e=e,this.requestUpdate()),this.#a(!0)});connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{let e=this.#o();e&&this.#s.observe(e)})}disconnectedCallback(){super.disconnectedCallback(),this.#s.disconnect()}render(){let e=this.app,t=e?.meta,r=t?.frameCount??1,i=t?.fps??30,s=this.#t===null?null:this.#p(this.#t/Math.max(1,this.#e));return d`<div
+			class="timeline"
+			aria-label="Timeline"
+			@pointerdown=${this.#h}
+			@pointermove=${this.#f}
+			@pointerleave=${this.#d}
+			@pointerup=${this.#u}
+			@pointercancel=${this.#u}
+		>
+			<div class="tl-inner">
+				<div class="ruler">
+					${t?_e((r-1)/i,this.#e).map(o=>d`<div
+											class="tick ${o.major?"major":""}"
+											style="left:${o.left}%"
+										>
+											${o.label?d`<span>${o.label}</span>`:u}
+										</div>`):u}
+				</div>
+				<div class="note-marks">${this.#n()}</div>
+				<div class="wave-lane">
+					<canvas></canvas>
+					${this.#l()}
+				</div>
+				<div
+					class="hover-line"
+					style=${S(this.#t===null?{}:{display:"block",left:`${this.#t}px`})}
+				></div>
+				<div
+					class="hover-time"
+					style=${S(this.#t===null?{}:{display:"block",left:`${this.#t}px`})}
+				>
+					${s===null?"":v(s,i)}
+				</div>
+				<div
+					class="playhead"
+					style="left:${le(e?.frame??0,r)}%"
+				></div>
+			</div>
+		</div>`}updated(){this.#a(!1)}#o(){return this.querySelector(".tl-inner")}#n(){let e=this.app,t=e?.meta;return!e||!t?u:Ce(e.notes,t.frameCount,this.#e).map(({note:r,lane:i,left:s})=>d`<button
+				class="note-mark ${r.done?"done":""} ${i?"stacked":""}"
+				style="left:${s}%;top:${4+i*15}px"
+				title="${r.id} · ${v(r.frame,t.fps)} · ${r.text}"
+				@pointerdown=${o=>o.stopPropagation()}
+				@click=${o=>{o.stopPropagation(),e.goToNote(r.id)}}
+			>
+				${r.id}
+			</button>`)}#l(){let e=this.app?.soundtrack.state??"mixing";if(e==="ready")return u;let t=e==="mixing"||e==="loading",r=e==="none"?"No audio in this composition":e==="error"?"Audio could not be mixed":F[e];return d`<div class="wave-state ${t?"shimmer":""}">
+			${t?d`<span class="spinner"></span>`:u}${r}
+		</div>`}#a(e){let t=this.app,r=this.querySelector(".wave-lane canvas");if(!t||!r)return;let i=t.soundtrack,s=window.devicePixelRatio||1,o=r.clientWidth,a=r.clientHeight,l=`${i.peaksVersion}:${o}x${a}@${s}:${t.meta?.frameCount}:${i.durationSec}`;if(!e&&l===this.#r)return;this.#r=l,r.width=Math.round(o*s),r.height=Math.round(a*s);let p=r.getContext("2d");if(!p)return;p.setTransform(s,0,0,s,0,0),p.clearRect(0,0,o,a);let c=i.peaks,h=t.meta;if(!c?.length||!h)return;let f=Math.max(1e-6,(h.frameCount-1)/h.fps),m=i.durationSec??f,x=Math.min(1,m/f)*o,kt=a/2;p.fillStyle=getComputedStyle(document.documentElement).getPropertyValue("--wave").trim();for(let j=0;j<x;j+=Kt){let $t=Math.max(c[Math.floor(j/x*c.length)]||0,.015),Ee=Math.max(1,Math.sqrt($t)*(a-8));p.fillRect(j,kt-Ee/2,2,Ee)}}#p(e){let t=this.app?.meta?.frameCount??1;return _(Math.min(1,Math.max(0,e))*(t-1),t)}#c(e){let t=this.#o()?.getBoundingClientRect();return t?(e-t.left)/t.width:0}#h=e=>{!this.app?.meta||e.button!==0||(e.currentTarget.setPointerCapture(e.pointerId),this.#i=!0,this.app.seek(this.#p(this.#c(e.clientX))))};#f=e=>{let t=this.app;if(!t?.meta)return;let r=this.#o()?.getBoundingClientRect();if(!r)return;this.#t=Math.min(r.width,Math.max(0,e.clientX-r.left));let i=this.#p(this.#c(e.clientX));this.#i&&i!==t.frame&&t.seek(i),this.requestUpdate()};#d=()=>{this.#t=null,this.requestUpdate()};#u=()=>{this.#i=!1}};var oe=class extends g{render(){let e=this.app,t=e?.meta?.fps??30,r=!!e?.playing,i=e?.soundtrack,s=!!i?.usable,o=!!i?.muted,a=r?"Pause":"Play",l=o?"Unmute":"Mute";return d`<div class="transport">
+			<button
+				class="icon-btn"
+				title="Previous frame"
+				aria-label="Previous frame"
+				@click=${()=>e?.step(-1)}
+			>
+				${lt}
+			</button>
+			<button
+				class="play-btn ${e?.stalled?"loading":""}"
+				title=${a}
+				aria-label=${a}
+				?disabled=${!e?.player}
+				@click=${()=>e?.togglePlay()}
+			>
+				${r?dt:ht}${ct}
+			</button>
+			<button
+				class="icon-btn"
+				title="Next frame"
+				aria-label="Next frame"
+				@click=${()=>e?.step(1)}
+			>
+				${pt}
+			</button>
+			<div class="timecode tnum">
+				<span>${v(e?.frame??0,t)}</span><span class="dim">/</span
+				><span class="dim">${v(e?.lastFrame??0,t)}</span>
+				<span class="frame">frame ${e?.frame??0}</span>
+			</div>
+			${this.#e()}
+			<span class="grow"></span>
+			${e?.notesOn?this.#t():u}
+			<ff-notes-panel .app=${e}></ff-notes-panel>
+			<button
+				class="icon-btn"
+				title=${l}
+				aria-label=${l}
+				?disabled=${!s}
+				@click=${()=>i?.setMuted(!i.muted)}
+			>
+				${o?gt:mt}
+			</button>
+			<input
+				class="slider"
+				type="range"
+				min="0"
+				max="1"
+				step="0.01"
+				.value=${String(i?.volume??.9)}
+				aria-label="Volume"
+				?disabled=${!s}
+				@input=${p=>i?.setVolume(Number(p.target.value))}
+			/>
+		</div>`}#e(){let e=this.app,t=e?.fps;if(!t||t.state==="paused"&&t.fps===null)return u;let r=(t.state==="paused"?"Frame rate the last playback reached":"Frame rate playback reaches")+(e?.meta?`; the film runs at ${e.meta.fps} fps`:"");return d`<span class="fps tnum" role="status" title=${r}
+			>${t.fps===null?"\u2026 fps":`${t.fps.toFixed(1)} fps`}</span
+		>`}#t(){let e=this.app;if(!e)return u;let t=e.openCount;return d`<button
+			class="btn notes-btn"
+			title="${t} open of ${e.notes.length}"
+			aria-haspopup="dialog"
+			aria-expanded=${String(e.panelOpen)}
+			@click=${()=>e.setPanel(!e.panelOpen)}
+		>
+			${ut} Notes
+			<span class="badge ${t>0?"open":""}">${t||e.notes.length}</span>
+		</button>`}};var Xt={"ff-header":Z,"ff-stage":ne,"ff-transport":oe,"ff-timeline":se,"ff-notes-panel":ee,"ff-note-editor":Q,"ff-preview":te};function wt(n=customElements){for(let[e,t]of Object.entries(Xt))n.get(e)||n.define(e,t)}wt();var ae=new W;Le(console,ae.report);var Jt=document.querySelector("ff-preview")??document.body.appendChild(document.createElement("ff-preview"));Jt.app=ae;ae.start().catch(n=>ae.showError(n));
+/*! Bundled license information:
+
+@lit/reactive-element/css-tag.js:
+  (**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+@lit/reactive-element/reactive-element.js:
+lit-html/lit-html.js:
+lit-element/lit-element.js:
+lit-html/directive.js:
+  (**
+   * @license
+   * Copyright 2017 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/is-server.js:
+  (**
+   * @license
+   * Copyright 2022 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+
+lit-html/directives/style-map.js:
+  (**
+   * @license
+   * Copyright 2018 Google LLC
+   * SPDX-License-Identifier: BSD-3-Clause
+   *)
+*/