{"manifest":{"schemaVersion":1,"sdkVersion":"0.1.0","id":"sm.grade","version":"2.0.1","name":"Color grade","description":"Apply the existing StillMade looks or adjust six color controls on selected clips, preserving original media.","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":[]},"look":{"type":"text","default":"Clean"},"adjustments":{"type":"json","default":{}}},"outputs":{"edit":{"type":"timeline-edit","primary":true}},"permissions":{"project":["context.timeline.read","timeline.propose"],"network":[],"filesystem":[],"secrets":[]},"ui":[]},"code":"// Presets retained from the existing Color grade implementation in src/editor/editorAdds.js.\nconst looks=[{\"name\":\"Clean\",\"lut\":\"None\",\"color\":{\"brightness\":0,\"contrast\":0,\"saturation\":0,\"temperature\":0,\"sharpness\":0,\"vignette\":0}},{\"name\":\"Cold Night\",\"lut\":\"Cold\",\"color\":{\"brightness\":0,\"contrast\":8,\"saturation\":-8,\"temperature\":-34,\"sharpness\":0,\"vignette\":0}},{\"name\":\"Warm Dawn\",\"lut\":\"Warm\",\"color\":{\"brightness\":5,\"contrast\":0,\"saturation\":8,\"temperature\":28,\"sharpness\":0,\"vignette\":0}},{\"name\":\"Desaturated\",\"lut\":\"Desaturated\",\"color\":{\"brightness\":0,\"contrast\":6,\"saturation\":-35,\"temperature\":0,\"sharpness\":0,\"vignette\":0}},{\"name\":\"Punchy\",\"lut\":\"High Contrast\",\"color\":{\"brightness\":0,\"contrast\":28,\"saturation\":18,\"temperature\":0,\"sharpness\":18,\"vignette\":0}},{\"name\":\"Filmic\",\"lut\":\"Filmic\",\"color\":{\"brightness\":0,\"contrast\":12,\"saturation\":-5,\"temperature\":0,\"sharpness\":0,\"vignette\":15}},{\"name\":\"Teal & Orange\",\"lut\":\"Teal and Orange\",\"color\":{\"brightness\":0,\"contrast\":14,\"saturation\":12,\"temperature\":12,\"sharpness\":0,\"vignette\":10}}];\nconst limits={\"brightness\":[-100,100],\"contrast\":[-100,100],\"saturation\":[-100,100],\"temperature\":[-100,100],\"sharpness\":[-50,50],\"vignette\":[0,100]};\nconst preset=looks.find(item=>item.name===input.look);\nif(!preset)throw new Error('Choose a supported look.');\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.');\nconst color={...preset.color};\nfor(const key of Object.keys(input.adjustments)){\n const range=limits[key],value=input.adjustments[key];\n if(!range||!Number.isFinite(value)||value<range[0]||value>range[1])throw new Error('Color adjustments exceed the supported range.');\n color[key]=value;\n}\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(item=>item.id===clip.trackId);\n if(clip.locked||track?.locked)throw new Error('Unlock the selected clips before grading.');\n return {collection:'clips',operation:'grade',before:clip,values:{lut:preset.lut,color:{...color}}};\n});\nreturn {edit:{schemaVersion:1,title:'Color grade: '+preset.name,timelineId:input.timeline.activeTimelineId,commands}};\n","view":{"html":"<section><h1>Color grade</h1><p>Select clips, choose a look and adjust its color. Review the proposal before applying it in the Editor.</p><div id=\"clips\"></div><label for=\"look\">Look</label><select id=\"look\"><option>Clean</option><option>Cold Night</option><option>Warm Dawn</option><option>Desaturated</option><option>Punchy</option><option>Filmic</option><option>Teal & Orange</option></select><div id=\"adjustments\"></div><div class=\"actions\"><button id=\"apply\" type=\"button\" data-stillmade-action=\"run\">Review grade</button><button id=\"reset\" type=\"button\">Reset adjustments</button></div><output id=\"status\" role=\"status\"></output></section>\n","css":"h1{font-size:28px}.clip{display:flex;align-items:center;gap:12px;padding:8px 0}.adjustment{display:grid;grid-template-columns:1fr 64px;gap:8px;margin:16px 0}.adjustment label{grid-column:1 / -1}input[type=range]{width:100%;min-width:0}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}select{width:100%}output{color:var(--fg-muted)}\n.clip input[type=checkbox]{width:44px;height:44px;flex:0 0 44px;accent-color:var(--accent);cursor:pointer}\n","javascript":"// Presets retained from the existing Color grade implementation in src/editor/editorAdds.js.\nconst looks=[{\"name\":\"Clean\",\"lut\":\"None\",\"color\":{\"brightness\":0,\"contrast\":0,\"saturation\":0,\"temperature\":0,\"sharpness\":0,\"vignette\":0}},{\"name\":\"Cold Night\",\"lut\":\"Cold\",\"color\":{\"brightness\":0,\"contrast\":8,\"saturation\":-8,\"temperature\":-34,\"sharpness\":0,\"vignette\":0}},{\"name\":\"Warm Dawn\",\"lut\":\"Warm\",\"color\":{\"brightness\":5,\"contrast\":0,\"saturation\":8,\"temperature\":28,\"sharpness\":0,\"vignette\":0}},{\"name\":\"Desaturated\",\"lut\":\"Desaturated\",\"color\":{\"brightness\":0,\"contrast\":6,\"saturation\":-35,\"temperature\":0,\"sharpness\":0,\"vignette\":0}},{\"name\":\"Punchy\",\"lut\":\"High Contrast\",\"color\":{\"brightness\":0,\"contrast\":28,\"saturation\":18,\"temperature\":0,\"sharpness\":18,\"vignette\":0}},{\"name\":\"Filmic\",\"lut\":\"Filmic\",\"color\":{\"brightness\":0,\"contrast\":12,\"saturation\":-5,\"temperature\":0,\"sharpness\":0,\"vignette\":15}},{\"name\":\"Teal & Orange\",\"lut\":\"Teal and Orange\",\"color\":{\"brightness\":0,\"contrast\":14,\"saturation\":12,\"temperature\":12,\"sharpness\":0,\"vignette\":10}}];\nconst limits={\"brightness\":[-100,100],\"contrast\":[-100,100],\"saturation\":[-100,100],\"temperature\":[-100,100],\"sharpness\":[-50,50],\"vignette\":[0,100]};\nconst fields=[{\"key\": \"brightness\", \"min\": -100, \"max\": 100}, {\"key\": \"contrast\", \"min\": -100, \"max\": 100}, {\"key\": \"saturation\", \"min\": -100, \"max\": 100}, {\"key\": \"temperature\", \"min\": -100, \"max\": 100}, {\"key\": \"sharpness\", \"min\": -50, \"max\": 50}, {\"key\": \"vignette\", \"min\": 0, \"max\": 100}];\nconst colorRows=value=>[{key:'brightness',value:value.brightness},{key:'contrast',value:value.contrast},{key:'saturation',value:value.saturation},{key:'temperature',value:value.temperature},{key:'sharpness',value:value.sharpness},{key:'vignette',value:value.vignette}];\nconst status=document.getElementById('status'),apply=document.getElementById('apply'),reset=document.getElementById('reset'),select=document.getElementById('look');\nlet current={},clipIds=[],look='Clean',adjustments=[],revision=0,busy=false,clips=[],canEdit=false,controlsReady=false;\nconst preset=()=>looks.find(item=>item.name===look)||looks.find(item=>item.name==='Clean');\nconst valueFor=key=>adjustments.find(item=>item.key===key)?.value??colorRows(preset().color).find(item=>item.key===key)?.value;\nconst draw=()=>{\n select.value=preset().name;select.disabled=busy||!canEdit;\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||!canEdit||clip.locked,label:clip.name||clip.id},{tag:'span',text:(clip.name||clip.id)+(clip.locked?' (locked)':'')}]})));\n if(!controlsReady){StillMade.render('adjustments',fields.map(field=>({tag:'div',className:'adjustment',children:[{tag:'label',text:field.key},{tag:'input',id:'control-'+field.key,type:'range',min:field.min,max:field.max,step:1,value:valueFor(field.key),disabled:busy,action:'adjust:'+field.key,label:field.key},{tag:'output',id:'value-'+field.key,text:String(valueFor(field.key))}]})));\n fields.forEach(field=>StillMade.bindShared(field.key,'control-'+field.key));controlsReady=true;}\n StillMade.setSharedDefaults({brightness:valueFor('brightness'),contrast:valueFor('contrast'),saturation:valueFor('saturation'),temperature:valueFor('temperature'),sharpness:valueFor('sharpness'),vignette:valueFor('vignette')});\n fields.forEach(field=>{const control=document.getElementById('control-'+field.key);control.disabled=busy||!canEdit;document.getElementById('value-'+field.key).textContent=control.value;});\n apply.disabled=busy||!canEdit||!clipIds.length;reset.disabled=busy||!canEdit;status.textContent=clipIds.length?String(clipIds.length)+' selected. Original media stays unchanged.':'Select clips to grade. Showing up to 100 clips.';\n};\nconst publish=values=>StillMade.updateShared(values).catch(error=>{status.textContent=error.message;});\nconst receiveShared=shared=>{\n canEdit=shared.canEdit;\n look=shared.state.look||current.look||'Clean';\n adjustments=colorRows({...current.adjustments,...shared.state}).filter(item=>item.value!==undefined);\n clipIds=(shared.state.clipIds||current.clipIds||[]).filter(id=>clips.some(clip=>clip.id===id&&!clip.locked));\n draw();\n if(shared.outputs.edit&&!busy)status.textContent='Saved grade proposal is available below.';\n};\nStillMade.onShared(receiveShared);\nStillMade.onInput(input=>{current=input;revision+=1;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)}));receiveShared(StillMade.getShared());});\nStillMade.onAction(event=>{\n if(busy||!canEdit)return;\n if(event.action.startsWith('clip:')){const clip=clips.find((item,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);publish({clipIds});}\n if(event.action.startsWith('adjust:')){const key=event.action.slice(7);if(!fields.some(field=>field.key===key))return;adjustments=[...adjustments.filter(item=>item.key!==key),{key,value:Number(event.value)}];document.getElementById('value-'+key).textContent=String(valueFor(key));return;}\n draw();\n});\nselect.addEventListener('change',()=>{if(busy||!canEdit)return;look=select.value;adjustments=[];publish({look,...preset().color});draw();});\nreset.addEventListener('click',()=>{if(busy||!canEdit)return;adjustments=[];publish({...preset().color});draw();});\napply.addEventListener('click',async()=>{\n if(busy||!canEdit||!clipIds.length)return;const started=revision;busy=true;draw();let message;\n try{await StillMade.run({timeline:current.timeline,clipIds,look,adjustments:{brightness:Number(document.getElementById('control-brightness').value),contrast:Number(document.getElementById('control-contrast').value),saturation:Number(document.getElementById('control-saturation').value),temperature:Number(document.getElementById('control-temperature').value),sharpness:Number(document.getElementById('control-sharpness').value),vignette:Number(document.getElementById('control-vignette').value)}});message='Grade 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":"Grade original clip with Warm Dawn","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","text":"Keep this text","lut":"None","color":{"brightness":0,"contrast":0,"saturation":0,"temperature":0,"sharpness":0,"vignette":0}}],"tracks":[{"id":"video","type":"video","locked":false}]},"clipIds":["clip-a"],"look":"Warm Dawn","adjustments":{"contrast":10}},"expected":{"edit":{"schemaVersion":1,"title":"Color grade: Warm Dawn","timelineId":"timeline-a","commands":[{"collection":"clips","operation":"grade","before":{"id":"clip-a","name":"Opening","trackId":"video","start":0,"duration":4,"url":"/api/media/account/original.mp4","assetId":"original-a","versionId":"v1","text":"Keep this text","lut":"None","color":{"brightness":0,"contrast":0,"saturation":0,"temperature":0,"sharpness":0,"vignette":0}},"values":{"lut":"Warm","color":{"brightness":5,"contrast":10,"saturation":8,"temperature":28,"sharpness":0,"vignette":0}}}]}}}]}