react-iiif-vault 0.9.10 → 0.9.13

package/dist/cjs/index.js

@@ -1,2536 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React$1 = require('react');
-var atlas = require('@atlas-viewer/atlas');
-var vault = require('@iiif/vault');
-var typesafeActions = require('typesafe-actions');
-var require$$0 = require('react-dom');
-var vaultHelpers = require('@iiif/vault-helpers');
-var iiifImageApi = require('@atlas-viewer/iiif-image-api');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React$1);
-var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
-
-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__default["default"]) ;
-})(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]; }
-          });
-        }
-      });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-  }
-
-  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);
-  }
-
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    _setPrototypeOf(subClass, superClass);
-  }
-
-  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]);
-    });
-  };
-
-  var initialState = {
-    error: null
-  };
-
-  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;
-    }
-
-    ErrorBoundary.getDerivedStateFromError = function getDerivedStateFromError(error) {
-      return {
-        error: error
-      };
-    };
-
-    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');
-        }
-      }
-
-      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;
-};
-const defaultResourceContext = {
-  collection: void 0,
-  manifest: void 0,
-  range: void 0,
-  canvas: void 0,
-  annotation: void 0
-};
-const ResourceReactContext = React__default["default"].createContext(defaultResourceContext);
-const useResourceContext = () => {
-  return React$1.useContext(ResourceReactContext);
-};
-function ResourceProvider({ value, children }) {
-  const parentContext = useResourceContext();
-  const newContext = React$1.useMemo(() => {
-    return __spreadValues$a(__spreadValues$a({}, parentContext), value);
-  }, [value, parentContext]);
-  return /* @__PURE__ */ React__default["default"].createElement(ResourceReactContext.Provider, {
-    value: newContext
-  }, children);
-}
-
-const ReactVaultContext = React__default["default"].createContext({
-  vault: null,
-  setVaultInstance: (vault) => {
-  }
-});
-function VaultProvider({
-  vault: vault$1,
-  vaultOptions,
-  useGlobal,
-  resources,
-  children
-}) {
-  const [vaultInstance, setVaultInstance] = React$1.useState(() => {
-    if (vault$1) {
-      return vault$1;
-    }
-    if (useGlobal) {
-      return vault.globalVault(vaultOptions);
-    }
-    if (vaultOptions) {
-      return new vault.Vault(vaultOptions);
-    }
-    return new vault.Vault();
-  });
-  return /* @__PURE__ */ React__default["default"].createElement(ReactVaultContext.Provider, {
-    value: { vault: vaultInstance, setVaultInstance }
-  }, /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
-    value: resources || {}
-  }, children));
-}
-
-const useVault = () => {
-  const { vault } = React$1.useContext(ReactVaultContext);
-  if (vault === null) {
-    throw new Error("Vault not found. Ensure you have your provider set up correctly.");
-  }
-  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();
-  const [realId, setRealId] = React$1.useState(id);
-  const [error, setError] = React$1.useState(void 0);
-  const initialData = React$1.useMemo(() => {
-    return vault.get(id, { skipSelfReturn: true }) || void 0;
-  }, [id, vault]);
-  const [resource, setResource] = React$1.useState(initialData);
-  React$1.useEffect(() => {
-    (() => __async$1(this, null, function* () {
-      try {
-        const fetchedResource = initialData && !noCache ? initialData : yield vault.load(id);
-        const _realId = fetchedResource ? fetchedResource.id || fetchedResource["@id"] : null;
-        if (fetchedResource && realId !== _realId) {
-          setRealId(_realId);
-        }
-        setResource(fetchedResource);
-      } catch (err) {
-        setError(err);
-      }
-    }))();
-  }, [id, noCache]);
-  return {
-    isLoaded: !!resource,
-    id: realId,
-    requestId: id,
-    error,
-    resource,
-    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__default["default"].createElement(ResourceProvider, {
-    value: { manifest }
-  }, children);
-}
-
-function CanvasContext({ canvas, children }) {
-  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
-    value: { canvas }
-  }, children);
-}
-
-function useVaultSelector(selector, deps = []) {
-  const vault = useVault();
-  const [selectedState, setSelectedState] = React$1.useState(() => selector(vault.getState(), vault));
-  React$1.useEffect(() => {
-    return vault.subscribe((s) => selector(s, vault), (s) => {
-      setSelectedState(s);
-    }, false);
-  }, deps);
-  return selectedState;
-}
-
-const VisibleCanvasReactContext = React__default["default"].createContext([]);
-function useVisibleCanvases() {
-  const ids = React$1.useContext(VisibleCanvasReactContext);
-  return useVaultSelector((state) => {
-    return ids.map((id) => state.iiif.entities.Canvas[id]).filter(Boolean);
-  }, [ids]);
-}
-
-const noop = () => {
-};
-const SimpleViewerReactContext = React$1.createContext({
-  setCurrentCanvasId: noop,
-  setCurrentCanvasIndex: noop,
-  nextCanvas: noop,
-  previousCanvas: noop,
-  currentCanvasIndex: -1,
-  totalCanvases: 0,
-  pagingView: true
-});
-function SimpleViewerProvider(props) {
-  const manifest = useExternalManifest(props.manifest);
-  const [currentCanvasId, setCurrentCanvasId] = React$1.useState("");
-  const [visible, setVisible] = React$1.useState([]);
-  const pagingView = (typeof props.pagingEnabled === "undefined" || props.pagingEnabled) && manifest.manifest && manifest.manifest.behavior && manifest.manifest.behavior.includes("paged");
-  React$1.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 = React$1.useMemo(() => {
-    var _a;
-    return ((_a = manifest.manifest) == null ? void 0 : _a.items.map((c) => c.id)) || [];
-  }, [manifest.manifest, props.manifest]);
-  const currentCanvasIndex = React$1.useMemo(() => canvasList.indexOf(currentCanvasId), [canvasList, currentCanvasId]);
-  const nextCanvas = React$1.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 = React$1.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 = React$1.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 = React$1.useCallback((nextId) => {
-    const idx = canvasList.indexOf(nextId);
-    if (idx !== -1) {
-      setCurrentCanvasIndex(idx);
-    }
-  }, [canvasList, setCurrentCanvasIndex]);
-  const ctx = React$1.useMemo(() => ({
-    setCurrentCanvasId: internalSetCurrentCanvasId,
-    nextCanvas,
-    previousCanvas,
-    currentCanvasIndex,
-    totalCanvases: canvasList.length,
-    setCurrentCanvasIndex,
-    pagingView: true
-  }), [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__default["default"].createElement("div", null, "Sorry, something went wrong.");
-  }
-  if (!manifest.isLoaded) {
-    return /* @__PURE__ */ React__default["default"].createElement("div", null, "Loading...");
-  }
-  return /* @__PURE__ */ React__default["default"].createElement(SimpleViewerReactContext.Provider, {
-    value: ctx
-  }, /* @__PURE__ */ React__default["default"].createElement(VisibleCanvasReactContext.Provider, {
-    value: visible
-  }, /* @__PURE__ */ React__default["default"].createElement(ManifestContext, {
-    manifest: manifest.manifest.id
-  }, /* @__PURE__ */ React__default["default"].createElement(CanvasContext, {
-    canvas: currentCanvasId
-  }, props.children))));
-}
-function useSimpleViewer() {
-  return React$1.useContext(SimpleViewerReactContext);
-}
-
-function useContextBridge() {
-  return {
-    VaultContext: React$1.useContext(ReactVaultContext),
-    ResourceContext: React$1.useContext(ResourceReactContext),
-    SimpleViewerReactContext: React$1.useContext(SimpleViewerReactContext),
-    VisibleCanvasReactContext: React$1.useContext(VisibleCanvasReactContext)
-  };
-}
-function ContextBridge(props) {
-  return /* @__PURE__ */ React__default["default"].createElement(VaultProvider, {
-    vault: props.bridge.VaultContext.vault || void 0,
-    resources: props.bridge.ResourceContext
-  }, /* @__PURE__ */ React__default["default"].createElement(VisibleCanvasReactContext.Provider, {
-    value: props.bridge.VisibleCanvasReactContext
-  }, /* @__PURE__ */ React__default["default"].createElement(SimpleViewerReactContext.Provider, {
-    value: props.bridge.SimpleViewerReactContext
-  }, props.children)));
-}
-
-const IMPORT_ENTITIES = "@iiif/IMPORT_ENTITIES";
-const MODIFY_ENTITY_FIELD = "@iiif/MODIFY_ENTITY_FIELD";
-const REORDER_ENTITY_FIELD = "@iiif/REORDER_ENTITY_FIELD";
-const ADD_REFERENCE = "@iiif/ADD_REFERENCE";
-const REMOVE_REFERENCE = "@iiif/REMOVE_REFERENCE";
-const importEntities = typesafeActions.createAction(IMPORT_ENTITIES)();
-const modifyEntityField = typesafeActions.createAction(MODIFY_ENTITY_FIELD)();
-const reorderEntityField = typesafeActions.createAction(REORDER_ENTITY_FIELD)();
-const addReference = typesafeActions.createAction(ADD_REFERENCE)();
-const removeReference = typesafeActions.createAction(REMOVE_REFERENCE)();
-const entityActions = { importEntities, modifyEntityField, reorderEntityField, addReference, removeReference };
-
-const ADD_MAPPING = "@iiif/ADD_MAPPING";
-const ADD_MAPPINGS = "@iiif/ADD_MAPPINGS";
-typesafeActions.createAction(ADD_MAPPING)();
-typesafeActions.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";
-typesafeActions.createAction(SET_META_VALUE)();
-typesafeActions.createAction(SET_META_VALUE_DYNAMIC)();
-typesafeActions.createAction(UNSET_META_VALUE)();
-const REQUEST_RESOURCE = "@iiif/REQUEST_RESOURCE";
-const REQUEST_ERROR = "@iiif/REQUEST_ERROR";
-const REQUEST_MISMATCH = "@iiif/REQUEST_MISMATCH";
-const REQUEST_COMPLETE = "@iiif/REQUEST_COMPLETE";
-const REQUEST_OFFLINE_RESOURCE = "@iiif/REQUEST_OFFLINE_RESOURCE";
-typesafeActions.createAction(REQUEST_RESOURCE)();
-typesafeActions.createAction(REQUEST_ERROR)();
-typesafeActions.createAction(REQUEST_MISMATCH)();
-typesafeActions.createAction(REQUEST_COMPLETE)();
-typesafeActions.createAction(REQUEST_OFFLINE_RESOURCE)();
-
-const BATCH_ACTIONS = "@iiif/BATCH";
-const BATCH_IMPORT = "@iiif/BATCH_IMPORT";
-typesafeActions.createAction(BATCH_ACTIONS)();
-typesafeActions.createAction(BATCH_IMPORT)();
-
-function useDispatch() {
-  const vault = useVault();
-  const store = vault.getStore();
-  return React$1.useMemo(() => {
-    return (action) => store.dispatch(action);
-  }, [store]);
-}
-
-function isVaultActivated(obj) {
-  return typeof obj !== "string" && obj && obj.bindToVault;
-}
-function useVirtualAnnotationPage() {
-  const vault = useVault();
-  const sources = React$1.useRef([]);
-  const dispatch = useDispatch();
-  const virtualId = React$1.useMemo(() => {
-    return `vault://annotation-page/${new Date().getTime()}/${Math.round(Math.random() * 1e9).toString(16)}`;
-  }, []);
-  React$1.useLayoutEffect(() => {
-    const page = {
-      id: virtualId,
-      type: "AnnotationPage",
-      behavior: [],
-      motivation: null,
-      label: null,
-      thumbnail: [],
-      summary: null,
-      requiredStatement: null,
-      metadata: [],
-      rights: null,
-      provider: [],
-      items: [],
-      seeAlso: [],
-      homepage: [],
-      logo: [],
-      rendering: [],
-      service: []
-    };
-    dispatch(entityActions.importEntities({
-      entities: {
-        AnnotationPage: {
-          [page.id]: page
-        }
-      }
-    }));
-  }, [virtualId]);
-  const fullPage = useVaultSelector((state) => virtualId ? state.iiif.entities.AnnotationPage[virtualId] : null, [virtualId]);
-  const addAnnotation = React$1.useCallback((id, atIndex) => {
-    if (virtualId) {
-      if (isVaultActivated(id)) {
-        const display = id;
-        if (!display.__vault) {
-          display.bindToVault(vault);
-        }
-        id = typeof display.source === "string" ? display.source : display.source.id;
-        sources.current[id] = display;
-      } else if (typeof id !== "string") {
-        id = id.id;
-      }
-      const full = vault.get({ id: virtualId, type: "AnnotationPage" });
-      const annotation = vault.get({ id, type: "Annotation" });
-      if (full && annotation) {
-        if (!full.items.find((r) => r.id === annotation.id)) {
-          dispatch(entityActions.addReference({
-            id: virtualId,
-            type: "AnnotationPage",
-            key: "items",
-            reference: {
-              id,
-              type: "Annotation"
-            },
-            index: atIndex
-          }));
-        }
-      }
-    }
-  }, [virtualId]);
-  const removeAnnotation = React$1.useCallback((id) => {
-    if (virtualId) {
-      if (isVaultActivated(id)) {
-        id = typeof id.source === "string" ? id.source : id.source.id;
-      } else if (typeof id !== "string") {
-        id = id.id;
-      }
-      if (sources.current[id]) {
-        sources.current[id].beforeRemove();
-      }
-      const full = vault.get({ id: virtualId, type: "AnnotationPage" });
-      if (full) {
-        dispatch(entityActions.removeReference({
-          id: virtualId,
-          type: "AnnotationPage",
-          key: "items",
-          reference: {
-            id,
-            type: "Annotation"
-          }
-        }));
-      }
-    }
-  }, [virtualId]);
-  return [
-    fullPage,
-    {
-      addAnnotation,
-      removeAnnotation
-    }
-  ];
-}
-
-const VirtualAnnotationPageContext = React$1.createContext(null);
-function useVirtualAnnotationPageContext() {
-  const ctx = React$1.useContext(VirtualAnnotationPageContext);
-  return [
-    ctx.fullPage,
-    {
-      addAnnotation: ctx.addAnnotation,
-      removeAnnotation: ctx.removeAnnotation
-    }
-  ];
-}
-function VirtualAnnotationProvider({ children }) {
-  const [fullPage, { addAnnotation, removeAnnotation }] = useVirtualAnnotationPage();
-  return /* @__PURE__ */ React__default["default"].createElement(VirtualAnnotationPageContext.Provider, {
-    value: React$1.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__default["default"].createElement("div", {
-    style: __spreadProps$7(__spreadValues$9({ width, height, minHeight: 500 }, style || {}), { background: "#f9f9f9" })
-  }, "Unknown error");
-}
-
-var createRoot;
-
-var m = require$$0__default["default"];
-{
-  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;
-    }
-  };
-}
-
-const ViewerPresetContext = React$1.createContext(null);
-function useViewerPreset() {
-  return React$1.useContext(ViewerPresetContext);
-}
-
-const PortalContext = React__default["default"].createContext(null);
-const OverlayPortalContext = React__default["default"].createContext(null);
-function CanvasPortal({ children, overlay }) {
-  const htmlElement = React$1.useContext(overlay ? OverlayPortalContext : PortalContext);
-  const rootRef = React$1.useRef(null);
-  const preset = useViewerPreset();
-  React$1.useLayoutEffect(() => {
-    if (!rootRef.current) {
-      rootRef.current = htmlElement ? createRoot(htmlElement) : null;
-    }
-  }, []);
-  React$1.useLayoutEffect(() => {
-    return () => {
-      var _a;
-      (_a = rootRef.current) == null ? void 0 : _a.unmount();
-      rootRef.current = null;
-    };
-  }, []);
-  React$1.useLayoutEffect(() => {
-    if (rootRef.current) {
-      rootRef.current.render(/* @__PURE__ */ React__default["default"].createElement(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,
-    errorFallback,
-    outerContainerProps = {}
-  } = _b, props = __objRest(_b, [
-    "children",
-    "errorFallback",
-    "outerContainerProps"
-  ]);
-  const portal = React$1.useRef(null);
-  const [portalElement, setPortalElement] = React$1.useState();
-  const [viewerPreset, setViewerPreset] = React$1.useState();
-  const overlayPortal = React$1.useRef(null);
-  const [overlayPortalElement, setOverlayPortalElement] = React$1.useState();
-  const bridge = useContextBridge();
-  const ErrorFallback = errorFallback || DefaultCanvasFallback;
-  React$1.useLayoutEffect(() => {
-    setPortalElement(portal.current);
-    setOverlayPortalElement(overlayPortal.current);
-  }, []);
-  return /* @__PURE__ */ React__default["default"].createElement(reactErrorBoundary_umd.exports.ErrorBoundary, {
-    fallbackRender: () => /* @__PURE__ */ React__default["default"].createElement(ErrorFallback, __spreadValues$8({}, props))
-  }, /* @__PURE__ */ React__default["default"].createElement(atlas.AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
-    containerProps: __spreadValues$8({ style: { position: "relative" } }, props.containerProps || {}),
-    htmlChildren: /* @__PURE__ */ React__default["default"].createElement("div", {
-      ref: overlayPortal
-    }),
-    onCreated: (preset) => {
-      setViewerPreset(preset);
-      if (props.onCreated) {
-        props.onCreated(preset);
-      }
-    }
-  }), /* @__PURE__ */ React__default["default"].createElement(ViewerPresetContext.Provider, {
-    value: viewerPreset
-  }, /* @__PURE__ */ React__default["default"].createElement(PortalContext.Provider, {
-    value: portalElement
-  }, /* @__PURE__ */ React__default["default"].createElement(OverlayPortalContext.Provider, {
-    value: overlayPortalElement
-  }, /* @__PURE__ */ React__default["default"].createElement(ContextBridge, {
-    bridge
-  }, /* @__PURE__ */ React__default["default"].createElement(VirtualAnnotationProvider, null, children)))))), /* @__PURE__ */ React__default["default"].createElement("div", {
-    ref: portal
-  }));
-}
-
-function useResourceEvents(resource, scope) {
-  const vault = useVault();
-  const helper = React$1.useMemo(() => vaultHelpers.createEventsHelper(vault), [vault]);
-  const hooks = useVaultSelector(() => {
-    if (resource && resource.id) {
-      return vault.getResourceMeta(resource.id, "eventManager");
-    }
-    return null;
-  }, [resource]);
-  return React$1.useMemo(() => {
-    return resource ? helper.getListenersAsProps(resource, scope) : {};
-  }, [hooks, resource, vault, scope]);
-}
-
-function useStyles(resource, scope) {
-  const vault = useVault();
-  const helper = React$1.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
-  return useVaultSelector(() => {
-    if (!resource) {
-      return null;
-    }
-    const styles = helper.getAppliedStyles(resource.id);
-    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 TEMPORAL_SELECTOR = /&?(t=)(npt:)?([0-9]+(.[0-9]+)?)?(,([0-9]+(.[0-9]+)?))?/;
-function parseSelector(source) {
-  if (Array.isArray(source)) {
-    return source.reduce((data, nextSource) => {
-      const { selector, selectors } = parseSelector(nextSource);
-      if (selector) {
-        if (!data.selector) {
-          data.selector = selector;
-        }
-        data.selectors.push(...selectors);
-      }
-      return data;
-    }, {
-      selector: null,
-      selectors: []
-    });
-  }
-  if (!source) {
-    return {
-      selector: null,
-      selectors: []
-    };
-  }
-  if (typeof source === "string") {
-    const [id, fragment] = source.split("#");
-    if (!fragment) {
-      return {
-        selector: null,
-        selectors: []
-      };
-    }
-    return parseSelector({ type: "FragmentSelector", value: fragment });
-  }
-  if (source.type === "PointSelector" && (source.t || source.t === 0)) {
-    const selector = {
-      type: "TemporalSelector",
-      temporal: {
-        startTime: source.t
-      }
-    };
-    return {
-      selector,
-      selectors: [selector]
-    };
-  }
-  if (source.type === "FragmentSelector") {
-    const matchBoxSelector = BOX_SELECTOR.exec(source.value);
-    if (matchBoxSelector) {
-      const selector = {
-        type: "BoxSelector",
-        spatial: {
-          unit: matchBoxSelector[2] === "percent:" ? "percent" : "pixel",
-          x: parseFloat(matchBoxSelector[3]),
-          y: parseFloat(matchBoxSelector[4]),
-          width: parseFloat(matchBoxSelector[5]),
-          height: parseFloat(matchBoxSelector[6])
-        }
-      };
-      return {
-        selector,
-        selectors: [selector]
-      };
-    }
-    const matchTimeSelector = source.value.match(TEMPORAL_SELECTOR);
-    if (matchTimeSelector) {
-      const selector = {
-        type: "TemporalSelector",
-        temporal: {
-          startTime: matchTimeSelector[4] ? parseFloat(matchTimeSelector[4]) : 0,
-          endTime: matchTimeSelector[7] ? parseFloat(matchTimeSelector[7]) : void 0
-        }
-      };
-      return {
-        selector,
-        selectors: [selector]
-      };
-    }
-    return {
-      selector: null,
-      selectors: []
-    };
-  }
-  return {
-    selector: null,
-    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]);
-  }
-  if (typeof target === "string") {
-    const [id, fragment] = target.split("#");
-    if (!fragment) {
-      return {
-        type: "SpecificResource",
-        source: { id, type: options.typeMap && options.typeMap[id] || "Unknown" },
-        selector: null,
-        selectors: []
-      };
-    }
-    return expandTarget({
-      type: "SpecificResource",
-      source: { id, type: "Unknown" },
-      selector: {
-        type: "FragmentSelector",
-        value: fragment
-      }
-    });
-  }
-  if (target.type === "Choice" || target.type === "List" || target.type === "Composite" || target.type === "Independents") {
-    return expandTarget(target.items[0]);
-  }
-  if (target.type === "SpecificResource") {
-    if (target.source.type === "Canvas" && target.source.partOf && typeof target.source.partOf === "string") {
-      target.source.partOf = [
-        {
-          id: target.source.partOf,
-          type: "Manifest"
-        }
-      ];
-    }
-    const { selector, selectors } = target.selector ? parseSelector(target.selector) : { selector: null, selectors: [] };
-    return {
-      type: "SpecificResource",
-      source: target.source,
-      selector,
-      selectors
-    };
-  }
-  if (target.id) {
-    if (target.type === "Canvas" && target.partOf && typeof target.partOf === "string") {
-      target.partOf = [
-        {
-          id: target.partOf,
-          type: "Manifest"
-        }
-      ];
-    }
-    const [id, fragment] = target.id.split("#");
-    if (!fragment) {
-      return {
-        type: "SpecificResource",
-        source: __spreadProps$5(__spreadValues$7({}, target), {
-          id
-        }),
-        selector: null,
-        selectors: []
-      };
-    }
-    return expandTarget({
-      type: "SpecificResource",
-      source: __spreadProps$5(__spreadValues$7({}, target), {
-        id
-      }),
-      selector: {
-        type: "FragmentSelector",
-        value: fragment
-      }
-    });
-  }
-  return {
-    type: "SpecificResource",
-    source: target,
-    selector: null,
-    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();
-  const vault = useVault();
-  const annotationId = id ? id : ctx.annotation;
-  const annotation = useVaultSelector((s) => annotationId ? s.iiif.entities.Annotation[annotationId] : void 0, [annotationId]);
-  const body = useVaultSelector((s) => annotation && annotation.body ? annotation.body.map((singleBody) => singleBody ? s.iiif.entities[singleBody.type][singleBody.id] : null).filter(Boolean) : [], [annotation]);
-  return React$1.useMemo(() => {
-    if (!annotation) {
-      return void 0;
-    }
-    const newAnnotation = __spreadProps$4(__spreadValues$6({}, annotation), {
-      body,
-      target: expandTarget(annotation.target, { typeMap: vault.getState().iiif.mapping })
-    });
-    if (selector) {
-      return selector(newAnnotation);
-    }
-    return newAnnotation;
-  }, [annotation, selector, body, ...deps]);
-}
-
-function useCanvas(options = {}, deps = []) {
-  const { id, selector } = options;
-  const ctx = useResourceContext();
-  const canvasId = id ? id : ctx.canvas;
-  const canvas = useVaultSelector((s) => canvasId ? s.iiif.entities.Canvas[canvasId] : void 0, [canvasId]);
-  return React$1.useMemo(() => {
-    if (!canvas) {
-      return void 0;
-    }
-    if (selector) {
-      return selector(canvas);
-    }
-    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 style = useStyles(annotation, "atlas");
-  const html = useStyles(annotation, "html");
-  const events = useResourceEvents(annotation, ["atlas"]);
-  const canvas = useCanvas();
-  const allStyles = React$1.useMemo(() => {
-    return atlas.mergeStyles(defaultStyle, style);
-  }, [defaultStyle, style]);
-  const isValid = canvas && annotation && annotation.target && annotation.target.selector && annotation.target.selector.type === "BoxSelector" && annotation.target.source && annotation.target.source.id === canvas.id;
-  if (!isValid) {
-    return null;
-  }
-  return /* @__PURE__ */ React__default["default"].createElement(atlas.RegionHighlight, __spreadValues$5({
-    id: annotation.id,
-    isEditing: true,
-    region: annotation.target.selector.spatial,
-    style: allStyles,
-    className: (html == null ? void 0 : html.className) || className,
-    interactive: !!((html == null ? void 0 : html.href) || interactive),
-    href: (html == null ? void 0 : html.href) || null,
-    title: (html == null ? void 0 : html.title) || null,
-    hrefTarget: (html == null ? void 0 : html.target) || null
-  }, events));
-};
-
-const RenderAnnotationPage = ({
-  className,
-  page
-}) => {
-  var _a;
-  const style = useStyles(page, "atlas");
-  const html = useStyles(page, "html");
-  useVaultSelector((state) => page.id ? state.iiif.entities.AnnotationPage[page.id] : null, []);
-  return /* @__PURE__ */ React__default["default"].createElement(React$1.Fragment, null, (_a = page.items) == null ? void 0 : _a.map((annotation) => {
-    return /* @__PURE__ */ React__default["default"].createElement(RenderAnnotation, {
-      key: annotation.id,
-      id: annotation.id,
-      style,
-      className: (html == null ? void 0 : html.className) || className
-    });
-  }));
-};
-
-const TileSet = atlas.TileSet;
-function RenderImage({
-  id,
-  image,
-  thumbnail,
-  isStatic,
-  x = 0,
-  y = 0,
-  annotations,
-  children
-}) {
-  var _a, _b, _c, _d;
-  return /* @__PURE__ */ React__default["default"].createElement(React$1.Fragment, {
-    key: id
-  }, !image.service ? /* @__PURE__ */ React__default["default"].createElement(React$1.Fragment, {
-    key: "no-service"
-  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(React$1.Fragment, {
-    key: "service"
-  }, /* @__PURE__ */ React__default["default"].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));
-}
-
-function parseSpecificResource(resource) {
-  if (resource.type === "SpecificResource") {
-    return [resource.source, { selector: resource.selector }];
-  }
-  return [resource, { selector: null }];
-}
-function getPaintables(vault, paintingAnnotations, enabledChoices) {
-  const types = [];
-  let choice = null;
-  const items = [];
-  for (const annotation of paintingAnnotations) {
-    const bodies = vault.get(annotation.body);
-    for (const unknownBody of bodies) {
-      const [body, { selector }] = parseSpecificResource(unknownBody);
-      const type = (body.type || "unknown").toLowerCase();
-      if (type === "choice") {
-        const nestedBodies = vault.get(body.items);
-        const selected = enabledChoices.length ? enabledChoices.map((cid) => nestedBodies.find((b) => b.id === cid)).filter(Boolean) : [nestedBodies[0]];
-        if (selected.length === 0) {
-          selected.push(nestedBodies[0]);
-        }
-        choice = {
-          type: "single-choice",
-          items: nestedBodies.map((b) => ({
-            id: b.id,
-            label: b.label,
-            selected: selected.indexOf(b) !== -1
-          })),
-          label: unknownBody.label
-        };
-        bodies.push(...selected);
-        continue;
-      }
-      if (types.indexOf(type) === -1) {
-        types.push(type);
-      }
-      items.push({
-        type,
-        resource: body,
-        target: annotation.target,
-        selector
-      });
-    }
-  }
-  return {
-    types,
-    items,
-    choice
-  };
-}
-const emptyActions = {
-  makeChoice: () => {
-  }
-};
-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 React$1.useMemo(() => {
-    if (!manifest) {
-      return void 0;
-    }
-    if (selector) {
-      return selector(manifest);
-    }
-    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];
-  if (!resourceMeta) {
-    return null;
-  }
-  return resourceMeta.annotationPageManager;
-}
-function useEnabledAnnotationPageIds(resourceId, availablePageIds) {
-  return useVaultSelector((state) => {
-    const pageIds = [];
-    if (!resourceId) {
-      return pageIds;
-    }
-    const allAnnotationListIds = Object.keys(state.iiif.entities.AnnotationPage);
-    for (const annotationListId of allAnnotationListIds) {
-      if (!availablePageIds || availablePageIds.indexOf(annotationListId) !== -1) {
-        const annotationListMeta = getMeta$1(state, annotationListId);
-        if (annotationListMeta && annotationListMeta.views && annotationListMeta.views[resourceId]) {
-          pageIds.push(annotationListId);
-        }
-      }
-    }
-    return pageIds;
-  }, [resourceId, availablePageIds]);
-}
-
-function flattenAnnotationPageIds({
-  canvas,
-  manifest,
-  all,
-  canvases
-}) {
-  const foundIds = [];
-  if (manifest) {
-    for (const page of manifest.annotations) {
-      if (foundIds.indexOf(page.id) === -1) {
-        foundIds.push(page.id);
-      }
-    }
-  }
-  if (all) {
-    if (canvases && canvases.length) {
-      for (const canvas_ of canvases) {
-        for (const page of canvas_.annotations) {
-          if (foundIds.indexOf(page.id) === -1) {
-            foundIds.push(page.id);
-          }
-        }
-      }
-    }
-  } else if (canvas) {
-    for (const page of canvas.annotations) {
-      if (foundIds.indexOf(page.id) === -1) {
-        foundIds.push(page.id);
-      }
-    }
-  }
-  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];
-  if (!resourceMeta) {
-    return null;
-  }
-  return resourceMeta.annotationPageManager;
-}
-function useAnnotationPageManager(resourceId, options = {}) {
-  const vault = useVault();
-  const manifest = useManifest();
-  const canvas = useCanvas();
-  const canvases = useVisibleCanvases();
-  const availablePageIds = React$1.useMemo(() => {
-    return flattenAnnotationPageIds({
-      all: options.all,
-      manifest,
-      canvas,
-      canvases
-    });
-  }, [options.all, canvas, canvases, manifest]);
-  const enabledPageIds = useEnabledAnnotationPageIds(resourceId, options.all ? void 0 : availablePageIds);
-  const setPageDisabled = React$1.useCallback((deselectId) => {
-    if (!resourceId) {
-      return;
-    }
-    vault.setMetaValue([deselectId, "annotationPageManager", "views"], (existingResources) => {
-      if (existingResources && !existingResources[resourceId]) {
-        return existingResources;
-      }
-      return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
-        [resourceId]: false
-      });
-    });
-  }, [resourceId, vault]);
-  const setPageEnabled = React$1.useCallback((id, opt = {}) => {
-    if (!resourceId) {
-      return;
-    }
-    const state = vault.getState();
-    const toDeselect = [];
-    if (opt == null ? void 0 : opt.deselectOthers) {
-      const allAnnotationListIds = Object.keys(state.iiif.entities.AnnotationPage);
-      for (const annotationPageId of allAnnotationListIds) {
-        const annotationListMeta = getMeta(state, annotationPageId);
-        if (annotationListMeta && annotationListMeta.views && annotationListMeta.views[resourceId]) {
-          toDeselect.push(annotationPageId);
-        }
-      }
-    }
-    for (const deselectId of toDeselect) {
-      setPageDisabled(deselectId);
-    }
-    vault.setMetaValue([id, "annotationPageManager", "views"], (existingResources) => {
-      if (existingResources && existingResources[resourceId]) {
-        return existingResources;
-      }
-      return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
-        [resourceId]: true
-      });
-    });
-  }, [resourceId, setPageDisabled, vault]);
-  return {
-    availablePageIds,
-    enabledPageIds,
-    setPageEnabled,
-    setPageDisabled
-  };
-}
-
-function useResources(ids, type) {
-  return useVaultSelector((state, vault) => vault.get(ids.map((id) => ({ id, type }))), [ids, type]);
-}
-
-const ImageServiceLoaderContext = React__default["default"].createContext(new iiifImageApi.ImageServiceLoader());
-function useImageServiceLoader() {
-  return React$1.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] = React$1.useState({});
-  const didUnmount = React$1.useRef(false);
-  React$1.useEffect(() => {
-    return () => {
-      didUnmount.current = true;
-    };
-  }, []);
-  const loadImageService = React$1.useCallback((imageService, { height, width }) => {
-    if (imageService) {
-      const imageServiceId = imageService.id || imageService["@id"];
-      const syncLoaded = loader.loadServiceSync({
-        id: imageServiceId,
-        width: imageService.width || width,
-        height: imageService.height || height,
-        source: imageService
-      });
-      if (syncLoaded) {
-        imageService = syncLoaded;
-      } else if (!imageServiceStatus[imageServiceId]) {
-        if (!didUnmount.current) {
-          setImageServiceStatus((r) => {
-            return __spreadProps$2(__spreadValues$3({}, r), {
-              [imageServiceId]: "loading"
-            });
-          });
-        }
-        loader.loadService({
-          id: imageServiceId,
-          width: imageService.width || width,
-          height: imageService.height || height
-        }).then(() => {
-          if (!didUnmount.current) {
-            setImageServiceStatus((r) => {
-              return __spreadProps$2(__spreadValues$3({}, r), {
-                [imageServiceId]: "done"
-              });
-            });
-          }
-        });
-      }
-    }
-    return imageService;
-  }, [loader, imageServiceStatus]);
-  return [loadImageService, imageServiceStatus];
-}
-
-function usePaintingAnnotations(options = {}) {
-  const canvas = useCanvas(options.canvasId ? { id: options.canvasId } : void 0);
-  return useVaultSelector((state, vault) => {
-    if (!canvas) {
-      return [];
-    }
-    const annotationPages = vault.get(canvas.items);
-    const flatAnnotations = [];
-    for (const page of annotationPages) {
-      flatAnnotations.push(...vault.get(page.items));
-    }
-    return flatAnnotations;
-  }, [canvas]);
-}
-
-function usePaintables(options, deps = []) {
-  const vault = useVault();
-  const paintingAnnotations = usePaintingAnnotations();
-  const [enabledChoices, setEnabledChoices] = React$1.useState((options == null ? void 0 : options.defaultChoices) || []);
-  const paintables = React$1.useMemo(() => getPaintables(vault, paintingAnnotations, enabledChoices), [vault, paintingAnnotations, enabledChoices, ...deps]);
-  const makeChoice = React$1.useCallback((id, { deselectOthers = true, deselect = false } = {}) => {
-    if (paintables.choice) {
-      if (paintables.choice.type !== "single-choice") {
-        throw new Error("Complex choice not supported yet");
-      }
-      setEnabledChoices((prevChoices) => {
-        if (deselect) {
-          const without = prevChoices.filter((e) => e !== id);
-          if (without.length === 0) {
-            const defaultId = paintables.items[0].resource.id;
-            if (defaultId) {
-              return [defaultId];
-            } else {
-              return [];
-            }
-          }
-          return without;
-        }
-        if (deselectOthers) {
-          return [id];
-        }
-        const newChoices = [...prevChoices];
-        if (newChoices.length === 0 && paintables.items.length) {
-          const defaultId = paintables.items[0].resource.id;
-          if (defaultId) {
-            newChoices.push(defaultId);
-          }
-        }
-        if (prevChoices.indexOf(id) !== -1) {
-          return prevChoices;
-        }
-        return [...prevChoices, id];
-      });
-    }
-  }, [paintables.choice]);
-  const actions = { makeChoice };
-  return [paintables, actions];
-}
-
-function getImageStrategy(canvas, paintables, loadImageService) {
-  const imageTypes = [];
-  for (const singleImage of paintables.items) {
-    const resource = singleImage.resource && singleImage.resource.type === "SpecificResource" ? singleImage.resource.source : singleImage.resource;
-    if (!resource.id) {
-      return unsupportedStrategy("No resource Identifier");
-    }
-    let imageService = void 0;
-    if (resource.service) {
-      const imageServices = iiifImageApi.getImageServices(resource);
-      if (imageServices[0]) {
-        imageService = loadImageService(imageServices[0], canvas);
-      }
-    }
-    const { selector: imageTarget, source } = expandTarget(singleImage.target);
-    if (source.id !== canvas.id) {
-      continue;
-    }
-    const defaultTarget = {
-      type: "BoxSelector",
-      spatial: {
-        x: 0,
-        y: 0,
-        width: canvas.width,
-        height: canvas.height
-      }
-    };
-    const target = imageTarget ? imageTarget.type === "TemporalSelector" ? {
-      type: "TemporalBoxSelector",
-      temporal: imageTarget.temporal,
-      spatial: defaultTarget.spatial
-    } : imageTarget : null;
-    const defaultImageSelector = {
-      type: "BoxSelector",
-      spatial: {
-        x: 0,
-        y: 0,
-        width: canvas.width,
-        height: canvas.height
-      }
-    };
-    const imageSelector = singleImage.resource.type === "SpecificResource" ? expandTarget(singleImage.resource) : null;
-    const selector = imageSelector && imageSelector.selector && (imageSelector.selector.type === "BoxSelector" || imageSelector.selector.type === "TemporalBoxSelector") ? {
-      type: "BoxSelector",
-      spatial: {
-        x: imageSelector.selector.spatial.x,
-        y: imageSelector.selector.spatial.y,
-        width: imageSelector.selector.spatial.width,
-        height: imageSelector.selector.spatial.height
-      }
-    } : defaultImageSelector;
-    if (imageService && !imageService.id) {
-      imageService.id = imageService["@id"];
-    }
-    const imageType = {
-      id: resource.id,
-      type: "Image",
-      width: target ? resource.width : canvas.width,
-      height: target ? resource.height : canvas.height,
-      service: imageService,
-      sizes: imageService && imageService.sizes ? imageService.sizes : resource.width && resource.height ? [{ width: resource.width, height: resource.height }] : [],
-      target: target && target.type !== "PointSelector" ? target : defaultTarget,
-      selector
-    };
-    imageTypes.push(imageType);
-  }
-  return {
-    type: "images",
-    image: imageTypes[0],
-    images: imageTypes,
-    choice: paintables.choice
-  };
-}
-
-const supportedFormats = ["model/gltf-binary"];
-function get3dStrategy(canvas, paintables) {
-  const first = paintables.items[0];
-  const resource = first.resource;
-  if (!resource.format) {
-    return unsupportedStrategy("Unknown format");
-  }
-  if (supportedFormats.indexOf(resource.format) === -1) {
-    return unsupportedStrategy(`3D format: ${resource.format} is unsupported`);
-  }
-  return {
-    type: "3d-model",
-    model: resource
-  };
-}
-
-function getAudioStrategy(canvas, paintables) {
-  var _a;
-  if (!canvas.duration) {
-    return unsupportedStrategy("No duration on canvas");
-  }
-  if (paintables.items.length > 1) {
-    return unsupportedStrategy("Only one audio source supported");
-  }
-  const audioResource = (_a = paintables.items[0]) == null ? void 0 : _a.resource;
-  if (!audioResource) {
-    return unsupportedStrategy("Unknown audio");
-  }
-  if (!audioResource.format) {
-    return unsupportedStrategy("Audio does not have format");
-  }
-  return {
-    type: "media",
-    media: {
-      duration: canvas.duration,
-      url: audioResource.id,
-      type: "Sound",
-      target: {
-        type: "TemporalSelector",
-        temporal: {
-          startTime: 0,
-          endTime: canvas.duration
-        }
-      },
-      format: audioResource.format,
-      selector: {
-        type: "TemporalSelector",
-        temporal: {
-          startTime: 0,
-          endTime: canvas.duration
-        }
-      }
-    },
-    annotations: {
-      pages: []
-    }
-  };
-}
-
-function getVideoStrategy(canvas, paintables) {
-  var _a;
-  const videoPaintables = paintables.items.filter((t) => t.type === "video");
-  if (!canvas.duration) {
-    return unsupportedStrategy("No duration on canvas");
-  }
-  if (videoPaintables.length > 1) {
-    return unsupportedStrategy("Only one video source supported");
-  }
-  const audioResource = (_a = videoPaintables[0]) == null ? void 0 : _a.resource;
-  if (!audioResource) {
-    return unsupportedStrategy("Unknown video");
-  }
-  if (!audioResource.format) {
-    return unsupportedStrategy("Video does not have format");
-  }
-  return {
-    type: "media",
-    media: {
-      duration: canvas.duration,
-      url: audioResource.id,
-      type: "Video",
-      items: [],
-      target: {
-        type: "TemporalSelector",
-        temporal: {
-          startTime: 0,
-          endTime: canvas.duration
-        }
-      },
-      format: audioResource.format,
-      selector: {
-        type: "TemporalSelector",
-        temporal: {
-          startTime: 0,
-          endTime: canvas.duration
-        }
-      }
-    },
-    annotations: {
-      pages: []
-    }
-  };
-}
-
-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();
-  const vault = useVault();
-  const [loadImageService, imageServiceStatus] = useLoadImageService();
-  const { enabledPageIds } = useAnnotationPageManager((options == null ? void 0 : options.annotationPageManagerId) || (manifest == null ? void 0 : manifest.id) || (canvas == null ? void 0 : canvas.id), {
-    all: false
-  });
-  const enabledPages = useResources(enabledPageIds, "AnnotationPage");
-  const supports = (options == null ? void 0 : options.strategies) || ["images", "media", "complex-timeline"];
-  const [paintables, actions] = usePaintables(options, [imageServiceStatus]);
-  const strategy = React$1.useMemo(() => {
-    if (!canvas || paintables.types.length === 0) {
-      return unknownResponse;
-    }
-    if (paintables.types.length !== 1) {
-      if (paintables.types.length === 2 && paintables.types.indexOf("text") !== -1) {
-        paintables.types = paintables.types.filter((t) => t !== "text");
-      } else {
-        if (supports.indexOf("complex-timeline") === -1) {
-          return unsupportedStrategy("Complex timeline not supported");
-        }
-        return unsupportedStrategy("ComplexTimelineStrategy not yet supported");
-      }
-    }
-    const mainType = paintables.types[0];
-    if (mainType === "image") {
-      if (supports.indexOf("images") === -1) {
-        return unsupportedStrategy("Image not supported");
-      }
-      return getImageStrategy(canvas, paintables, loadImageService);
-    }
-    if (mainType === "Model" || mainType === "model") {
-      if (supports.indexOf("3d-model") === -1) {
-        return unsupportedStrategy("3D not supported");
-      }
-      return get3dStrategy(canvas, paintables);
-    }
-    if (mainType === "sound" || mainType === "audio") {
-      if (supports.indexOf("media") === -1) {
-        return unsupportedStrategy("Media not supported");
-      }
-      return getAudioStrategy(canvas, paintables);
-    }
-    if (mainType === "video") {
-      if (supports.indexOf("media") === -1) {
-        return unsupportedStrategy("Media not supported");
-      }
-      return getVideoStrategy(canvas, paintables);
-    }
-    return unknownResponse;
-  }, [canvas, paintables, vault, actions.makeChoice]);
-  return React$1.useMemo(() => {
-    if (strategy.type === "unknown") {
-      return [strategy, emptyActions];
-    }
-    return [
-      __spreadProps$1(__spreadValues$2({}, strategy), {
-        annotations: { pages: enabledPages }
-      }),
-      actions
-    ];
-  }, [strategy, enabledPages]);
-}
-
-const useVaultEffect = (callback, deps = []) => {
-  const vault = useVault();
-  React$1.useEffect(() => {
-    callback(vault);
-  }, [vault, ...deps]);
-};
-
-function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
-  const vault = useVault();
-  const loader = useImageServiceLoader();
-  const helper = React$1.useMemo(() => vaultHelpers.createThumbnailHelper(vault, { imageServiceLoader: loader }), [vault, loader]);
-  const [thumbnail, setThumbnail] = React$1.useState();
-  const manifest = useManifest(manifestId ? { id: manifestId } : void 0);
-  const canvas = useCanvas(canvasId ? { id: canvasId } : void 0);
-  const subject = canvas ? canvas : manifest;
-  const didUnmount = React$1.useRef(false);
-  React$1.useEffect(() => {
-    return () => {
-      didUnmount.current = true;
-    };
-  }, []);
-  if (!subject) {
-    throw new Error("Must be called under a manifest or canvas context.");
-  }
-  useVaultEffect((v) => {
-    helper.getBestThumbnailAtSize(subject, request, dereference).then((thumb) => {
-      if (thumb.best && !didUnmount.current) {
-        setThumbnail(thumb.best);
-      }
-    });
-  }, [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 });
-    case "PLAY_PAUSE":
-      return __spreadProps(__spreadValues$1({}, state), { isFinished: false, isPlaying: !state.isPlaying });
-    case "PLAY_REQUESTED":
-      return __spreadProps(__spreadValues$1({}, state), { isFinished: false, playRequested: true });
-    case "PAUSE":
-      return __spreadProps(__spreadValues$1({}, state), { isPlaying: false });
-    case "PLAY":
-      return __spreadProps(__spreadValues$1({}, state), { isFinished: false, playRequested: false, isPlaying: true });
-    case "MUTE":
-      return __spreadProps(__spreadValues$1({}, state), { isMuted: true });
-    case "SET_VOLUME":
-      return __spreadProps(__spreadValues$1({}, state), { volume: action.volume, isMuted: action.volume === 0 });
-    case "TOGGLE_MUTE":
-      return __spreadProps(__spreadValues$1({}, state), { isMuted: !state.isMuted });
-    case "UNMUTE":
-      return __spreadProps(__spreadValues$1({}, state), { isMuted: false });
-  }
-  return state;
-}
-function formatTime(time) {
-  const seconds = Math.round(time);
-  return `${Math.floor(seconds / 60)}:${`${seconds % 60}`.padStart(2, "0")}`;
-}
-function useSimpleMediaPlayer(props) {
-  const [state, dispatch] = React$1.useReducer(reducer, getDefaultState(props.duration));
-  const media = React$1.useRef(null);
-  const currentTime = React$1.useRef(null);
-  const progress = React$1.useRef(null);
-  const _isMuted = React$1.useRef(false);
-  const _updateCurrentTime = React$1.useCallback(() => {
-    if (currentTime.current && media.current) {
-      currentTime.current.innerHTML = formatTime(media.current.currentTime);
-      if (progress.current) {
-        progress.current.style.width = `${media.current.currentTime / props.duration * 100}%`;
-      }
-      if (_isMuted.current !== media.current.muted) {
-        _isMuted.current = media.current.muted;
-        dispatch(media.current.muted ? { type: "MUTE" } : { type: "UNMUTE" });
-      }
-    }
-  }, [props.duration]);
-  const play = React$1.useCallback(() => {
-    if (media.current) {
-      dispatch({ type: "PLAY_REQUESTED" });
-      media.current.play().then(() => {
-        dispatch({ type: "PLAY" });
-      });
-      _updateCurrentTime();
-    }
-  }, [_updateCurrentTime]);
-  const playPause = React$1.useCallback(() => {
-    if (media.current) {
-      if (media.current.duration > 0 && media.current.paused) {
-        play();
-      } else {
-        pause();
-      }
-    }
-  }, [_updateCurrentTime]);
-  const pause = React$1.useCallback(() => {
-    if (media.current) {
-      media.current.pause();
-      dispatch({ type: "PAUSE" });
-      _updateCurrentTime();
-    }
-  }, [_updateCurrentTime]);
-  const toggleMute = React$1.useCallback(() => {
-    if (media.current) {
-      media.current.muted = !media.current.muted;
-      dispatch(media.current.muted ? { type: "MUTE" } : { type: "UNMUTE" });
-    }
-  }, []);
-  const mute = React$1.useCallback(() => {
-    if (media.current) {
-      media.current.muted = true;
-      dispatch({ type: "MUTE" });
-    }
-  }, []);
-  const unmute = React$1.useCallback(() => {
-    if (media.current) {
-      media.current.muted = false;
-      dispatch({ type: "UNMUTE" });
-    }
-  }, []);
-  const setVolume = React$1.useCallback((newVolume) => {
-    if (media.current) {
-      media.current.muted = false;
-      media.current.volume = newVolume / 100;
-      dispatch({ type: "SET_VOLUME", volume: newVolume });
-    }
-  }, []);
-  const setDurationPercent = React$1.useCallback((percent) => {
-    if (media.current) {
-      media.current.currentTime = Math.max(0, Math.min(percent * props.duration, props.duration));
-      _updateCurrentTime();
-    }
-  }, []);
-  const setTime = React$1.useCallback((time) => {
-    if (media.current) {
-      media.current.currentTime = Math.max(0, Math.min(time, props.duration));
-      _updateCurrentTime();
-    }
-  }, []);
-  React$1.useEffect(() => {
-    const interval = setInterval(() => {
-      _updateCurrentTime();
-    }, 350);
-    return () => clearInterval(interval);
-  }, [_updateCurrentTime, props.duration]);
-  React$1.useEffect(() => {
-    const ended = () => {
-      dispatch({ type: "FINISHED" });
-    };
-    const _media = media.current;
-    _media == null ? void 0 : _media.addEventListener("ended", ended);
-    return () => _media == null ? void 0 : _media.removeEventListener("ended", ended);
-  }, []);
-  return [
-    { element: media, currentTime, progress },
-    state,
-    {
-      play,
-      pause,
-      playPause,
-      mute,
-      unmute,
-      toggleMute,
-      setVolume,
-      setDurationPercent,
-      setTime
-    }
-  ];
-}
-
-const MediaReactContextState = React$1.createContext(null);
-const MediaReactContextActions = React$1.createContext(null);
-const MediaReactContextElements = React$1.createContext(null);
-function useMediaState() {
-  const ctx = React$1.useContext(MediaReactContextState);
-  if (!ctx) {
-    throw new Error("Ctx not found");
-  }
-  return ctx;
-}
-function useMediaActions() {
-  const ctx = React$1.useContext(MediaReactContextActions);
-  if (!ctx) {
-    throw new Error("Ctx not found");
-  }
-  return ctx;
-}
-function useMediaElements() {
-  const ctx = React$1.useContext(MediaReactContextElements);
-  if (!ctx) {
-    throw new Error("Ctx not found");
-  }
-  return ctx;
-}
-function MediaPlayerProvider({
-  actions,
-  state,
-  children,
-  currentTime,
-  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,
-    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 });
-  const Component = "div";
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CanvasPortal, {
-    overlay: true
-  }, /* @__PURE__ */ React.createElement("style", null, `
-            .video-container {
-              position: absolute;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              background: #000;
-              z-index: 13;
-              display: flex;
-              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, `
-            .model-container {
-              position: absolute;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              background: #000;
-              z-index: 13;
-              display: flex;
-              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;
-};
-function RenderCanvas({
-  x,
-  y,
-  onChoiceChange,
-  registerActions,
-  defaultChoices,
-  isStatic,
-  renderViewerControls,
-  renderMediaControls,
-  strategies,
-  children
-}) {
-  const canvas = useCanvas();
-  const elementProps = useResourceEvents(canvas, ["deep-zoom"]);
-  const [virtualPage] = useVirtualAnnotationPageContext();
-  const vault = useVault();
-  const helper = React$1.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
-  const [strategy, actions] = useRenderingStrategy({
-    strategies: strategies || ["images"],
-    defaultChoices: defaultChoices == null ? void 0 : defaultChoices.map(({ id }) => id)
-  });
-  const choice = strategy.type === "images" ? strategy.choice : void 0;
-  React$1.useEffect(() => {
-    if (registerActions) {
-      registerActions(actions);
-    }
-  }, [strategy.annotations]);
-  React$1.useEffect(() => {
-    if (defaultChoices) {
-      for (const choice2 of defaultChoices) {
-        if (typeof choice2.opacity !== "undefined") {
-          helper.applyStyles({ id: choice2.id }, "atlas", {
-            opacity: choice2.opacity
-          });
-        }
-      }
-    }
-  }, [defaultChoices]);
-  React$1.useLayoutEffect(() => {
-    if (onChoiceChange) {
-      onChoiceChange(choice);
-    }
-  }, [choice]);
-  const thumbnail = useThumbnail({ maxWidth: 256, maxHeight: 256 });
-  if (!canvas) {
-    return null;
-  }
-  const accompanyingCanvas = canvas.accompanyingCanvas;
-  const thumbnailFallbackImage = thumbnail && thumbnail.type === "fixed" ? /* @__PURE__ */ React__default["default"].createElement("world-object", {
-    height: canvas.height,
-    width: canvas.width,
-    x,
-    y
-  }, /* @__PURE__ */ React__default["default"].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;
-  if (strategy.type === "unknown") {
-    if (thumbnailFallbackImage) {
-      return thumbnailFallbackImage;
-    }
-    throw new Error(strategy.reason || "Unknown image strategy");
-  }
-  const annotations = /* @__PURE__ */ React__default["default"].createElement(React$1.Fragment, null, virtualPage ? /* @__PURE__ */ React__default["default"].createElement(RenderAnnotationPage, {
-    page: virtualPage
-  }) : null, strategy.annotations && strategy.annotations.pages ? strategy.annotations.pages.map((page) => {
-    return /* @__PURE__ */ React__default["default"].createElement(RenderAnnotationPage, {
-      key: page.id,
-      page
-    });
-  }) : null, children);
-  return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("world-object", __spreadValues({
-    key: strategy.type,
-    height: canvas.height,
-    width: canvas.width,
-    x,
-    y
-  }, elementProps), strategy.type === "images" ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, strategy.images.map((image, idx) => {
-    return /* @__PURE__ */ React__default["default"].createElement(RenderImage, {
-      isStatic,
-      key: image.id,
-      image,
-      id: image.id,
-      thumbnail: idx === 0 ? thumbnail : void 0,
-      annotations
-    });
-  }), renderViewerControls ? /* @__PURE__ */ React__default["default"].createElement(CanvasPortal, {
-    overlay: true
-  }, renderViewerControls(strategy)) : null) : null, strategy.type === "3d-model" ? /* @__PURE__ */ React__default["default"].createElement(Model, {
-    model: strategy.model
-  }) : null, strategy.type === "media" ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, strategy.media.type === "Sound" ? /* @__PURE__ */ React__default["default"].createElement(Audio, {
-    media: strategy.media
-  }, thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null) : strategy.media.type === "Video" ? /* @__PURE__ */ React__default["default"].createElement(Video, {
-    media: strategy.media
-  }, thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null) : null) : null), strategy.type === "media" && strategy.media.type === "Sound" && accompanyingCanvas ? /* @__PURE__ */ React__default["default"].createElement(CanvasContext, {
-    canvas: accompanyingCanvas.id
-  }, /* @__PURE__ */ React__default["default"].createElement(RenderCanvas, null)) : null);
-}
-
-const CanvasPanel = {
-  RenderImage,
-  RenderCanvas,
-  RenderAnnotationPage,
-  RenderAnnotation,
-  Viewer
-};
-
-function AnnotationContext({ annotation, children }) {
-  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
-    value: { annotation }
-  }, children);
-}
-
-function CollectionContext({ collection, children }) {
-  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
-    value: { collection }
-  }, children);
-}
-
-function RangeContext({ range, children }) {
-  return /* @__PURE__ */ React__default["default"].createElement(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();
-  const collectionId = id ? id : ctx.collection;
-  const collection = useVaultSelector((s) => collectionId ? s.iiif.entities.Collection[collectionId] : void 0, [collectionId]);
-  return React$1.useMemo(() => {
-    if (!collection) {
-      return void 0;
-    }
-    if (selector) {
-      return selector(collection);
-    }
-    return collection;
-  }, [collection, selector, ...deps]);
-}
-
-function useEventListener(resource, name, listener, scope, deps = []) {
-  const vault = useVault();
-  const helper = React$1.useMemo(() => vaultHelpers.createEventsHelper(vault), [vault]);
-  React$1.useEffect(() => {
-    const currentResource = resource;
-    if (!currentResource) {
-      return () => {
-      };
-    }
-    helper.addEventListener(currentResource, name, listener, scope);
-    return () => {
-      helper.removeEventListener(currentResource, name, listener);
-    };
-  }, [helper, resource, name, ...deps]);
-}
-
-function useExistingVault() {
-  const oldContext = React$1.useContext(ReactVaultContext);
-  return oldContext && oldContext.vault ? oldContext.vault : 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();
-  const vault = useVault();
-  const imageService = useImageServiceLoader();
-  const [_data, setData] = React$1.useState(void 0);
-  const [isFetching, setIsFetching] = React$1.useState(false);
-  const [status, setStatus] = React$1.useState("idle");
-  const [error, setError] = React$1.useState(void 0);
-  const key = canvas ? canvas.id : "undefined";
-  const initialData = React$1.useMemo(() => {
-    try {
-      if (canvas && annotations.length) {
-        const annotation = annotations[0];
-        const resource = vault.get(annotation.body[0]);
-        const imageServices = iiifImageApi.getImageServices(resource);
-        const firstImageService = imageServices[0];
-        if (!firstImageService) {
-          return void 0;
-        }
-        return imageService.loadServiceSync({
-          id: firstImageService.id || firstImageService["@id"],
-          width: firstImageService.width || canvas.width,
-          height: firstImageService.height || canvas.height
-        }) || void 0;
-      }
-    } catch (e) {
-      console.error(e);
-    }
-    return void 0;
-  }, [key, cacheKey, canvas]);
-  const data = status === "success" && _data ? _data : initialData;
-  React$1.useEffect(() => {
-    (() => __async(this, null, function* () {
-      try {
-        if (canvas && annotations.length) {
-          const annotation = annotations[0];
-          const resource = vault.get(annotation.body[0]);
-          const imageServices = iiifImageApi.getImageServices(resource);
-          const firstImageService = imageServices[0];
-          if (!firstImageService) {
-            return;
-          }
-          setIsFetching(true);
-          setStatus("loading");
-          try {
-            const loadedService = (yield imageService.loadService({
-              id: firstImageService.id || firstImageService["@id"],
-              width: firstImageService.width || canvas.width,
-              height: firstImageService.height || canvas.height
-            })) || void 0;
-            setData(loadedService);
-            setStatus("success");
-            setIsFetching(false);
-          } catch (err) {
-            setStatus("error");
-            setError(err);
-          }
-        }
-      } catch (err) {
-        setStatus("error");
-        setError(err);
-      }
-    }))();
-  }, [key, cacheKey]);
-  return React$1.useMemo(() => {
-    return {
-      data,
-      isFetching,
-      status,
-      error
-    };
-  }, [data, isFetching, status, error]);
-}
-
-function useImageTile() {
-  const imageService = useImageService();
-  return {
-    isLoading: imageService.isFetching,
-    tile: imageService.data ? {
-      id: imageService.data.id || imageService.data["@id"],
-      width: imageService.data.width,
-      height: imageService.data.height,
-      imageService: imageService.data,
-      thumbnail: void 0
-    } : 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 React$1.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;
-}
-
-function useStyleHelper() {
-  const vault = useVault();
-  return React$1.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
-}
-
-exports.AnnotationContext = AnnotationContext;
-exports.CanvasContext = CanvasContext;
-exports.CanvasPanel = CanvasPanel;
-exports.CanvasPortal = CanvasPortal;
-exports.CollectionContext = CollectionContext;
-exports.ContextBridge = ContextBridge;
-exports.ImageServiceLoaderContext = ImageServiceLoaderContext;
-exports.ManifestContext = ManifestContext;
-exports.MediaPlayerProvider = MediaPlayerProvider;
-exports.OverlayPortalContext = OverlayPortalContext;
-exports.PortalContext = PortalContext;
-exports.RangeContext = RangeContext;
-exports.ReactVaultContext = ReactVaultContext;
-exports.ResourceProvider = ResourceProvider;
-exports.ResourceReactContext = ResourceReactContext;
-exports.SimpleViewerProvider = SimpleViewerProvider;
-exports.SimpleViewerReactContext = SimpleViewerReactContext;
-exports.VaultProvider = VaultProvider;
-exports.VirtualAnnotationProvider = VirtualAnnotationProvider;
-exports.VisibleCanvasReactContext = VisibleCanvasReactContext;
-exports.emptyActions = emptyActions;
-exports.expandTarget = expandTarget;
-exports.flattenAnnotationPageIds = flattenAnnotationPageIds;
-exports.formatTime = formatTime;
-exports.getImageStrategy = getImageStrategy;
-exports.getPaintables = getPaintables;
-exports.parseSelector = parseSelector;
-exports.parseSpecificResource = parseSpecificResource;
-exports.unknownResponse = unknownResponse;
-exports.unsupportedStrategy = unsupportedStrategy;
-exports.useAnnotation = useAnnotation;
-exports.useAnnotationPageManager = useAnnotationPageManager;
-exports.useAnnotationsAtTime = useAnnotationsAtTime;
-exports.useCanvas = useCanvas;
-exports.useCanvasClock = useCanvasClock;
-exports.useCollection = useCollection;
-exports.useContextBridge = useContextBridge;
-exports.useDispatch = useDispatch;
-exports.useEventListener = useEventListener;
-exports.useExistingVault = useExistingVault;
-exports.useExternalCollection = useExternalCollection;
-exports.useExternalManifest = useExternalManifest;
-exports.useExternalResource = useExternalResource;
-exports.useImageService = useImageService;
-exports.useImageServiceLoader = useImageServiceLoader;
-exports.useImageTile = useImageTile;
-exports.useLoadImageService = useLoadImageService;
-exports.useManifest = useManifest;
-exports.useMediaActions = useMediaActions;
-exports.useMediaElements = useMediaElements;
-exports.useMediaState = useMediaState;
-exports.usePaintables = usePaintables;
-exports.usePaintingAnnotations = usePaintingAnnotations;
-exports.useRange = useRange;
-exports.useRenderingStrategy = useRenderingStrategy;
-exports.useResourceContext = useResourceContext;
-exports.useResourceEvents = useResourceEvents;
-exports.useResources = useResources;
-exports.useSearchService = useSearchService;
-exports.useSimpleMediaPlayer = useSimpleMediaPlayer;
-exports.useSimpleViewer = useSimpleViewer;
-exports.useStyleHelper = useStyleHelper;
-exports.useStyles = useStyles;
-exports.useThumbnail = useThumbnail;
-exports.useVault = useVault;
-exports.useVaultEffect = useVaultEffect;
-exports.useVaultSelector = useVaultSelector;
-exports.useVirtualAnnotationPage = useVirtualAnnotationPage;
-exports.useVirtualAnnotationPageContext = useVirtualAnnotationPageContext;
-exports.useVisibleCanvases = useVisibleCanvases;