Reglas, cuadrícula y selección

Los controles del editor se dibujan en una capa aislada del documento. Los botones deshabilitados conservan fondo opaco. Los tooltips usan etiquetas blancas junto al icono, sombra discreta, texto con contraste y animación Anime.js de 120 ms; respetan movimiento reducido, foco y Escape.

Uso

• Diseño Global → Fondo → Quitar cuadrícula y patrón elimina la cuadrícula auxiliar y el patrón del sitio conservando color e imagen. Sin fondo también apaga la cuadrícula auxiliar.
• Diseño Global → Avanzado → Cuadrícula de edición controla únicamente la ayuda de edición.
• Arrastra desde la regla superior para crear una guía horizontal; desde la izquierda para una vertical. Las subdivisiones indican 10 px y las etiquetas 80 px, ajustadas al zoom y desplazamiento.
• Arrastra una guía de vuelta a una regla o fuera del lienzo para eliminarla. Con foco, flechas mueven 1 px, Mayús+flechas 10 px y Suprimir elimina. Enter sobre una regla crea una guía.
• Arrastra sobre una zona vacía para seleccionar elementos que intersectan el rectángulo. Ctrl/Cmd+clic alterna elementos específicos. Ctrl/Cmd+A selecciona los elementos visibles y desbloqueados de la página cuando el lienzo está activo. Suprimir elimina la selección en una sola operación deshacible.

Límites

Las guías son ayudas locales de este navegador, separadas por propietario, proyecto y página. No se publican ni sincronizan entre dispositivos. Las imágenes de fondo que contienen líneas no se modifican; Sin fondo las oculta. Los elementos bloqueados u ocultos no participan en la selección rectangular. Los campos de texto conservan sus propios atajos.

Pruebas

Pruebas unitarias de coordenadas con zoom, persistencia y teclado de guías; selección rectangular, bloqueo/visibilidad y cambio de selección al insertar; tooltips y reducción de movimiento. npm run test:ui:guides verifica el flujo integrado con Chromium. También se ejecutan las regresiones existentes de Wookcom, TypeScript, build y presupuesto del bundle.