trama-ui 0.1.0

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

@@ -0,0 +1,75 @@
+/* =====================================================================
+   VideoPlayer (prefijo ui-vid). Controles propios sobre el <video> nativo: solo consumen tokens y --s-*.
+   Todo cuadrado y sin transiciones suaves: los cambios de estado son por pasos, como el resto del lenguaje pixel.
+   ===================================================================== */
+
+.ui-vid { position: relative; width: 100%; max-width: var(--vid-max, 980px); margin-inline: auto; aspect-ratio: var(--vid-ratio, 16 / 9); overflow: hidden; background: #000; color: var(--fg); font-family: var(--s-ff, inherit); -webkit-tap-highlight-color: transparent; }
+.ui-vid:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; }
+.ui-vid__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
+.ui-vid.is-idle { cursor: none; }
+
+/* Modo fondo: rellena el contenedor, sin marco, decorativo */
+.ui-vid--bg { position: absolute; inset: 0; max-width: none; aspect-ratio: auto; margin: 0; border: 0; box-shadow: none; pointer-events: none; }
+.ui-vid--bg .ui-vid__video { object-fit: cover; }
+
+/* Carátula antes de empezar: botón grande de play y título en bloque duro */
+.ui-vid__cover, .ui-vid__facade { position: absolute; inset: 0; width: 100%; display: grid; place-items: center; padding: 0; border: 0; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.6)); color: inherit; font: inherit; cursor: pointer; }
+.ui-vid__facade { background: #000; }
+.ui-vid__facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: 0.85; }
+.ui-vid__big { position: relative; display: grid; place-items: center; width: 84px; height: 84px; background: var(--s-pri-bg, var(--acc)); color: var(--s-pri-fg, var(--bg)); border: var(--s-pri-bd, 3px solid var(--bg)); box-shadow: 6px 6px 0 var(--bg); }
+.ui-vid__cover:hover .ui-vid__big, .ui-vid__facade:hover .ui-vid__big { translate: 3px 3px; box-shadow: 3px 3px 0 var(--bg); }
+.ui-vid__cover:focus-visible, .ui-vid__facade:focus-visible { outline: 3px solid var(--fg); outline-offset: -6px; }
+.ui-vid__title, .ui-vid__tag { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 6px 12px; background: var(--bg); color: var(--fg); border: 2px solid var(--fg); font-size: 14px; letter-spacing: 0.06em; text-align: left; text-transform: none; }
+.ui-vid__tag { font-size: 12px; color: var(--acc); }
+.ui-vid__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
+.ui-vid__scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
+.ui-vid__err { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 20px; text-align: center; background: var(--bg); }
+.ui-vid__err strong { color: var(--acc); }
+.ui-vid__err span { color: var(--mut); font-size: 12px; word-break: break-all; }
+
+/* Barra de controles: pegada abajo; se retira por completo (sin fundido) al quedar inactiva mientras se reproduce */
+.ui-vid__ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg); border-top: 2px solid var(--fg); text-transform: none; }
+.ui-vid.is-idle .ui-vid__ctl { transform: translateY(100%); }
+.ui-vid__ctl:focus-within { transform: none !important; }
+.ui-vid__btn { position: relative; display: grid; place-items: center; flex: none; min-width: 34px; height: 34px; padding: 0 6px; background: transparent; color: var(--fg); border: 2px solid transparent; font: inherit; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; }
+.ui-vid__btn:hover { background: var(--acc); color: var(--bg); }
+.ui-vid__btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 1px; }
+.ui-vid__btn.is-on { color: var(--acc); border-color: var(--acc); }
+.ui-vid__btn.is-off svg { opacity: 0.4; }
+.ui-vid__btn.is-off::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--acc); transform: rotate(-45deg); }
+.ui-vid__time { flex: none; min-width: 40px; font-size: 12px; letter-spacing: 0.06em; color: var(--fg); font-variant-numeric: tabular-nums; }
+
+/* Barra de valor (progreso y volumen) */
+.ui-vid__bar { position: relative; flex: 1; min-width: 40px; height: 14px; background: var(--ln); border: 2px solid var(--fg); cursor: pointer; touch-action: none; }
+.ui-vid__bar:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
+.ui-vid__vol { flex: none; width: 72px; }
+.ui-vid__bar-buf, .ui-vid__bar-fill { position: absolute; left: 0; top: 0; bottom: 0; }
+.ui-vid__bar-buf { background: var(--fg); opacity: 0.25; }
+.ui-vid__bar-fill { background: var(--acc); }
+.ui-vid__bar-thumb { position: absolute; top: -5px; width: 8px; height: 18px; background: var(--fg); translate: -50% 0; pointer-events: none; }
+
+/* Pantalla completa: sin marco ni límite de tamaño */
+.ui-vid.is-full { max-width: none; width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; box-shadow: none; }
+
+@media (max-width: 640px) {
+  .ui-vid__vol, .ui-vid__btn--txt { display: none; }
+  .ui-vid__big { width: 64px; height: 64px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ui-vid.is-idle .ui-vid__ctl { transform: none; }
+}
+
+/* Efecto ASCII: lienzo de asciify-engine sobre el vídeo, que sigue reproduciéndose debajo (útil para revelarlo con hover más adelante) */
+.ui-vid__ascii { position: absolute; inset: 0; pointer-events: none; }
+/* Con hover, el lienzo recibe el puntero (lo lee el motor) y el clic se reenvía al reproductor desde el componente */
+.ui-vid__ascii.has-hover { pointer-events: auto; }
+.ui-vid__ascii .ui-fill-canvas { display: block; width: 100%; height: 100%; }
+.ui-vid__tag--top { top: 14px; bottom: auto; }
+/* La carátula y la barra de controles quedan por encima del ASCII; el título de la carátula no debe ocultarse */
+.ui-vid__cover { z-index: 2; }
+.ui-vid__ctl { z-index: 3; }
+
+/* Enlace para abrir el vídeo en su web: siempre a mano por si el autor no permite incrustarlo */
+.ui-vid__tag--link { top: 10px; bottom: auto; left: auto; right: 10px; z-index: 2; text-decoration: none; }
+.ui-vid__tag--link:hover { background: var(--acc); color: var(--bg); }
+.ui-vid__tag--note { top: 10px; bottom: auto; left: 10px; z-index: 2; font-size: 11px; pointer-events: none; }

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

@@ -0,0 +1,15 @@
+/** Estilos base de Swiper que usan `Carousel` e `ImageGallery` (los del kit, en components/ui/styles/ui-carousel.css, los retocan encima). */
+import "swiper/css";
+import "swiper/css/a11y";
+import "swiper/css/autoplay";
+import "swiper/css/effect-cards";
+import "swiper/css/effect-coverflow";
+import "swiper/css/effect-creative";
+import "swiper/css/effect-cube";
+import "swiper/css/effect-fade";
+import "swiper/css/free-mode";
+import "swiper/css/grid";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import "swiper/css/zoom";

package/dist/components/ui/swiperCss.js

@@ -0,0 +1,15 @@
+/** Estilos base de Swiper que usan `Carousel` e `ImageGallery` (los del kit, en components/ui/styles/ui-carousel.css, los retocan encima). */
+import "swiper/css";
+import "swiper/css/a11y";
+import "swiper/css/autoplay";
+import "swiper/css/effect-cards";
+import "swiper/css/effect-coverflow";
+import "swiper/css/effect-creative";
+import "swiper/css/effect-cube";
+import "swiper/css/effect-fade";
+import "swiper/css/free-mode";
+import "swiper/css/grid";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import "swiper/css/zoom";

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

@@ -0,0 +1,12 @@
+/**
+ * Las siete variantes de estilo del sistema (ver `docs/02-guia-de-componentes.md` §5).
+ * Cada una fija las variables `--s-*` en `components/ui/styles/ui-kit.css`; los componentes solo eligen la variante.
+ */
+export declare const VARIANTS: readonly ["glass", "solid", "outline", "neon", "retro", "terminal", "minimal"];
+export type Variant = (typeof VARIANTS)[number];
+/** Clases del contenedor raíz de un componente con variante. */
+export declare const vcls: (variant: Variant) => string;
+/** Colores de un componente: cuál de los tokens usa como color principal. */
+export declare const TONES: readonly ["fg", "acc", "acc2", "mut"];
+export type Tone = (typeof TONES)[number];
+export declare const tcls: (tone: Tone) => string;

package/dist/components/ui/variants.js

@@ -0,0 +1,10 @@
+/**
+ * Las siete variantes de estilo del sistema (ver `docs/02-guia-de-componentes.md` §5).
+ * Cada una fija las variables `--s-*` en `components/ui/styles/ui-kit.css`; los componentes solo eligen la variante.
+ */
+export const VARIANTS = ["glass", "solid", "outline", "neon", "retro", "terminal", "minimal"];
+/** Clases del contenedor raíz de un componente con variante. */
+export const vcls = (variant) => `ui-s ui-s--${variant}`;
+/** Colores de un componente: cuál de los tokens usa como color principal. */
+export const TONES = ["fg", "acc", "acc2", "mut"];
+export const tcls = (tone) => `ui-tone--${tone}`;

package/dist/index.d.ts

@@ -0,0 +1,77 @@
+/** Punto de entrada de Trama: cada componente por su nombre. También `import X from "trama-ui/X"`. */
+export { default as Accordion } from "./components/ui/Accordion.js";
+export { default as Alert } from "./components/ui/Alert.js";
+export { default as ArticlesSection } from "./components/ui/ArticlesSection.js";
+export { default as AsciiBackground } from "./components/ui/AsciiBackground.js";
+export { default as AsciiCard } from "./components/ui/AsciiCard.js";
+export { default as AsciiChart } from "./components/ui/AsciiChart.js";
+export { default as Badge } from "./components/ui/Badge.js";
+export { default as BitmapText } from "./components/ui/BitmapText.js";
+export { default as BlogCard } from "./components/ui/BlogCard.js";
+export { default as Breadcrumbs } from "./components/ui/Breadcrumbs.js";
+export { default as Button } from "./components/ui/Button.js";
+export { default as CTASection } from "./components/ui/CTASection.js";
+export { default as Carousel } from "./components/ui/Carousel.js";
+export { default as CheckboxGroup } from "./components/ui/CheckboxGroup.js";
+export { default as CodeBlock } from "./components/ui/CodeBlock.js";
+export { default as ContactForm } from "./components/ui/ContactForm.js";
+export { default as CrtOverlay } from "./components/ui/CrtOverlay.js";
+export { default as Divider } from "./components/ui/Divider.js";
+export { default as Drawer } from "./components/ui/Drawer.js";
+export { default as Dropdown } from "./components/ui/Dropdown.js";
+export { default as FAQSection } from "./components/ui/FAQSection.js";
+export { default as FeatureGrid } from "./components/ui/FeatureGrid.js";
+export { default as Footer } from "./components/ui/Footer.js";
+export { default as GlyphCursor } from "./components/ui/GlyphCursor.js";
+export { default as GridBackground } from "./components/ui/GridBackground.js";
+export { default as Hero } from "./components/ui/Hero.js";
+export { default as HoverFX } from "./components/ui/HoverFX.js";
+export { default as Icon } from "./components/ui/Icon.js";
+export { default as ImageGallery } from "./components/ui/ImageGallery.js";
+export { default as LogoCloud } from "./components/ui/LogoCloud.js";
+export { default as MagneticButton } from "./components/ui/MagneticButton.js";
+export { default as Marquee } from "./components/ui/Marquee.js";
+export { default as Modal } from "./components/ui/Modal.js";
+export { default as NavBar } from "./components/ui/NavBar.js";
+export { default as NeonSign } from "./components/ui/NeonSign.js";
+export { default as OtpInput } from "./components/ui/OtpInput.js";
+export { default as Pagination } from "./components/ui/Pagination.js";
+export { default as Panel } from "./components/ui/Panel.js";
+export { default as PixelFrame } from "./components/ui/PixelFrame.js";
+export { default as Presence } from "./components/ui/Presence.js";
+export { default as PricingCard } from "./components/ui/PricingCard.js";
+export { default as PricingSection } from "./components/ui/PricingSection.js";
+export { default as Progress } from "./components/ui/Progress.js";
+export { default as RadioGroup } from "./components/ui/RadioGroup.js";
+export { default as RangeSlider } from "./components/ui/RangeSlider.js";
+export { default as Reveal } from "./components/ui/Reveal.js";
+export { default as SceneFlash } from "./components/ui/SceneFlash.js";
+export { default as ScrambleText } from "./components/ui/ScrambleText.js";
+export { default as ScrollArea } from "./components/ui/ScrollArea.js";
+export { default as SectionHeader } from "./components/ui/SectionHeader.js";
+export { default as Select } from "./components/ui/Select.js";
+export { default as Skeleton } from "./components/ui/Skeleton.js";
+export { default as Spinner } from "./components/ui/Spinner.js";
+export { default as Spotlight } from "./components/ui/Spotlight.js";
+export { default as Sprite } from "./components/ui/Sprite.js";
+export { default as StatCounter } from "./components/ui/StatCounter.js";
+export { default as StatsSection } from "./components/ui/StatsSection.js";
+export { default as Stepper } from "./components/ui/Stepper.js";
+export { default as Table } from "./components/ui/Table.js";
+export { default as Tabs } from "./components/ui/Tabs.js";
+export { default as TeamSection } from "./components/ui/TeamSection.js";
+export { default as TerminalTyper } from "./components/ui/TerminalTyper.js";
+export { default as Testimonial } from "./components/ui/Testimonial.js";
+export { default as TestimonialSection } from "./components/ui/TestimonialSection.js";
+export { default as TextField } from "./components/ui/TextField.js";
+export { default as TextmodeBackground } from "./components/ui/TextmodeBackground.js";
+export { default as Timeline } from "./components/ui/Timeline.js";
+export { default as Toast } from "./components/ui/Toast.js";
+export { default as Toggle } from "./components/ui/Toggle.js";
+export { default as Tooltip } from "./components/ui/Tooltip.js";
+export { default as Typewriter } from "./components/ui/Typewriter.js";
+export { default as VideoPlayer } from "./components/ui/VideoPlayer.js";
+export * from "./components/ui/intent.js";
+export * from "./components/ui/fill.js";
+export * from "./components/ui/variants.js";
+export { tokensToStyle, neutralTokens, FONT_PRESETS, type TokenSet } from "./lib/ui/tokens.js";

package/dist/index.js

@@ -0,0 +1,77 @@
+/** Punto de entrada de Trama: cada componente por su nombre. También `import X from "trama-ui/X"`. */
+export { default as Accordion } from "./components/ui/Accordion.js";
+export { default as Alert } from "./components/ui/Alert.js";
+export { default as ArticlesSection } from "./components/ui/ArticlesSection.js";
+export { default as AsciiBackground } from "./components/ui/AsciiBackground.js";
+export { default as AsciiCard } from "./components/ui/AsciiCard.js";
+export { default as AsciiChart } from "./components/ui/AsciiChart.js";
+export { default as Badge } from "./components/ui/Badge.js";
+export { default as BitmapText } from "./components/ui/BitmapText.js";
+export { default as BlogCard } from "./components/ui/BlogCard.js";
+export { default as Breadcrumbs } from "./components/ui/Breadcrumbs.js";
+export { default as Button } from "./components/ui/Button.js";
+export { default as CTASection } from "./components/ui/CTASection.js";
+export { default as Carousel } from "./components/ui/Carousel.js";
+export { default as CheckboxGroup } from "./components/ui/CheckboxGroup.js";
+export { default as CodeBlock } from "./components/ui/CodeBlock.js";
+export { default as ContactForm } from "./components/ui/ContactForm.js";
+export { default as CrtOverlay } from "./components/ui/CrtOverlay.js";
+export { default as Divider } from "./components/ui/Divider.js";
+export { default as Drawer } from "./components/ui/Drawer.js";
+export { default as Dropdown } from "./components/ui/Dropdown.js";
+export { default as FAQSection } from "./components/ui/FAQSection.js";
+export { default as FeatureGrid } from "./components/ui/FeatureGrid.js";
+export { default as Footer } from "./components/ui/Footer.js";
+export { default as GlyphCursor } from "./components/ui/GlyphCursor.js";
+export { default as GridBackground } from "./components/ui/GridBackground.js";
+export { default as Hero } from "./components/ui/Hero.js";
+export { default as HoverFX } from "./components/ui/HoverFX.js";
+export { default as Icon } from "./components/ui/Icon.js";
+export { default as ImageGallery } from "./components/ui/ImageGallery.js";
+export { default as LogoCloud } from "./components/ui/LogoCloud.js";
+export { default as MagneticButton } from "./components/ui/MagneticButton.js";
+export { default as Marquee } from "./components/ui/Marquee.js";
+export { default as Modal } from "./components/ui/Modal.js";
+export { default as NavBar } from "./components/ui/NavBar.js";
+export { default as NeonSign } from "./components/ui/NeonSign.js";
+export { default as OtpInput } from "./components/ui/OtpInput.js";
+export { default as Pagination } from "./components/ui/Pagination.js";
+export { default as Panel } from "./components/ui/Panel.js";
+export { default as PixelFrame } from "./components/ui/PixelFrame.js";
+export { default as Presence } from "./components/ui/Presence.js";
+export { default as PricingCard } from "./components/ui/PricingCard.js";
+export { default as PricingSection } from "./components/ui/PricingSection.js";
+export { default as Progress } from "./components/ui/Progress.js";
+export { default as RadioGroup } from "./components/ui/RadioGroup.js";
+export { default as RangeSlider } from "./components/ui/RangeSlider.js";
+export { default as Reveal } from "./components/ui/Reveal.js";
+export { default as SceneFlash } from "./components/ui/SceneFlash.js";
+export { default as ScrambleText } from "./components/ui/ScrambleText.js";
+export { default as ScrollArea } from "./components/ui/ScrollArea.js";
+export { default as SectionHeader } from "./components/ui/SectionHeader.js";
+export { default as Select } from "./components/ui/Select.js";
+export { default as Skeleton } from "./components/ui/Skeleton.js";
+export { default as Spinner } from "./components/ui/Spinner.js";
+export { default as Spotlight } from "./components/ui/Spotlight.js";
+export { default as Sprite } from "./components/ui/Sprite.js";
+export { default as StatCounter } from "./components/ui/StatCounter.js";
+export { default as StatsSection } from "./components/ui/StatsSection.js";
+export { default as Stepper } from "./components/ui/Stepper.js";
+export { default as Table } from "./components/ui/Table.js";
+export { default as Tabs } from "./components/ui/Tabs.js";
+export { default as TeamSection } from "./components/ui/TeamSection.js";
+export { default as TerminalTyper } from "./components/ui/TerminalTyper.js";
+export { default as Testimonial } from "./components/ui/Testimonial.js";
+export { default as TestimonialSection } from "./components/ui/TestimonialSection.js";
+export { default as TextField } from "./components/ui/TextField.js";
+export { default as TextmodeBackground } from "./components/ui/TextmodeBackground.js";
+export { default as Timeline } from "./components/ui/Timeline.js";
+export { default as Toast } from "./components/ui/Toast.js";
+export { default as Toggle } from "./components/ui/Toggle.js";
+export { default as Tooltip } from "./components/ui/Tooltip.js";
+export { default as Typewriter } from "./components/ui/Typewriter.js";
+export { default as VideoPlayer } from "./components/ui/VideoPlayer.js";
+export * from "./components/ui/intent.js";
+export * from "./components/ui/fill.js";
+export * from "./components/ui/variants.js";
+export { tokensToStyle, neutralTokens, FONT_PRESETS } from "./lib/ui/tokens.js";

package/dist/lib/asciify/painters.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Fuentes procedurales para asciify-engine.
+ *
+ * asciify-engine convierte imágenes, vídeo o canvas en arte de caracteres. Como el
+ * proyecto no trae medios, cada demo dibuja su propia imagen animada en un canvas 2D
+ * y el motor la convierte en cada fotograma.
+ */
+export type Pointer = {
+    /** Posición normalizada 0..1 (suavizada). Sin puntero real, vaga sola. */
+    x: number;
+    y: number;
+    down: boolean;
+    /** true si hay un puntero real sobre el lienzo */
+    active: boolean;
+};
+/** Progreso de scroll que leen las escenas "con progreso": `p` 0–1 y velocidad `v` -1..1. */
+export type Progress = {
+    p: number;
+    v: number;
+};
+export type Painter = (ctx: CanvasRenderingContext2D, w: number, h: number, t: number, p: Pointer, 
+/** progreso propio de quien pinta; sin él, las escenas leen el `scrollState` global de las demos */
+s?: Progress) => void;
+export type SourceKind = "lava" | "synthwave" | "galaxy" | "waves" | "rings" | "plasma" | "torus" | "text" | "kaleido" | "rain" | "orbs" | "bigtext" | "bigglow" | "figlet" | "elastic" | "tide" | "wave" | "cube" | "pyramid" | "sphere" | "cylinder" | "cone" | "octahedron" | "tetrahedron" | "icosahedron" | "hexprism" | "diamond" | "torusknot" | "brew" | "bloom" | "arcade";
+export declare const painters: Record<SourceKind, () => Painter>;