@nulib/clover 4.1.0 → 4.3.0

package/dist/templates/default/Default.mjs

@@ -24,6 +24,8 @@ function Default({
   panel = true,
   defaultPanelOpen,
   panelLayout = "accordion",
+  panelSections,
+  panelLabels,
   download = true,
   languages = true,
   items = "slider",
@@ -31,6 +33,7 @@ function Default({
   storageKey = "clover-template-default",
   fill = false,
   collapseControls,
+  canvasOptions,
   ...root
 }) {
   const panes = useRef(null);
@@ -43,6 +46,7 @@ function Default({
     beside: useWideEnough(panes, BESIDE_REM),
     defaultOpen: defaultPanelOpen ?? true,
     followFocus: useFollowFocus(),
+    sections: panelSections,
     body: () => {
       var _a;
       return (_a = panes.current) == null ? void 0 : _a.querySelector(
@@ -93,6 +97,7 @@ function Default({
                     {
                       className: "clover-template-default-body",
                       collapseControls,
+                      options: canvasOptions,
                       children: panel && !docked && pane.toggle
                     }
                   ),
@@ -112,6 +117,8 @@ function Default({
                 pane,
                 className: "clover-template-default-panel",
                 layout: panelLayout,
+                sections: panelSections,
+                labels: panelLabels,
                 download,
                 languages,
                 headingLevel: header ? below(headingLevel) : headingLevel

package/dist/templates/document/Document.mjs

@@ -27,11 +27,14 @@ function Document({
   singleItem = false,
   defaultPanelOpen = false,
   panelLayout = "accordion",
+  panelSections,
+  panelLabels,
   download = true,
   languages = true,
   headingLevel = 2,
   storageKey = "clover-template-document",
   collapseControls,
+  canvasOptions,
   ...root
 }) {
   const title = titled(
@@ -52,11 +55,14 @@ function Document({
           singleItem,
           defaultPanelOpen,
           panelLayout,
+          panelSections,
+          panelLabels,
           download,
           languages,
           headingLevel,
           storageKey,
-          collapseControls
+          collapseControls,
+          canvasOptions
         }
       )
     }
@@ -74,7 +80,10 @@ function DocumentLayout({
   headingLevel = 2,
   storageKey,
   panelLayout,
+  panelSections,
+  panelLabels,
   collapseControls,
+  canvasOptions,
   title
 }) {
   const t = useT();
@@ -101,7 +110,8 @@ function DocumentLayout({
     id: `${id}-panel`,
     beside: useWideEnough(panes, BESIDE_REM + (showSidebar ? SIDEBAR_REM : 0)),
     defaultOpen: Boolean(defaultPanelOpen),
-    followFocus
+    followFocus,
+    sections: panelSections
   });
   const reach = (event) => {
     var _a, _b;
@@ -234,7 +244,14 @@ function DocumentLayout({
               min: showSidebar && !sidebar.over || docked ? PAGE_MIN : void 0,
               children: [
                 pages && !sidebar.open && /* @__PURE__ */ jsx("div", { className: "clover-template-document-sidebar-closed", children: toggle }),
-                /* @__PURE__ */ jsx(Sheets, { collapseControls, children: !docked && panelToggle })
+                /* @__PURE__ */ jsx(
+                  Sheets,
+                  {
+                    collapseControls,
+                    canvasOptions,
+                    children: !docked && panelToggle
+                  }
+                )
               ]
             }
           ),
@@ -244,6 +261,8 @@ function DocumentLayout({
               pane: panel,
               className: "clover-template-document-panel",
               layout: panelLayout,
+              sections: panelSections,
+              labels: panelLabels,
               headingLevel: below(headingLevel),
               download: false,
               languages

package/dist/templates/document/Sheets.mjs

@@ -17,6 +17,7 @@ const ratioOf = (canvas) => {
 };
 function Sheets({
   collapseControls,
+  canvasOptions,
   children
 }) {
   const { clover } = useClover("Document");
@@ -307,6 +308,7 @@ function Sheets({
               {
                 className: "clover-template-document-body",
                 collapseControls,
+                options: canvasOptions,
                 onReady: setHandle,
                 children
               }

package/dist/templates/gallery/Gallery.mjs

@@ -25,11 +25,14 @@ function Gallery({
   panel = true,
   defaultPanelOpen = true,
   panelLayout = "accordion",
+  panelSections,
+  panelLabels,
   download = true,
   languages = true,
   storageKey = "clover-template-gallery",
   headingLevel = 2,
   collapseControls,
+  canvasOptions,
   style,
   ...root
 }) {
@@ -76,10 +79,13 @@ function Gallery({
             panel,
             defaultPanelOpen,
             panelLayout,
+            panelSections,
+            panelLabels,
             download,
             languages,
             storageKey,
-            collapseControls
+            collapseControls,
+            canvasOptions
           }
         )
       ]

package/dist/templates/index.d.mts

@@ -156,6 +156,39 @@ export interface RootProps extends Omit<React.HTMLAttributes<HTMLElement>, "chil
 	as?: React.ElementType;
 	children?: React.ReactNode;
 }
+export type BackendKind = "webgl2" | "canvas2d" | "none";
+export interface GestureOptions {
+	/**
+	 * A mouse click zooms in; with Shift, out. With this or `dblClickToZoom`, a double tap
+	 * (a finger, or a pen that does not hover) zooms in.
+	 */
+	clickToZoom: boolean;
+	/** A double click zooms in. Only consulted when `clickToZoom` is off. */
+	dblClickToZoom: boolean;
+	pinchToZoom: boolean;
+	/**
+	 * Plain wheel zooms. Off by default, matching Clover's OpenSeadragon setting, so an
+	 * embedded viewer never swallows page scroll. A trackpad pinch (a wheel event with
+	 * `ctrlKey`) always zooms the image, since it is never a page scroll.
+	 */
+	scrollToZoom: boolean;
+	/**
+	 * The reader may move the camera at all: drag, pinch, wheel, double-click and keys.
+	 * Off, the view stays where the host puts it and only taps are reported (a lone video
+	 * or sound, always fitted to the Body).
+	 */
+	navigable: boolean;
+	/**
+	 * A mouse or pen drag tracks the pointer 1:1 and glides on after a fast release. Off,
+	 * the drag is eased instead and stops where the pointer does. A finger always tracks 1:1 and flicks.
+	 */
+	flickEnabled: boolean;
+	/** Release speed, px/s, below which a drag does not flick. */
+	flickMinSpeed: number;
+	/** Seconds of release velocity the flick travels. */
+	flickMomentum: number;
+}
+export type BackendPreference = "auto" | BackendKind;
 /** A region of the image as shares of it: 0 to 1 across and down. */
 export interface RegionShare {
 	x: number;
@@ -174,6 +207,9 @@ export interface RegionShare {
  *   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.
+ * - A `thumbnail` whose own `width` and `height` already fit the size (`resolveThumbnail`)
+ *   is used as the manifest gives it, with no `info.json` read: the publisher's own URL,
+ *   not one built from what a service says.
  * - Without a service, the image itself is used.
  */
 export interface ThumbnailSource {
@@ -188,6 +224,58 @@ export interface ThumbnailSource {
 	region?: RegionShare | string;
 	/** Used if the service cannot answer. */
 	fallback?: string;
+	/** The pixels `fallback` is, as its own `width` and `height` say (a `thumbnail`'s). */
+	fallbackSize?: {
+		width: number;
+		height: number;
+	};
+}
+export interface CloverCanvasOptions {
+	/** Which painter to use. `auto` (default) tries WebGL2, then Canvas2D. */
+	backend?: BackendPreference;
+	/** Pointer, wheel and keyboard behavior. Wheel zoom is off by default. */
+	gestures?: Partial<GestureOptions>;
+	/** Largest zoom, in CSS pixels per image pixel. Default 1.1. */
+	maxZoomPixelRatio?: number;
+	/** Smallest zoom, as a fraction of the home zoom. Default 0.9. */
+	minZoomImageRatio?: number;
+	/** Seconds for an animation to close most of its distance. 0 disables easing. */
+	animationTime?: number;
+	/**
+	 * Seconds each animation (zoom, glide, home) takes, on a fixed-length spring. Unset,
+	 * the camera eases by `animationTime` instead.
+	 */
+	animationDuration?: number;
+	/** With `animationDuration`, how much of the movement comes early: higher starts faster. Default 6.5. */
+	springStiffness?: number;
+	/** Hold the image inside its bounds while dragging. Default true; false lets it spring back on release. */
+	constrainDuringPan?: boolean;
+	/**
+	 * Milliseconds the controls and navigator stay after a mouse (or a pen that hovers)
+	 * 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;
+	/** A time-based Canvas's video or sound. */
+	/**
+	 * An animation Canvas (painting annotations at `#t=` times, one per frame): play on
+	 * arrival, and loop at the end (the reader can turn looping off and on). Inside a `Root`,
+	 * `auto-advance` and `repeat` behaviors set them, and a Manifest's `auto-advance` moves
+	 * on when a non-looping animation ends (`onEnded`, as for video). Neither by default; a
+	 * reader asking for reduced motion is never autoplayed.
+	 */
+	animation?: {
+		autoplay?: boolean;
+		loop?: boolean;
+	};
+	/**
+	 * Credentials, headers and a custom `fetch` for every request the Canvas makes:
+	 * `info.json`, tiles, captions and HLS. A `<video>` or an image without CORS can only
+	 * send credentials. Inside a `Root`, the Root's `request` is used.
+	 */
+	request?: CloverRequest;
 }
 /**
  * What `Items` shows: light models of a Manifest's views or a Collection's members, never
@@ -310,8 +398,21 @@ export interface ItemsProps extends Omit<React.HTMLAttributes<HTMLElement>, "onS
 	}) => React.ReactNode;
 	as?: React.ElementType;
 }
+/**
+ * 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";
 /** 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>>;
 /** How an information panel lays out its sections. */
 export type PanelLayout = SectionsLayout;
 export type DefaultProps = Omit<RootProps, "children"> & {
@@ -335,6 +436,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;
 	/**
@@ -367,6 +481,8 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 * The Body's `collapseControls`.
 	 */
 	collapseControls?: "auto" | "always";
+	/** The Body's Canvas `options`: its gestures, zoom limits and motion. */
+	canvasOptions?: CloverCanvasOptions;
 };
 /**
  * The Viewer's own layout, drawn when no `template` is given: Clover 3.x's Viewer, built
@@ -380,7 +496,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, languages, items, singleItem, storageKey, fill, collapseControls, ...root }: DefaultProps): React.JSX.Element;
+export declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, items, singleItem, storageKey, fill, collapseControls, canvasOptions, ...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,
@@ -402,6 +518,19 @@ export type DocumentProps = Omit<RootProps, "children"> & {
 	 * Default's), 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 in the toolbar, as links: the page's and the Manifest's `rendering`. Default `true`. */
 	download?: boolean;
 	/**
@@ -426,6 +555,8 @@ export type DocumentProps = Omit<RootProps, "children"> & {
 	 * The Body's `collapseControls`.
 	 */
 	collapseControls?: "auto" | "always";
+	/** The Body's Canvas `options`: its gestures, zoom limits and motion. */
+	canvasOptions?: CloverCanvasOptions;
 };
 /**
  * A layout that reads like a PDF viewer: a toolbar, page thumbnails down the left, and
@@ -436,7 +567,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, singleItem, defaultPanelOpen, panelLayout, download, languages, headingLevel, storageKey, collapseControls, ...root }: DocumentProps): React.JSX.Element;
+export declare function Document({ className, defaultSidebarOpen, singleItem, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, headingLevel, storageKey, collapseControls, canvasOptions, ...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;
@@ -483,6 +614,19 @@ export type GalleryProps = Omit<RootProps, "children"> & {
 	defaultPanelOpen?: boolean;
 	/** How the panel lays out its sections: `"accordion"` (the default) 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 in the panel's About, where there is a `rendering`. Default `true`. */
 	download?: boolean;
 	/**
@@ -506,6 +650,8 @@ export type GalleryProps = Omit<RootProps, "children"> & {
 	 * Its lightbox's Body's `collapseControls`.
 	 */
 	collapseControls?: "auto" | "always";
+	/** Its lightbox's Body's Canvas `options`: its gestures, zoom limits and motion. */
+	canvasOptions?: CloverCanvasOptions;
 };
 /**
  * A grid framed by what it opens, that opens a cell in a lightbox with the Body and the
@@ -514,7 +660,7 @@ export type GalleryProps = Omit<RootProps, "children"> & {
  * 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, height, gap, items, secondary, summary, lightboxItems, panel, defaultPanelOpen, panelLayout, download, languages, storageKey, headingLevel, collapseControls, style, ...root }: GalleryProps): React.JSX.Element;
+export declare function Gallery({ className, size, height, gap, items, secondary, summary, lightboxItems, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, storageKey, headingLevel, collapseControls, canvasOptions, style, ...root }: GalleryProps): React.JSX.Element;
 export interface LightboxProps {
 	open: boolean;
 	onClose: () => void;
@@ -534,6 +680,19 @@ export interface LightboxProps {
 	defaultPanelOpen?: boolean;
 	/** The panel's sections as stacked boxes (`"accordion"`, the default) 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 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`. */
@@ -542,6 +701,8 @@ export interface LightboxProps {
 	storageKey?: string | false;
 	/** The Body's `collapseControls`: when the view's controls collapse behind one button. */
 	collapseControls?: "auto" | "always";
+	/** The Body's Canvas `options`: its gestures, zoom limits and motion. */
+	canvasOptions?: CloverCanvasOptions;
 	className?: string;
 }
 /**
@@ -554,9 +715,9 @@ export interface LightboxProps {
  * 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.
+ * Root is inert but what speaks, focus is on the view in its strip (on Close with the
+ * pager), Tab comes round inside it, and Escape, Close, Back or a press on the layer
+ * outside the panel closes it, focus going back to the grid's cell of the view shown.
  * 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:

package/dist/templates/shared/Lightbox.mjs

@@ -40,7 +40,7 @@ function Lightbox({
     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")
+      (child) => child !== element && !child.classList.contains("clover-announcer") && !child.classList.contains("clover-status")
     );
     others.forEach((child) => child.inert = true);
     (_b = (_a2 = panel.current) == null ? void 0 : _a2.scrollIntoView) == null ? void 0 : _b.call(_a2, { block: "nearest" });
@@ -48,9 +48,33 @@ function Lightbox({
       '[role="listbox"] [role="option"][aria-selected="true"]'
     );
     (_d = chosen ?? close.current) == null ? void 0 : _d.focus({ preventScroll: true });
+    const doc = element.ownerDocument;
+    let check;
+    const onTab = (event) => {
+      var _a3;
+      if (event.key !== "Tab" || !((_a3 = panel.current) == null ? void 0 : _a3.contains(event.target)))
+        return;
+      const back = event.shiftKey;
+      clearTimeout(check);
+      check = setTimeout(() => {
+        var _a4;
+        const dialog = panel.current;
+        if (!dialog || dialog.contains(doc.activeElement)) return;
+        const stops = stopsOf(dialog);
+        (_a4 = back ? stops.at(-1) : stops[0]) == null ? void 0 : _a4.focus();
+      });
+    };
+    doc.addEventListener("keydown", onTab, true);
     return () => {
+      var _a3, _b2;
+      doc.removeEventListener("keydown", onTab, true);
+      clearTimeout(check);
       others.forEach((child) => child.inert = false);
-      if (opener == null ? void 0 : opener.isConnected) opener.focus({ preventScroll: true });
+      const shown = (_a3 = opener == null ? void 0 : opener.closest('[role="listbox"]')) == null ? void 0 : _a3.querySelector('[role="option"][aria-selected="true"]');
+      const back = shown ?? opener;
+      if (!(back == null ? void 0 : back.isConnected)) return;
+      back.focus({ preventScroll: true });
+      (_b2 = back.scrollIntoView) == null ? void 0 : _b2.call(back, { block: "nearest" });
     };
   }, [open]);
   return /* @__PURE__ */ jsx(
@@ -63,7 +87,12 @@ function Lightbox({
         if (event.target === layer.current) onClose();
       },
       onKeyDown: (event) => {
-        if (event.key !== "Escape" || event.defaultPrevented) return;
+        if (event.defaultPrevented) return;
+        if (event.key === "Tab" && panel.current) {
+          wrapFocus(panel.current, event);
+          return;
+        }
+        if (event.key !== "Escape") return;
         event.preventDefault();
         closing.current();
       },
@@ -149,6 +178,24 @@ function Lightbox({
     }
   );
 }
+const STOPS = 'a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])';
+const stopsOf = (dialog) => Array.from(dialog.querySelectorAll(STOPS)).filter(
+  (stop) => {
+    var _a;
+    return stop.tabIndex >= 0 && !stop.matches(":disabled") && !stop.closest("[inert]") && (((_a = stop.checkVisibility) == null ? void 0 : _a.call(stop, { visibilityProperty: true })) ?? true);
+  }
+);
+function wrapFocus(dialog, event) {
+  const stops = stopsOf(dialog);
+  const first = stops[0];
+  const last = stops.at(-1);
+  if (!first || !last) return;
+  const at = dialog.ownerDocument.activeElement;
+  if (event.shiftKey ? at === first : at === last) {
+    event.preventDefault();
+    (event.shiftKey ? last : first).focus();
+  }
+}
 function Back({ onOut }) {
   const t = useT();
   const langOf = useLangOf();

package/dist/templates/shared/LightboxView.mjs

@@ -17,10 +17,13 @@ function LightboxView({
   panel = true,
   defaultPanelOpen = true,
   panelLayout = "accordion",
+  panelSections,
+  panelLabels,
   download = true,
   languages = true,
   storageKey,
-  collapseControls
+  collapseControls,
+  canvasOptions
 }) {
   const panes = useRef(null);
   useEffect(() => {
@@ -52,6 +55,7 @@ function LightboxView({
     beside: useWideEnough(panes, BESIDE_REM),
     defaultOpen: defaultPanelOpen,
     followFocus: useFollowFocus(),
+    sections: panelSections,
     body: () => {
       var _a;
       return (_a = panes.current) == null ? void 0 : _a.querySelector(
@@ -78,6 +82,7 @@ function LightboxView({
                 {
                   className: "clover-template-lightbox-body",
                   collapseControls,
+                  options: canvasOptions,
                   children: panel && !pane.docked && pane.toggle
                 }
               ),
@@ -104,6 +109,8 @@ function LightboxView({
           {
             pane,
             layout: panelLayout,
+            sections: panelSections,
+            labels: panelLabels,
             download,
             languages,
             headingLevel: (headingLevel ?? 3) + 1

package/dist/templates/shared/PanelPane.mjs

@@ -5,6 +5,7 @@ import { preloadDrag } from "./useDragToClose.mjs";
 import { useDrawer } from "./useDrawer.mjs";
 import { PANEL_MIN } from "./useSlide.mjs";
 import { useSpineTop } from "./useSpine.mjs";
+import { usePanelSections } from "../../components/Panel/sections.mjs";
 import { SplitHandle, SplitPane } from "../../components/Split/Split.mjs";
 import { PanelToggle } from "../../components/Panel/PanelToggle.mjs";
 function usePanelPane({
@@ -13,6 +14,7 @@ function usePanelPane({
   defaultOpen,
   followFocus,
   body,
+  sections,
   panel,
   load
 }) {
@@ -34,8 +36,9 @@ function usePanelPane({
     if (drawer.over) preloadDrag();
   };
   const toggle = /* @__PURE__ */ jsx(
-    PanelToggle,
+    PaneToggle,
     {
+      sections,
       open: drawer.open,
       onOpenChange: (next) => next && !panel && load ? load().then(() => drawer.setOpen(true)) : drawer.setOpen(next),
       controls: id
@@ -58,12 +61,20 @@ function usePanelPane({
     }
   };
 }
+function PaneToggle({
+  sections,
+  ...props
+}) {
+  return usePanelSections(sections).length ? /* @__PURE__ */ jsx(PanelToggle, { ...props }) : null;
+}
 function PanelPane({
   pane,
   className,
   ...panel
 }) {
   const { id, over, docked, Part } = pane;
+  const offered = usePanelSections(panel.sections);
+  if (!offered.length) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     docked && /* @__PURE__ */ jsx(
       SplitHandle,
@@ -80,6 +91,7 @@ function PanelPane({
         id,
         "data-spine": over || void 0,
         name: "panel",
+        "data-about": offered.includes("about") || void 0,
         className: ["clover-template-panel clover-template-drawer", className].filter(Boolean).join(" "),
         size: "24rem",
         min: over ? void 0 : PANEL_MIN,