@nulib/clover 4.1.0 → 4.2.0

package/dist/components/Body/useControlsVisibility.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect } from "react";
 import { isDirect, TAP_MS, isHovering, TAP_SLOP, isInteractive, DOUBLE_TAP_SLOP } from "../../lib/pointer.mjs";
-const DEFAULT_HIDE_DELAY = 2e3;
+const DEFAULT_HIDE_DELAY = 3e3;
 const LEAVE_DELAY = 1e3;
 const PRESS_FOCUS_MS = 1e3;
 const FADING_CONTROLS = [
@@ -20,10 +20,12 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
     let focusHeld = false;
     let penHovers = false;
     let pressedAt = -Infinity;
+    let pressedInside = false;
     let held = null;
     let swallowClick = false;
     let clickTimer;
     let press = null;
+    let using = null;
     let tap = null;
     const set = (value) => {
       shown = value;
@@ -40,6 +42,11 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
       if (tap) clearTimeout(tap.timer);
       tap = null;
     };
+    const touchShow = () => {
+      set(true);
+      stop();
+      if (Number.isFinite(hideDelay)) timer = setTimeout(hide, hideDelay);
+    };
     const direct = (event) => isDirect(event.pointerType, penHovers);
     const show = (event) => {
       keyboard = event.type === "keydown";
@@ -59,7 +66,10 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
         ...at,
         timer: setTimeout(() => {
           tap = null;
-          set(at.onPicture ? !shown : true);
+          if (at.onPicture && shown) {
+            stop();
+            set(false);
+          } else touchShow();
         }, TAP_MS)
       };
     };
@@ -70,10 +80,21 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
         press = null;
       }
     };
+    const onPicture = (target) => {
+      const pictureElement = picture == null ? void 0 : picture.current;
+      return Boolean(
+        pictureElement && target instanceof Node && pictureElement.contains(target)
+      );
+    };
     const down = (event) => {
       if (!direct(event)) return show(event);
       keyboard = false;
       stop();
+      using = isInteractive(event.target, element) && !onPicture(event.target) ? {
+        id: event.pointerId,
+        inSight: shown || getComputedStyle(element).getPropertyValue("--clover-controls-shown").trim() === "1"
+      } : null;
+      if (using) forgetTap();
       press = event.isPrimary === false ? null : {
         id: event.pointerId,
         x: event.clientX,
@@ -82,26 +103,25 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
       };
     };
     const up = (event) => {
-      if (!direct(event) || (press == null ? void 0 : press.id) !== event.pointerId) return;
+      if (!direct(event)) return;
+      if ((using == null ? void 0 : using.id) === event.pointerId) {
+        if (using.inSight) touchShow();
+        using = null;
+      } else if (shown && event.isPrimary !== false) touchShow();
+      if ((press == null ? void 0 : press.id) !== event.pointerId) return;
       const { target } = press;
       press = null;
       if (event.type !== "pointerup") return;
       if (isInteractive(target, element)) return;
-      const pictureElement = picture == null ? void 0 : picture.current;
-      const onPicture = Boolean(
-        pictureElement && target instanceof Node && pictureElement.contains(target)
-      );
-      if (onPicture && (tap == null ? void 0 : tap.onPicture) && Math.hypot(event.clientX - tap.x, event.clientY - tap.y) < DOUBLE_TAP_SLOP) {
+      const tapped = onPicture(target);
+      if (tapped && (tap == null ? void 0 : tap.onPicture) && Math.hypot(event.clientX - tap.x, event.clientY - tap.y) < DOUBLE_TAP_SLOP) {
         forgetTap();
         return;
       }
-      later({ x: event.clientX, y: event.clientY, onPicture });
+      later({ x: event.clientX, y: event.clientY, onPicture: tapped });
     };
     const underFadedControls = (event) => {
-      const pictureElement = picture == null ? void 0 : picture.current;
-      const target = event.target;
-      if (!pictureElement || !target || !pictureElement.contains(target))
-        return false;
+      if (!onPicture(event.target)) return false;
       return Array.from(element.querySelectorAll(FADING_CONTROLS)).some(
         (piece) => {
           const box = piece.getBoundingClientRect();
@@ -144,6 +164,7 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
     };
     const pressed = (event) => {
       pressedAt = Date.now();
+      pressedInside = element.contains(event.target);
       if (event.type === "pointerdown") focusHeld = false;
     };
     const focus = () => {
@@ -159,6 +180,7 @@ function useControlsVisibility(element, hideDelay = DEFAULT_HIDE_DELAY, picture)
     const blur = (event) => {
       if (element.contains(event.relatedTarget)) return;
       focusHeld = false;
+      if (pressedInside && Date.now() - pressedAt < PRESS_FOCUS_MS) return;
       if (shown || keyboard) linger();
     };
     page.addEventListener("pointerdown", pressed, true);

package/dist/components/Panel/Panel.mjs

@@ -6,12 +6,10 @@ import { AboutActions } from "./AboutActions.mjs";
 import { InPanelContext } from "./ReadingLanguages.mjs";
 import { Tip } from "../../ui/Tip.mjs";
 import { Close } from "../Body/glyphs.mjs";
-import { canvasTimedText, 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 { SEARCH_SET_ID } from "../../core/search-service.mjs";
+import { usePanelSections } from "./sections.mjs";
+import { langWithin } from "../../i18n/config.mjs";
+import { languageToRead } from "../../i18n/languages.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
@@ -54,6 +52,8 @@ const Panel = forwardRef(function Panel2({
   as: Tag = "aside",
   download = true,
   languages = true,
+  sections,
+  labels,
   className,
   children,
   onKeyDown,
@@ -62,7 +62,7 @@ const Panel = forwardRef(function Panel2({
   var _a;
   const { clover } = useClover("Panel");
   const element = useRef(null);
-  const { t, langOf } = useCloverTranslation();
+  const { t, langOf, hostLanguage, i18n } = useCloverTranslation();
   const name = useContainerName(
     t("informationPanelTabs"),
     langOf("informationPanelTabs"),
@@ -72,38 +72,18 @@ const Panel = forwardRef(function Panel2({
     const lang = langOf(key);
     return lang ? /* @__PURE__ */ jsx("span", { ...languageProps(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) => canvasTimedText(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 hasTargets = useCloverSelector(
-    (state) => {
-      var _a2;
-      return (((_a2 = state.targets) == null ? void 0 : _a2.items.length) ?? 0) > 1;
-    }
-  );
-  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 sectionLabel = (section, key) => {
+    const given2 = labels == null ? void 0 : labels[section];
+    if (given2 === void 0) return tabLabel(key);
+    if (typeof given2 === "string") return given2;
+    const tags = Object.keys(given2);
+    const tag = languageToRead(tags, i18n.language);
+    if (!tag) return tabLabel(key);
+    const lang = langWithin(tag, hostLanguage);
+    return lang ? /* @__PURE__ */ jsx("span", { ...languageProps(lang), children: given2[tag] }) : given2[tag];
+  };
+  const offered = usePanelSections(sections);
+  const has = (section) => offered.includes(section);
   const given = React.Children.toArray(children).filter(
     (child) => React.isValidElement(child) && child.type === Tab
   );
@@ -115,62 +95,70 @@ const Panel = forwardRef(function Panel2({
     content: props.children,
     ...props.value === "about" && { actions: aboutActions }
   })) : [
-    {
-      value: "about",
-      label: tabLabel("informationPanelTabsAbout"),
-      content: /* @__PURE__ */ jsx(About, { headingLevel: inner, download }),
-      actions: aboutActions
-    },
-    ...hasTargets ? [
+    ...has("about") ? [
+      {
+        value: "about",
+        label: sectionLabel("about", "informationPanelTabsAbout"),
+        content: /* @__PURE__ */ jsx(About, { headingLevel: inner, download }),
+        actions: aboutActions
+      }
+    ] : [],
+    ...has("targets") ? [
       {
         value: "targets",
-        label: tabLabel("informationPanelTabsTargets"),
+        label: sectionLabel("targets", "informationPanelTabsTargets"),
         content: later(/* @__PURE__ */ jsx(Targets, { headingLevel: inner }))
       }
     ] : [],
-    ...hasCollection ? [
+    ...has("collection") ? [
       {
         value: "collection",
-        label: tabLabel("informationPanelTabsCollection"),
+        label: sectionLabel(
+          "collection",
+          "informationPanelTabsCollection"
+        ),
         content: later(/* @__PURE__ */ jsx(Collection, { headingLevel: inner }))
       }
     ] : [],
-    ...hasContents ? [
+    ...has("contents") ? [
       {
         value: "contents",
-        label: tabLabel("informationPanelTabsContents"),
+        label: sectionLabel("contents", "informationPanelTabsContents"),
         content: later(/* @__PURE__ */ jsx(Contents, {}))
       }
     ] : [],
-    ...hasSearch ? [
+    ...has("search") ? [
       {
         value: "search",
-        label: tabLabel("informationPanelTabsSearch"),
+        label: sectionLabel("search", "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 ? [
+    ...has("map") ? [
       {
         value: "map",
-        label: tabLabel("informationPanelTabsMap"),
+        label: sectionLabel("map", "informationPanelTabsMap"),
         content: later(/* @__PURE__ */ jsx(RootMap, {}))
       }
     ] : [],
-    ...hasTranscript ? [
+    ...has("transcript") ? [
       {
         value: "transcript",
-        label: tabLabel("transcriptLabel"),
+        label: sectionLabel("transcript", "transcriptLabel"),
         // Its find field small and held as the cues scroll, as Search's.
         content: later(/* @__PURE__ */ jsx(Transcript, { sticky: true, size: "small" }))
       }
     ] : [],
-    ...hasAnnotations ? [
+    ...has("annotations") ? [
       {
         value: "annotations",
-        label: tabLabel("informationPanelTabsAnnotations"),
+        label: sectionLabel(
+          "annotations",
+          "informationPanelTabsAnnotations"
+        ),
         // Every Canvas's, by Canvas, those in view kept in sight.
         content: later(/* @__PURE__ */ jsx(Annotations, { headingLevel: inner }))
       }

package/dist/components/Panel/sections.mjs

@@ -0,0 +1,62 @@
+"use client";
+import { canvasTimedText, canvasTextTranscripts } from "../Canvas/layout.mjs";
+import { hasMapData } from "../../core/geo-detect.mjs";
+import { searchServiceOf } from "../../core/search-service.mjs";
+import { tableOfContents } from "../../core/ranges.mjs";
+import { selectVisibleCanvases, partOfCollection } from "../../core/selectors.mjs";
+import { selectListedSets } from "../../core/annotation-sets.mjs";
+import { useCloverSelector } from "../../react/context.mjs";
+const PANEL_SECTIONS = [
+  "about",
+  "targets",
+  "collection",
+  "contents",
+  "search",
+  "map",
+  "transcript",
+  "annotations"
+];
+const HAS = {
+  // A content state's several targets (Cookbook 0540), listed as a Collection's members are.
+  targets: (state) => {
+    var _a;
+    return (((_a = state.targets) == null ? void 0 : _a.items.length) ?? 0) > 1;
+  },
+  // Reached through a Collection, or part of one: offered either way, fetched when opened.
+  collection: (state) => {
+    var _a, _b;
+    return (((_b = (_a = state.collection) == null ? void 0 : _a.items) == null ? void 0 : _b.length) ?? 0) > 0 || Boolean(partOfCollection(state.manifest));
+  },
+  contents: (state) => tableOfContents(state.manifest).length > 0,
+  search: (state) => Boolean(searchServiceOf(state.manifest)),
+  map: (state) => hasMapData(state.manifest, state.collection),
+  transcript: (state) => selectVisibleCanvases(
+    state.manifest,
+    state.canvasId
+  ).some(
+    (canvas) => canvasTimedText(canvas).length > 0 || canvasTextTranscripts(canvas).length > 0
+  ),
+  annotations: (state) => selectListedSets(state.manifest, state.addedSets).length > 0
+};
+const narrow = (data, sections) => {
+  const chosen = Array.isArray(sections) ? new Set(sections) : void 0;
+  return PANEL_SECTIONS.filter(
+    (section) => data[section] && (!chosen || chosen.has(section))
+  );
+};
+function usePanelSections(sections) {
+  const data = {
+    about: true,
+    targets: useCloverSelector(HAS.targets),
+    collection: useCloverSelector(HAS.collection),
+    contents: useCloverSelector(HAS.contents),
+    search: useCloverSelector(HAS.search),
+    map: useCloverSelector(HAS.map),
+    transcript: useCloverSelector(HAS.transcript),
+    annotations: useCloverSelector(HAS.annotations)
+  };
+  return narrow(data, sections);
+}
+export {
+  usePanelSections
+};

package/dist/index.d.mts

@@ -989,9 +989,9 @@ export interface CloverCanvasOptions {
 	animationTime?: number;
 	/**
 	 * Milliseconds the controls and navigator stay after a mouse (or a pen that hovers)
-	 * stops moving, as the Player's `hideDelay`. Default 2000; `Infinity` keeps them once
-	 * shown. A finger, or a pen that does not hover, has no timer: a tap on the picture
-	 * shows them, and another hides them. Focus that no press brought holds them too.
+	 * stops moving, or a finger lifts, as the Player's `hideDelay`. Default 3000; `Infinity`
+	 * keeps them once shown. A tap on the picture shows them, and another hides them. Focus
+	 * that no press brought holds them, and so does a paused recording.
 	 * A Timeline's: a Canvas's controls stay in sight, for now (Mat, 2026-11-01).
 	 */
 	hideDelay?: number;
@@ -1611,8 +1611,36 @@ export interface LogoProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement
  * picture.
  */
 export declare function Logo({ of, value, alt, className, ...rest }: LogoProps): React.JSX.Element | null;
+/**
+ * A section `Panel` draws by itself, from what the Root's resource holds. `sections`
+ * chooses among them; each still shows only where there is data for it.
+ */
+export type PanelSection = "about" | "targets" | "collection" | "contents" | "search" | "map" | "transcript" | "annotations";
+/**
+ * The default sections a `Panel` in this Root would have, in its order: About, and each
+ * other one the resource has data for, narrowed to `sections` where the page names the
+ * ones it wants. None of them, and the panel draws nothing, so a layout of your own can
+ * ask first and leave out the pane that would hold it:
+ *
+ * ```jsx
+ * const sections = Clover.usePanelSections(["contents", "search"]);
+ * return sections.length ? <Clover.Panel sections={sections} /> : null;
+ * ```
+ *
+ * Asking costs nothing a `Panel` does not already cost: the same reads of the Root, one
+ * for each section, so a change that moves none of them re-renders nothing.
+ */
+export declare function usePanelSections(sections?: readonly PanelSection[]): PanelSection[];
 /** How the sections are laid out. */
 export type SectionsLayout = "tabs" | "accordion";
+/**
+ * What a page calls a section, in place of Clover's own word for it: its words, taken to
+ * be in the page's language, or its words by language tag, one of which the tab carries
+ * as its `lang` where it is not the page's (WCAG 3.1.2).
+ */
+export type PanelSectionLabel = string | Readonly<Record<string, string>>;
+/** A label for any of the default sections, by its value. */
+export type PanelSectionLabels = Partial<Record<PanelSection, PanelSectionLabel>>;
 export interface TabProps {
 	/** Identifies the tab, for `value` / `defaultValue` on the panel. */
 	value: string;
@@ -1678,7 +1706,22 @@ export interface PanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "def
 	 */
 	languages?: boolean;
 	/**
-	 * `Clover.Tab`s. Without any, the panel has the tabs Clover has data for: About,
+	 * Which of the default sections the panel may have, in Clover's own order: with
+	 * `["contents", "search"]` it has those two and no About. Each still shows only where
+	 * the resource has data for it, so a resource with none of them draws no panel at all.
+	 * `Tab` children win over it. Default: every section.
+	 */
+	sections?: readonly PanelSection[];
+	/**
+	 * What a default section's tab or heading says, in place of Clover's own word for it:
+	 * `{ annotations: "Chapters" }`, or `{ annotations: { en: "Chapters", de: "Kapitel" } }`
+	 * to say it in several, read in the one Clover speaks and marked with its language
+	 * where that is not the page's (WCAG 3.1.2). A `Tab` of your own says it in `label`.
+	 */
+	labels?: PanelSectionLabels;
+	/**
+	 * `Clover.Tab`s, the panel's sections whole, in their order: they win over `sections`.
+	 * Without any, the panel has the tabs Clover has data for: About,
 	 * Contents when the Manifest has Ranges, Search when it has a Content Search service, a
 	 * Map when it (or a Canvas or annotation) has navPlace or a georeference,
 	 * a Transcript when the view's media has captions or a plain-text transcript, and
@@ -1698,6 +1741,14 @@ export interface PanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "def
  *   <Clover.Tab value="notes" label="Notes"><MyNotes /></Clover.Tab>
  * </Clover.Panel>
  * ```
+ *
+ * To keep Clover's own sections but not all of them, name the ones you want in
+ * `sections`: each still shows only where the resource has data for it, and a resource
+ * with none of them has no panel.
+ *
+ * ```jsx
+ * <Clover.Panel sections={["contents", "search", "transcript", "annotations"]} />
+ * ```
  */
 export declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLElement>>;
 export interface AboutProps extends React.HTMLAttributes<HTMLElement> {
@@ -2085,7 +2136,7 @@ export interface SceneProps {
 	options?: {
 		/** Credentials and headers for the Scene and its models. Inside a `Root`, the Root's. */
 		request?: CloverRequest;
-		/** Milliseconds the controls stay after a mouse stops moving, as `Canvas`'s. */
+		/** Milliseconds the controls stay after a mouse stops or a finger lifts, as `Canvas`'s. */
 		hideDelay?: number;
 	};
 	/**
@@ -2541,6 +2592,19 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 * stacked boxes each opened by its heading, or `"tabs"`.
 	 */
 	panelLayout?: PanelLayout;
+	/**
+	 * The panel's sections, from Clover's own: with
+	 * `["contents", "search", "transcript", "annotations"]` it has those four, each still
+	 * only where the resource has data for it, and no panel at all where it has none of
+	 * them. Default: every section.
+	 */
+	panelSections?: readonly PanelSection[];
+	/**
+	 * What a panel section's tab or heading says, in place of Clover's own word for it:
+	 * `{ annotations: "Chapters" }`, or a word by language tag to say it in several (the
+	 * Panel's `labels`).
+	 */
+	panelLabels?: PanelSectionLabels;
 	/** The downloads, from a Download button beside the panel's About heading. Default `true`. */
 	download?: boolean;
 	/**
@@ -2574,7 +2638,7 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 */
 	collapseControls?: "auto" | "always";
 };
-declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, download, languages, items, singleItem, storageKey, fill, collapseControls, ...root }: DefaultProps): React.JSX.Element;
+declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, items, singleItem, storageKey, fill, collapseControls, ...root }: DefaultProps): React.JSX.Element;
 /**
  * A layout the Viewer draws: one from `@nulib/clover/templates`, or a component of your
  * own that takes the `Clover.Root` props.

package/dist/index.mjs

@@ -11,6 +11,7 @@ import { Status } from "./components/Status/Status.mjs";
 import { Homepage, Id, Metadata, PartOf, Rendering, RequiredStatement, Rights, SeeAlso, Summary, Thumbnail, Value } from "./components/Primitives/Primitives.mjs";
 import { Logo, Provider } from "./components/Provider/Provider.mjs";
 import { Panel, Tab } from "./components/Panel/Panel.mjs";
+import { usePanelSections } from "./components/Panel/sections.mjs";
 import { About } from "./components/Panel/About.mjs";
 import { Annotations } from "./components/Annotations/Annotations.mjs";
 import { Transcript } from "./components/Transcript/Transcript.mjs";
@@ -127,6 +128,7 @@ export {
   useManifest,
   useNavigation,
   useOneOpen,
+  usePanelSections,
   useProvider,
   useSequence,
   useStatus,

package/dist/lib/pointer.mjs

@@ -20,7 +20,7 @@ function isInteractive(target, bodyBox) {
   var _a;
   let node = target;
   while (node && node !== bodyBox) {
-    if (node instanceof HTMLButtonElement || node instanceof HTMLAnchorElement || node instanceof HTMLInputElement || node instanceof HTMLSelectElement || ((_a = node.dataset) == null ? void 0 : _a.cloverCanvasInteractive) !== void 0) {
+    if (node instanceof HTMLButtonElement || node instanceof HTMLAnchorElement || node instanceof HTMLInputElement || node instanceof HTMLLabelElement || node instanceof HTMLSelectElement || ((_a = node.dataset) == null ? void 0 : _a.cloverCanvasInteractive) !== void 0) {
       return true;
     }
     node = node.parentElement;