stillmade-sdk 0.1.41 → 0.1.43

package/UI_AESTHETIC.md

@@ -209,6 +209,23 @@ before/after examples from an Image Panels project (Voiceover 1,210 px to about
 
 - Label and control on one row. No label stacked above a short control, no card
   around a single control, no help line under every field.
+- Sections stand apart (November 3, 2026, owner: "make sure it's more
+  separated"). What goes in (the files), the settings and the result are separate
+  parts: the settings sit together on one card, the same surface as the files
+  card, with a hairline between rows. StillMade's Step page does this for every
+  Block; a Block's own screen gets it from the kit's `sm-fields` / `sm-settings`
+  group. Never a card inside a card.
+- Every part shows at once (November 3, 2026, owner: "show all elements at once,
+  like where something will appear ... it's gonna look sloppy if it just pops in a
+  random place"). Before the first run the result's place is drawn in the shape
+  and size of what is coming: a frame at the video's or picture's own ratio, lines
+  for text, a player bar for sound (`ResultPlace.jsx`). The result then fills it;
+  nothing appears in a place the person did not expect, and nothing below jumps.
+- Side by side on wide screens (November 3, 2026, owner: "you're allowed to have
+  it side to side, which looks good; collapse to vertical when the screen gets
+  smaller"). What goes in sits on the left, the result's place on the right; under
+  860px they stack, the result under the button. A Step with a few inputs puts its
+  heading over the inputs, not across the page.
 - Status is a dot or a few words ("No narration yet"), never a paragraph; the
   reason sits behind an info toggle.
 - Files are tiles: a saved file is a thumbnail or chip, adding one is a + tile.
@@ -224,8 +241,17 @@ before/after examples from an Image Panels project (Voiceover 1,210 px to about
   left at 300–380 px and the result fills the right in its real shape; extra
   width goes to the result, never to wider fields. Before there is a result,
   the right side previews what will be made from the inputs. Under 860 px it is
-  one elastic column, result first, with the action pinned to the bottom on a
-  phone. Mockup: `docs/ui-review/wide-step-layout.html`.
+  one elastic column in the page's order: the inputs, the action in normal flow
+  (nothing sticky), then the result's place under it (November 3, 2026: this
+  replaces "result first, action pinned"). Mockup:
+  `docs/ui-review/wide-step-layout.html`.
+- One page per job (November 3, 2026, owner: "Yes, one page"). A job the person
+  fills in and then gets a result from is one Step on one page: inputs and
+  settings, a cheap check before the expensive run (the script and a voice
+  sample before the video), then the result. The check never becomes a Step of
+  its own. A workspace the person works in for a while (the Editor, a CAD tool, a
+  canvas) is its own Step, and turning what it made into something else is the
+  next one.
 - Results are shown big (November 1, 2026). A picture, clip or sound a Block
   makes is the biggest thing on its page: one result fills the result area in
   its own shape, as large as fits without scrolling (a vertical clip is sized by
@@ -320,7 +346,8 @@ asks for something else, that wins. Mockups: `docs/ui-review/job-words-journeys.
   only a paragraph that has to be split across fields goes to a quick, cheap model,
   free to the person.
 - Days and times are picked from a calendar and a list of times, never typed.
-- History is one icon in the project bar. A Step has no row of tool icons of its own.
+- History is one icon in the Project map's header, shown on every saved project whether or not anything is recorded
+  yet (November 3, 2026). A Step has no row of tool icons of its own.
 - Chat can do everything these screens do: pick a reference, fill fields, pick a
   time, post, and bring back an earlier version.
 

package/blocks/generate/package.js

@@ -0,0 +1 @@
+export {default} from './versions/1.0.0/package.js';

package/blocks/generate/versions/1.0.0/package.js

@@ -0,0 +1,463 @@
+// Generated from the owned versioned source by build-package.mjs.
+export default {
+  "manifest": {
+    "schemaVersion": 1,
+    "sdkVersion": "0.1.0",
+    "id": "stillmade.generate",
+    "version": "1.0.0",
+    "name": "Generate",
+    "description": "Generate images and videos with any model StillMade runs: pictures from a prompt or your own photos, clips from a start and end frame. Pick the model, shape, size and length, and make up to four at once.",
+    "kind": "task",
+    "runtime": "module",
+    "license": "MIT",
+    "inputs": {
+      "prompt": {
+        "type": "text",
+        "primary": true,
+        "required": true,
+        "semantic": "generation_prompt",
+        "accepts": [
+          "written_message",
+          "summary_report",
+          "narration_script"
+        ],
+        "sources": [
+          "upstream",
+          "user"
+        ],
+        "description": "What to make: the picture, or the shot and how it moves."
+      },
+      "mode": {
+        "type": "text",
+        "required": false,
+        "semantic": "generation_mode",
+        "description": "Image or video."
+      },
+      "model": {
+        "type": "text",
+        "required": false,
+        "semantic": "generation_model",
+        "description": "The model that makes it. Each one takes different shapes, sizes and lengths."
+      },
+      "aspectRatio": {
+        "type": "text",
+        "required": false,
+        "semantic": "aspect_ratio",
+        "description": "The shape, such as 16:9 for wide or 9:16 for a phone screen."
+      },
+      "size": {
+        "type": "text",
+        "required": false,
+        "semantic": "render_resolution",
+        "description": "How large it is, such as 2K for a picture or 1080p for a video."
+      },
+      "quality": {
+        "type": "text",
+        "required": false,
+        "semantic": "render_quality",
+        "description": "Low, medium or high, for the models that offer it. Higher costs more."
+      },
+      "duration": {
+        "type": "integer",
+        "required": false,
+        "semantic": "duration_seconds",
+        "description": "How long the video is, in seconds."
+      },
+      "sound": {
+        "type": "boolean",
+        "required": false,
+        "semantic": "generate_audio",
+        "description": "Whether the video comes with its own sound, for the models that make it."
+      },
+      "count": {
+        "type": "integer",
+        "required": false,
+        "semantic": "generation_count",
+        "description": "How many to make at once, from 1 to 4. Each one is priced."
+      },
+      "avoid": {
+        "type": "text",
+        "required": false,
+        "semantic": "negative_prompt",
+        "description": "What to leave out of it."
+      },
+      "seed": {
+        "type": "integer",
+        "required": false,
+        "semantic": "generation_seed",
+        "description": "A number that makes the same choices again. Leave it empty for a new result each time."
+      },
+      "references": {
+        "type": "image[]",
+        "required": false,
+        "semantic": "reference_image",
+        "sources": [
+          "upstream",
+          "user"
+        ],
+        "description": "Your own photos the picture keeps, such as a product, a person or a place."
+      },
+      "startFrame": {
+        "type": "image",
+        "required": false,
+        "semantic": "first_frame",
+        "sources": [
+          "upstream",
+          "user"
+        ],
+        "description": "The picture the video starts on."
+      },
+      "endFrame": {
+        "type": "image",
+        "required": false,
+        "semantic": "last_frame",
+        "sources": [
+          "upstream",
+          "user"
+        ],
+        "description": "The picture the video ends on. It needs a start frame."
+      }
+    },
+    "outputs": {
+      "media": {
+        "type": "asset[]",
+        "primary": true,
+        "semantic": "generated_media",
+        "description": "The pictures or clips that were made, in order."
+      },
+      "notMade": {
+        "type": "text",
+        "required": false,
+        "semantic": "generation_failures",
+        "description": "What could not be made, and why. Nothing is charged for those."
+      }
+    },
+    "permissions": {
+      "project": [],
+      "actions": [
+        "media.generate"
+      ],
+      "network": [],
+      "filesystem": [],
+      "secrets": []
+    },
+    "features": [
+      {
+        "id": "generate-image",
+        "label": "Generate pictures",
+        "does": "Makes up to four pictures with the image model you pick, in its shapes and sizes, keeping up to eight of your own photos.",
+        "asks": [
+          "make a picture of my product on a beach",
+          "generate four images of a cozy cafe",
+          "make a 9:16 poster with my logo"
+        ],
+        "inputs": [
+          "prompt",
+          "model",
+          "aspectRatio",
+          "size",
+          "quality",
+          "count",
+          "references",
+          "avoid",
+          "seed"
+        ],
+        "outputs": [
+          "media"
+        ]
+      },
+      {
+        "id": "generate-video",
+        "label": "Generate video clips",
+        "does": "Makes up to four clips with the video model you pick, at its lengths, sizes and shapes, from a start and end frame you add, with sound where offered.",
+        "asks": [
+          "make a 5 second clip of waves at sunset",
+          "animate this photo",
+          "make a vertical video from this first frame"
+        ],
+        "inputs": [
+          "prompt",
+          "model",
+          "aspectRatio",
+          "size",
+          "duration",
+          "sound",
+          "count",
+          "startFrame",
+          "endFrame",
+          "avoid",
+          "seed"
+        ],
+        "outputs": [
+          "media"
+        ]
+      }
+    ],
+    "platforms": {
+      "phone": {
+        "supported": true
+      },
+      "browser": {
+        "supported": true
+      },
+      "desktop": {
+        "supported": true
+      }
+    },
+    "ui": [
+      {
+        "port": "prompt",
+        "control": "text",
+        "multiline": true
+      },
+      {
+        "port": "mode",
+        "control": "select",
+        "options": [
+          "image",
+          "video"
+        ]
+      },
+      {
+        "port": "model",
+        "control": "select",
+        "options": [
+          "nano-banana-2",
+          "nano-banana-2-lite",
+          "nano-banana-pro",
+          "gpt-image-2",
+          "gpt-image-1.5",
+          "kling-image-v3",
+          "seedream-v4.5",
+          "seedance-2.0",
+          "seedance-2.0-fast",
+          "seedance-2.0-mini",
+          "kling-v3-turbo",
+          "wan-2.6-flash",
+          "veo-3.1-lite",
+          "vidu-q3-turbo",
+          "wan-2.7"
+        ]
+      },
+      {
+        "port": "aspectRatio",
+        "control": "select",
+        "options": [
+          "auto",
+          "1:1",
+          "4:5",
+          "3:4",
+          "2:3",
+          "9:16",
+          "16:9",
+          "3:2",
+          "4:3",
+          "21:9"
+        ]
+      },
+      {
+        "port": "size",
+        "control": "select",
+        "options": [
+          "480p",
+          "720p",
+          "1080p",
+          "1K",
+          "2K",
+          "4K",
+          "4k"
+        ]
+      },
+      {
+        "port": "quality",
+        "control": "select",
+        "options": [
+          "low",
+          "medium",
+          "high"
+        ]
+      },
+      {
+        "port": "duration",
+        "control": "number"
+      },
+      {
+        "port": "sound",
+        "control": "checkbox"
+      },
+      {
+        "port": "count",
+        "control": "number"
+      },
+      {
+        "port": "avoid",
+        "control": "text"
+      },
+      {
+        "port": "seed",
+        "control": "number"
+      },
+      {
+        "port": "references",
+        "control": "asset"
+      },
+      {
+        "port": "startFrame",
+        "control": "asset"
+      },
+      {
+        "port": "endFrame",
+        "control": "asset"
+      }
+    ],
+    "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"
+    }
+  },
+  "module": {
+    "schemaVersion": 1,
+    "entry": "main.js",
+    "files": {
+      "main.js": {
+        "sha256": "dc29df496b0440bc90f341ebc795ffe7fd45e85d6f14fed287681d2d4b040b27",
+        "bytes": 2898,
+        "mediaType": "text/javascript"
+      }
+    }
+  },
+  "moduleSource": {
+    "main.js": "// Generate: every image and video model StillMade runs, in one Block. The view sets the choices; this run turns\n// them into one media.generate batch. StillMade prices the whole batch, the person approves it once, and the\n// pictures or clips come back here in order.\nconst clean = value => typeof value === 'string' && value && value !== 'default' ? value : undefined;\n\nexport function generationItems(input) {\n  const mode = input.mode === 'video' ? 'video' : 'image';\n  const prompt = String(input.prompt || '').trim();\n  if (!prompt) throw new Error(mode === 'video' ? 'Describe the shot first.' : 'Describe the picture first.');\n  if (mode === 'video' && input.endFrame && !input.startFrame) throw new Error('Add a start frame before an end frame.');\n  const count = Math.max(1, Math.min(4, Math.floor(Number(input.count) || 1)));\n  const settings = {};\n  if (clean(input.model)) settings.model = input.model;\n  if (clean(input.aspectRatio)) settings.aspectRatio = input.aspectRatio;\n  if (clean(input.size)) settings.resolution = input.size;\n  if (mode === 'image' && clean(input.quality)) settings.quality = input.quality;\n  if (mode === 'video') {\n    const seconds = Math.floor(Number(input.duration));\n    if (Number.isFinite(seconds) && seconds > 0) settings.duration = seconds;\n    if (typeof input.sound === 'boolean') settings.generateAudio = input.sound;\n  }\n  const references = Array.isArray(input.references) ? input.references.filter(Boolean).slice(0, 8) : [];\n  const avoid = String(input.avoid || '').trim();\n  const seed = Number.isInteger(input.seed) && input.seed >= 0 ? input.seed : undefined;\n  const items = [];\n  for (let index = 0; index < count; index++) {\n    const item = { key: `${mode}-${index + 1}`, operation: mode, prompt };\n    if (Object.keys(settings).length) item.settings = settings;\n    if (mode === 'image' && references.length) item.references = references;\n    if (mode === 'video' && input.startFrame) item.firstFrame = input.startFrame;\n    if (mode === 'video' && input.startFrame && input.endFrame) item.lastFrame = input.endFrame;\n    if (avoid) item.negativePrompt = avoid;\n    if (seed !== undefined) item.seed = Math.min(2147483647, seed + index);\n    items.push(item);\n  }\n  return items;\n}\n\nexport default async function run(input, stillmade) {\n  const items = generationItems(input);\n  stillmade.progress(0.05, items.length > 1 ? `Making ${items.length}` : 'Making it');\n  const { value, failures } = await stillmade.actions.run({\n    schemaVersion: 1, kind: 'stillmade.media-action', operation: 'media.generate', resultPort: null, request: { items },\n  });\n  const media = value.map(({ key, ...made }) => made);\n  const outputs = { media };\n  if (failures && failures.length) outputs.notMade = `${failures.length} of ${items.length} were not made: ${failures.map(failure => failure.message).join(' ')}`.slice(0, 2000);\n  return outputs;\n}\n"
+  },
+  "view": {
+    "runtime": "frame",
+    "html": "<main class=\"sm-block gen\" id=\"root\" data-mode=\"image\">\n  <div class=\"gen-layout\">\n    <section class=\"gen-controls\" aria-label=\"What to make\">\n      <div class=\"sm-fields\">\n      <fieldset class=\"sm-choices gen-mode\" data-segmented id=\"mode\" data-stillmade-share=\"mode\">\n        <legend class=\"sm-sr\">Make</legend>\n        <label><input type=\"radio\" name=\"mode\" value=\"image\" checked><span class=\"sm-glyph\" data-glyph=\"image\" aria-hidden=\"true\"></span><span>Image</span></label>\n        <label><input type=\"radio\" name=\"mode\" value=\"video\"><span class=\"sm-glyph\" data-glyph=\"video\" aria-hidden=\"true\"></span><span>Video</span></label>\n      </fieldset>\n\n      <div class=\"sm-field gen-prompt\">\n        <label class=\"sm-sr\" for=\"prompt\">Describe it</label>\n        <textarea id=\"prompt\" rows=\"4\" maxlength=\"4000\" placeholder=\"Describe the picture\" data-stillmade-share=\"prompt\"></textarea>\n      </div>\n      </div>\n\n      <div class=\"sm-field gen-only-image\" id=\"references-row\">\n        <span class=\"sm-label\">Your photos <small class=\"gen-muted\" id=\"references-limit\"></small></span>\n        <ul class=\"sm-gallery\" data-size=\"small\" id=\"references\" aria-label=\"Your photos\">\n          <li><button type=\"button\" class=\"sm-add\" data-stillmade-add=\"references\" aria-label=\"Add photos\" title=\"Add photos\"></button></li>\n        </ul>\n      </div>\n\n      <div class=\"sm-field gen-only-video gen-frames\" id=\"frames-row\">\n        <span class=\"sm-label\">Frames</span>\n        <ul class=\"sm-gallery\" data-size=\"small\" aria-label=\"Start and end frames\">\n          <li id=\"start-frame\"><button type=\"button\" class=\"sm-add\" data-stillmade-add=\"startFrame\" aria-label=\"Add a start frame\" title=\"Add a start frame\"></button><small>Start</small></li>\n          <li id=\"end-frame\"><button type=\"button\" class=\"sm-add\" data-stillmade-add=\"endFrame\" aria-label=\"Add an end frame\" title=\"Add an end frame\"></button><small>End</small></li>\n        </ul>\n      </div>\n\n      <div class=\"sm-settings\">\n        <fieldset class=\"sm-choices gen-row gen-chips\" id=\"shape\" data-stillmade-share=\"shape\">\n          <legend>Shape</legend>\n          <label><input type=\"radio\" name=\"shape\" value=\"auto\"><span>Auto</span></label>\n          <label><input type=\"radio\" name=\"shape\" value=\"1:1\" checked><span class=\"sm-shape\" style=\"--r:1/1\" aria-hidden=\"true\"></span><span>1:1</span></label>\n          <label><input type=\"radio\" name=\"shape\" value=\"4:5\"><span class=\"sm-shape\" style=\"--r:4/5\" aria-hidden=\"true\"></span><span>4:5</span></label>\n          <label><input type=\"radio\" name=\"shape\" value=\"3:4\"><span class=\"sm-shape\" style=\"--r:3/4\" aria-hidden=\"true\"></span><span>3:4</span></label>\n          <label><input type=\"radio\" name=\"shape\" value=\"2:3\"><span class=\"sm-shape\" style=\"--r:2/3\" aria-hidden=\"true\"></span><span>2:3</span></label>\n          <label><input type=\"radio\" name=\"shape\" value=\"9:16\"><span class=\"sm-shape\" style=\"--r:9/16\" aria-hidden=\"true\"></span><span>9:16</span></label>\n          <label><input type=\"radio\" name=\"shape\" value=\"16:9\"><span class=\"sm-shape\" style=\"--r:16/9\" aria-hidden=\"true\"></span><span>16:9</span></label>\n          <label><input type=\"radio\" name=\"shape\" value=\"3:2\"><span class=\"sm-shape\" style=\"--r:3/2\" aria-hidden=\"true\"></span><span>3:2</span></label>\n          <label><input type=\"radio\" name=\"shape\" value=\"4:3\"><span class=\"sm-shape\" style=\"--r:4/3\" aria-hidden=\"true\"></span><span>4:3</span></label>\n          <label><input type=\"radio\" name=\"shape\" value=\"21:9\"><span class=\"sm-shape\" style=\"--r:21/9\" aria-hidden=\"true\"></span><span>21:9</span></label>\n        </fieldset>\n        <fieldset class=\"sm-choices gen-row\" data-segmented id=\"size\" data-stillmade-share=\"size\">\n          <legend>Size</legend>\n          <label><input type=\"radio\" name=\"size\" value=\"480p\" checked><span>480p</span></label>\n          <label><input type=\"radio\" name=\"size\" value=\"720p\"><span>720p</span></label>\n          <label><input type=\"radio\" name=\"size\" value=\"1080p\"><span>1080p</span></label>\n          <label><input type=\"radio\" name=\"size\" value=\"1K\"><span>1K</span></label>\n          <label><input type=\"radio\" name=\"size\" value=\"2K\"><span>2K</span></label>\n          <label><input type=\"radio\" name=\"size\" value=\"4K\"><span>4K</span></label>\n          <label><input type=\"radio\" name=\"size\" value=\"4k\"><span>4K</span></label>\n        </fieldset>\n        <fieldset class=\"sm-choices gen-row gen-only-image\" data-segmented id=\"quality\" data-stillmade-share=\"quality\">\n          <legend>Quality</legend>\n          <label><input type=\"radio\" name=\"quality\" value=\"low\"><span>Low</span></label>\n          <label><input type=\"radio\" name=\"quality\" value=\"medium\" checked><span>Medium</span></label>\n          <label><input type=\"radio\" name=\"quality\" value=\"high\"><span>High</span></label>\n        </fieldset>\n        <fieldset class=\"sm-choices gen-row gen-chips gen-only-video\" id=\"length\" data-stillmade-share=\"length\">\n          <legend>Length</legend>\n          <label><input type=\"radio\" name=\"length\" value=\"1\"><span>1s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"2\"><span>2s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"3\"><span>3s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"4\"><span>4s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"5\" checked><span>5s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"6\"><span>6s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"7\"><span>7s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"8\"><span>8s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"9\"><span>9s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"10\"><span>10s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"11\"><span>11s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"12\"><span>12s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"13\"><span>13s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"14\"><span>14s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"15\"><span>15s</span></label>\n          <label><input type=\"radio\" name=\"length\" value=\"16\"><span>16s</span></label>\n        </fieldset>\n        <fieldset class=\"sm-choices gen-row\" data-segmented id=\"count\" data-stillmade-share=\"count\">\n          <legend>How many</legend>\n          <label><input type=\"radio\" name=\"count\" value=\"1\" checked><span>1</span></label>\n          <label><input type=\"radio\" name=\"count\" value=\"2\"><span>2</span></label>\n          <label><input type=\"radio\" name=\"count\" value=\"3\"><span>3</span></label>\n          <label><input type=\"radio\" name=\"count\" value=\"4\"><span>4</span></label>\n        </fieldset>\n        <label class=\"sm-field gen-only-video gen-sound\" id=\"sound-row\"><span>Sound</span><input type=\"checkbox\" id=\"sound\" checked data-stillmade-share=\"sound\"></label>\n      </div>\n\n      <details class=\"sm-more\" id=\"more\">\n        <summary>More</summary>\n        <div class=\"sm-fields\">\n          <div class=\"sm-field\"><label for=\"avoid\">Leave out</label><input id=\"avoid\" type=\"text\" maxlength=\"2000\" placeholder=\"Blur, text, extra fingers\" data-stillmade-share=\"avoid\"></div>\n          <div class=\"sm-field\" id=\"seed-row\"><label for=\"seed\">Seed</label><input id=\"seed\" type=\"number\" min=\"0\" max=\"2147483647\" step=\"1\" inputmode=\"numeric\" placeholder=\"Random\" data-stillmade-share=\"seed\"></div>\n        </div>\n      </details>\n\n      <div class=\"sm-actions gen-actions\">\n        <details class=\"gen-model\" id=\"model-picker\">\n          <summary class=\"gen-chip\" data-stillmade-action=\"choose-model\"><span id=\"model-name\">Nano Banana 2</span><span class=\"sm-glyph\" data-glyph=\"chevron-down\" aria-hidden=\"true\"></span></summary>\n          <div class=\"gen-models\">\n            <fieldset class=\"sm-choices gen-only-image\" data-size=\"wide\" id=\"imageModel\" data-stillmade-share=\"imageModel\">\n              <legend>Image model</legend>\n              <label><input type=\"radio\" name=\"imageModel\" value=\"nano-banana-2\" checked><strong>Nano Banana 2</strong><span class=\"gen-tags\"><span>up to 4K</span><span>keeps 8 photos</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"imageModel\" value=\"nano-banana-2-lite\"><strong>Nano Banana 2 Lite</strong><span class=\"gen-tags\"><span>up to 4K</span><span>keeps 8 photos</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"imageModel\" value=\"nano-banana-pro\"><strong>Nano Banana Pro</strong><span class=\"gen-tags\"><span>up to 4K</span><span>keeps 8 photos</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"imageModel\" value=\"gpt-image-2\"><strong>GPT Image 2</strong><span class=\"gen-tags\"><span>up to 4K</span><span>keeps 8 photos</span><span>quality levels</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"imageModel\" value=\"gpt-image-1.5\"><strong>GPT-Image 1.5</strong><span class=\"gen-tags\"><span>quality levels</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"imageModel\" value=\"kling-image-v3\"><strong>Kling Image V3</strong><span class=\"gen-tags\"><span>up to 2K</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"imageModel\" value=\"seedream-v4.5\"><strong>Seedream 4.5</strong><span class=\"gen-tags\"><span>up to 4K</span></span><span class=\"gen-why\"></span></label>\n            </fieldset>\n            <fieldset class=\"sm-choices gen-only-video\" data-size=\"wide\" id=\"videoModel\" data-stillmade-share=\"videoModel\">\n              <legend>Video model</legend>\n              <label><input type=\"radio\" name=\"videoModel\" value=\"seedance-2.0\"><strong>Seedance 2.0</strong><span class=\"gen-tags\"><span>up to 15s</span><span>up to 4K</span><span>sound</span><span>end frame</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"videoModel\" value=\"seedance-2.0-fast\"><strong>Seedance 2.0 Fast</strong><span class=\"gen-tags\"><span>up to 15s</span><span>up to 720p</span><span>sound</span><span>end frame</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"videoModel\" value=\"seedance-2.0-mini\"><strong>Seedance 2.0 Mini</strong><span class=\"gen-tags\"><span>up to 15s</span><span>up to 720p</span><span>sound</span><span>end frame</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"videoModel\" value=\"kling-v3-turbo\"><strong>Kling 3.0 Turbo</strong><span class=\"gen-tags\"><span>up to 10s</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"videoModel\" value=\"wan-2.6-flash\"><strong>Wan 2.6 Flash</strong><span class=\"gen-tags\"><span>up to 5s</span><span>starts from a frame</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"videoModel\" value=\"veo-3.1-lite\"><strong>Veo 3.1 Lite</strong><span class=\"gen-tags\"><span>up to 8s</span><span>up to 1080p</span><span>sound</span><span>end frame</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"videoModel\" value=\"vidu-q3-turbo\" checked><strong>Vidu Q3 Turbo</strong><span class=\"gen-tags\"><span>up to 16s</span><span>sound</span><span>end frame</span></span><span class=\"gen-why\"></span></label>\n              <label><input type=\"radio\" name=\"videoModel\" value=\"wan-2.7\"><strong>Wan 2.7</strong><span class=\"gen-tags\"><span>up to 15s</span><span>up to 1080p</span><span>end frame</span><span>starts from a frame</span></span><span class=\"gen-why\"></span></label>\n            </fieldset>\n          </div>\n        </details>\n        <button type=\"button\" class=\"sm-primary\" id=\"generate\" data-stillmade-action=\"generate\">Generate image</button>\n      </div>\n      <p class=\"sm-status\" id=\"status\" role=\"status\"></p>\n    </section>\n\n    <section class=\"gen-results\" aria-label=\"What was made\" aria-live=\"polite\">\n      <div class=\"sm-stage gen-place\" id=\"place\">\n        <span class=\"sm-shape\" id=\"place-shape\" style=\"--r:1/1\"></span>\n        <p class=\"sm-empty\" id=\"place-text\">Your picture appears here</p>\n      </div>\n      <ul class=\"sm-gallery gen-gallery\" id=\"gallery\" aria-label=\"Made in this Step\" hidden></ul>\n    </section>\n  </div>\n</main>\n",
+    "css": "/* The Block kit (injected by the host) carries fields, choices, galleries and buttons; this file only lays the\n   page out (choices on the left, what was made on the right) and draws the model picker. */\n.gen [hidden], .gen [data-off=\"true\"] { display: none !important; }\n.gen[data-mode=\"image\"] .gen-only-video, .gen[data-mode=\"video\"] .gen-only-image { display: none !important; }\n.gen-layout { display: grid; gap: var(--s-4, 16px); align-items: start; }\n@container (min-width: 860px) { .gen-layout { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } }\n@media (min-width: 860px) { .gen-layout { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } }\n.gen-controls { display: grid; gap: var(--s-3, 12px); min-width: 0; }\n.gen-mode { --sm-tile: 120px; }\n.gen-prompt textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px; }\n.gen-muted { color: var(--fg-muted); font-weight: 400; }\n.gen .sm-settings { grid-template-columns: minmax(0, 1fr); }\n/* Shape and length have many options: small chips that wrap, the pick in ink as in every choice. */\n.gen-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.gen-chips > legend { width: 100%; }\n.gen-chips > label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-body-s, .875rem); white-space: nowrap; }\n.gen-row .sm-shape { width: 14px; }\n.gen-sound { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2, 8px); }\n.gen-frames li { display: grid; justify-items: center; gap: 4px; }\n.gen-frames small { color: var(--fg-muted); }\n.gen-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2, 8px); }\n.gen-actions .sm-primary { flex: 1 1 auto; }\n.gen-model { position: relative; }\n.gen-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-elev-1); color: var(--fg); cursor: pointer; list-style: none; white-space: nowrap; }\n.gen-chip::-webkit-details-marker { display: none; }\n.gen-chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }\n.gen-models { position: absolute; z-index: 2; bottom: calc(100% + 6px); left: 0; width: min(360px, 90vw); max-height: 360px; overflow: auto; padding: var(--s-3, 12px); border: 1px solid var(--border-strong); border-radius: var(--r-3, 8px); background: var(--bg-elev-1); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }\n.gen-models .sm-choices > label { justify-items: start; text-align: left; }\n.gen-models strong { font-weight: 500; }\n.gen-tags { display: flex; flex-wrap: wrap; gap: 4px; }\n.gen-tags span { font-size: var(--fs-body-xs, .75rem); color: var(--fg-muted); border: 1px solid var(--border-tok); border-radius: 999px; padding: 1px 6px; }\n.gen-models label:has(input:disabled) { opacity: .5; }\n.gen-why { font-size: var(--fs-body-xs, .75rem); color: var(--fg-muted); }\n.gen-results { display: grid; gap: var(--s-3, 12px); min-width: 0; }\n.gen-place { display: grid; place-items: center; min-height: 240px; }\n.gen-place .sm-shape { width: min(100%, 420px); }\n.gen-place > .sm-empty { position: absolute; }\n.gen-place { position: relative; }\n.gen-gallery { --sm-tile: 220px; }\n.gen-gallery li { display: grid; gap: 4px; }\n.gen-gallery img, .gen-gallery video { width: 100%; border-radius: var(--r-2, 4px); background: var(--bg-inset); }\n.gen-gallery small { color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n",
+    "javascript": "(()=>{\n\"use strict\";\nconst CATALOG={\"image\":{\"nano-banana-2\":{\"label\":\"Nano Banana 2\",\"aspectRatios\":[\"auto\",\"21:9\",\"16:9\",\"3:2\",\"4:3\",\"1:1\",\"4:5\",\"3:4\",\"2:3\",\"9:16\"],\"resolutions\":[\"1K\",\"2K\",\"4K\"],\"qualities\":[],\"references\":8,\"seed\":true},\"nano-banana-2-lite\":{\"label\":\"Nano Banana 2 Lite\",\"aspectRatios\":[\"auto\",\"21:9\",\"16:9\",\"3:2\",\"4:3\",\"1:1\",\"4:5\",\"3:4\",\"2:3\",\"9:16\"],\"resolutions\":[\"1K\",\"2K\",\"4K\"],\"qualities\":[],\"references\":8,\"seed\":true},\"nano-banana-pro\":{\"label\":\"Nano Banana Pro\",\"aspectRatios\":[\"auto\",\"21:9\",\"16:9\",\"3:2\",\"4:3\",\"1:1\",\"4:5\",\"3:4\",\"2:3\",\"9:16\"],\"resolutions\":[\"1K\",\"2K\",\"4K\"],\"qualities\":[],\"references\":8,\"seed\":true},\"gpt-image-2\":{\"label\":\"GPT Image 2\",\"aspectRatios\":[\"auto\",\"16:9\",\"9:16\",\"1:1\",\"4:3\",\"3:4\"],\"resolutions\":[\"1K\",\"2K\",\"4K\"],\"qualities\":[\"low\",\"medium\",\"high\"],\"references\":8,\"seed\":false},\"gpt-image-1.5\":{\"label\":\"GPT-Image 1.5\",\"aspectRatios\":[\"16:9\",\"9:16\",\"1:1\"],\"resolutions\":[],\"qualities\":[\"low\",\"medium\",\"high\"],\"references\":0,\"seed\":false},\"kling-image-v3\":{\"label\":\"Kling Image V3\",\"aspectRatios\":[\"21:9\",\"16:9\",\"9:16\",\"1:1\",\"4:3\",\"3:4\",\"3:2\",\"2:3\"],\"resolutions\":[\"1K\",\"2K\"],\"qualities\":[],\"references\":0,\"seed\":false},\"seedream-v4.5\":{\"label\":\"Seedream 4.5\",\"aspectRatios\":[\"16:9\",\"9:16\",\"1:1\",\"4:3\",\"3:4\"],\"resolutions\":[\"2K\",\"4K\"],\"qualities\":[],\"references\":0,\"seed\":true}},\"video\":{\"seedance-2.0\":{\"label\":\"Seedance 2.0\",\"aspectRatios\":[\"auto\",\"21:9\",\"16:9\",\"4:3\",\"1:1\",\"3:4\",\"9:16\"],\"resolutions\":[\"480p\",\"720p\",\"1080p\",\"4k\"],\"durations\":[4,5,6,7,8,9,10,11,12,13,14,15],\"firstFrame\":true,\"lastFrame\":true,\"requiresFirstFrame\":false,\"seed\":true,\"nativeAudio\":true},\"seedance-2.0-fast\":{\"label\":\"Seedance 2.0 Fast\",\"aspectRatios\":[\"auto\",\"21:9\",\"16:9\",\"4:3\",\"1:1\",\"3:4\",\"9:16\"],\"resolutions\":[\"480p\",\"720p\"],\"durations\":[4,5,6,7,8,9,10,11,12,13,14,15],\"firstFrame\":true,\"lastFrame\":true,\"requiresFirstFrame\":false,\"seed\":true,\"nativeAudio\":true},\"seedance-2.0-mini\":{\"label\":\"Seedance 2.0 Mini\",\"aspectRatios\":[\"auto\",\"21:9\",\"16:9\",\"4:3\",\"1:1\",\"3:4\",\"9:16\"],\"resolutions\":[\"480p\",\"720p\"],\"durations\":[4,5,6,7,8,9,10,11,12,13,14,15],\"firstFrame\":true,\"lastFrame\":true,\"requiresFirstFrame\":false,\"seed\":true,\"nativeAudio\":true},\"kling-v3-turbo\":{\"label\":\"Kling 3.0 Turbo\",\"aspectRatios\":[\"16:9\",\"9:16\",\"1:1\"],\"resolutions\":[],\"durations\":[5,10],\"firstFrame\":true,\"lastFrame\":false,\"requiresFirstFrame\":false,\"seed\":false,\"nativeAudio\":false},\"wan-2.6-flash\":{\"label\":\"Wan 2.6 Flash\",\"aspectRatios\":[\"16:9\",\"9:16\",\"1:1\"],\"resolutions\":[],\"durations\":[3,4,5],\"firstFrame\":true,\"lastFrame\":false,\"requiresFirstFrame\":true,\"seed\":false,\"nativeAudio\":false},\"veo-3.1-lite\":{\"label\":\"Veo 3.1 Lite\",\"aspectRatios\":[\"16:9\",\"9:16\"],\"resolutions\":[\"720p\",\"1080p\"],\"durations\":[4,6,8],\"firstFrame\":true,\"lastFrame\":true,\"requiresFirstFrame\":false,\"seed\":false,\"nativeAudio\":true},\"vidu-q3-turbo\":{\"label\":\"Vidu Q3 Turbo\",\"aspectRatios\":[],\"resolutions\":[],\"durations\":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],\"firstFrame\":true,\"lastFrame\":true,\"requiresFirstFrame\":false,\"seed\":false,\"nativeAudio\":true},\"wan-2.7\":{\"label\":\"Wan 2.7\",\"aspectRatios\":[],\"resolutions\":[\"720p\",\"1080p\"],\"durations\":[2,3,4,5,6,7,8,9,10,11,12,13,14,15],\"firstFrame\":true,\"lastFrame\":true,\"requiresFirstFrame\":true,\"seed\":true,\"nativeAudio\":false}}};\n// Generate's one page. CATALOG (inlined by build-package.mjs from the SDK's generation catalog) says what each\n// model accepts, so the page only offers what the chosen model can make: its shapes, sizes, lengths, sound, your\n// photos and frames. Every choice is a shared field (data-stillmade-share), so people editing the Step together see\n// the same page. The button runs the Block once; StillMade shows the price and asks before anything is made.\nconst $ = id => document.getElementById(id);\nconst root = $('root');\nconst state = { input: {}, busy: false, history: [], shownKeys: '' };\n\nconst checked = name => { const el = document.querySelector(`input[name=\"${name}\"]:checked`); return el ? el.value : undefined; };\nconst visibleChecked = name => { const el = document.querySelector(`input[name=\"${name}\"]:checked`); return el && !el.disabled && !el.closest('label').hidden ? el.value : undefined; };\nfunction pick(name, value) {\n  const el = document.querySelector(`input[name=\"${name}\"][value=\"${value}\"]`);\n  if (!el || el.checked) return;\n  el.checked = true;\n  el.dispatchEvent(new Event('input', { bubbles: true }));\n  el.dispatchEvent(new Event('change', { bubbles: true }));\n}\nconst mode = () => checked('mode') === 'video' ? 'video' : 'image';\nfunction model() {\n  const kind = mode(), list = CATALOG[kind], id = checked(kind === 'video' ? 'videoModel' : 'imageModel');\n  return list[id] ? [id, list[id]] : Object.entries(list)[0];\n}\nconst message = error => (error && error.message) || 'That did not work. Try again.';\nfunction status(text, tone) { const el = $('status'); el.textContent = text || ''; if (tone) el.dataset.tone = tone; else delete el.dataset.tone; }\n\n// One axis (shape, size, length): show the values the model accepts, keep the pick when it still fits,\n// otherwise move to the model's first value. No values hides the row.\nfunction axis(name, allowed, fallback) {\n  const group = $(name), options = [...group.querySelectorAll('input')];\n  for (const option of options) option.closest('label').hidden = !allowed.includes(option.value);\n  group.dataset.off = String(!allowed.length);\n  if (!allowed.length) return;\n  const current = checked(name);\n  if (!allowed.includes(current)) pick(name, allowed.includes(fallback) ? fallback : allowed[0]);\n}\n\nfunction refresh() {\n  const kind = mode(), [id, entry] = model();\n  root.dataset.mode = kind;\n  $('prompt').placeholder = kind === 'video' ? 'Describe the shot: who or what, how it moves, the camera' : 'Describe the picture';\n  $('model-name').textContent = entry.label;\n  axis('shape', entry.aspectRatios, kind === 'video' ? '16:9' : '1:1');\n  axis('size', entry.resolutions, entry.resolutions[0]);\n  if (kind === 'image') {\n    $('quality').dataset.off = String(!entry.qualities.length);\n    const references = state.input.references || [];\n    $('references-row').dataset.off = String(!entry.references && !references.length);\n    $('references-limit').textContent = entry.references ? `up to ${entry.references}` : 'this model takes none';\n  } else {\n    axis('length', entry.durations.map(String), '5');\n    $('sound-row').dataset.off = String(!entry.nativeAudio);\n    $('end-frame').dataset.off = String(!entry.lastFrame);\n  }\n  $('seed-row').dataset.off = String(!entry.seed);\n  // Models that cannot use what is already here are not offered: photos need a model that keeps them,\n  // a video model that needs a start frame waits for one, an end frame needs a model that takes it.\n  const refs = (state.input.references || []).length, start = !!state.input.startFrame, end = !!state.input.endFrame;\n  for (const option of document.querySelectorAll('input[name=\"imageModel\"]')) {\n    const item = CATALOG.image[option.value];\n    option.disabled = refs > 0 && !item.references;\n    option.closest('label').querySelector('.gen-why').textContent = option.disabled ? 'Does not keep your photos' : '';\n  }\n  for (const option of document.querySelectorAll('input[name=\"videoModel\"]')) {\n    const item = CATALOG.video[option.value];\n    const reason = item.requiresFirstFrame && !start ? 'Needs a start frame' : end && !item.lastFrame ? 'Takes no end frame' : '';\n    option.disabled = !!reason;\n    option.closest('label').querySelector('.gen-why').textContent = reason;\n  }\n  const count = Number(checked('count')) || 1, noun = kind === 'video' ? 'video' : 'image';\n  $('generate').textContent = count > 1 ? `Generate ${count} ${noun}s` : `Generate ${noun}`;\n  const shape = visibleChecked('shape');\n  $('place-shape').style.setProperty('--r', shape && shape !== 'auto' ? shape.replace(':', '/') : kind === 'video' ? '16/9' : '1/1');\n  $('place-text').textContent = kind === 'video' ? 'Your video appears here' : 'Your picture appears here';\n}\n\ndocument.addEventListener('change', event => { if (event.target.closest('fieldset, #sound')) refresh(); });\n$('model-picker').addEventListener('change', () => { $('model-picker').open = false; });\n\nasync function preview(value) {\n  const shown = value.kind === 'video' ? await StillMade.previewMedia(value) : await StillMade.previewImage(value);\n  return typeof shown === 'string' ? shown : shown && shown.url;\n}\n\nasync function tile(value, { label, list, index }) {\n  const li = document.createElement('li');\n  try {\n    const url = await preview(value);\n    const img = document.createElement('img'); img.src = url; img.alt = label; li.append(img);\n  } catch { li.append(Object.assign(document.createElement('span'), { className: 'sm-empty', textContent: label })); }\n  if (list) {\n    const tools = document.createElement('span'); tools.className = 'sm-tile-tools';\n    const remove = document.createElement('button');\n    remove.type = 'button'; remove.dataset.stillmadeRemove = list; remove.dataset.index = String(index);\n    remove.setAttribute('aria-label', 'Remove'); remove.title = 'Remove';\n    const glyph = document.createElement('span'); glyph.className = 'sm-glyph'; glyph.dataset.glyph = 'close'; glyph.setAttribute('aria-hidden', 'true');\n    remove.append(glyph);\n    tools.append(remove); li.append(tools);\n  }\n  return li;\n}\n\nasync function drawInputs(input) {\n  const list = $('references'), add = list.lastElementChild;\n  for (const li of [...list.children]) if (li !== add) li.remove();\n  const photos = Array.isArray(input.references) ? input.references : [];\n  for (let index = 0; index < photos.length; index++) list.insertBefore(await tile(photos[index], { label: `Photo ${index + 1}`, list: 'references', index }), add);\n  for (const [id, name, label] of [['start-frame', 'startFrame', 'Start'], ['end-frame', 'endFrame', 'End']]) {\n    const slot = $(id), value = input[name];\n    for (const child of [...slot.querySelectorAll('img, .sm-empty')]) child.remove();\n    if (value) { const shown = await tile(value, { label }); const img = shown.querySelector('img, .sm-empty'); if (img) slot.prepend(img); }\n  }\n}\n\nStillMade.onInput(async input => {\n  state.input = input || {};\n  if (typeof state.input.prompt === 'string' && state.input.prompt && !$('prompt').value) $('prompt').value = state.input.prompt;\n  // Choices that arrive as inputs (from Chat or an earlier Step) set the page; the person can change them.\n  const given = state.input, kind = given.mode === 'video' ? 'video' : given.mode === 'image' ? 'image' : undefined;\n  if (kind) pick('mode', kind);\n  if (given.model && CATALOG.image[given.model]) { pick('mode', 'image'); pick('imageModel', given.model); }\n  if (given.model && CATALOG.video[given.model]) { pick('mode', 'video'); pick('videoModel', given.model); }\n  refresh();\n  if (given.aspectRatio) pick('shape', given.aspectRatio);\n  if (given.size) pick('size', given.size);\n  if (given.quality) pick('quality', given.quality);\n  if (Number.isInteger(given.duration)) pick('length', String(given.duration));\n  if (Number.isInteger(given.count)) pick('count', String(Math.max(1, Math.min(4, given.count))));\n  if (typeof given.sound === 'boolean') $('sound').checked = given.sound;\n  if (typeof given.avoid === 'string' && given.avoid && !$('avoid').value) $('avoid').value = given.avoid;\n  if (Number.isInteger(given.seed) && !$('seed').value) $('seed').value = String(given.seed);\n  try { await drawInputs(state.input); } catch (error) { status(message(error), 'error'); }\n  refresh();\n});\n\n// What was made: newest first, one tile each. Earlier batches stay in the shared history (the last 24).\nasync function drawResults() {\n  const items = state.history, gallery = $('gallery'), keys = items.map(item => item.assetId + ':' + item.versionId).join('|');\n  if (keys === state.shownKeys) return;\n  state.shownKeys = keys;\n  gallery.replaceChildren();\n  for (const item of items) {\n    const li = document.createElement('li');\n    try {\n      const url = await preview(item);\n      if (item.kind === 'video') {\n        const video = document.createElement('video'); video.src = url; video.controls = true; video.playsInline = true; video.preload = 'metadata';\n        li.append(video);\n      } else {\n        const img = document.createElement('img'); img.src = url; img.alt = item.prompt || 'Generated picture'; img.dataset.stillmadeExpand = 'made';\n        li.append(img);\n      }\n    } catch { li.append(Object.assign(document.createElement('span'), { className: 'sm-empty', textContent: 'Could not show this one' })); }\n    li.append(Object.assign(document.createElement('small'), { textContent: [item.model, item.prompt].filter(Boolean).join(' · '), title: item.prompt || '' }));\n    gallery.append(li);\n  }\n  gallery.hidden = !items.length;\n  $('place').hidden = !!items.length;\n}\n\nfunction remember(made, details) {\n  const fresh = made.filter(item => item && item.url && ['image', 'video'].includes(item.kind))\n    .map(item => ({ kind: item.kind, assetId: item.assetId, versionId: item.versionId, url: item.url, ...(item.duration ? { duration: item.duration } : {}), ...details }));\n  if (!fresh.length) return;\n  const seen = new Set(fresh.map(item => item.assetId + ':' + item.versionId));\n  state.history = [...fresh, ...state.history.filter(item => !seen.has(item.assetId + ':' + item.versionId))].slice(0, 24);\n  StillMade.updateShared({ history: state.history }).catch(() => {});\n  drawResults();\n}\n\nStillMade.onShared(shared => {\n  if (shared && shared.state && Array.isArray(shared.state.history)) state.history = shared.state.history;\n  const made = shared && shared.outputs && Array.isArray(shared.outputs.media) ? shared.outputs.media : [];\n  if (made.length) remember(made, {});\n  else drawResults();\n});\n\nfunction busy(on) {\n  state.busy = on;\n  $('generate').disabled = on;\n  root.toggleAttribute('aria-busy', on);\n}\n\nasync function generate() {\n  if (state.busy) return;\n  const kind = mode(), [id, entry] = model(), prompt = $('prompt').value.trim();\n  if (!prompt) { status(kind === 'video' ? 'Describe the shot first.' : 'Describe the picture first.', 'error'); $('prompt').focus(); return; }\n  if (kind === 'video' && entry.requiresFirstFrame && !state.input.startFrame) { status(`${entry.label} needs a start frame.`, 'error'); return; }\n  const count = Number(checked('count')) || 1;\n  const values = { prompt, mode: kind, model: id, count };\n  const shape = visibleChecked('shape'), size = visibleChecked('size');\n  if (shape) values.aspectRatio = shape;\n  if (size) values.size = size;\n  if (kind === 'image') {\n    if (entry.qualities.length) values.quality = checked('quality');\n    if (entry.references && Array.isArray(state.input.references) && state.input.references.length) values.references = state.input.references.slice(0, entry.references);\n  } else {\n    const length = Number(visibleChecked('length'));\n    if (length) values.duration = length;\n    if (entry.nativeAudio) values.sound = $('sound').checked;\n    if (state.input.startFrame) values.startFrame = state.input.startFrame;\n    if (state.input.startFrame && state.input.endFrame && entry.lastFrame) values.endFrame = state.input.endFrame;\n  }\n  const avoid = $('avoid').value.trim();\n  if (avoid) values.avoid = avoid;\n  const seed = Number($('seed').value);\n  if (entry.seed && $('seed').value !== '' && Number.isInteger(seed) && seed >= 0) values.seed = seed;\n  busy(true);\n  status(count > 1 ? `Generating ${count} ${kind}s…` : `Generating ${kind === 'video' ? 'the video' : 'the picture'}…`, 'loading');\n  try {\n    const outputs = await StillMade.run(values);\n    const made = outputs && Array.isArray(outputs.media) ? outputs.media : [];\n    remember(made, { prompt, model: entry.label });\n    status(made.length ? `${made.length} made` : '', made.length ? 'success' : undefined);\n  } catch (error) { status(message(error), 'error'); }\n  finally { busy(false); }\n}\n$('generate').addEventListener('click', generate);\nrefresh();\n\n})();\n"
+  },
+  "tests": [
+    {
+      "name": "Makes two pictures that keep your photo",
+      "input": {
+        "prompt": "The bottle on a wet rock at dawn",
+        "mode": "image",
+        "model": "nano-banana-pro",
+        "aspectRatio": "4:5",
+        "size": "2K",
+        "count": 2,
+        "references": [
+          {
+            "kind": "image",
+            "assetId": "photo-asset",
+            "versionId": "photo-v1",
+            "url": "https://media.example/photo.png",
+            "mimeType": "image/png",
+            "width": 1024,
+            "height": 1024,
+            "bytes": 200000
+          }
+        ]
+      },
+      "mocks": {
+        "actions": {
+          "media.generate": {
+            "value": [
+              {
+                "key": "image-1",
+                "kind": "image",
+                "assetId": "made-image-1",
+                "versionId": "made-image-1-v1",
+                "url": "https://media.example/made-image-1.png"
+              },
+              {
+                "key": "image-2",
+                "kind": "image",
+                "assetId": "made-image-2",
+                "versionId": "made-image-2-v1",
+                "url": "https://media.example/made-image-2.png"
+              }
+            ],
+            "failures": []
+          }
+        }
+      },
+      "expected": {
+        "media": [
+          {
+            "kind": "image",
+            "assetId": "made-image-1",
+            "versionId": "made-image-1-v1",
+            "url": "https://media.example/made-image-1.png"
+          },
+          {
+            "kind": "image",
+            "assetId": "made-image-2",
+            "versionId": "made-image-2-v1",
+            "url": "https://media.example/made-image-2.png"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Makes a vertical clip from a start and end frame with its own sound",
+      "input": {
+        "prompt": "Slow push in as the door opens",
+        "mode": "video",
+        "model": "seedance-2.0",
+        "aspectRatio": "9:16",
+        "size": "720p",
+        "duration": 6,
+        "sound": true,
+        "startFrame": {
+          "kind": "image",
+          "assetId": "photo-asset",
+          "versionId": "photo-v1",
+          "url": "https://media.example/photo.png",
+          "mimeType": "image/png",
+          "width": 1024,
+          "height": 1024,
+          "bytes": 200000
+        },
+        "endFrame": {
+          "kind": "image",
+          "assetId": "frame-asset",
+          "versionId": "frame-v1",
+          "url": "https://media.example/frame.png",
+          "mimeType": "image/png",
+          "width": 1024,
+          "height": 1024,
+          "bytes": 200000
+        },
+        "avoid": "blur",
+        "seed": 7
+      },
+      "mocks": {
+        "actions": {
+          "media.generate": {
+            "value": [
+              {
+                "key": "video-1",
+                "kind": "video",
+                "assetId": "made-video-1",
+                "versionId": "made-video-1-v1",
+                "url": "https://media.example/made-video-1.mp4",
+                "duration": 6
+              }
+            ],
+            "failures": []
+          }
+        }
+      },
+      "expected": {
+        "media": [
+          {
+            "kind": "video",
+            "assetId": "made-video-1",
+            "versionId": "made-video-1-v1",
+            "url": "https://media.example/made-video-1.mp4",
+            "duration": 6
+          }
+        ]
+      }
+    }
+  ]
+};

package/docs/build/audio-to-editor.md

@@ -0,0 +1,36 @@
+# Add speech to the Editor
+
+Use **Audio from Blocks** to place an accepted speech recording on the Editor's
+audio lane. This action is available in the desktop and mobile Editor. It uses
+the recording already generated by a project Step; adding it does not generate
+speech again.
+
+1. Run the speech Block in a saved project. Review its text, voice, speed, and
+   cost, confirm generation, listen, and choose **Use this audio**.
+2. In the Editor, open **Media** and find **Audio from Blocks**. This section
+   appears in the desktop Media Bin and the mobile Media sheet. Listen to the
+   accepted result you want to use.
+3. Move the playhead to the desired start time and choose **Add at playhead**.
+   The Editor adds an audio item with the recording's measured duration.
+
+Adding an item requires project edit access. The list offers current, accepted
+project speech results. Import-review fixtures, sample previews, unfinished
+runs, and outdated results are not sources for new items. If the Block's input
+or result changes, complete and accept its current project run before adding
+that result.
+
+An inserted item retains the recording you chose. Rerunning or removing its
+source Block does not remove the item or replace its audio. To use a later
+recording, accept that result and add it explicitly; existing timeline items
+remain available for normal editing.
+
+This action adds Editor audio. It leaves the native Voiceover master recording,
+takes, transcript, word timings, and shared narration unchanged. Voiceover's
+primary typed input remains `script`. The `audio.speech` package contract is
+unchanged: declare one `audio` output, and let the host handle playback and
+explicit insertion. Package code and custom interfaces do not receive a new
+timeline-writing API.
+
+The [speech guide](hosted-speech.md) describes source validation and the
+required provider review. Playback and insertion checks do not establish that
+a live provider speech test has passed.