trackops 2.0.4 → 2.0.6

package/ui/js/keyboard.js

@@ -1,229 +1,229 @@
-/**
- * keyboard.js — Sistema de atajos de teclado global para TrackOps Dashboard
- * Secuencias de 2 teclas estilo Vim/GitHub (g d = go dashboard).
- * No activo cuando un input/textarea/select tiene foco.
- */
-
-import * as router from './router.js';
-import * as state from './state.js';
-import { icon } from './icons.js';
-
-/** @type {Map<string, {handler: Function, label: string, group: string}>} */
-const _shortcuts = new Map();
-
-/** Buffer para secuencias de 2 teclas */
-let _pendingKey = '';
-let _pendingTimer = null;
-const SEQUENCE_TIMEOUT = 600; // ms para completar secuencia
-
-/** Elemento del panel de ayuda */
-let _helpVisible = false;
-
-// ─────────────────────────────── REGISTRO ────────────────────────────────────
-
-/**
- * Registrar un atajo de teclado
- * @param {string} keys — Tecla o secuencia ('g o', '/', '?', 'Escape')
- * @param {Function} handler — Callback
- * @param {string} label — Descripcion para el panel de ayuda
- * @param {string} [group='General'] — Grupo en el panel de ayuda
- */
-export function register(keys, handler, label, group = 'General') {
-  _shortcuts.set(keys, { handler, label, group });
-}
-
-// ─────────────────────────────── DEFAULTS ────────────────────────────────────
-
-function _registerDefaults() {
-  // Navegacion
-  register('g d', () => router.navigate('dashboard'),  'Go to Dashboard',   'Navigation');
-  register('g t', () => router.navigate('tasks'),      'Go to Tasks',       'Navigation');
-  register('g l', () => router.navigate('timeline'),   'Go to Timeline',    'Navigation');
-  register('g e', () => router.navigate('terminal'),   'Go to Terminal',    'Navigation');
-  register('g p', () => router.navigate('projects'),   'Go to Projects',    'Navigation');
-  register('g s', () => router.navigate('settings'),   'Go to Settings',    'Navigation');
-
-  // Acciones
-  register('/', () => _focusSearch(),                   'Focus search',      'Actions');
-  register('r', () => _refreshState(),                  'Refresh data',      'Actions');
-  register('Escape', () => _closeActiveOverlay(),       'Close overlay',     'Actions');
-
-  // Ayuda
-  register('?', () => toggleHelp(),                     'Show shortcuts',    'Help');
-}
-
-// ─────────────────────────────── HANDLER ─────────────────────────────────────
-
-function _onKeyDown(e) {
-  // No interceptar si un input tiene foco
-  const tag = document.activeElement?.tagName?.toLowerCase();
-  if (tag === 'input' || tag === 'textarea' || tag === 'select') {
-    // Solo Escape escapa de inputs
-    if (e.key === 'Escape') {
-      document.activeElement.blur();
-      e.preventDefault();
-    }
-    return;
-  }
-
-  // No interceptar si hay modificadores (excepto Shift para ?)
-  if (e.ctrlKey || e.altKey || e.metaKey) return;
-
-  const key = e.key;
-
-  // Buscar atajo directo (1 tecla)
-  if (!_pendingKey) {
-    const direct = _shortcuts.get(key);
-    if (direct) {
-      e.preventDefault();
-      direct.handler();
-      return;
-    }
-
-    // Iniciar secuencia de 2 teclas
-    // Solo letras minusculas inician secuencias
-    if (/^[a-z]$/.test(key)) {
-      _pendingKey = key;
-      _pendingTimer = setTimeout(() => {
-        _pendingKey = '';
-        _pendingTimer = null;
-      }, SEQUENCE_TIMEOUT);
-      return;
-    }
-    return;
-  }
-
-  // Completar secuencia de 2 teclas
-  clearTimeout(_pendingTimer);
-  const sequence = `${_pendingKey} ${key}`;
-  _pendingKey = '';
-  _pendingTimer = null;
-
-  const seq = _shortcuts.get(sequence);
-  if (seq) {
-    e.preventDefault();
-    seq.handler();
-  }
-}
-
-// ─────────────────────────────── ACCIONES ────────────────────────────────────
-
-function _focusSearch() {
-  const input = document.querySelector('.topbar-search input, .topbar-search-input');
-  if (input) {
-    input.focus();
-    input.select();
-  }
-}
-
-function _refreshState() {
-  window.dispatchEvent(new CustomEvent('ops:refresh'));
-}
-
-function _closeActiveOverlay() {
-  // Cerrar help panel
-  if (_helpVisible) {
-    toggleHelp();
-    return;
-  }
-  // Cerrar modal
-  const modal = document.querySelector('.modal-overlay:not(.is-hidden)');
-  if (modal) {
-    modal.classList.add('is-hidden');
-    return;
-  }
-  // Cerrar console panel
-  const consolePanel = document.getElementById('console-panel');
-  if (consolePanel?.classList.contains('is-open')) {
-    consolePanel.classList.remove('is-open');
-  }
-}
-
-// ─────────────────────────────── HELP PANEL ──────────────────────────────────
-
-export function toggleHelp() {
-  _helpVisible = !_helpVisible;
-  let panel = document.getElementById('keyboard-help-panel');
-
-  if (!_helpVisible && panel) {
-    panel.remove();
-    return;
-  }
-
-  if (_helpVisible) {
-    panel = document.createElement('div');
-    panel.id = 'keyboard-help-panel';
-    panel.className = 'modal-overlay';
-    panel.setAttribute('role', 'dialog');
-    panel.setAttribute('aria-modal', 'true');
-    panel.setAttribute('aria-label', 'Keyboard shortcuts');
-    panel.addEventListener('click', (e) => {
-      if (e.target === panel) toggleHelp();
-    });
-
-    // Agrupar shortcuts
-    const groups = new Map();
-    for (const [keys, { label, group }] of _shortcuts) {
-      if (!groups.has(group)) groups.set(group, []);
-      groups.get(group).push({ keys, label });
-    }
-
-    let groupsHtml = '';
-    for (const [group, items] of groups) {
-      groupsHtml += `
-        <div class="kb-help-group">
-          <h3 class="kb-help-group-title">${group}</h3>
-          <div class="kb-help-items">
-            ${items.map(({ keys, label }) => `
-              <div class="kb-help-item">
-                <kbd class="kb-help-key">${_formatKey(keys)}</kbd>
-                <span class="kb-help-label">${label}</span>
-              </div>
-            `).join('')}
-          </div>
-        </div>
-      `;
-    }
-
-    panel.innerHTML = `
-      <div class="modal" style="max-width:520px">
-        <div class="modal-header">
-          <h2 class="modal-title">${icon('keyboard', 18)} Keyboard shortcuts</h2>
-          <button class="modal-close" type="button" aria-label="Close" id="kb-help-close">&times;</button>
-        </div>
-        <div class="modal-body" style="padding:var(--space-4) var(--space-6)">
-          ${groupsHtml}
-        </div>
-        <div class="modal-footer" style="justify-content:center">
-          <p style="font-size:var(--text-xs);color:var(--text-muted)">Press <kbd class="kb-help-key">?</kbd> to toggle this panel</p>
-        </div>
-      </div>
-    `;
-
-    document.body.appendChild(panel);
-    panel.querySelector('#kb-help-close')?.addEventListener('click', () => toggleHelp());
-  }
-}
-
-function _formatKey(keys) {
-  return keys.split(' ').map(k => {
-    if (k === 'Escape') return 'Esc';
-    if (k === '/') return '/';
-    if (k === '?') return '?';
-    return k.toUpperCase();
-  }).join(' <span style="opacity:0.4">then</span> ');
-}
-
-// ─────────────────────────────── INIT ────────────────────────────────────────
-
-export function init() {
-  _registerDefaults();
-  document.addEventListener('keydown', _onKeyDown);
-}
-
-export function destroy() {
-  document.removeEventListener('keydown', _onKeyDown);
-  _shortcuts.clear();
-}
-
-export default { init, destroy, register, toggleHelp };
+/**
+ * keyboard.js — Sistema de atajos de teclado global para TrackOps Dashboard
+ * Secuencias de 2 teclas estilo Vim/GitHub (g d = go dashboard).
+ * No activo cuando un input/textarea/select tiene foco.
+ */
+
+import * as router from './router.js';
+import * as state from './state.js';
+import { icon } from './icons.js';
+
+/** @type {Map<string, {handler: Function, label: string, group: string}>} */
+const _shortcuts = new Map();
+
+/** Buffer para secuencias de 2 teclas */
+let _pendingKey = '';
+let _pendingTimer = null;
+const SEQUENCE_TIMEOUT = 600; // ms para completar secuencia
+
+/** Elemento del panel de ayuda */
+let _helpVisible = false;
+
+// ─────────────────────────────── REGISTRO ────────────────────────────────────
+
+/**
+ * Registrar un atajo de teclado
+ * @param {string} keys — Tecla o secuencia ('g o', '/', '?', 'Escape')
+ * @param {Function} handler — Callback
+ * @param {string} label — Descripcion para el panel de ayuda
+ * @param {string} [group='General'] — Grupo en el panel de ayuda
+ */
+export function register(keys, handler, label, group = 'General') {
+  _shortcuts.set(keys, { handler, label, group });
+}
+
+// ─────────────────────────────── DEFAULTS ────────────────────────────────────
+
+function _registerDefaults() {
+  // Navegacion
+  register('g d', () => router.navigate('dashboard'),  'Go to Dashboard',   'Navigation');
+  register('g t', () => router.navigate('tasks'),      'Go to Tasks',       'Navigation');
+  register('g l', () => router.navigate('timeline'),   'Go to Timeline',    'Navigation');
+  register('g e', () => router.navigate('terminal'),   'Go to Terminal',    'Navigation');
+  register('g p', () => router.navigate('projects'),   'Go to Projects',    'Navigation');
+  register('g s', () => router.navigate('settings'),   'Go to Settings',    'Navigation');
+
+  // Acciones
+  register('/', () => _focusSearch(),                   'Focus search',      'Actions');
+  register('r', () => _refreshState(),                  'Refresh data',      'Actions');
+  register('Escape', () => _closeActiveOverlay(),       'Close overlay',     'Actions');
+
+  // Ayuda
+  register('?', () => toggleHelp(),                     'Show shortcuts',    'Help');
+}
+
+// ─────────────────────────────── HANDLER ─────────────────────────────────────
+
+function _onKeyDown(e) {
+  // No interceptar si un input tiene foco
+  const tag = document.activeElement?.tagName?.toLowerCase();
+  if (tag === 'input' || tag === 'textarea' || tag === 'select') {
+    // Solo Escape escapa de inputs
+    if (e.key === 'Escape') {
+      document.activeElement.blur();
+      e.preventDefault();
+    }
+    return;
+  }
+
+  // No interceptar si hay modificadores (excepto Shift para ?)
+  if (e.ctrlKey || e.altKey || e.metaKey) return;
+
+  const key = e.key;
+
+  // Buscar atajo directo (1 tecla)
+  if (!_pendingKey) {
+    const direct = _shortcuts.get(key);
+    if (direct) {
+      e.preventDefault();
+      direct.handler();
+      return;
+    }
+
+    // Iniciar secuencia de 2 teclas
+    // Solo letras minusculas inician secuencias
+    if (/^[a-z]$/.test(key)) {
+      _pendingKey = key;
+      _pendingTimer = setTimeout(() => {
+        _pendingKey = '';
+        _pendingTimer = null;
+      }, SEQUENCE_TIMEOUT);
+      return;
+    }
+    return;
+  }
+
+  // Completar secuencia de 2 teclas
+  clearTimeout(_pendingTimer);
+  const sequence = `${_pendingKey} ${key}`;
+  _pendingKey = '';
+  _pendingTimer = null;
+
+  const seq = _shortcuts.get(sequence);
+  if (seq) {
+    e.preventDefault();
+    seq.handler();
+  }
+}
+
+// ─────────────────────────────── ACCIONES ────────────────────────────────────
+
+function _focusSearch() {
+  const input = document.querySelector('.topbar-search input, .topbar-search-input');
+  if (input) {
+    input.focus();
+    input.select();
+  }
+}
+
+function _refreshState() {
+  window.dispatchEvent(new CustomEvent('ops:refresh'));
+}
+
+function _closeActiveOverlay() {
+  // Cerrar help panel
+  if (_helpVisible) {
+    toggleHelp();
+    return;
+  }
+  // Cerrar modal
+  const modal = document.querySelector('.modal-overlay:not(.is-hidden)');
+  if (modal) {
+    modal.classList.add('is-hidden');
+    return;
+  }
+  // Cerrar console panel
+  const consolePanel = document.getElementById('console-panel');
+  if (consolePanel?.classList.contains('is-open')) {
+    consolePanel.classList.remove('is-open');
+  }
+}
+
+// ─────────────────────────────── HELP PANEL ──────────────────────────────────
+
+export function toggleHelp() {
+  _helpVisible = !_helpVisible;
+  let panel = document.getElementById('keyboard-help-panel');
+
+  if (!_helpVisible && panel) {
+    panel.remove();
+    return;
+  }
+
+  if (_helpVisible) {
+    panel = document.createElement('div');
+    panel.id = 'keyboard-help-panel';
+    panel.className = 'modal-overlay';
+    panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-modal', 'true');
+    panel.setAttribute('aria-label', 'Keyboard shortcuts');
+    panel.addEventListener('click', (e) => {
+      if (e.target === panel) toggleHelp();
+    });
+
+    // Agrupar shortcuts
+    const groups = new Map();
+    for (const [keys, { label, group }] of _shortcuts) {
+      if (!groups.has(group)) groups.set(group, []);
+      groups.get(group).push({ keys, label });
+    }
+
+    let groupsHtml = '';
+    for (const [group, items] of groups) {
+      groupsHtml += `
+        <div class="kb-help-group">
+          <h3 class="kb-help-group-title">${group}</h3>
+          <div class="kb-help-items">
+            ${items.map(({ keys, label }) => `
+              <div class="kb-help-item">
+                <kbd class="kb-help-key">${_formatKey(keys)}</kbd>
+                <span class="kb-help-label">${label}</span>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      `;
+    }
+
+    panel.innerHTML = `
+      <div class="modal" style="max-width:520px">
+        <div class="modal-header">
+          <h2 class="modal-title">${icon('keyboard', 18)} Keyboard shortcuts</h2>
+          <button class="modal-close" type="button" aria-label="Close" id="kb-help-close">&times;</button>
+        </div>
+        <div class="modal-body" style="padding:var(--space-4) var(--space-6)">
+          ${groupsHtml}
+        </div>
+        <div class="modal-footer" style="justify-content:center">
+          <p style="font-size:var(--text-xs);color:var(--text-muted)">Press <kbd class="kb-help-key">?</kbd> to toggle this panel</p>
+        </div>
+      </div>
+    `;
+
+    document.body.appendChild(panel);
+    panel.querySelector('#kb-help-close')?.addEventListener('click', () => toggleHelp());
+  }
+}
+
+function _formatKey(keys) {
+  return keys.split(' ').map(k => {
+    if (k === 'Escape') return 'Esc';
+    if (k === '/') return '/';
+    if (k === '?') return '?';
+    return k.toUpperCase();
+  }).join(' <span style="opacity:0.4">then</span> ');
+}
+
+// ─────────────────────────────── INIT ────────────────────────────────────────
+
+export function init() {
+  _registerDefaults();
+  document.addEventListener('keydown', _onKeyDown);
+}
+
+export function destroy() {
+  document.removeEventListener('keydown', _onKeyDown);
+  _shortcuts.clear();
+}
+
+export default { init, destroy, register, toggleHelp };