trama-ui 0.1.0

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

@@ -0,0 +1,78 @@
+import type { SourceKind } from "../../lib/asciify/painters.js";
+import { type CardCharset, type CardField, type CardFieldColor, type CardFieldHover } from "../../lib/ui/card-fields.js";
+import { type ASCII_STYLES } from "./AsciiBackground.js";
+import { type CardFill, type CardPattern, type CardTone } from "./fill.js";
+import { type Variant } from "./variants.js";
+export type HoverFx = "spotlight" | "magnify" | "repel" | "glow" | "colorShift" | "attract" | "shatter" | "trail" | "glitchText";
+export type AsciiCardProps = {
+    title: string;
+    text: string;
+    meta?: string;
+    /** número que se dibuja en ASCII (01, 02…) */
+    index?: number;
+    showNumeral?: boolean;
+    /** carácter con el que se dibuja el número y las esquinas */
+    glyph?: string;
+    /**
+     * capa ASCII del fondo:
+     * - `field`: campo de caracteres procedural (`field`, `charset`, `fieldColor`, `fieldHover`), ligero y animado
+     * - `text`: el texto `tile` repetido, con hover de asciify-engine (`hover`)
+     * - `scene`: una escena de `AsciiBackground` (`scene`, `sceneStyle`); la más vistosa y la más pesada
+     * - `none`: sin capa (solo el `fill`)
+     */
+    background?: "field" | "text" | "scene" | "none";
+    field?: CardField;
+    charset?: CardCharset;
+    fieldColor?: CardFieldColor;
+    fieldHover?: CardFieldHover;
+    /** anima el campo (se pausa fuera de pantalla y con movimiento reducido) */
+    animate?: boolean;
+    /** velocidad de la animación del campo */
+    speed?: number;
+    scene?: SourceKind;
+    sceneStyle?: (typeof ASCII_STYLES)[number];
+    /** patrón de texto que se repite como fondo con `background="text"` */
+    tile?: string;
+    /** tamaño de celda / fuente de la capa ASCII en px */
+    tileSize?: number;
+    /** opacidad de la capa ASCII (10–255) */
+    tileOpacity?: number;
+    /** efecto de hover de asciify-engine con background="text" */
+    textHover?: HoverFx;
+    /** @deprecated usa `textHover` */
+    hover?: HoverFx;
+    hoverStrength?: number;
+    hoverRadius?: number;
+    variant?: Variant;
+    /** 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;
+    reveal?: "none" | "wipe" | "rise" | "dissolve";
+    revealDuration?: number;
+    /** tamaño de las celdas de la disolución en px */
+    dissolveCell?: number;
+    /** cuándo se revela: al montar o al entrar en pantalla */
+    trigger?: "mount" | "inview";
+    tilt?: boolean;
+    /** inclinación máxima en grados */
+    tiltMax?: number;
+    scramble?: boolean;
+    chars?: string;
+    /** brillo que sigue al ratón */
+    glow?: boolean;
+    align?: "left" | "center";
+    minHeight?: number;
+    /** cambia el número para repetir el revelado desde fuera */
+    playKey?: number;
+    className?: string;
+};
+/**
+ * Tarjeta con tres capas de ASCII: el número en fuente bitmap, un fondo ASCII (campo procedural, texto repetido o
+ * escena de AsciiBackground, ver `background`) y un revelado por disolución. Además: inclinación hacia el puntero, brillo que
+ * sigue al ratón y título que se descifra. Todo el color sale de los tokens `--bg --mut --acc --acc2`
+ * y se actualiza al cambiar de tema sin repetir el revelado.
+ */
+export default function AsciiCard({ title, text, meta, index, showNumeral, glyph, background, field, charset, fieldColor, fieldHover, animate, speed, scene, sceneStyle, tile, tileSize, tileOpacity, textHover, hover: legacyHover, hoverStrength, hoverRadius, variant, fill, pattern, tone, image, reveal, revealDuration, dissolveCell, trigger, tilt, tiltMax, scramble, chars, glow, align, minHeight, playKey, className, }: AsciiCardProps): import("react").JSX.Element;

package/dist/components/ui/AsciiCard.js

@@ -0,0 +1,253 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ANIMATED_FIELDS, drawCardField } from "../../lib/ui/card-fields.js";
+import { token } from "../../lib/ui/tokens.js";
+import { useTokens } from "../../lib/ui/useTokens.js";
+import AsciiBackground from "./AsciiBackground.js";
+import { fillProps } from "./fill.js";
+import { vcls } from "./variants.js";
+const hash = (n) => {
+    const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+    return x - Math.floor(x);
+};
+/**
+ * Tarjeta con tres capas de ASCII: el número en fuente bitmap, un fondo ASCII (campo procedural, texto repetido o
+ * escena de AsciiBackground, ver `background`) y un revelado por disolución. Además: inclinación hacia el puntero, brillo que
+ * sigue al ratón y título que se descifra. Todo el color sale de los tokens `--bg --mut --acc --acc2`
+ * y se actualiza al cambiar de tema sin repetir el revelado.
+ */
+export default function AsciiCard({ title, text, meta, index = 1, showNumeral = true, glyph = "#", background = "field", field = "plasma", charset = "detailed", fieldColor = "mut", fieldHover = "glow", animate = true, speed = 1, scene = "waves", sceneStyle = "braille", tile = "OLA · MAR · SAL · ", tileSize = 11, tileOpacity = 110, textHover, hover: legacyHover, hoverStrength = 0.9, hoverRadius = 0.4, variant = "glass", fill, pattern, tone, image, reveal = "rise", revealDuration = 0.9, dissolveCell = 14, trigger = "mount", tilt = true, tiltMax = 10, scramble = true, chars = "~-=^_", glow = true, align = "left", minHeight = 250, playKey = 0, className = "", }) {
+    const hover = textHover ?? legacyHover ?? "trail";
+    const card = useRef(null);
+    const bg = useRef(null);
+    const fx = useRef(null);
+    const art = useRef(null);
+    const h3 = useRef(null);
+    const redraw = useRef(() => { });
+    const tokens = useTokens(card);
+    // Al cambiar el tema (tokens) solo se repinta el fondo: no se repite el revelado
+    useEffect(() => {
+        redraw.current();
+    }, [tokens]);
+    useEffect(() => {
+        const el = card.current;
+        const bgc = bg.current;
+        const fxc = fx.current;
+        const artEl = art.current;
+        const titleEl = h3.current;
+        if (!el || !bgc || !fxc || !artEl || !titleEl)
+            return;
+        let disposed = false;
+        const cleanups = [];
+        const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        const coarse = window.matchMedia("(pointer: coarse)").matches;
+        (async () => {
+            const [{ gsap }, { ScrambleTextPlugin }, core] = await Promise.all([
+                import("gsap"),
+                import("gsap/ScrambleTextPlugin"),
+                import("asciify-engine/core"),
+            ]);
+            if (disposed)
+                return;
+            gsap.registerPlugin(ScrambleTextPlugin);
+            const bctx = bgc.getContext("2d");
+            const fctx = fxc.getContext("2d");
+            artEl.textContent = showNumeral ? core.asciifyText(`0${index}`, { char: glyph }) : "";
+            // ---------- fondo de texto con hover de asciify-engine ----------
+            const pos = { x: 0.5, y: 0.5 };
+            let intensity = 0;
+            let target = 0;
+            let raf = 0;
+            const t0 = performance.now();
+            const drawBg = () => {
+                bctx.clearRect(0, 0, bgc.width, bgc.height);
+                if (background === "field") {
+                    const t = reduce ? 0 : ((performance.now() - t0) / 1000) * speed;
+                    drawCardField(bctx, bgc.width, bgc.height, t, {
+                        field,
+                        charset,
+                        color: fieldColor,
+                        hover: fieldHover,
+                        size: tileSize,
+                        opacity: tileOpacity / 255,
+                        seed: index * 13.7,
+                        glyph,
+                        colors: { mut: token(el, "--mut", "#8899aa"), acc: token(el, "--acc", "#ffffff"), acc2: token(el, "--acc2", "#cccccc") },
+                    }, { x: pos.x, y: pos.y, intensity });
+                    return;
+                }
+                if (background !== "text")
+                    return;
+                core.renderTextBackground(bctx, bgc.width, bgc.height, tile || " ", {
+                    fontSize: tileSize,
+                    color: token(el, "--mut", "#8899aa"),
+                    opacity: tileOpacity,
+                    hoverEffect: hover,
+                    hoverStrength,
+                    hoverRadius,
+                    hoverColor: token(el, "--acc", "#ffffff"),
+                }, intensity > 0.02 ? { x: pos.x, y: pos.y, intensity } : null);
+            };
+            redraw.current = drawBg;
+            // El campo animado corre a ~30 fps y solo mientras la tarjeta se ve; el resto solo mientras hay hover
+            const fieldAnimated = background === "field" && animate && !reduce && ANIMATED_FIELDS.has(field);
+            let visible = false;
+            let last = 0;
+            const loop = (now) => {
+                intensity += (target - intensity) * 0.18;
+                if (now - last > 33 || intensity > 0.02) {
+                    last = now;
+                    drawBg();
+                }
+                raf = (fieldAnimated && visible) || intensity > 0.02 || target > 0 ? requestAnimationFrame(loop) : 0;
+            };
+            if (fieldAnimated) {
+                const vio = new IntersectionObserver(([e]) => {
+                    visible = e.isIntersecting;
+                    if (visible && !raf)
+                        raf = requestAnimationFrame(loop);
+                });
+                vio.observe(el);
+                cleanups.push(() => vio.disconnect());
+            }
+            const kick = () => {
+                if (!raf)
+                    raf = requestAnimationFrame(loop);
+            };
+            cleanups.push(() => {
+                cancelAnimationFrame(raf);
+                redraw.current = () => { };
+            });
+            // ---------- disolución ASCII ----------
+            const k = { v: reveal === "dissolve" && !reduce ? 0 : 1 };
+            const seed = index * 977;
+            const drawDissolve = (time) => {
+                fctx.clearRect(0, 0, fxc.width, fxc.height);
+                if (k.v >= 1)
+                    return;
+                const cell = dissolveCell;
+                fctx.font = `${Math.max(8, cell - 3)}px monospace`;
+                fctx.textBaseline = "top";
+                const bgCol = token(el, "--bg", "#000");
+                const a1 = token(el, "--acc", "#fff");
+                const a2 = token(el, "--acc2", "#ccc");
+                for (let cy = 0; cy * cell < fxc.height; cy++) {
+                    for (let cx = 0; cx * cell < fxc.width; cx++) {
+                        const hh = hash(seed + cx * 31 + cy * 17);
+                        if (k.v < hh) {
+                            fctx.fillStyle = bgCol;
+                            fctx.fillRect(cx * cell, cy * cell, cell, cell);
+                            fctx.fillStyle = hash(seed + cx + cy * 7 + Math.floor(time * 12)) > 0.5 ? a1 : a2;
+                            fctx.globalAlpha = 0.35 + 0.65 * (1 - hh + k.v * 0.5);
+                            fctx.fillText(chars[Math.floor(hash(cx * 3 + cy + time * 7) * chars.length)] ?? "#", cx * cell + 3, cy * cell + 2);
+                            fctx.globalAlpha = 1;
+                        }
+                        else if (k.v - hh < 0.07) {
+                            fctx.fillStyle = a1;
+                            fctx.globalAlpha = 0.5;
+                            fctx.fillRect(cx * cell, cy * cell, cell, cell);
+                            fctx.globalAlpha = 1;
+                        }
+                    }
+                }
+            };
+            const size = () => {
+                const w = el.clientWidth;
+                const h = el.clientHeight;
+                for (const c of [bgc, fxc]) {
+                    c.width = w;
+                    c.height = h;
+                }
+                drawBg();
+                drawDissolve(0);
+            };
+            const ro = new ResizeObserver(size);
+            ro.observe(el);
+            cleanups.push(() => ro.disconnect());
+            // ---------- estado inicial y revelado ----------
+            gsap.set(el, { clearProps: "clipPath,opacity,visibility,transform" });
+            const animated = !reduce && reveal !== "none";
+            if (animated && reveal === "wipe")
+                gsap.set(el, { clipPath: "inset(0 100% 0 0)" });
+            if (animated && reveal === "rise")
+                gsap.set(el, { autoAlpha: 0, y: 60 });
+            if (animated)
+                gsap.set([artEl], { autoAlpha: 0 });
+            gsap.set(el, { transformPerspective: 900 });
+            const play = () => {
+                if (!animated)
+                    return;
+                if (reveal === "wipe")
+                    gsap.to(el, { clipPath: "inset(0 0% 0 0)", duration: revealDuration, ease: "power3.inOut" });
+                else if (reveal === "rise")
+                    gsap.to(el, { autoAlpha: 1, y: 0, duration: revealDuration, ease: "power3.out" });
+                else {
+                    const t = { v: 0 };
+                    k.v = 0;
+                    gsap.to(k, { v: 1, duration: revealDuration * 1.5, ease: "power1.inOut", onUpdate: () => drawDissolve((t.v += 0.03)) });
+                }
+                gsap.to(artEl, { autoAlpha: 1, duration: 0.6, delay: 0.3 });
+                if (scramble)
+                    gsap.fromTo(titleEl, { scrambleText: { text: " " } }, { duration: 1.1, delay: 0.2, scrambleText: { text: title, chars, revealDelay: 0.15, speed: 0.6 }, ease: "none" });
+            };
+            if (trigger === "inview" && animated) {
+                const io = new IntersectionObserver(([e]) => e.isIntersecting && (play(), io.disconnect()), { threshold: 0.3 });
+                io.observe(el);
+                cleanups.push(() => io.disconnect());
+            }
+            else {
+                play();
+            }
+            // ---------- ratón ----------
+            if (!coarse) {
+                const rx = gsap.quickTo(el, "rotationX", { duration: 0.5, ease: "power3.out" });
+                const ry = gsap.quickTo(el, "rotationY", { duration: 0.5, ease: "power3.out" });
+                const move = (e) => {
+                    const r = el.getBoundingClientRect();
+                    const nx = (e.clientX - r.left) / r.width;
+                    const ny = (e.clientY - r.top) / r.height;
+                    pos.x = nx;
+                    pos.y = ny;
+                    target = 1;
+                    kick();
+                    if (tilt && !reduce) {
+                        rx((0.5 - ny) * tiltMax);
+                        ry((nx - 0.5) * tiltMax * 1.2);
+                    }
+                    el.style.setProperty("--mx", `${nx * 100}%`);
+                    el.style.setProperty("--my", `${ny * 100}%`);
+                };
+                const enter = () => {
+                    if (scramble && !reduce)
+                        gsap.to(titleEl, { duration: 0.7, scrambleText: { text: title, chars, speed: 0.6 }, ease: "none" });
+                };
+                const leave = () => {
+                    target = 0;
+                    kick();
+                    rx(0);
+                    ry(0);
+                };
+                el.addEventListener("pointermove", move);
+                el.addEventListener("pointerenter", enter);
+                el.addEventListener("pointerleave", leave);
+                cleanups.push(() => {
+                    el.removeEventListener("pointermove", move);
+                    el.removeEventListener("pointerenter", enter);
+                    el.removeEventListener("pointerleave", leave);
+                });
+            }
+            cleanups.push(() => {
+                gsap.killTweensOf([el, artEl, titleEl, k]);
+                gsap.set(el, { clearProps: "transform,opacity,visibility,clipPath" });
+                titleEl.textContent = title;
+            });
+        })();
+        return () => {
+            disposed = true;
+            cleanups.reverse().forEach((f) => f());
+        };
+    }, [title, index, showNumeral, glyph, background, field, charset, fieldColor, fieldHover, animate, speed, tile, tileSize, tileOpacity, hover, hoverStrength, hoverRadius, reveal, revealDuration, dissolveCell, trigger, tilt, tiltMax, scramble, chars, playKey]);
+    const f = fillProps({ fill, pattern, tone, image });
+    return (_jsxs("article", { ref: card, className: `ui-card ui-surface ${f.className} ${vcls(variant)} ${glow ? "ui-card--glowon" : ""} ${align === "center" ? "ui-card--center" : ""} ${className}`, style: { minHeight, ...f.style }, "data-corner": glyph, children: [background === "scene" && (_jsx(AsciiBackground, { scene: scene, asciiStyle: sceneStyle, cellSize: Math.max(4, Math.round(tileSize * 0.7)), palette: "tint", tintAmount: 0.7, asciiHover: "none", bloom: 0, vignette: 0.4, fps: 30, opacity: Math.max(0.1, tileOpacity / 255) })), _jsx("canvas", { ref: bg, className: "ui-card__bg", "aria-hidden": true }), _jsx("canvas", { ref: fx, className: "ui-card__fx", "aria-hidden": true }), _jsx("div", { className: "ui-card__glow", "aria-hidden": true }), _jsxs("div", { className: "ui-card__inner", children: [_jsx("pre", { ref: art, className: "ui-card__art", "aria-hidden": true }), _jsx("h3", { ref: h3, children: title }, title), _jsx("p", { children: text }), meta && _jsx("span", { className: "ui-card__meta", children: meta })] })] }));
+}

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

@@ -0,0 +1,18 @@
+import { type Variant } from "./variants.js";
+export type AsciiChartProps = {
+    /** valores separados por comas */
+    data?: string;
+    /** etiquetas separadas por comas (una por valor) */
+    labels?: string;
+    kind?: "bars" | "hbars" | "spark" | "area";
+    /** filas de altura del gráfico vertical */
+    height?: number;
+    fillChar?: string;
+    /** anima el crecimiento al montar y al cambiar `playKey` */
+    animate?: boolean;
+    playKey?: number;
+    variant?: Variant;
+    className?: string;
+};
+/** Gráfico dibujado con caracteres: barras verticales, horizontales, sparkline o área. */
+export default function AsciiChart({ data, labels, kind, height, fillChar, animate, playKey, variant, className }: AsciiChartProps): import("react").JSX.Element;

package/dist/components/ui/AsciiChart.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { vcls } from "./variants.js";
+const SPARK = "▁▂▃▄▅▆▇█";
+/** Gráfico dibujado con caracteres: barras verticales, horizontales, sparkline o área. */
+export default function AsciiChart({ data = "12, 18, 9, 24, 31, 27, 40, 36", labels = "L,M,X,J,V,S,D,L", kind = "bars", height = 10, fillChar = "█", animate = true, playKey = 0, variant = "terminal", className = "" }) {
+    const values = useMemo(() => data.split(",").map((s) => parseFloat(s)).filter((n) => Number.isFinite(n)), [data]);
+    const names = useMemo(() => labels.split(",").map((s) => s.trim()), [labels]);
+    const [k, setK] = useState(animate ? 0 : 1);
+    useEffect(() => {
+        if (!animate || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            setK(1);
+            return;
+        }
+        setK(0);
+        let raf = 0;
+        const t0 = performance.now();
+        const tick = (now) => {
+            const p = Math.min(1, (now - t0) / 900);
+            setK(1 - Math.pow(1 - p, 3));
+            if (p < 1)
+                raf = requestAnimationFrame(tick);
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+    }, [animate, playKey, data, kind]);
+    const max = Math.max(1, ...values);
+    const fc = (fillChar || "#")[0];
+    let art = "";
+    let foot = "";
+    if (kind === "bars" || kind === "area") {
+        const H = Math.max(3, height);
+        const cols = values.map((v) => Math.max(0, Math.round((v / max) * H * k)));
+        for (let r = H; r >= 1; r--)
+            art += cols.map((c) => (c >= r ? (kind === "area" ? `${fc}${fc}${fc}` : ` ${fc} `) : "   ")).join(kind === "area" ? "" : " ") + "\n";
+        foot = names.map((n) => (n || " ").slice(0, 3).padStart(2).padEnd(3)).join(kind === "area" ? "" : " ");
+    }
+    else if (kind === "hbars") {
+        const W = 28;
+        art = values.map((v, i) => `${(names[i] || "").padEnd(4)}${fc.repeat(Math.max(0, Math.round((v / max) * W * k))).padEnd(W)} ${Math.round(v * k)}`).join("\n");
+    }
+    else {
+        art = values.map((v) => SPARK[Math.max(0, Math.min(SPARK.length - 1, Math.floor((v / max) * (SPARK.length - 1) * k)))]).join("");
+    }
+    return (_jsxs("div", { className: `ui-chart ui-surface ${vcls(variant)} ${className}`, style: { padding: 16, width: "fit-content", maxWidth: "100%", overflow: "auto" }, children: [_jsx("pre", { role: "img", "aria-label": `Gráfico: ${data}`, children: art }), foot && _jsx("div", { className: "ui-chart__labels", children: foot })] }));
+}

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

@@ -0,0 +1,15 @@
+import { type Intent, type LegacyIntent } from "./intent.js";
+import { type Variant } from "./variants.js";
+export type BadgeProps = {
+    text: string;
+    variant?: Variant;
+    /** color semántico, el mismo vocabulario que Button, Alert, TextField y Toast (ver intent.ts) */
+    intent?: Intent | LegacyIntent;
+    /** @deprecated nombre antiguo de `intent` (aceptaba `warn`); se mantiene por compatibilidad */
+    tone?: Intent | LegacyIntent;
+    size?: "md" | "lg";
+    dot?: boolean;
+    className?: string;
+};
+/** Etiqueta de estado con color semántico (`intent`). */
+export default function Badge({ text, variant, intent, tone, size, dot, className }: BadgeProps): import("react").JSX.Element;

package/dist/components/ui/Badge.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { intentCls, toIntent } from "./intent.js";
+import { vcls } from "./variants.js";
+/** Etiqueta de estado con color semántico (`intent`). */
+export default function Badge({ text, variant = "glass", intent, tone, size = "md", dot = false, className = "" }) {
+    const i = toIntent(intent ?? tone, "accent");
+    return (_jsxs("span", { className: `ui-badge ${intentCls(i)} ${size === "lg" ? "ui-badge--lg" : ""} ${vcls(variant)} ${className}`, children: [dot && _jsx("i", { className: "ui-badge__dot", "aria-hidden": true }), text] }));
+}

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

@@ -0,0 +1,25 @@
+import { type Tone } from "./variants.js";
+export type BitmapTextProps = {
+    text: string;
+    /** "Bitmap" (fuente 7×7 de asciify-engine) o una fuente FIGlet */
+    font?: string;
+    /** carácter con el que se dibuja (solo fuente Bitmap) */
+    char?: string;
+    scale?: number;
+    /** tamaño en px de cada carácter */
+    fontSize?: number;
+    /** @deprecated usa `fontSize` */
+    size?: number;
+    tone?: Tone;
+    align?: "left" | "center" | "right";
+    glow?: boolean;
+    /** intensidad del halo en px */
+    glowSize?: number;
+    animate?: "none" | "flicker" | "scan";
+    className?: string;
+};
+/**
+ * Titular en arte ASCII generado por asciify-engine (`asciifyText` / FIGlet). El color viene del token
+ * elegido en `tone`; el texto original queda accesible mediante `aria-label`.
+ */
+export default function BitmapText({ text, font, char, scale, fontSize, size: legacySize, tone, align, glow, glowSize, animate, className, }: BitmapTextProps): import("react").JSX.Element;

package/dist/components/ui/BitmapText.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { bannerLines } from "../../lib/text/banner.js";
+import { tcls } from "./variants.js";
+/**
+ * Titular en arte ASCII generado por asciify-engine (`asciifyText` / FIGlet). El color viene del token
+ * elegido en `tone`; el texto original queda accesible mediante `aria-label`.
+ */
+export default function BitmapText({ text, font = "Bitmap", char = "#", scale = 1, fontSize, size: legacySize, tone = "acc", align = "left", glow = true, glowSize = 8, animate = "none", className = "", }) {
+    const size = fontSize ?? legacySize ?? 11;
+    const [lines, setLines] = useState([text]);
+    useEffect(() => {
+        let live = true;
+        bannerLines(text || " ", font, { char, scale }).then((l) => live && setLines(l));
+        return () => {
+            live = false;
+        };
+    }, [text, font, char, scale]);
+    return (_jsx("pre", { role: "img", "aria-label": text, className: `ui-bitmap ${glow ? "ui-bitmap--glow" : ""} ui-bitmap--${animate} ${tcls(tone)} ${className}`, style: { fontSize: size, lineHeight: `${size}px`, textAlign: align, textShadow: glow ? `0 0 ${glowSize}px var(--tone, var(--acc))` : undefined }, children: lines.join("\n") }));
+}

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

@@ -0,0 +1,33 @@
+import { type CardFill, type CardPattern, type CardTone } from "./fill.js";
+import { type Variant } from "./variants.js";
+export type BlogCardProps = {
+    category?: string;
+    title?: string;
+    excerpt?: string;
+    date?: string;
+    readTime?: string;
+    /** autor; con él se pinta un avatar de iniciales en el pie */
+    author?: string;
+    /** imagen de portada: URL/ruta o `gen:N` (escena pixel art de ejemplo) */
+    image?: string;
+    /** qué va en la cabecera: la imagen, una trama de CSS, el patrón de caracteres o nada. Por defecto, la imagen si hay */
+    media?: "image" | "pattern" | "glyph" | "none";
+    /** trama de la cabecera con `media="pattern"` */
+    pattern?: CardPattern;
+    /** carácter del patrón con `media="glyph"` */
+    glyph?: string;
+    /**
+     * stacked: cabecera arriba · horizontal: cabecera a la izquierda (se apila sola si no cabe) ·
+     * overlay: la imagen ocupa toda la tarjeta y el texto va encima · minimal: sin cabecera, solo texto
+     */
+    layout?: "stacked" | "horizontal" | "overlay" | "minimal";
+    /** fondo de la tarjeta (ver fill.ts); con `overlay` y una imagen, la imagen es el fondo */
+    fill?: CardFill;
+    tone?: CardTone;
+    /** si se pasa, toda la tarjeta es un enlace */
+    href?: string;
+    variant?: Variant;
+    className?: string;
+};
+/** Tarjeta de artículo: cabecera (imagen, trama o caracteres), categoría, titular, extracto, autor y meta. */
+export default function BlogCard({ category, title, excerpt, date, readTime, author, image, media, pattern, glyph, layout, fill, tone, href, variant, className, }: BlogCardProps): import("react").JSX.Element;

package/dist/components/ui/BlogCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { resolveImage } from "../../lib/ui/placeholder.js";
+import { fillProps } from "./fill.js";
+import { vcls } from "./variants.js";
+/** Tarjeta de artículo: cabecera (imagen, trama o caracteres), categoría, titular, extracto, autor y meta. */
+export default function BlogCard({ category = "Técnica", title = "Cinco errores al remar que te frenan la primera ola", excerpt = "El remo cuenta más que la fuerza: la postura y el timing son lo que de verdad te sube a la tabla.", date = "12 mar 2026", readTime = "4 min", author = "", image = "", media, pattern = "dots", glyph = "~", layout = "stacked", fill = "surface", tone = "acc", href, variant = "glass", className = "", }) {
+    const head = layout === "minimal" ? "none" : (media ?? (image ? "image" : "pattern"));
+    const overlayImage = layout === "overlay" && head === "image" && image;
+    const f = fillProps({ fill: overlayImage ? "image" : layout === "overlay" && fill === "surface" ? "gradient" : fill, pattern, tone, image });
+    const Root = href ? "a" : "article";
+    const initials = author.split(" ").map((w) => w[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+    return (_jsxs(Root, { href: href, className: `ui-blog ui-blog--${layout} ${href ? "ui-blog--link" : ""} ui-surface ${f.className} ${vcls(variant)} ${className}`, style: f.style, children: [head !== "none" && layout !== "overlay" && (_jsx("div", { className: `ui-blog__media ui-blog__media--${head} ${head === "pattern" ? `ui-pat--${pattern}` : ""}`, "aria-hidden": true, children: head === "image" && image ? _jsx("img", { src: resolveImage(image), alt: "", loading: "lazy", decoding: "async" }) : head === "glyph" ? (glyph || "~")[0].repeat(220) : null })), _jsxs("div", { className: "ui-blog__body", children: [category && _jsx("span", { className: "ui-blog__cat", children: category }), _jsx("h4", { children: title }), excerpt && _jsx("p", { children: excerpt }), _jsxs("div", { className: "ui-blog__meta", children: [author && (_jsxs("span", { className: "ui-blog__author", children: [_jsx("span", { className: "ui-blog__avatar", "aria-hidden": true, children: initials }), author] })), date && _jsx("span", { children: date }), readTime && _jsxs("span", { children: [readTime, " de lectura"] }), href && _jsx("span", { className: "ui-blog__more", "aria-hidden": true, children: "Leer \u2192" })] })] })] }));
+}

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

@@ -0,0 +1,9 @@
+import { type Variant } from "./variants.js";
+export type BreadcrumbsProps = {
+    items?: string;
+    separator?: string;
+    variant?: Variant;
+    className?: string;
+};
+/** Ruta de navegación. El último elemento es la página actual: texto, sin enlace. */
+export default function Breadcrumbs({ items, separator, variant, className }: BreadcrumbsProps): import("react").JSX.Element;

package/dist/components/ui/Breadcrumbs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { vcls } from "./variants.js";
+/** Ruta de navegación. El último elemento es la página actual: texto, sin enlace. */
+export default function Breadcrumbs({ items = "Inicio, Cursos, Iniciación al surf", separator = "/", variant = "minimal", className = "" }) {
+    const list = items.split(",").map((s) => s.trim()).filter(Boolean);
+    return (_jsx("nav", { "aria-label": "Ruta de navegaci\u00F3n", className: `ui-crumbs ${vcls(variant)} ${className}`, children: list.map((item, i) => (_jsxs("span", { className: "ui-crumbs__item", children: [i === list.length - 1 ? (_jsx("span", { "aria-current": "page", children: item })) : (_jsx("button", { type: "button", className: "ui-crumbs__link", children: item })), i < list.length - 1 && (_jsx("span", { className: "ui-crumbs__sep", "aria-hidden": true, children: separator }))] }, item + i))) }));
+}

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

@@ -0,0 +1,74 @@
+import { type AriaAttributes } from "react";
+import { type Intent } from "./intent.js";
+import { type Variant } from "./variants.js";
+/** Color del botón: el vocabulario común de todo el kit (ver intent.ts). */
+export declare const BUTTON_INTENTS: readonly ["accent", "neutral", "success", "info", "warning", "danger"];
+export type ButtonIntent = Intent;
+/** Énfasis: primary = relleno · secondary = superficie del estilo · outline = solo borde · ghost = solo texto · link = enlace */
+export declare const BUTTON_EMPHASES: readonly ["primary", "secondary", "outline", "ghost", "link"];
+export type ButtonEmphasis = (typeof BUTTON_EMPHASES)[number];
+/** @deprecated usa `BUTTON_EMPHASES` / `ButtonEmphasis` */
+export declare const BUTTON_TONES: readonly ["primary", "secondary", "outline", "ghost", "link"];
+/** @deprecated usa `ButtonEmphasis` */
+export type ButtonTone = ButtonEmphasis;
+export type ButtonProps = {
+    /** texto del botón; con `iconOnly` es la etiqueta accesible (aria-label) y no se pinta */
+    label: string;
+    variant?: Variant;
+    /** énfasis: primary = relleno · secondary = superficie · outline = borde · ghost = texto · link = enlace */
+    emphasis?: ButtonEmphasis;
+    /** @deprecated usa `emphasis` */
+    tone?: ButtonEmphasis;
+    intent?: ButtonIntent;
+    size?: "sm" | "md" | "lg";
+    /** carácter decorativo junto al texto (→, +, >…), o un icono pixel art con `icon:heart` (ver Icon) */
+    glyph?: string;
+    glyphPosition?: "start" | "end";
+    /** botón cuadrado solo con `glyph`; `label` pasa a ser su aria-label */
+    iconOnly?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    /** estado pulsado (botones conmutables, filtros, barra de herramientas): pinta el estado y pone aria-pressed */
+    active?: boolean;
+    /** muestra un indicador de carga, pone aria-busy y bloquea el clic */
+    loading?: boolean;
+    /** si se pasa, se pinta como enlace `<a>` con el aspecto del botón */
+    href?: string;
+    /** "submit" para enviar el `<form>` que lo contiene (ver `ContactForm`) */
+    type?: "button" | "submit" | "reset";
+    onClick?: () => void;
+    className?: string;
+} & AriaAttributes;
+/**
+ * Botón del sistema. La variante decide superficie, borde, radio, sombra y tipografía; `emphasis` el énfasis e `intent`
+ * el color (el intent sustituye `--acc` solo dentro del botón, así que funciona igual en los 7 estilos).
+ */
+declare const Button: import("react").ForwardRefExoticComponent<{
+    /** texto del botón; con `iconOnly` es la etiqueta accesible (aria-label) y no se pinta */
+    label: string;
+    variant?: Variant;
+    /** énfasis: primary = relleno · secondary = superficie · outline = borde · ghost = texto · link = enlace */
+    emphasis?: ButtonEmphasis;
+    /** @deprecated usa `emphasis` */
+    tone?: ButtonEmphasis;
+    intent?: ButtonIntent;
+    size?: "sm" | "md" | "lg";
+    /** carácter decorativo junto al texto (→, +, >…), o un icono pixel art con `icon:heart` (ver Icon) */
+    glyph?: string;
+    glyphPosition?: "start" | "end";
+    /** botón cuadrado solo con `glyph`; `label` pasa a ser su aria-label */
+    iconOnly?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    /** estado pulsado (botones conmutables, filtros, barra de herramientas): pinta el estado y pone aria-pressed */
+    active?: boolean;
+    /** muestra un indicador de carga, pone aria-busy y bloquea el clic */
+    loading?: boolean;
+    /** si se pasa, se pinta como enlace `<a>` con el aspecto del botón */
+    href?: string;
+    /** "submit" para enviar el `<form>` que lo contiene (ver `ContactForm`) */
+    type?: "button" | "submit" | "reset";
+    onClick?: () => void;
+    className?: string;
+} & AriaAttributes & import("react").RefAttributes<HTMLElement>>;
+export default Button;