@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/templates/shared/Lightbox.mjs

@@ -1,107 +1,199 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useEffect, Suspense, lazy } from "react";
-import { useT, useLangOf, useLocalized, useActiveCanvas } from "../../react/hooks.mjs";
+import { useGivenAnnotations } from "./givenAnnotations.mjs";
+import { useT, useLangOf, useLocalized, useManifest } from "../../react/hooks.mjs";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { Label } from "../../components/Label/Label.mjs";
 import { titled } from "../../ui/heading.mjs";
 import { Tip } from "../../ui/Tip.mjs";
-import { Items } from "../../components/Items/Items.mjs";
-const load = () => import("./LightboxBody.mjs");
-const LightboxBody = lazy(load);
+import { useCloverSelector } from "../../react/context.mjs";
+const load = () => import("./LightboxView.mjs");
+const LightboxView = lazy(load);
 const preloadLightbox = () => void load();
 function Lightbox({
   open,
   onClose,
   headingLevel = 3,
-  className
+  items = "slider",
+  className,
+  ...view
 }) {
   var _a;
   const t = useT();
   const langOf = useLangOf();
-  const dialog = useRef(null);
+  const layer = useRef(null);
+  const panel = useRef(null);
+  const close = useRef(null);
   const baseId = useUniqueId().replace(/:/g, "");
   const titleId = `${baseId}-title`;
-  const manifestTitleId = `${baseId}-manifest`;
-  const canvasLabel = useLocalized((_a = useActiveCanvas()) == null ? void 0 : _a.label);
-  const named = canvasLabel.text ? titleId : manifestTitleId;
+  const viewTitleId = `${baseId}-view`;
+  const manifestLabel = useLocalized((_a = useManifest()) == null ? void 0 : _a.label);
+  const named = manifestLabel.text ? titleId : viewTitleId;
+  const given = Boolean(useGivenAnnotations());
+  const closing = useRef(onClose);
+  closing.current = onClose;
   useEffect(() => {
-    var _a2;
-    const element = dialog.current;
-    if (!element) return;
-    if (open && !element.open) (_a2 = element.showModal) == null ? void 0 : _a2.call(element);
-    if (!open && element.open) element.close();
+    var _a2, _b, _c, _d;
+    const element = layer.current;
+    const root = element == null ? void 0 : element.parentElement;
+    if (!open || !element || !root) return;
+    const opener = element.ownerDocument.activeElement;
+    const others = Array.from(root.children).filter(
+      (child) => child !== element && !child.classList.contains("clover-announcer")
+    );
+    others.forEach((child) => child.inert = true);
+    (_b = (_a2 = panel.current) == null ? void 0 : _a2.scrollIntoView) == null ? void 0 : _b.call(_a2, { block: "nearest" });
+    const chosen = (_c = panel.current) == null ? void 0 : _c.querySelector(
+      '[role="listbox"] [role="option"][aria-selected="true"]'
+    );
+    (_d = chosen ?? close.current) == null ? void 0 : _d.focus({ preventScroll: true });
+    return () => {
+      others.forEach((child) => child.inert = false);
+      if (opener == null ? void 0 : opener.isConnected) opener.focus({ preventScroll: true });
+    };
   }, [open]);
   return /* @__PURE__ */ jsx(
-    "dialog",
+    "div",
     {
-      ref: dialog,
+      ref: layer,
       className: ["clover-template-lightbox", className].filter(Boolean).join(" "),
-      "aria-labelledby": named,
-      onClose,
+      hidden: !open,
       onClick: (event) => {
-        if (event.target === dialog.current) onClose();
+        if (event.target === layer.current) onClose();
       },
-      children: open && /* @__PURE__ */ jsxs("div", { className: "clover-template-lightbox-content", children: [
-        /* @__PURE__ */ jsxs("header", { className: "clover-template-lightbox-header", children: [
-          /* @__PURE__ */ jsx(
-            Label,
-            {
-              of: "canvas",
-              as: titled(headingLevel, titleId).as,
-              id: titleId,
-              className: "clover-template-lightbox-title"
-            }
-          ),
-          named === manifestTitleId && /* @__PURE__ */ jsx(Label, { id: manifestTitleId, hidden: true }),
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: "clover-template-lightbox-close",
-              "aria-label": t("commonClose"),
-              lang: langOf("commonClose"),
-              onClick: onClose,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    "aria-hidden": "true",
-                    focusable: "false",
-                    width: "16",
-                    height: "16",
-                    viewBox: "0 0 16 16",
-                    children: /* @__PURE__ */ jsx(
-                      "path",
+      onKeyDown: (event) => {
+        if (event.key !== "Escape" || event.defaultPrevented) return;
+        event.preventDefault();
+        closing.current();
+      },
+      children: open && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panel,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": named,
+          className: "clover-template-lightbox-content",
+          children: [
+            /* @__PURE__ */ jsxs("header", { className: "clover-template-lightbox-header", children: [
+              /* @__PURE__ */ jsx(Back, { onOut: onClose }),
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  as: titled(headingLevel, titleId).as,
+                  id: titleId,
+                  className: "clover-template-lightbox-title clover-template-title clover-title"
+                }
+              ),
+              named === viewTitleId && /* @__PURE__ */ jsx(Label, { of: "canvas", id: viewTitleId, hidden: true }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  ref: close,
+                  type: "button",
+                  className: "clover-template-lightbox-close",
+                  "aria-label": t("commonClose"),
+                  lang: langOf("commonClose"),
+                  onClick: onClose,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "svg",
                       {
-                        d: "M3 3l10 10M13 3L3 13",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        strokeLinecap: "round"
+                        "aria-hidden": "true",
+                        focusable: "false",
+                        width: "16",
+                        height: "16",
+                        viewBox: "0 0 16 16",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            d: "M3 3l10 10M13 3L3 13",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round"
+                          }
+                        )
                       }
-                    )
+                    ),
+                    /* @__PURE__ */ jsx(Tip, { label: t("commonClose") })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Suspense,
+              {
+                fallback: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "clover-template-lightbox-body clover-template-lightbox-pending",
+                    "aria-busy": "true"
                   }
                 ),
-                /* @__PURE__ */ jsx(Tip, { label: t("commonClose") })
-              ]
-            }
-          )
-        ] }),
+                children: /* @__PURE__ */ jsx(
+                  LightboxView,
+                  {
+                    id: baseId,
+                    annotations: given,
+                    items,
+                    headingLevel,
+                    ...view
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function Back({ onOut }) {
+  const t = useT();
+  const langOf = useLangOf();
+  const collection = useCloverSelector(
+    (state) => state.throughCollection ? state.collection : null
+  );
+  const set = useGivenAnnotations();
+  const manifest = useManifest();
+  const above = useLocalized(
+    set ? set.label : (collection == null ? void 0 : collection.label) ?? (manifest == null ? void 0 : manifest.label)
+  );
+  const key = above.text ? "templateBackTo" : "templateBack";
+  const label = t(key, { label: above.text });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "clover-template-lightbox-back",
+      "aria-label": label,
+      lang: langOf(key),
+      onClick: onOut,
+      children: [
         /* @__PURE__ */ jsx(
-          Suspense,
+          "svg",
           {
-            fallback: /* @__PURE__ */ jsx(
-              "div",
+            "aria-hidden": "true",
+            focusable: "false",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            children: /* @__PURE__ */ jsx(
+              "path",
               {
-                className: "clover-template-lightbox-body clover-template-lightbox-pending",
-                "aria-busy": "true"
+                d: "M10 3L5 8l5 5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
-            ),
-            children: /* @__PURE__ */ jsx(LightboxBody, {})
+            )
           }
         ),
-        /* @__PURE__ */ jsx(Items, { layout: "pager" })
-      ] })
+        /* @__PURE__ */ jsx(Tip, { label, lang: langOf(key) })
+      ]
     }
   );
 }

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
+};