@wxxb789/anc 0.0.1

package/src/pages/private.astro

@@ -0,0 +1,59 @@
+---
+/**
+ * Where every link to a note this build did not publish lands.
+ *
+ * **One page for every withheld target, and it names none of them.** A link to
+ * an excluded note used to render as plain text; owner decision 2026-08-17 made
+ * it live, so it needs a destination that exists and tells the truth. This is
+ * that destination — the same static document whichever link led here, which is
+ * what makes it safe: it has no subject, so it discloses nothing beyond what
+ * the link the reader already read told them.
+ *
+ * The disclosure that *does* now happen is in the linking page, not in this one:
+ * a wikilink's own text is its target path, and that text is what ships. See
+ * `scripts/resolve-links.ts`'s `unpublished` branch, where the decision and its
+ * cost are recorded.
+ *
+ * **It says the note will not appear later**, and that sentence is the reason
+ * this is a page rather than a redirect to `/404/`. A 404 tells a reader the
+ * address is wrong, which is false — the author wrote that link deliberately and
+ * the build resolved it to a real file. Saying "not published, and not pending"
+ * is the honest version, and it is the one a reader can act on by not coming
+ * back.
+ *
+ * `noindex`, via `isIndexable`: a crawler that indexed this would list one page
+ * under the text of every withheld link on the site, which is the disclosure
+ * concentrated rather than dispersed. Nothing links here from the chrome — the
+ * only inbound links are the ones a note body wrote — so it is reachable exactly
+ * as often as an author chose.
+ *
+ * The route segment is reserved in `src/lib/schema.ts`; without that a user's
+ * own `private.md` would capture every withheld link on their site.
+ */
+import Layout from '../layouts/Layout.astro';
+import { SITE_MAP } from '../lib/routes.js';
+import { TITLE_SUFFIX } from '../lib/site.js';
+import { NAV_LANGUAGE, translate } from '../lib/translations.js';
+
+// The navigation language, for the same reason `404.astro` uses it: this page
+// renders no document, so there is no document language to read. A withheld
+// note has a language and this page may not consult it — reading one would make
+// the chrome here a fact about the file that was not published.
+const t = translate(NAV_LANGUAGE);
+---
+
+<Layout title={`${t.withheldTitle}${TITLE_SUFFIX}`} description={t.withheldDescription}>
+  <article class="prose">
+    <h1>{t.withheldTitle}</h1>
+
+    <p>{t.withheldBody}</p>
+
+    <p>{t.withheldPermanence}</p>
+
+    <h2>{t.notFoundWhereTo}</h2>
+
+    <ul>
+      {SITE_MAP.map((item) => <li><a href={item.href}>{t[item.label]}</a></li>)}
+    </ul>
+  </article>
+</Layout>

package/src/pages/recent.astro

@@ -0,0 +1,33 @@
+---
+/**
+ * `/recent/` — every published note, most recently updated first.
+ *
+ * A corpus route rather than a document route, so its chrome is the navigation
+ * language. The note titles it lists are their authors' own words and carry
+ * their own `lang` where it differs; `NoteList` handles that.
+ */
+import Layout from '../layouts/Layout.astro';
+import NoteList from '../components/NoteList.astro';
+import { entries } from '../lib/content.js';
+import { noteTimestamp, recentFirst } from '../lib/routes.js';
+import { TITLE_SUFFIX } from '../lib/site.js';
+import { NAV_LANGUAGE, translate } from '../lib/translations.js';
+
+const t = translate(NAV_LANGUAGE);
+const ordered = recentFirst(entries);
+// The artifact's date fields are optional. Saying which ordering a reader is
+// actually looking at is the honest alternative to implying a recency the
+// current artifact cannot support.
+const dated = entries.some((entry) => noteTimestamp(entry) !== undefined);
+---
+
+<Layout title={`${t.recentTitle}${TITLE_SUFFIX}`} description={t.recentDescription}>
+  <section aria-labelledby="recent-title">
+    <div class="section-heading">
+      <h1 id="recent-title">{t.recentTitle}</h1>
+      <span>{t.publishedCount(ordered.length)}</span>
+    </div>
+    <p class="facet-note">{dated ? t.recentOrderedByDate : t.recentOrderedBySlug}</p>
+    <NoteList entries={ordered} level={2} lang={NAV_LANGUAGE} />
+  </section>
+</Layout>

package/src/pages/robots.txt.js

@@ -0,0 +1,15 @@
+/**
+ * `/robots.txt` — the indexing policy, and where the sitemap is.
+ *
+ * Generated rather than the committed `public/robots.txt` it replaces. The
+ * `Sitemap:` directive takes an absolute URL, so a static file would be a second
+ * place this site's origin is written down — and the origin is a placeholder
+ * until a domain is assigned, which makes "written once" the difference between
+ * a one-line change and a search-and-replace across the tree.
+ *
+ * The policy itself is in `renderRobots`.
+ */
+import { renderRobots } from "../lib/site.js";
+export const GET = ({ site }) => new Response(renderRobots(site), {
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' },
+});

package/src/pages/rss.xml.js

@@ -0,0 +1,21 @@
+/**
+ * `/rss.xml` — the Atom feed of every published note.
+ *
+ * An Astro endpoint rather than a build script, so the feed is part of the route
+ * model and `Astro.site` reaches it the same way it reaches every page. The
+ * `.xml.ts` name is what makes the emitted file `rss.xml`.
+ *
+ * `rss.xml` rather than `atom.xml` although the document is Atom 1.0: `rss` is
+ * the reserved route segment TK-01 already set aside, `/rss.xml` is the path
+ * readers and feed autodiscovery tools try first, and the `type` attribute on
+ * the discovery link states the actual format. The filename is an address, not
+ * a format declaration.
+ *
+ * The whole document, and the reasoning behind Atom over RSS 2.0, is in
+ * `src/lib/site.ts`.
+ */
+import { entries } from "../lib/content.js";
+import { renderFeed } from "../lib/site.js";
+export const GET = ({ site }) => new Response(renderFeed(site, entries), {
+    headers: { 'Content-Type': 'application/atom+xml; charset=utf-8' },
+});

package/src/pages/sitemap.xml.js

@@ -0,0 +1,20 @@
+/**
+ * `/sitemap.xml` — every public route, for crawlers.
+ *
+ * Hand-emitted rather than `@astrojs/sitemap`, and that is a correctness
+ * decision rather than a dependency-count one. The integration enumerates what
+ * Astro emitted, which would include `/404.html` and this file's siblings and
+ * would need a filter to exclude them; and it has no access to the artifact, so
+ * `<lastmod>` would either be absent or be the build clock — the second of which
+ * breaks the determinism this ticket is measured on. Reading the artifact
+ * directly gives the right URL set and a real modification date, in the same
+ * thirty lines.
+ *
+ * `tests/metadata.test.ts` proves the route set here is exactly the set the
+ * build wrote to `dist/`, so this cannot drift from what is actually served.
+ */
+import { entries, tagFacets } from "../lib/content.js";
+import { publicRoutes, renderSitemap } from "../lib/site.js";
+export const GET = ({ site }) => new Response(renderSitemap(site, publicRoutes(entries, tagFacets())), {
+    headers: { 'Content-Type': 'application/xml; charset=utf-8' },
+});

package/src/pages/tags/[tag].astro

@@ -0,0 +1,56 @@
+---
+/**
+ * `/tags/<key>/` — the notes carrying one tag.
+ *
+ * A facet aggregates many documents, so its chrome is the navigation language
+ * rather than any member's. Resolving it from, say, the first note would make
+ * this page's language depend on which entry sorts first — a public page
+ * changing language because an unrelated note was published.
+ *
+ * The tag itself is interpolated into the heading and the title as artifact
+ * text, unchanged.
+ *
+ * The complete static `NoteList` is always rendered. The enhanced region below it
+ * is hidden until `tag-browser.ts` runs, so a reader with no scripting (or whose
+ * chunk failed) sees the whole tag through the static route. The region itself,
+ * with the browser's shared ids and status sentences, is `TagBrowser.astro`.
+ */
+import Layout from '../../layouts/Layout.astro';
+import NoteList from '../../components/NoteList.astro';
+import TagBrowser from '../../components/TagBrowser.astro';
+import { tagFacets } from '../../lib/content.js';
+import { TITLE_SUFFIX } from '../../lib/site.js';
+import { NAV_LANGUAGE, translate } from '../../lib/translations.js';
+
+export function getStaticPaths() {
+  // No facets means no paths, which is the correct static answer: `/tags/` still
+  // renders its empty state, and any `/tags/<anything>/` request is a 404
+  // because that tag genuinely does not exist.
+  return tagFacets().map((facet) => ({ params: { tag: facet.key }, props: { facet } }));
+}
+
+const { facet } = Astro.props;
+const t = translate(NAV_LANGUAGE);
+---
+
+<Layout
+  title={`${t.tagPageTitle(facet.label)}${TITLE_SUFFIX}`}
+  description={t.tagPageDescription(facet.label)}
+>
+  <section aria-labelledby="tag-title">
+    <div class="section-heading">
+      <h1 id="tag-title">{t.tagPageTitle(facet.label)}</h1>
+      <span>{t.noteCount(facet.entries.length)}</span>
+    </div>
+    <p class="facet-note"><a href="/tags/">{t.allTags}</a></p>
+
+    <div id="tag-static-list">
+      <NoteList entries={facet.entries} level={2} lang={NAV_LANGUAGE} />
+    </div>
+
+    {/* The complete static list above stays the no-JS route; the region below is
+        the enhanced browser, hidden until the script runs — which unhides the
+        static list on any failure. */}
+    <TagBrowser mode="fixed" tagKey={facet.key} />
+  </section>
+</Layout>

package/src/pages/tags/index.astro

@@ -0,0 +1,37 @@
+---
+/**
+ * `/tags/` — every public tag in the projection.
+ *
+ * A corpus route, so the chrome is the navigation language. The tag labels
+ * themselves are artifact text and are never translated: `security` stays
+ * `security`, `笔记` stays `笔记`.
+ *
+ * `FacetIndex`'s anchors remain the complete no-JS route to each tag's page. The
+ * chooser below is an additive enhancement that enumerates a selected tag in
+ * place through the snapshot; switching tags resets the continuation. The chooser
+ * itself, with the browser's shared ids and status sentences, is
+ * `TagBrowser.astro`.
+ */
+import Layout from '../../layouts/Layout.astro';
+import FacetIndex from '../../components/FacetIndex.astro';
+import TagBrowser from '../../components/TagBrowser.astro';
+import { tagFacets } from '../../lib/content.js';
+import { tagRoute } from '../../lib/routes.js';
+import { TITLE_SUFFIX } from '../../lib/site.js';
+import { NAV_LANGUAGE, translate } from '../../lib/translations.js';
+
+const t = translate(NAV_LANGUAGE);
+const facets = tagFacets();
+---
+
+<Layout title={`${t.tagsTitle}${TITLE_SUFFIX}`} description={t.tagsDescription}>
+  <section aria-labelledby="tags-title">
+    <div class="section-heading">
+      <h1 id="tags-title">{t.tagsTitle}</h1>
+      <span>{t.tagCount(facets.length)}</span>
+    </div>
+    <FacetIndex facets={facets} route={tagRoute} empty={t.tagsEmpty} lang={NAV_LANGUAGE} />
+
+    {facets.length > 0 && <TagBrowser mode="switch" facets={facets} />}
+  </section>
+</Layout>

package/src/scripts/code-copy.js

@@ -0,0 +1,45 @@
+/** Progressive code-fence copy controls, inserted only when JavaScript runs. */
+export {};
+const article = document.querySelector('.prose[data-code-copy]');
+const idle = article?.dataset['codeCopy'];
+const copied = article?.dataset['codeCopied'];
+const failed = article?.dataset['codeCopyFailed'];
+if (article && idle && copied && failed && typeof navigator.clipboard?.writeText === 'function') {
+    for (const code of article.querySelectorAll('.code-block > pre > code')) {
+        const figure = code.closest('.code-block');
+        if (!figure || figure.querySelector('.code-copy') !== null)
+            continue;
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'code-copy';
+        button.textContent = idle;
+        const status = document.createElement('span');
+        status.className = 'sr-only';
+        status.setAttribute('role', 'status');
+        let resetTimer;
+        button.addEventListener('click', async () => {
+            if (resetTimer !== undefined)
+                window.clearTimeout(resetTimer);
+            button.disabled = true;
+            try {
+                await navigator.clipboard.writeText(code.textContent ?? '');
+                button.textContent = copied;
+                status.textContent = copied;
+            }
+            catch {
+                button.textContent = failed;
+                status.textContent = failed;
+            }
+            finally {
+                button.disabled = false;
+                resetTimer = window.setTimeout(() => {
+                    button.textContent = idle;
+                    status.textContent = '';
+                    resetTimer = undefined;
+                }, 1600);
+            }
+        });
+        figure.prepend(status);
+        figure.prepend(button);
+    }
+}

package/src/scripts/diagram-disabled.js

@@ -0,0 +1,16 @@
+/**
+ * The diagram runtime, in the mode that does not have one.
+ *
+ * `astro.config.mjs` aliases `src/scripts/diagram.ts` to this file whenever
+ * `DIAGRAM_MODE` is `'build-time'`. The mode that ships is `'client'`
+ * (`src/lib/diagram-mode.ts`), so this stub is bundled only when that constant
+ * is flipped. The page's
+ * `<script>` is bundled eagerly by Astro regardless of any condition around it,
+ * so the only way to keep Mermaid's 119 chunks out of `dist/` is to make the
+ * module they hang from import nothing.
+ *
+ * An empty module rather than a deleted `<script>`: the tag still exists, so
+ * the two modes emit the same page shape, and the difference between them is
+ * exactly one aliased import instead of a divergence in the template.
+ */
+export {};

package/src/scripts/diagram.js

@@ -0,0 +1,322 @@
+"use strict";
+/**
+ * Client-mode diagram rendering.
+ *
+ * Loaded only when `DIAGRAM_MODE` is `'client'` and only on pages that contain
+ * a diagram. In the shipped mode (`'build-time'`) this file is never imported,
+ * so none of it — and none of Mermaid — reaches any page. See
+ * `src/lib/diagram-mode.ts` for what the two modes cost.
+ *
+ * Three properties this has to preserve, all of which the build-time path gets
+ * for free and this one has to work for:
+ *
+ * 1. **Nothing loads until it is needed.** Mermaid's floor is 201 KB gzip for
+ *    the cheapest single diagram — 4× the §18 article budget — so the import is
+ *    deferred behind an `IntersectionObserver`. A reader who never scrolls to
+ *    the diagram never fetches the parser. That also places the cost outside
+ *    "initial JS on the article route", which is the only reading under which
+ *    client mode fits the stated budget at all.
+ * 2. **The source stays until the diagram replaces it.** The `<pre>` the
+ *    renderer emitted is removed only after a successful render, so a failure
+ *    at any point leaves the reader with the diagram's source rather than an
+ *    empty figure.
+ * 3. **The accessible name survives.** The figure's caption already names the
+ *    diagram, and the injected SVG is given the same name, so replacing the
+ *    source does not silently drop it.
+ */
+const DIAGRAM_SELECTOR = 'figure.diagram';
+/**
+ * Attributes that may carry a URL. Mirrors `URL_ATTRIBUTES` in
+ * `src/lib/mermaid-render.ts`, which enforces the same rule at build time;
+ * the two must agree, or one mode admits a link the other rejects.
+ */
+const URL_ATTRIBUTES = ['href', 'xlink:href', 'src'];
+/** Mermaid is imported at most once per page, on first diagram in view. */
+let runtime;
+/**
+ * Mermaid's own configuration, applied on import and again on every theme
+ * change.
+ *
+ * `initialize` is what installs the palette, and it is *not* idempotent with
+ * respect to the theme: calling it again with new `themeVariables` is the only
+ * way to make a later `render()` draw different colours. Without the second
+ * call a re-render redraws the diagram in exactly the palette it already had —
+ * measured, 0 of 60 sampled fills changed.
+ */
+function configure(mermaid) {
+    mermaid.initialize({
+        startOnLoad: false,
+        // **Deliberately not the build-time renderer's `'loose'`.** That level is
+        // forced there by happy-dom, under which DOMPurify returns an empty string
+        // (`src/lib/mermaid-render.ts`). A real browser has no such defect, so this
+        // path takes Mermaid's own label sanitizing, drops `click ... call`
+        // callbacks and `_blank` targets, and keeps the post-render pass below as
+        // a second boundary rather than the only one. Measured in Chromium: all
+        // four diagram types and the theme re-render still draw, and
+        // `tests/diagram-client.test.ts` gates a hostile label and `click`
+        // directive set against the rendered SVG.
+        securityLevel: 'strict',
+        deterministicIds: true,
+        handDrawnSeed: 42,
+        theme: 'base',
+        fontFamily: 'inherit',
+        themeVariables: currentThemeVariables(),
+        maxTextSize: 50000,
+        maxEdges: 500,
+    });
+}
+function loadMermaid() {
+    runtime ??= import('mermaid').then((module) => {
+        const mermaid = module.default;
+        configure(mermaid);
+        return mermaid;
+    });
+    return runtime;
+}
+/**
+ * Palette values for the theme in effect right now.
+ *
+ * Read from the live page rather than duplicated as literals, so the client
+ * path cannot drift from `src/styles/tokens.css` the way a second copy would.
+ *
+ * **Resolved through a probe element, not read off the custom property.**
+ * `getComputedStyle(root).getPropertyValue('--color-surface')` returns the
+ * *declared* value — `light-dark(#fff, #161b21)` — because a custom property is
+ * substituted, not computed. Mermaid runs every theme value through `khroma`,
+ * which parses colours and throws `Unsupported color format` on that string,
+ * and the whole render fails. Measured: it is what made every diagram in client
+ * mode stay as source.
+ *
+ * Assigning the property to a real `color` and reading *that* back makes the
+ * browser resolve `light-dark()` against the active `color-scheme`, which is
+ * exactly the value the diagram should use and follows the theme toggle.
+ */
+function currentThemeVariables() {
+    const probe = document.createElement('span');
+    // Out of flow and invisible, but still styled: `display: none` would leave
+    // the computed colour unresolved in some engines.
+    probe.style.position = 'absolute';
+    probe.style.visibility = 'hidden';
+    document.body.append(probe);
+    const resolve = (name, fallback) => {
+        probe.style.color = '';
+        probe.style.color = `var(${name})`;
+        const value = getComputedStyle(probe).color;
+        return value === '' ? fallback : value;
+    };
+    const palette = {
+        background: resolve('--color-bg', '#fbfaf7'),
+        surface: resolve('--color-surface', '#ffffff'),
+        surfaceAlt: resolve('--color-surface-alt', '#f2f0ea'),
+        text: resolve('--color-text', '#1b1f24'),
+        line: resolve('--color-line-strong', '#767d87'),
+    };
+    probe.remove();
+    return {
+        background: palette.background,
+        primaryColor: palette.surfaceAlt,
+        primaryTextColor: palette.text,
+        primaryBorderColor: palette.line,
+        lineColor: palette.line,
+        secondaryColor: palette.surface,
+        tertiaryColor: palette.surface,
+        textColor: palette.text,
+        mainBkg: palette.surfaceAlt,
+        nodeBorder: palette.line,
+        nodeTextColor: palette.text,
+    };
+}
+async function renderInto(figure, index) {
+    const source = figure.querySelector('.diagram-source');
+    const text = source?.textContent;
+    if (source === null || text === undefined || text === null || text.trim() === '')
+        return;
+    try {
+        const mermaid = await loadMermaid();
+        const { svg } = await mermaid.render(`diagram-client-${index}`, text);
+        if (svg === '')
+            throw new Error('the renderer produced empty output');
+        // Parsed rather than assigned as `innerHTML`: requirements §19.2 asks for
+        // DOM APIs or trusted structured rendering rather than untrusted
+        // `innerHTML`, and the string here is renderer output over content that,
+        // although allowlisted, has not passed the build-time sanitizer on this
+        // path. `image/svg+xml` also parses `<style>` inside `<svg>` correctly,
+        // which the HTML parser does not.
+        //
+        // **`xmlns:xlink` is declared here because Mermaid does not declare it and
+        // still uses it.** XML has no implicit prefixes, so an `xlink:href` on an
+        // undeclared prefix is a well-formedness *error* rather than an unknown
+        // attribute — the parse yields a `parsererror` document and the reader is
+        // left looking at the fence source. Measured on Mermaid 11.16.1 in
+        // Chromium: a C4 diagram renders, and parsing its output gives
+        // `Namespace prefix xlink for href on image is not defined` at column
+        // 17664; seven other diagram types are unaffected because only C4 emits
+        // `<image xlink:href>` for its icons. Build-time mode never meets this —
+        // it parses as HTML, where an undeclared prefix is just a name.
+        //
+        // Declaring the standard binding is a smaller and safer repair than
+        // rewriting the attribute: the value is what Mermaid meant, and the URL
+        // allowlist below still governs what it may point at.
+        //
+        // Matched on the **root element's own tag**, not on the whole string. A
+        // `svg.includes('xmlns:xlink')` guard was the first version and is wrong in
+        // the direction that matters: measured through the real renderer, a diagram
+        // whose *label* contains the text `xmlns:xlink` puts it in a `<tspan>` or a
+        // `foreignObject`, so such a diagram would skip the declaration and fall
+        // back to source — the defect this exists to fix, reintroduced by its own
+        // guard.
+        const declared = /<svg\b[^>]*\bxmlns:xlink=/.test(svg)
+            ? svg
+            : svg.replace(/<svg\b/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
+        const parsed = new DOMParser().parseFromString(declared, 'image/svg+xml');
+        const root = parsed.documentElement;
+        if (root.querySelector('parsererror') !== null)
+            throw new Error('renderer output is not well-formed');
+        if (root.querySelector('script') !== null)
+            throw new Error('renderer emitted a script');
+        for (const element of [root, ...root.querySelectorAll('*')]) {
+            // `attributes` is live and `removeAttribute` mutates it, so the names are
+            // snapshotted first. Iterating it directly skips the entry after each
+            // removal — which would leave a handler on the page.
+            const names = Array.from(element.attributes, (attribute) => attribute.name);
+            for (const name of names) {
+                if (/^on/i.test(name))
+                    element.removeAttribute(name);
+            }
+            // The same URL rule the build-time renderer enforces, for the same
+            // reason: Mermaid's `click` directive turns a node into an anchor
+            // pointing wherever the diagram source said, including a `javascript:`
+            // URL, and this SVG never passed through the build-time href allowlist.
+            // Build-time mode fails the build on one of these; here the diagram is
+            // already in front of a reader, so the link is dropped and the rest of
+            // the diagram still renders.
+            for (const attribute of URL_ATTRIBUTES) {
+                const value = element.getAttribute(attribute);
+                if (value === null)
+                    continue;
+                const isLocal = value.startsWith('#');
+                const isInlineRaster = /^data:image\/(?:png|jpe?g|gif|webp|avif);base64,[A-Za-z0-9+/=]*$/i.test(value);
+                if (!isLocal && !isInlineRaster)
+                    element.removeAttribute(attribute);
+            }
+        }
+        const caption = figure.querySelector('figcaption')?.textContent?.trim();
+        if (caption !== undefined && caption !== '')
+            root.setAttribute('aria-label', caption);
+        root.setAttribute('focusable', 'false');
+        const canvas = document.createElement('div');
+        canvas.className = 'diagram-canvas';
+        // The container scrolls horizontally when the diagram is wider than the
+        // measure, and a scrollable region must be keyboard reachable — axe
+        // `scrollable-region-focusable`, WCAG 2.1.1. Build-time mode sets the same
+        // attribute in the markup; the two modes must not differ on this.
+        canvas.tabIndex = 0;
+        canvas.append(document.importNode(root, true));
+        // Replace only now that a diagram exists: every failure above leaves the
+        // source in place, which is a readable page rather than a blank figure.
+        source.replaceWith(canvas);
+    }
+    catch {
+        // The source is still on the page and is the honest fallback. Nothing is
+        // logged: a console error on a published page is a gate failure in
+        // `tests/rendered-page.test.ts`, and a reader can act on neither.
+    }
+}
+const figures = [...document.querySelectorAll(DIAGRAM_SELECTOR)];
+if (figures.length > 0) {
+    /**
+     * Each figure's source, captured before anything replaces it.
+     *
+     * A re-render needs the text back, and by then the `<pre>` that held it is
+     * gone — `renderInto` replaces it on success, which is the property that
+     * leaves a readable page when a render fails.
+     */
+    const sources = new WeakMap();
+    for (const figure of figures) {
+        const text = figure.querySelector('.diagram-source')?.textContent;
+        if (text !== null && text !== undefined && text.trim() !== '')
+            sources.set(figure, text);
+    }
+    const observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            if (!entry.isIntersecting)
+                continue;
+            observer.unobserve(entry.target);
+            void renderInto(entry.target, figures.indexOf(entry.target));
+        }
+    }, 
+    // Start fetching a screen ahead, so a diagram is usually ready by the time
+    // it is scrolled to rather than appearing after it.
+    { rootMargin: '200px' });
+    for (const figure of figures)
+        observer.observe(figure);
+    /**
+     * Re-render every drawn diagram when the theme changes.
+     *
+     * Mermaid bakes the palette into the SVG at render time, so a diagram drawn
+     * in light mode stays light for ever. Build-time mode has no such problem —
+     * it renders both palettes and merges them into `light-dark()` values the
+     * browser re-resolves — which is why this regression is invisible until
+     * somebody runs the client path. Measured before this existed: toggling to
+     * dark changed 0 of 60 sampled fills and strokes.
+     *
+     * **A `MutationObserver` on `data-theme` rather than a custom event**, because
+     * `preferences.ts` already mutates that attribute and nothing else needs to
+     * know this file exists. `matchMedia` alone would miss the explicit toggle,
+     * which is the case a reader actually operates.
+     *
+     * **Passes are serialized rather than raced, and that is a correctness fix
+     * rather than tidiness.** An earlier version started a pass per change and
+     * guarded with a generation counter checked *after* `renderInto` — which is
+     * after the paint, so a stale pass had already committed its DOM before
+     * discovering it was stale. Worse, the newer pass skipped any figure without
+     * a `.diagram-canvas`, which is exactly the state an in-flight figure is in,
+     * so it stepped over the one figure the stale pass was about to paint in the
+     * old palette. The result was a deterministic mixed-palette page: every
+     * figure new except the one that had been rendering.
+     *
+     * Chaining removes the interleaving instead of detecting it. `pending` is the
+     * tail of the chain; a change appends to it, so a pass never observes a DOM
+     * another pass is midway through mutating. `wanted` is read at the start of
+     * each pass rather than captured per change, so a burst of toggles collapses
+     * into one redraw at the theme that is actually in effect when its turn
+     * comes — measured, a fast triple toggle settles byte-identical to a single
+     * clean toggle to the same theme.
+     *
+     * **Every figure with a captured source is redrawn**, including one still
+     * showing that source. A figure mid-initial-render is the case the skip used
+     * to miss: its `IntersectionObserver` pass may have called `render()` before
+     * the new palette was installed, and nothing would revisit it.
+     */
+    let pending = Promise.resolve();
+    const redraw = () => {
+        pending = pending.then(async () => {
+            // Re-configure before rendering: `initialize` is what installs the
+            // palette, so without this every re-render redraws the old colours.
+            configure(await loadMermaid());
+            for (const [index, figure] of figures.entries()) {
+                const text = sources.get(figure);
+                if (text === undefined)
+                    continue;
+                const canvas = figure.querySelector('.diagram-canvas');
+                if (canvas !== null) {
+                    const source = document.createElement('pre');
+                    source.className = 'diagram-source';
+                    source.textContent = text;
+                    // Put the source back so `renderInto` has its input, then let it do
+                    // the replacing exactly as on first draw — one code path draws a
+                    // diagram, and its failure path leaves the source in place.
+                    canvas.replaceWith(source);
+                }
+                await renderInto(figure, index);
+            }
+        });
+    };
+    new MutationObserver(redraw).observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme'],
+    });
+    // The system-preference case, for a reader on "system" who changes it at the
+    // OS level: no attribute mutates, so the observer above never fires.
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', redraw);
+}