@nulib/clover 4.0.0 → 4.2.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/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",
   {
@@ -65,6 +79,7 @@ const CloseViewer = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   )
 ] });
 export {
+  Chapters,
   Close,
   CloseViewer,
   Comment,

package/dist/components/Body/useControlsVisibility.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect } from "react";
 import { isDirect, TAP_MS, isHovering, TAP_SLOP, isInteractive, DOUBLE_TAP_SLOP } from "../../lib/pointer.mjs";
-const DEFAULT_HIDE_DELAY = 2e3;
+const DEFAULT_HIDE_DELAY = 3e3;
 const LEAVE_DELAY = 1e3;
 const PRESS_FOCUS_MS = 1e3;
 const FADING_CONTROLS = [
@@ -20,10 +20,12 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
     let focusHeld = false;
     let penHovers = false;
     let pressedAt = -Infinity;
+    let pressedInside = false;
     let held = null;
     let swallowClick = false;
     let clickTimer;
     let press = null;
+    let using = null;
     let tap = null;
     const set = (value) => {
       shown = value;
@@ -40,6 +42,11 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
       if (tap) clearTimeout(tap.timer);
       tap = null;
     };
+    const touchShow = () => {
+      set(true);
+      stop();
+      if (Number.isFinite(hideDelay)) timer = setTimeout(hide, hideDelay);
+    };
     const direct = (event) => isDirect(event.pointerType, penHovers);
     const show = (event) => {
       keyboard = event.type === "keydown";
@@ -59,7 +66,10 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
         ...at,
         timer: setTimeout(() => {
           tap = null;
-          set(at.onPicture ? !shown : true);
+          if (at.onPicture && shown) {
+            stop();
+            set(false);
+          } else touchShow();
         }, TAP_MS)
       };
     };
@@ -70,10 +80,21 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
         press = null;
       }
     };
+    const onPicture = (target) => {
+      const pictureElement = picture == null ? void 0 : picture.current;
+      return Boolean(
+        pictureElement && target instanceof Node && pictureElement.contains(target)
+      );
+    };
     const down = (event) => {
       if (!direct(event)) return show(event);
       keyboard = false;
       stop();
+      using = isInteractive(event.target, element) && !onPicture(event.target) ? {
+        id: event.pointerId,
+        inSight: shown || getComputedStyle(element).getPropertyValue("--clover-controls-shown").trim() === "1"
+      } : null;
+      if (using) forgetTap();
       press = event.isPrimary === false ? null : {
         id: event.pointerId,
         x: event.clientX,
@@ -82,26 +103,25 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
       };
     };
     const up = (event) => {
-      if (!direct(event) || (press == null ? void 0 : press.id) !== event.pointerId) return;
+      if (!direct(event)) return;
+      if ((using == null ? void 0 : using.id) === event.pointerId) {
+        if (using.inSight) touchShow();
+        using = null;
+      } else if (shown && event.isPrimary !== false) touchShow();
+      if ((press == null ? void 0 : press.id) !== event.pointerId) return;
       const { target } = press;
       press = null;
       if (event.type !== "pointerup") return;
       if (isInteractive(target, element)) return;
-      const pictureElement = picture == null ? void 0 : picture.current;
-      const onPicture = Boolean(
-        pictureElement && target instanceof Node && pictureElement.contains(target)
-      );
-      if (onPicture && (tap == null ? void 0 : tap.onPicture) && Math.hypot(event.clientX - tap.x, event.clientY - tap.y) < DOUBLE_TAP_SLOP) {
+      const tapped = onPicture(target);
+      if (tapped && (tap == null ? void 0 : tap.onPicture) && Math.hypot(event.clientX - tap.x, event.clientY - tap.y) < DOUBLE_TAP_SLOP) {
         forgetTap();
         return;
       }
-      later({ x: event.clientX, y: event.clientY, onPicture });
+      later({ x: event.clientX, y: event.clientY, onPicture: tapped });
     };
     const underFadedControls = (event) => {
-      const pictureElement = picture == null ? void 0 : picture.current;
-      const target = event.target;
-      if (!pictureElement || !target || !pictureElement.contains(target))
-        return false;
+      if (!onPicture(event.target)) return false;
       return Array.from(element.querySelectorAll(FADING_CONTROLS)).some(
         (piece) => {
           const box = piece.getBoundingClientRect();
@@ -144,6 +164,7 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
     };
     const pressed = (event) => {
       pressedAt = Date.now();
+      pressedInside = element.contains(event.target);
       if (event.type === "pointerdown") focusHeld = false;
     };
     const focus = () => {
@@ -159,6 +180,7 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
     const blur = (event) => {
       if (element.contains(event.relatedTarget)) return;
       focusHeld = false;
+      if (pressedInside && Date.now() - pressedAt < PRESS_FOCUS_MS) return;
       if (shown || keyboard) linger();
     };
     page.addEventListener("pointerdown", pressed, true);

package/dist/components/Canvas/CanvasView.mjs

@@ -3,9 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 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 { findChoices, startingChoices, 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";
@@ -28,6 +27,8 @@ 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");
@@ -49,6 +50,13 @@ const NO_MODEL = {
 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,
@@ -58,6 +66,15 @@ const ALL_CONTROLS = {
   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",
   keys: [
@@ -102,10 +119,12 @@ const CanvasBody = (props) => {
     options,
     navigator = false,
     controls = true,
+    collapseControls = "auto",
     controlButtons,
     annotations: allAnnotations,
     onReady,
     onViewportChange,
+    onContentStateChange,
     onMediaElement,
     onCaptionChange,
     caption,
@@ -128,11 +147,14 @@ const CanvasBody = (props) => {
     setWrapperElement
   );
   const contrast = useHighContrast(highContrast);
-  const controlsVisible = useControlsVisibility(
-    wrapperElement,
+  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}`);
@@ -248,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
   );
@@ -261,6 +292,7 @@ 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 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 ?? ""}
@@ -287,7 +319,10 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
   });
   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 || empty ? choices.length || captioned.length || hostControls || listedCount || fullscreenExit && controlsConfig.fullPage ? onlyInformation(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;
@@ -322,6 +357,20 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     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, (_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(() => {
@@ -353,6 +402,31 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     drawnScene.current = canvases2 && scene2 && shownCanvases.current === canvasKey2 ? { key: canvasKey2, canvases: canvases2, placements: scene2.placements } : null;
   }, []);
   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;
@@ -365,6 +439,7 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
       var _a2;
       setCleared(false);
       markDrawn();
+      contentStateChanged();
       setStatus("ready");
       setSceneVersion((v) => v + 1);
       if (!renderer2) return;
@@ -391,6 +466,7 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     const offChange = surface2.on("change", () => {
       setCleared(false);
       markDrawn();
+      contentStateChanged();
       setStatus("ready");
       setSceneVersion((v) => v + 1);
     });
@@ -404,6 +480,7 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
     const offViewport = surface2.on("viewport", () => {
       var _a2;
       if (renderer2) (_a2 = onViewportChangeRef.current) == null ? void 0 : _a2.call(onViewportChangeRef, renderer2.getBounds());
+      contentStateChanged();
     });
     return () => {
       offOpen();
@@ -467,8 +544,9 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
       "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-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,
@@ -498,16 +576,41 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
         isolation: "isolate"
       },
       children: [
-        (shownControls || showNavigator) && /* @__PURE__ */ jsx("div", { className: "clover-canvas-scrim", "aria-hidden": "true" }),
+        (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 && /* @__PURE__ */ jsx(
+        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,
@@ -527,7 +630,7 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
               setPlaceOpen((open) => !open);
             },
             language,
-            children
+            children: shownControls && children
           }
         ),
         showNavigator && /* @__PURE__ */ jsx(
@@ -594,6 +697,7 @@ ${canvases.map((canvas) => canvas.id).join("|")}` : null;
           {
             media,
             request: options == null ? void 0 : options.request,
+            fillable,
             surface,
             instance,
             onElement: handleMediaElement,

package/dist/components/Canvas/ChaptersMenu.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import ControlMenu from "./ControlMenu.mjs";
+import { chapterAt, chapterPicture } from "./media/Transport.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
+import { EntryThumbnail } from "../../ui/EntryThumbnail.mjs";
+import { formatTime } from "../../lib/time.mjs";
+const ChaptersMenu = ({
+  id,
+  triggerId,
+  label,
+  labelLang,
+  chapters,
+  element,
+  onChapter,
+  request,
+  onClose
+}) => {
+  const name = useContainerName(label, labelLang);
+  const [time, setTime] = useState(() => (element == null ? void 0 : element.currentTime) ?? 0);
+  useEffect(() => {
+    if (!element) return;
+    const update = () => setTime(element.currentTime);
+    update();
+    element.addEventListener("timeupdate", update);
+    element.addEventListener("seeked", update);
+    return () => {
+      element.removeEventListener("timeupdate", update);
+      element.removeEventListener("seeked", update);
+    };
+  }, [element]);
+  const current = chapterAt(chapters, time);
+  const pointer = useRef(false);
+  const go = (index) => {
+    onChapter(chapters[index].start);
+    setTime(chapters[index].start);
+  };
+  return /* @__PURE__ */ jsxs(
+    ControlMenu,
+    {
+      "data-testid": "clover-canvas-chapters",
+      id,
+      onClose,
+      triggerId,
+      children: [
+        /* @__PURE__ */ jsx("fieldset", { className: "clover-canvas-menu-group", ...name.props, children: chapters.map((chapter, index) => /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "clover-canvas-menu-item clover-canvas-chapters-item",
+            onPointerDown: () => {
+              pointer.current = true;
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: id,
+                  checked: index === current,
+                  onChange: () => go(index),
+                  onClick: () => {
+                    if (pointer.current) onClose(true);
+                  },
+                  onKeyDown: (event) => {
+                    pointer.current = false;
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      go(index);
+                      onClose(true);
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "clover-cue-time", children: formatTime(chapter.start) }),
+              " ",
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "clover-cue-text",
+                  ...languageProps(chapter.lang || void 0),
+                  children: chapter.label
+                }
+              ),
+              index === current && /* @__PURE__ */ jsx(
+                EntryThumbnail,
+                {
+                  source: chapterPicture(chapter),
+                  request,
+                  large: true
+                }
+              )
+            ]
+          },
+          chapter.id ?? index
+        )) }),
+        name.node
+      ]
+    }
+  );
+};
+export {
+  ChaptersMenu as default
+};

package/dist/components/Canvas/ControlMenu.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useRef, useLayoutEffect, useEffect } from "react";
 import { join } from "../../lib/classnames.mjs";
 import { useOneOpen } from "../../ui/useOneOpen.mjs";
 const ControlMenu = ({
@@ -10,10 +10,15 @@ const ControlMenu = ({
   "data-testid": testId,
   className,
   holds,
+  inside = false,
   children
 }) => {
   const ref = useRef(null);
   useOneOpen(true, () => onClose(false));
+  useLayoutEffect(() => {
+    const menu = ref.current;
+    if (menu && inside) keepInside(menu);
+  }, [inside]);
   useEffect(() => {
     const menu = ref.current;
     const item = (menu == null ? void 0 : menu.querySelector('input[type="radio"]:checked')) ?? (menu == null ? void 0 : menu.querySelector(
@@ -40,11 +45,11 @@ const ControlMenu = ({
       var _a, _b;
       if (event.key !== "Escape") return;
       const active = document.activeElement;
-      const inside = Boolean(
+      const inside2 = Boolean(
         ((_a = ref.current) == null ? void 0 : _a.contains(active)) || ((_b = document.getElementById(triggerId)) == null ? void 0 : _b.contains(active))
       );
-      if (inside) event.preventDefault();
-      onClose(inside);
+      if (inside2) event.preventDefault();
+      onClose(inside2);
     };
     document.addEventListener("pointerdown", onPointerDown);
     document.addEventListener("keydown", onKeyDown, true);
@@ -64,6 +69,20 @@ const ControlMenu = ({
     }
   );
 };
+function keepInside(menu) {
+  const box = menu.getBoundingClientRect();
+  let start = 0;
+  let end = document.documentElement.clientWidth;
+  for (let node = menu.parentElement; node; node = node.parentElement) {
+    if (getComputedStyle(node).overflowX === "visible") continue;
+    const clip = node.getBoundingClientRect();
+    start = Math.max(start, clip.left);
+    end = Math.min(end, clip.right);
+    break;
+  }
+  const shift = Math.max(start - box.left, Math.min(0, end - box.right));
+  if (shift) menu.style.translate = `${shift}px 0`;
+}
 export {
   ControlMenu as default
 };