Skip to content

v2.7 Refinement: layout móvil, CI con GitHub Actions, onboarding y pulido de UX (77/77 tests)#7

Merged
luisfemojica merged 1 commit into
mainfrom
v2.7-refinement
Jun 12, 2026
Merged

v2.7 Refinement: layout móvil, CI con GitHub Actions, onboarding y pulido de UX (77/77 tests)#7
luisfemojica merged 1 commit into
mainfrom
v2.7-refinement

Conversation

@luisfemojica

Copy link
Copy Markdown
Owner

Resumen

v2.7 "Refinement" completa (11/11): los fixes de la auditoría post-roadmap, los quick wins de producto y la infraestructura de CI. Primera versión tras la decisión NO-GO de v3.0.

🐛 Fixes de la auditoría

  • Layout móvil real. Dos bugs encadenados: el media query repetía el grid de 2 columnas (editores de ~190px inusables) y el header —más alto que el viewport en móvil— dejaba los paneles con altura 0 en el layout 100vh. Ahora los paneles se apilan a ancho completo (70vh cada uno), la página hace scroll y los controles van en dos columnas compactas. Verificado a 375x812: editores de 568px usables.
  • KPIs legibles: fmtBytes() muestra "11.8 MB" en vez de "12345678 bytes".
  • Favicon inline (emoji 🛡️ como SVG data-URI): sin requests 404, sin archivos extra.
  • Screenshot del README regenerado con Chrome headless usando el nuevo preset ?demo=1&theme=oscuro (era de v2.0).

⚡ Quick wins

  • Botón "📄 Ejemplo" en el panel de entrada + preset ?demo=1: carga un XML demo (atributos, repetidos, CDATA, comentario) y lo formatea — onboarding instantáneo.
  • Formatear/Minificar JSON: si la entrada es JSON (ya se detectaba para validar y convertir), se embellece/compacta en vez de fallar.
  • Línea de error en el gutter: la validación en vivo ya conocía línea y columna; ahora la pinta en rojo (XML y JSON).
  • Árbol interactivo: contador de hijos por nodo, y click en un nombre de tag lleva su ruta XPath (con índices [n] para repetidos) al campo de consulta y al portapapeles — sinergia directa con XPath de v2.5.
  • Archivo B en comparar: el panel derecho acepta arrastrar un archivo y el botón Abrir carga el XML B durante la comparación.
  • Más atajos: Ctrl+O (abrir), Ctrl+F (buscar en salida), Ctrl+H (reemplazar), y Tab inserta sangría en el editor.

🔧 CI con GitHub Actions

  • .github/workflows/tests.yml + .github/run-tests.mjs: la suite completa corre en Chromium headless (Playwright) en cada push a main y cada PR. Hasta ahora los tests solo corrían a mano — un PR externo podía romper todo sin que nadie lo notara.
  • Badge de estado en el README.
  • Este propio PR será el primero en ejecutar el workflow.

Tests

9 nuevos: rutas XPath del árbol (índices solo en repetidos), contador de hijos, fmtBytes, formatear/minificar JSON (UI), línea de error en gutter (UI), botón Ejemplo (UI), Tab con sangría (UI), KPIs legibles (UI). 77/77 pasando.

Métricas

index.html: ~2100 líneas / ~80KB (límites: ~2500 / 100KB duro). tests.html: 633 líneas (dev-only).

🤖 Generated with Claude Code

Fixes de la auditoría:
- Layout móvil real: el media query repetía el grid de 2 columnas
  (editores de ~190px) y el header, más alto que el viewport, dejaba
  los paneles sin altura. Ahora los paneles se apilan a ancho completo
  (70vh) y la página hace scroll; controles en dos columnas compactas.
- KPIs con unidades legibles (fmtBytes: B/KB/MB)
- Favicon inline (emoji escudo en SVG data-URI, sin 404)
- Screenshot del README regenerado con Chrome headless (?demo=1)

Quick wins:
- Botón 'Ejemplo' en el panel de entrada + preset ?demo=1
- Formatear/Minificar detectan JSON y lo embellecen/compactan
- La validación en vivo marca la línea del error en rojo en el gutter
  (XML y JSON)
- Árbol interactivo: contador de hijos y click en un tag lleva su ruta
  XPath al campo de consulta y al portapapeles
- Modo comparar: el panel B acepta arrastrar/abrir archivo
- Atajos Ctrl+O/F/H y Tab inserta sangría en el editor

Infraestructura:
- CI con GitHub Actions: tests.html corre en Chromium headless
  (Playwright) en cada push a main y cada PR + badge en el README

Tests: 9 nuevos — 77/77 pasando.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@luisfemojica luisfemojica merged commit 3c7c859 into main Jun 12, 2026
1 check passed
@luisfemojica luisfemojica deleted the v2.7-refinement branch June 12, 2026 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant