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

package/dist/components/Panel/About.mjs

@@ -0,0 +1,143 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect, Suspense, lazy } from "react";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { isLoneCanvas } from "../../core/load.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useCloverSelector } from "../../react/context.mjs";
+import { Thumbnail, Summary, Metadata, RequiredStatement, Rights, Homepage, SeeAlso, Id } from "../Primitives/Primitives.mjs";
+import { useDownloads, DownloadGroups } from "../Download/Download.mjs";
+import { Provider } from "../Provider/Provider.mjs";
+import { titleTag, titled } from "../../ui/heading.mjs";
+import { Label } from "../Label/Label.mjs";
+const PartOfManifest = lazy(() => import("./PartOfManifest.mjs"));
+function About({
+  canvasSummary = false,
+  headingLevel = 3,
+  download = true,
+  thumbnail = true,
+  label = true,
+  className,
+  ...rest
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const downloads = useDownloads();
+  const manifest = useCloverSelector(
+    (state) => state.manifest,
+    Object.is,
+    "About"
+  );
+  const root = useRef(null);
+  useEffect(() => {
+    const about = root.current;
+    const image = about == null ? void 0 : about.querySelector(".clover-about-thumbnail");
+    if (!about || !image || typeof ResizeObserver === "undefined") return;
+    const heading = about.querySelector(".clover-about-label");
+    const write = () => {
+      about.style.setProperty(
+        "--clover-about-label-height",
+        `${(heading == null ? void 0 : heading.offsetHeight) ?? 0}px`
+      );
+      about.style.setProperty(
+        "--clover-about-thumbnail-width",
+        `${image.offsetWidth}px`
+      );
+    };
+    const observer = new ResizeObserver(write);
+    observer.observe(image);
+    if (heading) observer.observe(heading);
+    return () => {
+      observer.disconnect();
+      about.style.removeProperty("--clover-about-label-height");
+      about.style.removeProperty("--clover-about-thumbnail-width");
+    };
+  }, [label, thumbnail, manifest]);
+  const id = useUniqueId();
+  const onOpened = () => {
+    var _a, _b;
+    const about = root.current;
+    const heading = (_a = about == null ? void 0 : about.closest(".clover-sections-item")) == null ? void 0 : _a.querySelector(".clover-sections-button");
+    (_b = heading ?? about) == null ? void 0 : _b.focus({ preventScroll: true });
+  };
+  if (!manifest) return null;
+  const section = (titleKey, has, part) => {
+    if (!has) return null;
+    const {
+      as: Title,
+      title,
+      group
+    } = titled(headingLevel, `${id}-${titleKey}`);
+    return /* @__PURE__ */ jsxs("section", { className: "clover-about-section", ...group, children: [
+      /* @__PURE__ */ jsx(
+        Title,
+        {
+          className: "clover-about-heading",
+          lang: langOf(titleKey),
+          ...title,
+          children: t(titleKey)
+        }
+      ),
+      part
+    ] });
+  };
+  const hasAny = (key) => Array.isArray(manifest[key]) ? manifest[key].length > 0 : Boolean(manifest[key]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      className: join("clover-about", className),
+      tabIndex: -1,
+      ...rest,
+      children: [
+        (thumbnail || label) && /* @__PURE__ */ jsxs("div", { className: "clover-about-head", children: [
+          thumbnail && /* @__PURE__ */ jsx(
+            Thumbnail,
+            {
+              className: "clover-about-thumbnail",
+              size: 256,
+              alt: label ? "" : void 0
+            }
+          ),
+          label && /* @__PURE__ */ jsx(Label, { as: titleTag(headingLevel), className: "clover-about-label" })
+        ] }),
+        canvasSummary && /* @__PURE__ */ jsx(Summary, { of: "canvas", className: "clover-about-summary" }),
+        isLoneCanvas(manifest) && manifest.partOf && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          PartOfManifest,
+          {
+            manifest,
+            headingLevel,
+            onOpened
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Summary, { className: "clover-about-summary" }),
+        /* @__PURE__ */ jsx(Metadata, { className: "clover-about-metadata" }),
+        /* @__PURE__ */ jsx(RequiredStatement, { className: "clover-about-metadata" }),
+        section("aboutProvider", hasAny("provider"), /* @__PURE__ */ jsx(Provider, {})),
+        section("aboutRights", manifest.rights, /* @__PURE__ */ jsx(Rights, {})),
+        section("aboutHomepage", hasAny("homepage"), /* @__PURE__ */ jsx(Homepage, {})),
+        section("aboutSeeAlso", hasAny("seeAlso"), /* @__PURE__ */ jsx(SeeAlso, {})),
+        section(
+          "download",
+          download && downloads.page.length + downloads.all.length > 0,
+          /* @__PURE__ */ jsx(
+            DownloadGroups,
+            {
+              page: downloads.page,
+              all: downloads.all,
+              headingLevel: headingLevel + 1
+            }
+          )
+        ),
+        section(
+          isLoneCanvas(manifest) ? "aboutCanvas" : "aboutManifest",
+          manifest.id,
+          /* @__PURE__ */ jsx(Id, {})
+        )
+      ]
+    }
+  );
+}
+export {
+  About
+};

package/dist/components/Panel/Panel.mjs

@@ -0,0 +1,259 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useRef, useState, useEffect, Suspense, lazy } from "react";
+import { About } from "./About.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+import { Close } from "../Body/glyphs.mjs";
+import { canvasCaptions, canvasTextTranscripts } from "../Canvas/layout.mjs";
+import { SEARCH_SET_ID, searchServiceOf } from "../../core/search-service.mjs";
+import { hasMapData } from "../../core/geo-detect.mjs";
+import { tableOfContents } from "../../core/ranges.mjs";
+import { partOfCollection, selectVisibleCanvases } from "../../core/selectors.mjs";
+import { selectListedSets } from "../../core/annotation-sets.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { Sections } from "../../ui/Sections.mjs";
+import { useContainerName } from "../../ui/useContainerName.mjs";
+const RootMap = lazy(
+  () => import("../Map/MapView.mjs").then((module) => ({ default: module.RootMap }))
+);
+const Collection = lazy(
+  () => import("../Collection/Collection.mjs").then((m) => ({ default: m.Collection }))
+);
+const Contents = lazy(
+  () => import("../Contents/Contents.mjs").then((m) => ({ default: m.Contents }))
+);
+const Search = lazy(
+  () => import("../Search/Search.mjs").then((m) => ({ default: m.Search }))
+);
+const Transcript = lazy(
+  () => import("../Transcript/Transcript.mjs").then((m) => ({ default: m.Transcript }))
+);
+const Annotations = lazy(
+  () => import("../Annotations/Annotations.mjs").then((m) => ({
+    default: m.Annotations
+  }))
+);
+const later = (content) => /* @__PURE__ */ jsx(Suspense, { fallback: null, children: content });
+const Tab = () => null;
+const Panel = forwardRef(function Panel2({
+  layout = "tabs",
+  value,
+  defaultValue,
+  onValueChange,
+  onClose,
+  closeOnEscape = false,
+  headingLevel = 3,
+  as: Tag = "aside",
+  download = true,
+  className,
+  children,
+  onKeyDown,
+  ...rest
+}, ref) {
+  var _a;
+  const { clover } = useClover("Panel");
+  const element = useRef(null);
+  const { t, langOf } = useCloverTranslation();
+  const name = useContainerName(
+    t("informationPanelTabs"),
+    langOf("informationPanelTabs"),
+    Boolean(rest["aria-label"] || rest["aria-labelledby"]) || !(["aside", "section", "nav"].includes(Tag) || rest.role)
+  );
+  const tabLabel = (key) => {
+    const lang = langOf(key);
+    return lang ? /* @__PURE__ */ jsx("span", { lang, children: t(key) }) : t(key);
+  };
+  const hasAnnotations = useCloverSelector(
+    (state) => selectListedSets(state.manifest, state.addedSets).length > 0
+  );
+  const hasTranscript = useCloverSelector(
+    (state) => selectVisibleCanvases(
+      state.manifest,
+      state.canvasId
+    ).some(
+      (canvas) => canvasCaptions(canvas).length > 0 || canvasTextTranscripts(canvas).length > 0
+    )
+  );
+  const hasContents = useCloverSelector(
+    (state) => tableOfContents(state.manifest).length > 0
+  );
+  const hasSearch = useCloverSelector(
+    (state) => Boolean(searchServiceOf(state.manifest))
+  );
+  const hasMap = useCloverSelector(
+    (state) => hasMapData(state.manifest, state.collection)
+  );
+  const hasCollection = useCloverSelector(
+    (state) => {
+      var _a2, _b;
+      return (((_b = (_a2 = state.collection) == null ? void 0 : _a2.items) == null ? void 0 : _b.length) ?? 0) > 0 || Boolean(partOfCollection(state.manifest));
+    }
+  );
+  const given = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type === Tab
+  );
+  const inner = layout === "accordion" ? headingLevel + 1 : headingLevel;
+  const tabs = given.length ? given.map(({ props }) => ({
+    value: props.value,
+    label: props.label,
+    content: props.children
+  })) : [
+    {
+      value: "about",
+      label: tabLabel("informationPanelTabsAbout"),
+      content: /* @__PURE__ */ jsx(About, { headingLevel: inner, download })
+    },
+    ...hasCollection ? [
+      {
+        value: "collection",
+        label: tabLabel("informationPanelTabsCollection"),
+        content: later(/* @__PURE__ */ jsx(Collection, { headingLevel: inner }))
+      }
+    ] : [],
+    ...hasContents ? [
+      {
+        value: "contents",
+        label: tabLabel("informationPanelTabsContents"),
+        content: later(/* @__PURE__ */ jsx(Contents, {}))
+      }
+    ] : [],
+    ...hasSearch ? [
+      {
+        value: "search",
+        label: tabLabel("informationPanelTabsSearch"),
+        // Its field small and held as the hits scroll (Mat, 2026-10-26).
+        content: later(
+          /* @__PURE__ */ jsx(Search, { headingLevel: inner, sticky: true, size: "small" })
+        )
+      }
+    ] : [],
+    ...hasMap ? [
+      {
+        value: "map",
+        label: tabLabel("informationPanelTabsMap"),
+        content: later(/* @__PURE__ */ jsx(RootMap, {}))
+      }
+    ] : [],
+    ...hasTranscript ? [
+      {
+        value: "transcript",
+        label: tabLabel("transcriptLabel"),
+        // Its find field small and held as the cues scroll, as Search's.
+        content: later(/* @__PURE__ */ jsx(Transcript, { sticky: true, size: "small" }))
+      }
+    ] : [],
+    ...hasAnnotations ? [
+      {
+        value: "annotations",
+        label: tabLabel("informationPanelTabsAnnotations"),
+        // Every Canvas's, by Canvas, those in view kept in sight.
+        content: later(/* @__PURE__ */ jsx(Annotations, { headingLevel: inner }))
+      }
+    ] : []
+  ];
+  const query = useCloverSelector((state) => state.search.query);
+  const searchable = tabs.some((tab) => tab.value === "search");
+  const [own, setOwn] = useState(
+    () => query && searchable ? "search" : defaultValue ?? null
+  );
+  const asked = useRef(query && searchable ? query : "");
+  useEffect(() => {
+    if (!searchable) return;
+    if (query && query !== asked.current && value === void 0)
+      setOwn("search");
+    asked.current = query;
+  }, [query, searchable, value]);
+  const shown = value !== void 0 ? value : own;
+  const searchOpen = (tabs.some((tab) => tab.value === shown) ? shown : (_a = tabs[0]) == null ? void 0 : _a.value) === "search";
+  useEffect(() => {
+    if (searchable) clover.setSetVisible(SEARCH_SET_ID, searchOpen);
+  }, [clover, searchable, searchOpen]);
+  if (!tabs.length) return null;
+  const close = () => {
+    var _a2;
+    const panel = element.current;
+    if (panel == null ? void 0 : panel.contains(document.activeElement)) (_a2 = controlOf(panel)) == null ? void 0 : _a2.focus();
+    onClose == null ? void 0 : onClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref: (node) => {
+        element.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: join("clover-panel", className),
+      "data-layout": layout,
+      "data-closable": onClose ? "" : void 0,
+      "data-floating": closeOnEscape ? "" : void 0,
+      ...name.props,
+      onKeyDown: (event) => {
+        onKeyDown == null ? void 0 : onKeyDown(event);
+        if (closeOnEscape && onClose && event.key === "Escape" && !event.defaultPrevented) {
+          event.preventDefault();
+          close();
+        }
+      },
+      ...rest,
+      children: [
+        name.node,
+        onClose && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "clover-panel-close",
+            "aria-label": t("informationPanelClose"),
+            lang: langOf("informationPanelClose"),
+            onClick: close,
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  focusable: "false",
+                  viewBox: "0 0 512 512",
+                  fill: "none",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx(Close, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(Tip, { label: t("informationPanelClose") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Sections,
+          {
+            items: tabs,
+            layout,
+            value: value !== void 0 ? value : own,
+            onValueChange: (next) => {
+              if (value === void 0) setOwn(next);
+              onValueChange == null ? void 0 : onValueChange(next);
+            },
+            label: t("informationPanelTabs"),
+            labelLang: langOf("informationPanelTabs"),
+            headingLevel
+          }
+        )
+      ]
+    }
+  );
+});
+function controlOf(panel) {
+  for (let node = panel; node && node !== document.body; node = node.parentElement) {
+    if (!node.id) continue;
+    const control = document.querySelector(
+      `[aria-controls~="${node.id.replace(/["\\]/g, "\\$&")}"]`
+    );
+    if (control) return control;
+  }
+  return null;
+}
+export {
+  Panel,
+  Tab
+};

package/dist/components/Panel/PanelToggle.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import Button from "../../ui/Button.mjs";
+function PanelToggle({
+  open,
+  onOpenChange,
+  controls
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const id = useUniqueId().replace(/:/g, "");
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      id: `panel-${id}`,
+      label: t("informationPanelToggle"),
+      lang: langOf("informationPanelToggle"),
+      expanded: open,
+      controls,
+      onClick: () => onOpenChange(!open),
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "64",
+            y: "96",
+            width: "384",
+            height: "320",
+            rx: "40",
+            fill: "none",
+            strokeWidth: "36"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M320 96v320", fill: "none", strokeWidth: "36" }),
+        open && /* @__PURE__ */ jsx("path", { d: "M320 96h88a40 40 0 0 1 40 40v240a40 40 0 0 1-40 40h-88z" })
+      ] })
+    }
+  );
+}
+export {
+  PanelToggle
+};

package/dist/components/Panel/PartOfManifest.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { isLoneCanvas } from "../../core/load.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { useClover } from "../../react/context.mjs";
+import { titled } from "../../ui/heading.mjs";
+function PartOfManifest({
+  manifest,
+  headingLevel,
+  onOpened
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const { clover, language } = useClover("About");
+  const id = useUniqueId();
+  const parts = [].concat(manifest.partOf ?? []).filter((part) => (part == null ? void 0 : part.id) && (!part.type || part.type === "Manifest"));
+  if (!isLoneCanvas(manifest) || !parts.length) return null;
+  const canvasId = manifest.items[0].id;
+  const { as: Title, title, group } = titled(headingLevel, `${id}-title`);
+  return /* @__PURE__ */ jsxs("section", { className: "clover-about-section", ...group, children: [
+    /* @__PURE__ */ jsx(
+      Title,
+      {
+        className: "clover-about-heading",
+        lang: langOf("aboutPartOf"),
+        ...title,
+        children: t("aboutPartOf")
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { className: "clover-about-part-of", children: parts.map((part, index) => {
+      const label = localize(part.label, language);
+      return /* @__PURE__ */ jsxs("li", { children: [
+        label.text && /* @__PURE__ */ jsx("span", { id: `${id}-${index}`, lang: label.lang, children: label.text }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "clover-about-open",
+            lang: langOf("aboutOpenManifest"),
+            "aria-describedby": label.text ? `${id}-${index}` : void 0,
+            onClick: () => void clover.goToManifest(part.id, canvasId).then(onOpened),
+            children: t("aboutOpenManifest")
+          }
+        )
+      ] }, part.id);
+    }) })
+  ] });
+}
+export {
+  PartOfManifest as default
+};