https://mstudio.ai/build/assets/AnimationEditor.BF-0lfx5.js

1import{r as Le}from"./rolldown-runtime.C1f3BsDW.js";import"./inertia.BE4YqsTM.js";import"./http.DWpeO7Ui.js";import{I as rt,Qr as ot,S as lt,Xt as ct,Y as dt,fr as mt,gt as ut,i as De,q as ht,rt as xt,tt as $e,ut as ft,wr as pt}from"./icons.ChOq_Y4q.js";import{t as gt}from"./react-core.CAMe6Z4j.js";import"./utils.CgzVjNgC.js";import{t as bt}from"./state.L8kQliOB.js";import{Dt as wt,It as B,J as Ae,Mt as U,N as vt,Q as Te,Tt as K,X as Re,j as Me,jt as ce,k as N}from"./entry-client.DX3aUoe5.js";import"./segmented.DHcH2lTJ.js";import{r as jt}from"./input.GzdAc1Aj.js";import"./dist.CoNAZqlp.js";import"./dist.DxccqHSW.js";import"./dist.D4237Rk6.js";import"./dist.BhzTvz6X.js";import"./dist.B-JETxGF.js";import"./dist.zmknLG-d.js";import{r as Fe}from"./Tooltip.D5vWPvw2.js";import"./es2015.Cr2X04_P.js";import"./dist.DbqQa_sy.js";import"./dialog.Bb7MGeDP.js";import"./dist.D4LCotyC.js";import"./dist.C1cc-Zbw.js";import{l as Nt}from"./characterMention.DcxgzALo.js";import{t as yt}from"./slider.BZoarXCr.js";import{n as St}from"./useFreeTierGate.CwupVhTY.js";import{t as kt}from"./badge.CK53iWwP.js";import"./switch.D3Vh3rjF.js";import{n as zt,r as _t,t as It}from"./PromptReferencesRow.Dil-fpz5.js";import{t as Ct}from"./section-label.Cq6cQeLu.js";import"./locationStore.DwRNJtUf.js";import{t as le}from"./projectStore.B74RetxK.js";import{t as At}from"./MentionTextarea.BoOwGw9M.js";import{a as Tt,d as Rt,f as Mt,n as Ee,o as Et,s as Pt}from"./shotMedium.DYKLpru1.js";import{a as Lt,i as Dt,r as $t}from"./AnimationShotParts.B3fNwJfT.js";import{t as Ft}from"./useLocationMentions.Ch75-YXw.js";import{t as Pe}from"./kbd.F_PH3ELp.js";import{t as Vt}from"./VidstackPlayer.CObwjGn4.js";import{t as Kt}from"./useFramePairCharacters.BTpVDOC8.js";import{i as Bt,r as Ht,t as Ot}from"./ShotNavigator.Bf6k38ex.js";import"./MentionText.Do-0ghUN.js";import"./ReviewShotsDialog.B0UjM6nz.js";import{l as Gt}from"./motionEditorConstants.DV7TNLB3.js";var a=Le(ot(),1),e=Le(gt(),1),Ut=1800*1e3,Wt=["Make the text bigger","Slow it down","Use my brand colours","Make it more playful","Shorter and punchier"],Yt=typeof navigator<"u"&&/Mac|iPhone|iPad/.test(navigator.platform),qt=new Intl.DateTimeFormat(void 0,{month:"short",day:"numeric",hour:"numeric",minute:"2-digit"});function Xt(s){return s<60?`${Math.max(10,Math.round(s/10)*10)} sec`:`${Math.ceil(s/60)} min`}function Jt(s){const i=new Date(s);return Number.isNaN(i.getTime())?"":qt.format(i)}function Qt(s){const i=s?.response?.data?.message;return typeof i=="string"&&i.trim()!==""?i.trim():"Something went wrong on our side. Try again."}const Zt=(0,a.memo)(({frame:s,projectUuid:i,onClose:y,onSave:g,onSwitchFrame:w,onLeaveWhileRunning:S})=>{const{fetchFrames:u,fetchFrameHistory:h,frameVersions:c,revertToVersion:T,aspectRatio:k}=le(bt(t=>({fetchFrames:t.fetchFrames,fetchFrameHistory:t.fetchFrameHistory,frameVersions:t.frameVersions,revertToVersion:t.revertToVersion,aspectRatio:t.currentProject?.uuid===i?t.currentProject?.aspect_ratio:void 0}))),{confirm:b}=vt(),{blockIfFree:z}=St(),{shotNumber:v}=Bt(s.id),_=(0,a.useId)(),I=`${_}-brief`,j=`${_}-change`,L=`${_}-title`,R=s.active_version?.data,M=Pt(s),l=M?.animation??null,H=U(M?.videoUrl)||null,de=U(l?.poster_url||R?.generated_image_url)||void 0,W=(R?.script??"").split(/\r?\n/)[0]?.trim()??"",C=R?.motion_prompt??"",[x,Y]=(0,a.useState)(C),[q,Ve]=(0,a.useState)(!1),O=(0,a.useRef)(C);(0,a.useEffect)(()=>{C!==O.current&&(Y(t=>t===O.current?C:t),O.current=C)},[C]);const D=Ht(s.id,"motion_prompt",x,C),X=(0,a.useCallback)(()=>D(y),[D,y]),Ke=(0,a.useMemo)(()=>w&&(t=>D(()=>w(t))),[D,w]),{mentionItems:me,characterForTag:ue,onMentionInserted:Be,unassignCharacter:he}=Kt(s,i),xe=Ft(i),J=_t({frameId:s.id,prompt:x,mode:"text_to_video"}),He=(0,a.useMemo)(()=>[...me,...xe,...(J.result?.references??[]).filter(t=>t.kind==="asset").map(t=>({tag:t.token,label:t.name,imageUrl:t.url}))],[me,xe,J.result]),[Oe,Q]=(0,a.useState)(null);(0,a.useEffect)(()=>Q(null),[x]);const[f,E]=(0,a.useState)(()=>{const t=s.active_generation_job;if(t&&t.type==="video"&&(t.status==="pending"||t.status==="processing")){const n=Date.parse(t.created_at);return{id:t.id,kind:"unknown",startedAt:Number.isNaN(n)?Date.now():n,progress:t.progress??0,stage:null,message:null}}return null}),[P,$]=(0,a.useState)(null),[Z,F]=(0,a.useState)(null),[Ge,Ue]=(0,a.useState)(0),[ee,fe]=(0,a.useState)(null),te=ee!==null,[We,pe]=(0,a.useState)(!1),[Ye,ge]=(0,a.useState)(()=>Date.now()),[qe,be]=(0,a.useState)(null),d=f!==null,we=(0,a.useRef)(null);we.current=f?.id??null;const ve=(0,a.useRef)(S);ve.current=S,(0,a.useEffect)(()=>{const t=s.id;return()=>{const n=we.current;n!==null&&ve.current?.(t,n)}},[s.id]),(0,a.useEffect)(()=>{h(s.id)},[h,s.id]),(0,a.useEffect)(()=>

1{if(!f)return;ge(Date.now());const t=window.setInterval(()=>ge(Date.now()),1e3);return()=>window.clearInterval(t)},[f]);const G=f?.id??null,je=(0,a.useRef)(f);je.current=f;const se=(0,a.useRef)(g);se.current=g,(0,a.useEffect)(()=>{if(G===null||Z)return;const t=Date.now();let n=0,r=!1;const p=()=>{r=!0,window.clearInterval(tt)},Ce=async()=>{if(!r){if(Date.now()-t>Ut){p(),F("This is taking longer than usual. The AI keeps working on it; check again in a few minutes.");return}try{const st=await Te.get(G);if(r)return;const m=st.data?.data;if(n=0,!m)return;if(m.status==="completed"){p(),await u(i),h(s.id);const o=U(le.getState().frames.find(it=>it.id===s.id)?.active_version?.data?.generated_video_url??m.result_url)||null;E(null),$(null),o&&(be(o),se.current(o)),K.success("Your animation is ready.");return}if(m.status==="failed"){p();const o=je.current;E(null),u(i),$({title:m.user_error?.title?.trim()||"The animation did not finish",message:m.user_error?.message?.trim()||"The animation could not be finished. Try again, or change the brief first.",retry:o?.kind==="edit"&&o.instruction?()=>void ne.current("edit",o.instruction):null});return}if(m.status==="cancelled"){p(),E(null),u(i);return}const at=m.metadata?.animation_stage??m.animation_stage??null,nt=m.metadata?.animation_message??m.animation_message??null;E(o=>o&&o.id===G?{...o,progress:m.progress??o.progress,stage:Rt(o.stage,at),message:nt??o.message,expectedSeconds:m.animation_expected_seconds??o.expectedSeconds,lastUpdateSeconds:m.animation_last_update_seconds??null,polledAt:Date.now()}:o)}catch{n+=1,n>=5&&(p(),F("Lost the connection to M Studio. The AI keeps working on it; check again when you are back online."))}}},tt=window.setInterval(()=>void Ce(),Gt);return Ce(),p},[G,Z,Ge,u,h,i,s.id]);const[V,ae]=(0,a.useState)(""),Ne=(0,a.useRef)(null),A=(0,a.useCallback)(async(t,n)=>{if(!(te||d)&&!z("generate-video")){fe(t),$(null),F(null),Q(null);try{const r=(t==="create"?await Re.create(s.id,{prompt:x,allow_generation:q}):await Re.edit(s.id,{instruction:n??"",allow_generation:q})).data?.job_id;if(!r)throw new Error("no job");t==="create"&&(O.current=x),E({id:r,kind:t,instruction:n,startedAt:Date.now(),progress:0,stage:"queued",message:null}),t==="edit"&&ae(""),u(i)}catch(r){const p=zt(r);if(p){Q(p);return}if(Ae(r))return;$({title:t==="create"?"Could not start the animation":"Could not send your change",message:Qt(r),retry:()=>void ne.current(t,n)})}finally{fe(null)}}},[te,d,z,s.id,x,u,i]),ne=(0,a.useRef)(A);ne.current=A;const ye=(0,a.useCallback)(async()=>{x.trim()!==""&&(l&&!await b({title:"Create the animation again?",description:"The AI starts over from your brief. The animation you have now stays in the version list, so you can go back to it.",confirmText:"Create again",cancelText:"Cancel"})||A("create"))},[l,x,b,A]),Se=(0,a.useCallback)(()=>{const t=V.trim();t!==""&&A("edit",t)},[V,A]),Xe=t=>{t.key==="Enter"&&(t.metaKey||t.ctrlKey)&&(t.preventDefault(),ye())},Je=t=>{t.key==="Enter"&&(t.metaKey||t.ctrlKey)&&(t.preventDefault(),Se())},Qe=(0,a.useCallback)(async()=>{if(f&&await b({title:"Stop this animation?",description:"The AI stops working on it. The shot keeps what it had before.",confirmText:"Stop",cancelText:"Keep going"})){pe(!0);try{await Te.cancel(f.id),E(null),F(null),u(i),K.info("Stopped. Nothing changed on this shot.")}catch(t){Ae(t)||K.error("Could not stop it. Try again.")}finally{pe(!1)}}},[f,b,u,i]),ke=(0,a.useMemo)(()=>Et(c.filter(t=>t.frame_id===s.id),l?.job_id),[c,s.id,l?.job_id]),[ze,_e]=(0,a.useState)(null),Ze=(0,a.useCallback)(async t=>{_e(t.versionId);try{await T(s.id,t.versionId);const n=le.getState().frames.find(r=>r.id===s.id);if(n?.active_version?.data?.animation?.job_id===t.jobId){const r=U(n.active_version.data.generated_video_url);r&&(be(r),se.current(r)),K.success(`Now using version ${t.number}.`)}else K.error("Could not switch to that version. Try again.")}finally{_e(null)}},[T,s.id]),ie=(0,a.useRef)(null);(0,a.useEffect)(()=>{const t=n=>{const r=n.target;n.key!=="Escape"||n.defaultPrevented||r?.closest("input, textarea, select, [contenteditable='true']")||[...document.querySelectorAll("[role='dialog'], [role='alertdialog'], [data-radix-popper-content-wrapper]")].filter(p=>p!==ie.current).length>0||X()};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[X]),(0,a.useEffect)(()=>{ie.current?.focus()},[]);const re=x.trim()==="",et=l?"Create again":"Create animation",oe=d?null:re?"Say what this shot should show first.":null,Ie=wt(k);return(0,e.jsxs)("div",{ref:ie,role:"dialog","aria-modal":"true","aria-labelledby":L,tabIndex:-1,

1className:"fixed inset-x-0 bottom-0 z-50 flex flex-col bg-zinc-950 outline-none",style:{top:"var(--global-announcement-height, 0px)"},children:[(0,e.jsxs)("header",{className:"flex flex-wrap items-center justify-between gap-2 border-b border-zinc-800 px-3 py-2.5 sm:px-5",children:[(0,e.jsxs)("div",{className:"flex min-w-0 flex-1 items-center gap-2 sm:gap-3",children:[(0,e.jsx)(Lt,{compact:!0,value:"animation",onChange:t=>void D(()=>void Mt(s.id,t)),disabled:d||!!s.generating_image||!!s.generating_video,disabledReason:d?"You can change this once the AI has finished.":Dt}),(0,e.jsxs)("h2",{id:L,className:"min-w-0 truncate text-sm font-semibold text-zinc-100",title:W||void 0,children:[v!==null?`Shot ${v}`:"Shot",W&&(0,e.jsxs)("span",{className:"font-normal text-zinc-400",children:[" ","· ",W]})]}),(0,e.jsx)("div",{className:"hidden shrink-0 md:block",children:(0,e.jsx)(Ot,{frameId:s.id,onSwitchFrame:Ke})})]}),(0,e.jsx)(Fe,{content:"Close (Esc)",side:"bottom",children:(0,e.jsx)(N,{variant:"outline",size:"sm",onClick:()=>void X(),leftIcon:(0,e.jsx)(De,{className:"h-4 w-4"}),children:"Close"})})]}),(0,e.jsxs)("div",{className:"flex min-h-0 flex-1 flex-col overflow-y-auto lg:flex-row lg:overflow-hidden",children:[(0,e.jsxs)("section",{"aria-label":"Animation preview",className:"flex min-h-[320px] flex-1 flex-col gap-3 p-3 sm:p-5 lg:min-h-0",children:[P&&!d&&(0,e.jsxs)("div",{role:"alert",className:"flex items-start gap-3 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3",children:[(0,e.jsx)(lt,{className:"mt-0.5 h-4 w-4 shrink-0 text-destructive","aria-hidden":"true"}),(0,e.jsxs)("div",{className:"min-w-0 flex-1",children:[(0,e.jsx)("p",{className:"text-sm font-medium text-zinc-100",children:P.title}),(0,e.jsx)("p",{className:"mt-0.5 text-sm leading-relaxed text-zinc-300",children:P.message}),(0,e.jsxs)("div",{className:"mt-2.5 flex flex-wrap gap-2",children:[(0,e.jsx)(N,{size:"xs",onClick:()=>P.retry?P.retry():void A("create"),disabled:te||!P.retry&&re,leftIcon:(0,e.jsx)($e,{className:"h-3.5 w-3.5"}),children:"Try again"}),(0,e.jsx)(N,{size:"xs",variant:"ghost",onClick:()=>$(null),children:"Dismiss"})]})]})]}),(0,e.jsx)("div",{className:"flex min-h-0 flex-1 items-center justify-center",children:(0,e.jsx)("div",{className:"relative max-h-full w-full overflow-hidden rounded-lg border border-zinc-800 bg-black",style:{aspectRatio:String(Ie),maxWidth:`calc((100dvh - 220px) * ${Ie})`},children:d?(0,e.jsx)(ts,{job:f,posterUrl:de,now:Ye,stalled:Z,isCancelling:We,onCancel:()=>void Qe(),onCheckAgain:()=>{F(null),Ue(t=>t+1)}}):H?(0,e.jsx)(ss,{src:H,poster:de,autoPlay:qe===H},H):(0,e.jsx)(es,{})})})]}),(0,e.jsxs)("aside",{"aria-label":"Animation details",className:"flex w-full shrink-0 flex-col gap-6 border-t border-zinc-800 bg-zinc-950 p-4 sm:p-5 lg:w-[400px] lg:overflow-y-auto lg:border-l lg:border-t-0",children:[(0,e.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,e.jsx)("label",{htmlFor:I,className:"text-sm font-semibold text-zinc-100",children:"What should this shot show?"}),(0,e.jsx)("p",{className:"text-xs leading-relaxed text-zinc-400",children:"Write the words on screen exactly as they should read, and how they should move. Type @ to add a character, a place or a picture."}),(0,e.jsx)(At,{id:I,value:x,onChange:Y,mentions:He,onMentionInserted:Be,onMentionRemoved:t=>{const n=ue(t.tag);n&&he(n.id)},onKeyDown:Xe,disabled:d,placeholder:"A title card: “The Long Way Home” fades in over a slow map of the coast, then the date types on underneath.",minHeight:"200px",className:"min-h-[200px] w-full rounded-lg border border-border bg-zinc-900 px-3 py-2 text-sm text-zinc-100 shadow-field placeholder:text-zinc-600 outline-none focus-visible:border-ring/60 focus-visible:ring-[3px] focus-visible:ring-ring/15",overlayBgClassName:"bg-zinc-900",mentionClassName:"bg-primary/20 text-primary font-medium ring-2 ring-zinc-900"}),(0,e.jsx)(It,{...J,refusedIssues:Oe,showCapacity:!1,onRemoveToken:t=>{Y(Nt(x,t));const n=ue(t);n&&he(n.id)}}),(0,e.jsx)(N,{variant:l?"outline":"default",size:"md",className:"mt-1 w-full",onClick:()=>void ye(),disabled:d||re,isLoading:ee==="create",leftIcon:(0,e.jsx)(rt,{className:"h-4 w-4"}),"aria-describedby":oe?`${I}-blocked`:void 0,children:et}),oe&&(0,e.jsx)("p",{id:`${I}-blocked`,className:"text-xs text-zinc-400",children:oe})]}),l&&(0,e.jsxs)(e.Fragment,{children:[l.summary&&(0,e.jsxs)("div",{className:"rounded-lg border border-zinc-800 bg-zinc-900/60 px-3.5 py-3",children:[(0,e.jsx)(Ct,{as:"p",children:"The AI’s note"}),(0,e.jsx)("p",{className:"mt-1.5 text-sm leading-relaxed text-zinc-300",children:l.summary})]}),(0,e.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,e.jsx)("label",{htmlFor:j,className:"text-sm font-semibold text-zinc-100",children:"Ask for a change"}),(0,e.jsx)(jt,{ref:Ne,id:j,value:V,onChange:t=>ae(t.target.value),onKeyDown:Je,disabled:d,maxLength:2e3,rows:3,placeholder:"Say what to change, in your own words.",className:"min-h-[84px] resize-y bg-zinc-900 text-sm"}),(0,e.jsx)("div",{className:"flex flex-wrap gap-1.5",role:"group","aria-label":"Quick changes",children:Wt.map(t=>(0,e.jsx)(N,{type:"button",variant:"outline",size:"2xs",disabled:d,"aria-pressed":V===t,onClick:()=>{ae(t),Ne.current?.focus()},children:t},t))}),(0,e.jsxs)("div",{className:"flex items-center justify-between gap-2",children:[(0,e.jsxs)("span",{className:"hidden items-center gap-1 text-[11px] text-zinc-500 sm:inline-flex",children:[(0,e.jsx)(Pe,{children:Yt?"⌘":"Ctrl"}),(0,e.jsx)(Pe,{children:"Enter"}),"to send"]}),(0,e.jsx)(N,{size:"sm",onClick:Se,disabled:d||V.trim()==="",isLoading:ee==="edit",leftIcon:(0,e.jsx)(dt,{className:"h-3.5 w-3.5"}),className:"ml-auto",children:"Send"})]})]})]}

1),(0,e.jsx)($t,{id:"animation-allow-generation",checked:q,onChange:Ve,disabled:d}),ke.length>0&&(0,e.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,e.jsx)("h3",{className:"text-sm font-semibold text-zinc-100",children:"Versions"}),(0,e.jsx)("ul",{className:"flex flex-col divide-y divide-zinc-800/70 rounded-lg border border-zinc-800",children:ke.map(t=>(0,e.jsxs)("li",{className:ce("flex items-start gap-3 px-3 py-2.5",t.isActive&&"bg-zinc-900/60"),"aria-current":t.isActive?"true":void 0,children:[(0,e.jsxs)("div",{className:"min-w-0 flex-1",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsxs)("span",{className:"text-sm font-medium text-zinc-100",children:["Version ",t.number]}),t.isActive&&(0,e.jsx)(kt,{variant:"success",children:"Playing now"})]}),(0,e.jsx)("p",{className:"mt-0.5 line-clamp-2 text-xs text-zinc-400",children:t.instruction?`“${t.instruction}”`:"First draft"}),(0,e.jsx)("p",{className:"mt-0.5 text-[11px] text-zinc-500",children:Jt(t.createdAt)})]}),!t.isActive&&(0,e.jsx)(N,{size:"2xs",variant:"outline",disabled:d||ze!==null,isLoading:ze===t.versionId,onClick:()=>void Ze(t),"aria-label":`Use version ${t.number}`,children:"Use this version"})]},t.jobId))})]})]})]})]})});Zt.displayName="AnimationEditor";var es=()=>(0,e.jsxs)("div",{className:"absolute inset-0 flex flex-col items-center justify-center gap-3 bg-zinc-900 bg-[radial-gradient(rgb(255_255_255/0.06)_1px,transparent_1px)] px-8 text-center [background-size:14px_14px]",children:[(0,e.jsx)("div",{className:"flex h-12 w-12 items-center justify-center rounded-xl border border-info/25 bg-info/10",children:(0,e.jsx)(ht,{className:"h-6 w-6 text-info","aria-hidden":"true"})}),(0,e.jsx)("p",{className:"text-base font-medium text-zinc-100",children:"No animation yet"}),(0,e.jsx)("p",{className:"max-w-sm text-sm leading-relaxed text-zinc-400",children:"The AI reads your brief and your project, designs the shot and plays it here in a few minutes."})]}),ts=({job:s,posterUrl:i,now:y,stalled:g,isCancelling:w,onCancel:S,onCheckAgain:u})=>{const h=Tt(s?.stage),c=s?Math.max(0,Math.floor((y-s.startedAt)/1e3)):0,T=s?.kind==="edit"?"The AI is making your change":s?.kind==="create"?"The AI is making your animation":"The AI is working on this animation",k=h>=0?Ee[h].label:"Getting ready",b=Math.max(0,Math.min(100,s?.progress??0)),z=s?.message&&s.message.trim().toLowerCase()!==k.trim().toLowerCase()?s.message:null,v=s?.kind==="edit"&&!!i,_=s?.expectedSeconds??null,I=_===null?null:c<_-15?`about ${Xt(_-c)} left`:c<_*1.6?"almost done":"taking longer than usual",j=s?.lastUpdateSeconds!=null&&s.polledAt!=null?s.lastUpdateSeconds+Math.max(0,Math.floor((y-s.polledAt)/1e3)):null;return(0,e.jsxs)("div",{className:"absolute inset-0 flex items-center justify-center overflow-y-auto bg-zinc-900 px-6 py-6",children:[v&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("img",{src:i??void 0,alt:"","aria-hidden":"true",className:"absolute inset-0 h-full w-full object-cover opacity-25"}),(0,e.jsx)("div",{className:"absolute inset-0 bg-zinc-950/70","aria-hidden":"true"})]}),(0,e.jsxs)("div",{className:"relative flex w-full max-w-sm flex-col gap-5",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"text-base font-semibold text-zinc-100",children:T}),(0,e.jsxs)("p",{className:"mt-1 text-xs tabular-nums text-zinc-400",role:"timer","aria-label":`Time so far ${B(c)}`,children:[B(c)," so far",I&&(0,e.jsxs)("span",{className:"text-zinc-500",children:[" · ",I]})]}),s?.kind==="edit"&&s.instruction&&(0,e.jsxs)("p",{className:"mt-3 rounded-md border border-zinc-800 bg-zinc-950/80 px-3 py-2 text-sm leading-relaxed text-zinc-300",children:[(0,e.jsx)("span",{className:"block text-2xs font-medium uppercase tracking-wide text-zinc-500",children:"Your change"}),"“",s.instruction,"”"]})]}),(0,e.jsx)("ol",{className:"flex flex-col gap-2.5","aria-label":"Steps",children:Ee.map((L,R)=>{const M=h>R,l=h===R;return(0,e.jsxs)("li",{"aria-current":l?"step":void 0,className:ce("flex items-center gap-2.5 text-sm",l?"font-medium text-zinc-100":M?"text-zinc-400":"text-zinc-600"),children:[(0,e.jsx)("span",{className:"flex h-5 w-5 shrink-0 items-center justify-center","aria-hidden":"true",children:M?(0,e.jsx)(pt,{className:"h-4 w-4 text-success"}):l?(0,e.jsx)(ct,{className:"h-4 w-4 animate-spin text-primary motion-reduce:animate-none"}):(0,e.jsx)(mt,{className:"h-3 w-3 text-zinc-700"})}),L.label,(0,e.jsx)("span",{className:"sr-only",children:M?" (done)":l?" (now)":""})]},L.stage)})}),b>0&&(0,e.jsx)("div",{role:"progressbar","aria-label":"Progress","aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":b,className:"h-1 w-full overflow-hidden rounded-full bg-zinc-800",children:(0,e.jsx)("div",{className:"h-full rounded-full bg-primary transition-[width] duration-500 ease-out motion-reduce:transition-none",style:{width:`${b}%`}})}),(0,e.jsxs)("div",{"aria-live":"polite","aria-atomic":"true",className:"min-h-[1.25rem]",children:[(0,e.jsxs)("span",{className:"sr-only",children:[k,". "]}),z&&(0,e.jsx)("p",{className:"text-sm italic leading-relaxed text-zinc-400",children:z}),j!==null&&(0,e.jsx)("p",{className:ce("mt-1 text-xs tabular-nums",j>120?"text-warning":"text-zinc-500"),children:j>120?`No news from the AI for ${B(j)}. A long step can do this; it stops by itself if something is wrong.`:`Last update ${j<5?"just now":`${j}s ago`}`})]}),g?(0,e.jsxs)("div",{className:"rounded-lg border border-warning/25 bg-warning/10 px-3 py-2.5",children:[(0,e.jsx)("p",{className:"text-sm leading-relaxed text-zinc-200",children:g}),(0,e.jsx)(N,{size:"xs",variant:"outline",className:"mt-2",onClick:u,leftIcon:(0,e.jsx)($e,{className:"h-3.5 w-3.5"}),children:"Check again"})]}):(0,e.jsx)("p",{className:"text-xs leading-relaxed text-zinc-500",children:"This usually takes a few minutes. You can close this window. The AI keeps working, and the shot updates when it is done."}),(0,e.jsx)("div",{children:(0,e.jsx)(N,{variant:"outline",size:"sm",onClick:S,isLoading:w,leftIcon:(0,e.jsx)(De,{className:"h-3.5 w-3.5"}),children:"Cancel"})})]})]})},ss=({src:s,poster:i,autoPlay:y})=>{const g=(0,a.useRef)(null),[w,S]=(0,a.useState)(y),[u,h]=(0,a.useState)(0),[c,T]=(0,a.useState)(0),[k,b]=(0,a.useState)(!0),z=()=>{w?g.current?.pause():g.current?.play()};return(0,e.jsxs)("div",{className:"absolute inset-0 flex flex-col",children:[(0,e.jsxs)("div",{className:"relative min-h-0 flex-1",children:[(0,e.jsx)(Vt,{ref:g,src:s,poster:i,autoPlay:y,muted:!0,loop:k,preload:"auto",showLoadingOverlay:!0,onPlay:()=>S(!0),onPause:()=>S(!1),onEnded:()=>S(!1),onTimeUpdate:h,onLoadedMetadata:T,className:"h-full w-full"}),(0,e.jsx)("button",{type:"button",tabIndex:-1,"aria-hidden":"true",onClick:z,className:"absolute inset-0 cursor-pointer"})]}),(0,e.jsxs)("div",{className:"flex items-center gap-2 border-t border-zinc-800 bg-zinc-950/95 px-2 py-1.5",children:[(0,e.jsx)(Me,{size:"icon-sm",variant:"ghost",onClick:z,"aria-label":w?"Pause":"Play",icon:w?(0,e.jsx)(ut,{className:"h-4 w-4"}):(0,e.jsx)(ft,{className:"h-4 w-4"})}),(0,e.jsx)(yt,{value:[Math.min(u,c||0)],min:0,max:c>

10?c:1,step:.01,disabled:c<=0,onValueChange:([v])=>{g.current?.seek(v),h(v)},"aria-label":"Position in the animation",className:"flex-1"}),(0,e.jsxs)("span",{className:"shrink-0 text-[11px] tabular-nums text-zinc-400",children:[B(u)," / ",B(c)]}),(0,e.jsx)(Fe,{content:k?"Loop is on":"Loop is off",side:"top",children:(0,e.jsx)(Me,{size:"icon-sm",variant:"ghost","aria-label":"Loop","aria-pressed":k,onClick:()=>b(v=>!v),icon:(0,e.jsx)(xt,{className:"h-4 w-4"})})})]})]})};export{Zt as AnimationEditor};