§3.1DemoMount, en vivo

El reparto de trabajo es el habitual del paquete: el marcado del montaje (escenario, slot de controles, slot de leyenda) viene en el paquete; el módulo de la demo y su cargador pertenecen al sitio. Este sitio guarda su cargador en src/lib/demo-loader.ts y llama a mountAllDemos() una sola vez desde el layout; la llamada corre en cada página, pero el chunk de un módulo de demo solo se descarga en las páginas que llevan un montaje [data-demo].

Una demo que toma entrada de puntero sobre su canvas pasa interactive — el escenario reclama entonces los gestos táctiles y muestra una cruz de puntería. Esta es pasiva (solo renderiza), así que deja el flag apagado y deslizar el dedo sobre el canvas sigue desplazando la página. Dibuja la interferencia de ondas de dos fuentes con el token de tinta de la propia página, así que sigue al tema:

Demo · Interferencia de ondas de dos fuentes

Demo · Interferencia de ondas de dos fuentes

Dos fuentes puntuales emiten ondas circulares; donde cresta encuentra cresta la tinta se encharca, donde cresta encuentra valle el papel asoma. Cambia el tema — la demo vuelve a entintarse con los tokens vivos.

El contrato del módulo es un único export por defecto, mount(ctx), que devuelve una función de limpieza; el cargador resuelve ids de módulo como waves/interference como el sitio prefiera (aquí, con import.meta.glob).

§3.2Mobiliario de página

Los componentes restantes enmarcan una nota en lugar de llenarla:

• Hero abre una nota: kicker, título de exhibición, una entradilla que pasa por el pipeline de Markdown completo, una línea de meta y un tocLabel opcional que añade al sidebar una fila de «introducción» sin numerar. El title del frontmatter sigue siendo el canónico corto para el <title> y las tarjetas; el del hero puede ser largo.
• PartHero abre un capítulo de un hub — la propia cabecera de esta página. Su kicker nunca se teclea: la ruta le pasa el rótulo «Parte III · …» del capítulo como props.partLabel.
• Part divide una nota larga de una sola página en partes; el preset de numeración lo convierte en las filas de grupo tipo «PARTE II · Fundamentos» del sidebar. El muestrario está cortado así.
• HubCard y .hub-grid son las tarjetas de portada de un hub; .path es su caja de ruta de lectura — ambas cosas en la visión general de esta galería.
• LocalToc renderiza una lista de saltos dentro de la página; acepta las dos formas de ToC que producen los dos presets de numeración y se oculta por debajo de un mínimo configurable. Abajo, en vivo, sobre el ToC de este mismo capítulo.
• SidebarMemory mantiene un sidebar con scroll donde el lector lo dejó entre cargas de página, y centra el elemento actual ([aria-current="page"] por defecto) siempre que fuera a quedar fuera de la vista. Colócalo dentro de la caja de scroll del sidebar, después del marcado de navegación; corre antes del primer pintado, así que el sidebar nunca parpadea arriba del todo. El sidebar de esta demo lo lleva.
• LineageSvg enmarca un SVG sin palabras — un árbol de linaje, una taxonomía — como tarjeta; un diagrama con palabras es un FlowDiagram, abajo.
• PageFooter es la letra pequeña al pie de una nota — la línea bajo cada nota de aquí.
• Las piezas de exploración viven en el capítulo de wiki; el lado Markdown de la galería es el muestrario.

§3.3LocalToc y FlowDiagram, en vivo

LocalToc alimentado con el ToC de build de esta misma página — los mismos datos que consume el sidebar, entregados a la nota como props.toc:

La misma figura como FlowDiagram: las cajas son HTML que se ajusta a sus palabras, las flechas se miden tras el diseño, así que nada se sale de su caja con ninguna fuente:

tokens.css

base.cssla columna de lectura

browse.cssel estante de navegación

componentsconsumen ambas

§3.4FlowDiagram — cajas del tamaño de sus palabras

Un diagrama que lleva palabras es un FlowDiagram (o un bloque mermaid). Un <svg> posicionado a mano con <text> se dibuja contra una fuente y se rompe con la siguiente más ancha — y cada sitio renderiza con la suya; LineageSvg queda para SVG sin texto que una fuente pueda deformar. La especificación son datos: cols, nodes (col / row / span, un tone, lines, un tag, ghost para una nota punteada, mono para rutas), edges (label, dashed, off para un enlace roto), lanes y heads opcionales:

Autor

Revisión

Build

Escribiruna nota o un componente

Abrir un PRuna rama

Revisaraprobar o preguntar

Construir y desplegaral fusionar

Una entrada de heads titula las filas que tiene debajo, así que un diagrama por grupos es una fila de encabezado seguida de las cajas del grupo; las líneas rodean el texto de un encabezado igual que rodean una caja. Una línea sin camino entre las cajas baja por el margen del diagrama —la franja a cada lado de las cajas, dentro del relleno del marco— y la capa de líneas abarca ese margen, de modo que la línea y su número quedan dentro de la figura:

Planificarqué cambiar

Construir

Medircontra la referencia

Lo que recibe el modelo

Lo que el modelo calcula con ello

Fotosvarias vistas

Cámarasposes y lentes

Rasgos por vista

Fusionar las vistas

Superficie cerrada

Cada caja mide al menos diez letras de ancho y cada columna tanto como la palabra más larga de sus cajas, así que ninguna palabra se parte; un nombre snake_case puede cortarse tras un guion bajo. Cuando la columna de la página es demasiado estrecha para todas, por ejemplo en un teléfono, el diagrama se desplaza de lado dentro de su marco mientras el título y el pie quedan fijos; el diagrama conserva la estructura con la que se escribió.

Cuando varias líneas con etiqueta salen de una caja, alguna etiqueta no encuentra sitio libre de cajas y se convierte en un número. Un número se coloca como una etiqueta: nunca sobre una caja, un encabezado, una etiqueta u otro número. Va sobre su línea donde la línea tiene un hueco libre y, si no, junto a ella, unido por un trazo corto:

Un rayo entra en la banda

Recorrer este tramoun presupuesto de M celdas

Rehacer un nivel más gruesoel intervalo sigue conteniendo el impacto

Recorrerlo sin presupuestosolo en el nivel más grueso

Dar el intervalocontiene el primer impacto

Pasar al siguiente cruceno quedan: el rayo no impacta

§3.5Mobiliario sin componente

Unas cuantas piezas son clases planas de base.css, para sitios que las renderizan desde su propio layout o las escriben como HTML dentro de la prosa: