@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/components/Body/Body.mjs

@@ -7,6 +7,7 @@ import { rendererSurface } from "../Canvas/rendererSurface.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
 import { useVisibleCanvases } from "../../react/hooks.mjs";
+import { useRootContentState } from "../../react/useContentStateOutput.mjs";
 import { Loading } from "../../ui/Loading.mjs";
 const ConnectedTimeline = lazy(() => import("../Timeline/Connected.mjs"));
 const ConnectedScene = lazy(() => import("../Scene/Connected.mjs"));
@@ -14,11 +15,14 @@ function Body({
   className,
   style,
   renderers,
+  collapseControls,
+  onContentStateChange,
   children,
   ...canvas
 }) {
   var _a;
   const root = useClover("Body");
+  useRootContentState(root.clover, onContentStateChange);
   const canvases = useVisibleCanvases();
   const bodies = useMemo(() => paintingBodies(canvases), [canvases]);
   const renderer = pickRenderer(renderers ?? root.renderers, {
@@ -40,7 +44,18 @@ function Body({
         ...style
       },
       children: [
-        Renderer ? /* @__PURE__ */ jsx(Renderer, { canvases, bodies, children }) : kind === "Scene" ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { overlay: true }), children: /* @__PURE__ */ jsx(ConnectedScene, { ...canvas, children }) }) : kind === "Timeline" ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { overlay: true }), children: /* @__PURE__ */ jsx(ConnectedTimeline, { ...canvas, children }) }) : /* @__PURE__ */ jsx(ConnectedCanvas, { ...canvas, surface: rendererSurface, children }),
+        Renderer ? /* @__PURE__ */ jsx(Renderer, { canvases, bodies, children }) : kind === "Scene" ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { overlay: true }), children: /* @__PURE__ */ jsx(ConnectedScene, { ...canvas, children }) }) : kind === "Timeline" ? /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { overlay: true }), children: /* @__PURE__ */ jsx(ConnectedTimeline, { ...canvas, children }) }) : (
+          // Canvas's alone: a Timeline's and a Scene's controls are their own (as yet).
+          /* @__PURE__ */ jsx(
+            ConnectedCanvas,
+            {
+              ...canvas,
+              collapseControls,
+              surface: rendererSurface,
+              children
+            }
+          )
+        ),
         busy && /* @__PURE__ */ jsx(Loading, { overlay: true })
       ]
     }

package/dist/components/Body/BodyAlert.mjs

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 function BodyAlert({
   error,
   className
@@ -14,7 +15,7 @@ function BodyAlert({
       "data-status": "error",
       role: "alert",
       children: [
-        /* @__PURE__ */ jsx("p", { lang: langOf("statusError"), children: t("statusError") }),
+        /* @__PURE__ */ jsx("p", { ...languageProps(langOf("statusError")), children: t("statusError") }),
         /* @__PURE__ */ jsx("p", { className: "clover-status-detail", lang: "en", children: error.message })
       ]
     }

package/dist/components/Body/Caption.mjs

@@ -6,6 +6,7 @@ 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";
 const CaptionDetails = lazy(() => import("./CaptionDetails.mjs"));
 function hasInformation(canvas) {
   var _a;
@@ -64,7 +65,7 @@ const Caption = ({
               {
                 className: "clover-canvas-caption-label",
                 id: captionLabelId(id, index),
-                lang: label.lang,
+                ...languageProps(label.lang),
                 children: label.text
               }
             ),

package/dist/components/Body/CaptionDetails.mjs

@@ -6,6 +6,7 @@ import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { Markup, MetadataList } from "../../ui/Markup.mjs";
 import { ReadMore } from "../../ui/ReadMore.mjs";
 import { EntryBodies } from "../Annotations/EntryBodies.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const CaptionDetails = ({ summary, metadata, comments, language }) => {
   const { t, langOf } = useCloverTranslation();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -31,7 +32,7 @@ const CaptionDetails = ({ summary, metadata, comments, language }) => {
         "p",
         {
           className: "clover-canvas-caption-annotations-label",
-          lang: langOf("informationPanelTabsAnnotations"),
+          ...languageProps(langOf("informationPanelTabsAnnotations")),
           children: t("informationPanelTabsAnnotations")
         }
       ),

package/dist/components/Body/glyphs.mjs

@@ -8,6 +8,20 @@ const Comment = () => /* @__PURE__ */ jsx(
     d: "M144 72H368A96 96 0 0 1 464 168V296A96 96 0 0 1 368 392H200L104 460L144 392A96 96 0 0 1 48 296V168A96 96 0 0 1 144 72Z M168 184H344A16 16 0 0 1 344 216H168A16 16 0 0 1 168 184Z M168 264H280A16 16 0 0 1 280 296H168A16 16 0 0 1 168 264Z"
   }
 );
+const Chapters = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M160 144h288M160 256h288M160 368h288",
+      fill: "none",
+      strokeLinecap: "round",
+      strokeWidth: "32"
+    }
+  ),
+  /* @__PURE__ */ jsx("circle", { cx: "80", cy: "144", r: "20", stroke: "none" }),
+  /* @__PURE__ */ jsx("circle", { cx: "80", cy: "256", r: "20", stroke: "none" }),
+  /* @__PURE__ */ jsx("circle", { cx: "80", cy: "368", r: "20", stroke: "none" })
+] });
 const Information = () => /* @__PURE__ */ jsx(
   "path",
   {
@@ -15,6 +29,14 @@ const Information = () => /* @__PURE__ */ jsx(
     d: "M256 72A48 48 0 1 1 256 168A48 48 0 1 1 256 72Z M192 216H296V384H328V432H184V384H216V264H192Z"
   }
 );
+const Place = () => /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    stroke: "none",
+    d: "M256 40C166 40 100 108 100 196C100 300 216 420 246 452A14 14 0 0 0 266 452C296 420 412 300 412 196C412 108 346 40 256 40Z M256 136A60 60 0 1 1 256 256A60 60 0 1 1 256 136Z"
+  }
+);
 const Play = () => /* @__PURE__ */ jsx("path", { strokeLinejoin: "round", strokeWidth: "40", d: "M184 128V384L392 256Z" });
 const Close = () => /* @__PURE__ */ jsx(
   "path",
@@ -57,10 +79,12 @@ const CloseViewer = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   )
 ] });
 export {
+  Chapters,
   Close,
   CloseViewer,
   Comment,
   Information,
   OpenViewer,
+  Place,
   Play
 };

package/dist/components/Canvas/AnnotationMenu.mjs

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { createElement } from "react";
 import { startOf } from "./Annotations.mjs";
 import ControlMenu from "./ControlMenu.mjs";
 import { CueTime } from "../../ui/Cue.mjs";
 import { HideToggle } from "../../ui/HideToggle.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const AnnotationMenu = ({
   id,
   triggerId,
@@ -54,69 +54,85 @@ const AnnotationMenu = ({
               of: group.page ? labelId : void 0
             }
           );
-          return /* @__PURE__ */ createElement(
+          return /* @__PURE__ */ jsxs(
             "fieldset",
             {
               ...group.page ? { "aria-labelledby": labelId } : name.props,
               className: "clover-canvas-menu-group clover-annotations-set",
-              key: g
+              children: [
+                group.page ? /* @__PURE__ */ jsxs("legend", { className: "clover-canvas-menu-legend clover-annotations-set-header", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "clover-annotations-title",
+                      id: labelId,
+                      ...languageProps(group.page.lang),
+                      children: group.page.text
+                    }
+                  ),
+                  toggle
+                ] }) : toggle && /* @__PURE__ */ jsx("div", { className: "clover-annotations-set-header", children: toggle }),
+                /* @__PURE__ */ jsx("div", { className: "clover-annotations-list", children: group.items.map((index) => {
+                  const annotation = annotations[index];
+                  const start = startOf(annotation);
+                  const picked = selected === annotation.id;
+                  const image = "image" in annotation ? annotation.image : void 0;
+                  return /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "clover-canvas-menu-item clover-annotations-entry",
+                      "data-selected": picked,
+                      onMouseEnter: () => onActivate(annotation.id),
+                      onMouseLeave: () => onActivate(null),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "radio",
+                            name: id,
+                            checked: picked,
+                            onChange: () => onSelect(annotation),
+                            onClick: () => picked && onSelect(annotation),
+                            onFocus: () => onActivate(annotation.id),
+                            onBlur: () => onActivate(null)
+                          }
+                        ),
+                        start !== void 0 && /* @__PURE__ */ jsx(
+                          CueTime,
+                          {
+                            start,
+                            className: "clover-annotations-time"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("span", { className: "clover-annotations-body clover-cue-text", children: [
+                          image && /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              className: "clover-annotations-image",
+                              src: image,
+                              alt: "",
+                              loading: "lazy"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "clover-annotations-text",
+                              ...languageProps(
+                                annotation.label ? annotation.lang : void 0
+                              ),
+                              children: annotation.label ?? String(index + 1)
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    annotation.id
+                  );
+                }) })
+              ]
             },
-            group.page ? /* @__PURE__ */ jsxs("legend", { className: "clover-canvas-menu-legend clover-annotations-set-header", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "clover-annotations-title",
-                  id: labelId,
-                  lang: group.page.lang,
-                  children: group.page.text
-                }
-              ),
-              toggle
-            ] }) : toggle && /* @__PURE__ */ jsx("div", { className: "clover-annotations-set-header", children: toggle }),
-            /* @__PURE__ */ jsx("div", { className: "clover-annotations-list", children: group.items.map((index) => {
-              const annotation = annotations[index];
-              const start = startOf(annotation);
-              const picked = selected === annotation.id;
-              return /* @__PURE__ */ jsxs(
-                "label",
-                {
-                  className: "clover-canvas-menu-item clover-annotations-entry",
-                  "data-selected": picked,
-                  onMouseEnter: () => onActivate(annotation.id),
-                  onMouseLeave: () => onActivate(null),
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "input",
-                      {
-                        type: "radio",
-                        name: id,
-                        checked: picked,
-                        onChange: () => onSelect(annotation),
-                        onClick: () => picked && onSelect(annotation),
-                        onFocus: () => onActivate(annotation.id),
-                        onBlur: () => onActivate(null)
-                      }
-                    ),
-                    start !== void 0 && /* @__PURE__ */ jsx(
-                      CueTime,
-                      {
-                        start,
-                        className: "clover-annotations-time"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: "clover-annotations-body clover-cue-text",
-                        lang: annotation.label ? annotation.lang : void 0,
-                        children: annotation.label ?? String(index + 1)
-                      }
-                    )
-                  ]
-                },
-                annotation.id
-              );
-            }) })
+            g
           );
         })
       ]

package/dist/components/Canvas/AnnotationState.mjs

@@ -21,7 +21,8 @@ function AnnotationState({
   openImages,
   openMedia,
   host,
-  onModel
+  onModel,
+  refind = 0
 }) {
   const {
     canvases,
@@ -210,11 +211,16 @@ function AnnotationState({
     } : void 0,
     [canFollow, releaseAnnotation, host]
   );
+  const lastRefind = useRef(refind);
   useEffect(() => {
     if (!selectedAnnotation) {
       framed.current = null;
       return;
     }
+    if (lastRefind.current !== refind) {
+      lastRefind.current = refind;
+      framed.current = null;
+    }
     if (framed.current === selectedAnnotation) return;
     const find = (list) => list.find((annotation) => annotation.id === selectedAnnotation);
     const drawnOne = find(placedAnnotations);
@@ -231,7 +237,8 @@ function AnnotationState({
     placedAnnotations,
     allPlaced,
     mediaElement,
-    renderer
+    renderer,
+    refind
   ]);
   const allTimed = useMemo(
     () => media ? timeAnnotations(allAnnotations, language) : [],

package/dist/components/Canvas/Annotations.mjs

@@ -8,10 +8,11 @@ import { annotationName } from "../../core/annotation-name.mjs";
 import { parseAnnotationTarget } from "../../core/annotations.mjs";
 import { bodiesOf } from "../../core/painting.mjs";
 import { readLink } from "../../core/link.mjs";
-import { parseTime } from "../../core/ranges.mjs";
+import { parseTime } from "../../lib/time.mjs";
 import { localize } from "../../core/value.mjs";
 import { Tip } from "../../ui/Tip.mjs";
 import { overlaysOf } from "../../lib/renderer/overlays/OverlayLayer.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const isTimed = (annotation) => "start" in annotation;
 const startOf = (annotation) => {
   var _a, _b;
@@ -65,7 +66,13 @@ const POINT_BOX = 40;
 function placeAnnotations(annotations, place, readSvg = null, language) {
   var _a;
   const placed = [];
-  for (const { annotation, targetIndex, pageLabel, pageId } of annotations) {
+  for (const {
+    annotation,
+    targetIndex,
+    pageLabel,
+    pageId,
+    place: partOf
+  } of annotations) {
     const target = parseAnnotationTarget(annotation == null ? void 0 : annotation.target);
     if (!target) continue;
     let rect = null;
@@ -111,7 +118,8 @@ function placeAnnotations(annotations, place, readSvg = null, language) {
       ...link ? { link } : {},
       ...image ? { image } : {},
       ...pageOf(pageLabel, language),
-      ...pageId ? { pageId } : {}
+      ...pageId ? { pageId } : {},
+      ...partOf ? { place: partOf } : {}
     });
   }
   return placed;
@@ -252,7 +260,8 @@ const AnnotationButton = ({
 }) => {
   var _a, _b, _c;
   const [element, setElement] = useState(null);
-  const { id } = entry;
+  const { id, place } = entry;
+  const shownPlace = place && `${place.index} / ${place.total}`;
   const attach = useCallback(
     (node) => {
       setElement(node);
@@ -291,9 +300,9 @@ const AnnotationButton = ({
       "data-shape": ((_a = entry.shape) == null ? void 0 : _a.kind) ?? "rect",
       "data-track": entry.track ? "" : void 0,
       "data-link": web || follow ? "true" : void 0,
-      "aria-label": name,
+      "aria-label": shownPlace ? `${name} ${shownPlace}` : name,
       "aria-current": selected ? "true" : void 0,
-      lang,
+      ...languageProps(lang),
       style: {
         "--clover-annotation-depth": depth
       },
@@ -322,7 +331,7 @@ const AnnotationButton = ({
       children: [
         ((_b = entry.shape) == null ? void 0 : _b.kind) === "point" && /* @__PURE__ */ jsx("span", { className: "clover-canvas-annotation-point", "aria-hidden": "true" }),
         ((_c = entry.shape) == null ? void 0 : _c.kind) === "svg" && /* @__PURE__ */ jsx(ShapeOutline, { svg: entry.shape.svg }),
-        /* @__PURE__ */ jsx(Tip, { label: name, scrolls: true, image: entry.image })
+        /* @__PURE__ */ jsx(Tip, { label: name, scrolls: true, image: entry.image, after: shownPlace })
       ]
     }
   );