morfeo 0.3.1 → 0.3.3

package/README.md

@@ -1,6 +1,6 @@
 # Morfeo
 
-> **Documentación: [ureckchan.github.io/morfeo](https://ureckchan.github.io/morfeo/)** · Ejemplos: [github.com/UreckChan/morfeo](https://github.com/UreckChan/morfeo)
+> **Documentación: [morfeo-docs-two.vercel.app](https://morfeo-docs-two.vercel.app/)** · Ejemplos: [github.com/UreckChan/morfeo](https://github.com/UreckChan/morfeo) · Versiones: [historial](https://morfeo-docs-two.vercel.app/historial)
 
 Genera videos verticales animados (Shorts, TikTok, Reels) desde código: escribes las escenas y Morfeo agrega
 la voz, la música, los efectos de sonido, los subtítulos, las animaciones y la miniatura.

package/bin/morfeo.mjs

@@ -138,7 +138,9 @@ Pruébalo:  npx morfeo render ${pos[0]}   y revísalo:  npx morfeo hoja ${pos[0]
 			const p = await cargarProyecto(proyecto);
 			const num = (v) => (v == null || v === true ? undefined : Number(v));
 			for (const id of pos) {
-				const video = /\.(mp4|mov|webm)$/i.test(id) ? path.resolve(id) : path.join(p.salida, `${id}.mp4`);
+				const {salidaDe, ordenarSalida} = await import('../lib/salida.mjs');
+				ordenarSalida(p);
+				const video = /\.(mp4|mov|webm)$/i.test(id) ? path.resolve(id) : salidaDe(p, id);
 				console.log(hoja({video, cols: num(op.cols), filas: num(op.filas), desde: num(op.desde), hasta: num(op.hasta)}));
 			}
 			return;

package/lib/config.mjs

@@ -158,6 +158,8 @@ export async function cargarProyecto(proyecto = process.cwd()) {
 			concurrencia: Number(process.env.MORFEO_CONCURRENCIA) || r.concurrencia || null, // null = Morfeo elige según la máquina y el modo (ver render.mjs)
 			miniatura: r.miniatura ?? true,
 			consejos: r.consejos ?? true,
+			// 'titulo' (por defecto): salida/<Título del video>.mp4, listo para subir · 'id': salida/<id>.mp4
+			nombreArchivo: r.nombreArchivo ?? 'titulo',
 		},
 	};
 }
@@ -349,6 +351,7 @@ function validarVideo(id, v, ctx) {
 		if (clasico) err('`mundo` es del motor de capas: usa un estilo como ilustrado, 3d o mesa (no "datos-curiosos")');
 	}
 	if (v.serie != null && typeof v.serie !== 'string') err("`serie` debe ser un texto ('GYM CON CIENCIA · PARTE 5')");
+	if (v.title != null && typeof v.title !== 'string') err('`title` debe ser un texto (también es el nombre del archivo del video)');
 	if (v.calidad != null && !['alta', 'media', 'ligera'].includes(v.calidad)) err("`calidad` debe ser 'alta', 'media' o 'ligera'");
 	if (v.tags != null && (!Array.isArray(v.tags) || v.tags.some((x) => typeof x !== 'string'))) err("`tags` debe ser una lista de textos (['curiosidades', 'ciencia'])");
 	// archivos de assets/ que piden las escenas y el HUD: mejor avisar ahora que a mitad del render

package/lib/estructura.mjs

@@ -106,7 +106,7 @@ export function revisarEstructura(v, d) {
 	// 5) habla de tú
 	const todo = cuerpo.map((s) => s.say ?? '').join(' ');
 	const n = palabrasDe(todo).length;
-	const tu = (todo.match(/\b(tú|tu|tus|te|ti|contigo|imagina|tienes|eres|puedes|sabes)\b/gi) ?? []).length;
+	const tu = (todo.match(/\b(tú|tu|tus|te|ti|contigo|imagina|imaginas|tienes|eres|puedes|sabes|sabías|crees|conoces|harías|pagarías)\b/gi) ?? []).length;
 	if (n > 40 && tu === 0) add('tu', 'idea', 'No le habla al espectador ni una vez: una frase en segunda persona ("imagina que tú…") lo mete en la historia.');
 	return out;
 }

package/lib/render.mjs

@@ -6,7 +6,7 @@ import fs from 'node:fs';
 import {createRequire} from 'node:module';
 import path from 'node:path';
 import {cargarProyecto, ErrorMorfeo} from './config.mjs';
-import {ENTRADA_REMOTION, FUENTES, MODELOS, PY_DIR, modelosListos, pythonVenv, venvListo} from './entorno.mjs';
+import {ENTRADA_REMOTION, FUENTES, MODELOS, PAQUETE, PY_DIR, modelosListos, pythonVenv, venvListo} from './entorno.mjs';
 import {asegurarNavegador} from './navegador.mjs';
 import {generarImagenes} from './imagenes.mjs';
 import {ponerPoses, prepararPersonajes} from './personajes.mjs';
@@ -15,6 +15,7 @@ import {sintetizarVoces} from './voces.mjs';
 import {transcribir, whisperListo} from './whisper.mjs';
 import {consejosEnTexto, revisarEstructura} from './estructura.mjs';
 import {revisarPalabras} from './palabras.mjs';
+import {ordenarSalida, salidaDe} from './salida.mjs';
 
 const require = createRequire(import.meta.url);
 
@@ -71,7 +72,13 @@ function huellaMotor() {
 }
 
 // Remotion calcula la clave del caché a partir de la configuración: meter la huella ahí la invalida
-const conHuella = (config) => ({...config, name: `morfeo-${huellaMotor()}`});
+// También: los componentes del proyecto pueden importar 'three', 'react' o '@react-three/fiber' aunque no estén instalados
+// en el proyecto (llegan como dependencias de morfeo; con `npm i ../morfeo` o pnpm no quedan en su node_modules).
+const conHuella = (config) => ({
+	...config,
+	name: `morfeo-${huellaMotor()}`,
+	resolve: {...config.resolve, modules: [...(config.resolve?.modules ?? ['node_modules']), path.join(PAQUETE, 'node_modules')]},
+});
 
 /**
  * Entrada de Remotion. Sin componentes propios es la del paquete; con ellos, Morfeo escribe
@@ -128,13 +135,13 @@ export const datosDe = (publico, id) => {
 	return fs.existsSync(f) ? JSON.parse(fs.readFileSync(f, 'utf8')) : null;
 };
 
-const salidaDe = (p, id) => path.join(p.salida, `${id}.mp4`);
 
 /** [{id, titulo, hecho}] en el orden del proyecto. */
 export async function lista({proyecto = process.cwd()} = {}) {
 	cargarEnv(proyecto);
 	const p = await cargarProyecto(proyecto);
-	return Object.entries(p.videos).map(([id, v]) => ({id, titulo: v.title ?? id, hecho: fs.existsSync(salidaDe(p, id))}));
+	ordenarSalida(p);
+	return Object.entries(p.videos).map(([id, v]) => ({id, titulo: v.title ?? id, archivo: path.basename(salidaDe(p, id)), hecho: fs.existsSync(salidaDe(p, id))}));
 }
 
 /** Corre python/preparar.py con el trabajo indicado; su salida va directo a la terminal. */
@@ -218,6 +225,8 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 			return [];
 		}
 	}
+	// archivos ya hechos con el id o con un título viejo → su nombre actual (sin volver a renderizar)
+	ordenarSalida(p, (m) => log(m));
 	let lista = ids?.length ? ids : todos ? Object.keys(p.videos) : Object.keys(p.videos).filter((id) => !fs.existsSync(salidaDe(p, id)));
 	const malos = lista.filter((id) => !p.videos[id]);
 	if (malos.length) throw new ErrorMorfeo(`No existen: ${malos.join(', ')}. Usa: npx morfeo lista`);
@@ -236,90 +245,97 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 		}
 
 	if (!listos.length) return terminarLote(p, loteArchivo, [], fallidos, log);
-	log('Empaquetando la animación...');
-	const {bundle} = await import('@remotion/bundler');
-	const {renderMedia, renderStill, selectComposition} = await import('@remotion/renderer');
-	const entrada = entradaDe(p);
-	const serveUrl = await bundle({entryPoint: entrada, publicDir: publico, rootDir: entrada === ENTRADA_REMOTION ? path.dirname(ENTRADA_REMOTION) : p.proyecto, webpackOverride: conHuella});
-	fs.mkdirSync(p.salida, {recursive: true});
-	const chromiumOptions = {gl: p.render.gl};
-	const browserExecutable = p.render.navegador ?? (await asegurarNavegador(log));
+	// un solo render a la vez en esta computadora: dos Chrome usando la GPU al mismo tiempo dejaban en algunos
+	// cuadros pedazos de texto de cuadros anteriores (rótulos o subtítulos fantasma)
 	const hechos = [];
-	// cuadros en paralelo: con GPU aguanta más; por software cada pestaña come mucha CPU y memoria
-	const nucleos = os.cpus().length;
-	const concurrenciaBase = p.render.concurrencia ?? (p.render.gl === 'angle' ? Math.max(2, Math.min(10, Math.floor(nucleos * 0.75))) : Math.max(1, Math.min(3, Math.floor(nucleos / 4))));
-	const sinTTY = !process.stdout.isTTY;
-	for (const [i, id] of listos.entries()) {
-		const t = Date.now();
-		try {
-		const inputProps = {videos: {[id]: datos[id]}, marca, ...extras};
-		const mp4 = salidaDe(p, id);
-		let gl = p.render.gl;
-		let concurrencia = concurrenciaBase;
-		let composition;
-		// hasta 3 intentos: si el navegador truena, se baja la concurrencia y, con GPU, se pasa a software
-		for (let intento = 1; ; intento++) {
-			const chromium = {gl};
-			let ultimo = -1;
+	const soltar = await tomarCandado(log);
+	try {
+		log('Empaquetando la animación...');
+		const {bundle} = await import('@remotion/bundler');
+		const {renderMedia, renderStill, selectComposition} = await import('@remotion/renderer');
+		const entrada = entradaDe(p);
+		const serveUrl = await bundle({entryPoint: entrada, publicDir: publico, rootDir: entrada === ENTRADA_REMOTION ? path.dirname(ENTRADA_REMOTION) : p.proyecto, webpackOverride: conHuella});
+		fs.mkdirSync(p.salida, {recursive: true});
+		const chromiumOptions = {gl: p.render.gl};
+		const browserExecutable = p.render.navegador ?? (await asegurarNavegador(log));
+		// cuadros en paralelo: con GPU aguanta más; por software cada pestaña come mucha CPU y memoria
+		const nucleos = os.cpus().length;
+		const concurrenciaBase = p.render.concurrencia ?? (p.render.gl === 'angle' ? Math.max(2, Math.min(10, Math.floor(nucleos * 0.75))) : Math.max(1, Math.min(3, Math.floor(nucleos / 4))));
+		const sinTTY = !process.stdout.isTTY;
+		for (const [i, id] of listos.entries()) {
+			const t = Date.now();
 			try {
-				composition = await selectComposition({serveUrl, id, inputProps, browserExecutable, chromiumOptions: chromium});
-				await renderMedia({
-					serveUrl,
-					composition,
-					inputProps,
-					browserExecutable,
-					chromiumOptions: chromium,
-					codec: 'h264',
-					crf: crfDe(p, id),
-					audioBitrate: '192k',
-					imageFormat: 'jpeg',
-					jpegQuality: 92,
-					concurrency: concurrencia,
-					outputLocation: mp4,
-					onProgress: ({progress}) => {
-						alProgreso?.(id, progress);
-						// con terminal: cada 10 % en la misma línea; sin terminal (logs, CI): cada 25 %
-						const paso = sinTTY ? 4 : 10;
-						const n = Math.floor(progress * paso);
-						if (n !== ultimo) {
-							if (sinTTY) log(`[${i + 1}/${listos.length}] ${id}: video ${Math.round((n / paso) * 100)}%`);
-							else process.stdout.write(`\r[${i + 1}/${listos.length}] ${id}: video ${n * 10}%   `);
-						}
-						ultimo = n;
-					},
-				});
-				chromiumOptions.gl = gl;
-				break;
+			const inputProps = {videos: {[id]: datos[id]}, marca, ...extras};
+			const mp4 = salidaDe(p, id);
+			let gl = p.render.gl;
+			let concurrencia = concurrenciaBase;
+			let composition;
+			// hasta 3 intentos: si el navegador truena, se baja la concurrencia y, con GPU, se pasa a software
+			for (let intento = 1; ; intento++) {
+				const chromium = {gl};
+				let ultimo = -1;
+				try {
+					composition = await selectComposition({serveUrl, id, inputProps, browserExecutable, chromiumOptions: chromium});
+					await renderMedia({
+						serveUrl,
+						composition,
+						inputProps,
+						browserExecutable,
+						chromiumOptions: chromium,
+						codec: 'h264',
+						crf: crfDe(p, id),
+						audioBitrate: '192k',
+						imageFormat: 'jpeg',
+						jpegQuality: 92,
+						concurrency: concurrencia,
+						outputLocation: mp4,
+						onProgress: ({progress}) => {
+							alProgreso?.(id, progress);
+							// con terminal: cada 10 % en la misma línea; sin terminal (logs, CI): cada 25 %
+							const paso = sinTTY ? 4 : 10;
+							const n = Math.floor(progress * paso);
+							if (n !== ultimo) {
+								if (sinTTY) log(`[${i + 1}/${listos.length}] ${id}: video ${Math.round((n / paso) * 100)}%`);
+								else process.stdout.write(`\r[${i + 1}/${listos.length}] ${id}: video ${n * 10}%   `);
+							}
+							ultimo = n;
+						},
+					});
+					chromiumOptions.gl = gl;
+					break;
+				} catch (e) {
+					const msg = String(e?.message ?? e);
+					const truena = /crash|Session closed|Target closed|Protocol error|WebGL|context lost|browser has disconnected|Navigation failed/i.test(msg);
+					if (!truena || intento >= 3) throw e;
+					if (gl === 'angle' && /WebGL|context/i.test(msg)) gl = 'swangle';
+					else if (concurrencia > 1) concurrencia = Math.max(1, Math.floor(concurrencia / 2));
+					else if (gl === 'angle') gl = 'swangle';
+					log(`\n    el navegador falló; reintento con ${gl === 'angle' ? 'GPU' : 'CPU'} y ${concurrencia} cuadro(s) a la vez...`);
+				}
+			}
+			let jpg = null;
+			if (p.render.miniatura) {
+				// miniatura: cuando la primera escena ya está completa (o en `miniaturaEn`), sin subtítulos
+				jpg = salidaDe(p, id, 'jpg');
+				const d = datos[id];
+				const e0 = d.escenas[0];
+				const seg = p.videos[id].miniaturaEn ?? Math.min(e0.dur - 0.15, Math.max(1.4, e0.habla[1] * 0.85));
+				const frame = Math.max(0, Math.min(composition.durationInFrames - 1, Math.round(seg * composition.fps)));
+				const props = {...inputProps, miniatura: true};
+				await renderStill({serveUrl, composition: {...composition, props: {...composition.props, miniatura: true}}, inputProps: props, browserExecutable, chromiumOptions: {gl}, frame, imageFormat: 'jpeg', jpegQuality: 92, output: jpg});
+			}
+			const segundos = Math.round((Date.now() - t) / 1000);
+			if (process.stdout.isTTY) process.stdout.write('\r');
+			log(`[${i + 1}/${listos.length}] ${id}: listo en ${segundos} s  →  ${path.relative(p.proyecto, mp4)}      `);
+			hechos.push({id, mp4, jpg, segundos});
 			} catch (e) {
-				const msg = String(e?.message ?? e);
-				const truena = /crash|Session closed|Target closed|Protocol error|WebGL|context lost|browser has disconnected|Navigation failed/i.test(msg);
-				if (!truena || intento >= 3) throw e;
-				if (gl === 'angle' && /WebGL|context/i.test(msg)) gl = 'swangle';
-				else if (concurrencia > 1) concurrencia = Math.max(1, Math.floor(concurrencia / 2));
-				else if (gl === 'angle') gl = 'swangle';
-				log(`\n    el navegador falló; reintento con ${gl === 'angle' ? 'GPU' : 'CPU'} y ${concurrencia} cuadro(s) a la vez...`);
+				if (process.stdout.isTTY) process.stdout.write('\n');
+				fallidos.push({id, error: mensajeDe(e)});
+				log(`[${i + 1}/${listos.length}] ${id}: ✘ ${mensajeDe(e)}`);
 			}
 		}
-		let jpg = null;
-		if (p.render.miniatura) {
-			// miniatura: cuando la primera escena ya está completa (o en `miniaturaEn`), sin subtítulos
-			jpg = path.join(p.salida, `${id}.jpg`);
-			const d = datos[id];
-			const e0 = d.escenas[0];
-			const seg = p.videos[id].miniaturaEn ?? Math.min(e0.dur - 0.15, Math.max(1.4, e0.habla[1] * 0.85));
-			const frame = Math.max(0, Math.min(composition.durationInFrames - 1, Math.round(seg * composition.fps)));
-			const props = {...inputProps, miniatura: true};
-			await renderStill({serveUrl, composition: {...composition, props: {...composition.props, miniatura: true}}, inputProps: props, browserExecutable, chromiumOptions: {gl}, frame, imageFormat: 'jpeg', jpegQuality: 92, output: jpg});
-		}
-		const segundos = Math.round((Date.now() - t) / 1000);
-		if (process.stdout.isTTY) process.stdout.write('\r');
-		log(`[${i + 1}/${listos.length}] ${id}: listo en ${segundos} s  →  ${path.relative(p.proyecto, mp4)}      `);
-		hechos.push({id, mp4, jpg, segundos});
-		} catch (e) {
-			if (process.stdout.isTTY) process.stdout.write('\n');
-			fallidos.push({id, error: mensajeDe(e)});
-			log(`[${i + 1}/${listos.length}] ${id}: ✘ ${mensajeDe(e)}`);
-		}
+	} finally {
+		soltar();
 	}
 	return terminarLote(p, loteArchivo, hechos, fallidos, log);
 }
@@ -332,6 +348,48 @@ export function crfDe(p, id) {
 	return CRF[v.calidad ?? p.render.calidad ?? (v.mundo?.length ? 'media' : 'alta')] ?? 18;
 }
 
+/**
+ * Candado de render por computadora (~/.morfeo/render.lock con el pid). Si otro render de Morfeo está corriendo,
+ * espera a que termine; si el proceso del candado ya no existe, lo toma. Devuelve la función que lo suelta.
+ */
+async function tomarCandado(log) {
+	const {HOME} = await import('./entorno.mjs');
+	const archivo = path.join(HOME, 'render.lock');
+	fs.mkdirSync(HOME, {recursive: true});
+	const vivo = (pid) => {
+		try {
+			process.kill(pid, 0);
+			return true;
+		} catch (e) {
+			return e.code === 'EPERM';
+		}
+	};
+	let avisado = false;
+	for (;;) {
+		try {
+			fs.writeFileSync(archivo, String(process.pid), {flag: 'wx'});
+			break;
+		} catch (e) {
+			if (e.code !== 'EEXIST') throw e;
+			const pid = Number(fs.readFileSync(archivo, 'utf8')) || 0;
+			if (!pid || pid === process.pid || !vivo(pid)) {
+				fs.rmSync(archivo, {force: true});
+				continue;
+			}
+			if (!avisado) log(`Otro render de Morfeo está usando la tarjeta de video (proceso ${pid}); espero a que termine...`);
+			avisado = true;
+			await new Promise((r) => setTimeout(r, 2000));
+		}
+	}
+	const soltar = () => {
+		try {
+			if (Number(fs.readFileSync(archivo, 'utf8')) === process.pid) fs.rmSync(archivo, {force: true});
+		} catch {}
+	};
+	process.once('exit', soltar);
+	return soltar;
+}
+
 /** Primera línea útil de un error (sin la pila de Remotion o de Python). */
 const mensajeDe = (e) => String(e?.message ?? e).split('\n').find((l) => l.trim()) ?? 'error desconocido';
 
@@ -370,18 +428,18 @@ function escribirResumen(p) {
 		.filter(([id]) => fs.existsSync(salidaDe(p, id)))
 		.map(([id, v]) => {
 			const c = creditosDe(p, id);
-			return {id, titulo: v.title ?? id, archivo: `${id}.mp4`, duracion: datosDe(publico, id)?.duracion ?? null, ...(c.length ? {creditos: c} : {}), ...(v.meta ? {meta: v.meta} : {})};
+			return {id, titulo: v.title ?? id, archivo: path.basename(salidaDe(p, id)), duracion: datosDe(publico, id)?.duracion ?? null, ...(c.length ? {creditos: c} : {}), ...(v.meta ? {meta: v.meta} : {})};
 		});
 	fs.writeFileSync(path.join(p.salida, 'resumen.json'), JSON.stringify(filas, null, '\t') + '\n');
 	// créditos para la descripción del video (las licencias CC BY piden mencionar al autor)
 	const conCreditos = filas.filter((f) => f.creditos?.length);
-	// <id>.txt: lo que se copia al publicar (título, descripción, etiquetas y créditos)
+	// <título>.txt: lo que se copia al publicar (título, descripción, etiquetas y créditos)
 	for (const f of filas) {
 		const v = p.videos[f.id];
 		const tags = (v.tags ?? []).map((x) => `#${String(x).replace(/^#/, '').replace(/\s+/g, '')}`).join(' ');
 		const creditos = f.creditos?.length ? ['', 'Créditos:', ...f.creditos.map((c) => `- ${c}`)] : [];
 		const lineas = [v.title ?? f.id, '', ...(v.descripcion ? [v.descripcion, ''] : []), ...(tags ? [tags] : []), ...creditos];
-		fs.writeFileSync(path.join(p.salida, `${f.id}.txt`), lineas.join('\n').trim() + '\n');
+		fs.writeFileSync(salidaDe(p, f.id, 'txt'), lineas.join('\n').trim() + '\n');
 	}
 	if (conCreditos.length)
 		fs.writeFileSync(path.join(p.salida, 'creditos.md'), ['# Créditos de recursos', '', ...conCreditos.flatMap((f) => [`## ${f.titulo}`, ...f.creditos.map((c) => `- ${c}`), ''])].join('\n'));

package/lib/salida.mjs

@@ -0,0 +1,84 @@
+// Nombres de los archivos terminados. Por defecto, el título del video: YouTube, TikTok e Instagram toman el nombre
+// del archivo como título al subirlo, así que no hay que escribirlo otra vez. `render.nombreArchivo: 'id'` vuelve a
+// usar el id. Los videos hechos con el id (versiones anteriores) se renombran solos, sin volver a renderizar.
+import fs from 'node:fs';
+import path from 'node:path';
+
+const EXTENSIONES = ['mp4', 'jpg', 'txt'];
+// nombres que Windows no permite como archivo
+const RESERVADOS = /^(con|prn|aux|nul|com\d|lpt\d)$/i;
+
+/** Título → nombre de archivo válido en Windows, Mac y Linux (conserva acentos y emojis). */
+export function nombreSeguro(titulo, respaldo = 'video') {
+	let s = String(titulo ?? '')
+		.normalize('NFC')
+		.replace(/[<>:"/\\|?*\u0000-\u001F]/g, ' ') // prohibidos en Windows
+		.replace(/\s+/g, ' ')
+		.trim()
+		.replace(/[. ]+$/g, ''); // Windows no acepta punto ni espacio al final
+	// largo máximo prudente (cuenta caracteres, no bytes; los emojis cuentan como uno)
+	const chars = [...s];
+	if (chars.length > 90) s = chars.slice(0, 90).join('').replace(/[. ]+$/g, '');
+	if (!s || RESERVADOS.test(s)) s = respaldo;
+	return s;
+}
+
+/**
+ * {id: nombre base} para todos los videos del proyecto. Dos videos con el mismo título se distinguen con " (2)",
+ * en el orden del proyecto, así que el nombre de cada uno no cambia entre renders.
+ */
+export function nombresDe(p) {
+	const porId = {};
+	const usados = new Set();
+	for (const [id, v] of Object.entries(p.videos)) {
+		const base = p.render?.nombreArchivo === 'id' ? id : nombreSeguro(v?.title, id);
+		let nombre = base;
+		for (let n = 2; usados.has(nombre.toLowerCase()); n++) nombre = `${base} (${n})`;
+		usados.add(nombre.toLowerCase());
+		porId[id] = nombre;
+	}
+	return porId;
+}
+
+/** Ruta de un archivo terminado: salidaDe(p, 'mi-video') → salida/<Título>.mp4 */
+export const salidaDe = (p, id, ext = 'mp4') => path.join(p.salida, `${nombresDe(p)[id] ?? id}.${ext}`);
+
+/**
+ * Pone los archivos ya hechos bajo su nombre actual: los que tenían el id (versiones anteriores) o un título viejo
+ * (registrado en .morfeo/archivos.json). Así cambiar el título renombra el video sin volver a renderizarlo.
+ */
+export function ordenarSalida(p, log = () => {}) {
+	const registro = path.join(p.trabajo, 'archivos.json');
+	let antes = {};
+	try {
+		antes = JSON.parse(fs.readFileSync(registro, 'utf8'));
+	} catch {}
+	const ahora = nombresDe(p);
+	if (fs.existsSync(p.salida)) {
+		for (const [id, nombre] of Object.entries(ahora)) {
+			for (const viejo of [antes[id], id]) {
+				if (!viejo || viejo === nombre) continue;
+				const de = path.join(p.salida, `${viejo}.mp4`);
+				const a = path.join(p.salida, `${nombre}.mp4`);
+				if (!fs.existsSync(de) || fs.existsSync(a)) continue;
+				for (const ext of EXTENSIONES) {
+					const d = path.join(p.salida, `${viejo}.${ext}`);
+					if (fs.existsSync(d)) fs.renameSync(d, path.join(p.salida, `${nombre}.${ext}`));
+				}
+				// la hoja de contacto también sigue al video
+				const hoja = path.join(p.salida, `${viejo}-hoja.png`);
+				if (fs.existsSync(hoja)) fs.renameSync(hoja, path.join(p.salida, `${nombre}-hoja.png`));
+				log(`  ${viejo}.mp4 → ${nombre}.mp4`);
+				break;
+			}
+		}
+	}
+	// resumen.json apunta a los archivos: que siga a los nombres nuevos
+	const resumen = path.join(p.salida, 'resumen.json');
+	try {
+		const filas = JSON.parse(fs.readFileSync(resumen, 'utf8'));
+		if (Array.isArray(filas)) fs.writeFileSync(resumen, JSON.stringify(filas.map((f) => (ahora[f.id] ? {...f, archivo: `${ahora[f.id]}.mp4`} : f)), null, '\t') + '\n');
+	} catch {}
+	fs.mkdirSync(p.trabajo, {recursive: true});
+	fs.writeFileSync(registro, JSON.stringify(ahora, null, '\t'));
+}

package/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "morfeo",
-	"version": "0.3.1",
+	"version": "0.3.3",
 	"description": "Genera videos verticales animados (Remotion + Three.js) con voz, música y subtítulos, desde un guion en código o escrito por IA.",
 	"type": "module",
 	"license": "SEE LICENSE IN LICENSE",
 	"author": "Uriel Gómez",
-	"homepage": "https://ureckchan.github.io/morfeo/",
+	"homepage": "https://morfeo-docs-two.vercel.app/",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/UreckChan/morfeo.git"

package/remotion/kit/tres.tsx

@@ -85,16 +85,21 @@ const Camara: React.FC<{estado: Estado}> = ({estado}) => {
 
 const Entorno: React.FC<{fuerza: number}> = ({fuerza}) => {
 	const {gl, scene} = useThree();
-	useEffect(() => {
+	// useLayoutEffect, no useEffect: con useEffect el primer cuadro de cada pestaña de Chrome salía sin reflejos
+	// (más oscuro). La textura se crea una vez; la intensidad (que cambia con la hora) se ajusta en cada cuadro.
+	useLayoutEffect(() => {
 		const pmrem = new THREE.PMREMGenerator(gl);
 		const tex = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
 		scene.environment = tex;
-		scene.environmentIntensity = fuerza;
 		return () => {
+			scene.environment = null;
 			tex.dispose();
 			pmrem.dispose();
 		};
-	}, [gl, scene, fuerza]);
+	}, [gl, scene]);
+	useLayoutEffect(() => {
+		scene.environmentIntensity = fuerza;
+	});
 	return null;
 };
 

package/remotion/motor/modelo3d.tsx

@@ -96,16 +96,21 @@ const Glb: React.FC<{src: string; levantar?: boolean}> = ({src, levantar}) => {
 /** Reflejos de un cuarto iluminado: sin esto, los metales (monedas, lingotes) se ven negros. */
 const Entorno: React.FC<{fuerza: number}> = ({fuerza}) => {
 	const {gl, scene} = useThree();
-	useEffect(() => {
+	// useLayoutEffect, no useEffect: con useEffect el primer cuadro de cada pestaña de Chrome salía sin reflejos
+	// (más oscuro). La textura se crea una vez; la intensidad (que cambia con la hora) se ajusta en cada cuadro.
+	useLayoutEffect(() => {
 		const pmrem = new THREE.PMREMGenerator(gl);
 		const tex = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
 		scene.environment = tex;
-		scene.environmentIntensity = fuerza;
 		return () => {
+			scene.environment = null;
 			tex.dispose();
 			pmrem.dispose();
 		};
-	}, [gl, scene, fuerza]);
+	}, [gl, scene]);
+	useLayoutEffect(() => {
+		scene.environmentIntensity = fuerza;
+	});
 	return null;
 };