v0.7.0 · dark blueprint

@codigosinsiesta/theme

Sistema de diseño V4 compartido entre las presentaciones de Código Sin Siesta. Tokens CSS + chrome global + Tailwind preset + 6 componentes-átomo Svelte + 26 slide-shells canónicos cubriendo el kit V4 completo + los 16 patrones del audit V5 (Tier 1/2/3) + 4 layouts editoriales residuales (Section / Quote / WhoAmI / ToolsGrid). Brand assets oficiales (búho + wordmark + 13 Heroicons). Mismo stack Astro 5 + Svelte 5 + Tailwind 4 que los decks consumidores.

Empieza aquí

Instala el theme en tu deck (Astro o Svelte) — basta con la dependencia git URL hasta que se publique en npm:

terminal
$ pnpm add github:CodigoSinSiesta/theme

En tu CSS global:

src/styles/global.css
@import '@codigosinsiesta/theme/all.css';

Composables (v0.8.0+)

Helpers runes-based (Svelte 5) para patrones comunes de animación on-scroll y comportamiento reactivo. Compartidos entre decks y sitios CsS (portfolio, landings).

useIntersectionObserver Composable runes-based para detectar cuándo un elemento entra en viewport. Patrón Svelte action. useCounterAnimation Anima un valor numérico de 0 → target con easing + rAF. Respeta prefers-reduced-motion. useTypingEffect Texto carácter a carácter (efecto máquina de escribir) con modo loop opcional. Cursor CSS incluido. useKeyboardNav Atajos de teclado globales con modifier matching, skip en form fields, y lista para panel de ayuda.

Layout — sitios web (v0.9.0+)

Primitivos para layout de páginas web (no decks). Site shell, container bento, cards. Compañeros de los slide-shells para presentaciones.

PageShell Wrapper top-level con skip link integrado + slots header/main/footer + theme + scroll progress. Equivalente web de SlideShell. SiteHeader Top bar con logo (owl + wordmark) + nav links + slot controls + atajos Alt+1..9 vía useKeyboardNav. Responsive con <details> nativo. SiteFooter Pie de página estático con copyright + social links (Heroicons) + tagline opcional. Sin estado, layout grid 3 cols responsive. BentoGrid Container CSS Grid puro para layout one-page bento. Custom props expuestas, responsive 12/4/2 cols, sin JS de hidratación. BentoCard Card individual del bento. Sizes sm/md/lg/xl + entry animation vía useIntersectionObserver + keyboardHint opcional. Respeta prefers-reduced-motion.

Componentes-átomo (v0.2.0+)

Primitivas reutilizables. Pásales props con el contenido y obtienes el patrón canónico del kit V4.

Eyebrow Barra horizontal 24×2px + texto mono uppercase. Acompaña el header de cada slide. Callout Aside box con kind semántico (info/ok/warn/err). Border-left + icono + título + body. ToolCard Card con accent bar + icon box 42×42 + tag pill + meta strip opcional. TerminalLine Una línea individual de terminal con tipos cmd/out/ok/err/comment. TerminalWindow Caja Mac-style (titlebar + 3 dots) que envuelve TerminalLine. QRCode Placeholder 21×21 determinístico (NO escaneable). Decoración para slides finales.

Slide-shells canónicos · 26 layouts (v0.7.0 cierra el kit completo)

Composiciones completas de slide. Pásales data y obtienes un slide pixel-perfect. Los layouts cubren los 15 slide-types del kit V4, los 16 patrones del audit V5, y 4 layouts editoriales residuales.

SlideShell Wrapper base con .swiper-slide + 7 bg presets (azul / identidad / verde / cierre / lila / naranja / none) + slot. SlideHero Portada completa: eyebrow + title con highlight + subtitle + intro + tools + author card + 3 orbs. SlideTOC Agenda con chapter cards en grid 2-cols. Estados current/past/future. SlideTerminal Hands-on con TerminalWindow + narración paso a paso lateral + Pro tip Callout. SlideResources Cierre con takeaways grid arriba + links + QR placeholder abajo. SlideStatement Idea grande + palabra-highlight gradient + atribución. Para tesis y rotundidades. SlideCompare A vs B do/don't. Cards rojo + verde con accent semántico configurable. SlideStats Big numbers en grid con trend autocoloreado (↑ ok / ↓ err) + callout opcional. SlideDiagram Cajas + flechas SVG curvadas + leyenda. Coords absolutas en viewBox 1180×460. SlideCode Window mac-style con código + gutter + columna de notas L{n} + callout. SlideList Items numerados en grid 2-4 columnas. Patrón "12 reglas" / checklist. SlidePatternGrid Cards con mini-SVGs de patrones agénticos (chain / fan-out / fan-in / orchestrator-workers / eval-loop). SlideDecisionTable Tabla cuadrante glass con highlight-row + celdas auto-coloreadas (✓ / ✕ / ~) + reglas prácticas. SlidePipeline Pipeline horizontal de pasos numerados separados por →. Soporta Heroicons SVG + paso success final. SlideHandsOn Workshop pill ⚡ N min + pasos numerados + bloques shell. Highlight de "current step" para presentación en vivo. SlideSection Divisor de capítulo: número gigante con gradiente + label parte·sección + h1 + hint. SlideQuote Aforismo de cierre: 💬 + eyebrow + cita gigante + atribución entre rules. SlideWhoAmI Speaker card: avatar circular + bio + tags + handles + callout opcional. SlideToolsGrid Header + grid 3×2 de ToolCards (composición canónica del kit V4). SlideEquation Slide-tesis tipo ecuación: term + op + term = outcome (Agent = Model + Harness). SlideLayerStack Capas horizontales tipo OS-stack (kernel/runtime/app) con tinted backgrounds. SlideNestedEras Anillos concéntricos matryoshka — el más interno con gradient violeta + glow. SlideCodeCompare Dos paneles de código lado-a-lado con badge flotante. Highlight ligero ts/js/py/shell. SlideAccentCards Grid de cards con border-top de color custom por card. MCP primitives, capas, etc. SlideTriada Knowledge-graph triada: card vertical con N filas (NODE/EDGE/TRIPLE) + chips violeta. SlideDidactic Definition + Analogía + Examples — estructura pedagógica de 3 columnas.