Sacamos la documentación del modal

Estás escribiendo la página de onboarding de un servicio de pagos. Seis encabezados, dos bloques de código, una tabla de las colas que consume y un párrafo que reescribes una y otra vez porque es el párrafo que el próximo ingeniero va a leer de verdad.

En Archyl, hasta esta semana, escribías todo eso dentro de un diálogo. La página de detrás se oscurecía. El árbol de documentos, donde viven las páginas hermanas y donde irías a comprobar cómo llamaste a la última, se oscurecía con ella. El editor llenaba el diálogo, el diálogo no era la pantalla, y leer una página y escribir una página ocurrían en dos sitios distintos.

Funcionaba. Y tampoco se sentía realmente profesional, que es la frase a la que seguía volviendo hasta que me senté a reconstruirlo.

El espacio de trabajo de documentación ya no tiene ningún modal dentro. Esto es lo que ocupó su lugar.

El editor se abre donde está el documento

Pulsa Editar en una página, o presiona E mientras la lees, y el editor toma la columna de contenido en el sitio. El árbol se queda donde estaba, a plena luz, y sigue siendo clicable. Nada se superpone a nada.

El documento parece un documento mientras lo escribes. El título es un campo llano con el tamaño de un encabezado, sin rótulo y sin caja alrededor. Las etiquetas van debajo: escribe y pulsa Enter o coma para añadir una, backspace en un campo vacío para recuperar la última. La ruta de la carpeta recorre la parte superior de la barra de acciones, así que siempre sabes dónde va a aterrizar la página que estás escribiendo.

La barra también lleva el estado. Un punto ámbar y Cambios sin guardar mientras el borrador difiera de lo almacenado, y luego Guardar con su pista ⌘↵. Ese atajo funciona desde cualquier punto del editor, incluido el interior del cuerpo Markdown, así que nunca tienes que volver hasta el botón. Junto al selector de modo hay un interruptor de pantalla completa para cuando quieres el párrafo y nada más, y Escape te trae de vuelta. A lo largo del borde inferior, un recuento de palabras y un tiempo de lectura.

Escribir, Dividido, Vista previa

El editor tiene tres modos, y son la única decisión de barra de herramientas que tienes que tomar:

  • Escribir es solo Markdown, a todo el ancho de la columna.
  • Dividido pone el código fuente y la página renderizada uno al lado del otro.
  • Vista previa es la página renderizada a solas.

Dividido es el valor por defecto. Elijas el que elijas, Archyl lo guarda en tu navegador y vuelve a abrir así todos los documentos, de modo que quien escribe en Markdown crudo y quien quiere ver los encabezados renderizados nunca tienen que discutirlo ni reajustarlo en cada página.

Las carpetas son una fila en el árbol

Crear una carpeta era antes su propio diálogo: una caja, un campo de texto, un botón Crear y ni idea de dónde iba a aparecer la carpeta.

Ahora, al hacer clic en el icono de carpeta de la cabecera del árbol se abre una fila editable exactamente donde vivirá la carpeta, con la sangría correcta y el icono de carpeta ya dibujado. Escribe el nombre, pulsa Enter y existe. Escape cancela. Pide una subcarpeta desde el menú propio de una carpeta y la superior se despliega y la fila aparece dentro.

Renombrar funciona igual, en la fila. Mover páginas y carpetas sigue siendo arrastrar y soltar.

No puedes alejarte con un clic de trabajo sin guardar

Cada movimiento dentro del espacio de trabajo de documentación pasa por un único guardián: seleccionar otra página en el árbol, empezar una página nueva, abrir otra para editarla, cancelar y salir del editor. Si el borrador tiene cambios sin guardar, la acción queda retenida y primero recibes una confirmación, con Seguir editando como salida y Descartar cambios como la opción deliberada. En cuanto confirmas, se ejecuta la acción que pediste originalmente.

El navegador también está cubierto. Cerrar la pestaña con un borrador sin guardar levanta el aviso propio del navegador.

Este es el cambio menos visible de la release y el que defendería con más ganas. Un árbol de páginas clicables junto a un editor solo es un buen layout si hacer clic no puede costarte un párrafo.

El índice sigue al panel, no a la ventana

Cuando la columna es lo bastante ancha, los encabezados de la página se colocan en un raíl fijo a la derecha del texto, con la sección actual marcada a medida que haces scroll. Cuando es demasiado estrecha para un raíl, se recogen en un popover Contenido en la barra de herramientas.

El cambio entre esos dos está gobernado por el ancho del panel, no por el ancho de la ventana del navegador. Esa distinción es todo el asunto: la columna de docs comparte su espacio con el árbol, así que un monitor de 27 pulgadas con el árbol abierto es una ventana ancha alrededor de una columna de lectura estrecha. Un breakpoint basado en la ventana pondría ahí un raíl y aplastaría la prosa. Las container queries de Tailwind 4 hacen que el panel se mida a sí mismo.

Hacer clic en un encabezado desplaza el artículo, y solo el artículo. El raíl desplaza su propia lista para mantener a la vista la entrada activa sin mover el documento debajo de ti.

Lo que se ha quitado del montón

En esta release se borraron del todo cuatro componentes: el modal de documento, el modal de crear carpeta, la vieja barra lateral de índice y una página de documentación con lista de tarjetas que ya no renderizaba nada.

El editor Markdown sigue siendo @uiw/react-md-editor, pero su estilo viene ahora de los mismos design tokens que el resto de Archyl. Claro y oscuro son un único conjunto de reglas en lugar de un bloque de overrides por tema encima del de la propia librería.

Los adjuntos no cambian y funcionan exactamente igual que antes: suelta un archivo sobre el editor, pega una captura o usa Adjuntar. Las imágenes se insertan en el texto, todo lo demás aterriza en el panel de adjuntos, y el contador del clip en la cabecera de la página te lleva hasta ahí de un salto. La historia completa está en Arrastra, suelta, listo: los archivos llegan a los docs de Archyl.

Por qué molestarse en rediseñar una caja de texto

El trabajo de Archyl es mantener el modelo de arquitectura fiel al código, y la discovery hace esa parte por su cuenta. La prosa que rodea al modelo no tiene esa ayuda. El ADR que explica por qué está ahí la cola, la página de onboarding, el runbook: esos solo siguen siendo ciertos porque alguien sigue escribiéndolos, y la gente escribe menos cuando la superficie de escritura se pelea con ella.

Un modal era un pequeño impuesto que se cobraba absolutamente cada vez. Ya no está.

Inicia sesión, abre Docs en cualquier proyecto y pulsa E sobre una página. No hay nada que activar ni ningún paso de migración: tus páginas, carpetas y adjuntos están donde los dejaste. La guía de la funcionalidad está en Documentación y ADRs.