stillmade-sdk 0.1.42 → 0.1.43

package/blocks/motion-frame-review/versions/1.1.2/package.snapshot.js

@@ -1,572 +0,0 @@
-// Immutable SDK data for the 1.1.2 release.
-export default {
-  "manifest": {
-    "schemaVersion": 1,
-    "sdkVersion": "0.1.0",
-    "id": "stillmade.motion-frame-review",
-    "name": "Motion Frame Review",
-    "version": "1.1.2",
-    "kind": "workspace",
-    "runtime": "javascript",
-    "entry": "src/run.js",
-    "description": "Plan one approved image every 3, 5, or 10 seconds, deterministically match exact supplied product images to visual scenes for free, optionally request a quoted batch for remaining styleframes, and hand only approved images to coded Motion Designer layers.",
-    "inputs": {
-      "designPackage": {
-        "type": "text",
-        "primary": true,
-        "required": true,
-        "role": "motion_design_package",
-        "description": "Version 1 design package from Motion Director or Product Launch Director."
-      },
-      "assets": {
-        "type": "asset[]",
-        "context": "assets",
-        "required": false,
-        "description": "Exact saved project images reused as styleframes before any generation is proposed."
-      },
-      "generatedImages": {
-        "type": "image[]",
-        "required": false,
-        "imageMode": "reference",
-        "description": "Completed exact styleframe images returned by the separately approved batch action."
-      },
-      "cadenceSec": {
-        "type": "number",
-        "required": false,
-        "default": 5,
-        "min": 3,
-        "max": 10,
-        "description": "One planned image every 3, 5, or 10 seconds."
-      },
-      "action": {
-        "type": "text",
-        "required": false,
-        "default": "prepare",
-        "description": "Prepare locally, request a quoted batch for missing images, or confirm reviewed styleframes."
-      },
-      "approvals": {
-        "type": "json",
-        "required": false,
-        "description": "Human approval and notes for exact completed styleframes."
-      }
-    },
-    "outputs": {
-      "designPackage": {
-        "type": "text",
-        "primary": true,
-        "required": false,
-        "role": "motion_design_package",
-        "description": "Design package with approved exact styleframe IDs assigned to their coded scenes."
-      },
-      "styleframeAssets": {
-        "type": "image[]",
-        "required": false,
-        "role": "approved_motion_styleframes",
-        "description": "Approved exact image versions for Motion Designer content layers."
-      },
-      "styleframePlan": {
-        "type": "metadata",
-        "role": "motion_styleframe_plan",
-        "description": "Deterministic timestamps, prompts, supplied-asset reuse, and generation readiness."
-      },
-      "frameReview": {
-        "type": "metadata",
-        "required": false,
-        "role": "motion_frame_review",
-        "description": "Approved timestamp-to-image mapping and explicit AI/local execution accounting."
-      },
-      "generateAction": {
-        "type": "approval",
-        "required": false,
-        "role": "portable_media_action",
-        "description": "Host-quoted batch request for missing styleframes; provider, model, credentials, pricing, reservation, and settlement remain host-owned."
-      }
-    },
-    "permissions": {
-      "project": [
-        "context.assets.read"
-      ],
-      "actions": [
-        "image.generate.batch"
-      ],
-      "network": [],
-      "filesystem": [],
-      "secrets": []
-    },
-    "ui": [],
-    "platforms": {
-      "phone": {
-        "supported": true
-      },
-      "browser": {
-        "supported": true
-      },
-      "desktop": {
-        "supported": true
-      }
-    },
-    "license": "MIT",
-    "provenance": {
-      "notice": "MIT License\n\nCopyright (c) <year> <copyright holders>\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"
-    }
-  },
-  "code": "const reviewPreviousVersion=function reviewMotionFrames(input){\n const clone=value=>JSON.parse(JSON.stringify(value));\n const text=value=>value===undefined||value===null?'':String(value);\n const safeId=value=>text(value).trim().replace(/[^a-zA-Z0-9_-]+/g,'-').replace(/^-+|-+$/g,'').slice(0,120);\n const fingerprint=value=>{const source=JSON.stringify(value);let hash=2166136261;for(let index=0;index<source.length;index++){hash^=source.charCodeAt(index);hash=Math.imul(hash,16777619)}return (hash>>>0).toString(36)};\n const parsePackage=value=>{let candidate=value;if(candidate&&typeof candidate.text==='string')candidate=candidate.text;if(typeof candidate==='string'){try{candidate=JSON.parse(candidate)}catch{throw new Error('The connected design package is not valid JSON.')}}if(!candidate||Array.isArray(candidate)||candidate.schemaVersion!==1||candidate.kind!=='motion-design-package'||!Array.isArray(candidate.scenes)||!candidate.scenes.length)throw new Error('Connect a version 1 motion design package before planning styleframes.');return clone(candidate)};\n const pkg=parsePackage(input.designPackage),assets=Array.isArray(input.assets)?input.assets.filter(asset=>asset&&asset.assetId&&asset.versionId):[],assetById=id=>assets.find(asset=>asset.assetId===id||asset.versionId===id),cadence=Number(input.cadenceSec||5);\n if(![3,5,10].includes(cadence))throw new Error('Choose a 3, 5, or 10 second styleframe interval.');\n const duration=Number(pkg.intendedOutputs?.[0]?.durationSec)||pkg.scenes.reduce((sum,scene)=>sum+Math.max(1,Number(scene.durationSec)||1),0),aspect=text(pkg.intendedOutputs?.[0]?.aspect||'16:9');\n if(!Number.isFinite(duration)||duration<=0||duration>21600||!['16:9','9:16','1:1'].includes(aspect))throw new Error('The design package needs a supported duration and aspect.');\n const regular=Array.from({length:Math.floor(duration/cadence)+1},(_,index)=>Math.min(duration,index*cadence)),timestamps=(duration-regular.at(-1)>.25?[...regular,duration]:regular).map(value=>Number(value.toFixed(3)));\n if(timestamps.length>60)throw new Error('This interval creates more than 60 styleframes. Choose a larger interval.');\n const starts=[];let cursor=0;for(const scene of pkg.scenes){starts.push({scene,start:cursor,end:cursor+Math.max(1,Number(scene.durationSec)||1)});cursor+=Math.max(1,Number(scene.durationSec)||1)}\n const style=pkg.style||{},intent=pkg.creativeIntent||{},planItems=timestamps.map((timestamp,index)=>{const entry=starts.find(item=>timestamp>=item.start&&timestamp<item.end)||starts.at(-1),scene=entry.scene,content=(scene.assetIds||[]).map(assetById).find(asset=>asset&&asset.kind==='image'),copy=scene.copy||{},panelId='styleframe-'+String(index+1).padStart(2,'0')+'-'+String(Math.round(timestamp*1000)),brief=['Create one polished motion-graphics styleframe, not a complete video.','Aspect '+aspect+'. Timestamp '+String(timestamp)+' seconds.','Communication goal: '+text(scene.goal),'Exact on-screen copy: '+[copy.eyebrow,copy.headline,copy.support].map(text).filter(Boolean).join(' / '),'Composition: '+text(scene.layout),'Visual treatment: '+text(scene.visualApproach),'Motion implication: '+text(scene.motionIntent),'Global visual language: '+text(intent.visualLanguage),'Tone and density: '+[intent.tone,intent.density].map(text).filter(Boolean).join(', '),'Palette: background '+text(style.background)+', foreground '+text(style.foreground)+', accent '+text(style.accent)+'.','Make an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.'].filter(line=>!line.endsWith(': ')).join('\\n');return {panelId,timestampSec:timestamp,sceneId:safeId(scene.id)||'scene-'+String(index+1),sceneLabel:text(scene.goal||copy.headline||'Styleframe '+String(index+1)),brief,status:content?'supplied':'missing',image:content?{kind:'image',assetId:content.assetId,versionId:content.versionId,url:content.url,...(content.width?{width:content.width}:{}),...(content.height?{height:content.height}:{})}:null}});\n const generated=Array.isArray(input.generatedImages)?input.generatedImages.filter(image=>image&&image.kind==='image'&&image.assetId&&image.versionId&&image.url):[],byPanel=new Map(generated.map(image=>[text(image.panelId),image])),items=planItems.map(item=>{const image=item.image||byPanel.get(item.panelId);return {...item,status:image?'ready':'missing',image:image?clone(image):null}}),plan={schemaVersion:1,kind:'motion-styleframe-plan',sourceRevision:text(pkg.revision),cadenceSec:cadence,durationSec:Number(duration.toFixed(3)),aspectRatio:aspect,items,execution:{planning:'local-deterministic',imageGeneration:items.some(item=>!item.image)?'explicit-quoted-action-required':'not-required'}};\n const outputs={styleframePlan:plan};\n if(input.action==='generate-batch'){\n  const missing=items.filter(item=>!item.image);\n  if(!missing.length)throw new Error('Every planned styleframe already has an exact image.');\n  outputs.generateAction={schemaVersion:1,kind:'stillmade.media-action',operation:'image.generate.batch',request:{source:{id:'stillmade.motion-frame-review',version:'1.1.2'},items:missing.map(item=>({panelId:item.panelId,prompt:item.brief})),aspectRatio:aspect},resultPort:'generatedImages'};\n }\n if(input.action==='confirm'){\n  const approvals=Array.isArray(input.approvals)?input.approvals:[],approvalById=new Map(approvals.map(item=>[text(item.panelId),item])),approved=items.filter(item=>{const decision=approvalById.get(item.panelId);return decision?.approved===true&&item.image}).map(item=>{const decision=approvalById.get(item.panelId);return {...item,notes:text(decision.notes).trim().slice(0,500)}});\n  if(!approved.length)throw new Error('Approve at least one completed styleframe before continuing.');\n  const next=clone(pkg),approvedByScene=new Map();for(const item of approved){if(!approvedByScene.has(item.sceneId))approvedByScene.set(item.sceneId,[]);approvedByScene.get(item.sceneId).push(item)}\n  next.scenes=next.scenes.map(scene=>{const selected=approvedByScene.get(safeId(scene.id))||[],ids=selected.map(item=>item.image.assetId);return {...scene,assetIds:[...new Set([...(scene.assetIds||[]),...ids])],styleframeIds:selected.map(item=>item.panelId)}});\n  const existing=new Set((next.references||[]).map(reference=>text(reference.assetId)+'::'+text(reference.versionId)));next.references=[...(next.references||[]),...approved.filter(item=>!existing.has(item.image.assetId+'::'+item.image.versionId)).map(item=>({label:item.sceneLabel,assetId:item.image.assetId,versionId:item.image.versionId,role:'content',confidence:'approved-styleframe',notes:'Approved at '+String(item.timestampSec)+' seconds for coded layer animation.'}))];\n  next.styleframeReview={schemaVersion:1,cadenceSec:cadence,durationSec:Number(duration.toFixed(3)),aspectRatio:aspect,approved:approved.map(item=>({panelId:item.panelId,timestampSec:item.timestampSec,sceneId:item.sceneId,assetId:item.image.assetId,versionId:item.image.versionId,notes:item.notes})),execution:{planningAi:false,imageGenerationUsed:approved.some(item=>byPanel.has(item.panelId)),stillmadeCreditsRequiredForPlanning:false,stillmadeCreditsRequiredForGeneratedImages:approved.some(item=>byPanel.has(item.panelId))}};\n  next.revision=text(next.revision||'draft-1')+'-styleframes-'+fingerprint(next.styleframeReview);outputs.designPackage=JSON.stringify(next);outputs.styleframeAssets=approved.map(item=>clone(item.image));outputs.frameReview=next.styleframeReview;\n }\n return outputs;\n};\nconst next=JSON.parse(JSON.stringify(input));\nconst assets=Array.isArray(next.assets)?next.assets:[],images=assets.filter(asset=>asset?.kind==='image'&&asset.assetId&&asset.versionId&&asset.url);\nlet pkg=next.designPackage;\nif(pkg&&typeof pkg.text==='string')pkg=pkg.text;\nif(typeof pkg==='string'&&images.length){\n try{\n  const parsed=JSON.parse(pkg);\n  if(parsed?.schemaVersion===1&&parsed.kind==='motion-design-package'&&Array.isArray(parsed.scenes)){\n   let visualIndex=0;\n   parsed.scenes=parsed.scenes.map(scene=>{\n    if(Array.isArray(scene.assetIds)&&scene.assetIds.length)return scene;\n    const direction=[scene.goal,scene.visualApproach,scene.layout].filter(Boolean).join(' ');\n    if(!/\\b(ui|interface|image|screenshot|editor|timeline|product|layer stack|composition)\\b/i.test(direction))return scene;\n    const image=images[visualIndex++%images.length];\n    return {...scene,assetIds:[image.assetId],evidenceRefs:[...new Set([...(Array.isArray(scene.evidenceRefs)?scene.evidenceRefs:[]),image.assetId])]};\n   });\n   next.designPackage=JSON.stringify(parsed);\n  }\n }catch{}\n}\nreturn reviewPreviousVersion(next);",
-  "view": {
-    "html": "<main><div class=\"toolbar\"><label>One frame every<select id=\"cadence\"><option value=\"3\">3 seconds</option><option value=\"5\" selected>5 seconds</option><option value=\"10\">10 seconds</option></select></label><button id=\"plan\" type=\"button\" data-stillmade-action=\"run\">Prepare frames · free</button></div><p id=\"source\">Connect a motion plan to review frames.</p><output id=\"status\" role=\"status\" aria-live=\"polite\">Choose an interval, then prepare your frames.</output><div id=\"frames\" class=\"frames\"><p>Your actual images will appear here for approval.</p></div><div class=\"handoff\"><p id=\"selection\">No frames selected.</p><button id=\"confirm\" type=\"button\" disabled>Confirm selected frames</button></div><details><summary>Selection and missing images</summary><div class=\"actions\"><button id=\"approve-all\" class=\"secondary\" type=\"button\">Select ready frames</button><button id=\"reject-all\" class=\"secondary\" type=\"button\">Clear selection</button><button id=\"generate\" class=\"secondary\" type=\"button\" disabled>Generate missing images</button></div><p class=\"notice\">Review and supplied images are free. Generating missing images requires a separate price approval before credits are spent.</p></details></main>",
-    "css": "\nmain{padding:16px;color:var(--fg);font-family:var(--font-body)}\n.toolbar,.actions,.handoff{display:flex;align-items:center;flex-wrap:wrap;gap:12px}\n.toolbar{justify-content:space-between;margin-bottom:16px}\nlabel{display:grid;gap:8px;font-size:13px}\nselect,textarea{box-sizing:border-box;width:100%;padding:10px;border:1px solid var(--border-tok);border-radius:var(--r-2);background:var(--bg);color:var(--fg);font:inherit}\nbutton{min-height:44px;padding:10px 16px;border:0;border-radius:999px;background:var(--fg);color:var(--bg);font:inherit;cursor:pointer}\nbutton.secondary{background:transparent;color:var(--fg);border:1px solid var(--border-tok)}\nbutton:disabled{opacity:.5;cursor:default}\nbutton:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--signal);outline-offset:3px}\np,small,output{color:var(--fg-muted)}\noutput{display:block;min-height:24px;margin:12px 0}\n.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px 20px}\n.frame{min-width:0}\n.frame img,.preview{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--bg-inset)}\n.preview{display:grid;place-items:center;color:var(--fg-muted)}\n.frame-head{display:flex;justify-content:space-between;gap:12px;margin:12px 0}\n.frame-head small{white-space:nowrap;font-variant-numeric:tabular-nums}\n.approve{display:flex;align-items:center;gap:8px;min-height:44px}\n.approve input{width:18px;height:18px;margin:0;flex:none}\ndetails{margin-top:8px}summary{cursor:pointer;min-height:32px;color:var(--fg-muted)}\ntextarea{min-height:76px;resize:vertical}\n.handoff{justify-content:space-between;margin-top:28px;padding-top:16px;border-top:1px solid var(--border-tok)}\n.handoff p{margin:0}.notice{font-size:13px;margin:16px 0}\n@media(max-width:520px){main{padding:8px}.toolbar,.handoff{align-items:stretch;flex-direction:column}.actions{gap:8px}}\n",
-    "themedCss": "\nmain{padding:16px;color:var(--fg);font-family:var(--font-body)}\n.toolbar,.actions,.handoff{display:flex;align-items:center;flex-wrap:wrap;gap:12px}\n.toolbar{justify-content:space-between;margin-bottom:16px}\nlabel{display:grid;gap:8px;font-size:13px}\nselect,textarea{box-sizing:border-box;width:100%;padding:10px;border:1px solid var(--border-tok);border-radius:var(--r-2);background:var(--bg);color:var(--fg);font:inherit}\nbutton{min-height:44px;padding:10px 16px;border:0;border-radius:999px;background:var(--fg);color:var(--bg);font:inherit;cursor:pointer}\nbutton.secondary{background:transparent;color:var(--fg);border:1px solid var(--border-tok)}\nbutton:disabled{opacity:.5;cursor:default}\nbutton:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--signal);outline-offset:3px}\np,small,output{color:var(--fg-muted)}\noutput{display:block;min-height:24px;margin:12px 0}\n.frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px 20px}\n.frame{min-width:0}\n.frame img,.preview{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--bg-inset)}\n.preview{display:grid;place-items:center;color:var(--fg-muted)}\n.frame-head{display:flex;justify-content:space-between;gap:12px;margin:12px 0}\n.frame-head small{white-space:nowrap;font-variant-numeric:tabular-nums}\n.approve{display:flex;align-items:center;gap:8px;min-height:44px}\n.approve input{width:18px;height:18px;margin:0;flex:none}\ndetails{margin-top:8px}summary{cursor:pointer;min-height:32px;color:var(--fg-muted)}\ntextarea{min-height:76px;resize:vertical}\n.handoff{justify-content:space-between;margin-top:28px;padding-top:16px;border-top:1px solid var(--border-tok)}\n.handoff p{margin:0}.notice{font-size:13px;margin:16px 0}\n@media(max-width:520px){main{padding:8px}.toolbar,.handoff{align-items:stretch;flex-direction:column}.actions{gap:8px}}\n",
-    "javascript": "\nconst e=id=>document.getElementById(id),status=e('status');\nlet designPackage=null,assets=[],generatedImages=[],plan=null,decisions=new Map(),busy=false,inputRevision=0,displayRevision=0,previewQueue=(async()=>{})(),cadenceEdited=false;\nconst text=value=>value===undefined||value===null?'':String(value);\nconst imageFor=item=>item.image||generatedImages.find(image=>text(image.panelId)===item.panelId);\nconst selected=()=> (plan?.items||[]).filter(item=>imageFor(item)&&decisions.get(item.panelId)?.approved);\nconst refresh=()=>{\n const items=plan?.items||[],stale=plan&&plan.cadenceSec!==Number(e('cadence').value);\n e('plan').disabled=busy||!designPackage;\n e('confirm').disabled=busy||stale||!selected().length;\n e('generate').disabled=busy||stale||!items.some(item=>!imageFor(item));\n e('approve-all').disabled=busy||!items.some(imageFor);\n e('reject-all').disabled=busy||!items.length;\n e('selection').textContent=String(selected().length)+' of '+String(items.length)+' frames selected'+(stale?' · Prepare frames for the new interval.':'');\n};\nconst card=(item,index)=>{\n const image=imageFor(item),decision=decisions.get(item.panelId)||{approved:false,notes:''};\n return {tag:'article',className:'frame',children:[\n image?{tag:'img',id:'frame-image-'+String(index),label:'Frame at '+String(item.timestampSec)+' seconds'}:{tag:'div',className:'preview',text:'Image needed'},\n {tag:'div',className:'frame-head',children:[{tag:'strong',text:item.sceneLabel},{tag:'small',text:String(item.timestampSec)+'s'}]},\n {tag:'small',id:'frame-status-'+String(index),text:image?'Loading image…':'Supply an image or generate missing images below.'},\n {tag:'label',className:'approve',children:[{tag:'input',id:'frame-approval-'+String(index),type:'checkbox',action:'approve:'+String(index),checked:decision.approved,disabled:!image,label:'Use frame at '+String(item.timestampSec)+' seconds'},{tag:'span',text:'Use this frame'}]},\n {tag:'details',children:[{tag:'summary',text:'Add a revision note'},{tag:'label',children:[{tag:'span',text:'What should change?'},{tag:'textarea',action:'notes:'+String(index),value:decision.notes,placeholder:'Keep the image; adjust the headline…'}]}]}\n ]};\n};\nconst draw=()=>{\n const revision=++displayRevision,items=plan?.items||[];\n StillMade.render('frames',items.length?items.map(card):[{tag:'p',text:'Your actual images will appear here for approval.'}]);\n // Serialize display requests across redraws: the SDK permits one in flight.\n items.forEach((item,index)=>{\n  const image=imageFor(item);if(!image)return;\n  previewQueue=previewQueue.then(async()=>{\n   if(revision!==displayRevision)return;\n   try{\n    const preview=await StillMade.previewImage(image);\n    if(revision!==displayRevision)return;\n    e('frame-image-'+String(index)).src=preview.url;\n    e('frame-status-'+String(index)).textContent='';\n   }catch(error){\n    if(revision!==displayRevision)return;\n    e('frame-status-'+String(index)).textContent=error.message||'Image preview unavailable. Prepare frames to retry.';\n   }\n  });\n });refresh();\n};\nconst request=action=>StillMade.run({designPackage,assets,generatedImages,cadenceSec:Number(e('cadence').value),action,...(action==='confirm'?{approvals:(plan?.items||[]).map(item=>({panelId:item.panelId,approved:decisions.get(item.panelId)?.approved===true,notes:text(decisions.get(item.panelId)?.notes)}))}:{})});\nStillMade.onInput(values=>{\n const changed=designPackage!==values.designPackage;\n inputRevision++;designPackage=values.designPackage||null;assets=Array.isArray(values.assets)?values.assets:[];generatedImages=Array.isArray(values.generatedImages)?values.generatedImages:[];\n if(!cadenceEdited&&[3,5,10].includes(Number(values.cadenceSec)))e('cadence').value=String(values.cadenceSec);\n if(changed){plan=null;decisions.forEach((decision,key)=>decisions.set(key,{approved:false,notes:decision.notes}))}\n e('source').textContent=designPackage?'Review the images before creating motion.':'Connect a motion plan to review frames.';\n status.textContent=changed?'Prepare frames for the connected plan.':generatedImages.length?'New images are ready to review.':'Review each image, then confirm your selection.';\n draw();\n});\nStillMade.onAction(event=>{\n const parts=event.action.split(':'),item=plan?.items?.at(Number(parts.at(1)));if(!item)return;\n const current=decisions.get(item.panelId)||{approved:false,notes:''};\n if(parts.at(0)==='approve')current.approved=event.checked;\n if(parts.at(0)==='notes')current.notes=text(event.value).slice(0,500);\n decisions.set(item.panelId,current);refresh();\n});\ne('cadence').addEventListener('change',()=>{cadenceEdited=true;refresh()});\ne('plan').addEventListener('click',async()=>{\n if(busy||!designPackage)return;busy=true;refresh();const revision=inputRevision;status.textContent='Preparing frames from supplied images…';\n try{const result=await request('prepare');if(revision!==inputRevision)return;plan=result.styleframePlan;status.textContent=String(plan.items.length)+' frames ready for review. Select the images you want to use.';draw()}\n catch(error){status.textContent=error.message||'Frames could not be prepared.'}finally{busy=false;refresh()}\n});\ne('generate').addEventListener('click',async()=>{\n if(busy)return;busy=true;refresh();status.textContent='Preparing a price approval for missing images…';\n try{await request('generate-batch');status.textContent='Review the image batch and maximum price below before approving generation.'}\n catch(error){status.textContent=error.message||'The image batch could not be prepared.'}finally{busy=false;refresh()}\n});\nconst selectAll=approved=>{(plan?.items||[]).forEach((item,index)=>{const current=decisions.get(item.panelId)||{notes:''};decisions.set(item.panelId,{approved:approved&&!!imageFor(item),notes:current.notes});e('frame-approval-'+String(index)).checked=approved&&!!imageFor(item)});refresh()};\ne('approve-all').addEventListener('click',()=>selectAll(true));\ne('reject-all').addEventListener('click',()=>selectAll(false));\ne('confirm').addEventListener('click',async()=>{\n if(busy)return;busy=true;refresh();status.textContent='Confirming selected images…';\n try{const result=await request('confirm');status.textContent=String(result.frameReview.approved.length)+' frames confirmed for Motion Designer.'}\n catch(error){status.textContent=error.message||'The frames could not be confirmed.'}finally{busy=false;refresh()}\n});\n"
-  },
-  "tests": [
-    {
-      "name": "Reuse supplied images and approve an exact generated styleframe handoff",
-      "input": {
-        "designPackage": "{\"schemaVersion\":1,\"revision\":\"reference-1\",\"kind\":\"motion-design-package\",\"brief\":\"Launch the product\",\"audience\":\"creative teams\",\"creativeIntent\":{\"idea\":\"Product proof with editorial restraint\",\"tone\":\"confident\",\"visualLanguage\":\"real UI, oversized typography, warm whitespace\",\"motionCharacter\":\"measured\",\"density\":\"open\",\"avoid\":[]},\"constraints\":{\"required\":[],\"preferences\":[],\"locks\":[]},\"references\":[],\"intendedOutputs\":[{\"aspect\":\"16:9\",\"durationSec\":12,\"channel\":\"web\"}],\"style\":{\"background\":\"#F1EEE8\",\"foreground\":\"#101010\",\"accent\":\"#F0642B\",\"fontDirection\":\"modern sans\"},\"scenes\":[{\"id\":\"scene-1\",\"goal\":\"Show the product\",\"copy\":{\"headline\":\"Build it your way\",\"support\":\"\"},\"durationSec\":6,\"visualApproach\":\"Real product UI inside an editorial composition\",\"layout\":\"offset editorial\",\"motionIntent\":\"measured reveal\",\"assetIds\":[\"ui-1\"],\"evidenceRefs\":[],\"locks\":[]},{\"id\":\"scene-2\",\"goal\":\"Land the brand\",\"copy\":{\"headline\":\"StillMade\",\"support\":\"Motion you can edit\"},\"durationSec\":6,\"visualApproach\":\"Oversized type and restrained brand mark\",\"layout\":\"centered poster\",\"motionIntent\":\"precise finish\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]}],\"audio\":{\"mode\":\"silent\",\"assetIds\":[],\"captions\":[],\"notes\":\"\"},\"unresolved\":[],\"branch\":{\"intent\":\"create\",\"parentRevision\":null}}",
-        "assets": [
-          {
-            "kind": "image",
-            "assetId": "ui-1",
-            "versionId": "ui-v1",
-            "url": "https://media.example/ui.png",
-            "width": 1600,
-            "height": 900
-          }
-        ],
-        "generatedImages": [
-          {
-            "kind": "image",
-            "assetId": "generated-1",
-            "versionId": "generated-v1",
-            "url": "https://media.example/generated.png",
-            "panelId": "styleframe-03-10000",
-            "width": 1024,
-            "height": 1024
-          }
-        ],
-        "cadenceSec": 5,
-        "action": "confirm",
-        "approvals": [
-          {
-            "panelId": "styleframe-01-0",
-            "approved": true,
-            "notes": ""
-          },
-          {
-            "panelId": "styleframe-02-5000",
-            "approved": false,
-            "notes": ""
-          },
-          {
-            "panelId": "styleframe-03-10000",
-            "approved": true,
-            "notes": ""
-          },
-          {
-            "panelId": "styleframe-04-12000",
-            "approved": true,
-            "notes": ""
-          }
-        ]
-      },
-      "expected": {
-        "styleframePlan": {
-          "schemaVersion": 1,
-          "kind": "motion-styleframe-plan",
-          "sourceRevision": "reference-1",
-          "cadenceSec": 5,
-          "durationSec": 12,
-          "aspectRatio": "16:9",
-          "items": [
-            {
-              "panelId": "styleframe-01-0",
-              "timestampSec": 0,
-              "sceneId": "scene-1",
-              "sceneLabel": "Show the product",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 0 seconds.\nCommunication goal: Show the product\nExact on-screen copy: Build it your way\nComposition: offset editorial\nVisual treatment: Real product UI inside an editorial composition\nMotion implication: measured reveal\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "ready",
-              "image": {
-                "kind": "image",
-                "assetId": "ui-1",
-                "versionId": "ui-v1",
-                "url": "https://media.example/ui.png",
-                "width": 1600,
-                "height": 900
-              }
-            },
-            {
-              "panelId": "styleframe-02-5000",
-              "timestampSec": 5,
-              "sceneId": "scene-1",
-              "sceneLabel": "Show the product",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 5 seconds.\nCommunication goal: Show the product\nExact on-screen copy: Build it your way\nComposition: offset editorial\nVisual treatment: Real product UI inside an editorial composition\nMotion implication: measured reveal\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "ready",
-              "image": {
-                "kind": "image",
-                "assetId": "ui-1",
-                "versionId": "ui-v1",
-                "url": "https://media.example/ui.png",
-                "width": 1600,
-                "height": 900
-              }
-            },
-            {
-              "panelId": "styleframe-03-10000",
-              "timestampSec": 10,
-              "sceneId": "scene-2",
-              "sceneLabel": "Land the brand",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 10 seconds.\nCommunication goal: Land the brand\nExact on-screen copy: StillMade / Motion you can edit\nComposition: centered poster\nVisual treatment: Oversized type and restrained brand mark\nMotion implication: precise finish\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "ready",
-              "image": {
-                "kind": "image",
-                "assetId": "generated-1",
-                "versionId": "generated-v1",
-                "url": "https://media.example/generated.png",
-                "panelId": "styleframe-03-10000",
-                "width": 1024,
-                "height": 1024
-              }
-            },
-            {
-              "panelId": "styleframe-04-12000",
-              "timestampSec": 12,
-              "sceneId": "scene-2",
-              "sceneLabel": "Land the brand",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 12 seconds.\nCommunication goal: Land the brand\nExact on-screen copy: StillMade / Motion you can edit\nComposition: centered poster\nVisual treatment: Oversized type and restrained brand mark\nMotion implication: precise finish\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "missing",
-              "image": null
-            }
-          ],
-          "execution": {
-            "planning": "local-deterministic",
-            "imageGeneration": "explicit-quoted-action-required"
-          }
-        },
-        "designPackage": "{\"schemaVersion\":1,\"revision\":\"reference-1-styleframes-a6px0m\",\"kind\":\"motion-design-package\",\"brief\":\"Launch the product\",\"audience\":\"creative teams\",\"creativeIntent\":{\"idea\":\"Product proof with editorial restraint\",\"tone\":\"confident\",\"visualLanguage\":\"real UI, oversized typography, warm whitespace\",\"motionCharacter\":\"measured\",\"density\":\"open\",\"avoid\":[]},\"constraints\":{\"required\":[],\"preferences\":[],\"locks\":[]},\"references\":[{\"label\":\"Show the product\",\"assetId\":\"ui-1\",\"versionId\":\"ui-v1\",\"role\":\"content\",\"confidence\":\"approved-styleframe\",\"notes\":\"Approved at 0 seconds for coded layer animation.\"},{\"label\":\"Land the brand\",\"assetId\":\"generated-1\",\"versionId\":\"generated-v1\",\"role\":\"content\",\"confidence\":\"approved-styleframe\",\"notes\":\"Approved at 10 seconds for coded layer animation.\"}],\"intendedOutputs\":[{\"aspect\":\"16:9\",\"durationSec\":12,\"channel\":\"web\"}],\"style\":{\"background\":\"#F1EEE8\",\"foreground\":\"#101010\",\"accent\":\"#F0642B\",\"fontDirection\":\"modern sans\"},\"scenes\":[{\"id\":\"scene-1\",\"goal\":\"Show the product\",\"copy\":{\"headline\":\"Build it your way\",\"support\":\"\"},\"durationSec\":6,\"visualApproach\":\"Real product UI inside an editorial composition\",\"layout\":\"offset editorial\",\"motionIntent\":\"measured reveal\",\"assetIds\":[\"ui-1\"],\"evidenceRefs\":[],\"locks\":[],\"styleframeIds\":[\"styleframe-01-0\"]},{\"id\":\"scene-2\",\"goal\":\"Land the brand\",\"copy\":{\"headline\":\"StillMade\",\"support\":\"Motion you can edit\"},\"durationSec\":6,\"visualApproach\":\"Oversized type and restrained brand mark\",\"layout\":\"centered poster\",\"motionIntent\":\"precise finish\",\"assetIds\":[\"generated-1\"],\"evidenceRefs\":[],\"locks\":[],\"styleframeIds\":[\"styleframe-03-10000\"]}],\"audio\":{\"mode\":\"silent\",\"assetIds\":[],\"captions\":[],\"notes\":\"\"},\"unresolved\":[],\"branch\":{\"intent\":\"create\",\"parentRevision\":null},\"styleframeReview\":{\"schemaVersion\":1,\"cadenceSec\":5,\"durationSec\":12,\"aspectRatio\":\"16:9\",\"approved\":[{\"panelId\":\"styleframe-01-0\",\"timestampSec\":0,\"sceneId\":\"scene-1\",\"assetId\":\"ui-1\",\"versionId\":\"ui-v1\",\"notes\":\"\"},{\"panelId\":\"styleframe-03-10000\",\"timestampSec\":10,\"sceneId\":\"scene-2\",\"assetId\":\"generated-1\",\"versionId\":\"generated-v1\",\"notes\":\"\"}],\"execution\":{\"planningAi\":false,\"imageGenerationUsed\":true,\"stillmadeCreditsRequiredForPlanning\":false,\"stillmadeCreditsRequiredForGeneratedImages\":true}}}",
-        "styleframeAssets": [
-          {
-            "kind": "image",
-            "assetId": "ui-1",
-            "versionId": "ui-v1",
-            "url": "https://media.example/ui.png",
-            "width": 1600,
-            "height": 900
-          },
-          {
-            "kind": "image",
-            "assetId": "generated-1",
-            "versionId": "generated-v1",
-            "url": "https://media.example/generated.png",
-            "panelId": "styleframe-03-10000",
-            "width": 1024,
-            "height": 1024
-          }
-        ],
-        "frameReview": {
-          "schemaVersion": 1,
-          "cadenceSec": 5,
-          "durationSec": 12,
-          "aspectRatio": "16:9",
-          "approved": [
-            {
-              "panelId": "styleframe-01-0",
-              "timestampSec": 0,
-              "sceneId": "scene-1",
-              "assetId": "ui-1",
-              "versionId": "ui-v1",
-              "notes": ""
-            },
-            {
-              "panelId": "styleframe-03-10000",
-              "timestampSec": 10,
-              "sceneId": "scene-2",
-              "assetId": "generated-1",
-              "versionId": "generated-v1",
-              "notes": ""
-            }
-          ],
-          "execution": {
-            "planningAi": false,
-            "imageGenerationUsed": true,
-            "stillmadeCreditsRequiredForPlanning": false,
-            "stillmadeCreditsRequiredForGeneratedImages": true
-          }
-        }
-      }
-    },
-    {
-      "name": "Prepare a free cadence plan before generation",
-      "input": {
-        "designPackage": "{\"schemaVersion\":1,\"revision\":\"reference-1\",\"kind\":\"motion-design-package\",\"brief\":\"Launch the product\",\"audience\":\"creative teams\",\"creativeIntent\":{\"idea\":\"Product proof with editorial restraint\",\"tone\":\"confident\",\"visualLanguage\":\"real UI, oversized typography, warm whitespace\",\"motionCharacter\":\"measured\",\"density\":\"open\",\"avoid\":[]},\"constraints\":{\"required\":[],\"preferences\":[],\"locks\":[]},\"references\":[],\"intendedOutputs\":[{\"aspect\":\"16:9\",\"durationSec\":12,\"channel\":\"web\"}],\"style\":{\"background\":\"#F1EEE8\",\"foreground\":\"#101010\",\"accent\":\"#F0642B\",\"fontDirection\":\"modern sans\"},\"scenes\":[{\"id\":\"scene-1\",\"goal\":\"Show the product\",\"copy\":{\"headline\":\"Build it your way\",\"support\":\"\"},\"durationSec\":6,\"visualApproach\":\"Real product UI inside an editorial composition\",\"layout\":\"offset editorial\",\"motionIntent\":\"measured reveal\",\"assetIds\":[\"ui-1\"],\"evidenceRefs\":[],\"locks\":[]},{\"id\":\"scene-2\",\"goal\":\"Land the brand\",\"copy\":{\"headline\":\"StillMade\",\"support\":\"Motion you can edit\"},\"durationSec\":6,\"visualApproach\":\"Oversized type and restrained brand mark\",\"layout\":\"centered poster\",\"motionIntent\":\"precise finish\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]}],\"audio\":{\"mode\":\"silent\",\"assetIds\":[],\"captions\":[],\"notes\":\"\"},\"unresolved\":[],\"branch\":{\"intent\":\"create\",\"parentRevision\":null}}",
-        "assets": [
-          {
-            "kind": "image",
-            "assetId": "ui-1",
-            "versionId": "ui-v1",
-            "url": "https://media.example/ui.png",
-            "width": 1600,
-            "height": 900
-          }
-        ],
-        "cadenceSec": 5,
-        "action": "prepare"
-      },
-      "expected": {
-        "styleframePlan": {
-          "schemaVersion": 1,
-          "kind": "motion-styleframe-plan",
-          "sourceRevision": "reference-1",
-          "cadenceSec": 5,
-          "durationSec": 12,
-          "aspectRatio": "16:9",
-          "items": [
-            {
-              "panelId": "styleframe-01-0",
-              "timestampSec": 0,
-              "sceneId": "scene-1",
-              "sceneLabel": "Show the product",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 0 seconds.\nCommunication goal: Show the product\nExact on-screen copy: Build it your way\nComposition: offset editorial\nVisual treatment: Real product UI inside an editorial composition\nMotion implication: measured reveal\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "ready",
-              "image": {
-                "kind": "image",
-                "assetId": "ui-1",
-                "versionId": "ui-v1",
-                "url": "https://media.example/ui.png",
-                "width": 1600,
-                "height": 900
-              }
-            },
-            {
-              "panelId": "styleframe-02-5000",
-              "timestampSec": 5,
-              "sceneId": "scene-1",
-              "sceneLabel": "Show the product",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 5 seconds.\nCommunication goal: Show the product\nExact on-screen copy: Build it your way\nComposition: offset editorial\nVisual treatment: Real product UI inside an editorial composition\nMotion implication: measured reveal\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "ready",
-              "image": {
-                "kind": "image",
-                "assetId": "ui-1",
-                "versionId": "ui-v1",
-                "url": "https://media.example/ui.png",
-                "width": 1600,
-                "height": 900
-              }
-            },
-            {
-              "panelId": "styleframe-03-10000",
-              "timestampSec": 10,
-              "sceneId": "scene-2",
-              "sceneLabel": "Land the brand",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 10 seconds.\nCommunication goal: Land the brand\nExact on-screen copy: StillMade / Motion you can edit\nComposition: centered poster\nVisual treatment: Oversized type and restrained brand mark\nMotion implication: precise finish\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "missing",
-              "image": null
-            },
-            {
-              "panelId": "styleframe-04-12000",
-              "timestampSec": 12,
-              "sceneId": "scene-2",
-              "sceneLabel": "Land the brand",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 12 seconds.\nCommunication goal: Land the brand\nExact on-screen copy: StillMade / Motion you can edit\nComposition: centered poster\nVisual treatment: Oversized type and restrained brand mark\nMotion implication: precise finish\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "missing",
-              "image": null
-            }
-          ],
-          "execution": {
-            "planning": "local-deterministic",
-            "imageGeneration": "explicit-quoted-action-required"
-          }
-        }
-      }
-    },
-    {
-      "name": "Match exact supplied project images to unassigned visual scenes before approval",
-      "input": {
-        "designPackage": "{\"schemaVersion\":1,\"revision\":\"automatic-real-media-1\",\"kind\":\"motion-design-package\",\"brief\":\"Launch the product\",\"audience\":\"creative teams\",\"creativeIntent\":{\"idea\":\"Product proof with editorial restraint\",\"tone\":\"confident\",\"visualLanguage\":\"real UI, oversized typography, warm whitespace\",\"motionCharacter\":\"measured\",\"density\":\"open\",\"avoid\":[]},\"constraints\":{\"required\":[],\"preferences\":[],\"locks\":[]},\"references\":[],\"intendedOutputs\":[{\"aspect\":\"16:9\",\"durationSec\":12,\"channel\":\"web\"}],\"style\":{\"background\":\"#F1EEE8\",\"foreground\":\"#101010\",\"accent\":\"#F0642B\",\"fontDirection\":\"modern sans\"},\"scenes\":[{\"id\":\"scene-1\",\"goal\":\"Show the product\",\"copy\":{\"headline\":\"Build it your way\",\"support\":\"\"},\"durationSec\":6,\"visualApproach\":\"Actual product UI screenshot inside the composition\",\"layout\":\"offset editorial\",\"motionIntent\":\"measured reveal\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]},{\"id\":\"scene-2\",\"goal\":\"Land the brand\",\"copy\":{\"headline\":\"StillMade\",\"support\":\"Motion you can edit\"},\"durationSec\":6,\"visualApproach\":\"Oversized type and restrained brand mark\",\"layout\":\"centered poster\",\"motionIntent\":\"precise finish\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]}],\"audio\":{\"mode\":\"silent\",\"assetIds\":[],\"captions\":[],\"notes\":\"\"},\"unresolved\":[],\"branch\":{\"intent\":\"create\",\"parentRevision\":null}}",
-        "assets": [
-          {
-            "kind": "image",
-            "assetId": "ui-1",
-            "versionId": "ui-v1",
-            "url": "https://media.example/ui.png",
-            "width": 1600,
-            "height": 900
-          }
-        ],
-        "cadenceSec": 5,
-        "action": "prepare"
-      },
-      "expected": {
-        "styleframePlan": {
-          "schemaVersion": 1,
-          "kind": "motion-styleframe-plan",
-          "sourceRevision": "automatic-real-media-1",
-          "cadenceSec": 5,
-          "durationSec": 12,
-          "aspectRatio": "16:9",
-          "items": [
-            {
-              "panelId": "styleframe-01-0",
-              "timestampSec": 0,
-              "sceneId": "scene-1",
-              "sceneLabel": "Show the product",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 0 seconds.\nCommunication goal: Show the product\nExact on-screen copy: Build it your way\nComposition: offset editorial\nVisual treatment: Actual product UI screenshot inside the composition\nMotion implication: measured reveal\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "ready",
-              "image": {
-                "kind": "image",
-                "assetId": "ui-1",
-                "versionId": "ui-v1",
-                "url": "https://media.example/ui.png",
-                "width": 1600,
-                "height": 900
-              }
-            },
-            {
-              "panelId": "styleframe-02-5000",
-              "timestampSec": 5,
-              "sceneId": "scene-1",
-              "sceneLabel": "Show the product",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 5 seconds.\nCommunication goal: Show the product\nExact on-screen copy: Build it your way\nComposition: offset editorial\nVisual treatment: Actual product UI screenshot inside the composition\nMotion implication: measured reveal\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "ready",
-              "image": {
-                "kind": "image",
-                "assetId": "ui-1",
-                "versionId": "ui-v1",
-                "url": "https://media.example/ui.png",
-                "width": 1600,
-                "height": 900
-              }
-            },
-            {
-              "panelId": "styleframe-03-10000",
-              "timestampSec": 10,
-              "sceneId": "scene-2",
-              "sceneLabel": "Land the brand",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 10 seconds.\nCommunication goal: Land the brand\nExact on-screen copy: StillMade / Motion you can edit\nComposition: centered poster\nVisual treatment: Oversized type and restrained brand mark\nMotion implication: precise finish\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "missing",
-              "image": null
-            },
-            {
-              "panelId": "styleframe-04-12000",
-              "timestampSec": 12,
-              "sceneId": "scene-2",
-              "sceneLabel": "Land the brand",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 12 seconds.\nCommunication goal: Land the brand\nExact on-screen copy: StillMade / Motion you can edit\nComposition: centered poster\nVisual treatment: Oversized type and restrained brand mark\nMotion implication: precise finish\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "missing",
-              "image": null
-            }
-          ],
-          "execution": {
-            "planning": "local-deterministic",
-            "imageGeneration": "explicit-quoted-action-required"
-          }
-        }
-      }
-    },
-    {
-      "name": "Bind missing-image approval to this exact release",
-      "input": {
-        "designPackage": "{\"schemaVersion\":1,\"revision\":\"reference-1\",\"kind\":\"motion-design-package\",\"brief\":\"Launch the product\",\"audience\":\"creative teams\",\"creativeIntent\":{\"idea\":\"Product proof with editorial restraint\",\"tone\":\"confident\",\"visualLanguage\":\"real UI, oversized typography, warm whitespace\",\"motionCharacter\":\"measured\",\"density\":\"open\",\"avoid\":[]},\"constraints\":{\"required\":[],\"preferences\":[],\"locks\":[]},\"references\":[],\"intendedOutputs\":[{\"aspect\":\"16:9\",\"durationSec\":12,\"channel\":\"web\"}],\"style\":{\"background\":\"#F1EEE8\",\"foreground\":\"#101010\",\"accent\":\"#F0642B\",\"fontDirection\":\"modern sans\"},\"scenes\":[{\"id\":\"scene-1\",\"goal\":\"Show the product\",\"copy\":{\"headline\":\"Build it your way\",\"support\":\"\"},\"durationSec\":6,\"visualApproach\":\"Real product UI inside an editorial composition\",\"layout\":\"offset editorial\",\"motionIntent\":\"measured reveal\",\"assetIds\":[\"ui-1\"],\"evidenceRefs\":[],\"locks\":[]},{\"id\":\"scene-2\",\"goal\":\"Land the brand\",\"copy\":{\"headline\":\"StillMade\",\"support\":\"Motion you can edit\"},\"durationSec\":6,\"visualApproach\":\"Oversized type and restrained brand mark\",\"layout\":\"centered poster\",\"motionIntent\":\"precise finish\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]}],\"audio\":{\"mode\":\"silent\",\"assetIds\":[],\"captions\":[],\"notes\":\"\"},\"unresolved\":[],\"branch\":{\"intent\":\"create\",\"parentRevision\":null}}",
-        "assets": [
-          {
-            "kind": "image",
-            "assetId": "ui-1",
-            "versionId": "ui-v1",
-            "url": "https://media.example/ui.png",
-            "width": 1600,
-            "height": 900
-          }
-        ],
-        "cadenceSec": 5,
-        "action": "generate-batch"
-      },
-      "expected": {
-        "styleframePlan": {
-          "schemaVersion": 1,
-          "kind": "motion-styleframe-plan",
-          "sourceRevision": "reference-1",
-          "cadenceSec": 5,
-          "durationSec": 12,
-          "aspectRatio": "16:9",
-          "items": [
-            {
-              "panelId": "styleframe-01-0",
-              "timestampSec": 0,
-              "sceneId": "scene-1",
-              "sceneLabel": "Show the product",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 0 seconds.\nCommunication goal: Show the product\nExact on-screen copy: Build it your way\nComposition: offset editorial\nVisual treatment: Real product UI inside an editorial composition\nMotion implication: measured reveal\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "ready",
-              "image": {
-                "kind": "image",
-                "assetId": "ui-1",
-                "versionId": "ui-v1",
-                "url": "https://media.example/ui.png",
-                "width": 1600,
-                "height": 900
-              }
-            },
-            {
-              "panelId": "styleframe-02-5000",
-              "timestampSec": 5,
-              "sceneId": "scene-1",
-              "sceneLabel": "Show the product",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 5 seconds.\nCommunication goal: Show the product\nExact on-screen copy: Build it your way\nComposition: offset editorial\nVisual treatment: Real product UI inside an editorial composition\nMotion implication: measured reveal\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "ready",
-              "image": {
-                "kind": "image",
-                "assetId": "ui-1",
-                "versionId": "ui-v1",
-                "url": "https://media.example/ui.png",
-                "width": 1600,
-                "height": 900
-              }
-            },
-            {
-              "panelId": "styleframe-03-10000",
-              "timestampSec": 10,
-              "sceneId": "scene-2",
-              "sceneLabel": "Land the brand",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 10 seconds.\nCommunication goal: Land the brand\nExact on-screen copy: StillMade / Motion you can edit\nComposition: centered poster\nVisual treatment: Oversized type and restrained brand mark\nMotion implication: precise finish\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "missing",
-              "image": null
-            },
-            {
-              "panelId": "styleframe-04-12000",
-              "timestampSec": 12,
-              "sceneId": "scene-2",
-              "sceneLabel": "Land the brand",
-              "brief": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 12 seconds.\nCommunication goal: Land the brand\nExact on-screen copy: StillMade / Motion you can edit\nComposition: centered poster\nVisual treatment: Oversized type and restrained brand mark\nMotion implication: precise finish\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation.",
-              "status": "missing",
-              "image": null
-            }
-          ],
-          "execution": {
-            "planning": "local-deterministic",
-            "imageGeneration": "explicit-quoted-action-required"
-          }
-        },
-        "generateAction": {
-          "schemaVersion": 1,
-          "kind": "stillmade.media-action",
-          "operation": "image.generate.batch",
-          "request": {
-            "source": {
-              "id": "stillmade.motion-frame-review",
-              "version": "1.1.2"
-            },
-            "items": [
-              {
-                "panelId": "styleframe-03-10000",
-                "prompt": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 10 seconds.\nCommunication goal: Land the brand\nExact on-screen copy: StillMade / Motion you can edit\nComposition: centered poster\nVisual treatment: Oversized type and restrained brand mark\nMotion implication: precise finish\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation."
-              },
-              {
-                "panelId": "styleframe-04-12000",
-                "prompt": "Create one polished motion-graphics styleframe, not a complete video.\nAspect 16:9. Timestamp 12 seconds.\nCommunication goal: Land the brand\nExact on-screen copy: StillMade / Motion you can edit\nComposition: centered poster\nVisual treatment: Oversized type and restrained brand mark\nMotion implication: precise finish\nGlobal visual language: real UI, oversized typography, warm whitespace\nTone and density: confident, open\nPalette: background #F1EEE8, foreground #101010, accent #F0642B.\nMake an editorial, premium frame suitable for coded vector, SVG, typography, masks, UI plates, and layered animation. Do not invent product UI, logos, claims, metrics, testimonials, prices, or unreadable fake interface text. Leave clear structure for later coded layer animation."
-              }
-            ],
-            "aspectRatio": "16:9"
-          },
-          "resultPort": "generatedImages"
-        }
-      }
-    }
-  ]
-};