theus-cli-linux-arm64 0.2.84

package/vendor/theus-arsenal/skills/presentaciones-html/scripts/export-pdf.sh

@@ -0,0 +1,418 @@
+#!/usr/bin/env bash
+# export-pdf.sh - Exporta una presentación HTML a PDF
+#
+# Uso:
+#   bash scripts/export-pdf.sh <ruta-al-html> [salida.pdf]
+#
+# Ejemplos:
+#   bash scripts/export-pdf.sh ./mi-deck/index.html
+#   bash scripts/export-pdf.sh ./presentacion.html ./presentacion.pdf
+#
+# Qué hace:
+#   1. Levanta un servidor local para servir el HTML (fuentes y assets requieren HTTP)
+#   2. Usa Playwright para capturar cada diapositiva a 1920x1080
+#   3. Combina todas las capturas en un único PDF
+#   4. Limpia el servidor y los archivos temporales
+#
+# El PDF preserva colores, fuentes y layout, pero no las animaciones.
+# Perfecto para adjuntos de correo, impresión o incrustar en documentos.
+set -euo pipefail
+
+# --- Colores ---
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+CYAN='\033[0;36m'
+YELLOW='\033[1;33m'
+BOLD='\033[1m'
+NC='\033[0m'
+
+info()  { echo -e "${CYAN}INFO:${NC} $*"; }
+ok()    { echo -e "${GREEN}OK:${NC} $*"; }
+warn()  { echo -e "${YELLOW}ADVERTENCIA:${NC} $*"; }
+err()   { echo -e "${RED}ERROR:${NC} $*" >&2; }
+
+# --- Parseo de flags ---
+
+# Resolución por defecto: 1920x1080 (full HD, ~1-2 MB por diapositiva)
+# Resolución compacta: 1280x720 (HD, archivos ~50-70% más pequeños)
+VIEWPORT_W=1920
+VIEWPORT_H=1080
+COMPACT=false
+
+POSITIONAL=()
+for arg in "$@"; do
+    case $arg in
+        --compact)
+            COMPACT=true
+            VIEWPORT_W=1280
+            VIEWPORT_H=720
+            ;;
+        *)
+            POSITIONAL+=("$arg")
+            ;;
+    esac
+done
+set -- ${POSITIONAL[@]+"${POSITIONAL[@]}"}
+
+# --- Validación de entrada ---
+
+if [[ $# -lt 1 ]]; then
+    err "Uso: bash scripts/export-pdf.sh <ruta-al-html> [salida.pdf] [--compact]"
+    err ""
+    err "Ejemplos:"
+    err "  bash scripts/export-pdf.sh ./mi-deck/index.html"
+    err "  bash scripts/export-pdf.sh ./presentacion.html ./diapositivas.pdf"
+    err "  bash scripts/export-pdf.sh ./presentacion.html --compact   # archivo más pequeño"
+    exit 1
+fi
+
+INPUT_HTML="$1"
+if [[ ! -f "$INPUT_HTML" ]]; then
+    err "Archivo no encontrado: $INPUT_HTML"
+    exit 1
+fi
+
+# Resolver a ruta absoluta
+INPUT_HTML=$(cd "$(dirname "$INPUT_HTML")" && pwd)/$(basename "$INPUT_HTML")
+
+# Ruta del PDF de salida: segundo argumento o derivada del nombre de entrada
+if [[ $# -ge 2 ]]; then
+    OUTPUT_PDF="$2"
+else
+    OUTPUT_PDF="$(dirname "$INPUT_HTML")/$(basename "$INPUT_HTML" .html).pdf"
+fi
+
+# Resolver la salida a ruta absoluta
+OUTPUT_DIR=$(dirname "$OUTPUT_PDF")
+mkdir -p "$OUTPUT_DIR"
+OUTPUT_PDF="$OUTPUT_DIR/$(basename "$OUTPUT_PDF")"
+
+echo ""
+echo -e "${BOLD}========================================${NC}"
+echo -e "${BOLD}    Exportar diapositivas a PDF${NC}"
+echo -e "${BOLD}========================================${NC}"
+echo ""
+
+# --- Paso 1: verificar dependencias ---
+
+info "Verificando dependencias..."
+
+if ! command -v npx &>/dev/null; then
+    err "Se requiere Node.js, pero no está instalado."
+    err ""
+    err "Instala Node.js:"
+    err "  macOS:   brew install node"
+    err "  o visita https://nodejs.org y descarga el instalador"
+    exit 1
+fi
+
+ok "Node.js encontrado"
+
+# --- Paso 2: crear el script de exportación ---
+
+# Usamos un script Node.js temporal con Playwright para:
+# 1. Levantar un servidor local (para que las fuentes carguen correctamente)
+# 2. Navegar a cada diapositiva
+# 3. Capturar cada diapositiva a 1920x1080 (apaisado 16:9)
+# 4. Combinar todo en un único PDF
+
+TEMP_DIR=$(mktemp -d)
+TEMP_SCRIPT="$TEMP_DIR/export-slides.mjs"
+
+# Determinar qué directorio servir (la carpeta que contiene el HTML)
+SERVE_DIR=$(dirname "$INPUT_HTML")
+HTML_FILENAME=$(basename "$INPUT_HTML")
+
+cat > "$TEMP_SCRIPT" << 'EXPORT_SCRIPT'
+// export-slides.mjs - Script de Playwright para exportar diapositivas HTML a PDF
+//
+// Cómo funciona:
+// 1. Levanta un servidor HTTP local (necesario para que carguen fuentes/assets)
+// 2. Abre la presentación en un navegador headless a 1920x1080
+// 3. Cuenta el número total de diapositivas
+// 4. Captura cada diapositiva una por una
+// 5. Genera un PDF con todas las diapositivas como páginas apaisadas
+
+import { chromium } from 'playwright';
+import { createServer } from 'http';
+import { readFileSync, existsSync, mkdirSync, unlinkSync, writeFileSync } from 'fs';
+import { join, extname, resolve } from 'path';
+import { execSync } from 'child_process';
+
+const SERVE_DIR = process.argv[2];
+const HTML_FILE = process.argv[3];
+const OUTPUT_PDF = process.argv[4];
+const SCREENSHOT_DIR = process.argv[5];
+const VP_WIDTH = parseInt(process.argv[6]) || 1920;
+const VP_HEIGHT = parseInt(process.argv[7]) || 1080;
+
+// --- Servidor de archivos estáticos simple ---
+// (Necesitamos HTTP para que Google Fonts y los assets relativos carguen bien)
+
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.js': 'application/javascript',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.eot': 'application/vnd.ms-fontobject',
+};
+
+const server = createServer((req, res) => {
+  // Decodifica caracteres URL-encoded (p. ej. %20 -> espacio) para que resuelvan los nombres con espacios
+  const decodedUrl = decodeURIComponent(req.url);
+  let filePath = join(SERVE_DIR, decodedUrl === '/' ? HTML_FILE : decodedUrl);
+  try {
+    const content = readFileSync(filePath);
+    const ext = extname(filePath).toLowerCase();
+    res.writeHead(200, { 'Content-Type': MIME_TYPES[ext] || 'application/octet-stream' });
+    res.end(content);
+  } catch {
+    res.writeHead(404);
+    res.end('No encontrado');
+  }
+});
+
+// Buscar un puerto libre
+const port = await new Promise((resolve) => {
+  server.listen(0, () => resolve(server.address().port));
+});
+
+console.log(`  Servidor local en el puerto ${port}`);
+
+// --- Capturar cada diapositiva ---
+
+const browser = await chromium.launch();
+const page = await browser.newPage({
+  viewport: { width: VP_WIDTH, height: VP_HEIGHT },
+});
+
+// Cargar la presentación
+await page.goto(`http://localhost:${port}/`, { waitUntil: 'networkidle' });
+
+// Esperar a que carguen las fuentes
+await page.evaluate(() => document.fonts.ready);
+
+// Espera extra para que las animaciones de la primera diapositiva se asienten
+await page.waitForTimeout(1500);
+
+// Contar diapositivas
+const slideCount = await page.evaluate(() => {
+  return document.querySelectorAll('.slide').length;
+});
+
+console.log(`  Encontradas ${slideCount} diapositivas`);
+
+if (slideCount === 0) {
+  console.error('  ERROR: no se encontraron elementos .slide en la presentación.');
+  console.error('  Asegúrate de que el HTML use <div class="slide"> o <section class="slide">.');
+  await browser.close();
+  server.close();
+  process.exit(1);
+}
+
+// Capturar cada diapositiva
+mkdirSync(SCREENSHOT_DIR, { recursive: true });
+const screenshotPaths = [];
+
+for (let i = 0; i < slideCount; i++) {
+  // Navegar a la diapositiva simulando la navegación de la presentación
+  // La mayoría de las presentaciones generadas usan un índice currentSlide y muestran/ocultan
+  await page.evaluate((index) => {
+    const slides = document.querySelectorAll('.slide');
+
+    // Probar varias estrategias de navegación usadas en los decks generados:
+
+    // Estrategia 1: manipulación directa de la diapositiva (la más común en decks generados)
+    slides.forEach((slide, idx) => {
+      if (idx === index) {
+        slide.style.display = '';
+        slide.style.opacity = '1';
+        slide.style.visibility = 'visible';
+        slide.style.position = 'relative';
+        slide.style.transform = 'none';
+        slide.classList.add('active');
+      } else {
+        slide.style.display = 'none';
+        slide.classList.remove('active');
+      }
+    });
+
+    // Estrategia 2: si existe una instancia de la clase SlidePresentation, usarla
+    if (window.presentation && typeof window.presentation.goToSlide === 'function') {
+      window.presentation.goToSlide(index);
+    }
+
+    // Estrategia 3: basada en scroll (algunos decks usan scroll snapping)
+    slides[index]?.scrollIntoView({ behavior: 'instant' });
+  }, i);
+
+  // Esperar a que terminen las animaciones de transición
+  await page.waitForTimeout(300);
+
+  // Esperar a que se disparen las animaciones del intersection observer
+  await page.waitForTimeout(200);
+
+  // Forzar la visibilidad de todos los elementos .reveal de la diapositiva actual
+  // (las animaciones se disparan normalmente por scroll/intersección, pero aquí deben verse ya)
+  await page.evaluate((index) => {
+    const slides = document.querySelectorAll('.slide');
+    const currentSlide = slides[index];
+    if (currentSlide) {
+      currentSlide.querySelectorAll('.reveal').forEach(el => {
+        el.style.opacity = '1';
+        el.style.transform = 'none';
+        el.style.visibility = 'visible';
+      });
+    }
+  }, i);
+
+  await page.waitForTimeout(100);
+
+  const screenshotPath = join(SCREENSHOT_DIR, `slide-${String(i + 1).padStart(3, '0')}.png`);
+  await page.screenshot({ path: screenshotPath, fullPage: false });
+  screenshotPaths.push(screenshotPath);
+  console.log(`  Capturada diapositiva ${i + 1}/${slideCount}`);
+}
+
+await browser.close();
+server.close();
+
+// --- Combinar las capturas en un PDF ---
+// Usamos una segunda página de Playwright para generar el PDF a partir de las capturas
+
+console.log('  Ensamblando el PDF...');
+
+const browser2 = await chromium.launch();
+const pdfPage = await browser2.newPage();
+
+// Construir una página HTML con todas las capturas, una por página
+const imagesHtml = screenshotPaths.map((p) => {
+  const imgData = readFileSync(p).toString('base64');
+  return `<div class="page"><img src="data:image/png;base64,${imgData}" /></div>`;
+}).join('\n');
+
+const pdfHtml = `<!DOCTYPE html>
+<html>
+<head>
+<style>
+  * { margin: 0; padding: 0; }
+  @page { size: ${VP_WIDTH}px ${VP_HEIGHT}px; margin: 0; }
+  .page {
+    width: ${VP_WIDTH}px;
+    height: ${VP_HEIGHT}px;
+    page-break-after: always;
+    overflow: hidden;
+  }
+  .page:last-child { page-break-after: auto; }
+  img {
+    width: ${VP_WIDTH}px;
+    height: ${VP_HEIGHT}px;
+    display: block;
+    object-fit: contain;
+  }
+</style>
+</head>
+<body>${imagesHtml}</body>
+</html>`;
+
+await pdfPage.setContent(pdfHtml, { waitUntil: 'load' });
+await pdfPage.pdf({
+  path: OUTPUT_PDF,
+  width: `${VP_WIDTH}px`,
+  height: `${VP_HEIGHT}px`,
+  printBackground: true,
+  margin: { top: 0, right: 0, bottom: 0, left: 0 },
+});
+
+await browser2.close();
+
+// Limpiar las capturas
+screenshotPaths.forEach(p => unlinkSync(p));
+
+console.log(`  OK: PDF guardado en: ${OUTPUT_PDF}`);
+EXPORT_SCRIPT
+
+# --- Paso 3: instalar Playwright en el directorio temporal ---
+# Instalamos Playwright localmente en el directorio temporal para que el script pueda importarlo.
+# Esto evita contaminar paquetes globales y hace que el script sea autocontenido.
+
+info "Preparando Playwright (navegador headless para las capturas)..."
+info "Puede tardar un momento la primera vez..."
+echo ""
+
+cd "$TEMP_DIR"
+
+# Crear un package.json mínimo para que npm install funcione
+cat > "$TEMP_DIR/package.json" << 'PKG'
+{ "name": "slide-export", "private": true, "type": "module" }
+PKG
+
+# Instalar Playwright en el directorio temporal
+npm install playwright &>/dev/null || {
+    err "No se pudo instalar Playwright."
+    err "Prueba a ejecutar: npm install playwright"
+    rm -rf "$TEMP_DIR"
+    exit 1
+}
+
+# Asegurar que el binario de Chromium está descargado
+npx playwright install chromium 2>/dev/null || {
+    err "No se pudo instalar el navegador Chromium para Playwright."
+    err "Prueba a ejecutarlo manualmente: npx playwright install chromium"
+    rm -rf "$TEMP_DIR"
+    exit 1
+}
+ok "Playwright listo"
+echo ""
+
+# --- Paso 4: ejecutar la exportación ---
+
+SCREENSHOT_DIR="$TEMP_DIR/screenshots"
+
+info "Exportando diapositivas a PDF..."
+echo ""
+
+# Ejecutar desde el directorio temporal para que Node encuentre el playwright local
+if [[ "$COMPACT" == "true" ]]; then
+    info "Usando modo compacto (1280x720) para reducir el tamaño del archivo"
+fi
+
+node "$TEMP_SCRIPT" "$SERVE_DIR" "$HTML_FILENAME" "$OUTPUT_PDF" "$SCREENSHOT_DIR" "$VIEWPORT_W" "$VIEWPORT_H" || {
+    err "La exportación a PDF falló."
+    rm -rf "$TEMP_DIR"
+    exit 1
+}
+
+# --- Paso 5: limpieza y éxito ---
+
+rm -rf "$TEMP_DIR"
+
+echo ""
+echo -e "${BOLD}========================================${NC}"
+ok "¡PDF exportado con éxito!"
+echo ""
+echo -e "  ${BOLD}Archivo:${NC}  $OUTPUT_PDF"
+echo ""
+FILE_SIZE=$(du -h "$OUTPUT_PDF" | cut -f1 | xargs)
+echo "  Tamaño: $FILE_SIZE"
+echo ""
+echo "  Este PDF funciona en cualquier parte: correo, mensajería, documentos, impresión."
+echo "  Nota: las animaciones no se preservan (es una exportación estática)."
+echo -e "${BOLD}========================================${NC}"
+echo ""
+
+# Abrir el PDF automáticamente
+if command -v open &>/dev/null; then
+    open "$OUTPUT_PDF"
+elif command -v xdg-open &>/dev/null; then
+    xdg-open "$OUTPUT_PDF"
+fi

package/vendor/theus-arsenal/skills/presentaciones-html/scripts/extract-pptx.py

@@ -0,0 +1,96 @@
+#!/usr/bin/env python3
+"""
+Extrae todo el contenido de un archivo de PowerPoint (.pptx).
+Devuelve una estructura JSON con diapositivas, texto e imágenes.
+
+Uso:
+    python extract-pptx.py <entrada.pptx> [dir_salida]
+
+Requiere: pip install python-pptx
+"""
+
+import json
+import os
+import sys
+from pptx import Presentation
+
+
+def extract_pptx(file_path, output_dir="."):
+    """
+    Extrae todo el contenido de un archivo de PowerPoint.
+    Devuelve una lista de dicts por diapositiva con texto, imágenes y notas.
+    """
+    prs = Presentation(file_path)
+    slides_data = []
+
+    # Crear el directorio de assets para las imágenes extraídas
+    assets_dir = os.path.join(output_dir, "assets")
+    os.makedirs(assets_dir, exist_ok=True)
+
+    for slide_num, slide in enumerate(prs.slides):
+        slide_data = {
+            "number": slide_num + 1,
+            "title": "",
+            "content": [],
+            "images": [],
+            "notes": "",
+        }
+
+        for shape in slide.shapes:
+            # Extraer el contenido de texto
+            if shape.has_text_frame:
+                if shape == slide.shapes.title:
+                    slide_data["title"] = shape.text
+                else:
+                    slide_data["content"].append(
+                        {"type": "text", "content": shape.text}
+                    )
+
+            # Extraer imágenes
+            if shape.shape_type == 13:  # Tipo Picture
+                image = shape.image
+                image_bytes = image.blob
+                image_ext = image.ext
+                image_name = f"slide{slide_num + 1}_img{len(slide_data['images']) + 1}.{image_ext}"
+                image_path = os.path.join(assets_dir, image_name)
+
+                with open(image_path, "wb") as f:
+                    f.write(image_bytes)
+
+                slide_data["images"].append(
+                    {
+                        "path": f"assets/{image_name}",
+                        "width": shape.width,
+                        "height": shape.height,
+                    }
+                )
+
+        # Extraer las notas del orador
+        if slide.has_notes_slide:
+            notes_frame = slide.notes_slide.notes_text_frame
+            slide_data["notes"] = notes_frame.text
+
+        slides_data.append(slide_data)
+
+    return slides_data
+
+
+if __name__ == "__main__":
+    if len(sys.argv) < 2:
+        print("Uso: python extract-pptx.py <entrada.pptx> [dir_salida]")
+        sys.exit(1)
+
+    input_file = sys.argv[1]
+    output_dir = sys.argv[2] if len(sys.argv) > 2 else "."
+
+    slides = extract_pptx(input_file, output_dir)
+
+    # Escribir los datos extraídos como JSON
+    output_path = os.path.join(output_dir, "extracted-slides.json")
+    with open(output_path, "w") as f:
+        json.dump(slides, f, indent=2)
+
+    print(f"Extraídas {len(slides)} diapositivas en {output_path}")
+    for s in slides:
+        img_count = len(s["images"])
+        print(f"  Diapositiva {s['number']}: {s['title'] or '(sin título)'} — {img_count} imagen(es)")

package/vendor/theus-arsenal/skills/presentaciones-html/viewport-base.css

@@ -0,0 +1,153 @@
+/* ===========================================
+   AJUSTE AL VIEWPORT: ESTILOS BASE OBLIGATORIOS
+   Incluir este archivo COMPLETO en cada presentación.
+   Estos estilos garantizan que las diapositivas quepan exactamente en el viewport.
+   =========================================== */
+
+/* 1. Fijar html/body al viewport */
+html, body {
+    height: 100%;
+    overflow-x: hidden;
+}
+
+html {
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+}
+
+/* 2. Cada diapositiva = altura exacta del viewport */
+.slide {
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh; /* Altura dinámica de viewport para navegadores móviles */
+    overflow: hidden; /* CRÍTICO: impedir CUALQUIER desborde */
+    scroll-snap-align: start;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+/* 3. Contenedor de contenido con flex para centrar */
+.slide-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-height: 100%;
+    overflow: hidden; /* Doble protección contra desbordes */
+    padding: var(--slide-padding);
+}
+
+/* 4. TODA la tipografía usa clamp() para escalado responsivo */
+:root {
+    /* Los títulos escalan de móvil a escritorio */
+    --title-size: clamp(1.5rem, 5vw, 4rem);
+    --h2-size: clamp(1.25rem, 3.5vw, 2.5rem);
+    --h3-size: clamp(1rem, 2.5vw, 1.75rem);
+
+    /* Texto de cuerpo */
+    --body-size: clamp(0.75rem, 1.5vw, 1.125rem);
+    --small-size: clamp(0.65rem, 1vw, 0.875rem);
+
+    /* El espaciado escala con el viewport */
+    --slide-padding: clamp(1rem, 4vw, 4rem);
+    --content-gap: clamp(0.5rem, 2vw, 2rem);
+    --element-gap: clamp(0.25rem, 1vw, 1rem);
+}
+
+/* 5. Tarjetas/contenedores usan tamaños máximos relativos al viewport */
+.card, .container, .content-box {
+    max-width: min(90vw, 1000px);
+    max-height: min(80vh, 700px);
+}
+
+/* 6. Las listas se autoescalan con el viewport */
+.feature-list, .bullet-list {
+    gap: clamp(0.4rem, 1vh, 1rem);
+}
+
+.feature-list li, .bullet-list li {
+    font-size: var(--body-size);
+    line-height: 1.4;
+}
+
+/* 7. Las cuadrículas se adaptan al espacio disponible */
+.grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
+    gap: clamp(0.5rem, 1.5vw, 1rem);
+}
+
+/* 8. Imágenes limitadas al viewport */
+img, .image-container {
+    max-width: 100%;
+    max-height: min(50vh, 400px);
+    object-fit: contain;
+}
+
+/* ===========================================
+   BREAKPOINTS RESPONSIVOS
+   Escalado agresivo para viewports pequeños
+   =========================================== */
+
+/* Viewports bajos (< 700px de altura) */
+@media (max-height: 700px) {
+    :root {
+        --slide-padding: clamp(0.75rem, 3vw, 2rem);
+        --content-gap: clamp(0.4rem, 1.5vw, 1rem);
+        --title-size: clamp(1.25rem, 4.5vw, 2.5rem);
+        --h2-size: clamp(1rem, 3vw, 1.75rem);
+    }
+}
+
+/* Viewports muy bajos (< 600px de altura) */
+@media (max-height: 600px) {
+    :root {
+        --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem);
+        --content-gap: clamp(0.3rem, 1vw, 0.75rem);
+        --title-size: clamp(1.1rem, 4vw, 2rem);
+        --body-size: clamp(0.7rem, 1.2vw, 0.95rem);
+    }
+
+    /* Ocultar elementos no esenciales */
+    .nav-dots, .keyboard-hint, .decorative {
+        display: none;
+    }
+}
+
+/* Extremadamente bajos (móviles apaisados, < 500px de altura) */
+@media (max-height: 500px) {
+    :root {
+        --slide-padding: clamp(0.4rem, 2vw, 1rem);
+        --title-size: clamp(1rem, 3.5vw, 1.5rem);
+        --h2-size: clamp(0.9rem, 2.5vw, 1.25rem);
+        --body-size: clamp(0.65rem, 1vw, 0.85rem);
+    }
+}
+
+/* Viewports estrechos (< 600px de ancho) */
+@media (max-width: 600px) {
+    :root {
+        --title-size: clamp(1.25rem, 7vw, 2.5rem);
+    }
+
+    /* Apilar las cuadrículas verticalmente */
+    .grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ===========================================
+   MOVIMIENTO REDUCIDO
+   Respetar las preferencias del usuario
+   =========================================== */
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        transition-duration: 0.2s !important;
+    }
+
+    html {
+        scroll-behavior: auto;
+    }
+}