@nulib/clover 4.0.0-beta.0 → 4.0.0

package/dist/components/Canvas/CanvasView.mjs

@@ -1,15 +1,17 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, Suspense, lazy } from "react";
+import React, { useRef, useState, useMemo, useEffect, useCallback, useLayoutEffect, Suspense, lazy } from "react";
 import Caption, { hasInformation, captionLabelId } from "../Body/Caption.mjs";
 import Controls from "./Controls.mjs";
-import Placeholder from "./Placeholder.mjs";
-import { findChoices, animationFrames, canvasScene, placeholderStill, frameKey, canvasRectToWorld, canvasSize } from "./layout.mjs";
+import { findChoices, startingChoices, animationFrames, canvasScene, placeholderStill, frameKey, canvasRectToWorld, canvasSize } from "./layout.mjs";
 import ExitFullscreen from "../../ui/ExitFullscreen.mjs";
 import { useControlsVisibility } from "../Body/useControlsVisibility.mjs";
 import { useNearViewport } from "../Body/useNearViewport.mjs";
 import useFullscreen from "../../hooks/useFullscreen.mjs";
+import useWithinFullscreen from "../../hooks/useWithinFullscreen.mjs";
+import useFullscreenExit from "../../hooks/useFullscreenExit.mjs";
 import { useLoaded } from "../../hooks/useLoaded.mjs";
+import { useHighContrast, highContrastProps } from "../../hooks/useHighContrast.mjs";
 import { ErrorBoundary } from "../../ui/ErrorBoundary.mjs";
 import { Loading } from "../../ui/Loading.mjs";
 import { SHORTCUTS, forwardShortcut } from "../../ui/Tip.mjs";
@@ -18,12 +20,14 @@ import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { BodyUnloadable, BodyNote } from "../../ui/BodyUnloadable.mjs";
 import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
-import { useRootLanguage } from "../../react/language.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useRootLanguage } from "../../i18n/useRootLanguage.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
 import { union } from "../../lib/renderer/math/rect.mjs";
 import { findImageServiceId } from "../../lib/renderer/sources/imageService.mjs";
 import { hasCamera } from "./surface.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 import { resolveDirection } from "../../core/sequence.mjs";
 const MediaBody = lazy(() => import("./media/MediaBody.mjs"));
 const loadHotspots = () => import("./AnnotationState.mjs");
@@ -43,13 +47,16 @@ const NO_MODEL = {
   quietlyOpened: null
 };
 const FrameAnimation = lazy(() => import("./FrameAnimation.mjs"));
+const PlaceBox = lazy(() => import("./PlaceBox.mjs"));
+const Placeholder = lazy(() => import("./Placeholder.mjs"));
 const ALL_CONTROLS = {
   zoom: true,
   fullPage: true,
   rotation: true,
   reset: true,
   annotations: true,
-  information: true
+  information: true,
+  map: true
 };
 const CAMERA_KEYS = {
   description: "canvasKeysImage",
@@ -77,7 +84,7 @@ const CanvasView = (props) => {
   return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(CanvasBody, { ...props }) });
 };
 const CanvasBody = (props) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   const {
     surface: makeSurface,
     manifestId,
@@ -89,6 +96,7 @@ const CanvasBody = (props) => {
     label,
     partOf,
     language,
+    highContrast,
     instanceId,
     className,
     options,
@@ -114,9 +122,12 @@ const CanvasBody = (props) => {
     null
   );
   const isFullscreen = useFullscreen(wrapperElement);
+  const withinFullscreen = useWithinFullscreen(wrapperElement);
+  const exitShown = useFullscreenExit(wrapperElement);
   const root = useRootLanguage(
     setWrapperElement
   );
+  const contrast = useHighContrast(highContrast);
   const controlsVisible = useControlsVisibility(
     wrapperElement,
     options == null ? void 0 : options.hideDelay,
@@ -131,6 +142,7 @@ const CanvasBody = (props) => {
   const [navigatorElement, setNavigatorElement] = useState(null);
   const controlsConfig = controls === false ? null : controls === true ? ALL_CONTROLS : { ...ALL_CONTROLS, ...controls };
   const [status, setStatus] = useState("loading");
+  const [unloadable, setUnloadable] = useState(false);
   const [sceneVersion, setSceneVersion] = useState(0);
   const onReadyRef = useRef(onReady);
   const onViewportChangeRef = useRef(onViewportChange);
@@ -140,13 +152,64 @@ const CanvasBody = (props) => {
   optionsRef.current = options;
   const direction = resolveDirection(viewingDirection);
   const choices = useMemo(() => findChoices(canvases ?? []), [canvases]);
-  const [selections, setSelections] = useState({});
+  const starting = useMemo(() => startingChoices(choices), [choices]);
+  const [picked, setSelections] = useState({});
+  const selections = useMemo(
+    () => ({ ...starting, ...picked }),
+    [starting, picked]
+  );
   const selectChoice = (key, index) => setSelections((current) => ({ ...current, [key]: index }));
+  const layered = useMemo(
+    () => allAnnotations == null ? void 0 : allAnnotations.filter(
+      (each) => !each.layer || (selections[each.layer.key] ?? 0) === each.layer.item
+    ),
+    [allAnnotations, selections]
+  );
+  const pickedLayer = (_a = allAnnotations == null ? void 0 : allAnnotations.find(
+    (each) => each.layer && each.annotation.id === props.selectedAnnotation
+  )) == null ? void 0 : _a.layer;
+  useEffect(() => {
+    if (pickedLayer && (selections[pickedLayer.key] ?? 0) !== pickedLayer.item)
+      selectChoice(pickedLayer.key, pickedLayer.item);
+  }, [pickedLayer == null ? void 0 : pickedLayer.key, pickedLayer == null ? void 0 : pickedLayer.item, props.selectedAnnotation]);
   const showInformation = Boolean(controlsConfig == null ? void 0 : controlsConfig.information);
   const hasAnnotations = Boolean(allAnnotations == null ? void 0 : allAnnotations.length);
   const hotspots = useLoaded(loadHotspots, hasAnnotations);
   const [annotationModel, setAnnotationModel] = useState(null);
   const model = hasAnnotations && annotationModel || NO_MODEL;
+  const pickedPlace = useMemo(() => {
+    var _a2, _b2;
+    const picked2 = (_a2 = allAnnotations == null ? void 0 : allAnnotations.find(
+      (each) => each.annotation.id === model.selected
+    )) == null ? void 0 : _a2.annotation;
+    const body2 = (Array.isArray(picked2 == null ? void 0 : picked2.body) ? picked2 == null ? void 0 : picked2.body : [picked2 == null ? void 0 : picked2.body]).find((each) => (each == null ? void 0 : each.type) === "Feature");
+    return picked2 && body2 ? {
+      id: String(picked2.id),
+      feature: body2,
+      name: ((_b2 = body2.properties) == null ? void 0 : _b2.label) ?? picked2.label
+    } : null;
+  }, [allAnnotations, model.selected]);
+  const pickKey = pickedPlace ? `${pickedPlace.id}:${props.refind ?? 0}` : null;
+  const [closedPick, setClosedPick] = useState(null);
+  const pickOpen = pickKey !== null && closedPick !== pickKey;
+  const places = useMemo(() => {
+    var _a2, _b2;
+    const own = (canvases ?? []).map((canvas) => canvas.navPlace).filter(Boolean);
+    const source = own.length ? own : props.navPlace ? [props.navPlace] : [];
+    if (!source.length) return null;
+    const features = source.flatMap(
+      (place) => (place == null ? void 0 : place.type) === "FeatureCollection" ? place.features ?? [] : (place == null ? void 0 : place.type) === "Feature" ? [place] : []
+    );
+    if (!features.length) return null;
+    const named = features.length === 1 ? (_b2 = (_a2 = features[0]) == null ? void 0 : _a2.properties) == null ? void 0 : _b2.label : void 0;
+    return {
+      feature: { type: "FeatureCollection", features },
+      name: named ?? props.label
+    };
+  }, [canvases, props.navPlace, props.label]);
+  const placeId = `place-box-${instance}`;
+  const [placeOpen, setPlaceOpen] = useState(false);
+  const [placeShown, setPlaceShown] = useState(false);
   const modelRef = useRef(model);
   modelRef.current = model;
   const releaseAnnotation = useCallback(() => modelRef.current.release(), []);
@@ -198,8 +261,10 @@ const CanvasBody = (props) => {
   const baseImages = scene ? scene.images : bodyImages;
   const mediaOnly = Boolean(media) && (canvases == null ? void 0 : canvases.length) === 1;
   const player = mediaOnly && (media == null ? void 0 : media.kind) === "audio";
-  const navigable = !mediaOnly && ((_a = options == null ? void 0 : options.gestures) == null ? void 0 : _a.navigable) !== false;
-  const canvasKey = (canvases == null ? void 0 : canvases.map((canvas) => canvas.id).join("|")) ?? null;
+  const empty = (canvases == null ? void 0 : canvases.length) === 1 && !media && !animated && baseImages.length === 0;
+  const navigable = !mediaOnly && !empty && ((_b = options == null ? void 0 : options.gestures) == null ? void 0 : _b.navigable) !== false;
+  const canvasKey = canvases ? `${manifestId ?? ""}
+${canvases.map((canvas) => canvas.id).join("|")}` : null;
   const stills = useMemo(() => {
     if (!canvases || !placeholder) return [];
     const found = canvases.flatMap((canvas) => {
@@ -212,21 +277,26 @@ const CanvasBody = (props) => {
   const [imagesOpen, setImagesOpen] = useState(false);
   const [mediaOpenedFor, setMediaOpenedFor] = useState(null);
   const showPlaceholder = !player && stills.length > 0 && (media ? mediaOpenedFor !== canvasKey : !imagesOpen);
-  const onlyInformation = (config, { annotations = false } = {}) => ({
+  const onlyInformation = (config, { annotations = false, fullPage = false } = {}) => ({
     ...config,
     zoom: false,
     rotation: false,
     reset: false,
-    fullPage: false,
+    fullPage: fullPage && config.fullPage,
     annotations: annotations && config.annotations
   });
+  const fullscreenExit = empty && withinFullscreen;
   const hostControls = React.Children.count(children) > 0;
-  const shownControls = !controlsConfig ? null : showPlaceholder ? captioned.length || hostControls || listedCount ? onlyInformation(controlsConfig, { annotations: true }) : null : mediaOnly ? choices.length || captioned.length || hostControls || listedCount ? onlyInformation(controlsConfig, { annotations: true }) : null : controlsConfig;
+  const shownControls = !controlsConfig ? null : showPlaceholder ? captioned.length || hostControls || listedCount ? onlyInformation(controlsConfig, { annotations: true }) : null : mediaOnly || empty ? choices.length || captioned.length || hostControls || listedCount || fullscreenExit && controlsConfig.fullPage ? onlyInformation(controlsConfig, {
+    annotations: true,
+    fullPage: fullscreenExit
+  }) : null : controlsConfig;
   const showNavigator = navigator && !showPlaceholder && (media ? media.kind === "audio" && !mediaOnly && baseImages.length > 0 : true);
   const [fitted, setFitted] = useState(null);
   const videoPlacement = media ? fitted ?? media.placement : null;
-  const images = useMemo(
-    () => (media == null ? void 0 : media.kind) === "video" && mediaElement && videoPlacement ? [
+  const [frameItems, setFrameItems] = useState(NO_ITEMS);
+  const images = useMemo(() => {
+    const withVideo = (media == null ? void 0 : media.kind) === "video" && mediaElement && videoPlacement ? [
       ...baseImages,
       {
         id: media.id,
@@ -235,14 +305,15 @@ const CanvasBody = (props) => {
         height: videoPlacement.height,
         media: { element: mediaElement }
       }
-    ] : baseImages,
-    [baseImages, media, mediaElement, videoPlacement]
-  );
+    ] : baseImages;
+    return frameItems.length ? [...withVideo, ...frameItems] : withVideo;
+  }, [baseImages, media, mediaElement, videoPlacement, frameItems]);
   const world = mediaOnly && (media == null ? void 0 : media.kind) === "video" && fitted ? fitted : scene ? union(scene.placements) : null;
   const imagesKey = JSON.stringify([
     baseImages,
     world,
-    images.length !== baseImages.length && [media == null ? void 0 : media.id, videoPlacement]
+    images.length !== baseImages.length && [media == null ? void 0 : media.id, videoPlacement],
+    frameItems.map((item) => item.id)
   ]);
   const shownCanvases = useRef(null);
   const placeholderShown = useRef(false);
@@ -252,7 +323,7 @@ const CanvasBody = (props) => {
     if (!showPlaceholder) releaseAnnotation();
   };
   const firstBody = Array.isArray(body) ? body[0] : body;
-  const ownName = [label, (_b = canvases == null ? void 0 : canvases[0]) == null ? void 0 : _b.label, firstBody == null ? void 0 : firstBody.label].map((value) => localize(value, language)).find((value) => value.text);
+  const ownName = [label, (_c = canvases == null ? void 0 : canvases[0]) == null ? void 0 : _c.label, firstBody == null ? void 0 : firstBody.label].map((value) => localize(value, language)).find((value) => value.text);
   const partOfName = useMemo(() => {
     const name = localize(partOf, language);
     return name.text && name.text !== (ownName == null ? void 0 : ownName.text) ? name : void 0;
@@ -281,7 +352,7 @@ const CanvasBody = (props) => {
     const { canvases: canvases2, scene: scene2, canvasKey: canvasKey2 } = latestScene.current;
     drawnScene.current = canvases2 && scene2 && shownCanvases.current === canvasKey2 ? { key: canvasKey2, canvases: canvases2, placements: scene2.placements } : null;
   }, []);
-  const drawn = !canvases || ((_c = drawnScene.current) == null ? void 0 : _c.key) === canvasKey;
+  const drawn = !canvases || ((_d = drawnScene.current) == null ? void 0 : _d.key) === canvasKey;
   useEffect(() => {
     const host = hostRef.current;
     if (!host) return;
@@ -326,6 +397,10 @@ const CanvasBody = (props) => {
     const offError = surface2.on("error", () => {
       if (!surface2.isOpen) setStatus("error");
     });
+    const offUnloadable = surface2.on(
+      "unloadable",
+      (failed) => setUnloadable(Boolean(failed))
+    );
     const offViewport = surface2.on("viewport", () => {
       var _a2;
       if (renderer2) (_a2 = onViewportChangeRef.current) == null ? void 0 : _a2.call(onViewportChangeRef, renderer2.getBounds());
@@ -334,6 +409,7 @@ const CanvasBody = (props) => {
       offOpen();
       offChange();
       offError();
+      offUnloadable();
       offViewport();
       surface2.dispose();
       surfaceRef.current = null;
@@ -344,6 +420,19 @@ const CanvasBody = (props) => {
     if (!renderer || !navigatorElement) return;
     return renderer.attachNavigator(navigatorElement);
   }, [renderer, navigatorElement]);
+  useEffect(() => {
+    if (!surface || !empty) return;
+    surface.setGestures({ navigable: false });
+    return () => surface.setGestures({});
+  }, [surface, empty]);
+  const exitFocused = useRef(false);
+  useEffect(() => {
+    var _a2;
+    if (fullscreenExit) return;
+    const lost = !document.activeElement || document.activeElement === document.body;
+    if (exitFocused.current && lost) (_a2 = hostRef.current) == null ? void 0 : _a2.focus();
+    exitFocused.current = false;
+  }, [fullscreenExit]);
   useEffect(() => {
     const surface2 = surfaceRef.current;
     if (showPlaceholder) placeholderShown.current = true;
@@ -373,8 +462,11 @@ const CanvasBody = (props) => {
       className: join("clover-canvas", className),
       "data-testid": "clover-canvas",
       "data-status": status,
+      ...highContrastProps(contrast),
+      "data-unloadable": unloadable || void 0,
       "data-has-navigator": showNavigator,
       "data-fullscreen": isFullscreen,
+      "data-exit": exitShown || void 0,
       "data-controls": controlsVisible ? "visible" : "hidden",
       "data-media": media == null ? void 0 : media.kind,
       "data-player": player ? "" : void 0,
@@ -382,6 +474,9 @@ const CanvasBody = (props) => {
       "data-navigable": navigable,
       "data-placeholder": stills.length && !player ? showPlaceholder : void 0,
       ref: root.ref,
+      onFocus: (event) => {
+        exitFocused.current = fullscreenExit && event.target.id === `fullPage-${instance}`;
+      },
       onKeyDown: (event) => {
         if (event.key === "Escape" && isCaptionOpen && !event.defaultPrevented) {
           event.preventDefault();
@@ -404,7 +499,7 @@ const CanvasBody = (props) => {
       },
       children: [
         (shownControls || showNavigator) && /* @__PURE__ */ jsx("div", { className: "clover-canvas-scrim", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(ExitFullscreen, { hidden: !isFullscreen }),
+        /* @__PURE__ */ jsx(ExitFullscreen, { hidden: !exitShown }),
         surface && shownControls && /* @__PURE__ */ jsx(
           Controls,
           {
@@ -425,6 +520,12 @@ const CanvasBody = (props) => {
             captionId: hasCaption ? captionId : void 0,
             captionOpen: isCaptionOpen,
             onCaptionToggle: () => setCaptionOpen((open) => !open),
+            placeId: places ? placeId : void 0,
+            placeOpen,
+            onPlaceToggle: () => {
+              setPlaceShown(true);
+              setPlaceOpen((open) => !open);
+            },
             language,
             children
           }
@@ -462,18 +563,20 @@ const CanvasBody = (props) => {
         viewportName.node,
         viewportKeys.length > 0 && /* @__PURE__ */ jsx("span", { id: keysId, style: visuallyHidden, children: viewportKeys.map(({ description }, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
           index > 0 && " ",
-          /* @__PURE__ */ jsx("span", { lang: root.langOf(description), children: t(description) })
+          /* @__PURE__ */ jsx("span", { ...languageProps(root.langOf(description)), children: t(description) })
         ] }, description)) }),
+        /* @__PURE__ */ jsx(BodyUnloadable, { kind: "image", shown: unloadable && !showPlaceholder }),
+        empty && !showPlaceholder && (ownName == null ? void 0 : ownName.text) && /* @__PURE__ */ jsx(BodyNote, { text: ownName.text, lang: ownName.lang || void 0 }),
         (media == null ? void 0 : media.kind) === "audio" && !player && baseImages.length === 0 && !showPlaceholder && (ownName == null ? void 0 : ownName.text) && /* @__PURE__ */ jsx(
           "p",
           {
             className: "clover-canvas-sound-label",
             "aria-hidden": "true",
-            lang: ownName.lang || void 0,
+            ...languageProps(ownName.lang || void 0),
             children: ownName.text
           }
         ),
-        stills.length > 0 && !player && /* @__PURE__ */ jsx(
+        stills.length > 0 && !player && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           Placeholder,
           {
             instance,
@@ -485,7 +588,7 @@ const CanvasBody = (props) => {
             onToggle: togglePlaceholder,
             request: options == null ? void 0 : options.request
           }
-        ),
+        ) }),
         surface && media && nearViewport && !showPlaceholder && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           MediaBody,
           {
@@ -499,7 +602,7 @@ const CanvasBody = (props) => {
             caption,
             navigable,
             fullscreen: mediaOnly && Boolean(controlsConfig == null ? void 0 : controlsConfig.fullPage),
-            isFullscreen,
+            isFullscreen: withinFullscreen,
             onEnded,
             chapters,
             highlightedChapter,
@@ -522,10 +625,14 @@ const CanvasBody = (props) => {
             byFrame: scene.frames[frameKey(animated)],
             animationKey: animated.id,
             sceneVersion,
-            autoplay: (_d = options == null ? void 0 : options.animation) == null ? void 0 : _d.autoplay,
-            loop: (_e = options == null ? void 0 : options.animation) == null ? void 0 : _e.loop,
+            autoplay: (_e = options == null ? void 0 : options.animation) == null ? void 0 : _e.autoplay,
+            loop: (_f = options == null ? void 0 : options.animation) == null ? void 0 : _f.loop,
             onEnded,
-            language
+            language,
+            duration: Number(animated.duration),
+            canvas: animated,
+            place: scene.placements[canvases.indexOf(animated)],
+            onItems: setFrameItems
           },
           animated.id
         ) }),
@@ -533,7 +640,7 @@ const CanvasBody = (props) => {
           hotspots.AnnotationState,
           {
             given: props,
-            annotations: allAnnotations,
+            annotations: layered ?? allAnnotations,
             scene,
             renderer,
             sceneVersion,
@@ -545,10 +652,43 @@ const CanvasBody = (props) => {
             openImages: setImagesOpen,
             openMedia: setMediaOpenedFor,
             host: hostRef,
-            onModel: setAnnotationModel
+            onModel: setAnnotationModel,
+            refind: props.refind ?? 0
           }
         ),
         loading && /* @__PURE__ */ jsx(Loading, { overlay: true }),
+        pickedPlace && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          PlaceBox,
+          {
+            id: `place-of-${instance}`,
+            open: pickOpen,
+            onClose: (restoreFocus) => {
+              var _a2;
+              setClosedPick(pickKey);
+              if (restoreFocus)
+                (_a2 = document.getElementById(pickedPlace.id)) == null ? void 0 : _a2.focus();
+            },
+            feature: pickedPlace.feature,
+            name: pickedPlace.name,
+            language
+          }
+        ) }),
+        places && placeShown && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          PlaceBox,
+          {
+            id: placeId,
+            open: placeOpen,
+            onClose: (restoreFocus) => {
+              var _a2;
+              setPlaceOpen(false);
+              if (restoreFocus)
+                (_a2 = document.getElementById(`place-${instance}`)) == null ? void 0 : _a2.focus();
+            },
+            feature: places.feature,
+            name: places.name,
+            language
+          }
+        ) }),
         hasCaption && /* @__PURE__ */ jsx(
           Caption,
           {
@@ -610,6 +750,7 @@ function canvasHandle(renderer, drawn, zoomToAnnotation) {
   };
 }
 const NO_FRAMES = [];
+const NO_ITEMS = [];
 function toSceneImages(body, src, isTiledImage = false) {
   const bodies = Array.isArray(body) ? body : body ? [body] : [];
   if (bodies.length) {

package/dist/components/Canvas/ChoiceMenu.mjs

@@ -1,9 +1,10 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { createElement } from "react";
 import ControlMenu from "./ControlMenu.mjs";
+import { playsHere } from "./layout.mjs";
 import { localize } from "../../core/value.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const ChoiceMenu = ({
   id,
   triggerId,
@@ -30,42 +31,61 @@ const ChoiceMenu = ({
         unlabeled && fallbackName.node,
         choices.map((group, g) => {
           const heading = localize(group.label, language);
-          return /* @__PURE__ */ createElement(
+          return /* @__PURE__ */ jsxs(
             "fieldset",
             {
               ...heading.text ? {} : fallbackName.props,
               className: "clover-canvas-menu-group",
-              key: group.key
-            },
-            heading.text && /* @__PURE__ */ jsx("legend", { className: "clover-canvas-menu-legend", lang: heading.lang, children: heading.text }),
-            group.items.map((item, index) => {
-              const text = localize(item.label, language);
-              const shown = text.text || (item.image ? "" : String(index + 1));
-              return /* @__PURE__ */ jsxs("label", { className: "clover-canvas-menu-item", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
+              children: [
+                heading.text && /* @__PURE__ */ jsx(
+                  "legend",
                   {
-                    type: "radio",
-                    name: `${id}-${g}`,
-                    "aria-label": shown ? void 0 : String(index + 1),
-                    checked: (selections[group.key] ?? 0) === index,
-                    onChange: () => onSelect(group.key, index)
+                    className: "clover-canvas-menu-legend",
+                    ...languageProps(heading.lang),
+                    children: heading.text
                   }
                 ),
-                item.image && // eslint-disable-next-line @next/next/no-img-element -- This library also renders outside Next.js.
-                /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    alt: "",
-                    className: "clover-canvas-menu-image",
-                    decoding: "async",
-                    loading: "lazy",
-                    src: item.image
-                  }
-                ),
-                shown && /* @__PURE__ */ jsx("span", { lang: text.text ? text.lang : void 0, children: shown })
-              ] }, index);
-            })
+                group.items.map((item, index) => {
+                  const text = localize(item.label, language);
+                  const shown = text.text || (item.image ? "" : String(index + 1));
+                  const unplayable = !playsHere(item);
+                  return /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "clover-canvas-menu-item",
+                      "data-disabled": unplayable || void 0,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "radio",
+                            name: `${id}-${g}`,
+                            "aria-label": shown ? void 0 : String(index + 1),
+                            checked: (selections[group.key] ?? 0) === index,
+                            disabled: unplayable,
+                            onChange: () => onSelect(group.key, index)
+                          }
+                        ),
+                        item.image && // eslint-disable-next-line @next/next/no-img-element -- This library also renders outside Next.js.
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            alt: "",
+                            className: "clover-canvas-menu-image",
+                            decoding: "async",
+                            loading: "lazy",
+                            src: item.image
+                          }
+                        ),
+                        shown && /* @__PURE__ */ jsx("span", { ...languageProps(text.text ? text.lang : void 0), children: shown })
+                      ]
+                    },
+                    index
+                  );
+                })
+              ]
+            },
+            group.key
           );
         })
       ]

package/dist/components/Canvas/Connected.mjs

@@ -1,13 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useSyncExternalStore, useMemo, useRef, useCallback, useEffect } from "react";
+import { useSyncExternalStore, useRef, useState, useEffect, useMemo, useCallback } from "react";
 import CanvasView from "./CanvasView.mjs";
 import { useRangeChapters, applyTarget } from "./fromManifest.mjs";
-import { paintedMedia } from "./layout.mjs";
+import { paintedMedia, canvasCaptions } from "./layout.mjs";
 import { selectDrawnSets, selectUnlistedSets, selectHiddenSets } from "../../core/annotation-sets.mjs";
 import { showLink } from "../../core/show-link.mjs";
 import { chaptersOf } from "../../core/ranges.mjs";
 import { hasBehavior } from "../../core/selectors.mjs";
+import { sameLanguage } from "../../i18n/languages.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
 import { useVisibleCanvases, useSequence, useManifest, useActiveCanvas } from "../../react/hooks.mjs";
 const ConnectedCanvas = ({
@@ -47,7 +48,12 @@ const ConnectedCanvas = ({
   );
   const target = useCloverSelector((state) => state.target);
   const sets = useCloverSelector(
-    (state) => selectDrawnSets(state.manifest, state.addedSets, state.search.set)
+    (state) => selectDrawnSets(
+      state.manifest,
+      state.addedSets,
+      state.search.set,
+      state.regions
+    )
   );
   const unlistedSets = useCloverSelector(
     (state) => selectUnlistedSets(
@@ -66,6 +72,15 @@ const ConnectedCanvas = ({
     )
   );
   const selectedAnnotation = useCloverSelector((state) => state.annotationId);
+  const selectedRef = useRef(selectedAnnotation);
+  selectedRef.current = selectedAnnotation;
+  const [refind, setRefind] = useState(0);
+  useEffect(
+    () => clover.found.subscribe((id) => {
+      if (id && id === selectedRef.current) setRefind((count) => count + 1);
+    }),
+    [clover]
+  );
   const highlighted = useSyncExternalStore(
     clover.highlight.subscribe,
     clover.highlight.get,
@@ -85,7 +100,9 @@ const ConnectedCanvas = ({
         annotation: entry.annotation,
         targetIndex: shown.indexOf(entry.canvasId),
         pageId: set.id,
-        ...set.label ? { pageLabel: set.label } : {}
+        ...set.label ? { pageLabel: set.label } : {},
+        ...entry.place ? { place: entry.place } : {},
+        ...entry.layer ? { layer: { key: entry.layer.key, item: entry.layer.item } } : {}
       }))
     );
   }, [givenAnnotations, sets, canvases]);
@@ -109,6 +126,16 @@ const ConnectedCanvas = ({
   );
   const hasMediaRef = useRef(hasMedia);
   hasMediaRef.current = hasMedia;
+  const rootLanguage = givenCaption === void 0 ? context.language : void 0;
+  const mediaCanvasId = mediaCanvas == null ? void 0 : mediaCanvas.id;
+  useEffect(() => {
+    if (!rootLanguage || !mediaCanvas) return;
+    const file = canvasCaptions(mediaCanvas).find(
+      (track) => track.language && sameLanguage(track.language, rootLanguage)
+    );
+    if (file && clover.captions.get() !== file.id)
+      clover.captions.emit(file.id);
+  }, [rootLanguage, mediaCanvasId, clover]);
   const applyTarget$1 = useCallback(() => {
     const pending = clover.store.get().target;
     if (!pending) return;
@@ -118,7 +145,12 @@ const ConnectedCanvas = ({
       return;
     clover.consumeTarget();
   }, [clover]);
+  const lastCanvas = useRef(canvasKey);
   useEffect(() => {
+    if (lastCanvas.current !== canvasKey) {
+      lastCanvas.current = canvasKey;
+      media.current = null;
+    }
     if (target) applyTarget$1();
   }, [target, canvasKey, applyTarget$1]);
   const onReadyRef = useRef(onReady);
@@ -188,6 +220,7 @@ const ConnectedCanvas = ({
     {
       ...rest,
       manifestId,
+      navPlace: manifest == null ? void 0 : manifest.navPlace,
       canvases,
       viewingDirection: direction,
       language,
@@ -212,6 +245,7 @@ const ConnectedCanvas = ({
       highlightedChapter,
       onChapterHighlight: (id) => clover.chapter.emit(id),
       selectedAnnotation,
+      refind,
       highlightedAnnotation: highlighted,
       onAnnotationSelect: (id) => clover.selectAnnotation(id),
       onAnnotationLink: rest.onAnnotationLink ?? followLink,