@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/templates/default/Default.mjs

@@ -1,27 +1,22 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
-import { useDragToClose } from "../shared/useDragToClose.mjs";
-import { useWideEnough, panelFocus, useSlide } from "../shared/useSlide.mjs";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useRef, useEffect } from "react";
+import { usePanelPane, PanelPane } from "../shared/PanelPane.mjs";
+import { useWideEnough, PAGE_MIN, BESIDE_REM } from "../shared/useSlide.mjs";
 import { useFollowFocus } from "../shared/useFollowFocus.mjs";
-import { useSpineTop } from "../shared/useSpine.mjs";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { Root } from "../../components/Root/Root.mjs";
 import { titled } from "../../ui/heading.mjs";
-import { Split, SplitPane, SplitHandle } from "../../components/Split/Split.mjs";
-import { Label } from "../../components/Label/Label.mjs";
+import { Split, SplitPane } from "../../components/Split/Split.mjs";
+import { Items } from "../../components/Items/Items.mjs";
 import { Provider, Logo } from "../../components/Provider/Provider.mjs";
 import { Status } from "../../components/Status/Status.mjs";
 import { Body } from "../../components/Body/Body.mjs";
-import { Position } from "../../components/Items/Pager.mjs";
-import { Items } from "../../components/Items/Items.mjs";
+import { Position } from "../../components/Items/Position.mjs";
 import { Panel } from "../../components/Panel/Panel.mjs";
-import { PanelToggle } from "../../components/Panel/PanelToggle.mjs";
-import { useVisibleCanvases } from "../../react/hooks.mjs";
-const BODY_MIN = "16rem";
-const PANEL_MIN = "14rem";
-const BESIDE_REM = 16 + 14 + 1;
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+import { useCloverSelector, useClover } from "../../react/context.mjs";
+import { useAnnotationCollection, useVisibleCanvases } from "../../react/hooks.mjs";
+import { Label } from "../../components/Label/Label.mjs";
 function Default({
   className,
   header = true,
@@ -30,86 +25,34 @@ function Default({
   defaultPanelOpen,
   panelLayout = "accordion",
   download = true,
+  languages = true,
   items = "slider",
+  singleItem = false,
   storageKey = "clover-template-default",
   fill = false,
+  collapseControls,
   ...root
 }) {
   const panes = useRef(null);
-  const measured = useWideEnough(panes, BESIDE_REM);
-  const beside = measured ?? true;
-  const [choice, setChoice] = useState(defaultPanelOpen ?? true);
-  const [floating, setFloating] = useState(false);
-  const open = beside ? choice : floating;
-  const pane = useRef(null);
-  const tries = useRef(0);
-  useEffect(() => {
-    if (!tries.current || !pane.current) return;
-    tries.current -= 1;
-    const target = panelFocus(pane.current);
-    target == null ? void 0 : target.focus({ preventScroll: true });
-    if (target && document.activeElement === target) tries.current = 0;
-  });
-  const setOpen = (value) => {
-    tries.current = !beside && value ? 3 : 0;
-    if (!beside) setFloating(value);
-    setChoice(value);
-  };
   const baseId = useUniqueId().replace(/:/g, "");
   const panelId = `${baseId}-panel`;
   const title = titled(headingLevel, `${baseId}-title`);
-  const followFocus = useFollowFocus();
-  const follow = () => followFocus(
-    () => document.querySelector(
-      `[data-button="panel"][aria-controls~="${panelId}"]`
-    )
-  );
-  const handBack = () => {
-    var _a;
-    if ((_a = pane.current) == null ? void 0 : _a.contains(document.activeElement)) follow();
-  };
-  const wasBeside = useRef(measured);
-  useIsomorphicLayoutEffect(() => {
-    if (wasBeside.current === true && measured === false) follow();
-    if (measured === true) setFloating(false);
-    wasBeside.current = measured;
-  }, [measured]);
-  const over = !beside;
-  const docked = panel && !over && open;
-  const spine = useRef(null);
-  useSpineTop(
-    spine,
-    () => {
-      var _a, _b;
-      return (_b = (_a = spine.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.querySelector(
+  const pane = usePanelPane({
+    id: panelId,
+    // Beside the Body until measured otherwise, as on the server.
+    beside: useWideEnough(panes, BESIDE_REM),
+    defaultOpen: defaultPanelOpen ?? true,
+    followFocus: useFollowFocus(),
+    body: () => {
+      var _a;
+      return (_a = panes.current) == null ? void 0 : _a.querySelector(
         ".clover-template-default-body"
       );
     },
-    docked
-  );
-  const toggle = /* @__PURE__ */ jsx(
-    PanelToggle,
-    {
-      open,
-      onOpenChange: (next) => {
-        if (!over) follow();
-        setOpen(next);
-      },
-      controls: panelId
-    }
-  );
-  const slide = useSlide(over && open);
-  const scrim = useRef(null);
-  useDragToClose(pane, {
-    enabled: over && slide.open,
-    side: "end",
-    onClose: () => {
-      handBack();
-      setOpen(false);
-    },
-    scrim
+    panel: Panel
   });
-  const shown = over ? slide.mounted : open;
+  const over = pane.over;
+  const docked = panel && pane.docked;
   return /* @__PURE__ */ jsx(
     Root,
     {
@@ -122,85 +65,56 @@ function Default({
         {
           ref: panes,
           className: "clover-template-default-panes clover-template-panes",
-          "data-panel": over ? "over" : "beside",
           storageKey: storageKey || void 0,
-          onKeyDown: (event) => {
-            if (over && open && event.key === "Escape" && !event.defaultPrevented) {
-              event.preventDefault();
-              setOpen(false);
-            }
-          },
+          ...panel ? pane.splitProps : { "data-panel": "beside" },
           children: [
             /* @__PURE__ */ jsxs(
               SplitPane,
               {
                 className: "clover-template-default-main",
-                min: over ? void 0 : BODY_MIN,
+                min: over ? void 0 : PAGE_MIN,
                 children: [
                   header && /* @__PURE__ */ jsxs("header", { className: "clover-template-default-header", children: [
+                    /* @__PURE__ */ jsx(HeaderTitle, { title }),
                     /* @__PURE__ */ jsx(
-                      Label,
+                      Items,
                       {
-                        as: title.as,
-                        className: "clover-template-default-title",
-                        ...title.title
+                        of: "targets",
+                        layout: "pager",
+                        size: "small",
+                        className: "clover-template-default-pager"
                       }
                     ),
                     /* @__PURE__ */ jsx(Provider, { className: "clover-template-default-provider", children: /* @__PURE__ */ jsx(Logo, {}) })
                   ] }),
                   /* @__PURE__ */ jsx(Status, { loading: false }),
-                  /* @__PURE__ */ jsx(Body, { className: "clover-template-default-body", children: panel && !docked && toggle }),
+                  /* @__PURE__ */ jsx(
+                    Body,
+                    {
+                      className: "clover-template-default-body",
+                      collapseControls,
+                      children: panel && !docked && pane.toggle
+                    }
+                  ),
                   /* @__PURE__ */ jsxs("div", { className: "clover-template-default-rail", children: [
                     /* @__PURE__ */ jsxs("div", { className: "clover-template-default-rail-header", children: [
                       /* @__PURE__ */ jsx(ViewTitles, {}),
                       /* @__PURE__ */ jsx(Position, {})
                     ] }),
-                    items && /* @__PURE__ */ jsx(Items, { layout: items })
+                    items && /* @__PURE__ */ jsx(Items, { layout: items, singleItem })
                   ] })
                 ]
               }
             ),
-            docked && /* @__PURE__ */ jsx(SplitHandle, { "aria-controls": panelId }),
-            docked && /* @__PURE__ */ jsx("div", { ref: spine, className: "clover-template-default-spine", children: toggle }),
             panel && /* @__PURE__ */ jsx(
-              SplitPane,
+              PanelPane,
               {
-                ref: pane,
-                id: panelId,
-                "data-spine": over || void 0,
-                name: "panel",
-                className: "clover-template-default-panel clover-template-drawer",
-                size: "24rem",
-                min: over ? void 0 : PANEL_MIN,
-                "data-open": over ? slide.open : open,
-                hidden: !shown,
-                children: /* @__PURE__ */ jsx(
-                  Panel,
-                  {
-                    layout: panelLayout,
-                    download,
-                    headingLevel: header ? below(headingLevel) : headingLevel,
-                    onClose: over ? () => setOpen(false) : void 0,
-                    closeOnEscape: over
-                  }
-                )
-              }
-            ),
-            panel && over && slide.mounted && // The uncovered strip, and the Body under the panel: a click puts it away.
-            // A press on it takes no focus, so focus in the panel is still there to hand
-            // back to the toggle, never left to fall to the page (WCAG 2.4.3).
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                ref: scrim,
-                className: "clover-template-default-scrim clover-template-scrim",
-                "data-open": slide.open,
-                "aria-hidden": "true",
-                onMouseDown: (event) => event.preventDefault(),
-                onClick: () => {
-                  handBack();
-                  setOpen(false);
-                }
+                pane,
+                className: "clover-template-default-panel",
+                layout: panelLayout,
+                download,
+                languages,
+                headingLevel: header ? below(headingLevel) : headingLevel
               }
             )
           ]
@@ -209,6 +123,79 @@ function Default({
     }
   );
 }
+function HeaderTitle({ title }) {
+  const collection = useCloverSelector(
+    (state) => {
+      var _a;
+      return state.throughCollection ? (_a = state.collection) == null ? void 0 : _a.label : void 0;
+    }
+  );
+  const annotations = useAnnotationCollection();
+  usePickFirst(annotations == null ? void 0 : annotations.entries[0]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Label,
+      {
+        as: title.as,
+        className: "clover-template-default-title clover-template-title clover-title",
+        ...title.title
+      }
+    ),
+    collection && /* @__PURE__ */ jsxs("div", { className: "clover-template-default-collection-row", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          as: "p",
+          label: collection,
+          className: "clover-template-default-collection"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Items,
+        {
+          of: "members",
+          layout: "pager",
+          size: "small",
+          className: "clover-template-default-pager"
+        }
+      )
+    ] }),
+    annotations && /* @__PURE__ */ jsxs("div", { className: "clover-template-default-collection-row", children: [
+      annotations.label && /* @__PURE__ */ jsx(
+        Label,
+        {
+          as: "p",
+          label: annotations.label,
+          className: "clover-template-default-collection"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Items,
+        {
+          of: "annotations",
+          layout: "pager",
+          size: "small",
+          className: "clover-template-default-pager"
+        }
+      )
+    ] })
+  ] });
+}
+function usePickFirst(first) {
+  const { clover } = useClover();
+  const manifestId = useCloverSelector((state) => {
+    var _a;
+    return (_a = state.manifest) == null ? void 0 : _a.id;
+  });
+  const started = useRef(null);
+  useEffect(() => {
+    if (!first || !manifestId || started.current === manifestId) return;
+    started.current = manifestId;
+    const { annotationId, canvasId } = clover.store.get();
+    if (!annotationId && canvasId === first.canvasId)
+      clover.selectAnnotation(first.id);
+  }, [clover, first, manifestId]);
+}
 const below = (level) => level + 1;
 function ViewTitles() {
   const canvases = useVisibleCanvases();

package/dist/templates/document/Document.mjs

@@ -1,16 +1,19 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
+import { useRef } from "react";
+import { PanelPane } from "../shared/PanelPane.mjs";
+import { preloadDrag } from "../shared/useDragToClose.mjs";
 import { useDrawer } from "../shared/useDrawer.mjs";
 import { useFollowFocus } from "../shared/useFollowFocus.mjs";
-import { useWideEnough } from "../shared/useSlide.mjs";
+import { useLazyPanelPane } from "../shared/useLazyPanelPane.mjs";
+import { useWideEnough, BESIDE_REM, PAGE_MIN } from "../shared/useSlide.mjs";
 import { Sheets } from "./Sheets.mjs";
 import { titled } from "../../ui/heading.mjs";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { Root } from "../../components/Root/Root.mjs";
 import { useT, useLangOf, useNavigation } from "../../react/hooks.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
-import { Position } from "../../components/Items/Pager.mjs";
+import { Position } from "../../components/Items/Position.mjs";
 import { Tip } from "../../ui/Tip.mjs";
 import { Label } from "../../components/Label/Label.mjs";
 import { Download } from "../../components/Download/Download.mjs";
@@ -18,16 +21,17 @@ import { Provider, Logo } from "../../components/Provider/Provider.mjs";
 import { Status } from "../../components/Status/Status.mjs";
 import { Split, SplitPane, SplitHandle } from "../../components/Split/Split.mjs";
 import { Items } from "../../components/Items/Items.mjs";
-import { PanelToggle } from "../../components/Panel/PanelToggle.mjs";
-const loadPanel = () => import("./DocumentPanel.mjs");
 function Document({
   className,
   defaultSidebarOpen,
+  singleItem = false,
   defaultPanelOpen = false,
   panelLayout = "accordion",
   download = true,
+  languages = true,
   headingLevel = 2,
   storageKey = "clover-template-document",
+  collapseControls,
   ...root
 }) {
   const title = titled(
@@ -45,29 +49,32 @@ function Document({
         {
           title,
           defaultSidebarOpen,
+          singleItem,
           defaultPanelOpen,
           panelLayout,
           download,
+          languages,
           headingLevel,
-          storageKey
+          storageKey,
+          collapseControls
         }
       )
     }
   );
 }
 const below = (level) => level + 1;
-const PAGE_MIN = "16rem";
-const PANEL_MIN = "14rem";
-const BESIDE_REM = 16 + 14 + 1;
 const SIDEBAR_REM = 8 + 1;
 const SIDEBAR_BESIDE_REM = 40;
 function DocumentLayout({
   defaultSidebarOpen,
+  singleItem,
   defaultPanelOpen,
   download,
+  languages,
   headingLevel = 2,
   storageKey,
   panelLayout,
+  collapseControls,
   title
 }) {
   const t = useT();
@@ -88,38 +95,24 @@ function DocumentLayout({
     alongside: sidebarSpine,
     followFocus
   });
-  const pages = navigation.total > 1;
+  const pages = navigation.total > (singleItem ? 0 : 1);
   const showSidebar = pages && sidebar.open;
-  const panel = useDrawer({
+  const panel = useLazyPanelPane({
     id: `${id}-panel`,
     beside: useWideEnough(panes, BESIDE_REM + (showSidebar ? SIDEBAR_REM : 0)),
     defaultOpen: Boolean(defaultPanelOpen),
-    side: "end",
     followFocus
   });
-  const over = panel.over;
-  const [PanelPart, setPanelPart] = useState();
-  const loadPart = () => loadPanel().then((module) => setPanelPart(() => module.default));
-  useEffect(() => {
-    if (panel.open) void loadPart();
-  }, [panel.open]);
   const reach = (event) => {
     var _a, _b;
-    if (!PanelPart && ((_b = (_a = event.target).closest) == null ? void 0 : _b.call(_a, `[aria-controls~="${id}-panel"]`)))
-      void loadPart();
+    if (sidebar.over && ((_b = (_a = event.target).closest) == null ? void 0 : _b.call(_a, `[aria-controls~="${id}-sidebar"]`)))
+      preloadDrag();
   };
   const choose = () => {
     if (sidebar.over) sidebar.close();
   };
-  const docked = !over && panel.open;
-  const panelToggle = /* @__PURE__ */ jsx(
-    PanelToggle,
-    {
-      open: panel.open,
-      onOpenChange: (next) => next && !PanelPart ? loadPart().then(() => panel.setOpen(true)) : panel.setOpen(next),
-      controls: `${id}-panel`
-    }
-  );
+  const docked = panel.docked;
+  const panelToggle = panel.toggle;
   const toggle = pages && /* @__PURE__ */ jsxs(
     "button",
     {
@@ -162,7 +155,7 @@ function DocumentLayout({
         Label,
         {
           as: title.as,
-          className: "clover-template-document-title",
+          className: "clover-template-document-title clover-template-title clover-title",
           ...title.title
         }
       ),
@@ -177,14 +170,20 @@ function DocumentLayout({
         className: "clover-template-document-panes clover-template-panes",
         "data-sidebar": showSidebar ? "open" : "closed",
         "data-narrow": sidebar.over || void 0,
-        "data-panel": over ? "over" : "beside",
+        "data-panel": panel.splitProps["data-panel"],
         storageKey: storageKey || void 0,
         onKeyDown: (event) => {
           panel.onKeyDown(event);
           sidebar.onKeyDown(event);
         },
-        onPointerOver: reach,
-        onFocus: reach,
+        onPointerOver: (event) => {
+          panel.splitProps.onPointerOver(event);
+          reach(event);
+        },
+        onFocus: (event) => {
+          panel.splitProps.onFocus(event);
+          reach(event);
+        },
         children: [
           /* @__PURE__ */ jsxs(
             SplitPane,
@@ -193,7 +192,10 @@ function DocumentLayout({
               as: "aside",
               id: `${id}-sidebar`,
               name: "sidebar",
-              className: "clover-template-document-sidebar",
+              className: [
+                "clover-template-document-sidebar",
+                sidebar.over && "clover-template-float"
+              ].filter(Boolean).join(" "),
               "aria-label": sidebarLang ? void 0 : t("templateSidebar"),
               "aria-labelledby": sidebarLang ? `${id}-sidebar-name` : void 0,
               size: "13rem",
@@ -206,6 +208,7 @@ function DocumentLayout({
                   Items,
                   {
                     layout: "list",
+                    singleItem,
                     "aria-label": sidebarLang ? void 0 : t("templateSidebar"),
                     thumbnailSize: 320,
                     onSelect: choose
@@ -231,41 +234,19 @@ function DocumentLayout({
               min: showSidebar && !sidebar.over || docked ? PAGE_MIN : void 0,
               children: [
                 pages && !sidebar.open && /* @__PURE__ */ jsx("div", { className: "clover-template-document-sidebar-closed", children: toggle }),
-                /* @__PURE__ */ jsx(Sheets, { children: !docked && panelToggle })
+                /* @__PURE__ */ jsx(Sheets, { collapseControls, children: !docked && panelToggle })
               ]
             }
           ),
-          docked && /* @__PURE__ */ jsx(SplitHandle, { "aria-controls": `${id}-panel` }),
-          docked && /* @__PURE__ */ jsx("div", { className: "clover-template-document-spine", children: panelToggle }),
           /* @__PURE__ */ jsx(
-            SplitPane,
+            PanelPane,
             {
-              ref: panel.pane,
-              id: `${id}-panel`,
-              "data-spine": over || void 0,
-              name: "panel",
-              className: "clover-template-document-panel clover-template-drawer",
-              size: "24rem",
-              min: over ? void 0 : PANEL_MIN,
-              "data-open": panel.opened,
-              hidden: !panel.shown,
-              children: PanelPart && /* @__PURE__ */ jsx(
-                PanelPart,
-                {
-                  layout: panelLayout,
-                  headingLevel: below(headingLevel),
-                  download: false,
-                  onClose: over ? panel.close : void 0,
-                  closeOnEscape: over
-                }
-              )
-            }
-          ),
-          panel.scrim && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "clover-template-document-scrim clover-template-scrim",
-              ...panel.scrim
+              pane: panel,
+              className: "clover-template-document-panel",
+              layout: panelLayout,
+              headingLevel: below(headingLevel),
+              download: false,
+              languages
             }
           ),
           pages && sidebar.scrim && /* @__PURE__ */ jsx(

package/dist/templates/document/Sheets.mjs

@@ -13,9 +13,12 @@ const useLayout = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const ratioOf = (canvas) => {
   const width = Number(canvas == null ? void 0 : canvas.width);
   const height = Number(canvas == null ? void 0 : canvas.height);
-  return width > 0 && height > 0 ? width / height : 16 / 9;
+  return width > 0 && height > 0 ? width / height : void 0;
 };
-function Sheets({ children }) {
+function Sheets({
+  collapseControls,
+  children
+}) {
   const { clover } = useClover("Document");
   const sequence = useSequence();
   const navigation = useNavigation();
@@ -28,11 +31,13 @@ function Sheets({ children }) {
       var _a;
       const canvases = view.map((index) => sequence.canvases[index]);
       const shown = reversed ? [...canvases].reverse() : canvases;
+      const ratios = shown.map(ratioOf);
       return {
         key: canvases.map((canvas) => canvas.id).join("|"),
         first: (_a = canvases[0]) == null ? void 0 : _a.id,
         canvases: shown,
-        ratio: shown.reduce((sum, canvas) => sum + ratioOf(canvas), 0)
+        // None where one has no size: the sheet takes the column (`data-fill`).
+        ratio: ratios.every(Boolean) ? ratios.reduce((sum, ratio) => sum + ratio, 0) : void 0
       };
     }),
     [sequence, reversed]
@@ -289,8 +294,9 @@ function Sheets({ children }) {
                   "aria-hidden": "true",
                   className: "clover-template-document-sheet",
                   "data-active": index === position || void 0,
+                  "data-fill": sheet.ratio === void 0 || void 0,
                   onClick: () => index !== position && clover.goTo(sheet.first),
-                  style: { "--ratio": sheet.ratio },
+                  style: sheet.ratio === void 0 ? void 0 : { "--ratio": sheet.ratio },
                   children: sheet.canvases.map((canvas) => /* @__PURE__ */ jsx(Still, { canvas }, canvas.id))
                 },
                 sheet.key
@@ -300,6 +306,7 @@ function Sheets({ children }) {
               Body,
               {
                 className: "clover-template-document-body",
+                collapseControls,
                 onReady: setHandle,
                 children
               }
@@ -349,7 +356,8 @@ function Still({ canvas }) {
       current = false;
     };
   }, [source, clover, near]);
-  const style = { aspectRatio: String(ratioOf(canvas)) };
+  const ratio = ratioOf(canvas);
+  const style = ratio ? { aspectRatio: String(ratio) } : void 0;
   return src ? (
     // eslint-disable-next-line @next/next/no-img-element
     /* @__PURE__ */ jsx("img", { alt: "", decoding: "async", loading: "lazy", src, style })