@nulib/clover 4.0.0 → 4.2.0

package/dist/templates/default/Default.mjs

@@ -1,14 +1,13 @@
 "use client";
 import { jsx, jsxs, Fragment } 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 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 { 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";
@@ -18,11 +17,6 @@ import { Panel } from "../../components/Panel/Panel.mjs";
 import { useCloverSelector, useClover } from "../../react/context.mjs";
 import { useAnnotationCollection, useVisibleCanvases } from "../../react/hooks.mjs";
 import { Label } from "../../components/Label/Label.mjs";
-import { PanelToggle } from "../../components/Panel/PanelToggle.mjs";
-const BODY_MIN = "16rem";
-const PANEL_MIN = "14rem";
-const BESIDE_REM = 16 + 14 + 1;
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function Default({
   className,
   header = true,
@@ -30,88 +24,38 @@ function Default({
   panel = true,
   defaultPanelOpen,
   panelLayout = "accordion",
+  panelSections,
+  panelLabels,
   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(),
+    sections: panelSections,
+    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,
     {
@@ -124,20 +68,14 @@ 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 }),
@@ -153,59 +91,35 @@ function Default({
                     /* @__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,
-              {
-                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,
-                    languages,
-                    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",
+              PanelPane,
               {
-                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,
+                sections: panelSections,
+                labels: panelLabels,
+                download,
+                languages,
+                headingLevel: header ? below(headingLevel) : headingLevel
               }
             )
           ]
@@ -228,7 +142,7 @@ function HeaderTitle({ title }) {
       Label,
       {
         as: title.as,
-        className: "clover-template-default-title",
+        className: "clover-template-default-title clover-template-title clover-title",
         ...title.title
       }
     ),

package/dist/templates/document/Document.mjs

@@ -1,9 +1,12 @@
 "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";
@@ -18,17 +21,19 @@ 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",
+  panelSections,
+  panelLabels,
   download = true,
   languages = true,
   headingLevel = 2,
   storageKey = "clover-template-document",
+  collapseControls,
   ...root
 }) {
   const title = titled(
@@ -46,31 +51,36 @@ function Document({
         {
           title,
           defaultSidebarOpen,
+          singleItem,
           defaultPanelOpen,
           panelLayout,
+          panelSections,
+          panelLabels,
           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,
+  panelSections,
+  panelLabels,
+  collapseControls,
   title
 }) {
   const t = useT();
@@ -91,38 +101,25 @@ 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
+    followFocus,
+    sections: panelSections
   });
-  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",
     {
@@ -165,7 +162,7 @@ function DocumentLayout({
         Label,
         {
           as: title.as,
-          className: "clover-template-document-title",
+          className: "clover-template-document-title clover-template-title clover-title",
           ...title.title
         }
       ),
@@ -180,14 +177,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,
@@ -196,7 +199,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",
@@ -209,6 +215,7 @@ function DocumentLayout({
                   Items,
                   {
                     layout: "list",
+                    singleItem,
                     "aria-label": sidebarLang ? void 0 : t("templateSidebar"),
                     thumbnailSize: 320,
                     onSelect: choose
@@ -234,42 +241,21 @@ 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,
-            {
-              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,
-                  languages,
-                  onClose: over ? panel.close : void 0,
-                  closeOnEscape: over
-                }
-              )
-            }
-          ),
-          panel.scrim && /* @__PURE__ */ jsx(
-            "div",
+            PanelPane,
             {
-              className: "clover-template-document-scrim clover-template-scrim",
-              ...panel.scrim
+              pane: panel,
+              className: "clover-template-document-panel",
+              layout: panelLayout,
+              sections: panelSections,
+              labels: panelLabels,
+              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 })