@nulib/clover 4.0.0-beta.1 → 4.1.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/gltf/load.mjs

@@ -37,19 +37,21 @@ async function fetchBytes(uri, base, request) {
   return response.arrayBuffer();
 }
 const loading = /* @__PURE__ */ new WeakMap();
-function loadGltf(url, request) {
+function loadGltf(url, request, maxTextureSize) {
   const run = (request == null ? void 0 : request.fetch) ?? globalThis.fetch;
   const loads = loading.get(run) ?? /* @__PURE__ */ new Map();
   loading.set(run, loads);
-  const key = `${requestKey(request)} ${url}`;
+  const key = `${requestKey(request)} ${maxTextureSize ?? ""} ${url}`;
   let load = loads.get(key);
   if (!load) {
-    load = readGltf(url, request).finally(() => loads.delete(key));
+    load = readGltf(url, request, maxTextureSize).finally(
+      () => loads.delete(key)
+    );
     loads.set(key, load);
   }
   return load;
 }
-async function readGltf(url, request) {
+async function readGltf(url, request, maxTextureSize) {
   const data = await fetchBytes(url, location.href, request);
   const glb = new DataView(data).getUint32(0, true) === GLB;
   const { json, bin } = glb ? parseGlb(data) : { json: JSON.parse(new TextDecoder().decode(data)) };
@@ -88,10 +90,15 @@ async function readGltf(url, request) {
             type: image.mimeType
           });
         } else return null;
-        return await createImageBitmap(blob, {
+        const options = {
           premultiplyAlpha: "none",
           colorSpaceConversion: "none"
-        });
+        };
+        return await fitted(
+          await createImageBitmap(blob, options),
+          maxTextureSize,
+          options
+        );
       } catch {
         return null;
       }
@@ -99,6 +106,19 @@ async function readGltf(url, request) {
   );
   return { json, buffers, images };
 }
+async function fitted(bitmap, most, options) {
+  const longest = Math.max(bitmap.width, bitmap.height);
+  if (!most || longest <= most) return bitmap;
+  const ratio = most / longest;
+  const resized = await createImageBitmap(bitmap, {
+    ...options,
+    resizeWidth: Math.max(1, Math.floor(bitmap.width * ratio)),
+    resizeHeight: Math.max(1, Math.floor(bitmap.height * ratio)),
+    resizeQuality: "high"
+  });
+  bitmap.close();
+  return resized;
+}
 const COMPONENTS = {
   SCALAR: 1,
   VEC2: 2,

package/dist/lib/renderer/CanvasRenderer.mjs

@@ -4,7 +4,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { claimContext, returnContext } from "./backends/contexts.mjs";
 import { WebGL2Backend } from "./backends/webgl2/WebGL2Backend.mjs";
-import { fitCamera, visibleWorldRect, screenPointToWorld, anchoredCenter, worldPointToScreen, sameCamera } from "./camera/Camera.mjs";
+import { fitCamera, anchoredCenter, visibleWorldRect, screenPointToWorld, worldPointToScreen, sameCamera } from "./camera/Camera.mjs";
 import { CameraAnimator } from "./camera/CameraAnimator.mjs";
 import { GestureController, DEFAULT_GESTURES } from "./input/GestureController.mjs";
 import { TileCache } from "./io/TileCache.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, rectCenter, 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,
@@ -29,15 +29,15 @@ const MAX_CONTEXT_LOSSES = 3;
 const ANNOTATION_PADDING = 0.1;
 const ZOOM_EPSILON = 1e-6;
 const NO_INSET = { top: 0, right: 0, bottom: 0, left: 0 };
-function readInset(host) {
-  if (typeof getComputedStyle !== "function") return NO_INSET;
-  const style = getComputedStyle(host);
-  const px = (value) => parseFloat(value) || 0;
+function readInset(element, box = "padding") {
+  if (!element || typeof getComputedStyle !== "function") return NO_INSET;
+  const style = getComputedStyle(element);
+  const px = (side) => parseFloat(style.getPropertyValue(`${box}-${side}`)) || 0;
   return {
-    top: px(style.paddingTop),
-    right: px(style.paddingRight),
-    bottom: px(style.paddingBottom),
-    left: px(style.paddingLeft)
+    top: px("top"),
+    right: px("right"),
+    bottom: px("bottom"),
+    left: px("left")
   };
 }
 const sameInset = (a, b) => a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left;
@@ -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([]);
@@ -322,20 +329,38 @@ class CanvasRenderer {
     }
     return true;
   }
-  /** Frame `bounds` (world units) in the viewport. */
-  fitBounds(bounds, immediate = false) {
-    const target = fitCamera(
-      bounds,
-      this.viewport,
-      this.camera.destination.rotation,
-      0
-    );
+  /** Frame `bounds` (world units) in the viewport, or in the part of it `inset` leaves. */
+  fitBounds(bounds, immediate = false, inset = NO_INSET) {
+    const target = this.fit(bounds, this.camera.destination.rotation, inset);
     this.atHome = false;
     this.animateTo(
       this.constrain(target, { allowBeyondLimits: true }),
       immediate
     );
   }
+  /**
+   * The camera that frames `bounds`, turned by `rotation`, in the part of the viewport
+   * `inset` leaves: centered there, off the viewport's center where its sides differ.
+   */
+  fit(bounds, rotation, { top, right, bottom, left }) {
+    const { width, height } = this.viewport;
+    const { zoom } = fitCamera(
+      bounds,
+      {
+        width: Math.max(1, width - left - right),
+        height: Math.max(1, height - top - bottom)
+      },
+      rotation
+    );
+    const center = anchoredCenter(
+      rectCenter(bounds),
+      { x: (width + left - right) / 2, y: (height + top - bottom) / 2 },
+      zoom,
+      rotation,
+      this.viewport
+    );
+    return { ...center, zoom, rotation };
+  }
   /**
    * Zoom to a rectangle in item `index`'s own coordinates — an annotation's `xywh` — with
    * OpenSeadragon's padding.
@@ -344,8 +369,12 @@ class CanvasRenderer {
     const world = this.itemRectToWorld(index, rect);
     if (world) this.fitAnnotation(world, immediate);
   }
-  /** Zoom to a world rectangle with OpenSeadragon's annotation padding. */
+  /**
+   * Zoom to a world rectangle with OpenSeadragon's annotation padding, clear of the
+   * controls over the view (the hotspots' layer's scroll padding, `Annotations.css`).
+   */
   fitAnnotation(world, immediate = false) {
+    var _a;
     const first = this.items[0];
     if (!first) return;
     const pad = first.rect.width * ANNOTATION_PADDING;
@@ -356,7 +385,8 @@ class CanvasRenderer {
         width: world.width + pad * 2,
         height: world.height + pad * 2
       },
-      immediate
+      immediate,
+      readInset((_a = this.overlays) == null ? void 0 : _a.container, "scroll-padding")
     );
   }
   /** The world rectangle currently visible (its bounding box when rotated). */
@@ -493,7 +523,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 {
@@ -645,18 +686,7 @@ class CanvasRenderer {
     if (!this.worldBounds) return null;
     const turn = 2 * Math.PI;
     const upright = Math.round(this.camera.destination.rotation / turn) * turn || 0;
-    const { top, right, bottom, left } = this.inset;
-    const camera = fitCamera(
-      this.worldBounds,
-      {
-        width: Math.max(1, this.viewport.width - left - right),
-        height: Math.max(1, this.viewport.height - top - bottom)
-      },
-      upright
-    );
-    camera.x -= (left - right) / 2 / camera.zoom;
-    camera.y -= (top - bottom) / 2 / camera.zoom;
-    return camera;
+    return this.fit(this.worldBounds, upright, this.inset);
   }
   /**
    * Keep the camera usable: zoom within limits, and the center over the world so the
@@ -831,6 +861,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/camera/Camera.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { apply, compose, rotate, translate, scale } from "../math/affine.mjs";
+import { apply, compose, rotate, scale, translate } from "../math/affine.mjs";
 import { transformRect, rectCenter } from "../math/rect.mjs";
 function worldToScreen(camera, viewport) {
   return compose(

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
+};