trama-ui 0.1.0

package/dist/components/ui/OtpInput.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { vcls } from "./variants.js";
+/** Casillas de código de verificación: el foco avanza solo al escribir y retrocede con Retroceso. */
+export default function OtpInput({ length = 6, size = "md", variant = "glass", className = "" }) {
+    const n = Math.max(2, Math.min(8, length));
+    const [values, setValues] = useState(() => Array(n).fill(""));
+    const refs = useRef([]);
+    const setAt = (i, raw) => {
+        const c = raw.slice(-1).replace(/[^a-zA-Z0-9]/g, "");
+        setValues((prev) => {
+            const next = [...prev];
+            next[i] = c;
+            return next;
+        });
+        if (c && i < n - 1)
+            refs.current[i + 1]?.focus();
+    };
+    const onKeyDown = (i, e) => {
+        if (e.key === "Backspace" && !values[i] && i > 0)
+            refs.current[i - 1]?.focus();
+    };
+    return (_jsx("div", { className: `ui-otp ui-otp--${size} ${className}`, children: Array.from({ length: n }, (_, i) => (_jsx("input", { ref: (el) => {
+                refs.current[i] = el;
+            }, className: `ui-otp__box ui-surface ${vcls(variant)}`, inputMode: "text", maxLength: 1, value: values[i], onChange: (e) => setAt(i, e.target.value), onKeyDown: (e) => onKeyDown(i, e), "aria-label": `Dígito ${i + 1} de ${n}` }, i))) }));
+}

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

@@ -0,0 +1,10 @@
+import { type Variant } from "./variants.js";
+export type PaginationProps = {
+    total?: number;
+    defaultPage?: number;
+    siblingCount?: number;
+    variant?: Variant;
+    className?: string;
+};
+/** Paginación numérica con elipsis cuando hay muchas páginas. Gestiona su propia página activa. */
+export default function Pagination({ total, defaultPage, siblingCount, variant, className }: PaginationProps): import("react").JSX.Element;

package/dist/components/ui/Pagination.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { vcls } from "./variants.js";
+/** Paginación numérica con elipsis cuando hay muchas páginas. Gestiona su propia página activa. */
+export default function Pagination({ total = 9, defaultPage = 1, siblingCount = 1, variant = "glass", className = "" }) {
+    const [page, setPage] = useState(() => Math.min(Math.max(1, defaultPage), Math.max(1, total)));
+    useEffect(() => setPage(Math.min(Math.max(1, defaultPage), Math.max(1, total))), [defaultPage, total]);
+    const pages = new Set([1, total, page]);
+    for (let d = 1; d <= siblingCount; d++) {
+        pages.add(page - d);
+        pages.add(page + d);
+    }
+    const list = Array.from(pages)
+        .filter((p) => p >= 1 && p <= total)
+        .sort((a, b) => a - b);
+    const withGaps = [];
+    list.forEach((p, i) => {
+        if (i > 0 && p - list[i - 1] > 1)
+            withGaps.push("gap");
+        withGaps.push(p);
+    });
+    return (_jsxs("nav", { "aria-label": "Paginaci\u00F3n", className: `ui-page ${vcls(variant)} ${className}`, children: [_jsx("button", { type: "button", className: "ui-page__nav", disabled: page <= 1, onClick: () => setPage((p) => p - 1), "aria-label": "P\u00E1gina anterior", children: "\u2039" }), withGaps.map((p, i) => p === "gap" ? (_jsx("span", { className: "ui-page__gap", children: "\u2026" }, `gap-${i}`)) : (_jsx("button", { type: "button", className: `ui-page__num ${p === page ? "is-on" : ""}`, "aria-current": p === page || undefined, onClick: () => setPage(p), children: p }, p))), _jsx("button", { type: "button", className: "ui-page__nav", disabled: page >= total, onClick: () => setPage((p) => p + 1), "aria-label": "P\u00E1gina siguiente", children: "\u203A" })] }));
+}

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

@@ -0,0 +1,21 @@
+import { type CardFill, type CardPattern, type CardTone } from "./fill.js";
+import { type Variant } from "./variants.js";
+export type PanelProps = {
+    title?: string;
+    body?: string;
+    footer?: string;
+    /** texto de la barra superior; vacío = sin barra */
+    bar?: string;
+    variant?: Variant;
+    /** dibuja un carácter en dos esquinas */
+    cornerGlyph?: string;
+    /** fondo de la tarjeta: surface · tint · gradient · accent (invertida) · pattern · image (ver fill.ts) */
+    fill?: CardFill;
+    pattern?: CardPattern;
+    tone?: CardTone;
+    /** con fill="image": URL/ruta o `gen:N` */
+    image?: string;
+    className?: string;
+};
+/** Superficie genérica del sistema: barra opcional, título, cuerpo y pie. Base de cualquier tarjeta simple. */
+export default function Panel({ title, body, footer, bar, variant, cornerGlyph, fill, pattern, tone, image, className }: PanelProps): import("react").JSX.Element;

package/dist/components/ui/Panel.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fillProps } from "./fill.js";
+import { vcls } from "./variants.js";
+/** Superficie genérica del sistema: barra opcional, título, cuerpo y pie. Base de cualquier tarjeta simple. */
+export default function Panel({ title = "Resumen de reserva", body = "Dos clases de iniciación el sábado por la mañana, con neopreno y tabla incluidos.", footer = "Cancelación gratuita hasta 24 h antes", bar = "reserva.txt", variant = "glass", cornerGlyph = "", fill, pattern, tone, image, className = "" }) {
+    const f = fillProps({ fill, pattern, tone, image });
+    return (_jsxs("section", { className: `ui-panel ui-surface ${f.className} ${vcls(variant)} ${className}`, style: f.style, "data-corners": cornerGlyph || undefined, children: [bar && (_jsxs("div", { className: "ui-panel__bar", children: [_jsx("i", { style: { background: "var(--acc)" } }), _jsx("i", { style: { background: "var(--acc2)" } }), _jsx("i", { style: { background: "var(--mut)" } }), _jsx("span", { children: bar })] })), _jsxs("div", { className: "ui-panel__body", children: [title && _jsx("h4", { children: title }), body && _jsx("p", { children: body })] }), footer && _jsx("div", { className: "ui-panel__foot", children: footer })] }));
+}

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

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+/**
+ * Pieles del pack Kenney "Pixel UI" (CC0), con el color de relleno (medido en el centro del PNG) de cada una:
+ * se pinta DETRÁS del `border-image` para tapar las rendijas de un píxel que el navegador deja entre las 9
+ * regiones cuando la escala de pantalla es fraccionaria (110 %, 125 %, 150 %…).
+ */
+export declare const PIXEL_FRAME_SKINS: {
+    readonly colored: {
+        readonly dir: "Colored";
+        readonly fills: {
+            readonly blue: "#1ea7e1";
+            readonly green: "#73cd4b";
+            readonly grey: "#eeeeee";
+            readonly red: "#e86a17";
+            readonly yellow: "#ffcc00";
+        };
+    };
+    readonly outline: {
+        readonly dir: "Outline";
+        readonly fills: {
+            readonly blue: "#eeeeee";
+            readonly green: "#eeeeee";
+            readonly red: "#eeeeee";
+            readonly yellow: "#eeeeee";
+        };
+    };
+    readonly ancient: {
+        readonly dir: "Ancient";
+        readonly fills: {
+            readonly brown: "#97714a";
+            readonly grey: "#838796";
+            readonly tan: "#d3bf8f";
+            readonly white: "#e5e5e5";
+        };
+    };
+};
+export type PixelFrameSkin = keyof typeof PIXEL_FRAME_SKINS;
+export type PixelFrameProps = {
+    skin?: PixelFrameSkin;
+    /** color de la piel; si no existe en esa piel se usa el primero que tenga (ver `PIXEL_FRAME_SKINS`) */
+    color?: string;
+    /** versión "hundida" del marco (estado pulsado) */
+    pressed?: boolean;
+    /** píxeles CSS por píxel del sprite; el marco ocupa 16 × escala px por cada lado */
+    scale?: 1 | 2 | 3 | 4;
+    children?: ReactNode;
+    className?: string;
+};
+/** Resuelve piel + color (con el fallback al primero de la piel) a la ruta del PNG y a su color de relleno. */
+export declare function pixelFrameAsset(skin: PixelFrameSkin, color: string, pressed: boolean): {
+    src: string;
+    fill: string;
+};
+/**
+ * Marco pixel art de 9 cortes (`border-image`) con las piezas de Kenney "Pixel UI" — CC0, sin atribución
+ * obligatoria (`public/pixel/kenney-pixel-ui/License.txt`). El marco trae su PROPIO fondo, siempre opaco y de tono
+ * medio o claro (comprobado en las 13 combinaciones piel/color: negro sobre ellas da ≥ 4,5:1), y fija una paleta
+ * local de tinta (`.ui-pframe` en ui-kit.css) para que el texto y los componentes del kit que pongas dentro se
+ * lean igual con cualquier tema de la página: aquí el contraste no depende de lo que haya detrás.
+ */
+export default function PixelFrame({ skin, color, pressed, scale, children, className }: PixelFrameProps): import("react").JSX.Element;

package/dist/components/ui/PixelFrame.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Pieles del pack Kenney "Pixel UI" (CC0), con el color de relleno (medido en el centro del PNG) de cada una:
+ * se pinta DETRÁS del `border-image` para tapar las rendijas de un píxel que el navegador deja entre las 9
+ * regiones cuando la escala de pantalla es fraccionaria (110 %, 125 %, 150 %…).
+ */
+export const PIXEL_FRAME_SKINS = {
+    colored: { dir: "Colored", fills: { blue: "#1ea7e1", green: "#73cd4b", grey: "#eeeeee", red: "#e86a17", yellow: "#ffcc00" } },
+    outline: { dir: "Outline", fills: { blue: "#eeeeee", green: "#eeeeee", red: "#eeeeee", yellow: "#eeeeee" } },
+    ancient: { dir: "Ancient", fills: { brown: "#97714a", grey: "#838796", tan: "#d3bf8f", white: "#e5e5e5" } },
+};
+/** Resuelve piel + color (con el fallback al primero de la piel) a la ruta del PNG y a su color de relleno. */
+export function pixelFrameAsset(skin, color, pressed) {
+    const { dir, fills } = PIXEL_FRAME_SKINS[skin];
+    const names = Object.keys(fills);
+    const c = names.includes(color) ? color : names[0];
+    return { src: `/pixel/kenney-pixel-ui/9-slice/${dir}/${c}${pressed ? "_pressed" : ""}.png`, fill: fills[c] };
+}
+/**
+ * Marco pixel art de 9 cortes (`border-image`) con las piezas de Kenney "Pixel UI" — CC0, sin atribución
+ * obligatoria (`public/pixel/kenney-pixel-ui/License.txt`). El marco trae su PROPIO fondo, siempre opaco y de tono
+ * medio o claro (comprobado en las 13 combinaciones piel/color: negro sobre ellas da ≥ 4,5:1), y fija una paleta
+ * local de tinta (`.ui-pframe` en ui-kit.css) para que el texto y los componentes del kit que pongas dentro se
+ * lean igual con cualquier tema de la página: aquí el contraste no depende de lo que haya detrás.
+ */
+export default function PixelFrame({ skin = "colored", color = "blue", pressed = false, scale = 2, children, className = "" }) {
+    const { src, fill } = pixelFrameAsset(skin, color, pressed);
+    return (_jsx("div", { className: `ui-pframe ${className}`.trim(), style: { "--pf-img": `url(${src})`, "--pf-bg": fill, "--pf-s": scale }, children: children }));
+}

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

@@ -0,0 +1,51 @@
+import { type ReactNode } from "react";
+import { type CharsetId } from "../../lib/ui/fx.js";
+export type PresenceEffect = "ascii-random" | "ascii-sweep" | "ascii-rain" | "ascii-radial" | "ascii-rows" | "glitch" | "slices" | "shatter" | "crt" | "flicker" | "static" | "redact" | "boot";
+export declare const PRESENCE_EFFECTS: {
+    id: PresenceEffect;
+    label: string;
+}[];
+export type PresenceProps = {
+    effect?: PresenceEffect;
+    /** visible o no: al cambiarlo se reproduce la aparición o la desaparición */
+    show?: boolean;
+    duration?: number;
+    /** 0–1: fuerza del glitch, la estática y el desgarro */
+    intensity?: number;
+    /** glifos de las capas ASCII */
+    chars?: CharsetId;
+    /** tamaño de celda de las capas ASCII, en px */
+    cell?: number;
+    /** rastro tenue tras el borde de descubrimiento */
+    edge?: boolean;
+    tone?: "acc" | "acc2" | "fg";
+    /** columnas de fragmentos (shatter) */
+    tiles?: number;
+    /** bandas horizontales (slices) */
+    bands?: number;
+    /** altura de cada barra de censura en px */
+    rowHeight?: number;
+    redactLabel?: string;
+    /** líneas del arranque; separa las de entrada y las de salida con una línea «---» */
+    bootLines?: string;
+    /** alterna aparición y desaparición sin parar */
+    loop?: boolean;
+    /** pausa entre cambios en modo bucle, en segundos */
+    hold?: number;
+    /** reproduce la aparición inicial al montar (si es false, el contenido arranca ya visible) */
+    autoplay?: boolean;
+    /** ocupa el 100% del contenedor en vez de ajustarse al contenido (para envolver fondos o secciones) */
+    fill?: boolean;
+    playKey?: number;
+    children: ReactNode;
+    className?: string;
+};
+/**
+ * Envoltorio de aparición y desaparición cinematográficas, con estética hacker/glitch: capas de
+ * glifos que se descifran, glitch con separación RGB y corrupción, datamosh, fragmentos, encendido
+ * CRT, estática, censura o arranque de sistema. Todos usan --bg --fg --acc --acc2 del tema.
+ *
+ * El contenido está siempre en el DOM (y accesible); con movimiento reducido se muestra o se oculta
+ * sin animar. Ocupa el ancho de su contenido (`display: inline-block`); se puede cambiar con `className`.
+ */
+export default function Presence({ effect, show, duration, intensity, chars, cell, edge, tone, tiles, bands, rowHeight, redactLabel, bootLines, loop, hold, autoplay, fill, playKey, children, className, }: PresenceProps): import("react").JSX.Element;

package/dist/components/ui/Presence.js

@@ -0,0 +1,343 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { CHARSETS, drawAsciiCover, drawCorruption, drawRedact, drawStatic, hash } from "../../lib/ui/fx.js";
+export const PRESENCE_EFFECTS = [
+    { id: "ascii-rain", label: "Lluvia de glifos" },
+    { id: "ascii-random", label: "Descifrado aleatorio" },
+    { id: "ascii-sweep", label: "Barrido binario" },
+    { id: "ascii-radial", label: "Onda radial" },
+    { id: "ascii-rows", label: "Filas de datos" },
+    { id: "glitch", label: "Glitch profundo" },
+    { id: "slices", label: "Datamosh (bandas)" },
+    { id: "shatter", label: "Fragmentos" },
+    { id: "crt", label: "Encendido CRT" },
+    { id: "flicker", label: "Parpadeo de neón" },
+    { id: "static", label: "Estática de TV" },
+    { id: "redact", label: "Censura" },
+    { id: "boot", label: "Arranque de sistema" },
+];
+const DEFAULT_BOOT = "[ OK ] montando sistema de archivos\n[ OK ] iniciando servicios\n[ .. ] descifrando interfaz\n[ OK ] acceso concedido\n---\n[ .. ] cerrando sesión\n[ OK ] volcando memoria\n[ OK ] apagado";
+/**
+ * Envoltorio de aparición y desaparición cinematográficas, con estética hacker/glitch: capas de
+ * glifos que se descifran, glitch con separación RGB y corrupción, datamosh, fragmentos, encendido
+ * CRT, estática, censura o arranque de sistema. Todos usan --bg --fg --acc --acc2 del tema.
+ *
+ * El contenido está siempre en el DOM (y accesible); con movimiento reducido se muestra o se oculta
+ * sin animar. Ocupa el ancho de su contenido (`display: inline-block`); se puede cambiar con `className`.
+ */
+export default function Presence({ effect = "ascii-rain", show = true, duration = 1.2, intensity = 0.7, chars = "symbols", cell = 14, edge = true, tone = "acc", tiles = 6, bands = 10, rowHeight = 22, redactLabel = "REDACTED", bootLines = DEFAULT_BOOT, loop = false, hold = 1.2, autoplay = true, fill = false, playKey = 0, children, className = "", }) {
+    const root = useRef(null);
+    const content = useRef(null);
+    const cv = useRef(null);
+    const boot = useRef(null);
+    const layer = useRef(null);
+    const first = useRef(true);
+    const [auto, setAuto] = useState(true);
+    const [clone, setClone] = useState(null);
+    const visible = loop ? auto : show;
+    useEffect(() => {
+        if (!loop)
+            return;
+        setAuto(true);
+        const id = setInterval(() => setAuto((v) => !v), (duration + hold) * 1000);
+        return () => clearInterval(id);
+    }, [loop, duration, hold]);
+    useEffect(() => {
+        const el = root.current;
+        const c = content.current;
+        const canvas = cv.current;
+        const bootEl = boot.current;
+        if (!el || !c || !canvas || !bootEl)
+            return;
+        let disposed = false;
+        const cleanups = [];
+        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        const skip = first.current && !autoplay;
+        first.current = false;
+        (async () => {
+            const { gsap } = await import("gsap");
+            if (disposed)
+                return;
+            const ctx = canvas.getContext("2d");
+            const w = Math.max(2, el.clientWidth);
+            const h = Math.max(2, el.clientHeight);
+            canvas.width = w;
+            canvas.height = h;
+            const cs = getComputedStyle(el);
+            const T = (n, f) => cs.getPropertyValue(n).trim() || f;
+            const bg = T("--bg", "#000");
+            const fg = T("--fg", "#fff");
+            const acc = T("--acc", "#7cc4ff");
+            const acc2 = T("--acc2", "#c084fc");
+            const c1 = tone === "acc2" ? acc2 : tone === "fg" ? fg : acc;
+            const c2 = tone === "acc" ? fg : acc;
+            const dirIn = visible;
+            const clear = () => ctx.clearRect(0, 0, w, h);
+            const showC = () => void gsap.set(c, { autoAlpha: 1 });
+            const hideC = () => void gsap.set(c, { autoAlpha: 0 });
+            const reset = () => {
+                gsap.killTweensOf([c, canvas, bootEl]);
+                gsap.set(c, { clearProps: "transform,filter,clipPath,opacity,visibility" });
+                gsap.set(canvas, { autoAlpha: 1 });
+                gsap.set(bootEl, { autoAlpha: 0 });
+                clear();
+                if (layer.current)
+                    flushSync(() => setClone(null));
+            };
+            const finish = () => {
+                reset();
+                if (!dirIn)
+                    hideC();
+            };
+            cleanups.push(() => {
+                gsap.killTweensOf([c, canvas, bootEl]);
+                clear();
+            });
+            if (reduce || skip) {
+                finish();
+                return;
+            }
+            reset();
+            // ------------------------------------------------ capas de glifos
+            if (effect.startsWith("ascii-")) {
+                const pattern = effect.slice(6);
+                const k = { v: dirIn ? 0 : 1 };
+                let time = 0;
+                const draw = () => drawAsciiCover(ctx, w, h, k.v, { pattern, cell, chars: CHARSETS[chars], bg, c1, c2, time: (time += 0.03), seed: 11, edge });
+                showC();
+                draw();
+                gsap.to(k, {
+                    v: dirIn ? 1 : 0,
+                    duration,
+                    ease: "power1.inOut",
+                    onUpdate: draw,
+                    onComplete: () => {
+                        if (dirIn)
+                            clear();
+                        else {
+                            hideC();
+                            gsap.to(canvas, { autoAlpha: 0, duration: 0.3, onComplete: clear });
+                        }
+                    },
+                });
+                return;
+            }
+            switch (effect) {
+                // ---------------------------------------------- glitch profundo
+                case "glitch": {
+                    const steps = Math.max(6, Math.round(duration * 26));
+                    const p = { v: 0 };
+                    let last = -1;
+                    showC();
+                    gsap.to(p, {
+                        v: 1,
+                        duration,
+                        ease: "none",
+                        onUpdate: () => {
+                            const step = Math.floor(p.v * steps);
+                            if (step === last)
+                                return;
+                            last = step;
+                            const env = dirIn ? Math.pow(1 - p.v, 1.3) : Math.pow(p.v, 1.3);
+                            const a = env * intensity;
+                            const r = (n) => hash(step * 13.7 + n) * 2 - 1;
+                            const gone = dirIn ? hash(step * 3.1) < a * 0.6 : hash(step * 3.1) < a * 0.5 + p.v * 0.35;
+                            const band = hash(step * 5.3) < a ? `inset(${(hash(step * 2.2) * 80).toFixed(0)}% 0 ${(hash(step * 4.4) * 60).toFixed(0)}% 0)` : "none";
+                            c.style.opacity = gone ? (hash(step) > 0.5 ? "0" : "0.25") : "1";
+                            c.style.transform = `translate(${r(1) * a * 34}px, ${r(2) * a * 8}px) skewX(${r(3) * a * 28}deg) scale(${1 + r(4) * a * 0.05})`;
+                            c.style.clipPath = band;
+                            c.style.filter = `drop-shadow(${a * 16 * r(5)}px 0 0 ${acc}) drop-shadow(${-a * 16 * r(5)}px 0 0 ${acc2}) hue-rotate(${r(6) * a * 90}deg) contrast(${1 + a * 0.9})`;
+                            drawCorruption(ctx, w, h, a, step, acc, acc2);
+                        },
+                        onComplete: () => {
+                            if (dirIn)
+                                reset();
+                            else {
+                                reset();
+                                hideC();
+                            }
+                        },
+                    });
+                    break;
+                }
+                // ---------------------------------------------- datamosh y fragmentos (clones)
+                case "slices":
+                case "shatter": {
+                    flushSync(() => setClone(effect === "slices" ? "bands" : "tiles"));
+                    const els = Array.from(layer.current?.children ?? []);
+                    hideC();
+                    if (effect === "slices") {
+                        const p = { v: 0 };
+                        let last = -1;
+                        const steps = Math.max(6, Math.round(duration * 22));
+                        gsap.to(p, {
+                            v: 1,
+                            duration,
+                            ease: "none",
+                            onUpdate: () => {
+                                const step = Math.floor(p.v * steps);
+                                if (step === last)
+                                    return;
+                                last = step;
+                                const env = (dirIn ? Math.pow(1 - p.v, 1.2) : Math.pow(p.v, 1.2)) * intensity;
+                                els.forEach((b, i) => {
+                                    const r = hash(step * 7 + i * 3) * 2 - 1;
+                                    const miss = dirIn ? hash(step * 5 + i) < env * 0.55 : p.v > 0.93 || hash(step * 5 + i) < env * 0.6;
+                                    gsap.set(b, { x: r * env * 70, opacity: miss ? 0 : 1, filter: `drop-shadow(${r * env * 10}px 0 0 ${acc}) drop-shadow(${-r * env * 10}px 0 0 ${acc2})` });
+                                });
+                            },
+                            onComplete: () => {
+                                reset();
+                                if (!dirIn)
+                                    hideC();
+                            },
+                        });
+                    }
+                    else {
+                        const cols = Math.max(2, Math.round(tiles));
+                        const rows = Math.max(2, Math.round(cols * 0.6));
+                        const scatter = (i) => ({
+                            x: (hash(i * 3.1) * 2 - 1) * 260 * (0.4 + intensity),
+                            y: (hash(i * 5.7) * 2 - 1) * 200 * (0.4 + intensity) + (dirIn ? 0 : 160),
+                            rotation: (hash(i * 7.3) * 2 - 1) * 70,
+                            scale: 0.4 + hash(i * 2.9) * 0.5,
+                        });
+                        const stagger = { amount: duration * 0.45, from: "center", grid: [cols, rows] };
+                        if (dirIn) {
+                            els.forEach((b, i) => gsap.set(b, { ...scatter(i), opacity: 0 }));
+                            gsap.to(els, { x: 0, y: 0, rotation: 0, scale: 1, opacity: 1, duration: duration * 0.55, ease: "power3.out", stagger, onComplete: () => reset() });
+                        }
+                        else {
+                            gsap.to(els, { x: (i) => scatter(i).x, y: (i) => scatter(i).y, rotation: (i) => scatter(i).rotation, scale: (i) => scatter(i).scale, opacity: 0, duration: duration * 0.55, ease: "power2.in", stagger, onComplete: () => { reset(); hideC(); } });
+                        }
+                    }
+                    break;
+                }
+                // ---------------------------------------------- CRT
+                case "crt": {
+                    showC();
+                    gsap.set(c, { transformOrigin: "50% 50%" });
+                    if (dirIn) {
+                        gsap.set(c, { scaleY: 0.004, filter: "brightness(8) saturate(0)" });
+                        gsap
+                            .timeline({ onComplete: () => reset() })
+                            .to(c, { scaleY: 1.05, filter: "brightness(2.2) saturate(1)", duration: duration * 0.55, ease: "power4.out" })
+                            .to(c, { scaleY: 1, filter: "brightness(1) saturate(1)", duration: duration * 0.45, ease: "elastic.out(1,0.6)" });
+                    }
+                    else {
+                        gsap
+                            .timeline({ onComplete: () => { reset(); hideC(); } })
+                            .to(c, { scaleY: 0.004, filter: "brightness(6) saturate(0)", duration: duration * 0.55, ease: "power4.in" })
+                            .to(c, { scaleX: 0, duration: duration * 0.3, ease: "power2.in" })
+                            .to(c, { autoAlpha: 0, duration: 0.05 });
+                    }
+                    break;
+                }
+                // ---------------------------------------------- neón que parpadea
+                case "flicker": {
+                    const seq = dirIn ? [0, 1, 0, 0.3, 1, 0.15, 1, 0.6, 0.2, 1, 0.8, 1] : [1, 0.3, 1, 0, 0.7, 0, 0.35, 0.05, 0.4, 0];
+                    const tl = gsap.timeline({ onComplete: () => { reset(); if (!dirIn)
+                            hideC(); } });
+                    const dt = duration / seq.length;
+                    showC();
+                    seq.forEach((v, i) => tl.set(c, { opacity: v, filter: `brightness(${1 + v * 0.7 * intensity}) saturate(${1 + v * 0.4})` }, i * dt));
+                    tl.to({}, { duration: dt });
+                    break;
+                }
+                // ---------------------------------------------- estática de TV
+                case "static": {
+                    const p = { v: 0 };
+                    showC();
+                    gsap.to(p, {
+                        v: 1,
+                        duration,
+                        ease: "none",
+                        onUpdate: () => {
+                            const env = dirIn ? 1 - p.v : p.v;
+                            drawStatic(ctx, w, h, env * intensity * 1.15, acc);
+                            const flick = hash(Math.floor(p.v * duration * 30)) < 0.5;
+                            c.style.opacity = String(dirIn ? (p.v > 0.7 ? 1 : flick ? p.v : 0) : p.v > 0.6 ? (flick ? 1 - p.v : 0) : 1);
+                        },
+                        onComplete: () => {
+                            reset();
+                            if (!dirIn)
+                                hideC();
+                        },
+                    });
+                    break;
+                }
+                // ---------------------------------------------- censura
+                case "redact": {
+                    const k = { v: dirIn ? 0 : 1 };
+                    showC();
+                    const draw = () => drawRedact(ctx, w, h, k.v, { rowH: rowHeight, color: fg, textColor: bg, seed: 5, label: redactLabel });
+                    draw();
+                    gsap.to(k, {
+                        v: dirIn ? 1 : 0,
+                        duration,
+                        ease: "power1.inOut",
+                        onUpdate: draw,
+                        onComplete: () => {
+                            if (dirIn)
+                                clear();
+                            else {
+                                hideC();
+                                gsap.to(canvas, { autoAlpha: 0, duration: 0.3, onComplete: clear });
+                            }
+                        },
+                    });
+                    break;
+                }
+                // ---------------------------------------------- arranque de sistema
+                case "boot": {
+                    const [inPart, outPart] = bootLines.split(/\n---\n/);
+                    const lines = (dirIn ? inPart : (outPart ?? "[ .. ] cerrando\n[ OK ] apagado")).split("\n").filter(Boolean);
+                    const total = lines.reduce((n, l) => n + l.length + 1, 0);
+                    const p = { v: 0 };
+                    showC();
+                    if (!dirIn)
+                        hideC();
+                    gsap.set(bootEl, { autoAlpha: 1 });
+                    bootEl.style.color = c1;
+                    gsap.to(p, {
+                        v: 1,
+                        duration: duration * 0.7,
+                        ease: "none",
+                        onUpdate: () => {
+                            let n = Math.floor(p.v * total);
+                            bootEl.textContent = lines
+                                .map((l) => {
+                                const part = l.slice(0, Math.max(0, n));
+                                n -= l.length + 1;
+                                return part;
+                            })
+                                .join("\n");
+                        },
+                        onComplete: () => {
+                            gsap.to(bootEl, { autoAlpha: 0, duration: duration * 0.3, onComplete: () => { reset(); if (!dirIn)
+                                    hideC(); } });
+                        },
+                    });
+                    break;
+                }
+            }
+        })();
+        return () => {
+            disposed = true;
+            cleanups.reverse().forEach((f) => f());
+        };
+    }, [visible, effect, duration, intensity, chars, cell, edge, tone, tiles, bands, rowHeight, redactLabel, bootLines, playKey, autoplay]);
+    const cols = Math.max(2, Math.round(tiles));
+    const rows = Math.max(2, Math.round(cols * 0.6));
+    const n = Math.max(2, Math.round(bands));
+    return (_jsxs("div", { ref: root, className: `ui-tx ${fill ? "ui-tx--fill" : ""} ${className}`, children: [_jsx("div", { ref: content, className: "ui-tx__content", children: children }), clone && (_jsx("div", { ref: layer, className: "ui-tx__clones", "aria-hidden": true, children: clone === "bands"
+                    ? Array.from({ length: n }, (_, i) => (_jsx("div", { className: "ui-tx__clone", style: { clipPath: `inset(${((i / n) * 100).toFixed(2)}% 0 ${(100 - ((i + 1) / n) * 100).toFixed(2)}% 0)` }, children: children }, i)))
+                    : Array.from({ length: cols * rows }, (_, i) => {
+                        const cx = i % cols;
+                        const cy = Math.floor(i / cols);
+                        const inset = `inset(${((cy / rows) * 100).toFixed(2)}% ${(100 - ((cx + 1) / cols) * 100).toFixed(2)}% ${(100 - ((cy + 1) / rows) * 100).toFixed(2)}% ${((cx / cols) * 100).toFixed(2)}%)`;
+                        return (_jsx("div", { className: "ui-tx__clone", style: { clipPath: inset }, children: children }, i));
+                    }) })), _jsx("canvas", { ref: cv, className: "ui-tx__fx", "aria-hidden": true }), _jsx("pre", { ref: boot, className: "ui-tx__boot", "aria-hidden": true })] }));
+}

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

@@ -0,0 +1,30 @@
+import { type CardFill, type CardPattern, type CardTone } from "./fill.js";
+import { type Variant } from "./variants.js";
+export type PricingCardProps = {
+    plan?: string;
+    /** una línea bajo el nombre: para quién es el plan */
+    description?: string;
+    price?: string;
+    /** precio anterior, tachado junto al actual (ofertas, descuento anual) */
+    originalPrice?: string;
+    period?: string;
+    /** texto pequeño bajo el precio («facturado anualmente», «IVA incluido»…) */
+    note?: string;
+    /** una característica por línea; empezar la línea con «-» la marca como no incluida */
+    features?: string;
+    cta?: string;
+    highlighted?: boolean;
+    /** cómo se destaca: glow = borde y halo de acento · invert = fondo de acento (paleta invertida) · border = solo borde grueso */
+    highlight?: "glow" | "invert" | "border";
+    badge?: string;
+    /** classic: vertical · compact: sin lista (características en una línea) · horizontal: datos a la izquierda, precio y botón a la derecha */
+    layout?: "classic" | "compact" | "horizontal";
+    /** fondo de la tarjeta (ver fill.ts); `highlight="invert"` lo sustituye por el acento cuando está destacada */
+    fill?: CardFill;
+    pattern?: CardPattern;
+    tone?: CardTone;
+    variant?: Variant;
+    className?: string;
+};
+/** Tarjeta de plan de precios. `highlighted` la destaca (con halo, invertida o con borde) y la marca con una insignia. */
+export default function PricingCard({ plan, description, price, originalPrice, period, note, features, cta, highlighted, highlight, badge, layout, fill, pattern, tone, variant, className, }: PricingCardProps): import("react").JSX.Element;

package/dist/components/ui/PricingCard.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Badge from "./Badge.js";
+import Button from "./Button.js";
+import { fillProps } from "./fill.js";
+import { vcls } from "./variants.js";
+/** Tarjeta de plan de precios. `highlighted` la destaca (con halo, invertida o con borde) y la marca con una insignia. */
+export default function PricingCard({ plan = "Pro", description = "", price = "29 €", originalPrice = "", period = "/ mes", note = "", features = "Proyectos ilimitados\nSoporte prioritario\nExportación a PNG y SVG", cta = "Empezar ahora", highlighted = true, highlight = "glow", badge = "Más popular", layout = "classic", fill = "surface", pattern, tone, variant = "glass", className = "", }) {
+    const inverted = highlighted && highlight === "invert";
+    const f = fillProps({ fill: inverted ? "accent" : fill, pattern, tone });
+    const items = features
+        .split("\n")
+        .map((l) => l.trim())
+        .filter(Boolean)
+        .map((l) => ({ text: l.replace(/^[-+]\s*/, ""), off: l.startsWith("-") }));
+    const hl = highlighted ? `ui-price--hl ui-price--hl-${highlight}` : "";
+    const head = (_jsxs("div", { className: "ui-price__head", children: [_jsx("span", { className: "ui-price__name", children: plan.toUpperCase() }), description && _jsx("p", { className: "ui-price__desc", children: description })] }));
+    const amount = (_jsxs("div", { className: "ui-price__cost", children: [_jsxs("div", { className: "ui-price__amount", children: [originalPrice && _jsx("s", { className: "ui-price__was", children: originalPrice }), price, _jsx("small", { children: period })] }), note && _jsx("span", { className: "ui-price__note", children: note })] }));
+    const list = layout === "compact" ? (_jsx("p", { className: "ui-price__inline", children: items.filter((i) => !i.off).map((i) => i.text).join(" · ") })) : (_jsx("ul", { children: items.map((i) => (_jsxs("li", { className: i.off ? "ui-price__off" : undefined, children: [i.off && _jsx("span", { className: "ui-sr", children: "No incluido: " }), i.text] }, i.text))) }));
+    const button = _jsx(Button, { label: cta, variant: variant, emphasis: highlighted ? "primary" : "secondary", fullWidth: true });
+    return (_jsxs("article", { className: `ui-price ui-price--${layout} ${hl} ui-surface ${f.className} ${vcls(variant)} ${className}`, style: f.style, children: [highlighted && badge && (_jsx("span", { className: "ui-price__badge", children: _jsx(Badge, { text: badge, variant: variant, intent: "accent" }) })), layout === "horizontal" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ui-price__main", children: [head, list] }), _jsxs("div", { className: "ui-price__side", children: [amount, button] })] })) : (_jsxs(_Fragment, { children: [head, amount, list, button] }))] }));
+}