trama-ui 0.1.0

package/dist/components/ui/TextmodeBackground.d.ts

@@ -0,0 +1,52 @@
+import type { Palette } from "./AsciiBackground.js";
+/** Sketches generativos de textmode.js que no dependen del texto del usuario ni del scroll. */
+export declare const TEXTMODE_SKETCHES: readonly [{
+    readonly id: "plasma";
+    readonly label: "Plasma";
+}, {
+    readonly id: "matrix";
+    readonly label: "Lluvia digital";
+}, {
+    readonly id: "starfield";
+    readonly label: "Warp";
+}, {
+    readonly id: "ripples";
+    readonly label: "Ondas de agua";
+}, {
+    readonly id: "life";
+    readonly label: "Juego de la vida";
+}, {
+    readonly id: "flow";
+    readonly label: "Campo de flujo";
+}, {
+    readonly id: "fire";
+    readonly label: "Fuego";
+}, {
+    readonly id: "ocean";
+    readonly label: "Atardecer en el mar";
+}, {
+    readonly id: "tunnel";
+    readonly label: "Túnel";
+}, {
+    readonly id: "aurora";
+    readonly label: "Aurora";
+}];
+export type TextmodeBackgroundProps = {
+    sketch?: (typeof TEXTMODE_SKETCHES)[number]["id"];
+    /** tamaño de celda en px */
+    fontSize?: number;
+    /** cómo se reinterpretan los colores con los tokens del tema */
+    palette?: Palette;
+    /** 0–1: fuerza de la paleta */
+    tintAmount?: number;
+    frameRate?: number;
+    opacity?: number;
+    className?: string;
+};
+/**
+ * Fondo generativo de textmode.js que rellena su contenedor (`position: relative` y con tamaño).
+ * Cada celda es un carácter con color propio; el puntero interactúa con el sketch.
+ * `palette` reinterpreta los colores con los tokens del tema (CSS), sin recrear el lienzo.
+ * Al cambiar `sketch`, `fontSize` o `frameRate` se recrea.
+ */
+export default function TextmodeBackground({ sketch, fontSize, palette, tintAmount, frameRate, opacity, className }: TextmodeBackgroundProps): import("react").JSX.Element;

package/dist/components/ui/TextmodeBackground.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { sketches } from "../../lib/sketches/registry.js";
+/** Sketches generativos de textmode.js que no dependen del texto del usuario ni del scroll. */
+export const TEXTMODE_SKETCHES = [
+    { id: "plasma", label: "Plasma" },
+    { id: "matrix", label: "Lluvia digital" },
+    { id: "starfield", label: "Warp" },
+    { id: "ripples", label: "Ondas de agua" },
+    { id: "life", label: "Juego de la vida" },
+    { id: "flow", label: "Campo de flujo" },
+    { id: "fire", label: "Fuego" },
+    { id: "ocean", label: "Atardecer en el mar" },
+    { id: "tunnel", label: "Túnel" },
+    { id: "aurora", label: "Aurora" },
+];
+/**
+ * Fondo generativo de textmode.js que rellena su contenedor (`position: relative` y con tamaño).
+ * Cada celda es un carácter con color propio; el puntero interactúa con el sketch.
+ * `palette` reinterpreta los colores con los tokens del tema (CSS), sin recrear el lienzo.
+ * Al cambiar `sketch`, `fontSize` o `frameRate` se recrea.
+ */
+export default function TextmodeBackground({ sketch = "plasma", fontSize = 14, palette = "tint", tintAmount = 0.6, frameRate = 60, opacity = 1, className = "" }) {
+    const host = useRef(null);
+    useEffect(() => {
+        const el = host.current;
+        const def = sketches[sketch];
+        if (!el || !def)
+            return;
+        let disposed = false;
+        let instance = null;
+        const canvas = document.createElement("canvas");
+        canvas.className = "ui-fill-canvas";
+        el.appendChild(canvas);
+        const create = async (w, h) => {
+            const { textmode } = await import("textmode.js");
+            if (disposed)
+                return;
+            // Con un canvas propio, textmode.js toma el tamaño del elemento
+            canvas.width = w;
+            canvas.height = h;
+            const t = textmode.create({
+                canvas,
+                width: w,
+                height: h,
+                fontSize,
+                frameRate,
+                pixelDensity: Math.min(window.devicePixelRatio || 1, 2),
+            });
+            instance = t;
+            def.setup(t);
+        };
+        const handleSize = (w, h) => {
+            if (w < 4 || h < 4)
+                return;
+            if (!instance)
+                void create(w, h);
+            else
+                instance.resizeCanvas(w, h);
+        };
+        // Medimos ya mismo, sin esperar al primer aviso del ResizeObserver: si este componente se
+        // monta dentro de un contenedor `position: fixed` (p. ej. un fondo que se intercambia al
+        // hacer scroll), su primer disparo puede llegar con un tamaño todavía sin asentar y, como
+        // luego el elemento no vuelve a cambiar de tamaño, el lienzo se queda para siempre en el
+        // 300×150 por defecto de <canvas> — negro a efectos prácticos. Medir el rect real aquí
+        // cubre ese caso sin afectar al camino normal (el ResizeObserver sigue llevando los cambios
+        // posteriores).
+        const initial = el.getBoundingClientRect();
+        handleSize(Math.round(initial.width), Math.round(initial.height));
+        const ro = new ResizeObserver(([entry]) => {
+            handleSize(Math.round(entry.contentRect.width), Math.round(entry.contentRect.height));
+        });
+        ro.observe(el);
+        return () => {
+            disposed = true;
+            ro.disconnect();
+            instance?.destroy();
+            canvas.remove();
+        };
+    }, [sketch, fontSize, frameRate]);
+    return (_jsxs("div", { className: `ui-fill ui-pal ui-pal--${palette} ${className}`, style: { "--tint": tintAmount, "--op": opacity }, "aria-hidden": true, children: [_jsx("div", { ref: host, className: "ui-fill__media" }), _jsx("i", { className: "ui-pal__a" }), _jsx("i", { className: "ui-pal__b" })] }));
+}

package/dist/components/ui/Timeline.d.ts

@@ -0,0 +1,13 @@
+import { type Variant } from "./variants.js";
+export type TimelineProps = {
+    /** un paso por línea con el formato «Título|Descripción» */
+    steps?: string;
+    /** contenido del marcador: número, letra o carácter fijo */
+    marker?: "number" | "dot" | "glyph";
+    /** con marker="glyph": un carácter, o un icono pixel art con `icon:star` (ver Icon) */
+    glyph?: string;
+    variant?: Variant;
+    className?: string;
+};
+/** Línea de pasos vertical: proceso, hoja de ruta o historial. */
+export default function Timeline({ steps, marker, glyph, variant, className }: TimelineProps): import("react").JSX.Element;

package/dist/components/ui/Timeline.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderGlyph } from "./Icon.js";
+import { vcls } from "./variants.js";
+/** Línea de pasos vertical: proceso, hoja de ruta o historial. */
+export default function Timeline({ steps = "Reserva|Eliges día y nivel en menos de un minuto.\nLlegada|Recibes neopreno y tabla en la playa.\nClase|Dos horas con monitor titulado.\nRepite|Bono de cinco clases con descuento.", marker = "number", glyph = "*", variant = "minimal", className = "" }) {
+    const rows = steps.split("\n").map((l) => l.split("|")).filter((p) => p[0]?.trim());
+    return (_jsx("ol", { className: `ui-tl ${vcls(variant)} ${className}`, children: rows.map(([t, d], i) => (_jsxs("li", { children: [_jsx("span", { className: "ui-tl__dot", "aria-hidden": true, children: marker === "number" ? i + 1 : marker === "glyph" ? renderGlyph(glyph, 14) : "" }), _jsx("strong", { children: t }), d && _jsx("span", { children: d })] }, t + i))) }));
+}

package/dist/components/ui/Toast.d.ts

@@ -0,0 +1,30 @@
+import { type Intent } from "./intent.js";
+import { type Variant } from "./variants.js";
+export type ToastProps = {
+    /** color semántico común (ver intent.ts); `accent` y `neutral` dan un mensaje sin icono de estado */
+    intent?: Intent;
+    /** notificación de «en curso», con indicador de carga (ignora `intent`) */
+    loading?: boolean;
+    /** @deprecated usa `intent` (y `loading`): "message" | "loading" | "success" | "info" | "warning" | "danger" | "error" */
+    kind?: "message" | "loading" | "success" | "info" | "warning" | "danger" | "error";
+    title?: string;
+    description?: string;
+    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    variant?: Variant;
+    /** cambia (a más de 0) para lanzar una notificación desde fuera, igual que Modal/Drawer */
+    playKey?: number;
+    /** id fijo del Toaster: con él, código externo puede lanzar en la misma instancia pasando `toasterId` */
+    id?: string;
+    /** oculta el botón de demostración «Mostrar notificación», cuando el disparo lo controla el proyecto */
+    showTrigger?: boolean;
+    className?: string;
+};
+/**
+ * Notificación temporal apilable. Construida sobre `sonner` (apilado, temporizador, gestos táctiles
+ * y accesibilidad ya resueltos por una librería consolidada) en vez de reimplementarlo: solo se le da
+ * el aspecto del kit por encima, con `unstyled` + clases `ui-toast*` que leen tokens y `--s-*`.
+ * Cada instancia usa un `id` propio (o el que le pases) para no cruzarse con otras — p. ej. en
+ * «Comparar los 7 estilos», donde conviven 7 `<Toaster>` a la vez, o cuando otra parte de la página
+ * necesita lanzar en la misma instancia con `toast.success(msg, { toasterId })`.
+ */
+export default function Toast({ intent, loading, kind, title, description, position, variant, playKey, id, showTrigger, className, }: ToastProps): import("react").JSX.Element;

package/dist/components/ui/Toast.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId } from "react";
+import { Toaster, toast as sonnerToast } from "sonner";
+import Button from "./Button.js";
+import { toIntent } from "./intent.js";
+import { vcls } from "./variants.js";
+/**
+ * Notificación temporal apilable. Construida sobre `sonner` (apilado, temporizador, gestos táctiles
+ * y accesibilidad ya resueltos por una librería consolidada) en vez de reimplementarlo: solo se le da
+ * el aspecto del kit por encima, con `unstyled` + clases `ui-toast*` que leen tokens y `--s-*`.
+ * Cada instancia usa un `id` propio (o el que le pases) para no cruzarse con otras — p. ej. en
+ * «Comparar los 7 estilos», donde conviven 7 `<Toaster>` a la vez, o cuando otra parte de la página
+ * necesita lanzar en la misma instancia con `toast.success(msg, { toasterId })`.
+ */
+export default function Toast({ intent, loading, kind, title = "Cambios guardados", description = "Tu perfil se actualizó correctamente.", position = "bottom-right", variant = "glass", playKey = 0, id, showTrigger = true, className = "", }) {
+    const autoId = useId();
+    const toasterId = id ?? autoId;
+    const fire = () => {
+        const opts = { description: description || undefined, toasterId };
+        const isLoading = loading ?? kind === "loading";
+        const i = intent ?? (kind === "message" ? "neutral" : kind === "loading" || kind === undefined ? "success" : toIntent(kind, "success"));
+        if (isLoading)
+            sonnerToast.loading(title, opts);
+        else if (i === "accent" || i === "neutral")
+            sonnerToast(title, opts);
+        else
+            sonnerToast[i === "danger" ? "error" : i](title, opts);
+    };
+    useEffect(() => {
+        if (playKey > 0)
+            fire();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [playKey]);
+    return (_jsxs("div", { className: className, children: [_jsx(Toaster, { id: toasterId, position: position, toastOptions: {
+                    unstyled: true,
+                    classNames: {
+                        toast: `ui-toast ui-surface ${vcls(variant)}`,
+                        title: "ui-toast__title",
+                        description: "ui-toast__desc",
+                        actionButton: "ui-toast__action",
+                        cancelButton: "ui-toast__cancel",
+                        closeButton: "ui-toast__close",
+                        icon: "ui-toast__icon",
+                    },
+                } }), showTrigger && _jsx(Button, { label: "Mostrar notificaci\u00F3n", variant: variant, emphasis: "primary", onClick: fire })] }));
+}

package/dist/components/ui/Toggle.d.ts

@@ -0,0 +1,13 @@
+import { type Variant } from "./variants.js";
+export type ToggleProps = {
+    label?: string;
+    defaultChecked?: boolean;
+    variant?: Variant;
+    size?: "sm" | "md" | "lg";
+    /** textos de los estilos retro y terminal, que no dibujan la pista */
+    onText?: string;
+    offText?: string;
+    className?: string;
+};
+/** Interruptor accesible (`role="switch"`). Retro y terminal lo muestran como texto `[ON ]`/`[OFF]`. */
+export default function Toggle({ label, defaultChecked, variant, size, onText, offText, className }: ToggleProps): import("react").JSX.Element;

package/dist/components/ui/Toggle.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { vcls } from "./variants.js";
+/** Interruptor accesible (`role="switch"`). Retro y terminal lo muestran como texto `[ON ]`/`[OFF]`. */
+export default function Toggle({ label = "Notificaciones", defaultChecked = true, variant = "glass", size = "md", onText = "ON ", offText = "OFF", className = "" }) {
+    const [on, setOn] = useState(defaultChecked);
+    useEffect(() => setOn(defaultChecked), [defaultChecked]);
+    return (_jsxs("button", { type: "button", role: "switch", "aria-checked": on, onClick: () => setOn((v) => !v), className: `ui-toggle ui-toggle--${size} ${on ? "is-on" : ""} ${vcls(variant)} ${className}`, children: [_jsx("span", { className: "ui-toggle__track", "aria-hidden": true, children: _jsx("span", { className: "ui-toggle__thumb" }) }), _jsxs("span", { className: "ui-toggle__text", "aria-hidden": true, children: ["[", on ? onText : offText, "]"] }), label && _jsx("span", { children: label })] }));
+}

package/dist/components/ui/Tooltip.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+import { type Variant } from "./variants.js";
+export type TooltipProps = {
+    /** texto disparador cuando no hay `children` (se subraya con puntos, como una abreviatura) */
+    label?: string;
+    content?: string;
+    side?: "top" | "right" | "bottom" | "left";
+    variant?: Variant;
+    /** el disparador real: un botón, un icono, un enlace… Si es un único elemento, recibe `aria-describedby` */
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * Texto de ayuda al posar el ratón o el foco. Solo CSS (sin JS): aparece con `:hover` y con el foco dentro
+ * (`:focus-within`), así funciona igual envolviendo un texto que un botón.
+ *
+ * Con `children`, el disparador es lo que envuelves y el foco lo pone ese elemento (no se añade una parada de
+ * tabulador extra). Sin él, se pinta `label` como texto enfocable.
+ */
+export default function Tooltip({ label, content, side, variant, children, className }: TooltipProps): import("react").JSX.Element;

package/dist/components/ui/Tooltip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useId } from "react";
+import { vcls } from "./variants.js";
+/**
+ * Texto de ayuda al posar el ratón o el foco. Solo CSS (sin JS): aparece con `:hover` y con el foco dentro
+ * (`:focus-within`), así funciona igual envolviendo un texto que un botón.
+ *
+ * Con `children`, el disparador es lo que envuelves y el foco lo pone ese elemento (no se añade una parada de
+ * tabulador extra). Sin él, se pinta `label` como texto enfocable.
+ */
+export default function Tooltip({ label = "Pasa el ratón por aquí", content = "Esto es una pista contextual.", side = "top", variant = "glass", children, className = "" }) {
+    const id = useId();
+    const wraps = children !== undefined && children !== null;
+    const trigger = !wraps
+        ? label
+        : isValidElement(children)
+            ? cloneElement(children, { "aria-describedby": id })
+            : children;
+    return (_jsxs("span", { className: `ui-tip ui-tip--${side} ${wraps ? "ui-tip--wrap" : ""} ${className}`, tabIndex: wraps ? undefined : 0, "aria-describedby": wraps ? undefined : id, children: [trigger, _jsx("span", { id: id, role: "tooltip", className: `ui-tip__bubble ui-surface ${vcls(variant)}`, children: content })] }));
+}

package/dist/components/ui/Typewriter.d.ts

@@ -0,0 +1,20 @@
+import { type Variant } from "./variants.js";
+export type TypewriterProps = {
+    /** frases, una por línea */
+    phrases?: string;
+    /** texto fijo delante de la frase que cambia */
+    prefix?: string;
+    typeSpeed?: number;
+    deleteSpeed?: number;
+    /** pausa con la frase completa, en segundos */
+    pause?: number;
+    cursor?: "bar" | "block" | "underscore" | "none";
+    /** tamaño de letra en px */
+    fontSize?: number;
+    /** @deprecated usa `fontSize` */
+    size?: number;
+    variant?: Variant;
+    className?: string;
+};
+/** Frase que se escribe y se borra en bucle, típica de un titular de héroe. Sin movimiento muestra la primera. */
+export default function Typewriter({ phrases, prefix, typeSpeed, deleteSpeed, pause, cursor, fontSize, size: legacySize, variant, className }: TypewriterProps): import("react").JSX.Element;

package/dist/components/ui/Typewriter.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { vcls } from "./variants.js";
+/** Frase que se escribe y se borra en bucle, típica de un titular de héroe. Sin movimiento muestra la primera. */
+export default function Typewriter({ phrases = "surf en Cantabria\nolas para todos\nel mar te espera", prefix = "Aprende ", typeSpeed = 14, deleteSpeed = 30, pause = 1.4, cursor = "bar", fontSize, size: legacySize, variant = "minimal", className = "" }) {
+    const size = fontSize ?? legacySize ?? 40;
+    const list = useMemo(() => phrases.split("\n").filter(Boolean), [phrases]);
+    const [text, setText] = useState(list[0] ?? "");
+    useEffect(() => {
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches || !list.length) {
+            setText(list[0] ?? "");
+            return;
+        }
+        let live = true;
+        let idx = 0;
+        let n = 0;
+        let dir = 1;
+        let timer;
+        const step = () => {
+            if (!live)
+                return;
+            const full = list[idx % list.length];
+            n += dir;
+            setText(full.slice(0, n));
+            if (dir === 1 && n >= full.length) {
+                dir = -1;
+                timer = setTimeout(step, pause * 1000);
+            }
+            else if (dir === -1 && n <= 0) {
+                dir = 1;
+                idx++;
+                timer = setTimeout(step, 250);
+            }
+            else
+                timer = setTimeout(step, 1000 / (dir === 1 ? typeSpeed : deleteSpeed));
+        };
+        n = 0;
+        step();
+        return () => {
+            live = false;
+            clearTimeout(timer);
+        };
+    }, [list, typeSpeed, deleteSpeed, pause]);
+    return (_jsxs("p", { className: `ui-type ${vcls(variant)} ${className}`, style: { fontSize: size, margin: 0 }, "aria-label": `${prefix}${list[0] ?? ""}`, children: [prefix, _jsx("span", { style: { color: "var(--acc)" }, children: text }), cursor !== "none" && _jsx("i", { className: `ui-type__cursor ui-type__cursor--${cursor}`, "aria-hidden": true })] }));
+}

package/dist/components/ui/VideoPlayer.d.ts

@@ -0,0 +1,81 @@
+import type { ASCII_STYLES } from "./AsciiBackground.js";
+import { type Variant } from "./variants.js";
+export type VideoPlayerProps = {
+    /** archivo (.mp4, .webm…), o un enlace de YouTube o Vimeo (se carga bajo demanda, sin cookies hasta pulsar play) */
+    src: string;
+    /** imagen previa: URL, ruta o `gen:N` (escena de ejemplo generada). En YouTube, si falta, se usa su miniatura */
+    poster?: string;
+    /** título: se muestra sobre el vídeo antes de empezar y sirve de nombre accesible */
+    title?: string;
+    /** subtítulos de un archivo: «url|idioma|etiqueta» (formato WebVTT), p. ej. `/subs/es.vtt|es|Español` */
+    captions?: string;
+    ratio?: "16/9" | "21/9" | "4/3" | "1/1" | "9/16";
+    autoplay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    /** full = barra completa · minimal = solo play, progreso y pantalla completa · none = sin controles (clic para pausar) */
+    controls?: "full" | "minimal" | "none";
+    /** segundo en el que empieza */
+    startAt?: number;
+    /**
+     * Modo fondo: rellena su contenedor (que debe tener `position: relative` y tamaño), sin controles, mudo, en bucle y
+     * decorativo — igual que los fondos de escena del kit. Se pausa fuera de pantalla y con `prefers-reduced-motion`.
+     */
+    background?: boolean;
+    /** pausa el vídeo cuando sale de pantalla y lo reanuda al volver (por defecto sí) */
+    pauseOffscreen?: boolean;
+    /** capa de líneas de barrido tipo CRT sobre la imagen */
+    scanlines?: boolean;
+    /**
+     * Convierte el vídeo en tiempo real a caracteres con asciify-engine (Studio) y lo dibuja encima del original, que sigue
+     * reproduciéndose debajo — pensado para poder revelarlo más adelante (p. ej. con hover). Necesita que el servidor del
+     * vídeo permita CORS (Cloudinary y los archivos del propio sitio lo permiten); si no, se avisa y se muestra el vídeo normal.
+     * No aplica a YouTube/Vimeo.
+     */
+    ascii?: boolean;
+    /** estilo del efecto ASCII (los mismos que `AsciiBackground`) */
+    asciiStyle?: (typeof ASCII_STYLES)[number];
+    /** tamaño de celda del efecto ASCII en px: menos = más detalle y más coste */
+    asciiCell?: number;
+    /** source = colores del vídeo · accent = monocromo con el acento · gray = grises */
+    asciiColor?: "source" | "accent" | "gray";
+    /** hover del efecto ASCII (los mismos que `AsciiBackground`): reacciona al puntero sobre el vídeo */
+    asciiHover?: "none" | "trail" | "water" | "contour" | "dissolve" | "silk" | "vortex";
+    /** 0–1: fuerza del hover ASCII */
+    asciiHoverStrength?: number;
+    /** 0–1: radio del hover ASCII, relativo al tamaño del vídeo */
+    asciiHoverRadius?: number;
+    variant?: Variant;
+    className?: string;
+};
+type Embed = {
+    kind: "youtube" | "vimeo";
+    /** id del vídeo; vacío si el enlace es solo una lista de reproducción de YouTube */
+    id: string;
+    /** lista de reproducción de YouTube (`list=`) */
+    list?: string;
+    /** segundo de inicio (`t=` o `start=`) */
+    start?: number;
+    /** el enlace original, para ofrecer «abrir en YouTube» si el autor no permite incrustarlo */
+    url: string;
+};
+/**
+ * Reconoce enlaces de YouTube (watch, youtu.be, shorts, live, embed, playlist, con `list=` y `t=`) y de Vimeo; cualquier
+ * otra cosa se trata como un archivo de vídeo.
+ */
+export declare function parseEmbed(src: string): Embed | null;
+/**
+ * Carátula de un vídeo alojado en Cloudinary: la propia URL con otra extensión y una transformación que extrae un fotograma
+ * (`so_` = segundo, `w_` = ancho). Devuelve `undefined` para cualquier otra fuente.
+ */
+export declare function cloudinaryPoster(src: string, second?: number, width?: number): string | undefined;
+/**
+ * Reproductor de vídeo del kit, construido sobre el `<video>` nativo: sin dependencias, con controles propios del estilo
+ * (cuadrados, borde duro, acento) y todo lo que una landing necesita — poster, atajos de teclado, arrastre en la barra,
+ * velocidad, volumen, subtítulos, imagen en imagen, pantalla completa, pausa fuera de pantalla y modo fondo.
+ * Los enlaces de YouTube/Vimeo se cargan con una carátula que solo crea el iframe (sin cookies) al pulsar play.
+ *
+ * Atajos con el reproductor enfocado: espacio/K play·pausa, ←/→ ±5 s (J/L ±10 s), ↑/↓ volumen, M silencio, F pantalla completa, C subtítulos, 0–9 salta al 0–90 %.
+ */
+export default function VideoPlayer({ src, poster, title, captions, ratio, autoplay, muted, loop, controls, startAt, background, pauseOffscreen, scanlines, ascii, asciiStyle, asciiCell, asciiColor, asciiHover, asciiHoverStrength, asciiHoverRadius, variant, className }: VideoPlayerProps): import("react").JSX.Element;
+export {};