explico 0.11.1 → 0.13.0

package/src/components/starlight/LessonExportActions.astro

@@ -1,42 +1,107 @@
 ---
+/**
+ * The page's export actions in the header's right cluster: a Download button
+ * that opens a menu of the page's downloads, and a Print button.
+ *
+ * **Download.** The menu is a native popover (Escape and an outside click
+ * close it; it sits in the top layer, above explico's cards). Its rows are
+ * the scopes that contain the page, its columns the formats, and each cell a
+ * plain link to a file the build wrote. The build lists what it wrote, with
+ * sizes, in `downloads/index.json`; the menu reads it the first time it
+ * opens, shows each size and hides a cell whose file is not there. During
+ * `astro dev` only a chapter's HTML builds on request; the others say they
+ * are built when the site is deployed.
+ *
+ * **Print.** The button loads every lab that will be on paper before the
+ * print dialog opens — the browser's own `beforeprint` cannot wait for that —
+ * and Ctrl+P / Cmd+P do the same. The browser's own File → Print still gets
+ * the print-as-shown preparation, without loading labs.
+ *
+ * A downloaded page carries none of this markup (`data-explico-export-chrome`);
+ * the print controller itself (`print-controller.ts`) is installed from the
+ * page's footer too (`PrintController.astro`), so Ctrl+P prepares a
+ * downloaded page the same way.
+ */
+export type DownloadFormat = 'html' | 'pdf' | 'latex' | 'markdown';
+
+export interface DownloadCell {
+  readonly format: DownloadFormat;
+  /** Path below `downloads/`, as `downloads/index.json` lists it. */
+  readonly path: string;
+  /** The name the file is saved under. */
+  readonly filename: string;
+}
+
+export type DownloadScope = 'chapter' | 'part' | 'course';
+
+export interface DownloadRow {
+  readonly scope: DownloadScope;
+  /** "This chapter", "This part", "Whole course". */
+  readonly label: string;
+  /** The chapter's title, the part's label or the course's name. */
+  readonly title: string;
+  readonly cells: readonly DownloadCell[];
+}
+
 interface Props {
-  standaloneDownload?: {
-    readonly href: string;
-    readonly filename: string;
-  };
+  downloads: readonly DownloadRow[];
   print: boolean;
-  canonicalBaseUrl?: string;
   siteBaseUrl: string;
 }
 
-const {
-  standaloneDownload,
-  print,
-  canonicalBaseUrl,
-  siteBaseUrl,
-} = Astro.props;
+const { downloads, print, siteBaseUrl } = Astro.props;
+
+// Starlight renders the header's icon cluster twice (the header and the
+// mobile menu), so each menu needs an id of its own for `popovertarget`.
+const locals = Astro.locals as { explicoDownloadMenus?: number };
+locals.explicoDownloadMenus = (locals.explicoDownloadMenus ?? 0) + 1;
+const menuId = `explico-downloads-${locals.explicoDownloadMenus}`;
+
+const base = siteBaseUrl.replace(/\/$/u, '');
+const development = import.meta.env.DEV;
+/** What a download's accessible name calls each scope. */
+const SCOPE_NAMES: Readonly<Record<DownloadScope, string>> = {
+  chapter: 'this chapter',
+  part: 'this part',
+  course: 'the whole course',
+};
+const FORMATS: readonly { readonly format: DownloadFormat; readonly label: string; readonly name: string }[] = [
+  { format: 'html', label: 'HTML', name: 'as standalone HTML' },
+  { format: 'pdf', label: 'PDF', name: 'as PDF' },
+  { format: 'latex', label: 'LaTeX', name: 'as LaTeX source' },
+  { format: 'markdown', label: 'Markdown', name: 'as Markdown' },
+];
+const columns = FORMATS.filter(({ format }) =>
+  downloads.some((row) => row.cells.some((cell) => cell.format === format)),
+);
+const notes = [
+  columns.some((column) => column.format === 'html') && 'HTML opens offline with working figures.',
+  columns.some((column) => column.format === 'pdf') &&
+    (columns.some((column) => column.format === 'latex')
+      ? 'PDF is typeset for print, and LaTeX is its source.'
+      : 'PDF is typeset for print.'),
+  columns.some((column) => column.format === 'markdown') && 'Markdown is plain text with images.',
+].filter(Boolean);
 ---
 
 <nav
   class="lesson-export-actions not-content"
-  aria-label="Lesson exports"
+  aria-label="Page exports"
   data-explico-export-chrome="lesson-actions"
-  data-explico-print-controller={print ? '' : undefined}
-  data-canonical-base-url={canonicalBaseUrl}
-  data-site-base-url={siteBaseUrl}
 >
   {
-    standaloneDownload && (
-      <a
-        href={standaloneDownload.href}
-        download={standaloneDownload.filename}
-        aria-label="Download this lesson as standalone HTML"
-        title="Download this lesson as standalone HTML"
+    downloads.length > 0 && (
+      <button
+        type="button"
+        class="lesson-export-actions__download"
+        popovertarget={menuId}
+        aria-label="Download this page"
+        title="Download this page"
       >
         <svg viewBox="0 0 24 24" aria-hidden="true">
           <path d="M12 3v12m0 0 4-4m-4 4-4-4M5 19h14" />
         </svg>
-      </a>
+      </button>
     )
   }
   {
@@ -44,8 +109,8 @@ const {
       <button
         type="button"
         data-explico-print-action
-        aria-label="Print or save this lesson as PDF"
-        title="Print or save this lesson as PDF"
+        aria-label="Print or save this page as PDF"
+        title="Print or save this page as PDF"
       >
         <svg viewBox="0 0 24 24" aria-hidden="true">
           <path d="M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z" />
@@ -53,15 +118,87 @@ const {
       </button>
     )
   }
+  {
+    downloads.length > 0 && (
+      <div
+        id={menuId}
+        class="explico-downloads"
+        popover
+        role="dialog"
+        aria-label="Downloads"
+        data-explico-downloads
+        data-index-href={`${base}/downloads/index.json`}
+      >
+        <p class="explico-downloads__title">Download</p>
+        <table class="explico-downloads__grid">
+          <thead>
+            <tr>
+              <th scope="col"><span class="sr-only">Scope</span></th>
+              {columns.map((column) => <th scope="col">{column.label}</th>)}
+            </tr>
+          </thead>
+          <tbody>
+            {downloads.map((row) => (
+              <tr>
+                <th scope="row">
+                  {row.label}
+                  <span class="explico-downloads__scope">{row.title}</span>
+                </th>
+                {columns.map((column) => {
+                  const cell = row.cells.find((entry) => entry.format === column.format);
+                  if (!cell) return <td><span class="explico-downloads__none" aria-hidden="true">—</span></td>;
+                  const name = `Download ${SCOPE_NAMES[row.scope]} ${column.name}`;
+                  // `astro dev` builds a chapter's HTML on request; the rest
+                  // exists only once the site is built.
+                  if (development && !(row.scope === 'chapter' && column.format === 'html')) {
+                    return (
+                      <td>
+                        <span
+                          class="explico-downloads__cell explico-downloads__cell--pending"
+                          title="Built when the site is deployed"
+                        >
+                          <span class="explico-downloads__format">{column.label}</span>
+                          <span class="explico-downloads__size">not in dev</span>
+                        </span>
+                      </td>
+                    );
+                  }
+                  return (
+                    <td>
+                      <a
+                        class="explico-downloads__cell"
+                        href={`${base}/downloads/${cell.path}`}
+                        download={cell.filename}
+                        aria-label={name}
+                        title={name}
+                        data-download-path={cell.path}
+                      >
+                        <span class="explico-downloads__format">{column.label}</span>
+                        <span class="explico-downloads__size" data-download-size>
+                          <span aria-hidden="true">↓</span>
+                        </span>
+                      </a>
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        {notes.length > 0 && <p class="explico-downloads__note">{notes.join(' ')}</p>}
+      </div>
+    )
+  }
 </nav>
 
 <style>
   .lesson-export-actions {
     display: inline-flex;
+    gap: 0.4rem;
   }
 
-  .lesson-export-actions a,
-  .lesson-export-actions button {
+  .lesson-export-actions > a,
+  .lesson-export-actions > button {
     align-items: center;
     background: transparent;
     border: 1px solid var(--sl-color-gray-5);
@@ -87,8 +224,9 @@ const {
     width: 1rem;
   }
 
-  .lesson-export-actions :is(a, button):hover,
-  .lesson-export-actions :is(a, button):focus-visible {
+  .lesson-export-actions > :is(a, button):hover,
+  .lesson-export-actions > :is(a, button):focus-visible,
+  .lesson-export-actions__download[aria-expanded='true'] {
     border-color: var(--sl-color-accent);
     color: var(--sl-color-text-accent);
   }
@@ -97,264 +235,152 @@ const {
     outline: 2px solid var(--sl-color-accent);
     outline-offset: 2px;
   }
-</style>
 
-<script>
-  import {
-    prepareDisclosures,
-    type PreparedDisclosures,
-  } from '../disclosure/print-as-shown';
-
-  type SavedLink = {
-    readonly element: HTMLAnchorElement;
-    readonly href: string | null;
-  };
-
-  type SavedHidden = {
-    readonly element: HTMLElement;
-    readonly hidden: boolean;
-  };
-
-  type StaticExportMode = 'print' | 'markdown';
-
-  type PreparedStaticExport = {
-    readonly mode: StaticExportMode;
-    readonly disclosures: PreparedDisclosures;
-    readonly hidden: readonly SavedHidden[];
-    readonly links: readonly SavedLink[];
-  };
-
-  const root = document.documentElement;
-  let prepared: PreparedStaticExport | null = null;
-  let pendingMarkerCleanup: (() => void) | null = null;
-
-  function controller(): HTMLElement | null {
-    return document.querySelector<HTMLElement>('[data-explico-print-controller]');
+  /* The popover is placed under its button by the script; these undo the
+     user agent's centred placement. */
+  .explico-downloads {
+    background: var(--sl-color-bg-nav, var(--sl-color-bg));
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.6rem;
+    box-shadow: var(--sl-shadow-md);
+    box-sizing: border-box;
+    color: var(--sl-color-text);
+    inset: auto;
+    margin: 0;
+    max-width: calc(100vw - 1rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 0.85rem 0.85rem 0.75rem;
+    position: fixed;
+    width: max-content;
   }
 
-  function canonicalPrintHref(
-    link: HTMLAnchorElement,
-    canonicalBaseUrl: string | undefined,
-    siteBaseUrl: string,
-  ): string | undefined {
-    const rawHref = link.getAttribute('href');
-    if (!rawHref || rawHref.startsWith('#') || link.hasAttribute('download')) {
-      return undefined;
-    }
+  .explico-downloads__title {
+    font-size: var(--sl-text-sm);
+    font-weight: 600;
+    margin: 0 0 0.5rem;
+  }
 
-    let target: URL;
-    try {
-      target = new URL(rawHref, location.href);
-    } catch {
-      return undefined;
-    }
-    if (target.protocol !== 'http:' && target.protocol !== 'https:') return undefined;
-
-    const current = new URL(location.href);
-    if (
-      target.origin === current.origin &&
-      target.pathname === current.pathname &&
-      target.search === current.search
-    ) {
-      return undefined;
-    }
+  .explico-downloads__grid {
+    border-collapse: collapse;
+    font-size: var(--sl-text-xs);
+  }
 
-    return canonicalUrl(target, canonicalBaseUrl, siteBaseUrl);
+  .explico-downloads__grid th,
+  .explico-downloads__grid td {
+    padding: 0.35rem 0.25rem;
+    text-align: left;
+    vertical-align: middle;
   }
 
-  // A same-site URL moved onto the deployed site, so a printed or saved
-  // lesson's links don't point at whatever host the reader printed from.
-  function canonicalUrl(
-    target: URL,
-    canonicalBaseUrl: string | undefined,
-    siteBaseUrl: string,
-  ): string {
-    if (!canonicalBaseUrl || target.origin !== location.origin) return target.href;
-    const normalizedSiteBase = `/${siteBaseUrl.replace(/^\/+|\/+$/gu, '')}/`;
-    const relativePath = target.pathname.startsWith(normalizedSiteBase)
-      ? target.pathname.slice(normalizedSiteBase.length)
-      : target.pathname.replace(/^\/+/, '');
-    return new URL(
-      `${relativePath}${target.search}${target.hash}`,
-      canonicalBaseUrl,
-    ).href;
+  /* Normal case: an uppercased heading would print "LaTeX" as "LATEX". */
+  .explico-downloads__grid thead th {
+    color: var(--sl-color-gray-3);
+    font-size: 0.72rem;
+    font-weight: 600;
   }
 
-  function prepareStaticExport(mode: StaticExportMode): void {
-    if (prepared) return;
-    const printController = controller();
-    if (!printController) return;
-    pendingMarkerCleanup?.();
-
-    root.dataset.explicoStaticExport = mode;
-
-    const canonicalBaseUrl = printController.dataset.canonicalBaseUrl;
-    const siteBaseUrl = printController.dataset.siteBaseUrl ?? '/';
-
-    // Print follows the screen (see `../disclosure/print-as-shown`); a
-    // Markdown export needs every word whatever the reader collapsed.
-    const disclosures = prepareDisclosures(
-      mode === 'print' ? 'as-shown' : 'expanded',
-      {
-        noteHref: (anchorId) => {
-          const page = new URL(location.href);
-          page.hash = anchorId ? `#${anchorId}` : '';
-          return canonicalUrl(page, canonicalBaseUrl, siteBaseUrl);
-        },
-      },
-    );
-
-    // Rows beyond a long table's fold and an open example set's inactive
-    // tabs are hidden only to save screen space, so they are exposed for
-    // print too. A closed short note or question is a reader's disclosure:
-    // print leaves it closed (with its note), only Markdown export opens it.
-    const hiddenSelector =
-      mode === 'print'
-        ? 'main :is(.compact-example, .keyed-table__body tr:not(.keyed-table__more-row))[hidden]'
-        : 'main :is(.assessment-panel, .short-note, .compact-example, .keyed-table__body tr:not(.keyed-table__more-row))[hidden]';
-    const hidden = Array.from(
-      document.querySelectorAll<HTMLElement>(hiddenSelector),
-      (element): SavedHidden => {
-        const saved = { element, hidden: element.hidden };
-        element.hidden = false;
-        return saved;
-      },
-    );
-
-    const links =
-      mode === 'print'
-        ? Array.from(
-            document.querySelectorAll<HTMLAnchorElement>('main a[href]'),
-          ).flatMap((element): SavedLink[] => {
-            const printHref = canonicalPrintHref(
-              element,
-              canonicalBaseUrl,
-              siteBaseUrl,
-            );
-            if (!printHref) return [];
-            const saved = {
-              element,
-              href: element.getAttribute('href'),
-            };
-            // PDF viewers retain anchors as clickable annotations. Point the
-            // anchor itself at the deployed lesson while printing; no visible
-            // URL suffix is needed in the document text.
-            element.setAttribute('href', printHref);
-            return [saved];
-          })
-        : [];
-
-    prepared = { mode, disclosures, hidden, links };
-    if (mode === 'print') root.dataset.explicoPrintReady = '';
+  .explico-downloads__grid tbody th {
+    font-weight: 600;
+    line-height: 1.25;
+    max-width: 11rem;
+    padding-right: 0.75rem;
   }
 
-  function restoreStaticExport(): void {
-    const saved = prepared;
-    if (!saved) return;
-    prepared = null;
+  .explico-downloads__scope {
+    color: var(--sl-color-gray-3);
+    display: block;
+    font-weight: 400;
+  }
 
-    saved.disclosures.restore();
-    for (const state of saved.hidden) state.element.hidden = state.hidden;
-    for (const state of saved.links) {
-      if (state.href === null) state.element.removeAttribute('href');
-      else state.element.setAttribute('href', state.href);
-    }
-    delete root.dataset.explicoPrintReady;
-
-    // Native `toggle` is queued after changing `.open`. Keep the temporary
-    // marker through that task so disclosure persistence ignores both the
-    // prepare and restore mutations.
-    const cleanupMarkers = () => {
-      if (pendingMarkerCleanup !== cleanupMarkers) return;
-      saved.disclosures.releaseMarkers();
-      delete root.dataset.explicoStaticExport;
-      pendingMarkerCleanup = null;
-    };
-    pendingMarkerCleanup = cleanupMarkers;
-    window.setTimeout(cleanupMarkers, 0);
+  .explico-downloads__cell {
+    align-items: center;
+    border: 1px solid var(--sl-color-gray-5);
+    border-radius: 0.4rem;
+    color: var(--sl-color-text-accent);
+    display: inline-flex;
+    font-variant-numeric: tabular-nums;
+    gap: 0.35rem;
+    padding: 0.2rem 0.45rem;
+    text-decoration: none;
+    white-space: nowrap;
   }
 
-  function afterNextPaint(): Promise<void> {
-    return new Promise((resolve) => {
-      requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
-    });
+  a.explico-downloads__cell:hover,
+  a.explico-downloads__cell:focus-visible {
+    border-color: var(--sl-color-accent);
   }
 
-  function waitForIslandHydration(island: HTMLElement): Promise<void> {
-    if (!island.hasAttribute('ssr')) return Promise.resolve();
-
-    return new Promise((resolve) => {
-      let timeout = 0;
-      const finish = () => {
-        window.clearTimeout(timeout);
-        island.removeEventListener('astro:hydrate', finish);
-        island.removeEventListener('astro:hydration-error', finish);
-        resolve();
-      };
-      island.addEventListener('astro:hydrate', finish, { once: true });
-      island.addEventListener('astro:hydration-error', finish, { once: true });
-      timeout = window.setTimeout(finish, 10_000);
-      requestAnimationFrame(() => {
-        if (!island.hasAttribute('ssr')) finish();
-      });
-    });
+  .explico-downloads__cell--pending {
+    color: var(--sl-color-gray-3);
+    cursor: default;
   }
 
-  async function hydrateVisibleIslandsForPrint(): Promise<void> {
-    // Only islands that will be on paper: one inside a disclosure the reader
-    // left closed (print follows the screen) never gets a layout box, so it
-    // can never become visible, and waiting on it would stall the dialog for
-    // `waitForIslandHydration`'s full timeout. A lab's tools never print.
-    const islands = Array.from(
-      document.querySelectorAll<HTMLElement>('main astro-island[ssr][client="visible"]'),
-    ).filter((island) => !island.closest('details:not([open]), [hidden], [data-print-omit]'));
-    if (islands.length === 0) return;
-
-    const scrollX = window.scrollX;
-    const scrollY = window.scrollY;
-    const scrollBehavior = root.style.scrollBehavior;
-    root.style.scrollBehavior = 'auto';
-    try {
-      // `client:visible` deliberately does not hydrate an off-screen plot.
-      // Visit each island briefly so its normal Astro directive runs before
-      // the browser snapshots the document for printing.
-      for (const island of islands) {
-        if (!island.isConnected || !island.hasAttribute('ssr')) continue;
-        const hydrated = waitForIslandHydration(island);
-        // Astro's `client:visible` directive observes an island's children,
-        // while the custom-element wrapper itself may have no layout box.
-        (island.firstElementChild ?? island).scrollIntoView({
-          block: 'center',
-          inline: 'nearest',
-        });
-        await hydrated;
-      }
-    } finally {
-      window.scrollTo({ left: scrollX, top: scrollY, behavior: 'auto' });
-      root.style.scrollBehavior = scrollBehavior;
-    }
+  /* Column headings name the format on a wide menu; the cell itself does
+     on a narrow one, where the grid turns into rows of labelled buttons. */
+  .explico-downloads__format {
+    display: none;
+    color: var(--sl-color-text);
+    font-weight: 600;
   }
 
-  async function waitForPrintVisuals(): Promise<void> {
-    await hydrateVisibleIslandsForPrint();
-    await document.fonts?.ready;
-    await Promise.all(
-      Array.from(document.querySelectorAll<HTMLImageElement>('main img'), (image) => {
-        if (!image.complete) {
-          return new Promise<void>((resolve) => {
-            image.addEventListener('load', () => resolve(), { once: true });
-            image.addEventListener('error', () => resolve(), { once: true });
-          });
-        }
-        return typeof image.decode === 'function'
-          ? image.decode().catch(() => undefined)
-          : Promise.resolve();
-      }),
-    );
-    // React chart effects and SVG layout settle after island hydration.
-    await afterNextPaint();
+  .explico-downloads__none {
+    color: var(--sl-color-gray-4);
   }
 
+  .explico-downloads__note {
+    color: var(--sl-color-gray-3);
+    font-size: 0.7rem;
+    line-height: 1.4;
+    margin: 0.55rem 0 0;
+    max-width: 24rem;
+  }
+
+  @media (max-width: 30rem) {
+    .explico-downloads {
+      width: auto;
+    }
+
+    /* Without columns, a format a scope lacks is simply not listed. */
+    .explico-downloads__grid td:has(> .explico-downloads__none) {
+      display: none;
+    }
+
+    .explico-downloads__grid thead {
+      display: none;
+    }
+
+    .explico-downloads__grid tbody tr {
+      display: grid;
+      gap: 0.35rem;
+      grid-template-columns: 1fr 1fr;
+      padding: 0.4rem 0;
+    }
+
+    .explico-downloads__grid tbody th {
+      grid-column: 1 / -1;
+      max-width: none;
+    }
+
+    .explico-downloads__grid td {
+      padding: 0;
+    }
+
+    .explico-downloads__cell {
+      box-sizing: border-box;
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .explico-downloads__format {
+      display: inline;
+    }
+  }
+</style>
+
+<script>
+  import { installPrintController, printPage } from './print-controller';
+
   function wirePrintActions(): void {
     document
       .querySelectorAll<HTMLButtonElement>(
@@ -362,56 +388,104 @@ const {
       )
       .forEach((button) => {
         button.dataset.explicoPrintWired = '';
-        button.addEventListener('click', async () => {
-          button.disabled = true;
-          button.setAttribute('aria-busy', 'true');
-          window.dispatchEvent(
-            new CustomEvent('explico:prepare-static-export', {
-              detail: { mode: 'print' },
-            }),
-          );
-          try {
-            await waitForPrintVisuals();
-            window.print();
-          } finally {
-            button.disabled = false;
-            button.removeAttribute('aria-busy');
-          }
-        });
+        button.addEventListener('click', () => void printPage(button));
       });
   }
 
-  wirePrintActions();
-  document.addEventListener('astro:page-load', wirePrintActions);
-
-  if (!root.hasAttribute('data-explico-print-controller-wired')) {
-    root.dataset.explicoPrintControllerWired = '';
-    const printMedia = window.matchMedia('print');
-    window.addEventListener('explico:prepare-static-export', (event) => {
-      const mode = (event as CustomEvent<{ mode?: unknown }>).detail?.mode;
-      prepareStaticExport(mode === 'markdown' ? 'markdown' : 'print');
+  /** "1.9 MB" — what the menu shows beside a download. */
+  function formatSize(bytes: number): string {
+    if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+
+  const downloadIndexes = new Map<string, Promise<Record<string, number> | null>>();
+
+  function downloadIndex(href: string): Promise<Record<string, number> | null> {
+    let index = downloadIndexes.get(href);
+    if (!index) {
+      index = fetch(href)
+        .then((response) => (response.ok ? response.json() : null))
+        .then((body: { files?: Record<string, number> } | null) => body?.files ?? null)
+        .catch(() => null);
+      downloadIndexes.set(href, index);
+    }
+    return index;
+  }
+
+  /** Sizes beside each download; a download the build did not write disappears. */
+  async function fillDownloadSizes(menu: HTMLElement): Promise<void> {
+    if (menu.dataset.explicoSizes !== undefined) return;
+    menu.dataset.explicoSizes = '';
+    const href = menu.dataset.indexHref;
+    const files = href ? await downloadIndex(href) : null;
+    if (!files) return;
+    menu.querySelectorAll<HTMLAnchorElement>('a[data-download-path]').forEach((link) => {
+      const size = files[link.dataset.downloadPath ?? ''];
+      if (size === undefined) {
+        const none = document.createElement('span');
+        none.className = 'explico-downloads__none';
+        none.setAttribute('aria-hidden', 'true');
+        none.textContent = '—';
+        link.replaceWith(none);
+        return;
+      }
+      const label = link.querySelector<HTMLElement>('[data-download-size]');
+      if (label) label.textContent = `↓ ${formatSize(size)}`;
+      link.setAttribute('aria-label', `${link.getAttribute('aria-label') ?? ''} (${formatSize(size)})`);
     });
-    window.addEventListener('explico:restore-static-export', restoreStaticExport);
-    const requestPrintPreparation = () => {
-      window.dispatchEvent(
-        new CustomEvent('explico:prepare-static-export', {
-          detail: { mode: 'print' },
-        }),
-      );
-    };
-    const requestPrintRestore = () => {
-      window.dispatchEvent(
-        new CustomEvent('explico:restore-static-export', {
-          detail: { mode: 'print' },
-        }),
-      );
-    };
-    window.addEventListener('beforeprint', requestPrintPreparation);
-    window.addEventListener('afterprint', requestPrintRestore);
-    printMedia.addEventListener('change', (event) => {
-      if (event.matches) requestPrintPreparation();
-      else requestPrintRestore();
+  }
+
+  /** Under its button, right-aligned, scrolling in a short window; a bottom sheet on a phone. */
+  function placeDownloadMenu(menu: HTMLElement): void {
+    const toggle = document.querySelector<HTMLElement>(`[popovertarget="${menu.id}"]`);
+    if (!toggle) return;
+    // On a phone the button sits low in Starlight's mobile menu, with little
+    // room under it: the menu is a sheet along the bottom of the screen.
+    if (window.innerWidth <= 480) {
+      Object.assign(menu.style, {
+        top: 'auto',
+        bottom: '0.5rem',
+        left: '0.5rem',
+        right: '0.5rem',
+        maxHeight: 'calc(100dvh - 1rem)',
+      });
+      return;
+    }
+    const box = toggle.getBoundingClientRect();
+    const top = Math.round(box.bottom + 8);
+    Object.assign(menu.style, {
+      top: `${top}px`,
+      bottom: 'auto',
+      left: 'auto',
+      right: `${Math.max(8, Math.round(window.innerWidth - box.right))}px`,
+      maxHeight: `calc(100dvh - ${top + 8}px)`,
     });
-    if (printMedia.matches) requestPrintPreparation();
   }
+
+  function wireDownloadMenus(): void {
+    document
+      .querySelectorAll<HTMLElement>('[data-explico-downloads]:not([data-explico-downloads-wired])')
+      .forEach((menu) => {
+        menu.dataset.explicoDownloadsWired = '';
+        menu.addEventListener('beforetoggle', (event) => {
+          if ((event as ToggleEvent).newState !== 'open') return;
+          placeDownloadMenu(menu);
+          void fillDownloadSizes(menu);
+        });
+        menu.addEventListener('toggle', (event) => {
+          document
+            .querySelector(`[popovertarget="${menu.id}"]`)
+            ?.setAttribute('aria-expanded', String((event as ToggleEvent).newState === 'open'));
+        });
+      });
+  }
+
+  wirePrintActions();
+  wireDownloadMenus();
+  document.addEventListener('astro:page-load', () => {
+    wirePrintActions();
+    wireDownloadMenus();
+  });
+
+  installPrintController();
 </script>