react-iiif-vault 0.9.8 → 0.9.9

package/dist/cjs/index.js

@@ -2,30 +2,223 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var vault = require('@iiif/vault');
+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);
+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);
 
-var __defProp$8 = Object.defineProperty;
-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) => {
+  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$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]);
+    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;
 };
@@ -38,25 +231,31 @@ const defaultResourceContext = {
 };
 const ResourceReactContext = React__default["default"].createContext(defaultResourceContext);
 const useResourceContext = () => {
-  return React.useContext(ResourceReactContext);
+  return React$1.useContext(ResourceReactContext);
 };
-const ResourceProvider = ({ value, children }) => {
+function ResourceProvider({ value, children }) {
   const parentContext = useResourceContext();
-  const newContext = React.useMemo(() => {
-    return __spreadValues$8(__spreadValues$8({}, parentContext), value);
+  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) => {
   }
 });
-const VaultProvider = ({ vault: vault$1, vaultOptions, useGlobal, resources, children }) => {
-  const [vaultInstance, setVaultInstance] = React.useState(() => {
+function VaultProvider({
+  vault: vault$1,
+  vaultOptions,
+  useGlobal,
+  resources,
+  children
+}) {
+  const [vaultInstance, setVaultInstance] = React$1.useState(() => {
     if (vault$1) {
       return vault$1;
     }
@@ -73,10 +272,10 @@ const VaultProvider = ({ vault: vault$1, vaultOptions, useGlobal, resources, chi
   }, /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
     value: resources || {}
   }, children));
-};
+}
 
 const useVault = () => {
-  const { vault } = React.useContext(ReactVaultContext);
+  const { vault } = React$1.useContext(ReactVaultContext);
   if (vault === null) {
     throw new Error("Vault not found. Ensure you have your provider set up correctly.");
   }
@@ -106,13 +305,13 @@ var __async$1 = (__this, __arguments, generator) => {
 function useExternalResource(idOrRef, { noCache = false } = {}) {
   const id = typeof idOrRef === "string" ? idOrRef : idOrRef.id;
   const vault = useVault();
-  const [realId, setRealId] = React.useState(id);
-  const [error, setError] = React.useState(void 0);
-  const initialData = React.useMemo(() => {
+  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.useState(initialData);
-  React.useEffect(() => {
+  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);
@@ -141,30 +340,32 @@ function useExternalManifest(idOrRef, options) {
   return { id, isLoaded, error, manifest: resource, requestId, cached };
 }
 
-const ManifestContext = ({ manifest, children }) => {
+function ManifestContext({ manifest, children }) {
   return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
     value: { manifest }
   }, children);
-};
+}
 
-const CanvasContext = ({ canvas, 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.useState(() => selector(vault.getState(), vault));
-  React.useEffect(() => {
-    return vault.subscribe((s) => selector(s, vault), setSelectedState, false);
+  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.useContext(VisibleCanvasReactContext);
+  const ids = React$1.useContext(VisibleCanvasReactContext);
   return useVaultSelector((state) => {
     return ids.map((id) => state.iiif.entities.Canvas[id]).filter(Boolean);
   }, [ids]);
@@ -172,7 +373,7 @@ function useVisibleCanvases() {
 
 const noop = () => {
 };
-const SimpleViewerReactContext = React.createContext({
+const SimpleViewerReactContext = React$1.createContext({
   setCurrentCanvasId: noop,
   setCurrentCanvasIndex: noop,
   nextCanvas: noop,
@@ -181,24 +382,24 @@ const SimpleViewerReactContext = React.createContext({
   totalCanvases: 0,
   pagingView: true
 });
-const SimpleViewerProvider = (props) => {
+function SimpleViewerProvider(props) {
   const manifest = useExternalManifest(props.manifest);
-  const [currentCanvasId, setCurrentCanvasId] = React.useState("");
-  const [visible, setVisible] = React.useState([]);
+  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.useEffect(() => {
+  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.useMemo(() => {
+  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.useMemo(() => canvasList.indexOf(currentCanvasId), [canvasList, currentCanvasId]);
-  const nextCanvas = React.useCallback(() => {
+  const currentCanvasIndex = React$1.useMemo(() => canvasList.indexOf(currentCanvasId), [canvasList, currentCanvasId]);
+  const nextCanvas = React$1.useCallback(() => {
     if (canvasList.length && currentCanvasId) {
       if (currentCanvasIndex === -1) {
         return;
@@ -214,7 +415,7 @@ const SimpleViewerProvider = (props) => {
       }
     }
   }, [pagingView, canvasList, currentCanvasId, currentCanvasIndex]);
-  const previousCanvas = React.useCallback(() => {
+  const previousCanvas = React$1.useCallback(() => {
     if (canvasList.length && currentCanvasId) {
       if (currentCanvasIndex === 0 || currentCanvasIndex === -1) {
         return;
@@ -227,7 +428,7 @@ const SimpleViewerProvider = (props) => {
       }
     }
   }, [pagingView, canvasList, currentCanvasId, currentCanvasIndex]);
-  const setCurrentCanvasIndex = React.useCallback((idx) => {
+  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;
@@ -247,13 +448,13 @@ const SimpleViewerProvider = (props) => {
       });
     }
   }, [pagingView, canvasList]);
-  const internalSetCurrentCanvasId = React.useCallback((nextId) => {
+  const internalSetCurrentCanvasId = React$1.useCallback((nextId) => {
     const idx = canvasList.indexOf(nextId);
     if (idx !== -1) {
       setCurrentCanvasIndex(idx);
     }
   }, [canvasList, setCurrentCanvasIndex]);
-  const ctx = React.useMemo(() => ({
+  const ctx = React$1.useMemo(() => ({
     setCurrentCanvasId: internalSetCurrentCanvasId,
     nextCanvas,
     previousCanvas,
@@ -278,20 +479,20 @@ const SimpleViewerProvider = (props) => {
   }, /* @__PURE__ */ React__default["default"].createElement(CanvasContext, {
     canvas: currentCanvasId
   }, props.children))));
-};
+}
 function useSimpleViewer() {
-  return React.useContext(SimpleViewerReactContext);
+  return React$1.useContext(SimpleViewerReactContext);
 }
 
 function useContextBridge() {
   return {
-    VaultContext: React.useContext(ReactVaultContext),
-    ResourceContext: React.useContext(ResourceReactContext),
-    SimpleViewerReactContext: React.useContext(SimpleViewerReactContext),
-    VisibleCanvasReactContext: React.useContext(VisibleCanvasReactContext)
+    VaultContext: React$1.useContext(ReactVaultContext),
+    ResourceContext: React$1.useContext(ResourceReactContext),
+    SimpleViewerReactContext: React$1.useContext(SimpleViewerReactContext),
+    VisibleCanvasReactContext: React$1.useContext(VisibleCanvasReactContext)
   };
 }
-const ContextBridge = (props) => {
+function ContextBridge(props) {
   return /* @__PURE__ */ React__default["default"].createElement(VaultProvider, {
     vault: props.bridge.VaultContext.vault || void 0,
     resources: props.bridge.ResourceContext
@@ -300,7 +501,7 @@ const ContextBridge = (props) => {
   }, /* @__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";
@@ -344,7 +545,7 @@ typesafeActions.createAction(BATCH_IMPORT)();
 function useDispatch() {
   const vault = useVault();
   const store = vault.getStore();
-  return React.useMemo(() => {
+  return React$1.useMemo(() => {
     return (action) => store.dispatch(action);
   }, [store]);
 }
@@ -354,12 +555,12 @@ function isVaultActivated(obj) {
 }
 function useVirtualAnnotationPage() {
   const vault = useVault();
-  const sources = React.useRef([]);
+  const sources = React$1.useRef([]);
   const dispatch = useDispatch();
-  const virtualId = React.useMemo(() => {
+  const virtualId = React$1.useMemo(() => {
     return `vault://annotation-page/${new Date().getTime()}/${Math.round(Math.random() * 1e9).toString(16)}`;
   }, []);
-  React.useLayoutEffect(() => {
+  React$1.useLayoutEffect(() => {
     const page = {
       id: virtualId,
       type: "AnnotationPage",
@@ -388,7 +589,7 @@ function useVirtualAnnotationPage() {
     }));
   }, [virtualId]);
   const fullPage = useVaultSelector((state) => virtualId ? state.iiif.entities.AnnotationPage[virtualId] : null, [virtualId]);
-  const addAnnotation = React.useCallback((id, atIndex) => {
+  const addAnnotation = React$1.useCallback((id, atIndex) => {
     if (virtualId) {
       if (isVaultActivated(id)) {
         const display = id;
@@ -418,7 +619,7 @@ function useVirtualAnnotationPage() {
       }
     }
   }, [virtualId]);
-  const removeAnnotation = React.useCallback((id) => {
+  const removeAnnotation = React$1.useCallback((id) => {
     if (virtualId) {
       if (isVaultActivated(id)) {
         id = typeof id.source === "string" ? id.source : id.source.id;
@@ -451,9 +652,9 @@ function useVirtualAnnotationPage() {
   ];
 }
 
-const VirtualAnnotationPageContext = React.createContext(null);
+const VirtualAnnotationPageContext = React$1.createContext(null);
 function useVirtualAnnotationPageContext() {
-  const ctx = React.useContext(VirtualAnnotationPageContext);
+  const ctx = React$1.useContext(VirtualAnnotationPageContext);
   return [
     ctx.fullPage,
     {
@@ -465,67 +666,170 @@ function useVirtualAnnotationPageContext() {
 function VirtualAnnotationProvider({ children }) {
   const [fullPage, { addAnnotation, removeAnnotation }] = useVirtualAnnotationPage();
   return /* @__PURE__ */ React__default["default"].createElement(VirtualAnnotationPageContext.Provider, {
-    value: React.useMemo(() => ({ fullPage, addAnnotation, removeAnnotation }), [fullPage])
+    value: React$1.useMemo(() => ({ fullPage, addAnnotation, removeAnnotation }), [fullPage])
   }, children);
 }
 
-var __defProp$7 = Object.defineProperty;
-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) => {
+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$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]);
+    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 root = React$1.useMemo(() => htmlElement ? createRoot(htmlElement) : null, [htmlElement]);
+  const preset = useViewerPreset();
+  React$1.useLayoutEffect(() => {
+    return () => root == null ? void 0 : root.unmount();
+  }, [root]);
+  React$1.useLayoutEffect(() => {
+    if (root) {
+      root.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$7.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(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;
 };
+const AtlasAuto = atlas.AtlasAuto;
 function Viewer(_a) {
   var _b = _a, {
-    children
+    children,
+    errorFallback,
+    outerContainerProps = {}
   } = _b, props = __objRest(_b, [
-    "children"
+    "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();
-  return /* @__PURE__ */ React__default["default"].createElement(atlas.AtlasAuto, __spreadValues$7({}, props), /* @__PURE__ */ React__default["default"].createElement(ContextBridge, {
+  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("div", __spreadValues$8({
+    style: { position: "relative" }
+  }, outerContainerProps), /* @__PURE__ */ React__default["default"].createElement(AtlasAuto, __spreadProps$6(__spreadValues$8({}, props), {
+    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(VirtualAnnotationProvider, null, children)))))), /* @__PURE__ */ React__default["default"].createElement("div", {
+    ref: overlayPortal
+  })), /* @__PURE__ */ React__default["default"].createElement("div", {
+    ref: portal
+  }));
 }
 
 function useResourceEvents(resource, scope) {
   const vault = useVault();
-  const helper = React.useMemo(() => vaultHelpers.createEventsHelper(vault), [vault]);
+  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.useMemo(() => {
+  return React$1.useMemo(() => {
     return resource ? helper.getListenersAsProps(resource, scope) : {};
   }, [hooks, resource, vault, scope]);
 }
 
 function useStyles(resource, scope) {
   const vault = useVault();
-  const helper = React.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
+  const helper = React$1.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
   return useVaultSelector(() => {
     if (!resource) {
       return null;
@@ -624,25 +928,25 @@ function parseSelector(source) {
   };
 }
 
-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) => {
+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$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]);
+    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$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 function expandTarget(target, options = {}) {
   if (Array.isArray(target)) {
     return expandTarget(target[0]);
@@ -699,7 +1003,7 @@ function expandTarget(target, options = {}) {
     if (!fragment) {
       return {
         type: "SpecificResource",
-        source: __spreadProps$4(__spreadValues$6({}, target), {
+        source: __spreadProps$5(__spreadValues$7({}, target), {
           id
         }),
         selector: null,
@@ -708,7 +1012,7 @@ function expandTarget(target, options = {}) {
     }
     return expandTarget({
       type: "SpecificResource",
-      source: __spreadProps$4(__spreadValues$6({}, target), {
+      source: __spreadProps$5(__spreadValues$7({}, target), {
         id
       }),
       selector: {
@@ -725,25 +1029,25 @@ function expandTarget(target, options = {}) {
   };
 }
 
-var __defProp$5 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-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) => {
+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$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]);
+    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$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 function useAnnotation(options = {}, deps = []) {
   const { id, selector } = options;
   const ctx = useResourceContext();
@@ -751,11 +1055,11 @@ function useAnnotation(options = {}, deps = []) {
   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.useMemo(() => {
+  return React$1.useMemo(() => {
     if (!annotation) {
       return void 0;
     }
-    const newAnnotation = __spreadProps$3(__spreadValues$5({}, annotation), {
+    const newAnnotation = __spreadProps$4(__spreadValues$6({}, annotation), {
       body,
       target: expandTarget(annotation.target, { typeMap: vault.getState().iiif.mapping })
     });
@@ -771,7 +1075,7 @@ function useCanvas(options = {}, deps = []) {
   const ctx = useResourceContext();
   const canvasId = id ? id : ctx.canvas;
   const canvas = useVaultSelector((s) => canvasId ? s.iiif.entities.Canvas[canvasId] : void 0, [canvasId]);
-  return React.useMemo(() => {
+  return React$1.useMemo(() => {
     if (!canvas) {
       return void 0;
     }
@@ -782,19 +1086,19 @@ function useCanvas(options = {}, deps = []) {
   }, [canvas, selector, ...deps]);
 }
 
-var __defProp$4 = Object.defineProperty;
-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) => {
+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$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]);
+    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;
 };
@@ -809,14 +1113,14 @@ const RenderAnnotation = ({
   const html = useStyles(annotation, "html");
   const events = useResourceEvents(annotation, ["atlas"]);
   const canvas = useCanvas();
-  const allStyles = React.useMemo(() => {
+  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$4({
+  return /* @__PURE__ */ React__default["default"].createElement(atlas.RegionHighlight, __spreadValues$5({
     id: annotation.id,
     isEditing: true,
     region: annotation.target.selector.spatial,
@@ -837,7 +1141,7 @@ 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__default["default"].createElement(React.Fragment, null, (_a = page.items) == null ? void 0 : _a.map((annotation) => {
+  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,
@@ -855,12 +1159,13 @@ function RenderImage({
   isStatic,
   x = 0,
   y = 0,
-  annotations
+  annotations,
+  children
 }) {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React__default["default"].createElement(React.Fragment, {
+  return /* @__PURE__ */ React__default["default"].createElement(React$1.Fragment, {
     key: id
-  }, !image.service ? /* @__PURE__ */ React__default["default"].createElement(React.Fragment, {
+  }, !image.service ? /* @__PURE__ */ React__default["default"].createElement(React$1.Fragment, {
     key: "no-service"
   }, /* @__PURE__ */ React__default["default"].createElement("world-image", {
     uri: image.id,
@@ -869,7 +1174,7 @@ function RenderImage({
       width: image.width,
       height: image.height
     } : void 0
-  }), annotations) : /* @__PURE__ */ React__default["default"].createElement(React.Fragment, {
+  }), annotations, children) : /* @__PURE__ */ React__default["default"].createElement(React$1.Fragment, {
     key: "service"
   }, /* @__PURE__ */ React__default["default"].createElement(TileSet, {
     viewport: isStatic,
@@ -884,7 +1189,7 @@ function RenderImage({
     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));
+  }), annotations, children));
 }
 
 function parseSpecificResource(resource) {
@@ -952,7 +1257,7 @@ function useManifest(options = {}, deps = []) {
   useVault();
   const manifestId = id ? id : ctx.manifest;
   const manifest = useVaultSelector((s) => manifestId ? s.iiif.entities.Manifest[manifestId] : void 0, [manifestId]);
-  return React.useMemo(() => {
+  return React$1.useMemo(() => {
     if (!manifest) {
       return void 0;
     }
@@ -1024,25 +1329,25 @@ function flattenAnnotationPageIds({
   return foundIds;
 }
 
-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) => {
+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$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]);
+    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$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+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];
@@ -1056,7 +1361,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
   const manifest = useManifest();
   const canvas = useCanvas();
   const canvases = useVisibleCanvases();
-  const availablePageIds = React.useMemo(() => {
+  const availablePageIds = React$1.useMemo(() => {
     return flattenAnnotationPageIds({
       all: options.all,
       manifest,
@@ -1065,7 +1370,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
     });
   }, [options.all, canvas, canvases, manifest]);
   const enabledPageIds = useEnabledAnnotationPageIds(resourceId, options.all ? void 0 : availablePageIds);
-  const setPageDisabled = React.useCallback((deselectId) => {
+  const setPageDisabled = React$1.useCallback((deselectId) => {
     if (!resourceId) {
       return;
     }
@@ -1073,12 +1378,12 @@ function useAnnotationPageManager(resourceId, options = {}) {
       if (existingResources && !existingResources[resourceId]) {
         return existingResources;
       }
-      return __spreadProps$2(__spreadValues$3({}, existingResources || {}), {
+      return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
         [resourceId]: false
       });
     });
   }, [resourceId, vault]);
-  const setPageEnabled = React.useCallback((id, opt = {}) => {
+  const setPageEnabled = React$1.useCallback((id, opt = {}) => {
     if (!resourceId) {
       return;
     }
@@ -1100,7 +1405,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
       if (existingResources && existingResources[resourceId]) {
         return existingResources;
       }
-      return __spreadProps$2(__spreadValues$3({}, existingResources || {}), {
+      return __spreadProps$3(__spreadValues$4({}, existingResources || {}), {
         [resourceId]: true
       });
     });
@@ -1119,51 +1424,52 @@ function useResources(ids, type) {
 
 const ImageServiceLoaderContext = React__default["default"].createContext(new iiifImageApi.ImageServiceLoader());
 function useImageServiceLoader() {
-  return React.useContext(ImageServiceLoaderContext);
+  return React$1.useContext(ImageServiceLoaderContext);
 }
 
-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) => {
+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$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]);
+    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$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
 function useLoadImageService() {
   const loader = useImageServiceLoader();
-  const [imageServiceStatus, setImageServiceStatus] = React.useState({});
-  const didUnmount = React.useRef(false);
-  React.useEffect(() => {
+  const [imageServiceStatus, setImageServiceStatus] = React$1.useState({});
+  const didUnmount = React$1.useRef(false);
+  React$1.useEffect(() => {
     return () => {
       didUnmount.current = true;
     };
   }, []);
-  const loadImageService = React.useCallback((imageService, { height, width }) => {
+  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
+        height: imageService.height || height,
+        source: imageService
       });
       if (syncLoaded) {
         imageService = syncLoaded;
       } else if (!imageServiceStatus[imageServiceId]) {
         if (!didUnmount.current) {
           setImageServiceStatus((r) => {
-            return __spreadProps$1(__spreadValues$2({}, r), {
+            return __spreadProps$2(__spreadValues$3({}, r), {
               [imageServiceId]: "loading"
             });
           });
@@ -1175,7 +1481,7 @@ function useLoadImageService() {
         }).then(() => {
           if (!didUnmount.current) {
             setImageServiceStatus((r) => {
-              return __spreadProps$1(__spreadValues$2({}, r), {
+              return __spreadProps$2(__spreadValues$3({}, r), {
                 [imageServiceId]: "done"
               });
             });
@@ -1206,9 +1512,9 @@ function usePaintingAnnotations(options = {}) {
 function usePaintables(options, deps = []) {
   const vault = useVault();
   const paintingAnnotations = usePaintingAnnotations();
-  const [enabledChoices, setEnabledChoices] = React.useState((options == null ? void 0 : options.defaultChoices) || []);
-  const paintables = React.useMemo(() => getPaintables(vault, paintingAnnotations, enabledChoices), [vault, paintingAnnotations, enabledChoices, ...deps]);
-  const makeChoice = React.useCallback((id, { deselectOthers = true, deselect = false } = {}) => {
+  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");
@@ -1324,37 +1630,126 @@ function getImageStrategy(canvas, paintables, loadImageService) {
 const supportedFormats = ["model/gltf-binary"];
 function get3dStrategy(canvas, paintables) {
   const first = paintables.items[0];
-  if (!first.format) {
+  const resource = first.resource;
+  if (!resource.format) {
     return unsupportedStrategy("Unknown format");
   }
-  if (supportedFormats.indexOf(first.format) === -1) {
-    return unsupportedStrategy(`3D format: ${first.format} is unsupported`);
+  if (supportedFormats.indexOf(resource.format) === -1) {
+    return unsupportedStrategy(`3D format: ${resource.format} is unsupported`);
   }
   return {
     type: "3d-model",
-    model: first
+    model: resource
   };
 }
 
-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) => {
+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$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]);
+    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 = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
 function useRenderingStrategy(options) {
   const manifest = useManifest();
   const canvas = useCanvas();
@@ -1366,15 +1761,19 @@ function useRenderingStrategy(options) {
   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.useMemo(() => {
+  const strategy = React$1.useMemo(() => {
     if (!canvas || paintables.types.length === 0) {
       return unknownResponse;
     }
     if (paintables.types.length !== 1) {
-      if (supports.indexOf("complex-timeline") === -1) {
-        return unsupportedStrategy("Complex timeline not supported");
+      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");
       }
-      return unsupportedStrategy("ComplexTimelineStrategy not yet supported");
     }
     const mainType = paintables.types[0];
     if (mainType === "image") {
@@ -1383,32 +1782,32 @@ function useRenderingStrategy(options) {
       }
       return getImageStrategy(canvas, paintables, loadImageService);
     }
-    if (mainType === "Model") {
+    if (mainType === "Model" || mainType === "model") {
       if (supports.indexOf("3d-model") === -1) {
         return unsupportedStrategy("3D not supported");
       }
       return get3dStrategy(canvas, paintables);
     }
-    if (mainType === "audio") {
+    if (mainType === "sound" || mainType === "audio") {
       if (supports.indexOf("media") === -1) {
         return unsupportedStrategy("Media not supported");
       }
-      return unsupportedStrategy("Audio strategy not yet supported");
+      return getAudioStrategy(canvas, paintables);
     }
     if (mainType === "video") {
       if (supports.indexOf("media") === -1) {
         return unsupportedStrategy("Media not supported");
       }
-      return unsupportedStrategy("Video strategy not yet supported");
+      return getVideoStrategy(canvas, paintables);
     }
     return unknownResponse;
   }, [canvas, paintables, vault, actions.makeChoice]);
-  return React.useMemo(() => {
+  return React$1.useMemo(() => {
     if (strategy.type === "unknown") {
       return [strategy, emptyActions];
     }
     return [
-      __spreadProps(__spreadValues$1({}, strategy), {
+      __spreadProps$1(__spreadValues$2({}, strategy), {
         annotations: { pages: enabledPages }
       }),
       actions
@@ -1418,7 +1817,7 @@ function useRenderingStrategy(options) {
 
 const useVaultEffect = (callback, deps = []) => {
   const vault = useVault();
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     callback(vault);
   }, [vault, ...deps]);
 };
@@ -1426,13 +1825,13 @@ const useVaultEffect = (callback, deps = []) => {
 function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
   const vault = useVault();
   const loader = useImageServiceLoader();
-  const helper = React.useMemo(() => vaultHelpers.createThumbnailHelper(vault, { imageServiceLoader: loader }), [vault, loader]);
-  const [thumbnail, setThumbnail] = React.useState();
+  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.useRef(false);
-  React.useEffect(() => {
+  const didUnmount = React$1.useRef(false);
+  React$1.useEffect(() => {
     return () => {
       didUnmount.current = true;
     };
@@ -1450,6 +1849,283 @@ function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
   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;
@@ -1466,23 +2142,34 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, isStatic }) {
+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.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
+  const helper = React$1.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
   const [strategy, actions] = useRenderingStrategy({
-    strategies: ["images"],
+    strategies: strategies || ["images"],
     defaultChoices: defaultChoices == null ? void 0 : defaultChoices.map(({ id }) => id)
   });
   const choice = strategy.type === "images" ? strategy.choice : void 0;
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (registerActions) {
       registerActions(actions);
     }
   }, [strategy.annotations]);
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     if (defaultChoices) {
       for (const choice2 of defaultChoices) {
         if (typeof choice2.opacity !== "undefined") {
@@ -1493,7 +2180,7 @@ function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, i
       }
     }
   }, [defaultChoices]);
-  React.useLayoutEffect(() => {
+  React$1.useLayoutEffect(() => {
     if (onChoiceChange) {
       onChoiceChange(choice);
     }
@@ -1502,39 +2189,41 @@ function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, i
   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 (thumbnail && thumbnail.type === "fixed") {
-      return /* @__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
-      }));
-    }
-    throw new Error("Unknown image strategy");
+    if (thumbnailFallbackImage) {
+      return thumbnailFallbackImage;
+    }
+    throw new Error(strategy.reason || "Unknown image strategy");
   }
-  const annotations = /* @__PURE__ */ React__default["default"].createElement(React.Fragment, null, virtualPage ? /* @__PURE__ */ React__default["default"].createElement(RenderAnnotationPage, {
+  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);
-  return /* @__PURE__ */ React__default["default"].createElement("world-object", __spreadValues({
+  }) : 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" ? strategy.images.map((image, idx) => {
+  }, 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,
@@ -1543,7 +2232,17 @@ function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, i
       thumbnail: idx === 0 ? thumbnail : void 0,
       annotations
     });
-  }) : null);
+  }), 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 = {
@@ -1554,23 +2253,23 @@ const CanvasPanel = {
   Viewer
 };
 
-const AnnotationContext = ({ annotation, children }) => {
+function AnnotationContext({ annotation, children }) {
   return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
     value: { annotation }
   }, children);
-};
+}
 
-const CollectionContext = ({ collection, children }) => {
+function CollectionContext({ collection, children }) {
   return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
     value: { collection }
   }, children);
-};
+}
 
-const RangeContext = ({ range, children }) => {
+function RangeContext({ range, children }) {
   return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
     value: { range }
   }, children);
-};
+}
 
 function useAnnotationsAtTime(time, options = {}) {
   const allAnnotations = usePaintingAnnotations(options);
@@ -1585,7 +2284,7 @@ function useCollection(options, deps = []) {
   const ctx = useResourceContext();
   const collectionId = id ? id : ctx.collection;
   const collection = useVaultSelector((s) => collectionId ? s.iiif.entities.Collection[collectionId] : void 0, [collectionId]);
-  return React.useMemo(() => {
+  return React$1.useMemo(() => {
     if (!collection) {
       return void 0;
     }
@@ -1598,8 +2297,8 @@ function useCollection(options, deps = []) {
 
 function useEventListener(resource, name, listener, scope, deps = []) {
   const vault = useVault();
-  const helper = React.useMemo(() => vaultHelpers.createEventsHelper(vault), [vault]);
-  React.useEffect(() => {
+  const helper = React$1.useMemo(() => vaultHelpers.createEventsHelper(vault), [vault]);
+  React$1.useEffect(() => {
     const currentResource = resource;
     if (!currentResource) {
       return () => {
@@ -1613,7 +2312,7 @@ function useEventListener(resource, name, listener, scope, deps = []) {
 }
 
 function useExistingVault() {
-  const oldContext = React.useContext(ReactVaultContext);
+  const oldContext = React$1.useContext(ReactVaultContext);
   return oldContext && oldContext.vault ? oldContext.vault : vault.globalVault();
 }
 
@@ -1647,12 +2346,12 @@ function useImageService({ cacheKey } = {}) {
   const annotations = usePaintingAnnotations();
   const vault = useVault();
   const imageService = useImageServiceLoader();
-  const [_data, setData] = React.useState(void 0);
-  const [isFetching, setIsFetching] = React.useState(false);
-  const [status, setStatus] = React.useState("idle");
-  const [error, setError] = React.useState(void 0);
+  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.useMemo(() => {
+  const initialData = React$1.useMemo(() => {
     try {
       if (canvas && annotations.length) {
         const annotation = annotations[0];
@@ -1674,7 +2373,7 @@ function useImageService({ cacheKey } = {}) {
     return void 0;
   }, [key, cacheKey, canvas]);
   const data = status === "success" && _data ? _data : initialData;
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     (() => __async(this, null, function* () {
       try {
         if (canvas && annotations.length) {
@@ -1707,7 +2406,7 @@ function useImageService({ cacheKey } = {}) {
       }
     }))();
   }, [key, cacheKey]);
-  return React.useMemo(() => {
+  return React$1.useMemo(() => {
     return {
       data,
       isFetching,
@@ -1736,7 +2435,7 @@ function useRange(options = {}, deps = []) {
   const ctx = useResourceContext();
   const rangeId = id ? id : ctx.range;
   const range = useVaultSelector((s) => rangeId ? s.iiif.entities.Range[rangeId] : void 0, [rangeId]);
-  return React.useMemo(() => {
+  return React$1.useMemo(() => {
     if (!range) {
       return void 0;
     }
@@ -1754,16 +2453,20 @@ function useSearchService() {
 
 function useStyleHelper() {
   const vault = useVault();
-  return React.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
+  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;
@@ -1776,6 +2479,7 @@ exports.VisibleCanvasReactContext = VisibleCanvasReactContext;
 exports.emptyActions = emptyActions;
 exports.expandTarget = expandTarget;
 exports.flattenAnnotationPageIds = flattenAnnotationPageIds;
+exports.formatTime = formatTime;
 exports.getImageStrategy = getImageStrategy;
 exports.getPaintables = getPaintables;
 exports.parseSelector = parseSelector;
@@ -1800,6 +2504,9 @@ 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;
@@ -1808,6 +2515,7 @@ exports.useResourceContext = useResourceContext;
 exports.useResourceEvents = useResourceEvents;
 exports.useResources = useResources;
 exports.useSearchService = useSearchService;
+exports.useSimpleMediaPlayer = useSimpleMediaPlayer;
 exports.useSimpleViewer = useSimpleViewer;
 exports.useStyleHelper = useStyleHelper;
 exports.useStyles = useStyles;