@nulib/clover 4.0.0 → 4.1.0

package/dist/index.d.mts

@@ -282,13 +282,16 @@ export interface ContentStateOutput {
 	encoded: string;
 }
 /**
- * Where the reader is, as a content state: the Canvas within its Manifest, and the
- * visible region (`xywh=`) or the media time (`t=`) when there is one. Regions are
- * rounded to whole pixels.
+ * Where the reader is, as a content state: the Canvas (or Presentation 4's Timeline or
+ * Scene, by its `type`) within its Manifest, and the visible region (`xywh=`) or the
+ * media time (`t=`) when there is one. Regions are rounded to whole pixels. A Canvas
+ * shown on its own, outside a Manifest (one made around it carries its id, `loneCanvas`),
+ * is named without a `partOf`.
  */
-export declare function buildContentState({ manifestId, canvasId, region, time, }: {
-	manifestId: string;
+export declare function buildContentState({ manifestId, canvasId, type, region, time, }: {
+	manifestId?: string | null;
 	canvasId: string;
+	type?: string;
 	region?: {
 		x: number;
 		y: number;
@@ -653,8 +656,9 @@ 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`. */
@@ -988,6 +992,7 @@ export interface CloverCanvasOptions {
 	 * stops moving, as the Player's `hideDelay`. Default 2000; `Infinity` keeps them once
 	 * shown. A finger, or a pen that does not hover, has no timer: a tap on the picture
 	 * shows them, and another hides them. Focus that no press brought holds them too.
+	 * 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. */
@@ -1116,6 +1121,14 @@ export interface CloverCanvasProps {
 	 * the handle `onReady` passes (`home()`, `zoomBy(0.5)`) (WCAG 2.5.1).
 	 */
 	controls?: boolean | CanvasControlsConfig;
+	/**
+	 * When the view's controls (zoom in and out, the two turns, reset, full screen)
+	 * collapse behind one button, at the end of the controls' one row, so the row fits any
+	 * width and leaves the media more room: `"auto"` (the default), only where the row
+	 * cannot hold them all; `"always"`, wherever the Canvas offers any, so the row holds
+	 * only the rest. Pressed, the button opens a tray of them beside the rest.
+	 */
+	collapseControls?: "auto" | "always";
 	/** Replace any control with your own component — the `Viewer`'s `controlButtons`. */
 	controlButtons?: ControlButtons;
 	/**
@@ -1183,6 +1196,17 @@ export interface CloverCanvasProps {
 	manifestId?: string;
 	/** The visible world rectangle, at most once per frame while the camera moves. */
 	onViewportChange?: (bounds: Rect) => void;
+	/**
+	 * Where it is, as a IIIF content state, as it changes: as the Canvas changes, the
+	 * camera pans or zooms, or its media pauses or seeks. Both forms, the
+	 * annotation (`json`) and the same encoded for a URL (`encoded`); the Canvas, within its
+	 * Manifest (`manifestId`, the one it loaded, or its Root's), and the region in view or
+	 * the time. Of several shown together, it names the one filling most of the view.
+	 * Given `canvases`, it names no Manifest unless `manifestId` does; given only `src` or
+	 * `body`, it has no Canvas to name, and reports nothing. At most every 150ms while it
+	 * moves, always its last place, and only when it changed.
+	 */
+	onContentStateChange?: (state: ContentStateOutput) => void;
 	/**
 	 * A time-based Canvas's media element once it exists, and `null` when it goes: for a
 	 * host's own transcript, chapters or `#t=` seeks. Sound plays through a `<video>` too.
@@ -1260,7 +1284,7 @@ export type BodyProps = Omit<CloverCanvasProps, "canvases" | "body" | "src" | "i
  * shows Clover's loading mark, a line along its top edge, over what it still shows; it
  * keeps its size and its background, so nothing moves.
  */
-export declare function Body({ className, style, renderers, children, ...canvas }: BodyProps): React.JSX.Element;
+export declare function Body({ className, style, renderers, collapseControls, onContentStateChange, children, ...canvas }: BodyProps): React.JSX.Element;
 export interface LabelProps extends Omit<React.HTMLAttributes<HTMLElement>, "lang"> {
 	/** Whose label: the Manifest's (the default), or the current Canvas's. */
 	of?: "manifest" | "canvas";
@@ -1275,6 +1299,44 @@ export interface LabelProps extends Omit<React.HTMLAttributes<HTMLElement>, "lan
  * none.
  */
 export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLElement>>;
+/**
+ * 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";
 /**
  * What the pieces step through inside a Root: its views, its Collection's members, or a
  * content state's targets (Cookbook 0540).
@@ -1318,52 +1380,24 @@ export declare const Previous: React.ForwardRefExoticComponent<StepProps & React
 /** Go to the next item. `aria-disabled` on the last. */
 export declare const Next: React.ForwardRefExoticComponent<StepProps & React.RefAttributes<HTMLButtonElement>>;
 /**
- * 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.
+ * 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 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;
-}
-/**
- * A scrolling row of thumbnails (`slider`), a column, a wrapping grid, 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, or `pager`: Previous,
-	 * Position and Next, stepping one item at a time, with no thumbnails.
+	 * 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"`.
@@ -1405,6 +1439,12 @@ export interface ItemsProps extends Omit<React.HTMLAttributes<HTMLElement>, "onS
 	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. */
@@ -1967,7 +2007,7 @@ export declare function PanelToggle({ open, onOpenChange, controls, }: PanelTogg
  *   itself.
  */
 export declare const Canvas: React.FC<CloverCanvasProps>;
-export type TimelineProps = Omit<CloverCanvasProps, "canvases" | "body" | "src" | "isTiledImage" | "viewingDirection" | "navigator" | "onViewportChange" | "onReady" | "animateAnnotations"> & {
+export type TimelineProps = Omit<CloverCanvasProps, "canvases" | "body" | "src" | "isTiledImage" | "viewingDirection" | "navigator" | "collapseControls" | "onViewportChange" | "onReady" | "animateAnnotations"> & {
 	/**
 	 * A Presentation 4 Timeline to play: its sound, with what it carries (captions, a
 	 * transcript, annotations on its time, an accompanying or placeholder Canvas).
@@ -2060,6 +2100,13 @@ export interface SceneProps {
 	 * rest, and sparse accessors, which Clover's does not draw yet.
 	 */
 	engine?: "clover" | "three";
+	/**
+	 * Where it is, as a IIIF content state, each time the Scene shown changes: the Scene
+	 * within its Manifest (`manifestId`, the one it loaded, or its Root's), as the
+	 * annotation (`json`) and the same encoded for a URL (`encoded`). A content state has no
+	 * camera to carry, so turning or zooming the models leaves it as it is.
+	 */
+	onContentStateChange?: (state: ContentStateOutput) => void;
 	/** Rendered after the controls in the cluster: a host's own controls. */
 	children?: React.ReactNode;
 }
@@ -2503,6 +2550,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.
@@ -2515,8 +2567,14 @@ 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";
 };
-declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, download, languages, items, storageKey, fill, ...root }: DefaultProps): React.JSX.Element;
+declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, download, languages, items, singleItem, storageKey, fill, collapseControls, ...root }: DefaultProps): React.JSX.Element;
 /**
  * A layout the Viewer draws: one from `@nulib/clover/templates`, or a component of your
  * own that takes the `Clover.Root` props.

package/dist/lib/gltf/load.mjs

@@ -37,19 +37,21 @@ async function fetchBytes(uri, base, request) {
   return response.arrayBuffer();
 }
 const loading = /* @__PURE__ */ new WeakMap();
-function loadGltf(url, request) {
+function loadGltf(url, request, maxTextureSize) {
   const run = (request == null ? void 0 : request.fetch) ?? globalThis.fetch;
   const loads = loading.get(run) ?? /* @__PURE__ */ new Map();
   loading.set(run, loads);
-  const key = `${requestKey(request)} ${url}`;
+  const key = `${requestKey(request)} ${maxTextureSize ?? ""} ${url}`;
   let load = loads.get(key);
   if (!load) {
-    load = readGltf(url, request).finally(() => loads.delete(key));
+    load = readGltf(url, request, maxTextureSize).finally(
+      () => loads.delete(key)
+    );
     loads.set(key, load);
   }
   return load;
 }
-async function readGltf(url, request) {
+async function readGltf(url, request, maxTextureSize) {
   const data = await fetchBytes(url, location.href, request);
   const glb = new DataView(data).getUint32(0, true) === GLB;
   const { json, bin } = glb ? parseGlb(data) : { json: JSON.parse(new TextDecoder().decode(data)) };
@@ -88,10 +90,15 @@ async function readGltf(url, request) {
             type: image.mimeType
           });
         } else return null;
-        return await createImageBitmap(blob, {
+        const options = {
           premultiplyAlpha: "none",
           colorSpaceConversion: "none"
-        });
+        };
+        return await fitted(
+          await createImageBitmap(blob, options),
+          maxTextureSize,
+          options
+        );
       } catch {
         return null;
       }
@@ -99,6 +106,19 @@ async function readGltf(url, request) {
   );
   return { json, buffers, images };
 }
+async function fitted(bitmap, most, options) {
+  const longest = Math.max(bitmap.width, bitmap.height);
+  if (!most || longest <= most) return bitmap;
+  const ratio = most / longest;
+  const resized = await createImageBitmap(bitmap, {
+    ...options,
+    resizeWidth: Math.max(1, Math.floor(bitmap.width * ratio)),
+    resizeHeight: Math.max(1, Math.floor(bitmap.height * ratio)),
+    resizeQuality: "high"
+  });
+  bitmap.close();
+  return resized;
+}
 const COMPONENTS = {
   SCALAR: 1,
   VEC2: 2,

package/dist/lib/renderer/CanvasRenderer.mjs

@@ -4,7 +4,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { claimContext, returnContext } from "./backends/contexts.mjs";
 import { WebGL2Backend } from "./backends/webgl2/WebGL2Backend.mjs";
-import { fitCamera, visibleWorldRect, screenPointToWorld, anchoredCenter, worldPointToScreen, sameCamera } from "./camera/Camera.mjs";
+import { fitCamera, anchoredCenter, visibleWorldRect, screenPointToWorld, worldPointToScreen, sameCamera } from "./camera/Camera.mjs";
 import { CameraAnimator } from "./camera/CameraAnimator.mjs";
 import { GestureController, DEFAULT_GESTURES } from "./input/GestureController.mjs";
 import { TileCache } from "./io/TileCache.mjs";
@@ -12,7 +12,7 @@ import { loadImage } from "./io/decode.mjs";
 import { FrameLoop } from "./loop/FrameLoop.mjs";
 import { uploadBudget } from "./scene/uploadBudget.mjs";
 import { apply, compose, rotate, scale } from "./math/affine.mjs";
-import { union, clamp, transformRect } from "./math/rect.mjs";
+import { union, rectCenter, clamp, transformRect } from "./math/rect.mjs";
 import { planFrame } from "./scene/planFrame.mjs";
 import { sameSpec, prepareItem, layoutItems, pixelsToWorld, itemToWorld, MEDIA_KEY_PREFIX } from "./scene/sceneItem.mjs";
 const DEFAULTS = {
@@ -29,15 +29,15 @@ const MAX_CONTEXT_LOSSES = 3;
 const ANNOTATION_PADDING = 0.1;
 const ZOOM_EPSILON = 1e-6;
 const NO_INSET = { top: 0, right: 0, bottom: 0, left: 0 };
-function readInset(host) {
-  if (typeof getComputedStyle !== "function") return NO_INSET;
-  const style = getComputedStyle(host);
-  const px = (value) => parseFloat(value) || 0;
+function readInset(element, box = "padding") {
+  if (!element || typeof getComputedStyle !== "function") return NO_INSET;
+  const style = getComputedStyle(element);
+  const px = (side) => parseFloat(style.getPropertyValue(`${box}-${side}`)) || 0;
   return {
-    top: px(style.paddingTop),
-    right: px(style.paddingRight),
-    bottom: px(style.paddingBottom),
-    left: px(style.paddingLeft)
+    top: px("top"),
+    right: px("right"),
+    bottom: px("bottom"),
+    left: px("left")
   };
 }
 const sameInset = (a, b) => a.top === b.top && a.right === b.right && a.bottom === b.bottom && a.left === b.left;
@@ -329,20 +329,38 @@ class CanvasRenderer {
     }
     return true;
   }
-  /** Frame `bounds` (world units) in the viewport. */
-  fitBounds(bounds, immediate = false) {
-    const target = fitCamera(
-      bounds,
-      this.viewport,
-      this.camera.destination.rotation,
-      0
-    );
+  /** Frame `bounds` (world units) in the viewport, or in the part of it `inset` leaves. */
+  fitBounds(bounds, immediate = false, inset = NO_INSET) {
+    const target = this.fit(bounds, this.camera.destination.rotation, inset);
     this.atHome = false;
     this.animateTo(
       this.constrain(target, { allowBeyondLimits: true }),
       immediate
     );
   }
+  /**
+   * The camera that frames `bounds`, turned by `rotation`, in the part of the viewport
+   * `inset` leaves: centered there, off the viewport's center where its sides differ.
+   */
+  fit(bounds, rotation, { top, right, bottom, left }) {
+    const { width, height } = this.viewport;
+    const { zoom } = fitCamera(
+      bounds,
+      {
+        width: Math.max(1, width - left - right),
+        height: Math.max(1, height - top - bottom)
+      },
+      rotation
+    );
+    const center = anchoredCenter(
+      rectCenter(bounds),
+      { x: (width + left - right) / 2, y: (height + top - bottom) / 2 },
+      zoom,
+      rotation,
+      this.viewport
+    );
+    return { ...center, zoom, rotation };
+  }
   /**
    * Zoom to a rectangle in item `index`'s own coordinates — an annotation's `xywh` — with
    * OpenSeadragon's padding.
@@ -351,8 +369,12 @@ class CanvasRenderer {
     const world = this.itemRectToWorld(index, rect);
     if (world) this.fitAnnotation(world, immediate);
   }
-  /** Zoom to a world rectangle with OpenSeadragon's annotation padding. */
+  /**
+   * Zoom to a world rectangle with OpenSeadragon's annotation padding, clear of the
+   * controls over the view (the hotspots' layer's scroll padding, `Annotations.css`).
+   */
   fitAnnotation(world, immediate = false) {
+    var _a;
     const first = this.items[0];
     if (!first) return;
     const pad = first.rect.width * ANNOTATION_PADDING;
@@ -363,7 +385,8 @@ class CanvasRenderer {
         width: world.width + pad * 2,
         height: world.height + pad * 2
       },
-      immediate
+      immediate,
+      readInset((_a = this.overlays) == null ? void 0 : _a.container, "scroll-padding")
     );
   }
   /** The world rectangle currently visible (its bounding box when rotated). */
@@ -663,18 +686,7 @@ class CanvasRenderer {
     if (!this.worldBounds) return null;
     const turn = 2 * Math.PI;
     const upright = Math.round(this.camera.destination.rotation / turn) * turn || 0;
-    const { top, right, bottom, left } = this.inset;
-    const camera = fitCamera(
-      this.worldBounds,
-      {
-        width: Math.max(1, this.viewport.width - left - right),
-        height: Math.max(1, this.viewport.height - top - bottom)
-      },
-      upright
-    );
-    camera.x -= (left - right) / 2 / camera.zoom;
-    camera.y -= (top - bottom) / 2 / camera.zoom;
-    return camera;
+    return this.fit(this.worldBounds, upright, this.inset);
   }
   /**
    * Keep the camera usable: zoom within limits, and the center over the world so the

package/dist/lib/renderer/camera/Camera.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { apply, compose, rotate, translate, scale } from "../math/affine.mjs";
+import { apply, compose, rotate, scale, translate } from "../math/affine.mjs";
 import { transformRect, rectCenter } from "../math/rect.mjs";
 function worldToScreen(camera, viewport) {
   return compose(

package/dist/react/useContentStateOutput.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { useEffect, useRef, useCallback } from "react";
+const REPORT_MS = 100;
+function useContentStateOutput(read, onChange) {
+  const latest = useRef({ read, onChange });
+  latest.current = { read, onChange };
+  const timer = useRef(void 0);
+  const last = useRef("");
+  useEffect(
+    () => () => {
+      clearTimeout(timer.current);
+      timer.current = void 0;
+    },
+    []
+  );
+  return useCallback(() => {
+    if (!latest.current.onChange || timer.current !== void 0) return;
+    timer.current = setTimeout(() => {
+      var _a, _b;
+      timer.current = void 0;
+      const state = latest.current.read();
+      if (!state || state.encoded === last.current) return;
+      last.current = state.encoded;
+      (_b = (_a = latest.current).onChange) == null ? void 0 : _b.call(_a, state);
+    }, REPORT_MS);
+  }, []);
+}
+function watchMedia(element, changed) {
+  element == null ? void 0 : element.addEventListener("pause", changed);
+  element == null ? void 0 : element.addEventListener("seeked", changed);
+  return () => {
+    element == null ? void 0 : element.removeEventListener("pause", changed);
+    element == null ? void 0 : element.removeEventListener("seeked", changed);
+  };
+}
+function useRootContentState(clover, onChange) {
+  const changed = useContentStateOutput(
+    () => clover.getContentState(),
+    onChange
+  );
+  const enabled = Boolean(onChange);
+  useEffect(() => {
+    if (!enabled) return;
+    let canvasId = clover.store.get().canvasId;
+    const offStore = clover.store.subscribe(() => {
+      const next = clover.store.get().canvasId;
+      if (next !== canvasId) {
+        canvasId = next;
+        changed();
+      }
+    });
+    const offViewport = clover.viewport.subscribe(changed);
+    let offElement = watchMedia(clover.media.get(), changed);
+    const offMedia = clover.media.subscribe((element) => {
+      offElement();
+      offElement = watchMedia(element, changed);
+    });
+    changed();
+    return () => {
+      offStore();
+      offViewport();
+      offMedia();
+      offElement();
+    };
+  }, [clover, enabled, changed]);
+}
+export {
+  useContentStateOutput,
+  useRootContentState,
+  watchMedia
+};