stillmade-sdk 0.1.42 → 0.1.44

package/packages/block-sdk/view-design.js

@@ -19,16 +19,18 @@ export const BLOCK_KIT_CLASSES=Object.freeze({
  'sm-actions':'The action row: one .sm-primary, optional .sm-quiet buttons and .sm-icon buttons (aria-label and title required).',
  'sm-status':'Live state beside the action: data-state="loading|success|waiting|error" and a few words.',
  'sm-more':'A <details> for secondary settings; starts closed.',
- 'sm-hint':'A <details> info toggle for an explanation that might help; starts closed.',
+ 'sm-hint':'A <details> (i) for an explanation that might help; its words show on hover or focus, or a tap on touch screens.',
  'sm-gallery':'A grid of results or media. data-size="small" for input files: more tiles per row as the screen widens, never bigger tiles.',
  'sm-media-off':'A picture or clip that cannot show here (on another device, or it did not open): a quiet tile in its own shape (--sm-photo-ratio, the tile\'s shape in a gallery) holding the image-off glyph, with the reason in aria-label and title and no words inside.',
- 'sm-glyph':'A small icon drawn in currentColor: data-glyph="play|pause|plus|close|check|chevron|upload|image|image-off|video|audio|text|spark|info|warning|spinner".',
+ 'sm-add':'The add tile for an input\'s files: <button class="sm-add" data-stillmade-add="<input>" aria-label="Add photos">. StillMade opens its own picker and saves the files; never an <input type=file>. Each tile of a list can carry .sm-tile-tools with data-stillmade-move and data-stillmade-remove buttons (data-index, data-to).',
+ 'sm-scrim':'Words over a photo or video, in a positioned box such as an sm-stage: a see-through shade of the page under them, in every theme. var(--scrim) is the same shade for your own rules; never color-mix() or a fixed rgba().',
+ 'sm-glyph':'A small icon drawn in currentColor: data-glyph="play|pause|plus|close|check|chevron|chevron-left|chevron-right|upload|image|image-off|video|audio|text|spark|info|warning|spinner".',
 });
 
 // The design principles for every Block interface, in priority order.
 export const BLOCK_INTERFACE_PRINCIPLES=Object.freeze([
  'Function first: unless the person asks for a design direction, build from the Block kit (`sm-block`, `sm-stage`, `sm-choices`, `sm-actions`, `sm-more`) and ship little or no CSS of your own. A direction the person names wins over the kit.',
- 'Show the thing being made: the preview, media or result gets the largest area (`sm-stage`). A picture or clip the Block makes fills it in its own shape, as large as fits; several fill it as a grid, each big enough to watch. Small tiles are for the files a person gives the Block, never for what it makes. A clip is a `<video controls>`, which StillMade plays in its own player with full screen, and a picture in `sm-stage` or `sm-gallery` (or marked `data-stillmade-expand`) gets StillMade\'s full-screen button; leave out `controls` only when the Block drives playback itself. Never a JSON dump, source editor, manifest or diagnostic panel unless the task is about source.',
+ 'Show the thing being made: the preview, media or result gets the largest area (`sm-stage`), and every part shows at once: before the first run the result\'s place is drawn in the shape and size of what is coming (a 9:16 frame for a vertical clip, lines for text, a player bar for sound), so the result fills it instead of popping in. On a wide screen what goes in sits on the left and the result on the right; they stack only on narrow screens and phones. A picture or clip the Block makes fills it in its own shape, as large as fits; several fill it as a grid, each big enough to watch. Small tiles are for the files a person gives the Block, never for what it makes. A clip is a `<video controls>`, which StillMade plays in its own player with full screen, and a picture in `sm-stage` or `sm-gallery` (or marked `data-stillmade-expand`) gets StillMade\'s full-screen button; leave out `controls` only when the Block drives playback itself. Never a JSON dump, source editor, manifest or diagnostic panel unless the task is about source.',
  'One obvious next action: one solid `sm-primary` in the kit\'s ink, never restyled to the background or a ghost outline; peers are `sm-quiet` buttons or named icons, and close is an X icon. Seven or fewer choices in view.',
  'Speak the job unless the person or creator asks otherwise. The action button names what it does in the job\'s words (`manifest.action`: "Plan the tour"; AI pictures, video and sound start with Generate and say what, the person\'s own media cut or rendered says Make: "Generate voiceover", "Make 6 clips"), never "Make it", "Run", "Run step", "Submit", "Process" or a bare "Generate"; progress counts the job\'s units ("4 of 9 rooms"), never "Processing"; results and problems use its words in one line. Show no credit numbers: StillMade puts the price beside the verb on its own run button ("Write · 1 credit"), with a chip for the model, quality or count when they can change. Pressing it runs at that price; a confirmation appears only when the server price is higher than the one shown.',
  'Pictures over words: choices people see or hear are thumbnails, swatches, samples or glyphs (`sm-choices`), not word lists. Icons carry an accessible name and tooltip; never emoji.',
@@ -38,13 +40,14 @@ export const BLOCK_INTERFACE_PRINCIPLES=Object.freeze([
  'Strong defaults; secondary settings go in `sm-more`, closed.',
  'Compact: the whole Block fits one laptop screen without scrolling. A short setting is one row, its label beside the control; no card around a single control.',
  'Status is a dot or a few words ("No narration yet"), never a paragraph; the reason sits behind an `sm-hint`.',
- 'Files are tiles: a saved file is a thumbnail or chip and adding one is a + tile. Never the bare browser file picker, and no size limits in view until a file is too big.',
+ 'Files are tiles: a saved file is a thumbnail or chip and adding one is the + tile (`<button class="sm-add" data-stillmade-add="<input>">`), which opens StillMade\'s picker. Never an `<input type="file">` or the bare browser file picker, and no size limits in view until a file is too big.',
  'Rare tools (update, schedule, history, reload) are named icon buttons beside the action, never sections under the work.',
  'An (i) beside anything a newcomer could misread: a setting, status or number whose effect is not obvious from its label gets a closed `sm-hint` with one or two sentences. Give every input that needs one a `description`; StillMade shows it as that (i). Obvious controls get none.',
  'One workspace: no cards inside cards, no second title, step counter or Back/Next bar; the host owns navigation.',
+ 'One page per job (November 3, 2026): a guided job\'s screen holds the inputs and settings, then a cheap check before the expensive run (the script and a voice sample before the video, a second `StillMade.run` that StillMade prices on its own), then the result; never a second Block or Step for the check. A workspace a person works in (a CAD tool, a canvas, an editor) is its own Block, and turning what it made into something else is the next one.',
  'Status sits beside the action it describes (`sm-status`), in a few words.',
  'Keep the page in normal scroll flow; no sticky media or control strips unless the editing task needs them.',
- 'Use the width: from 860px wide the kit puts the controls on the left at a reading width (300–380px) and the result (`sm-stage`) fills the right, in its real shape; under that everything stacks with the result first and the action within reach. Extra width goes to the result, never to wider text fields. Before there is a result, the stage previews what will be made from the inputs. `data-layout="stack"` opts out.',
+ 'Use the width: from 860px wide the kit puts the controls on the left at a reading width (300–380px) and the result (`sm-stage`) fills the right, in its real shape; under that everything stacks in the page\'s order: the inputs, the action in normal flow (never pinned), then the result\'s place under it, so put `sm-stage` after `sm-actions`. Extra width goes to the result, never to wider text fields. Before there is a result, the stage previews what will be made from the inputs. `data-layout="stack"` opts out.',
  'Size with the kit, never fixed sizes: no fixed pixel widths or heights for the workspace or stage, no 100vh, no position:fixed panels. StillMade zooms a Block\'s screen to fill the space it has (up to 150%, never down to a phone layout on a computer), so a Block laid out with the kit\'s spacing fills its Step without empty space, and it centers a standard view narrower than its Step. An app that lays itself out (full-size canvas or WebGL, its own scroll, pan or zoom, its own Ctrl/Cmd +/- keys) puts `data-stillmade-layout="own"` on its outermost element, and StillMade then never centers, zooms or takes those keys.',
  'Group what the person sets in one `sm-fields` (or `sm-settings` for short ones): the kit gives the group its own surface, so the inputs, the settings and the result read as separate parts. Settings sit side by side (`sm-settings`), next to what they change. Three or four short options are one segmented row (`data-segmented`), not a row of big tiles.',
  'Lists fill the width at a small size: input files are small tiles (`sm-gallery data-size="small"`), many items are one line each (`sm-list`): a thumbnail, one line of text, a short fact. Tapping an item opens all of its fields in place. Extra width means more items per row, never bigger cards.',
@@ -68,16 +71,14 @@ export const INTERFACE_DESIGN_RULES=Object.freeze([
 ]);
 
 const occurrences=(source,pattern)=>(source.match(pattern)||[]).length;
-// A file input someone sees as the browser's own picker: not hidden and not inside a label tile.
+// A file input of the view's own, shown or hidden in a label tile (November 3, 2026: a hidden one behind a label
+// still skips StillMade's picker, its working copies and device media). Files are added with the sm-add tile.
 // One forward scan with indexOf, so odd source never makes it slow.
-function bareFilePicker(html){
+function ownFileInput(html){
  const lower=html.toLowerCase();
  for(let at=lower.indexOf('<input');at!==-1;at=lower.indexOf('<input',at+6)){
   const end=lower.indexOf('>',at);if(end===-1)return false;
-  const tag=lower.slice(at,end);
-  if(!/\btype\s*=\s*["']?file\b/.test(tag)||/\bhidden\b|display\s*:\s*none|\bsm-sr\b/.test(tag))continue;
-  const label=lower.lastIndexOf('<label',at),closed=lower.lastIndexOf('</label>',at);
-  if(label===-1||closed>label)return true;
+  if(/\btype\s*=\s*["']?file\b/.test(lower.slice(at,end)))return true;
  }
  return false;
 }
@@ -308,8 +309,8 @@ export function reviewViewDesign(view){
   const longText=[...primary.matchAll(/<p\b[^>]*>([\s\S]*?)<\/p>/gi)].filter(match=>words(match[1])>20).length;
   if(longText)warnings.push('A visible paragraph runs past twenty words. Drop words nobody needs; put helpful explanation in a closed <details class="sm-hint">.');
   if(/<select\b/i.test(primary)&&/<(?:img|video|audio)\b/i.test(primary)===false&&/\b(?:voice|font|look|style|color|colour|template|theme|music|sound)\b/i.test(primary))warnings.push('People choose something they see or hear from a word list. Show each option as a picture or sample in <fieldset class="sm-choices">.');
-  // Compact: a bare browser file picker and printed size limits each take rows nobody needs.
-  if(bareFilePicker(primary))warnings.push('A bare file picker is in view. Show files as tiles: a + tile (a label around a hidden file input) and a thumbnail or chip for each saved file.');
+  // Compact: the view's own file picker and printed size limits each take rows nobody needs.
+  if(ownFileInput(primary))warnings.push('The view has a file input of its own. Show files as tiles: a thumbnail or chip for each saved file and the + tile, <button class="sm-add" data-stillmade-add="<input>" aria-label="Add photos">, which opens StillMade\'s picker and saves the files.');
   if(/\bup to \d+\s*(?:mb|gb|kb)\b/i.test(primary.replace(/<[^<>]*>/g,' ')))warnings.push('A size limit is printed in view. Say it only when a file is too big.');
   if(stackedLabel(primary,view.css))warnings.push('A short setting has its label above the control. Put the label beside it: <div class="sm-field"><label for="x">Label</label><input id="x"></div>, or several side by side in .sm-settings.');
   const rareTool=rareToolSection(html);
@@ -328,12 +329,14 @@ export function reviewViewDesign(view){
 
 // October 30, 2026: Chat presses a button on a Block's own screen only when it carries data-stillmade-action
 // (naming what it does); an unmarked button is out of Chat's reach. The number of buttons in view.html without one.
+// The + tile (data-stillmade-add) is not counted: StillMade's picker opens only from the person's own click.
 export function unmarkedButtons(view){
  const html=String(view?.html||''),lower=html.toLowerCase();let count=0;
  for(let start=lower.indexOf('<button');start!==-1;start=lower.indexOf('<button',start+7)){
   if(!/[\s>/]/.test(lower[start+7]||''))continue;
   const end=lower.indexOf('>',start);if(end===-1)break;
-  if(!/\sdata-stillmade-action\s*=/.test(lower.slice(start,end)))count++;
+  const tag=lower.slice(start,end);
+  if(!/\sdata-stillmade-(?:action|add)\s*=/.test(tag))count++;
  }
  return count;
 }

package/packages/block-sdk/web-example.js

@@ -8,7 +8,7 @@ export const webFetch={
  tests:[{name:'Read a public page',input:{url:'https://en.wikipedia.org/wiki/Tide'},expectations:{summary:{kind:'text',minLength:20,maxLength:4000}}}],
 };
 export const webResearch={
- manifest:{schemaVersion:1,sdkVersion:'0.1.0',id:'example.research-topic',action:{label:'Research topic',running:'Researching topic…'},version:'1.0.0',name:'Research a topic',description:'Search the web for a topic and return a cited summary.',kind:'task',runtime:'capability',entry:'src/capability.json',license:'MIT',provenance:EXAMPLE_PROVENANCE,inputs:{topic:{type:'text',primary:true,semantic:'research_topic',required:true,description:'What to research.'}},outputs:{findings:{type:'json',primary:true,semantic:'research_findings',description:'Summary and the sources it came from.'}},permissions:{project:[],capabilities:['web.research'],network:[],filesystem:[],secrets:[]},ui:[{control:'text',port:'topic'}]},
+ manifest:{schemaVersion:1,sdkVersion:'0.1.0',id:'example.research-topic',action:{label:'Research topic',running:'Researching topic…'},version:'1.0.0',name:'Research a topic',description:'Search the web for a topic and return a cited summary.',kind:'task',runtime:'capability',entry:'src/capability.json',license:'MIT',provenance:EXAMPLE_PROVENANCE,inputs:{topic:{type:'text',primary:true,semantic:'research_topic',required:true,description:'What to research.'}},outputs:{findings:{type:'json',primary:true,semantic:'research_findings',description:'Summary and the sources it came from.',schema:{summary:'text',sources:'json[]'}}},permissions:{project:[],capabilities:['web.research'],network:[],filesystem:[],secrets:[]},ui:[{control:'text',port:'topic'}]},
  capability:{schemaVersion:1,operation:'web.research',topic:{$input:'topic'},output:'findings'},
  tests:[{name:'Tides',input:{topic:'How tides work'},expectations:{findings:{kind:'json',includes:['summary']}}}],
 };

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

@@ -16,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
@@ -35,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}
@@ -52,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)}
@@ -130,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}
@@ -199,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)}
@@ -233,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>
@@ -250,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
-        }
-      }
-    }
-  ]
-};