voxflow 1.15.4 → 1.15.6

package/lib/stage-core/voiceover-mux.js

@@ -31,51 +31,78 @@ const path = require('path');
 const { contentTypeFor } = require('./tts-audition');
 const { SYNTHESIZE_DEFAULTS } = require('../core/config');
 
+// Mime mapper covering both audio + image extensions so the local media
+// server can serve cached audition mp3s and generated PNG/JPEG/WebP from a
+// single process. Anything unrecognised becomes octet-stream — Remotion's
+// fetch still goes through but the composition decides what to do.
+const MIME_BY_EXT = {
+  mp3: 'audio/mpeg',
+  wav: 'audio/wav',
+  pcm: 'audio/L16',
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  webp: 'image/webp',
+};
+function mimeFor(ext) {
+  if (!ext) return 'application/octet-stream';
+  return MIME_BY_EXT[ext.toLowerCase()] || contentTypeFor(ext);
+}
+
+function serveFileFrom(rootDir, urlFname, res) {
+  const fname = urlFname.split('?')[0];
+  if (fname === '' || fname.includes('/') || fname.includes('\\') || fname.includes('..')) {
+    res.writeHead(400, { 'Content-Type': 'text/plain' });
+    res.end('bad filename');
+    return;
+  }
+  const filePath = path.join(rootDir, fname);
+  fs.stat(filePath, (statErr, st) => {
+    if (statErr || !st.isFile()) {
+      res.writeHead(404, { 'Content-Type': 'text/plain' });
+      res.end('not found');
+      return;
+    }
+    const ext = path.extname(fname).slice(1);
+    res.writeHead(200, {
+      'Content-Type': mimeFor(ext),
+      'Content-Length': st.size,
+      'Cache-Control': 'no-store',
+    });
+    fs.createReadStream(filePath).pipe(res);
+  });
+}
+
 /**
- * Tiny localhost HTTP server serving the audition cache directory.
- * Only responds to GET /audio/<filename>; everything else is 404. Path
- * traversal (.. or nested directories) is rejected up front since the
- * cache layout is intentionally flat.
+ * Tiny localhost HTTP server serving the audition + image-gen caches.
+ * Responds to GET /audio/<filename> and (optionally) GET /image/<filename>;
+ * everything else is 404. Path traversal is rejected — the cache layouts
+ * are intentionally flat <sha256>.<ext> files.
  *
  * @param {object} opts
- * @param {string} opts.cacheDir         Directory containing <hash>.mp3 files.
+ * @param {string} opts.cacheDir          Directory containing audio <hash>.<ext> files.
+ * @param {string} [opts.imageCacheDir]   Optional second root mounted at /image/.
  * @param {number} [opts.preferredPort=0]  0 lets the OS pick a free port.
  * @returns {Promise<{server, port, url, close}>}
  */
-async function startVoiceoverServer({ cacheDir, preferredPort = 0 }) {
+async function startVoiceoverServer({ cacheDir, imageCacheDir = null, preferredPort = 0 }) {
   if (typeof cacheDir !== 'string' || !cacheDir) {
     throw new Error('startVoiceoverServer: cacheDir required');
   }
   const server = http.createServer((req, res) => {
-    if (req.method !== 'GET' || !req.url.startsWith('/audio/')) {
+    if (req.method !== 'GET') {
       res.writeHead(404, { 'Content-Type': 'text/plain' });
       res.end('not found');
       return;
     }
-    const fname = req.url.slice('/audio/'.length).split('?')[0];
-    // Defense in depth — reject path traversal even on a localhost-only
-    // server. The audition cache is a flat dir of <sha256>.<ext> filenames.
-    if (fname === '' || fname.includes('/') || fname.includes('\\') || fname.includes('..')) {
-      res.writeHead(400, { 'Content-Type': 'text/plain' });
-      res.end('bad filename');
-      return;
+    if (req.url.startsWith('/audio/')) {
+      return serveFileFrom(cacheDir, req.url.slice('/audio/'.length), res);
     }
-    const filePath = path.join(cacheDir, fname);
-    fs.stat(filePath, (statErr, st) => {
-      if (statErr || !st.isFile()) {
-        res.writeHead(404, { 'Content-Type': 'text/plain' });
-        res.end('not found');
-        return;
-      }
-      const ext = path.extname(fname).slice(1);
-      const ctype = contentTypeFor(ext);
-      res.writeHead(200, {
-        'Content-Type': ctype,
-        'Content-Length': st.size,
-        'Cache-Control': 'no-store',
-      });
-      fs.createReadStream(filePath).pipe(res);
-    });
+    if (imageCacheDir && req.url.startsWith('/image/')) {
+      return serveFileFrom(imageCacheDir, req.url.slice('/image/'.length), res);
+    }
+    res.writeHead(404, { 'Content-Type': 'text/plain' });
+    res.end('not found');
   });
   await new Promise((resolve, reject) => {
     server.once('error', reject);
@@ -177,7 +204,87 @@ async function prepareVoiceovers({ deck, auditionClient, baseUrl, onProgress })
   return { byIdx, skipped };
 }
 
+/**
+ * Image counterpart of prepareVoiceovers — resolves the primary image
+ * for each card. Precedence per card:
+ *   (a) card.imageUrl present → use as-is, no API call (external asset)
+ *   (b) card.images[0] present → call image-gen client, route through
+ *       the local server's /image/ mount, return URL.
+ * Returns { byIdx: { cardIdx → URL }, skipped: [{cardIdx, reason, message?}] }.
+ *
+ * @param {object} opts
+ * @param {object} opts.deck
+ * @param {{imagine: Function}} opts.imgClient
+ * @param {string} opts.baseUrl                 e.g. http://127.0.0.1:54321
+ * @param {(p:object) => void} [opts.onProgress]
+ */
+async function prepareImages({ deck, imgClient, baseUrl, onProgress }) {
+  const byIdx = {};
+  const skipped = [];
+  if (!deck || !Array.isArray(deck.cards)) return { byIdx, skipped };
+  if (!imgClient || typeof imgClient.imagine !== 'function') {
+    throw new Error('prepareImages: imgClient.imagine is required');
+  }
+  if (typeof baseUrl !== 'string' || !baseUrl) {
+    throw new Error('prepareImages: baseUrl is required');
+  }
+  const cards = deck.cards;
+
+  for (let i = 0; i < cards.length; i++) {
+    const card = cards[i];
+    if (!card) { skipped.push({ cardIdx: i, reason: 'missing-card' }); continue; }
+
+    // External imageUrl wins — themes that already consume it (photo-feature
+    // / atmospheric) keep working unchanged.
+    if (typeof card.imageUrl === 'string' && card.imageUrl.trim()) {
+      byIdx[i] = card.imageUrl;
+      continue;
+    }
+
+    const images = Array.isArray(card.images) ? card.images : [];
+    const primary = images[0];
+    if (!primary) {
+      skipped.push({ cardIdx: i, reason: 'no-images' });
+      continue;
+    }
+
+    let r;
+    try {
+      r = await imgClient.imagine({
+        prompt: primary.prompt,
+        aspect: primary.aspect,
+        quality: primary.quality,
+      });
+    } catch (err) {
+      skipped.push({ cardIdx: i, reason: 'network_error', message: err.message || String(err) });
+      continue;
+    }
+    if (r.code !== 'success') {
+      skipped.push({ cardIdx: i, reason: r.code, message: r.message });
+      if (r.code === 'not_logged_in' || r.code === 'quota_exceeded') break;
+      continue;
+    }
+    const fname = `${r.cacheKey}.${r.ext}`;
+    byIdx[i] = `${baseUrl.replace(/\/$/, '')}/image/${fname}`;
+    if (typeof onProgress === 'function') {
+      try {
+        onProgress({
+          cardIdx: i,
+          total: cards.length,
+          fromCache: !!r.fromCache,
+          prompt: primary.prompt,
+          aspect: primary.aspect,
+        });
+      } catch { /* swallow */ }
+    }
+  }
+
+  return { byIdx, skipped };
+}
+
 module.exports = {
   startVoiceoverServer,
   prepareVoiceovers,
+  prepareImages,
+  mimeFor,
 };

package/lib/stage-ui/slice/template.js

@@ -590,6 +590,69 @@ function renderSliceStageHtml({ sourcePath, port }) {
     .audition-status[data-state="error"] {
       color: #b91c1c; background: rgba(239,68,68,0.08);
     }
+    /* ─── Imagine (🎨) — per-card image gallery modal ─────────────────────── */
+    .stage-card .card-actions button[data-action="imagine"] .imagine-icon {
+      display: inline-block; margin-right: 4px; font-size: 10px;
+    }
+    .stage-card .card-actions button[data-action="imagine"] .imagine-count {
+      display: inline-block; margin-left: 4px;
+      padding: 1px 5px; border-radius: 8px;
+      background: rgba(255,255,255,0.25); font-size: 10px;
+      font-variant-numeric: tabular-nums;
+    }
+    .stage-card .card-actions button[data-action="imagine"][data-image-count="0"] {
+      opacity: 0.6;
+    }
+    .imagine-entry {
+      display: grid; gap: 10px;
+      padding: 14px 0; border-bottom: 1px solid var(--border);
+    }
+    .imagine-entry:last-child { border-bottom: 0; padding-bottom: 4px; }
+    .imagine-entry-meta {
+      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+    }
+    .imagine-entry-id {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 11px; font-weight: 600;
+      padding: 2px 8px; border-radius: 4px;
+      background: rgba(88,81,184,0.12); color: var(--accent);
+    }
+    .imagine-entry-aspect {
+      font-size: 10px; color: var(--muted);
+      letter-spacing: 0.06em; text-transform: uppercase;
+    }
+    .imagine-entry-prompt {
+      font-size: 12px; color: var(--text);
+      flex: 1 1 100%; min-width: 0;
+      line-height: 1.4;
+      word-break: break-word;
+    }
+    .imagine-entry-img {
+      max-width: 100%; max-height: 280px;
+      border: 1px solid var(--border); border-radius: 8px;
+      display: block; background: var(--surface-2);
+    }
+    .imagine-entry-img.loading {
+      opacity: 0.5;
+      animation: imagine-pulse 1.4s ease-in-out infinite;
+    }
+    @keyframes imagine-pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 0.7; }
+    }
+    .imagine-entry-error {
+      color: #b91c1c; font-size: 12px;
+      padding: 12px; border-radius: 8px;
+      background: rgba(239,68,68,0.08);
+    }
+    .imagine-entry-empty {
+      padding: 32px 16px; text-align: center;
+      color: var(--muted); font-size: 13px;
+    }
+    .imagine-entry-empty code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      background: var(--surface-2); padding: 1px 5px; border-radius: 3px;
+    }
 
     .selection-fab {
       position: fixed; z-index: 50;
@@ -835,6 +898,17 @@ function renderSliceStageHtml({ sourcePath, port }) {
     <span>✏</span><span>Edit selection with AI</span>
   </button>
 
+  <div class="modal-backdrop" id="imagine-modal" role="dialog" aria-modal="true" aria-labelledby="imagine-modal-title" hidden>
+    <div class="modal">
+      <div class="modal-header">
+        <h3 id="imagine-modal-title">Card images</h3>
+        <div class="grow"></div>
+        <button class="modal-close" id="imagine-modal-close" type="button" aria-label="Close">×</button>
+      </div>
+      <div class="modal-body" id="imagine-modal-body"></div>
+    </div>
+  </div>
+
   <div class="local-render-toast" id="local-render-toast" role="status" aria-live="polite">
     <div class="toast-head">
       <span>✓</span>
@@ -1185,6 +1259,87 @@ function renderSliceStageHtml({ sourcePath, port }) {
         setAuditionStatus('error', 'Audio playback failed.');
       });
 
+      // ─── Per-card Imagine (🎨) — open modal listing registered card.images. ─
+      // Click loads each image via /api/imagine which proxies hunyuan-image
+      // and caches by (prompt, aspect, quality) hash. <img> error handler
+      // surfaces backend errors (auth / quota / failed gen) inline.
+      var imagineModal = document.getElementById('imagine-modal');
+      var imagineModalBody = document.getElementById('imagine-modal-body');
+      var imagineModalClose = document.getElementById('imagine-modal-close');
+
+      function closeImagineModal() {
+        if (imagineModal) imagineModal.hidden = true;
+        if (imagineModalBody) imagineModalBody.innerHTML = '';
+      }
+
+      cardsPane.addEventListener('click', function (ev) {
+        var btn = ev.target.closest && ev.target.closest('[data-action="imagine"]');
+        if (!btn || !currentDeck) return;
+        var idx = parseInt(btn.getAttribute('data-card-index'), 10);
+        if (!Number.isFinite(idx)) return;
+        var cards = Array.isArray(currentDeck.cards) ? currentDeck.cards : [];
+        var card = cards[idx];
+        if (!card) return;
+        openImagineModal(idx, card);
+      });
+
+      function openImagineModal(cardIdx, card) {
+        if (!imagineModal || !imagineModalBody) return;
+        var images = Array.isArray(card.images) ? card.images : [];
+        if (images.length === 0) {
+          imagineModalBody.innerHTML =
+            '<div class="imagine-entry-empty">' +
+            'Card #' + (cardIdx + 1) + ' has no images registered.<br/>' +
+            'Add an entry to <code>cards[' + cardIdx + '].images: [{ id, prompt, aspect, quality }]</code> in deck.json.' +
+            '</div>';
+        } else {
+          imagineModalBody.innerHTML = images.map(function (img) {
+            if (!img || typeof img !== 'object') return '';
+            var src = '/api/imagine?card=' + encodeURIComponent(cardIdx) +
+                      '&img=' + encodeURIComponent(img.id || '');
+            var aspectStr = img.aspect ? '  ' + escapeHtml(img.aspect) : '';
+            var qualityStr = img.quality ? ' · ' + escapeHtml(img.quality) : '';
+            return '<div class="imagine-entry">' +
+                   '<div class="imagine-entry-meta">' +
+                     '<span class="imagine-entry-id">#' + escapeHtml(img.id || '?') + '</span>' +
+                     (aspectStr || qualityStr ? '<span class="imagine-entry-aspect">' + escapeHtml(aspectStr) + qualityStr + '</span>' : '') +
+                   '</div>' +
+                   '<div class="imagine-entry-prompt">' + escapeHtml(img.prompt || '') + '</div>' +
+                   '<img class="imagine-entry-img loading" alt="image for ' + escapeHtml(img.id || '') + '" loading="lazy" data-src="' + src + '" />' +
+                   '</div>';
+          }).join('');
+          // Wire up each <img> after insertion. We do it programmatically to
+          // attach load / error handlers without inline JS in the HTML
+          // (safer with the page-side escapeHtml + interpolation).
+          var imgs = imagineModalBody.querySelectorAll('img.imagine-entry-img');
+          imgs.forEach(function (el) {
+            var src = el.getAttribute('data-src');
+            el.addEventListener('load', function () { el.classList.remove('loading'); });
+            el.addEventListener('error', function () {
+              var msg = document.createElement('div');
+              msg.className = 'imagine-entry-error';
+              msg.textContent = 'Failed to load — check auth (voxflow login), quota, or prompt content.';
+              el.replaceWith(msg);
+            });
+            el.src = src;
+          });
+        }
+        imagineModal.hidden = false;
+      }
+
+      if (imagineModalClose) {
+        imagineModalClose.addEventListener('click', closeImagineModal);
+      }
+      if (imagineModal) {
+        imagineModal.addEventListener('click', function (e) {
+          // Click on backdrop (the modal-backdrop element itself, not its children) closes.
+          if (e.target === imagineModal) closeImagineModal();
+        });
+      }
+      document.addEventListener('keydown', function (e) {
+        if (e.key === 'Escape' && imagineModal && !imagineModal.hidden) closeImagineModal();
+      });
+
       // For highlighting cards that just changed on hot-reload, we keep a
       // hash of each card's stringified JSON. On the next deck event we
       // diff per-index and add the just-changed CSS class to whichever
@@ -1288,6 +1443,13 @@ function renderSliceStageHtml({ sourcePath, port }) {
               + ' aria-label="Audition card ' + (i + 1) + ' voiceover" title="Play TTS preview — uses card.voiceover or card.narration, costs 100 quota first time then cached">'
               + '<span class="audition-icon" aria-hidden="true">▶</span>Audition'
               + '</button>'
+              + '<button type="button" data-action="imagine" data-card-index="' + i + '"'
+              + ' aria-label="Show generated images for card ' + (i + 1) + '"'
+              + ' title="View AI images registered on card.images — 200-500 quota first time per (prompt, aspect, quality), cached after"'
+              + ' data-image-count="' + (Array.isArray(card.images) ? card.images.length : 0) + '">'
+              + '<span class="imagine-icon" aria-hidden="true">🎨</span>Imagine'
+              + (Array.isArray(card.images) && card.images.length > 0 ? ' <span class="imagine-count">' + card.images.length + '</span>' : '')
+              + '</button>'
               + '<button type="button" data-action="copy-card" data-card-index="' + i + '"'
               + ' aria-label="Copy card ' + (i + 1) + ' as text">Copy text</button>'
           + '</div>'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "voxflow",
-  "version": "1.15.4",
+  "version": "1.15.6",
   "description": "AI audio content creation CLI — stories, podcasts, narration, dubbing, transcription, translation, and video translation with TTS",
   "bin": {
     "voxflow": "./dist/index.js"

package/skills/voxflow-slice/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: voxflow-slice
-description: "OFFLINE / LOCAL-ONLY slicing route — use when the user explicitly wants no-cloud / no-quota / offline / local slicing of a markdown / text article into a VoxFlow Slice deck.json. The user's own Claude does the slicing — there is no VoxFlow API call, no JWT, no quota deduction. Produces a validated 5–8 card JSON ready for `voxflow slice render deck.json` (local Remotion render). Pick this skill ONLY when the user says offline / local / no-cloud / 离线 / 本地 / 不联网 / no quota / 不用配额 — for cloud-route slicing (which calls VoxFlow backend and consumes quota), use the `slice` / `voxflow:slice` skill instead. Triggers: offline slice / local slice / 离线切片 / 本地切片 / no-cloud slice / 不联网切片 / slice this article offline / 文章离线转切片 / 本地切片视频."
+description: "Author + iterate on a VoxFlow Slice card video (1080×1920 vertical, 33 themes) locally in Claude Code / Cursor — the user's own Claude does the work, no VoxFlow API call to slice (0 quota). Full multi-turn workflow: (1) fork a curated template via `voxflow slice fork <id>` OR slice an article into a deck.json by hand; (2) edit deck.json fields in place with Edit/Write tools while `voxflow slice preview deck.json` is running (browser hot-reloads in ~50ms); (3) audition voice per card with ▶ in the browser (proxies /api/tts/synthesize, content-hash cached); (4) regenerate AI images per card with 🎨 (card.images: [{id, prompt, aspect, quality}], proxies hunyuan-image, content-hash cached); (5) render mp4 with `voxflow slice render deck.json` — audio + AI images baked in by default, --no-audio / --no-images opt out, --legacy silent fallback. Schema gains: per-card `voiceover` (voiceId/text/rate/enabled), per-card `images` registry, V2 LayoutTree `el: \"raw-html\"` escape hatch (4096 char cap). Loop rules: edit only the fields the user asked about (preserve diff highlight), never re-run `voxflow slice <article>` during iteration (overwrites edits), don't restart the preview server, don't call /api/audition or /api/imagine yourself (user-driven via ▶/🎨). Pick this skill for ANY iterative Slice work — even when the user has a token; the iteration loop is faster + cheaper than the one-shot cloud route. Triggers: slice / paper-slide / paperslide / card video / 卡片视频 / 切片视频 / 知识卡片 / 文章转视频 / 抖音知识号 / 小红书图文转视频 / 知乎长文转视频 / 公众号转视频 / iterate slice / multi-turn slice / 多轮编辑切片 / 迭代切片 / fork template / slice fork / 模板 / 模板市场 / template gallery / audition card / play voiceover / 试听口播 / 试听卡片 / regenerate image / 生图 / image-gen card / raw-html slice / custom panel / offline slice / local slice / 离线切片 / 本地切片 / 不联网 / no-cloud slice. For the one-shot cloud route (calls /api/slice/deck, 200 quota, no iteration), use the `slice` skill instead."
 ---
 
 # voxflow-slice — Article → deck.json (offline)
@@ -145,6 +145,60 @@ All cards require a non-empty `narration` string (TTS reads this; 30–60 zh cha
 }
 ```
 
+### Optional per-card `images` registry (Phase B)
+
+Any card kind may carry an `images: [{ id, prompt, aspect?, quality? }]`
+array of AI-generation recipes. The stage UI's 🎨 button resolves each
+entry through `/api/imagine` (proxies hunyuan-image, content-hash cached
+at `~/.config/voxflow/stage-image-cache/`); the first entry's resolved
+URL is used as the card's `slide.imageUrl` at render time, overriding any
+external `card.imageUrl`.
+
+```jsonc
+{
+  "kind": "body",
+  "caption": "...",
+  "narration": "...",
+  "figureKeyword": "growth-system",
+  "images": [
+    {
+      "id": "hero",                 // stable id ([a-zA-Z0-9_-]+, ≤64 chars, unique on card)
+      "prompt": "晨雾中的山脉，水墨风",   // ≤1000 chars
+      "aspect": "portrait",          // portrait | landscape | square (default: portrait)
+      "quality": "fast"              // fast (200 quota) | hd (500 quota)
+    }
+  ]
+}
+```
+
+Validator caps: `prompt` ≤ 1000 chars, `id` ≤ 64 chars matching `[a-zA-Z0-9_-]+`,
+at most 8 images per card, unique `id` within a card.
+
+### Optional per-card `el: "raw-html"` element (Phase C)
+
+V2 LayoutTree decks may carry a `{ el: "raw-html", html: "..." }` child to
+escape into arbitrary markup. The validator accepts strings up to 4096
+chars and `normalizeV2Children` maps the first occurrence to a `rawHtml`
+field on the V1 normalized output. **PaperSlide composition rendering of
+arbitrary HTML lands in a follow-up PR** — for now the composition
+silently skips the element, so a deck with raw-html validates + saves +
+edits cleanly but renders blank visually until the JSX side is updated.
+
+```jsonc
+{
+  "kind": "body",
+  "narration": "...",
+  "children": [
+    { "el": "heading", "text": "Custom panel" },
+    { "el": "raw-html", "html": "<div style='font-size:48px'>★</div>" }
+  ]
+}
+```
+
+On a body card, exactly one of `paper-figure` OR `raw-html` is required
+(both is rejected). Other kinds (title / quote / data / list) allow
+`raw-html` as a supplementary element.
+
 ### Optional per-card `voiceover` override
 
 Any card kind may carry a nested `voiceover` object to tune its audio
@@ -250,6 +304,21 @@ These are the most common failure modes. The validator surfaces a clean error, b
 4. **`figureKeyword`** has no validator check on the keyword string itself (only that it's a string if present) — but **unknown keywords render as a default arrow**. Always pick from the controlled list.
 5. **`outro` card invariant** — at most one, must be last. `deck-validator.js:204–208`. Multiple outros = wiring bug, mid-deck outro = bug.
 
+## Quick start with curated templates
+
+When the user is new to Slice and wants something to copy from, point them
+at the curated gallery. Five hand-picked decks ship with the CLI and
+match the most common content shapes (product launch, founder lesson,
+data finding, incident review, quiet essay).
+
+```bash
+voxflow slice fork --list                    # browse the gallery
+voxflow slice fork product-launch            # copy the deck.json to cwd
+voxflow slice preview product-launch-deck.json   # iterate
+```
+
+The same gallery is browsable at `voxflow.studio/apps/slice/templates`.
+
 ## Hand-off
 
 After writing `deck.json`, tell the user:
@@ -257,7 +326,7 @@ After writing `deck.json`, tell the user:
 ```
 Wrote deck.json (<N> cards, theme: <theme-id>). Next:
 
-  voxflow slice preview deck.json                    # browser preview + per-card audition + render button
+  voxflow slice preview deck.json                    # browser preview + per-card audition + 🎨 + render
   voxflow slice render deck.json --output out.mp4    # one-shot mp4 from the terminal
 ```
 
@@ -292,7 +361,9 @@ Then for every follow-up:
 | "make card 4 silent" | `Edit` `cards[3].voiceover = { "enabled": false }` | 0 |
 | "口播说点不一样的" | `Edit` `cards[i].voiceover.text` so TTS reads override while caption stays | 0 |
 | "I want to hear card 3" | Tell user to click ▶ on card 3 in the browser; the toolbar shows cache hit / quota cost / error | 100 (first time per clip), 0 (cached) |
-| "render mp4" | Tell user: click **Render mp4 (local)** in the browser, OR `voxflow slice render deck.json` | TTS pass (cached if auditioned) + render |
+| "regenerate the image on card 2" | `Edit` `cards[1].images[0].prompt` — user clicks 🎨 in stage to see the new variant | 200 (first time per prompt), 0 (cached) |
+| "give me a custom panel on card 4" | `Edit` `cards[3].children` to swap `paper-figure` for `raw-html` (V2 LayoutTree only) | 0 |
+| "render mp4" | Tell user: click **Render mp4 (local)** in the browser, OR `voxflow slice render deck.json` | TTS + image pass (cached if seen) + render |
 
 ### Loop rules
 

package/skills/voxflow-slice/templates/data-finding/deck.json

@@ -0,0 +1,40 @@
+{
+  "header": "数据发现",
+  "seriesTitle": "一个反直觉数字",
+  "seriesTagline": "看完你大概率会改方法",
+  "theme": "bold-poster",
+  "cards": [
+    {
+      "kind": "title",
+      "title": ["90%", "其实是错的"],
+      "narration": "我们查了一千个团队的工时表，发现一个反直觉的数字。"
+    },
+    {
+      "kind": "data",
+      "data": {
+        "value": "47",
+        "unit": "%",
+        "label": "时间花在等其他人决策"
+      },
+      "narration": "受访的产品经理里，平均 47% 的工时不是在做事，是在等其他人拍板。"
+    },
+    {
+      "kind": "body",
+      "caption": "瓶颈不在产能，在决策",
+      "figureKeyword": "decision-fork",
+      "narration": "团队越大，决策的链路越长，工时就越多地耗在等待。"
+    },
+    {
+      "kind": "body",
+      "caption": "把决策权下放到能做的人",
+      "figureKeyword": "owner-deadline",
+      "narration": "解法不复杂：明确谁能拍板，让 ta 不必再等上级签字。"
+    },
+    {
+      "kind": "body",
+      "caption": "47% 是可以拿回来的",
+      "figureKeyword": "growth-system",
+      "narration": "下调一层决策权之后，工时回收的中位数是 22%。值得动一下。"
+    }
+  ]
+}

package/skills/voxflow-slice/templates/founder-lesson/deck.json

@@ -0,0 +1,37 @@
+{
+  "header": "创业 · 复盘",
+  "seriesTitle": "一个人创业",
+  "seriesTagline": "回看一年前的自己",
+  "theme": "editorial-mag",
+  "cards": [
+    {
+      "kind": "title",
+      "title": ["最重要的事", "不是技术"],
+      "narration": "一年前我以为是技术决定生死，一年后才发现真正的决定者是别的。"
+    },
+    {
+      "kind": "body",
+      "caption": "把功能写得太多",
+      "figureKeyword": "stuck",
+      "narration": "前半年我加了二十个功能，用户记得的只有三个。剩下的成了我的债务。"
+    },
+    {
+      "kind": "body",
+      "caption": "把用户的话当作功能列表",
+      "figureKeyword": "problem-framing",
+      "narration": "用户说什么我就做什么，没意识到他们说的是问题，不是答案。"
+    },
+    {
+      "kind": "body",
+      "caption": "把孤独当作专注的代价",
+      "figureKeyword": "thinking",
+      "narration": "一个人写完所有代码，但没有人和我讨论方向，慢慢就走偏了。"
+    },
+    {
+      "kind": "body",
+      "caption": "现在每周强制和三个用户聊",
+      "figureKeyword": "team-alignment",
+      "narration": "现在每周固定和三个真实用户聊半小时，比写代码更影响下一步。"
+    }
+  ]
+}

package/skills/voxflow-slice/templates/incident-review/deck.json

@@ -0,0 +1,37 @@
+{
+  "header": "线上事故 · 复盘",
+  "seriesTitle": "一次三小时的宕机",
+  "seriesTagline": "我们认了，下次不会再这样",
+  "theme": "brutalist",
+  "cards": [
+    {
+      "kind": "title",
+      "title": ["3 小时宕机", "我们的复盘"],
+      "narration": "周二晚上九点，我们的服务挂了三个小时。这是怎么发生的。"
+    },
+    {
+      "kind": "body",
+      "caption": "一次例行发布触发了 OOM",
+      "figureKeyword": "risk-guardrail",
+      "narration": "晚上 21:08 上线了一个新功能，新代码在峰值流量下吃掉了所有内存。"
+    },
+    {
+      "kind": "body",
+      "caption": "告警没响，监控盲区",
+      "figureKeyword": "evidence-board",
+      "narration": "OOM 杀死了进程但没杀掉容器，健康检查仍然通过，告警延迟了 40 分钟。"
+    },
+    {
+      "kind": "body",
+      "caption": "回滚花了一小时，因为没演练过",
+      "figureKeyword": "timeline-review",
+      "narration": "我们有回滚脚本，但从来没真正跑过，第一次跑发现配置漂移了，又花一小时手动修。"
+    },
+    {
+      "kind": "body",
+      "caption": "三件改变：金丝雀、内存告警、月度演练",
+      "figureKeyword": "learning-loop",
+      "narration": "下个版本起：所有发布走 5% 金丝雀；监控加内存阈值；每月演练一次回滚。"
+    }
+  ]
+}