@nulib/clover 0.0.0-stage → 4.0.0-beta.1

package/dist/templates/document/Document.mjs

@@ -0,0 +1,286 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { useDrawer } from "../shared/useDrawer.mjs";
+import { useFollowFocus } from "../shared/useFollowFocus.mjs";
+import { useWideEnough } 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 { Tip } from "../../ui/Tip.mjs";
+import { Label } from "../../components/Label/Label.mjs";
+import { Download } from "../../components/Download/Download.mjs";
+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,
+  defaultPanelOpen = false,
+  panelLayout = "accordion",
+  download = true,
+  headingLevel = 2,
+  storageKey = "clover-template-document",
+  ...root
+}) {
+  const title = titled(
+    headingLevel,
+    `${useUniqueId().replace(/:/g, "")}-title`
+  );
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      className: ["clover-template-document", className].filter(Boolean).join(" "),
+      ...title.group,
+      ...root,
+      children: /* @__PURE__ */ jsx(
+        DocumentLayout,
+        {
+          title,
+          defaultSidebarOpen,
+          defaultPanelOpen,
+          panelLayout,
+          download,
+          headingLevel,
+          storageKey
+        }
+      )
+    }
+  );
+}
+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,
+  defaultPanelOpen,
+  download,
+  headingLevel = 2,
+  storageKey,
+  panelLayout,
+  title
+}) {
+  const t = useT();
+  const langOf = useLangOf();
+  const sidebarLang = langOf("templateSidebar");
+  const id = useUniqueId().replace(/:/g, "");
+  const navigation = useNavigation();
+  const panes = useRef(null);
+  const sidebarSpine = useRef(null);
+  const followFocus = useFollowFocus();
+  const sidebar = useDrawer({
+    id: `${id}-sidebar`,
+    beside: useWideEnough(panes, SIDEBAR_BESIDE_REM),
+    defaultOpen: defaultSidebarOpen ?? true,
+    side: "start",
+    focus: (pane) => pane.querySelector('[role="option"][aria-selected="true"]'),
+    slides: false,
+    alongside: sidebarSpine,
+    followFocus
+  });
+  const pages = navigation.total > 1;
+  const showSidebar = pages && sidebar.open;
+  const panel = useDrawer({
+    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();
+  };
+  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 toggle = pages && /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "clover-template-document-sidebar-toggle",
+      "aria-expanded": sidebar.open,
+      "aria-controls": `${id}-sidebar`,
+      lang: langOf("templateSidebarToggle"),
+      onClick: () => sidebar.setOpen(!sidebar.open),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            "aria-hidden": "true",
+            focusable: "false",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: sidebar.open ? "currentColor" : "none",
+            stroke: "currentColor",
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("rect", { x: "1.5", y: "2", width: "5.5", height: "4.5", rx: "1" }),
+              /* @__PURE__ */ jsx("rect", { x: "1.5", y: "9.5", width: "5.5", height: "4.5", rx: "1" }),
+              /* @__PURE__ */ jsx("path", { d: "M9.5 4.25h5M9.5 11.75h5", fill: "none" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: visuallyHidden, children: t("templateSidebarToggle") }),
+        /* @__PURE__ */ jsx(Position, { className: "clover-template-document-position" }),
+        /* @__PURE__ */ jsx(Tip, { label: t("templateSidebarToggle") })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { className: "clover-template-document-toolbar", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          as: title.as,
+          className: "clover-template-document-title",
+          ...title.title
+        }
+      ),
+      download && /* @__PURE__ */ jsx(Download, { headingLevel: below(headingLevel) }),
+      /* @__PURE__ */ jsx(Provider, { className: "clover-template-document-provider", children: /* @__PURE__ */ jsx(Logo, {}) })
+    ] }),
+    /* @__PURE__ */ jsx(Status, { loading: false }),
+    /* @__PURE__ */ jsxs(
+      Split,
+      {
+        ref: panes,
+        className: "clover-template-document-panes clover-template-panes",
+        "data-sidebar": showSidebar ? "open" : "closed",
+        "data-narrow": sidebar.over || void 0,
+        "data-panel": over ? "over" : "beside",
+        storageKey: storageKey || void 0,
+        onKeyDown: (event) => {
+          panel.onKeyDown(event);
+          sidebar.onKeyDown(event);
+        },
+        onPointerOver: reach,
+        onFocus: reach,
+        children: [
+          /* @__PURE__ */ jsxs(
+            SplitPane,
+            {
+              ref: sidebar.pane,
+              as: "aside",
+              id: `${id}-sidebar`,
+              name: "sidebar",
+              className: "clover-template-document-sidebar",
+              "aria-label": sidebarLang ? void 0 : t("templateSidebar"),
+              "aria-labelledby": sidebarLang ? `${id}-sidebar-name` : void 0,
+              size: "13rem",
+              min: sidebar.over ? void 0 : "8rem",
+              max: "24rem",
+              hidden: !showSidebar,
+              children: [
+                sidebarLang && /* @__PURE__ */ jsx("span", { hidden: true, id: `${id}-sidebar-name`, lang: sidebarLang, children: t("templateSidebar") }),
+                /* @__PURE__ */ jsx(
+                  Items,
+                  {
+                    layout: "list",
+                    "aria-label": sidebarLang ? void 0 : t("templateSidebar"),
+                    thumbnailSize: 320,
+                    onSelect: choose
+                  }
+                )
+              ]
+            }
+          ),
+          showSidebar && !sidebar.over && /* @__PURE__ */ jsx(SplitHandle, { "aria-controls": `${id}-sidebar` }),
+          showSidebar && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: sidebarSpine,
+              className: "clover-template-document-spine",
+              "data-for": "sidebar",
+              children: toggle
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            SplitPane,
+            {
+              className: "clover-template-document-main",
+              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 })
+              ]
+            }
+          ),
+          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,
+                  onClose: over ? panel.close : void 0,
+                  closeOnEscape: over
+                }
+              )
+            }
+          ),
+          panel.scrim && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "clover-template-document-scrim clover-template-scrim",
+              ...panel.scrim
+            }
+          ),
+          pages && sidebar.scrim && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "clover-template-document-scrim clover-template-scrim",
+              "data-for": "sidebar",
+              ...sidebar.scrim
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  Document
+};

package/dist/templates/document/DocumentPanel.mjs

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

package/dist/templates/document/Sheets.mjs

@@ -0,0 +1,360 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useMemo, useEffect, useLayoutEffect, useState } from "react";
+import { useClover } from "../../react/context.mjs";
+import { useSequence, useNavigation } from "../../react/hooks.mjs";
+import { Body } from "../../components/Body/Body.mjs";
+import { stillSource, resolveThumbnail } from "../../core/thumbnail.mjs";
+const STILL_SIZE = 1600;
+const SETTLE_MS = 200;
+const THRESHOLD = 0.25;
+const REVEAL_MS = 1500;
+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;
+};
+function Sheets({ children }) {
+  const { clover } = useClover("Document");
+  const sequence = useSequence();
+  const navigation = useNavigation();
+  const column = useRef(null);
+  const sheetsBox = useRef(null);
+  const live = useRef(null);
+  const reversed = sequence.direction === "right-to-left" || sequence.direction === "bottom-to-top";
+  const sheets = useMemo(
+    () => sequence.views.map((view) => {
+      var _a;
+      const canvases = view.map((index) => sequence.canvases[index]);
+      const shown = reversed ? [...canvases].reverse() : canvases;
+      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)
+      };
+    }),
+    [sequence, reversed]
+  );
+  const position = Math.max(0, navigation.position);
+  const latest = useRef({ sheets, position });
+  latest.current = { sheets, position };
+  const followed = useRef(null);
+  const aiming = useRef(null);
+  const rested = useRef(0);
+  const stopReveal = useRef(() => void 0);
+  const quiet = useRef(false);
+  const sheetAt = (index) => {
+    var _a;
+    return (_a = sheetsBox.current) == null ? void 0 : _a.children[index];
+  };
+  const placeOf = (index) => {
+    const element = column.current;
+    const sheet = sheetAt(index);
+    if (!element || !sheet || sheet === live.current) return 0;
+    return Math.min(
+      sheet.offsetTop,
+      element.scrollHeight - element.clientHeight
+    );
+  };
+  const place = () => {
+    const layer = live.current;
+    const sheet = sheetAt(latest.current.position);
+    if (!layer) return;
+    if (!sheet || sheet === layer) {
+      layer.style.top = "0px";
+      layer.style.height = "100%";
+      return;
+    }
+    layer.style.top = `${sheet.offsetTop}px`;
+    layer.style.height = `${sheet.offsetHeight}px`;
+  };
+  function pin() {
+    const element = column.current;
+    if (!element || element.hasAttribute("data-scrolling") || aiming.current !== null)
+      return;
+    const top = placeOf(latest.current.position);
+    rested.current = top;
+    if (Math.abs(element.scrollTop - top) <= 1) return;
+    quiet.current = true;
+    element.scrollTop = top;
+    requestAnimationFrame(
+      () => requestAnimationFrame(() => quiet.current = false)
+    );
+  }
+  useLayout(place);
+  useEffect(() => {
+    const resized = new ResizeObserver(() => {
+      place();
+      pin();
+    });
+    if (sheetsBox.current) resized.observe(sheetsBox.current);
+    if (column.current) resized.observe(column.current);
+    return () => resized.disconnect();
+  }, []);
+  const hold = () => {
+    stopReveal.current();
+    for (const [element, name] of [
+      [column.current, "data-scrolling"],
+      [live.current, "data-moved"]
+    ])
+      if (element && !element.hasAttribute(name))
+        element.setAttribute(name, "");
+  };
+  const reveal = () => {
+    const element = column.current;
+    const layer = live.current;
+    if (!element || !layer) return;
+    stopReveal.current();
+    rested.current = element.scrollTop;
+    const drawn = () => {
+      const figure = layer.querySelector(".clover-canvas");
+      return !figure || figure.getAttribute("data-status") !== "loading" || figure.getAttribute("data-placeholder") === "true";
+    };
+    let frame = 0;
+    const watch = new MutationObserver(() => drawn() && show());
+    const late = setTimeout(() => show(), REVEAL_MS);
+    const stop = () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(late);
+      watch.disconnect();
+    };
+    const show = () => {
+      stop();
+      layer.removeAttribute("data-moved");
+      element.removeAttribute("data-scrolling");
+    };
+    stopReveal.current = stop;
+    frame = requestAnimationFrame(() => {
+      frame = requestAnimationFrame(() => {
+        if (drawn()) return show();
+        watch.observe(layer, {
+          attributes: true,
+          subtree: true,
+          attributeFilter: ["data-status", "data-placeholder"]
+        });
+      });
+    });
+  };
+  const bring = (index, instantly = false) => {
+    var _a;
+    const element = column.current;
+    if (!element) return;
+    const top = placeOf(index);
+    if (Math.abs(element.scrollTop - top) <= 1) return reveal();
+    hold();
+    aiming.current = index;
+    const still = instantly || ((_a = window.matchMedia) == null ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
+    element.scrollTo({ top, behavior: still ? "auto" : "smooth" });
+  };
+  const shownSheets = useRef(null);
+  useLayout(() => {
+    const fresh = shownSheets.current !== sheets;
+    shownSheets.current = sheets;
+    zoom(false);
+    if (followed.current === position && !fresh) {
+      followed.current = null;
+      return;
+    }
+    followed.current = null;
+    bring(position, fresh);
+  }, [position, sheets]);
+  useEffect(() => {
+    const element = column.current;
+    if (!element) return;
+    let frame = 0;
+    let rest;
+    let held = false;
+    const choose = (top) => {
+      const count = latest.current.sheets.length;
+      if (count < 2) return 0;
+      let at = 0;
+      for (let index = 0; index < count; index++) {
+        if (placeOf(index) <= top + 0.5) at = index;
+        else break;
+      }
+      if (at >= count - 1) return count - 1;
+      const from = placeOf(at);
+      const share = (top - from) / Math.max(1, placeOf(at + 1) - from);
+      return top >= rested.current ? share > THRESHOLD ? at + 1 : at : share < 1 - THRESHOLD ? at : at + 1;
+    };
+    const follow = () => {
+      frame = 0;
+      if (aiming.current !== null) return;
+      const index = choose(element.scrollTop);
+      const { sheets: sheets2, position: position2 } = latest.current;
+      if (index === position2 || !sheets2[index]) return;
+      hold();
+      zoom(false);
+      followed.current = index;
+      clover.goTo(sheets2[index].first);
+    };
+    const settle = () => {
+      if (held) return;
+      const { sheets: sheets2, position: position2 } = latest.current;
+      const top = element.scrollTop;
+      const aimed = aiming.current;
+      aiming.current = null;
+      const target = aimed !== null && Math.abs(top - placeOf(aimed)) <= 1 ? aimed : choose(top);
+      if (!sheets2[target]) return reveal();
+      if (target !== position2) {
+        hold();
+        zoom(false);
+        followed.current = target;
+        clover.goTo(sheets2[target].first);
+      }
+      bring(target);
+    };
+    const later = () => {
+      clearTimeout(rest);
+      rest = setTimeout(settle, SETTLE_MS);
+    };
+    const onScroll = () => {
+      if (quiet.current) return;
+      hold();
+      later();
+      if (!frame) frame = requestAnimationFrame(follow);
+    };
+    const take = (event) => {
+      aiming.current = null;
+      if (event.type === "touchstart" || event.type === "pointerdown" && event.target === element)
+        held = true;
+    };
+    const release = () => {
+      if (!held) return;
+      held = false;
+      later();
+    };
+    element.addEventListener("scroll", onScroll, { passive: true });
+    element.addEventListener("wheel", take, { passive: true });
+    element.addEventListener("touchstart", take, { passive: true });
+    element.addEventListener("pointerdown", take);
+    window.addEventListener("touchend", release);
+    window.addEventListener("touchcancel", release);
+    window.addEventListener("pointerup", release);
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(rest);
+      stopReveal.current();
+      element.removeEventListener("scroll", onScroll);
+      element.removeEventListener("wheel", take);
+      element.removeEventListener("touchstart", take);
+      element.removeEventListener("pointerdown", take);
+      window.removeEventListener("touchend", release);
+      window.removeEventListener("touchcancel", release);
+      window.removeEventListener("pointerup", release);
+    };
+  }, [clover]);
+  const [handle, setHandle] = useState(null);
+  function zoom(zoomed) {
+    const element = column.current;
+    if (!element || element.hasAttribute("data-zoomed") === zoomed) return;
+    element.toggleAttribute("data-zoomed", zoomed);
+    if (zoomed) pin();
+  }
+  useEffect(() => {
+    if (!handle) return;
+    return handle.on("viewport", () => zoom(!handle.atHome));
+  }, [handle]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: column,
+      className: "clover-template-document-column",
+      onKeyDown: (event) => {
+        if (event.defaultPrevented || event.altKey || event.ctrlKey) return;
+        if (event.key === "PageDown" && navigation.hasNext) navigation.next();
+        else if (event.key === "PageUp" && navigation.hasPrevious)
+          navigation.previous();
+        else return;
+        event.preventDefault();
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: sheetsBox,
+          className: "clover-template-document-sheets",
+          "data-single": sheets.length < 2 || void 0,
+          children: [
+            sheets.map((sheet, index) => (
+              /*
+               * A press on a sheet not active brings it to the top: a pointer's way, beside
+               * the thumbnails, the pager and PageUp and PageDown, which a keyboard has.
+               */
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "clover-template-document-sheet",
+                  "data-active": index === position || void 0,
+                  onClick: () => index !== position && clover.goTo(sheet.first),
+                  style: { "--ratio": sheet.ratio },
+                  children: sheet.canvases.map((canvas) => /* @__PURE__ */ jsx(Still, { canvas }, canvas.id))
+                },
+                sheet.key
+              )
+            )),
+            /* @__PURE__ */ jsx("div", { ref: live, className: "clover-template-document-live", children: /* @__PURE__ */ jsx(
+              Body,
+              {
+                className: "clover-template-document-body",
+                onReady: setHandle,
+                children
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+function useNearColumn(element) {
+  const [near, setNear] = useState(
+    () => typeof IntersectionObserver === "undefined"
+  );
+  useEffect(() => {
+    if (near || !element) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+        setNear(true);
+        observer.disconnect();
+      },
+      {
+        root: element.closest(".clover-template-document-column"),
+        rootMargin: "100% 0px"
+      }
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element, near]);
+  return near;
+}
+function Still({ canvas }) {
+  const { clover } = useClover("Document");
+  const source = useMemo(() => stillSource(canvas), [canvas]);
+  const [page, setPage] = useState(null);
+  const near = useNearColumn(page);
+  const [src, setSrc] = useState(source == null ? void 0 : source.src);
+  useEffect(() => {
+    if (!source || source.src) return setSrc(source == null ? void 0 : source.src);
+    if (!near) return;
+    let current = true;
+    void resolveThumbnail(source, STILL_SIZE, clover.request).then(
+      (url) => current && setSrc(url)
+    );
+    return () => {
+      current = false;
+    };
+  }, [source, clover, near]);
+  const style = { aspectRatio: String(ratioOf(canvas)) };
+  return src ? (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx("img", { alt: "", decoding: "async", loading: "lazy", src, style })
+  ) : /* @__PURE__ */ jsx("span", { ref: setPage, style });
+}
+export {
+  Sheets
+};