§3.1DemoMount — ao vivo

A divisão de trabalho é a de sempre no pacote: a marcação de montagem (palco, slot de controles, slot de legenda) vem no pacote; o módulo da demo e seu carregador pertencem ao site. Este site guarda o carregador em src/lib/demo-loader.ts e chama mountAllDemos() uma vez no layout; a chamada roda em toda página, mas o chunk de um módulo de demo só é baixado numa página que carrega uma montagem [data-demo].

Uma demo que recebe entrada de ponteiro no canvas passa interactive — o palco então reivindica os gestos de toque e mostra uma mira. Esta é passiva (só renderiza), então deixa a flag de fora e um deslizar sobre o canvas ainda rola a página. Ela desenha a interferência de ondas de duas fontes com o token de tinta da própria página, então acompanha o tema:

Demo · Interferência de ondas de duas fontes

Demo · Interferência de ondas de duas fontes

Duas fontes pontuais emitem ondas circulares; onde crista encontra crista a tinta se acumula, onde crista encontra vale o papel aparece. Alterne o tema — a demo se re-entinta a partir dos tokens vivos.

O contrato do módulo é um único export default, mount(ctx), devolvendo uma função de limpeza; o carregador resolve ids de módulo como waves/interference do jeito que o site preferir (import.meta.glob aqui).

§3.2Mobiliário de página

Os componentes restantes emolduram a nota em vez de preenchê-la:

• Hero abre uma nota: kicker, título display, um lide que passa pelo pipeline de Markdown inteiro, uma linha de meta e um tocLabel opcional que acrescenta à barra lateral uma linha de "introdução" sem número. O title do frontmatter continua sendo o canônico curto para o <title> e os cartões; o do hero pode ser longo.
• PartHero abre um capítulo de um hub — a cabeça desta própria página. Seu kicker nunca é digitado: a rota entrega o rótulo "Parte III · …" do capítulo via props.partLabel.
• Part divide uma nota longa de página única em partes; o preset de numeração o transforma nas linhas de grupo "PARTE II · Fundamentos" da barra lateral. A vitrine completa é cortada assim.
• HubCard e .hub-grid são os cartões de abertura de um hub; .path é sua caixa de caminho de leitura — ambos em a visão geral desta galeria.
• LocalToc renderiza uma lista de salto na própria página; aceita os dois formatos de ToC que os dois presets de numeração produzem e se esconde abaixo de um mínimo configurável. Logo abaixo, ao vivo, sobre o ToC deste capítulo.
• SidebarMemory mantém uma barra lateral rolante onde o leitor a deixou, através das trocas de página, e centraliza o item atual ([aria-current="page"] por padrão) sempre que ele ficaria fora de vista. Coloque-o dentro da caixa de rolagem da barra lateral, depois da marcação de navegação; ele roda antes da primeira pintura, então a barra nunca pisca no topo. A barra lateral desta demo o carrega.
• LineageSvg emoldura um SVG desenhado à mão (uma linhagem de métodos, uma árvore de taxonomia) como cartão — um logo abaixo.
• PageFooter é a letra miúda ao pé da nota — a linha sob cada nota daqui.
• As peças de navegação vivem em o capítulo wiki; o lado Markdown da galeria é a vitrine completa.

§3.3LocalToc e LineageSvg, ao vivo

LocalToc alimentado com o ToC de build desta própria página — os mesmos dados que a barra lateral consome, entregues à nota como props.toc:

E LineageSvg ao redor de um diagrama autoral, entintado inteiramente em tokens semânticos para assentar nos dois temas:

§3.4Mobiliário sem componente

Algumas peças são classes simples no base.css, para sites que as renderizam no próprio layout ou as escrevem como HTML na prosa: