explico 0.13.1 → 0.14.0

package/src/components/notation/NotationFormula.astro

@@ -9,9 +9,12 @@
  * names with `\explain{key}{latex}` — not the registry-wide table a card's
  * body math uses.
  *
- * The gloss list under the formula is not decoration: a gloss has no card of
- * its own, so this list is where its name lives with JavaScript off. The hover
- * panel is enhancement layered over content that already reads.
+ * The symbol list under the formula is not decoration: it is the "where …"
+ * clause a textbook prints after an equation, every symbol the formula names
+ * in the order it names them — the cards it wraps with `\explain`, each
+ * linked to its own entry where the page has one, and the glosses, whose
+ * names live only here. With JavaScript off, and in the exports, this is
+ * the whole explanation; the hover panel is enhancement over it.
  */
 import NotationMath from './NotationMath.astro';
 import SafeMathNode from './SafeMathNode.astro';
@@ -25,10 +28,22 @@ import {
   registerPageNotationDependencies,
 } from '../../reference/page-notation';
 
+/** A card the formula names with `\explain{key}{…}`, as the symbol list shows it. */
+export interface FormulaCard {
+  readonly key: string;
+  readonly latex: string;
+  readonly label: string;
+  readonly units?: string;
+  /** Where the card's own entry is, when the page has one (`#notation-<key>` on the glossary). */
+  readonly href?: string;
+}
+
 export interface Props {
   formula: string;
   scope: readonly GlyphScopeEntry[];
   glosses?: readonly ResolvedGloss[];
+  /** The cards the formula names, in any order; listed with the glosses in formula order. */
+  cards?: readonly FormulaCard[];
   /** Heading for the gloss list; omitted renders the list unlabelled. */
   glossLabel?: string;
   /** The owning entry's display label, used to name the scrollable region. */
@@ -43,6 +58,7 @@ const {
   formula,
   scope,
   glosses = [],
+  cards = [],
   glossLabel = 'Symbols',
   entryLabel,
   number,
@@ -56,6 +72,41 @@ registerPageNotationDependencies(
 );
 const latex = stripNotationMarkers(formula);
 const numbered = Boolean(number && numberHref);
+// Formula order: a card sits where its `\explain{key}` is, a gloss where its
+// glyph first appears; a symbol the text does not show sorts last.
+const FAR = Number.MAX_SAFE_INTEGER;
+const positionOf = (needle: string): number => {
+  const at = formula.indexOf(needle);
+  return at < 0 ? FAR : at;
+};
+interface ListedSymbol {
+  readonly kind: 'card' | 'gloss';
+  readonly key: string;
+  readonly latex: string;
+  readonly label: string;
+  readonly units?: string;
+  readonly href?: string;
+  readonly position: number;
+}
+const symbols: ListedSymbol[] = [
+  ...cards.map((card) => ({
+    kind: 'card' as const,
+    key: card.key,
+    latex: card.latex,
+    label: card.label,
+    ...(card.units === undefined ? {} : { units: card.units }),
+    ...(card.href === undefined ? {} : { href: card.href }),
+    position: positionOf(`\\explain{${card.key}}`),
+  })),
+  ...glosses.map((gloss) => ({
+    kind: 'gloss' as const,
+    key: gloss.key,
+    latex: gloss.notation,
+    label: gloss.label,
+    ...(gloss.units === undefined ? {} : { units: gloss.units }),
+    position: positionOf(gloss.notation),
+  })),
+].sort((a, b) => a.position - b.position || a.key.localeCompare(b.key));
 // The copy tooltip names what it copies, the way a lesson equation's does
 // with its `\caption{}`: here the owning entry's label.
 const copyTitle = entryLabel ? `Copy LaTeX — ${entryLabel}` : 'Copy LaTeX';
@@ -104,21 +155,29 @@ const copyTitle = entryLabel ? `Copy LaTeX — ${entryLabel}` : 'Copy LaTeX';
   </div>
 
   {
-    glosses.length > 0 && (
+    symbols.length > 0 && (
       <dl class="notation-gloss-list" data-notation-gloss-list>
         {glossLabel && <dt class="notation-gloss-label">{glossLabel}</dt>}
-        {glosses.map((gloss) => (
-          <dd class="notation-gloss" data-notation-gloss={gloss.key}>
+        {symbols.map((symbol) => (
+          <dd
+            class="notation-gloss"
+            data-notation-gloss={symbol.key}
+            data-notation-card={symbol.kind === 'card' ? '' : undefined}
+          >
             <span
               class="notation-gloss-symbol"
               data-notation-symbol-trigger
-              data-notation-key={gloss.key}
+              data-notation-key={symbol.key}
             >
-              <NotationMath class="notation-symbol" latex={gloss.notation} />
+              <NotationMath class="notation-symbol" latex={symbol.latex} />
             </span>
-            <span class="notation-gloss-name">{gloss.label}</span>
-            {gloss.units && (
-              <span class="notation-gloss-units">({gloss.units})</span>
+            {symbol.href ? (
+              <a class="notation-gloss-name" href={symbol.href}>{symbol.label}</a>
+            ) : (
+              <span class="notation-gloss-name">{symbol.label}</span>
+            )}
+            {symbol.units && (
+              <span class="notation-gloss-units">({symbol.units})</span>
             )}
           </dd>
         ))}
@@ -347,6 +406,17 @@ const copyTitle = entryLabel ? `Copy LaTeX — ${entryLabel}` : 'Copy LaTeX';
       color: var(--sl-color-gray-3);
     }
 
+    a.notation-gloss-name {
+      color: inherit;
+      text-decoration: underline dotted;
+      text-underline-offset: 0.15em;
+    }
+
+    a.notation-gloss-name:hover,
+    a.notation-gloss-name:focus-visible {
+      text-decoration-style: solid;
+    }
+
     .notation-gloss-units {
       color: var(--sl-color-gray-3);
     }

package/src/components/notation/NotationGlossary.astro

@@ -6,7 +6,8 @@ import NotationLayer, {
   type NotationLayerDefinition,
 } from './NotationLayer.astro';
 import { resolveLabel } from '../../reference/label';
-import { formulaGlyphScope, resolveGlosses } from '../../reference/gloss';
+import { formulaExplainKeys, formulaGlyphScope, resolveGlosses } from '../../reference/gloss';
+import type { FormulaCard } from './NotationFormula.astro';
 import type { GlyphScopeEntry, ResolvedGloss } from '../../reference/gloss';
 import {
   isLessonSlug,
@@ -74,6 +75,74 @@ const glossesByKey = new Map<string, ResolvedGloss[]>(
     resolveGlosses(entry.data.key, entry.data.glosses),
   ]),
 );
+// The cards a formula names, for its symbol list: label and units from
+// their own entries, each linked to its entry on this page.
+const entryByKey = new Map(notationEntries.map((entry) => [entry.data.key, entry]));
+const formulaCardsByKey = new Map<string, FormulaCard[]>(
+  notationEntries.map((entry) => [
+    entry.data.key,
+    [...new Set(formulaExplainKeys(formulaOf(entry.data) ?? ''))].flatMap((key) => {
+      const named = entryByKey.get(key);
+      if (!named || key === entry.data.key) return [];
+      return [
+        {
+          key,
+          latex: named.data.latex,
+          label: labelOf(named.data),
+          ...(named.data.units === undefined ? {} : { units: named.data.units }),
+          href: `#notation-${key}`,
+        },
+      ];
+    }),
+  ]),
+);
+
+// What a single page defines for itself, and what a formula glosses: listed
+// after the index so a reader who looks a letter up always finds it, and sees
+// at a glance which meanings are course-wide and which are page-bound.
+const lessonHref = (lessonId: string): { href: string; title: string } | undefined => {
+  const lesson = lessonById.get(lessonId);
+  if (!lesson) return undefined;
+  return {
+    href: `${import.meta.env.BASE_URL.replace(/\/$/, '')}/${lesson.id}/`,
+    title: String(lesson.data.title ?? lesson.id),
+  };
+};
+interface PageMeaning {
+  readonly latex: string;
+  readonly label: string;
+  readonly units?: string;
+  readonly where: 'page' | 'formula';
+  readonly href: string;
+  readonly title: string;
+}
+const pageMeanings: PageMeaning[] = [
+  ...manifest.notation.definitions.flatMap((definition) => {
+    if (definition.kind !== 'local') return [];
+    const at = lessonHref(definition.lessonId);
+    if (!at) return [];
+    return [
+      {
+        latex: definition.notation,
+        label: definition.label,
+        ...(definition.units === undefined ? {} : { units: definition.units }),
+        where: 'page' as const,
+        ...at,
+      },
+    ];
+  }),
+  ...notationEntries.flatMap((entry) =>
+    (glossesByKey.get(entry.data.key) ?? []).map((gloss) => ({
+      latex: gloss.notation,
+      label: gloss.label,
+      ...(gloss.units === undefined ? {} : { units: gloss.units }),
+      where: 'formula' as const,
+      href: `#notation-${entry.data.key}`,
+      title: labelOf(entry.data),
+    })),
+  ),
+].sort((a, b) => a.latex.localeCompare(b.latex) || a.label.localeCompare(b.label) || a.title.localeCompare(b.title));
+
 const formulaScopeByKey = new Map<string, GlyphScopeEntry[]>(
   notationEntries.map((entry) => [
     entry.data.key,
@@ -87,6 +156,21 @@ const formulaScopeByKey = new Map<string, GlyphScopeEntry[]>(
   ]),
 );
 
+// Astro's content layer logs a body that fails to render (`[ERROR]
+// [glob-loader]`) and keeps the entry without it, so the glossary would ship
+// the entry with no text and the build would end green. `validate:content`
+// reports the usual causes first; this stops the build on any of them.
+const unrendered = notationEntries.filter(
+  (entry) => entry.body?.trim() && entry.rendered === undefined,
+);
+if (unrendered.length > 0) {
+  throw new Error(
+    `Notation entries whose body did not render: ${unrendered
+      .map((entry) => entry.filePath ?? entry.id)
+      .join(', ')}. The [glob-loader] error above each says why; run validate:content for the file's own line.`,
+  );
+}
+
 const renderedEntries = await Promise.all(
   notationEntries
     .sort(
@@ -151,6 +235,31 @@ const panelDefinitions: NotationLayerDefinition[] = notationEntries.map(
   </ul>
 </nav>
 
+{
+  pageMeanings.length > 0 && (
+    <section class="glossary-page-meanings" aria-labelledby="glossary-page-meanings-heading">
+      <h2 id="glossary-page-meanings-heading">On one page only</h2>
+      <p class="glossary-intro">
+        Symbols a single chapter defines for itself, or a formula names for its own use. The
+        letter may mean something else elsewhere; the page is where its card is.
+      </p>
+      <ul>
+        {pageMeanings.map((meaning) => (
+          <li>
+            <NotationMath class="glossary-symbol" latex={meaning.latex} />
+            <span class="glossary-page-meaning-text">
+              {' '}— {meaning.label}
+              {meaning.units && <span class="glossary-page-meaning-units"> ({meaning.units})</span>},{' '}
+              {meaning.where === 'page' ? 'on' : 'in the formula of'}{' '}
+              <a href={meaning.href}>{meaning.title}</a>
+            </span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
 <div class="notation-glossary">
   {
     renderedEntries.map(({ entry, Content }) => {
@@ -241,6 +350,7 @@ const panelDefinitions: NotationLayerDefinition[] = notationEntries.map(
                 formula={formulaOf(entry.data) ?? ''}
                 scope={formulaScopeByKey.get(entry.data.key) ?? []}
                 glosses={glossesByKey.get(entry.data.key)}
+                cards={formulaCardsByKey.get(entry.data.key)}
                 entryLabel={labelOf(entry.data)}
                 number={equationNumberByKey.get(entry.data.key)}
                 numberHref={`#notation-${entry.data.key}`}
@@ -323,6 +433,27 @@ const panelDefinitions: NotationLayerDefinition[] = notationEntries.map(
     padding-inline-start: 1.25rem;
   }
 
+  .glossary-page-meanings {
+    margin-block: 1.5rem 2rem;
+  }
+
+  .glossary-page-meanings h2 {
+    font-size: var(--sl-text-h4);
+    margin-block-end: 0.25rem;
+  }
+
+  .glossary-page-meanings ul {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+    gap: 0.3rem 1.5rem;
+    padding-inline-start: 1.25rem;
+    font-size: var(--sl-text-sm);
+  }
+
+  .glossary-page-meaning-units {
+    color: var(--sl-color-gray-3);
+  }
+
   .notation-glossary {
     display: grid;
     gap: 1.5rem;

package/src/components/notation/NotationLayer.astro

@@ -1141,21 +1141,29 @@ for (const gloss of glossItems) {
     cursor: help;
   }
 
-  /* The highlight blends with what is behind it instead of covering it.
-     KaTeX lays a formula out as boxes that paint in source order, so an
-     opaque background (and its ring) on one symbol is painted over the glyph
-     to its left — hovering the y of `dy` hid part of the d. `multiply` (light
-     theme) and `screen` (dark) tint the page and leave ink of either theme as
-     it was. */
   :global(.katex-html [data-notation-key]:hover),
   :global([data-notation-key].is-notation-active) {
     background: var(--sl-color-accent-low);
     box-shadow: 0 0 0 0.12em var(--sl-color-accent-low);
+  }
+
+  /* In math the highlight blends with what is behind it instead of covering
+     it. KaTeX lays a formula out as boxes that paint in source order, so an
+     opaque background (and its ring) on one symbol is painted over the glyph
+     to its left — hovering the y of `dy` hid part of the d. `multiply` (light
+     theme) and `screen` (dark) tint the page and leave ink of either theme as
+     it was. Only math: a prose link (`a.notation-term`) is one box with its
+     own text in it, and blending its tint with whatever sits behind it (a
+     glossary row's panel) changes the ground its text is read on — in the
+     light theme the engine's own link colour fell from 4.75:1 on the opaque
+     tint to 4.4:1, under AA. */
+  :global(.katex-html [data-notation-key]:hover),
+  :global(.katex-html [data-notation-key].is-notation-active) {
     mix-blend-mode: screen;
   }
 
   :global(:root[data-theme='light'] .katex-html [data-notation-key]:hover),
-  :global(:root[data-theme='light'] [data-notation-key].is-notation-active) {
+  :global(:root[data-theme='light'] .katex-html [data-notation-key].is-notation-active) {
     mix-blend-mode: multiply;
   }
 

package/src/components/starlight/AboutPanel.astro

@@ -13,21 +13,49 @@
  * `aria-expanded` for free; the inline script only adds Escape-to-close and
  * outside-click-to-close.
  *
+ * On a chapter or a part's page it adds the page's own version (rule C5,
+ * `lessons[].since` / `parts[].overview.since`): "unchanged since version
+ * 0.2.0", or "with changes after version 0.4.0, not yet released" — the line
+ * the page's PDF and Markdown print under their title.
+ *
  * The panel also *publishes* the identity it displays: the `data-knowledge-*`
- * and `data-engine-version` attributes carry the same values as the rendered
- * text. A build check that wants to confirm the shipped page really carries the
+ * and `data-engine-version` attributes (and `data-page-since` on the page's
+ * line, `unreleased` for a change not yet released) carry the same values as
+ * the rendered text. A build check that wants to confirm the shipped page really carries the
  * configured version would otherwise have to match the panel's prose and its
  * `version · date` join, which pins a course's test to one version string and
  * makes the check fail on every bump; a bare version substring is not even
  * scoped to the panel, so the engine's own version elsewhere on the page can
  * satisfy it. These attributes are exact, scoped, and stable across a bump.
  */
+import { docsSlugsForRoute } from '../../compiler/lesson-derivation';
 import { loadManifest } from '../../compiler/manifest';
+import { versionPhrase } from '../../compiler/page-versions';
 
-const { about } = await loadManifest();
+const manifest = await loadManifest();
+const { about } = manifest;
 const { engine, material, knowledge, authors, disclaimer, changelogHref } =
   about;
 
+// The page's own version (rule C5): a chapter's or a part page's, so a reader
+// can tell a downloaded PDF's "unchanged since version 0.2.0" against the
+// live page. Other pages, and a course with the rule off, show no such line.
+const routeSlugs = docsSlugsForRoute(Astro.locals.starlightRoute.entry.id);
+const lesson = manifest.lessons.find((entry) => routeSlugs.includes(entry.slug));
+const overview = lesson
+  ? undefined
+  : manifest.parts.find((entry) => routeSlugs.includes(`${entry.dir}/index`))
+      ?.overview;
+const pageSince = lesson ? lesson.since : overview ? overview.since : undefined;
+const pageLine =
+  manifest.pageVersions.enabled && pageSince !== undefined
+    ? versionPhrase(pageSince, knowledge.version)
+    : undefined;
+
+// What this course keeps in the reader's browser, and their say over it
+// (`session/reading-memory.ts`): the reading-memory answer, and forgetting.
+const readingMemory = manifest.readingMemory ?? 'ask';
+
 /** `mailto:` an email, pass through an http(s) URL, plain text otherwise. */
 function contactHref(contact: string): string | undefined {
   if (/^https?:\/\//i.test(contact)) return contact;
@@ -64,6 +92,14 @@ const knowledgeLine = knowledge.date
         <dt>Knowledge version</dt>
         <dd data-knowledge-line>{knowledgeLine}</dd>
       </div>
+      {
+        pageLine && (
+          <div>
+            <dt>This page</dt>
+            <dd data-page-since={pageSince ?? 'unreleased'}>{pageLine}</dd>
+          </div>
+        )
+      }
       <div>
         <dt>Engine</dt>
         <dd>
@@ -123,6 +159,31 @@ const knowledgeLine = knowledge.date
         </p>
       )
     }
+
+    <div class="about-browser" data-about-browser>
+      <p class="about-browser__title">In this browser</p>
+      <p>No cookies. Nothing this course keeps leaves your browser.</p>
+      {
+        readingMemory === 'ask' ? (
+          <label class="about-browser__switch">
+            <input type="checkbox" data-reading-memory-toggle />
+            <span>
+              Remember my reading: the chapters I open and the cards I keep open
+            </span>
+          </label>
+        ) : (
+          <p>This course keeps nothing of your reading beyond the tab.</p>
+        )
+      }
+      <p class="about-browser__hint">
+        Settings you choose, such as the theme and the text size, are kept
+        either way.
+      </p>
+      <button type="button" class="about-browser__forget" data-forget-course>
+        Forget what this course stored
+      </button>
+      <p class="about-browser__status" role="status" data-forget-status></p>
+    </div>
   </div>
 </details>
 
@@ -190,6 +251,22 @@ const knowledgeLine = knowledge.date
       line-height: 1.5;
     }
 
+    /* Below 50rem the visible copy is the one in the phone menu. There the
+       toggle starts its row, at the start of the screen, and the panel hung
+       from the toggle's end ran off the screen's start edge and past the
+       menu's end. So it is a sheet fixed to the window instead, centred
+       under the header; the toggle's place in the menu no longer matters. */
+    @media not all and (min-width: 50rem) {
+      .about-body {
+        position: fixed;
+        inset-inline: 0.75rem;
+        top: calc(var(--sl-nav-height) + 0.5rem);
+        width: auto;
+        max-width: 21rem;
+        margin-inline: auto;
+      }
+    }
+
     .about-name {
       margin: 0;
       font-size: var(--sl-text-sm);
@@ -240,9 +317,115 @@ const knowledgeLine = knowledge.date
     .about-body a {
       color: var(--sl-color-text-accent);
     }
+
+    .about-browser {
+      margin: 0.85rem 0 0;
+      padding-top: 0.75rem;
+      border-top: 1px solid var(--sl-color-gray-6);
+      display: grid;
+      gap: 0.4rem;
+    }
+
+    .about-browser p {
+      margin: 0;
+    }
+
+    .about-browser__title {
+      color: var(--sl-color-gray-3);
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+      font-size: 0.65rem;
+    }
+
+    .about-browser__switch {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.45rem;
+      cursor: pointer;
+    }
+
+    .about-browser__switch input {
+      margin: 0.15rem 0 0;
+      accent-color: var(--sl-color-accent);
+    }
+
+    .about-browser__hint {
+      color: var(--sl-color-gray-2);
+    }
+
+    .about-browser__forget {
+      justify-self: start;
+      border: 1px solid var(--sl-color-gray-5);
+      border-radius: 0.3rem;
+      padding: 0.2rem 0.55rem;
+      color: var(--sl-color-text);
+      background: none;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    .about-browser__forget:hover,
+    .about-browser__forget:focus-visible {
+      border-color: var(--sl-color-accent);
+      background: var(--sl-color-accent-low);
+    }
+
+    .about-browser__status:empty {
+      display: none;
+    }
   }
 </style>
 
+<script>
+  /**
+   * The reader's say over what the course keeps in their browser: the
+   * reading-memory answer, as a switch every copy of the panel shows the
+   * same, and "Forget what this course stored", after which the course asks
+   * again as on a first visit.
+   */
+  import {
+    answerReadingMemory,
+    forgetCourse,
+    readingAnswer,
+    READING_MEMORY_EVENT,
+  } from '../../session/reading-memory';
+
+  (() => {
+    const base =
+      document.querySelector<HTMLElement>('[data-explico-reading-memory]')
+        ?.dataset.explicoBase ?? '/';
+    const toggles = [
+      ...document.querySelectorAll<HTMLInputElement>(
+        '[data-reading-memory-toggle]',
+      ),
+    ];
+    const sync = () => {
+      const yes = readingAnswer(base) === 'yes';
+      for (const toggle of toggles) toggle.checked = yes;
+    };
+    for (const toggle of toggles) {
+      toggle.addEventListener('change', () => {
+        answerReadingMemory(base, toggle.checked);
+      });
+    }
+    for (const button of document.querySelectorAll<HTMLButtonElement>(
+      '[data-forget-course]',
+    )) {
+      button.addEventListener('click', () => {
+        forgetCourse(base);
+        for (const status of document.querySelectorAll<HTMLElement>(
+          '[data-forget-status]',
+        )) {
+          status.textContent =
+            'Forgotten: this course keeps nothing of yours in this browser now.';
+        }
+      });
+    }
+    window.addEventListener(READING_MEMORY_EVENT, sync);
+    sync();
+  })();
+</script>
+
 <script>
   (() => {
     const panels = Array.from(

package/src/components/starlight/CollapsibleSections.astro

@@ -62,9 +62,11 @@
  * outright, a rule no CSS can override — confirmed the hard way while
  * building the print handling below), so `peeking` still has to force
  * `details.open = true` to render anything; only `data-state` distinguishes
- * a real expand from a peek. `wirePersistedDetails`'s own `toggle`-event
- * listener is only fed a synthetic event on a genuine `open`/`closed`
- * commit — never for a peek — so hovering never persists anything.
+ * a real expand from a peek. A peek never persists anything: it carries
+ * `data-explico-temporary-open` from its first `open = true` until the
+ * `toggle` its closing fires, and `wirePersistedDetails`'s `toggle` listener
+ * skips an element that has it. Only a genuine commit saves, through
+ * `savePersistedOpenState`.
  *
  * Persistence goes through `../disclosure/persisted-disclosure` (keyed by
  * heading `id` + page path, same convention as `Figure.astro`'s
@@ -369,6 +371,17 @@
         });
       };
 
+      // A peek is no choice: it opens the real `<details>` to render, and that
+      // fires a native `toggle`, which `wirePersistedDetails` would save as
+      // "open". `persisted-disclosure.ts` skips a `toggle` while this marker
+      // is on the element, so the marker is on from the peek's first
+      // `open = true` until the `toggle` its closing fires has passed. Without
+      // it a reader who collapsed a section and reloaded with the pointer
+      // still over its title lost the choice for good: the browser sends the
+      // pointer's `pointerenter` after the reload, the peek opened, and
+      // "open" was stored over "closed".
+      const TEMPORARY_OPEN = 'data-explico-temporary-open';
+
       // Promote an in-progress peek to a real, persisted expand — grown
       // from the peek's *current* rendered height, not from zero. The
       // `position: absolute` → `static` switch happens the instant before
@@ -378,6 +391,7 @@
       // animation completes.
       const commitFromPeek = () => {
         const peekPx = body.getBoundingClientRect().height;
+        details.removeAttribute(TEMPORARY_OPEN); // now a choice
         body.style.transition = 'none';
         body.style.maxHeight = `${peekPx}px`;
         void body.offsetHeight; // reflow with the peek height frozen…
@@ -393,6 +407,7 @@
 
       const enterPeek = () => {
         if (details.dataset.state !== 'closed') return;
+        details.setAttribute(TEMPORARY_OPEN, '');
         details.open = true; // render — see the module comment
         details.dataset.state = 'peeking' satisfies State;
         growTo(body, Math.min(body.scrollHeight, peekMaxPx(body)), () => {});
@@ -402,6 +417,12 @@
         if (details.dataset.state !== 'peeking') return;
         growTo(body, 0, () => {
           details.dataset.state = 'closed' satisfies State;
+          // `toggle` is queued, not synchronous: the marker goes when it fires.
+          details.addEventListener(
+            'toggle',
+            () => details.removeAttribute(TEMPORARY_OPEN),
+            { once: true },
+          );
           details.open = false;
         });
       };

package/src/components/starlight/DiagramEnhancer.astro

@@ -216,7 +216,11 @@
         if (active?.figure === figure) collapseExpansion();
         else expand(figure, button, scroll, evaluate);
       });
-      new ResizeObserver(evaluate).observe(scroll);
+      const resizes = new ResizeObserver(evaluate);
+      resizes.observe(scroll);
+      // The text-size menu resizes the drawing without resizing its scroller.
+      const frame = scroll.querySelector('.diagram-frame');
+      if (frame) resizes.observe(frame);
       updateExpandButton(figure, button, false);
       evaluate();
     }

package/src/components/starlight/HeadingAnchorEnhancer.astro

@@ -57,7 +57,7 @@
 <script>
   import { HEADINGS, sectionParts } from './section-parts';
   import { animatedScrollIntoView } from '../scroll-animation';
-  import { floatOf } from '../float-name';
+  import { floatOf } from '../../reference/float-name';
   import { readableText } from '../readable-text';
 
   (() => {