@ignix-social/editor 0.1.5 → 0.1.6

package/NOTICE

@@ -83,3 +83,10 @@ PP-OCRv3 text detector (ONNX from OpenCV Zoo, opencv/text_detection_ppocr@c299e8
 CLIP ViT-B/32 (openai/clip-vit-base-patch32; ONNX export and tokenizer files from
   Xenova/clip-vit-base-patch32@d15189d) — MIT License, Copyright (c) 2021 OpenAI.
   The vision model is stored in two parts that Ignix Editor joins and checks.
+
+Inter (font, from @fontsource/inter) — SIL Open Font License 1.1, Copyright (c) 2016
+  The Inter Project Authors. Copied into the projects Ignix Creator's templates render
+  (src/creator), unmodified.
+
+Ignix Creator's composition templates (src/creator) were ported from Ignix Creator's own
+  code (Copyright (c) 2026 Ignix); no Remotion code is included.

package/README.md

@@ -8,7 +8,7 @@ npx @ignix-social/editor init my-reel  # creates ~/ignix-videos/my-reel
 npx @ignix-social/editor render ~/ignix-videos/my-reel
 ```
 
-Commands: `doctor`, `init`, `check`, `snapshot`, `render`, `preview`, `transcribe`, `faces`, `ffmpeg`, `ffprobe`, `skills add`, `serve`, `help`.
+Commands: `doctor`, `init`, `check`, `snapshot`, `render`, `preview`, `transcribe`, `faces`, `ffmpeg`, `ffprobe`, `skills add`, `fetch`, `serve`, `creator-job`, `help`.
 
 - Everything runs locally; your footage never leaves your machine.
 - ffmpeg (GPL build, without libx264) and whisper.cpp are downloaded once per machine into `~/.ignix-editor`, checked against their SHA-256. Chrome for rendering is downloaded once from Google's official channel.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ignix-social/editor",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Ignix Editor: render HTML video compositions (reels, edits, clips) on your own computer. Based on HyperFrames.",
   "license": "Apache-2.0",
   "type": "module",
@@ -27,6 +27,7 @@
     "test": "node --test test/*.test.mjs"
   },
   "dependencies": {
+    "@fontsource/inter": "^5.3.0",
     "@fontsource/montserrat": "^5.3.0",
     "@hono/node-server": "^2.0.5",
     "@puppeteer/browsers": "^3.2.2",

package/src/analysis/runtime.mjs

@@ -113,3 +113,16 @@ export async function session(name, log = () => {}) {
 }
 
 export const RUNTIME_VERSION = manifest.runtimeVersion;
+
+/** Lo que falta del análisis en este ordenador, con su tamaño de descarga (sin descargar nada). */
+export function analysisMissing() {
+  const out = [];
+  const rt = manifest.runtime[PLATFORM];
+  const rtDir = join(HOME, 'runtime', `onnxruntime-${manifest.runtimeVersion}`, PLATFORM);
+  if (!process.env.IGNIX_EDITOR_ORT && rt && !existsSync(join(rtDir, 'onnxruntime-node', 'package.json'))) out.push({ item: 'runtime', size: rt.size });
+  for (const [name, entry] of Object.entries(manifest.models)) {
+    if (process.env.IGNIX_EDITOR_MODELS) continue;
+    if (!existsSync(join(HOME, 'models', 'analysis', manifest.version, entry.file))) out.push({ item: name, size: entry.size });
+  }
+  return out;
+}

package/src/binaries.mjs

@@ -3,7 +3,7 @@
 // descarga desde media.ignix.social con su sha256 comprobado. Chrome lo gestiona el motor
 // (descarga oficial de Google la primera vez).
 import { createHash } from 'node:crypto';
-import { chmodSync, createWriteStream, existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from 'node:fs';
+import { chmodSync, createReadStream, createWriteStream, existsSync, mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs';
 import { Readable } from 'node:stream';
 import { pipeline } from 'node:stream/promises';
 import { homedir } from 'node:os';
@@ -62,9 +62,9 @@ export async function ensureTool(name, log = () => {}) {
 
 /** Modelos de whisper (ggml, MIT), en ~/.ignix-editor/models. */
 export const WHISPER_MODELS = {
-  medium: { file: 'ggml-medium.bin', size: 1533763059 },
-  small: { file: 'ggml-small.bin', size: 487601967 },
-  base: { file: 'ggml-base.bin', size: 147951465 },
+  medium: { file: 'ggml-medium.bin', size: 1533763059, sha256: '6c14d5adee5f86394037b4e4e8b59f1673b6cee10e3cf0b11bbdbee79c156208' },
+  small: { file: 'ggml-small.bin', size: 487601967, sha256: '1be3a9b2063867b937e64e2ec7483364a79917e157fa98c5d94b5c1fffea987b' },
+  base: { file: 'ggml-base.bin', size: 147951465, sha256: '60ed5bc3dd14eea856493d334349b405782ddcaf0028d4b5df4088345fba2efe' },
 };
 
 export async function ensureWhisperModel(model = 'medium', log = () => {}) {
@@ -78,6 +78,19 @@ export async function ensureWhisperModel(model = 'medium', log = () => {}) {
   const res = await fetch(`https://huggingface.co/ggerganov/whisper.cpp/resolve/main/${m.file}`);
   if (!res.ok) throw new Error(`Could not download the ${model} model: ${res.status}`);
   await pipeline(Readable.fromWeb(res.body), createWriteStream(`${dest}.part`));
+  // El sha256 es el que publica Hugging Face para ese fichero (su oid de LFS).
+  const h = createHash('sha256');
+  await pipeline(createReadStream(`${dest}.part`), h);
+  if (h.digest('hex') !== m.sha256) {
+    rmSync(`${dest}.part`, { force: true });
+    throw new Error(`The downloaded ${model} model does not match its SHA-256. Not using it.`);
+  }
   renameSync(`${dest}.part`, dest);
   return dest;
 }
+
+/** Ruta del modelo de whisper si ya está descargado (sin descargar nada). */
+export const whisperModelPath = (model) => (WHISPER_MODELS[model] ? join(HOME, 'models', WHISPER_MODELS[model].file) : null);
+
+/** Tamaño de descarga de un binario en esta plataforma (0 si no hay descarga). */
+export const toolSize = (name) => manifest.platforms[PLATFORM]?.[name]?.size ?? 0;

package/src/cli.mjs

@@ -10,15 +10,16 @@ import { fileURLToPath } from 'node:url';
 import { HOME, PLATFORM, TOOLS, ensureTool, ensureWhisperModel, findTool } from './binaries.mjs';
 import { linkMedia, prepare, projectHtml } from './prepare.mjs';
 import { validateHtml } from './validate.mjs';
-import { loudness, hasAudio, normalizeLoudness } from './audio.mjs';
+import { engineEnv, renderProject, runEngine } from './engine.mjs';
 import { alignToScript, transcribe } from './transcribe.mjs';
 import { faces as detectFaces } from './analysis/detect.mjs';
 import { frames, probe } from './analysis/media.mjs';
 import { serve } from './analysis/serve.mjs';
+import { creatorJob } from './creator/job.mjs';
+import { fetchAll } from './fetch.mjs';
 
 const PKG_DIR = join(dirname(fileURLToPath(import.meta.url)), '..');
 const PKG = JSON.parse(readFileSync(join(PKG_DIR, 'package.json'), 'utf8'));
-const ENGINE = join(PKG_DIR, 'vendor', 'hyperframes', 'bin', 'hyperframes.mjs');
 const UPSTREAM = JSON.parse(readFileSync(join(PKG_DIR, 'vendor', 'hyperframes', 'UPSTREAM.json'), 'utf8'));
 export const VIDEOS_DIR = join(homedir(), 'ignix-videos');
 
@@ -58,38 +59,6 @@ function parseArgs(argv, ours) {
   return { pos, opts, rest };
 }
 
-// ── el motor
-async function engineEnv() {
-  const env = {
-    ...process.env,
-    HYPERFRAMES_NO_TELEMETRY: '1',
-    DO_NOT_TRACK: '1',
-    HYPERFRAMES_NO_UPDATE_CHECK: '1',
-    HYPERFRAMES_NO_AUTO_INSTALL: '1',
-    HYPERFRAMES_SKIP_SKILLS: '1',
-    HYPERFRAMES_FONT_CACHE_DIR: join(HOME, 'cache', 'fonts'),
-  };
-  const ffmpeg = await ensureTool('ffmpeg', log);
-  const ffprobe = await ensureTool('ffprobe', log);
-  env.HYPERFRAMES_FFMPEG_PATH = ffmpeg;
-  env.HYPERFRAMES_FFPROBE_PATH = ffprobe;
-  const whisper = findTool('whisper');
-  if (whisper.path) env.HYPERFRAMES_WHISPER_PATH = whisper.path;
-  // Por si alguna parte del motor llama a «ffmpeg» por su nombre: los nuestros van primero en el PATH.
-  const shim = join(HOME, 'shim', PLATFORM);
-  rmSync(shim, { recursive: true, force: true });
-  mkdirSync(shim, { recursive: true });
-  linkMedia(ffmpeg, join(shim, TOOLS.ffmpeg.file));
-  linkMedia(ffprobe, join(shim, TOOLS.ffprobe.file));
-  env.PATH = `${shim}${process.platform === 'win32' ? ';' : ':'}${env.PATH ?? ''}`;
-  return { env, ffmpeg, ffprobe };
-}
-
-function runEngine(args, env, cwd) {
-  const r = spawnSync(process.execPath, [ENGINE, ...args], { stdio: 'inherit', env, cwd });
-  return r.status ?? 1;
-}
-
 // ── comprobaciones propias
 function validateProject(dir) {
   const issues = projectHtml(dir).flatMap(validateHtml);
@@ -172,7 +141,7 @@ const commands = {
     const errors = validateProject(dir);
     const { build, snapped } = prepare(dir);
     if (snapped) log(`• ${snapped} time(s) snapped to the nearest frame`);
-    const { env } = await engineEnv();
+    const { env } = await engineEnv(log);
     const code = runEngine(['check', build, ...rest], env, dir);
     process.exit(errors ? 1 : code);
   },
@@ -181,7 +150,7 @@ const commands = {
     const { pos, rest } = parseArgs(argv, { output: 'str' });
     const dir = projectDir(pos[0]);
     const { build } = prepare(dir);
-    const { env } = await engineEnv();
+    const { env } = await engineEnv(log);
     const out = resolve(dir, 'snapshots');
     rmSync(out, { recursive: true, force: true });
     process.exit(runEngine(['snapshot', build, '-o', out, '--describe', 'false', ...rest], env, dir));
@@ -191,19 +160,10 @@ const commands = {
     const { pos, opts, rest } = parseArgs(argv, { output: 'str', lufs: 'str', normalize: 'bool', force: 'bool' });
     const dir = projectDir(pos[0]);
     if (validateProject(dir) && !opts.force) fail('Fix the errors above before rendering (or --force if you know what you are doing).');
-    const { build, snapped } = prepare(dir);
-    if (snapped) log(`• ${snapped} time(s) snapped to the nearest frame`);
-    const { env, ffmpeg, ffprobe } = await engineEnv();
     const output = resolve(opts.output ?? join(dir, 'renders', `${basename(dir)}.mp4`));
-    mkdirSync(dirname(output), { recursive: true });
-    const raw = join(build, 'raw.mp4');
-    const code = runEngine(['render', build, '-o', raw, ...rest], env, dir);
-    if (code !== 0 || !existsSync(raw)) fail('The render failed (see the messages above).');
-    if (opts.normalize !== false && hasAudio(ffprobe, raw)) {
-      const lufs = Number(opts.lufs ?? -14);
-      const r = normalizeLoudness(ffmpeg, raw, output, { lufs });
-      log(`✓ Loudness: ${r.before.toFixed(1)} → ${loudness(ffmpeg, output)?.toFixed(1)} LUFS`);
-    } else cpSync(raw, output);
+    const r = await renderProject(dir, output, { lufs: opts.lufs, normalize: opts.normalize, engineArgs: rest, log });
+    if (r.snapped) log(`• ${r.snapped} time(s) snapped to the nearest frame`);
+    if (r.loudness) log(`✓ Loudness: ${r.loudness.before.toFixed(1)} → ${r.loudness.after?.toFixed(1)} LUFS`);
     console.log(output);
   },
 
@@ -211,7 +171,7 @@ const commands = {
     const { pos, rest } = parseArgs(argv, {});
     const dir = projectDir(pos[0]);
     const { build } = prepare(dir);
-    const { env } = await engineEnv();
+    const { env } = await engineEnv(log);
     log('Previewing the working copy: if you change the project, run this command again.');
     process.exit(runEngine(['preview', build, ...rest], env, dir));
   },
@@ -284,6 +244,27 @@ const commands = {
     } else console.log(json);
   },
 
+  // El proceso de render de Ignix Creator: una carpeta de trabajo, eventos JSON (ADR-0023 E2).
+  async ['creator-job'](argv) {
+    await creatorJob(argv);
+  },
+
+  // Todo lo que se descarga, de una vez (Ignix Creator lo lanza al instalar el motor).
+  async fetch(argv) {
+    const { opts } = parseArgs(argv, { json: 'bool', whisper: 'str', analysis: 'bool' });
+    try {
+      const r = await fetchAll({ whisper: opts.whisper ?? 'small', analysis: opts.analysis !== false, json: !!opts.json, log });
+      if (opts.json) process.stdout.write(`${JSON.stringify({ t: 'done', ...r })}\n`);
+      else log(r.downloaded.length ? `✓ Downloaded ${r.downloaded.join(', ')}` : '✓ Everything was already here');
+      process.exit(0);
+    } catch (e) {
+      log(`${e?.stack ?? e}`);
+      const code = e?.code === 'invalid_args' ? 'invalid_args' : /SHA-256/.test(e?.message ?? '') ? 'integrity_failed' : 'network';
+      if (opts.json) process.stdout.write(`${JSON.stringify({ t: 'error', code })}\n`);
+      process.exit(1);
+    }
+  },
+
   // Servicio local para Ignix Creator: líneas JSON por stdin/stdout (ADR-0023).
   async serve() {
     await serve({ version: PKG.version, engine: UPSTREAM.version });
@@ -325,6 +306,7 @@ const commands = {
   ignix-editor faces <video> [--every 0.2] [-o faces.json]   where the face is, smoothed
   ignix-editor ffmpeg|ffprobe <args>           Ignix Editor's own ffmpeg
   ignix-editor skills add                      installs the skill for Claude
+  ignix-editor fetch [--whisper small] [--no-analysis]   downloads everything up front (each file SHA-256-checked)
   ignix-editor serve                           local service for Ignix Creator (JSON lines on stdin/stdout)
 
 The folder defaults to the current one. Based on HyperFrames (Apache-2.0) by HeyGen, Inc. See NOTICE.`);

package/src/creator/build.mjs

@@ -0,0 +1,344 @@
+// Una composición de Ignix Creator (su CompositionSpec ya validado) → un proyecto de Ignix Editor
+// listo para renderizar: los medios en assets/ con sus tiempos escritos en el HTML (vídeos,
+// audios, imágenes), las fuentes, la tabla de anchos de carácter para ajustar textos y el
+// dibujante de las plantillas (runtime/creator.js). ADR-0023 E2.
+import { spawnSync } from 'node:child_process';
+import { cpSync, existsSync, mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, extname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';
+import * as fontkit from 'fontkit';
+import { linkMedia } from '../prepare.mjs';
+import { INTER_DIR, INTER_FACES } from './fit.mjs';
+import { probe } from '../analysis/media.mjs';
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const requireHere = createRequire(import.meta.url);
+const PKG_DIR = join(HERE, '..', '..');
+export const TRANSITION_SEC = 0.4;
+const FORMAT_SIZE = { '9:16': [1080, 1920], '1:1': [1080, 1080], '4:5': [1080, 1350], '16:9': [1920, 1080] };
+const SAFE = { '9:16': { top: 250, bottom: 440, side: 96 }, '4:5': { top: 110, bottom: 150, side: 90 }, '1:1': { top: 90, bottom: 110, side: 90 }, '16:9': { top: 80, bottom: 110, side: 140 } };
+const PALETTES = {
+  clean: { bg: ['#f8f5f1', '#ece4da'], text: '#17110d', muted: '#5b4d42', overlay: '255,255,255', glow: 0.25 },
+  bold: { bg: ['#000000', '#101010'], text: '#ffffff', muted: '#d0d0d0', overlay: '0,0,0', glow: 0.22 },
+  ember: { bg: ['#140c08', '#2b1409'], text: '#fff7f0', muted: '#e2cfbf', overlay: '10,6,4', glow: 0.55 },
+};
+const DUCKED = 0.22;
+const DUCK_RAMP_SEC = 0.18;
+
+// ── tiempos (los mismos que Creator) ─────────────────────────────────────────
+export function talkTimeline(segments, fps = 30) {
+  let at = 0;
+  return segments.map((s) => {
+    const frames = Math.max(1, Math.round((s.srcOut - s.srcIn) * fps));
+    const r = { srcIn: s.srcIn, srcOut: s.srcOut, startFrame: at, frames, outStart: at / fps };
+    at += frames;
+    return r;
+  });
+}
+export function totalSeconds(c) {
+  if (c.talk) {
+    const last = talkTimeline(c.talk.segments).at(-1);
+    return last ? last.outStart + last.frames / 30 : 0;
+  }
+  let total = 0;
+  c.scenes.forEach((s, i) => {
+    total += s.durationSec;
+    if (i > 0 && s.transition !== 'cut') total -= TRANSITION_SEC;
+  });
+  return Math.max(0, total);
+}
+export function sceneStarts(c) {
+  const starts = [];
+  let t = 0;
+  c.scenes.forEach((s, i) => {
+    if (i > 0 && s.transition !== 'cut') t -= TRANSITION_SEC;
+    starts.push(t);
+    t += s.durationSec;
+  });
+  return starts;
+}
+export function speechIntervals(c) {
+  const out = c.voice.map((v) => ({ start: v.startSec, end: v.startSec + v.durationSec }));
+  if (c.talk && c.talk.volume > 0) out.push({ start: 0, end: totalSeconds(c) });
+  let t = 0;
+  c.scenes.forEach((s, i) => {
+    if (i > 0 && s.transition !== 'cut') t -= TRANSITION_SEC;
+    if (s.visual.kind === 'video' && s.visual.withSound && s.visual.volume > 0) out.push({ start: t, end: t + s.durationSec });
+    t += s.durationSec;
+  });
+  out.sort((a, b) => a.start - b.start);
+  const merged = [];
+  for (const x of out) {
+    const last = merged.at(-1);
+    if (last && x.start <= last.end + 0.25) last.end = Math.max(last.end, x.end);
+    else merged.push({ ...x });
+  }
+  return merged;
+}
+
+/** El volumen de la música en el instante t: fundidos y bajada bajo la voz (como Creator). */
+export function musicLevel(spec, total, t) {
+  const a = spec.audio;
+  const lin = (x, [x0, x1], [y0, y1]) => (x <= x0 ? y0 : x >= x1 ? y1 : y0 + ((y1 - y0) * (x - x0)) / (x1 - x0));
+  const inS = Math.max(1 / 30, a.fadeInSec);
+  const outS = Math.max(1 / 30, a.fadeOutSec);
+  const fade = Math.min(lin(t, [0, inS], [0, 1]), lin(t, [total - outS, total], [1, 0]));
+  let duck = 1;
+  if (a.duck) {
+    for (const iv of speechIntervals(spec)) {
+      if (t < iv.start - DUCK_RAMP_SEC || t > iv.end + DUCK_RAMP_SEC * 2) continue;
+      const down = lin(t, [iv.start - DUCK_RAMP_SEC, iv.start], [1, DUCKED]);
+      const up = lin(t, [iv.end, iv.end + DUCK_RAMP_SEC * 2], [DUCKED, 1]);
+      duck = Math.min(duck, Math.max(down, t >= iv.end ? up : DUCKED));
+    }
+  }
+  return a.volume * duck * fade;
+}
+
+// ── HTML ─────────────────────────────────────────────────────────────────────
+const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const attrs = (o) =>
+  Object.entries(o)
+    .filter(([, v]) => v !== undefined && v !== null && v !== false)
+    .map(([k, v]) => (v === true ? k : `${k}="${esc(v)}"`))
+    .join(' ');
+const css = (o) =>
+  Object.entries(o)
+    .map(([k, v]) => `${k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)}:${v}`)
+    .join(';');
+const n6 = (x) => +Number(x).toFixed(6);
+
+/** Puntos de volumen como automatización del motor (t desde el inicio del propio clip). */
+function lane(points) {
+  return JSON.stringify({ version: 1, lanes: [{ target: 'volume', points: points.map(([t, v]) => ({ t: n6(t), v: +Number(v).toFixed(4) })) }] });
+}
+/** Fundidos de 8 ms en cada corte (que no chasque). */
+const clickless = (dur, v = 1) => lane([[0, 0], [0.008, v], [Math.max(0.009, dur - 0.016), v], [dur, 0]]);
+
+/** Anchos de carácter (a 1 px) de Inter 400/600/800 para todo el texto de la pieza. */
+function glyphTable(texts) {
+  const chars = new Set('?.,0123456789 VS✓“'.split(''));
+  for (const t of texts) for (const ch of `${t}${t.toUpperCase()}`) chars.add(ch);
+  const out = {};
+  for (const w of [400, 600, 800]) {
+    const f = fontkit.openSync(join(INTER_DIR, `inter-latin-${w}-normal.woff2`));
+    const ext = fontkit.openSync(join(INTER_DIR, `inter-latin-ext-${w === 600 ? 400 : w}-normal.woff2`));
+    out[w] = {};
+    for (const ch of chars) {
+      const cp = ch.codePointAt(0);
+      const font = f.hasGlyphForCodePoint(cp) ? f : ext.hasGlyphForCodePoint(cp) ? ext : f;
+      out[w][ch] = +(font.glyphForCodePoint(cp).advanceWidth / font.unitsPerEm).toFixed(5);
+    }
+  }
+  return out;
+}
+function textsOf(spec) {
+  const t = [spec.brand.name ?? '', spec.brand.handle ?? ''];
+  for (const s of spec.scenes) {
+    const x = s.text;
+    if (!x) continue;
+    t.push(x.headline, x.body ?? '', x.kicker ?? '', ...x.items, ...x.lines.map((l) => l.text), ...x.data.flatMap((d) => [d.label, d.display ?? '']));
+    if (x.compare) t.push(x.compare.left, x.compare.right, ...x.compare.rows.flatMap((r) => [r.a, r.b]));
+  }
+  for (const c of spec.captions) t.push(c.text, ...c.words.map((w) => w.text));
+  if (spec.talk) for (const o of spec.talk.overlays) t.push(o.text);
+  return t;
+}
+
+/**
+ * Prepara el proyecto en `dir`. `media` = { [assetRef]: { path, kind, w?, h? } } (los ficheros
+ * del trabajo). Devuelve la duración y el id de la composición.
+ */
+export function buildProject({ spec, media, dir, ffmpeg, ffprobe }) {
+  const [W, H] = FORMAT_SIZE[spec.format];
+  const fps = spec.fps;
+  const total = totalSeconds(spec);
+  const duration = +(Math.max(1, Math.round(total * fps)) / fps).toFixed(6);
+  const id = 'creator';
+  mkdirSync(join(dir, 'assets', 'fonts'), { recursive: true });
+  mkdirSync(join(dir, 'assets', 'media'), { recursive: true });
+  // Medios: un enlace por uso simultáneo (el motor no deja el mismo fichero dos veces a la vez).
+  let k = 0;
+  const durations = new Map();
+  const place = (ref, tag = '') => {
+    const m = media[ref];
+    if (!m || !existsSync(m.path)) throw new Error(`missing input ${ref}`);
+    const name = `assets/media/m${++k}${tag}${extname(m.path).toLowerCase()}`;
+    linkMedia(m.path, join(dir, name));
+    return name;
+  };
+  const lengthOf = (ref) => {
+    if (!durations.has(ref)) durations.set(ref, probe(ffprobe, media[ref].path).duration);
+    return durations.get(ref);
+  };
+  let track = 0;
+  const body = [];
+  const data = {
+    id,
+    fps,
+    width: W,
+    height: H,
+    duration,
+    style: spec.style,
+    pal: PALETTES[spec.style] ?? PALETTES.ember,
+    accent: spec.brand.accent,
+    brand: { name: spec.brand.name ?? null, handle: spec.brand.handle ?? null },
+    safe: SAFE[spec.format],
+    transitionSec: TRANSITION_SEC,
+    scenes: [],
+    captions: spec.captions,
+    captionStyle: spec.captionStyle,
+    captionPosition: spec.captionPosition,
+    captionColor: spec.captionColor ?? null,
+    talk: null,
+    glyphs: glyphTable(textsOf(spec)),
+  };
+  const fillCss = { position: 'absolute', left: '0', top: '0', width: '100%', height: '100%' };
+
+  // ── la charla (el vídeo de la persona)
+  if (spec.talk) {
+    const talk = spec.talk;
+    const timeline = talkTimeline(talk.segments, fps);
+    const contain = talk.fit === 'contain';
+    const anchor = !contain && talk.anchorX !== undefined ? `${Math.round(talk.anchorX * 1000) / 10}% 50%` : '50% 50%';
+    const src = place(talk.asset);
+    const under = contain ? place(talk.asset, 'u') : null;
+    const voiceSrc = talk.voice ? place(talk.voice) : null;
+    const segs = [];
+    const vids = [];
+    timeline.forEach((seg, i) => {
+      const dur = n6(seg.frames / fps);
+      const start = n6(seg.startFrame / fps);
+      if (under) vids.push(`<video ${attrs({ id: `talk-u${i}`, src: under, muted: true, playsinline: true, 'data-start': start, 'data-duration': dur, 'data-media-start': n6(seg.srcIn), 'data-track-index': track++ })} style="${css({ ...fillCss, objectFit: 'cover', filter: 'blur(20px) brightness(0.8) saturate(1.15)', transform: 'scale(1.2)' })}"></video>`);
+      const keepSound = talk.volume > 0 && !voiceSrc;
+      vids.push(`<video ${attrs({ id: `talk-v${i}`, src, muted: !keepSound, playsinline: true, 'data-has-audio': keepSound ? 'true' : null, 'data-volume': keepSound ? talk.volume : null, 'data-automation': keepSound ? clickless(dur, 1) : null, 'data-start': start, 'data-duration': dur, 'data-media-start': n6(seg.srcIn), 'data-track-index': track++ })} style="${css({ ...fillCss, objectFit: contain ? 'contain' : 'cover', objectPosition: anchor })}"></video>`);
+      if (voiceSrc && talk.volume > 0)
+        vids.push(`<audio ${attrs({ id: `talk-a${i}`, src: voiceSrc, 'data-start': start, 'data-duration': dur, 'data-media-start': n6(Math.max(0, seg.srcIn - talk.voiceStart)), 'data-volume': 1, 'data-automation': clickless(dur, talk.volume), 'data-track-index': track++ })}></audio>`);
+      segs.push({ ...seg, videoId: `talk-v${i}` });
+    });
+    body.push(`<div id="talk" style="${css({ ...fillCss, background: '#000', overflow: 'hidden', zIndex: '1' })}"><div id="talk-zoom" style="${css(fillCss)}">${vids.join('')}</div></div>`);
+    const broll = talk.broll.map((b, i) => {
+      const holderId = `br${i}`;
+      const mediaId = `br${i}-m`;
+      const file = place(b.asset, `b${i}`);
+      const dur = n6(b.endSec - b.startSec);
+      const pic = { width: '100%', height: '100%', objectFit: 'cover', display: 'block' };
+      const el =
+        b.kind === 'video'
+          ? `<video ${attrs({ id: mediaId, src: file, muted: true, playsinline: true, 'data-start': n6(b.startSec), 'data-duration': dur, 'data-media-start': n6(b.srcIn), 'data-track-index': track++ })} style="${css(pic)}"></video>`
+          : `<img ${attrs({ id: mediaId, src: file, alt: '' })} style="${css(pic)}">`;
+      if (b.mode === 'pip') {
+        const safe = SAFE[spec.format];
+        return `<div id="${holderId}" style="${css({ ...fillCss, display: 'none', flexDirection: 'column', alignItems: 'flex-end', paddingTop: `${safe.top + 20}px`, paddingRight: `${safe.side}px`, boxSizing: 'border-box', zIndex: '50' })}"><div id="${holderId}-card" style="${css({ width: '46%', aspectRatio: '4 / 5', borderRadius: '28px', overflow: 'hidden', border: '6px solid #fff', outline: `3px solid ${spec.brand.accent}`, boxShadow: '0 22px 50px rgba(0,0,0,0.5)' })}">${el}</div></div>`;
+      }
+      return `<div id="${holderId}" style="${css({ ...fillCss, display: 'none', overflow: 'hidden', background: '#000', zIndex: '50' })}">${el}</div>`;
+    });
+    body.push(...broll);
+    body.push(`<div id="overlays" style="${css({ ...fillCss, zIndex: '60', pointerEvents: 'none' })}"></div>`);
+    data.talk = { fit: talk.fit, track: talk.track, zooms: talk.zooms, overlays: talk.overlays, timeline: segs, broll: talk.broll.map((b, i) => ({ ...b, holderId: `br${i}`, mediaId: `br${i}-m` })) };
+  }
+
+  // ── escenas
+  const starts = sceneStarts(spec);
+  spec.scenes.forEach((sc, i) => {
+    const v = sc.visual;
+    const start = n6(starts[i]);
+    const dur = n6(Math.max(1, Math.round(sc.durationSec * fps)) / fps);
+    let inner = '';
+    const vis = { kind: v.kind };
+    if (v.kind === 'image' || v.kind === 'video') {
+      const contain = v.fit === 'contain';
+      const fit = { width: '100%', height: '100%', objectFit: contain ? 'contain' : 'cover', display: 'block', ...(!contain && v.anchorX !== undefined ? { objectPosition: `${Math.round(v.anchorX * 1000) / 10}% 50%` } : {}) };
+      const under = { width: '100%', height: '100%', objectFit: 'cover', filter: 'blur(38px) brightness(0.55)', transform: 'scale(1.15)', display: 'block' };
+      const mediaId = `sc${i}-m`;
+      if (v.kind === 'image') {
+        const file = place(v.asset);
+        inner = `${contain ? `<img src="${file}" alt="" style="${css({ ...fillCss, ...under })}">` : ''}<div style="${css({ ...fillCss, overflow: 'hidden' })}"><img id="${mediaId}" src="${file}" alt="" style="${css(fit)}"></div>`;
+        vis.motion = v.motion;
+      } else {
+        const file = place(v.asset);
+        const keep = v.withSound && v.volume > 0;
+        const tm = { 'data-start': start, 'data-duration': dur, 'data-media-start': n6(v.startSec) };
+        if (contain) inner += `<video ${attrs({ src: place(v.asset, 'u'), muted: true, playsinline: true, ...tm, 'data-track-index': track++ })} style="${css({ ...fillCss, ...under })}"></video>`;
+        inner += `<div style="${css({ ...fillCss, overflow: 'hidden' })}"><video ${attrs({ id: mediaId, src: file, muted: !keep, playsinline: true, 'data-has-audio': keep ? 'true' : null, 'data-volume': keep ? 1 : null, 'data-automation': keep ? clickless(dur, v.volume) : null, ...tm, 'data-track-index': track++ })} style="${css(fit)}"></video></div>`;
+      }
+      vis.mediaId = mediaId;
+    } else if (v.kind === 'screen') {
+      const file = place(v.asset);
+      const m = media[v.asset];
+      vis.imgId = `sc${i}-m`;
+      vis.mediaId = vis.imgId;
+      Object.assign(vis, { frame: v.frame, move: v.move, focus: v.focus, pointer: v.pointer, w: m.w ?? null, h: m.h ?? null });
+      inner = `<img id="${vis.imgId}" src="${file}" alt="" style="display:block">`;
+    }
+    body.push(`<div id="scene${i}" style="${css({ ...fillCss, overflow: 'hidden', display: 'none', background: data.pal.bg[0] })}">${inner}</div>`);
+    data.scenes.push({ start, durationSec: sc.durationSec, transition: sc.transition, visual: vis, text: sc.text });
+  });
+
+  body.push(`<div id="captions" style="${css({ ...fillCss, display: 'flex', flexDirection: 'column', zIndex: '80', boxSizing: 'border-box', pointerEvents: 'none' })}"></div>`);
+  if (spec.progressBar) body.push(`<div id="progress" style="${css({ position: 'absolute', top: '0', left: '0', height: '8px', width: '0', background: spec.brand.accent, opacity: '0.9', zIndex: '90' })}"></div>`);
+
+  // ── sonido: música, voces y efectos
+  if (spec.audio && media[spec.audio.asset]) {
+    const file = place(spec.audio.asset);
+    const len = lengthOf(spec.audio.asset);
+    const dur = n6(Math.min(duration, len));
+    const keys = new Set([0, spec.audio.fadeInSec, duration - spec.audio.fadeOutSec, dur]);
+    if (spec.audio.duck) for (const iv of speechIntervals(spec)) for (const x of [iv.start - DUCK_RAMP_SEC, iv.start, iv.end, iv.end + DUCK_RAMP_SEC * 2]) keys.add(x);
+    const points = [...keys].filter((x) => x >= 0 && x <= dur).sort((a, b) => a - b).map((x) => [x, musicLevel(spec, duration, x)]);
+    body.push(`<audio ${attrs({ id: 'music', src: file, 'data-start': 0, 'data-duration': dur, 'data-volume': 1, 'data-automation': lane(points), 'data-track-index': track++ })}></audio>`);
+  }
+  spec.voice.forEach((v, i) => {
+    let file = place(v.asset);
+    let len = lengthOf(v.asset);
+    if (v.rate && v.rate !== 1) {
+      // Más rápida sin cambiar el tono (una línea doblada que tiene que caber en su hueco).
+      const out = `assets/media/voice${i}-x${v.rate}.wav`;
+      const r = spawnSync(ffmpeg, ['-nostdin', '-loglevel', 'error', '-y', '-i', join(dir, file), '-af', `atempo=${v.rate}`, join(dir, out)], { encoding: 'utf8' });
+      if (r.status !== 0) throw new Error(`voice rate: ${r.stderr.slice(-200)}`);
+      file = out;
+      len /= v.rate;
+    }
+    const dur = n6(Math.min(len, duration - v.startSec));
+    if (dur > 0.02) body.push(`<audio ${attrs({ id: `voice${i}`, src: file, 'data-start': n6(v.startSec), 'data-duration': dur, 'data-volume': 1, 'data-automation': clickless(dur, v.volume), 'data-track-index': track++ })}></audio>`);
+  });
+  spec.sfx.forEach((s, i) => {
+    const file = place(s.asset);
+    const dur = n6(Math.min(lengthOf(s.asset), duration - s.atSec));
+    if (dur > 0.02) body.push(`<audio ${attrs({ id: `sfx${i}`, src: file, 'data-start': n6(s.atSec), 'data-duration': dur, 'data-volume': 1, 'data-automation': lane([[0, s.volume], [dur, s.volume]]), 'data-track-index': track++ })}></audio>`);
+  });
+
+  // ── fuentes, motor del fotograma y dibujante
+  for (const f of INTER_FACES) cpSync(join(INTER_DIR, f.file), join(dir, 'assets', 'fonts', f.file));
+  cpSync(join(PKG_DIR, 'src', 'runtime', 'ignix-frame.js'), join(dir, 'ignix-frame.js'));
+  cpSync(join(HERE, 'runtime', 'creator.js'), join(dir, 'creator.js'));
+  // GSAP donde lo haya dejado npm (dentro del paquete o al lado, según cómo se instaló).
+  cpSync(join(dirname(requireHere.resolve('gsap/package.json')), 'dist', 'gsap.min.js'), join(dir, 'assets', 'gsap.min.js'), { dereference: true });
+  const faces = INTER_FACES.map((f) => `@font-face{font-family:'Inter';font-weight:${f.weight};font-display:block;src:url('assets/fonts/${f.file}') format('woff2');${f.range ? `unicode-range:${f.range};` : ''}}`).join('\n');
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=${W}, height=${H}">
+<script src="assets/gsap.min.js"></script>
+<script src="ignix-frame.js"></script>
+<style>
+${faces}
+*{margin:0;padding:0;box-sizing:border-box}
+html,body{width:${W}px;height:${H}px;overflow:hidden;background:${data.pal.bg[0]}}
+#root{position:relative;width:100%;height:100%;overflow:hidden;background:${data.pal.bg[0]};font-family:'Inter',sans-serif}
+</style>
+</head>
+<body>
+<div id="root" data-composition-id="${id}" data-width="${W}" data-height="${H}" data-duration="${duration}" data-fps="${fps}" data-layout-allow-overlap data-layout-allow-overflow>
+${body.join('\n')}
+</div>
+<script>window.CREATOR = ${JSON.stringify(data).replace(/</g, '\\u003c')};</script>
+<script src="creator.js"></script>
+</body>
+</html>
+`;
+  writeFileSync(join(dir, 'index.html'), html);
+  return { duration, id, width: W, height: H };
+}

package/src/creator/fit.mjs

@@ -0,0 +1,58 @@
+// Ajuste de textos de las plantillas de Creator con las medidas REALES de la fuente (Inter),
+// al generar el proyecto (en Node): el dibujante nunca mide la página. Mismas reglas que en
+// Creator: el tamaño más grande (de `max` hacia abajo, de 4 en 4) cuyas líneas caben en `width`
+// y en `maxLines`; si no, el mínimo tal cual.
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+import * as fontkit from 'fontkit';
+
+const require = createRequire(import.meta.url);
+export const INTER_DIR = join(dirname(require.resolve('@fontsource/inter/package.json')), 'files');
+
+// Las mismas caras que cargaba Creator: 400, 600 y 800 (y latin-ext 400 y 800). Un 700 o un 900
+// se dibuja con la 800 (la más cercana por encima que hay), así que se mide con ella.
+export const INTER_FACES = [
+  { weight: 400, file: 'inter-latin-400-normal.woff2' },
+  { weight: 600, file: 'inter-latin-600-normal.woff2' },
+  { weight: 800, file: 'inter-latin-800-normal.woff2' },
+  { weight: 400, file: 'inter-latin-ext-400-normal.woff2', range: 'U+0100-024F' },
+  { weight: 800, file: 'inter-latin-ext-800-normal.woff2', range: 'U+0100-024F' },
+];
+
+const fonts = new Map();
+function fontFor(weight) {
+  const w = Number(weight) >= 700 ? 800 : Number(weight) >= 600 ? 600 : 400;
+  if (!fonts.has(w)) fonts.set(w, fontkit.openSync(join(INTER_DIR, `inter-latin-${w}-normal.woff2`)));
+  return fonts.get(w);
+}
+
+/** Ancho en px de `text` a `size` px, con el espaciado de letras de las plantillas (−0,02 em). */
+export function measure(text, size, weight, letterSpacingEm = -0.02) {
+  const f = fontFor(weight);
+  const run = f.layout(text);
+  return (run.advanceWidth / f.unitsPerEm) * size + letterSpacingEm * size * [...text].length;
+}
+
+export function fitLines(text, { width, max, min, maxLines, weight }) {
+  const words = String(text).split(/\s+/).filter(Boolean);
+  for (let size = max; size >= min; size -= 4) {
+    const lines = [];
+    let current = '';
+    let ok = true;
+    for (const word of words) {
+      if (measure(word, size, weight) > width) {
+        ok = false;
+        break;
+      }
+      const next = current ? `${current} ${word}` : word;
+      if (measure(next, size, weight) <= width) current = next;
+      else {
+        lines.push(current);
+        current = word;
+      }
+    }
+    if (current) lines.push(current);
+    if (ok && lines.length <= maxLines) return { size, lines };
+  }
+  return { size: min, lines: [text] };
+}