trama-ui 0.1.0

package/dist/components/ui/VideoPlayer.js

@@ -0,0 +1,379 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { resolveImage } from "../../lib/ui/placeholder.js";
+import { renderGlyph } from "./Icon.js";
+import { vcls } from "./variants.js";
+/**
+ * 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 function parseEmbed(src) {
+    const url = src.trim();
+    const yt = /(?:(?:www\.|m\.|music\.)?youtube(?:-nocookie)?\.com\/(?:watch\?(?:[^#]*&)?v=|shorts\/|embed\/|live\/|v\/)|youtu\.be\/)([\w-]{11})/.exec(url);
+    const list = /[?&]list=([\w-]+)/.exec(url)?.[1];
+    const t = /[?&#](?:t|start)=(\d+)/.exec(url)?.[1];
+    const start = t ? parseInt(t, 10) : undefined;
+    if (yt)
+        return { kind: "youtube", id: yt[1], list, start, url };
+    if (list && /youtube\.com\/playlist/.test(url))
+        return { kind: "youtube", id: "", list, url };
+    const vm = /vimeo\.com\/(?:video\/)?(\d+)/.exec(url);
+    if (vm)
+        return { kind: "vimeo", id: vm[1], start, url };
+    return 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 function cloudinaryPoster(src, second = 1, width = 960) {
+    if (!/res\.cloudinary\.com\/[^/]+\/video\/upload\//.test(src))
+        return undefined;
+    return src.replace("/video/upload/", `/video/upload/so_${second},w_${width}/`).replace(/\.[a-z0-9]+$/i, ".jpg");
+}
+const fmt = (s) => {
+    if (!isFinite(s) || s < 0)
+        s = 0;
+    const m = Math.floor(s / 60);
+    return `${m}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
+};
+const SPEEDS = [0.5, 1, 1.25, 1.5, 2];
+/** Barra de valor 0..1 con relleno cuadrado, arrastrable y accesible (progreso y volumen comparten esta pieza). */
+function Bar({ value, buffered = 0, onChange, label, valueText, step = 0.05, className = "" }) {
+    const drag = useRef(false);
+    const set = (e) => {
+        const r = e.currentTarget.getBoundingClientRect();
+        onChange(Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)));
+    };
+    const onKey = (e) => {
+        const d = e.key === "ArrowRight" || e.key === "ArrowUp" ? step : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -step : e.key === "Home" ? -1 : e.key === "End" ? 1 : 0;
+        if (!d)
+            return;
+        e.preventDefault();
+        e.stopPropagation(); // que la barra no dispare también los atajos del reproductor
+        onChange(Math.min(1, Math.max(0, value + d)));
+    };
+    return (_jsxs("div", { className: `ui-vid__bar ${className}`, role: "slider", tabIndex: 0, "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(value * 100), "aria-valuetext": valueText, onPointerDown: (e) => {
+            drag.current = true;
+            e.currentTarget.setPointerCapture(e.pointerId);
+            set(e);
+        }, onPointerMove: (e) => drag.current && set(e), onPointerUp: () => (drag.current = false), onPointerCancel: () => (drag.current = false), onKeyDown: onKey, children: [_jsx("span", { className: "ui-vid__bar-buf", style: { width: `${buffered * 100}%` } }), _jsx("span", { className: "ui-vid__bar-fill", style: { width: `${value * 100}%` } }), _jsx("span", { className: "ui-vid__bar-thumb", style: { left: `${value * 100}%` } })] }));
+}
+/** YouTube/Vimeo bajo demanda: hasta pulsar play solo hay una imagen; el iframe (sin cookies) se crea entonces. */
+function EmbedFrame({ embed, poster, title }) {
+    const [on, setOn] = useState(false);
+    const thumb = poster ? resolveImage(poster) : embed.kind === "youtube" && embed.id ? `https://i.ytimg.com/vi/${embed.id}/hqdefault.jpg` : undefined;
+    const q = new URLSearchParams({ autoplay: "1", playsinline: "1" });
+    if (embed.start)
+        q.set(embed.kind === "youtube" ? "start" : "t", embed.kind === "youtube" ? String(embed.start) : `${embed.start}s`);
+    let url;
+    if (embed.kind === "youtube") {
+        q.set("rel", "0");
+        q.set("modestbranding", "1");
+        if (embed.list)
+            q.set("list", embed.list);
+        // Solo una lista de reproducción: YouTube la sirve como «videoseries»
+        url = `https://www.youtube-nocookie.com/embed/${embed.id || "videoseries"}?${q}`;
+    }
+    else {
+        q.set("dnt", "1");
+        url = `https://player.vimeo.com/video/${embed.id}?${q}`;
+    }
+    const label = embed.kind === "youtube" ? "YouTube" : "Vimeo";
+    if (on)
+        return (_jsxs(_Fragment, { children: [_jsx("iframe", { className: "ui-vid__frame", src: url, title: title, referrerPolicy: "strict-origin-when-cross-origin", allow: "autoplay; fullscreen; picture-in-picture; encrypted-media", allowFullScreen: true }), _jsxs("a", { className: "ui-vid__tag ui-vid__tag--link", href: embed.url, target: "_blank", rel: "noopener noreferrer", children: ["Abrir en ", label, " \u2197"] })] }));
+    return (_jsxs("button", { type: "button", className: "ui-vid__facade", onClick: () => setOn(true), "aria-label": `Reproducir: ${title}`, children: [thumb && _jsx("img", { src: thumb, alt: "", loading: "lazy", draggable: false }), _jsx("span", { className: "ui-vid__big", "aria-hidden": true, children: renderGlyph("icon:play", 34) }), _jsxs("span", { className: "ui-vid__tag", children: [label, embed.list ? " · lista" : "", " \u00B7 se carga al pulsar"] })] }));
+}
+/**
+ * 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 = "Vídeo", captions, ratio = "16/9", autoplay = false, muted = false, loop = false, controls = "full", startAt = 0, background = false, pauseOffscreen = true, scanlines = false, ascii = false, asciiStyle = "ascii", asciiCell = 6, asciiColor = "source", asciiHover = "water", asciiHoverStrength = 0.7, asciiHoverRadius = 0.28, variant = "retro", className = "" }) {
+    const embed = background ? null : parseEmbed(src);
+    const asciiHost = useRef(null);
+    const asciiPlayer = useRef(null);
+    const [asciiFailed, setAsciiFailed] = useState(false);
+    const asciiOn = ascii && !embed && !asciiFailed;
+    useEffect(() => setAsciiFailed(false), [src, ascii]); // otra fuente o volver a activarlo: se vuelve a intentar
+    const wrap = useRef(null);
+    const video = useRef(null);
+    const idleTimer = useRef(undefined);
+    const autoPaused = useRef(false);
+    const [playing, setPlaying] = useState(false);
+    const [started, setStarted] = useState(false);
+    const [time, setTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [buffered, setBuffered] = useState(0);
+    const [isMuted, setIsMuted] = useState(muted || background || autoplay);
+    const [volume, setVolume] = useState(1);
+    const [speed, setSpeed] = useState(1);
+    const [full, setFull] = useState(false);
+    const [idle, setIdle] = useState(false);
+    const [capOn, setCapOn] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const [reduced, setReduced] = useState(false);
+    const cap = captions?.split("|");
+    const bg = background;
+    const showControls = !bg && controls !== "none";
+    useEffect(() => {
+        const mq = matchMedia("(prefers-reduced-motion: reduce)");
+        setReduced(mq.matches);
+        const on = () => setReduced(mq.matches);
+        mq.addEventListener("change", on);
+        return () => mq.removeEventListener("change", on);
+    }, []);
+    const play = useCallback(() => {
+        const v = video.current;
+        if (!v)
+            return;
+        autoPaused.current = false;
+        void v.play().catch(() => { });
+    }, []);
+    const pause = useCallback(() => video.current?.pause(), []);
+    const toggle = useCallback(() => (video.current?.paused ? play() : pause()), [play, pause]);
+    const seek = useCallback((t) => {
+        const v = video.current;
+        if (v && isFinite(v.duration))
+            v.currentTime = Math.min(v.duration, Math.max(0, t));
+    }, []);
+    const setVol = useCallback((x) => {
+        const v = video.current;
+        if (!v)
+            return;
+        v.volume = x;
+        v.muted = x === 0;
+    }, []);
+    const toggleMute = useCallback(() => {
+        const v = video.current;
+        if (v)
+            v.muted = !v.muted;
+    }, []);
+    const toggleFull = useCallback(() => {
+        const el = wrap.current;
+        if (!el)
+            return;
+        if (document.fullscreenElement)
+            void document.exitFullscreen();
+        else
+            void el.requestFullscreen?.();
+    }, []);
+    const toggleCap = useCallback(() => {
+        const v = video.current;
+        const track = v?.textTracks[0];
+        if (!track)
+            return;
+        const on = track.mode !== "showing";
+        track.mode = on ? "showing" : "hidden";
+        setCapOn(on);
+    }, []);
+    // Autoplay / modo fondo: solo si el usuario no pidió menos movimiento, y siempre mudo (política de los navegadores)
+    useEffect(() => {
+        const v = video.current;
+        if (!v || embed)
+            return;
+        if ((autoplay || bg) && !reduced) {
+            v.muted = true;
+            void v.play().catch(() => { });
+        }
+        else if (bg && reduced)
+            v.pause();
+    }, [autoplay, bg, reduced, embed, src]);
+    // Pausa fuera de pantalla: ahorra CPU y batería en landings con varios vídeos
+    useEffect(() => {
+        const el = wrap.current;
+        if (!el || embed || !pauseOffscreen)
+            return;
+        const io = new IntersectionObserver(([e]) => {
+            const v = video.current;
+            if (!v)
+                return;
+            if (!e.isIntersecting && !v.paused) {
+                autoPaused.current = true;
+                v.pause();
+            }
+            else if (e.isIntersecting && autoPaused.current && !reduced) {
+                autoPaused.current = false;
+                void v.play().catch(() => { });
+            }
+        }, { threshold: 0.2 });
+        io.observe(el);
+        return () => io.disconnect();
+    }, [pauseOffscreen, embed, reduced]);
+    useEffect(() => {
+        const on = () => setFull(document.fullscreenElement === wrap.current);
+        document.addEventListener("fullscreenchange", on);
+        return () => document.removeEventListener("fullscreenchange", on);
+    }, []);
+    // Efecto ASCII: asciify-engine Studio toma el propio <video> como fuente y pinta encima. Se monta una vez por vídeo y los
+    // ajustes se aplican en caliente (efecto de abajo); se pausa con el vídeo para no gastar CPU en un fotograma que no cambia.
+    const asciiSettings = useCallback(() => ({
+        style: asciiStyle,
+        cellSize: asciiCell,
+        colorMode: asciiColor,
+        ink: (wrap.current && getComputedStyle(wrap.current).getPropertyValue("--acc").trim()) || "#7cc4ff",
+        effects: { bloom: 0, scanlines: 0, vignette: 0, grain: 0, glitch: 0 },
+        hover: { effect: asciiHover, strength: asciiHoverStrength, radius: asciiHoverRadius },
+    }), [asciiStyle, asciiCell, asciiColor, asciiHover, asciiHoverStrength, asciiHoverRadius]);
+    const settingsRef = useRef(asciiSettings);
+    settingsRef.current = asciiSettings;
+    // El lienzo solo corre si está a la vista y hay algo que animar: el vídeo reproduciéndose o un hover que reaccione al puntero
+    const asciiLive = useRef({ visible: true, playing: false, hover: asciiHover });
+    asciiLive.current.hover = asciiHover;
+    const syncAscii = useCallback(() => {
+        const l = asciiLive.current;
+        asciiPlayer.current?.pause(!(l.visible && (l.playing || l.hover !== "none")));
+    }, []);
+    useEffect(() => {
+        const host = asciiHost.current;
+        const v = video.current;
+        if (!asciiOn || !host || !v)
+            return;
+        let disposed = false;
+        let ro;
+        const canvas = document.createElement("canvas");
+        canvas.className = "ui-fill-canvas";
+        host.appendChild(canvas);
+        const start = async () => {
+            const { mountStudioMedia, normalizeStudioSettings } = await import("asciify-engine/studio");
+            if (disposed)
+                return;
+            const media = { source: v, width: v.videoWidth || 640, height: v.videoHeight || 360, duration: v.duration || 0, animated: true, seek: async () => { }, frame: () => v, destroy: () => { } };
+            const w = Math.max(2, Math.round(host.clientWidth));
+            const h = Math.max(2, Math.round(host.clientHeight));
+            const p = mountStudioMedia(canvas, media, {
+                settings: normalizeStudioSettings(settingsRef.current()),
+                width: w,
+                height: h,
+                fps: 30,
+                onError: () => setAsciiFailed(true), // p. ej. lienzo contaminado: el servidor del vídeo no permite CORS
+            });
+            p.resize(w, h, Math.min(devicePixelRatio || 1, 2));
+            asciiPlayer.current = p;
+            syncAscii();
+            ro = new ResizeObserver(() => {
+                const rw = Math.round(host.clientWidth);
+                const rh = Math.round(host.clientHeight);
+                if (rw > 1 && rh > 1)
+                    p.resize(rw, rh, Math.min(devicePixelRatio || 1, 2));
+            });
+            ro.observe(host);
+        };
+        if (v.readyState >= 1)
+            void start();
+        else
+            v.addEventListener("loadedmetadata", () => void start(), { once: true });
+        const io = new IntersectionObserver(([e]) => {
+            asciiLive.current.visible = e.isIntersecting;
+            syncAscii();
+        });
+        io.observe(host);
+        const redraw = () => asciiPlayer.current?.redraw();
+        v.addEventListener("seeked", redraw);
+        v.addEventListener("loadeddata", redraw);
+        return () => {
+            disposed = true;
+            v.removeEventListener("seeked", redraw);
+            v.removeEventListener("loadeddata", redraw);
+            ro?.disconnect();
+            io.disconnect();
+            try {
+                asciiPlayer.current?.destroy?.();
+            }
+            catch {
+                /* ya liberado */
+            }
+            asciiPlayer.current = null;
+            canvas.remove();
+        };
+    }, [asciiOn, src, syncAscii]);
+    useEffect(() => {
+        asciiPlayer.current?.update(settingsRef.current());
+    }, [asciiStyle, asciiCell, asciiColor, asciiHover, asciiHoverStrength, asciiHoverRadius]);
+    useEffect(() => {
+        asciiLive.current.playing = playing;
+        syncAscii();
+        if (!playing)
+            asciiPlayer.current?.redraw();
+    }, [playing, asciiHover, syncAscii]);
+    // Controles que se ocultan tras unos segundos sin movimiento mientras se reproduce
+    const wake = useCallback(() => {
+        setIdle(false);
+        clearTimeout(idleTimer.current);
+        idleTimer.current = setTimeout(() => setIdle(true), 2600);
+    }, []);
+    useEffect(() => () => clearTimeout(idleTimer.current), []);
+    const onKey = (e) => {
+        if (bg || embed || controls === "none")
+            return;
+        const v = video.current;
+        if (!v)
+            return;
+        const k = e.key.toLowerCase();
+        let handled = true;
+        if (k === " " || k === "k")
+            toggle();
+        else if (k === "arrowleft")
+            seek(v.currentTime - 5);
+        else if (k === "arrowright")
+            seek(v.currentTime + 5);
+        else if (k === "j")
+            seek(v.currentTime - 10);
+        else if (k === "l")
+            seek(v.currentTime + 10);
+        else if (k === "arrowup")
+            setVol(Math.min(1, v.volume + 0.1));
+        else if (k === "arrowdown")
+            setVol(Math.max(0, v.volume - 0.1));
+        else if (k === "m")
+            toggleMute();
+        else if (k === "f")
+            toggleFull();
+        else if (k === "c")
+            toggleCap();
+        else if (/^[0-9]$/.test(k))
+            seek((v.duration || 0) * (parseInt(k, 10) / 10));
+        else
+            handled = false;
+        if (handled) {
+            e.preventDefault();
+            wake();
+        }
+    };
+    const cls = ["ui-vid", bg ? "ui-vid--bg" : `ui-surface ${vcls(variant)}`, playing ? "is-playing" : "", started ? "is-started" : "", idle && playing ? "is-idle" : "", full ? "is-full" : "", failed ? "is-failed" : "", scanlines ? "has-scan" : "", className].filter(Boolean).join(" ");
+    const style = { "--vid-ratio": ratio };
+    const pos = poster ? resolveImage(poster) : undefined;
+    const canPip = typeof document !== "undefined" && "pictureInPictureEnabled" in document && document.pictureInPictureEnabled;
+    if (embed) {
+        return (_jsxs("div", { className: `${cls} ui-vid--embed`, style: style, children: [_jsx(EmbedFrame, { embed: embed, poster: poster, title: title }), ascii && _jsx("span", { className: "ui-vid__tag ui-vid__tag--note", children: "El efecto ASCII no aplica a enlaces de YouTube/Vimeo" })] }));
+    }
+    return (_jsxs("div", { ref: wrap, className: cls, style: style, tabIndex: bg ? -1 : 0, role: bg ? undefined : "group", "aria-label": bg ? undefined : title, "aria-hidden": bg ? true : undefined, onKeyDown: onKey, onMouseMove: bg ? undefined : wake, onMouseLeave: () => playing && setIdle(true), children: [_jsx("video", { ref: video, className: "ui-vid__video", crossOrigin: asciiOn ? "anonymous" : undefined, src: src, poster: pos, muted: isMuted, loop: loop || bg, playsInline: true, preload: autoplay || bg ? "auto" : "metadata", onClick: bg || controls === "none" ? undefined : toggle, onPlay: () => {
+                    setPlaying(true);
+                    setStarted(true);
+                    wake();
+                }, onPause: () => setPlaying(false), onEnded: () => setIdle(false), onLoadedMetadata: (e) => {
+                    setDuration(e.currentTarget.duration);
+                    if (startAt > 0)
+                        e.currentTarget.currentTime = startAt;
+                    const t = e.currentTarget.textTracks[0];
+                    if (t)
+                        t.mode = "hidden";
+                }, onTimeUpdate: (e) => setTime(e.currentTarget.currentTime), onProgress: (e) => {
+                    const v = e.currentTarget;
+                    if (v.buffered.length && v.duration)
+                        setBuffered(v.buffered.end(v.buffered.length - 1) / v.duration);
+                }, onVolumeChange: (e) => {
+                    setIsMuted(e.currentTarget.muted);
+                    setVolume(e.currentTarget.volume);
+                }, onRateChange: (e) => setSpeed(e.currentTarget.playbackRate), onError: () => {
+                    // Con CORS activado un servidor que no lo permite hace fallar la carga: se reintenta sin ASCII antes de dar el error
+                    if (asciiOn)
+                        setAsciiFailed(true);
+                    else
+                        setFailed(true);
+                }, children: cap?.[0] && _jsx("track", { kind: "subtitles", src: cap[0], srcLang: cap[1] || "es", label: cap[2] || "Subtítulos" }) }, `${src}-${asciiOn}`), asciiOn && _jsx("div", { ref: asciiHost, className: `ui-vid__ascii ${asciiHover !== "none" ? "has-hover" : ""}`, "aria-hidden": true, onClick: bg || controls === "none" ? undefined : toggle }), ascii && asciiFailed && !embed && _jsx("span", { className: "ui-vid__tag ui-vid__tag--top", children: "ASCII no disponible: el servidor del v\u00EDdeo no permite CORS" }), scanlines && _jsx("span", { className: "ui-vid__scan", "aria-hidden": true }), failed && (_jsxs("div", { className: "ui-vid__err", role: "alert", children: [_jsx("strong", { children: "No se pudo cargar el v\u00EDdeo" }), _jsx("span", { children: src })] })), !bg && !failed && !started && (_jsxs("button", { type: "button", className: "ui-vid__cover", onClick: play, "aria-label": `Reproducir: ${title}`, children: [_jsx("span", { className: "ui-vid__big", "aria-hidden": true, children: renderGlyph("icon:play", 34) }), _jsx("span", { className: "ui-vid__title", children: title })] })), showControls && started && (_jsxs("div", { className: "ui-vid__ctl", role: "toolbar", "aria-label": "Controles del v\u00EDdeo", children: [_jsx("button", { type: "button", className: "ui-vid__btn", onClick: toggle, "aria-label": playing ? "Pausar" : "Reproducir", children: renderGlyph(playing ? "icon:pause" : "icon:play", 18) }), _jsxs("span", { className: "ui-vid__time", children: [fmt(time), controls === "full" && _jsxs(_Fragment, { children: [" / ", fmt(duration)] })] }), _jsx(Bar, { className: "ui-vid__seek", value: duration ? time / duration : 0, buffered: buffered, onChange: (r) => seek(r * duration), label: "Progreso", valueText: `${fmt(time)} de ${fmt(duration)}`, step: 0.02 }), controls === "full" && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: `ui-vid__btn ${isMuted ? "is-off" : ""}`, onClick: toggleMute, "aria-label": isMuted ? "Activar sonido" : "Silenciar", "aria-pressed": isMuted, children: renderGlyph("icon:volume", 18) }), _jsx(Bar, { className: "ui-vid__vol", value: isMuted ? 0 : volume, onChange: setVol, label: "Volumen", step: 0.1 }), _jsxs("button", { type: "button", className: "ui-vid__btn ui-vid__btn--txt", onClick: () => video.current && (video.current.playbackRate = SPEEDS[(SPEEDS.indexOf(speed) + 1) % SPEEDS.length]), "aria-label": `Velocidad ${speed}x`, children: [speed, "x"] }), cap?.[0] && (_jsx("button", { type: "button", className: `ui-vid__btn ui-vid__btn--txt ${capOn ? "is-on" : ""}`, onClick: toggleCap, "aria-label": "Subt\u00EDtulos", "aria-pressed": capOn, children: "CC" })), canPip && (_jsx("button", { type: "button", className: "ui-vid__btn ui-vid__btn--txt", onClick: () => void (document.pictureInPictureElement ? document.exitPictureInPicture() : video.current?.requestPictureInPicture()), "aria-label": "Imagen en imagen", children: "PiP" }))] })), _jsx("button", { type: "button", className: "ui-vid__btn", onClick: toggleFull, "aria-label": full ? "Salir de pantalla completa" : "Pantalla completa", children: _jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", shapeRendering: "crispEdges", fill: "currentColor", "aria-hidden": true, children: full ? _jsx("path", { d: "M6 2h2v6H2V6h4V2Zm4 0h2v4h4v2h-6V2ZM2 10h6v6H6v-4H2v-2Zm8 0h6v2h-4v4h-2v-6Z" }) : _jsx("path", { d: "M2 2h6v2H4v4H2V2Zm8 0h6v6h-2V4h-4V2ZM2 10h2v4h4v2H2v-6Zm12 0h2v6h-6v-2h4v-4Z" }) }) })] }))] }));
+}

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

@@ -0,0 +1,32 @@
+import type { CSSProperties } from "react";
+/**
+ * Fondos de tarjeta compartidos por todas las tarjetas del kit (Panel, PricingCard, BlogCard, Testimonial, AsciiCard…).
+ * La variante (`glass`, `solid`…) decide borde, radio, sombra y tipografía; el `fill` decide QUÉ hay detrás del
+ * contenido. Son capas independientes: cualquier fill con cualquier variante. Todo sale de los tokens.
+ *
+ * - `surface`  el fondo propio de la variante (lo de siempre)
+ * - `tint`     el acento mezclado con el fondo del tema
+ * - `gradient` degradado suave de `--acc` a `--acc2`
+ * - `accent`   invertida: fondo de acento y texto con el color de fondo (los hijos heredan la paleta invertida)
+ * - `pattern`  trama de CSS (`pattern`: puntos, rejilla, diagonales, ondas, damero, rayos) sobre un tinte muy leve
+ * - `image`    imagen de fondo (`image`: URL o `gen:N`) con un velo del color de fondo para que el texto se lea
+ */
+export declare const CARD_FILLS: readonly ["surface", "tint", "gradient", "accent", "pattern", "image"];
+export type CardFill = (typeof CARD_FILLS)[number];
+export declare const CARD_PATTERNS: readonly ["dots", "grid", "diagonal", "waves", "checker", "rays"];
+export type CardPattern = (typeof CARD_PATTERNS)[number];
+/** qué acento usa la tarjeta: el principal o el secundario (alternarlos da variedad en una rejilla) */
+export type CardTone = "acc" | "acc2";
+export type FillOptions = {
+    fill?: CardFill;
+    pattern?: CardPattern;
+    tone?: CardTone;
+    image?: string;
+};
+/** Clases y estilo inline de un fondo de tarjeta. Se aplican al raíz (el mismo que lleva `ui-surface`). */
+export declare function fillProps({ fill, pattern, tone, image }: FillOptions): {
+    className: string;
+    style?: CSSProperties;
+};
+/** Elige un valor de una lista a partir de un índice: para que cada tarjeta de una rejilla sea distinta sin configurarla. */
+export declare const pick: <T>(list: readonly T[], i: number) => T;

package/dist/components/ui/fill.js

@@ -0,0 +1,27 @@
+import { resolveImage } from "../../lib/ui/placeholder.js";
+/**
+ * Fondos de tarjeta compartidos por todas las tarjetas del kit (Panel, PricingCard, BlogCard, Testimonial, AsciiCard…).
+ * La variante (`glass`, `solid`…) decide borde, radio, sombra y tipografía; el `fill` decide QUÉ hay detrás del
+ * contenido. Son capas independientes: cualquier fill con cualquier variante. Todo sale de los tokens.
+ *
+ * - `surface`  el fondo propio de la variante (lo de siempre)
+ * - `tint`     el acento mezclado con el fondo del tema
+ * - `gradient` degradado suave de `--acc` a `--acc2`
+ * - `accent`   invertida: fondo de acento y texto con el color de fondo (los hijos heredan la paleta invertida)
+ * - `pattern`  trama de CSS (`pattern`: puntos, rejilla, diagonales, ondas, damero, rayos) sobre un tinte muy leve
+ * - `image`    imagen de fondo (`image`: URL o `gen:N`) con un velo del color de fondo para que el texto se lea
+ */
+export const CARD_FILLS = ["surface", "tint", "gradient", "accent", "pattern", "image"];
+export const CARD_PATTERNS = ["dots", "grid", "diagonal", "waves", "checker", "rays"];
+/** Clases y estilo inline de un fondo de tarjeta. Se aplican al raíz (el mismo que lleva `ui-surface`). */
+export function fillProps({ fill = "surface", pattern = "dots", tone = "acc", image }) {
+    const cls = ["ui-cfill", `ui-cfill--${fill}`];
+    if (fill === "pattern")
+        cls.push(`ui-pat--${pattern}`);
+    if (tone === "acc2")
+        cls.push("ui-tone--acc2");
+    const style = fill === "image" && image ? { "--fill-img": `url("${resolveImage(image)}")` } : undefined;
+    return { className: cls.join(" "), style };
+}
+/** Elige un valor de una lista a partir de un índice: para que cada tarjeta de una rejilla sea distinta sin configurarla. */
+export const pick = (list, i) => list[((i % list.length) + list.length) % list.length];

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

@@ -0,0 +1,20 @@
+/**
+ * Color semántico común a todo el kit: la misma palabra y el mismo color en Button, Badge, Alert, TextField, Toast y
+ * Modal. Las clases `.ui-intent--<intent>` (ui-kit.css) fijan `--tone` (lo que leen insignias, avisos y campos) y
+ * `--acc` (lo que leen los botones y lo que va dentro), con los tokens semánticos `--ok --info --warn --bad`.
+ *
+ * - `accent`  el acento del tema (por defecto en botones e insignias)
+ * - `neutral` el color del texto: sin connotación
+ * - `success` bien hecho, guardado, disponible
+ * - `info`    dato o aviso informativo
+ * - `warning` atención: revisar antes de seguir
+ * - `danger`  error, fallo o acción destructiva
+ */
+export declare const INTENTS: readonly ["accent", "neutral", "success", "info", "warning", "danger"];
+export type Intent = (typeof INTENTS)[number];
+/** Nombres antiguos que se siguen aceptando (Badge usaba `warn`; Alert, TextField y Toast usaban `error`). */
+export type LegacyIntent = "warn" | "error";
+/** Normaliza un intent que puede venir con un nombre antiguo. */
+export declare function toIntent(value: Intent | LegacyIntent | undefined, fallback: Intent): Intent;
+/** Clase CSS del intent. */
+export declare const intentCls: (intent: Intent) => string;

package/dist/components/ui/intent.js

@@ -0,0 +1,23 @@
+/**
+ * Color semántico común a todo el kit: la misma palabra y el mismo color en Button, Badge, Alert, TextField, Toast y
+ * Modal. Las clases `.ui-intent--<intent>` (ui-kit.css) fijan `--tone` (lo que leen insignias, avisos y campos) y
+ * `--acc` (lo que leen los botones y lo que va dentro), con los tokens semánticos `--ok --info --warn --bad`.
+ *
+ * - `accent`  el acento del tema (por defecto en botones e insignias)
+ * - `neutral` el color del texto: sin connotación
+ * - `success` bien hecho, guardado, disponible
+ * - `info`    dato o aviso informativo
+ * - `warning` atención: revisar antes de seguir
+ * - `danger`  error, fallo o acción destructiva
+ */
+export const INTENTS = ["accent", "neutral", "success", "info", "warning", "danger"];
+/** Normaliza un intent que puede venir con un nombre antiguo. */
+export function toIntent(value, fallback) {
+    if (value === "warn")
+        return "warning";
+    if (value === "error")
+        return "danger";
+    return value ?? fallback;
+}
+/** Clase CSS del intent. */
+export const intentCls = (intent) => `ui-intent--${intent}`;

package/dist/components/ui/styles/kit.css

@@ -0,0 +1,31 @@
+/* =====================================================================
+   Punto de entrada único del CSS del kit. En un proyecto nuevo basta con:
+
+     // app/layout.tsx
+     import "@/components/ui/styles/kit.css";
+
+   1) tokens por defecto (tema neutro oscuro) — con :where() para que cualquier tema
+      del proyecto los sobrescriba sin pelear por especificidad ni por orden de carga
+   2) sistema de estilos --s-* y componentes (ui-kit.css)
+   3) carruseles y galerías sobre Swiper (ui-carousel.css) y reproductor de vídeo (ui-video.css)
+   ===================================================================== */
+@import "./ui-kit.css";
+@import "./ui-carousel.css";
+@import "./ui-video.css";
+
+/* Mismos valores que `neutralTokens` en lib/ui/tokens.ts */
+:where(:root) {
+  --bg: #07080f;
+  --fg: #e8ecf4;
+  --mut: #9aa3b5;
+  --acc: #7cc4ff;
+  --acc2: #c084fc;
+  --card: rgba(255, 255, 255, 0.06);
+  --ln: rgba(255, 255, 255, 0.16);
+  --r: 14px;
+  /* colores semánticos (intent.ts); .ui-s los repite para las superficies */
+  --ok: #3ddc84;
+  --info: #4cb8ff;
+  --warn: #ffb020;
+  --bad: #ff5470;
+}

package/dist/components/ui/styles/ui-carousel.css

@@ -0,0 +1,113 @@
+/* =====================================================================
+   Carrusel y galerías (Swiper). Prefijos ui-car (Carousel) y ui-gal (ImageGallery).
+   Solo consumen tokens (--bg --fg --acc --ln …) y las variables --s-* de la variante:
+   los controles de Swiper toman borde, radio y sombra del estilo activo, como cualquier otro componente.
+   ===================================================================== */
+
+.ui-car, .ui-gal {
+  --swiper-navigation-size: 18px;
+  --swiper-navigation-color: var(--acc);
+  --swiper-theme-color: var(--acc);
+  --swiper-pagination-color: var(--acc);
+  --swiper-pagination-bullet-inactive-color: var(--fg);
+  --swiper-pagination-bullet-inactive-opacity: 0.35;
+  --swiper-pagination-bullet-border-radius: min(var(--s-r, 0px), 3px);
+  --swiper-pagination-bullet-width: 12px;
+  --swiper-pagination-bullet-height: 12px;
+  --swiper-pagination-bullet-horizontal-gap: 5px;
+  --swiper-pagination-progressbar-bg-color: var(--ln);
+  --swiper-pagination-progressbar-size: 6px;
+  width: 100%; min-width: 0; margin-inline: auto; color: var(--fg); font-family: var(--s-ff, inherit);
+}
+.ui-car .swiper, .ui-gal .swiper { width: 100%; min-width: 0; }
+
+/* Flechas: cuadros con la superficie del estilo (borde, radio y sombra de --s-*) */
+.ui-car .swiper-button-prev, .ui-car .swiper-button-next,
+.ui-gal .swiper-button-prev, .ui-gal .swiper-button-next {
+  width: 40px; height: 40px; margin-top: -20px;
+  background: var(--s-bg, var(--card)); border: var(--s-bd, 1px solid var(--ln)); border-radius: var(--s-r, 0); box-shadow: var(--s-sh, none);
+  -webkit-backdrop-filter: var(--s-bf, none); backdrop-filter: var(--s-bf, none);
+  padding: 10px; transition: none;
+}
+.ui-car .swiper-button-prev:hover, .ui-car .swiper-button-next:hover,
+.ui-gal .swiper-button-prev:hover, .ui-gal .swiper-button-next:hover { background: var(--acc); color: var(--bg); }
+.ui-car .swiper-button-prev:focus-visible, .ui-car .swiper-button-next:focus-visible,
+.ui-gal .swiper-button-prev:focus-visible, .ui-gal .swiper-button-next:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
+.ui-car .swiper-pagination-fraction, .ui-gal .swiper-pagination-fraction { color: var(--fg); font-weight: 700; letter-spacing: 0.1em; }
+.ui-car .swiper-pagination-progressbar, .ui-gal .swiper-pagination-progressbar { border-radius: 0; }
+.ui-car .swiper-pagination-progressbar-fill, .ui-gal .swiper-pagination-progressbar-fill { border-radius: 0; }
+.ui-car .swiper-pagination-bullet, .ui-gal .swiper-pagination-bullet { transition: none; }
+
+/* ---------- Carousel ---------- */
+.ui-car { max-width: var(--car-max, 980px); }
+/* Holgura para la sombra dura de las tarjetas, que un overflow:hidden recortaría, y hueco abajo para puntos y flechas */
+.ui-car .swiper { padding: 4px 10px 56px 4px; }
+.ui-car .swiper-slide { height: auto; display: flex; }
+.ui-car .swiper-slide > * { width: 100%; min-width: 0; }
+.ui-car .swiper .swiper-button-prev, .ui-car .swiper .swiper-button-next { top: auto; bottom: 0; margin-top: 0; }
+.ui-car .swiper .swiper-button-prev { left: 4px; }
+.ui-car .swiper .swiper-button-next { right: 10px; }
+.ui-car .swiper-pagination { --swiper-pagination-bottom: 14px; bottom: 14px; }
+.ui-car .swiper-pagination-fraction { bottom: 10px; }
+.ui-car--cards .swiper { max-width: 440px; }
+.ui-car--fade .swiper-slide { pointer-events: none; }
+.ui-car--fade .swiper-slide-active { pointer-events: auto; }
+
+/* Cinta continua: sin controles, avance lineal, diapositivas de ancho propio */
+.ui-car--ticker .swiper { padding: 4px 0; }
+.ui-car--ticker .swiper-wrapper { transition-timing-function: linear !important; }
+.ui-car--ticker .swiper-slide { width: auto; padding-right: 0; }
+
+/* ---------- ImageGallery ---------- */
+.ui-gal { max-width: var(--gal-max, 860px); }
+.ui-gal .swiper { padding: 4px 10px 10px 4px; }
+.ui-gal .swiper-slide { height: auto; }
+
+.ui-gal__shot { position: relative; margin: 0; width: 100%; aspect-ratio: var(--gal-ratio, 4 / 3); overflow: hidden; background: var(--s-bg, var(--card)); }
+.ui-gal__shot img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; user-select: none; }
+.ui-gal__shot .swiper-zoom-container { width: 100%; height: 100%; }
+.ui-gal__shot--fill { aspect-ratio: auto; height: 100%; }
+
+/* Pie de foto: bloque duro sobre la imagen, como los carteles de la landing */
+.ui-gal__cap { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: grid; gap: 2px; padding: 6px 10px; background: var(--bg); color: var(--fg); border: 2px solid var(--fg); font-size: 12px; line-height: 1.3; text-align: left; text-shadow: none; text-transform: none; pointer-events: none; }
+.ui-gal__cap strong { color: var(--acc); font-size: 13px; letter-spacing: 0.06em; }
+
+/* thumbs: imagen grande + tira */
+.ui-gal--thumbs .ui-gal__main { padding-bottom: 8px; }
+.ui-gal--thumbs .ui-gal__thumbs { padding-top: 6px; padding-bottom: 10px; }
+.ui-gal--thumbs .ui-gal__thumbs .swiper-slide { cursor: pointer; opacity: 0.5; }
+.ui-gal--thumbs .ui-gal__thumbs .swiper-slide-thumb-active { opacity: 1; }
+.ui-gal--thumbs .ui-gal__thumbs .swiper-slide-thumb-active .ui-gal__thumb { outline: 3px solid var(--acc); outline-offset: 1px; }
+.ui-gal__thumb { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
+.ui-gal__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
+
+/* coverflow y creative: 3D, con holgura vertical para el giro */
+.ui-gal--coverflow .swiper { padding: 24px 0 44px; }
+.ui-gal--coverflow .swiper-slide { width: min(62%, 380px); }
+.ui-gal--creative .swiper { padding: 10px 20px 44px 10px; overflow: visible; }
+.ui-gal--creative, .ui-gal--cube, .ui-gal--cards { overflow: visible; }
+
+/* cards y cube: una sola pieza centrada */
+.ui-gal--cards .swiper { width: min(100%, 360px); padding: 10px 0 24px; overflow: visible; }
+.ui-gal--cube .swiper { width: min(100%, 420px); padding: 14px 0 46px; overflow: visible; }
+.ui-gal--cube .swiper-slide { background: var(--bg); }
+
+/* fade: pantalla completa dentro del bloque */
+.ui-gal--fade .swiper-pagination-fraction { bottom: 14px; left: auto; right: 14px; width: auto; padding: 3px 9px; background: var(--bg); border: 2px solid var(--fg); }
+
+/* filmstrip: mismo alto, ancho propio (--w es la proporción ancho/alto) */
+.ui-gal--filmstrip { --gal-h: 260px; }
+.ui-gal--filmstrip .swiper { padding-bottom: 26px; }
+.ui-gal--filmstrip .swiper-slide { width: calc(var(--gal-h) * var(--w, 1.2)); height: var(--gal-h); }
+.ui-gal--filmstrip .swiper-pagination-progressbar { top: auto; bottom: 0; }
+
+/* mosaic: dos filas; el alto lo fija el contenedor porque Swiper Grid reparte la altura entre filas */
+.ui-gal--mosaic { max-width: 980px; }
+.ui-gal--mosaic .swiper { height: 440px; padding-bottom: 34px; }
+.ui-gal--mosaic .swiper-slide { height: calc((100% - 12px) / 2); }
+.ui-gal--mosaic .swiper-pagination { bottom: 4px; }
+
+@media (max-width: 720px) {
+  .ui-gal--filmstrip { --gal-h: 200px; }
+  .ui-gal--mosaic .swiper { height: 380px; }
+}