@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/components/Canvas/CanvasView.mjs

@@ -1,15 +1,16 @@
 "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, paintedType, placeholderStill, frameKey, canvasSize, canvasRectToWorld } 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 +19,16 @@ 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 { buildContentState } from "../../core/content-state.mjs";
+import { useContentStateOutput, watchMedia } from "../../react/useContentStateOutput.mjs";
 import { resolveDirection } from "../../core/sequence.mjs";
 const MediaBody = lazy(() => import("./media/MediaBody.mjs"));
 const loadHotspots = () => import("./AnnotationState.mjs");
@@ -43,13 +48,32 @@ const NO_MODEL = {
   quietlyOpened: null
 };
 const FrameAnimation = lazy(() => import("./FrameAnimation.mjs"));
+const PlaceBox = lazy(() => import("./PlaceBox.mjs"));
+const Placeholder = lazy(() => import("./Placeholder.mjs"));
+const ControlsFade = lazy(() => import("./ControlsFade.mjs"));
+const inSight = () => true;
+const PlaceholderToggle = lazy(
+  () => import("./Placeholder.mjs").then(({ PlaceholderToggle: PlaceholderToggle2 }) => ({
+    default: PlaceholderToggle2
+  }))
+);
 const ALL_CONTROLS = {
   zoom: true,
   fullPage: true,
   rotation: true,
   reset: true,
   annotations: true,
-  information: true
+  information: true,
+  map: true
+};
+const NO_CONTROLS = {
+  zoom: false,
+  fullPage: false,
+  rotation: false,
+  reset: false,
+  annotations: false,
+  information: false,
+  map: false
 };
 const CAMERA_KEYS = {
   description: "canvasKeysImage",
@@ -77,7 +101,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,15 +113,18 @@ const CanvasBody = (props) => {
     label,
     partOf,
     language,
+    highContrast,
     instanceId,
     className,
     options,
     navigator = false,
     controls = true,
+    collapseControls = "auto",
     controlButtons,
     annotations: allAnnotations,
     onReady,
     onViewportChange,
+    onContentStateChange,
     onMediaElement,
     onCaptionChange,
     caption,
@@ -114,14 +141,20 @@ const CanvasBody = (props) => {
     null
   );
   const isFullscreen = useFullscreen(wrapperElement);
+  const withinFullscreen = useWithinFullscreen(wrapperElement);
+  const exitShown = useFullscreenExit(wrapperElement);
   const root = useRootLanguage(
     setWrapperElement
   );
-  const controlsVisible = useControlsVisibility(
-    wrapperElement,
+  const contrast = useHighContrast(highContrast);
+  const surfaceFades = Boolean(makeSurface.controlsVisibility);
+  const useVisibility = makeSurface.controlsVisibility ?? inSight;
+  const surfaceVisible = useVisibility(
+    surfaceFades ? wrapperElement : null,
     options == null ? void 0 : options.hideDelay,
     hostRef
   );
+  const [videoVisible, setVideoVisible] = useState(false);
   const nearViewport = useNearViewport(wrapperElement);
   const made = useUniqueId();
   const [instance] = useState(() => instanceId ?? `clover-canvas-${made}`);
@@ -131,6 +164,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 +174,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(), []);
@@ -185,6 +270,15 @@ const CanvasBody = (props) => {
     [body, src, isTiledImage]
   );
   const media = (scene == null ? void 0 : scene.media[0]) ?? null;
+  const videoFades = !surfaceFades && (media == null ? void 0 : media.kind) === "video";
+  const fades = surfaceFades || videoFades;
+  const controlsVisible = surfaceFades ? surfaceVisible : videoVisible;
+  const painted = useMemo(() => {
+    if (canvases == null ? void 0 : canvases.length) return paintedType(canvases, selections);
+    const handed = (Array.isArray(body) ? body : body ? [body] : [])[0];
+    if (typeof (handed == null ? void 0 : handed.type) === "string") return handed.type.toLowerCase();
+    return src ? "image" : void 0;
+  }, [canvases, selections, body, src]);
   const [mediaElement, setMediaElement] = useState(
     null
   );
@@ -198,8 +292,11 @@ 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 fillable = mediaOnly && (media == null ? void 0 : media.kind) === "video";
+  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 +309,29 @@ 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 cornerToggle = stills.length > 0 && !player && !media;
+  const shownControls = !controlsConfig ? null : showPlaceholder ? captioned.length || hostControls || listedCount || // A recording's chapters, offered over its still too.
+  media && (chapters == null ? void 0 : chapters.length) ? onlyInformation(controlsConfig, { annotations: true }) : null : mediaOnly || empty ? choices.length || captioned.length || hostControls || listedCount || // A recording's chapters, listed by a control of its own (`ChaptersMenu`).
+  media && (chapters == null ? void 0 : chapters.length) || 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 +340,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);
@@ -251,8 +357,22 @@ const CanvasBody = (props) => {
     else setImagesOpen(showPlaceholder);
     if (!showPlaceholder) releaseAnnotation();
   };
+  const pendingChapter = useRef(null);
+  const goToChapter = (start) => {
+    if (mediaElement && !showPlaceholder) {
+      mediaElement.currentTime = start;
+      return;
+    }
+    pendingChapter.current = start;
+    if (showPlaceholder) togglePlaceholder();
+  };
+  useEffect(() => {
+    if (!mediaElement || pendingChapter.current === null) return;
+    mediaElement.currentTime = pendingChapter.current;
+    pendingChapter.current = null;
+  }, [mediaElement]);
   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 +401,32 @@ 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;
+  const contentStateChanged = useContentStateOutput(() => {
+    const shown = drawnScene.current;
+    const surface2 = surfaceRef.current;
+    if (!shown || manifestId === "loading") return null;
+    const time = mediaElement && mediaElement.currentTime > 0 ? mediaElement.currentTime : null;
+    const region = !time && surface2 && hasCamera(surface2) ? canvasRegion(surface2.getBounds(), shown.canvases, shown.placements) : null;
+    const canvas = shown.canvases.find((each) => each.id === (region == null ? void 0 : region.canvasId)) ?? shown.canvases[0];
+    if (!canvas) return null;
+    return buildContentState({
+      manifestId,
+      canvasId: canvas.id,
+      type: canvas.type,
+      region: region && {
+        x: region.rect.x,
+        y: region.rect.y,
+        w: region.rect.width,
+        h: region.rect.height
+      },
+      time
+    });
+  }, onContentStateChange);
+  useEffect(
+    () => watchMedia(mediaElement, contentStateChanged),
+    [mediaElement, contentStateChanged]
+  );
   useEffect(() => {
     const host = hostRef.current;
     if (!host) return;
@@ -294,6 +439,7 @@ const CanvasBody = (props) => {
       var _a2;
       setCleared(false);
       markDrawn();
+      contentStateChanged();
       setStatus("ready");
       setSceneVersion((v) => v + 1);
       if (!renderer2) return;
@@ -320,20 +466,27 @@ const CanvasBody = (props) => {
     const offChange = surface2.on("change", () => {
       setCleared(false);
       markDrawn();
+      contentStateChanged();
       setStatus("ready");
       setSceneVersion((v) => v + 1);
     });
     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());
+      contentStateChanged();
     });
     return () => {
       offOpen();
       offChange();
       offError();
+      offUnloadable();
       offViewport();
       surface2.dispose();
       surfaceRef.current = null;
@@ -344,6 +497,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,15 +539,22 @@ 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-controls": controlsVisible ? "visible" : "hidden",
-      "data-media": media == null ? void 0 : media.kind,
+      "data-exit": exitShown || void 0,
+      "data-controls": fades ? controlsVisible ? "visible" : "hidden" : void 0,
+      "data-media": painted,
+      "data-recording": media ? "" : void 0,
       "data-player": player ? "" : void 0,
       "data-animated": animated ? "" : void 0,
       "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();
@@ -403,16 +576,41 @@ const CanvasBody = (props) => {
         isolation: "isolate"
       },
       children: [
-        (shownControls || showNavigator) && /* @__PURE__ */ jsx("div", { className: "clover-canvas-scrim", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(ExitFullscreen, { hidden: !isFullscreen }),
-        surface && shownControls && /* @__PURE__ */ jsx(
+        (shownControls || showNavigator) && media && /* @__PURE__ */ jsx("div", { className: "clover-canvas-scrim", "aria-hidden": "true" }),
+        videoFades && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          ControlsFade,
+          {
+            element: wrapperElement,
+            hideDelay: options == null ? void 0 : options.hideDelay,
+            picture: hostRef,
+            onChange: setVideoVisible
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ExitFullscreen, { hidden: !exitShown }),
+        surface && (shownControls || cornerToggle) && /* @__PURE__ */ jsx(
           Controls,
           {
             renderer,
             instance,
-            config: shownControls,
+            config: shownControls ?? NO_CONTROLS,
             controlButtons,
-            hasPlaceholder: stills.length > 0,
+            placeholderIsMore: cornerToggle && !media,
+            chapters: media ? chapters : void 0,
+            mediaElement,
+            onChapter: goToChapter,
+            request: options == null ? void 0 : options.request,
+            placeholder: cornerToggle && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+              PlaceholderToggle,
+              {
+                instance,
+                media: Boolean(media),
+                active: showPlaceholder,
+                onToggle: togglePlaceholder,
+                more: !!controlsConfig && (controlsConfig.zoom || controlsConfig.rotation || controlsConfig.reset || controlsConfig.fullPage)
+              }
+            ) }),
+            fit: !surfaceFades,
+            more: collapseControls,
             choices: showPlaceholder ? [] : choices,
             selections,
             onSelect: selectChoice,
@@ -425,8 +623,14 @@ 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
+            children: shownControls && children
           }
         ),
         showNavigator && /* @__PURE__ */ jsx(
@@ -462,18 +666,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,12 +691,13 @@ 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,
           {
             media,
             request: options == null ? void 0 : options.request,
+            fillable,
             surface,
             instance,
             onElement: handleMediaElement,
@@ -499,7 +706,7 @@ const CanvasBody = (props) => {
             caption,
             navigable,
             fullscreen: mediaOnly && Boolean(controlsConfig == null ? void 0 : controlsConfig.fullPage),
-            isFullscreen,
+            isFullscreen: withinFullscreen,
             onEnded,
             chapters,
             highlightedChapter,
@@ -522,10 +729,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 +744,7 @@ const CanvasBody = (props) => {
           hotspots.AnnotationState,
           {
             given: props,
-            annotations: allAnnotations,
+            annotations: layered ?? allAnnotations,
             scene,
             renderer,
             sceneVersion,
@@ -545,10 +756,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 +854,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) {