explico 0.13.1 → 0.14.0

package/src/components/deck/deck-map.ts

@@ -0,0 +1,91 @@
+/**
+ * The slide map on a deck's study page (`docs/authoring/deck.md`, "Present
+ * mode and the study page"): every frame as a numbered square, pinned under
+ * the page's header while the deck scrolls. A deck too long for the map's
+ * line keeps its first few frames, the frames around the place to continue —
+ * a few before it, shown already, and some after it, not shown yet — the
+ * frames around the one in view, and its last few, with a gap for each run
+ * it leaves out. How many of each is what the line has room for.
+ *
+ * Pure: `deck-controller.ts` draws the map and measures its room;
+ * `tests/unit/deck-map.test.ts` checks this in Node.
+ */
+
+/** One place on the map: a frame's square, or a gap standing for the frames from `from` to `to`. */
+export type SlideMapItem =
+  | { readonly kind: 'slide'; readonly number: number }
+  | { readonly kind: 'gap'; readonly from: number; readonly to: number };
+
+/** The frames the map keeps in sight, by number. */
+export interface SlideMapFocus {
+  /** The frame to continue at, or else the first one not shown yet. */
+  readonly anchor?: number;
+  /** The frame in view on the study page. */
+  readonly current?: number;
+}
+
+/** How much a shortened map keeps: frames at each end, before and after the anchor, and on each side of the one in view. */
+export interface SlideMapKeep {
+  readonly ends: number;
+  readonly before: number;
+  readonly after: number;
+  readonly around: number;
+}
+
+/** The least a shortened map keeps. */
+const LEAST: SlideMapKeep = { ends: 1, before: 1, after: 1, around: 0 };
+
+/** What a shortened map widens first, while the line has room: what comes next, then the ends, then what came before. */
+const WIDEN: readonly (keyof SlideMapKeep)[] = ['after', 'ends', 'before', 'around'];
+
+const slide = (number: number): SlideMapItem => ({ kind: 'slide', number });
+
+/**
+ * A deck of `total` frames, numbered from 1, shortened to what `keep` keeps
+ * of its ends and of `focus`. A gap never stands for one frame alone: that
+ * frame is shown in its place.
+ */
+export function slideMapKeeping(total: number, focus: SlideMapFocus, keep: SlideMapKeep): SlideMapItem[] {
+  const kept = new Set<number>();
+  const add = (from: number, to: number) => {
+    for (let number = Math.max(1, from); number <= Math.min(total, to); number += 1) kept.add(number);
+  };
+  add(1, keep.ends);
+  add(total - keep.ends + 1, total);
+  if (focus.anchor !== undefined) add(focus.anchor - keep.before, focus.anchor + keep.after);
+  if (focus.current !== undefined) add(focus.current - keep.around, focus.current + keep.around);
+  const items: SlideMapItem[] = [];
+  let last = 0;
+  for (const number of [...kept].sort((a, b) => a - b)) {
+    if (number - last === 2) items.push(slide(number - 1));
+    else if (number - last > 2) items.push({ kind: 'gap', from: last + 1, to: number - 1 });
+    items.push(slide(number));
+    last = number;
+  }
+  return items;
+}
+
+/**
+ * The map of a deck of `total` frames in a line with room for `room` places:
+ * every frame when they fit, else the least a shortened map keeps, widened
+ * ({@link WIDEN}, a frame at a time, round and round) while the line has
+ * room. Past the least, nothing fits: the map wraps.
+ */
+export function slideMap(total: number, focus: SlideMapFocus, room = Number.POSITIVE_INFINITY): SlideMapItem[] {
+  if (total <= room) return Array.from({ length: total }, (_, index) => slide(index + 1));
+  let keep = LEAST;
+  let best = slideMapKeeping(total, focus, keep);
+  for (let widened = true; widened; ) {
+    widened = false;
+    for (const field of WIDEN) {
+      const wider = { ...keep, [field]: keep[field] + 1 };
+      const items = slideMapKeeping(total, focus, wider);
+      if (items.length <= room && items.length > best.length) {
+        keep = wider;
+        best = items;
+        widened = true;
+      }
+    }
+  }
+  return best;
+}

package/src/components/deck-lane.ts

@@ -0,0 +1,163 @@
+/**
+ * The slides column of a contents list (`CourseContents.astro`,
+ * `PartOverview.astro`): each lesson's deck at its row's end, as long as what
+ * it covers. A lesson's own deck is a **tile** on its title line; a part's
+ * deck is a **bar**, its covered chapters' cells joined into one shape from
+ * the first covered title to the last, each cell a link to that chapter's
+ * section of the deck, named as the sidebar names it (`sidebar-editions.ts`).
+ *
+ * Pure: the two components draw the cells, and `tests/unit/deck-lane.test.ts`
+ * checks this in Node.
+ */
+import { editionLabel, sectionDetail } from './starlight/sidebar-editions';
+
+/** One row's cell in one lane of the slides column. */
+export interface LaneCell {
+  /** A tile is a whole deck on one row; a bar is a `start`, any `middle`s and an `end`. */
+  readonly kind: 'tile' | 'start' | 'middle' | 'end';
+  /** The glyph the cell always shows: on a tile and on a bar's start. */
+  readonly glyph?: 'deck' | 'part-deck';
+  /** Where it links, without the site's base: `/motion/slides/#slide-17`. */
+  readonly href: string;
+  /** The accessible name, the tooltip's first line: `Slides: Projectile Range`. */
+  readonly name: string;
+  /** The tooltip's second line, the link's description: `Slides 17–25 of the part's slides`. */
+  readonly detail?: string;
+  /**
+   * A slides-only lesson's tile: its title opens the same page, so the tile
+   * is left out of the tab order and hidden from assistive technology.
+   */
+  readonly duplicate?: boolean;
+}
+
+/** A lesson as the column reads it from the manifest. */
+export interface LaneLesson {
+  readonly id: string;
+  readonly slug: string;
+  readonly title: string;
+  readonly editions: readonly ('chapter' | 'deck')[];
+}
+
+/** A deck as the column reads it from the manifest (`ManifestDeck`). */
+export interface LaneDeck {
+  /** Its route, `motion/slides`. */
+  readonly slug: string;
+  /** A lesson's deck: the lesson's id. */
+  readonly lessonId?: string;
+  /** A part's deck: the part's directory. */
+  readonly part?: string;
+  /** A part's deck: each chapter it covers, by lesson slug, and the frame its section opens on. */
+  readonly covers: readonly { readonly chapter: string; readonly frame: number }[];
+  /** On a part's deck, each frame's chapter, by lesson slug. */
+  readonly frames: readonly { readonly number: number; readonly chapter?: string }[];
+}
+
+/**
+ * The frames a part's deck holds of one chapter, as the sidebar writes them
+ * (`withPartDeckFrames`): `2–16`, or `5` for one; none when no frame is the
+ * chapter's.
+ */
+function sectionRange(deck: LaneDeck, chapter: string): string | undefined {
+  const numbers = deck.frames.filter((frame) => frame.chapter === chapter).map((frame) => frame.number);
+  if (numbers.length === 0) return undefined;
+  const first = Math.min(...numbers);
+  const last = Math.max(...numbers);
+  return first === last ? String(first) : `${first}–${last}`;
+}
+
+/**
+ * The slides column of one part: `lanes[lane][row]`, a cell or null, one
+ * row per lesson in `lessons`' order. Lane 0 holds each lesson's own deck,
+ * and the part's deck when no row it covers has a deck of its own; when one
+ * does, the part's deck takes lane 1. A part with no deck has no lanes.
+ */
+export function deckLanes(input: {
+  readonly lessons: readonly LaneLesson[];
+  readonly decks: readonly LaneDeck[];
+  readonly part: { readonly dir: string };
+}): (LaneCell | null)[][] {
+  const { lessons, decks, part } = input;
+  const own: (LaneCell | null)[] = lessons.map((lesson) => {
+    const deck = decks.find((candidate) => candidate.lessonId === lesson.id);
+    if (deck === undefined) return null;
+    return {
+      kind: 'tile',
+      glyph: 'deck',
+      href: `/${deck.slug}/`,
+      name: editionLabel('slides', lesson.title, 'other'),
+      ...(lesson.editions.includes('chapter') ? {} : { duplicate: true }),
+    };
+  });
+
+  const partDeck = decks.find((deck) => deck.part === part.dir);
+  const covered: (LaneCell | null)[] = lessons.map(() => null);
+  if (partDeck !== undefined) {
+    const frameOf = new Map(partDeck.covers.map((cover) => [cover.chapter, cover.frame]));
+    lessons.forEach((lesson, row) => {
+      const frame = frameOf.get(lesson.slug);
+      if (frame === undefined) return;
+      const range = sectionRange(partDeck, lesson.slug);
+      const above = row > 0 && frameOf.has(lessons[row - 1]!.slug);
+      const below = row < lessons.length - 1 && frameOf.has(lessons[row + 1]!.slug);
+      const kind = above ? (below ? 'middle' : 'end') : below ? 'start' : 'tile';
+      covered[row] = {
+        kind,
+        ...(above ? {} : { glyph: 'part-deck' as const }),
+        href: `/${partDeck.slug}/#slide-${frame}`,
+        name: editionLabel('slides', lesson.title, 'other'),
+        ...(range === undefined ? {} : { detail: sectionDetail(range) }),
+      };
+    });
+  }
+
+  const hasOwn = own.some((cell) => cell !== null);
+  const hasPart = covered.some((cell) => cell !== null);
+  if (!hasOwn && !hasPart) return [];
+  if (!hasPart) return [own];
+  if (!hasOwn) return [covered];
+  const clash = covered.some((cell, row) => cell !== null && own[row] !== null);
+  if (clash) return [own, covered];
+  return [own.map((cell, row) => cell ?? covered[row]!)];
+}
+
+/**
+ * A cell's link attributes, as both lists draw it: its kind and glyph as
+ * classes, its lane as the column counted from the row's end (the lanes are
+ * the row's last `lanes` columns, wherever the list puts its others), the
+ * tooltip's two lines in `title`, the second as `aria-description` too. A
+ * duplicate is out of the tab order and hidden from assistive technology.
+ * The link holds the name in a visually hidden span.
+ */
+export function laneLink(cell: LaneCell, lane: number, lanes: number, base: string): Record<string, string | number> {
+  return {
+    class: ['deck-lane', `deck-lane--${cell.kind}`, ...(cell.glyph ? [`deck-lane--${cell.glyph}`] : [])].join(' '),
+    href: `${base}${cell.href}`,
+    style: `grid-column: ${lane - lanes - 1}`,
+    title: cell.detail === undefined ? cell.name : `${cell.name}\n${cell.detail}`,
+    ...(cell.detail === undefined ? {} : { 'aria-description': cell.detail }),
+    ...(cell.duplicate ? { 'aria-hidden': 'true', tabindex: -1 } : {}),
+    'data-pagefind-ignore': '',
+  };
+}
+
+/** The glyph before a lesson's title: what it opens, its chapter or, for a slides-only lesson, its deck. */
+export function titleGlyph(lesson: Pick<LaneLesson, 'editions'>): 'chapter' | 'deck' {
+  return lesson.editions.includes('chapter') ? 'chapter' : 'deck';
+}
+
+/** The glyphs a contents list uses, in the order its key names them. */
+export type ContentsGlyph = 'chapter' | 'deck' | 'part-deck';
+
+/**
+ * The key's entries: `chapter` when a lesson has a chapter, `deck` when a
+ * lesson has a deck of its own, `part-deck` when a part has one. Empty when
+ * the course has no deck: the list then draws no glyph at all.
+ */
+export function contentsKey(lessons: readonly LaneLesson[], decks: readonly LaneDeck[]): ContentsGlyph[] {
+  if (decks.length === 0) return [];
+  return [
+    ...(lessons.some((lesson) => lesson.editions.includes('chapter')) ? (['chapter'] as const) : []),
+    ...(decks.some((deck) => deck.lessonId !== undefined) ? (['deck'] as const) : []),
+    ...(decks.some((deck) => deck.part !== undefined) ? (['part-deck'] as const) : []),
+  ];
+}

package/src/components/diagram/Diagram.astro

@@ -41,8 +41,15 @@
  * overflows its column (`../starlight/DiagramEnhancer.astro`). To let a
  * reader fold a diagram away, wrap it in a `<Fold>` or put it in a
  * collapsible section.
+ *
+ * The whole drawing, boxes and text together, follows the reader's text size
+ * on a touch screen (`../starlight/TextSizeControl.astro`), so a diagram can
+ * be made to fit a phone: see `.diagram-frame` and `.diagram-canvas` below,
+ * and `docs/diagram-scaling.md` for why it is done this way and what not to
+ * change.
  */
 import { fitDiagramLayout, FORMULA_FONT_PX } from '../../reference/diagram-layout';
+import { deckFloat } from '../deck/deck-context';
 import { measureFormula } from '../../reference/katex-measure';
 import { diagramTooWideMessage, diagramWidthLimit } from '../../reference/diagram-fit';
 import { loadManifest } from '../../compiler/manifest';
@@ -93,6 +100,7 @@ export interface Props {
   number?: string;
   /** Computed by `remark-notation.mjs` for a top-level lesson diagram. */
   anchorId?: string;
+
   /**
    * The widest this diagram may lay out, in px, before the build warns
    * (`dia-too-wide`, rule V8). Default: the course's `rules.V8.columnWidth`,
@@ -113,6 +121,9 @@ const {
   anchorId,
   warnAboveWidth,
 } = Astro.props;
+// On a deck, the deck's own diagram carries no number and a recalled one's
+// number links to its chapter (rule D8).
+const { onDeck, numberHref } = await deckFloat(Astro.locals, anchorId, import.meta.env.BASE_URL);
 
 const idPattern = /^[A-Za-z][A-Za-z0-9_-]*$/;
 if (!idPattern.test(id)) {
@@ -141,7 +152,7 @@ if (short !== undefined && (typeof short !== 'string' || !short.trim())) {
 if (nodes.length === 0) {
   throw new Error(`Diagram "${id}" has no nodes.`);
 }
-if ((number && !anchorId) || (!number && anchorId)) {
+if ((number && !anchorId) || (!number && anchorId && !onDeck)) {
   throw new Error(
     `Diagram "${id}" must receive both computed \`number\` and \`anchorId\`, or neither.`,
   );
@@ -306,91 +317,96 @@ function pathFrom(points: readonly { x: number; y: number }[]): string {
         aria-labelledby={captionTextId}
       >
         <div
-          class="diagram-canvas"
-          style={`--diagram-print-ratio: ${layout.width} / ${layout.height}; --diagram-width: ${layout.width}; --diagram-height: ${layout.height}; width: ${layout.width}px; height: ${layout.height}px;`}
+          class="diagram-frame"
+          style={`--diagram-width: ${layout.width}; --diagram-height: ${layout.height};`}
         >
-          <svg
-            viewBox={`0 0 ${layout.width} ${layout.height}`}
-            width="100%"
-            height="100%"
+          <div
+            class="diagram-canvas"
+            style={`--diagram-print-ratio: ${layout.width} / ${layout.height}; width: ${layout.width}px; height: ${layout.height}px;`}
           >
-            <defs>
-              <marker
-                id={markerId}
-                viewBox="0 0 10 10"
-                refX="9"
-                refY="5"
-                markerWidth="7"
-                markerHeight="7"
-                orient="auto-start-reverse"
-              >
-                <path
-                  d="M 0 0 L 10 5 L 0 10 z"
-                  class="diagram-arrowhead"
-                />
-              </marker>
-            </defs>
-
-            {
-              layout.edges.map((edge) => (
-                <path
-                  d={pathFrom(edge.points)}
-                  class="diagram-edge"
-                  marker-end={`url(#${markerId})`}
-                />
-              ))
-            }
-
-            {
-              layout.nodes.map((position) => {
-                const node = nodeById.get(position.id)!;
-                // Position each node with x/y attributes, never a
-                // `transform` on the group: WebKit (every iOS browser)
-                // paints a `foreignObject` descendant that gets its own
-                // render layer — every KaTeX `position: relative` span —
-                // without the ancestor transform, so formulas pile up at
-                // the SVG origin while their boxes stay put.
-                return (
-                  <g class="diagram-node">
-                    <rect
-                      x={position.x}
-                      y={position.y}
-                      width={position.width}
-                      height={position.height}
-                      rx="8"
-                      ry="8"
-                    />
-                    <foreignObject
-                      x={position.x}
-                      y={position.y}
-                      width={position.width}
-                      height={position.height}
-                    >
-                      <div
-                        xmlns="http://www.w3.org/1999/xhtml"
-                        class="diagram-node-content"
+            <svg
+              viewBox={`0 0 ${layout.width} ${layout.height}`}
+              width="100%"
+              height="100%"
+            >
+              <defs>
+                <marker
+                  id={markerId}
+                  viewBox="0 0 10 10"
+                  refX="9"
+                  refY="5"
+                  markerWidth="7"
+                  markerHeight="7"
+                  orient="auto-start-reverse"
+                >
+                  <path
+                    d="M 0 0 L 10 5 L 0 10 z"
+                    class="diagram-arrowhead"
+                  />
+                </marker>
+              </defs>
+
+              {
+                layout.edges.map((edge) => (
+                  <path
+                    d={pathFrom(edge.points)}
+                    class="diagram-edge"
+                    marker-end={`url(#${markerId})`}
+                  />
+                ))
+              }
+
+              {
+                layout.nodes.map((position) => {
+                  const node = nodeById.get(position.id)!;
+                  // Position each node with x/y attributes, never a
+                  // `transform` on the group: WebKit (every iOS browser)
+                  // paints a `foreignObject` descendant that gets its own
+                  // render layer — every KaTeX `position: relative` span —
+                  // without the ancestor transform, so formulas pile up at
+                  // the SVG origin while their boxes stay put.
+                  return (
+                    <g class="diagram-node">
+                      <rect
+                        x={position.x}
+                        y={position.y}
+                        width={position.width}
+                        height={position.height}
+                        rx="8"
+                        ry="8"
+                      />
+                      <foreignObject
+                        x={position.x}
+                        y={position.y}
+                        width={position.width}
+                        height={position.height}
                       >
-                        {
-                          node.text && (
-                            <span class="diagram-node-text">{node.text}</span>
-                          )
-                        }
-                        {
-                          node.mathNodes && (
-                            <span class="diagram-node-formula notation-math">
-                              {node.mathNodes.map((mathNode) => (
-                                <SafeMathNode node={mathNode} />
-                              ))}
-                            </span>
-                          )
-                        }
-                      </div>
-                    </foreignObject>
-                  </g>
-                );
-              })
-            }
-          </svg>
+                        <div
+                          xmlns="http://www.w3.org/1999/xhtml"
+                          class="diagram-node-content"
+                        >
+                          {
+                            node.text && (
+                              <span class="diagram-node-text">{node.text}</span>
+                            )
+                          }
+                          {
+                            node.mathNodes && (
+                              <span class="diagram-node-formula notation-math">
+                                {node.mathNodes.map((mathNode) => (
+                                  <SafeMathNode node={mathNode} />
+                                ))}
+                              </span>
+                            )
+                          }
+                        </div>
+                      </foreignObject>
+                    </g>
+                  );
+                })
+              }
+            </svg>
+          </div>
         </div>
       </div>
     </div>
@@ -403,6 +419,7 @@ function pathFrom(points: readonly { x: number; y: number }[]): string {
     short={short}
     anchorId={renderedAnchorId}
     number={number}
+    numberHref={numberHref}
     textId={captionTextId}
   >
     <button
@@ -479,6 +496,33 @@ function pathFrom(points: readonly { x: number; y: number }[]): string {
       flex: none;
     }
 
+    /* The reader's text size on a touch screen (`TextSizeControl.astro`)
+       shrinks the whole drawing, boxes and text, so that a wide diagram
+       fits a phone. It does so the way print does (`global.css`): the SVG
+       stays at its build-time size, and the HTML canvas around it is scaled
+       with a transform — never the `viewBox`, whose scale WebKit (every iOS
+       browser) does not apply to the HTML in a `foreignObject`. A transform
+       moves no layout box, so the frame takes the scaled size: it is what
+       the scroller measures (`scrollWidth`) and what sets the height. The
+       frame clips its content, which the scaled canvas just fills, so the
+       canvas's unscaled layout box adds nothing to the scroll width.
+       `--explico-text-scale` is 0.5 to 1; with no size chosen, or off a touch
+       screen, none of this applies. Only the lesson's own diagrams (also
+       when expanded) shrink: a card keeps the 12px floor on its text.
+       `docs/diagram-scaling.md` has the reasons and the rules for changing it. */
+    @media screen and (hover: none) {
+      :global(:root[data-text-size]) :global(.sl-markdown-content) .diagram-frame {
+        width: calc(var(--diagram-width) * 1px * var(--explico-text-scale, 1));
+        height: calc(var(--diagram-height) * 1px * var(--explico-text-scale, 1));
+        overflow: hidden;
+      }
+
+      :global(:root[data-text-size]) :global(.sl-markdown-content) .diagram-canvas {
+        transform: scale(var(--explico-text-scale, 1));
+        transform-origin: 0 0;
+      }
+    }
+
     .diagram.dia-ref-highlight {
       outline: 3px solid var(--sl-color-accent);
       outline-offset: 0.25rem;
@@ -494,9 +538,10 @@ function pathFrom(points: readonly { x: number; y: number }[]): string {
        box from these values; change them together. The size is in px, not
        rem: the boxes are measured at build time for 13.6px text, so text that
        followed a reader's larger default font size (20px, Chrome's "Large")
-       outgrew its box and was cut off. Scaling the whole drawing instead is no
-       way out — WebKit on iOS scales the SVG but not the HTML in a
-       `foreignObject`. Browser zoom still enlarges it with everything else. */
+       outgrew its box and was cut off. Scaling the drawing through the SVG
+       is no way out — WebKit on iOS scales the SVG but not the HTML in a
+       `foreignObject`. Browser zoom still enlarges it with everything else,
+       and the text-size menu shrinks it as a whole (`.diagram-frame`). */
     .diagram-node-content {
       display: flex;
       height: 100%;

package/src/components/disclosure/persisted-disclosure.ts

@@ -43,10 +43,18 @@ export function wirePersistedDetails(
 ): void {
   const fullKey = storageKey(key);
   const saved = store.get(fullKey);
-  details.open = saved === null ? defaultOpen : saved === 'true';
+  // The state the page shows without the reader having touched it. Setting
+  // it below fires a `toggle` of its own when the markup started the other
+  // way; that one is not the reader's, so it stores nothing. Only a state
+  // the reader moved the element to is saved: a page that is merely opened
+  // writes nothing to the browser.
+  let shown = saved === null ? defaultOpen : saved === 'true';
+  details.open = shown;
 
   details.addEventListener('toggle', () => {
     if (details.hasAttribute('data-explico-temporary-open')) return;
+    if (details.open === shown) return;
+    shown = details.open;
     store.set(fullKey, String(details.open));
   });
 }

package/src/components/figure/Figure.astro

@@ -39,6 +39,7 @@
  * tools never print. A figure with no `tools` slot has no button and no tray.
  */
 import FloatCaption from './FloatCaption.astro';
+import { deckFloat } from '../deck/deck-context';
 import { courseDisclosure } from '../disclosure/course-disclosure';
 
 export interface Props {
@@ -70,6 +71,9 @@ const {
   number,
   anchorId,
 } = Astro.props;
+// On a deck, the deck's own figure carries no number and a recalled one's
+// number links to its chapter (rule D8).
+const { onDeck, numberHref } = await deckFloat(Astro.locals, anchorId, import.meta.env.BASE_URL);
 
 if ('title' in Astro.props) {
   throw new Error(
@@ -82,7 +86,7 @@ if (typeof caption !== 'string' || !caption.trim()) {
 if (short !== undefined && (typeof short !== 'string' || !short.trim())) {
   throw new Error('Figure `short` must be a non-empty string when given.');
 }
-if (!number || !anchorId) {
+if ((!number && !onDeck) || !anchorId) {
   throw new Error(
     `Figure is missing its computed \`number\`/\`anchorId\`. remark-notation numbers a <Figure> only on a lesson page, at its top level or in a <Memo>, <ShortNote> or <Fold>: elsewhere (a worked example) show the content without <Figure>, and on a page that is not a chapter (rule S10) link the chapter's figure. At a lesson's top level, this page is not running remark-notation with the manifest's \`figures\` (see astro.config.mjs).`,
   );
@@ -91,7 +95,7 @@ if (!number || !anchorId) {
 const hasTools = Astro.slots.has('tools');
 const toolsId = `${anchorId}-tools`;
 const toolsOpen = hasTools && (defaultOpen ?? (await courseDisclosure()).figures.defaultOpen);
-const name = `Figure ${number}`;
+const name = number ? `Figure ${number}` : 'Figure';
 ---
 
 <figure
@@ -113,6 +117,7 @@ const name = `Figure ${number}`;
     short={short}
     anchorId={anchorId}
     number={number}
+    numberHref={numberHref}
     live
   >
     {

package/src/components/figure/FloatCaption.astro

@@ -27,7 +27,7 @@
  * `.float-caption__text`, where a lab states the case its plot shows
  * (`./figure-state.ts`).
  */
-import { captionTitle } from '../float-name';
+import { captionTitle } from '../../reference/float-name';
 
 export interface Props {
   /** The reader-facing kind word: `Figure`, `Diagram`. */
@@ -42,13 +42,15 @@ export interface Props {
   anchorId: string;
   /** Its number; an unnumbered float shows none. */
   number?: string;
+  /** Where its number links: the float itself by default, a deck's recalled one to its chapter. */
+  numberHref?: string;
   /** An id for the caption text, for a control inside the body to be named by. */
   textId?: string;
   /** Give the line a live end a lab writes into (`./figure-state.ts`). */
   live?: boolean;
 }
 
-const { kind, prefix, caption, short, anchorId, number, textId, live = false } = Astro.props;
+const { kind, prefix, caption, short, anchorId, number, numberHref, textId, live = false } = Astro.props;
 const name = number ? `${kind} ${number}` : kind.toLowerCase();
 const tools = Astro.slots.has('default') ? (await Astro.slots.render('default')).trim() : '';
 ---
@@ -58,7 +60,7 @@ const tools = Astro.slots.has('default') ? (await Astro.slots.render('default'))
     number && (
       <a
         class:list={['float-caption__number', `${prefix}__number`]}
-        href={`#${anchorId}`}
+        href={numberHref ?? `#${anchorId}`}
         aria-label={name}
       >
         {name}

package/src/components/fold/Fold.astro

@@ -19,7 +19,7 @@
  *
  * The bar is the `label`, set at body-text size. Without one it names the
  * numbered floats inside, "Diagram 2.1.1 Steps of the range derivation"
- * (`../float-name.ts`), read from the rendered content; with neither it
+ * (`../../reference/float-name.ts`), read from the rendered content; with neither it
  * throws, as `fold-unnamed` reports at `validate:content`. A bar that names
  * the floats (`data-names-floats`) is their name here: their caption lines
  * drop the bold short-caption title that would repeat it, and a folded
@@ -31,7 +31,7 @@
  * page.
  */
 import { courseDisclosure } from '../disclosure/course-disclosure';
-import { floatName, floatsInHtml } from '../float-name';
+import { floatName, floatsInHtml } from '../../reference/float-name';
 import { foldId, foldSlug } from './fold-id';
 
 export interface Props {