Example.tsx

import { Sprite, BetterText } from './tslash';

// 1. El Contenedor (Padre)
const contenedor = new Sprite();
contenedor.x = 100;
contenedor.y = 100;
contenedor.style.border = "1px solid rgba(255,255,255,0.2)";
document.body.append(contenedor);

// 2. BetterText con Pretext (Hijo)
const textoLargo = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.";
const etiqueta = new BetterText(""); 
etiqueta.x = 20;
etiqueta.y = 20;
etiqueta.width = 300; // El ancho que activará el reflow de Pretext
etiqueta.style.color = "#000000ff";
etiqueta.style.fontFamily = "Arial, sans-serif";

contenedor.append(etiqueta);

// 3. Lógica de Typewriter + Yoyo
let charIndex = 0;
let isDeleting = false;

setInterval(() => {
    // Si estamos escribiendo, sumamos 1 letra. Si borramos, restamos.
    if (!isDeleting) {
        charIndex++;
        if (charIndex > textoLargo.length) isDeleting = true;
    } else {
        charIndex--;
        if (charIndex === 0) isDeleting = false;
    }

    // Actualizamos el .text (BetterText ejecutará el layout rápido de Pretext)
    etiqueta.text = textoLargo.substring(0, charIndex);

    // Animación suave del padre para ver que el texto no "tiembla"
    contenedor.x += 0.5;
    contenedor.rotation += 0.2;
}, 50); // Velocidad de la máquina de escribir