{"schemaVersion":1,"id":"recommended.sm-panel-strip","version":"1.0.0","name":"Image Panels workflow","description":"An editable production workflow using Image Panels v2.1.0.","stages":[{"id":"main","blockId":"sm.panel-strip","version":"2.1.0","label":"Image Panels"}],"connections":[],"packages":[{"manifest":{"schemaVersion":1,"sdkVersion":"0.1.0","id":"sm.panel-strip","version":"2.1.0","name":"Image Panels","description":"Review and edit the complete Image Panels Step—scenes, narration beats, images, versions, prompts, timing, zooms, canvas elements, transitions, and retained custom fields—in one portable workspace.","kind":"workspace","runtime":"javascript","entry":"src/run.js","license":"MIT","provenance":{"notice":"Original source (authorship declared by the packager)\nLicense: MIT\nChanges: Original implementation declared by the packager; no reused repository or dependency code.\nFiles: LICENSE, src/run.js, src/view.json\n\nMIT 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 associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","portableSources":[{"kind":"original","license":"MIT","paths":["LICENSE","src/run.js","src/view.json"],"evidence":["upstream/0/LICENSE","upstream/0/src/run.js","upstream/0/src/view.json"],"changes":"Original implementation declared by the packager; no reused repository or dependency code."}]},"inputs":{"panels":{"type":"panel-document","context":"panels","primary":true,"required":false,"default":{"schemaVersion":1,"scenes":[],"strip":[]},"description":"The complete current Image Panels document. Existing images, versions, narration, canvas elements, and custom fields are retained."},"updatedPanels":{"type":"panel-document","required":false,"default":{"schemaVersion":1,"scenes":[],"strip":[]},"description":"The complete edited Image Panels document prepared in this workspace."},"commit":{"type":"boolean","default":false,"description":"Prepare the edited Image Panels document for StillMade review and Apply."},"generatedImage":{"type":"image","imageMode":"reference","required":false,"description":"An exact stored image version produced by an approved generation Block or selected from project media."},"targetPanelId":{"type":"text","required":false,"default":"","description":"Panel that receives the connected image when attachment is enabled."},"attachGeneratedImage":{"type":"boolean","default":false,"description":"Attach the connected image to the target panel while preserving its prior versions."}},"outputs":{"panels":{"type":"panel-document","primary":true,"role":"image_panel_document","description":"The complete edited Image Panels document for the next Step."},"edit":{"type":"workspace-edit","description":"An exact before/after Image Panels change reviewed before it updates the project."}},"permissions":{"project":["context.panels.read","workspace.panels.propose"],"network":[],"filesystem":[],"secrets":[]},"ui":[],"platforms":{"phone":{"supported":true},"browser":{"supported":true},"desktop":{"supported":true}}},"code":"const copy = value => JSON.parse(JSON.stringify(value));\nconst source = copy(input.panels || {schemaVersion: 1, scenes: [], strip: []});\nconst candidate = input.commit ? copy(input.updatedPanels) : copy(source);\nif (input.attachGeneratedImage) {\n  if (!input.generatedImage || input.generatedImage.kind !== 'image') throw new Error('Connect an approved generated image before attaching it.');\n  const target = candidate.strip.find(panel => panel.panelId === input.targetPanelId);\n  if (!target) throw new Error('Choose an existing target panel for the connected image.');\n  const prior = Array.isArray(target.versions) ? target.versions : target.image ? [target.image] : [];\n  const url = input.generatedImage.url;\n  target.image = url;\n  target.imageAsset = copy(input.generatedImage);\n  target.versions = [...prior.filter(version => version !== url), url].slice(-8);\n}\nif (!candidate || Array.isArray(candidate) || candidate.schemaVersion !== 1 || !Array.isArray(candidate.strip)) {\n  throw new Error('Keep the complete version 1 Image Panels document and its strip.');\n}\nif (candidate.strip.length > 4096 || !candidate.strip.every(panel => panel && typeof panel === 'object' && !Array.isArray(panel) && typeof panel.panelId === 'string' && panel.panelId.length > 0)) {\n  throw new Error('Image Panels supports up to 4,096 rows with retained panel IDs.');\n}\nconst ids = candidate.strip.map(panel => panel.panelId);\nif (new Set(ids).size !== ids.length) throw new Error('Keep every Image Panel ID unique.');\nif (candidate.scenes !== undefined && (!Array.isArray(candidate.scenes) || candidate.scenes.length > 2048 || !candidate.scenes.every(scene => scene && typeof scene === 'object' && !Array.isArray(scene)))) {\n  throw new Error('Image Panels needs a valid retained scene list.');\n}\nif (!candidate.strip.every(panel => !panel.elements || Array.isArray(panel.elements) && panel.elements.length <= 5000 && panel.elements.every(element => element && typeof element === 'object' && !Array.isArray(element)))) {\n  throw new Error('Canvas panels need valid element lists with up to 5,000 elements.');\n}\nreturn {\n  panels: candidate,\n  edit: {schemaVersion: 1, title: `Update ${candidate.strip.length} image panel${candidate.strip.length === 1 ? '' : 's'}`, field: 'panels', before: source, after: candidate}\n};\n","view":{"html":"<main class=\"panels-workspace\">\n  <header><div><small>Production workspace</small><h1>Image Panels</h1><p id=\"summary\">Loading panels…</p></div><div class=\"actions\"><button id=\"reset\" type=\"button\" class=\"secondary\">Reset changes</button><button id=\"addScene\" type=\"button\" class=\"secondary\">Add scene</button><button id=\"addPanel\" type=\"button\" class=\"secondary\">Add panel</button><button id=\"save\" type=\"button\">Review changes</button></div></header>\n  <output id=\"status\" role=\"status\" aria-live=\"polite\"></output>\n  <section><div class=\"section-title\"><h2>Connected generated image</h2></div><div id=\"handoff\"></div></section>\n  <section><div class=\"section-title\"><h2>Scenes</h2></div><div id=\"scenes\" class=\"cards\"></div></section>\n  <section><div class=\"section-title\"><h2>Panels</h2></div><div id=\"panels\" class=\"cards\"></div></section>\n  <details><summary>Complete Image Panels data</summary><p>Every field, media reference, version, canvas element, and audio setting is retained. Edit this JSON for custom fields not shown on the cards.</p><textarea id=\"raw\" class=\"raw\" spellcheck=\"false\"></textarea><button id=\"applyRaw\" type=\"button\" class=\"secondary\">Apply JSON to workspace</button></details>\n</main>\n","css":".panels-workspace{max-width:1120px;margin:0 auto;padding:8px;color:var(--fg)}header,.actions,.section-title,.card-head,.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}header{justify-content:space-between;margin-bottom:14px}header h1{margin:2px 0}header p,header small,details p,output,.hint{color:var(--fg-muted)}section,details{margin:12px 0;padding:16px;border:1px solid var(--border-tok);border-radius:var(--r-3);background:var(--bg-elev-1)}section h2{margin:0}.cards{display:grid;gap:12px;margin-top:12px}.card{padding:14px;border:1px solid var(--border-tok);border-radius:var(--r-3);background:var(--bg)}.card-head{justify-content:space-between}.card h3{margin:0;font-size:17px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}label{display:grid;gap:5px;margin:8px 0;font-size:13px;font-weight:600}input,textarea,select{width:100%;background:var(--bg)}textarea{min-height:76px;resize:vertical}.wide{grid-column:1/-1}.secondary{background:transparent;color:var(--fg)}.danger{background:transparent;color:var(--signal)}.raw{min-height:380px;font-family:var(--font-mono);font-size:12px}output{display:block;min-height:24px;margin:8px 2px}\n@media(max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.panels-workspace{padding:0}.grid{grid-template-columns:1fr}.actions{width:100%}.actions button{flex:1}section,details{padding:12px}}\n","javascript":"const status=document.getElementById('status'),summary=document.getElementById('summary'),raw=document.getElementById('raw'),save=document.getElementById('save');\nlet source={schemaVersion:1,scenes:[],strip:[]},draft={schemaVersion:1,scenes:[],strip:[]},connectedImage=null,busy=false,revision=0;\nconst clone=value=>JSON.parse(JSON.stringify(value));\nconst text=value=>value===undefined||value===null?'':String(value);\nconst field=(label,action,value,type='text',wide=false)=>({tag:'label',className:wide?'wide':'',children:[{tag:'span',text:label},type==='textarea'?{tag:'textarea',action,value:text(value),disabled:busy,label}:{tag:'input',type,action,value:Number.isFinite(value)?value:text(value),disabled:busy,label}]});\nconst choice=(label,action,value,options)=>({tag:'label',children:[{tag:'span',text:label},{tag:'select',action,value:text(value),disabled:busy,label,children:options.map(option=>({tag:'option',text:option,value:option}))}]});\nconst sceneCard=(scene,index)=>({tag:'article',className:'card',children:[{tag:'div',className:'card-head',children:[{tag:'h3',text:text(scene.title)||text(scene.name)||'Scene '+String(index+1)},{tag:'button',action:'remove-scene:'+String(index),text:'Remove',className:'danger',disabled:busy}]},{tag:'div',className:'grid',children:[field('Scene ID','scene-id:'+String(index),scene.sceneId||scene.id),field('Title','scene-title:'+String(index),scene.title||scene.name),field('Description','scene-description:'+String(index),scene.description||scene.summary,'textarea',true)]}]});\nconst panelCard=(panel,index)=>({tag:'article',className:'card',children:[{tag:'div',className:'card-head',children:[{tag:'h3',text:'Panel '+String(index+1)+' · '+text(panel.panelId)},{tag:'div',className:'row',children:[{tag:'button',action:'move-up:'+String(index),text:'Up',className:'secondary',disabled:busy||index===0},{tag:'button',action:'move-down:'+String(index),text:'Down',className:'secondary',disabled:busy||index===draft.strip.length-1},{tag:'button',action:'remove-panel:'+String(index),text:'Remove',className:'danger',disabled:busy}]}]},{tag:'div',className:'grid',children:[field('Panel ID','panel-id:'+String(index),panel.panelId),field('Scene ID','panel-scene:'+String(index),panel.sceneId),choice('Type','panel-type:'+String(index),panel.type||'panel',['panel','canvas','zoom']),field('Starts (ms)','panel-start:'+String(index),panel.startMs,'number'),field('Length (ms)','panel-duration:'+String(index),panel.durationMs,'number'),field('Source panel','panel-source:'+String(index),panel.sourcePanelId||panel.repeatOf),field('Change prompt','panel-prompt:'+String(index),panel.changePrompt,'textarea',true),field('Narration','panel-narration:'+String(index),panel.narration||panel.voiceoverText,'textarea',true),{tag:'p',className:'wide hint',text:(panel.image?'Current image retained. ':'')+(Array.isArray(panel.versions)?String(panel.versions.length)+' image version'+(panel.versions.length===1?'':'s')+' retained. ':'')+(Array.isArray(panel.elements)?String(panel.elements.length)+' canvas element'+(panel.elements.length===1?'':'s')+' retained.':'')}]}]});\nconst ensure=()=>{if(!draft||Array.isArray(draft)||draft.schemaVersion!==1)draft={schemaVersion:1,scenes:[],strip:[]};if(!Array.isArray(draft.scenes))draft.scenes=[];if(!Array.isArray(draft.strip))draft.strip=[]};\nconst retime=()=>{let start=0;draft.strip=draft.strip.map(panel=>{const next={...panel,startMs:start};start+=Math.max(0,Number(panel.durationMs)||0);return next})};\nconst draw=()=>{ensure();StillMade.render('handoff',connectedImage?[{tag:'p',className:'hint',text:'Ready: '+text(connectedImage.assetId)+' · version '+text(connectedImage.versionId)},{tag:'div',className:'row',children:draft.strip.map((panel,index)=>({tag:'button',action:'attach-image:'+String(index),text:'Use in panel '+String(index+1),className:'secondary',disabled:busy}))}]:[{tag:'p',className:'hint',text:'Connect the output of Generate image to attach an approved stored result. Provider credentials and charging stay outside this Block.'}]);StillMade.render('scenes',draft.scenes.length?draft.scenes.map(sceneCard):[{tag:'p',text:'No scene groups yet.'}]);StillMade.render('panels',draft.strip.length?draft.strip.map(panelCard):[{tag:'p',text:'No panels yet. Add one to begin.'}]);raw.value=JSON.stringify(draft,null,2);summary.textContent=String(draft.strip.length)+' panel'+(draft.strip.length===1?'':'s')+' across '+String(draft.scenes.length)+' scene'+(draft.scenes.length===1?'':'s');save.disabled=busy;document.getElementById('reset').disabled=busy;document.getElementById('addScene').disabled=busy;document.getElementById('addPanel').disabled=busy};\nconst changed=()=>{revision+=1;raw.value=JSON.stringify(draft,null,2);status.textContent='Changes are local until you choose Review changes.'};\nStillMade.onAction(event=>{if(busy)return;ensure();const parts=event.action.split(':'),kind=parts[0],index=Number(parts[1]),scene=draft.scenes.find((item,position)=>position===index),panel=draft.strip.find((item,position)=>position===index);\n if(kind==='remove-scene'){draft.scenes=draft.scenes.filter((item,position)=>position!==index);changed();draw();return}if(kind==='scene-id'&&scene){if(Object.hasOwn(scene,'sceneId'))scene.sceneId=event.value;else scene.id=event.value}if(kind==='scene-title'&&scene){if(Object.hasOwn(scene,'title'))scene.title=event.value;else scene.name=event.value}if(kind==='scene-description'&&scene){if(Object.hasOwn(scene,'description'))scene.description=event.value;else scene.summary=event.value}\n if(kind==='remove-panel'){draft.strip=draft.strip.filter((item,position)=>position!==index);retime();changed();draw();return}if(kind==='move-up'&&index>0){const target=draft.strip.find((item,position)=>position===index-1);draft.strip=draft.strip.map((item,position)=>position===index-1?panel:position===index?target:item);retime();changed();draw();return}if(kind==='move-down'&&index<draft.strip.length-1){const target=draft.strip.find((item,position)=>position===index+1);draft.strip=draft.strip.map((item,position)=>position===index+1?panel:position===index?target:item);retime();changed();draw();return}if(!panel){changed();return}\n if(kind==='attach-image'&&connectedImage){const priorVersions=Array.isArray(panel.versions)?panel.versions:panel.image?[panel.image]:[];panel.image=connectedImage.url;panel.imageAsset=clone(connectedImage);panel.versions=[...priorVersions.filter(value=>value!==connectedImage.url),connectedImage.url].slice(-8);changed();draw();status.textContent='Connected image attached with its exact asset and version identity.';return}\n if(kind==='panel-id')panel.panelId=event.value;if(kind==='panel-scene')panel.sceneId=event.value;if(kind==='panel-type')panel.type=event.value;if(kind==='panel-start')panel.startMs=Math.max(0,Number(event.value)||0);if(kind==='panel-duration')panel.durationMs=Math.max(1,Number(event.value)||1);if(kind==='panel-source'){if(panel.type==='zoom')panel.sourcePanelId=event.value;else panel.repeatOf=event.value}if(kind==='panel-prompt')panel.changePrompt=event.value;if(kind==='panel-narration'){if(Object.hasOwn(panel,'voiceoverText'))panel.voiceoverText=event.value;else panel.narration=event.value}changed()});\ndocument.getElementById('addScene').addEventListener('click',()=>{if(busy)return;ensure();const id='portable-scene-'+String(draft.scenes.length+1)+'-'+String(revision+1);draft.scenes=[...draft.scenes,{sceneId:id,title:'New scene',description:''}];changed();draw()});\ndocument.getElementById('addPanel').addEventListener('click',()=>{if(busy)return;ensure();const start=draft.strip.reduce((total,panel)=>total+Math.max(0,Number(panel.durationMs)||0),0),id='portable-panel-'+String(draft.strip.length+1)+'-'+String(revision+1),scene=draft.scenes.find((item,position)=>position===0);draft.strip=[...draft.strip,{panelId:id,sceneId:scene?scene.sceneId||scene.id:null,type:'panel',changePrompt:'',narration:'',startMs:start,durationMs:4000,image:null,versions:[],provenance:'user'}];changed();draw()});\ndocument.getElementById('applyRaw').addEventListener('click',()=>{if(busy)return;try{const value=JSON.parse(raw.value);if(!value||Array.isArray(value)||value.schemaVersion!==1||!Array.isArray(value.strip))throw Error('Image Panels JSON must be a version 1 object with a strip.');draft=clone(value);changed();draw();status.textContent='Complete Image Panels data applied to this workspace.'}catch(error){status.textContent=error.message}});\ndocument.getElementById('reset').addEventListener('click',()=>{if(!busy){draft=clone(source);revision+=1;draw();status.textContent='Changes reset to the current project Image Panels document.'}});\nsave.addEventListener('click',async()=>{if(busy)return;const started=revision;busy=true;draw();status.textContent='Checking the complete Image Panels document…';try{const result=await StillMade.run({panels:source,updatedPanels:draft,commit:true});draft=clone(result.panels);if(started===revision)status.textContent='Image Panels changes are ready below. Review the before and after, then choose Apply.'}catch(error){status.textContent=error.message||'Image Panels could not be prepared.'}finally{busy=false;draw()}});\nStillMade.onInput(values=>{source=clone(values.panels||{schemaVersion:1,scenes:[],strip:[]});draft=clone(source);connectedImage=values.generatedImage?clone(values.generatedImage):null;revision+=1;draw();status.textContent='Edit scenes and panels. Existing media, versions, canvas elements, timing, and custom fields are retained.'});\n"},"tests":[{"name":"Retain the complete current Image Panels document","input":{"panels":{"schemaVersion":1,"scenes":[{"sceneId":"scene-1","title":"Opening"}],"strip":[{"panelId":"panel-1","sceneId":"scene-1","type":"panel","prompt":"Opening frame","narration":"Welcome","startMs":0,"durationMs":4000,"image":"https://media.example/panel.png","versions":["https://media.example/old.png","https://media.example/panel.png"],"custom":{"keep":true}}],"audio":{"voPath":"https://media.example/voice.mp3"}},"updatedPanels":{"schemaVersion":1,"scenes":[],"strip":[]},"commit":false},"expected":{"panels":{"schemaVersion":1,"scenes":[{"sceneId":"scene-1","title":"Opening"}],"strip":[{"panelId":"panel-1","sceneId":"scene-1","type":"panel","prompt":"Opening frame","narration":"Welcome","startMs":0,"durationMs":4000,"image":"https://media.example/panel.png","versions":["https://media.example/old.png","https://media.example/panel.png"],"custom":{"keep":true}}],"audio":{"voPath":"https://media.example/voice.mp3"}},"edit":{"schemaVersion":1,"title":"Update 1 image panel","field":"panels","before":{"schemaVersion":1,"scenes":[{"sceneId":"scene-1","title":"Opening"}],"strip":[{"panelId":"panel-1","sceneId":"scene-1","type":"panel","prompt":"Opening frame","narration":"Welcome","startMs":0,"durationMs":4000,"image":"https://media.example/panel.png","versions":["https://media.example/old.png","https://media.example/panel.png"],"custom":{"keep":true}}],"audio":{"voPath":"https://media.example/voice.mp3"}},"after":{"schemaVersion":1,"scenes":[{"sceneId":"scene-1","title":"Opening"}],"strip":[{"panelId":"panel-1","sceneId":"scene-1","type":"panel","prompt":"Opening frame","narration":"Welcome","startMs":0,"durationMs":4000,"image":"https://media.example/panel.png","versions":["https://media.example/old.png","https://media.example/panel.png"],"custom":{"keep":true}}],"audio":{"voPath":"https://media.example/voice.mp3"}}}}},{"name":"Prepare one exact complete Image Panels update","input":{"panels":{"schemaVersion":1,"scenes":[{"sceneId":"scene-1","title":"Opening"}],"strip":[{"panelId":"panel-1","sceneId":"scene-1","type":"panel","prompt":"Opening frame","startMs":0,"durationMs":4000,"image":"https://media.example/panel.png","versions":["https://media.example/panel.png"]}]},"updatedPanels":{"schemaVersion":1,"scenes":[{"sceneId":"scene-1","title":"New opening"}],"strip":[{"panelId":"panel-1","sceneId":"scene-1","type":"panel","prompt":"Closer opening frame","startMs":0,"durationMs":4500,"image":"https://media.example/panel.png","versions":["https://media.example/panel.png"]}]},"commit":true},"expected":{"panels":{"schemaVersion":1,"scenes":[{"sceneId":"scene-1","title":"New opening"}],"strip":[{"panelId":"panel-1","sceneId":"scene-1","type":"panel","prompt":"Closer opening frame","startMs":0,"durationMs":4500,"image":"https://media.example/panel.png","versions":["https://media.example/panel.png"]}]},"edit":{"schemaVersion":1,"title":"Update 1 image panel","field":"panels","before":{"schemaVersion":1,"scenes":[{"sceneId":"scene-1","title":"Opening"}],"strip":[{"panelId":"panel-1","sceneId":"scene-1","type":"panel","prompt":"Opening frame","startMs":0,"durationMs":4000,"image":"https://media.example/panel.png","versions":["https://media.example/panel.png"]}]},"after":{"schemaVersion":1,"scenes":[{"sceneId":"scene-1","title":"New opening"}],"strip":[{"panelId":"panel-1","sceneId":"scene-1","type":"panel","prompt":"Closer opening frame","startMs":0,"durationMs":4500,"image":"https://media.example/panel.png","versions":["https://media.example/panel.png"]}]}}}}],"portable":{"format":"stillmade-block/1","dependencies":[],"sources":[{"kind":"original","license":"MIT","paths":["LICENSE","src/run.js","src/view.json"],"evidence":["upstream/0/LICENSE","upstream/0/src/run.js","upstream/0/src/view.json"],"changes":"Original implementation declared by the packager; no reused repository or dependency code."}],"files":{"upstream/0/LICENSE":"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 associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","upstream/0/src/run.js":"const copy = value => JSON.parse(JSON.stringify(value));\nconst source = copy(input.panels || {schemaVersion: 1, scenes: [], strip: []});\nconst candidate = input.commit ? copy(input.updatedPanels) : copy(source);\nif (input.attachGeneratedImage) {\n  if (!input.generatedImage || input.generatedImage.kind !== 'image') throw new Error('Connect an approved generated image before attaching it.');\n  const target = candidate.strip.find(panel => panel.panelId === input.targetPanelId);\n  if (!target) throw new Error('Choose an existing target panel for the connected image.');\n  const prior = Array.isArray(target.versions) ? target.versions : target.image ? [target.image] : [];\n  const url = input.generatedImage.url;\n  target.image = url;\n  target.imageAsset = copy(input.generatedImage);\n  target.versions = [...prior.filter(version => version !== url), url].slice(-8);\n}\nif (!candidate || Array.isArray(candidate) || candidate.schemaVersion !== 1 || !Array.isArray(candidate.strip)) {\n  throw new Error('Keep the complete version 1 Image Panels document and its strip.');\n}\nif (candidate.strip.length > 4096 || !candidate.strip.every(panel => panel && typeof panel === 'object' && !Array.isArray(panel) && typeof panel.panelId === 'string' && panel.panelId.length > 0)) {\n  throw new Error('Image Panels supports up to 4,096 rows with retained panel IDs.');\n}\nconst ids = candidate.strip.map(panel => panel.panelId);\nif (new Set(ids).size !== ids.length) throw new Error('Keep every Image Panel ID unique.');\nif (candidate.scenes !== undefined && (!Array.isArray(candidate.scenes) || candidate.scenes.length > 2048 || !candidate.scenes.every(scene => scene && typeof scene === 'object' && !Array.isArray(scene)))) {\n  throw new Error('Image Panels needs a valid retained scene list.');\n}\nif (!candidate.strip.every(panel => !panel.elements || Array.isArray(panel.elements) && panel.elements.length <= 5000 && panel.elements.every(element => element && typeof element === 'object' && !Array.isArray(element)))) {\n  throw new Error('Canvas panels need valid element lists with up to 5,000 elements.');\n}\nreturn {\n  panels: candidate,\n  edit: {schemaVersion: 1, title: `Update ${candidate.strip.length} image panel${candidate.strip.length === 1 ? '' : 's'}`, field: 'panels', before: source, after: candidate}\n};\n","upstream/0/src/view.json":"{\n  \"html\": \"<main class=\\\"panels-workspace\\\">\\n  <header><div><small>Production workspace</small><h1>Image Panels</h1><p id=\\\"summary\\\">Loading panels…</p></div><div class=\\\"actions\\\"><button id=\\\"reset\\\" type=\\\"button\\\" class=\\\"secondary\\\">Reset changes</button><button id=\\\"addScene\\\" type=\\\"button\\\" class=\\\"secondary\\\">Add scene</button><button id=\\\"addPanel\\\" type=\\\"button\\\" class=\\\"secondary\\\">Add panel</button><button id=\\\"save\\\" type=\\\"button\\\">Review changes</button></div></header>\\n  <output id=\\\"status\\\" role=\\\"status\\\" aria-live=\\\"polite\\\"></output>\\n  <section><div class=\\\"section-title\\\"><h2>Connected generated image</h2></div><div id=\\\"handoff\\\"></div></section>\\n  <section><div class=\\\"section-title\\\"><h2>Scenes</h2></div><div id=\\\"scenes\\\" class=\\\"cards\\\"></div></section>\\n  <section><div class=\\\"section-title\\\"><h2>Panels</h2></div><div id=\\\"panels\\\" class=\\\"cards\\\"></div></section>\\n  <details><summary>Complete Image Panels data</summary><p>Every field, media reference, version, canvas element, and audio setting is retained. Edit this JSON for custom fields not shown on the cards.</p><textarea id=\\\"raw\\\" class=\\\"raw\\\" spellcheck=\\\"false\\\"></textarea><button id=\\\"applyRaw\\\" type=\\\"button\\\" class=\\\"secondary\\\">Apply JSON to workspace</button></details>\\n</main>\\n\",\n  \"css\": \".panels-workspace{max-width:1120px;margin:0 auto;padding:8px;color:var(--fg)}header,.actions,.section-title,.card-head,.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}header{justify-content:space-between;margin-bottom:14px}header h1{margin:2px 0}header p,header small,details p,output,.hint{color:var(--fg-muted)}section,details{margin:12px 0;padding:16px;border:1px solid var(--border-tok);border-radius:var(--r-3);background:var(--bg-elev-1)}section h2{margin:0}.cards{display:grid;gap:12px;margin-top:12px}.card{padding:14px;border:1px solid var(--border-tok);border-radius:var(--r-3);background:var(--bg)}.card-head{justify-content:space-between}.card h3{margin:0;font-size:17px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}label{display:grid;gap:5px;margin:8px 0;font-size:13px;font-weight:600}input,textarea,select{width:100%;background:var(--bg)}textarea{min-height:76px;resize:vertical}.wide{grid-column:1/-1}.secondary{background:transparent;color:var(--fg)}.danger{background:transparent;color:var(--signal)}.raw{min-height:380px;font-family:var(--font-mono);font-size:12px}output{display:block;min-height:24px;margin:8px 2px}\\n@media(max-width:820px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.panels-workspace{padding:0}.grid{grid-template-columns:1fr}.actions{width:100%}.actions button{flex:1}section,details{padding:12px}}\\n\",\n  \"javascript\": \"const status=document.getElementById('status'),summary=document.getElementById('summary'),raw=document.getElementById('raw'),save=document.getElementById('save');\\nlet source={schemaVersion:1,scenes:[],strip:[]},draft={schemaVersion:1,scenes:[],strip:[]},connectedImage=null,busy=false,revision=0;\\nconst clone=value=>JSON.parse(JSON.stringify(value));\\nconst text=value=>value===undefined||value===null?'':String(value);\\nconst field=(label,action,value,type='text',wide=false)=>({tag:'label',className:wide?'wide':'',children:[{tag:'span',text:label},type==='textarea'?{tag:'textarea',action,value:text(value),disabled:busy,label}:{tag:'input',type,action,value:Number.isFinite(value)?value:text(value),disabled:busy,label}]});\\nconst choice=(label,action,value,options)=>({tag:'label',children:[{tag:'span',text:label},{tag:'select',action,value:text(value),disabled:busy,label,children:options.map(option=>({tag:'option',text:option,value:option}))}]});\\nconst sceneCard=(scene,index)=>({tag:'article',className:'card',children:[{tag:'div',className:'card-head',children:[{tag:'h3',text:text(scene.title)||text(scene.name)||'Scene '+String(index+1)},{tag:'button',action:'remove-scene:'+String(index),text:'Remove',className:'danger',disabled:busy}]},{tag:'div',className:'grid',children:[field('Scene ID','scene-id:'+String(index),scene.sceneId||scene.id),field('Title','scene-title:'+String(index),scene.title||scene.name),field('Description','scene-description:'+String(index),scene.description||scene.summary,'textarea',true)]}]});\\nconst panelCard=(panel,index)=>({tag:'article',className:'card',children:[{tag:'div',className:'card-head',children:[{tag:'h3',text:'Panel '+String(index+1)+' · '+text(panel.panelId)},{tag:'div',className:'row',children:[{tag:'button',action:'move-up:'+String(index),text:'Up',className:'secondary',disabled:busy||index===0},{tag:'button',action:'move-down:'+String(index),text:'Down',className:'secondary',disabled:busy||index===draft.strip.length-1},{tag:'button',action:'remove-panel:'+String(index),text:'Remove',className:'danger',disabled:busy}]}]},{tag:'div',className:'grid',children:[field('Panel ID','panel-id:'+String(index),panel.panelId),field('Scene ID','panel-scene:'+String(index),panel.sceneId),choice('Type','panel-type:'+String(index),panel.type||'panel',['panel','canvas','zoom']),field('Starts (ms)','panel-start:'+String(index),panel.startMs,'number'),field('Length (ms)','panel-duration:'+String(index),panel.durationMs,'number'),field('Source panel','panel-source:'+String(index),panel.sourcePanelId||panel.repeatOf),field('Change prompt','panel-prompt:'+String(index),panel.changePrompt,'textarea',true),field('Narration','panel-narration:'+String(index),panel.narration||panel.voiceoverText,'textarea',true),{tag:'p',className:'wide hint',text:(panel.image?'Current image retained. ':'')+(Array.isArray(panel.versions)?String(panel.versions.length)+' image version'+(panel.versions.length===1?'':'s')+' retained. ':'')+(Array.isArray(panel.elements)?String(panel.elements.length)+' canvas element'+(panel.elements.length===1?'':'s')+' retained.':'')}]}]});\\nconst ensure=()=>{if(!draft||Array.isArray(draft)||draft.schemaVersion!==1)draft={schemaVersion:1,scenes:[],strip:[]};if(!Array.isArray(draft.scenes))draft.scenes=[];if(!Array.isArray(draft.strip))draft.strip=[]};\\nconst retime=()=>{let start=0;draft.strip=draft.strip.map(panel=>{const next={...panel,startMs:start};start+=Math.max(0,Number(panel.durationMs)||0);return next})};\\nconst draw=()=>{ensure();StillMade.render('handoff',connectedImage?[{tag:'p',className:'hint',text:'Ready: '+text(connectedImage.assetId)+' · version '+text(connectedImage.versionId)},{tag:'div',className:'row',children:draft.strip.map((panel,index)=>({tag:'button',action:'attach-image:'+String(index),text:'Use in panel '+String(index+1),className:'secondary',disabled:busy}))}]:[{tag:'p',className:'hint',text:'Connect the output of Generate image to attach an approved stored result. Provider credentials and charging stay outside this Block.'}]);StillMade.render('scenes',draft.scenes.length?draft.scenes.map(sceneCard):[{tag:'p',text:'No scene groups yet.'}]);StillMade.render('panels',draft.strip.length?draft.strip.map(panelCard):[{tag:'p',text:'No panels yet. Add one to begin.'}]);raw.value=JSON.stringify(draft,null,2);summary.textContent=String(draft.strip.length)+' panel'+(draft.strip.length===1?'':'s')+' across '+String(draft.scenes.length)+' scene'+(draft.scenes.length===1?'':'s');save.disabled=busy;document.getElementById('reset').disabled=busy;document.getElementById('addScene').disabled=busy;document.getElementById('addPanel').disabled=busy};\\nconst changed=()=>{revision+=1;raw.value=JSON.stringify(draft,null,2);status.textContent='Changes are local until you choose Review changes.'};\\nStillMade.onAction(event=>{if(busy)return;ensure();const parts=event.action.split(':'),kind=parts[0],index=Number(parts[1]),scene=draft.scenes.find((item,position)=>position===index),panel=draft.strip.find((item,position)=>position===index);\\n if(kind==='remove-scene'){draft.scenes=draft.scenes.filter((item,position)=>position!==index);changed();draw();return}if(kind==='scene-id'&&scene){if(Object.hasOwn(scene,'sceneId'))scene.sceneId=event.value;else scene.id=event.value}if(kind==='scene-title'&&scene){if(Object.hasOwn(scene,'title'))scene.title=event.value;else scene.name=event.value}if(kind==='scene-description'&&scene){if(Object.hasOwn(scene,'description'))scene.description=event.value;else scene.summary=event.value}\\n if(kind==='remove-panel'){draft.strip=draft.strip.filter((item,position)=>position!==index);retime();changed();draw();return}if(kind==='move-up'&&index>0){const target=draft.strip.find((item,position)=>position===index-1);draft.strip=draft.strip.map((item,position)=>position===index-1?panel:position===index?target:item);retime();changed();draw();return}if(kind==='move-down'&&index<draft.strip.length-1){const target=draft.strip.find((item,position)=>position===index+1);draft.strip=draft.strip.map((item,position)=>position===index+1?panel:position===index?target:item);retime();changed();draw();return}if(!panel){changed();return}\\n if(kind==='attach-image'&&connectedImage){const priorVersions=Array.isArray(panel.versions)?panel.versions:panel.image?[panel.image]:[];panel.image=connectedImage.url;panel.imageAsset=clone(connectedImage);panel.versions=[...priorVersions.filter(value=>value!==connectedImage.url),connectedImage.url].slice(-8);changed();draw();status.textContent='Connected image attached with its exact asset and version identity.';return}\\n if(kind==='panel-id')panel.panelId=event.value;if(kind==='panel-scene')panel.sceneId=event.value;if(kind==='panel-type')panel.type=event.value;if(kind==='panel-start')panel.startMs=Math.max(0,Number(event.value)||0);if(kind==='panel-duration')panel.durationMs=Math.max(1,Number(event.value)||1);if(kind==='panel-source'){if(panel.type==='zoom')panel.sourcePanelId=event.value;else panel.repeatOf=event.value}if(kind==='panel-prompt')panel.changePrompt=event.value;if(kind==='panel-narration'){if(Object.hasOwn(panel,'voiceoverText'))panel.voiceoverText=event.value;else panel.narration=event.value}changed()});\\ndocument.getElementById('addScene').addEventListener('click',()=>{if(busy)return;ensure();const id='portable-scene-'+String(draft.scenes.length+1)+'-'+String(revision+1);draft.scenes=[...draft.scenes,{sceneId:id,title:'New scene',description:''}];changed();draw()});\\ndocument.getElementById('addPanel').addEventListener('click',()=>{if(busy)return;ensure();const start=draft.strip.reduce((total,panel)=>total+Math.max(0,Number(panel.durationMs)||0),0),id='portable-panel-'+String(draft.strip.length+1)+'-'+String(revision+1),scene=draft.scenes.find((item,position)=>position===0);draft.strip=[...draft.strip,{panelId:id,sceneId:scene?scene.sceneId||scene.id:null,type:'panel',changePrompt:'',narration:'',startMs:start,durationMs:4000,image:null,versions:[],provenance:'user'}];changed();draw()});\\ndocument.getElementById('applyRaw').addEventListener('click',()=>{if(busy)return;try{const value=JSON.parse(raw.value);if(!value||Array.isArray(value)||value.schemaVersion!==1||!Array.isArray(value.strip))throw Error('Image Panels JSON must be a version 1 object with a strip.');draft=clone(value);changed();draw();status.textContent='Complete Image Panels data applied to this workspace.'}catch(error){status.textContent=error.message}});\\ndocument.getElementById('reset').addEventListener('click',()=>{if(!busy){draft=clone(source);revision+=1;draw();status.textContent='Changes reset to the current project Image Panels document.'}});\\nsave.addEventListener('click',async()=>{if(busy)return;const started=revision;busy=true;draw();status.textContent='Checking the complete Image Panels document…';try{const result=await StillMade.run({panels:source,updatedPanels:draft,commit:true});draft=clone(result.panels);if(started===revision)status.textContent='Image Panels changes are ready below. Review the before and after, then choose Apply.'}catch(error){status.textContent=error.message||'Image Panels could not be prepared.'}finally{busy=false;draw()}});\\nStillMade.onInput(values=>{source=clone(values.panels||{schemaVersion:1,scenes:[],strip:[]});draft=clone(source);connectedImage=values.generatedImage?clone(values.generatedImage):null;revision+=1;draw();status.textContent='Edit scenes and panels. Existing media, versions, canvas elements, timing, and custom fields are retained.'});\\n\"\n}"},"lineage":{"parents":[],"changes":"Packaged original Block source for StillMade."}}}],"license":"MIT"}