§3.1DemoMount — live

The division of labor is the package's usual one: the mount markup (stage, controls slot, caption slot) ships in the package; the demo module and its loader belong to the site. This site keeps its loader in src/lib/demo-loader.ts and calls mountAllDemos() once from the layout; the call runs on every page, but a demo module chunk is fetched only for a page that carries a [data-demo] mount.

A demo that takes pointer input on its canvas passes interactive — the stage then claims touch gestures and shows a crosshair. This one is passive (render-only), so it leaves the flag off and a swipe over the canvas still scrolls the page. It draws two-source wave interference with the page's own ink token, so it follows the theme:

Demo · Two-source wave interference

Demo · Two-source wave interference

Two point sources emit circular waves; where crests meet crests the ink pools, where crests meet troughs the paper shows through. Toggle the theme — the demo re-inks itself from the live tokens.

The module contract is one default export, mount(ctx), returning a cleanup function; the loader resolves module ids like waves/interference however the site pleases (import.meta.glob here).

§3.2Page furniture

The remaining components frame a note rather than fill it:

• Hero opens a note: kicker, display title, a lede that goes through the full Markdown pipeline, a meta line, and optional tocLabel that adds an unnumbered "intro" row to the sidebar. The note's frontmatter title stays the short canonical one for <title> and cards; the hero's may be long.
• PartHero opens a chapter of a hub — this page's own head. Its kicker is never typed: the route passes the chapter's "Part III · …" label in as props.partLabel.
• Part divides a long single-page note into parts; the numbering preset turns it into the "PART II · Foundations" group rows of the sidebar. The kitchen-sink is cut that way.
• HubCard and .hub-grid are a hub's landing cards; .path is its reading-path box — both on the overview of this gallery.
• LocalToc renders an in-page jump list; it accepts both ToC shapes the two numbering presets produce, and hides itself under a configurable minimum. Below, live, on this chapter's own ToC.
• SidebarMemory keeps a scrolling sidebar where the reader left it across page loads, and centres the current item ([aria-current="page"] by default) whenever it would otherwise be out of view. Drop it inside the sidebar's scroll box, after the navigation markup; it runs before first paint, so the sidebar never flashes at the top. The demo's own sidebar carries it.
• LineageSvg frames a hand-drawn SVG (a method lineage, a taxonomy tree) as a card — one below.
• PageFooter is the small print at a note's foot — the line under every note here.
• The browse pieces live in the wiki chapter; the Markdown side of the gallery is the kitchen-sink.

§3.3LocalToc and LineageSvg, live

LocalToc fed this page's own build-time ToC — the same data the sidebar consumes, handed to the note as props.toc:

And LineageSvg around a hand-authored diagram, inked entirely in semantic tokens so it sits on both themes:

§3.4Furniture without a component

A few pieces are plain classes in base.css, for sites that render them from their own layout or write them as HTML in prose: