Las reglas de intersección de intervalos, el anclaje de rangos visibles, las claves estables y las consultas deterministas viven en una capa sin DOM que puede probarse o trasladarse hacia workers sin depender del renderizado.
Público · Modelado de información
Timeline
Un espacio de trabajo para construir cronologías con eventos puntuales, intervalos, categorías e historias enlazadas, de modo que una secuencia temporal pueda convertirse en una explicación estructurada y navegable.
- Nicho
- Líneas temporales que combinan fechas, relaciones y narrativa
- Stack principal
- TypeScript · Vite 8 · escena retenida · Leaflet
- Modelo
- Registros canónicos · proyecciones temporales · vistas de grafo/mapa
- Enfoque
- Identidad estable · rendimiento interactivo · evidencia
Vista del sistema
Eventos · intervalosCategoríasHistoriasEspacio narrativo
El estudio
Una línea temporal útil conecta fechas con duración, categoría e interpretación.
Timeline está pensado para investigación, historia de proyectos y otros dominios donde importa representar acontecimientos puntuales, períodos prolongados, categorías superpuestas y una historia editorial que conecta esos hechos.
Estructura del sistema
El modelo separa hechos temporales de la narrativa construida con ellos.
Eventos e intervalos
Los hechos puntuales y los rangos de duración conservan semánticas temporales distintas.
Categorías como lente
La clasificación permite explorar una cronología por tema conservando el orden temporal común.
Historias enlazadas
Una historia selecciona y relaciona hechos y conserva los datos fuente como una capa propia.
Workspace responsive
La misma estructura sigue siendo legible desde un teléfono hasta una vista de escritorio amplia.
Diseño de producto e interacción
El producto distingue registro, organización e interpretación.
El usuario puede capturar eventos, agruparlos por categoría y construir después una historia a partir de ellos. Esa separación mantiene explícitos los registros fácticos y da a la prosa narrativa su propia capa.
La interfaz utiliza el espacio horizontal disponible y preserva lectura y edición lineales en pantallas estrechas, dando a la cronología una estructura clara entre tamaños de viewport.
Lectura arquitectónica
La vista temporal funciona ahora como una escena retenida con épocas de interacción explícitas, en lugar de reconstruir el DOM en cada cambio.
Una capa de proyección independiente del renderer decide pertenencia temporal e identidad estable de escena. El adaptador de interfaz conserva nodos por clave durante pan y zoom, amplía el overscan en la dirección del movimiento, protege ocurrencias enfocadas y poda únicamente cuando la interacción se confirma.
Las muestras de viewport en vivo permiten acoplamiento de cámara barato; los eventos confirmados dan a grafo y mapa un límite claro para filtrado o layout costoso.
Overscan y retención acotada durante la interacción evitan que puntos, rangos largos, foco y hover desaparezcan solo porque la cámara cruza un borde del viewport.
TypeScript estricto y pruebas de política del repositorio hacen cumplir layout mobile-first, ciclo de vida de Pointer Events, superficies primarias sin recorte y las invariantes de la escena retenida.
Enfoque de desarrollo
El proceso de diseño alterna entre dos vistas del mismo material: la cronología estricta y la historia que una persona intenta contar con ella.
Los experimentos comienzan con combinaciones reales de eventos, rangos, categorías e historias, junto con tamaños de pantalla deliberadamente restringidos. Las ideas visuales entran en el modelo compartido cuando aclaran la interpretación y preservan los hechos subyacentes.
Los experimentos narrativos se ejecutan sobre datos funcionales desde el comienzo. La validación y las comprobaciones de publicación preservan la estructura factual mientras la presentación continúa evolucionando.