trackops 1.0.0 → 1.0.1

package/ui/js/app.js

@@ -0,0 +1,199 @@
+/**
+ * app.js — Orquestador principal del dashboard TrackOps
+ * Punto de entrada del módulo ES.
+ */
+
+import * as state from './state.js';
+import * as api   from './api.js';
+import * as router from './router.js';
+import * as consoleLogger from './console-logger.js';
+import * as onboarding from './onboarding.js';
+import * as timeTracker from './time-tracker.js';
+import * as theme from './theme.js';
+
+// Vistas
+import { render as renderSidebar } from './views/sidebar.js';
+import { render as renderTopbar  } from './views/topbar.js';
+import { render as renderOverview } from './views/overview.js';
+import { render as renderBoard    } from './views/board.js';
+import { render as renderTasks    } from './views/tasks.js';
+import * as executionView from './views/execution.js';
+import { render as renderInsights } from './views/insights.js';
+import * as settingsView from './views/settings.js';
+import * as skillsView from './views/skills.js';
+
+// ─────────────────────────────── INIT ───────────────────────────────────────
+
+async function init() {
+  // 0. Tema (PRIMERO: evitar flash de tema incorrecto)
+  theme.init();
+
+  // 1. Console logger (capturar errores desde el arranque)
+  consoleLogger.init();
+
+  // 2. Registrar rutas en el router
+  router.register('overview', renderOverview);
+  router.register('board',    renderBoard);
+  router.register('tasks',    renderTasks);
+  router.register('execution', async () => {
+    const html = await executionView.render();
+    setTimeout(() => executionView.bindEvents(), 50);
+    return html;
+  });
+  router.register('insights', renderInsights);
+  router.register('settings', async () => {
+    const html = await settingsView.render();
+    setTimeout(() => settingsView.bindEvents(), 50);
+    return html;
+  });
+  router.register('skills', async () => {
+    const html = await skillsView.render();
+    setTimeout(() => { 
+       skillsView.bindEvents();
+       skillsView.loadData(); 
+    }, 50);
+    return html;
+  });
+
+  // 3. Inicializar el router
+  router.init(document.getElementById('view-container'));
+
+  // 4. Cargar estado inicial
+  await _loadInitialState();
+
+  // 5. Renderizar chrome (sidebar + topbar)
+  renderSidebar();
+  renderTopbar();
+
+  // 6. Navegar a la vista inicial
+  await router.start('overview');
+
+  // 7. Cargar time entries en background
+  timeTracker.loadEntries().catch(err => {
+    console.warn('[app] No se pudieron cargar time entries:', err.message);
+  });
+
+  // 8. Inicializar onboarding
+  onboarding.init();
+
+  // 9. Suscribir refreshes globales
+  _bindGlobalEvents();
+
+  // 10. Auto-refresh cada 60s
+  setInterval(_refreshState, 60_000);
+}
+
+// ─────────────────────────────── CARGA DE ESTADO ────────────────────────────
+
+async function _loadInitialState() {
+  try {
+    // Cargar lista de proyectos
+    const projectsResult = await api.getProjects();
+    const projects = projectsResult.projects || [];
+    state.update('projects', projects);
+
+    // Determinar proyecto activo (persistido o primero disponible)
+    const saved = localStorage.getItem('ops-dashboard-project');
+    const first = projects.find(p => p.available);
+    const currentId = saved && projects.some(p => p.id === saved)
+      ? saved
+      : first?.id || null;
+
+    state.update('currentProjectId', currentId);
+
+    // Cargar el estado del proyecto activo
+    if (currentId) {
+      await _refreshState();
+    }
+  } catch (err) {
+    console.error('[app] Error cargando estado inicial:', err);
+    // Si el endpoint de proyectos falla, intentar cargar el estado directamente
+    try {
+      await _refreshState();
+    } catch (fallbackErr) {
+      console.error('[app] Error en fallback de estado:', fallbackErr);
+    }
+  }
+}
+
+async function _refreshState() {
+  try {
+    const payload = await api.getState();
+    state.update('payload', payload);
+
+    // Actualizar datos de i18n desde el backend
+    if (payload.i18n) {
+      state.update('phases',       payload.i18n.phases || []);
+      state.update('statusLabels', payload.i18n.statusLabels || {});
+      state.update('locale',       payload.i18n.locale || 'es');
+    }
+
+    // Actualizar proyectos si el payload incluye info de proyectos
+    if (payload.project && state.get('projects').length === 0) {
+      state.update('projects', [{ ...payload.project, available: true }]);
+      state.update('currentProjectId', payload.project.id);
+    }
+
+    // Actualizar helper findTask en el state (se accede via get('payload'))
+    // NO se puede asignar a state.findTask porque los namespaces de módulos ES son readonly.
+
+    // Re-renderizar chrome (puede haber cambiado el repo status)
+    renderTopbar();
+    renderSidebar();
+
+    // Refrescar la vista actual
+    await router.refresh();
+
+  } catch (err) {
+    console.error('[app] Error actualizando estado:', err);
+  }
+}
+
+// ─────────────────────────────── EVENTOS GLOBALES ───────────────────────────
+
+function _bindGlobalEvents() {
+  // Refresh global (disparado por sync, cambio de proyecto, etc.)
+  window.addEventListener('ops:refresh', async () => {
+    await _refreshState();
+  });
+
+  // Búsqueda global → refrescar la vista actual
+  window.addEventListener('ops:search', () => {
+    const active = router.current();
+    if (active === 'board' || active === 'tasks') {
+      router.refresh();
+    }
+  });
+
+  // Navegación por teclado: Escape cierra modales / deselecciona
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') {
+      // Deseleccionar tarea si no hay modal abierto
+      const modalEl = document.querySelector('.modal-overlay:not(.is-hidden)');
+      if (!modalEl) {
+        // No deseleccionar: permite a las vistas manejar escape internamente
+      }
+    }
+  });
+
+  // Actualizar sidebar badges cuando cambia el payload
+  state.subscribe('payload', () => {
+    import('./views/sidebar.js').then(m => m.updateBadges?.());
+  });
+}
+
+// ─────────────────────────────── ARRANQUE ───────────────────────────────────
+
+document.addEventListener('DOMContentLoaded', () => {
+  init().catch(err => {
+    console.error('[app] Error fatal en la inicialización:', err);
+    document.getElementById('view-container').innerHTML = `
+      <div class="empty-state" style="margin:4rem auto;max-width:440px">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--danger)"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+        <h3 style="margin-top:var(--space-2)">Error al iniciar el dashboard</h3>
+        <p style="font-size:var(--text-sm);color:var(--text-secondary)">${err.message}</p>
+        <button class="btn btn-primary" onclick="location.reload()">Reintentar</button>
+      </div>
+    `;
+  });
+});

package/ui/js/console-logger.js

@@ -0,0 +1,172 @@
+/**
+ * console-logger.js — Panel de logs y captura de errores del frontend
+ * Intercepta console.error, console.warn y window.onerror.
+ * Muestra un panel colapsable en la parte inferior de la pantalla.
+ */
+
+import * as state from './state.js';
+
+const MAX_LOGS = 100;
+let _panel = null;
+let _logsList = null;
+let _errorBadge = null;
+let _titleEl = null;
+let _errorCount = 0;
+
+/** Inicializa el módulo y vincula el panel del DOM */
+export function init() {
+  _panel     = document.getElementById('console-panel');
+  _logsList  = document.getElementById('console-logs');
+  _errorBadge = document.getElementById('console-error-count');
+  _titleEl   = document.getElementById('console-panel-title');
+
+  const closeBtn = document.getElementById('console-close-btn');
+  const clearBtn = document.getElementById('console-clear-btn');
+
+  closeBtn?.addEventListener('click', close);
+  clearBtn?.addEventListener('click', clear);
+
+  _patchConsole();
+  _attachWindowErrors();
+}
+
+/** Abre el panel de console */
+export function open() {
+  _panel?.classList.add('is-open');
+  state.update('consolePanelOpen', true);
+  // Scroll to bottom
+  setTimeout(() => { if (_logsList) _logsList.scrollTop = _logsList.scrollHeight; }, 50);
+}
+
+/** Cierra el panel */
+export function close() {
+  _panel?.classList.remove('is-open');
+  state.update('consolePanelOpen', false);
+}
+
+/** Toggle */
+export function toggle() {
+  if (state.get('consolePanelOpen')) close();
+  else open();
+}
+
+/** Limpia los logs */
+export function clear() {
+  state.update('consoleLogs', []);
+  _errorCount = 0;
+  if (_logsList) _logsList.innerHTML = '';
+  _updateErrorBadge();
+}
+
+/**
+ * Añade una entrada al log
+ * @param {'error'|'warn'|'info'|'debug'} level
+ * @param {string} message
+ */
+export function log(level, message) {
+  const entry = {
+    level,
+    message: String(message),
+    time: new Date().toISOString(),
+  };
+
+  const logs = state.get('consoleLogs');
+  logs.push(entry);
+  if (logs.length > MAX_LOGS) logs.shift();
+  state.update('consoleLogs', logs);
+
+  _appendEntry(entry);
+
+  if (level === 'error') {
+    _errorCount++;
+    _updateErrorBadge();
+    // Auto-abrir en error
+    if (!state.get('consolePanelOpen')) open();
+  }
+}
+
+function _appendEntry(entry) {
+  if (!_logsList) return;
+  const time = entry.time.slice(11, 23); // HH:mm:ss.mmm
+  const item = document.createElement('div');
+  item.className = 'console-log-entry';
+  item.setAttribute('role', 'listitem');
+  item.innerHTML = `
+    <span class="console-log-time">${time}</span>
+    <span class="log-level log-${entry.level}">[${entry.level.toUpperCase()}]</span>
+    <span class="console-log-msg">${_escapeHtml(entry.message)}</span>
+  `;
+  _logsList.appendChild(item);
+  _logsList.scrollTop = _logsList.scrollHeight;
+
+  // Limitar nodos en el DOM
+  while (_logsList.childElementCount > MAX_LOGS) {
+    _logsList.firstElementChild?.remove();
+  }
+}
+
+function _updateErrorBadge() {
+  if (!_errorBadge) return;
+  if (_errorCount > 0) {
+    _errorBadge.textContent = _errorCount;
+    _errorBadge.style.display = '';
+  } else {
+    _errorBadge.style.display = 'none';
+  }
+  // Actualizar badge del sidebar
+  const sidebarBadge = document.getElementById('sidebar-console-badge');
+  if (sidebarBadge) {
+    sidebarBadge.textContent = _errorCount;
+    sidebarBadge.style.display = _errorCount > 0 ? '' : 'none';
+  }
+}
+
+function _patchConsole() {
+  const _origError = console.error.bind(console);
+  const _origWarn  = console.warn.bind(console);
+  const _origLog   = console.log.bind(console);
+
+  console.error = (...args) => {
+    _origError(...args);
+    log('error', args.map(_serialize).join(' '));
+  };
+  console.warn = (...args) => {
+    _origWarn(...args);
+    log('warn', args.map(_serialize).join(' '));
+  };
+  // Solo capturar console.log marcados como [ops]
+  console.log = (...args) => {
+    _origLog(...args);
+    const msg = args.map(_serialize).join(' ');
+    if (msg.startsWith('[ops]') || msg.startsWith('[router]') || msg.startsWith('[api]')) {
+      log('info', msg);
+    }
+  };
+}
+
+function _attachWindowErrors() {
+  window.onerror = (message, source, lineno, colno, error) => {
+    const msg = error?.stack || `${message} (${source}:${lineno}:${colno})`;
+    log('error', msg);
+    return false; // Dejar que sigan propagándose
+  };
+
+  window.addEventListener('unhandledrejection', event => {
+    const msg = event.reason?.stack || String(event.reason);
+    log('error', `Unhandled Promise rejection: ${msg}`);
+  });
+}
+
+function _serialize(value) {
+  if (typeof value === 'string') return value;
+  if (value instanceof Error) return value.stack || value.message;
+  try { return JSON.stringify(value, null, 0); } catch { return String(value); }
+}
+
+function _escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}

package/ui/js/icons.js

@@ -0,0 +1,104 @@
+/**
+ * icons.js — SVG paths de React Icons (Flat / Line) como constantes
+ * Stack vanilla: sin React, sin dependencias externas.
+ * Se usan los paths SVG de heroicons + lucide-style wrappers.
+ * Uso: icons.render('dashboard', 20) → <svg>...</svg>
+ */
+
+const PATHS = {
+  // ── Navegación ──
+  dashboard: `<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>`,
+  tasks:     `<path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="m9 12 2 2 4-4"/>`,
+  board:     `<rect x="3" y="3" width="5" height="18" rx="1"/><rect x="11" y="3" width="5" height="12" rx="1"/><rect x="19" y="3" width="5" height="15" rx="1"/>`, // adjusted
+  execution: `<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>`,
+  insights:  `<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>`,
+  settings:  `<circle cx="12" cy="12" r="3"/><path d="M19.1 6.9a2.83 2.83 0 0 1 0 4L17 13l-1.4-1.4 2.1-2.1a.83.83 0 0 0 0-1.2L16.4 7l-2.1 2.1L13 7.8l2.1-2.1a.83.83 0 0 0-1.2 0L12.7 6l-1.4 1.4L9.2 5.3a2.83 2.83 0 0 1 4-4L15.3 3.4l1.4 1.4 2.1-2.1L19.1 3a2.83 2.83 0 0 1 4 4l-2.1 2.1 1.4 1.4L24.5 8.8a2.83 2.83 0 0 1-4 4l-2.1-2.1-1.4 1.4 2.1 2.1a.83.83 0 0 1 0 1.2L17.4 17l2.1 2.1a.83.83 0 0 1-1.2 0L16.2 17l-1.4 1.4 2.1 2.1a2.83 2.83 0 0 1-4 4l-2.1-2.1-1.4 1.4 2.1 2.1a.83.83 0 0 1 0 1.2L10.7 26l2.1 2.1a.83.83 0 0 1-1.2 0L9.5 26l-1.4-1.4L5.9 26.7a2.83 2.83 0 0 1-4-4L4 20.6l1.4-1.4-2.1-2.1A2.83 2.83 0 0 1 7.3 13l2.1 2.1 1.4-1.4L8.7 11.6A2.83 2.83 0 0 1 13 7.6l2.1 2.1 1.4-1.4L14.4 6.2A2.83 2.83 0 0 1 19.1 6.9Z"/>`,
+
+  // ── General ──
+  help:      `<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+  logout:    `<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>`,
+  console:   `<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>`,
+  infinity:  `<path d="M12 12c-2-2.5-4-4-6-4a4 4 0 0 0 0 8c2 0 4-1.5 6-4z"/><path d="M12 12c2 2.5 4 4 6 4a4 4 0 0 0 0-8c-2 0-4 1.5-6 4z"/>`,
+
+  // ── Acciones ──
+  plus:      `<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>`,
+  check:     `<polyline points="20 6 9 17 4 12"/>`,
+  x:         `<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>`,
+  edit:      `<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>`,
+  trash:     `<polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>`,
+  copy:      `<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>`,
+  refresh:   `<polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>`,
+  sync:      `<path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/>`,
+  search:    `<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>`,
+  filter:    `<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>`,
+  sort:      `<line x1="21" y1="10" x2="7" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="21" y1="18" x2="7" y2="18"/>`,
+  menu:      `<line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/>`,
+  arrowUp:   `<line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/>`,
+  arrowDown: `<line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>`,
+  arrowRight:`<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>`,
+  chevronDown:`<polyline points="6 9 12 15 18 9"/>`,
+  externalLink:`<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>`,
+
+  // ── Tiempo / cronómetro ──
+  clock:     `<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>`,
+  play:      `<polygon points="5 3 19 12 5 21 5 3"/>`,
+  pause:     `<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>`,
+  stop:      `<rect x="3" y="3" width="18" height="18" rx="2"/>`,
+  timer:     `<circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/><path d="M5 3 2 6"/><path d="m22 6-3-3"/><path d="M6.38 18.7 4 21"/><path d="M17.64 18.67 20 21"/>`,
+
+  // ── Git / Repo ──
+  gitBranch: `<line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>`,
+  gitCommit: `<circle cx="12" cy="12" r="4"/><line x1="1.05" y1="12" x2="7" y2="12"/><line x1="17.01" y1="12" x2="22.96" y2="12"/>`,
+  gitMerge:  `<circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M6 21V9a9 9 0 0 0 9 9"/>`,
+
+  // ── Información / estado ──
+  alertCircle: `<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>`,
+  alertTriangle:`<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+  checkCircle: `<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>`,
+  info:        `<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>`,
+  shield:      `<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>`,
+  zap:         `<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>`,
+  trending:    `<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>`,
+  target:      `<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>`,
+
+  // ── Ficheros / docs ──
+  fileText:  `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>`,
+  folder:    `<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>`,
+  download:  `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>`,
+
+  // ── Layout ──
+  maximize:   `<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>`,
+  columns:    `<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/>`,
+  terminal2:  `<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>`,
+  package:    `<line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>`,
+};
+
+/**
+ * Renderiza un SVG icon
+ * @param {string} name - nombre del icono
+ * @param {number} [size=18] - tamaño en px
+ * @param {string} [className=''] - clases adicionales
+ * @returns {string} HTML string del SVG
+ */
+export function icon(name, size = 18, className = '') {
+  const paths = PATHS[name];
+  if (!paths) {
+    // Icono fallback: círculo vacío
+    return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${className}" aria-hidden="true"><circle cx="12" cy="12" r="10" opacity="0.3"/></svg>`;
+  }
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${className}" aria-hidden="true">${paths}</svg>`;
+}
+
+/**
+ * Crea un elemento SVG icon insertado en el DOM
+ * @param {string} name
+ * @param {number} [size=18]
+ * @returns {SVGElement}
+ */
+export function iconEl(name, size = 18) {
+  const wrapper = document.createElement('span');
+  wrapper.innerHTML = icon(name, size);
+  return wrapper.firstElementChild;
+}
+
+export default { icon, iconEl };