@nulib/clover 4.0.0 → 4.1.0

package/dist/templates/shared/LightboxView.mjs

@@ -0,0 +1,118 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { PanelPane } from "./PanelPane.mjs";
+import { useLazyPanelPane } from "./useLazyPanelPane.mjs";
+import { useFollowFocus } from "./useFollowFocus.mjs";
+import { useWideEnough, BESIDE_REM, PAGE_MIN } from "./useSlide.mjs";
+import { Split, SplitPane } from "../../components/Split/Split.mjs";
+import { Body } from "../../components/Body/Body.mjs";
+import { Label } from "../../components/Label/Label.mjs";
+import { Items } from "../../components/Items/Items.mjs";
+function LightboxView({
+  id,
+  annotations,
+  items,
+  headingLevel,
+  panel = true,
+  defaultPanelOpen = true,
+  panelLayout = "accordion",
+  download = true,
+  languages = true,
+  storageKey,
+  collapseControls
+}) {
+  const panes = useRef(null);
+  useEffect(() => {
+    var _a;
+    const dialog = (_a = panes.current) == null ? void 0 : _a.closest('[role="dialog"]');
+    if (!dialog || items === "pager") return;
+    const waiting = () => {
+      var _a2;
+      return (_a2 = dialog.ownerDocument.activeElement) == null ? void 0 : _a2.matches(
+        ".clover-template-lightbox-close"
+      );
+    };
+    const moved = () => {
+      const chosen = dialog.querySelector(
+        '[role="listbox"] [role="option"][aria-selected="true"]'
+      );
+      if (chosen && waiting()) chosen.focus({ preventScroll: true });
+      return Boolean(chosen);
+    };
+    if (moved() || !waiting()) return;
+    const observer = new MutationObserver(() => {
+      if (moved() || !waiting()) observer.disconnect();
+    });
+    observer.observe(dialog, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, []);
+  const pane = useLazyPanelPane({
+    id: `${id}-panel`,
+    beside: useWideEnough(panes, BESIDE_REM),
+    defaultOpen: defaultPanelOpen,
+    followFocus: useFollowFocus(),
+    body: () => {
+      var _a;
+      return (_a = panes.current) == null ? void 0 : _a.querySelector(
+        ".clover-template-lightbox-body"
+      );
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    Split,
+    {
+      ref: panes,
+      className: "clover-template-lightbox-panes clover-template-panes",
+      storageKey: storageKey || void 0,
+      ...panel ? pane.splitProps : { "data-panel": "beside" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          SplitPane,
+          {
+            className: "clover-template-lightbox-main",
+            min: panel && pane.over ? void 0 : PAGE_MIN,
+            children: [
+              /* @__PURE__ */ jsx(
+                Body,
+                {
+                  className: "clover-template-lightbox-body",
+                  collapseControls,
+                  children: panel && !pane.docked && pane.toggle
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  of: "canvas",
+                  as: "p",
+                  className: "clover-template-lightbox-caption"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Items,
+                {
+                  layout: items === "pager" ? "pager" : "slider",
+                  ...annotations && { of: "annotations" }
+                }
+              )
+            ]
+          }
+        ),
+        panel && /* @__PURE__ */ jsx(
+          PanelPane,
+          {
+            pane,
+            layout: panelLayout,
+            download,
+            languages,
+            headingLevel: (headingLevel ?? 3) + 1
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  LightboxView as default
+};

package/dist/templates/shared/PanelPane.mjs

@@ -0,0 +1,104 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import { preloadDrag } from "./useDragToClose.mjs";
+import { useDrawer } from "./useDrawer.mjs";
+import { PANEL_MIN } from "./useSlide.mjs";
+import { useSpineTop } from "./useSpine.mjs";
+import { SplitHandle, SplitPane } from "../../components/Split/Split.mjs";
+import { PanelToggle } from "../../components/Panel/PanelToggle.mjs";
+function usePanelPane({
+  id,
+  beside,
+  defaultOpen,
+  followFocus,
+  body,
+  panel,
+  load
+}) {
+  const drawer = useDrawer({
+    id,
+    beside,
+    defaultOpen,
+    side: "end",
+    followFocus
+  });
+  const docked = !drawer.over && drawer.open;
+  const spine = useRef(null);
+  useSpineTop(spine, () => body == null ? void 0 : body(), docked && Boolean(body));
+  const reach = (event) => {
+    var _a, _b;
+    if (!((_b = (_a = event.target).closest) == null ? void 0 : _b.call(_a, `[aria-controls~="${id}"]`)))
+      return;
+    if (!panel) void (load == null ? void 0 : load());
+    if (drawer.over) preloadDrag();
+  };
+  const toggle = /* @__PURE__ */ jsx(
+    PanelToggle,
+    {
+      open: drawer.open,
+      onOpenChange: (next) => next && !panel && load ? load().then(() => drawer.setOpen(true)) : drawer.setOpen(next),
+      controls: id
+    }
+  );
+  return {
+    ...drawer,
+    id,
+    /** Open beside the Body: its bar and spine drawn, its toggle on the spine. */
+    docked,
+    spine,
+    /** The toggle: the template draws it among the Body's controls while `!docked`. */
+    toggle,
+    Part: panel,
+    splitProps: {
+      "data-panel": drawer.over ? "over" : "beside",
+      onKeyDown: drawer.onKeyDown,
+      onPointerOver: reach,
+      onFocus: reach
+    }
+  };
+}
+function PanelPane({
+  pane,
+  className,
+  ...panel
+}) {
+  const { id, over, docked, Part } = pane;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    docked && /* @__PURE__ */ jsx(
+      SplitHandle,
+      {
+        className: "clover-template-panel-handle",
+        "aria-controls": id
+      }
+    ),
+    docked && /* @__PURE__ */ jsx("div", { ref: pane.spine, className: "clover-template-spine", children: pane.toggle }),
+    /* @__PURE__ */ jsx(
+      SplitPane,
+      {
+        ref: pane.pane,
+        id,
+        "data-spine": over || void 0,
+        name: "panel",
+        className: ["clover-template-panel clover-template-drawer", className].filter(Boolean).join(" "),
+        size: "24rem",
+        min: over ? void 0 : PANEL_MIN,
+        "data-open": pane.opened,
+        hidden: !pane.shown,
+        children: Part && /* @__PURE__ */ jsx(
+          Part,
+          {
+            ...panel,
+            onClose: over ? pane.close : void 0,
+            closeOnEscape: over
+          }
+        )
+      }
+    ),
+    pane.scrim && /* @__PURE__ */ jsx("div", { className: "clover-template-scrim", ...pane.scrim })
+  ] });
+}
+export {
+  PanelPane,
+  usePanelPane
+};

package/dist/templates/{document/DocumentPanel.mjs → shared/PanelPart.mjs}

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Panel } from "../../components/Panel/Panel.mjs";
-function DocumentPanel(props) {
+function PanelPart(props) {
   return /* @__PURE__ */ jsx(Panel, { ...props });
 }
 export {
-  DocumentPanel as default
+  PanelPart as default
 };

package/dist/templates/shared/dragToClose.mjs

@@ -1,8 +1,12 @@
 "use client";
+import { SLIDE_MS } from "./useSlide.mjs";
 const CLOSE_SHARE = 1 / 3;
 const FLICK = 0.5;
 const SLOP = 8;
 const SPRING = "translate 240ms cubic-bezier(0.16, 1, 0.3, 1)";
+const EXIT_MS = [120, SLIDE_MS];
+const EXIT_EASE = "cubic-bezier(0.33, 0.67, 0.67, 1)";
+const leaving = /* @__PURE__ */ new WeakMap();
 function attach(element, latest) {
   let id = null;
   let state = "idle";
@@ -42,13 +46,15 @@ function attach(element, latest) {
       }
       if (dx < SLOP) return;
       state = "drag";
+      startX = event.clientX;
+      samples = [[event.timeStamp, 0]];
       try {
         (_a = element.setPointerCapture) == null ? void 0 : _a.call(element, event.pointerId);
       } catch {
       }
       move(moving(), void 0, "none");
     }
-    offset = Math.max(0, dx);
+    offset = Math.max(0, (event.clientX - startX) * toward);
     move(moving(), `${offset * toward}px 0`);
     const wash = (_b = latest.current.scrim) == null ? void 0 : _b.current;
     if (wash) {
@@ -60,7 +66,7 @@ function attach(element, latest) {
     event.preventDefault();
   };
   const onUp = (event) => {
-    var _a;
+    var _a, _b, _c;
     if (event.pointerId !== id) return;
     const dragged = state === "drag";
     state = "idle";
@@ -72,25 +78,55 @@ function attach(element, latest) {
     const [t1, x1] = samples[samples.length - 1];
     const speed = t1 > t0 ? (x1 - x0) / (t1 - t0) : 0;
     const wash = (_a = latest.current.scrim) == null ? void 0 : _a.current;
+    const still = (_b = window.matchMedia) == null ? void 0 : _b.call(
+      window,
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
     if (offset > width * CLOSE_SHARE || speed > FLICK) {
+      const time = still ? 0 : Math.min(
+        EXIT_MS[1],
+        Math.max(
+          EXIT_MS[0],
+          2 * (width - offset) / Math.max(speed, 1e-3)
+        )
+      );
+      const exit = `${time}ms ${EXIT_EASE}`;
       if (wash) {
-        wash.style.transition = "opacity 240ms ease";
+        wash.style.transition = `opacity ${exit}`;
         wash.style.opacity = "0";
       }
       if (latest.current.exits) {
-        move(moving(), `${width * toward}px 0`, "translate 200ms ease-out");
-        setTimeout(() => latest.current.onClose(), 200);
+        move(moving(), `${width * toward}px 0`, `translate ${exit}`);
+        setTimeout(() => latest.current.onClose(), time);
         return;
       }
-      move(moving(), void 0, "");
+      element.style.transition = "none";
+      element.style.translate = "";
+      element.style.transform = `translateX(${offset * toward}px)`;
+      element.getBoundingClientRect();
+      element.style.transition = `transform ${exit}`;
+      element.style.transform = `var(--clover-template-out, translateX(${toward * 100}%))`;
+      move(
+        [(_c = latest.current.alongside) == null ? void 0 : _c.current],
+        `${width * toward}px 0`,
+        `translate ${exit}`
+      );
+      leaving.set(
+        element,
+        setTimeout(() => clear(element, latest), time)
+      );
       latest.current.onClose();
       return;
     }
-    move(moving(), "", SPRING);
+    move(moving(), "", still ? "none" : SPRING);
     if (wash) {
-      wash.style.transition = "opacity 240ms ease";
+      wash.style.transition = still ? "none" : "opacity 240ms ease";
       wash.style.opacity = "";
     }
+    setTimeout(() => {
+      if (state === "idle" && !leaving.has(element))
+        move(moving(), void 0, "");
+    }, 240);
   };
   const swallow = (event) => {
     event.stopPropagation();
@@ -108,8 +144,15 @@ function attach(element, latest) {
   };
 }
 function reset(element, latest) {
+  if (leaving.has(element) && !latest.current.enabled) return;
+  clear(element, latest);
+}
+function clear(element, latest) {
   var _a, _b;
+  clearTimeout(leaving.get(element));
+  leaving.delete(element);
   move([element, (_a = latest.current.alongside) == null ? void 0 : _a.current], "", "");
+  element.style.transform = "";
   const wash = (_b = latest.current.scrim) == null ? void 0 : _b.current;
   if (wash) {
     wash.style.opacity = "";

package/dist/templates/shared/givenAnnotations.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { useCloverSelector } from "../../react/context.mjs";
+import { useAnnotationCollection } from "../../react/hooks.mjs";
+function useGivenAnnotations() {
+  const given = useCloverSelector(
+    (state) => state.addedSets.some((set2) => Boolean(set2.content))
+  );
+  const set = useAnnotationCollection();
+  return given ? set : null;
+}
+export {
+  useGivenAnnotations
+};

package/dist/templates/shared/useDragToClose.mjs

@@ -2,6 +2,10 @@
 import { useRef, useEffect } from "react";
 let drag;
 let loaded;
+const load = () => drag ?? (drag = import("./dragToClose.mjs").then((module) => loaded = module));
+function preloadDrag() {
+  void load();
+}
 function useDragToClose(pane, {
   enabled,
   side,
@@ -19,9 +23,7 @@ function useDragToClose(pane, {
     if (!enabled) return;
     let live = true;
     let detach;
-    void (drag ?? (drag = import("./dragToClose.mjs").then(
-      (module) => loaded = module
-    ))).then((module) => {
+    void load().then((module) => {
       if (live) detach = module.attach(element, latest);
     });
     return () => {
@@ -31,5 +33,6 @@ function useDragToClose(pane, {
   }, [pane, enabled]);
 }
 export {
+  preloadDrag,
   useDragToClose
 };

package/dist/templates/shared/useLazyPanelPane.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { useState, useEffect } from "react";
+import { usePanelPane } from "./PanelPane.mjs";
+const loadPanel = () => import("./PanelPart.mjs");
+function useLazyPanelPane(options) {
+  const [Part, setPart] = useState();
+  const load = () => loadPanel().then((module) => setPart(() => module.default));
+  const pane = usePanelPane({ ...options, panel: Part, load });
+  useEffect(() => {
+    if (pane.open && !Part) void load();
+  }, [pane.open]);
+  return pane;
+}
+export {
+  useLazyPanelPane
+};

package/dist/templates/shared/useSlide.mjs

@@ -1,6 +1,9 @@
 "use client";
 import { useState, useEffect, useLayoutEffect } from "react";
 const SLIDE_MS = 240;
+const PAGE_MIN = "16rem";
+const PANEL_MIN = "14rem";
+const BESIDE_REM = 16 + 14 + 1;
 function useSlide(want) {
   const [mounted, setMounted] = useState(want);
   const [open, setOpen] = useState(want);
@@ -45,6 +48,9 @@ function useWideEnough(element, rem) {
   return wide;
 }
 export {
+  BESIDE_REM,
+  PAGE_MIN,
+  PANEL_MIN,
   SLIDE_MS,
   panelFocus,
   useSlide,

package/dist/templates.css

@@ -1 +1 @@
-@layer clover{.clover-template-lightbox{width:min(96vw,72rem);max-height:94vh;padding:0;border:0;border-radius:var(--clover-radius, 3px);background:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e);box-shadow:0 8px 40px #00000059}.clover-template-lightbox::backdrop{background:#0009}.clover-template-lightbox-content{display:flex;flex-direction:column;gap:var(--clover-space-m);padding:var(--clover-inset);--clover-body-height: min(70vh, 48rem)}.clover-template-lightbox-pending{height:var(--clover-body-height, 60vh);background-color:#0001}.clover-template-lightbox-header{display:flex;align-items:center;gap:var(--clover-space-m)}.clover-template-lightbox-title{flex:1 1 auto;min-width:0;margin:0;font-size:var(--clover-text-l);font-weight:700}button.clover-template-lightbox-close{display:inline-flex;align-items:center;justify-content:center;width:var(--clover-control);height:var(--clover-control);padding:0;border:0;border-radius:var(--clover-radius-pill, 2rem);background:var(--clover-color-secondary-muted, #f1f1f1);color:inherit;cursor:pointer}button.clover-template-lightbox-close:is(:hover,:focus-visible){background:var(--clover-color-accent, #0065c3);color:var(--clover-color-control-glyph, #fff)}:where([data-high-contrast]) button.clover-template-lightbox-close:is(:hover,:focus-visible){background:var(--clover-accent-fill)}:where([data-high-contrast]) button.clover-template-lightbox-close:hover:not(:focus-visible){outline:var(--clover-accent-ring-hover);outline-offset:1px}.clover-template-document{--clover-template-document-height: min(85vh, 56rem);display:flex;flex-direction:column;height:var(--clover-template-document-height);overflow:hidden;background-color:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e)}.clover-template-document-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-s);padding:var(--clover-space-m) var(--clover-inset);border-bottom:1px solid var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-provider{max-width:100%;margin-inline-start:auto}.clover-template-document-toolbar .clover-download-groups{flex-direction:row;flex-wrap:wrap;column-gap:var(--clover-space-m)}.clover-template-document-toolbar .clover-download-group{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--clover-space-s)}.clover-template-document-toolbar .clover-download-title{margin:0}.clover-template-document-toolbar .clover-download-list{display:flex;flex-wrap:wrap;column-gap:var(--clover-space-s)}.clover-template-document-title{flex:1 1 6rem;min-width:0;margin:0;font-size:var(--clover-text-l);line-height:1.25;font-weight:400;overflow-wrap:anywhere}button.clover-template-document-sidebar-toggle{display:inline-flex;flex:none;align-items:center;gap:var(--clover-space-xs);min-height:var(--clover-control);padding-block:0;padding-inline:var(--clover-space-s) calc(var(--clover-space-xs) + var(--clover-space-3xs));border:0;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-color-control, #1a1d1e);color:var(--clover-color-control-glyph, #fff);cursor:pointer;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}button.clover-template-document-sidebar-toggle:is(:hover,:focus-visible){background-color:var(--clover-color-accent, #0065c3)}:where([data-high-contrast]) button.clover-template-document-sidebar-toggle:is(:hover,:focus-visible){background-color:var(--clover-accent-fill)}:where([data-high-contrast]) button.clover-template-document-sidebar-toggle:hover:not(:focus-visible){outline:var(--clover-accent-ring-hover);outline-offset:1px}button.clover-template-document-sidebar-toggle:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}.clover-template-document-sidebar-toggle .clover-template-document-position{color:inherit;font-size:var(--clover-text-xs);white-space:nowrap}.clover-template-document-sidebar-toggle .clover-template-document-position>.clover-pager-room[hidden]{display:none}.clover-template-document-panes{position:relative;flex:1 1 auto;min-height:0}.clover-template-document-sidebar{overflow-y:auto;overscroll-behavior:contain;padding:var(--clover-inset);scroll-padding-top:calc(2 * var(--clover-inset) + var(--clover-control));background-color:var(--clover-color-secondary, #fff)}.clover-template-document-sidebar-closed{position:absolute;top:var(--clover-inset);inset-inline-start:var(--clover-inset);z-index:3}.clover-template-document-sidebar[hidden]{display:none}.clover-template-document-sidebar+.clover-split-handle:before{inset-inline-start:0;inset-inline-end:calc(3px - var(--clover-space-l))}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),minmax(0,1fr));gap:var(--clover-space-xs) 0}.clover-template-document-sidebar .clover-items[data-layout] :is(.clover-items-pictures,.clover-items-caption){grid-column:1 / -1;grid-template-columns:subgrid}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-label{contain:inline-size}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture[data-empty],.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture img{width:100%;height:auto;max-height:20rem;aspect-ratio:var(--clover-items-ratio, auto);object-fit:contain}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-caption{font-size:var(--clover-text-s)}.clover-template-document-main{position:relative;overflow:hidden;background-color:var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-column{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;container-type:size}.clover-template-document-sheets{position:relative}.clover-template-document-sheet{--clover-template-document-tease: calc(2 * var(--clover-inset));display:flex;justify-content:center;box-sizing:border-box;height:min(100cqh - var(--clover-template-document-tease),(100cqw - 2 * var(--clover-inset)) / var(--ratio) + 2 * var(--clover-inset));padding:var(--clover-inset);transition:opacity .2s ease,height .24s cubic-bezier(.16,1,.3,1)}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]{height:100cqh}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]>*{visibility:hidden}.clover-template-document-column[data-zoomed] .clover-template-document-sheet:not([data-active]){--clover-template-document-muted: 0;pointer-events:none}.clover-template-document-sheet:not([data-active]){--clover-template-document-muted: .618;cursor:pointer;opacity:var(--clover-template-document-muted)}.clover-template-document-sheet:not([data-active]):hover{--clover-template-document-muted: .809}@media (prefers-reduced-motion: reduce){.clover-template-document-sheet{transition:none}}.clover-template-document-sheets[data-single]>.clover-template-document-sheet{--clover-template-document-tease: 0px}.clover-template-document-sheet>*{display:block;height:100%;min-width:0}.clover-template-document-live{--clover-body-height: 100%;position:absolute;inset-inline:0;top:0;height:100%;transition:opacity .16s ease}.clover-template-document-body .clover-canvas{--clover-canvas-inset: var(--clover-inset);background-color:transparent}.clover-template-document-live[data-moved]:not(:focus-within){opacity:0;pointer-events:none}.clover-template-document-column[data-scrolling] .clover-template-document-live:not(:focus-within) .clover-canvas-controls>*{--clover-controls-shown: 0;--clover-controls-events: none}.clover-template-document-column:not([data-zoomed]) .clover-canvas-viewport{touch-action:pan-y}.clover-template-document-panel{contain:size;overflow-y:auto;overscroll-behavior:contain;background-color:var(--clover-color-secondary, #fff)}.clover-template-document-panel[hidden]{display:none}.clover-template-document-scrim[data-for=sidebar]{z-index:2}.clover-template-document{--clover-grip: color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 30%, transparent )}.clover-template-document-panes[data-narrow]{--clover-template-sidebar-width: min(14rem, 80%)}.clover-template-document-panes[data-narrow]>.clover-template-document-sidebar{position:absolute;inset-block:0;inset-inline-start:0;z-index:3;width:var(--clover-template-sidebar-width);border-inline-end:1px solid var(--clover-color-secondary-muted, #e6e8eb);background:linear-gradient(var(--clover-grip),var(--clover-grip)) no-repeat right var(--clover-space-2xs) center / 4px var(--clover-space-xl),var(--clover-color-secondary, #fff);touch-action:pan-y;box-shadow:var(--clover-space-s) 0 var(--clover-space-l) #0000001f}.clover-template-document-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-document-spine>*{position:absolute;top:var(--clover-inset);inset-inline-start:-1.5px;translate:-50%}.clover-template-document-spine:dir(rtl)>*{translate:50%}.clover-template-document-spine[data-for=sidebar]>*{inset-inline:auto calc(1.5px - var(--clover-control) / 2);translate:none}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]{inset-inline-start:var(--clover-template-sidebar-width)}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]>*{inset-inline-end:calc(var(--clover-control) / -2)}.clover-template-gallery{display:flex;flex-direction:column;gap:var(--clover-space-m);color:var(--clover-color-primary, #1a1d1e)}.clover-template-gallery-header{display:flex;flex-direction:column;gap:var(--clover-space-2xs)}.clover-template-gallery-title{margin:0;font-size:var(--clover-text-l);line-height:1.25;font-weight:700}.clover-template-gallery-summary{margin:0}}
+@layer clover{.clover-template-lightbox{position:absolute;inset:0;z-index:10;padding:var(--clover-template-lightbox-inset, 0);background:var(--clover-template-lightbox-backdrop, transparent)}.clover-template-lightbox[hidden]{display:none}.clover-template-lightbox-content{position:sticky;top:calc(var(--clover-template-lightbox-top, 0px) + var(--clover-template-lightbox-inset, 0px));box-sizing:border-box;display:flex;flex-direction:column;gap:var(--clover-space-m);height:min(100%,calc(100vh - var(--clover-template-lightbox-top, 0px) - 2 * var(--clover-template-lightbox-inset, 0px)));padding:var(--clover-inset);border-radius:var(--clover-template-lightbox-radius, 0);background:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e);--clover-body-height: min(70vh, 48rem)}@supports (height: 1svh){.clover-template-lightbox-content{height:min(100%,calc(100svh - var(--clover-template-lightbox-top, 0px) - 2 * var(--clover-template-lightbox-inset, 0px)));--clover-body-height: min(70svh, 48rem)}}.clover-template-lightbox-content>.clover-template-lightbox-panes{flex:1 1 auto;min-height:0}.clover-template-lightbox-main{display:flex;flex-direction:column;gap:var(--clover-space-m);min-height:0}.clover-template-lightbox-main>.clover-template-lightbox-body{flex:1 1 auto;min-height:0}.clover-template-lightbox-main>.clover-items[data-layout=slider]{flex:none;--clover-items-height: 4rem;--clover-items-lines: 1}.clover-template-lightbox-pending{height:var(--clover-body-height, 60vh);background-color:#0001}.clover-template-lightbox-header{display:flex;align-items:center;gap:var(--clover-space-m)}.clover-template-lightbox-title{flex:1 1 auto;min-width:0}.clover-template-lightbox-caption{flex:none;margin:calc(var(--clover-space-xs) - var(--clover-space-m)) 0 0;overflow-wrap:anywhere}.clover-template-lightbox-back:dir(rtl) svg{transform:scaleX(-1)}button:is(.clover-template-lightbox-back,.clover-template-lightbox-close){flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--clover-control);height:var(--clover-control);padding:0;border:0;border-radius:var(--clover-radius-pill, 2rem);background:transparent;color:inherit;cursor:pointer}button:is(.clover-template-lightbox-back,.clover-template-lightbox-close):is(:hover,:focus-visible){background:var(--clover-color-accent, #0065c3);color:var(--clover-color-control-glyph, #fff)}:where([data-high-contrast]) button:is(.clover-template-lightbox-back,.clover-template-lightbox-close):is(:hover,:focus-visible){background:var(--clover-accent-fill)}:where([data-high-contrast]) button:is(.clover-template-lightbox-back,.clover-template-lightbox-close):hover:not(:focus-visible){outline:var(--clover-accent-ring-hover);outline-offset:1px}.clover-template-document{--clover-template-document-height: min(85vh, 56rem);display:flex;flex-direction:column;height:var(--clover-template-document-height);min-height:min-content;overflow:hidden;background-color:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e)}@supports (height: 1svh){.clover-template-document{--clover-template-document-height: min(85svh, 56rem)}}.clover-template-document-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-s);padding:var(--clover-space-m) var(--clover-inset);border-bottom:1px solid var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-provider{max-width:100%;margin-inline-start:auto}.clover-template-document-toolbar .clover-download-groups{flex-direction:row;flex-wrap:wrap;column-gap:var(--clover-space-m)}.clover-template-document-toolbar .clover-download-group{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--clover-space-s)}.clover-template-document-toolbar .clover-download-title{margin:0}.clover-template-document-toolbar .clover-download-list{display:flex;flex-wrap:wrap;column-gap:var(--clover-space-s)}.clover-template-document-title{flex:1 1 6rem;min-width:0}button.clover-template-document-sidebar-toggle{display:inline-flex;flex:none;align-items:center;gap:var(--clover-space-xs);min-height:var(--clover-control);padding-block:0;padding-inline:var(--clover-space-s) calc(var(--clover-space-xs) + var(--clover-space-3xs));border:0;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-color-control, #1a1d1e);color:var(--clover-color-control-glyph, #fff);cursor:pointer;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}button.clover-template-document-sidebar-toggle:is(:hover,:focus-visible){background-color:var(--clover-color-accent, #0065c3)}:where([data-high-contrast]) button.clover-template-document-sidebar-toggle:is(:hover,:focus-visible){background-color:var(--clover-accent-fill)}:where([data-high-contrast]) button.clover-template-document-sidebar-toggle:hover:not(:focus-visible){outline:var(--clover-accent-ring-hover);outline-offset:1px}button.clover-template-document-sidebar-toggle:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}.clover-template-document-sidebar-toggle .clover-template-document-position{color:inherit;font-size:var(--clover-text-xs);white-space:nowrap}.clover-template-document-sidebar-toggle .clover-template-document-position>.clover-pager-room[hidden]{display:none}.clover-template-document-panes{position:relative;flex:1 1 auto;min-height:16rem}.clover-template-document-panes:is([data-panel=over],[data-narrow])>.clover-template-document-main{isolation:isolate}.clover-template-document-sidebar{contain:size;overflow-y:auto;overscroll-behavior:contain;padding:var(--clover-inset);scroll-padding-top:calc(2 * var(--clover-inset) + var(--clover-control));background-color:var(--clover-color-secondary, #fff)}.clover-template-document-sidebar-closed{position:absolute;top:var(--clover-inset);inset-inline-start:var(--clover-inset);z-index:3}@media (width < 31rem){.clover-template-document-toolbar,.clover-template-document-sidebar-closed,.clover-template-document-spine{--clover-inset: var(--clover-space-m)}}.clover-template-document-sidebar[hidden]{display:none}.clover-template-document-sidebar+.clover-split-handle:before{inset-inline-start:0;inset-inline-end:calc(3px - var(--clover-space-l))}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),minmax(0,1fr));gap:var(--clover-space-xs) 0}.clover-template-document-sidebar .clover-items[data-layout] :is(.clover-items-pictures,.clover-items-caption){grid-column:1 / -1;grid-template-columns:subgrid}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-label{contain:inline-size}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture[data-empty],.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture img{width:100%;height:auto;max-height:20rem;aspect-ratio:var(--clover-items-ratio, auto);object-fit:contain}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-caption{font-size:var(--clover-text-s)}.clover-template-document-main{position:relative;overflow:hidden;background-color:var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-column{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;container-type:size}.clover-template-document-sheets{position:relative}.clover-template-document-sheet{--clover-template-document-tease: calc(2 * var(--clover-inset));display:flex;justify-content:center;box-sizing:border-box;height:min(100cqh - var(--clover-template-document-tease),(100cqw - 2 * var(--clover-inset)) / var(--ratio) + 2 * var(--clover-inset));padding:var(--clover-inset);transition:opacity .2s ease,height .24s cubic-bezier(.16,1,.3,1)}.clover-template-document-sheet[data-fill]{height:calc(100cqh - var(--clover-template-document-tease))}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]{height:100cqh}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]>*{visibility:hidden}.clover-template-document-column[data-zoomed] .clover-template-document-sheet:not([data-active]){--clover-template-document-muted: 0;pointer-events:none}.clover-template-document-sheet:not([data-active]){--clover-template-document-muted: .618;cursor:pointer;opacity:var(--clover-template-document-muted)}.clover-template-document-sheet:not([data-active]):hover{--clover-template-document-muted: .809}@media (prefers-reduced-motion: reduce){.clover-template-document-sheet{transition:none}}.clover-template-document-sheets[data-single]>.clover-template-document-sheet{--clover-template-document-tease: 0px}.clover-template-document-sheet>*{display:block;height:100%;min-width:0}.clover-template-document-sheet[data-fill]>*{object-fit:contain}.clover-template-document-live{--clover-body-height: 100%;position:absolute;inset-inline:0;top:0;height:100%;transition:opacity .16s ease}.clover-template-document-body .clover-canvas{--clover-canvas-inset: var(--clover-inset);background-color:transparent}.clover-template-document-live[data-moved]:not(:focus-within){opacity:0;pointer-events:none}.clover-template-document-column[data-scrolling] .clover-template-document-live:not(:focus-within) .clover-canvas-controls>*{--clover-controls-shown: 0;--clover-controls-events: none}.clover-template-document-column:not([data-zoomed]) :not(.clover-scene)>.clover-canvas-viewport{touch-action:pan-y}.clover-template-document-scrim[data-for=sidebar]{z-index:2}.clover-template-document-panes[data-narrow]{--clover-template-sidebar-width: min(14rem, 80%)}.clover-template-document-panes[data-narrow]>.clover-template-document-sidebar{position:absolute;inset-block:0;inset-inline-start:0;z-index:3;width:var(--clover-template-sidebar-width);border-inline-end:1px solid var(--clover-color-secondary-muted, #e6e8eb);--clover-template-inner: right;--clover-template-toward: 1}.clover-template-document-panes[data-narrow]>.clover-template-document-sidebar:dir(rtl){--clover-template-inner: left;--clover-template-toward: -1}.clover-template-document-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-document-spine>*{position:absolute;top:var(--clover-inset);inset-inline-start:-1.5px;translate:-50%}.clover-template-document-spine:dir(rtl)>*{translate:50%}.clover-template-document-spine[data-for=sidebar]>*{inset-inline:auto calc(1.5px - var(--clover-control) / 2);translate:none}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]{inset-inline-start:var(--clover-template-sidebar-width)}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]>*{inset-inline-end:calc(var(--clover-control) / -2)}.clover-template-gallery{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--clover-space-l);padding:var(--clover-inset);color:var(--clover-color-primary, #1a1d1e)}.clover-template-gallery[data-height=fixed]{box-sizing:border-box;height:var(--clover-template-gallery-height)}.clover-template-gallery[data-height=fixed]>.clover-items{flex:1 1 auto;min-height:0;overflow:auto;margin:calc(-1 * var(--clover-items-ring-room, 4px));padding:var(--clover-items-ring-room, 4px)}.clover-template-gallery-header{flex:none;display:flex;flex-direction:column;gap:var(--clover-space-2xs)}.clover-template-gallery-summary{margin:0;--clover-summary-lines: 2}.clover-template-gallery .clover-items{--clover-items-gap: var(--clover-template-gallery-gap, var(--clover-inset));--clover-items-lines: none}}

package/dist/ui/ControlCluster.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
 import Button from "./Button.mjs";
 import { Tip } from "./Tip.mjs";
 import { ControlIcon } from "./controlGlyphs.mjs";
@@ -56,31 +56,29 @@ function renderControl({
   );
 }
 const ControlCluster = ({
-  controls,
-  controlButtons,
-  hasPlaceholder = false,
+  fit = false,
+  clusterRef,
   children
 }) => {
   const [element, setElement] = useState(null);
   const isFullscreen = useWithinFullscreen(element);
   useClusterReach(element);
-  const specs = controls(isFullscreen);
-  const ordered = [
-    ...specs.filter((spec) => spec.key !== "fullPage"),
-    ...specs.filter((spec) => spec.key === "fullPage")
-  ];
-  return /* @__PURE__ */ jsxs(
+  const ref = useCallback(
+    (node) => {
+      setElement(node);
+      clusterRef == null ? void 0 : clusterRef(node);
+    },
+    [clusterRef]
+  );
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "clover-canvas-controls",
+      "data-fit": fit || void 0,
       "data-fullscreen": isFullscreen,
-      "data-has-placeholder": hasPlaceholder,
       "data-testid": "clover-canvas-controls",
-      ref: setElement,
-      children: [
-        ordered.map((spec) => renderControl(spec, controlButtons)),
-        children
-      ]
+      ref,
+      children
     }
   );
 };

package/dist/ui/Sections.mjs

@@ -211,7 +211,7 @@ function Sections({
       "button",
       {
         type: "button",
-        className: `clover-sections-scroll-${step}`,
+        className: `clover-steps-step clover-sections-scroll-${step}`,
         "aria-hidden": "true",
         tabIndex: -1,
         hidden: !more,
@@ -224,8 +224,8 @@ function Sections({
             {
               "aria-hidden": "true",
               focusable: "false",
-              width: "16",
-              height: "16",
+              width: "12",
+              height: "12",
               viewBox: "0 0 16 16",
               children: /* @__PURE__ */ jsx(
                 "path",

package/dist/ui/mediaIcons.mjs

@@ -75,27 +75,54 @@ const CaptionsIcon = ({ on = false }) => /* @__PURE__ */ jsxs("svg", { ...svgPro
     }
   )
 ] });
-const ChaptersIcon = () => /* @__PURE__ */ jsxs("svg", { ...svgProps, children: [
+const Frame = () => /* @__PURE__ */ jsx(
+  "rect",
+  {
+    x: "40",
+    y: "104",
+    width: "432",
+    height: "304",
+    rx: "56",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "36"
+  }
+);
+const FillIcon = () => /* @__PURE__ */ jsxs("svg", { ...svgProps, children: [
+  /* @__PURE__ */ jsx(Frame, {}),
   /* @__PURE__ */ jsx(
     "path",
     {
-      d: "M160 144h288M160 256h288M160 368h288",
+      d: "M204 208l-48 48 48 48M308 208l48 48-48 48",
       fill: "none",
       stroke: "currentColor",
       strokeLinecap: "round",
-      strokeWidth: "32"
+      strokeLinejoin: "round",
+      strokeWidth: "36"
     }
-  ),
-  /* @__PURE__ */ jsx("circle", { cx: "80", cy: "144", r: "20" }),
-  /* @__PURE__ */ jsx("circle", { cx: "80", cy: "256", r: "20" }),
-  /* @__PURE__ */ jsx("circle", { cx: "80", cy: "368", r: "20" })
+  )
+] });
+const FitIcon = () => /* @__PURE__ */ jsxs("svg", { ...svgProps, children: [
+  /* @__PURE__ */ jsx(Frame, {}),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M140 208l48 48-48 48M372 208l-48 48 48 48",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "36"
+    }
+  )
 ] });
 const FullScreenIcon = () => /* @__PURE__ */ jsx("svg", { ...svgProps, children: /* @__PURE__ */ jsx(ZoomFullScreen, {}) });
 const ExitFullScreenIcon = () => /* @__PURE__ */ jsx("svg", { ...svgProps, children: /* @__PURE__ */ jsx(ZoomExitFullScreen, {}) });
 export {
   CaptionsIcon,
-  ChaptersIcon,
   ExitFullScreenIcon,
+  FillIcon,
+  FitIcon,
   FullScreenIcon,
   PauseIcon,
   PlayIcon,

package/dist/ui/useScrollTrack.mjs

@@ -64,7 +64,7 @@ function useScrollTrack({
       const slide = viewport == null ? void 0 : viewport.querySelector(
         `[data-track-index="${index}"]`
       );
-      if (!viewport || !slide) return;
+      if (!viewport || !slide) return false;
       const box = viewport.getBoundingClientRect();
       const rect = slide.getBoundingClientRect();
       const rtl = getComputedStyle(viewport).direction === "rtl";
@@ -72,6 +72,7 @@ function useScrollTrack({
         alignment.current === "center" ? rect.left + rect.width / 2 - (box.left + box.width / 2) : rtl ? rect.right - box.right : rect.left - box.left,
         instant
       );
+      return true;
     },
     [viewport, scrollAlong]
   );

package/dist/web-components/About-DvyvVUK5.mjs

@@ -0,0 +1 @@
+import{Q as I,u as e,z as p,P as g,x as T,a as $,c as M,A as _,y as F,b as H,V as D,l as V}from"./shared-DkY2a89G.mjs";import{j as k}from"./classnames-DukgfdpI.mjs";import{u as G}from"./readingLanguages-BWOLZK2k.mjs";import{Thumbnail as B,Summary as O,Metadata as Q,RequiredStatement as U,Rights as W,Homepage as E,SeeAlso as J,Id as X}from"./Primitives-C6VJXxZD.mjs";import{u as Y}from"./downloads-EjJ6Hpip.mjs";import{P as Z}from"./Provider-DyB0wpeO.mjs";import{a as K,t as ee}from"./heading-Cjt0f-Eu.mjs";import{L as te}from"./Label-f07N5Fld.mjs";import{r as oe}from"./dates-DR3gfcON.mjs";import"./styles-DkkVOSUQ.mjs";const ae=p(()=>import("./LanguageChoice-B5VM21DV.mjs").then(o=>({default:o.LanguageChoice}))),re=I(false);function ne({part:o}){const r=G();return r?e(g,{fallback:null,children:e(ae,{...r,nameKey:"readingLanguage",part:o})}):null}const le=p(()=>import("./Download-Bku9Vptk.mjs").then(({DownloadGroups:o})=>({default:o}))),se=p(()=>import("./NavDate-BCCOyycx.mjs").then(o=>o.a).then(({NavDate:o})=>({default:o}))),ce=p(()=>import("./PartOfManifest-HLg-r00O.mjs"));function ue({languages:o=true,...r}){const n=T(re);return e(ie,{...r,download:!n&&r.download!==false,choice:n||!o?null:e(ne,{part:"clover-about"})})}function ie({choice:o,canvasSummary:r=false,headingLevel:n=3,download:C=true,thumbnail:y=true,label:b=true,className:q,...R}){const{t:x,langOf:L}=$(),f=Y(),a=M(t=>t.manifest,Object.is,"About"),P=_(null);F(()=>{const t=P.current,s=t==null?void 0:t.querySelector(".clover-about-head");if(!t||!s||typeof ResizeObserver>"u")return;const c=new Set,u=()=>{const A=s.querySelector(".clover-about-thumbnail"),h=s.querySelector(".clover-about-label");for(const v of[A,h])v&&!c.has(v)&&(c.add(v),d.observe(v));const i=t.style;if(!A){i.removeProperty("--clover-about-label-height"),i.removeProperty("--clover-about-thumbnail-width");return}const N=`${(h==null?void 0:h.offsetHeight)??0}px`,S=`${A.offsetWidth}px`;i.getPropertyValue("--clover-about-label-height")!==N&&i.setProperty("--clover-about-label-height",N),i.getPropertyValue("--clover-about-thumbnail-width")!==S&&i.setProperty("--clover-about-thumbnail-width",S)};let m=0;const d=new ResizeObserver(()=>{cancelAnimationFrame(m),m=requestAnimationFrame(u)});return d.observe(s),u(),()=>{cancelAnimationFrame(m),d.disconnect(),t.style.removeProperty("--clover-about-label-height"),t.style.removeProperty("--clover-about-thumbnail-width")}},[b,y,a]);const j=H(),z=()=>{var c,u;const t=P.current;(u=((c=t==null?void 0:t.closest(".clover-sections-item"))==null?void 0:c.querySelector(".clover-sections-button"))??t)==null||u.focus({preventScroll:true})};if(!a)return null;const l=(t,s,c)=>{if(!s)return null;const{as:u,title:m,group:d}=ee(n,`${j}-${t}`);return e("section",{className:"clover-about-section",...d,children:[e(u,{className:"clover-about-heading",...V(L(t)),...m,children:x(t)}),c]})},w=t=>Array.isArray(a[t])?a[t].length>0:!!a[t];return e("div",{ref:P,className:k("clover-about",q),tabIndex:-1,...R,children:[o,(y||b)&&e("div",{className:"clover-about-head",children:[y&&e(B,{className:"clover-about-thumbnail",size:256,alt:b?"":void 0}),b&&e(te,{as:K(n),className:"clover-about-label clover-title"})]}),r&&e(O,{of:"canvas",className:"clover-about-summary"}),D(a)&&a.partOf&&e(g,{fallback:null,children:e(ce,{manifest:a,headingLevel:n,onOpened:z})}),e(O,{className:"clover-about-summary"}),e(Q,{className:"clover-about-metadata"}),e(U,{className:"clover-about-metadata"}),l("aboutDate",oe(a.navDate),e(g,{fallback:null,children:e(se,{value:a.navDate,className:"clover-about-date"})})),l("aboutProvider",w("provider"),e(Z,{})),l("aboutRights",a.rights,e(W,{})),l("aboutHomepage",w("homepage"),e(E,{})),l("aboutSeeAlso",w("seeAlso"),e(J,{})),l("download",C&&f.page.length+f.all.length>0,e(g,{fallback:null,children:e(le,{page:f.page,all:f.all,headingLevel:n+1})})),l(D(a)?"aboutCanvas":"aboutManifest",a.id,e(X,{}))]})}const we=Object.freeze(Object.defineProperty({__proto__:null,About:ue},Symbol.toStringTag,{value:"Module"}));export{ue as A,re as I,we as a};

package/dist/web-components/AnnotationItems-BpRcSrOM.mjs

@@ -0,0 +1 @@
+import{e as P,c as v,ag as _,T as E,G as O,A as R,y as T,u as f,k,d as q,Y as F}from"./shared-DkY2a89G.mjs";import{P as G,a as L}from"./Items-CudZ4Lnb.mjs";import{C as y}from"./CountMenu-Dnzb7lKo.mjs";import{a as B}from"./annotation-name-DbWjhgra.mjs";import{f as D,r as K}from"./fetchManifest-CwQC6cCh.mjs";import{u as V,L as Y}from"./ListEnd-M39M62Cl.mjs";function j({onSelect:o,forwardedRef:r,...c}){const{clover:l,language:e}=P("Items"),n=v(t=>t.manifest),s=v(t=>_(t.manifest,t.addedSets)),u=v(t=>t.annotationId),d=(s==null?void 0:s.pages)??z,m=(s==null?void 0:s.entries)??H,{loaded:A,more:N,reachNext:S}=V(d),x=E(()=>[...new Set(m.map(t=>O(t.annotation)).filter(t=>!!t&&t!==(n==null?void 0:n.id)))],[m,n==null?void 0:n.id]),C=Q(c.layout==="pager"?J:x),M=x.length>0,i=E(()=>{const t=d.length?new Set(d.slice(0,A).map(a=>a.id)):null;return m.filter(a=>!t||t.has(a.setId)).map(a=>{const g=O(a.annotation),p=g&&g!==(n==null?void 0:n.id)?C.get(g)??null:n;return W(a,p,e,M)})},[d,A,m,n,C,M,e]),b=Math.max((s==null?void 0:s.total)??0,i.length),I=R(null);if(T(()=>{const t=I.current;t===null||!i[t]||(I.current=null,l.selectAnnotation(i[t].id))},[l,i]),!i.length)return null;const h=i.findIndex(t=>t.id===u),w=(t,a)=>{o==null||o(t,a),l.selectAnnotation(t.id)};return c.layout==="pager"?f(G,{...c,forwardedRef:r,steps:{position:h,total:b,direction:"left-to-right",step:(a,g)=>{const p=h+a;if(!(p<0)){if(i[p])return w(i[p],g);N&&(I.current=p,S())}}},nameKey:"informationPanelTabsAnnotations",position:f(y,{position:h,total:b,list:a=>f(j,{layout:"list",forwardedRef:null,onSelect:a})})}):f(k,{children:[f(L,{...c,forwardedRef:r,items:i,selected:h,navigation:"id",language:e,request:l.request,showSummary:true,onActivate:w}),N&&f(Y,{onReached:S})]})}const z=[],H=[],J=[];function Q(o){const{clover:r}=P("Items"),[c,l]=q(U);return T(()=>{if(!o.length)return;let e=true;for(const n of o)D(r,n).then(s=>{e&&s&&l(u=>u.has(n)?u:new Map(u).set(n,s))});return()=>{e=false}},[r,o]),c}const U=new Map;function W(o,r,c,l){const e=F(r,o.canvasId),n=B(o.bodies,c),s=n.text?{[n.lang??"none"]:[n.text]}:e==null?void 0:e.label,u=l?r==null?void 0:r.label:e==null?void 0:e.label,d=e&&o.target.rect?K(e,o.target.rect):void 0;return{id:o.id,label:s,summary:n.text?u:void 0,parts:[{id:o.id,type:"Canvas",label:s,resource:e??{id:o.canvasId},...d?{source:d}:{}}]}}export{j as default};