§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 como tarjeta un SVG dibujado a mano (un linaje de métodos, un árbol taxonómico) — hay uno más 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 LineageSvg, 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:

Y LineageSvg alrededor de un diagrama escrito a mano, entintado por completo en tokens semánticos para que se asiente sobre ambos temas:

§3.4Mobiliario 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: