@nulib/clover 4.3.0 → 4.4.0

package/dist/components/Canvas/CanvasView.mjs

@@ -743,6 +743,10 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
             autoPlay: !player && stills.length > 0 && model.quietlyOpened !== canvasKey,
             language,
             notes: model.timed,
+            marked: model.placed,
+            selectedAnnotation: model.selected,
+            onAnnotationSelect: hasAnnotations ? model.select : void 0,
+            onAnnotationActivate: model.activate,
             player: player && canvases ? {
               canvas: canvases[0],
               title: ownName,

package/dist/components/Canvas/media/MediaBody.mjs

@@ -35,6 +35,10 @@ const MediaBody = ({
   onChapterHighlight,
   language: givenLanguage,
   notes,
+  marked,
+  selectedAnnotation,
+  onAnnotationSelect,
+  onAnnotationActivate,
   player
 }) => {
   var _a, _b;
@@ -191,6 +195,31 @@ const MediaBody = ({
     ),
     [notes, currentTime]
   );
+  const marking = useMemo(() => {
+    var _a2, _b2;
+    const byId = /* @__PURE__ */ new Map();
+    const marks = [];
+    for (const annotation of [
+      ...notes ?? [],
+      ...(marked ?? []).filter((each) => {
+        var _a3;
+        return (_a3 = each.track) == null ? void 0 : _a3.length;
+      })
+    ]) {
+      const start = "start" in annotation ? annotation.start : (_b2 = (_a2 = annotation.track) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.start;
+      if (start === void 0 || !annotation.label || byId.has(annotation.id))
+        continue;
+      byId.set(annotation.id, annotation);
+      marks.push({
+        id: annotation.id,
+        start,
+        label: annotation.label,
+        lang: annotation.lang
+      });
+    }
+    marks.sort((a, b) => a.start - b.start);
+    return { marks, byId };
+  }, [notes, marked]);
   const transport = /* @__PURE__ */ jsx(
     Transport,
     {
@@ -213,7 +242,14 @@ const MediaBody = ({
       highlightedChapter,
       onChapterHighlight,
       request,
-      fill
+      fill,
+      marks: marking.marks,
+      selectedMark: selectedAnnotation,
+      onMarkSelect: onAnnotationSelect && ((id) => {
+        const annotation = marking.byId.get(id);
+        if (annotation) onAnnotationSelect(annotation);
+      }),
+      onMarkActivate: onAnnotationActivate
     }
   );
   const noteLines = playing.map((note) => /* @__PURE__ */ jsxs(
@@ -268,15 +304,7 @@ const MediaBody = ({
               language
             }
           ),
-          playing.length > 0 && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "clover-canvas-captions clover-canvas-player-notes",
-              "aria-live": "off",
-              children: noteLines
-            }
-          ),
-          cues.length > 0 && /* @__PURE__ */ jsx("div", { className: "clover-canvas-captions", "aria-live": "off", children: captionLines }),
+          /* @__PURE__ */ jsx("div", { className: "clover-canvas-player-cues", children: cues.length > 0 && /* @__PURE__ */ jsx("div", { className: "clover-canvas-captions", "aria-live": "off", children: captionLines }) }),
           transport,
           /* @__PURE__ */ jsx(BodyUnloadable, { kind: media.kind, shown: failed, room: true })
         ] })

package/dist/components/Canvas/media/SeekMarks.mjs

@@ -0,0 +1,236 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useState, useLayoutEffect, useMemo } from "react";
+import { alongBar } from "./seekGaps.mjs";
+import { Steps } from "../../../ui/Steps.mjs";
+import { hideUntilBack } from "../../../ui/Tip.mjs";
+import { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
+import { languageProps } from "../../../i18n/direction.mjs";
+import { formatTime } from "../../../lib/time.mjs";
+const THUMB = 12;
+function groupMarks(marks, duration, width, target) {
+  const x = (mark) => THUMB / 2 + (width - THUMB) * (mark.start / duration);
+  const groups = [];
+  for (const mark of marks) {
+    const group = groups[groups.length - 1];
+    const near = group ? width > 0 ? x(mark) - x(group[0]) < target : mark.start === group[0].start : false;
+    if (near) group.push(mark);
+    else groups.push([mark]);
+  }
+  return groups;
+}
+const SCROLL_KEYS = {
+  ArrowDown: (words) => parseFloat(getComputedStyle(words).lineHeight) || 16,
+  ArrowUp: (words) => -(parseFloat(getComputedStyle(words).lineHeight) || 16),
+  PageDown: (words) => words.clientHeight,
+  PageUp: (words) => -words.clientHeight
+};
+function scrollWords(event) {
+  const words = event.currentTarget.querySelector(
+    ".clover-canvas-transport-mark-words"
+  );
+  const by = SCROLL_KEYS[event.key];
+  if (!words || !by || event.altKey || event.ctrlKey || event.metaKey)
+    return false;
+  const delta = by(words);
+  const room = delta > 0 ? words.scrollHeight - words.clientHeight - words.scrollTop : words.scrollTop;
+  if (room < 1) return false;
+  event.preventDefault();
+  words.scrollBy({ top: delta });
+  return true;
+}
+function SeekMarks({
+  marks,
+  duration,
+  selected,
+  onSelect,
+  onActivate
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const toolbar = useRef(null);
+  const [bar, setBar] = useState({ width: 0, target: 0, from: 0 });
+  useLayoutEffect(() => {
+    const element = toolbar.current;
+    if (!element) return;
+    const body = element.closest(".clover-canvas-media");
+    const measure = () => {
+      const button = element.querySelector(
+        ".clover-canvas-transport-mark"
+      );
+      const next = {
+        width: element.clientWidth,
+        target: (button == null ? void 0 : button.offsetWidth) ?? 0,
+        from: body ? element.getBoundingClientRect().left - body.getBoundingClientRect().left : 0
+      };
+      setBar(
+        (was) => was.width === next.width && was.target === next.target && was.from === next.from ? was : next
+      );
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    if (body) observer.observe(body);
+    return () => observer.disconnect();
+  }, []);
+  const groups = useMemo(
+    () => groupMarks(marks, duration, bar.width, bar.target),
+    [marks, duration, bar]
+  );
+  const [stepped, setStepped] = useState({});
+  const shownIn = (group) => {
+    const picked = group.findIndex((mark) => mark.id === selected);
+    if (picked >= 0) return picked;
+    return Math.min(stepped[group[0].id] ?? 0, group.length - 1);
+  };
+  const [focused, setFocused] = useState(null);
+  const [lit, setLit] = useState(null);
+  const light = (id) => {
+    setLit(id);
+    onActivate == null ? void 0 : onActivate(id);
+  };
+  const buttons = useRef([]);
+  const escaped = useRef(/* @__PURE__ */ new Set());
+  if (!marks.length || !(duration > 0)) return null;
+  const holds = (group, id) => Boolean(id) && group.some((mark) => mark.id === id);
+  const stop = Math.max(
+    0,
+    groups.findIndex((group) => holds(group, focused ?? selected))
+  );
+  const moveTo = (index) => {
+    var _a;
+    const next = Math.min(groups.length - 1, Math.max(0, index));
+    (_a = buttons.current[next]) == null ? void 0 : _a.focus();
+  };
+  const along = (group) => alongBar(group[0].start / duration * 100);
+  const inBody = (group) => `${bar.from + THUMB / 2 + (bar.width - THUMB) * (group[0].start / duration)}px`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "clover-canvas-transport-points", "aria-hidden": "true", children: groups.map((group) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "clover-canvas-transport-mark-point",
+        "data-active": holds(group, lit) || holds(group, selected) ? "true" : void 0,
+        style: { left: along(group) }
+      },
+      group[0].id
+    )) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: toolbar,
+        className: "clover-canvas-transport-marks",
+        role: "toolbar",
+        "aria-label": t("informationPanelTabsAnnotations"),
+        lang: langOf("informationPanelTabsAnnotations"),
+        onKeyDown: (event) => {
+          const index = buttons.current.findIndex(
+            (button) => button === document.activeElement
+          );
+          if (index < 0) return;
+          const step = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+          if (event.key === "ArrowRight") moveTo(index + step);
+          else if (event.key === "ArrowLeft") moveTo(index - step);
+          else if (event.key === "Home") moveTo(0);
+          else if (event.key === "End") moveTo(groups.length - 1);
+          else return;
+          event.preventDefault();
+        },
+        children: groups.map((group, index) => {
+          const shown = shownIn(group);
+          const mark = group[shown];
+          const time = formatTime(mark.start);
+          const place = group.length > 1 ? ` ${shown + 1} / ${group.length}` : "";
+          const show = (to) => {
+            setStepped((was) => ({ ...was, [group[0].id]: to }));
+            light(group[to].id);
+            onSelect(group[to].id);
+          };
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "clover-canvas-transport-mark-group",
+              style: {
+                left: along(group),
+                ...bar.width > 0 && { "--clover-mark-x": inBody(group) }
+              },
+              onPointerEnter: () => {
+                escaped.current.delete(group[0].id);
+                light(mark.id);
+              },
+              onPointerLeave: () => light(null),
+              onFocus: () => {
+                escaped.current.delete(group[0].id);
+                setFocused(mark.id);
+                light(mark.id);
+              },
+              onBlur: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget))
+                  light(null);
+              },
+              onKeyDown: (event) => {
+                if (event.defaultPrevented) return;
+                if (scrollWords(event)) return;
+                if (event.key !== "Escape") return;
+                if (escaped.current.has(group[0].id)) return;
+                event.preventDefault();
+                escaped.current.add(group[0].id);
+                const point = buttons.current[index];
+                if (point && document.activeElement !== point) point.focus();
+                hideUntilBack(event.currentTarget, "tipHidden", [
+                  "pointerenter",
+                  "focusin"
+                ]);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: (button) => {
+                      buttons.current[index] = button;
+                    },
+                    type: "button",
+                    className: "clover-canvas-transport-mark",
+                    tabIndex: index === stop ? 0 : -1,
+                    "aria-label": `${time} ${mark.label}${place}`,
+                    ...languageProps(mark.lang),
+                    "aria-current": holds(group, selected) ? "true" : void 0,
+                    "data-active": holds(group, selected) ? "true" : void 0,
+                    onClick: () => onSelect(mark.id)
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "clover-tip clover-canvas-transport-mark-tip", children: [
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: "clover-canvas-transport-mark-words",
+                      "aria-hidden": "true",
+                      ...languageProps(mark.lang),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "clover-tip-lead", children: time }),
+                        mark.label
+                      ]
+                    }
+                  ),
+                  group.length > 1 && /* @__PURE__ */ jsx(
+                    Steps,
+                    {
+                      steps: {
+                        position: shown,
+                        total: group.length,
+                        step: (by) => show(shown + by)
+                      }
+                    }
+                  )
+                ] })
+              ]
+            },
+            group[0].id
+          );
+        })
+      }
+    )
+  ] });
+}
+export {
+  SeekMarks,
+  groupMarks
+};

package/dist/components/Canvas/media/Transport.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useRef, useState, useLayoutEffect, useMemo, useEffect } from "react";
+import { useRef, useState, useLayoutEffect, useMemo, Suspense, lazy, useEffect } from "react";
 import { TransportButton } from "./TransportButton.mjs";
 import { useBarHeight } from "./useBarHeight.mjs";
 import { gapsOf, gapMask, alongBar, lengthOnBar, seekShare } from "./seekGaps.mjs";
@@ -20,6 +20,10 @@ import { languageProps } from "../../../i18n/direction.mjs";
 import { adoptSheet } from "../../../ui/adoptSheet.mjs";
 import __clover_sheet_media from "../../../ui/sheets/media.mjs";
 import { formatTime } from "../../../lib/time.mjs";
+const SeekMarks = lazy(
+  () => import("./SeekMarks.mjs").then(({ SeekMarks: SeekMarks2 }) => ({ default: SeekMarks2 }))
+);
+const SEEK_MARKS = ".clover-canvas-transport-marks";
 const chapterPicture = (chapter) => typeof (chapter == null ? void 0 : chapter.thumbnail) === "string" ? { src: chapter.thumbnail } : imageSource(chapter == null ? void 0 : chapter.thumbnail);
 function chapterAt(chapters, time) {
   var _a;
@@ -242,7 +246,11 @@ const Transport = ({
   highlightedChapter = null,
   onChapterHighlight,
   request,
-  fill
+  fill,
+  marks = [],
+  selectedMark,
+  onMarkSelect,
+  onMarkActivate
 }) => {
   var _a, _b;
   const { t, langOf } = useCloverTranslation();
@@ -352,8 +360,13 @@ const Transport = ({
             ref: seekArea,
             className: "clover-canvas-transport-seek-area",
             onPointerMove: (event) => {
-              if (!duration || event.target.closest(".clover-tip"))
+              const over = event.target;
+              if (over.closest(SEEK_MARKS)) {
+                setPointing(false);
+                point(-1);
                 return;
+              }
+              if (!duration || over.closest(".clover-tip")) return;
               const at = seekShare(event.currentTarget, event.clientX) * duration;
               setPointing(true);
               setPointedAt(Math.floor(at));
@@ -370,6 +383,16 @@ const Transport = ({
               )
             } : void 0,
             children: [
+              onMarkSelect && marks.length > 0 && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+                SeekMarks,
+                {
+                  marks,
+                  duration,
+                  selected: selectedMark,
+                  onSelect: onMarkSelect,
+                  onActivate: onMarkActivate
+                }
+              ) }),
               /* @__PURE__ */ jsx(
                 "input",
                 {

package/dist/components/Canvas/media/useMediaElement.mjs

@@ -34,19 +34,10 @@ function useMediaElement(media, { request, language }) {
           if (!canceled && url) video.poster = url;
         }
       );
-    media.captions.forEach((caption, index) => {
-      const track = document.createElement("track");
-      track.kind = caption.kind;
-      if (caption.language) track.srclang = caption.language;
-      track.label = captionName(caption, index, languageRef.current).text;
-      video.appendChild(track);
-      loadVtt(caption.id, requestRef.current).then((text) => {
-        if (!canceled) addCues(track.track, text);
-      }).catch(() => void 0);
-    });
     let hls = null;
+    let attached = Promise.resolve();
     if (isHls(media.src, media.format)) {
-      import("hls.js").then(({ default: Hls }) => {
+      attached = import("hls.js").then(({ default: Hls }) => {
         if (canceled) return;
         if (!Hls.isSupported()) {
           video.src = media.src;
@@ -72,6 +63,22 @@ function useMediaElement(media, { request, language }) {
     } else {
       video.src = media.src;
     }
+    media.captions.forEach((caption, index) => {
+      const track = document.createElement("track");
+      track.kind = caption.kind;
+      if (caption.language) track.srclang = caption.language;
+      track.label = captionName(caption, index, languageRef.current).text;
+      video.appendChild(track);
+      Promise.all([loadVtt(caption.id, requestRef.current), attached]).then(([text]) => {
+        if (canceled) return;
+        addCues(track.track, text);
+        whenSettled(track, () => {
+          var _a, _b;
+          if (!canceled && !((_b = (_a = track.track) == null ? void 0 : _a.cues) == null ? void 0 : _b.length))
+            addCues(track.track, text);
+        });
+      }).catch(() => void 0);
+    });
     for (const track of Array.from(video.textTracks ?? [])) {
       track.mode = "hidden";
     }
@@ -106,6 +113,11 @@ function useMediaElement(media, { request, language }) {
   ]);
   return element;
 }
+function whenSettled(element, then) {
+  if (element.readyState >= HTMLTrackElement.LOADED) return;
+  element.addEventListener("load", then, { once: true });
+  element.addEventListener("error", then, { once: true });
+}
 function addCues(track, text) {
   if (!track || typeof VTTCue === "undefined") return;
   for (const { id, start, end, settings, raw } of vttBlocks(text)) {

package/dist/components/Items/Item.mjs

@@ -9,6 +9,7 @@ import { watchClamp } from "./clamped.mjs";
 import { languageProps } from "../../i18n/direction.mjs";
 import { readDate } from "../../core/dates.mjs";
 import { formatTime } from "../../lib/time.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
 const NavDate = lazy(
   () => import("../../ui/NavDate.mjs").then(({ NavDate: NavDate2 }) => ({ default: NavDate2 }))
 );
@@ -131,7 +132,8 @@ function ItemFigure({
   language,
   request,
   showSummary = false,
-  secondary = "summary"
+  secondary = "summary",
+  labels: shown = true
 }) {
   var _a, _b;
   const labels = item.parts.map(
@@ -163,26 +165,33 @@ function ItemFigure({
             part.id
           );
         }) }),
-        (labeled || navDate || (summary == null ? void 0 : summary.text)) && /* @__PURE__ */ jsxs("figcaption", { className: "clover-items-caption", children: [
-          labels.map((label, index) => /* @__PURE__ */ jsx(
-            ItemLabel,
-            {
-              text: label.text,
-              lang: label.lang,
-              first: index === 0
-            },
-            item.parts[index].id
-          )),
-          navDate && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(NavDate, { value: item.navDate, className: "clover-items-date" }) }),
-          (summary == null ? void 0 : summary.text) && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "clover-items-summary",
-              ...languageProps(summary.lang),
-              children: summary.text.replace(/<[^>]*>/g, "")
-            }
-          )
-        ] })
+        (labeled || navDate || (summary == null ? void 0 : summary.text)) && /* @__PURE__ */ jsxs(
+          "figcaption",
+          {
+            className: "clover-items-caption",
+            style: shown ? void 0 : visuallyHidden,
+            children: [
+              labels.map((label, index) => /* @__PURE__ */ jsx(
+                ItemLabel,
+                {
+                  text: label.text,
+                  lang: label.lang,
+                  first: index === 0
+                },
+                item.parts[index].id
+              )),
+              navDate && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(NavDate, { value: item.navDate, className: "clover-items-date" }) }),
+              (summary == null ? void 0 : summary.text) && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "clover-items-summary",
+                  ...languageProps(summary.lang),
+                  children: summary.text.replace(/<[^>]*>/g, "")
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );

package/dist/components/Items/Items.mjs

@@ -188,6 +188,7 @@ function ItemsView({
   language,
   showSummary = false,
   secondary = "summary",
+  labels = true,
   heading,
   headingLevel = 2,
   renderItem,
@@ -293,7 +294,8 @@ function ItemsView({
       language,
       request,
       showSummary,
-      secondary
+      secondary,
+      labels
     }
   );
   const positioned = (item) => !(renderItem || localize(item.label, language).text || showSummary && secondary === "summary" && localize(item.summary, language).text);

package/dist/components/Items/PagerLayout.mjs

@@ -19,6 +19,7 @@ function PagerLayout({
   navigation,
   of,
   secondary,
+  labels,
   singleItem,
   /* eslint-enable @typescript-eslint/no-unused-vars */
   highContrast,

package/dist/components/Map/MapView.mjs

@@ -169,6 +169,7 @@ function MapView({
   styleUrl,
   workerUrl,
   scrollZoom = false,
+  zoom,
   onSelect,
   request,
   forwardedRef,
@@ -561,20 +562,20 @@ function MapView({
     const extent = bounds.flat().join();
     if (extent === framed.current) return;
     framed.current = extent;
-    frame(map, bounds, POINT_ZOOM);
-  }, [map, features, overlays, overlay]);
+    frame(map, bounds, zoom ?? POINT_ZOOM, zoom);
+  }, [map, features, overlays, overlay, zoom]);
   const choose = (feature) => {
     var _a;
     const bounds = boundsOf([feature]);
     if (map && bounds) {
-      frame(map, bounds, Math.max(map.getZoom(), POINT_ZOOM));
+      frame(map, bounds, Math.max(map.getZoom(), zoom ?? POINT_ZOOM), zoom);
       (_a = name.current) == null ? void 0 : _a.call(name, feature, center(bounds));
     }
     onSelect == null ? void 0 : onSelect(feature);
   };
   const show = (item) => {
     const bounds = boundsOf([], [item]);
-    if (map && bounds) frame(map, bounds, POINT_ZOOM);
+    if (map && bounds) frame(map, bounds, zoom ?? POINT_ZOOM, zoom);
   };
   return /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsxs(
     Tag,
@@ -676,12 +677,12 @@ function MapView({
     }
   ) });
 }
-function frame(map, bounds, zoom) {
+function frame(map, bounds, zoom, most = 12) {
   const [[west, south], [east, north]] = bounds;
   if (west === east && south === north) {
     map.jumpTo({ center: [west, south], zoom });
   } else {
-    map.fitBounds(bounds, { padding: 32, maxZoom: 12, duration: 0 });
+    map.fitBounds(bounds, { padding: 32, maxZoom: most, duration: 0 });
   }
 }
 function center([[west, south], [east, north]]) {

package/dist/components/Panel/PanelToggle.mjs

@@ -6,7 +6,8 @@ import Button from "../../ui/Button.mjs";
 function PanelToggle({
   open,
   onOpenChange,
-  controls
+  controls,
+  side
 }) {
   const { t, langOf } = useCloverTranslation();
   const id = useUniqueId().replace(/:/g, "");
@@ -18,6 +19,7 @@ function PanelToggle({
       lang: langOf("informationPanelToggle"),
       expanded: open,
       controls,
+      side: side === "start" ? side : void 0,
       onClick: () => onOpenChange(!open),
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(

package/dist/index.d.mts

@@ -1434,6 +1434,12 @@ export interface ItemsProps extends Omit<React.HTMLAttributes<HTMLElement>, "onS
 	 * `summary` (the default), its `navDate`, or `none`. Default `"summary"`.
 	 */
 	secondary?: ItemSecondary;
+	/**
+	 * Show each item's label, and the line under it, beside its picture (`true`, the
+	 * default). `false` shows the pictures alone: the labels are hidden from sight but kept
+	 * as each item's name for assistive technology (WCAG 4.1.2). Default `true`.
+	 */
+	labels?: boolean;
 	/**
 	 * The pager's size: `large` (the default), round controls; or `small`, its steps and
 	 * count as Search's are, for a header's line. Default `"large"`.
@@ -2164,6 +2170,12 @@ export interface MapProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSel
 	workerUrl?: string;
 	/** Zoom with the wheel or trackpad. Default false, so an embedded map never traps page scroll. */
 	scrollZoom?: boolean;
+	/**
+	 * How close it frames its places: a lone point at this zoom, and several no closer.
+	 * Default 8 for a point, a region around it, and 12 for several; 15 shows a point's
+	 * streets (Mat, 2026-11-04: "zoom map to street level").
+	 */
+	zoom?: number;
 	/**
 	 * A place was chosen, on the map or in its list. Inside a `Root`, choosing one on a
 	 * Canvas also goes there.
@@ -2230,6 +2242,11 @@ export interface PanelToggleProps {
 	onOpenChange: (open: boolean) => void;
 	/** The panel's `id`, for `aria-controls`. */
 	controls?: string;
+	/**
+	 * The side of the Body the panel is on: `"end"` (the default) or `"start"`. Among the
+	 * Body's controls it keeps that side's top corner, and its glyph draws the panel there.
+	 */
+	side?: "start" | "end";
 }
 /**
  * A button that shows and hides an `Panel`. It is styled as a Canvas control,
@@ -2242,7 +2259,7 @@ export interface PanelToggleProps {
  * <Clover.Panel id="panel" hidden={!open} />
  * ```
  */
-export declare function PanelToggle({ open, onOpenChange, controls, }: PanelToggleProps): React.JSX.Element;
+export declare function PanelToggle({ open, onOpenChange, controls, side, }: PanelToggleProps): React.JSX.Element;
 /**
  * EXPERIMENTAL. Clover's own 2D renderer for images, video and sound, drawn with WebGL2
  * and falling back to Canvas2D.
@@ -2403,8 +2420,14 @@ export declare function useNavigation(): Navigation;
  * (`entries`); null where there are none. `Items of="annotations"` walks them.
  */
 export declare function useAnnotationCollection(): AnnotationCollection | null;
-/** Every annotation set: the Manifest's own (fetched so far) and any the host added. */
-export declare function useAnnotationSets(): AnnotationSet[];
+/**
+ * Each AnnotationPage the Manifest's Canvases carry (as far as fetched), and each the host
+ * added through the Root's `annotations`, read as a set: its `id`, `label` and annotations
+ * (`entries`), painting annotations and caption files left out.
+ */
+export declare function useAnnotationPages(): AnnotationSet[];
+/** @deprecated `useAnnotationPages`, the same hook named for what it reads. */
+export declare const useAnnotationSets: typeof useAnnotationPages;
 /** A IIIF language map as text in the Root's language, with the tag it is in. */
 export declare function useLocalized(value: LanguageMapLike): LocalizedValue;
 /** Clover's interface strings in the current language: `t("commonClose")`. */