@nulib/clover 4.0.0-beta.1 → 4.0.0

package/dist/index.mjs

@@ -5,7 +5,8 @@ import { Root } from "./components/Root/Root.mjs";
 import { Body } from "./components/Body/Body.mjs";
 import { Label } from "./components/Label/Label.mjs";
 import { Items } from "./components/Items/Items.mjs";
-import { Next, Position, Previous } from "./components/Items/Pager.mjs";
+import { Next, Previous } from "./components/Items/Pager.mjs";
+import { Position } from "./components/Items/Position.mjs";
 import { Status } from "./components/Status/Status.mjs";
 import { Homepage, Id, Metadata, PartOf, Rendering, RequiredStatement, Rights, SeeAlso, Summary, Thumbnail, Value } from "./components/Primitives/Primitives.mjs";
 import { Logo, Provider } from "./components/Provider/Provider.mjs";
@@ -25,7 +26,7 @@ import { CollectionSelect } from "./components/CollectionSelect/CollectionSelect
 import { PanelToggle } from "./components/Panel/PanelToggle.mjs";
 import { Timeline } from "./components/Timeline/Timeline.mjs";
 import { Scene } from "./components/Scene/Scene.mjs";
-import { useActiveCanvas, useAnnotationSets, useLangOf, useLocalized, useManifest, useNavigation, useSequence, useStatus, useT, useVisibleCanvases } from "./react/hooks.mjs";
+import { useActiveCanvas, useAnnotationCollection, useAnnotationSets, useLangOf, useLocalized, useManifest, useNavigation, useSequence, useStatus, useT, useVisibleCanvases } from "./react/hooks.mjs";
 import { useProvider } from "./components/Primitives/resource.mjs";
 import { visuallyHidden } from "./ui/visuallyHidden.mjs";
 import { Tip } from "./ui/Tip.mjs";
@@ -39,6 +40,7 @@ import { buildContentState, encodeContentState } from "./core/content-state.mjs"
 import { decodeContentState } from "./core/content-state-reader.mjs";
 import { cueAt, parseVtt } from "./core/vtt.mjs";
 import { chaptersOf, currentContents, tableOfContents } from "./core/ranges.mjs";
+import { CONTENTS_SET_ID } from "./core/annotation-sets.mjs";
 import { localize } from "./core/value.mjs";
 import { readAs, toPlainText } from "./core/text.mjs";
 import { resolveThumbnail, stillSource, thumbnailSource } from "./core/thumbnail.mjs";
@@ -50,6 +52,7 @@ export {
   Annotations,
   Body,
   CLOVER_I18N_NAMESPACE,
+  CONTENTS_SET_ID,
   default2 as Canvas,
   Collection,
   CollectionSelect,
@@ -115,6 +118,7 @@ export {
   toPlainText,
   toPresentation4,
   useActiveCanvas,
+  useAnnotationCollection,
   useAnnotationSets,
   useClover,
   useCloverSelector,

package/dist/lib/fullscreen.mjs

@@ -9,7 +9,12 @@ const isFullscreenSupported = () => {
   const doc = document;
   return Boolean(doc.fullscreenEnabled ?? doc.webkitFullscreenEnabled);
 };
-const getCloverRoot = (from) => from == null ? void 0 : from.closest(".clover-canvas");
+const getCloverRoot = (from) => {
+  const root = from == null ? void 0 : from.closest(".clover-root");
+  const dialog = from == null ? void 0 : from.closest("dialog");
+  if (root && !(dialog && root.contains(dialog))) return root;
+  return (from == null ? void 0 : from.closest(".clover-canvas")) ?? null;
+};
 const enterNativeFullscreen = (video, from) => {
   if (typeof video.webkitEnterFullscreen !== "function") return;
   const canvas = from.closest(".clover-canvas");

package/dist/lib/renderer/CanvasRenderer.mjs

@@ -12,9 +12,9 @@ import { loadImage } from "./io/decode.mjs";
 import { FrameLoop } from "./loop/FrameLoop.mjs";
 import { uploadBudget } from "./scene/uploadBudget.mjs";
 import { apply, compose, rotate, scale } from "./math/affine.mjs";
-import { union, clamp } from "./math/rect.mjs";
+import { union, clamp, transformRect } from "./math/rect.mjs";
 import { planFrame } from "./scene/planFrame.mjs";
-import { sameSpec, prepareItem, layoutItems, pixelsToWorld, MEDIA_KEY_PREFIX } from "./scene/sceneItem.mjs";
+import { sameSpec, prepareItem, layoutItems, pixelsToWorld, itemToWorld, MEDIA_KEY_PREFIX } from "./scene/sceneItem.mjs";
 const DEFAULTS = {
   maxZoomPixelRatio: 1.1,
   minZoomImageRatio: 0.9,
@@ -98,6 +98,7 @@ class CanvasRenderer {
     __publicField(this, "lastEmitted", null);
     __publicField(this, "generation", 0);
     __publicField(this, "listeners", /* @__PURE__ */ new Map());
+    __publicField(this, "unloadable", false);
     __publicField(this, "resizeObserver", null);
     __publicField(this, "intersectionObserver", null);
     __publicField(this, "releaseTimer", null);
@@ -125,9 +126,13 @@ class CanvasRenderer {
         // Fetch for where the camera lands, not for each view on the way.
         destination: animating ? this.camera.destination : void 0
       });
-      this.cache.update(
-        plan.wants.filter((want) => !want.url.startsWith(MEDIA_KEY_PREFIX))
+      const wants = plan.wants.filter(
+        (want) => !want.url.startsWith(MEDIA_KEY_PREFIX)
       );
+      this.cache.update(wants);
+      if (plan.draws.length) this.setUnloadable(false);
+      else if (wants.length && wants.every((want) => this.cache.failed(want.url)))
+        this.setUnloadable(true);
       this.paint(plan.draws);
       (_a = this.overlays) == null ? void 0 : _a.position(camera, this.viewport);
       (_b = this.navigator) == null ? void 0 : _b.render(
@@ -257,6 +262,7 @@ class CanvasRenderer {
     this.worldBounds = world ? laidOut ? union([world, laidOut]) : world : laidOut;
     this.contentVersion++;
     if (errors.length) this.emit("error", errors);
+    this.setUnloadable(images.length > 0 && !items.length && errors.length > 0);
     if (!this.worldBounds) {
       this.invalidate();
       return;
@@ -281,6 +287,7 @@ class CanvasRenderer {
    * scene, framed afresh. A swap within one resource keeps the old scene up instead.
    */
   clear() {
+    this.setUnloadable(false);
     this.generation++;
     this.items = [];
     this.watchMedia([]);
@@ -493,7 +500,18 @@ class CanvasRenderer {
   itemRectToWorld(index, rect) {
     const item = this.items[index];
     if (!item) return null;
-    const { contentClip } = item;
+    const { contentClip, clip } = item;
+    if (item.turn)
+      return transformRect(
+        compose(
+          itemToWorld(item),
+          scale(
+            clip.width / contentClip.width,
+            clip.height / contentClip.height
+          )
+        ),
+        rect
+      );
     const kx = item.rect.width / contentClip.width;
     const ky = item.rect.height / contentClip.height;
     return {
@@ -831,6 +849,11 @@ class CanvasRenderer {
     );
     (_d = (_c = this.dprQuery).addEventListener) == null ? void 0 : _d.call(_c, "change", this.onPixelRatioChange);
   }
+  setUnloadable(unloadable) {
+    if (unloadable === this.unloadable) return;
+    this.unloadable = unloadable;
+    this.emit("unloadable", unloadable);
+  }
   emit(event, detail) {
     var _a;
     (_a = this.listeners.get(event)) == null ? void 0 : _a.forEach((listener) => listener(detail));

package/dist/lib/renderer/math/affine.mjs

@@ -31,6 +31,19 @@ function multiply(m, n) {
 function compose(...transforms) {
   return transforms.reduce((acc, t) => multiply(acc, t), IDENTITY);
 }
+function invert(m) {
+  const det = m.a * m.d - m.b * m.c;
+  if (!det || !Number.isFinite(det)) return null;
+  const inv = 1 / det;
+  return {
+    a: m.d * inv,
+    b: -m.b * inv,
+    c: -m.c * inv,
+    d: m.a * inv,
+    e: (m.c * m.f - m.d * m.e) * inv,
+    f: (m.b * m.e - m.a * m.f) * inv
+  };
+}
 function apply(m, p) {
   return { x: m.a * p.x + m.c * p.y + m.e, y: m.b * p.x + m.d * p.y + m.f };
 }
@@ -59,6 +72,7 @@ export {
   IDENTITY,
   apply,
   compose,
+  invert,
   multiply,
   rotate,
   scale,

package/dist/lib/renderer/scene/planFrame.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { worldToScreen, visibleWorldRect } from "../camera/Camera.mjs";
-import { compose, translate, scale } from "../math/affine.mjs";
+import { compose, scale, translate } from "../math/affine.mjs";
 import { intersects } from "../math/rect.mjs";
-import { pixelsToWorld } from "./sceneItem.mjs";
+import { pixelsToWorld, orientOf, shownPointToPixels, shownToPixels } from "./sceneItem.mjs";
 import { tilesInRegion, chooseLevel } from "../sources/tilePyramid.mjs";
 const TARGET_BAND = 1e7;
 const IN_FLIGHT_BAND = 15e6;
@@ -78,7 +78,7 @@ function planFrame(input) {
       view,
       translate(rect.x, rect.y),
       scale(k.x, k.y),
-      translate(-clip.x, -clip.y)
+      orientOf(item)
     );
     for (const level of paintLevels) {
       const addresses = level === 0 ? coarse : level === target ? fine : tilesInRegion(pyramid, level, area);
@@ -102,7 +102,7 @@ function planFrame(input) {
   return { draws, wants: dedupeWants(wants), levels };
 }
 function itemView(item, camera, viewport, pixelRatio) {
-  const { pyramid, clip, rect } = item;
+  const { pyramid, rect } = item;
   const visible = visibleWorldRect(camera, viewport);
   if (!intersects(visible, rect)) return null;
   const k = pixelsToWorld(item);
@@ -112,16 +112,16 @@ function itemView(item, camera, viewport, pixelRatio) {
   const y1 = Math.min(visible.y + visible.height, rect.y + rect.height);
   const imagePerDevice = 1 / (k.x * camera.zoom * pixelRatio);
   return {
-    area: {
-      x: clip.x + (x0 - rect.x) / k.x,
-      y: clip.y + (y0 - rect.y) / k.y,
+    area: shownToPixels(item, {
+      x: (x0 - rect.x) / k.x,
+      y: (y0 - rect.y) / k.y,
       width: (x1 - x0) / k.x,
       height: (y1 - y0) / k.y
-    },
-    center: {
-      x: clip.x + (camera.x - rect.x) / k.x,
-      y: clip.y + (camera.y - rect.y) / k.y
-    },
+    }),
+    center: shownPointToPixels(item, {
+      x: (camera.x - rect.x) / k.x,
+      y: (camera.y - rect.y) / k.y
+    }),
     target: chooseLevel(pyramid, imagePerDevice)
   };
 }

package/dist/lib/renderer/scene/regions.mjs

@@ -1,4 +1,13 @@
 "use client";
+function parseRotation(rotation) {
+  const match = /^(!)?(\d+(?:\.\d+)?)$/.exec((rotation == null ? void 0 : rotation.trim()) ?? "");
+  if (!match) return null;
+  const turned = Number(match[2]);
+  if (turned > 360) return null;
+  const degrees = turned % 360;
+  const mirror = Boolean(match[1]);
+  return degrees || mirror ? { degrees, mirror } : null;
+}
 function parseRegion(region, width, height) {
   if (!region) return null;
   let value = region.trim().replace(/^xywh=/, "");
@@ -26,5 +35,6 @@ function parseRegion(region, width, height) {
   return { x: x0, y: y0, width: x1 - x0, height: y1 - y0 };
 }
 export {
-  parseRegion
+  parseRegion,
+  parseRotation
 };

package/dist/lib/renderer/scene/sceneItem.mjs

@@ -1,6 +1,7 @@
 "use client";
-import { union } from "../math/rect.mjs";
-import { parseRegion } from "./regions.mjs";
+import { compose, scale, translate, invert, apply } from "../math/affine.mjs";
+import { union, transformRect } from "../math/rect.mjs";
+import { parseRegion, parseRotation } from "./regions.mjs";
 import { fetchInfo } from "../sources/imageService.mjs";
 import { servicePyramid, staticPyramid, tilesInRegion } from "../sources/tilePyramid.mjs";
 async function prepareItem(spec, context) {
@@ -37,6 +38,8 @@ async function prepareItem(spec, context) {
     width: contentClip.width * toPixelsX,
     height: contentClip.height * toPixelsY
   };
+  const rotation = parseRotation(spec.rotation);
+  const turn = rotation ? turnOf(clip, rotation) : void 0;
   const item = {
     id: spec.id,
     spec,
@@ -44,7 +47,8 @@ async function prepareItem(spec, context) {
     size,
     clip,
     contentClip,
-    rect: { x: 0, y: 0, width: contentClip.width, height: contentClip.height }
+    rect: { x: 0, y: 0, width: contentClip.width, height: contentClip.height },
+    ...turn ? { turn } : {}
   };
   await context.cache.prefetch(
     tilesInRegion(pyramid, 0, clip).map((address) => {
@@ -80,35 +84,94 @@ function prepareMedia(spec, media) {
     rect: { ...clip }
   };
 }
+function turnOf(clip, { degrees, mirror }) {
+  const radians = degrees * Math.PI / 180;
+  const exact = (value) => Math.abs(value) < 1e-12 ? 0 : value;
+  const cos = exact(Math.cos(radians));
+  const sin = exact(Math.sin(radians));
+  const width = Math.abs(clip.width * cos) + Math.abs(clip.height * sin);
+  const height = Math.abs(clip.width * sin) + Math.abs(clip.height * cos);
+  const orient = compose(
+    translate(width / 2, height / 2),
+    { a: cos, b: sin, c: -sin, d: cos, e: 0, f: 0 },
+    scale(mirror ? -1 : 1, 1),
+    translate(-(clip.x + clip.width / 2), -(clip.y + clip.height / 2))
+  );
+  return { orient, unorient: invert(orient), width, height };
+}
+function orientOf(item) {
+  var _a;
+  return ((_a = item.turn) == null ? void 0 : _a.orient) ?? translate(-item.clip.x, -item.clip.y);
+}
+function shownToPixels(item, rect) {
+  const { turn, clip } = item;
+  if (!turn) return { ...rect, x: clip.x + rect.x, y: clip.y + rect.y };
+  const box = transformRect(turn.unorient, rect);
+  const x = Math.max(box.x, clip.x);
+  const y = Math.max(box.y, clip.y);
+  return {
+    x,
+    y,
+    width: Math.max(0, Math.min(box.x + box.width, clip.x + clip.width) - x),
+    height: Math.max(0, Math.min(box.y + box.height, clip.y + clip.height) - y)
+  };
+}
+function shownPointToPixels(item, point) {
+  const { turn, clip } = item;
+  return turn ? apply(turn.unorient, point) : { x: clip.x + point.x, y: clip.y + point.y };
+}
+function shownContent(item) {
+  const { turn, clip, contentClip } = item;
+  if (!turn) return contentClip;
+  return {
+    width: turn.width * contentClip.width / clip.width,
+    height: turn.height * contentClip.height / clip.height
+  };
+}
 function layoutItems(items) {
   if (!items.length) return null;
   if (items.every((item) => item.spec.placement)) {
     for (const item of items) item.rect = { ...item.spec.placement };
     return union(items.map((item) => item.rect));
   }
-  const height = items[0].contentClip.height;
+  const height = shownContent(items[0]).height;
   let x = 0;
   for (const item of items) {
-    const width = item.contentClip.width * height / item.contentClip.height;
+    const shown = shownContent(item);
+    const width = shown.width * height / shown.height;
     item.rect = { x, y: 0, width, height };
     x += width;
   }
   return { x: 0, y: 0, width: x, height };
 }
 function pixelsToWorld(item) {
+  const shown = item.turn ?? item.clip;
   return {
-    x: item.rect.width / item.clip.width,
-    y: item.rect.height / item.clip.height
+    x: item.rect.width / shown.width,
+    y: item.rect.height / shown.height
   };
 }
+function itemToWorld(item) {
+  const k = pixelsToWorld(item);
+  return compose(
+    translate(item.rect.x, item.rect.y),
+    scale(k.x, k.y),
+    orientOf(item)
+  );
+}
 function sameSpec(a, b) {
   var _a, _b;
-  return a.service === b.service && a.url === b.url && a.width === b.width && a.height === b.height && a.region === b.region && ((_a = a.media) == null ? void 0 : _a.element) === ((_b = b.media) == null ? void 0 : _b.element) && JSON.stringify(a.placement) === JSON.stringify(b.placement);
+  return a.service === b.service && a.url === b.url && a.width === b.width && a.height === b.height && a.region === b.region && a.rotation === b.rotation && ((_a = a.media) == null ? void 0 : _a.element) === ((_b = b.media) == null ? void 0 : _b.element) && JSON.stringify(a.placement) === JSON.stringify(b.placement);
 }
 export {
   MEDIA_KEY_PREFIX,
+  itemToWorld,
   layoutItems,
+  orientOf,
   pixelsToWorld,
   prepareItem,
-  sameSpec
+  sameSpec,
+  shownPointToPixels,
+  shownToPixels,
+  turnOf
 };

package/dist/lib/time.mjs

@@ -15,7 +15,17 @@ function playFrom(element, seconds) {
   } catch {
   }
 }
+function parseTime(t) {
+  if (!t) return void 0;
+  const [rawStart, rawEnd] = t.split(",");
+  const start = Number(rawStart);
+  if (rawStart === "" || Number.isNaN(start)) return void 0;
+  if (rawEnd === void 0 || rawEnd === "") return { start };
+  const end = Number(rawEnd);
+  return Number.isNaN(end) ? { start } : { start, end };
+}
 export {
   formatTime,
+  parseTime,
   playFrom
 };

package/dist/map/index.d.mts

@@ -9,7 +9,8 @@ import React from 'react';
  * Every resource is upgraded to Presentation 4 on the way in, so no part is written for
  * several shapes. Presentation 2.1 and 3.0 are upgraded by `@iiif/parser`; Presentation 4
  * passes through untouched. The upgrader is imported on demand, so it costs nothing until
- * the first resource that needs it arrives.
+ * the first resource that needs it arrives, and its reader of Presentation 2 only with
+ * the first resource in 2.
  */
 export type Manifest = P4.Manifest;
 export type Presentation4Collection = P4.Collection;
@@ -56,6 +57,12 @@ export interface MapFeature {
 		title?: string;
 		titleLang?: string;
 		canvasId?: string;
+		/** The annotation it is a body of (Cookbook 0139), which a press on it selects. */
+		annotationId?: string;
+		/** The Collection's member it locates (Cookbook 0318), which a press on it opens. */
+		manifestId?: string;
+		/** Its owner's `navDate`, as written, shown with its name (Cookbook 0318). */
+		navDate?: string;
 	};
 }
 export interface MapFeatureCollection {
@@ -84,10 +91,13 @@ export interface Georeference {
 }
 export type Json = Record<string, any>;
 /**
- * Every navPlace feature of the Root's resource: the Collection's, the Manifest's, each
+ * Every navPlace feature of the Root's resource: the Collection's, each of its members'
+ * (Cookbook 0318: a Collection of Manifests, each where it is), the Manifest's, each
  * Canvas's, and each loaded annotation's (its `navPlace`, or a GeoJSON body as Cookbook
- * 0139 has). A feature from a Canvas or annotation names that Canvas. Memoized on the
- * Manifest (and the Collection), so the same collection comes back while nothing changes.
+ * 0139 has). A feature from a member names that member, the open one's place its own
+ * Manifest's where it gives one, in the member's place in the Collection's order; one
+ * from a Canvas or annotation names that Canvas. Memoized on the Manifest (and the
+ * Collection), so the same collection comes back while nothing changes.
  */
 export declare function navPlaceOf(manifest: Manifest | null, collection?: Presentation4Collection | null, language?: string): MapFeatureCollection;
 /**
@@ -182,6 +192,18 @@ export interface MapProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSel
 	request?: CloverRequest;
 	/** Standalone: the language to read IIIF text in. */
 	language?: string;
+	/**
+	 * Clover's higher-contrast mode: the accent kept to rings, outlines and marks, and never
+	 * under words or a glyph, where the controls' dark fill takes its place, edged in the
+	 * accent. Inside a `Root`, the Root's too; on wherever the reader's system asks for more
+	 * contrast. Default `false`.
+	 */
+	highContrast?: boolean;
+	/**
+	 * The basemap's credits, behind an ⓘ in the map's lower corner. Default true. A basemap's license
+	 * may ask for its credits: give them on the page yourself before setting this false.
+	 */
+	credits?: boolean;
 	as?: React.ElementType;
 }
 declare const CloverMap: React.ForwardRefExoticComponent<MapProps & React.RefAttributes<HTMLElement>>;

package/dist/react/fetchManifest.mjs

@@ -0,0 +1,19 @@
+"use client";
+import { loadManifest } from "../core/load.mjs";
+const fetched = /* @__PURE__ */ new WeakMap();
+function fetchManifest(clover, id) {
+  let byId = fetched.get(clover);
+  if (!byId) fetched.set(clover, byId = /* @__PURE__ */ new Map());
+  let manifest = byId.get(id);
+  if (!manifest) {
+    manifest = loadManifest(
+      { id, type: "Manifest" },
+      { request: clover.request }
+    ).catch(() => null);
+    byId.set(id, manifest);
+  }
+  return manifest;
+}
+export {
+  fetchManifest
+};

package/dist/react/hooks.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { useMemo } from "react";
-import { selectAnnotationSets } from "../core/annotation-sets.mjs";
+import { selectAnnotationCollection, selectAnnotationSets } from "../core/annotation-sets.mjs";
 import { navigationOf } from "../core/clover.mjs";
 import { selectPosition, selectSequence, selectVisibleCanvases, selectCanvas } from "../core/selectors.mjs";
 import { localize } from "../core/value.mjs";
@@ -40,6 +40,11 @@ function useNavigation() {
     [clover, position, total]
   );
 }
+function useAnnotationCollection() {
+  return useCloverSelector(
+    (state) => selectAnnotationCollection(state.manifest, state.addedSets)
+  );
+}
 function useAnnotationSets() {
   return useCloverSelector(
     (state) => selectAnnotationSets(state.manifest, state.addedSets)
@@ -57,6 +62,7 @@ function useLangOf() {
 }
 export {
   useActiveCanvas,
+  useAnnotationCollection,
   useAnnotationSets,
   useLangOf,
   useLocalized,

package/dist/react/readingLanguages.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { useMemo } from "react";
+import { descriptionLanguages, startingLanguage } from "../core/language-choice.mjs";
+import { useClover, useCloverSelector } from "./context.mjs";
+function useReadingLanguages() {
+  const { language, chooseLanguage } = useClover("About");
+  const manifest = useCloverSelector(
+    (state) => state.manifest
+  );
+  const languages = useMemo(() => descriptionLanguages(manifest), [manifest]);
+  const chosen = startingLanguage(languages, language);
+  return chosen && chooseLanguage ? { languages, chosen, onChange: chooseLanguage } : null;
+}
+export {
+  useReadingLanguages
+};

package/dist/react/usePagesReached.mjs

@@ -0,0 +1,42 @@
+"use client";
+import { useState, useEffect, useCallback } from "react";
+import { findEntry, selectManifestSets } from "../core/annotation-sets.mjs";
+import { selectVisibleCanvases } from "../core/selectors.mjs";
+import { useClover, useCloverSelector } from "./context.mjs";
+function usePagesReached(pages) {
+  const { clover } = useClover("Annotations");
+  const pickedPage = useCloverSelector(
+    (state) => {
+      var _a;
+      return state.annotationId ? (_a = findEntry(selectManifestSets(state.manifest), state.annotationId)) == null ? void 0 : _a.setId : void 0;
+    }
+  );
+  const visible = useCloverSelector(
+    (state) => selectVisibleCanvases(state.manifest, state.canvasId)
+  );
+  const [reached, setReached] = useState(0);
+  const run = pages.findIndex((page) => !page.fetched);
+  const loaded = run === -1 ? pages.length : run;
+  const viewPage = pages.reduce(
+    (last, page, index) => visible.some((canvas) => canvas.id === page.canvasId) ? index : last,
+    -1
+  );
+  const upTo = Math.max(
+    reached,
+    pages.findIndex((page) => page.id === pickedPage),
+    viewPage,
+    0
+  );
+  useEffect(() => {
+    const missing = pages.slice(0, upTo + 1).filter((page) => !page.fetched).map((page) => page.id);
+    if (missing.length) clover.fetchAnnotationPages(missing);
+  }, [clover, pages, upTo]);
+  const reachNext = useCallback(
+    () => setReached((was) => Math.max(was, loaded)),
+    [loaded]
+  );
+  return { loaded, more: loaded < pages.length, reachNext };
+}
+export {
+  usePagesReached
+};