react-iiif-vault 0.9.15 → 0.9.18

package/dist/bundle/esm/index.mjs

@@ -30,12 +30,13 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
-import React__default, { useContext, useMemo, useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, Fragment, useReducer } from "react";
-import { AtlasAuto, mergeStyles, RegionHighlight, TileSet } from "@atlas-viewer/atlas";
+import React__default, { useContext, useMemo, useState, useEffect, useCallback, createContext, useRef, useLayoutEffect, Fragment, useReducer } from "react";
+import { AtlasAuto, mergeStyles, RegionHighlight, TileSet, HTMLPortal } from "@atlas-viewer/atlas";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { globalVault, Vault } from "@iiif/vault";
 import { createAction } from "typesafe-actions";
-import require$$0 from "react-dom";
+import { createRoot } from "react-dom/client";
+import { expandTarget as expandTarget$1 } from "@iiif/vault-helpers";
 import { ImageServiceLoader, getImageServices, getFixedSizeFromImage } from "@atlas-viewer/iiif-image-api";
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf2(o2, p2) {
@@ -131,7 +132,8 @@ const defaultResourceContext = {
   manifest: void 0,
   range: void 0,
   canvas: void 0,
-  annotation: void 0
+  annotation: void 0,
+  annotationPage: void 0
 };
 const ResourceReactContext = React__default.createContext(defaultResourceContext);
 const useResourceContext = () => {
@@ -267,6 +269,238 @@ function useVisibleCanvases() {
     return ids.map((id) => state.iiif.entities.Canvas[id]).filter(Boolean);
   }, [ids]);
 }
+function useManifest(options = {}, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  useVault();
+  const manifestId = id ? id : ctx.manifest;
+  const manifest = useVaultSelector((s) => manifestId ? s.iiif.entities.Manifest[manifestId] : void 0, [manifestId]);
+  return useMemo(() => {
+    if (!manifest) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(manifest);
+    }
+    return manifest;
+  }, [manifest, selector, ...deps]);
+}
+function RangeContext({
+  range,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      range
+    },
+    children
+  });
+}
+function findFirstCanvasFromRange(vault, range) {
+  for (const inner of range.items) {
+    if (inner.type === "Canvas") {
+      return inner;
+    }
+    if (inner.type === "Range") {
+      const found = findFirstCanvasFromRange(vault, vault.get(inner));
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+function findAllCanvasesInRange(vault, range) {
+  const found = [];
+  for (const inner of range.items) {
+    if (inner.type === "Canvas") {
+      if (inner.id.indexOf("#") !== -1) {
+        found.push({ id: inner.id.split("#")[0], type: "Canvas" });
+      } else {
+        found.push(inner);
+      }
+    }
+    if (inner.type === "Range") {
+      found.push(...findAllCanvasesInRange(vault, vault.get(inner)));
+    }
+    if (inner.type === "SpecificResource") {
+      const sourceId = typeof inner.source === "string" ? inner.source : inner.source.id;
+      found.push({ id: sourceId, type: "Canvas" });
+    }
+  }
+  return found;
+}
+function findManifestSelectedRange(vault, manifest, canvasId) {
+  for (const range of manifest.structures) {
+    const found = findSelectedRange(vault, vault.get(range), canvasId);
+    if (found) {
+      return found;
+    }
+  }
+  return null;
+}
+function findSelectedRange(vault, range, canvasId) {
+  var _a;
+  for (const inner of range.items) {
+    const parsedId = (_a = inner.id) == null ? void 0 : _a.split("#")[0];
+    if (inner.type === "SpecificResource" && inner.source === canvasId) {
+      return range;
+    }
+    if (inner.type === "Canvas" && canvasId === parsedId) {
+      return range;
+    }
+    if (inner.type === "Range") {
+      const found = findSelectedRange(vault, vault.get(inner), canvasId);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+function getVisibleCanvasesFromCanvasId(vault, manifestOrRange, canvasId, preventPaged = false) {
+  const behavior = manifestOrRange.behavior;
+  const fullCanvas = canvasId ? vault.get(canvasId) : null;
+  if (!fullCanvas) {
+    return [];
+  }
+  const canvasBehavior = fullCanvas.behavior;
+  const isPaged = preventPaged ? false : behavior.includes("paged");
+  const isContinuous = isPaged ? false : behavior.includes("continuous");
+  const isIndividuals = isPaged || isContinuous ? false : behavior.includes("individuals");
+  const isCanvasFacingPages = canvasBehavior.includes("facing-pages");
+  const isCanvasNonPaged = canvasBehavior.includes("non-paged");
+  if (isCanvasFacingPages || isCanvasNonPaged || isIndividuals || preventPaged) {
+    return [{ id: fullCanvas.id, type: "Canvas" }];
+  }
+  const [manifestItems, ordering] = getManifestSequence(vault, manifestOrRange);
+  if (isContinuous) {
+    return manifestItems;
+  }
+  const canvasIndex = manifestItems.findIndex((r) => r.id === canvasId);
+  if (canvasIndex === -1) {
+    return [];
+  }
+  for (const indexes of ordering) {
+    if (indexes.includes(canvasIndex)) {
+      return indexes.map((index) => manifestItems[index]);
+    }
+  }
+  return [{ id: fullCanvas.id, type: "Canvas" }];
+}
+function getManifestSequence(vault, manifestOrRange, { disablePaging } = {}) {
+  const behavior = manifestOrRange.behavior;
+  const isPaged = behavior.includes("paged");
+  const isContinuous = isPaged ? false : behavior.includes("continuous");
+  const isIndividuals = isPaged || isContinuous ? false : behavior.includes("individuals");
+  const manifestItems = manifestOrRange.type === "Manifest" ? manifestOrRange.items : findAllCanvasesInRange(vault, manifestOrRange);
+  if (isContinuous) {
+    return [manifestItems, [manifestItems.map((_, index) => index)]];
+  }
+  if (isIndividuals || !isPaged || disablePaging) {
+    return [manifestItems, manifestItems.map((_, index) => [index])];
+  }
+  const ordering = [];
+  let currentOrdering = [];
+  const flush = () => {
+    if (currentOrdering.length) {
+      ordering.push([...currentOrdering]);
+      currentOrdering = [];
+    }
+  };
+  for (let i = 0; i < manifestItems.length; i++) {
+    const canvas = vault.get(manifestItems[i]);
+    if (i === 0 || canvas.behavior.includes("facing-pages")) {
+      flush();
+      ordering.push([i]);
+      continue;
+    }
+    if (canvas.behavior.includes("non-paged")) {
+      continue;
+    }
+    currentOrdering.push(i);
+    if (currentOrdering.length > 1) {
+      flush();
+    }
+  }
+  if (currentOrdering.length) {
+    flush();
+  }
+  return [manifestItems, ordering];
+}
+function useRange(options = {}, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  const rangeId = id ? id : ctx.range;
+  const range = useVaultSelector((s) => rangeId ? s.iiif.entities.Range[rangeId] : void 0, [rangeId]);
+  return useMemo(() => {
+    if (!range) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(range);
+    }
+    return range;
+  }, [range, selector, ...deps]);
+}
+function useCanvasSequence({ startCanvas, disablePaging }) {
+  var _a;
+  const vault = useVault();
+  const manifest = useManifest();
+  const range = useRange();
+  const [cursor, setCursor] = useState(void 0);
+  const rangeOrManifest = range ? range : manifest;
+  if (!rangeOrManifest) {
+    throw new Error("Nothing selected");
+  }
+  const [items, initialSequence] = useMemo(() => getManifestSequence(vault, rangeOrManifest, { disablePaging }), [vault, rangeOrManifest]);
+  const setCanvasIndex = useCallback((index) => {
+    const foundSequence = initialSequence.findIndex((i) => i.includes(index));
+    setCursor(foundSequence === -1 ? 0 : foundSequence);
+  }, [items, initialSequence]);
+  const setCanvasId = useCallback((id) => {
+    const foundIndex = items.findIndex((i) => i.id === id);
+    if (foundIndex !== -1) {
+      setCanvasIndex(foundIndex);
+    } else {
+      setCursor(0);
+    }
+  }, [items, initialSequence]);
+  const next = useCallback(() => {
+    setCursor((i) => {
+      if (i >= initialSequence.length) {
+        return i;
+      }
+      return i + 1;
+    });
+  }, [initialSequence]);
+  const previous = useCallback(() => {
+    setCursor((i) => {
+      if (i <= 0) {
+        return 0;
+      }
+      return i - 1;
+    });
+  }, [initialSequence]);
+  if (typeof cursor === "undefined") {
+    if (startCanvas) {
+      setCanvasId(startCanvas);
+    } else {
+      setCursor(0);
+    }
+  }
+  return {
+    visibleItems: ((_a = initialSequence[cursor]) == null ? void 0 : _a.map((idx) => items[idx].id)) || [],
+    cursor,
+    items,
+    sequence: initialSequence,
+    setSequenceIndex: setCursor,
+    setCanvasIndex,
+    setCanvasId,
+    next,
+    previous
+  };
+}
 const noop = () => {
 };
 const SimpleViewerReactContext = createContext({
@@ -274,92 +508,58 @@ const SimpleViewerReactContext = createContext({
   setCurrentCanvasIndex: noop,
   nextCanvas: noop,
   previousCanvas: noop,
-  currentCanvasIndex: -1,
-  totalCanvases: 0,
-  pagingView: true
+  items: [],
+  sequence: [],
+  setSequenceIndex: noop,
+  currentSequenceIndex: 0
 });
+function InnerViewerProvider(props) {
+  const manifest = useManifest();
+  const {
+    cursor,
+    visibleItems,
+    next,
+    sequence,
+    items,
+    setCanvasIndex,
+    setCanvasId,
+    previous,
+    setSequenceIndex
+  } = useCanvasSequence({
+    startCanvas: props.startCanvas,
+    disablePaging: props.pagingEnabled === false
+  });
+  const ctx = useMemo(() => ({
+    sequence,
+    items,
+    setCurrentCanvasId: setCanvasId,
+    nextCanvas: next,
+    previousCanvas: previous,
+    totalCanvases: items.length,
+    setCurrentCanvasIndex: setCanvasIndex,
+    setSequenceIndex,
+    currentSequenceIndex: cursor
+  }), [sequence, items, setCanvasId, next, previous, items, setCanvasIndex, setSequenceIndex, cursor]);
+  if (!manifest) {
+    console.warn("The manifest passed to the provider is not a valid IIIF manifest.");
+    return /* @__PURE__ */ jsx("div", {
+      children: "Sorry, something went wrong."
+    });
+  }
+  return /* @__PURE__ */ jsx(SimpleViewerReactContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(VisibleCanvasReactContext.Provider, {
+      value: visibleItems,
+      children: /* @__PURE__ */ jsx(CanvasContext, {
+        canvas: visibleItems[0],
+        children: props.children
+      })
+    })
+  });
+}
 function SimpleViewerProvider(props) {
   const manifest = useExternalManifest(props.manifest);
-  const [currentCanvasId, setCurrentCanvasId] = useState("");
-  const [visible, setVisible] = useState([]);
-  const pagingView = (typeof props.pagingEnabled === "undefined" || props.pagingEnabled) && manifest.manifest && manifest.manifest.behavior && manifest.manifest.behavior.includes("paged");
-  useEffect(() => {
-    var _a, _b;
-    if (manifest.manifest) {
-      setCurrentCanvasId((_a = manifest.manifest.items[0]) == null ? void 0 : _a.id);
-      setVisible([(_b = manifest.manifest.items[0]) == null ? void 0 : _b.id]);
-    }
-  }, [manifest.manifest, props.manifest]);
-  const canvasList = useMemo(() => {
-    var _a;
-    return ((_a = manifest.manifest) == null ? void 0 : _a.items.map((c) => c.id)) || [];
-  }, [manifest.manifest, props.manifest]);
-  const currentCanvasIndex = useMemo(() => canvasList.indexOf(currentCanvasId), [canvasList, currentCanvasId]);
-  const nextCanvas = useCallback(() => {
-    if (canvasList.length && currentCanvasId) {
-      if (currentCanvasIndex === -1) {
-        return;
-      }
-      if (canvasList[currentCanvasIndex + 2] ? currentCanvasIndex + 2 === canvasList.length : currentCanvasIndex === canvasList.length) {
-        return;
-      }
-      const newCanvas = pagingView && currentCanvasIndex !== 0 ? canvasList[currentCanvasIndex + 2] : canvasList[currentCanvasIndex + 1];
-      const pageCanvas = pagingView ? currentCanvasIndex !== 0 ? canvasList[currentCanvasIndex + 3] : canvasList[currentCanvasIndex + 2] : null;
-      if (newCanvas) {
-        setCurrentCanvasId(newCanvas);
-        setVisible(pageCanvas ? [newCanvas, pageCanvas] : [newCanvas]);
-      }
-    }
-  }, [pagingView, canvasList, currentCanvasId, currentCanvasIndex]);
-  const previousCanvas = useCallback(() => {
-    if (canvasList.length && currentCanvasId) {
-      if (currentCanvasIndex === 0 || currentCanvasIndex === -1) {
-        return;
-      }
-      const newCanvas = pagingView && currentCanvasIndex !== 1 ? canvasList[currentCanvasIndex - 2] : canvasList[currentCanvasIndex - 1];
-      const pageCanvas = pagingView && currentCanvasIndex !== 1 ? canvasList[currentCanvasIndex - 1] : null;
-      if (newCanvas) {
-        setCurrentCanvasId(newCanvas);
-        setVisible(pageCanvas ? [newCanvas, pageCanvas] : [newCanvas]);
-      }
-    }
-  }, [pagingView, canvasList, currentCanvasId, currentCanvasIndex]);
-  const setCurrentCanvasIndex = useCallback((idx) => {
-    const realIdx = pagingView && idx % 2 === 1 ? idx - 1 : idx;
-    const newId = canvasList[realIdx];
-    const newNextId = pagingView && realIdx !== 0 ? canvasList[realIdx + 1] : null;
-    if (newId) {
-      setCurrentCanvasId(newId);
-      setVisible((prevValue) => {
-        const newValue = newNextId ? [newId, newNextId] : [newId];
-        if (prevValue.length === prevValue.length) {
-          for (let i = 0; i < prevValue.length; i++) {
-            if (prevValue[i] !== newValue[i]) {
-              return newValue;
-            }
-          }
-          return prevValue;
-        }
-        return newValue;
-      });
-    }
-  }, [pagingView, canvasList]);
-  const internalSetCurrentCanvasId = useCallback((nextId) => {
-    const idx = canvasList.indexOf(nextId);
-    if (idx !== -1) {
-      setCurrentCanvasIndex(idx);
-    }
-  }, [canvasList, setCurrentCanvasIndex]);
-  const ctx = useMemo(() => ({
-    setCurrentCanvasId: internalSetCurrentCanvasId,
-    nextCanvas,
-    previousCanvas,
-    currentCanvasIndex,
-    totalCanvases: canvasList.length,
-    setCurrentCanvasIndex,
-    pagingView: true
-  }), [nextCanvas, previousCanvas, currentCanvasIndex, canvasList, setCurrentCanvasIndex, internalSetCurrentCanvasId]);
-  if (!manifest.manifest) {
+  if (!manifest) {
     console.warn("The manifest passed to the provider is not a valid IIIF manifest.");
     return /* @__PURE__ */ jsx("div", {
       children: "Sorry, something went wrong."
@@ -370,18 +570,15 @@ function SimpleViewerProvider(props) {
       children: "Loading..."
     });
   }
-  return /* @__PURE__ */ jsx(SimpleViewerReactContext.Provider, {
-    value: ctx,
-    children: /* @__PURE__ */ jsx(VisibleCanvasReactContext.Provider, {
-      value: visible,
-      children: /* @__PURE__ */ jsx(ManifestContext, {
-        manifest: manifest.manifest.id,
-        children: /* @__PURE__ */ jsx(CanvasContext, {
-          canvas: currentCanvasId,
-          children: props.children
-        })
-      })
-    })
+  const inner = /* @__PURE__ */ jsx(InnerViewerProvider, __spreadProps(__spreadValues({}, props), {
+    children: props.children
+  }));
+  return /* @__PURE__ */ jsx(ManifestContext, {
+    manifest: manifest.id,
+    children: props.rangeId ? /* @__PURE__ */ jsx(RangeContext, {
+      range: props.rangeId,
+      children: inner
+    }) : inner
   });
 }
 function useSimpleViewer() {
@@ -591,11 +788,6 @@ function DefaultCanvasFallback({
     children: "Unknown error"
   });
 }
-var createRoot;
-var m = require$$0;
-{
-  createRoot = m.createRoot;
-}
 const ViewerPresetContext = createContext(null);
 function useViewerPreset() {
   return useContext(ViewerPresetContext);
@@ -607,26 +799,16 @@ function CanvasPortal({
   overlay
 }) {
   const htmlElement = useContext(overlay ? OverlayPortalContext : PortalContext);
-  const rootRef = useRef(null);
   const preset = useViewerPreset();
   useLayoutEffect(() => {
-    if (!rootRef.current) {
-      rootRef.current = htmlElement ? createRoot(htmlElement) : null;
-    }
-  }, []);
-  useLayoutEffect(() => {
-    return () => {
-      var _a;
-      (_a = rootRef.current) == null ? void 0 : _a.unmount();
-      rootRef.current = null;
-    };
-  }, []);
-  useLayoutEffect(() => {
-    if (rootRef.current) {
-      rootRef.current.render(/* @__PURE__ */ jsx(ViewerPresetContext.Provider, {
-        value: preset,
-        children
-      }));
+    if (htmlElement) {
+      try {
+        htmlElement.render(/* @__PURE__ */ jsx(ViewerPresetContext.Provider, {
+          value: preset,
+          children
+        }));
+      } catch (e) {
+      }
     }
   }, [children, preset]);
   return null;
@@ -649,8 +831,31 @@ function Viewer(_a) {
   const bridge = useContextBridge();
   const ErrorFallback = errorFallback || DefaultCanvasFallback;
   useLayoutEffect(() => {
-    setPortalElement(portal.current);
-    setOverlayPortalElement(overlayPortal.current);
+    const roots = {};
+    if (portal.current) {
+      const $el = document.createElement("div");
+      portal.current.appendChild($el);
+      roots.portal = createRoot($el);
+      setPortalElement(roots.portal);
+    }
+    if (overlayPortal.current) {
+      const $el = document.createElement("div");
+      overlayPortal.current.appendChild($el);
+      roots.overlayPortal = createRoot($el);
+      setOverlayPortalElement(roots.overlayPortal);
+    }
+    return () => {
+      setPortalElement(null);
+      setOverlayPortalElement(null);
+      setTimeout(() => {
+        if (roots.portal) {
+          roots.portal.unmount();
+        }
+        if (roots.overlayPortal) {
+          roots.overlayPortal.unmount();
+        }
+      }, 0);
+    };
   }, []);
   return /* @__PURE__ */ jsxs(ErrorBoundary, {
     fallbackRender: () => /* @__PURE__ */ jsx(ErrorFallback, __spreadValues({}, props)),
@@ -773,25 +978,25 @@ function useStyles(resource, scope) {
     return styles ? scope ? styles[scope] : styles : void 0;
   }, [resource, scope]);
 }
-var __defProp2 = Object.defineProperty;
-var __defProps2 = Object.defineProperties;
-var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues2 = (a, b) => {
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp2.call(b, prop))
-      __defNormalProp2(a, prop, b[prop]);
-  if (__getOwnPropSymbols2)
-    for (var prop of __getOwnPropSymbols2(b)) {
-      if (__propIsEnum2.call(b, prop))
-        __defNormalProp2(a, prop, b[prop]);
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 const BOX_SELECTOR = /&?(xywh=)?(pixel:|percent:|pct:)?([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?)/;
 const TEMPORAL_SELECTOR = /&?(t=)(npt:)?([0-9]+(.[0-9]+)?)?(,([0-9]+(.[0-9]+)?))?/;
 function parseSelector(source) {
@@ -936,7 +1141,7 @@ function expandTarget(target, options = {}) {
     if (!fragment) {
       return {
         type: "SpecificResource",
-        source: __spreadProps2(__spreadValues2({}, target), {
+        source: __spreadProps$1(__spreadValues$1({}, target), {
           id
         }),
         selector: null,
@@ -945,7 +1150,7 @@ function expandTarget(target, options = {}) {
     }
     return expandTarget({
       type: "SpecificResource",
-      source: __spreadProps2(__spreadValues2({}, target), {
+      source: __spreadProps$1(__spreadValues$1({}, target), {
         id
       }),
       selector: {
@@ -1054,20 +1259,21 @@ function RenderImage({
   isStatic,
   x = 0,
   y = 0,
-  annotations,
-  children
+  children,
+  onClick
 }) {
   var _a, _b, _c, _d;
   return /* @__PURE__ */ jsx(Fragment, {
     children: !image.service ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("world-image", {
+        onClick,
         uri: image.id,
         target: image.target.spatial,
         display: image.width && image.height ? {
           width: image.width,
           height: image.height
         } : void 0
-      }), annotations, children]
+      }), children]
     }, "no-service") : /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx(TileSet, {
         tiles: {
@@ -1080,8 +1286,9 @@ function RenderImage({
         x: ((_a = image.target) == null ? void 0 : _a.spatial.x) + x,
         y: ((_b = image.target) == null ? void 0 : _b.spatial.y) + y,
         width: (_c = image.target) == null ? void 0 : _c.spatial.width,
-        height: (_d = image.target) == null ? void 0 : _d.spatial.height
-      }), annotations, children]
+        height: (_d = image.target) == null ? void 0 : _d.spatial.height,
+        onClick
+      }), children]
     }, "service")
   }, id);
 }
@@ -1122,6 +1329,7 @@ function getPaintables(vault, paintingAnnotations, enabledChoices) {
         types.push(type);
       }
       items.push({
+        annotationId: annotation.id,
         type,
         resource: body,
         target: annotation.target,
@@ -1135,6 +1343,29 @@ function getPaintables(vault, paintingAnnotations, enabledChoices) {
     choice
   };
 }
+function getParsedTargetSelector(canvas, target) {
+  const { selector: imageTarget, source } = expandTarget$1(target);
+  if (source.id !== canvas.id) {
+    return [null, source];
+  }
+  const defaultTarget = {
+    type: "BoxSelector",
+    spatial: {
+      x: 0,
+      y: 0,
+      width: canvas.width,
+      height: canvas.height
+    }
+  };
+  return [
+    imageTarget ? imageTarget.type === "TemporalSelector" ? {
+      type: "TemporalBoxSelector",
+      temporal: imageTarget.temporal,
+      spatial: defaultTarget.spatial
+    } : imageTarget : null,
+    source
+  ];
+}
 const emptyActions = {
   makeChoice: () => {
   }
@@ -1143,22 +1374,9 @@ const unknownResponse = { type: "unknown" };
 const unsupportedStrategy = (reason) => {
   return { type: "unknown", reason, annotations: { pages: [] } };
 };
-function useManifest(options = {}, deps = []) {
-  const { id, selector } = options;
-  const ctx = useResourceContext();
-  useVault();
-  const manifestId = id ? id : ctx.manifest;
-  const manifest = useVaultSelector((s) => manifestId ? s.iiif.entities.Manifest[manifestId] : void 0, [manifestId]);
-  return useMemo(() => {
-    if (!manifest) {
-      return void 0;
-    }
-    if (selector) {
-      return selector(manifest);
-    }
-    return manifest;
-  }, [manifest, selector, ...deps]);
-}
+const emptyStrategy = (width, height) => {
+  return { type: "empty", width, height, annotations: { pages: [] }, image: null, images: [] };
+};
 function getMeta$1(state, resourceId) {
   var _a;
   const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
@@ -1412,10 +1630,6 @@ function getImageStrategy(canvas, paintables, loadImageService) {
         imageService = loadImageService(imageServices[0], canvas);
       }
     }
-    const { selector: imageTarget, source } = expandTarget(singleImage.target);
-    if (source.id !== canvas.id) {
-      continue;
-    }
     const defaultTarget = {
       type: "BoxSelector",
       spatial: {
@@ -1425,11 +1639,10 @@ function getImageStrategy(canvas, paintables, loadImageService) {
         height: canvas.height
       }
     };
-    const target = imageTarget ? imageTarget.type === "TemporalSelector" ? {
-      type: "TemporalBoxSelector",
-      temporal: imageTarget.temporal,
-      spatial: defaultTarget.spatial
-    } : imageTarget : null;
+    const [target, source] = getParsedTargetSelector(canvas, singleImage.target);
+    if (source.id !== canvas.id) {
+      continue;
+    }
     const defaultImageSelector = {
       type: "BoxSelector",
       spatial: {
@@ -1455,6 +1668,7 @@ function getImageStrategy(canvas, paintables, loadImageService) {
     const imageType = {
       id: resource.id,
       type: "Image",
+      annotationId: singleImage.annotationId,
       width: target ? resource.width : canvas.width,
       height: target ? resource.height : canvas.height,
       service: imageService,
@@ -1504,6 +1718,7 @@ function getAudioStrategy(canvas, paintables) {
   return {
     type: "media",
     media: {
+      annotationId: paintables.items[0].annotationId,
       duration: canvas.duration,
       url: audioResource.id,
       type: "Sound",
@@ -1547,6 +1762,7 @@ function getVideoStrategy(canvas, paintables) {
   return {
     type: "media",
     media: {
+      annotationId: paintables.items[0].annotationId,
       duration: canvas.duration,
       url: audioResource.id,
       type: "Video",
@@ -1572,6 +1788,38 @@ function getVideoStrategy(canvas, paintables) {
     }
   };
 }
+function parseType(item, languageMap = {}, lang) {
+  const language = item.language || lang || "none";
+  switch (item.type) {
+    case "TextualBody": {
+      if (typeof item.value !== "undefined") {
+        languageMap[language] = item.value;
+      }
+      break;
+    }
+    case "List":
+    case "Composite":
+    case "Choice": {
+      if (item.items) {
+        item.items.forEach((inner) => parseType(inner, languageMap, language));
+      }
+    }
+  }
+  return languageMap;
+}
+function getTextualContentStrategy(canvas, paintables) {
+  const items = [];
+  paintables.items.forEach((item) => {
+    if (item.resource) {
+      const [target] = getParsedTargetSelector(canvas, item.target);
+      items.push({ annotationId: item.annotationId, text: parseType(item.resource), target });
+    }
+  });
+  return {
+    type: "textual-content",
+    items
+  };
+}
 function useRenderingStrategy(options) {
   const manifest = useManifest();
   const canvas = useCanvas();
@@ -1581,10 +1829,22 @@ function useRenderingStrategy(options) {
     all: false
   });
   const enabledPages = useResources(enabledPageIds, "AnnotationPage");
-  const supports = (options == null ? void 0 : options.strategies) || ["images", "media", "complex-timeline"];
+  const supports = (options == null ? void 0 : options.strategies) || [
+    "empty",
+    "images",
+    "media",
+    "textual-content",
+    "complex-timeline"
+  ];
   const [paintables, actions] = usePaintables(options, [imageServiceStatus]);
   const strategy = useMemo(() => {
-    if (!canvas || paintables.types.length === 0) {
+    if (!canvas) {
+      return unknownResponse;
+    }
+    if (paintables.types.length === 0) {
+      if (supports.indexOf("empty") !== -1) {
+        return emptyStrategy(canvas.width, canvas.height);
+      }
       return unknownResponse;
     }
     if (paintables.types.length !== 1) {
@@ -1610,6 +1870,12 @@ function useRenderingStrategy(options) {
       }
       return get3dStrategy(canvas, paintables);
     }
+    if (mainType === "textualbody") {
+      if (supports.indexOf("textual-content") === -1) {
+        return unsupportedStrategy("Textual content not supported");
+      }
+      return getTextualContentStrategy(canvas, paintables);
+    }
     if (mainType === "sound" || mainType === "audio") {
       if (supports.indexOf("media") === -1) {
         return unsupportedStrategy("Media not supported");
@@ -1729,6 +1995,7 @@ function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
   const subject = canvas ? canvas : manifest;
   const didUnmount = useRef(false);
   useEffect(() => {
+    didUnmount.current = false;
     return () => {
       didUnmount.current = true;
     };
@@ -2049,6 +2316,533 @@ function Model({
     })]
   });
 }
+function CanvasBackground({
+  style
+}) {
+  const canvas = useCanvas();
+  if (!canvas || !canvas.height || !canvas.width) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("box", {
+    interactive: false,
+    target: {
+      x: 0,
+      y: 0,
+      width: canvas.width,
+      height: canvas.height
+    },
+    style
+  });
+}
+var __defProp2 = Object.defineProperty;
+var __defProps2 = Object.defineProperties;
+var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
+var __objRest2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor)
+      descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps)
+    _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps)
+    _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+var defaultOptions = {
+  bindI18n: "languageChanged",
+  bindI18nStore: "",
+  transEmptyNodeValue: "",
+  transSupportBasicHtmlNodes: true,
+  transWrapTextNodes: "",
+  transKeepBasicHtmlNodesFor: ["br", "strong", "i", "p"],
+  useSuspense: true
+};
+var i18nInstance;
+var I18nContext = React__default.createContext();
+function getDefaults() {
+  return defaultOptions;
+}
+var ReportNamespaces = function() {
+  function ReportNamespaces2() {
+    _classCallCheck(this, ReportNamespaces2);
+    this.usedNamespaces = {};
+  }
+  _createClass(ReportNamespaces2, [{
+    key: "addUsedNamespaces",
+    value: function addUsedNamespaces(namespaces) {
+      var _this = this;
+      namespaces.forEach(function(ns) {
+        if (!_this.usedNamespaces[ns])
+          _this.usedNamespaces[ns] = true;
+      });
+    }
+  }, {
+    key: "getUsedNamespaces",
+    value: function getUsedNamespaces() {
+      return Object.keys(this.usedNamespaces);
+    }
+  }]);
+  return ReportNamespaces2;
+}();
+function getI18n() {
+  return i18nInstance;
+}
+function warn() {
+  if (console && console.warn) {
+    var _console;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (typeof args[0] === "string")
+      args[0] = "react-i18next:: ".concat(args[0]);
+    (_console = console).warn.apply(_console, args);
+  }
+}
+var alreadyWarned = {};
+function warnOnce() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  if (typeof args[0] === "string" && alreadyWarned[args[0]])
+    return;
+  if (typeof args[0] === "string")
+    alreadyWarned[args[0]] = new Date();
+  warn.apply(void 0, args);
+}
+function loadNamespaces(i18n, ns, cb) {
+  i18n.loadNamespaces(ns, function() {
+    if (i18n.isInitialized) {
+      cb();
+    } else {
+      var initialized = function initialized2() {
+        setTimeout(function() {
+          i18n.off("initialized", initialized2);
+        }, 0);
+        cb();
+      };
+      i18n.on("initialized", initialized);
+    }
+  });
+}
+function hasLoadedNamespace(ns, i18n) {
+  var options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  if (!i18n.languages || !i18n.languages.length) {
+    warnOnce("i18n.languages were undefined or empty", i18n.languages);
+    return true;
+  }
+  var lng = i18n.languages[0];
+  var fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
+  var lastLng = i18n.languages[i18n.languages.length - 1];
+  if (lng.toLowerCase() === "cimode")
+    return true;
+  var loadNotPending = function loadNotPending2(l, n) {
+    var loadState = i18n.services.backendConnector.state["".concat(l, "|").concat(n)];
+    return loadState === -1 || loadState === 2;
+  };
+  if (options.bindI18n && options.bindI18n.indexOf("languageChanging") > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns))
+    return false;
+  if (i18n.hasResourceBundle(lng, ns))
+    return true;
+  if (!i18n.services.backendConnector.backend)
+    return true;
+  if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns)))
+    return true;
+  return false;
+}
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr))
+    return arr;
+}
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i == null)
+    return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _s, _e;
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+      if (i && _arr.length === i)
+        break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null)
+        _i["return"]();
+    } finally {
+      if (_d)
+        throw _e;
+    }
+  }
+  return _arr;
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length)
+    len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o)
+    return;
+  if (typeof o === "string")
+    return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor)
+    n = o.constructor.name;
+  if (n === "Map" || n === "Set")
+    return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+    return _arrayLikeToArray(o, minLen);
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function(key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+  return target;
+}
+function useTranslation(ns) {
+  var props = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  var i18nFromProps = props.i18n;
+  var _ref = useContext(I18nContext) || {}, i18nFromContext = _ref.i18n, defaultNSFromContext = _ref.defaultNS;
+  var i18n = i18nFromProps || i18nFromContext || getI18n();
+  if (i18n && !i18n.reportNamespaces)
+    i18n.reportNamespaces = new ReportNamespaces();
+  if (!i18n) {
+    warnOnce("You will need to pass in an i18next instance by using initReactI18next");
+    var notReadyT = function notReadyT2(k) {
+      return Array.isArray(k) ? k[k.length - 1] : k;
+    };
+    var retNotReady = [notReadyT, {}, false];
+    retNotReady.t = notReadyT;
+    retNotReady.i18n = {};
+    retNotReady.ready = false;
+    return retNotReady;
+  }
+  if (i18n.options.react && i18n.options.react.wait !== void 0)
+    warnOnce("It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
+  var i18nOptions = _objectSpread(_objectSpread(_objectSpread({}, getDefaults()), i18n.options.react), props);
+  var useSuspense = i18nOptions.useSuspense, keyPrefix = i18nOptions.keyPrefix;
+  var namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === "string" ? [namespaces] : namespaces || ["translation"];
+  if (i18n.reportNamespaces.addUsedNamespaces)
+    i18n.reportNamespaces.addUsedNamespaces(namespaces);
+  var ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(function(n) {
+    return hasLoadedNamespace(n, i18n, i18nOptions);
+  });
+  function getT() {
+    return i18n.getFixedT(null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
+  }
+  var _useState = useState(getT), _useState2 = _slicedToArray(_useState, 2), t = _useState2[0], setT = _useState2[1];
+  var isMounted = useRef(true);
+  useEffect(function() {
+    var bindI18n = i18nOptions.bindI18n, bindI18nStore = i18nOptions.bindI18nStore;
+    isMounted.current = true;
+    if (!ready && !useSuspense) {
+      loadNamespaces(i18n, namespaces, function() {
+        if (isMounted.current)
+          setT(getT);
+      });
+    }
+    function boundReset() {
+      if (isMounted.current)
+        setT(getT);
+    }
+    if (bindI18n && i18n)
+      i18n.on(bindI18n, boundReset);
+    if (bindI18nStore && i18n)
+      i18n.store.on(bindI18nStore, boundReset);
+    return function() {
+      isMounted.current = false;
+      if (bindI18n && i18n)
+        bindI18n.split(" ").forEach(function(e) {
+          return i18n.off(e, boundReset);
+        });
+      if (bindI18nStore && i18n)
+        bindI18nStore.split(" ").forEach(function(e) {
+          return i18n.store.off(e, boundReset);
+        });
+    };
+  }, [i18n, namespaces.join()]);
+  var isInitial = useRef(true);
+  useEffect(function() {
+    if (isMounted.current && !isInitial.current) {
+      setT(getT);
+    }
+    isInitial.current = false;
+  }, [i18n]);
+  var ret = [t, i18n, ready];
+  ret.t = t;
+  ret.i18n = i18n;
+  ret.ready = ready;
+  if (ready)
+    return ret;
+  if (!ready && !useSuspense)
+    return ret;
+  throw new Promise(function(resolve) {
+    loadNamespaces(i18n, namespaces, function() {
+      resolve();
+    });
+  });
+}
+function LanguageString(_a) {
+  var _b = _a, {
+    as: Component,
+    language,
+    children
+  } = _b, props = __objRest2(_b, ["as", "language", "children"]);
+  const {
+    i18n
+  } = useTranslation();
+  const viewingDirection = useMemo(() => i18n.dir ? i18n.dir(language) : "ltr", [language]);
+  const isSame = useMemo(() => {
+    if (!i18n.services) {
+      return false;
+    }
+    return i18n.services.languageUtils.getLanguagePartFromCode(i18n.language) === i18n.services.languageUtils.getLanguagePartFromCode(language);
+  }, [i18n.language, language]);
+  if (isSame) {
+    if (Component) {
+      return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, __spreadValues2({}, props)), {
+        children
+      }));
+    }
+    return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, __spreadValues2({}, props)), {
+      children
+    }));
+  }
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, __spreadProps2(__spreadValues2({}, props), {
+      lang: language,
+      dir: viewingDirection
+    })), {
+      children
+    }));
+  }
+  return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, __spreadProps2(__spreadValues2({}, props), {
+    lang: language,
+    dir: viewingDirection
+  })), {
+    children
+  }));
+}
+function getClosestLanguage(i18nLanguage, languages, i18nLanguages = [], strictFallback = false) {
+  if (!i18nLanguage || !languages || languages.length === 0) {
+    return void 0;
+  }
+  if (languages.length === 1) {
+    return languages[0];
+  }
+  if (languages.indexOf(i18nLanguage) !== -1) {
+    return i18nLanguage;
+  }
+  const root = i18nLanguage.indexOf("-") !== -1 ? i18nLanguage.slice(0, i18nLanguage.indexOf("-")) : null;
+  if (root && languages.indexOf(root) !== -1) {
+    return root;
+  }
+  for (const lang of i18nLanguages) {
+    if (languages.indexOf(lang) !== -1) {
+      return lang;
+    }
+  }
+  if (!strictFallback) {
+    const inverseRoot = languages.map((l) => l.indexOf("-") !== -1 ? l.slice(0, l.indexOf("-")) : null);
+    const inverseIdx = inverseRoot.indexOf(i18nLanguage);
+    if (inverseIdx !== -1) {
+      return languages[inverseIdx];
+    }
+    for (const lang of i18nLanguages) {
+      const root2 = lang.indexOf("-") !== -1 ? lang.slice(0, lang.indexOf("-")) : null;
+      const inverseIdx2 = root2 ? languages.indexOf(root2) : -1;
+      if (inverseIdx2 !== -1) {
+        return languages[inverseIdx2];
+      }
+    }
+  }
+  if (languages.indexOf("none") !== -1) {
+    return "none";
+  }
+  if (languages.indexOf("@none") !== -1) {
+    return "@none";
+  }
+  return languages[0];
+}
+function buildLocaleString(inputText, i18nLanguage, options = {}) {
+  const {
+    strictFallback = false,
+    defaultText = "",
+    separator = "\n",
+    fallbackLanguages = [],
+    closest
+  } = options;
+  const languages = Object.keys(inputText || {});
+  const language = closest ? i18nLanguage : getClosestLanguage(i18nLanguage, languages, fallbackLanguages, strictFallback);
+  if (!inputText) {
+    return defaultText;
+  }
+  if (typeof inputText === "string") {
+    return inputText;
+  }
+  const candidateText = language ? inputText[language] : void 0;
+  if (candidateText) {
+    if (typeof candidateText === "string") {
+      return candidateText;
+    }
+    return candidateText.join(separator);
+  }
+  return "";
+}
+function useClosestLanguage(getLanguages, deps = []) {
+  const {
+    i18n
+  } = useTranslation();
+  const i18nLanguages = i18n && i18n.languages ? i18n.languages : [];
+  const i18nLanguage = i18n && i18n.language ? i18n.language : "en";
+  return useMemo(() => {
+    const languages = getLanguages();
+    return getClosestLanguage(i18nLanguage, languages, i18nLanguages);
+  }, [i18nLanguages, i18nLanguage, ...deps]);
+}
+function useLocaleString(inputText, defaultText) {
+  const language = useClosestLanguage(() => Object.keys(inputText || {}), [inputText]);
+  return [useMemo(() => {
+    return buildLocaleString(inputText, language, {
+      defaultText,
+      closest: true
+    });
+  }, [language, defaultText, inputText]), language];
+}
+const LocaleString = (_c) => {
+  var _d = _c, {
+    as: Component,
+    defaultText,
+    enableDangerouslySetInnerHTML,
+    children
+  } = _d, props = __objRest2(_d, ["as", "defaultText", "enableDangerouslySetInnerHTML", "children"]);
+  const [text, language] = useLocaleString(children, defaultText);
+  if (language) {
+    return /* @__PURE__ */ jsx(LanguageString, __spreadProps(__spreadValues({}, __spreadProps2(__spreadValues2({}, props), {
+      as: Component,
+      language,
+      title: enableDangerouslySetInnerHTML ? void 0 : text,
+      dangerouslySetInnerHTML: enableDangerouslySetInnerHTML ? {
+        __html: text
+      } : void 0
+    })), {
+      children: enableDangerouslySetInnerHTML ? void 0 : text
+    }));
+  }
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, __spreadValues2({}, props)), {
+      children: text
+    }));
+  }
+  return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, __spreadProps2(__spreadValues2({}, props), {
+    title: enableDangerouslySetInnerHTML ? void 0 : text,
+    dangerouslySetInnerHTML: enableDangerouslySetInnerHTML ? {
+      __html: text
+    } : void 0
+  })), {
+    children: enableDangerouslySetInnerHTML ? void 0 : text
+  }));
+};
 function RenderCanvas({
   x,
   y,
@@ -2059,6 +2853,9 @@ function RenderCanvas({
   renderViewerControls,
   renderMediaControls,
   strategies,
+  backgroundStyle,
+  alwaysShowBackground,
+  onClickPaintingAnnotation,
   children
 }) {
   const canvas = useCanvas();
@@ -2145,19 +2942,35 @@ function RenderCanvas({
       x,
       y
     }, elementProps), {
-      children: [strategy.type === "images" ? /* @__PURE__ */ jsxs(Fragment$1, {
-        children: [strategy.images.map((image, idx) => {
-          return /* @__PURE__ */ jsx(RenderImage, {
-            isStatic,
-            image,
-            id: image.id,
-            thumbnail: idx === 0 ? thumbnail : void 0,
-            annotations
-          }, image.id);
-        }), renderViewerControls ? /* @__PURE__ */ jsx(CanvasPortal, {
-          overlay: true,
-          children: renderViewerControls(strategy)
-        }) : null]
+      children: [strategy.type === "empty" || alwaysShowBackground ? /* @__PURE__ */ jsx(CanvasBackground, {
+        style: backgroundStyle
+      }) : null, strategy.type === "textual-content" ? strategy.items.map((item, n) => {
+        return /* @__PURE__ */ jsxs(Fragment$1, {
+          children: [/* @__PURE__ */ jsx(HTMLPortal, {
+            onClick: onClickPaintingAnnotation ? (e) => {
+              e.stopPropagation();
+              onClickPaintingAnnotation(item.annotationId, item, e);
+            } : void 0,
+            target: item.target.spatial || void 0,
+            children: /* @__PURE__ */ jsx(LocaleString, {
+              children: item.text
+            })
+          }, n), annotations]
+        });
+      }) : null, strategy.type === "images" ? /* @__PURE__ */ jsxs(Fragment$1, {
+        children: [strategy.images.map((image, idx) => /* @__PURE__ */ jsx(RenderImage, {
+          isStatic,
+          image,
+          id: image.id,
+          thumbnail: idx === 0 ? thumbnail : void 0,
+          onClick: onClickPaintingAnnotation ? (e) => {
+            e.stopPropagation();
+            onClickPaintingAnnotation(image.annotationId, image, e);
+          } : void 0
+        }, image.id)), annotations]
+      }) : null, (strategy.type === "images" || strategy.type === "empty" || strategy.type === "textual-content") && renderViewerControls ? /* @__PURE__ */ jsx(CanvasPortal, {
+        overlay: true,
+        children: renderViewerControls(strategy)
       }) : null, strategy.type === "3d-model" ? /* @__PURE__ */ jsx(Model, {
         model: strategy.model
       }) : null, strategy.type === "media" ? /* @__PURE__ */ jsx(Fragment$1, {
@@ -2169,7 +2982,7 @@ function RenderCanvas({
           children: [thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null]
         }) : null
       }) : null]
-    }), strategy.type), strategy.type === "media" && strategy.media.type === "Sound" && accompanyingCanvas ? /* @__PURE__ */ jsx(CanvasContext, {
+    }), `${canvas.id}/${strategy.type}`), strategy.type === "media" && strategy.media.type === "Sound" && accompanyingCanvas ? /* @__PURE__ */ jsx(CanvasContext, {
       canvas: accompanyingCanvas.id,
       children: /* @__PURE__ */ jsx(RenderCanvas, {
         renderViewerControls
@@ -2182,7 +2995,8 @@ const CanvasPanel = {
   RenderCanvas,
   RenderAnnotationPage,
   RenderAnnotation,
-  Viewer
+  Viewer,
+  CanvasBackground
 };
 function AnnotationContext({
   annotation,
@@ -2195,34 +3009,68 @@ function AnnotationContext({
     children
   });
 }
-function CollectionContext({
-  collection,
+function AnnotationPageContext({
+  annotationPage,
   children
 }) {
   return /* @__PURE__ */ jsx(ResourceProvider, {
     value: {
-      collection
+      annotationPage
     },
     children
   });
 }
-function RangeContext({
-  range,
+function CollectionContext({
+  collection,
   children
 }) {
   return /* @__PURE__ */ jsx(ResourceProvider, {
     value: {
-      range
+      collection
     },
     children
   });
 }
+function useAnnotationPage(options = {}, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  const annotationPageId = id ? id : ctx.annotationPage;
+  const annotationPage = useVaultSelector((s) => annotationPageId ? s.iiif.entities.AnnotationPage[annotationPageId] : void 0, [annotationPageId]);
+  return useMemo(() => {
+    if (!annotationPage) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(annotationPage);
+    }
+    return annotationPage;
+  }, [annotationPage, ...deps]);
+}
 function useAnnotationsAtTime(time, options = {}) {
   const allAnnotations = usePaintingAnnotations(options);
   return allAnnotations;
 }
 function useCanvasClock(canvasId, autoplay = false) {
 }
+function useCanvasSubset(idsOrRefs) {
+  const ctx = useResourceContext();
+  const manifestId = ctx.manifest;
+  const refs = idsOrRefs ? idsOrRefs.map((item) => typeof item === "string" ? item : item == null ? void 0 : item.id) : [];
+  return useVaultSelector((s) => {
+    const manifest = manifestId ? s.iiif.entities.Manifest[manifestId] : void 0;
+    const items = (manifest == null ? void 0 : manifest.items) || [];
+    if (typeof idsOrRefs === "undefined") {
+      return items;
+    }
+    const newItems = [];
+    for (const item of (manifest == null ? void 0 : manifest.items) || []) {
+      if (refs.indexOf(item.id) !== -1) {
+        newItems.push(item);
+      }
+    }
+    return newItems;
+  }, [refs.join("/")]);
+}
 function useCollection(options, deps = []) {
   const { id, selector } = options;
   const ctx = useResourceContext();
@@ -2348,21 +3196,6 @@ function useImageTile() {
     } : null
   };
 }
-function useRange(options = {}, deps = []) {
-  const { id, selector } = options;
-  const ctx = useResourceContext();
-  const rangeId = id ? id : ctx.range;
-  const range = useVaultSelector((s) => rangeId ? s.iiif.entities.Range[rangeId] : void 0, [rangeId]);
-  return useMemo(() => {
-    if (!range) {
-      return void 0;
-    }
-    if (selector) {
-      return selector(range);
-    }
-    return range;
-  }, [range, selector, ...deps]);
-}
 function useSearchService() {
   const manifest = useManifest();
   return manifest ? manifest.service.find((service) => service.profile === "SearchService1" || service.profile === "http://iiif.io/api/search/1/search") : void 0;
@@ -2371,5 +3204,5 @@ function useStyleHelper() {
   const vault = useVault();
   return useMemo(() => createStylesHelper(vault), [vault]);
 }
-export { AnnotationContext, CanvasContext, CanvasPanel, CanvasPortal, CollectionContext, ContextBridge, ImageServiceLoaderContext, ManifestContext, MediaPlayerProvider, OverlayPortalContext, PortalContext, RangeContext, ReactVaultContext, ResourceProvider, ResourceReactContext, SimpleViewerProvider, SimpleViewerReactContext, VaultProvider, ViewerPresetContext, VirtualAnnotationProvider, VisibleCanvasReactContext, emptyActions, expandTarget, flattenAnnotationPageIds, formatTime, getImageStrategy, getPaintables, parseSelector, parseSpecificResource, unknownResponse, unsupportedStrategy, useAnnotation, useAnnotationPageManager, useAnnotationsAtTime, useCanvas, useCanvasClock, useCollection, useContextBridge, useDispatch, useEventListener, useExistingVault, useExternalCollection, useExternalManifest, useExternalResource, useImageService, useImageServiceLoader, useImageTile, useLoadImageService, useManifest, useMediaActions, useMediaElements, useMediaState, usePaintables, usePaintingAnnotations, useRange, useRenderingStrategy, useResourceContext, useResourceEvents, useResources, useSearchService, useSimpleMediaPlayer, useSimpleViewer, useStyleHelper, useStyles, useThumbnail, useVault, useVaultEffect, useVaultSelector, useViewerPreset, useVirtualAnnotationPage, useVirtualAnnotationPageContext, useVisibleCanvases };
+export { AnnotationContext, AnnotationPageContext, CanvasContext, CanvasPanel, CanvasPortal, CollectionContext, ContextBridge, ImageServiceLoaderContext, InnerViewerProvider, ManifestContext, MediaPlayerProvider, OverlayPortalContext, PortalContext, RangeContext, ReactVaultContext, ResourceProvider, ResourceReactContext, SimpleViewerProvider, SimpleViewerReactContext, VaultProvider, ViewerPresetContext, VirtualAnnotationProvider, VisibleCanvasReactContext, emptyActions, emptyStrategy, expandTarget, findAllCanvasesInRange, findFirstCanvasFromRange, findManifestSelectedRange, findSelectedRange, flattenAnnotationPageIds, formatTime, getImageStrategy, getManifestSequence, getPaintables, getParsedTargetSelector, getVisibleCanvasesFromCanvasId, parseSelector, parseSpecificResource, unknownResponse, unsupportedStrategy, useAnnotation, useAnnotationPage, useAnnotationPageManager, useAnnotationsAtTime, useCanvas, useCanvasClock, useCanvasSequence, useCanvasSubset, useCollection, useContextBridge, useDispatch, useEventListener, useExistingVault, useExternalCollection, useExternalManifest, useExternalResource, useImageService, useImageServiceLoader, useImageTile, useLoadImageService, useManifest, useMediaActions, useMediaElements, useMediaState, usePaintables, usePaintingAnnotations, useRange, useRenderingStrategy, useResourceContext, useResourceEvents, useResources, useSearchService, useSimpleMediaPlayer, useSimpleViewer, useStyleHelper, useStyles, useThumbnail, useVault, useVaultEffect, useVaultSelector, useViewerPreset, useVirtualAnnotationPage, useVirtualAnnotationPageContext, useVisibleCanvases };
 //# sourceMappingURL=index.mjs.map