Migrar al sistema de diseño @codigosinsiesta/theme (V4 dark blueprint)

[TellMeAlex]

Contexto

Hemos consolidado el sistema de diseño V4 "dark blueprint" de Código Sin Siesta en un paquete reutilizable: @codigosinsiesta/theme (v0.5.0).

El pilot ya está en producción: taller-graphify-presentation.

Qué aporta el theme

• Tokens CSS — paleta azul cobalto sobre slate-900, neutros, semánticos (ok/warn/err), tipografía (Space Grotesk / Inter / JetBrains Mono).
• Chrome global — accent-bar superior, breadcrumb mono, footer, padding canónico.
• 6 componentes-átomo Svelte 5 — Eyebrow, Callout, ToolCard, TerminalLine, TerminalWindow, QRCode.
• 11 slide-shells canónicos (cubren los 15 slide-types del kit V4): SlideShell, SlideHero, SlideTOC, SlideTerminal, SlideResources, SlideStatement, SlideCompare, SlideStats, SlideDiagram, SlideCode, SlideList.
• Tailwind preset con tokens mapeados a csi-*.
• Storybook: https://codigosinsiesta.github.io/theme/

Por qué migrar

1. Coherencia visual entre las 9 presentaciones de la org.
2. Menos código duplicado: cada deck mantiene hoy su propio CSS + componentes.
3. Velocidad de creación: deck nuevo = rellenar props, no rehacer layouts.
4. Ajustes globales (paleta, tipografía, chrome) propagados a todos los decks con un bump de versión.

Plan de migración propuesto

• Añadir @codigosinsiesta/theme como dependencia (pnpm add github:CodigoSinSiesta/theme).
• Importar @codigosinsiesta/theme/all.css en el CSS global.
• Sustituir el chrome custom (accent-bar / breadcrumb / footer) por el del theme.
• Migrar slide a slide a los Slide* del theme, mapeando contenido a props.
• Eliminar tokens / componentes locales que dupliquen el theme.
• Añadir el repo a la lista de "Decks que lo consumen" en el README del theme.

Referencia

• Package: https://github.com/CodigoSinSiesta/theme
• Pilot consumidor: https://github.com/CodigoSinSiesta/taller-graphify-presentation
• Storybook: https://codigosinsiesta.github.io/theme/

[TellMeAlex]

📦 @codigosinsiesta/theme v0.7.0 disponible — paridad completa con todos los patrones detectados en las 9 presentaciones de la org.

Lo que ya tienes para migrar

• 26 slide-shells cubriendo el kit V4 completo + los 16 patrones del component-audit V5 + 4 layouts editoriales (Section / Quote / WhoAmI / ToolsGrid).
• Brand assets oficiales en @codigosinsiesta/theme/assets/ — 5 SVGs del búho (bone/electric/dark/head) + wordmark.
• 13 Heroicons outline mirroreados en @codigosinsiesta/theme/icons/ (chevron-left/right, bars-3, x-mark, cpu-chip, wrench-screwdriver, magnifying-glass, light-bulb, book-open, bookmark, check-circle, puzzle-piece, sparkles).
• @codigosinsiesta/theme/BRAND.md — gate CMO+QA condensado: voz, casing, visual fundamentals, iconografía, bloqueantes de validación.

Cómo subirte

pnpm add github:CodigoSinSiesta/theme#v0.7.0

Storybook con preview en vivo + tabla de props + ejemplos por shell:
👉 https://codigosinsiesta.github.io/theme/

Mapeo rápido

Tu slide actual	Shell del theme
Hero / Cover	SlideHero
Agenda / TOC	SlideTOC
Section divider	SlideSection
¿Quién soy?	SlideWhoAmI
Statement / tesis	SlideStatement
Tools grid (6 cards)	SlideToolsGrid
Stats / métricas	SlideStats
A vs B comparativa	SlideCompare
Pipeline (Plan→Edit→Verify→Reflect)	SlidePipeline
Equation hero (Agent = Model + Harness)	SlideEquation
OS-stack / capas	SlideLayerStack
Eras matryoshka	SlideNestedEras
Architecture diagram	SlideDiagram
Code single	SlideCode
Code side-by-side (vanilla vs framework)	SlideCodeCompare
Pattern grid (chain/fan-out/fan-in…)	SlidePatternGrid
Decision matrix / cuadrante	SlideDecisionTable
Terminal demo	SlideTerminal
Hands-on workshop	SlideHandsOn
Lista numerada / 12 reglas	SlideList
Border-top accent cards (MCP primitives)	SlideAccentCards
KG triada (NODE/EDGE/TRIPLE)	SlideTriada
Definition + Analogía + Examples	SlideDidactic
Resources + QR	SlideResources
Quote / cierre	SlideQuote

Si encuentras que un patrón existente en tu deck no encaja en ningún shell, ábrelo como issue en @codigosinsiesta/theme — el plan v0.8 todavía está abierto.