@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/components/Contents/Contents.mjs

@@ -1,14 +1,22 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef, useSyncExternalStore, useState, useEffect } from "react";
+import { forwardRef, useSyncExternalStore, useState, useMemo, useRef, useEffect } from "react";
 import { currentContents, tableOfContents } from "../../core/ranges.mjs";
+import { regionEntryId } from "../../core/annotation-sets.mjs";
+import { imageSource } from "../../core/thumbnail.mjs";
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { playFrom } from "../../lib/time.mjs";
+import { Chevron } from "../../ui/Chevron.mjs";
+import { EntryThumbnail } from "../../ui/EntryThumbnail.mjs";
+import { Steps } from "../../ui/Steps.mjs";
 import { CueTime } from "../../ui/Cue.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const Contents = forwardRef(
   function Contents2({ as: Tag = "nav", className, ...rest }, ref) {
     const { t, langOf } = useCloverTranslation();
@@ -20,67 +28,177 @@ const Contents = forwardRef(
     );
     const nodes = useCloverSelector((state) => tableOfContents(state.manifest));
     const canvasId = useCloverSelector((state) => state.canvasId);
+    const selected = useCloverSelector((state) => state.annotationId);
     const element = useSyncExternalStore(
       clover.media.subscribe,
       clover.media.get,
       clover.media.get
     );
-    const current = useCurrent(nodes, canvasId, element);
+    const [chosen, setChosen] = useState(null);
+    const current = useCurrent(nodes, canvasId, element, chosen);
     const highlighted = useSyncExternalStore(
       clover.chapter.subscribe,
       clover.chapter.get,
       clover.chapter.get
     );
+    const id = useUniqueId();
+    const trail = useMemo(() => trailTo(nodes, current), [nodes, current]);
+    const [toggled, setToggled] = useState(
+      () => /* @__PURE__ */ new Map()
+    );
+    const lastTrail = useRef(/* @__PURE__ */ new Set());
+    useEffect(() => {
+      const entered = [...trail].filter(
+        (entry) => !lastTrail.current.has(entry)
+      );
+      lastTrail.current = trail;
+      setToggled((before) => {
+        if (!entered.some((entry) => before.has(entry))) return before;
+        const after = new Map(before);
+        entered.forEach((entry) => after.delete(entry));
+        return after;
+      });
+    }, [trail]);
+    const [stepAt, setStepAt] = useState();
     if (!nodes.length) return null;
+    const isOpen = (node) => toggled.get(node.id) ?? trail.has(node.id);
+    const goToPart = (node, index) => {
+      var _a, _b;
+      const part = (_a = node.parts) == null ? void 0 : _a[index];
+      if (!part) return;
+      setStepAt({ node: node.id, index });
+      setChosen(node.id);
+      const id2 = regionEntryId(node.id, index);
+      if (part.region && ((_b = clover.store.get().regions) == null ? void 0 : _b.entries.some((entry) => entry.id === id2)))
+        clover.selectAnnotation(id2);
+      else
+        clover.goTo(part.canvasId, part.region ? { region: part.region } : {});
+    };
     const choose = (node) => {
       if (!node.canvasId) return;
+      setChosen(node.id);
+      if (node.parts) {
+        goToPart(node, 0);
+        return;
+      }
       if (node.canvasId === canvasId && node.time && element) {
         playFrom(element, node.time.start);
         return;
       }
       clover.goTo(node.canvasId, {
-        ...node.time ? { time: node.time.start } : {},
+        ...node.time ? { time: node.time.start, autoplay: true } : {},
         ...node.region ? { region: node.region } : {}
       });
     };
-    const render = (list) => /* @__PURE__ */ jsx("ol", { className: "clover-contents-list", children: list.map((node) => {
+    const partSteps = (node, parts) => {
+      var _a;
+      const picked = parts.findIndex(
+        (part, index) => Boolean(part.region) && regionEntryId(node.id, index) === selected
+      );
+      const stepped = (stepAt == null ? void 0 : stepAt.node) === node.id && ((_a = parts[stepAt.index]) == null ? void 0 : _a.canvasId) === canvasId ? stepAt.index : -1;
+      const position = picked >= 0 ? picked : stepped >= 0 ? stepped : parts.findIndex((part) => part.canvasId === canvasId);
+      return {
+        position,
+        total: parts.length,
+        step: (by) => goToPart(node, position + by)
+      };
+    };
+    const render = (list, listId, hidden = false) => /* @__PURE__ */ jsx("ol", { className: "clover-contents-list", id: listId, hidden, children: list.map((node, index) => {
       const label = localize(node.label, language);
+      const key = listId ? `${listId}-${index}` : `${id}-${index}`;
+      const nested = node.children.length > 0;
+      const open = nested && isOpen(node);
+      const picture = node.id === current ? imageSource(node.thumbnail) : null;
       return /* @__PURE__ */ jsxs("li", { className: "clover-contents-item", children: [
-        /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            type: "button",
-            className: "clover-contents-button",
-            "aria-current": node.id === current ? "true" : void 0,
-            "data-highlighted": node.id === highlighted ? "true" : void 0,
-            disabled: !node.canvasId,
-            onMouseEnter: () => clover.chapter.emit(node.id),
-            onMouseLeave: () => clover.chapter.emit(null),
-            onFocus: () => clover.chapter.emit(node.id),
-            onBlur: () => clover.chapter.emit(null),
-            "data-timed": node.time ? "true" : void 0,
-            lang: label.text && !node.time ? label.lang : void 0,
-            onClick: () => choose(node),
-            children: node.time ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            className: "clover-contents-row",
+            "data-current": node.id === current ? "true" : void 0,
+            children: [
               /* @__PURE__ */ jsx(
-                CueTime,
+                "button",
                 {
-                  start: node.time.start,
-                  className: "clover-contents-time"
+                  type: "button",
+                  id: `${key}-entry`,
+                  className: "clover-contents-button",
+                  "data-trail": trail.has(node.id) ? "true" : void 0,
+                  "aria-current": node.id === current ? "true" : void 0,
+                  "data-highlighted": node.id === highlighted ? "true" : void 0,
+                  disabled: !node.canvasId,
+                  onMouseEnter: () => clover.chapter.emit(node.id),
+                  onMouseLeave: () => clover.chapter.emit(null),
+                  onFocus: () => clover.chapter.emit(node.id),
+                  onBlur: () => clover.chapter.emit(null),
+                  "data-timed": node.time ? "true" : void 0,
+                  "data-pictured": picture ? "true" : void 0,
+                  ...languageProps(
+                    label.text && !node.time && !picture ? label.lang : void 0
+                  ),
+                  onClick: () => choose(node),
+                  children: node.time || picture ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    node.time && /* @__PURE__ */ jsx(
+                      CueTime,
+                      {
+                        start: node.time.start,
+                        className: "clover-contents-time"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "clover-cue-text",
+                        ...languageProps(label.text ? label.lang : void 0),
+                        children: label.text || node.id
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      EntryThumbnail,
+                      {
+                        source: picture,
+                        request: clover.request,
+                        large: true
+                      }
+                    )
+                  ] }) : label.text || node.id
                 }
               ),
-              /* @__PURE__ */ jsx(
-                "span",
+              node.id === current && node.parts && node.parts.length > 1 && /* @__PURE__ */ jsx(
+                Steps,
                 {
-                  className: "clover-cue-text",
-                  lang: label.text ? label.lang : void 0,
-                  children: label.text || node.id
+                  className: "clover-contents-steps",
+                  steps: partSteps(node, node.parts)
+                }
+              ),
+              nested && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "clover-contents-toggle",
+                  "aria-expanded": open,
+                  "aria-controls": `${key}-list`,
+                  "aria-labelledby": `${key}-toggle ${key}-entry`,
+                  onClick: () => setToggled(
+                    (before) => new Map(before).set(node.id, !open)
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        id: `${key}-toggle`,
+                        style: visuallyHidden,
+                        ...languageProps(langOf("contentsSectionsIn")),
+                        children: t("contentsSectionsIn")
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Chevron, { open, className: "clover-contents-chevron" })
+                  ]
                 }
               )
-            ] }) : label.text || node.id
+            ]
           }
         ),
-        node.children.length > 0 && render(node.children)
+        nested && render(node.children, `${key}-list`, !open)
       ] }, node.id);
     }) });
     return /* @__PURE__ */ jsxs(
@@ -98,12 +216,23 @@ const Contents = forwardRef(
     );
   }
 );
-function useCurrent(nodes, canvasId, element) {
+function trailTo(nodes, current) {
+  const found = /* @__PURE__ */ new Set();
+  if (!current) return found;
+  const walk = (list, above) => list.some(
+    (node) => node.id === current ? (above.forEach((entry) => found.add(entry)), true) : walk(node.children, [...above, node.id])
+  );
+  walk(nodes, []);
+  return found;
+}
+function useCurrent(nodes, canvasId, element, chosen) {
   const [current, setCurrent] = useState(
-    () => currentContents(nodes, canvasId)
+    () => currentContents(nodes, canvasId, void 0, chosen)
   );
   useEffect(() => {
-    const update = () => setCurrent(currentContents(nodes, canvasId, element == null ? void 0 : element.currentTime));
+    const update = () => setCurrent(
+      currentContents(nodes, canvasId, element == null ? void 0 : element.currentTime, chosen)
+    );
     update();
     if (!element) return;
     element.addEventListener("timeupdate", update);
@@ -112,7 +241,7 @@ function useCurrent(nodes, canvasId, element) {
       element.removeEventListener("timeupdate", update);
       element.removeEventListener("seeked", update);
     };
-  }, [nodes, canvasId, element]);
+  }, [nodes, canvasId, element, chosen]);
   return current;
 }
 export {

package/dist/components/Download/Download.mjs

@@ -1,56 +1,44 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
-import { selectVisibleCanvases } from "../../core/selectors.mjs";
-import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
-import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { useClover } from "../../react/context.mjs";
 import { titleTag } from "../../ui/heading.mjs";
-import { asArray } from "../../lib/asArray.mjs";
-function renderingsOf(resources, language) {
-  const seen = /* @__PURE__ */ new Set();
-  const out = [];
-  for (const resource of resources) {
-    for (const item of asArray(resource == null ? void 0 : resource.rendering)) {
-      const id = (item == null ? void 0 : item.id) ?? (item == null ? void 0 : item["@id"]);
-      if (typeof id !== "string" || seen.has(id)) continue;
-      seen.add(id);
-      const label = localize(item.label, language);
-      out.push({
-        id,
-        label: label.text || item.format || id,
-        // A format or an address in place of a label is in no language.
-        lang: label.text ? label.lang : void 0,
-        format: item.format
-      });
-    }
+import { languageProps } from "../../i18n/direction.mjs";
+import { useDownloads } from "./downloads.mjs";
+const unfetchable = /* @__PURE__ */ new Set();
+const originOf = (url) => {
+  var _a;
+  try {
+    return new URL(url, (_a = globalThis.location) == null ? void 0 : _a.href).origin;
+  } catch {
+    return url;
   }
-  return out;
-}
-function useDownloads() {
-  const { language } = useClover("Download");
-  const manifest = useCloverSelector((state) => state.manifest);
-  const shown = useCloverSelector(
-    (state) => selectVisibleCanvases(state.manifest, state.canvasId)
-  );
-  return {
-    page: renderingsOf(shown, language),
-    all: renderingsOf([manifest], language)
-  };
+};
+function save(url, request) {
+  void import("../../core/save-file.mjs").then(({ saveFile }) => saveFile(url, request)).then((saved) => {
+    if (saved) return;
+    unfetchable.add(originOf(url));
+    window.open(url, "_blank", "noopener,noreferrer");
+  });
 }
 function DownloadGroups({
   page,
   all,
-  headingLevel = 3
+  headingLevel = 3,
+  inPopover = false
 }) {
   const { t, langOf } = useCloverTranslation();
+  const { clover } = useClover("Download");
   const id = useUniqueId();
-  const Heading = titleTag(headingLevel);
+  const Heading = inPopover ? "span" : titleTag(headingLevel);
+  const Group = inPopover ? "div" : "section";
   const list = (titleKey, items, key) => items.length > 0 && /* @__PURE__ */ jsxs(
-    "section",
+    Group,
     {
       className: "clover-download-group",
+      role: inPopover ? "group" : void 0,
       "aria-labelledby": `${id}-${key}`,
       children: [
         /* @__PURE__ */ jsx(
@@ -58,7 +46,7 @@ function DownloadGroups({
           {
             className: "clover-download-title",
             id: `${id}-${key}`,
-            lang: langOf(titleKey),
+            ...languageProps(langOf(titleKey)),
             children: t(titleKey)
           }
         ),
@@ -69,7 +57,15 @@ function DownloadGroups({
             href: item.id,
             target: "_blank",
             rel: "noopener noreferrer",
-            lang: item.lang,
+            download: "",
+            hrefLang: item.hrefLang,
+            ...languageProps(item.lang),
+            onClick: (event) => {
+              if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || unfetchable.has(originOf(item.id)))
+                return;
+              event.preventDefault();
+              save(item.id, clover.request);
+            },
             children: [
               item.label,
               item.format && item.format !== item.label && /* @__PURE__ */ jsxs("span", { className: "clover-download-format", children: [

package/dist/components/Download/downloads.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { selectVisibleCanvases } from "../../core/selectors.mjs";
+import { localize, hrefLangOf } from "../../core/value.mjs";
+import { asArray } from "../../lib/asArray.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+function renderingsOf(resources, language) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const resource of resources) {
+    for (const item of asArray(resource == null ? void 0 : resource.rendering)) {
+      const id = (item == null ? void 0 : item.id) ?? (item == null ? void 0 : item["@id"]);
+      if (typeof id !== "string" || seen.has(id)) continue;
+      seen.add(id);
+      const label = localize(item.label, language);
+      out.push({
+        id,
+        label: label.text || item.format || id,
+        // A format or an address in place of a label is in no language.
+        lang: label.text ? label.lang : void 0,
+        format: item.format,
+        hrefLang: hrefLangOf(item)
+      });
+    }
+  }
+  return out;
+}
+function useDownloads() {
+  const { language } = useClover("Download");
+  const manifest = useCloverSelector((state) => state.manifest);
+  const shown = useCloverSelector(
+    (state) => selectVisibleCanvases(state.manifest, state.canvasId)
+  );
+  return {
+    page: renderingsOf(shown, language),
+    all: renderingsOf([manifest], language)
+  };
+}
+export {
+  useDownloads
+};

package/dist/components/Items/AnnotationItems.mjs

@@ -0,0 +1,165 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useEffect, useState } from "react";
+import { Pager, ItemsView } from "./Items.mjs";
+import { CountMenu } from "./CountMenu.mjs";
+import { annotationName } from "../../core/annotation-name.mjs";
+import { selectAnnotationCollection, manifestOfAnnotation } from "../../core/annotation-sets.mjs";
+import { regionSource } from "../../core/region.mjs";
+import { selectCanvas } from "../../core/selectors.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { fetchManifest } from "../../react/fetchManifest.mjs";
+import { usePagesReached } from "../../react/usePagesReached.mjs";
+import { ListEnd } from "../../ui/ListEnd.mjs";
+function AnnotationItems({
+  onSelect,
+  forwardedRef,
+  ...rest
+}) {
+  const { clover, language } = useClover("Items");
+  const manifest = useCloverSelector((state) => state.manifest);
+  const collection = useCloverSelector(
+    (state) => selectAnnotationCollection(state.manifest, state.addedSets)
+  );
+  const picked = useCloverSelector((state) => state.annotationId);
+  const pages = (collection == null ? void 0 : collection.pages) ?? NO_PAGES;
+  const entries = (collection == null ? void 0 : collection.entries) ?? NO_ENTRIES;
+  const { loaded, more, reachNext } = usePagesReached(pages);
+  const elsewhere = useMemo(
+    () => [
+      ...new Set(
+        entries.map((entry) => manifestOfAnnotation(entry.annotation)).filter((id) => Boolean(id) && id !== (manifest == null ? void 0 : manifest.id))
+      )
+    ],
+    [entries, manifest == null ? void 0 : manifest.id]
+  );
+  const others = useManifests(rest.layout === "pager" ? NO_IDS : elsewhere);
+  const several = elsewhere.length > 0;
+  const items = useMemo(() => {
+    const listed = pages.length ? new Set(pages.slice(0, loaded).map((page) => page.id)) : null;
+    return entries.filter((entry) => !listed || listed.has(entry.setId)).map((entry) => {
+      const own = manifestOfAnnotation(entry.annotation);
+      const on = own && own !== (manifest == null ? void 0 : manifest.id) ? others.get(own) ?? null : manifest;
+      return annotationItem(entry, on, language, several);
+    });
+  }, [pages, loaded, entries, manifest, others, several, language]);
+  const total = Math.max((collection == null ? void 0 : collection.total) ?? 0, items.length);
+  const pending = useRef(null);
+  useEffect(() => {
+    const to = pending.current;
+    if (to === null || !items[to]) return;
+    pending.current = null;
+    clover.selectAnnotation(items[to].id);
+  }, [clover, items]);
+  if (!items.length) return null;
+  const position = items.findIndex((item) => item.id === picked);
+  const choose = (item, event) => {
+    onSelect == null ? void 0 : onSelect(item, event);
+    clover.selectAnnotation(item.id);
+  };
+  if (rest.layout === "pager") {
+    const steps = {
+      position,
+      total,
+      direction: "left-to-right",
+      step: (by, event) => {
+        const to = position + by;
+        if (to < 0) return;
+        if (items[to]) return choose(items[to], event);
+        if (more) {
+          pending.current = to;
+          reachNext();
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Pager,
+      {
+        ...rest,
+        forwardedRef,
+        steps,
+        nameKey: "informationPanelTabsAnnotations",
+        position: /* @__PURE__ */ jsx(
+          CountMenu,
+          {
+            position,
+            total,
+            list: (chosen) => /* @__PURE__ */ jsx(
+              AnnotationItems,
+              {
+                layout: "list",
+                forwardedRef: null,
+                onSelect: chosen
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ItemsView,
+      {
+        ...rest,
+        forwardedRef,
+        items,
+        selected: position,
+        navigation: "id",
+        language,
+        request: clover.request,
+        showSummary: true,
+        onActivate: choose
+      }
+    ),
+    more && /* @__PURE__ */ jsx(ListEnd, { onReached: reachNext })
+  ] });
+}
+const NO_PAGES = [];
+const NO_ENTRIES = [];
+const NO_IDS = [];
+function useManifests(ids) {
+  const { clover } = useClover("Items");
+  const [found, setFound] = useState(NO_MANIFESTS);
+  useEffect(() => {
+    if (!ids.length) return;
+    let live = true;
+    for (const id of ids)
+      void fetchManifest(clover, id).then((manifest) => {
+        if (live && manifest)
+          setFound(
+            (was) => was.has(id) ? was : new Map(was).set(id, manifest)
+          );
+      });
+    return () => {
+      live = false;
+    };
+  }, [clover, ids]);
+  return found;
+}
+const NO_MANIFESTS = /* @__PURE__ */ new Map();
+function annotationItem(entry, manifest, language, several) {
+  const canvas = selectCanvas(manifest, entry.canvasId);
+  const name = annotationName(entry.bodies, language);
+  const label = name.text ? { [name.lang ?? "none"]: [name.text] } : canvas == null ? void 0 : canvas.label;
+  const under = several ? manifest == null ? void 0 : manifest.label : canvas == null ? void 0 : canvas.label;
+  const region = canvas && entry.target.rect ? regionSource(canvas, entry.target.rect) : void 0;
+  return {
+    id: entry.id,
+    label,
+    summary: name.text ? under : void 0,
+    parts: [
+      {
+        id: entry.id,
+        type: "Canvas",
+        label,
+        resource: canvas ?? { id: entry.canvasId },
+        // Its region where one is named and can be cut; else the Canvas's own picture.
+        ...region ? { source: region } : {}
+      }
+    ]
+  };
+}
+export {
+  AnnotationItems as default
+};

package/dist/components/Items/CountMenu.mjs

@@ -0,0 +1,90 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, Suspense, lazy } from "react";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+const ControlMenu = lazy(() => import("../Canvas/ControlMenu.mjs"));
+function CountMenu({
+  position,
+  total,
+  list
+}) {
+  const triggerId = `${useUniqueId().replace(/:/g, "")}-count`;
+  const menuId = `${triggerId}-menu`;
+  const [open, setOpen] = useState(false);
+  const holder = useRef(null);
+  const holds = useCallback(() => {
+    var _a;
+    return (_a = holder.current) == null ? void 0 : _a.closest(".clover-pager");
+  }, []);
+  const close = useCallback(
+    (restoreFocus) => {
+      var _a;
+      setOpen(false);
+      if (restoreFocus) (_a = document.getElementById(triggerId)) == null ? void 0 : _a.focus();
+    },
+    [triggerId]
+  );
+  return /* @__PURE__ */ jsxs("span", { className: "clover-pager-count", ref: holder, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id: triggerId,
+        className: "clover-pager-count-button",
+        "aria-controls": open ? menuId : void 0,
+        "aria-expanded": open,
+        onClick: () => setOpen(!open),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "clover-pager-position", "aria-live": "polite", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              position >= 0 ? position + 1 : "–",
+              " / ",
+              total
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "clover-pager-room", "aria-hidden": "true", hidden: true, children: [
+              total,
+              " / ",
+              total
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              focusable: "false",
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M3 4.5l3 3 3-3",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      ControlMenu,
+      {
+        id: menuId,
+        triggerId,
+        onClose: close,
+        holds,
+        inside: true,
+        className: "clover-pager-menu",
+        children: /* @__PURE__ */ jsx("div", { className: "clover-collection clover-pager-list", children: list(() => close(true)) })
+      }
+    ) })
+  ] });
+}
+export {
+  CountMenu
+};