stillmade-sdk 0.1.41 → 0.1.43

package/packages/design-system/block-kit.css

@@ -6,6 +6,7 @@
 
    The shape of a Block page, top to bottom:
      .sm-block      one workspace, no cards inside cards
+       .sm-fields   what the person sets, as one group on its own surface
        .sm-stage    the thing being made (preview, media, result); biggest area
        .sm-settings settings side by side; .sm-choices[data-segmented] for short ones
        .sm-list     many items, one line each; an item opens in place
@@ -15,7 +16,7 @@
        .sm-actions  one .sm-primary, optional .sm-quiet / .sm-icon
        .sm-status   short live state beside the action
        .sm-more     everything secondary, collapsed
-     .sm-hint       an info toggle for words that might help, collapsed
+     .sm-hint       an (i) whose words show on hover or focus (a tap on touch screens)
      .sm-empty      what an empty stage shows: a glyph, a few words, one action
      .sm-glyph      icons drawn in CSS with currentColor (no SVG or url needed)
      .sm-media-off  a picture or clip that cannot show here: a quiet tile, no words
@@ -34,8 +35,8 @@
  :where(.sm-block[data-layout="split"]) > :where(.sm-stage){grid-row:span 6}
 }
 /* Wide views (October 19, 2026): the controls keep a reading width on the left and
-   the result fills the rest on the right. Under 860px everything stacks with the
-   result first. data-layout="stack" opts out; "split" keeps its older layout. */
+   the result fills the rest on the right. Under 860px everything stacks in page order, so
+   the stage goes after the actions: the result's place under the button. data-layout="stack" opts out; "split" keeps its older layout. */
 @container (min-width:860px){
  :where(.sm-block:not([data-layout]):has(> .sm-stage)){grid-template-columns:minmax(300px,380px) minmax(0,1fr);align-items:start;column-gap:var(--s-5,24px);row-gap:var(--s-4,16px)}
  :where(.sm-block:not([data-layout]):has(> .sm-stage)) > :where(*){grid-column:1}
@@ -51,11 +52,13 @@
 
 /* ---------- The stage: the object being made gets the main surface ---------- */
 :where(.sm-stage){position:relative;display:grid;place-items:center;min-height:220px;padding:var(--s-3,12px);border-radius:var(--r-3,8px);background:var(--bg-inset);overflow:hidden}
-:where(.sm-stage[data-ratio="16:9"]){aspect-ratio:16/9;min-height:0}
-:where(.sm-stage[data-ratio="9:16"]){aspect-ratio:9/16;min-height:0;max-height:70vh;justify-self:center;width:auto;height:min(70vh,640px)}
-:where(.sm-stage[data-ratio="1:1"]){aspect-ratio:1;min-height:0}
+:where(.sm-stage:is([data-ratio="16:9"],[data-ratio="16/9"])){aspect-ratio:16/9;min-height:0}
+:where(.sm-stage:is([data-ratio="9:16"],[data-ratio="9/16"])){aspect-ratio:9/16;min-height:0;max-height:70vh;justify-self:center;width:auto;height:min(70vh,640px)}
+:where(.sm-stage:is([data-ratio="1:1"],[data-ratio="1/1"])){aspect-ratio:1;min-height:0}
 :where(.sm-stage) > :where(img,video,canvas){display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-2,4px)}
 :where(.sm-stage[data-fill]) > :where(img,video,canvas){width:100%;height:100%;object-fit:cover}
+/* A picture the view has not filled yet draws nothing, never a broken-image icon (November 3, 2026). */
+:where(.sm-stage) :where(img:not([src]),img[src=""]){display:none}
 
 /* ---------- Empty state: a picture and a few words, never a paragraph ---------- */
 :where(.sm-empty){display:grid;justify-items:center;gap:var(--s-3,12px);padding:var(--s-5,24px) var(--s-4,16px);text-align:center;color:var(--fg-muted)}
@@ -88,6 +91,10 @@
 :where(.sm-field) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){width:100%;min-height:var(--touch-target,44px);padding:10px 12px;border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-1);color:var(--fg);font:inherit}
 :where(.sm-field) :where(textarea){min-height:96px;resize:vertical}
 :where(.sm-fields){display:grid;gap:var(--s-4,16px);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
+/* Sections stand apart (owner, November 3, 2026: "make sure it's more separated"). The group of settings on a Block's
+   page sits on its own surface, the same card StillMade's Step page gives its settings, so what goes in, the settings
+   and the result read as separate parts. Only a top-level group: never a card inside a card. */
+:where(.sm-block) > :where(.sm-fields,.sm-settings){padding:var(--s-3,12px) var(--s-4,16px);border:1px solid var(--border);border-radius:var(--r-3,8px);background:var(--bg-secondary)}
 /* Compact (October 19, 2026): a short field is one row at every width. On a phone or in a
    narrow cell the label takes its own width and the control the rest; when the two do not
    fit, the control wraps under its label. */
@@ -125,8 +132,8 @@
 :where(.sm-choices) > :where(label:has(input:disabled):not(:has(input:checked))){opacity:.45}
 :where(.sm-choices) :where(img,video,canvas,.sm-swatch){display:block;width:100%;aspect-ratio:var(--sm-tile-ratio,1);object-fit:cover;border-radius:var(--r-2,4px);background:var(--bg-inset)}
 :where(.sm-choices) :where(.sm-glyph){--sm-glyph-size:28px;margin:10px 0 4px}
-:where(.sm-choices[data-ratio="16:9"]){--sm-tile-ratio:16/9}
-:where(.sm-choices[data-ratio="9:16"]){--sm-tile-ratio:9/16}
+:where(.sm-choices:is([data-ratio="16:9"],[data-ratio="16/9"])){--sm-tile-ratio:16/9}
+:where(.sm-choices:is([data-ratio="9:16"],[data-ratio="9/16"])){--sm-tile-ratio:9/16}
 :where(.sm-choices[data-compact]) > :where(label){grid-auto-flow:column;justify-content:center;align-content:center;align-items:center;min-height:var(--touch-target,44px);padding:6px 12px}
 :where(.sm-choices[data-compact]) :where(.sm-glyph){--sm-glyph-size:18px;margin:0}
 :where(.sm-choices) :where(audio){width:100%;height:32px;position:relative;z-index:1}
@@ -194,6 +201,36 @@
    Its edge separates it from a stage or gallery tile of the same colour; in a gallery it takes the tile's shape. */
 :where(.sm-media-off){display:inline-grid;place-items:center;box-sizing:border-box;width:min(100%,320px);aspect-ratio:var(--sm-photo-ratio,4/3);border:1px solid var(--border-tok);border-radius:var(--r-2,4px);background:var(--bg-inset);color:var(--fg-subtle,var(--fg-muted));vertical-align:top}
 :where(.sm-gallery) :where(.sm-media-off){display:grid;width:100%;aspect-ratio:var(--sm-tile-ratio,1);border-radius:inherit}
+/* The add tile (November 3, 2026): a dashed + after an input's files, as on StillMade's Step page. With
+   data-stillmade-add naming the input, StillMade opens its own picker and saves the files as its own tiles do; they
+   arrive through onInput. Never an <input type="file"> of the Block's own.
+   <button type="button" class="sm-add" data-stillmade-add="listingPhotos" aria-label="Add photos" title="Add photos"></button>
+   Alone it is a small square; in an .sm-gallery it takes the tile's shape. Words inside show under the +. A viewer and
+   an input an earlier Step fills see no tile. */
+:where(.sm-add){display:inline-grid;place-items:center;align-content:center;gap:2px;box-sizing:border-box;min-width:52px;min-height:52px;margin:0;padding:6px;border:1px dashed var(--border-strong);border-radius:var(--r-2,4px);background:transparent;color:var(--fg-muted);font:inherit;font-size:max(12px,var(--fs-caption,.8125rem));line-height:1.2;cursor:pointer}
+:where(.sm-add)::before{content:"+";font-size:20px;line-height:1}
+:where(.sm-add):hover{color:var(--fg);border-style:solid}
+:where(.sm-add):focus-visible{outline:2px solid var(--signal);outline-offset:3px}
+:where(.sm-add):disabled,:where(.sm-add[aria-busy="true"]){opacity:.45;cursor:default}
+:where(.sm-gallery) :where(.sm-add){display:grid;width:100%;aspect-ratio:var(--sm-tile-ratio,1);border-radius:var(--r-3,8px);background:transparent}
+/* A scrim (November 3, 2026): words over a photo or video read in every theme (a listing Block could not write one:
+   a Block's CSS takes only theme tokens, and color-mix() over them is refused). --scrim is the page's background, partly
+   see-through, for a Block's own rules (background:var(--scrim)); .sm-scrim lays it over the bottom of a positioned box
+   (an sm-stage, a gallery tile) under the words inside it.
+   <figure class="sm-stage" data-fill><img src="..." alt=""><figcaption class="sm-scrim">12 Elm Street</figcaption></figure> */
+:where(:root,[data-mode]){--scrim:color-mix(in srgb,var(--bg) 72%,transparent)}
+:where(.sm-scrim){position:absolute;inset:auto 0 0 0;margin:0;padding:var(--s-5,24px) var(--s-3,12px) var(--s-3,12px);background:linear-gradient(to top,var(--scrim) 55%,transparent);color:var(--fg)}
+/* A tile's own tools (the same day): move and remove buttons in an .sm-tile-tools inside a gallery tile, wired by
+   data-stillmade-move and data-stillmade-remove (FRAME_VIEWS.md, "Removing and reordering files"). They sit in the
+   tile's top corner on a solid chip, show on hover or focus where there is a pointer and always on touch, and are hidden
+   with the + tile from viewers and for an input an earlier Step fills. */
+:where(.sm-gallery) :where(.sm-tile-tools){position:absolute;top:4px;right:4px;display:flex;gap:2px}
+:where(.sm-gallery) :where(.sm-tile-tools) > :where(button){--sm-glyph-size:14px;display:grid;place-items:center;box-sizing:border-box;min-width:24px;height:24px;margin:0;padding:0 4px;border:0;border-radius:var(--r-2,4px);background:var(--bg);color:var(--fg);font:inherit;font-size:16px;line-height:1;cursor:pointer}
+:where(.sm-gallery) :where(.sm-tile-tools) > :where(button):focus-visible{outline:2px solid var(--signal);outline-offset:1px}
+:where(.sm-gallery) :where(.sm-tile-tools) > :where(button:disabled,button[aria-busy="true"]){opacity:.45;cursor:default}
+/* Three tools fit a 92px small tile on touch: 3 x 28 + gaps. */
+@media (pointer:coarse){:where(.sm-gallery) :where(.sm-tile-tools) > :where(button){min-width:28px;height:28px}}
+@media (hover:hover){:where(.sm-gallery) > :where(:not(:hover,:focus-within)) :where(.sm-tile-tools){opacity:0}}
 
 /* ---------- Status: a glyph and a few words, next to the action ---------- */
 :where(.sm-status){display:inline-flex;align-items:center;gap:var(--s-2,8px);min-height:24px;font-size:var(--fs-body-s,.875rem);color:var(--fg-muted)}
@@ -228,11 +265,12 @@
 :where(.sm-hint) > :where(summary){display:inline-grid;place-items:center;width:var(--touch-target,44px);height:var(--touch-target,44px);margin:-8px;min-height:0;padding:0;border:0;list-style:none;color:var(--fg-subtle);cursor:pointer}
 :where(.sm-hint) > :where(summary)::-webkit-details-marker{display:none}
 :where(.sm-hint) > :where(summary)::before{content:"i";display:grid;place-items:center;width:15px;height:15px;border:1.5px solid currentColor;border-radius:50%;font:600 10px/1 var(--font-body);font-style:normal}
-:where(.sm-hint) > :where(summary):hover,:where(.sm-hint[open]) > :where(summary){color:var(--fg)}
+:where(.sm-hint:hover,.sm-hint:focus-within,.sm-hint[open]) > :where(summary){color:var(--fg)}
+/* The words float over the page and never push it around (owner, November 3, 2026: "it makes me click and makes the ui weird"). */
 :where(.sm-hint) > :where(:not(summary)){position:absolute;z-index:5;inset-inline-start:0;top:100%;width:max-content;max-width:min(280px,calc(100cqi - 32px));margin:4px 0 0;padding:10px 12px;border:1px solid var(--border-tok);border-radius:var(--r-3,8px);background:var(--bg-elev-2);color:var(--fg);font-size:var(--fs-body-s,.875rem);line-height:1.45;box-shadow:var(--shadow-1)}
-/* Outside a label row there is no safe anchor, so the explanation opens in the flow instead. */
-:where(:not(.sm-label)) > :where(.sm-hint[open]){display:block}
-:where(:not(.sm-label)) > :where(.sm-hint) > :where(:not(summary)){position:static;width:auto;max-width:60ch}
+:where(.sm-hint:hover,.sm-hint:focus-within)::details-content{content-visibility:visible}
+/* With a mouse, hovering shows the words and a click does nothing: the click lands on the closed <details>, not its summary. Touch screens keep the tap. */
+@media (hover:hover){:where(.sm-hint) > :where(summary){pointer-events:none}}
 
 /* ---------- Glyphs: small icons drawn with currentColor ----------
    <span class="sm-glyph" data-glyph="upload" aria-hidden="true"></span>
@@ -245,6 +283,9 @@
 :where(.sm-glyph[data-glyph="close"])::before{transform:rotate(45deg)}
 :where(.sm-glyph[data-glyph="check"])::before{left:36%;top:12%;width:30%;height:58%;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
 :where(.sm-glyph[data-glyph="chevron"])::before{left:30%;top:22%;width:40%;height:40%;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
+/* Earlier and later (a tile's move tools, November 3, 2026). */
+:where(.sm-glyph[data-glyph="chevron-left"])::before{left:36%;top:30%;width:40%;height:40%;border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(45deg)}
+:where(.sm-glyph[data-glyph="chevron-right"])::before{left:24%;top:30%;width:40%;height:40%;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)}
 :where(.sm-glyph[data-glyph="upload"])::before{left:10%;right:10%;bottom:10%;height:35%;border:2px solid currentColor;border-top:0;border-radius:0 0 3px 3px}
 :where(.sm-glyph[data-glyph="upload"])::after{left:25%;right:25%;top:4%;height:62%;background:currentColor;clip-path:polygon(50% 0,100% 45%,60% 45%,60% 100%,40% 100%,40% 45%,0 45%)}
 :where(.sm-glyph[data-glyph="image"])::before{inset:12%;border:2px solid currentColor;border-radius:3px}

package/packages/design-system/block-kit.html

@@ -21,7 +21,7 @@
     Drop it      if nobody needs it to finish the task (intros, "how it works",
                  restating the Block name, describing what is already visible).
     Picture it   if a glyph, thumbnail, swatch or sample says the same thing.
-    Collapse it  if it might help some people: .sm-hint (info toggle) for an
+    Collapse it  if it might help some people: .sm-hint (an (i) that shows on hover) for an
                  explanation, .sm-more for secondary settings.
     Keep it      for errors, spending or credit approvals, stale inputs and
                  anything destructive. Keep those visible, in few words.
@@ -111,7 +111,8 @@
             <li><span class="sm-swatch swatch-a" style="display:block;aspect-ratio:3/2"></span></li>
             <li><span class="sm-swatch swatch-b" style="display:block;aspect-ratio:3/2"></span></li>
             <li><span class="sm-swatch swatch-c" style="display:block;aspect-ratio:3/2"></span></li>
-            <li><label class="sm-empty" style="padding:8px;aspect-ratio:3/2" aria-label="Add photos" title="Add photos"><span class="sm-glyph" data-glyph="plus" aria-hidden="true"></span><input type="file" hidden multiple></label></li>
+            <!-- The add tile: StillMade opens its own picker for the named input and saves the files; they arrive through onInput. -->
+            <li><button type="button" class="sm-add" data-stillmade-add="listingPhotos" aria-label="Add photos" title="Add photos"></button></li>
           </ul>
         </div>
         <ol class="sm-list" data-peek>

package/blocks/mcp-motion-planner/versions/1.1.0/package.js

@@ -1,97 +0,0 @@
-// Generated immutable package data.
-export default {
-  "manifest": {
-    "schemaVersion": 1,
-    "sdkVersion": "0.1.0",
-    "id": "stillmade.mcp-motion-planner",
-    "name": "Motion Plan",
-    "version": "1.1.0",
-    "kind": "workspace",
-    "runtime": "javascript",
-    "entry": "src/run.js",
-    "description": "Review a visual scene plan authored through StillMade MCP, adjust its source only when needed, and hand the approved structure to Frame Review locally.",
-    "inputs": {
-      "plan": {
-        "type": "text",
-        "primary": true,
-        "required": false,
-        "semantic": "project_brief",
-        "sources": [
-          "project",
-          "user"
-        ],
-        "description": "A complete motion-design-package between BEGIN_MOTION_PLAN and END_MOTION_PLAN, or a concise fallback brief."
-      },
-      "brief": {
-        "type": "text",
-        "required": false,
-        "description": "Optional plain-language fallback when an MCP-authored plan has not been supplied."
-      }
-    },
-    "outputs": {
-      "designPackage": {
-        "type": "text",
-        "primary": true,
-        "role": "motion_design_package",
-        "description": "Validated version 1 motion design package for Frame Review and Motion Designer."
-      },
-      "report": {
-        "type": "metadata",
-        "description": "Local scene-count, duration, source, and zero-credit validation report."
-      }
-    },
-    "permissions": {
-      "project": [],
-      "actions": [],
-      "network": [],
-      "filesystem": [],
-      "secrets": []
-    },
-    "ui": [
-      {
-        "control": "text",
-        "port": "plan"
-      }
-    ],
-    "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": "\n const text=value=>value==null?'':String(value),clone=value=>JSON.parse(JSON.stringify(value));\n const source=text(input.plan||input.brief).trim();\n const begin='BEGIN_MOTION_PLAN',end='END_MOTION_PLAN';\n let candidate=null;\n const start=source.indexOf(begin),finish=source.indexOf(end,start+begin.length);\n const encoded=start>=0&&finish>start?source.slice(start+begin.length,finish).trim():source;\n if(encoded.startsWith('{')){try{candidate=JSON.parse(encoded)}catch{throw new Error('The MCP motion plan is not valid JSON. Ask the connected assistant to repair the exact plan before continuing.')}}\n if(!candidate){\n  const brief=source||'Create a concise product motion graphic.';\n  candidate={schemaVersion:1,revision:'local-'+brief.length,kind:'motion-design-package',brief,audience:'Product-minded creative teams',creativeIntent:{idea:'Show the product as a living creative system',tone:'confident, precise, cinematic',visualLanguage:'editorial product UI, oversized type, clean vector geometry',motionCharacter:'restrained acceleration with decisive cuts',density:'open',avoid:['generic slideshow','floating mockup carousel','invented product claims']},constraints:{required:['Use only supplied product evidence and exact saved assets','Keep the composition editable'],preferences:['Prefer coded SVG, kinetic type, masks, camera moves, and real UI'],locks:[]},references:[],intendedOutputs:[{aspect:'16:9',durationSec:30,channel:'product launch'}],style:{background:'#0A0A0A',foreground:'#F7F0DB',accent:'#F2A93B',fontDirection:'editorial grotesk with monospace details'},product:{name:'StillMade',url:'',targetBuyer:'creative teams',promise:'Build complete visual productions from connected modular Blocks',availability:'',cta:{label:'Build with StillMade',destination:''},benefits:[]},scenes:[\n   {id:'scene-1',goal:'Open with a singular promise',copy:{eyebrow:'STILLMADE',headline:'Make the whole thing.',support:'One connected creative system.'},durationSec:4,visualApproach:'Oversized masked typography and a precise vector aperture',layout:'centered poster',motionIntent:'restrained reveal, then sharp exit',assetIds:[],evidenceRefs:[],locks:[]},\n   {id:'scene-2',goal:'Establish the modular workflow',copy:{eyebrow:'BLOCKS THAT WORK TOGETHER',headline:'From idea to final cut.',support:'Plan, review, design, and edit in one flow.'},durationSec:5,visualApproach:'Editable node path with semantic icons and cropped UI evidence when supplied',layout:'offset editorial',motionIntent:'measured camera push with sequential connections',assetIds:[],evidenceRefs:[],locks:[]},\n   {id:'scene-3',goal:'Show visual review before animation',copy:{eyebrow:'APPROVE THE LOOK FIRST',headline:'See the frames. Then make them move.',support:'Choose a 3, 5, or 10 second review cadence.'},durationSec:5,visualApproach:'A grid of exact approved styleframes with one selected frame expanding full bleed',layout:'modular proof grid',motionIntent:'staggered tiles, magnetic selection, mask expansion',assetIds:[],evidenceRefs:[],locks:[]},\n   {id:'scene-4',goal:'Reveal coded construction',copy:{eyebrow:'EDITABLE BY DESIGN',headline:'Real layers. Real timing. Real control.',support:'SVG, kinetic type, camera, transitions, and exact assets.'},durationSec:6,visualApproach:'Split view between coded vector layers and the live composition',layout:'copy on the left with product UI on the right',motionIntent:'typewriter detail, controlled parallax, precise callouts',assetIds:[],evidenceRefs:[],locks:[]},\n   {id:'scene-5',goal:'Show the final editor handoff',copy:{eyebrow:'FINISH IN YOUR EDITOR',headline:'Polish without starting over.',support:'Every scene arrives as an editable timeline.'},durationSec:5,visualApproach:'Full-width timeline with layered motion scene clips and a final export target',layout:'full-bleed product UI',motionIntent:'timeline scrub, clip focus, restrained zoom',assetIds:[],evidenceRefs:[],locks:[]},\n   {id:'scene-6',goal:'Close on the product promise',copy:{eyebrow:'STILLMADE',headline:'Make more than a clip.',support:'Build the system behind it.'},durationSec:5,visualApproach:'Return to the opening aperture as the product mark resolves',layout:'centered hero statement',motionIntent:'confident lockup and clean hold',assetIds:[],evidenceRefs:[],locks:[]}\n  ],audio:{mode:'silent',assetIds:[],captions:[],notes:'Designed to work silently; optional sound design can accent transitions.'},unresolved:['Add exact StillMade UI screenshots or recordings as content assets before claiming visible product behavior.'],branch:{intent:'create',parentRevision:null}};\n }\n if(!candidate||Array.isArray(candidate)||candidate.schemaVersion!==1||candidate.kind!=='motion-design-package')throw new Error('Connect a version 1 motion-design-package authored by the StillMade MCP assistant.');\n if(!Array.isArray(candidate.scenes)||candidate.scenes.length<1||candidate.scenes.length>12)throw new Error('The MCP motion plan needs 1 to 12 scenes.');\n const ids=new Set();let duration=0;\n for(const scene of candidate.scenes){\n  if(!scene||typeof scene!=='object'||Array.isArray(scene)||!text(scene.id).trim()||ids.has(scene.id))throw new Error('Every planned scene needs a distinct stable ID.');\n  ids.add(scene.id);const seconds=Number(scene.durationSec);if(!Number.isFinite(seconds)||seconds<1||seconds>20)throw new Error('Every planned scene needs a duration from 1 to 20 seconds.');duration+=seconds;\n  if(!scene.copy||typeof scene.copy!=='object'||!text(scene.copy.headline||scene.goal).trim())throw new Error('Every planned scene needs a communication goal or approved headline.');\n }\n if(duration>180)throw new Error('The complete MCP motion plan cannot exceed 180 seconds.');\n const plan=clone(candidate);plan.revision=text(plan.revision).trim()||'mcp-authored-1';plan.branch=plan.branch&&typeof plan.branch==='object'?plan.branch:{intent:'create',parentRevision:null};\n return {designPackage:JSON.stringify(plan),report:{schemaVersion:1,source:start>=0?'mcp-authored':'local-fallback',sceneCount:plan.scenes.length,durationSec:duration,creditCost:0,ready:true}};\n",
-  "view": {
-    "html": "<main class=\"planner\"><section class=\"overview\"><div class=\"ready\"><i class=\"plan-icon\" aria-hidden=\"true\"></i><div><small>CONNECTED PLAN</small><h2 id=\"planTitle\">Motion plan</h2></div></div><div class=\"metrics\" aria-label=\"Plan summary\"><span><i class=\"scene-icon\" aria-hidden=\"true\"></i><strong id=\"sceneCount\">—</strong> scenes</span><span><i class=\"time-icon\" aria-hidden=\"true\"></i><strong id=\"duration\">—</strong></span><span><i class=\"local-icon\" aria-hidden=\"true\"></i>Local · 0 credits</span></div><p id=\"idea\">Connect a brief or an assistant-authored plan to begin.</p><button id=\"use\" type=\"button\">Use this plan</button><output id=\"status\" role=\"status\">Waiting for a motion plan.</output></section><section class=\"storyboard\"><header><div><small>STORYBOARD</small><h2>Scenes and motion</h2></div><span id=\"format\">16:9</span></header><div id=\"scenes\" class=\"scenes\"></div></section><details><summary>Plan source</summary><p>Edit the structured source only when you need exact copy, timing, or scene IDs.</p><textarea id=\"source\" rows=\"14\" aria-label=\"Motion plan source\"></textarea></details></main>",
-    "css": ".planner{container:motion-plan/inline-size;max-width:1160px;margin:0 auto;padding:12px;color:var(--fg);font-family:var(--font-body)}section,details{border:1px solid var(--border-tok);border-radius:var(--r-3);background:var(--bg-elev-1)}.overview{padding:20px}.ready,section header,.metrics,.metrics span,.scene-head,.scene-meta{display:flex;align-items:center}.ready{gap:12px}.ready h2,section header h2{margin:2px 0 0;font-family:var(--font-display);font-size:26px;font-style:italic;font-weight:200}.ready small,section header small,.scene small{font:600 11px/1.2 var(--font-mono);letter-spacing:.09em;color:var(--fg-muted)}.plan-icon{position:relative;width:30px;height:30px;border:1px solid var(--border-strong);border-radius:var(--r-2)}.plan-icon:before,.plan-icon:after{content:\"\";position:absolute;left:7px;right:7px;height:1px;background:var(--fg)}.plan-icon:before{top:10px;box-shadow:0 5px 0 var(--fg)}.plan-icon:after{top:20px;width:9px}.metrics{gap:8px;flex-wrap:wrap;margin:18px 0 12px}.metrics span,.scene-meta span{gap:7px;padding:7px 10px;border:1px solid var(--border-tok);border-radius:999px;color:var(--fg-muted);font-size:12px}.metrics strong{color:var(--fg)}.scene-icon,.local-icon{position:relative;width:14px;height:12px;border:1px solid currentColor}.scene-icon:after{content:\"\";position:absolute;inset:2px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}.time-icon{position:relative;width:13px;height:13px;border:1px solid currentColor;border-radius:50%}.time-icon:before{content:\"\";position:absolute;left:6px;top:2px;width:1px;height:5px;background:currentColor;transform-origin:bottom;transform:rotate(-35deg)}.local-icon{border-radius:50%;width:12px;height:12px}.local-icon:after{content:\"\";position:absolute;left:3px;top:3px;width:4px;height:2px;border-left:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg)}#idea{max-width:720px;margin:0 0 16px;color:var(--fg-muted);line-height:1.5}button{min-height:44px;padding:10px 18px;border:0;border-radius:999px;background:var(--fg);color:var(--bg);font:600 14px var(--font-body)}button:disabled{opacity:.5}output{display:inline-block;margin-left:12px;color:var(--fg-muted);font-size:13px}.storyboard{margin-top:12px;padding:20px}.storyboard>header{justify-content:space-between;gap:16px}.storyboard>header>span{font:600 12px var(--font-mono);color:var(--fg-muted)}.scenes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.scene{min-width:0;padding:14px;border:1px solid var(--border-tok);border-radius:var(--r-2);background:var(--bg)}.scene-head{justify-content:space-between;gap:10px}.scene-index{font:600 11px var(--font-mono);color:var(--fg-muted)}.scene-duration{font:600 11px var(--font-mono);color:var(--fg)}.scene h3{margin:14px 0 6px;font-size:16px;line-height:1.15}.scene p{margin:0;color:var(--fg-muted);font-size:13px;line-height:1.4}.scene-meta{gap:6px;flex-wrap:wrap;margin-top:14px}.scene-meta span{padding:5px 8px;font-size:11px}.empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--fg-muted)}details{margin-top:12px;padding:14px 16px}summary{cursor:pointer;font-weight:600}details p{color:var(--fg-muted);font-size:13px}textarea{box-sizing:border-box;width:100%;min-height:240px;padding:12px;border:1px solid var(--border-tok);border-radius:var(--r-2);background:var(--bg);color:var(--fg);font:12px/1.5 var(--font-mono);resize:vertical}@container motion-plan (max-width:760px){.scenes{grid-template-columns:repeat(2,minmax(0,1fr))}}@container motion-plan (max-width:500px){.planner{padding:4px}.overview,.storyboard{padding:14px}.scenes{grid-template-columns:1fr}output{display:block;margin:10px 0 0}}",
-    "javascript": "const e=id=>document.getElementById(id),source=e('source'),button=e('use');let current=null;const text=value=>value==null?'':String(value);const read=value=>{const raw=text(value).trim(),begin='BEGIN_MOTION_PLAN',end='END_MOTION_PLAN',start=raw.indexOf(begin),finish=raw.indexOf(end,start+begin.length),encoded=start>=0&&finish>start?raw.slice(start+begin.length,finish).trim():raw;if(!encoded.startsWith('{'))return null;try{return JSON.parse(encoded)}catch{return null}};const card=(scene,index)=>({tag:'article',className:'scene',children:[{tag:'div',className:'scene-head',children:[{tag:'span',className:'scene-index',text:String(index+1).padStart(2,'0')},{tag:'span',className:'scene-duration',text:String(scene.durationSec||0)+'s'}]},{tag:'small',text:text(scene.copy&&scene.copy.eyebrow||scene.goal||'SCENE')},{tag:'h3',text:text(scene.copy&&scene.copy.headline||scene.goal||'Untitled scene')},{tag:'p',text:text(scene.visualApproach||scene.copy&&scene.copy.support||'Visual direction will be resolved in Frame Review.')},{tag:'div',className:'scene-meta',children:[{tag:'span',text:text(scene.layout||'Layout')},{tag:'span',text:text(scene.motionIntent||'Motion')}]}]});const show=plan=>{current=plan;const scenes=Array.isArray(plan&&plan.scenes)?plan.scenes:[],duration=scenes.reduce((sum,scene)=>sum+(Number(scene.durationSec)||0),0);e('sceneCount').textContent=scenes.length?String(scenes.length):'—';e('duration').textContent=scenes.length?String(duration)+' sec':'—';e('idea').textContent=text(plan&&plan.creativeIntent&&plan.creativeIntent.idea||plan&&plan.brief||'Connect a brief or an assistant-authored plan to begin.');e('format').textContent=text(plan&&plan.intendedOutputs&&plan.intendedOutputs[0]&&plan.intendedOutputs[0].aspect||'16:9');e('planTitle').textContent=text(plan&&plan.product&&plan.product.name?plan.product.name+' motion plan':'Motion plan');StillMade.render('scenes',scenes.length?scenes.map(card):[{tag:'p',className:'empty',text:'Your scene cards will appear here. The structured source stays out of the way.'}]);button.textContent=scenes.length?'Use this plan':'Create plan from brief'};StillMade.onInput(values=>{const incoming=values.plan||values.brief||'';source.value=incoming;show(read(incoming))});source.addEventListener('input',()=>show(read(source.value)));button.addEventListener('click',async()=>{button.disabled=true;e('status').textContent='Checking copy, timing, and scene IDs…';try{const result=await StillMade.run({plan:source.value});const plan=read(result.designPackage);show(plan);e('status').textContent=String(result.report.sceneCount)+' scenes · '+String(result.report.durationSec)+' seconds · ready for Frame Review.'}catch(error){e('status').textContent=error.message||'The plan could not be prepared.'}finally{button.disabled=false}});show(null);"
-  },
-  "tests": [
-    {
-      "name": "Build a zero-credit fallback motion plan",
-      "input": {
-        "brief": "Create a StillMade product-launch motion graphic."
-      },
-      "expected": {
-        "designPackage": "{\"schemaVersion\":1,\"revision\":\"local-49\",\"kind\":\"motion-design-package\",\"brief\":\"Create a StillMade product-launch motion graphic.\",\"audience\":\"Product-minded creative teams\",\"creativeIntent\":{\"idea\":\"Show the product as a living creative system\",\"tone\":\"confident, precise, cinematic\",\"visualLanguage\":\"editorial product UI, oversized type, clean vector geometry\",\"motionCharacter\":\"restrained acceleration with decisive cuts\",\"density\":\"open\",\"avoid\":[\"generic slideshow\",\"floating mockup carousel\",\"invented product claims\"]},\"constraints\":{\"required\":[\"Use only supplied product evidence and exact saved assets\",\"Keep the composition editable\"],\"preferences\":[\"Prefer coded SVG, kinetic type, masks, camera moves, and real UI\"],\"locks\":[]},\"references\":[],\"intendedOutputs\":[{\"aspect\":\"16:9\",\"durationSec\":30,\"channel\":\"product launch\"}],\"style\":{\"background\":\"#0A0A0A\",\"foreground\":\"#F7F0DB\",\"accent\":\"#F2A93B\",\"fontDirection\":\"editorial grotesk with monospace details\"},\"product\":{\"name\":\"StillMade\",\"url\":\"\",\"targetBuyer\":\"creative teams\",\"promise\":\"Build complete visual productions from connected modular Blocks\",\"availability\":\"\",\"cta\":{\"label\":\"Build with StillMade\",\"destination\":\"\"},\"benefits\":[]},\"scenes\":[{\"id\":\"scene-1\",\"goal\":\"Open with a singular promise\",\"copy\":{\"eyebrow\":\"STILLMADE\",\"headline\":\"Make the whole thing.\",\"support\":\"One connected creative system.\"},\"durationSec\":4,\"visualApproach\":\"Oversized masked typography and a precise vector aperture\",\"layout\":\"centered poster\",\"motionIntent\":\"restrained reveal, then sharp exit\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]},{\"id\":\"scene-2\",\"goal\":\"Establish the modular workflow\",\"copy\":{\"eyebrow\":\"BLOCKS THAT WORK TOGETHER\",\"headline\":\"From idea to final cut.\",\"support\":\"Plan, review, design, and edit in one flow.\"},\"durationSec\":5,\"visualApproach\":\"Editable node path with semantic icons and cropped UI evidence when supplied\",\"layout\":\"offset editorial\",\"motionIntent\":\"measured camera push with sequential connections\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]},{\"id\":\"scene-3\",\"goal\":\"Show visual review before animation\",\"copy\":{\"eyebrow\":\"APPROVE THE LOOK FIRST\",\"headline\":\"See the frames. Then make them move.\",\"support\":\"Choose a 3, 5, or 10 second review cadence.\"},\"durationSec\":5,\"visualApproach\":\"A grid of exact approved styleframes with one selected frame expanding full bleed\",\"layout\":\"modular proof grid\",\"motionIntent\":\"staggered tiles, magnetic selection, mask expansion\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]},{\"id\":\"scene-4\",\"goal\":\"Reveal coded construction\",\"copy\":{\"eyebrow\":\"EDITABLE BY DESIGN\",\"headline\":\"Real layers. Real timing. Real control.\",\"support\":\"SVG, kinetic type, camera, transitions, and exact assets.\"},\"durationSec\":6,\"visualApproach\":\"Split view between coded vector layers and the live composition\",\"layout\":\"copy on the left with product UI on the right\",\"motionIntent\":\"typewriter detail, controlled parallax, precise callouts\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]},{\"id\":\"scene-5\",\"goal\":\"Show the final editor handoff\",\"copy\":{\"eyebrow\":\"FINISH IN YOUR EDITOR\",\"headline\":\"Polish without starting over.\",\"support\":\"Every scene arrives as an editable timeline.\"},\"durationSec\":5,\"visualApproach\":\"Full-width timeline with layered motion scene clips and a final export target\",\"layout\":\"full-bleed product UI\",\"motionIntent\":\"timeline scrub, clip focus, restrained zoom\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]},{\"id\":\"scene-6\",\"goal\":\"Close on the product promise\",\"copy\":{\"eyebrow\":\"STILLMADE\",\"headline\":\"Make more than a clip.\",\"support\":\"Build the system behind it.\"},\"durationSec\":5,\"visualApproach\":\"Return to the opening aperture as the product mark resolves\",\"layout\":\"centered hero statement\",\"motionIntent\":\"confident lockup and clean hold\",\"assetIds\":[],\"evidenceRefs\":[],\"locks\":[]}],\"audio\":{\"mode\":\"silent\",\"assetIds\":[],\"captions\":[],\"notes\":\"Designed to work silently; optional sound design can accent transitions.\"},\"unresolved\":[\"Add exact StillMade UI screenshots or recordings as content assets before claiming visible product behavior.\"],\"branch\":{\"intent\":\"create\",\"parentRevision\":null}}",
-        "report": {
-          "schemaVersion": 1,
-          "source": "local-fallback",
-          "sceneCount": 6,
-          "durationSec": 30,
-          "creditCost": 0,
-          "ready": true
-        }
-      }
-    }
-  ]
-};