trama-ui 0.1.0

package/dist/lib/sketches/theme-pulse.js

@@ -0,0 +1,84 @@
+import { createPointer, eachCell, hash2, hsv, mix } from "../cells.js";
+import { clamp, scrollState, smooth, span } from "../scroll/store.js";
+import { getTextMask } from "../text/mask.js";
+const BRAND = "PULSO";
+/**
+ * Pulso: ciudad nocturna con lluvia, tres capas de edificios con ventanas parpadeantes y
+ * un cartel de neón. Al bajar, la cámara sube de la calle a las azoteas y el neón vira de
+ * rosa a cian.
+ */
+export function thPulse(t) {
+    const ptr = createPointer(t);
+    t.draw(() => {
+        ptr.update();
+        const p = scrollState.p;
+        const s = t.secs;
+        const { cols, rows } = t.grid;
+        const asp = t.grid.cellHeight / t.grid.cellWidth;
+        const cam = p * rows * 0.55;
+        const hueA = mix(0.88, 0.5, smooth(span(p, 0.35, 0.8))); // rosa → cian
+        const signRows = Math.floor(rows * 0.5);
+        const sign = getTextMask(BRAND, cols, signRows, asp); // el cartel ocupa la mitad superior
+        // altura de edificios por columna y capa (bloques de ancho variable)
+        const layers = [
+            { f: 0.4, base: 0.42, amp: 0.3, w: 9, hue: 0.72, v: 0.18 },
+            { f: 0.7, base: 0.34, amp: 0.34, w: 7, hue: 0.78, v: 0.13 },
+            { f: 1.0, base: 0.22, amp: 0.36, w: 5, hue: 0.85, v: 0.08 },
+        ];
+        t.background(4, 2, 12);
+        eachCell(t, (_x, _y, i, j) => {
+            const sy = rows - 1 - j;
+            // capas de cerca a lejos
+            for (let k = layers.length - 1; k >= 0; k--) {
+                const L = layers[k];
+                const bi = Math.floor((i + 1000) / L.w);
+                const h = rows * (L.base + hash2(bi, k * 7) * L.amp);
+                const top = h - cam * L.f;
+                if (sy < top) {
+                    // ventanas
+                    const inX = (i % L.w) % 2 === 1;
+                    const inY = Math.floor(sy + cam * L.f) % 3 === 1;
+                    const seed = hash2(bi * 13 + (i % L.w), Math.floor(sy + cam * L.f));
+                    const lit = inX && inY && seed > 0.45 && Math.sin(s * (0.8 + seed * 2) + seed * 40) > -0.4;
+                    if (lit) {
+                        t.char("#");
+                        t.charColor(...hsv(seed > 0.75 ? hueA : 0.12, 0.75, 0.95));
+                        t.cellColor(...hsv(L.hue, 0.7, L.v * 1.4));
+                    }
+                    else {
+                        t.char(sy > top - 1.2 ? "=" : " ");
+                        t.charColor(...hsv(L.hue, 0.5, L.v + 0.15));
+                        t.cellColor(...hsv(L.hue, 0.7, L.v * 0.55));
+                    }
+                    return;
+                }
+            }
+            // cartel de neón en el cielo
+            const m = j < signRows ? sign.data[j * cols + i] / 255 : 0;
+            if (m > 0.4) {
+                const flick = Math.sin(s * 30 + hash2(i, 3) * 6) > 0.92 ? 0.35 : 1;
+                t.char("#");
+                t.charColor(...hsv(hueA, 0.55, 0.85 * flick));
+                t.cellColor(...hsv(hueA, 0.85, 0.25 * flick));
+                return;
+            }
+            // cielo + lluvia
+            const alt = clamp((sy + cam) / rows / 1.6);
+            t.cellColor(...hsv(mix(0.8, 0.66, alt), 0.7, mix(0.16, 0.04, alt)));
+            const rain = hash2(i, Math.floor(j + s * (9 + hash2(i, 1) * 8)));
+            if (rain > 0.965) {
+                t.char("|");
+                t.charColor(110, 190, 255, 150);
+                return;
+            }
+            const star = hash2(i + 7, j + Math.floor(cam)) > 0.993 - alt * 0.01;
+            if (star && alt > 0.25) {
+                t.char(".");
+                t.charColor(255, 255, 255, 140);
+                return;
+            }
+            t.char(" ");
+        });
+        void ptr;
+    });
+}

package/dist/lib/sketches/tunnel.d.ts

@@ -0,0 +1,3 @@
+import type { Textmodifier } from "textmode.js";
+/** Túnel infinito de tablero de ajedrez con el centro en órbita lenta. */
+export declare function tunnel(t: Textmodifier): void;

package/dist/lib/sketches/tunnel.js

@@ -0,0 +1,28 @@
+import { aspect, clamp01, eachCell, hsv, smoothstep } from "../cells.js";
+/** Túnel infinito de tablero de ajedrez con el centro en órbita lenta. */
+export function tunnel(t) {
+    const ramp = t.createGlyphRamp(" .:-=+*#%@");
+    t.draw(() => {
+        const s = t.secs;
+        const asp = aspect(t);
+        const cx = Math.sin(s * 0.5) * t.grid.cols * 0.06;
+        const cy = Math.cos(s * 0.7) * t.grid.rows * 0.06;
+        const reach = t.grid.cols * 0.28;
+        t.background(0);
+        eachCell(t, (x, y) => {
+            const dx = x - cx;
+            const dy = (y - cy) * asp;
+            const r = Math.hypot(dx, dy) + 0.001;
+            const a = Math.atan2(dy, dx);
+            const u = 14 / r + s * 1.6;
+            const v = (a / Math.PI) * 5 + s * 0.25;
+            const check = (Math.floor(u) + Math.floor(v)) & 1;
+            const fog = smoothstep(0, reach, r);
+            // Paleta que oscila entre magenta y azul, con el brillo atenuado hacia el centro
+            const hue = 0.72 + 0.16 * Math.sin(u * 0.15 + s * 0.4) + 0.05 * Math.sin(v);
+            t.char(ramp.at(fog * (check ? 0.85 : 0.35)));
+            t.charColor(...hsv(hue, 0.65, clamp01(fog * (check ? 0.95 : 0.5))));
+            t.cellColor(...hsv(hue + 0.08, 0.85, fog * (check ? 0.05 : 0.2)));
+        });
+    });
+}

package/dist/lib/text/banner.d.ts

@@ -0,0 +1,5 @@
+/** `char` y `scale` solo afectan a la fuente Bitmap; las FIGlet traen sus propios caracteres. */
+export declare function bannerLines(text: string, font: string, opts?: {
+    char?: string;
+    scale?: number;
+}): Promise<string[]>;

package/dist/lib/text/banner.js

@@ -0,0 +1,35 @@
+/**
+ * Arte de texto de asciify-engine convertido en líneas de caracteres:
+ * fuentes FIGlet (`createStudioText`) o la fuente bitmap 7×7 (`asciifyText`).
+ * Se carga bajo demanda y se guarda en caché.
+ */
+const cache = new Map();
+function trim(lines) {
+    const out = [...lines];
+    while (out.length && !out[out.length - 1].trim())
+        out.pop();
+    while (out.length && !out[0].trim())
+        out.shift();
+    return out.length ? out : [" "];
+}
+/** `char` y `scale` solo afectan a la fuente Bitmap; las FIGlet traen sus propios caracteres. */
+export function bannerLines(text, font, opts = {}) {
+    const char = opts.char || "#";
+    const scale = opts.scale || 1;
+    const key = `${font}|${char}|${scale}|${text}`;
+    let hit = cache.get(key);
+    if (!hit) {
+        hit =
+            font === "Bitmap"
+                ? import("asciify-engine/core").then((m) => trim(m.asciifyText(text, { char, scale }).split("\n")))
+                : import("asciify-engine/studio").then(async (m) => {
+                    const r = await m.createStudioText(text, font);
+                    return trim(r.ascii.split("\n"));
+                });
+        hit = hit.catch(() => [text]);
+        cache.set(key, hit);
+        if (cache.size > 60)
+            cache.delete(cache.keys().next().value);
+    }
+    return hit;
+}

package/dist/lib/text/mask.d.ts

@@ -0,0 +1,40 @@
+/** Utilidades para convertir texto en formas: ajuste de líneas y máscara por celdas. */
+export declare const BOLD_FONT: (size: number) => string;
+/**
+ * Elige el reparto en líneas que permite el mayor tamaño de fuente dentro de w×h
+ * y devuelve las líneas con ese tamaño.
+ */
+export declare function fitLines(ctx: CanvasRenderingContext2D, text: string, w: number, h: number): {
+    lines: string[];
+    size: number;
+};
+/** Dibuja el texto centrado; devuelve el tamaño de fuente usado. */
+export declare function drawFittedText(ctx: CanvasRenderingContext2D, text: string, w: number, h: number, yOffset?: number): number;
+export type TextMask = {
+    key: string;
+    cols: number;
+    rows: number;
+    data: Uint8ClampedArray;
+};
+/**
+ * Máscara de cobertura (0..255) del texto sobre una rejilla cols×rows. `asp` es la
+ * relación alto/ancho de una celda, para que las letras no salgan deformadas.
+ */
+export declare function getTextMask(text: string, cols: number, rows: number, asp?: number): TextMask;
+export type FineMask = {
+    key: string;
+    cols: number;
+    rows: number;
+    /** supermuestreo: celdas de máscara por celda de pantalla */
+    ss: number;
+    w: number;
+    h: number;
+    data: Uint8ClampedArray;
+    /** punto interior de una letra cerca del centro (en celdas de máscara, no finas) */
+    focus: {
+        x: number;
+        y: number;
+    };
+};
+/** Máscara con supermuestreo, para hacer zoom sobre el texto sin que se vea a bloques. */
+export declare function getFineMask(text: string, cols: number, rows: number, asp?: number, ss?: number): FineMask;

package/dist/lib/text/mask.js

@@ -0,0 +1,143 @@
+/** Utilidades para convertir texto en formas: ajuste de líneas y máscara por celdas. */
+/** Divide el texto en `n` líneas equilibradas por palabras. */
+function splitLines(words, n) {
+    const total = words.join(" ").length;
+    const lines = [];
+    let cur = "";
+    for (const w of words) {
+        const next = cur ? `${cur} ${w}` : w;
+        if (cur && next.length > total / n + 1 && lines.length < n - 1) {
+            lines.push(cur);
+            cur = w;
+        }
+        else
+            cur = next;
+    }
+    if (cur)
+        lines.push(cur);
+    return lines;
+}
+export const BOLD_FONT = (size) => `900 ${size}px "Arial Black", Impact, system-ui, sans-serif`;
+/**
+ * Elige el reparto en líneas que permite el mayor tamaño de fuente dentro de w×h
+ * y devuelve las líneas con ese tamaño.
+ */
+export function fitLines(ctx, text, w, h) {
+    const words = text.trim().split(/\s+/).filter(Boolean);
+    if (!words.length)
+        return { lines: [" "], size: h * 0.5 };
+    ctx.font = BOLD_FONT(100);
+    let best = { lines: [text], size: 1 };
+    for (let n = 1; n <= Math.min(4, words.length); n++) {
+        const lines = splitLines(words, n);
+        const widest = Math.max(...lines.map((l) => ctx.measureText(l).width)) / 100;
+        const size = Math.min((w * 0.92) / widest, (h * 0.8) / (lines.length * 1.08));
+        if (size > best.size)
+            best = { lines, size };
+    }
+    return best;
+}
+/** Dibuja el texto centrado; devuelve el tamaño de fuente usado. */
+export function drawFittedText(ctx, text, w, h, yOffset = 0) {
+    const { lines, size } = fitLines(ctx, text, w, h);
+    ctx.font = BOLD_FONT(size);
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    const lh = size * 1.08;
+    const top = h / 2 - ((lines.length - 1) * lh) / 2;
+    lines.forEach((l, i) => ctx.fillText(l, w / 2, top + i * lh + size * 0.04 + yOffset));
+    return size;
+}
+let cached = null;
+let big = null;
+let small = null;
+/**
+ * Máscara de cobertura (0..255) del texto sobre una rejilla cols×rows. `asp` es la
+ * relación alto/ancho de una celda, para que las letras no salgan deformadas.
+ */
+export function getTextMask(text, cols, rows, asp = 1) {
+    const key = `${text}|${cols}|${rows}|${asp.toFixed(2)}`;
+    if (cached && cached.key === key)
+        return cached;
+    const S = 6;
+    big ??= document.createElement("canvas");
+    small ??= document.createElement("canvas");
+    big.width = cols * S;
+    big.height = Math.max(2, Math.round(rows * S * asp));
+    const bctx = big.getContext("2d");
+    bctx.fillStyle = "#000";
+    bctx.fillRect(0, 0, big.width, big.height);
+    bctx.fillStyle = "#fff";
+    drawFittedText(bctx, text, big.width, big.height);
+    small.width = cols;
+    small.height = rows;
+    const sctx = small.getContext("2d", { willReadFrequently: true });
+    sctx.imageSmoothingEnabled = true;
+    sctx.drawImage(big, 0, 0, cols, rows);
+    const px = sctx.getImageData(0, 0, cols, rows).data;
+    const data = new Uint8ClampedArray(cols * rows);
+    for (let i = 0; i < data.length; i++)
+        data[i] = px[i * 4];
+    cached = { key, cols, rows, data };
+    return cached;
+}
+let fineCached = null;
+let fineBig = null;
+let fineSmall = null;
+/** Máscara con supermuestreo, para hacer zoom sobre el texto sin que se vea a bloques. */
+export function getFineMask(text, cols, rows, asp = 1, ss = 3) {
+    const key = `${text}|${cols}|${rows}|${asp.toFixed(2)}|${ss}`;
+    if (fineCached && fineCached.key === key)
+        return fineCached;
+    const w = cols * ss;
+    const h = rows * ss;
+    fineBig ??= document.createElement("canvas");
+    fineSmall ??= document.createElement("canvas");
+    fineBig.width = w;
+    fineBig.height = Math.max(2, Math.round(h * asp));
+    const bctx = fineBig.getContext("2d");
+    bctx.fillStyle = "#000";
+    bctx.fillRect(0, 0, fineBig.width, fineBig.height);
+    bctx.fillStyle = "#fff";
+    drawFittedText(bctx, text, fineBig.width, fineBig.height);
+    fineSmall.width = w;
+    fineSmall.height = h;
+    const sctx = fineSmall.getContext("2d", { willReadFrequently: true });
+    sctx.drawImage(fineBig, 0, 0, w, h);
+    const px = sctx.getImageData(0, 0, w, h).data;
+    const data = new Uint8ClampedArray(w * h);
+    for (let i = 0; i < data.length; i++)
+        data[i] = px[i * 4];
+    // Busca, cerca del centro, el punto más "interior" de una letra (mayor distancia a un borde)
+    const lit = (x, y) => x >= 0 && y >= 0 && x < w && y < h && data[y * w + x] > 200;
+    const solidRadius = (x, y) => {
+        let r = 0;
+        for (; r < 14; r++) {
+            const q = r + 1;
+            if (![[q, 0], [-q, 0], [0, q], [0, -q], [q, q], [-q, q], [q, -q], [-q, -q]].every(([dx, dy]) => lit(x + dx, y + dy)))
+                break;
+        }
+        return r;
+    };
+    let focus = { x: cols / 2, y: rows / 2 };
+    let bestR = -1;
+    const cx = Math.floor(w / 2);
+    const cy = Math.floor(h / 2);
+    search: for (let r = 0; r < Math.max(w, h) * 0.35; r += 3) {
+        for (let a = 0; a < 360; a += 15) {
+            const x = Math.round(cx + Math.cos((a * Math.PI) / 180) * r);
+            const y = Math.round(cy + Math.sin((a * Math.PI) / 180) * r * 0.6);
+            if (!lit(x, y))
+                continue;
+            const rad = solidRadius(x, y);
+            if (rad > bestR) {
+                bestR = rad;
+                focus = { x: x / ss, y: y / ss };
+                if (rad >= 12)
+                    break search;
+            }
+        }
+    }
+    fineCached = { key, cols, rows, ss, w, h, data, focus };
+    return fineCached;
+}

package/dist/lib/text/store.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Estado compartido de los demos de texto: el texto que escribe el usuario, la
+ * fuente FIGlet y el efecto de hover. Los sketches lo leen en cada fotograma, así
+ * que teclear se refleja al instante sin remontar nada.
+ */
+export type TextState = {
+    text: string;
+    font: string;
+    effect: string;
+};
+export declare const DEFAULT_TEXT = "TEXTMODE";
+export declare const textStore: {
+    get(): TextState;
+    /** Texto efectivo: si el cajón está vacío se usa el de por defecto. */
+    text(): string;
+    server(): TextState;
+    set(patch: Partial<TextState>): void;
+    subscribe(fn: () => void): () => void;
+};
+/** Fuentes FIGlet de asciify-engine/studio (+ la fuente bitmap 7×7 del motor). */
+export declare const BANNER_FONTS: readonly ["Bitmap", "Standard", "Slant", "Small", "Big", "Banner", "Block", "Bubble", "Digital", "Doom", "Lean", "Mini", "Script", "Shadow", "Speed", "Starwars", "Stop", "Straight", "Thin", "ThreeD", "Univers", "Wavy"];
+/** Efectos de hover del motor clásico de asciify-engine. */
+export declare const HOVER_EFFECTS: readonly ["spotlight", "magnify", "repel", "glow", "colorShift", "attract", "shatter", "trail", "glitchText"];

package/dist/lib/text/store.js

@@ -0,0 +1,86 @@
+export const DEFAULT_TEXT = "TEXTMODE";
+const DEFAULTS = { text: DEFAULT_TEXT, font: "Standard", effect: "spotlight" };
+const KEY = "fondos-text-v1";
+let state = DEFAULTS;
+let loaded = false;
+const listeners = new Set();
+function load() {
+    if (loaded || typeof window === "undefined")
+        return;
+    loaded = true;
+    try {
+        const raw = window.localStorage.getItem(KEY);
+        if (raw)
+            state = { ...DEFAULTS, ...JSON.parse(raw) };
+    }
+    catch {
+        /* almacenamiento no disponible: se usan los valores por defecto */
+    }
+}
+export const textStore = {
+    get() {
+        load();
+        return state;
+    },
+    /** Texto efectivo: si el cajón está vacío se usa el de por defecto. */
+    text() {
+        return textStore.get().text.trim() || DEFAULT_TEXT;
+    },
+    server() {
+        return DEFAULTS;
+    },
+    set(patch) {
+        load();
+        state = { ...state, ...patch };
+        try {
+            window.localStorage.setItem(KEY, JSON.stringify(state));
+        }
+        catch {
+            /* ignorar */
+        }
+        listeners.forEach((fn) => fn());
+    },
+    subscribe(fn) {
+        listeners.add(fn);
+        return () => {
+            listeners.delete(fn);
+        };
+    },
+};
+/** Fuentes FIGlet de asciify-engine/studio (+ la fuente bitmap 7×7 del motor). */
+export const BANNER_FONTS = [
+    "Bitmap",
+    "Standard",
+    "Slant",
+    "Small",
+    "Big",
+    "Banner",
+    "Block",
+    "Bubble",
+    "Digital",
+    "Doom",
+    "Lean",
+    "Mini",
+    "Script",
+    "Shadow",
+    "Speed",
+    "Starwars",
+    "Stop",
+    "Straight",
+    "Thin",
+    "ThreeD",
+    "Univers",
+    "Wavy",
+];
+/** Efectos de hover del motor clásico de asciify-engine. */
+export const HOVER_EFFECTS = [
+    "spotlight",
+    "magnify",
+    "repel",
+    "glow",
+    "colorShift",
+    "attract",
+    "shatter",
+    "trail",
+    "glitchText",
+];

package/dist/lib/ui/card-fields.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Campos de caracteres procedurales para el fondo de `AsciiCard`: ligeros (un canvas 2D con ~1.000 celdas, sin
+ * motor externo) para poder tener varias tarjetas animadas en la misma página. Cada campo es una función
+ * `(u, v, t, seed) → 0..1` que se traduce a un carácter de una rampa y a una opacidad; unos pocos (laberinto,
+ * rejilla, binario) eligen el carácter directamente.
+ */
+export declare const CARD_FIELDS: readonly ["plasma", "waves", "rings", "noise", "rain", "stars", "dither", "topo", "maze", "grid", "halftone", "vortex", "tunnel", "binary", "scan"];
+export type CardField = (typeof CARD_FIELDS)[number];
+/** Rampas de claro a denso. `glyph` usa el carácter de la tarjeta con distinta opacidad. */
+export declare const CARD_CHARSETS: {
+    readonly detailed: " .:-=+*#%@";
+    readonly standard: " .:-=+*#";
+    readonly blocks: " ░▒▓█";
+    readonly braille: " ⠁⠃⠇⡇⡏⡟⡿⣿";
+    readonly dots: " .·•●";
+    readonly lines: " -=≡";
+    readonly binary: " 01";
+    readonly glyph: "";
+};
+export type CardCharset = keyof typeof CARD_CHARSETS;
+/** mut: discreto · accent: el acento · gradient: de --acc a --acc2 en diagonal · value: --mut en lo bajo, --acc en lo alto */
+export type CardFieldColor = "mut" | "accent" | "gradient" | "value";
+/** reacción al puntero: glow ilumina con el acento · ripple lanza ondas · repel aparta el campo · reveal solo muestra lo cercano */
+export type CardFieldHover = "none" | "glow" | "ripple" | "repel" | "reveal";
+export type FieldOptions = {
+    field: CardField;
+    charset: CardCharset;
+    color: CardFieldColor;
+    hover: CardFieldHover;
+    /** tamaño de celda (alto de la fuente) en px */
+    size: number;
+    /** 0..1 */
+    opacity: number;
+    seed: number;
+    glyph: string;
+    colors: {
+        mut: string;
+        acc: string;
+        acc2: string;
+    };
+};
+/**
+ * Pinta el campo en el canvas. `pointer` (0..1 del tamaño de la tarjeta) y `intensity` (0..1) controlan la reacción
+ * al puntero; `t` en segundos.
+ */
+export declare function drawCardField(ctx: CanvasRenderingContext2D, w: number, h: number, t: number, o: FieldOptions, pointer: {
+    x: number;
+    y: number;
+    intensity: number;
+}): void;
+/** Campos que cambian con el tiempo (los demás solo se repintan al mover el puntero o al cambiar de tema). */
+export declare const ANIMATED_FIELDS: ReadonlySet<CardField>;