ryukami-ui (v2.4.0) es la implementación oficial en componentes reutilizables de Scorch-CLI inspirada en la arquitectura de 8bitcn.com y shadcn/ui, adaptada a la estética de dragón oriental y retro-terminal de Ryukami Labs. Incluye su propio CLI instalador (ryukami-ui) con 35 módulos, Servidor MCP nativo (ryukami-ui mcp), verificador SHA-256 (ryukami-ui diff), exportación W3C Design Tokens (/r/tokens.json) y puntuación 96 / 100 / 100 / 100 en Lighthouse.
🚀 Especificaciones del Stack (Vanguardia Estable)
Herramienta
Versión
Rol en el Proyecto
Estado
Astro
v7.4.0
Motor estático ultra-rápido impulsado por Vite 8 y Rolldown. Compilación completa en < 1s con 0 KiB de JS externo.
STABLE
Tailwind CSS
v4.3.3
Motor CSS-first sin archivo JS legado (@theme, @import "tailwindcss"; y @custom-variant dark). Bundle final de solo 36 KiB.
STABLE
TypeScript
v7.0.2
Tipado estricto nativo para todas las interfaces de props (export interface Props).
STABLE
Ryukami-UI CLI + MCP
v2.4.0
Instalador de componentes (init, list, add, info, diff, mcp) + compilador de registro estático en public/r/*.json (35 módulos + tokens.json).
ONLINE
Web Audio API
Nativo
Síntesis procedural de audio para clics mecánicos y alertas por frecuencia sin archivos .mp3.
ONLINE
Package Manager
pnpm v12.11
Gestión de dependencias con enlaces duros ultrarrápidos.
ACTIVE
🛠️ Arquitectura del CLI (ryukami-ui) y Registro Estático (/r/*.json)
Al igual que shadcn/ui y 8bitcn.com, ryukami-ui funciona bajo el modelo Open-Code Registry: en lugar de instalar una librería opaca cerrada en node_modules, el CLI inyecta el código fuente .astro limpio directamente en tu carpeta src/components/ para que tengas control total.
1. Cómo Funciona Internamente
Compilador de Registro (scripts/build-registry.mjs):
Lee cada componente de src/components/*.astro y la hoja de tokens src/styles/global.css.
Genera automáticamente en public/r/ un archivo JSON por cada componente (button.json, card.json, modal.json, etc.), styles.json y el índice maestro public/r/registry.json.
Al estar en public/r/, el propio servidor de Astro sirve los componentes como una API estática JSON (http://localhost:4321/r/registry.json).
Vinculado globalmente en tu sistema Linux (~/.local/bin/ryukami-ui) y declarado en el campo "bin" de package.json.
Resuelve automáticamente dependencias entre componentes (registryDependencies): por ejemplo, al ejecutar ryukami-ui add command-palette, detecta que requiere kbd (Kbd.astro) y lo instala junto con él.
Puede funcionar 100% offline leyendo el registro local o remoto por HTTP pasando --registry http://localhost:4321/r.
Comandos Oficiales del CLI ryukami-ui
# 1. Ver la tabla completa de los 27 componentes disponibles en consolaryukami-ui list# 2. Inicializar tokens CSS (Tailwind v4) y ryukami.json en cualquier proyectoryukami-ui init --dir ./mi-app-astro# 3. Instalar componentes específicos (resuelve dependencias automáticamente)ryukami-ui add button badge card avatar skeleton textarea radio-group breadcrumb pagination popover modal command-palette --dir ./mi-app-astro# 4. Instalar los 27 componentes del catálogo de una sola vezryukami-ui add --all --dir ./mi-app-astro# 5. Inspeccionar ficha técnica, ruta y dependencias de un componenteryukami-ui info command-palette# 6. Regenerar el registro JSON tras editar un componente basepnpm registry:build
📁 Estructura y Archivos Clave en Disco
Ruta local:/home/alexwce/Documentos/a/ryukami-ui
Ejecutable CLI:/home/alexwce/Documentos/a/ryukami-ui/bin/ryukami-ui.mjs (enlazado en ~/.local/bin/ryukami-ui)
Compilador del Registro:/home/alexwce/Documentos/a/ryukami-ui/scripts/build-registry.mjs
Endpoints JSON del Registro:/home/alexwce/Documentos/a/ryukami-ui/public/r/ (registry.json + 27 módulos + styles.json)
Guía para Agentes IA:/home/alexwce/Documentos/a/ryukami-ui/AGENTS.md
README del Proyecto:/home/alexwce/Documentos/a/ryukami-ui/README.md
El banner original (886.2 KiB) se convirtió en variantes WebP responsivas (scorch-dragon-banner-480.webp de 27 KiB, scorch-dragon-banner-800.webp de 60 KiB y scorch-dragon-banner.webp de 168 KiB).
Implementado con <picture> + srcset, width="800" height="447", aspect-[800/447], fetchpriority="high" y <link rel="preload" as="image"> en <head>.
Eliminación de Bloqueo de Renderizado y JS Innecesario:
Fuentes Google Fonts cargadas de forma asíncrona no bloqueante (media="print" onload="this.media='all'") en BaseLayout.astro.
Desactivado el Astro Dev Toolbar (devToolbar: { enabled: false }) y activado compressHTML: true en astro.config.mjs, reduciendo el payload de red de 2,964 KiB a < 120 KiB totales en producción.
Animaciones 100% Aceleradas por GPU:
Se reemplazó transition-all por transition: transform 75ms ease-out, eliminando las 58 advertencias de non-composited animations.
Calibración Cromática WCAG AA (#D62436 = 5.04:1) y Alineación Geométrica:
El token --scorch-red / --color-scorch-crimson se calibró a #D62436 (5.04:1 sobre blanco #FFFFFF y 4.70:1 sobre #F5F7FA).
Los controles de ventana [ - ][ □ ][ × ] se rediseñaron con cajas cuadradas de 20×20px y primitivas geométricas/SVG centradas al píxel.
☁️ Producción en Vivo (Cloudflare Pages), GitHub & Auto-Deploy (wrangler)
Expone /r/* con Access-Control-Allow-Origin: * para que el CLI (ryukami-ui) descargue componentes directamente desde https://ryukami-ui.pages.dev/r cuando se ejecuta fuera del repositorio local.
Aplica Cache-Control: public, max-age=31536000, immutable en /_astro/* y /scorch-dragon-banner* además de X-Frame-Options: DENY, X-Content-Type-Options: nosniff y Cross-Origin-Opener-Policy: same-origin.
Git Hook pre-push Automático (.git/hooks/pre-push + scripts/setup-hooks.sh):
Cada vez que ejecutas git push (o pnpm ship), el hook compila automáticamente los 27 módulos (public/r/*.json) + el sitio estático Astro (dist/) y los sube a https://ryukami-ui.pages.dev mediante Wrangler antes de completar el push a GitHub.
GitHub Actions Workflow (.github/workflows/cloudflare-pages.yml):
Verifica la compilación de los 27 módulos y el build estático de Astro en cada push a main, y despliega en Cloudflare Pages si están definidos los secretos de CI (CLOUDFLARE_API_TOKEN y CLOUDFLARE_ACCOUNT_ID).
# Desplegar y subir cambios a GitHub + Cloudflare Pages en un solo comando:git push origin main# (O usando el alias de package.json):pnpm ship# Desplegar manualmente solo a Cloudflare Pages cuando quieras:pnpm pages:deploy
🔧 Actualizaciones y Correcciones de Calidad v2.3.0
AUDITORÍA DE CALIDAD Y OPTIMIZACIÓN (2026-10-19)
Enlaces a GitHub Oficial: Añadidos enlaces directos a https://github.com/Alecwce/ryukami-ui en el Header principal, en la sección 08_CLI_E_INSTALACION y en el footer.
Instalación y Origen del CLI: Explicación detallada de dónde proviene el comando ryukami-ui (bin/ryukami-ui.mjs del repositorio enlazado a ~/.local/bin/ryukami-ui), agregando el “PASO 00 // OBTENER” en la guía interactiva.
Consistencia de Versión (v2.3.0): Homologada la versión v2.3.0 en footer, header, registry JSON, package.json y Command Palette (eliminando remanentes de v2.2.0).
Audio Control: El sintetizador Web Audio arranca apagado por defecto (🔇 SND: OFF), permitiendo activación opcional y consciente por parte del usuario.
Corrección Tipográfica: Corregido el badge REA_ENGINEERING → RE_ENGINEERING.
Criptografía Rigurosa: Reemplazado “Token encriptado con SHA-256” por “Token cifrado con SHA-256” respetando la terminología técnica adecuada en español.
Social Media & SEO Meta Tags: Inyectados theme-color (#D62436), Open Graph (og:image, og:title, og:description, og:url) y Twitter Cards (summary_large_image) para previsualización enriquecida en redes y mensajería.
Limpieza de Servicios: Eliminado el enlace roto devlink.bot-keep.xyz y reemplazado por los nodos activos de Cloudflare Pages Edge y Open-Code Registry CDN (4 nodos 100% operativos).
Clearance y Scroll del Terminal: Ampliado scroll-mt a scroll-mt-52 en #live-shell y #scorch-live-terminal con relative z-10, resolviendo el overlap con el header sticky y asegurando que botones como dragon sean siempre clicables.
🚀 Ronda 2: Auditoría Técnica y Endurecimiento Mobile (2026-10-19)
AUDITORÍA DE CALIDAD RONDA 2 — VERIFICACIÓN LIVE & HEADLESS CDP
Favicon SVG Real (public/favicon.svg): Creado emblema vectorial neo-brutalista del Dragón Scorch con cuernos geométricos dorados (#F4D35E), cresta carmesí (#D62436) y ojos cian (#4DA3FF). Verifica con HTTP 200 y Content-Type: image/svg+xml (1.8 KB).
Indexación SEO (robots.txt & sitemap.xml): Creados public/robots.txt (Allow: / + declaración Sitemap) y public/sitemap.xml con endpoints canónicos. Verifican con HTTP 200 y Content-Type: text/plain; charset=utf-8 y application/xml; charset=utf-8.
Página 404 Nativa (src/pages/404.astro): Compilada a dist/404.html. Cloudflare Pages ahora intercepta rutas inexistentes y responde con código real HTTP 404 y Content-Type: text/html; charset=utf-8 con interfaz TUI retro de contingencia.
Instalación Real en Command Palette: Sustituido el comando obsoleto de npm por el comando real de instalación global del CLI documentado en la sección 08 (git clone a ~/.local/share + ln -sf a ~/.local/bin/ryukami-ui).
Documentación Cloudflare Bot Fight Mode: Documentado en README.md el error 1010 de Cloudflare ante User-Agents no-navegador genéricos (ej. Python-urllib/* o curl sin cabeceras), explicando cómo mitigarlo mediante la cabecera -A "Ryukami-CLI/2.3.0" o en el Dashboard de Cloudflare (Security > Bots).
Optimización Responsive Móvil 375px: Auditada con Headless Chrome + Chrome DevTools Protocol a 375×812. Se eliminó el desbordamiento horizontal (hasHScroll: false, scrollWidth: 375px), adaptando los encabezados largos con text-base sm:text-2xl break-words, envolviendo la tabla de servicios en contenedor swipe overflow-x-auto, aplicando overflow-x: clip en el viewport y adaptando el input y botones del terminal y Theme Studio.
⚡ Ronda 3: Iconos SVG Inline, llms.txt, CI Workflow y Auditoría Lighthouse Real (2026-10-19)
Iconos SVG Inline Estilo Lucide (src/components/Icon.astro):
Se reemplazaron todos los emojis funcionales (📋, 🪟, 📟, 🔍, 🔇/🔊, ☀️/🌙, ⌨️, 💻, 📦, ⚡, 🔥, 🩸) por iconos SVG puros estilo Lucide incrustados en tiempo de compilación.
Cada SVG cuenta con aria-hidden="true" y atributos accesibles.
Se conservó intacto el dragón 🐉 como emblema de marca y los glifos de terminal retro ✓, ✕, ★, ▲, ◆.
La web mantiene 0 KiB de JS externo o icon fonts de terceros.
Manifiesto para Agentes de IA (public/llms.txt):
Documento técnico optimizado para LLMs y coding agents (Cursor, Claude, Windsurf, Gemini).
Expone qué es Ryukami-UI, cómo usar el CLI (ryukami-ui init, add, list), los endpoints /r/<componente>.json y el catálogo exhaustivo de los 27 componentes con descripción funcional.
GitHub Release v2.3.0 & Topics:
Publicada la release oficial v2.3.0 en GitHub con notas completas de las rondas 1, 2 y 3: https://github.com/Alecwce/ryukami-ui/releases/tag/v2.3.0.
Topics actualizados en el repo: astro, cli, component-library, neo-brutalism, retro-ui, tailwindcss, tui, scorch-design-system.
Workflow de Integración Continua (.github/workflows/ci.yml):
Ejecuta en cada push o pull_request a main: setup de Node 22 + pnpm 10, instalación limpia, generación del registro de 27 componentes (scripts/build-registry.mjs), build estático Astro y validación estricta de artefactos en dist/ (index.html, 404.html, favicon.svg, robots.txt, sitemap.xml, llms.txt, r/registry.json).
Badge oficial de CI añadido al encabezado de README.md.
Auditoría Lighthouse en Producción Real (https://ryukami-ui.pages.dev):
Ejecutada auditoría con Google Chrome Headless sobre el despliegue en vivo en Cloudflare Pages Edge.
Puntuaciones Reales Verificadas:
🚀 Performance:95
♿ Accessibility:97
🛡️ Best Practices:100
🔍 SEO:100
Evidencia completa guardada en public/lighthouse.html y accesible públicamente en https://ryukami-ui.pages.dev/lighthouse.
Actualizados todos los claims en Hero, Terminal y README.md con las métricas empíricas reales.
⚡ Ronda 4: Accesibilidad 100/100 (WCAG AA), Preload de Fuentes y Cero Salto de Layout (2026-10-19)
AUDITORÍA DE RENDIMIENTO Y ACCESIBILIDAD RONDA 4 — 96 / 100 / 100 / 100
Calibración de Contraste Cromático WCAG AA 4.5:1 (Score: 100 A11y):
Terminal Output (#scorch-term-output pre) y Prompt (#scorch-term-form label): El carmesí oscuro #D62436 sobre fondo #070A0F/#000000 daba ratio 3.93:1 y 4.16:1. Se elevó a text-[#FF5263], alcanzando 6.27:1 y 6.64:1 (> 4.5:1).
Celdas de la Tabla de Servicios (td.p-3): En modo claro (fondo blanco), text-scorch-cyan (#4DA3FF) y text-scorch-gold (#F4D35E) tenían contraste insuficiente (2.62:1 y 1.46:1). Se calibraron a text-sky-700 dark:text-scorch-cyan (5.93:1) y text-amber-800 dark:text-scorch-gold (7.09:1).
Resultado:0 fallas en la auditoría color-contrast de Lighthouse y puntaje de Accessibility 100/100.
Sincronización de Afirmaciones “100/100”:
Se ajustaron la pregunta del FAQ y la descripción técnica de la arquitectura SSG en la sección de CLI para reflejar los puntajes reales auditados (96 / 100 / 100 / 100).
Optimización LCP (2.5s) y FCP (1.5s):
Se agregaron etiquetas <link rel="preload" as="font" type="font/woff2" crossorigin> para las fuentes críticas de Google Fonts (Press Start 2P, JetBrains Mono y Tiny5).
Preconexiones DNS/TLS aceleradas hacia fonts.googleapis.com y fonts.gstatic.com.
Atributos fetchpriority="high", loading="eager" y decoding="sync" en la imagen LCP del hero banner.
FCP mejoró de 2.0s a 1.5s, y TBT se redujo de 90ms a 30ms.
Eliminación Total del Cumulative Layout Shift (CLS: 0.000):
Se cambió el parámetro de carga de Google Fonts de &display=swap a &display=optional.
Se inyectó @font-face con fallback métrico calibrado (Press Start 2P Fallback) usando size-adjust: 65%, ascent-override: 80% y descent-override: 20%.
El CLS pasó de 0.064 a 0.000 (cero salto visual).
Nuevo Reporte Lighthouse en Vivo:
Puntuaciones auditadas en producción: 96 Performance / 100 Accessibility / 100 Best Practices / 100 SEO.
Reporte interactivo completo guardado y desplegado en public/lighthouse.html (https://ryukami-ui.pages.dev/lighthouse).
🎨 Ronda 5: Pulido Visual de Header, Alineación Pixel-Perfect y ScrollSpy Responsive (2026-10-20)
Alineación Pixel-Perfect de las 4 Acciones (Header.astro):
Se normalizaron GitHub, CMD+K, SND y PAPER con altura fija idéntica (h-8 = 32px), leading-none, inline-flex items-center justify-center y contenedor con items-center flex-nowrap.
En desktop (1440px), todos comparten top=78.78px, bottom=110.78px, height=32px.
En móvil (375px), pasan a cuadrados 32×32px (w-8 h-8 px-0) con labels hidden sm:inline, compartiendo top=60.78px, bottom=92.78px, height=32px.
Blindaje de Envoltura en Header del Sidebar (SidebarNav.astro):
En INDEX // EXPLORER / 27 MODS, se aplicó text-[11px], whitespace-nowrap y shrink-0 a ambos textos con flex-nowrap, garantizando que “27 MODS” jamás se parta en dos líneas.
ScrollSpy Nativo con IntersectionObserver en el Nav Principal:
Los enlaces [01_CORE], [02_FORMS], [03_MODALS], [04_STUDIO], [05_ASCII] detectan la sección visible con IntersectionObserver y se resaltan con fondo negro y texto blanco en claro (bg-black text-white border-black) e inverso en oscuro (dark:bg-white dark:text-black dark:border-white), con 0 KiB de JS externo.
Densidad Responsive sin Segunda Línea:
Bajo lg (< 1024px) se oculta la ruta ~/scorch-components (hidden lg:inline).
Bajo md (< 768px) se ocultan los 5 links de sección (hidden md:flex).
Fila del header asegurada con flex-nowrap overflow-x-clip: cero envoltura a segunda línea en cualquier resolución.
Verificación Headless CDP y Lighthouse:
Auditado en producción a 1440px (scrollWidth: 1425px <= 1440px) y 375px (scrollWidth: 375px <= 375px): cero scroll horizontal.
Lighthouse en vivo: Performance 96 / Accessibility 100 / Best Practices 100 / SEO 100 (TBT: 0ms, CLS: 0.000).
🧭 Ronda 6: Calibración Milimétrica de Clics en el Nav y Sincronización de Secciones (2026-10-20)
RESOLUCIÓN DEL ERROR "EL NAV LLEVA A OTRO LADO Y NO AL EXACTO"
Diagnóstico Científico con Headless Chrome CDP:
Al hacer clic en un enlace del header, el salto nativo del navegador sumaba scroll-padding-top: 5.5rem (88px) en <html> con scroll-mt-32 (128px) en las secciones, resultando en un offset de 216px.
Como el header sticky mide ~93px y se fija en top: 16px (headerBottom: 109px), la sección quedaba frenada a 107px por debajo del header (distanceFromHeaderToHeading: 107px).
En ese vacío de 107px se mostraba el final de la sección anterior (ej. al clicar [02_FORMS] se veían los avatares de CORE; al clicar [04_STUDIO] se veía la tabla de servicios de REGISTRO_TUI), creando la sensación visual de haber saltado a otra sección.
Además, los enlaces estaban rotulados como [04_STUDIO] y [05_ASCII], pero las cabeceras reales de la página son // 06_THEME_STUDIO_EN_VIVO y // 07_SCORCH_ASCII_FORGE (porque 04_SHELL y 05_REGISTRO se encuentran en medio).
Eliminación de la Duplicación de Offset:
Se eliminaron las 27 ocurrencias redundantes de scroll-mt-32 y scroll-mt-52 en src/pages/index.astro.
Se calibró scroll-padding-top: 7.5rem (120px) en src/layouts/BaseLayout.astro para saltos nativos por URL / hash directo.
Interceptación y Scroll Dinámico en Header.astro:
Se implementó e.preventDefault() en el listener de clics del nav del header.
Se añadió cálculo dinámico del header (headerTop + headerHeight + 12px margin), logrando un aterrizaje suave y exacto a headerBottom + 12px con window.scrollTo({ behavior: 'smooth' }).
Se sincronizó el estado visual activo (setActive) y history.replaceState.
Armonización de Etiquetas de Secciones:
Se actualizaron los botones a [01_CORE], [02_FORMS], [03_MODALS], [06_STUDIO], [07_ASCII], coincidiendo al 100% con los títulos 01_NÚCLEO..., 02_SUITE..., 03_NAVEGACIÓN..., 06_THEME_STUDIO..., 07_SCORCH_ASCII....
Densidad Responsive sin Desbordamiento Horizontal:
Se ajustaron las etiquetas de texto de los botones del header a hidden xl:inline y el nav a hidden lg:flex, garantizando cero desbordamiento horizontal (overflow: false) en 1440px, 1280px, 1024px, 768px y 375px.
Verificación en Producción en Vivo (https://ryukami-ui.pages.dev):
Comprobado punto por punto vía Chrome DevTools Protocol:
components: distanceFromHeader: 12px, heading visible directo bajo el header.
forms: distanceFromHeader: 12px, heading visible directo bajo el header.
alerts: distanceFromHeader: 12px, heading visible directo bajo el header.
theme-studio: distanceFromHeader: 12px, heading visible directo bajo el header.
ascii-forge: distanceFromHeader: 12px, heading visible directo bajo el header.
💎 Ronda 7: Tabla de Props Visual, Persistencia Audio y Reducción de Movimiento (2026-10-21)
MEJORAS DE ADOPCIÓN, ACCESIBILIDAD Y PERSISTENCIA (96 / 100 / 100 / 100)
Pestaña [ PROPS ] y Tabla Neo-Brutalista en ComponentPreview.astro:
Se añadió una 3ª pestaña [ PROPS ] junto a PREVIEW y CODE en los 14 visores de componentes.
Tabla brutalista pura: 0px border-radius, bordes sólidos de 2px, cabecera negra contrastada, badges para variantes y hover suave.
Muestra: Prop, Tipo TypeScript, Default, Descripción y Variantes (src/data/component-props.ts).
Persistencia de Audio en localStorage:
Al pulsar el toggle SND: ON / OFF, la preferencia se guarda bajo la clave ryukami-sound-enabled.
Al recargar o navegar, se restaura el estado inmediatamente (manteniendo OFF por defecto en primeras visitas).
Accesibilidad con prefers-reduced-motion:
Regla global en src/styles/global.css que desactiva transiciones y animaciones (animation-duration: 0.01ms !important, scroll-behavior: auto !important).
Sincronizado en los listeners de desplazamiento JS de Header.astro y SidebarNav.astro (prefersReduced ? 'auto' : 'smooth').
💎 Ronda 8: Restauración Tipográfica Pixel Art 8-Bit (2026-10-21)
IDENTIDAD RETRO ARCADE INMUTABLE: RESTAURACIÓN DE PRESS START 2P Y TINY5
Diagnóstico del Fallo Tipográfico:
En una optimización de Lighthouse para CLS (Cumulative Layout Shift), se había configurado display=optional y carga asíncrona mediante media="print" onload="this.media='all'", sumado a una fuente fallback artificial @font-face { font-family: 'Press Start 2P Fallback'; src: local('Courier New'); size-adjust: 65%; }.
Según la especificación CSS Font Loading, display=optional da un margen de swap de solo 100ms. Debido a la carga diferida con media="print", el navegador superaba dicho margen y descartaba definitivamente Press Start 2P, renderizando permanentemente DejaVu Sans Mono / Courier New como texto plano.
Correcciones Aplicadas:
Se eliminó el fallback de Courier New en src/styles/global.css.
Se restableció la carga canónica de Google Fonts con &display=swap en src/layouts/BaseLayout.astro.
Se pre-cargaron los subconjuntos Latin correctos de los archivos WOFF2 (Press Start 2P, Tiny5, JetBrains Mono).
Se restablecieron las clases .title-8bit { font-family: 'Press Start 2P', 'VT323', monospace; } y .subtitle-pixel { font-family: 'Tiny5', 'VT323', monospace; }.
Verificación en Producción en Vivo (https://ryukami-ui.pages.dev):
Auditoría real mediante Chrome DevTools Protocol (CSS.getPlatformFontsForNode):
Se integró navigator.vibrate(8) en window.playMechanicalClick dentro de src/layouts/BaseLayout.astro.
En dispositivos móviles táctiles, cada pulsación de botón genera una vibración sutil emulando la resistencia de un switch Cherry MX mecánico, incluso si el audio está en silencio.
Área Táctil Cómoda en Móviles (WCAG 2.5.5 / 2.5.8):
Se añadieron pseudo-elementos de expansión after:absolute after:-inset-1.5 after:content-[''] a los botones compactos del header (Header.astro).
Garantiza el umbral ergonómico de 44×44px para dedos en pantallas táctiles sin alterar la geometría visual estricta de 32×32px.
Accesibilidad de Foco y Toasts:
En CommandPalette.astro, se implementó restauración de foco al elemento activo previo tras cerrar el modal (lastActiveElement.focus()).
En ToastContainer.astro, se asignaron atributos role="status" y aria-atomic="true" a las notificaciones emergentes.
💎 Ronda 10: Principios de Emil Kowalski y Craftsmanship en Componentes (2026-10-21)
APLICACIÓN DE EMIL-DESIGN-ENG (MICRO-INTERACCIONES Y SONNER PRINCIPLES)
Curva de Easing Mecánica Personalizada:
Se introdujo --ease-mechanical: cubic-bezier(0.23, 1, 0.32, 1) en src/styles/global.css. Sustituye los easings nativos débiles para otorgar un golpe instantáneo y seco de switch mecánico en .btn-brutal.
Transiciones Nativas con @starting-style (0 JS):
Se implementó la regla de Emil Kowalski: Nunca animar desde scale(0). Tanto dialog:modal como [popover] escalan suavemente de scale(0.96) a scale(1) con opacity: 0 -> 1 y display: allow-discrete.
Principios de Sonner en Toasts (ToastContainer.astro):
Auto-Pausa en Hover: Al pasar el ratón sobre una notificación para leerla, el contador y la barra se pausan.
Auto-Pausa en Pestaña Oculta: Al cambiar de pestaña del navegador (visibilitychange), el temporizador se congela para que el usuario no pierda el mensaje al volver.
Transición GPU pura: Eliminado transition: all a favor de transition-[transform,opacity] acelerado por hardware.
Micro-Compresión Táctil en Switch (Switch.astro):
El cursor del switch ahora reacciona a :active con scale(0.90) y la curva cubic-bezier(0.23,1,0.32,1) antes de desplazarse.
Blindaje contra Hover Fantasma en Pantallas Táctiles:
Hover de botones encapsulado bajo @media (hover: hover) and (pointer: fine) para evitar estados activos pegajosos en smartphones.
💎 Ronda 11: Directrices Vercel Web Interface Guidelines (2026-10-21)
AUDITORÍA DE INTERFACES VERCEL (A11Y + ACCESIBILIDAD POR TECLADO + COLOR-SCHEME)
Enlace de Salto Accesible (Skip Link):
Se integró un enlace [ SALTAR AL CONTENIDO PRINCIPAL ] en src/layouts/BaseLayout.astro enfocado inmediatamente con Tab, permitiendo a usuarios con lector de pantalla o teclado saltar la cabecera directamente a <main id="main-content">.
Sincronización Nativa de color-scheme:
Se añadieron color-scheme: light en :root y color-scheme: dark en html.dark.
Asegura que las barras de desplazamiento nativas del navegador, menús desplegables y controles del sistema operativo respeten el tema oscuro Hacker CRT / claro Paper Brutalism en Windows, macOS, Chrome y Firefox.
Eliminación de Retardo Táctil Móvil:
Se declaró touch-action: manipulation y -webkit-tap-highlight-color: transparent globalmente en html, body. Elimina los 300ms de retraso por doble toque y el recuadro grisáceo nativo en smartphones.
Foco Visible Garantizado sin outline-none ciego:
En Select.astro, Textarea.astro, CommandPalette.astro y TerminalEmulator.astro, se sustituyó outline-none desasistido por contenedores con focus-within:ring-2 focus-within:ring-scorch-crimson.
Tipografía Tipográfica Editorial:
Se reemplazaron puntos suspensivos planos ... por el carácter tipográfico de elipsis … en placeholders e indicadores.
💎 Ronda 12: Arquitectura Simétrica de Módulos TUI & Sellado Superior (2026-10-21)
CORRECCIÓN DE LAYOUT // ELIMINACIÓN DE BLEED & ENCUADRE DE WORKSPACE
Sellado Hermético del Header (sticky top-0):
Se corrigió la fuga visual donde el contenido al hacer scroll pasaba por un espacio superior de 16px (top-4) por encima del navbar.
Se fijó el header en top-0 con pt-0 en body, garantizando que ninguna tarjeta o texto asome por encima del menú.
Barra de Partición WORKSPACE // OS:
Se introdujo una barra de transición de estilo consola TUI entre la portada (Hero + Quickstart) y la suite de componentes.
Incluye acceso directo con píldoras de teclado ([01_CORE], [02_FORMS], [03_MODALS], [04_SHELL], [05_STUDIO], [08_CLI]).
Encuadre Simétrico en Contenedores .tui-window:
Se eliminó el flujo “suelto” de componentes sobre el fondo dither. Cada categoría principal (01_NUCLEO, 02_SUITE DE FORMULARIOS, 03_NAVEGACION Y MODALES) ahora está encapsulada dentro de su propia ventana .tui-window con cabecera retro .tui-header, bordes de 2px y sombra dura -4px 4px 0px 0px.
El sidebar lateral (INDEX // EXPLORER) queda perfectamente alineado a sticky top-[86px], manteniendo simetría total y equilibrio arquitectónico de dos columnas tipo IDE / sistema operativo en toda la navegación.
Limpieza de Diacríticos en Tipografía Pixel:
Se normalizaron títulos de módulo en mayúsculas sin caracteres diacríticos para asegurar renderizado 100% nítido en tipografías retro (VT323 / Press Start 2P).
UNIFICACIÓN RIGUROSA DE ÍNDICE, HEADER NAV Y WORKSPACE
Numeración Canónica Unificada (00 a 09):
Se resolvió la discrepancia donde el Header saltaba de [03_MODALS] a [06_STUDIO] omitiendo el shell y las tablas, y donde la barra de workspace etiquetaba Theme Studio erróneamente como 05_STUDIO.
Ahora los 8 módulos principales siguen una secuencia matemática estricta: [01_CORE], [02_FORMS], [03_MODALS], [04_SHELL], [05_TABLES], [06_STUDIO], [07_ASCII], [08_CLI] idéntica en:
Header Desktop (Header.astro)
Barra divisoria Workspace OS (index.astro)
Barra de navegación móvil / tablet (index.astro)
Sincronización Secuencial del Sidebar (SidebarNav.astro):
Se corrigió el orden DOM en el sidebar: Textarea estaba antes de Select/Slider, y Tables estaba después de AsciiForge, lo que provocaba saltos erráticos en el ScrollSpy.
Se reorganizaron los 22 enlaces en orden 100% ascendente idéntico al DOM real: hero → quickstart → componentes → formularios → modales → shell → tables → studio → ascii → cli docs → shortcuts.
Resolución de Anclas Faltantes:
Se añadió id="quickstart" a la sección del instalador CLI rápido para que el enlace Quickstart CLI bajo // 00_GETTING_STARTED apunte al inicio y no catapulte al fondo.
Se añadió cabecera brutalista // 09_ATAJOS_DE_TECLADO para la sección #shortcuts.
Auditoría de 34 IDs y 100% de enlaces internos/externos validados con 0 errores de redirección.
Eliminados preloads y stylesheets manuales a fonts.gstatic.com. Integrada la API nativa fontProviders.google() en astro.config.mjs y componente <Font cssVariable="..." /> en BaseLayout.astro. Las fuentes se descargan durante el build y se sirven en local (self) con hashes inmutables en dist/_astro/fonts/.
Eliminado preload rígido del banner LCP en <head>; optimizado <picture> en Hero con fetchpriority="high", loading="eager" y decoding="sync".
Reemplazados los controles [-], [□], [×] de Card.astro y Header.astro por elementos <button type="button"> semánticos con aria-label descriptivos, aria-hidden="true" exclusivo para glifos internos y sincronización reactiva de aria-expanded al colapsar ventanas.
Tipado polimórfico mediante uniones discriminadas en Button.astro. Neutralización accesible (role="link", aria-disabled="true", tabindex="-1", pointer-events-none) cuando href y disabled coexisten.
Control de audio con switch accesible (role="switch", aria-checked), persistencia en localStorage e inicialización lazy de AudioContext.
Ciberseguridad Web (Hardening DOM XSS & CSS Injection):
TerminalEmulator.astro: Reemplazada la concatenación de inputs en .innerHTML por manipulación DOM segura con document.createElement() y .textContent.
ThemeStudio.astro y AsciiGenerator.astro: Blindaje contra CSS Injection mediante validación por expresiones regulares de colores hex/rgb, desplazamientos y unidades (--shadow-offset, --dither-size) antes de llamar a setProperty.
public/_headers: Incorporadas cabeceras HSTS con preload, Permissions-Policy estricta y cabeceras CORS permisivas controladas para /r/*.
Ciberseguridad en el CLI (ryukami-ui):
Prevención de Path Traversal / Arbitrary File Write mediante helper resolveSafeTargetPath(targetDir, relativePath).
Integridad criptográfica SHA-256 en endpoints JSON del registro (scripts/build-registry.mjs) verificada en cliente antes de escribir archivos.
Identificación User-Agent: ryukami-ui-cli/2.3.0 y manejo controlado de estados HTTP 403 (WAF), 404 y 429 (Rate Limit).
GITHUB ACTIONS CI + SELF-HOSTED CANONICAL WOFF2 FONTS
Fuentes Auto-Alojadas Canónicas (public/fonts/):
Para erradicar la colisión de hashing de nombres generados por la API de fuentes de Astro con Tailwind CSS 4, las 5 fuentes WOFF2 (Press Start 2P, Tiny5, JetBrains Mono regular/italic, VT323) se alojan permanentemente en public/fonts/.
Reglas @font-face canónicas en src/styles/global.css y <link rel="preload"> en BaseLayout.astro.
Restaurada la tipografía arcade gruesa original de 8 bits en RYUKAMI × SCORCH (.title-8bit) idéntica al banner oficial.
Pipeline CI/CD (.github/workflows/ci.yml):
Acciones automáticas en push y pull_request a main: setup de Node 22 + pnpm, validación de suite pnpm test (12 tests) y compilación pnpm run build:perf.
SUITE DE TESTS UNITARIOS NATIVOS (node:test) + EDGE HEADERS LIVE
Refinamiento de resolveSafeTargetPath:
Normalización multiplataforma de separadores (\→/) para neutralizar exploits Windows en entornos Linux.
Validación estricta que impide rutas vacías, nombres nulos, directores especiales (., ..) o rutas fuera del árbol destino (resolvedPath.startsWith(resolvedTarget + path.sep)).
Pre-creación recursiva de subdirectorios mediante fs.mkdirSync(path.dirname(resolvedPath), { recursive: true }) antes de la escritura.
Suite de Tests de Seguridad (tests/security.test.mjs):
12 pruebas unitarias automatizadas con node:test y node:assert/strict sin dependencias externas pesadas.
Cobertura 100% de: bloqueo de Path Traversal Unix y Windows, detección de alteración de 1 byte con SHA-256 (tampering), y bloqueo estricto de vectores de CSS Injection (COLOR_REGEX, OFFSET_REGEX).
Verificación en Vivo de Cabeceras Edge:
Confirmación vía curl -sI en Cloudflare Pages de Strict-Transport-Security (31536000 + preload), X-Frame-Options: DENY, X-Content-Type-Options: nosniff y Access-Control-Allow-Origin: * en /r/*.
⚡ Ronda 16: Expansión a 35 Módulos, Servidor MCP, Auditoría diff y Sincronización W3C con Bóveda (2026-10-28)
8 Nuevos Componentes Neo-Brutalistas (de 27 a 35 módulos):
stat-card (StatCard.astro): Tarjetas KPI cuantitativas con delta porcentual (▲/▼) y sparkline ASCII ([▁▂▃▅▆▇█]).
tooltip (Tooltip.astro): Etiquetas emergentes accesibles por teclado y hover con sombra dura -2px 2px sin dependencias JS.
callout (Callout.astro): Equivalente web canónico de los callouts de Obsidian ([!dragon], [!scorch], [!terminal], [!tui], [!summary]) con soporte plegable <details>.
bento-grid (BentoGrid.astro): Sistema modular de grillas Neo-Brutalistas (1x, 2x, 3x) inspirado en obsidian-bento-grid-dashboard.
drawer (Drawer.astro): Panel lateral deslizante nativo construido con <dialog closedby="any"> y bloqueo de scroll de fondo.
code-block (CodeBlock.astro): Visor de código TUI con numeración de líneas, resaltado diff (+/-) y copiado en 1 clic.
audio-synth (AudioSynth.astro): Consola sintetizadora interactiva de 4 pads acústicos Web Audio API (Cherry MX Click, Terminal Pip, Telemetry Ack, Scorch Pulse).
data-table (DataTable.astro): Tabla de datos TUI interactiva con filtrado en vivo, ordenamiento por columna (⇅) y badges automáticos de estado.
CLI v2.4.0 (bin/ryukami-ui.mjs):
ryukami-ui mcp: Servidor MCP (Model Context Protocol) sobre stdio JSON-RPC 2.0 con herramientas list_components, get_component y get_design_tokens para agentes IA.
ryukami-ui diff: Auditoría criptográfica SHA-256 que compara los componentes instalados localmente contra el registro oficial.
ryukami-ui init --obsidian: Exporta además los tokens W3C (design-tokens.json) sincronizados con la bóveda.
Limpieza y Sincronización:
Eliminados los reportes duplicados de raíz (lighthouse-report.report.html y .json, ~2.6 MB) y añadidos a .gitignore.
Sincronizados AGENTS.md, design-system/ryukami-ui/MASTER.md, /r/tokens.json y 01_Tokens/design-tokens.json con la calibración WCAG AA (#D62436 = 5.04:1).
🛡️ Blindaje Legal y Marca
RESOLUCIÓN DE PROPIEDAD INTELECTUAL
Marca Base:Ryukami (竜神 - Dios Dragón, dominio público mitológico japonés). Totalmente registrable y libre de copyright.
Subtítulo:Velgrynd Tribute Edition (Homenaje de diseño no comercial, protegido como tributo artístico).
Licencia de Código: MIT License libre y abierta (LICENSE).