explico 0.13.0 → 0.14.0

package/src/components/starlight/LayoutSidebar.astro

@@ -1,6 +1,8 @@
 ---
 import DefaultSidebar from '@astrojs/starlight/components/Sidebar.astro';
+import { SIDEBAR_EDITIONS_DEFAULTS, SIDEBAR_MARKS_DEFAULTS } from '../../compiler/course-config';
 import { loadManifest } from '../../compiler/manifest';
+import { pageMarkId, pageMarksKey, type PageMarksPayload } from './page-marks';
 
 /**
  * The header control that opens a part's own page. Starlight's sidebar group
@@ -19,6 +21,57 @@ const partLinks = manifest.parts
 // `<` keeps a label that happens to contain `</script>` from ending the
 // element early. It is still the same JSON to `JSON.parse`.
 const partLinkPayload = JSON.stringify(partLinks).replace(/</g, '\\u003c');
+
+/**
+ * Every chapter and part page the sidebar can mark for a reader
+ * (`page-marks.ts`): its link's path and the identity of its content now,
+ * from the record rule C5 keeps. Pages outside it (the landing page, the
+ * glossary) are never marked.
+ */
+const marks = manifest.sidebarMarks ?? SIDEBAR_MARKS_DEFAULTS;
+const pageMarks: PageMarksPayload | undefined =
+  (marks.unopened || marks.changed) &&
+  (manifest.readingMemory ?? 'ask') === 'ask' &&
+  manifest.pageVersions
+    ? {
+        key: pageMarksKey(import.meta.env.BASE_URL),
+        base: import.meta.env.BASE_URL,
+        unopened: marks.unopened,
+        changed: marks.changed,
+        pages: Object.entries(manifest.pageVersions.record.pages).map(
+          ([slug, entry]) => ({
+            href: `${base}/${slug.replace(/\/index$/u, '')}/`,
+            slug,
+            id: pageMarkId(entry.pending ?? entry.source),
+          }),
+        ),
+        // Every deck's frames, by number, for the legend's two actions (D9).
+        decks: (manifest.decks ?? []).map((deck) => ({
+          slug: deck.slug,
+          frames: deck.frames.map((frame) => frame.id),
+        })),
+      }
+    : undefined;
+const pageMarksPayload =
+  pageMarks && pageMarks.pages.length > 0
+    ? JSON.stringify(pageMarks).replace(/</g, '\\u003c')
+    : undefined;
+
+/**
+ * The course's default for a lesson's editions in the sidebar
+ * (`sidebar-editions.ts`), for a course with a deck in it: without one,
+ * every lesson is a chapter and there is nothing to choose.
+ */
+const editions = manifest.sidebarEditions ?? SIDEBAR_EDITIONS_DEFAULTS;
+const hasDeck = manifest.sidebar.some((group) =>
+  group.items.some(
+    (item) => typeof item === 'object' && 'slug' in item && item.attrs?.['data-edition'] === 'slides',
+  ),
+);
+// The site's base, for the address of a chapter's section of its part's deck.
+const editionsPayload = hasDeck
+  ? JSON.stringify({ lead: editions.lead, other: editions.other, base: import.meta.env.BASE_URL }).replace(/</g, '\\u003c')
+  : undefined;
 ---
 
 <div class="layout-navigation-panel" data-layout-panel="navigation">
@@ -63,6 +116,26 @@ const partLinkPayload = JSON.stringify(partLinks).replace(/</g, '\\u003c');
         />
       )
     }
+    {
+      pageMarksPayload && (
+        <script
+          is:inline
+          type="application/json"
+          data-explico-page-marks
+          set:html={pageMarksPayload}
+        />
+      )
+    }
+    {
+      editionsPayload && (
+        <script
+          is:inline
+          type="application/json"
+          data-explico-sidebar-editions
+          set:html={editionsPayload}
+        />
+      )
+    }
     <script>
       /**
        * Give each part header a control that opens the part's own page. The
@@ -118,37 +191,745 @@ const partLinkPayload = JSON.stringify(partLinks).replace(/</g, '\\u003c');
     </script>
     <script>
       /**
-       * Mark every chapter the reader has already passed, so the rail beside
-       * the chapter list can show how far into the course this page is.
+       * A lesson with a chapter and a deck is one row (`sidebar-editions.ts`):
+       * the row opens the lead edition under the lesson's title, and the
+       * other edition is an icon at the row's end, a second tile joined to
+       * the first in a compact part, or is not listed. The compiler lists
+       * both editions, each link naming its edition, lesson and title
+       * (`data-edition`, `data-lesson`, `data-title`), so without this
+       * script the sidebar is what it wrote: the chapter, then its "Slides"
+       * row.
+       *
+       * Two controls in the panel's foot set the state: "Lessons open as"
+       * (Chapter or Slides) and "List the other edition too", over the
+       * course's default (`sidebarEditions`). The reader's choice is a
+       * setting, kept whatever they answered about reading memory. A change
+       * rebuilds the rows in place, from the lists as the compiler wrote
+       * them, and tells the progress rail and the marks, which run after
+       * this script and read the rows it leaves.
+       *
+       * A chapter its part's deck covers, with no deck of its own, carries
+       * its section's address (`data-deck-href`): that section is the
+       * chapter's other edition, a link this script adds beside it. While
+       * the part's deck is open, the section of the chapter on screen is lit
+       * (`aria-current="location"`), as the deck's page tells it
+       * (`DECK_FRAME_EVENT`).
+       *
+       * A part's Overview and its deck (`data-part-edition`) are the part's
+       * one row the same way, Overview standing where a chapter stands.
+       * Both keep their own glyph in every place.
+       */
+      import { createBrowserPreferenceStore } from '../../session/PreferenceStore';
+      import {
+        DECK_CHAPTER_ATTRIBUTE,
+        DECK_FRAME_EVENT,
+        DECK_SECTION_ATTRIBUTE,
+        EDITION_DETAIL_CLASS,
+        EDITION_OTHER_CLASS,
+        GLYPH_CLASS,
+        PART_EDITION_ATTRIBUTE,
+        PART_ROW_CLASSES,
+        ROW_CLASSES,
+        SIDEBAR_EDITIONS_EVENT,
+        SIDEBAR_EDITIONS_KEY,
+        decodeEditionsChoice,
+        deckSectionHref,
+        editionLabel,
+        encodeEditionsChoice,
+        lessonRow,
+        partDeckDetail,
+        partEditionLabel,
+        partRow,
+        resolveEditions,
+        sectionDetail,
+        type Edition,
+        type EditionsChoice,
+        type EditionsState,
+        type PartEdition,
+      } from './sidebar-editions';
+
+      (() => {
+        const root = document.querySelector<HTMLElement>(
+          '#starlight__navigation-content',
+        );
+        const payload = root?.querySelector('[data-explico-sidebar-editions]');
+        if (!root || !payload?.textContent) return;
+        const { lead: courseLead, other: courseOther } = decodeEditionsChoice(
+          payload.textContent,
+        );
+        if (!courseLead || !courseOther) return;
+        const course: EditionsState = { lead: courseLead, other: courseOther };
+        let base = '/';
+        try {
+          const parsed: unknown = JSON.parse(payload.textContent);
+          const given = (parsed as { base?: unknown } | null)?.base;
+          if (typeof given === 'string') base = given;
+        } catch {}
+
+        interface Link {
+          readonly a: HTMLAnchorElement;
+          readonly li: HTMLLIElement;
+          readonly edition: Edition;
+        }
+        interface Lesson {
+          readonly title: string;
+          readonly links: Link[];
+        }
+        interface PartLink {
+          readonly a: HTMLAnchorElement;
+          readonly li: HTMLLIElement;
+          readonly edition: PartEdition;
+        }
+        interface Part {
+          /** The part's directory, `data-part`. */
+          readonly dir: string;
+          /** The part's label, from its deck's `data-title`. */
+          title: string;
+          /** Overview's own label, as the compiler wrote it. */
+          overviewLabel: string;
+          readonly links: PartLink[];
+        }
+        type Entry = HTMLLIElement | Lesson | Part;
+        // Not `'part' in entry`: every element has a `part` of its own.
+        const isPart = (entry: Entry): entry is Part =>
+          !(entry instanceof HTMLLIElement) && 'overviewLabel' in entry;
+        const labelOf = (a: HTMLAnchorElement) =>
+          a.querySelector<HTMLElement>(':scope > span');
+        /** A link's name, and its second line when it has one (`aria-description`). */
+        const setLabel = (a: HTMLAnchorElement, text: string) => {
+          const span = labelOf(a);
+          if (!span) return;
+          span.textContent = text;
+          const detail = a.getAttribute('aria-description');
+          if (!detail) return;
+          const line = document.createElement('small');
+          line.className = EDITION_DETAIL_CLASS;
+          line.setAttribute('aria-hidden', 'true');
+          line.textContent = detail;
+          span.append(line);
+        };
+
+        // Every chapter's section link, lit while its section is on screen.
+        const sections: HTMLAnchorElement[] = [];
+
+        // Every list as the compiler wrote it, a lesson where its first
+        // edition stood and a part where its Overview stood, so each
+        // rebuild starts from the same rows.
+        const lists = new Map<HTMLUListElement, Entry[]>();
+        for (const list of root.querySelectorAll<HTMLUListElement>('ul')) {
+          let entries: Entry[] = [];
+          const lessons = new Map<string, Lesson>();
+          const parts = new Map<string, Part>();
+          for (const li of list.querySelectorAll<HTMLLIElement>(':scope > li')) {
+            const own = li.querySelector<HTMLAnchorElement>(`:scope > a[${PART_EDITION_ATTRIBUTE}]`);
+            const partEdition = own?.getAttribute(PART_EDITION_ATTRIBUTE);
+            if (own && (partEdition === 'overview' || partEdition === 'slides')) {
+              const dir = own.dataset.part ?? '';
+              let part = parts.get(dir);
+              if (!part) {
+                part = { dir, title: '', overviewLabel: 'Overview', links: [] };
+                parts.set(dir, part);
+                entries.push(part);
+              }
+              part.links.push({ a: own, li, edition: partEdition });
+              if (partEdition === 'overview') {
+                part.overviewLabel = labelOf(own)?.textContent?.trim() || part.overviewLabel;
+              } else {
+                part.title = own.dataset.title ?? part.title;
+                const frames = Number(own.dataset.frames);
+                if (Number.isInteger(frames) && frames > 0) {
+                  own.setAttribute('aria-description', partDeckDetail(own.dataset.chapters ?? '', frames));
+                }
+              }
+              continue;
+            }
+            const a = li.querySelector<HTMLAnchorElement>(':scope > a[data-lesson]');
+            const edition = a?.dataset.edition;
+            if (!a || (edition !== 'chapter' && edition !== 'slides')) {
+              entries.push(li);
+              continue;
+            }
+            const slug = a.dataset.lesson ?? '';
+            const known = lessons.get(slug);
+            if (known) {
+              known.links.push({ a, li, edition });
+              continue;
+            }
+            const lesson: Lesson = {
+              title: a.dataset.title ?? labelOf(a)?.textContent?.trim() ?? '',
+              links: [{ a, li, edition }],
+            };
+            lessons.set(slug, lesson);
+            entries.push(lesson);
+          }
+          // A chapter with no deck of its own, whose section in its part's
+          // deck is its other edition: a link like the chapter's, to it.
+          for (const lesson of lessons.values()) {
+            const [only] = lesson.links;
+            const href = only?.a.dataset.deckHref;
+            if (!only || lesson.links.length !== 1 || only.edition !== 'chapter' || !href) continue;
+            const section = only.a.cloneNode(false) as HTMLAnchorElement;
+            section.href = deckSectionHref(base, href);
+            section.removeAttribute('aria-current');
+            section.removeAttribute('data-deck-href');
+            section.setAttribute(DECK_SECTION_ATTRIBUTE, '');
+            section.dataset.edition = 'slides';
+            const range = only.a.dataset.deckRange;
+            if (range) section.setAttribute('aria-description', sectionDetail(range));
+            section.append(document.createElement('span'));
+            lesson.links.push({ a: section, li: only.li, edition: 'slides' });
+            sections.push(section);
+          }
+          // A part with no deck keeps its Overview's item as the compiler wrote it.
+          entries = entries.map((entry) =>
+            isPart(entry) && !entry.links.some((link) => link.edition === 'slides')
+              ? entry.links[0]!.li
+              : entry,
+          );
+          if (lessons.size > 0 || entries.some(isPart)) lists.set(list, entries);
+        }
+        if (lists.size === 0) return;
+
+        // The other edition's own mark, on its icon's corner: its `::before`
+        // and `::after` draw its glyph.
+        const badge = () => {
+          const mark = document.createElement('i');
+          mark.className = 'layout-edition-mark';
+          mark.setAttribute('aria-hidden', 'true');
+          return mark;
+        };
+
+        /** A part's one row, or none: its deck's own row, unlisted. */
+        const partItems = (entry: Part, state: EditionsState): HTMLLIElement[] => {
+          const open = entry.links.find(
+            (link) => link.a.getAttribute('aria-current') === 'page',
+          )?.edition;
+          const row = partRow(
+            entry.links.some((link) => link.edition === 'overview'),
+            state,
+            open,
+          );
+          for (const { a } of entry.links) {
+            a.classList.remove(...PART_ROW_CLASSES);
+            a.querySelector(':scope > .layout-edition-mark')?.remove();
+          }
+          if (!row) return [];
+          const lead =
+            entry.links.find((link) => link.edition === row.lead) ?? entry.links[0]!;
+          const other = entry.links.find((link) => link.edition === row.other);
+          setLabel(lead.a, partEditionLabel(lead.edition, entry.title, 'lead', entry.overviewLabel));
+          lead.li.replaceChildren(lead.a);
+          if (other) {
+            other.a.classList.add(EDITION_OTHER_CLASS);
+            setLabel(other.a, partEditionLabel(other.edition, entry.title, 'other', entry.overviewLabel));
+            other.a.append(badge());
+            lead.li.append(other.a);
+          }
+          lead.li.dataset.editions = other ? 'pair' : 'single';
+          return [lead.li];
+        };
+
+        const arrange = (state: EditionsState) => {
+          for (const [list, entries] of lists) {
+            list.replaceChildren(
+              ...entries.flatMap((entry) => {
+                if (entry instanceof HTMLLIElement) return [entry];
+                if (isPart(entry)) return partItems(entry, state);
+                const open = entry.links.find(
+                  (link) => link.a.getAttribute('aria-current') === 'page',
+                )?.edition;
+                const row = lessonRow(
+                  entry.links.map((link) => link.edition),
+                  state,
+                  open,
+                );
+                const lead =
+                  entry.links.find((link) => link.edition === row.lead) ??
+                  entry.links[0]!;
+                const other = entry.links.find((link) => link.edition === row.other);
+                for (const { a } of entry.links) {
+                  a.classList.remove(...ROW_CLASSES);
+                  a.querySelector(':scope > .layout-edition-mark')?.remove();
+                }
+                setLabel(lead.a, editionLabel(lead.edition, entry.title, 'lead'));
+                if (row.glyph) lead.a.classList.add(GLYPH_CLASS[row.glyph]);
+                lead.li.replaceChildren(lead.a);
+                if (other) {
+                  other.a.classList.add(EDITION_OTHER_CLASS);
+                  setLabel(other.a, editionLabel(other.edition, entry.title, 'other'));
+                  other.a.append(badge());
+                  lead.li.append(other.a);
+                }
+                // Lets the CSS join a pair's tiles without `:has()`.
+                lead.li.dataset.editions = other ? 'pair' : 'single';
+                return [lead.li];
+              }),
+            );
+          }
+        };
+
+        /** The section of the chapter on screen in the part's deck open here, lit; none elsewhere. */
+        const light = () => {
+          const chapter = document.documentElement.getAttribute(DECK_CHAPTER_ATTRIBUTE) ?? '';
+          for (const section of sections) {
+            if (chapter !== '' && section.dataset.lesson === chapter) {
+              section.setAttribute('aria-current', 'location');
+            } else {
+              section.removeAttribute('aria-current');
+            }
+          }
+        };
+
+        // The controls, first in the panel's foot, above the marks' line.
+        const sidebarList = root.querySelector('sl-sidebar-state-persist');
+        let foot = root.querySelector<HTMLElement>('.explico-sidebar-foot');
+        if (!foot) {
+          foot = document.createElement('div');
+          foot.className = 'explico-sidebar-foot';
+          if (sidebarList) sidebarList.after(foot);
+          else root.append(foot);
+        }
+        const controls = document.createElement('div');
+        controls.className = 'explico-sidebar-editions';
+        const group = document.createElement('fieldset');
+        group.className = 'explico-sidebar-editions__lead';
+        const legend = document.createElement('legend');
+        legend.textContent = 'Lessons open as';
+        const segments = document.createElement('span');
+        segments.className = 'explico-sidebar-editions__segments';
+        group.append(legend, segments);
+        const leads = new Map<Edition, HTMLInputElement>();
+        for (const [edition, text] of [
+          ['chapter', 'Chapter'],
+          ['slides', 'Slides'],
+        ] as const) {
+          const option = document.createElement('label');
+          option.className = 'explico-sidebar-editions__segment';
+          const input = document.createElement('input');
+          input.type = 'radio';
+          input.name = 'explico-sidebar-editions-lead';
+          input.value = edition;
+          input.addEventListener('change', () => {
+            if (input.checked) choose({ lead: edition });
+          });
+          const name = document.createElement('span');
+          name.textContent = text;
+          option.append(input, name);
+          segments.append(option);
+          leads.set(edition, input);
+        }
+        const listed = document.createElement('input');
+        listed.type = 'checkbox';
+        listed.addEventListener('change', () =>
+          choose({ other: listed.checked ? 'listed' : 'hidden' }),
+        );
+        const listedOption = document.createElement('label');
+        listedOption.className = 'explico-sidebar-editions__other';
+        listedOption.append(listed, 'List the other edition too');
+        controls.append(group, listedOption);
+        foot.prepend(controls);
+
+        const store = createBrowserPreferenceStore();
+        const show = (state: EditionsState) => {
+          arrange(state);
+          light();
+          const lead = leads.get(state.lead);
+          if (lead) lead.checked = true;
+          listed.checked = state.other === 'listed';
+          window.dispatchEvent(
+            new CustomEvent<EditionsState>(SIDEBAR_EDITIONS_EVENT, { detail: state }),
+          );
+        };
+        /** The reader's change, kept with the fields they set before: a field never set keeps the course's default. */
+        const choose = (change: EditionsChoice) => {
+          const choice = {
+            ...decodeEditionsChoice(store.get(SIDEBAR_EDITIONS_KEY)),
+            ...change,
+          };
+          store.set(SIDEBAR_EDITIONS_KEY, encodeEditionsChoice(choice));
+          show(resolveEditions(course, choice));
+        };
+        show(resolveEditions(course, decodeEditionsChoice(store.get(SIDEBAR_EDITIONS_KEY))));
+        // Before the rail's listener, which counts to the section lit here.
+        window.addEventListener(DECK_FRAME_EVENT, light);
+      })();
+    </script>
+    <script>
+      /**
+       * Mark every row the reader has already passed, so the rail beside the
+       * chapter list can show how far into the course this page is.
        *
        * The sidebar's document order *is* the reading order — the compiler
        * built it from the merged track order — so "covered" is simply
        * "earlier in this list than the current page". A part whose chapters
        * are all covered is covered itself, which is what makes the rail read
        * as one run rather than as a mark per group.
+       *
+       * A row is a list item with a link of its own. A lesson's row holds its
+       * editions (`sidebar-editions.ts`) and is the open page's row when any
+       * of them is the open page, so a lesson whose deck is open is not
+       * behind the reader. The rows are counted again when the reader
+       * switches the editions. With a part's deck open, the current row is
+       * the one whose section is on screen (`aria-current="location"`),
+       * counted again as the deck moves.
        */
+      import { DECK_FRAME_EVENT, SIDEBAR_EDITIONS_EVENT } from './sidebar-editions';
+
       (() => {
-        const root = document.querySelector('#starlight__navigation-content');
-        const links = [...(root?.querySelectorAll('a') ?? [])].filter(
-          (link) => !link.classList.contains('layout-part-open'),
-        );
-        const current = links.findIndex(
-          (link) => link.getAttribute('aria-current') === 'page',
+        const root = document.querySelector<HTMLElement>(
+          '#starlight__navigation-content',
         );
-        if (current < 1) return;
+        if (!root) return;
 
-        for (const link of links.slice(0, current)) {
-          link.parentElement?.setAttribute('data-covered', '');
-        }
-        for (const group of root?.querySelectorAll('details') ?? []) {
-          const chapters = [...group.querySelectorAll(':scope > ul > li')];
-          if (
-            chapters.length > 0 &&
-            chapters.every((item) => item.hasAttribute('data-covered'))
-          ) {
-            group.setAttribute('data-covered', '');
+        const cover = () => {
+          for (const item of root.querySelectorAll('[data-covered]')) {
+            item.removeAttribute('data-covered');
           }
+          const rows = [...root.querySelectorAll('li')].filter((item) =>
+            item.querySelector(':scope > a'),
+          );
+          const at = (current: string) =>
+            rows.findIndex((item) =>
+              item.querySelector(`:scope > a[aria-current="${current}"]`),
+            );
+          const lit = at('location');
+          const current = lit === -1 ? at('page') : lit;
+          if (current < 1) return;
+
+          for (const row of rows.slice(0, current)) {
+            row.setAttribute('data-covered', '');
+          }
+          for (const group of root.querySelectorAll('details')) {
+            const chapters = [...group.querySelectorAll(':scope > ul > li')];
+            if (
+              chapters.length > 0 &&
+              chapters.every((item) => item.hasAttribute('data-covered'))
+            ) {
+              group.setAttribute('data-covered', '');
+            }
+          }
+        };
+        cover();
+        window.addEventListener(SIDEBAR_EDITIONS_EVENT, cover);
+        window.addEventListener(DECK_FRAME_EVENT, cover);
+      })();
+    </script>
+    <script>
+      /**
+       * Mark, for this reader, every chapter and part page they have not
+       * opened yet (a quiet ring) and every one whose content changed since
+       * they last opened it (an accent dot), then record this page as seen.
+       * What a mark means is in `page-marks.ts`; how it looks, in
+       * `global.css`: at the end of a labelled row, on the corner of a
+       * compact tile, after a closed part's label, and on the collapsed
+       * panel's restore control.
+       *
+       * Each marked link names its mark as its description
+       * (`aria-describedby`), and a line at the end of the panel says what
+       * the marks on screen mean, with "Mark all as seen" and "Mark all as
+       * unseen". The line stays while the record is kept, marks or none, so
+       * the reader can always go back. Both actions cover every deck's
+       * frames too (D9, `../../session/deck-memory.ts`), whose marks a deck's own
+       * page shows. On a page that changed since the reader last opened
+       * it, a line under its title says so.
+       *
+       * A lesson's row (`sidebar-editions.ts`) carries its own link's mark;
+       * the other edition's icon carries its own, on its corner. The marks
+       * follow the rows when the reader switches the editions. A chapter's
+       * section of its part's deck carries none: it is no page, and the
+       * part's deck's row carries the deck page's.
+       *
+       * The pages a reader opened are reading memory
+       * (`session/reading-memory.ts`): recorded, and marked, only after they
+       * said yes to it. Before an answer, after a no, and without storage,
+       * nothing is recorded and nothing is marked. An answer given on this
+       * page takes effect at once.
+       */
+      import { createBrowserPreferenceStore } from '../../session/PreferenceStore';
+      import {
+        deckPositionsKey,
+        READING_MEMORY_EVENT,
+        readingMemoryStore,
+        rememberReading,
+      } from '../../session/reading-memory';
+      import {
+        DECK_MEMORY_EVENT,
+        decodeDeckMemory,
+        encodeDeckMemory,
+        frameMark,
+        withEveryDeckSeen,
+        withEveryDeckUnseen,
+        type DeckMemory,
+      } from '../../session/deck-memory';
+      import {
+        decodeSeen,
+        encodeSeen,
+        markOf,
+        samePath,
+        withAllSeen,
+        withNoneSeen,
+        withVisit,
+        type PageMark,
+        type PageMarksPayload,
+      } from './page-marks';
+      import { DECK_SECTION_ATTRIBUTE, EDITION_OTHER_CLASS, SIDEBAR_EDITIONS_EVENT } from './sidebar-editions';
+
+      (() => {
+        const payloadElement = document.querySelector(
+          '[data-explico-page-marks]',
+        );
+        const root = document.querySelector<HTMLElement>(
+          '#starlight__navigation-content',
+        );
+        if (!payloadElement?.textContent || !root) return;
+        let payload: PageMarksPayload;
+        try {
+          payload = JSON.parse(payloadElement.textContent);
+        } catch {
+          return;
         }
+
+        const store = createBrowserPreferenceStore();
+        const pathOf = (href: string) =>
+          samePath(new URL(href, location.href).pathname);
+        const byPath = new Map(
+          payload.pages.map((page) => [samePath(page.href), page]),
+        );
+        const current = byPath.get(pathOf(location.href));
+        const changedNote = document.querySelector<HTMLElement>(
+          '[data-explico-page-changed]',
+        );
+
+        const TEXT: Record<PageMark, string> = {
+          unopened: 'Not opened yet',
+          changed: 'Changed since you last opened it',
+        };
+        const KINDS: readonly PageMark[] = ['unopened', 'changed'];
+        const panel = root.closest<HTMLElement>('.layout-navigation-panel');
+        // In the panel's foot, right under the chapter list, after the
+        // editions' controls: on a phone, Starlight's own controls follow it
+        // in the same menu, and the legend belongs with the marks.
+        const list = root.querySelector('sl-sidebar-state-persist');
+        const place = (element: HTMLElement) => {
+          let foot = root.querySelector<HTMLElement>('.explico-sidebar-foot');
+          if (!foot) {
+            foot = document.createElement('div');
+            foot.className = 'explico-sidebar-foot';
+            if (list) list.after(foot);
+            else root.append(foot);
+          }
+          foot.append(element);
+        };
+
+        const setMarks = (element: HTMLElement | null, marks: Set<PageMark>) => {
+          if (!element) return;
+          if (marks.size > 0) element.dataset.pageMarks = [...marks].sort().join(' ');
+          else delete element.dataset.pageMarks;
+        };
+
+        // Every deck's frames as the decks' pages number them (`deck-memory.ts`).
+        const decks = (payload.decks ?? []).map((deck) => ({
+          slug: deck.slug,
+          frames: deck.frames.map((id, index) => ({ number: index + 1, id })),
+        }));
+        const deckKey = deckPositionsKey(payload.base);
+        const readDecks = () => decodeDeckMemory(readingMemoryStore(payload.base).get(deckKey));
+
+        /**
+         * What the decks' frames hold for the two actions: a frame the
+         * course would mark, and a frame recorded as seen.
+         */
+        const deckState = () => {
+          const memory = readDecks();
+          const marked = decks.some((deck) =>
+            deck.frames.some((frame) => {
+              const mark = frameMark(frame, memory.get(deck.slug));
+              return mark === 'unseen' ? payload.unopened : mark === 'changed' && payload.changed;
+            }),
+          );
+          const seen = decks.some((deck) => (memory.get(deck.slug)?.seen.size ?? 0) > 0);
+          return { marked, seen };
+        };
+
+        // The two actions, in this order; each covers every deck's frames
+        // too (D9), which the decks' pages mark.
+        const ACTIONS = {
+          seen: {
+            label: 'Mark all as seen',
+            done: decks.length > 0 ? 'Every page and slide is marked as seen.' : 'Every page is marked as seen.',
+            record: () => withAllSeen(payload.pages),
+            decks: (memory: DeckMemory) => withEveryDeckSeen(memory, decks),
+          },
+          unseen: {
+            label: 'Mark all as unseen',
+            done:
+              decks.length > 0
+                ? 'Every page is marked as not opened yet, and every slide as not shown yet.'
+                : 'Every page is marked as not opened yet.',
+            // The open page is recorded again: it is open.
+            record: () => withVisit(withNoneSeen(), current, payload.pages),
+            decks: (memory: DeckMemory) => withEveryDeckUnseen(memory),
+          },
+        } as const;
+        type Action = keyof typeof ACTIONS;
+
+        /** A button out of use keeps its place and its focus, so it is `aria-disabled`, not `disabled`. */
+        const setUsable = (button: HTMLButtonElement | undefined, usable: boolean) => {
+          if (usable) button?.removeAttribute('aria-disabled');
+          else button?.setAttribute('aria-disabled', 'true');
+        };
+
+        const buildLegend = () => {
+          const line = document.createElement('div');
+          line.className = 'explico-page-marks-legend';
+          const row = document.createElement('div');
+          row.className = 'explico-page-marks-legend__row';
+          const items = new Map<PageMark, HTMLElement>();
+          for (const mark of KINDS) {
+            // A marked link's description: every kind on screen has its text here.
+            const item = document.createElement('span');
+            item.id = `explico-page-mark-${mark}`;
+            item.className = 'explico-page-marks-legend__item';
+            item.dataset.pageMark = mark;
+            item.textContent = TEXT[mark];
+            item.hidden = true;
+            items.set(mark, item);
+            row.append(item);
+          }
+          // There from the start, empty, so a screen reader hears what it gains.
+          const status = document.createElement('p');
+          status.className = 'explico-page-marks-legend__status';
+          status.setAttribute('role', 'status');
+          const actions = document.createElement('span');
+          actions.className = 'explico-page-marks-legend__actions';
+          const buttons = new Map<Action, HTMLButtonElement>();
+          for (const action of Object.keys(ACTIONS) as Action[]) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'explico-page-marks-legend__action';
+            button.dataset.pageMarksAction = action;
+            button.textContent = ACTIONS[action].label;
+            button.addEventListener('click', () => {
+              if (button.getAttribute('aria-disabled') === 'true') return;
+              const record = ACTIONS[action].record();
+              store.set(payload.key, encodeSeen(record));
+              if (decks.length > 0) {
+                readingMemoryStore(payload.base).set(deckKey, encodeDeckMemory(ACTIONS[action].decks(readDecks())));
+              }
+              apply(record);
+              // In the line, which stays: focus stays on the button.
+              status.textContent = ACTIONS[action].done;
+              // A deck's page open here marks its frames again.
+              if (decks.length > 0) window.dispatchEvent(new CustomEvent(DECK_MEMORY_EVENT));
+            });
+            buttons.set(action, button);
+            actions.append(button);
+          }
+          row.append(actions);
+          line.append(row, status);
+          place(line);
+          return { line, items, buttons };
+        };
+        let legend: ReturnType<typeof buildLegend> | undefined;
+
+        /** The line for the marks on screen, while `record` is kept; none without it. */
+        const showLegend = (
+          record: ReadonlyMap<string, string> | null,
+          shown: Set<PageMark>,
+        ) => {
+          if (!record) {
+            legend?.line.remove();
+            legend = undefined;
+            return;
+          }
+          legend ??= buildLegend();
+          for (const [mark, item] of legend.items) item.hidden = !shown.has(mark);
+          const frames = decks.length > 0 ? deckState() : { marked: false, seen: false };
+          setUsable(legend.buttons.get('seen'), shown.size > 0 || frames.marked);
+          setUsable(
+            legend.buttons.get('unseen'),
+            [...record.keys()].some((slug) => slug !== current?.slug) || frames.seen,
+          );
+        };
+
+        /** The record the marks on screen show, for a rebuild of the rows. */
+        let applied: ReadonlyMap<string, string> | null = null;
+
+        /** The marks for `record`, or none at all with `null`. */
+        const apply = (record: ReadonlyMap<string, string> | null) => {
+          applied = record;
+          const shown = new Set<PageMark>();
+          for (const link of root.querySelectorAll<HTMLAnchorElement>('li > a[href]')) {
+            // A row's mark is on its item, for its own link; the other
+            // edition's icon holds its own. A link that was that icon
+            // before a switch drops the mark it held.
+            const other = link.classList.contains(EDITION_OTHER_CLASS);
+            const holder = other ? link : link.parentElement!;
+            if (!other) delete link.dataset.pageMark;
+            // A chapter's section of its part's deck is no page of its own.
+            const page = link.hasAttribute(DECK_SECTION_ATTRIBUTE) ? undefined : byPath.get(pathOf(link.href));
+            const mark =
+              record && page && page !== current
+                ? markOf(page, record, payload)
+                : undefined;
+            if (mark) {
+              holder.dataset.pageMark = mark;
+              link.setAttribute('aria-describedby', `explico-page-mark-${mark}`);
+              shown.add(mark);
+            } else if (holder.dataset.pageMark || link.hasAttribute('aria-describedby')) {
+              delete holder.dataset.pageMark;
+              link.removeAttribute('aria-describedby');
+            }
+          }
+          for (const group of root.querySelectorAll<HTMLElement>('details')) {
+            setMarks(
+              group,
+              new Set(
+                [
+                  ...group.querySelectorAll<HTMLElement>(
+                    'li[data-page-mark], a[data-page-mark]',
+                  ),
+                ].map((item) => item.dataset.pageMark as PageMark),
+              ),
+            );
+          }
+          setMarks(panel, shown);
+          showLegend(record, shown);
+        };
+
+        let recorded = false;
+        const run = () => {
+          if (!rememberReading(payload.base)) {
+            apply(null);
+            if (changedNote) changedNote.hidden = true;
+            recorded = false;
+            return;
+          }
+          const before = decodeSeen(store.get(payload.key));
+          const seen = withVisit(before, current, payload.pages);
+          store.set(payload.key, encodeSeen(seen));
+          // Without storage nothing could ever be recorded: mark nothing.
+          if (store.get(payload.key) === null) return apply(null);
+          // The note says what this visit found, once: a yes given on this
+          // page records it and has nothing earlier to compare with.
+          if (changedNote && current && !recorded) {
+            const previous = before.get(current.slug);
+            changedNote.hidden = !(
+              payload.changed &&
+              previous !== undefined &&
+              previous !== current.id
+            );
+          }
+          recorded = true;
+          apply(seen);
+        };
+
+        window.addEventListener(READING_MEMORY_EVENT, run);
+        // The rows were rebuilt: the same record, on the links they hold now.
+        window.addEventListener(SIDEBAR_EDITIONS_EVENT, () => apply(applied));
+        // A deck's page recorded frames or reset its marks: the two actions may change use.
+        window.addEventListener(DECK_MEMORY_EVENT, () => apply(applied));
+        run();
       })();
     </script>
     <script>
@@ -222,7 +1003,13 @@ const partLinkPayload = JSON.stringify(partLinks).replace(/</g, '\\u003c');
        * `position: fixed` (see `global.css`) and the anchor's own viewport
        * coordinates from here. The tooltip stays the link's accessible name in
        * the markup either way — this only moves where it is painted.
+       *
+       * The other edition's icon at the end of a labelled row
+       * (`sidebar-editions.ts`) has no label beside it either: its name
+       * ("Slides: …") is shown the same way.
        */
+      import { EDITION_OTHER_CLASS } from './sidebar-editions';
+
       (() => {
         if (!matchMedia('(min-width: 50rem)').matches) return;
         const panel = document.querySelector<HTMLElement>(
@@ -230,8 +1017,7 @@ const partLinkPayload = JSON.stringify(partLinks).replace(/</g, '\\u003c');
         );
         if (!panel) return;
 
-        const COMPACT_LINK =
-          'details[data-compact] > ul:not(.top-level) > li > a';
+        const COMPACT_LINK = `details[data-compact] > ul:not(.top-level) > li > a, li > a.${EDITION_OTHER_CLASS}`;
         const GAP = 7;
         const EDGE = 8;
         let open: HTMLAnchorElement | null = null;