react-iiif-vault 0.9.11 → 0.9.12

package/dist/{esm → bundle/esm}/index.mjs

@@ -1,218 +1,163 @@
-import React$1, { useContext, useMemo, useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, Fragment, useReducer } from 'react';
-import { AtlasAuto, mergeStyles, RegionHighlight, TileSet as TileSet$1 } from '@atlas-viewer/atlas';
-import { globalVault, Vault } from '@iiif/vault';
-import { createAction } from 'typesafe-actions';
-import require$$0 from 'react-dom';
-import { createEventsHelper, createStylesHelper, createThumbnailHelper } from '@iiif/vault-helpers';
-import { ImageServiceLoader, getImageServices } from '@atlas-viewer/iiif-image-api';
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-var reactErrorBoundary_umd = {exports: {}};
-
-(function (module, exports) {
-(function (global, factory) {
-  factory(exports, React$1) ;
-})(commonjsGlobal, (function (exports, React) {
-  function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-      Object.keys(e).forEach(function (k) {
-        if (k !== 'default') {
-          var d = Object.getOwnPropertyDescriptor(e, k);
-          Object.defineProperty(n, k, d.get ? d : {
-            enumerable: true,
-            get: function () { return e[k]; }
-          });
-        }
-      });
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-    n["default"] = e;
-    return Object.freeze(n);
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React__default, { useContext, useMemo, useState, useEffect, createContext, useCallback, useRef, useLayoutEffect, Fragment as Fragment$1, useReducer } from "react";
+import { AtlasAuto, mergeStyles, RegionHighlight, TileSet } from "@atlas-viewer/atlas";
+import { globalVault, Vault } from "@iiif/vault";
+import { createAction } from "typesafe-actions";
+import require$$0 from "react-dom";
+import { ImageServiceLoader, getImageServices, getFixedSizeFromImage } from "@atlas-viewer/iiif-image-api";
+function _setPrototypeOf(o, p2) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf2(o2, p3) {
+    o2.__proto__ = p3;
+    return o2;
+  };
+  return _setPrototypeOf(o, p2);
+}
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+var changedArray = function changedArray2(a, b) {
+  if (a === void 0) {
+    a = [];
   }
-
-  var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-
-    return _setPrototypeOf(o, p);
+  if (b === void 0) {
+    b = [];
   }
-
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    _setPrototypeOf(subClass, superClass);
+  return a.length !== b.length || a.some(function(item, index) {
+    return !Object.is(item, b[index]);
+  });
+};
+var initialState = {
+  error: null
+};
+var ErrorBoundary = /* @__PURE__ */ function(_React$Component) {
+  _inheritsLoose(ErrorBoundary2, _React$Component);
+  function ErrorBoundary2() {
+    var _this;
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
+    _this.state = initialState;
+    _this.resetErrorBoundary = function() {
+      var _this$props;
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      _this.props.onReset == null ? void 0 : (_this$props = _this.props).onReset.apply(_this$props, args);
+      _this.reset();
+    };
+    return _this;
   }
-
-  var changedArray = function changedArray(a, b) {
-    if (a === void 0) {
-      a = [];
-    }
-
-    if (b === void 0) {
-      b = [];
-    }
-
-    return a.length !== b.length || a.some(function (item, index) {
-      return !Object.is(item, b[index]);
-    });
+  ErrorBoundary2.getDerivedStateFromError = function getDerivedStateFromError(error) {
+    return {
+      error
+    };
   };
-
-  var initialState = {
-    error: null
+  var _proto = ErrorBoundary2.prototype;
+  _proto.reset = function reset() {
+    this.setState(initialState);
   };
-
-  var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
-    _inheritsLoose(ErrorBoundary, _React$Component);
-
-    function ErrorBoundary() {
-      var _this;
-
-      for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
-        _args[_key] = arguments[_key];
-      }
-
-      _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
-      _this.state = initialState;
-
-      _this.resetErrorBoundary = function () {
-        var _this$props;
-
-        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-          args[_key2] = arguments[_key2];
-        }
-
-        _this.props.onReset == null ? void 0 : (_this$props = _this.props).onReset.apply(_this$props, args);
-
-        _this.reset();
-      };
-
-      return _this;
+  _proto.componentDidCatch = function componentDidCatch(error, info) {
+    var _this$props$onError, _this$props2;
+    (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);
+  };
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    var error = this.state.error;
+    var resetKeys = this.props.resetKeys;
+    if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
+      var _this$props$onResetKe, _this$props3;
+      (_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);
+      this.reset();
     }
-
-    ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {
-      return {
-        error: error
+  };
+  _proto.render = function render() {
+    var error = this.state.error;
+    var _this$props4 = this.props, fallbackRender = _this$props4.fallbackRender, FallbackComponent = _this$props4.FallbackComponent, fallback = _this$props4.fallback;
+    if (error !== null) {
+      var _props = {
+        error,
+        resetErrorBoundary: this.resetErrorBoundary
       };
-    };
-
-    var _proto = ErrorBoundary.prototype;
-
-    _proto.reset = function reset() {
-      this.setState(initialState);
-    };
-
-    _proto.componentDidCatch = function componentDidCatch(error, info) {
-      var _this$props$onError, _this$props2;
-
-      (_this$props$onError = (_this$props2 = this.props).onError) == null ? void 0 : _this$props$onError.call(_this$props2, error, info);
-    };
-
-    _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-      var error = this.state.error;
-      var resetKeys = this.props.resetKeys; // There's an edge case where if the thing that triggered the error
-      // happens to *also* be in the resetKeys array, we'd end up resetting
-      // the error boundary immediately. This would likely trigger a second
-      // error to be thrown.
-      // So we make sure that we don't check the resetKeys on the first call
-      // of cDU after the error is set
-
-      if (error !== null && prevState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
-        var _this$props$onResetKe, _this$props3;
-
-        (_this$props$onResetKe = (_this$props3 = this.props).onResetKeysChange) == null ? void 0 : _this$props$onResetKe.call(_this$props3, prevProps.resetKeys, resetKeys);
-        this.reset();
-      }
-    };
-
-    _proto.render = function render() {
-      var error = this.state.error;
-      var _this$props4 = this.props,
-          fallbackRender = _this$props4.fallbackRender,
-          FallbackComponent = _this$props4.FallbackComponent,
-          fallback = _this$props4.fallback;
-
-      if (error !== null) {
-        var _props = {
-          error: error,
-          resetErrorBoundary: this.resetErrorBoundary
-        };
-
-        if ( /*#__PURE__*/React__namespace.isValidElement(fallback)) {
-          return fallback;
-        } else if (typeof fallbackRender === 'function') {
-          return fallbackRender(_props);
-        } else if (FallbackComponent) {
-          return /*#__PURE__*/React__namespace.createElement(FallbackComponent, _props);
-        } else {
-          throw new Error('react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop');
-        }
+      if (/* @__PURE__ */ React.isValidElement(fallback)) {
+        return fallback;
+      } else if (typeof fallbackRender === "function") {
+        return fallbackRender(_props);
+      } else if (FallbackComponent) {
+        return /* @__PURE__ */ React.createElement(FallbackComponent, _props);
+      } else {
+        throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
       }
-
-      return this.props.children;
-    };
-
-    return ErrorBoundary;
-  }(React__namespace.Component);
-
-  function withErrorBoundary(Component, errorBoundaryProps) {
-    var Wrapped = function Wrapped(props) {
-      return /*#__PURE__*/React__namespace.createElement(ErrorBoundary, errorBoundaryProps, /*#__PURE__*/React__namespace.createElement(Component, props));
-    }; // Format for display in DevTools
-
-
-    var name = Component.displayName || Component.name || 'Unknown';
-    Wrapped.displayName = "withErrorBoundary(" + name + ")";
-    return Wrapped;
-  }
-
-  function useErrorHandler(givenError) {
-    var _React$useState = React__namespace.useState(null),
-        error = _React$useState[0],
-        setError = _React$useState[1];
-
-    if (givenError != null) throw givenError;
-    if (error != null) throw error;
-    return setError;
-  }
-  /*
-  eslint
-    @typescript-eslint/sort-type-union-intersection-members: "off",
-    @typescript-eslint/no-throw-literal: "off",
-    @typescript-eslint/prefer-nullish-coalescing: "off"
-  */
-
-  exports.ErrorBoundary = ErrorBoundary;
-  exports.useErrorHandler = useErrorHandler;
-  exports.withErrorBoundary = withErrorBoundary;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-
-}(reactErrorBoundary_umd, reactErrorBoundary_umd.exports));
-
-var __defProp$a = Object.defineProperty;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
     }
-  return a;
-};
+    return this.props.children;
+  };
+  return ErrorBoundary2;
+}(React.Component);
+var jsxRuntime = { exports: {} };
+var reactJsxRuntime_production_min = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var f = React__default, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m$1 = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p = { key: true, ref: true, __self: true, __source: true };
+function q(c, a, g) {
+  var b, d = {}, e = null, h = null;
+  g !== void 0 && (e = "" + g);
+  a.key !== void 0 && (e = "" + a.key);
+  a.ref !== void 0 && (h = a.ref);
+  for (b in a)
+    m$1.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
+  if (c && c.defaultProps)
+    for (b in a = c.defaultProps, a)
+      d[b] === void 0 && (d[b] = a[b]);
+  return { $$typeof: k, type: c, key: e, ref: h, props: d, _owner: n.current };
+}
+reactJsxRuntime_production_min.Fragment = l;
+reactJsxRuntime_production_min.jsx = q;
+reactJsxRuntime_production_min.jsxs = q;
+{
+  jsxRuntime.exports = reactJsxRuntime_production_min;
+}
+const jsx = jsxRuntime.exports.jsx;
+const jsxs = jsxRuntime.exports.jsxs;
+const Fragment = jsxRuntime.exports.Fragment;
 const defaultResourceContext = {
   collection: void 0,
   manifest: void 0,
@@ -220,21 +165,24 @@ const defaultResourceContext = {
   canvas: void 0,
   annotation: void 0
 };
-const ResourceReactContext = React$1.createContext(defaultResourceContext);
+const ResourceReactContext = React__default.createContext(defaultResourceContext);
 const useResourceContext = () => {
   return useContext(ResourceReactContext);
 };
-function ResourceProvider({ value, children }) {
+function ResourceProvider({
+  value,
+  children
+}) {
   const parentContext = useResourceContext();
   const newContext = useMemo(() => {
-    return __spreadValues$a(__spreadValues$a({}, parentContext), value);
+    return __spreadValues(__spreadValues({}, parentContext), value);
   }, [value, parentContext]);
-  return /* @__PURE__ */ React$1.createElement(ResourceReactContext.Provider, {
-    value: newContext
-  }, children);
+  return /* @__PURE__ */ jsx(ResourceReactContext.Provider, {
+    value: newContext,
+    children
+  });
 }
-
-const ReactVaultContext = React$1.createContext({
+const ReactVaultContext = React__default.createContext({
   vault: null,
   setVaultInstance: (vault) => {
   }
@@ -258,13 +206,17 @@ function VaultProvider({
     }
     return new Vault();
   });
-  return /* @__PURE__ */ React$1.createElement(ReactVaultContext.Provider, {
-    value: { vault: vaultInstance, setVaultInstance }
-  }, /* @__PURE__ */ React$1.createElement(ResourceProvider, {
-    value: resources || {}
-  }, children));
+  return /* @__PURE__ */ jsx(ReactVaultContext.Provider, {
+    value: {
+      vault: vaultInstance,
+      setVaultInstance
+    },
+    children: /* @__PURE__ */ jsx(ResourceProvider, {
+      value: resources || {},
+      children
+    })
+  });
 }
-
 const useVault = () => {
   const { vault } = useContext(ReactVaultContext);
   if (vault === null) {
@@ -272,27 +224,6 @@ const useVault = () => {
   }
   return vault;
 };
-
-var __async$1 = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 function useExternalResource(idOrRef, { noCache = false } = {}) {
   const id = typeof idOrRef === "string" ? idOrRef : idOrRef.id;
   const vault = useVault();
@@ -303,9 +234,9 @@ function useExternalResource(idOrRef, { noCache = false } = {}) {
   }, [id, vault]);
   const [resource, setResource] = useState(initialData);
   useEffect(() => {
-    (() => __async$1(this, null, function* () {
+    (async () => {
       try {
-        const fetchedResource = initialData && !noCache ? initialData : yield vault.load(id);
+        const fetchedResource = initialData && !noCache ? initialData : await vault.load(id);
         const _realId = fetchedResource ? fetchedResource.id || fetchedResource["@id"] : null;
         if (fetchedResource && realId !== _realId) {
           setRealId(_realId);
@@ -314,7 +245,7 @@ function useExternalResource(idOrRef, { noCache = false } = {}) {
       } catch (err) {
         setError(err);
       }
-    }))();
+    })();
   }, [id, noCache]);
   return {
     isLoaded: !!resource,
@@ -325,24 +256,32 @@ function useExternalResource(idOrRef, { noCache = false } = {}) {
     cached: !!(resource && resource === initialData)
   };
 }
-
 function useExternalManifest(idOrRef, options) {
   const { id, isLoaded, error, resource, requestId, cached } = useExternalResource(idOrRef, options);
   return { id, isLoaded, error, manifest: resource, requestId, cached };
 }
-
-function ManifestContext({ manifest, children }) {
-  return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
-    value: { manifest }
-  }, children);
+function ManifestContext({
+  manifest,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      manifest
+    },
+    children
+  });
 }
-
-function CanvasContext({ canvas, children }) {
-  return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
-    value: { canvas }
-  }, children);
+function CanvasContext({
+  canvas,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      canvas
+    },
+    children
+  });
 }
-
 function useVaultSelector(selector, deps = []) {
   const vault = useVault();
   const [selectedState, setSelectedState] = useState(() => selector(vault.getState(), vault));
@@ -353,15 +292,13 @@ function useVaultSelector(selector, deps = []) {
   }, deps);
   return selectedState;
 }
-
-const VisibleCanvasReactContext = React$1.createContext([]);
+const VisibleCanvasReactContext = React__default.createContext([]);
 function useVisibleCanvases() {
   const ids = useContext(VisibleCanvasReactContext);
   return useVaultSelector((state) => {
     return ids.map((id) => state.iiif.entities.Canvas[id]).filter(Boolean);
   }, [ids]);
 }
-
 const noop = () => {
 };
 const SimpleViewerReactContext = createContext({
@@ -456,25 +393,32 @@ function SimpleViewerProvider(props) {
   }), [nextCanvas, previousCanvas, currentCanvasIndex, canvasList, setCurrentCanvasIndex, internalSetCurrentCanvasId]);
   if (!manifest.manifest) {
     console.warn("The manifest passed to the provider is not a valid IIIF manifest.");
-    return /* @__PURE__ */ React$1.createElement("div", null, "Sorry, something went wrong.");
+    return /* @__PURE__ */ jsx("div", {
+      children: "Sorry, something went wrong."
+    });
   }
   if (!manifest.isLoaded) {
-    return /* @__PURE__ */ React$1.createElement("div", null, "Loading...");
+    return /* @__PURE__ */ jsx("div", {
+      children: "Loading..."
+    });
   }
-  return /* @__PURE__ */ React$1.createElement(SimpleViewerReactContext.Provider, {
-    value: ctx
-  }, /* @__PURE__ */ React$1.createElement(VisibleCanvasReactContext.Provider, {
-    value: visible
-  }, /* @__PURE__ */ React$1.createElement(ManifestContext, {
-    manifest: manifest.manifest.id
-  }, /* @__PURE__ */ React$1.createElement(CanvasContext, {
-    canvas: currentCanvasId
-  }, props.children))));
+  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
+        })
+      })
+    })
+  });
 }
 function useSimpleViewer() {
   return useContext(SimpleViewerReactContext);
 }
-
 function useContextBridge() {
   return {
     VaultContext: useContext(ReactVaultContext),
@@ -484,16 +428,18 @@ function useContextBridge() {
   };
 }
 function ContextBridge(props) {
-  return /* @__PURE__ */ React$1.createElement(VaultProvider, {
+  return /* @__PURE__ */ jsx(VaultProvider, {
     vault: props.bridge.VaultContext.vault || void 0,
-    resources: props.bridge.ResourceContext
-  }, /* @__PURE__ */ React$1.createElement(VisibleCanvasReactContext.Provider, {
-    value: props.bridge.VisibleCanvasReactContext
-  }, /* @__PURE__ */ React$1.createElement(SimpleViewerReactContext.Provider, {
-    value: props.bridge.SimpleViewerReactContext
-  }, props.children)));
-}
-
+    resources: props.bridge.ResourceContext,
+    children: /* @__PURE__ */ jsx(VisibleCanvasReactContext.Provider, {
+      value: props.bridge.VisibleCanvasReactContext,
+      children: /* @__PURE__ */ jsx(SimpleViewerReactContext.Provider, {
+        value: props.bridge.SimpleViewerReactContext,
+        children: props.children
+      })
+    })
+  });
+}
 const IMPORT_ENTITIES = "@iiif/IMPORT_ENTITIES";
 const MODIFY_ENTITY_FIELD = "@iiif/MODIFY_ENTITY_FIELD";
 const REORDER_ENTITY_FIELD = "@iiif/REORDER_ENTITY_FIELD";
@@ -505,12 +451,10 @@ const reorderEntityField = createAction(REORDER_ENTITY_FIELD)();
 const addReference = createAction(ADD_REFERENCE)();
 const removeReference = createAction(REMOVE_REFERENCE)();
 const entityActions = { importEntities, modifyEntityField, reorderEntityField, addReference, removeReference };
-
 const ADD_MAPPING = "@iiif/ADD_MAPPING";
 const ADD_MAPPINGS = "@iiif/ADD_MAPPINGS";
 createAction(ADD_MAPPING)();
 createAction(ADD_MAPPINGS)();
-
 const SET_META_VALUE = "@iiif/SET_META_VALUE";
 const SET_META_VALUE_DYNAMIC = "@iiif/SET_META_VALUE_DYNAMIC";
 const UNSET_META_VALUE = "@iiif/UNSET_META_VALUE";
@@ -527,12 +471,10 @@ createAction(REQUEST_ERROR)();
 createAction(REQUEST_MISMATCH)();
 createAction(REQUEST_COMPLETE)();
 createAction(REQUEST_OFFLINE_RESOURCE)();
-
 const BATCH_ACTIONS = "@iiif/BATCH";
 const BATCH_IMPORT = "@iiif/BATCH_IMPORT";
 createAction(BATCH_ACTIONS)();
 createAction(BATCH_IMPORT)();
-
 function useDispatch() {
   const vault = useVault();
   const store = vault.getStore();
@@ -540,7 +482,6 @@ function useDispatch() {
     return (action) => store.dispatch(action);
   }, [store]);
 }
-
 function isVaultActivated(obj) {
   return typeof obj !== "string" && obj && obj.bindToVault;
 }
@@ -642,73 +583,61 @@ function useVirtualAnnotationPage() {
     }
   ];
 }
-
 const VirtualAnnotationPageContext = createContext(null);
 function useVirtualAnnotationPageContext() {
   const ctx = useContext(VirtualAnnotationPageContext);
-  return [
-    ctx.fullPage,
-    {
-      addAnnotation: ctx.addAnnotation,
-      removeAnnotation: ctx.removeAnnotation
-    }
-  ];
+  return [ctx.fullPage, {
+    addAnnotation: ctx.addAnnotation,
+    removeAnnotation: ctx.removeAnnotation
+  }];
 }
-function VirtualAnnotationProvider({ children }) {
-  const [fullPage, { addAnnotation, removeAnnotation }] = useVirtualAnnotationPage();
-  return /* @__PURE__ */ React$1.createElement(VirtualAnnotationPageContext.Provider, {
-    value: useMemo(() => ({ fullPage, addAnnotation, removeAnnotation }), [fullPage])
-  }, children);
-}
-
-var __defProp$9 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-function DefaultCanvasFallback({ width, style, height }) {
-  return /* @__PURE__ */ React$1.createElement("div", {
-    style: __spreadProps$7(__spreadValues$9({ width, height, minHeight: 500 }, style || {}), { background: "#f9f9f9" })
-  }, "Unknown error");
+function VirtualAnnotationProvider({
+  children
+}) {
+  const [fullPage, {
+    addAnnotation,
+    removeAnnotation
+  }] = useVirtualAnnotationPage();
+  return /* @__PURE__ */ jsx(VirtualAnnotationPageContext.Provider, {
+    value: useMemo(() => ({
+      fullPage,
+      addAnnotation,
+      removeAnnotation
+    }), [fullPage]),
+    children
+  });
+}
+function DefaultCanvasFallback({
+  width,
+  style,
+  height
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    style: __spreadProps(__spreadValues({
+      width,
+      height,
+      minHeight: 500
+    }, style || {}), {
+      background: "#f9f9f9"
+    }),
+    children: "Unknown error"
+  });
 }
-
 var createRoot;
-
 var m = require$$0;
 {
-  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  createRoot = function(c, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.createRoot(c, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
+  createRoot = m.createRoot;
 }
-
 const ViewerPresetContext = createContext(null);
 function useViewerPreset() {
   return useContext(ViewerPresetContext);
 }
-
-const PortalContext = React$1.createContext(null);
-const OverlayPortalContext = React$1.createContext(null);
-function CanvasPortal({ children, overlay }) {
+const PortalContext = React__default.createContext(null);
+const OverlayPortalContext = React__default.createContext(null);
+function CanvasPortal({
+  children,
+  overlay
+}) {
   const htmlElement = useContext(overlay ? OverlayPortalContext : PortalContext);
   const rootRef = useRef(null);
   const preset = useViewerPreset();
@@ -726,45 +655,14 @@ function CanvasPortal({ children, overlay }) {
   }, []);
   useLayoutEffect(() => {
     if (rootRef.current) {
-      rootRef.current.render(/* @__PURE__ */ React$1.createElement(ViewerPresetContext.Provider, {
-        value: preset
-      }, children));
+      rootRef.current.render(/* @__PURE__ */ jsx(ViewerPresetContext.Provider, {
+        value: preset,
+        children
+      }));
     }
   }, [children, preset]);
   return null;
 }
-
-var __defProp$8 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$8.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 function Viewer(_a) {
   var _b = _a, {
     children,
@@ -786,32 +684,91 @@ function Viewer(_a) {
     setPortalElement(portal.current);
     setOverlayPortalElement(overlayPortal.current);
   }, []);
-  return /* @__PURE__ */ React$1.createElement(reactErrorBoundary_umd.exports.ErrorBoundary, {
-    fallbackRender: () => /* @__PURE__ */ React$1.createElement(ErrorFallback, __spreadValues$8({}, props))
-  }, /* @__PURE__ */ React$1.createElement(AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
-    containerProps: __spreadValues$8({ style: { position: "relative" } }, props.containerProps || {}),
-    htmlChildren: /* @__PURE__ */ React$1.createElement("div", {
-      ref: overlayPortal
-    }),
-    onCreated: (preset) => {
-      setViewerPreset(preset);
-      if (props.onCreated) {
-        props.onCreated(preset);
+  return /* @__PURE__ */ jsxs(ErrorBoundary, {
+    fallbackRender: () => /* @__PURE__ */ jsx(ErrorFallback, __spreadValues({}, props)),
+    children: [/* @__PURE__ */ jsx(AtlasAuto, __spreadProps(__spreadValues({}, props), {
+      containerProps: __spreadValues({
+        style: {
+          position: "relative"
+        }
+      }, props.containerProps || {}),
+      htmlChildren: /* @__PURE__ */ jsx("div", {
+        ref: overlayPortal
+      }),
+      onCreated: (preset) => {
+        setViewerPreset(preset);
+        if (props.onCreated) {
+          props.onCreated(preset);
+        }
+      },
+      children: /* @__PURE__ */ jsx(ViewerPresetContext.Provider, {
+        value: viewerPreset,
+        children: /* @__PURE__ */ jsx(PortalContext.Provider, {
+          value: portalElement,
+          children: /* @__PURE__ */ jsx(OverlayPortalContext.Provider, {
+            value: overlayPortalElement,
+            children: /* @__PURE__ */ jsx(ContextBridge, {
+              bridge,
+              children: /* @__PURE__ */ jsx(VirtualAnnotationProvider, {
+                children
+              })
+            })
+          })
+        })
+      })
+    })), /* @__PURE__ */ jsx("div", {
+      ref: portal
+    })]
+  });
+}
+function createEventsHelper(vault) {
+  return {
+    addEventListener(resource, event, listener, scope) {
+      if (!resource) {
+        return;
+      }
+      vault.setMetaValue([resource.id, "eventManager", event], (registeredCallbacks) => {
+        const callbacks = registeredCallbacks || [];
+        for (const registered of callbacks) {
+          if (registered.callback === listener) {
+            return callbacks;
+          }
+        }
+        return [...callbacks, { callback: listener, scope }];
+      });
+      return listener;
+    },
+    removeEventListener(resource, event, listener) {
+      if (!resource) {
+        return;
+      }
+      vault.setMetaValue([resource.id, "eventManager", event], (registeredCallbacks) => {
+        return (registeredCallbacks || []).filter((registeredCallback) => registeredCallback.callback !== listener);
+      });
+    },
+    getListenersAsProps(resourceOrId, scope) {
+      const resource = typeof resourceOrId === "string" ? { id: resourceOrId } : resourceOrId;
+      if (!resource || !resource.id) {
+        return {};
       }
+      const hooks = vault.getResourceMeta(resource.id, "eventManager");
+      const props = {};
+      if (hooks && resource) {
+        for (const hook of Object.keys(hooks)) {
+          props[hook] = (e) => {
+            const fullResource = vault.get(resource);
+            for (const { callback, scope: _scope } of hooks[hook] || []) {
+              if (!_scope || scope && _scope.indexOf(scope) !== -1) {
+                callback(e, fullResource);
+              }
+            }
+          };
+        }
+      }
+      return props;
     }
-  }), /* @__PURE__ */ React$1.createElement(ViewerPresetContext.Provider, {
-    value: viewerPreset
-  }, /* @__PURE__ */ React$1.createElement(PortalContext.Provider, {
-    value: portalElement
-  }, /* @__PURE__ */ React$1.createElement(OverlayPortalContext.Provider, {
-    value: overlayPortalElement
-  }, /* @__PURE__ */ React$1.createElement(ContextBridge, {
-    bridge
-  }, /* @__PURE__ */ React$1.createElement(VirtualAnnotationProvider, null, children)))))), /* @__PURE__ */ React$1.createElement("div", {
-    ref: portal
-  }));
-}
-
+  };
+}
 function useResourceEvents(resource, scope) {
   const vault = useVault();
   const helper = useMemo(() => createEventsHelper(vault), [vault]);
@@ -825,7 +782,18 @@ function useResourceEvents(resource, scope) {
     return resource ? helper.getListenersAsProps(resource, scope) : {};
   }, [hooks, resource, vault, scope]);
 }
-
+function createStylesHelper(vault) {
+  return {
+    applyStyles(resource, scope, styles) {
+      const id = typeof resource === "string" ? resource : resource.id;
+      return vault.setMetaValue([id, "styles", scope], styles);
+    },
+    getAppliedStyles(resource) {
+      const id = typeof resource === "string" ? resource : resource.id;
+      return vault.getResourceMeta(id, "styles");
+    }
+  };
+}
 function useStyles(resource, scope) {
   const vault = useVault();
   const helper = useMemo(() => createStylesHelper(vault), [vault]);
@@ -837,8 +805,7 @@ function useStyles(resource, scope) {
     return styles ? scope ? styles[scope] : styles : void 0;
   }, [resource, scope]);
 }
-
-const BOX_SELECTOR = /&?(xywh=)?(pixel:|percent:)?([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?)/;
+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) {
   if (Array.isArray(source)) {
@@ -890,7 +857,7 @@ function parseSelector(source) {
       const selector = {
         type: "BoxSelector",
         spatial: {
-          unit: matchBoxSelector[2] === "percent:" ? "percent" : "pixel",
+          unit: matchBoxSelector[2] === "percent:" || matchBoxSelector[2] === "pct:" ? "percent" : "pixel",
           x: parseFloat(matchBoxSelector[3]),
           y: parseFloat(matchBoxSelector[4]),
           width: parseFloat(matchBoxSelector[5]),
@@ -926,26 +893,6 @@ function parseSelector(source) {
     selectors: []
   };
 }
-
-var __defProp$7 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 function expandTarget(target, options = {}) {
   if (Array.isArray(target)) {
     return expandTarget(target[0]);
@@ -1002,7 +949,7 @@ function expandTarget(target, options = {}) {
     if (!fragment) {
       return {
         type: "SpecificResource",
-        source: __spreadProps$5(__spreadValues$7({}, target), {
+        source: __spreadProps(__spreadValues({}, target), {
           id
         }),
         selector: null,
@@ -1011,7 +958,7 @@ function expandTarget(target, options = {}) {
     }
     return expandTarget({
       type: "SpecificResource",
-      source: __spreadProps$5(__spreadValues$7({}, target), {
+      source: __spreadProps(__spreadValues({}, target), {
         id
       }),
       selector: {
@@ -1027,26 +974,6 @@ function expandTarget(target, options = {}) {
     selectors: []
   };
 }
-
-var __defProp$6 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 function useAnnotation(options = {}, deps = []) {
   const { id, selector } = options;
   const ctx = useResourceContext();
@@ -1058,7 +985,7 @@ function useAnnotation(options = {}, deps = []) {
     if (!annotation) {
       return void 0;
     }
-    const newAnnotation = __spreadProps$4(__spreadValues$6({}, annotation), {
+    const newAnnotation = __spreadProps(__spreadValues({}, annotation), {
       body,
       target: expandTarget(annotation.target, { typeMap: vault.getState().iiif.mapping })
     });
@@ -1068,7 +995,6 @@ function useAnnotation(options = {}, deps = []) {
     return newAnnotation;
   }, [annotation, selector, body, ...deps]);
 }
-
 function useCanvas(options = {}, deps = []) {
   const { id, selector } = options;
   const ctx = useResourceContext();
@@ -1084,30 +1010,15 @@ function useCanvas(options = {}, deps = []) {
     return canvas;
   }, [canvas, selector, ...deps]);
 }
-
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    }
-  return a;
-};
 const RenderAnnotation = ({
   id,
   style: defaultStyle,
   className,
   interactive
 }) => {
-  const annotation = useAnnotation({ id });
+  const annotation = useAnnotation({
+    id
+  });
   const style = useStyles(annotation, "atlas");
   const html = useStyles(annotation, "html");
   const events = useResourceEvents(annotation, ["atlas"]);
@@ -1119,7 +1030,7 @@ const RenderAnnotation = ({
   if (!isValid) {
     return null;
   }
-  return /* @__PURE__ */ React$1.createElement(RegionHighlight, __spreadValues$5({
+  return /* @__PURE__ */ jsx(RegionHighlight, __spreadValues({
     id: annotation.id,
     isEditing: true,
     region: annotation.target.selector.spatial,
@@ -1131,7 +1042,6 @@ const RenderAnnotation = ({
     hrefTarget: (html == null ? void 0 : html.target) || null
   }, events));
 };
-
 const RenderAnnotationPage = ({
   className,
   page
@@ -1140,17 +1050,16 @@ const RenderAnnotationPage = ({
   const style = useStyles(page, "atlas");
   const html = useStyles(page, "html");
   useVaultSelector((state) => page.id ? state.iiif.entities.AnnotationPage[page.id] : null, []);
-  return /* @__PURE__ */ React$1.createElement(Fragment, null, (_a = page.items) == null ? void 0 : _a.map((annotation) => {
-    return /* @__PURE__ */ React$1.createElement(RenderAnnotation, {
-      key: annotation.id,
-      id: annotation.id,
-      style,
-      className: (html == null ? void 0 : html.className) || className
-    });
-  }));
+  return /* @__PURE__ */ jsx(Fragment$1, {
+    children: (_a = page.items) == null ? void 0 : _a.map((annotation) => {
+      return /* @__PURE__ */ jsx(RenderAnnotation, {
+        id: annotation.id,
+        style,
+        className: (html == null ? void 0 : html.className) || className
+      }, annotation.id);
+    })
+  });
 };
-
-const TileSet = TileSet$1;
 function RenderImage({
   id,
   image,
@@ -1162,35 +1071,33 @@ function RenderImage({
   children
 }) {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React$1.createElement(Fragment, {
-    key: id
-  }, !image.service ? /* @__PURE__ */ React$1.createElement(Fragment, {
-    key: "no-service"
-  }, /* @__PURE__ */ React$1.createElement("world-image", {
-    uri: image.id,
-    target: image.target.spatial,
-    display: image.width && image.height ? {
-      width: image.width,
-      height: image.height
-    } : void 0
-  }), annotations, children) : /* @__PURE__ */ React$1.createElement(Fragment, {
-    key: "service"
-  }, /* @__PURE__ */ React$1.createElement(TileSet, {
-    viewport: isStatic,
-    tiles: {
-      id: image.service.id || image.service["@id"],
-      height: image.height,
-      width: image.width,
-      imageService: image.service,
-      thumbnail: thumbnail && thumbnail.type === "fixed" ? thumbnail : void 0
-    },
-    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));
+  return /* @__PURE__ */ jsx(Fragment$1, {
+    children: !image.service ? /* @__PURE__ */ jsxs(Fragment$1, {
+      children: [/* @__PURE__ */ jsx("world-image", {
+        uri: image.id,
+        target: image.target.spatial,
+        display: image.width && image.height ? {
+          width: image.width,
+          height: image.height
+        } : void 0
+      }), annotations, children]
+    }, "no-service") : /* @__PURE__ */ jsxs(Fragment$1, {
+      children: [/* @__PURE__ */ jsx(TileSet, {
+        tiles: {
+          id: image.service.id || image.service["@id"] || "unknown",
+          height: image.height,
+          width: image.width,
+          imageService: image.service,
+          thumbnail: thumbnail && thumbnail.type === "fixed" ? thumbnail : void 0
+        },
+        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]
+    }, "service")
+  }, id);
 }
-
 function parseSpecificResource(resource) {
   if (resource.type === "SpecificResource") {
     return [resource.source, { selector: resource.selector }];
@@ -1249,7 +1156,6 @@ const unknownResponse = { type: "unknown" };
 const unsupportedStrategy = (reason) => {
   return { type: "unknown", reason, annotations: { pages: [] } };
 };
-
 function useManifest(options = {}, deps = []) {
   const { id, selector } = options;
   const ctx = useResourceContext();
@@ -1266,7 +1172,6 @@ function useManifest(options = {}, deps = []) {
     return manifest;
   }, [manifest, selector, ...deps]);
 }
-
 function getMeta$1(state, resourceId) {
   var _a;
   const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
@@ -1293,7 +1198,6 @@ function useEnabledAnnotationPageIds(resourceId, availablePageIds) {
     return pageIds;
   }, [resourceId, availablePageIds]);
 }
-
 function flattenAnnotationPageIds({
   canvas,
   manifest,
@@ -1327,26 +1231,6 @@ function flattenAnnotationPageIds({
   }
   return foundIds;
 }
-
-var __defProp$4 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
 function getMeta(state, resourceId) {
   var _a;
   const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
@@ -1377,7 +1261,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
       if (existingResources && !existingResources[resourceId]) {
         return existingResources;
       }
-      return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
+      return __spreadProps(__spreadValues({}, existingResources || {}), {
         [resourceId]: false
       });
     });
@@ -1404,7 +1288,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
       if (existingResources && existingResources[resourceId]) {
         return existingResources;
       }
-      return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
+      return __spreadProps(__spreadValues({}, existingResources || {}), {
         [resourceId]: true
       });
     });
@@ -1416,35 +1300,13 @@ function useAnnotationPageManager(resourceId, options = {}) {
     setPageDisabled
   };
 }
-
 function useResources(ids, type) {
   return useVaultSelector((state, vault) => vault.get(ids.map((id) => ({ id, type }))), [ids, type]);
 }
-
-const ImageServiceLoaderContext = React$1.createContext(new ImageServiceLoader());
+const ImageServiceLoaderContext = React__default.createContext(new ImageServiceLoader());
 function useImageServiceLoader() {
   return useContext(ImageServiceLoaderContext);
 }
-
-var __defProp$3 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 function useLoadImageService() {
   const loader = useImageServiceLoader();
   const [imageServiceStatus, setImageServiceStatus] = useState({});
@@ -1468,7 +1330,7 @@ function useLoadImageService() {
       } else if (!imageServiceStatus[imageServiceId]) {
         if (!didUnmount.current) {
           setImageServiceStatus((r) => {
-            return __spreadProps$2(__spreadValues$3({}, r), {
+            return __spreadProps(__spreadValues({}, r), {
               [imageServiceId]: "loading"
             });
           });
@@ -1480,7 +1342,7 @@ function useLoadImageService() {
         }).then(() => {
           if (!didUnmount.current) {
             setImageServiceStatus((r) => {
-              return __spreadProps$2(__spreadValues$3({}, r), {
+              return __spreadProps(__spreadValues({}, r), {
                 [imageServiceId]: "done"
               });
             });
@@ -1492,7 +1354,6 @@ function useLoadImageService() {
   }, [loader, imageServiceStatus]);
   return [loadImageService, imageServiceStatus];
 }
-
 function usePaintingAnnotations(options = {}) {
   const canvas = useCanvas(options.canvasId ? { id: options.canvasId } : void 0);
   return useVaultSelector((state, vault) => {
@@ -1507,7 +1368,6 @@ function usePaintingAnnotations(options = {}) {
     return flatAnnotations;
   }, [canvas]);
 }
-
 function usePaintables(options, deps = []) {
   const vault = useVault();
   const paintingAnnotations = usePaintingAnnotations();
@@ -1551,7 +1411,6 @@ function usePaintables(options, deps = []) {
   const actions = { makeChoice };
   return [paintables, actions];
 }
-
 function getImageStrategy(canvas, paintables, loadImageService) {
   const imageTypes = [];
   for (const singleImage of paintables.items) {
@@ -1625,7 +1484,6 @@ function getImageStrategy(canvas, paintables, loadImageService) {
     choice: paintables.choice
   };
 }
-
 const supportedFormats = ["model/gltf-binary"];
 function get3dStrategy(canvas, paintables) {
   const first = paintables.items[0];
@@ -1641,7 +1499,6 @@ function get3dStrategy(canvas, paintables) {
     model: resource
   };
 }
-
 function getAudioStrategy(canvas, paintables) {
   var _a;
   if (!canvas.duration) {
@@ -1684,7 +1541,6 @@ function getAudioStrategy(canvas, paintables) {
     }
   };
 }
-
 function getVideoStrategy(canvas, paintables) {
   var _a;
   const videoPaintables = paintables.items.filter((t) => t.type === "video");
@@ -1729,26 +1585,6 @@ function getVideoStrategy(canvas, paintables) {
     }
   };
 }
-
-var __defProp$2 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 function useRenderingStrategy(options) {
   const manifest = useManifest();
   const canvas = useCanvas();
@@ -1806,21 +1642,96 @@ function useRenderingStrategy(options) {
       return [strategy, emptyActions];
     }
     return [
-      __spreadProps$1(__spreadValues$2({}, strategy), {
+      __spreadProps(__spreadValues({}, strategy), {
         annotations: { pages: enabledPages }
       }),
       actions
     ];
   }, [strategy, enabledPages]);
 }
-
 const useVaultEffect = (callback, deps = []) => {
   const vault = useVault();
   useEffect(() => {
     callback(vault);
   }, [vault, ...deps]);
 };
-
+function createThumbnailHelper(vault, dependencies = {}) {
+  const imageServiceLoader = dependencies.imageServiceLoader || new ImageServiceLoader();
+  async function getBestThumbnailAtSize(input, request, dereference, candidates = [], dimensions) {
+    if (typeof input === "string") {
+      return { best: getFixedSizeFromImage(input), fallback: [], log: [] };
+    }
+    const fullInput = vault.get(input);
+    if (typeof fullInput === "string") {
+      return { best: getFixedSizeFromImage(fullInput), fallback: [], log: [] };
+    }
+    switch (fullInput.type) {
+      case "Annotation": {
+        const contentResources = fullInput.body;
+        const firstContentResources = vault.get(contentResources[0]);
+        if (dimensions && !firstContentResources.width) {
+          firstContentResources.width = dimensions.width;
+          firstContentResources.height = dimensions.height;
+        }
+        return await imageServiceLoader.getThumbnailFromResource(firstContentResources, request, dereference, candidates);
+      }
+      case "Canvas": {
+        const canvas = fullInput;
+        if (canvas.thumbnail && canvas.thumbnail.length) {
+          const thumbnail = vault.get(canvas.thumbnail[0]);
+          const potentialThumbnails = await imageServiceLoader.getImageCandidates(thumbnail, dereference);
+          if (potentialThumbnails && potentialThumbnails.length) {
+            candidates.push(...potentialThumbnails);
+          }
+        }
+        return getBestThumbnailAtSize(canvas.items[0], request, dereference, candidates, {
+          width: canvas.width,
+          height: canvas.height
+        });
+      }
+      case "AnnotationPage": {
+        const annotationPage = fullInput;
+        return getBestThumbnailAtSize(annotationPage.items[0], request, dereference, candidates, dimensions);
+      }
+      case "Choice": {
+        const choice = fullInput;
+        return getBestThumbnailAtSize(choice.items[0], request, dereference, candidates, dimensions);
+      }
+      case "Collection": {
+        const collection = fullInput;
+        const firstManifest = collection.items[0];
+        return getBestThumbnailAtSize(firstManifest, request, dereference, candidates, dimensions);
+      }
+      case "Manifest": {
+        const manifest = fullInput;
+        const firstCanvas = manifest.items[0];
+        return getBestThumbnailAtSize(firstCanvas, request, dereference, candidates, dimensions);
+      }
+      case "SpecificResource":
+      case "Image":
+      case "Dataset":
+      case "Sound":
+      case "Text":
+      case "TextualBody":
+      case "Video":
+        if (dimensions && !fullInput.width) {
+          fullInput.width = dimensions.width;
+          fullInput.height = dimensions.height;
+        }
+        return imageServiceLoader.getThumbnailFromResource(fullInput, request, dereference, candidates);
+      case "Service":
+      case "Range":
+      case "AnnotationCollection":
+      case "CanvasReference":
+      case "ContentResource":
+        return { best: void 0, fallback: [], log: [] };
+    }
+    return { best: void 0, fallback: [], log: [] };
+  }
+  return {
+    getBestThumbnailAtSize
+  };
+}
 function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
   const vault = useVault();
   const loader = useImageServiceLoader();
@@ -1847,49 +1758,29 @@ function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
   }, [subject]);
   return thumbnail;
 }
-
-var __defProp$1 = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = 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 (__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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function getDefaultState(duration) {
   return { isMuted: false, playRequested: false, isPlaying: false, isFinished: false, volume: 100, duration };
 }
 function reducer(state, action) {
   switch (action.type) {
     case "FINISHED":
-      return __spreadProps(__spreadValues$1({}, state), { isFinished: true, isPlaying: false, playRequested: false });
+      return __spreadProps(__spreadValues({}, state), { isFinished: true, isPlaying: false, playRequested: false });
     case "PLAY_PAUSE":
-      return __spreadProps(__spreadValues$1({}, state), { isFinished: false, isPlaying: !state.isPlaying });
+      return __spreadProps(__spreadValues({}, state), { isFinished: false, isPlaying: !state.isPlaying });
     case "PLAY_REQUESTED":
-      return __spreadProps(__spreadValues$1({}, state), { isFinished: false, playRequested: true });
+      return __spreadProps(__spreadValues({}, state), { isFinished: false, playRequested: true });
     case "PAUSE":
-      return __spreadProps(__spreadValues$1({}, state), { isPlaying: false });
+      return __spreadProps(__spreadValues({}, state), { isPlaying: false });
     case "PLAY":
-      return __spreadProps(__spreadValues$1({}, state), { isFinished: false, playRequested: false, isPlaying: true });
+      return __spreadProps(__spreadValues({}, state), { isFinished: false, playRequested: false, isPlaying: true });
     case "MUTE":
-      return __spreadProps(__spreadValues$1({}, state), { isMuted: true });
+      return __spreadProps(__spreadValues({}, state), { isMuted: true });
     case "SET_VOLUME":
-      return __spreadProps(__spreadValues$1({}, state), { volume: action.volume, isMuted: action.volume === 0 });
+      return __spreadProps(__spreadValues({}, state), { volume: action.volume, isMuted: action.volume === 0 });
     case "TOGGLE_MUTE":
-      return __spreadProps(__spreadValues$1({}, state), { isMuted: !state.isMuted });
+      return __spreadProps(__spreadValues({}, state), { isMuted: !state.isMuted });
     case "UNMUTE":
-      return __spreadProps(__spreadValues$1({}, state), { isMuted: false });
+      return __spreadProps(__spreadValues({}, state), { isMuted: false });
   }
   return state;
 }
@@ -2007,7 +1898,6 @@ function useSimpleMediaPlayer(props) {
     }
   ];
 }
-
 const MediaReactContextState = createContext(null);
 const MediaReactContextActions = createContext(null);
 const MediaReactContextElements = createContext(null);
@@ -2040,35 +1930,65 @@ function MediaPlayerProvider({
   progress,
   element
 }) {
-  return /* @__PURE__ */ React.createElement(MediaReactContextElements.Provider, {
-    value: { currentTime, progress, element }
-  }, /* @__PURE__ */ React.createElement(MediaReactContextActions.Provider, {
-    value: actions
-  }, /* @__PURE__ */ React.createElement(MediaReactContextState.Provider, {
-    value: state
-  }, children)));
-}
-
-function Audio({ media, children }) {
-  const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration: media.duration });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CanvasPortal, null, /* @__PURE__ */ React.createElement(MediaPlayerProvider, {
-    state,
-    actions,
+  return /* @__PURE__ */ jsx(MediaReactContextElements.Provider, {
+    value: {
+      currentTime,
+      progress,
+      element
+    },
+    children: /* @__PURE__ */ jsx(MediaReactContextActions.Provider, {
+      value: actions,
+      children: /* @__PURE__ */ jsx(MediaReactContextState.Provider, {
+        value: state,
+        children
+      })
+    })
+  });
+}
+function Audio({
+  media,
+  children
+}) {
+  const [{
+    element,
     currentTime,
-    progress,
-    element
-  }, /* @__PURE__ */ React.createElement("audio", {
-    ref: element,
-    src: media.url
-  }), children)));
-}
-
-function Video({ media, children }) {
-  const [{ element, currentTime, progress }, state, actions] = useSimpleMediaPlayer({ duration: media.duration });
+    progress
+  }, state, actions] = useSimpleMediaPlayer({
+    duration: media.duration
+  });
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsx(CanvasPortal, {
+      children: /* @__PURE__ */ jsxs(MediaPlayerProvider, {
+        state,
+        actions,
+        currentTime,
+        progress,
+        element,
+        children: [/* @__PURE__ */ jsx("audio", {
+          ref: element,
+          src: media.url
+        }), children]
+      })
+    })
+  });
+}
+function Video({
+  media,
+  children
+}) {
+  const [{
+    element,
+    currentTime,
+    progress
+  }, state, actions] = useSimpleMediaPlayer({
+    duration: media.duration
+  });
   const Component = "div";
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CanvasPortal, {
-    overlay: true
-  }, /* @__PURE__ */ React.createElement("style", null, `
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(CanvasPortal, {
+      overlay: true,
+      children: [/* @__PURE__ */ jsx("style", {
+        children: `
             .video-container {
               position: absolute;
               top: 0;
@@ -2081,27 +2001,39 @@ function Video({ media, children }) {
               justify-content: center;
               pointer-events: visible;
             }
-          `), /* @__PURE__ */ React.createElement(Component, {
-    className: "video-container",
-    part: "video-container",
-    onClick: () => actions.playPause()
-  }, /* @__PURE__ */ React.createElement("video", {
-    ref: element,
-    src: media.url,
-    style: { width: "100%", objectFit: "contain" }
-  }))), /* @__PURE__ */ React.createElement(CanvasPortal, null, /* @__PURE__ */ React.createElement(MediaPlayerProvider, {
-    state,
-    actions,
-    currentTime,
-    progress,
-    element
-  }, children)));
-}
-
-function Model({ model }) {
-  return /* @__PURE__ */ React.createElement(CanvasPortal, {
-    overlay: true
-  }, /* @__PURE__ */ React.createElement("style", null, `
+          `
+      }), /* @__PURE__ */ jsx(Component, {
+        className: "video-container",
+        part: "video-container",
+        onClick: () => actions.playPause(),
+        children: /* @__PURE__ */ jsx("video", {
+          ref: element,
+          src: media.url,
+          style: {
+            width: "100%",
+            objectFit: "contain"
+          }
+        })
+      })]
+    }), /* @__PURE__ */ jsx(CanvasPortal, {
+      children: /* @__PURE__ */ jsx(MediaPlayerProvider, {
+        state,
+        actions,
+        currentTime,
+        progress,
+        element,
+        children
+      })
+    })]
+  });
+}
+function Model({
+  model
+}) {
+  return /* @__PURE__ */ jsxs(CanvasPortal, {
+    overlay: true,
+    children: [/* @__PURE__ */ jsx("style", {
+      children: `
             .model-container {
               position: absolute;
               top: 0;
@@ -2114,33 +2046,22 @@ function Model({ model }) {
               justify-content: center;
               pointer-events: visible;
             }
-          `), /* @__PURE__ */ React.createElement("div", {
-    className: "model-container"
-  }, /* @__PURE__ */ React.createElement("model-viewer", {
-    "interaction-prompt": "none",
-    style: { width: "100%", height: "100%" },
-    "camera-controls": "",
-    "ar-status": "not-presenting",
-    src: model.id
-  })));
-}
-
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
+          `
+    }), /* @__PURE__ */ jsx("div", {
+      className: "model-container",
+      children: /* @__PURE__ */ jsx("model-viewer", {
+        "interaction-prompt": "none",
+        style: {
+          width: "100%",
+          height: "100%"
+        },
+        "camera-controls": "",
+        "ar-status": "not-presenting",
+        src: model.id
+      })
+    })]
+  });
+}
 function RenderCanvas({
   x,
   y,
@@ -2160,7 +2081,9 @@ function RenderCanvas({
   const helper = useMemo(() => createStylesHelper(vault), [vault]);
   const [strategy, actions] = useRenderingStrategy({
     strategies: strategies || ["images"],
-    defaultChoices: defaultChoices == null ? void 0 : defaultChoices.map(({ id }) => id)
+    defaultChoices: defaultChoices == null ? void 0 : defaultChoices.map(({
+      id
+    }) => id)
   });
   const choice = strategy.type === "images" ? strategy.choice : void 0;
   useEffect(() => {
@@ -2172,7 +2095,9 @@ function RenderCanvas({
     if (defaultChoices) {
       for (const choice2 of defaultChoices) {
         if (typeof choice2.opacity !== "undefined") {
-          helper.applyStyles({ id: choice2.id }, "atlas", {
+          helper.applyStyles({
+            id: choice2.id
+          }, "atlas", {
             opacity: choice2.opacity
           });
         }
@@ -2184,66 +2109,87 @@ function RenderCanvas({
       onChoiceChange(choice);
     }
   }, [choice]);
-  const thumbnail = useThumbnail({ maxWidth: 256, maxHeight: 256 });
+  const thumbnail = useThumbnail({
+    maxWidth: 256,
+    maxHeight: 256
+  });
   if (!canvas) {
     return null;
   }
   const accompanyingCanvas = canvas.accompanyingCanvas;
-  const thumbnailFallbackImage = thumbnail && thumbnail.type === "fixed" ? /* @__PURE__ */ React$1.createElement("world-object", {
+  const thumbnailFallbackImage = thumbnail && thumbnail.type === "fixed" ? /* @__PURE__ */ jsx("world-object", {
     height: canvas.height,
     width: canvas.width,
     x,
-    y
-  }, /* @__PURE__ */ React$1.createElement("world-image", {
-    uri: thumbnail.id,
-    target: { x: 0, y: 0, width: canvas.width, height: canvas.height },
-    display: thumbnail.width && thumbnail.height ? {
-      width: thumbnail.width,
-      height: thumbnail.height
-    } : void 0
-  })) : null;
+    y,
+    children: /* @__PURE__ */ jsx("world-image", {
+      uri: thumbnail.id,
+      target: {
+        x: 0,
+        y: 0,
+        width: canvas.width,
+        height: canvas.height
+      },
+      display: thumbnail.width && thumbnail.height ? {
+        width: thumbnail.width,
+        height: thumbnail.height
+      } : void 0
+    })
+  }) : null;
   if (strategy.type === "unknown") {
     if (thumbnailFallbackImage) {
       return thumbnailFallbackImage;
     }
     throw new Error(strategy.reason || "Unknown image strategy");
   }
-  const annotations = /* @__PURE__ */ React$1.createElement(Fragment, null, virtualPage ? /* @__PURE__ */ React$1.createElement(RenderAnnotationPage, {
-    page: virtualPage
-  }) : null, strategy.annotations && strategy.annotations.pages ? strategy.annotations.pages.map((page) => {
-    return /* @__PURE__ */ React$1.createElement(RenderAnnotationPage, {
-      key: page.id,
-      page
-    });
-  }) : null, children);
-  return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("world-object", __spreadValues({
-    key: strategy.type,
-    height: canvas.height,
-    width: canvas.width,
-    x,
-    y
-  }, elementProps), strategy.type === "images" ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, strategy.images.map((image, idx) => {
-    return /* @__PURE__ */ React$1.createElement(RenderImage, {
-      isStatic,
-      key: image.id,
-      image,
-      id: image.id,
-      thumbnail: idx === 0 ? thumbnail : void 0,
-      annotations
-    });
-  }), renderViewerControls ? /* @__PURE__ */ React$1.createElement(CanvasPortal, {
-    overlay: true
-  }, renderViewerControls(strategy)) : null) : null, strategy.type === "3d-model" ? /* @__PURE__ */ React$1.createElement(Model, {
-    model: strategy.model
-  }) : null, strategy.type === "media" ? /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, strategy.media.type === "Sound" ? /* @__PURE__ */ React$1.createElement(Audio, {
-    media: strategy.media
-  }, thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null) : strategy.media.type === "Video" ? /* @__PURE__ */ React$1.createElement(Video, {
-    media: strategy.media
-  }, thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null) : null) : null), strategy.type === "media" && strategy.media.type === "Sound" && accompanyingCanvas ? /* @__PURE__ */ React$1.createElement(CanvasContext, {
-    canvas: accompanyingCanvas.id
-  }, /* @__PURE__ */ React$1.createElement(RenderCanvas, null)) : null);
-}
-
+  const annotations = /* @__PURE__ */ jsxs(Fragment$1, {
+    children: [virtualPage ? /* @__PURE__ */ jsx(RenderAnnotationPage, {
+      page: virtualPage
+    }) : null, strategy.annotations && strategy.annotations.pages ? strategy.annotations.pages.map((page) => {
+      return /* @__PURE__ */ jsx(RenderAnnotationPage, {
+        page
+      }, page.id);
+    }) : null, children]
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs("world-object", __spreadProps(__spreadValues({
+      height: canvas.height,
+      width: canvas.width,
+      x,
+      y
+    }, elementProps), {
+      children: [strategy.type === "images" ? /* @__PURE__ */ jsxs(Fragment, {
+        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]
+      }) : null, strategy.type === "3d-model" ? /* @__PURE__ */ jsx(Model, {
+        model: strategy.model
+      }) : null, strategy.type === "media" ? /* @__PURE__ */ jsx(Fragment, {
+        children: strategy.media.type === "Sound" ? /* @__PURE__ */ jsxs(Audio, {
+          media: strategy.media,
+          children: [thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null]
+        }) : strategy.media.type === "Video" ? /* @__PURE__ */ jsxs(Video, {
+          media: strategy.media,
+          children: [thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null]
+        }) : null
+      }) : null]
+    }), strategy.type), strategy.type === "media" && strategy.media.type === "Sound" && accompanyingCanvas ? /* @__PURE__ */ jsx(CanvasContext, {
+      canvas: accompanyingCanvas.id,
+      children: /* @__PURE__ */ jsx(RenderCanvas, {
+        renderViewerControls
+      })
+    }) : null]
+  });
+}
 const CanvasPanel = {
   RenderImage,
   RenderCanvas,
@@ -2251,33 +2197,45 @@ const CanvasPanel = {
   RenderAnnotation,
   Viewer
 };
-
-function AnnotationContext({ annotation, children }) {
-  return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
-    value: { annotation }
-  }, children);
-}
-
-function CollectionContext({ collection, children }) {
-  return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
-    value: { collection }
-  }, children);
-}
-
-function RangeContext({ range, children }) {
-  return /* @__PURE__ */ React$1.createElement(ResourceProvider, {
-    value: { range }
-  }, children);
-}
-
+function AnnotationContext({
+  annotation,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      annotation
+    },
+    children
+  });
+}
+function CollectionContext({
+  collection,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      collection
+    },
+    children
+  });
+}
+function RangeContext({
+  range,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      range
+    },
+    children
+  });
+}
 function useAnnotationsAtTime(time, options = {}) {
   const allAnnotations = usePaintingAnnotations(options);
   return allAnnotations;
 }
-
 function useCanvasClock(canvasId, autoplay = false) {
 }
-
 function useCollection(options, deps = []) {
   const { id, selector } = options;
   const ctx = useResourceContext();
@@ -2293,7 +2251,6 @@ function useCollection(options, deps = []) {
     return collection;
   }, [collection, selector, ...deps]);
 }
-
 function useEventListener(resource, name, listener, scope, deps = []) {
   const vault = useVault();
   const helper = useMemo(() => createEventsHelper(vault), [vault]);
@@ -2309,37 +2266,14 @@ function useEventListener(resource, name, listener, scope, deps = []) {
     };
   }, [helper, resource, name, ...deps]);
 }
-
 function useExistingVault() {
   const oldContext = useContext(ReactVaultContext);
   return oldContext && oldContext.vault ? oldContext.vault : globalVault();
 }
-
 function useExternalCollection(idOrRef, options) {
   const { id, isLoaded, error, resource, requestId, cached } = useExternalResource(idOrRef, options);
   return { id, isLoaded, error, manifest: resource, requestId, cached };
 }
-
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 function useImageService({ cacheKey } = {}) {
   const canvas = useCanvas();
   const annotations = usePaintingAnnotations();
@@ -2373,7 +2307,7 @@ function useImageService({ cacheKey } = {}) {
   }, [key, cacheKey, canvas]);
   const data = status === "success" && _data ? _data : initialData;
   useEffect(() => {
-    (() => __async(this, null, function* () {
+    (async () => {
       try {
         if (canvas && annotations.length) {
           const annotation = annotations[0];
@@ -2386,11 +2320,11 @@ function useImageService({ cacheKey } = {}) {
           setIsFetching(true);
           setStatus("loading");
           try {
-            const loadedService = (yield imageService.loadService({
+            const loadedService = await imageService.loadService({
               id: firstImageService.id || firstImageService["@id"],
               width: firstImageService.width || canvas.width,
               height: firstImageService.height || canvas.height
-            })) || void 0;
+            }) || void 0;
             setData(loadedService);
             setStatus("success");
             setIsFetching(false);
@@ -2403,7 +2337,7 @@ function useImageService({ cacheKey } = {}) {
         setStatus("error");
         setError(err);
       }
-    }))();
+    })();
   }, [key, cacheKey]);
   return useMemo(() => {
     return {
@@ -2414,7 +2348,6 @@ function useImageService({ cacheKey } = {}) {
     };
   }, [data, isFetching, status, error]);
 }
-
 function useImageTile() {
   const imageService = useImageService();
   return {
@@ -2428,7 +2361,6 @@ function useImageTile() {
     } : null
   };
 }
-
 function useRange(options = {}, deps = []) {
   const { id, selector } = options;
   const ctx = useResourceContext();
@@ -2444,15 +2376,13 @@ function useRange(options = {}, deps = []) {
     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;
 }
-
 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 };
+//# sourceMappingURL=index.mjs.map