@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/components/Canvas/ImageControls.mjs

@@ -0,0 +1,209 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef, useLayoutEffect } from "react";
+import Button from "../../ui/Button.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
+import { useOneOpen } from "../../ui/useOneOpen.mjs";
+import { CloseViewer, OpenViewer } from "../Body/glyphs.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+function overhang(list) {
+  var _a, _b;
+  const box = list.getBoundingClientRect();
+  const ring = parseFloat(getComputedStyle(list).paddingLeft) || 0;
+  const first = (_a = list.firstElementChild) == null ? void 0 : _a.getBoundingClientRect();
+  const last = (_b = list.lastElementChild) == null ? void 0 : _b.getBoundingClientRect();
+  return {
+    box,
+    ring,
+    left: first ? box.left - (first.left - ring) : 0,
+    right: last ? last.right + ring - box.right : 0
+  };
+}
+function ImageControls({
+  instance,
+  open,
+  onOpenChange,
+  toggle: placeholder,
+  children
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const id = `more-${instance}`;
+  const listId = `${id}-list`;
+  const listRef = useRef(null);
+  const labelKey = open ? "canvasCollapseControls" : "canvasExpandControls";
+  const name = useContainerName(
+    t("canvasViewerControls"),
+    langOf("canvasViewerControls")
+  );
+  useOneOpen(open && !placeholder, () => void 0);
+  const refocus = useRef(false);
+  const toggle = (value, focused) => {
+    refocus.current = focused;
+    onOpenChange(value);
+  };
+  useLayoutEffect(() => {
+    var _a;
+    if (!refocus.current) return;
+    refocus.current = false;
+    (_a = document.getElementById(id)) == null ? void 0 : _a.focus();
+  }, [open, id]);
+  useLayoutEffect(() => {
+    const list2 = listRef.current;
+    if (!open || !list2) return;
+    const past = () => overhang(list2);
+    const mark = () => {
+      if (list2.scrollTop) list2.scrollTop = 0;
+      const { box, left, right } = past();
+      const sprung = list2.scrollLeft < 0 || list2.scrollLeft > list2.scrollWidth - list2.clientWidth;
+      if (list2.dataset.past && !sprung && right < -0.5 && left > 0.5) {
+        list2.scrollLeft -= Math.min(-right, left);
+        return;
+      }
+      if (list2.dataset.past && !sprung && left < -0.5 && right > 0.5) {
+        list2.scrollLeft += Math.min(-left, right);
+        return;
+      }
+      const ends = [left > 1 && "left", right > 1 && "right"].filter(Boolean).join(" ");
+      if (ends) list2.dataset.past = ends;
+      else delete list2.dataset.past;
+      const fade = parseFloat(getComputedStyle(list2).scrollPaddingLeft) || 0;
+      for (const control of Array.from(list2.children)) {
+        const own = control.getBoundingClientRect();
+        const cut = left > 1 && own.left < box.left + fade - 0.5 || right > 1 && own.right > box.right - fade + 0.5;
+        if (cut !== control.hasAttribute("data-partial"))
+          control.toggleAttribute("data-partial", cut);
+      }
+    };
+    const reveal = (event) => {
+      const control = event.target;
+      if (!(control instanceof HTMLElement) || control.parentElement !== list2)
+        return;
+      mark();
+      const { box, ring, left, right } = past();
+      const own = control.getBoundingClientRect();
+      const fade = parseFloat(getComputedStyle(list2).scrollPaddingLeft) || 0;
+      const over = own.right - (box.right - (control.nextElementSibling ? fade : ring));
+      const under = box.left + (control.previousElementSibling ? fade : ring) - own.left;
+      if (over > 0) list2.scrollLeft += Math.min(over, Math.max(right, 0));
+      else if (under > 0) list2.scrollLeft -= Math.min(under, Math.max(left, 0));
+      mark();
+    };
+    mark();
+    list2.addEventListener("scroll", mark, { passive: true });
+    list2.addEventListener("focusin", reveal);
+    list2.addEventListener("animationend", mark);
+    const resize = new ResizeObserver(() => mark());
+    resize.observe(list2);
+    return () => {
+      list2.removeEventListener("scroll", mark);
+      list2.removeEventListener("focusin", reveal);
+      list2.removeEventListener("animationend", mark);
+      resize.disconnect();
+      delete list2.dataset.past;
+      for (const control of Array.from(list2.children))
+        control.removeAttribute("data-partial");
+    };
+  }, [open]);
+  const more = placeholder ? /* @__PURE__ */ jsx(React.Fragment, { children: placeholder }, "more") : /* @__PURE__ */ jsx(
+    Button,
+    {
+      id,
+      label: t(labelKey),
+      lang: langOf(labelKey),
+      expanded: open,
+      controls: listId,
+      onClick: (event) => toggle(!open, document.activeElement === event.currentTarget),
+      children: open ? /* @__PURE__ */ jsx(CloseViewer, {}) : /* @__PURE__ */ jsx(OpenViewer, {})
+    },
+    "more"
+  );
+  const page = (forward) => {
+    const list2 = listRef.current;
+    if (!list2) return;
+    const { box, left, right } = overhang(list2);
+    const style = getComputedStyle(list2);
+    const most = box.width - 2 * (parseFloat(style.scrollPaddingLeft) || 0);
+    const rightward = forward !== (style.direction === "rtl");
+    list2.scrollBy({
+      left: rightward ? Math.min(most, right) : -Math.min(most, left),
+      behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth"
+    });
+  };
+  const step = (forward) => {
+    const key = forward ? "canvasScrollForward" : "canvasScrollBack";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "clover-steps-step clover-canvas-more-step",
+        "data-step": forward ? "next" : "prev",
+        "aria-hidden": "true",
+        tabIndex: -1,
+        ...languageProps(langOf(key)),
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => page(forward),
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              focusable: "false",
+              width: "12",
+              height: "12",
+              viewBox: "0 0 16 16",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: forward ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Tip, { label: t(key) })
+        ]
+      },
+      key
+    );
+  };
+  const list = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "clover-canvas-more-list",
+      hidden: !open,
+      id: listId,
+      ref: listRef,
+      role: "group",
+      ...name.props,
+      children
+    },
+    "list"
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "clover-canvas-more",
+      "data-open": open || void 0,
+      onKeyDown: (event) => {
+        if (placeholder || !open || event.key !== "Escape") return;
+        if (event.defaultPrevented) return;
+        event.preventDefault();
+        toggle(false, true);
+      },
+      children: [
+        open ? [list, more] : [more, list],
+        name.node,
+        open && [step(false), step(true)]
+      ]
+    }
+  );
+}
+export {
+  ImageControls
+};

package/dist/components/Canvas/LoadedCanvas.mjs

@@ -7,7 +7,7 @@ import { paintedMedia } from "./layout.mjs";
 import { CanvasPending } from "../Body/Pending.mjs";
 import { BodyAlert } from "../Body/BodyAlert.mjs";
 import { loadAnnotationSets } from "../../core/annotation-collection.mjs";
-import { readPage } from "../../core/annotation-sets.mjs";
+import { readPage, pageLabel } from "../../core/annotation-sets.mjs";
 import { loadContent } from "../../core/load.mjs";
 import { useLoaded } from "../../hooks/useLoaded.mjs";
 const loadRanges = () => import("../../core/ranges.mjs");
@@ -132,6 +132,7 @@ function LoadedCanvas({
         canvases: [view.canvas],
         label: props.label ?? view.canvas.label ?? view.content.manifest.label,
         partOf: props.partOf ?? view.content.manifest.label,
+        navPlace: props.navPlace ?? view.content.manifest.navPlace,
         annotations: props.annotations ?? annotations,
         onAnnotationLink: onAnnotationLink ?? follow,
         chapters: props.chapters ?? chapters,
@@ -151,7 +152,7 @@ async function annotationsOf(canvas, content, request) {
   const sets = [
     ...embedded.map((page, index) => ({
       id: page.id ?? `annotations-${index}`,
-      label: page.label,
+      label: pageLabel(page),
       entries: readPage(page, page.id ?? `annotations-${index}`, canvas.id)
     })),
     ...referenced.length ? await loadAnnotationSets(referenced, { request }) : [],
@@ -168,7 +169,8 @@ async function annotationsOf(canvas, content, request) {
       annotation: entry.annotation,
       targetIndex: 0,
       pageId: set.id,
-      ...set.label ? { pageLabel: set.label } : {}
+      ...set.label ? { pageLabel: set.label } : {},
+      ...entry.place ? { place: entry.place } : {}
     }))
   );
 }

package/dist/components/Canvas/PlaceBox.mjs

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Close } from "../Body/glyphs.mjs";
+import { GivenMap } from "../Map/MapView.mjs";
+import Button from "../../ui/Button.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { localize } from "../../core/value.mjs";
+import { useOneOpen } from "../../ui/useOneOpen.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+function PlaceBox({
+  id,
+  open,
+  onClose,
+  feature,
+  name,
+  language
+}) {
+  const { t, langOf } = useCloverTranslation();
+  useOneOpen(open, () => onClose(false));
+  const heading = localize(name, language);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "clover-canvas-caption clover-canvas-place",
+      "data-open": open,
+      "data-testid": "clover-canvas-place",
+      id,
+      role: "group",
+      "aria-labelledby": heading.text ? `${id}-name` : void 0,
+      onKeyDown: (event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        event.stopPropagation();
+        onClose(true);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "clover-canvas-caption-close",
+            id: `close-${id}`,
+            label: t("commonClose"),
+            lang: langOf("commonClose"),
+            onClick: () => onClose(true),
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        ),
+        heading.text && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: `${id}-name`,
+            style: visuallyHidden,
+            ...languageProps(heading.lang),
+            children: heading.text
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          GivenMap,
+          {
+            navPlace: feature,
+            forwardedRef: null,
+            landmark: false,
+            list: false,
+            language
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PlaceBox as default
+};

package/dist/components/Canvas/Placeholder.mjs

@@ -1,10 +1,11 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { Play, Close, OpenViewer, CloseViewer } from "../Body/glyphs.mjs";
+import { Play, OpenViewer, CloseViewer } from "../Body/glyphs.mjs";
 import Button from "../../ui/Button.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { STILL_SIZE } from "./layout.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 function useStill(source, request) {
   const [src, setSrc] = useState(source.src);
   const key = source.src ?? source.service ?? source.fallback;
@@ -32,13 +33,48 @@ function Still({
       "img",
       {
         alt: still.alt,
-        lang: still.alt ? still.lang : void 0,
+        ...languageProps(still.alt ? still.lang : void 0),
         src,
         style
       }
     )
   ) : /* @__PURE__ */ jsx("span", { style });
 }
+function PlaceholderToggle({
+  instance,
+  media,
+  active,
+  onToggle,
+  more = false
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const id = `placeholder-${instance}`;
+  const toggleKey = media ? "playerPlay" : more ? active ? "canvasExpandControls" : "canvasCollapseControls" : active ? "imageViewerOpen" : "imageViewerClose";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: "clover-canvas-placeholder-toggle",
+      id,
+      label: t(toggleKey),
+      lang: langOf(toggleKey),
+      onClick: (event) => {
+        const focused = document.activeElement === event.currentTarget;
+        const figure = event.currentTarget.closest(".clover-canvas");
+        onToggle();
+        if (focused)
+          requestAnimationFrame(
+            () => {
+              var _a;
+              return (_a = document.getElementById(id) ?? (figure == null ? void 0 : figure.querySelector(
+                '.clover-canvas-transport :is([data-button="pause"], [data-button="play"])'
+              )) ?? (figure == null ? void 0 : figure.querySelector(".clover-canvas-viewport"))) == null ? void 0 : _a.focus();
+            }
+          );
+      },
+      children: media ? /* @__PURE__ */ jsx(Play, {}) : active ? /* @__PURE__ */ jsx(OpenViewer, {}) : /* @__PURE__ */ jsx(CloseViewer, {})
+    }
+  );
+}
 const Placeholder = ({
   instance,
   stills,
@@ -49,23 +85,19 @@ const Placeholder = ({
   onToggle,
   request
 }) => {
-  const { t, langOf } = useCloverTranslation();
-  const toggleKey = media ? active ? "playerPlay" : "playerClose" : active ? "imageViewerOpen" : "imageViewerClose";
   const shares = stills.map(
     ({ width, height }) => vertical ? height / width : width / height
   );
   const total = shares.reduce((sum, share) => sum + share, 0);
   const ratio = vertical ? 1 / total : total;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
+    media && active && /* @__PURE__ */ jsx(
+      PlaceholderToggle,
       {
-        className: "clover-canvas-placeholder-toggle",
-        id: `placeholder-${instance}`,
-        label: t(toggleKey),
-        lang: langOf(toggleKey),
-        onClick: onToggle,
-        children: media ? active ? /* @__PURE__ */ jsx(Play, {}) : /* @__PURE__ */ jsx(Close, {}) : active ? /* @__PURE__ */ jsx(OpenViewer, {}) : /* @__PURE__ */ jsx(CloseViewer, {})
+        instance,
+        media: true,
+        active: true,
+        onToggle
       }
     ),
     (active || lingering) && /* @__PURE__ */ jsx(
@@ -101,5 +133,6 @@ const Placeholder = ({
   ] });
 };
 export {
+  PlaceholderToggle,
   Placeholder as default
 };

package/dist/components/Canvas/RowFits.mjs

@@ -0,0 +1,85 @@
+"use client";
+import { useRef, useLayoutEffect } from "react";
+function fitsRow(widths, room, gap) {
+  return widths.reduce((sum, width) => sum + width + gap, -gap) <= room;
+}
+function refocus(cluster, id, more) {
+  const page = cluster.ownerDocument;
+  const shown = (node) => node instanceof HTMLElement && cluster.contains(node) && !node.closest("[hidden]");
+  const target = [
+    page.getElementById(id),
+    page.getElementById(more),
+    ...Array.from(cluster.querySelectorAll("button"))
+  ].find(shown);
+  target == null ? void 0 : target.focus();
+}
+function Fits({
+  cluster,
+  ids,
+  more,
+  fits,
+  onFits
+}) {
+  const shown = useRef(fits);
+  shown.current = fits;
+  const report = useRef(onFits);
+  report.current = onFits;
+  const widths = useRef(/* @__PURE__ */ new Map());
+  const latest = useRef(ids);
+  latest.current = ids;
+  const moved = useRef(null);
+  const key = ids.join(" ");
+  useLayoutEffect(() => {
+    const page = cluster.ownerDocument;
+    const measure = () => {
+      var _a;
+      const ids2 = latest.current;
+      const style = getComputedStyle(cluster);
+      const gap = parseFloat(style.columnGap) || 0;
+      let room = cluster.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+      let unit = 0;
+      for (const id of ids2) {
+        const width = (_a = page.getElementById(id)) == null ? void 0 : _a.offsetWidth;
+        if (width) widths.current.set(id, width);
+        unit = Math.max(unit, widths.current.get(id) ?? 0);
+      }
+      for (const child of Array.from(cluster.children)) {
+        if (!(child instanceof HTMLElement) || ids2.includes(child.id) || child.id === more || child.classList.contains("clover-canvas-more") || !child.offsetWidth || getComputedStyle(child).position === "absolute")
+          continue;
+        room -= child.offsetWidth + gap;
+      }
+      const next = fitsRow(
+        ids2.map((id) => widths.current.get(id) ?? unit),
+        room,
+        gap
+      );
+      if (next === shown.current) return;
+      const active = page.activeElement;
+      moved.current = active instanceof HTMLElement && cluster.contains(active) ? active.id : null;
+      shown.current = next;
+      report.current(next);
+    };
+    measure();
+    const resize = new ResizeObserver(() => measure());
+    resize.observe(cluster);
+    const mutation = new MutationObserver(() => measure());
+    mutation.observe(cluster, { childList: true });
+    return () => {
+      resize.disconnect();
+      mutation.disconnect();
+    };
+  }, [cluster, key, more]);
+  useLayoutEffect(() => {
+    const id = moved.current;
+    moved.current = null;
+    if (id === null) return;
+    const active = cluster.ownerDocument.activeElement;
+    if (!active || !cluster.contains(active) || active.closest("[hidden]"))
+      refocus(cluster, id, more);
+  }, [fits, cluster, more]);
+  return null;
+}
+export {
+  Fits,
+  fitsRow
+};

package/dist/components/Canvas/fromManifest.mjs

@@ -10,7 +10,8 @@ function useRangeChapters(manifest, playing, language, read) {
         label: value.text,
         lang: value.lang,
         start: chapter.start,
-        end: chapter.end
+        end: chapter.end,
+        ...chapter.thumbnail ? { thumbnail: chapter.thumbnail } : {}
       };
     }),
     [manifest, playing, language, read]