@nulib/clover 4.0.0 → 4.1.0

package/dist/components/Canvas/Controls.mjs

@@ -1,29 +1,46 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { Comment, Place, Information } from "../Body/glyphs.mjs";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { Place, Chapters, Information, Comment } from "../Body/glyphs.mjs";
 import Button from "../../ui/Button.mjs";
-import ControlCluster from "../../ui/ControlCluster.mjs";
+import ControlCluster, { renderControl } from "../../ui/ControlCluster.mjs";
 import { ZoomIn, ZoomOut, ZoomExitFullScreen, ZoomFullScreen, Rotate, Reset, Choice } from "../../ui/controlGlyphs.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { localize } from "../../core/value.mjs";
 import { toggleFullscreen } from "../../lib/fullscreen.mjs";
 import useFullscreenSupported from "../../hooks/useFullscreenSupported.mjs";
+import useWithinFullscreen from "../../hooks/useWithinFullscreen.mjs";
 import { useLoaded } from "../../hooks/useLoaded.mjs";
+import { Fits } from "./RowFits.mjs";
 import { SHORTCUTS } from "../../ui/Tip.mjs";
 const loadAnnotationMenu = () => import("./AnnotationMenu.mjs");
+const loadChaptersMenu = () => import("./ChaptersMenu.mjs");
 const loadChoiceMenu = () => import("./ChoiceMenu.mjs");
+const loadImageControls = () => import("./ImageControls.mjs");
 const ZOOM_PER_CLICK = 2;
+const VIEW = /* @__PURE__ */ new Set([
+  "zoomIn",
+  "zoomOut",
+  "rotateRight",
+  "rotateLeft",
+  "reset",
+  "fullPage"
+]);
 const Controls = ({
   renderer,
   instance,
   config,
   controlButtons,
-  hasPlaceholder,
+  placeholder,
+  placeholderIsMore = false,
   choices = [],
   selections = {},
   onSelect,
   annotations = [],
+  chapters = [],
+  mediaElement = null,
+  onChapter,
+  request,
   hiddenPages,
   onPageVisibilityChange,
   selectedAnnotation = null,
@@ -36,9 +53,11 @@ const Controls = ({
   placeOpen = false,
   onPlaceToggle,
   language,
+  fit = true,
+  more: moreWhen = "auto",
   children
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const { t, langOf } = useCloverTranslation();
   const [choiceOpen, setChoiceOpen] = useState(false);
   const [annotationsOpen, setAnnotationsOpen] = useState(false);
@@ -56,6 +75,42 @@ const Controls = ({
     [annotationsId, onAnnotationActivate]
   );
   const showAnnotations = config.annotations && annotations.length > 0 && onAnnotationSelect;
+  const [chaptersOpen, setChaptersOpen] = useState(false);
+  const chaptersId = `chapters-${instance}`;
+  const chaptersMenuId = `${chaptersId}-menu`;
+  const showChapters = chapters.length > 0 && Boolean(onChapter);
+  const chaptersFocused = useRef(false);
+  const figure = useRef(null);
+  useEffect(() => {
+    const follow = () => {
+      var _a2;
+      chaptersFocused.current = ((_a2 = document.activeElement) == null ? void 0 : _a2.id) === chaptersId;
+    };
+    document.addEventListener("focusin", follow);
+    return () => document.removeEventListener("focusin", follow);
+  }, [chaptersId]);
+  const handOn = useCallback(() => {
+    var _a2, _b2;
+    if (!chaptersFocused.current) return;
+    chaptersFocused.current = false;
+    const active = document.activeElement;
+    if (active && active !== document.body) return;
+    (_b2 = (_a2 = figure.current) == null ? void 0 : _a2.querySelector(
+      '.clover-canvas-transport :is([data-button="play"], [data-button="pause"])'
+    )) == null ? void 0 : _b2.focus();
+  }, []);
+  useEffect(() => {
+    if (!showChapters) handOn();
+  }, [showChapters, handOn]);
+  useEffect(() => () => handOn(), [handOn]);
+  const closeChapters = useCallback(
+    (restoreFocus) => {
+      var _a2;
+      setChaptersOpen(false);
+      if (restoreFocus) (_a2 = document.getElementById(chaptersId)) == null ? void 0 : _a2.focus();
+    },
+    [chaptersId]
+  );
   const showInformation = config.information && captionId && onCaptionToggle;
   const showPlace = config.map && placeId && onPlaceToggle;
   const choiceId = `choice-${instance}`;
@@ -67,10 +122,11 @@ const Controls = ({
     loadAnnotationMenu,
     Boolean(showAnnotations)
   )) == null ? void 0 : _a.default;
-  const ChoiceMenu = (_b = useLoaded(
+  const ChaptersMenu = (_b = useLoaded(loadChaptersMenu, showChapters)) == null ? void 0 : _b.default;
+  const ChoiceMenu = (_c = useLoaded(
     loadChoiceMenu,
     choices.length > 0 && Boolean(onSelect)
-  )) == null ? void 0 : _b.default;
+  )) == null ? void 0 : _c.default;
   const closeChoice = useCallback(
     (restoreFocus) => {
       var _a2;
@@ -80,11 +136,31 @@ const Controls = ({
     [choiceId]
   );
   const canFullscreen = useFullscreenSupported();
-  const controls = (isFullscreen) => {
-    const specs = [];
+  const [cluster, setCluster] = useState(null);
+  useEffect(() => {
+    figure.current = (cluster == null ? void 0 : cluster.closest(".clover-canvas")) ?? null;
+  }, [cluster]);
+  const isFullscreen = useWithinFullscreen(cluster);
+  const [moreOpen, setMoreOpen] = useState(false);
+  const annotationsButton = (className) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      className,
+      id: annotationsId,
+      label: annotationsLabel,
+      lang: annotationsLang,
+      onClick: () => setAnnotationsOpen((open) => !open),
+      expanded: annotationsOpen,
+      controls: annotationsMenuId,
+      children: /* @__PURE__ */ jsx(Comment, {})
+    },
+    "annotations"
+  );
+  const controls = () => {
+    const specs2 = [];
     const camera = renderer;
     if (config.zoom && camera) {
-      specs.push(
+      specs2.push(
         {
           key: "zoomIn",
           id: `zoomIn-${instance}`,
@@ -106,7 +182,7 @@ const Controls = ({
       );
     }
     if (config.fullPage && canFullscreen) {
-      specs.push({
+      specs2.push({
         key: "fullPage",
         id: `fullPage-${instance}`,
         label: isFullscreen ? t("imageExitFullScreen") : t("imageFullScreen"),
@@ -117,7 +193,7 @@ const Controls = ({
       });
     }
     if (config.rotation && camera) {
-      specs.push(
+      specs2.push(
         {
           key: "rotateRight",
           id: `rotateRight-${instance}`,
@@ -139,7 +215,7 @@ const Controls = ({
       );
     }
     if (config.reset && camera) {
-      specs.push({
+      specs2.push({
         key: "reset",
         id: `reset-${instance}`,
         shortcut: SHORTCUTS.reset,
@@ -151,7 +227,7 @@ const Controls = ({
       });
     }
     if (choices.length) {
-      specs.push({
+      specs2.push({
         key: "choice",
         id: choiceId,
         label: choiceLabel,
@@ -162,54 +238,141 @@ const Controls = ({
         controls: menuId
       });
     }
-    return specs;
+    return specs2;
   };
+  const specs = controls();
+  const view = [
+    ...specs.filter((spec) => spec.key !== "fullPage"),
+    ...specs.filter((spec) => spec.key === "fullPage")
+  ].map((spec) => ({
+    id: spec.id,
+    view: VIEW.has(spec.key),
+    node: renderControl(spec, controlButtons)
+  }));
+  const own = [
+    showPlace && {
+      id: `place-${instance}`,
+      view: false,
+      node: /* @__PURE__ */ jsx(
+        Button,
+        {
+          id: `place-${instance}`,
+          label: t("mapLabel"),
+          lang: langOf("mapLabel"),
+          onClick: onPlaceToggle,
+          expanded: placeOpen,
+          controls: placeId,
+          children: /* @__PURE__ */ jsx(Place, {})
+        },
+        "place"
+      )
+    },
+    showChapters && {
+      id: chaptersId,
+      view: false,
+      node: /* @__PURE__ */ jsx(
+        Button,
+        {
+          id: chaptersId,
+          label: t("playerChapters"),
+          lang: langOf("playerChapters"),
+          onClick: () => setChaptersOpen((open) => !open),
+          expanded: chaptersOpen,
+          controls: chaptersMenuId,
+          children: /* @__PURE__ */ jsx(Chapters, {})
+        },
+        "chapters"
+      )
+    },
+    showAnnotations && {
+      id: annotationsId,
+      view: false,
+      node: annotationsButton()
+    },
+    showInformation && {
+      id: `information-${instance}`,
+      view: false,
+      node: /* @__PURE__ */ jsx(
+        Button,
+        {
+          id: `information-${instance}`,
+          label: t("informationPanelTabsAbout"),
+          lang: langOf("informationPanelTabsAbout"),
+          onClick: onCaptionToggle,
+          expanded: captionOpen,
+          controls: captionId,
+          children: /* @__PURE__ */ jsx(Information, {})
+        },
+        "information"
+      )
+    },
+    Boolean(placeholder) && {
+      id: `placeholder-${instance}`,
+      view: false,
+      node: /* @__PURE__ */ jsx(React.Fragment, { children: placeholder }, "placeholder")
+    }
+  ].filter(
+    (item) => Boolean(item)
+  );
+  const toggle = own.filter((item) => item.id === `placeholder-${instance}`);
+  const lead = [...view.filter((item) => item.view), ...toggle];
+  const rest = [
+    ...view.filter((item) => !item.view),
+    ...own.filter((item) => !toggle.includes(item))
+  ];
+  const items = [...lead, ...rest];
+  const [fits, setFits] = useState(true);
+  const always = moreWhen === "always" || placeholderIsMore;
+  const ImageControls = (_d = useLoaded(
+    loadImageControls,
+    fit && (always || !fits) && items.some((item) => item.view)
+  )) == null ? void 0 : _d.ImageControls;
+  const tucked = fits && !always || !ImageControls ? [] : items.filter((item) => item.view);
+  const deck = placeholderIsMore && tucked.length > 0;
+  useEffect(() => {
+    if (!tucked.length) setMoreOpen(false);
+  }, [tucked.length]);
+  const shown = (list) => list.filter(
+    (item) => !tucked.includes(item) && !(deck && item.id === `placeholder-${instance}`)
+  ).map(({ node }) => node);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      ControlCluster,
+    /* @__PURE__ */ jsxs(ControlCluster, { fit, clusterRef: setCluster, children: [
+      shown(lead),
+      ImageControls && tucked.length > 0 && /* @__PURE__ */ jsx(
+        ImageControls,
+        {
+          instance,
+          open: deck || moreOpen,
+          onOpenChange: setMoreOpen,
+          toggle: deck ? placeholder : void 0,
+          children: tucked.map(({ node }) => node)
+        }
+      ),
+      shown(rest),
+      children
+    ] }),
+    fit && !always && cluster && /* @__PURE__ */ jsx(
+      Fits,
+      {
+        cluster,
+        ids: items.map(({ id }) => id),
+        more: `more-${instance}`,
+        fits,
+        onFits: setFits
+      }
+    ),
+    ChaptersMenu && chaptersOpen && showChapters && /* @__PURE__ */ jsx(
+      ChaptersMenu,
       {
-        controls,
-        controlButtons,
-        hasPlaceholder,
-        children: [
-          showAnnotations && /* @__PURE__ */ jsx(
-            Button,
-            {
-              id: annotationsId,
-              label: annotationsLabel,
-              lang: annotationsLang,
-              onClick: () => setAnnotationsOpen((open) => !open),
-              expanded: annotationsOpen,
-              controls: annotationsMenuId,
-              children: /* @__PURE__ */ jsx(Comment, {})
-            }
-          ),
-          showPlace && /* @__PURE__ */ jsx(
-            Button,
-            {
-              id: `place-${instance}`,
-              label: t("mapLabel"),
-              lang: langOf("mapLabel"),
-              onClick: onPlaceToggle,
-              expanded: placeOpen,
-              controls: placeId,
-              children: /* @__PURE__ */ jsx(Place, {})
-            }
-          ),
-          showInformation && /* @__PURE__ */ jsx(
-            Button,
-            {
-              id: `information-${instance}`,
-              label: t("informationPanelTabsAbout"),
-              lang: langOf("informationPanelTabsAbout"),
-              onClick: onCaptionToggle,
-              expanded: captionOpen,
-              controls: captionId,
-              children: /* @__PURE__ */ jsx(Information, {})
-            }
-          ),
-          children
-        ]
+        id: chaptersMenuId,
+        triggerId: chaptersId,
+        label: t("playerChapters"),
+        labelLang: langOf("playerChapters"),
+        chapters,
+        element: mediaElement,
+        onChapter,
+        request,
+        onClose: closeChapters
       }
     ),
     AnnotationMenu && annotationsOpen && showAnnotations && /* @__PURE__ */ jsx(

package/dist/components/Canvas/ControlsFade.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { useEffect } from "react";
+import { useControlsVisibility } from "../Body/useControlsVisibility.mjs";
+function ControlsFade({
+  element,
+  hideDelay,
+  picture,
+  onChange
+}) {
+  const visible = useControlsVisibility(element, hideDelay, picture);
+  useEffect(() => onChange(visible), [visible, onChange]);
+  return null;
+}
+export {
+  ControlsFade as default
+};

package/dist/components/Canvas/ImageControls.mjs

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

package/dist/components/Canvas/Placeholder.mjs

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