@nulib/clover 4.0.0-beta.1 → 4.0.0

package/dist/templates/default/Default.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+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";
@@ -9,15 +9,16 @@ 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 { Label } from "../../components/Label/Label.mjs";
+import { Items } from "../../components/Items/Items.mjs";
 import { Provider, Logo } from "../../components/Provider/Provider.mjs";
 import { Status } from "../../components/Status/Status.mjs";
 import { Body } from "../../components/Body/Body.mjs";
-import { Position } from "../../components/Items/Pager.mjs";
-import { Items } from "../../components/Items/Items.mjs";
+import { Position } from "../../components/Items/Position.mjs";
 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";
-import { useVisibleCanvases } from "../../react/hooks.mjs";
 const BODY_MIN = "16rem";
 const PANEL_MIN = "14rem";
 const BESIDE_REM = 16 + 14 + 1;
@@ -30,6 +31,7 @@ function Default({
   defaultPanelOpen,
   panelLayout = "accordion",
   download = true,
+  languages = true,
   items = "slider",
   storageKey = "clover-template-default",
   fill = false,
@@ -138,12 +140,14 @@ function Default({
                 min: over ? void 0 : BODY_MIN,
                 children: [
                   header && /* @__PURE__ */ jsxs("header", { className: "clover-template-default-header", children: [
+                    /* @__PURE__ */ jsx(HeaderTitle, { title }),
                     /* @__PURE__ */ jsx(
-                      Label,
+                      Items,
                       {
-                        as: title.as,
-                        className: "clover-template-default-title",
-                        ...title.title
+                        of: "targets",
+                        layout: "pager",
+                        size: "small",
+                        className: "clover-template-default-pager"
                       }
                     ),
                     /* @__PURE__ */ jsx(Provider, { className: "clover-template-default-provider", children: /* @__PURE__ */ jsx(Logo, {}) })
@@ -179,6 +183,7 @@ function Default({
                   {
                     layout: panelLayout,
                     download,
+                    languages,
                     headingLevel: header ? below(headingLevel) : headingLevel,
                     onClose: over ? () => setOpen(false) : void 0,
                     closeOnEscape: over
@@ -209,6 +214,79 @@ function Default({
     }
   );
 }
+function HeaderTitle({ title }) {
+  const collection = useCloverSelector(
+    (state) => {
+      var _a;
+      return state.throughCollection ? (_a = state.collection) == null ? void 0 : _a.label : void 0;
+    }
+  );
+  const annotations = useAnnotationCollection();
+  usePickFirst(annotations == null ? void 0 : annotations.entries[0]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Label,
+      {
+        as: title.as,
+        className: "clover-template-default-title",
+        ...title.title
+      }
+    ),
+    collection && /* @__PURE__ */ jsxs("div", { className: "clover-template-default-collection-row", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          as: "p",
+          label: collection,
+          className: "clover-template-default-collection"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Items,
+        {
+          of: "members",
+          layout: "pager",
+          size: "small",
+          className: "clover-template-default-pager"
+        }
+      )
+    ] }),
+    annotations && /* @__PURE__ */ jsxs("div", { className: "clover-template-default-collection-row", children: [
+      annotations.label && /* @__PURE__ */ jsx(
+        Label,
+        {
+          as: "p",
+          label: annotations.label,
+          className: "clover-template-default-collection"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Items,
+        {
+          of: "annotations",
+          layout: "pager",
+          size: "small",
+          className: "clover-template-default-pager"
+        }
+      )
+    ] })
+  ] });
+}
+function usePickFirst(first) {
+  const { clover } = useClover();
+  const manifestId = useCloverSelector((state) => {
+    var _a;
+    return (_a = state.manifest) == null ? void 0 : _a.id;
+  });
+  const started = useRef(null);
+  useEffect(() => {
+    if (!first || !manifestId || started.current === manifestId) return;
+    started.current = manifestId;
+    const { annotationId, canvasId } = clover.store.get();
+    if (!annotationId && canvasId === first.canvasId)
+      clover.selectAnnotation(first.id);
+  }, [clover, first, manifestId]);
+}
 const below = (level) => level + 1;
 function ViewTitles() {
   const canvases = useVisibleCanvases();

package/dist/templates/document/Document.mjs

@@ -10,7 +10,7 @@ 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 { Position } from "../../components/Items/Position.mjs";
 import { Tip } from "../../ui/Tip.mjs";
 import { Label } from "../../components/Label/Label.mjs";
 import { Download } from "../../components/Download/Download.mjs";
@@ -26,6 +26,7 @@ function Document({
   defaultPanelOpen = false,
   panelLayout = "accordion",
   download = true,
+  languages = true,
   headingLevel = 2,
   storageKey = "clover-template-document",
   ...root
@@ -48,6 +49,7 @@ function Document({
           defaultPanelOpen,
           panelLayout,
           download,
+          languages,
           headingLevel,
           storageKey
         }
@@ -65,6 +67,7 @@ function DocumentLayout({
   defaultSidebarOpen,
   defaultPanelOpen,
   download,
+  languages,
   headingLevel = 2,
   storageKey,
   panelLayout,
@@ -255,6 +258,7 @@ function DocumentLayout({
                   layout: panelLayout,
                   headingLevel: below(headingLevel),
                   download: false,
+                  languages,
                   onClose: over ? panel.close : void 0,
                   closeOnEscape: over
                 }

package/dist/templates/index.d.mts

@@ -118,6 +118,14 @@ export interface RootProps extends Omit<React.HTMLAttributes<HTMLElement>, "chil
 	request?: CloverRequest;
 	/** The language to read IIIF text in. The reader's, by default. */
 	language?: string;
+	/**
+	 * Clover's higher-contrast mode, for every part inside: the accent kept to rings,
+	 * outlines and marks, and never under words or a glyph, where the controls' dark fill
+	 * takes its place, edged in the accent. For an accent that cannot carry white text at
+	 * 4.5:1. It is on wherever the reader's system asks for more contrast, too. Default
+	 * `false`.
+	 */
+	highContrast?: boolean;
 	/**
 	 * Renderers of your own for some views — by Canvas id, painting format, or a test —
 	 * drawn by every `Body` inside in place of `Canvas` (3.x's `customDisplays`).
@@ -172,8 +180,13 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 * stacked boxes each opened by its heading, or `"tabs"`.
 	 */
 	panelLayout?: PanelLayout;
-	/** The downloads in the panel's About, as links. Default `true`. */
+	/** The downloads, from a Download button beside the panel's About heading. Default `true`. */
 	download?: boolean;
+	/**
+	 * The languages to read the resource in, beside the panel's About heading, where what
+	 * it says of itself comes in several (the Panel's `languages`). Default `true`.
+	 */
+	languages?: boolean;
 	/** The thumbnails under the Body: a layout, or `false` for none. Default `slider`. */
 	items?: Exclude<ItemsLayout, "pager"> | false;
 	/**
@@ -201,7 +214,7 @@ export type DefaultProps = Omit<RootProps, "children"> & {
  * uncovered: a click there, Escape or the panel's close button puts it away. Size it with
  * `--clover-body-height`.
  */
-export declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, download, items, storageKey, fill, ...root }: DefaultProps): React.JSX.Element;
+export declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, download, languages, items, storageKey, fill, ...root }: DefaultProps): React.JSX.Element;
 export type DocumentProps = Omit<RootProps, "children"> & {
 	/**
 	 * Whether the page thumbnails start shown beside the page. Default `true`. On a phone,
@@ -220,6 +233,11 @@ export type DocumentProps = Omit<RootProps, "children"> & {
 	panelLayout?: PanelLayout;
 	/** The downloads in the toolbar, as links: the page's and the Manifest's `rendering`. Default `true`. */
 	download?: boolean;
+	/**
+	 * The languages to read the resource in, beside the panel's About heading, where what
+	 * it says of itself comes in several (the Panel's `languages`). Default `true`.
+	 */
+	languages?: boolean;
 	/**
 	 * The title's heading level, to fit the outline of the page around the layout (under
 	 * an `h2`, 3). The panel's sections, and the downloads' groups, are a level below
@@ -241,7 +259,7 @@ export type DocumentProps = Omit<RootProps, "children"> & {
  * where there is room for both, and slides out over the page where there is not. Size
  * it with `--clover-template-document-height`.
  */
-export declare function Document({ className, defaultSidebarOpen, defaultPanelOpen, panelLayout, download, headingLevel, storageKey, ...root }: DocumentProps): React.JSX.Element;
+export declare function Document({ className, defaultSidebarOpen, defaultPanelOpen, panelLayout, download, languages, headingLevel, storageKey, ...root }: DocumentProps): React.JSX.Element;
 export type GalleryProps = Omit<RootProps, "children"> & {
 	/** The size of a grid cell. Default `10rem`, through `--clover-items-size`. */
 	size?: string;

package/dist/templates.css

@@ -1 +1 @@
-@layer clover{.clover-template-lightbox{width:min(96vw,72rem);max-height:94vh;padding:0;border:0;border-radius:var(--clover-radius, 3px);background:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e);box-shadow:0 8px 40px #00000059}.clover-template-lightbox::backdrop{background:#0009}.clover-template-lightbox-content{display:flex;flex-direction:column;gap:var(--clover-space-m);padding:var(--clover-inset);--clover-body-height: min(70vh, 48rem)}.clover-template-lightbox-pending{height:var(--clover-body-height, 60vh);background-color:#0001}.clover-template-lightbox-header{display:flex;align-items:center;gap:var(--clover-space-m)}.clover-template-lightbox-title{flex:1 1 auto;min-width:0;margin:0;font-size:var(--clover-text-l);font-weight:700}button.clover-template-lightbox-close{display:inline-flex;align-items:center;justify-content:center;width:var(--clover-control);height:var(--clover-control);padding:0;border:0;border-radius:var(--clover-radius-pill, 2rem);background:var(--clover-color-secondary-muted, #f1f1f1);color:inherit;cursor:pointer}button.clover-template-lightbox-close:is(:hover,:focus-visible){background:var(--clover-color-accent, #0065c3);color:var(--clover-color-control-glyph, #fff)}.clover-template-document{--clover-template-document-height: min(85vh, 56rem);display:flex;flex-direction:column;height:var(--clover-template-document-height);overflow:hidden;background-color:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e)}.clover-template-document-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-s);padding:var(--clover-space-m) var(--clover-inset);border-bottom:1px solid var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-provider{max-width:100%;margin-inline-start:auto}.clover-template-document-toolbar .clover-download-groups{flex-direction:row;flex-wrap:wrap;column-gap:var(--clover-space-m)}.clover-template-document-toolbar .clover-download-group{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--clover-space-s)}.clover-template-document-toolbar .clover-download-title{margin:0}.clover-template-document-toolbar .clover-download-list{display:flex;flex-wrap:wrap;column-gap:var(--clover-space-s)}.clover-template-document-title{flex:1 1 6rem;min-width:0;margin:0;font-size:var(--clover-text-l);line-height:1.25;font-weight:400;overflow-wrap:anywhere}button.clover-template-document-sidebar-toggle{display:inline-flex;flex:none;align-items:center;gap:var(--clover-space-xs);min-height:var(--clover-control);padding-block:0;padding-inline:var(--clover-space-s) calc(var(--clover-space-xs) + var(--clover-space-3xs));border:0;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-color-control, #1a1d1e);color:var(--clover-color-control-glyph, #fff);cursor:pointer;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}button.clover-template-document-sidebar-toggle:is(:hover,:focus-visible){background-color:var(--clover-color-accent, #0065c3)}button.clover-template-document-sidebar-toggle:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}.clover-template-document-sidebar-toggle .clover-template-document-position{color:inherit;font-size:var(--clover-text-xs);white-space:nowrap}.clover-template-document-sidebar-toggle .clover-template-document-position>.clover-pager-room[hidden]{display:none}.clover-template-document-panes{position:relative;flex:1 1 auto;min-height:0}.clover-template-document-sidebar{overflow-y:auto;overscroll-behavior:contain;padding:var(--clover-inset);scroll-padding-top:calc(2 * var(--clover-inset) + var(--clover-control));background-color:var(--clover-color-secondary, #fff)}.clover-template-document-sidebar-closed{position:absolute;top:var(--clover-inset);inset-inline-start:var(--clover-inset);z-index:3}.clover-template-document-sidebar[hidden]{display:none}.clover-template-document-sidebar+.clover-split-handle:before{inset-inline-start:0;inset-inline-end:calc(3px - var(--clover-space-l))}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),minmax(0,1fr));gap:var(--clover-space-xs) 0}.clover-template-document-sidebar .clover-items[data-layout] :is(.clover-items-pictures,.clover-items-caption){grid-column:1 / -1;grid-template-columns:subgrid}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-label{contain:inline-size}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture[data-empty],.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture img{width:100%;height:auto;max-height:20rem;aspect-ratio:var(--clover-items-ratio, auto);object-fit:contain}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-caption{font-size:var(--clover-text-s)}.clover-template-document-main{position:relative;overflow:hidden;background-color:var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-column{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;container-type:size}.clover-template-document-sheets{position:relative}.clover-template-document-sheet{--clover-template-document-tease: calc(2 * var(--clover-inset));display:flex;justify-content:center;box-sizing:border-box;height:min(100cqh - var(--clover-template-document-tease),(100cqw - 2 * var(--clover-inset)) / var(--ratio) + 2 * var(--clover-inset));padding:var(--clover-inset);transition:opacity .2s ease,height .24s cubic-bezier(.16,1,.3,1)}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]{height:100cqh}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]>*{visibility:hidden}.clover-template-document-column[data-zoomed] .clover-template-document-sheet:not([data-active]){--clover-template-document-muted: 0;pointer-events:none}.clover-template-document-sheet:not([data-active]){--clover-template-document-muted: .618;cursor:pointer;opacity:var(--clover-template-document-muted)}.clover-template-document-sheet:not([data-active]):hover{--clover-template-document-muted: .809}@media (prefers-reduced-motion: reduce){.clover-template-document-sheet{transition:none}}.clover-template-document-sheets[data-single]>.clover-template-document-sheet{--clover-template-document-tease: 0px}.clover-template-document-sheet>*{display:block;height:100%;min-width:0}.clover-template-document-live{--clover-body-height: 100%;position:absolute;inset-inline:0;top:0;height:100%;transition:opacity .16s ease}.clover-template-document-body .clover-canvas{--clover-canvas-inset: var(--clover-inset);background-color:transparent}.clover-template-document-live[data-moved]:not(:focus-within){opacity:0;pointer-events:none}.clover-template-document-column[data-scrolling] .clover-template-document-live:not(:focus-within) .clover-canvas-controls>*{--clover-controls-shown: 0;--clover-controls-events: none}.clover-template-document-column:not([data-zoomed]) .clover-canvas-viewport{touch-action:pan-y}.clover-template-document-panel{contain:size;overflow-y:auto;overscroll-behavior:contain;background-color:var(--clover-color-secondary, #fff)}.clover-template-document-panel[hidden]{display:none}.clover-template-document-scrim[data-for=sidebar]{z-index:2}.clover-template-document{--clover-grip: color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 30%, transparent )}.clover-template-document-panes[data-narrow]{--clover-template-sidebar-width: min(14rem, 80%)}.clover-template-document-panes[data-narrow]>.clover-template-document-sidebar{position:absolute;inset-block:0;inset-inline-start:0;z-index:3;width:var(--clover-template-sidebar-width);border-inline-end:1px solid var(--clover-color-secondary-muted, #e6e8eb);background:linear-gradient(var(--clover-grip),var(--clover-grip)) no-repeat right var(--clover-space-2xs) center / 4px var(--clover-space-xl),var(--clover-color-secondary, #fff);touch-action:pan-y;box-shadow:var(--clover-space-s) 0 var(--clover-space-l) #0000001f}.clover-template-document-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-document-spine>*{position:absolute;top:var(--clover-inset);inset-inline-start:-1.5px;translate:-50%}.clover-template-document-spine:dir(rtl)>*{translate:50%}.clover-template-document-spine[data-for=sidebar]>*{inset-inline:auto calc(1.5px - var(--clover-control) / 2);translate:none}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]{inset-inline-start:var(--clover-template-sidebar-width)}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]>*{inset-inline-end:calc(var(--clover-control) / -2)}.clover-template-gallery{display:flex;flex-direction:column;gap:var(--clover-space-m);color:var(--clover-color-primary, #1a1d1e)}.clover-template-gallery-header{display:flex;flex-direction:column;gap:var(--clover-space-2xs)}.clover-template-gallery-title{margin:0;font-size:var(--clover-text-l);line-height:1.25;font-weight:700}.clover-template-gallery-summary{margin:0}}
+@layer clover{.clover-template-lightbox{width:min(96vw,72rem);max-height:94vh;padding:0;border:0;border-radius:var(--clover-radius, 3px);background:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e);box-shadow:0 8px 40px #00000059}.clover-template-lightbox::backdrop{background:#0009}.clover-template-lightbox-content{display:flex;flex-direction:column;gap:var(--clover-space-m);padding:var(--clover-inset);--clover-body-height: min(70vh, 48rem)}.clover-template-lightbox-pending{height:var(--clover-body-height, 60vh);background-color:#0001}.clover-template-lightbox-header{display:flex;align-items:center;gap:var(--clover-space-m)}.clover-template-lightbox-title{flex:1 1 auto;min-width:0;margin:0;font-size:var(--clover-text-l);font-weight:700}button.clover-template-lightbox-close{display:inline-flex;align-items:center;justify-content:center;width:var(--clover-control);height:var(--clover-control);padding:0;border:0;border-radius:var(--clover-radius-pill, 2rem);background:var(--clover-color-secondary-muted, #f1f1f1);color:inherit;cursor:pointer}button.clover-template-lightbox-close:is(:hover,:focus-visible){background:var(--clover-color-accent, #0065c3);color:var(--clover-color-control-glyph, #fff)}:where([data-high-contrast]) button.clover-template-lightbox-close:is(:hover,:focus-visible){background:var(--clover-accent-fill)}:where([data-high-contrast]) button.clover-template-lightbox-close:hover:not(:focus-visible){outline:var(--clover-accent-ring-hover);outline-offset:1px}.clover-template-document{--clover-template-document-height: min(85vh, 56rem);display:flex;flex-direction:column;height:var(--clover-template-document-height);overflow:hidden;background-color:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e)}.clover-template-document-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-s);padding:var(--clover-space-m) var(--clover-inset);border-bottom:1px solid var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-provider{max-width:100%;margin-inline-start:auto}.clover-template-document-toolbar .clover-download-groups{flex-direction:row;flex-wrap:wrap;column-gap:var(--clover-space-m)}.clover-template-document-toolbar .clover-download-group{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--clover-space-s)}.clover-template-document-toolbar .clover-download-title{margin:0}.clover-template-document-toolbar .clover-download-list{display:flex;flex-wrap:wrap;column-gap:var(--clover-space-s)}.clover-template-document-title{flex:1 1 6rem;min-width:0;margin:0;font-size:var(--clover-text-l);line-height:1.25;font-weight:400;overflow-wrap:anywhere}button.clover-template-document-sidebar-toggle{display:inline-flex;flex:none;align-items:center;gap:var(--clover-space-xs);min-height:var(--clover-control);padding-block:0;padding-inline:var(--clover-space-s) calc(var(--clover-space-xs) + var(--clover-space-3xs));border:0;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-color-control, #1a1d1e);color:var(--clover-color-control-glyph, #fff);cursor:pointer;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}button.clover-template-document-sidebar-toggle:is(:hover,:focus-visible){background-color:var(--clover-color-accent, #0065c3)}:where([data-high-contrast]) button.clover-template-document-sidebar-toggle:is(:hover,:focus-visible){background-color:var(--clover-accent-fill)}:where([data-high-contrast]) button.clover-template-document-sidebar-toggle:hover:not(:focus-visible){outline:var(--clover-accent-ring-hover);outline-offset:1px}button.clover-template-document-sidebar-toggle:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}.clover-template-document-sidebar-toggle .clover-template-document-position{color:inherit;font-size:var(--clover-text-xs);white-space:nowrap}.clover-template-document-sidebar-toggle .clover-template-document-position>.clover-pager-room[hidden]{display:none}.clover-template-document-panes{position:relative;flex:1 1 auto;min-height:0}.clover-template-document-sidebar{overflow-y:auto;overscroll-behavior:contain;padding:var(--clover-inset);scroll-padding-top:calc(2 * var(--clover-inset) + var(--clover-control));background-color:var(--clover-color-secondary, #fff)}.clover-template-document-sidebar-closed{position:absolute;top:var(--clover-inset);inset-inline-start:var(--clover-inset);z-index:3}.clover-template-document-sidebar[hidden]{display:none}.clover-template-document-sidebar+.clover-split-handle:before{inset-inline-start:0;inset-inline-end:calc(3px - var(--clover-space-l))}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),minmax(0,1fr));gap:var(--clover-space-xs) 0}.clover-template-document-sidebar .clover-items[data-layout] :is(.clover-items-pictures,.clover-items-caption){grid-column:1 / -1;grid-template-columns:subgrid}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-label{contain:inline-size}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture[data-empty],.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture img{width:100%;height:auto;max-height:20rem;aspect-ratio:var(--clover-items-ratio, auto);object-fit:contain}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-caption{font-size:var(--clover-text-s)}.clover-template-document-main{position:relative;overflow:hidden;background-color:var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-column{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;container-type:size}.clover-template-document-sheets{position:relative}.clover-template-document-sheet{--clover-template-document-tease: calc(2 * var(--clover-inset));display:flex;justify-content:center;box-sizing:border-box;height:min(100cqh - var(--clover-template-document-tease),(100cqw - 2 * var(--clover-inset)) / var(--ratio) + 2 * var(--clover-inset));padding:var(--clover-inset);transition:opacity .2s ease,height .24s cubic-bezier(.16,1,.3,1)}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]{height:100cqh}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]>*{visibility:hidden}.clover-template-document-column[data-zoomed] .clover-template-document-sheet:not([data-active]){--clover-template-document-muted: 0;pointer-events:none}.clover-template-document-sheet:not([data-active]){--clover-template-document-muted: .618;cursor:pointer;opacity:var(--clover-template-document-muted)}.clover-template-document-sheet:not([data-active]):hover{--clover-template-document-muted: .809}@media (prefers-reduced-motion: reduce){.clover-template-document-sheet{transition:none}}.clover-template-document-sheets[data-single]>.clover-template-document-sheet{--clover-template-document-tease: 0px}.clover-template-document-sheet>*{display:block;height:100%;min-width:0}.clover-template-document-live{--clover-body-height: 100%;position:absolute;inset-inline:0;top:0;height:100%;transition:opacity .16s ease}.clover-template-document-body .clover-canvas{--clover-canvas-inset: var(--clover-inset);background-color:transparent}.clover-template-document-live[data-moved]:not(:focus-within){opacity:0;pointer-events:none}.clover-template-document-column[data-scrolling] .clover-template-document-live:not(:focus-within) .clover-canvas-controls>*{--clover-controls-shown: 0;--clover-controls-events: none}.clover-template-document-column:not([data-zoomed]) .clover-canvas-viewport{touch-action:pan-y}.clover-template-document-panel{contain:size;overflow-y:auto;overscroll-behavior:contain;background-color:var(--clover-color-secondary, #fff)}.clover-template-document-panel[hidden]{display:none}.clover-template-document-scrim[data-for=sidebar]{z-index:2}.clover-template-document{--clover-grip: color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 30%, transparent )}.clover-template-document-panes[data-narrow]{--clover-template-sidebar-width: min(14rem, 80%)}.clover-template-document-panes[data-narrow]>.clover-template-document-sidebar{position:absolute;inset-block:0;inset-inline-start:0;z-index:3;width:var(--clover-template-sidebar-width);border-inline-end:1px solid var(--clover-color-secondary-muted, #e6e8eb);background:linear-gradient(var(--clover-grip),var(--clover-grip)) no-repeat right var(--clover-space-2xs) center / 4px var(--clover-space-xl),var(--clover-color-secondary, #fff);touch-action:pan-y;box-shadow:var(--clover-space-s) 0 var(--clover-space-l) #0000001f}.clover-template-document-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-document-spine>*{position:absolute;top:var(--clover-inset);inset-inline-start:-1.5px;translate:-50%}.clover-template-document-spine:dir(rtl)>*{translate:50%}.clover-template-document-spine[data-for=sidebar]>*{inset-inline:auto calc(1.5px - var(--clover-control) / 2);translate:none}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]{inset-inline-start:var(--clover-template-sidebar-width)}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]>*{inset-inline-end:calc(var(--clover-control) / -2)}.clover-template-gallery{display:flex;flex-direction:column;gap:var(--clover-space-m);color:var(--clover-color-primary, #1a1d1e)}.clover-template-gallery-header{display:flex;flex-direction:column;gap:var(--clover-space-2xs)}.clover-template-gallery-title{margin:0;font-size:var(--clover-text-l);line-height:1.25;font-weight:700}.clover-template-gallery-summary{margin:0}}

package/dist/ui/BodyUnloadable.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { languageProps } from "../i18n/direction.mjs";
+const KEYS = {
+  image: "bodyUnloadableImage",
+  video: "bodyUnloadableVideo",
+  audio: "bodyUnloadableAudio",
+  model: "bodyUnloadableModel"
+};
+function BodyUnloadable({
+  kind,
+  shown,
+  room = false
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const key = KEYS[kind];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "clover-body-unloadable",
+      "data-room": room || void 0,
+      role: "status",
+      children: shown && /* @__PURE__ */ jsx("p", { ...languageProps(langOf(key)), children: t(key) })
+    }
+  );
+}
+function BodyNote({ text, lang }) {
+  return /* @__PURE__ */ jsx("div", { className: "clover-body-note", "aria-hidden": "true", children: /* @__PURE__ */ jsx("p", { ...languageProps(lang), children: text }) });
+}
+export {
+  BodyNote,
+  BodyUnloadable
+};

package/dist/ui/Button.mjs

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { join } from "../lib/classnames.mjs";
 import { Tip } from "./Tip.mjs";
+import { languageProps } from "../i18n/direction.mjs";
 const Button = ({
   className,
   id,
@@ -27,7 +28,7 @@ const Button = ({
       "aria-controls": controls,
       "aria-label": label,
       "aria-keyshortcuts": shortcut == null ? void 0 : shortcut.keys,
-      lang,
+      ...languageProps(lang),
       type: "button",
       children: [
         /* @__PURE__ */ jsx(

package/dist/ui/Chevron.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { join } from "../lib/classnames.mjs";
+function Chevron({
+  open = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      className: join("clover-chevron", className),
+      "data-open": open || void 0,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3 4.5l3 3 3-3",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+export {
+  Chevron
+};

package/dist/ui/ControlCluster.mjs

@@ -64,6 +64,11 @@ const ControlCluster = ({
   const [element, setElement] = useState(null);
   const isFullscreen = useWithinFullscreen(element);
   useClusterReach(element);
+  const specs = controls(isFullscreen);
+  const ordered = [
+    ...specs.filter((spec) => spec.key !== "fullPage"),
+    ...specs.filter((spec) => spec.key === "fullPage")
+  ];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -73,9 +78,7 @@ const ControlCluster = ({
       "data-testid": "clover-canvas-controls",
       ref: setElement,
       children: [
-        controls(isFullscreen).map(
-          (spec) => renderControl(spec, controlButtons)
-        ),
+        ordered.map((spec) => renderControl(spec, controlButtons)),
         children
       ]
     }

package/dist/ui/EntryThumbnail.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { resolveThumbnail } from "../core/thumbnail.mjs";
+import { join } from "../lib/classnames.mjs";
+const ENTRY_THUMBNAIL_SIZE = 52;
+const PICTURE_SIZE = 336;
+function useThumbnail(source, size, request, hold = false) {
+  const [src, setSrc] = useState(source == null ? void 0 : source.src);
+  const key = source ? JSON.stringify(source) : "";
+  useEffect(() => {
+    if (!source || source.src) return setSrc(source == null ? void 0 : source.src);
+    if (!hold) setSrc(void 0);
+    let live = true;
+    void resolveThumbnail(source, size, request).then(
+      (url) => live && setSrc(url)
+    );
+    return () => {
+      live = false;
+    };
+  }, [key, size]);
+  return src;
+}
+function EntryThumbnail({
+  source,
+  request,
+  large = false,
+  className
+}) {
+  const src = useThumbnail(
+    source,
+    large ? PICTURE_SIZE : ENTRY_THUMBNAIL_SIZE,
+    request
+  );
+  if (!src) return null;
+  return (
+    // eslint-disable-next-line @next/next/no-img-element -- This library also renders outside Next.js.
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: join("clover-entry-thumbnail", className),
+        "data-large": large ? "" : void 0,
+        src,
+        alt: "",
+        ...!large && {
+          width: ENTRY_THUMBNAIL_SIZE / 2,
+          height: ENTRY_THUMBNAIL_SIZE / 2
+        },
+        loading: "lazy",
+        decoding: "async"
+      }
+    )
+  );
+}
+export {
+  ENTRY_THUMBNAIL_SIZE,
+  EntryThumbnail,
+  PICTURE_SIZE,
+  useThumbnail
+};

package/dist/ui/ExitFullscreen.mjs

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { toggleFullscreen } from "../lib/fullscreen.mjs";
 import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { languageProps } from "../i18n/direction.mjs";
 const ExitFullscreen = ({ hidden }) => {
   const { t, langOf } = useCloverTranslation();
   const label = t("imageExitFullScreen");
@@ -9,7 +10,7 @@ const ExitFullscreen = ({ hidden }) => {
     "button",
     {
       "aria-label": label,
-      lang: langOf("imageExitFullScreen"),
+      ...languageProps(langOf("imageExitFullScreen")),
       className: "clover-canvas-exit-full-screen",
       hidden,
       onClick: (event) => void toggleFullscreen(event.currentTarget),

package/dist/ui/FieldPill.mjs

@@ -6,6 +6,7 @@ import { join } from "../lib/classnames.mjs";
 import { Steps } from "./Steps.mjs";
 import { Tip } from "./Tip.mjs";
 import { visuallyHidden } from "./visuallyHidden.mjs";
+import { languageProps } from "../i18n/direction.mjs";
 const FieldPill = forwardRef(
   function FieldPill2({
     id,
@@ -36,7 +37,7 @@ const FieldPill = forwardRef(
             {
               htmlFor: id,
               style: visuallyHidden,
-              lang: langOf("informationPanelTabsSearch"),
+              ...languageProps(langOf("informationPanelTabsSearch")),
               children: t("informationPanelTabsSearch")
             }
           ),
@@ -60,7 +61,7 @@ const FieldPill = forwardRef(
               {
                 className: "clover-field-pill-note",
                 "aria-hidden": "true",
-                lang: langOf("contentSearchResultsNone"),
+                ...languageProps(langOf("contentSearchResultsNone")),
                 children: t("contentSearchResultsNone")
               }
             )
@@ -70,7 +71,7 @@ const FieldPill = forwardRef(
             {
               type: "button",
               className: join("clover-field-pill-clear", classes.clear),
-              lang: langOf("contentSearchClear"),
+              ...languageProps(langOf("contentSearchClear")),
               onClick: onClear,
               children: [
                 /* @__PURE__ */ jsx(
@@ -103,7 +104,7 @@ const FieldPill = forwardRef(
             {
               type: "submit",
               className: join("clover-field-pill-submit", classes.submit),
-              lang: langOf("commonSearch"),
+              ...languageProps(langOf("commonSearch")),
               children: [
                 /* @__PURE__ */ jsxs(
                   "svg",

package/dist/ui/HideToggle.mjs

@@ -3,6 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useUniqueId } from "./useUniqueId.mjs";
 import { Tip } from "./Tip.mjs";
 import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { languageProps } from "../i18n/direction.mjs";
 function HideToggle({
   hidden,
   onChange,
@@ -42,7 +43,7 @@ function HideToggle({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("span", { id, hidden: true, lang: langOf(key), children: t(key) }),
+    /* @__PURE__ */ jsx("span", { id, hidden: true, ...languageProps(langOf(key)), children: t(key) }),
     /* @__PURE__ */ jsx(
       Tip,
       {

package/dist/ui/LanguageChoice.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { autonym } from "../i18n/autonym.mjs";
+import { languageCode } from "../i18n/languageCode.mjs";
+import { Tip } from "./Tip.mjs";
+import { useContainerName } from "../i18n/useContainerName.mjs";
+import { useUniqueId } from "./useUniqueId.mjs";
+import { visuallyHidden } from "./visuallyHidden.mjs";
+import { languageProps } from "../i18n/direction.mjs";
+function LanguageChoice({
+  languages,
+  chosen,
+  onChange,
+  nameKey,
+  part
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const id = useUniqueId();
+  const name = useContainerName(t(nameKey), langOf(nameKey));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    name.node,
+    /* @__PURE__ */ jsx("fieldset", { ...name.props, className: `${part}-languages`, children: languages.map((tag) => {
+      const own = autonym(tag);
+      return /* @__PURE__ */ jsxs("label", { className: `${part}-language`, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name: `${id}-language`,
+            checked: tag === chosen,
+            onChange: () => onChange(tag)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: `${part}-language-code`, children: languageCode(tag) }),
+        " ",
+        /* @__PURE__ */ jsx("span", { style: visuallyHidden, ...languageProps(tag), children: own }),
+        /* @__PURE__ */ jsx(Tip, { label: own, lang: tag })
+      ] }, tag);
+    }) })
+  ] });
+}
+export {
+  LanguageChoice
+};

package/dist/ui/ListEnd.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+function ListEnd({ onReached }) {
+  const end = useRef(null);
+  const reached = useRef(onReached);
+  reached.current = onReached;
+  useEffect(() => {
+    const element = end.current;
+    if (!element || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((seen) => {
+      if (seen.some((each) => each.isIntersecting)) reached.current();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: end,
+      className: "clover-list-end",
+      "aria-hidden": "true",
+      style: { display: "block", height: 1 }
+    }
+  );
+}
+export {
+  ListEnd
+};