voxflow 1.15.1 → 1.15.2

package/lib/commands/slice.js

@@ -205,11 +205,14 @@ async function handle(args) {
         const sliceRender = require('./slice-render');
         return sliceRender.handle(args.slice(1));
     }
-    // `voxflow slice preview <deck.json>` — localhost HTML page with a
-    // midpoint-frame still per card (no mp4, fraction of the render cost).
-    if (args.length > 0 && args[0] === 'preview') {
-        const slicePreview = require('./slice-preview');
-        return slicePreview.handle(args.slice(1));
+    // `voxflow slice preview <deck.json>` — alias for `slice stage`. The
+    // earlier static-thumbnail Phase 0 preview was strictly less capable
+    // than stage's hot-reload edit workflow (no file watcher, no live
+    // updates, no version history), so we route both to the same handler
+    // and keep "preview" as a discoverable name for new users.
+    if (args.length > 0 && (args[0] === 'preview')) {
+        const sliceStage = require('./slice-stage');
+        return sliceStage.handle(args.slice(1));
     }
 
     const { parseFlag, runWithRetry } = require('../core/args');

package/package.json

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

package/lib/commands/slice-preview.js

@@ -1,266 +0,0 @@
-'use strict';
-
-/**
- * `voxflow slice preview <deck.json>` — open a localhost HTML page that
- * shows a midpoint-frame still of every card in the deck so users can
- * see the cards before paying the full render cost (~30s for 20s video).
- *
- * Renders N PNG stills via @remotion/renderer.renderStill() at the
- * midpoint frame of each card, caches them under /tmp/, then serves a
- * minimal HTML page with the grid + auto-opens the browser. The server
- * stays alive until Ctrl+C.
- *
- * Shares buildInputProps / resolveServeUrl / chromeBinaryExists with
- * slice-render so behavior is consistent between preview and render.
- *
- * No `meta` export — reached via `slice.js` dispatch (`voxflow slice
- * preview <path>`), so it stays out of the registry parity test.
- */
-
-const fs = require('node:fs');
-const http = require('node:http');
-const path = require('node:path');
-const crypto = require('node:crypto');
-const os = require('node:os');
-
-const open = require('open').default;
-
-const { validatePaperSlideDeck, isV2LayoutTreeDeck } = require('../internal/deck-validator');
-const {
-    buildInputProps,
-    resolveServeUrl,
-    chromeBinaryExists,
-    THEME_TO_DECK_ID,
-    DEFAULT_THEME,
-} = require('./slice-render');
-
-const FPS = 30;
-const DEFAULT_PORT = 5555;
-const PREVIEW_WIDTH = 540; // half of 1080 — stills don't need full-res for thumbnails
-
-function deckHash(deck) {
-    // 8-char hash so the cache dir is short but unique per deck content.
-    // If the deck changes, we want fresh stills; if it doesn't, reuse cache.
-    return crypto.createHash('sha1').update(JSON.stringify(deck)).digest('hex').slice(0, 8);
-}
-
-function cardMidpointFrame(deck, cardIndex) {
-    // Composition plays cards sequentially. To get card K's midpoint
-    // frame we sum previous durations then add half of this one.
-    let acc = 0;
-    for (let i = 0; i < cardIndex; i++) {
-        acc += deck.cards[i].durationSec || 4;
-    }
-    const here = deck.cards[cardIndex].durationSec || 4;
-    return Math.floor((acc + here / 2) * FPS);
-}
-
-async function findFreePort(start) {
-    return new Promise((resolve) => {
-        const probe = http.createServer();
-        probe.unref();
-        probe.on('error', () => resolve(findFreePort(start + 1)));
-        probe.listen(start, () => {
-            const port = probe.address().port;
-            probe.close(() => resolve(port));
-        });
-    });
-}
-
-function escapeHtml(s) {
-    return String(s ?? '').replace(/[&<>"']/g, (c) => ({
-        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
-    }[c]));
-}
-
-function renderHtml(deck, port) {
-    const title = escapeHtml(deck.seriesTitle || deck.header || 'Preview');
-    const meta = `${deck.cards.length} cards · theme: ${escapeHtml(deck.theme)} · 1080×1920`;
-    const cards = deck.cards.map((c, i) => {
-        const label = c.kind === 'title'
-            ? (Array.isArray(c.title) ? c.title.join(' / ') : '')
-            : (c.caption || '');
-        return `<figure class="card">
-            <img src="/still/${i}.png" alt="Card ${i + 1}" loading="lazy">
-            <figcaption><span class="idx">${i + 1}</span> <span class="kind">${escapeHtml(c.kind)}</span> ${escapeHtml(label)}</figcaption>
-        </figure>`;
-    }).join('\n        ');
-
-    return `<!DOCTYPE html>
-<html lang="zh">
-<head>
-    <meta charset="utf-8">
-    <title>VoxFlow Slice · ${title}</title>
-    <style>
-        :root { color-scheme: light; }
-        body { font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", sans-serif; margin: 0; padding: 40px 48px 64px; background: #faf6ee; color: #1b1815; }
-        h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 6px; }
-        .meta { color: #7a6f5f; font-size: 13px; margin-bottom: 28px; }
-        .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 20px 16px; }
-        .card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
-        .card img { width: 100%; aspect-ratio: 9/16; background: #000; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 4px 14px rgba(60,40,20,0.07); display: block; }
-        .card figcaption { font-size: 12px; line-height: 1.45; color: #4d4339; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
-        .idx { font-variant-numeric: tabular-nums; color: #b8a994; font-weight: 600; }
-        .kind { display: inline-block; padding: 1px 6px; border-radius: 3px; background: #efe7d6; color: #6e5f49; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
-        .cmd { font-family: ui-monospace, "SF Mono", monospace; background: #2b2520; color: #faf6ee; padding: 14px 18px; border-radius: 6px; font-size: 13px; margin-top: 32px; user-select: all; }
-        .cmd .hint { color: #9c8e75; font-size: 11px; display: block; margin-bottom: 6px; }
-    </style>
-</head>
-<body>
-    <h1>${title}</h1>
-    <div class="meta">${meta}</div>
-    <div class="grid">
-        ${cards}
-    </div>
-    <div class="cmd">
-        <span class="hint">Satisfied? Render to mp4:</span>
-        voxflow slice render &lt;your-deck.json&gt; --output out.mp4
-    </div>
-</body>
-</html>`;
-}
-
-async function preview(opts) {
-    const deckPath = path.resolve(opts.deckPath);
-    if (!fs.existsSync(deckPath)) {
-        throw new Error(`Deck file not found: ${deckPath}`);
-    }
-    const raw = fs.readFileSync(deckPath, 'utf8');
-    let deck;
-    try {
-        deck = JSON.parse(raw);
-    } catch (err) {
-        throw new Error(`Could not parse deck JSON: ${err.message}`);
-    }
-
-    if (isV2LayoutTreeDeck(deck)) {
-        throw new Error(
-            'V2 LayoutTree decks are not yet supported by offline preview. ' +
-            'Use voxflow.studio/apps/slice for V2 decks or downgrade to V1 shape.'
-        );
-    }
-    validatePaperSlideDeck(deck);
-
-    const theme = deck.theme || DEFAULT_THEME;
-    const compId = THEME_TO_DECK_ID[theme];
-    if (!compId) {
-        throw new Error(
-            `Unknown theme "${theme}". Valid: ${Object.keys(THEME_TO_DECK_ID).join(', ')}`
-        );
-    }
-
-    const serveUrl = resolveServeUrl();
-    const inputProps = buildInputProps(deck);
-    const cacheDir = path.join(os.tmpdir(), `voxflow-preview-${deckHash(deck)}`);
-    fs.mkdirSync(cacheDir, { recursive: true });
-
-    // Lazy require — mirrors slice-render.js — keeps `voxflow login` etc. fast
-    // for users who never trigger Remotion.
-    const { selectComposition, renderStill } = require('@remotion/renderer');
-
-    const coldStart = !chromeBinaryExists();
-    if (coldStart) {
-        console.log('  First-run: Remotion will download chrome-headless-shell (~90 MB).');
-    }
-
-    console.log(`[slice preview] theme: ${theme}`);
-    console.log(`[slice preview] composition: ${compId}`);
-    console.log(`[slice preview] cards: ${deck.cards.length}`);
-
-    const composition = await selectComposition({
-        serveUrl,
-        id: compId,
-        inputProps,
-    });
-
-    const t0 = Date.now();
-    const cachedCount = deck.cards.filter((_, i) =>
-        fs.existsSync(path.join(cacheDir, `card-${i}.png`))
-    ).length;
-    if (cachedCount === deck.cards.length) {
-        console.log(`[slice preview] all ${cachedCount} stills cached — skipping render`);
-    } else {
-        for (let i = 0; i < deck.cards.length; i++) {
-            const outPath = path.join(cacheDir, `card-${i}.png`);
-            if (fs.existsSync(outPath)) continue;
-            const frame = cardMidpointFrame(deck, i);
-            process.stdout.write(`\r[slice preview] rendering still ${i + 1}/${deck.cards.length}...`);
-            await renderStill({
-                composition,
-                serveUrl,
-                inputProps,
-                frame,
-                output: outPath,
-                imageFormat: 'png',
-                scale: PREVIEW_WIDTH / 1080, // halve the resolution for snappier renders
-            });
-        }
-        const elapsed = ((Date.now() - t0) / 1000).toFixed(1);
-        process.stdout.write(`\r[slice preview] ${deck.cards.length} stills rendered in ${elapsed}s\n`);
-    }
-
-    const port = await findFreePort(DEFAULT_PORT);
-    const html = renderHtml(deck, port);
-
-    const server = http.createServer((req, res) => {
-        const urlPath = (req.url || '/').split('?')[0];
-        if (urlPath === '/' || urlPath === '/index.html') {
-            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-            res.end(html);
-            return;
-        }
-        const m = /^\/still\/(\d+)\.png$/.exec(urlPath);
-        if (m) {
-            const idx = Number(m[1]);
-            const file = path.join(cacheDir, `card-${idx}.png`);
-            if (!fs.existsSync(file)) {
-                res.writeHead(404);
-                res.end('still not found');
-                return;
-            }
-            res.writeHead(200, { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=600' });
-            fs.createReadStream(file).pipe(res);
-            return;
-        }
-        res.writeHead(404);
-        res.end('Not found');
-    });
-
-    await new Promise((resolve) => server.listen(port, '127.0.0.1', resolve));
-    const url = `http://localhost:${port}`;
-    console.log(`[slice preview] http://localhost:${port}  (Ctrl+C to stop)`);
-
-    try {
-        await open(url);
-    } catch {
-        // open failed — user can paste the URL manually
-    }
-
-    process.stdin.resume();
-    process.on('SIGINT', () => {
-        console.log('\n[slice preview] stopped');
-        server.close(() => process.exit(0));
-    });
-}
-
-async function handle(args) {
-    const { parseFlag } = require('../core/args');
-    const positional = args.find((a) => !a.startsWith('-'));
-    parseFlag(args, '--output', '-o'); // parsed-but-ignored for symmetry with `slice render`
-    if (!positional) {
-        console.error('Usage: voxflow slice preview <deck.json>');
-        process.exit(1);
-    }
-    try {
-        await preview({ deckPath: positional });
-    } catch (err) {
-        console.error(`\nslice preview failed: ${err.message}`);
-        if (process.env.VOXFLOW_DEBUG) console.error(err.stack);
-        process.exit(1);
-    }
-}
-
-module.exports = {
-    preview,
-    handle,
-};