{"schemaVersion":1,"id":"recommended.sm-transition","version":"1.0.0","name":"Transition workflow","description":"An editable production workflow using Transition v2.0.0.","stages":[{"id":"main","blockId":"sm.transition","version":"2.0.0","label":"Transition"}],"connections":[],"packages":[{"manifest":{"schemaVersion":1,"sdkVersion":"0.1.0","id":"sm.transition","version":"2.0.0","name":"Transition","description":"Choose transitions, timing and sounds for selected clips, then review and apply them in the Editor.","kind":"editor-extension","runtime":"javascript","entry":"src/run.js","license":"MIT","provenance":{"notice":"MIT License\n\nCopyright (c) 2026 StillMade contributors\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and \nassociated documentation files (the \"Software\"), to deal in the Software without restriction, including \nwithout limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell \ncopies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the \nfollowing conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial \nportions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT \nLIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO \nEVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER \nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE \nUSE OR OTHER DEALINGS IN THE SOFTWARE.\n"},"inputs":{"timeline":{"type":"timeline","context":"timeline","primary":true},"clipIds":{"type":"text[]","default":[]},"transition":{"type":"text","default":"Cross dissolve"},"duration":{"type":"number","default":0.5,"min":0.1,"max":3},"soundOn":{"type":"boolean","default":true},"soundId":{"type":"text","default":""}},"outputs":{"edit":{"type":"timeline-edit","primary":true}},"permissions":{"project":["context.timeline.read","timeline.propose"],"network":[],"filesystem":[],"secrets":[]},"ui":[]},"code":"// Transition and sound choices retained from the existing Editor.\nconst settings=[{\"type\":\"Cut\",\"sounds\":[]},{\"type\":\"Fade\",\"sounds\":[]},{\"type\":\"Cross dissolve\",\"sounds\":[]},{\"type\":\"Shape wipe\",\"sounds\":[\"shape_sweep\",\"shape_pop\"]},{\"type\":\"Iris\",\"sounds\":[\"shape_sweep\",\"shape_pop\"]},{\"type\":\"Ink splat\",\"sounds\":[\"shape_sweep\",\"shape_pop\"]},{\"type\":\"Swirl\",\"sounds\":[\"whoosh\",\"swirl_wind\"]},{\"type\":\"Whip left\",\"sounds\":[\"whip_crack\",\"whip_zip\"]},{\"type\":\"Whip right\",\"sounds\":[\"whip_crack\",\"whip_zip\"]},{\"type\":\"Whip up\",\"sounds\":[\"whip_crack\",\"whip_zip\"]},{\"type\":\"Whip down\",\"sounds\":[\"whip_crack\",\"whip_zip\"]},{\"type\":\"Whip pan\",\"sounds\":[\"whip_crack\",\"whip_zip\"]},{\"type\":\"Slash\",\"sounds\":[\"shape_sweep\",\"shape_pop\"]},{\"type\":\"Shred\",\"sounds\":[\"shape_sweep\",\"shape_pop\"]},{\"type\":\"Morph\",\"sounds\":[\"morph_warp\",\"morph_bloom\"]},{\"type\":\"Dip to black\",\"sounds\":[]},{\"type\":\"Dip to white\",\"sounds\":[]},{\"type\":\"Push left\",\"sounds\":[\"push_slide\",\"push_thump\"]},{\"type\":\"Push right\",\"sounds\":[\"push_slide\",\"push_thump\"]},{\"type\":\"Push up\",\"sounds\":[\"push_slide\",\"push_thump\"]},{\"type\":\"Push down\",\"sounds\":[\"push_slide\",\"push_thump\"]},{\"type\":\"Zoom left\",\"sounds\":[]},{\"type\":\"Zoom right\",\"sounds\":[]},{\"type\":\"Zoom up\",\"sounds\":[]},{\"type\":\"Zoom down\",\"sounds\":[]}];\nconst setting=settings.find(row=>row.type===input.transition);\nif(!setting)throw new Error('Choose a supported transition.');\nif(!input.clipIds.length||input.clipIds.length>100||new Set(input.clipIds).size!==input.clipIds.length)throw new Error('Select between 1 and 100 different clips.');\nif(input.soundId && !setting.sounds.includes(input.soundId))throw new Error('Choose a sound available for this transition.');\nconst values={type:setting.type,duration:input.duration,soundOn:input.soundOn,soundId:input.soundId||setting.sounds[0]||''};\nconst commands=input.clipIds.map(id=>{\n const matches=(input.timeline.clips||[]).filter(clip=>clip.id===id);\n if(matches.length!==1)throw new Error('A selected clip is unavailable. Refresh the timeline.');\n const clip=matches[0],track=(input.timeline.tracks||[]).find(row=>row.id===clip.trackId);\n if(clip.locked||track?.locked)throw new Error('Unlock the selected clips before changing transitions.');\n return {collection:'clips',operation:'transition',before:clip,values:{...values}};\n});\nreturn {edit:{schemaVersion:1,title:'Transition: '+setting.type,timelineId:input.timeline.activeTimelineId,commands}};\n","view":{"html":"<section><h1>Transition</h1><p>Select clips and choose how they transition. Review the changes before applying them in the Editor.</p><div class=\"actions\"><button id=\"all\" type=\"button\">Select all shown clips</button><button id=\"none\" type=\"button\">Clear selection</button></div><div id=\"clips\"></div><label for=\"transition\">Type</label><select id=\"transition\"><option>Cut</option><option>Fade</option><option>Cross dissolve</option><option>Shape wipe</option><option>Iris</option><option>Ink splat</option><option>Swirl</option><option>Whip left</option><option>Whip right</option><option>Whip up</option><option>Whip down</option><option>Whip pan</option><option>Slash</option><option>Shred</option><option>Morph</option><option>Dip to black</option><option>Dip to white</option><option>Push left</option><option>Push right</option><option>Push up</option><option>Push down</option><option>Zoom left</option><option>Zoom right</option><option>Zoom up</option><option>Zoom down</option></select><label for=\"duration\">Duration (seconds)</label><input id=\"duration\" type=\"number\" min=\"0.1\" max=\"3\" step=\"0.1\"/><div id=\"sounds\"></div><button id=\"apply\" type=\"button\" data-stillmade-action=\"run\">Review transitions</button><output id=\"status\" role=\"status\"></output></section>\n","css":"h1{font-size:28px}.clip,.sound-toggle{display:flex;align-items:center;gap:12px;padding:8px 0}input[type=checkbox]{width:44px;height:44px;flex:0 0 44px;accent-color:var(--accent)}select,input[type=number]{width:100%;margin:8px 0 16px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}output{display:block;color:var(--fg-muted);margin-top:12px}#apply{margin-top:16px}\n","javascript":"// Transition and sound choices retained from the existing Editor.\nconst settings=[{\"type\":\"Cut\",\"sounds\":[]},{\"type\":\"Fade\",\"sounds\":[]},{\"type\":\"Cross dissolve\",\"sounds\":[]},{\"type\":\"Shape wipe\",\"sounds\":[\"shape_sweep\",\"shape_pop\"]},{\"type\":\"Iris\",\"sounds\":[\"shape_sweep\",\"shape_pop\"]},{\"type\":\"Ink splat\",\"sounds\":[\"shape_sweep\",\"shape_pop\"]},{\"type\":\"Swirl\",\"sounds\":[\"whoosh\",\"swirl_wind\"]},{\"type\":\"Whip left\",\"sounds\":[\"whip_crack\",\"whip_zip\"]},{\"type\":\"Whip right\",\"sounds\":[\"whip_crack\",\"whip_zip\"]},{\"type\":\"Whip up\",\"sounds\":[\"whip_crack\",\"whip_zip\"]},{\"type\":\"Whip down\",\"sounds\":[\"whip_crack\",\"whip_zip\"]},{\"type\":\"Whip pan\",\"sounds\":[\"whip_crack\",\"whip_zip\"]},{\"type\":\"Slash\",\"sounds\":[\"shape_sweep\",\"shape_pop\"]},{\"type\":\"Shred\",\"sounds\":[\"shape_sweep\",\"shape_pop\"]},{\"type\":\"Morph\",\"sounds\":[\"morph_warp\",\"morph_bloom\"]},{\"type\":\"Dip to black\",\"sounds\":[]},{\"type\":\"Dip to white\",\"sounds\":[]},{\"type\":\"Push left\",\"sounds\":[\"push_slide\",\"push_thump\"]},{\"type\":\"Push right\",\"sounds\":[\"push_slide\",\"push_thump\"]},{\"type\":\"Push up\",\"sounds\":[\"push_slide\",\"push_thump\"]},{\"type\":\"Push down\",\"sounds\":[\"push_slide\",\"push_thump\"]},{\"type\":\"Zoom left\",\"sounds\":[]},{\"type\":\"Zoom right\",\"sounds\":[]},{\"type\":\"Zoom up\",\"sounds\":[]},{\"type\":\"Zoom down\",\"sounds\":[]}];\nconst status=document.getElementById('status'),apply=document.getElementById('apply'),all=document.getElementById('all'),none=document.getElementById('none'),select=document.getElementById('transition'),durationControl=document.getElementById('duration');\nlet current={},clips=[],clipIds=[],transition='Cross dissolve',duration=.5,soundOn=true,soundId='',revision=0,busy=false;\nconst selected=()=>settings.find(row=>row.type===transition)||settings.find(row=>row.type==='Cross dissolve');\nconst draw=()=>{\n const setting=selected();transition=setting.type;select.value=transition;durationControl.value=String(duration);select.disabled=busy;durationControl.disabled=busy;\n all.disabled=busy;none.disabled=busy;apply.disabled=busy||!clipIds.length;\n StillMade.render('clips',clips.map((clip,index)=>({tag:'label',className:'clip',children:[{tag:'input',id:'clip-'+index,type:'checkbox',action:'clip:'+index,checked:clipIds.includes(clip.id),disabled:busy||clip.locked,label:clip.name||clip.id},{tag:'span',text:(clip.name||clip.id)+(clip.locked?' (locked)':'')}]})));\n soundId=setting.sounds.includes(soundId)?soundId:setting.sounds[0]||'';\n StillMade.render('sounds',setting.sounds.length?[{tag:'label',className:'sound-toggle',children:[{tag:'input',type:'checkbox',id:'sound-on',action:'sound-on',checked:soundOn,disabled:busy,label:'Play sound'},{tag:'span',text:'Play sound'}]},...(soundOn?[{tag:'select',id:'sound',action:'sound',value:soundId,disabled:busy,label:'Transition sound',children:setting.sounds.map(id=>({tag:'option',value:id,text:id.replaceAll('_',' ')}))}]:[])]:[{tag:'p',text:'This transition has no sound.'}]);\n status.textContent=clipIds.length?String(clipIds.length)+' selected. Showing up to 100 clips; original clips stay intact.':'Select clips to change. Showing up to 100 clips.';\n};\nStillMade.onInput(input=>{current=input;revision+=1;transition=input.transition||'Cross dissolve';duration=input.duration??.5;soundOn=input.soundOn!==false;soundId=input.soundId||'';clips=(input.timeline?.clips||[]).slice(0,100).map(clip=>({id:clip.id,name:clip.name,locked:!!clip.locked||(input.timeline?.tracks||[]).some(track=>track.id===clip.trackId&&!!track.locked)}));clipIds=(input.clipIds||[]).filter(id=>clips.some(clip=>clip.id===id&&!clip.locked));draw();});\nStillMade.onAction(event=>{\n if(busy)return;\n if(event.action.startsWith('clip:')){const clip=clips.find((row,index)=>index===Number(event.action.slice(5)));if(!clip||clip.locked)return;clipIds=event.checked?[...clipIds.filter(id=>id!==clip.id),clip.id]:clipIds.filter(id=>id!==clip.id);}\n if(event.action==='sound-on')soundOn=event.checked;\n if(event.action==='sound'){if(!selected().sounds.includes(event.value))return;soundId=event.value;return;}\n draw();\n});\nselect.addEventListener('change',()=>{if(busy)return;transition=select.value;soundId='';draw();});\ndurationControl.addEventListener('input',()=>{if(!busy)duration=Number(durationControl.value);});\nall.addEventListener('click',()=>{if(busy)return;clipIds=clips.filter(clip=>!clip.locked).map(clip=>clip.id);draw();});\nnone.addEventListener('click',()=>{if(busy)return;clipIds=[];draw();});\napply.addEventListener('click',async()=>{\n if(busy||!clipIds.length)return;if(!Number.isFinite(duration)||duration<.1||duration>3){status.textContent='Choose a duration from 0.1 to 3 seconds.';return;}\n const started=revision;busy=true;draw();let message;\n try{await StillMade.run({timeline:current.timeline,clipIds,transition,duration,soundOn,soundId});message='Transitions ready. Review and apply the proposal below.';}\n catch(error){message=error.message;}\n finally{busy=false;draw();if(started===revision)status.textContent=message;}\n});\n"},"tests":[{"name":"Set a timed Swirl with its selected sound","input":{"timeline":{"schemaVersion":1,"activeTimelineId":"timeline-a","clips":[{"id":"clip-a","name":"Opening","trackId":"video","start":0,"duration":4,"url":"/api/media/account/original.mp4","assetId":"original-a","versionId":"v1","transition":{"type":"Cut","duration":0.5}}],"tracks":[{"id":"video","type":"video","locked":false}]},"clipIds":["clip-a"],"transition":"Swirl","duration":0.8,"soundOn":true,"soundId":"swirl_wind"},"expected":{"edit":{"schemaVersion":1,"title":"Transition: Swirl","timelineId":"timeline-a","commands":[{"collection":"clips","operation":"transition","before":{"id":"clip-a","name":"Opening","trackId":"video","start":0,"duration":4,"url":"/api/media/account/original.mp4","assetId":"original-a","versionId":"v1","transition":{"type":"Cut","duration":0.5}},"values":{"type":"Swirl","duration":0.8,"soundOn":true,"soundId":"swirl_wind"}}]}}}]}],"license":"MIT"}