@nulib/clover 4.4.2 → 4.5.0

package/dist/templates/index.d.mts

@@ -183,8 +183,9 @@ export interface ContentStateOutput {
  * state (JSON or base64url). The resource may be a Manifest, a Collection (its first
  * Manifest is shown), a lone Canvas (its `partOf` Manifest, or a Manifest made around
  * it), or annotations, an AnnotationPage or AnnotationCollection (the Manifest their first
- * annotation's Canvas is `partOf`, at that Canvas). Everything is fetched once, with the
- * request settings, and upgraded to Presentation 4.
+ * annotation's Canvas is `partOf`, at that Canvas). It may also be a IIIF Image service,
+ * its `info.json` or its base URI, shown as the one image it is (`imageServiceContent`).
+ * Everything is fetched once, with the request settings, and upgraded to Presentation 4.
  */
 export type IIIFContent = string | Record<string, unknown>;
 /**
@@ -372,6 +373,11 @@ export interface CloverCanvasOptions {
 	maxZoomPixelRatio?: number;
 	/** Smallest zoom, as a fraction of the home zoom. Default 0.9. */
 	minZoomImageRatio?: number;
+	/**
+	 * Whether home may enlarge the image past `maxZoomPixelRatio` to fill the box. False,
+	 * home stops at that zoom and centers the image, smaller than the box. Default true.
+	 */
+	upscale?: boolean;
 	/** Seconds for an animation to close most of its distance. 0 disables easing. */
 	animationTime?: number;
 	/**
@@ -462,6 +468,12 @@ export interface ItemsProps extends Omit<React.HTMLAttributes<HTMLElement>, "onS
 	 * under the one above it, still in reading order, left to right.
 	 */
 	layout?: ItemsLayout;
+	/**
+	 * The slider's direction: a row (`horizontal`), or a column (`vertical`) that fills
+	 * the height of what holds it, as a filmstrip beside the Body, its pictures as wide as
+	 * the column. Default `"horizontal"`.
+	 */
+	orientation?: "horizontal" | "vertical";
 	/**
 	 * The line under an item's label, where it has one (a Collection's members do): its
 	 * `summary` (the default), its `navDate`, or `none`. Default `"summary"`.
@@ -545,7 +557,7 @@ export type PanelSection = "about" | "targets" | "collection" | "contents" | "se
 /** How the sections are laid out. */
 export type SectionsLayout = "tabs" | "accordion";
 /**
- * What a page calls a section, in place of Clover's own word for it: its words, taken to
+ * What a page calls a section, in place of its word in Clover's interface language: its words, taken to
  * be in the page's language, or its words by language tag, one of which the tab carries
  * as its `lang` where it is not the page's (WCAG 3.1.2).
  */
@@ -601,6 +613,13 @@ export interface PanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "def
 	 * leaves the choice out, and the Root reads in its `language`, else the reader's.
 	 */
 	languages?: boolean;
+	/**
+	 * Whether About's language toggle also offers Clover's interface languages (its
+	 * control labels, section titles and announcements) that the resource has none of: the
+	 * visitor's and the site's, where they differ, one choice for the page. Default
+	 * `true`; `false` leaves them out, and Clover speaks the visitor's.
+	 */
+	interfaceLanguages?: boolean;
 	/**
 	 * Which of the default sections the panel may have, in Clover's own order: with
 	 * `["contents", "search"]` it has those two and no About. Each still shows only where
@@ -609,7 +628,7 @@ export interface PanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "def
 	 */
 	sections?: readonly PanelSection[];
 	/**
-	 * What a default section's tab or heading says, in place of Clover's own word for it:
+	 * What a default section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or `{ annotations: { en: "Chapters", de: "Kapitel" } }`
 	 * to say it in several, read in the one Clover speaks and marked with its language
 	 * where that is not the page's (WCAG 3.1.2). A `Tab` of your own says it in `label`.
@@ -654,7 +673,7 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 */
 	panelSections?: readonly PanelSection[];
 	/**
-	 * What a panel section's tab or heading says, in place of Clover's own word for it:
+	 * What a panel section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or a word by language tag to say it in several (the
 	 * Panel's `labels`).
 	 */
@@ -666,6 +685,13 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 * it says of itself comes in several (the Panel's `languages`). Default `true`.
 	 */
 	languages?: boolean;
+	/**
+	 * Default, Document and Gallery: whether the panel's language toggle, beside its About
+	 * heading, also offers Clover's interface languages (its control labels, section
+	 * titles and announcements) that the resource has none of, the visitor's and the
+	 * site's, where they differ (the Panel's `interfaceLanguages`). Default `true`.
+	 */
+	interfaceLanguages?: boolean;
 	/** The thumbnails under the Body: a layout, or `false` for none. Default `slider`. */
 	items?: Exclude<ItemsLayout, "pager"> | false;
 	/**
@@ -706,7 +732,7 @@ export type DefaultProps = Omit<RootProps, "children"> & {
  * uncovered: a click there, Escape or the panel's close button puts it away. Size it with
  * `--clover-body-height`.
  */
-export declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, items, singleItem, storageKey, fill, collapseControls, canvasOptions, ...root }: DefaultProps): React.JSX.Element;
+export declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, interfaceLanguages, items, singleItem, storageKey, fill, collapseControls, canvasOptions, ...root }: DefaultProps): React.JSX.Element;
 export type DocumentProps = Omit<RootProps, "children"> & {
 	/**
 	 * Whether the page thumbnails start shown beside the page. Default `true`. On a phone,
@@ -736,7 +762,7 @@ export type DocumentProps = Omit<RootProps, "children"> & {
 	 */
 	panelSections?: readonly PanelSection[];
 	/**
-	 * What a panel section's tab or heading says, in place of Clover's own word for it:
+	 * What a panel section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or a word by language tag to say it in several (the
 	 * Panel's `labels`).
 	 */
@@ -748,6 +774,13 @@ export type DocumentProps = Omit<RootProps, "children"> & {
 	 * it says of itself comes in several (the Panel's `languages`). Default `true`.
 	 */
 	languages?: boolean;
+	/**
+	 * Default, Document and Gallery: whether the panel's language toggle, beside its About
+	 * heading, also offers Clover's interface languages (its control labels, section
+	 * titles and announcements) that the resource has none of, the visitor's and the
+	 * site's, where they differ (the Panel's `interfaceLanguages`). Default `true`.
+	 */
+	interfaceLanguages?: boolean;
 	/**
 	 * The title's heading level, to fit the outline of the page around the layout (under
 	 * an `h2`, 3). The panel's sections, and the downloads' groups, are a level below
@@ -777,7 +810,7 @@ export type DocumentProps = Omit<RootProps, "children"> & {
  * where there is room for both, and slides out over the page where there is not. Size
  * it with `--clover-template-document-height`.
  */
-export declare function Document({ className, defaultSidebarOpen, singleItem, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, headingLevel, storageKey, collapseControls, canvasOptions, ...root }: DocumentProps): React.JSX.Element;
+export declare function Document({ className, defaultSidebarOpen, singleItem, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, interfaceLanguages, headingLevel, storageKey, collapseControls, canvasOptions, ...root }: DocumentProps): React.JSX.Element;
 export type GalleryProps = Omit<RootProps, "children"> & {
 	/** The size of a grid cell. Default `10rem`, through `--clover-items-size`. */
 	size?: string;
@@ -832,7 +865,7 @@ export type GalleryProps = Omit<RootProps, "children"> & {
 	 */
 	panelSections?: readonly PanelSection[];
 	/**
-	 * What a panel section's tab or heading says, in place of Clover's own word for it:
+	 * What a panel section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or a word by language tag to say it in several (the
 	 * Panel's `labels`).
 	 */
@@ -844,6 +877,13 @@ export type GalleryProps = Omit<RootProps, "children"> & {
 	 * it says of itself comes in several (the Panel's `languages`). Default `true`.
 	 */
 	languages?: boolean;
+	/**
+	 * Default, Document and Gallery: whether the panel's language toggle, beside its About
+	 * heading, also offers Clover's interface languages (its control labels, section
+	 * titles and announcements) that the resource has none of, the visitor's and the
+	 * site's, where they differ (the Panel's `interfaceLanguages`). Default `true`.
+	 */
+	interfaceLanguages?: boolean;
 	/**
 	 * Where the panel's width is remembered once the reader drags its bar
 	 * (`localStorage`). Default `"clover-template-gallery"`; `false` forgets it.
@@ -870,7 +910,7 @@ export type GalleryProps = Omit<RootProps, "children"> & {
  * shows that Manifest in the lightbox. Escape, the close button, or a press outside
  * closes it, and focus returns to the cell.
  */
-export declare function Gallery({ className, size, height, gap, items, secondary, summary, lightboxItems, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, storageKey, headingLevel, collapseControls, canvasOptions, style, ...root }: GalleryProps): React.JSX.Element;
+export declare function Gallery({ className, size, height, gap, items, secondary, summary, lightboxItems, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, interfaceLanguages, storageKey, headingLevel, collapseControls, canvasOptions, style, ...root }: GalleryProps): React.JSX.Element;
 /**
  * Focus that follows a control as it moves. A toggle drawn in one place while its pane is
  * open and in another while it is shut is a new element after every press, and the one
@@ -1105,7 +1145,7 @@ export interface LightboxProps {
 	 */
 	panelSections?: readonly PanelSection[];
 	/**
-	 * What a panel section's tab or heading says, in place of Clover's own word for it:
+	 * What a panel section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or a word by language tag to say it in several (the
 	 * Panel's `labels`).
 	 */
@@ -1114,6 +1154,8 @@ export interface LightboxProps {
 	download?: boolean;
 	/** The languages to read the resource in, beside the panel's About heading. Default `true`. */
 	languages?: boolean;
+	/** Clover's interface languages in the panel's language toggle. Default `true`. */
+	interfaceLanguages?: boolean;
 	/** Where the panel's width is remembered once dragged; `false` forgets it. */
 	storageKey?: string | false;
 	/** The Body's `collapseControls`: when the view's controls collapse behind one button. */

package/dist/templates/shared/LightboxView.mjs

@@ -20,6 +20,7 @@ function LightboxView({
   panelLabels,
   download = true,
   languages = true,
+  interfaceLanguages = true,
   storageKey,
   collapseControls,
   canvasOptions,
@@ -116,6 +117,7 @@ function LightboxView({
             labels: panelLabels,
             download,
             languages,
+            interfaceLanguages,
             headingLevel: (headingLevel ?? 3) + 1
           }
         )

package/dist/ui/GlobeGlyph.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+function GlobeGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 512 512",
+      "aria-hidden": "true",
+      focusable: "false",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "48",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "200" }),
+        /* @__PURE__ */ jsx("ellipse", { cx: "256", cy: "256", rx: "84", ry: "200" }),
+        /* @__PURE__ */ jsx("path", { d: "M56 256h400M88 160h336M88 352h336" })
+      ]
+    }
+  );
+}
+export {
+  GlobeGlyph
+};

package/dist/ui/LanguageChoice.mjs

@@ -1,5 +1,6 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Suspense, lazy, useState, useRef, useLayoutEffect } from "react";
 import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
 import { autonym } from "../i18n/autonym.mjs";
 import { languageCode } from "../i18n/languageCode.mjs";
@@ -8,36 +9,102 @@ import { useContainerName } from "../i18n/useContainerName.mjs";
 import { useUniqueId } from "./useUniqueId.mjs";
 import { visuallyHidden } from "./visuallyHidden.mjs";
 import { languageProps } from "../i18n/direction.mjs";
+import { GlobeGlyph } from "./GlobeGlyph.mjs";
+const LanguageMenu = lazy(() => import("./LanguageMenu.mjs"));
+const ROW_MOST = 5;
+function naturalEnd(label, rtl) {
+  const was = label.style.whiteSpace;
+  label.style.whiteSpace = "nowrap";
+  const rect = label.getBoundingClientRect();
+  label.style.whiteSpace = was;
+  return rtl ? rect.left : rect.right;
+}
+function useFolded(fit, count, shown) {
+  const [element, place] = useState(null);
+  const width = useRef(0);
+  const [folded, setFolded] = useState(false);
+  const [measured, setMeasured] = useState(false);
+  const [shownWas, setShownWas] = useState(shown);
+  if (shownWas !== shown) {
+    setShownWas(shown);
+    setFolded(false);
+  }
+  useLayoutEffect(() => {
+    const found = element && (fit == null ? void 0 : fit(element));
+    if (element) setMeasured(!!found);
+    if (!element || !found) return;
+    const { label, box } = found;
+    const check = () => {
+      const rtl = getComputedStyle(box).direction === "rtl";
+      const rect = box.getBoundingClientRect();
+      if (!folded) width.current = rect.width;
+      const end = rtl ? rect.left : rect.right;
+      const start = rtl ? end + width.current : end - width.current;
+      const room = parseFloat(getComputedStyle(box).paddingInlineStart) || 0;
+      const words = naturalEnd(label, rtl);
+      const crosses = rtl ? words < start + room : words > start - room;
+      if (crosses !== folded) setFolded(crosses);
+    };
+    check();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(check);
+    observer.observe(label);
+    if (label.parentElement) observer.observe(label.parentElement);
+    return () => observer.disconnect();
+  }, [fit, folded, count, element]);
+  return { place, folded: measured ? folded : count > ROW_MOST };
+}
 function LanguageChoice({
   languages,
   chosen,
   onChange,
   nameKey,
-  part
+  part,
+  fit
 }) {
   const { t, langOf } = useCloverTranslation();
   const id = useUniqueId();
   const name = useContainerName(t(nameKey), langOf(nameKey));
+  const { place, folded } = useFolded(
+    fit,
+    languages.length,
+    languages.join(" ")
+  );
+  if (folded)
+    return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      LanguageMenu,
+      {
+        languages,
+        chosen,
+        onChange,
+        nameKey,
+        part,
+        placeRef: place
+      }
+    ) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     name.node,
-    /* @__PURE__ */ jsx("fieldset", { ...name.props, className: `${part}-languages`, children: languages.map((tag) => {
-      const own = autonym(tag);
-      return /* @__PURE__ */ jsxs("label", { className: `${part}-language`, children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "radio",
-            name: `${id}-language`,
-            checked: tag === chosen,
-            onChange: () => onChange(tag)
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: `${part}-language-code`, children: languageCode(tag) }),
-        " ",
-        /* @__PURE__ */ jsx("span", { style: visuallyHidden, ...languageProps(tag), children: own }),
-        /* @__PURE__ */ jsx(Tip, { label: own, lang: tag })
-      ] }, tag);
-    }) })
+    /* @__PURE__ */ jsxs("fieldset", { ...name.props, className: `${part}-languages`, ref: place, children: [
+      /* @__PURE__ */ jsx("span", { className: "clover-languages-glyph", "aria-hidden": "true", children: /* @__PURE__ */ jsx(GlobeGlyph, {}) }),
+      languages.map((tag) => {
+        const own = autonym(tag);
+        return /* @__PURE__ */ jsxs("label", { className: `${part}-language`, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: `${id}-language`,
+              checked: tag === chosen,
+              onChange: () => onChange(tag)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: `${part}-language-code`, children: languageCode(tag) }),
+          " ",
+          /* @__PURE__ */ jsx("span", { style: visuallyHidden, ...languageProps(tag), children: own }),
+          /* @__PURE__ */ jsx(Tip, { label: own, lang: tag })
+        ] }, tag);
+      })
+    ] })
   ] });
 }
 export {

package/dist/ui/LanguageMenu.mjs

@@ -0,0 +1,94 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import ControlMenu from "../components/Canvas/ControlMenu.mjs";
+import { autonym } from "../i18n/autonym.mjs";
+import { languageProps } from "../i18n/direction.mjs";
+import { languageCode } from "../i18n/languageCode.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { Chevron } from "./Chevron.mjs";
+import { GlobeGlyph } from "./GlobeGlyph.mjs";
+import { Tip } from "./Tip.mjs";
+import { useUniqueId } from "./useUniqueId.mjs";
+function LanguageMenu({
+  languages,
+  chosen,
+  onChange,
+  nameKey,
+  part,
+  placeRef
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const [open, setOpen] = useState(false);
+  const id = useUniqueId();
+  const button = `${id}-languages`;
+  const close = useCallback(
+    (restoreFocus) => {
+      var _a;
+      setOpen(false);
+      if (restoreFocus) (_a = document.getElementById(button)) == null ? void 0 : _a.focus();
+    },
+    [button]
+  );
+  const name = t(nameKey);
+  const nameLang = langOf(nameKey);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: placeRef,
+      className: `${part}-languages clover-languages-folded`,
+      onBlur: (event) => {
+        const next = event.relatedTarget;
+        if (open && next && !event.currentTarget.contains(next)) setOpen(false);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: button,
+            className: "clover-languages-button",
+            "aria-label": `${languageCode(chosen)}, ${name}`,
+            ...languageProps(nameLang),
+            "aria-expanded": open,
+            "aria-controls": open ? `${button}-menu` : void 0,
+            onClick: () => setOpen((was) => !was),
+            children: [
+              /* @__PURE__ */ jsx(GlobeGlyph, {}),
+              /* @__PURE__ */ jsx("span", { className: "clover-languages-code", "aria-hidden": "true", children: languageCode(chosen) }),
+              /* @__PURE__ */ jsx(Chevron, { open, className: "clover-languages-caret" }),
+              /* @__PURE__ */ jsx(Tip, { label: name, lang: nameLang })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          ControlMenu,
+          {
+            id: `${button}-menu`,
+            triggerId: button,
+            onClose: close,
+            className: "clover-languages-menu",
+            children: /* @__PURE__ */ jsxs("fieldset", { children: [
+              /* @__PURE__ */ jsx("legend", { ...languageProps(nameLang), children: name }),
+              languages.map((tag) => /* @__PURE__ */ jsxs("label", { className: "clover-languages-option", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: `${button}-language`,
+                    checked: tag === chosen,
+                    onChange: () => onChange(tag)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { ...languageProps(tag), children: autonym(tag) })
+              ] }, tag))
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  LanguageMenu as default
+};

package/dist/ui/useScrollTrack.mjs

@@ -8,30 +8,33 @@ const prefersReducedMotion = () => {
 function useScrollTrack({
   align = "start",
   dragFree = false,
-  itemCount = 0
+  itemCount = 0,
+  axis = "x"
 } = {}) {
+  const down = axis === "y";
   const [viewport, setViewport] = useState(null);
   const [canScrollPrev, setCanScrollPrev] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);
   const alignment = useRef(align);
   alignment.current = align;
-  const snap = dragFree ? "none" : "x mandatory";
+  const snap = dragFree ? "none" : `${axis} mandatory`;
   const measure = useCallback(() => {
     if (!viewport) return;
-    const position = Math.abs(viewport.scrollLeft);
-    const max = viewport.scrollWidth - viewport.clientWidth;
+    const position = Math.abs(down ? viewport.scrollTop : viewport.scrollLeft);
+    const max = down ? viewport.scrollHeight - viewport.clientHeight : viewport.scrollWidth - viewport.clientWidth;
     setCanScrollPrev(position > 1);
     setCanScrollNext(position < max - 1);
-  }, [viewport]);
+  }, [viewport, down]);
   useEffect(() => {
     if (!viewport) return;
     const style = viewport.style;
-    style.overflowX = "auto";
-    style.overflowY = "hidden";
+    style.overflowX = down ? "hidden" : "auto";
+    style.overflowY = down ? "auto" : "hidden";
     style.scrollSnapType = snap;
     style.setProperty("--clover-track-align", align);
-    style.overscrollBehaviorX = "contain";
-  }, [viewport, snap, align]);
+    if (down) style.overscrollBehaviorY = "contain";
+    else style.overscrollBehaviorX = "contain";
+  }, [viewport, snap, align, down]);
   useEffect(() => {
     if (!viewport) return;
     let frame = 0;
@@ -55,9 +58,9 @@ function useScrollTrack({
     (distance, instant = false) => {
       if (!viewport || !distance) return;
       const behavior = instant || prefersReducedMotion() ? "auto" : "smooth";
-      viewport.scrollBy({ left: distance, behavior });
+      viewport.scrollBy({ [down ? "top" : "left"]: distance, behavior });
     },
-    [viewport]
+    [viewport, down]
   );
   const scrollToIndex = useCallback(
     (index, { instant = false } = {}) => {
@@ -68,21 +71,29 @@ function useScrollTrack({
       const box = viewport.getBoundingClientRect();
       const rect = slide.getBoundingClientRect();
       const rtl = getComputedStyle(viewport).direction === "rtl";
+      if (down) {
+        scrollAlong(
+          alignment.current === "center" ? rect.top + rect.height / 2 - (box.top + box.height / 2) : rect.top - box.top,
+          instant
+        );
+        return true;
+      }
       scrollAlong(
         alignment.current === "center" ? rect.left + rect.width / 2 - (box.left + box.width / 2) : rtl ? rect.right - box.right : rect.left - box.left,
         instant
       );
       return true;
     },
-    [viewport, scrollAlong]
+    [viewport, scrollAlong, down]
   );
   const page = useCallback(
     (direction) => {
       if (!viewport) return;
-      const rtl = getComputedStyle(viewport).direction === "rtl";
-      scrollAlong(direction * viewport.clientWidth * 0.9 * (rtl ? -1 : 1));
+      const rtl = !down && getComputedStyle(viewport).direction === "rtl";
+      const extent = down ? viewport.clientHeight : viewport.clientWidth;
+      scrollAlong(direction * extent * 0.9 * (rtl ? -1 : 1));
     },
-    [viewport, scrollAlong]
+    [viewport, scrollAlong, down]
   );
   const scrollNext = useCallback(() => page(1), [page]);
   const scrollPrev = useCallback(() => page(-1), [page]);
@@ -92,13 +103,16 @@ function useScrollTrack({
     let dragging = false;
     const onDown = (event) => {
       if (event.pointerType !== "mouse" || event.button !== 0) return;
-      start = { x: event.clientX, scroll: viewport.scrollLeft };
+      start = {
+        x: down ? event.clientY : event.clientX,
+        scroll: down ? viewport.scrollTop : viewport.scrollLeft
+      };
       dragging = false;
     };
     const onMove = (event) => {
       var _a;
       if (!start) return;
-      const moved = event.clientX - start.x;
+      const moved = (down ? event.clientY : event.clientX) - start.x;
       if (!dragging && Math.abs(moved) < DRAG_THRESHOLD) return;
       if (!dragging) {
         dragging = true;
@@ -106,7 +120,8 @@ function useScrollTrack({
         viewport.style.scrollSnapType = "none";
         viewport.dataset.dragging = "true";
       }
-      viewport.scrollLeft = start.scroll - moved;
+      if (down) viewport.scrollTop = start.scroll - moved;
+      else viewport.scrollLeft = start.scroll - moved;
     };
     const onUp = (event) => {
       var _a;
@@ -135,7 +150,7 @@ function useScrollTrack({
       viewport.removeEventListener("pointercancel", onUp);
       viewport.removeEventListener("click", onClick, true);
     };
-  }, [viewport, snap]);
+  }, [viewport, snap, down]);
   return {
     ref: setViewport,
     canScrollPrev,

package/dist/web-components/About-BklM8JA9.mjs

@@ -0,0 +1 @@
+import{e as M,y as j,u as t,z as C,P as N,X as w,a as x,Q as $,x as H,c as _,A as G,b as U,Y as T,U as V,l as k}from"./shared-DgJ0bXca.mjs";import{j as B}from"./classnames-DukgfdpI.mjs";import{u as Q}from"./readingLanguages-Qdn21-7Q.mjs";import{Thumbnail as W,Summary as R,Metadata as X,RequiredStatement as Y,Rights as E,Homepage as J,SeeAlso as Z,Id as K}from"./Primitives-T7usOLie.mjs";import{u as ee}from"./downloads-DCsDCcA8.mjs";import{P as te}from"./Provider-B2k1G-E0.mjs";import{a as oe,t as ae}from"./heading-Cjt0f-Eu.mjs";import{L as ne}from"./Label-CRTQApU-.mjs";import{r as re}from"./dates-DR3gfcON.mjs";import"./styles-Bvw9LFU7.mjs";const se=C(()=>import("./LanguageChoice-B1941Wuu.mjs").then(e=>e.b).then(e=>({default:e.LanguageChoice}))),le=e=>{var r;const s=e.closest(".clover-sections-actions"),a=(r=s==null?void 0:s.closest(".clover-sections-item"))==null?void 0:r.querySelector(".clover-sections-heading .clover-sections-label");return s&&a?{box:s,label:a}:null},ce=e=>void w.chooseInterfaceLanguage(e);function ue(){x();const{languages:e,chosen:s}=w.interfaceLanguages();return e.length>1?{languages:e,chosen:s}:null}function ie({values:e=true,interfaceLanguages:s=true}={}){const a=Q(),r=ue(),l=e?(a==null?void 0:a.languages)??[]:[],c=o=>l.some(b=>b===o||w.stringsFor(b)===o),g=[...l,...(s?(r==null?void 0:r.languages)??[]:[]).filter(o=>!c(o))];if(g.length<2)return null;const P=w.chosenLanguage,h=P&&w.stringsFor(P),L=h&&g.includes(h)&&!c(h)?h:e&&a?a.chosen:(r==null?void 0:r.chosen)??g[0];return{languages:g,chosen:L,onChange:o=>l.includes(o)&&a?a.onChange(o):ce(o)}}function me({values:e,interfaceLanguages:s}){const a=ie({values:e,interfaceLanguages:s}),{drawsToggle:r}=M("About"),l=!!a;return j(()=>l?r==null?void 0:r():void 0,[l,r]),a?t(N,{fallback:null,children:t(se,{...a,nameKey:"readingLanguage",part:"clover-about",fit:le})}):null}const de=$(false),ge=C(()=>import("./Download-C1RNBLdn.mjs").then(({DownloadGroups:e})=>({default:e}))),he=C(()=>import("./NavDate-BwV4kPl-.mjs").then(e=>e.a).then(({NavDate:e})=>({default:e}))),be=C(()=>import("./PartOfManifest-B0RwR4iy.mjs"));function fe({languages:e=true,interfaceLanguages:s=true,...a}){const r=H(de);return t(ve,{...a,download:!r&&a.download!==false,choice:r?null:t(me,{values:e,interfaceLanguages:s})})}function ve({choice:e,canvasSummary:s=false,headingLevel:a=3,download:r=true,thumbnail:l=true,label:c=true,className:g,...P}){const{t:h,langOf:L}=x(),v=ee(),o=_(n=>n.manifest,Object.is,"About"),b=G(null);j(()=>{const n=b.current,i=n==null?void 0:n.querySelector(".clover-about-head");if(!n||!i||typeof ResizeObserver>"u")return;const m=new Set,d=()=>{const D=i.querySelector(".clover-about-thumbnail"),A=i.querySelector(".clover-about-label");for(const S of[D,A])S&&!m.has(S)&&(m.add(S),y.observe(S));const f=n.style;if(!D){f.removeProperty("--clover-about-label-height"),f.removeProperty("--clover-about-thumbnail-width");return}const O=`${(A==null?void 0:A.offsetHeight)??0}px`,q=`${D.offsetWidth}px`;f.getPropertyValue("--clover-about-label-height")!==O&&f.setProperty("--clover-about-label-height",O),f.getPropertyValue("--clover-about-thumbnail-width")!==q&&f.setProperty("--clover-about-thumbnail-width",q)};let p=0;const y=new ResizeObserver(()=>{cancelAnimationFrame(p),p=requestAnimationFrame(d)});return y.observe(i),d(),()=>{cancelAnimationFrame(p),y.disconnect(),n.style.removeProperty("--clover-about-label-height"),n.style.removeProperty("--clover-about-thumbnail-width")}},[c,l,o]);const z=U(),F=()=>{var m,d;const n=b.current;(d=((m=n==null?void 0:n.closest(".clover-sections-item"))==null?void 0:m.querySelector(".clover-sections-button"))??n)==null||d.focus({preventScroll:true})};if(!o)return null;const u=(n,i,m)=>{if(!i)return null;const{as:d,title:p,group:y}=ae(a,`${z}-${n}`);return t("section",{className:"clover-about-section",...y,children:[t(d,{className:"clover-about-heading",...k(L(n)),...p,children:h(n)}),m]})},I=n=>Array.isArray(o[n])?o[n].length>0:!!o[n];return t("div",{ref:b,className:B("clover-about",g),tabIndex:-1,...P,children:[e,(l||c)&&t("div",{className:"clover-about-head",children:[l&&t(W,{className:"clover-about-thumbnail",size:256,alt:c?"":void 0}),c&&t(ne,{as:oe(a),className:"clover-about-label clover-title"})]}),s&&t(R,{of:"canvas",className:"clover-about-summary"}),T(o)&&o.partOf&&t(N,{fallback:null,children:t(be,{manifest:o,headingLevel:a,onOpened:F})}),t(R,{className:"clover-about-summary"}),t(X,{className:"clover-about-metadata"}),t(Y,{className:"clover-about-metadata"}),u("aboutDate",re(o.navDate),t(N,{fallback:null,children:t(he,{value:o.navDate,className:"clover-about-date"})})),u("aboutProvider",I("provider"),t(te,{})),u("aboutRights",o.rights,t(E,{})),u("aboutHomepage",I("homepage"),t(J,{})),u("aboutSeeAlso",I("seeAlso"),t(Z,{})),u("download",r&&v.page.length+v.all.length>0,t(N,{fallback:null,children:t(ge,{page:v.page,all:v.all,headingLevel:a+1})})),u(T(o)?"aboutCanvas":"aboutManifest",!V(o)&&o.id,t(K,{}))]})}const De=Object.freeze(Object.defineProperty({__proto__:null,About:fe},Symbol.toStringTag,{value:"Module"}));export{fe as A,de as I,me as L,De as a,ie as u};

package/dist/web-components/AnnotationItems-4mbvOrhN.mjs

@@ -0,0 +1 @@
+import{e as P,c as v,aj as _,T as E,G as O,A as R,y as T,u as f,k,d as q,a1 as F}from"./shared-DgJ0bXca.mjs";import{P as G,a as L}from"./Items-BApzELFW.mjs";import{C as j}from"./CountMenu-Aoott7Hu.mjs";import{a as y}from"./annotation-name-BWTrB9nK.mjs";import{f as B,r as D}from"./fetchManifest-QmVIeaHo.mjs";import{u as K,L as V}from"./ListEnd-CIiLZZzc.mjs";function z({onSelect:o,forwardedRef:r,...c}){const{clover:l,language:e}=P("Items"),n=v(t=>t.manifest),s=v(t=>_(t.manifest,t.addedSets)),u=v(t=>t.annotationId),d=(s==null?void 0:s.pages)??H,m=(s==null?void 0:s.entries)??J,{loaded:A,more:N,reachNext:S}=K(d),x=E(()=>[...new Set(m.map(t=>O(t.annotation)).filter(t=>!!t&&t!==(n==null?void 0:n.id)))],[m,n==null?void 0:n.id]),C=U(c.layout==="pager"?Q:x),M=x.length>0,i=E(()=>{const t=d.length?new Set(d.slice(0,A).map(a=>a.id)):null;return m.filter(a=>!t||t.has(a.setId)).map(a=>{const g=O(a.annotation),p=g&&g!==(n==null?void 0:n.id)?C.get(g)??null:n;return X(a,p,e,M)})},[d,A,m,n,C,M,e]),b=Math.max((s==null?void 0:s.total)??0,i.length),I=R(null);if(T(()=>{const t=I.current;t===null||!i[t]||(I.current=null,l.selectAnnotation(i[t].id))},[l,i]),!i.length)return null;const h=i.findIndex(t=>t.id===u),w=(t,a)=>{o==null||o(t,a),l.selectAnnotation(t.id)};return c.layout==="pager"?f(G,{...c,forwardedRef:r,steps:{position:h,total:b,direction:"left-to-right",step:(a,g)=>{const p=h+a;if(!(p<0)){if(i[p])return w(i[p],g);N&&(I.current=p,S())}}},nameKey:"informationPanelTabsAnnotations",position:f(j,{position:h,total:b,list:a=>f(z,{layout:"list",forwardedRef:null,onSelect:a})})}):f(k,{children:[f(L,{...c,forwardedRef:r,items:i,selected:h,navigation:"id",language:e,request:l.request,showSummary:true,onActivate:w}),N&&f(V,{onReached:S})]})}const H=[],J=[],Q=[];function U(o){const{clover:r}=P("Items"),[c,l]=q(W);return T(()=>{if(!o.length)return;let e=true;for(const n of o)B(r,n).then(s=>{e&&s&&l(u=>u.has(n)?u:new Map(u).set(n,s))});return()=>{e=false}},[r,o]),c}const W=new Map;function X(o,r,c,l){const e=F(r,o.canvasId),n=y(o.bodies,c),s=n.text?{[n.lang??"none"]:[n.text]}:e==null?void 0:e.label,u=l?r==null?void 0:r.label:e==null?void 0:e.label,d=e&&o.target.rect?D(e,o.target.rect):void 0;return{id:o.id,label:s,summary:n.text?u:void 0,parts:[{id:o.id,type:"Canvas",label:s,resource:e??{id:o.canvasId},...d?{source:d}:{}}]}}export{z as default};

package/dist/web-components/{AnnotationMenu-BiM0n-6H.mjs → AnnotationMenu-DtMaxXf5.mjs}

@@ -1 +1 @@
-import{A as I,u as a,l as y}from"./shared-D4j4IirO.mjs";import{s as H}from"./Annotations-x5H_Vls9.mjs";import T from"./ControlMenu-CaD8Frag.mjs";import{C as $}from"./Cue-CrlByfoX.mjs";import{H as z}from"./HideToggle-aDBXi6F0.mjs";import{u as B}from"./useContainerName-B_Kzx2Wp.mjs";import"./styles-Ca564vB9.mjs";const G=({id:d,triggerId:C,label:M,labelLang:k,annotations:p,hiddenPages:x=[],onPageVisibilityChange:v,selected:w,onSelect:u,onActivate:i,onClose:D})=>{const h=B(M,k),m=I(false),r=[];p.forEach((n,c)=>{var s,l;const o=r[r.length-1];o&&((s=o.page)==null?void 0:s.text)===((l=n.page)==null?void 0:l.text)?o.items.push(c):r.push({page:n.page,items:[c]})});const E=r.some(n=>!n.page);return a(T,{className:"clover-canvas-annotation-menu","data-testid":"clover-canvas-annotation-menu",id:d,onClose:D,triggerId:C,children:[E&&h.node,r.map((n,c)=>{const o=[...new Set(n.items.flatMap(t=>p[t].pageId??[]))],s=`${d}-page-${c}`,l=v&&o.length>0&&a(z,{hidden:o.every(t=>x.includes(t)),onChange:t=>v(o,!t),of:n.page?s:void 0});return a("fieldset",{...n.page?{"aria-labelledby":s}:h.props,className:"clover-canvas-menu-group clover-annotations-set",children:[n.page?a("legend",{className:"clover-canvas-menu-legend clover-annotations-set-header",children:[a("span",{className:"clover-annotations-title",id:s,...y(n.page.lang),children:n.page.text}),l]}):l&&a("div",{className:"clover-annotations-set-header",children:l}),a("div",{className:"clover-annotations-list",children:n.items.map(t=>{const e=p[t],f=H(e),g=w===e.id,N="image"in e?e.image:void 0;return a("label",{className:"clover-canvas-menu-item clover-annotations-entry","data-selected":g,onMouseEnter:()=>i(e.id),onMouseLeave:()=>i(null),onPointerDown:()=>{m.current=true},children:[a("input",{type:"radio",name:d,checked:g,onChange:()=>u(e,m.current),onClick:()=>{(g||!m.current)&&u(e)},onKeyDown:b=>{m.current=false,b.key==="Enter"&&(b.preventDefault(),u(e))},onFocus:()=>i(e.id),onBlur:()=>i(null)}),f!==void 0&&a($,{start:f,className:"clover-annotations-time"}),a("span",{className:"clover-annotations-body clover-cue-text",children:[N&&a("img",{className:"clover-annotations-image",src:N,alt:"",loading:"lazy"}),a("span",{className:"clover-annotations-text",...y(e.label?e.lang:void 0),children:e.label??String(t+1)})]})]},e.id)})})]},c)})]})};export{G as default};
+import{A as I,u as a,l as y}from"./shared-DgJ0bXca.mjs";import{s as H}from"./Annotations-oPabBO7j.mjs";import T from"./ControlMenu-DlP3JsqV.mjs";import{C as $}from"./Cue-BAj92VWz.mjs";import{H as z}from"./HideToggle-C4mW4-CK.mjs";import{u as B}from"./useContainerName-BfNL6p3O.mjs";import"./styles-Bvw9LFU7.mjs";const G=({id:d,triggerId:C,label:M,labelLang:k,annotations:p,hiddenPages:x=[],onPageVisibilityChange:v,selected:w,onSelect:u,onActivate:i,onClose:D})=>{const h=B(M,k),m=I(false),r=[];p.forEach((n,c)=>{var s,l;const o=r[r.length-1];o&&((s=o.page)==null?void 0:s.text)===((l=n.page)==null?void 0:l.text)?o.items.push(c):r.push({page:n.page,items:[c]})});const E=r.some(n=>!n.page);return a(T,{className:"clover-canvas-annotation-menu","data-testid":"clover-canvas-annotation-menu",id:d,onClose:D,triggerId:C,children:[E&&h.node,r.map((n,c)=>{const o=[...new Set(n.items.flatMap(t=>p[t].pageId??[]))],s=`${d}-page-${c}`,l=v&&o.length>0&&a(z,{hidden:o.every(t=>x.includes(t)),onChange:t=>v(o,!t),of:n.page?s:void 0});return a("fieldset",{...n.page?{"aria-labelledby":s}:h.props,className:"clover-canvas-menu-group clover-annotations-set",children:[n.page?a("legend",{className:"clover-canvas-menu-legend clover-annotations-set-header",children:[a("span",{className:"clover-annotations-title",id:s,...y(n.page.lang),children:n.page.text}),l]}):l&&a("div",{className:"clover-annotations-set-header",children:l}),a("div",{className:"clover-annotations-list",children:n.items.map(t=>{const e=p[t],f=H(e),g=w===e.id,N="image"in e?e.image:void 0;return a("label",{className:"clover-canvas-menu-item clover-annotations-entry","data-selected":g,onMouseEnter:()=>i(e.id),onMouseLeave:()=>i(null),onPointerDown:()=>{m.current=true},children:[a("input",{type:"radio",name:d,checked:g,onChange:()=>u(e,m.current),onClick:()=>{(g||!m.current)&&u(e)},onKeyDown:b=>{m.current=false,b.key==="Enter"&&(b.preventDefault(),u(e))},onFocus:()=>i(e.id),onBlur:()=>i(null)}),f!==void 0&&a($,{start:f,className:"clover-annotations-time"}),a("span",{className:"clover-annotations-body clover-cue-text",children:[N&&a("img",{className:"clover-annotations-image",src:N,alt:"",loading:"lazy"}),a("span",{className:"clover-annotations-text",...y(e.label?e.lang:void 0),children:e.label??String(t+1)})]})]},e.id)})})]},c)})]})};export{G as default};

package/dist/web-components/AnnotationState-BuEpq99k.mjs

@@ -0,0 +1 @@
+import{T as d,ac as qt,f as bt,d as C,aI as Gt,q as I,A as l,E as jt,y as z,_ as It,u as zt}from"./shared-DgJ0bXca.mjs";import{w as Dt,p as kt,g as Ot,t as Jt,A as Ut}from"./Annotations-oPabBO7j.mjs";import{h as Xt}from"./layout-B3HyDCsP.mjs";const Yt=()=>import("./svg-shape-D1K-WNrY.mjs");function Zt(w){var S;const c=d(()=>!!(w!=null&&w.some(({annotation:s})=>{var p;return(p=qt(s==null?void 0:s.target))==null?void 0:p.svg})),[w]);return((S=bt(Yt,c))==null?void 0:S.readSvgShape)??null}const xt=[];function Et({given:w,annotations:c,scene:S,renderer:s,sceneVersion:p,drawn:E,media:k,mediaElement:f,showPlaceholder:F,canvasKey:D,openImages:tt,openMedia:et,host:nt,onModel:H,refind:_=0}){const{canvases:g,language:v,hiddenPages:rt,unlistedPages:yt,onPageVisibilityChange:ct,onAnnotationActive:ut,selectedAnnotation:st,animateAnnotations:ot=false,highlightedAnnotation:Ct,onAnnotationSelect:lt,onAnnotationLink:J}=w,[B,Ft]=C([]),[it,Ht]=C([]),L=rt!==void 0,U=d(()=>{var n;if(L)return xt;const t=new Map;for(const r of c){if(!r.pageId)continue;const o=!(Number((n=g==null?void 0:g[r.targetIndex])==null?void 0:n.duration)>0)&&Gt(r.annotation.motivation,qt(Array.isArray(r.annotation.target)?r.annotation.target[0]:r.annotation.target));t.set(r.pageId,(t.get(r.pageId)??true)&&o)}const e=[...t].filter(([,r])=>r).map(([r])=>r);return e.length?e:xt},[L,c,g]),_t=d(()=>{const t=U.filter(e=>!it.includes(e)&&!B.includes(e));return t.length?[...B,...t]:B},[B,it,U]),a=rt??_t,X=yt??U,N=I(t=>X.length?t.filter(e=>!e.pageId||!X.includes(e.pageId)):t,[X]),dt=d(()=>N(c).length,[c,N]),T=I(t=>a.length?t.filter(e=>!e.pageId||!a.includes(e.pageId)):t,[a]),Q=l(ct);Q.current=ct;const R=I((t,e)=>{var n;(n=Q.current)==null||n.call(Q,t,e),!L&&(Ft(r=>{const i=r.filter(o=>!t.includes(o));return e?i:[...i,...t]}),Ht(r=>{const i=r.filter(o=>!t.includes(o));return e?[...i,...t]:i}))},[L]),gt=d(()=>Dt(T(c),g),[c,T,g]),O=d(()=>{if(!(!S||!g))return(t,e,n)=>{const r=g.findIndex(Wt=>Wt.id===e),i=r===-1?n:r,o=S.placements[i];return o?Xt(g[i],o,t):null}},[S,g]),W=Zt(c),P=d(()=>s&&p>0&&E?kt(c,O??((t,e,n)=>s.itemRectToWorld(n,t)),W,v):[],[s,c,p,E,O,W,v]),x=d(()=>T(P),[P,T]),Y=d(()=>P.length||!O?P:kt(c,O,W,v),[P,O,c,W,v]),[Bt,Lt]=C(null),[Nt,ft]=C(null),u=st!==void 0?st:Nt,A=l(null),h=l(ut);h.current=ut;const m=l(lt);m.current=lt;const Z=I(t=>{var e;Lt(t),(e=h.current)==null||e.call(h,t)},[]),$=l(ot);$.current=ot;const pt=l(false);pt.current=F;const V=l(f);V.current=f;const at=l(s);at.current=s;const q=l(null),Pt=l(a);Pt.current=a;const ht=l(R);ht.current=R;const K=I((t,e=true)=>{var n,r,i;if(t.pageId&&Pt.current.includes(t.pageId)&&ht.current([t.pageId],true),ft(t.id),(n=h.current)==null||n.call(h,t.id),(r=m.current)==null||r.call(m,t.id),!pt.current){if("start"in t){const o=V.current;if(!o)return;q.current=t.id,e?jt(o,t.start):o.currentTime=t.start;return}if(A.current=t.id,t.track){const o=V.current;o&&Ot(t,o)&&(q.current=t.id);return}(i=at.current)==null||i.fitAnnotation(t.world,!$.current)}},[]),mt=l(u);mt.current=u;const b=I(()=>{var t;return mt.current?(ft(null),A.current=null,(t=m.current)==null||t.call(m,null),true):false},[]),G=l(J);G.current=J;const wt=!!J,Qt=d(()=>wt?t=>{var e,n;(e=nt.current)==null||e.focus({preventScroll:true}),b(),t.link&&((n=G.current)==null||n.call(G,t.link))}:void 0,[wt,b,nt]),St=l(_);z(()=>{if(!u){A.current=null;return}if(St.current!==_&&(St.current=_,A.current=null),A.current===u)return;const t=r=>r.find(i=>i.id===u),e=t(x),n=e??t(P);if(n){if(A.current=n.id,n.track){!e&&f&&Ot(n,f);return}s==null||s.fitAnnotation(n.world,!$.current)}},[u,x,P,f,s,_]);const y=d(()=>k?Jt(c,v):[],[k,c,v]),j=d(()=>T(y),[y,T]),vt=d(()=>N(y.length?[...Y,...y]:Y),[Y,y,N]);z(()=>{if(!u){q.current=null;return}if(q.current===u||!f)return;const t=j.find(e=>e.id===u);t&&(q.current=t.id,f.currentTime=t.start)},[u,j,f]);const M=l(null),[Tt,Rt]=C(null);z(()=>{M.current=u??null},[u]),z(()=>{const t=M.current;if(!(!t||!c.some(e=>{var n;return((n=e.annotation)==null?void 0:n.id)===t}))&&(M.current=null,!!F)){if(!k){tt(true);return}et(D),Rt(D)}},[u,c,F,k,D,tt,et]);const At=d(()=>({menu:vt,placed:x,timed:j,hiddenPages:a,setPagesVisible:R,listedCount:dt,comments:gt,selected:u??null,select:K,activate:Z,release:b,quietlyOpened:Tt}),[vt,x,j,a,R,dt,gt,u,K,Z,b,Tt]);return It(()=>H(At),[At,H]),It(()=>()=>H(null),[H]),s&&p>0&&!F?zt(Ut,{renderer:s,placed:x,sceneVersion:p,active:Bt??Ct??u,selected:u,onActivate:Z,onSelect:K,onFollow:Qt,media:k?f:void 0}):null}export{Et as AnnotationState};