@nulib/clover 4.0.0 → 4.1.0

package/dist/templates/index.d.mts

@@ -3,6 +3,11 @@
 import * as P4 from '@iiif/parser/presentation-4/types';
 import React from 'react';
 
+/**
+ * IIIF language maps as text: the closest language to the reader's, and that language's
+ * tag, so the text can carry a `lang` attribute.
+ */
+export type LanguageMapLike = string | Record<string, string[] | string | undefined> | null | undefined;
 export type Presentation4Canvas = P4.Canvas;
 export type Presentation4Scene = P4.Scene;
 export type Presentation4Timeline = P4.Timeline;
@@ -142,19 +147,169 @@ export interface RootProps extends Omit<React.HTMLAttributes<HTMLElement>, "chil
 	 */
 	annotationPages?: "view" | "all";
 	/**
-	 * Where the reader is, as a IIIF content state, whenever it settles: after a move, a
-	 * pan or zoom, or a pause or seek in media. Debounced, and only when it changed.
+	 * Where the reader is, as a IIIF content state, as it changes: a move, a pan or zoom,
+	 * or a pause or seek in media. At most every 150ms while it moves, always its last
+	 * place, and only when it changed.
 	 */
 	onContentStateChange?: (state: ContentStateOutput) => void;
 	/** The element to render. Default `div`. */
 	as?: React.ElementType;
 	children?: React.ReactNode;
 }
+/** A region of the image as shares of it: 0 to 1 across and down. */
+export interface RegionShare {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+/**
+ * A small picture of a IIIF resource, for a list or a strip of them.
+ *
+ * - The resource's own `thumbnail` comes first; then, for a Canvas, the first image it
+ *   paints; then its placeholder or accompanying Canvas's (video and sound).
+ * - An image service is asked for nothing until its own `info.json` has been read (the
+ *   renderer's cached fetch, so a Canvas shown later does not ask again), and then only
+ *   as strictly as it says it can answer (`sizedImageUrl`): never more than the image has,
+ *   nor than its limits, at level 0 only a size it lists (Mat, 2026-10-24: "be
+ *   responsible when making IIIF image server requests"). What a manifest says of a
+ *   service is not trusted to say what its server does.
+ * - Without a service, the image itself is used.
+ */
+export interface ThumbnailSource {
+	/** Ready to use: an image with no service. */
+	src?: string;
+	/** An image service: its `info.json` is read before a URL is made (`resolveThumbnail`). */
+	service?: string;
+	/**
+	 * Only part of the image: shares of it (a target's region), or a region in Image API
+	 * syntax in the service's own pixels (a painting's selector), read against its `info.json`.
+	 */
+	region?: RegionShare | string;
+	/** Used if the service cannot answer. */
+	fallback?: string;
+}
+/**
+ * What `Items` shows: light models of a Manifest's views or a Collection's members, never
+ * the resources themselves, so a long sequence costs a few fields per item.
+ *
+ * Memoized on the resource object, as the selectors are.
+ */
+export interface ItemPart {
+	id: string;
+	type: string;
+	label?: LanguageMapLike;
+	/** The resource, for a thumbnail and for `renderItem`. */
+	resource: unknown;
+	/** Seconds, for video and sound. */
+	duration?: number;
+	/** What it mostly paints: `Image`, `Video`, `Audio` (`Sound` in Presentation 3) or `Model`. */
+	media?: string;
+	/**
+	 * Its picture, where it is not the resource's own: a region of its Canvas (a content
+	 * state's target, Cookbook 0540). Null for none.
+	 */
+	source?: ThumbnailSource | null;
+}
+export interface ItemModel {
+	/** The first Canvas of a view, or a member's id. What selecting it goes to. */
+	id: string;
+	/** A Canvas view: one Canvas, or a spread. A member: itself. */
+	parts: ItemPart[];
+	label?: LanguageMapLike;
+	summary?: LanguageMapLike;
+	/** A member's date for navigation, as written (Cookbook 0318). */
+	navDate?: string;
+	/** Where a link to a member goes: its `homepage`, else its id. */
+	href?: string;
+	/** That homepage's own language, where its `language` gives one. */
+	hrefLang?: string;
+}
+/** The line under an item's label: its summary, its date (`navDate`), or neither. */
+export type ItemSecondary = "summary" | "navDate" | "none";
 /**
- * A scrolling row of thumbnails (`slider`), a column, a wrapping grid, or one item at a
- * time (`pager`: Previous, Position and Next).
+ * A scrolling row of thumbnails (`slider`), a column, a wrapping grid, a grid whose
+ * pictures keep their proportions (`masonry`), or one item at a time (`pager`: Previous,
+ * Position and Next).
  */
-export type ItemsLayout = "slider" | "list" | "grid" | "pager";
+export type ItemsLayout = "slider" | "list" | "grid" | "masonry" | "pager";
+export interface ItemsProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect" | "children"> {
+	/**
+	 * A scrolling row (the default), a column, a wrapping grid, `masonry`, or `pager`:
+	 * Previous, Position and Next, stepping one item at a time, with no thumbnails.
+	 * `masonry` is a grid whose pictures keep their own proportions, each item packed up
+	 * under the one above it, still in reading order, left to right.
+	 */
+	layout?: ItemsLayout;
+	/**
+	 * The line under an item's label, where it has one (a Collection's members do): its
+	 * `summary` (the default), its `navDate`, or `none`. Default `"summary"`.
+	 */
+	secondary?: ItemSecondary;
+	/**
+	 * The pager's size: `large` (the default), round controls; or `small`, its steps and
+	 * count as Search's are, for a header's line. Default `"large"`.
+	 */
+	size?: "large" | "small";
+	/**
+	 * Inside a `Root`: the Manifest's views (default), the members of the Collection it
+	 * belongs to, choosing one to show, a content state's targets, where it names two or
+	 * more (Cookbook 0540), each opening its Manifest at its place, or annotations walked as
+	 * one whole: the AnnotationPage or AnnotationCollection given as the content, else the
+	 * AnnotationCollection its annotation pages are part of (Cookbook 0309), each picked
+	 * and framed on its Canvas.
+	 */
+	of?: "views" | "members" | "targets" | "annotations";
+	/**
+	 * Standalone: a Collection (its members), a Manifest (its views) or a URL to one. Inside
+	 * a `Root`, leave it out to list the Root's views.
+	 */
+	iiifContent?: IIIFContent;
+	/** Standalone: a list of IIIF resources (Manifests, Collections, Canvases) as they are. */
+	items?: unknown[];
+	/**
+	 * `id` selects: a listbox whose options go to a view (in a `Root`). `homepage` leaves: a
+	 * list of links to each item's `homepage`. Defaults to `id` for views and `homepage`
+	 * for a Collection's members or a list.
+	 */
+	navigation?: "id" | "homepage";
+	/**
+	 * An item was chosen, with the click's or the key's own event. For a link, call
+	 * `event.preventDefault()` to stay on the page and handle it yourself.
+	 */
+	onSelect?: (item: ItemModel, event: React.SyntheticEvent) => void;
+	/** Standalone: show the resource's label, summary and homepage link. Default true. */
+	header?: boolean;
+	/**
+	 * Standalone: the level of the header's title, to fit the outline of the page around
+	 * it (a slider under an `h2` takes 3). Default 2.
+	 */
+	headingLevel?: number;
+	/** Pixels requested for each thumbnail's longer side. Default 200. */
+	thumbnailSize?: number;
+	/**
+	 * Inside a `Root`: list the views even where there is only one, as a gallery's grid
+	 * does. The pager, with nothing to step to, still draws nothing. Default `false`: one
+	 * view has nothing to choose between.
+	 */
+	singleItem?: boolean;
+	/** Standalone: credentials, headers and `fetch`. In a `Root`, the Root's are used. */
+	request?: CloverRequest;
+	/** Standalone: the language to read IIIF text in. */
+	language?: string;
+	/**
+	 * Clover's higher-contrast mode: 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. Inside a `Root`, the Root's too; on wherever the reader's system asks for more
+	 * contrast. Default `false`.
+	 */
+	highContrast?: boolean;
+	/** Replace an item's figure with your own. */
+	renderItem?: (item: ItemModel, state: {
+		selected: boolean;
+	}) => React.ReactNode;
+	as?: React.ElementType;
+}
 /** How the sections are laid out. */
 export type SectionsLayout = "tabs" | "accordion";
 /** How an information panel lays out its sections. */
@@ -189,6 +344,11 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	languages?: boolean;
 	/** The thumbnails under the Body: a layout, or `false` for none. Default `slider`. */
 	items?: Exclude<ItemsLayout, "pager"> | false;
+	/**
+	 * The thumbnails even where the resource has one view, which has nothing to choose
+	 * between. Default `false`.
+	 */
+	singleItem?: boolean;
 	/**
 	 * Where the panel's width is remembered once the reader drags its bar
 	 * (`localStorage`). Default `"clover-template-default"`; `false` forgets it.
@@ -201,6 +361,12 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 * `--clover-body-height` tall, and the layout as tall as it needs.
 	 */
 	fill?: boolean;
+	/**
+	 * When the Body's view controls (zoom, the turns, reset, full screen) wait behind
+	 * More: `"auto"` (the default), only where its row cannot hold them all; `"always"`.
+	 * The Body's `collapseControls`.
+	 */
+	collapseControls?: "auto" | "always";
 };
 /**
  * The Viewer's own layout, drawn when no `template` is given: Clover 3.x's Viewer, built
@@ -214,13 +380,18 @@ 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, languages, items, storageKey, fill, ...root }: DefaultProps): React.JSX.Element;
+export declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, download, languages, items, singleItem, storageKey, fill, collapseControls, ...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,
 	 * where they would float over the page, they start put away.
 	 */
 	defaultSidebarOpen?: boolean;
+	/**
+	 * The page thumbnails, and their toggle, even where the resource has one page, which
+	 * has nothing to choose between. Default `false`.
+	 */
+	singleItem?: boolean;
 	/**
 	 * Whether the information panel starts open beside the page. Default `false`. Where it
 	 * has no room there and would slide over the page, it starts closed.
@@ -249,6 +420,12 @@ export type DocumentProps = Omit<RootProps, "children"> & {
 	 * (`localStorage`). Default `"clover-template-document"`; `false` forgets it.
 	 */
 	storageKey?: string | false;
+	/**
+	 * When the Body's view controls (zoom, the turns, reset, full screen) wait behind
+	 * More: `"auto"` (the default), only where its row cannot hold them all; `"always"`.
+	 * The Body's `collapseControls`.
+	 */
+	collapseControls?: "auto" | "always";
 };
 /**
  * A layout that reads like a PDF viewer: a toolbar, page thumbnails down the left, and
@@ -259,36 +436,141 @@ 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, languages, headingLevel, storageKey, ...root }: DocumentProps): React.JSX.Element;
+export declare function Document({ className, defaultSidebarOpen, singleItem, defaultPanelOpen, panelLayout, download, languages, headingLevel, storageKey, collapseControls, ...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;
+	/**
+	 * The Gallery's height: `"auto"` (the default) grows with its grid; a number (pixels)
+	 * or any CSS length fixes it, its padding inside, and the grid scrolls under the header.
+	 */
+	height?: number | string;
+	/**
+	 * The space between the grid's cells: a number (pixels) or any CSS length. Default the
+	 * Gallery's inset, `--clover-inset`.
+	 */
+	gap?: number | string;
+	/**
+	 * The grid, as its Items' layout: `grid`, square cells, or `masonry`, each picture at
+	 * its own proportions. Default `grid`.
+	 */
+	items?: Extract<ItemsLayout, "grid" | "masonry">;
+	/**
+	 * The line under each cell's label, where it has one (a Collection's members do): its
+	 * `summary`, its `navDate`, or `none`. Default `summary`.
+	 */
+	secondary?: ItemsProps["secondary"];
+	/**
+	 * The resource's summary under the title, cut to two lines with Read more under it where
+	 * it runs longer. Default `true`; `false` leaves it out, the title alone over the grid.
+	 */
+	summary?: boolean;
+	/**
+	 * How the lightbox moves on from the view it shows: a short strip of thumbnails
+	 * (`slider`, Items' carousel), or `pager`, Previous, the position and Next. Default
+	 * `slider`.
+	 */
+	lightboxItems?: "slider" | "pager";
+	/**
+	 * The information panel beside the lightbox's view, as Default's and Document's is
+	 * beside theirs, and its toggle. Default `true`.
+	 */
+	panel?: boolean;
+	/**
+	 * Whether the panel starts open beside the lightbox's view. Default `true`. Where it has
+	 * no room there and would slide over the view, it starts closed.
+	 */
+	defaultPanelOpen?: boolean;
+	/** How the panel lays out its sections: `"accordion"` (the default) or `"tabs"`. */
+	panelLayout?: PanelLayout;
+	/** The downloads in the panel's About, where there is a `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;
+	/**
+	 * Where the panel's width is remembered once the reader drags its bar
+	 * (`localStorage`). Default `"clover-template-gallery"`; `false` forgets it.
+	 */
+	storageKey?: string | false;
 	/**
 	 * The title's heading level, to fit the outline of the page around the layout (under
 	 * an `h2`, 3). The lightbox's title is a level below it. Default 2.
 	 */
 	headingLevel?: number;
+	/**
+	 * When the Body's view controls (zoom, the turns, reset, full screen) wait behind
+	 * More: `"auto"` (the default), only where its row cannot hold them all; `"always"`.
+	 * Its lightbox's Body's `collapseControls`.
+	 */
+	collapseControls?: "auto" | "always";
 };
 /**
- * A grid of the Manifest's views — a spread is one cell — that opens one in a lightbox
- * with the Body and the pager. Escape, the close button, or a press outside closes it,
- * and focus returns to the cell.
+ * A grid framed by what it opens, that opens a cell in a lightbox with the Body and the
+ * pager. A Manifest: its title and summary, and a cell for each view (a spread is one
+ * cell). A Collection: its own title and summary, and a cell for each member, which
+ * shows that Manifest in the lightbox. Escape, the close button, or a press outside
+ * closes it, and focus returns to the cell.
  */
-export declare function Gallery({ className, size, headingLevel, style, ...root }: GalleryProps): React.JSX.Element;
+export declare function Gallery({ className, size, height, gap, items, secondary, summary, lightboxItems, panel, defaultPanelOpen, panelLayout, download, languages, storageKey, headingLevel, collapseControls, style, ...root }: GalleryProps): React.JSX.Element;
 export interface LightboxProps {
 	open: boolean;
 	onClose: () => void;
 	/** The level of its title, a level under the layout's. Default 3. */
 	headingLevel?: number;
+	/**
+	 * How the reader moves on from the view shown: a short strip of thumbnails (`slider`,
+	 * Items' carousel), or `pager`, Previous, the position and Next. Default `slider`.
+	 */
+	items?: "slider" | "pager";
+	/**
+	 * The information panel beside the view, as every template's is (`PanelPane`): its
+	 * toggle among the Body's controls, or on the bar beside it. Default `true`.
+	 */
+	panel?: boolean;
+	/** Whether the panel starts open beside the view; over it, closed. Default `true`. */
+	defaultPanelOpen?: boolean;
+	/** The panel's sections as stacked boxes (`"accordion"`, the default) or tabs. */
+	panelLayout?: PanelLayout;
+	/** The downloads in the panel's About, where there is a `rendering`. Default `true`. */
+	download?: boolean;
+	/** The languages to read the resource in, beside the panel's About heading. Default `true`. */
+	languages?: boolean;
+	/** Where the panel's width is remembered once dragged; `false` forgets it. */
+	storageKey?: string | false;
+	/** The Body's `collapseControls`: when the view's controls collapse behind one button. */
+	collapseControls?: "auto" | "always";
 	className?: string;
 }
 /**
- * The current Canvas in a modal `<dialog>`: its label, the Body, and the pager (with the
- * position). A native dialog keeps focus inside, closes on Escape, and returns focus to
- * whatever opened it. The Body mounts only while open, so it is sized when drawn, and its
- * code loads the first time (`preloadLightbox` starts it sooner): until then its box holds
- * its place, busy, while the title, Close and the pager are already there.
+ * The current Canvas in a modal layer over the layout, and only the layout (Mat,
+ * 2026-10-30: "backdrop should not extend beyond the bounds of the template"): over it,
+ * a step back to the level it opened from, the Manifest's label as its title (Mat,
+ * 2026-11-01: "the Manifest label stay up here in the title and be more obvious as a
+ * heading") and Close; then the Body, the view's label under it (Mat, 2026-11-01: "move
+ * the Canvas/Scene/Timeline label below the item"), and a short strip of thumbnails (Mat,
+ * 2026-11-01: "carousel by default") or the pager (with the position). A modal
+ * `<dialog>`'s backdrop always covers the whole window, so this is a layer in the Root, a
+ * `dialog` to assistive technology, named by its title: while it is open the rest of the
+ * Root is inert, focus is on the view in its strip (on Close with the pager), and Escape,
+ * Close, Back or a press on the layer outside the panel closes it, focus going back to
+ * what opened it.
+ * By default it fills the layout's bounds; `--clover-template-lightbox-inset`,
+ * `-backdrop` and `-radius` give it room, a backdrop and corners (`Lightbox.css`). The
+ * layout positions it and holds its stacking (`position: relative` and `isolation:
+ * isolate`, as the Gallery does), so its layer never stacks over the page around it.
+ *
+ * Beside the view, the information panel, as every template's is (`PanelPane`; Mat,
+ * 2026-11-01: "show the pane like we have for document/default"), its every interaction
+ * theirs.
+ *
+ * Its view mounts only while open, so it is sized when drawn, and its code (the Body, the
+ * panes and the panel's pane) loads the first time (`preloadLightbox` starts it sooner):
+ * until then a busy box holds its place under the title and Close. The Panel's own code
+ * loads as it opens, the chunk Document's is (`PanelPart`).
  */
-export declare function Lightbox({ open, onClose, headingLevel, className, }: LightboxProps): React.JSX.Element;
+export declare function Lightbox({ open, onClose, headingLevel, items, className, ...view }: LightboxProps): React.JSX.Element;
 
 export {};

package/dist/templates/shared/Lightbox.mjs

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