react-iiif-vault 0.9.6 → 0.9.7

package/dist/cjs/index.js

@@ -4,27 +4,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var vault = require('@iiif/vault');
-var iiifImageApi = require('@atlas-viewer/iiif-image-api');
-var vaultHelpers = require('@iiif/vault-helpers');
+var atlas = require('@atlas-viewer/atlas');
 var typesafeActions = require('typesafe-actions');
+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 __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) => {
+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) => {
   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$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;
 };
@@ -42,43 +43,13 @@ const useResourceContext = () => {
 const ResourceProvider = ({ value, children }) => {
   const parentContext = useResourceContext();
   const newContext = React.useMemo(() => {
-    return __spreadValues$5(__spreadValues$5({}, parentContext), value);
+    return __spreadValues$8(__spreadValues$8({}, parentContext), value);
   }, [value, parentContext]);
   return /* @__PURE__ */ React__default["default"].createElement(ResourceReactContext.Provider, {
     value: newContext
   }, children);
 };
 
-const AnnotationContext = ({ annotation, children }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
-    value: { annotation }
-  }, children);
-};
-
-const CanvasContext = ({ canvas, children }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
-    value: { canvas }
-  }, children);
-};
-
-const CollectionContext = ({ collection, children }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
-    value: { collection }
-  }, children);
-};
-
-const ManifestContext = ({ manifest, children }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
-    value: { manifest }
-  }, children);
-};
-
-const RangeContext = ({ range, children }) => {
-  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
-    value: { range }
-  }, children);
-};
-
 const ReactVaultContext = React__default["default"].createContext({
   vault: null,
   setVaultInstance: (vault) => {
@@ -170,13 +141,23 @@ function useExternalManifest(idOrRef, options) {
   return { id, isLoaded, error, manifest: resource, requestId, cached };
 }
 
+const ManifestContext = ({ manifest, children }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
+    value: { manifest }
+  }, children);
+};
+
+const 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), (state) => {
-      setSelectedState(state);
-    }, false);
+    return vault.subscribe((s) => selector(s, vault), setSelectedState, false);
   }, deps);
   return selectedState;
 }
@@ -321,9 +302,237 @@ const ContextBridge = (props) => {
   }, props.children)));
 };
 
-const ImageServiceLoaderContext = React__default["default"].createContext(new iiifImageApi.ImageServiceLoader());
-function useImageServiceLoader() {
-  return React.useContext(ImageServiceLoaderContext);
+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.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.useRef([]);
+  const dispatch = useDispatch();
+  const virtualId = React.useMemo(() => {
+    return `vault://annotation-page/${new Date().getTime()}/${Math.round(Math.random() * 1e9).toString(16)}`;
+  }, []);
+  React.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.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.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.createContext(null);
+function useVirtualAnnotationPageContext() {
+  const ctx = React.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.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) => {
+  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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$7.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))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function Viewer(_a) {
+  var _b = _a, {
+    children
+  } = _b, props = __objRest(_b, [
+    "children"
+  ]);
+  const bridge = useContextBridge();
+  return /* @__PURE__ */ React__default["default"].createElement(atlas.AtlasAuto, __spreadValues$7({}, props), /* @__PURE__ */ React__default["default"].createElement(ContextBridge, {
+    bridge
+  }, /* @__PURE__ */ React__default["default"].createElement(VirtualAnnotationProvider, null, children)));
+}
+
+function useResourceEvents(resource, scope) {
+  const vault = useVault();
+  const helper = React.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 resource ? helper.getListenersAsProps(resource, scope) : {};
+  }, [hooks, resource, vault, scope]);
+}
+
+function useStyles(resource, scope) {
+  const vault = useVault();
+  const helper = React.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]+)?)/;
@@ -415,21 +624,21 @@ function parseSelector(source) {
   };
 }
 
-var __defProp$4 = Object.defineProperty;
+var __defProp$6 = Object.defineProperty;
 var __defProps$4 = Object.defineProperties;
 var __getOwnPropDescs$4 = 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) => {
+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$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$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;
 };
@@ -490,7 +699,7 @@ function expandTarget(target, options = {}) {
     if (!fragment) {
       return {
         type: "SpecificResource",
-        source: __spreadProps$4(__spreadValues$4({}, target), {
+        source: __spreadProps$4(__spreadValues$6({}, target), {
           id
         }),
         selector: null,
@@ -499,7 +708,7 @@ function expandTarget(target, options = {}) {
     }
     return expandTarget({
       type: "SpecificResource",
-      source: __spreadProps$4(__spreadValues$4({}, target), {
+      source: __spreadProps$4(__spreadValues$6({}, target), {
         id
       }),
       selector: {
@@ -516,6 +725,168 @@ 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) => {
+  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;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(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.useMemo(() => {
+    if (!annotation) {
+      return void 0;
+    }
+    const newAnnotation = __spreadProps$3(__spreadValues$5({}, 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.useMemo(() => {
+    if (!canvas) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(canvas);
+    }
+    return canvas;
+  }, [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) => {
+  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;
+};
+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.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({
+    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.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
+}) {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ React__default["default"].createElement(React.Fragment, {
+    key: id
+  }, !image.service ? /* @__PURE__ */ React__default["default"].createElement(React.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) : /* @__PURE__ */ React__default["default"].createElement(React.Fragment, {
+    key: "service"
+  }, /* @__PURE__ */ React__default["default"].createElement(TileSet, {
+    viewport: isStatic,
+    tiles: {
+      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));
+}
+
 function parseSpecificResource(resource) {
   if (resource.type === "SpecificResource") {
     return [resource.source, { selector: resource.selector }];
@@ -575,118 +946,6 @@ const unsupportedStrategy = (reason) => {
   return { type: "unknown", reason, annotations: { pages: [] } };
 };
 
-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;
-    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
-  };
-}
-
-var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = 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$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(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.useMemo(() => {
-    if (!annotation) {
-      return void 0;
-    }
-    const newAnnotation = __spreadProps$3(__spreadValues$3({}, annotation), {
-      body,
-      target: expandTarget(annotation.target, { typeMap: vault.getState().iiif.mapping })
-    });
-    if (selector) {
-      return selector(newAnnotation);
-    }
-    return newAnnotation;
-  }, [annotation, selector, body, ...deps]);
-}
-
 function useManifest(options = {}, deps = []) {
   const { id, selector } = options;
   const ctx = useResourceContext();
@@ -704,22 +963,6 @@ function useManifest(options = {}, deps = []) {
   }, [manifest, selector, ...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.useMemo(() => {
-    if (!canvas) {
-      return void 0;
-    }
-    if (selector) {
-      return selector(canvas);
-    }
-    return canvas;
-  }, [canvas, selector, ...deps]);
-}
-
 function getMeta$1(state, resourceId) {
   var _a;
   const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
@@ -781,21 +1024,21 @@ function flattenAnnotationPageIds({
   return foundIds;
 }
 
-var __defProp$2 = Object.defineProperty;
+var __defProp$3 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = 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 __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;
 };
@@ -830,7 +1073,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
       if (existingResources && !existingResources[resourceId]) {
         return existingResources;
       }
-      return __spreadProps$2(__spreadValues$2({}, existingResources || {}), {
+      return __spreadProps$2(__spreadValues$3({}, existingResources || {}), {
         [resourceId]: false
       });
     });
@@ -857,7 +1100,7 @@ function useAnnotationPageManager(resourceId, options = {}) {
       if (existingResources && existingResources[resourceId]) {
         return existingResources;
       }
-      return __spreadProps$2(__spreadValues$2({}, existingResources || {}), {
+      return __spreadProps$2(__spreadValues$3({}, existingResources || {}), {
         [resourceId]: true
       });
     });
@@ -870,186 +1113,94 @@ function useAnnotationPageManager(resourceId, options = {}) {
   };
 }
 
-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 useResources(ids, type) {
+  return useVaultSelector((state, vault) => vault.get(ids.map((id) => ({ id, type }))), [ids, type]);
 }
 
-function useAnnotationsAtTime(time, options = {}) {
-  const allAnnotations = usePaintingAnnotations(options);
-  return allAnnotations;
-}
-
-function useCanvasClock(canvasId, autoplay = false) {
+const ImageServiceLoaderContext = React__default["default"].createContext(new iiifImageApi.ImageServiceLoader());
+function useImageServiceLoader() {
+  return React.useContext(ImageServiceLoaderContext);
 }
 
-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.useMemo(() => {
-    if (!collection) {
-      return void 0;
-    }
-    if (selector) {
-      return selector(collection);
+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 collection;
-  }, [collection, selector, ...deps]);
-}
-
-function useDispatch() {
-  const vault = useVault();
-  const store = vault.getStore();
-  return React.useMemo(() => {
-    return (action) => store.dispatch(action);
-  }, [store]);
-}
-
-function useEventListener(resource, name, listener, scope, deps = []) {
-  const vault = useVault();
-  const helper = React.useMemo(() => vaultHelpers.createEventsHelper(vault), [vault]);
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+function useLoadImageService() {
+  const loader = useImageServiceLoader();
+  const [imageServiceStatus, setImageServiceStatus] = React.useState({});
+  const didUnmount = React.useRef(false);
   React.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.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);
-      }
+      didUnmount.current = true;
     };
-    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.useState(void 0);
-  const [isFetching, setIsFetching] = React.useState(false);
-  const [status, setStatus] = React.useState("idle");
-  const [error, setError] = React.useState(void 0);
-  const key = canvas ? canvas.id : "undefined";
-  const initialData = React.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;
+  }, []);
+  const loadImageService = React.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
+      });
+      if (syncLoaded) {
+        imageService = syncLoaded;
+      } else if (!imageServiceStatus[imageServiceId]) {
+        if (!didUnmount.current) {
+          setImageServiceStatus((r) => {
+            return __spreadProps$1(__spreadValues$2({}, r), {
+              [imageServiceId]: "loading"
+            });
+          });
         }
-        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.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);
+        loader.loadService({
+          id: imageServiceId,
+          width: imageService.width || width,
+          height: imageService.height || height
+        }).then(() => {
+          if (!didUnmount.current) {
+            setImageServiceStatus((r) => {
+              return __spreadProps$1(__spreadValues$2({}, r), {
+                [imageServiceId]: "done"
+              });
+            });
           }
-        }
-      } catch (err) {
-        setStatus("error");
-        setError(err);
+        });
       }
-    }))();
-  }, [key, cacheKey]);
-  return React.useMemo(() => {
-    return {
-      data,
-      isFetching,
-      status,
-      error
-    };
-  }, [data, isFetching, status, error]);
+    }
+    return imageService;
+  }, [loader, imageServiceStatus]);
+  return [loadImageService, imageServiceStatus];
 }
 
-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 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 = []) {
@@ -1096,60 +1247,149 @@ function usePaintables(options, deps = []) {
   return [paintables, actions];
 }
 
-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.useMemo(() => {
-    if (!range) {
-      return void 0;
+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");
     }
-    if (selector) {
-      return selector(range);
+    let imageService = void 0;
+    if (resource.service) {
+      const imageServices = iiifImageApi.getImageServices(resource);
+      if (imageServices[0]) {
+        imageService = loadImageService(imageServices[0], canvas);
+      }
     }
-    return range;
-  }, [range, selector, ...deps]);
-}
-
-function useResourceEvents(resource, scope) {
-  const vault = useVault();
-  const helper = React.useMemo(() => vaultHelpers.createEventsHelper(vault), [vault]);
-  const hooks = useVaultSelector(() => {
-    if (resource && resource.id) {
-      return vault.getResourceMeta(resource.id, "eventManager");
+    const { selector: imageTarget, source } = expandTarget(singleImage.target);
+    if (source.id !== canvas.id) {
+      continue;
     }
-    return null;
-  }, [resource]);
-  return React.useMemo(() => {
-    return resource ? helper.getListenersAsProps(resource, scope) : {};
-  }, [hooks, resource, vault, scope]);
-}
-
-function useResources(ids, type) {
-  return useVaultSelector((state, vault) => vault.get(ids.map((id) => ({ id, type }))), [ids, type]);
+    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;
+    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
+  };
 }
 
-function useSearchService() {
+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 useRenderingStrategy(options) {
   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.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
-}
-
-function useStyles(resource, scope) {
+  const canvas = useCanvas();
   const vault = useVault();
-  const helper = React.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
-  return useVaultSelector(() => {
-    if (!resource) {
-      return null;
+  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.useMemo(() => {
+    if (!canvas || paintables.types.length === 0) {
+      return unknownResponse;
     }
-    const styles = helper.getAppliedStyles(resource.id);
-    return styles ? scope ? styles[scope] : styles : void 0;
-  }, [resource, scope]);
+    if (paintables.types.length !== 1) {
+      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 === "audio") {
+      if (supports.indexOf("media") === -1) {
+        return unsupportedStrategy("Media not supported");
+      }
+      return unsupportedStrategy("Audio strategy not yet supported");
+    }
+    if (mainType === "video") {
+      if (supports.indexOf("media") === -1) {
+        return unsupportedStrategy("Media not supported");
+      }
+      return unsupportedStrategy("Video strategy not yet supported");
+    }
+    return unknownResponse;
+  }, [canvas, paintables, vault, actions.makeChoice]);
+  return React.useMemo(() => {
+    if (strategy.type === "unknown") {
+      return [strategy, emptyActions];
+    }
+    return [
+      __spreadProps(__spreadValues$1({}, strategy), {
+        annotations: { pages: enabledPages }
+      }),
+      actions
+    ];
+  }, [strategy, enabledPages]);
 }
 
 const useVaultEffect = (callback, deps = []) => {
@@ -1186,289 +1426,316 @@ function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
   return thumbnail;
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
+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$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.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;
 };
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-function useLoadImageService() {
-  const loader = useImageServiceLoader();
-  const [imageServiceStatus, setImageServiceStatus] = React.useState({});
-  const didUnmount = React.useRef(false);
+function RenderCanvas({ x, y, onChoiceChange, registerActions, defaultChoices, isStatic }) {
+  const canvas = useCanvas();
+  const elementProps = useResourceEvents(canvas, ["deep-zoom"]);
+  const [virtualPage] = useVirtualAnnotationPageContext();
+  const vault = useVault();
+  const helper = React.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
+  const [strategy, actions] = useRenderingStrategy({
+    strategies: ["images"],
+    defaultChoices: defaultChoices == null ? void 0 : defaultChoices.map(({ id }) => id)
+  });
+  const choice = strategy.type === "images" ? strategy.choice : void 0;
   React.useEffect(() => {
-    return () => {
-      didUnmount.current = true;
-    };
-  }, []);
-  const loadImageService = React.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
-      });
-      if (syncLoaded) {
-        imageService = syncLoaded;
-      } else if (!imageServiceStatus[imageServiceId]) {
-        if (!didUnmount.current) {
-          setImageServiceStatus((r) => {
-            return __spreadProps$1(__spreadValues$1({}, r), {
-              [imageServiceId]: "loading"
-            });
+    if (registerActions) {
+      registerActions(actions);
+    }
+  }, [strategy.annotations]);
+  React.useEffect(() => {
+    if (defaultChoices) {
+      for (const choice2 of defaultChoices) {
+        if (typeof choice2.opacity !== "undefined") {
+          helper.applyStyles({ id: choice2.id }, "atlas", {
+            opacity: choice2.opacity
           });
         }
-        loader.loadService({
-          id: imageServiceId,
-          width: imageService.width || width,
-          height: imageService.height || height
-        }).then(() => {
-          if (!didUnmount.current) {
-            setImageServiceStatus((r) => {
-              return __spreadProps$1(__spreadValues$1({}, r), {
-                [imageServiceId]: "done"
-              });
-            });
-          }
-        });
       }
     }
-    return imageService;
-  }, [loader, imageServiceStatus]);
-  return [loadImageService, imageServiceStatus];
+  }, [defaultChoices]);
+  React.useLayoutEffect(() => {
+    if (onChoiceChange) {
+      onChoiceChange(choice);
+    }
+  }, [choice]);
+  const thumbnail = useThumbnail({ maxWidth: 256, maxHeight: 256 });
+  if (!canvas) {
+    return 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");
+  }
+  const annotations = /* @__PURE__ */ React__default["default"].createElement(React.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({
+    key: strategy.type,
+    height: canvas.height,
+    width: canvas.width,
+    x,
+    y
+  }, elementProps), strategy.type === "images" ? 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
+    });
+  }) : null);
 }
 
-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 CanvasPanel = {
+  RenderImage,
+  RenderCanvas,
+  RenderAnnotationPage,
+  RenderAnnotation,
+  Viewer
+};
 
-const ADD_MAPPING = "@iiif/ADD_MAPPING";
-const ADD_MAPPINGS = "@iiif/ADD_MAPPINGS";
-typesafeActions.createAction(ADD_MAPPING)();
-typesafeActions.createAction(ADD_MAPPINGS)();
+const AnnotationContext = ({ annotation, children }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
+    value: { annotation }
+  }, children);
+};
 
-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 CollectionContext = ({ collection, children }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
+    value: { collection }
+  }, children);
+};
 
-const BATCH_ACTIONS = "@iiif/BATCH";
-const BATCH_IMPORT = "@iiif/BATCH_IMPORT";
-typesafeActions.createAction(BATCH_ACTIONS)();
-typesafeActions.createAction(BATCH_IMPORT)();
+const RangeContext = ({ range, children }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
+    value: { range }
+  }, children);
+};
 
-function isVaultActivated(obj) {
-  return typeof obj !== "string" && obj && obj.bindToVault;
+function useAnnotationsAtTime(time, options = {}) {
+  const allAnnotations = usePaintingAnnotations(options);
+  return allAnnotations;
 }
-function useVirtualAnnotationPage() {
+
+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.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 sources = React.useRef([]);
-  const dispatch = useDispatch();
-  const virtualId = React.useMemo(() => {
-    return `vault://annotation-page/${new Date().getTime()}/${Math.round(Math.random() * 1e9).toString(16)}`;
-  }, []);
-  React.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: []
+  const helper = React.useMemo(() => vaultHelpers.createEventsHelper(vault), [vault]);
+  React.useEffect(() => {
+    const currentResource = resource;
+    if (!currentResource) {
+      return () => {
+      };
+    }
+    helper.addEventListener(currentResource, name, listener, scope);
+    return () => {
+      helper.removeEventListener(currentResource, name, listener);
     };
-    dispatch(entityActions.importEntities({
-      entities: {
-        AnnotationPage: {
-          [page.id]: page
-        }
+  }, [helper, resource, name, ...deps]);
+}
+
+function useExistingVault() {
+  const oldContext = React.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);
       }
-    }));
-  }, [virtualId]);
-  const fullPage = useVaultSelector((state) => virtualId ? state.iiif.entities.AnnotationPage[virtualId] : null, [virtualId]);
-  const addAnnotation = React.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;
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
       }
-      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
-          }));
+    };
+    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.useState(void 0);
+  const [isFetching, setIsFetching] = React.useState(false);
+  const [status, setStatus] = React.useState("idle");
+  const [error, setError] = React.useState(void 0);
+  const key = canvas ? canvas.id : "undefined";
+  const initialData = React.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);
     }
-  }, [virtualId]);
-  const removeAnnotation = React.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"
+    return void 0;
+  }, [key, cacheKey, canvas]);
+  const data = status === "success" && _data ? _data : initialData;
+  React.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.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.useMemo(() => {
+    if (!range) {
+      return void 0;
     }
-  }, [virtualId]);
-  return [
-    fullPage,
-    {
-      addAnnotation,
-      removeAnnotation
+    if (selector) {
+      return selector(range);
     }
-  ];
+    return range;
+  }, [range, selector, ...deps]);
 }
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-function useRenderingStrategy(options) {
+function useSearchService() {
   const manifest = useManifest();
-  const canvas = useCanvas();
+  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();
-  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.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");
-      }
-      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 === "audio") {
-      if (supports.indexOf("media") === -1) {
-        return unsupportedStrategy("Media not supported");
-      }
-      return unsupportedStrategy("Audio strategy not yet supported");
-    }
-    if (mainType === "video") {
-      if (supports.indexOf("media") === -1) {
-        return unsupportedStrategy("Media not supported");
-      }
-      return unsupportedStrategy("Video strategy not yet supported");
-    }
-    return unknownResponse;
-  }, [canvas, paintables, vault, actions.makeChoice]);
-  return React.useMemo(() => {
-    if (strategy.type === "unknown") {
-      return [strategy, emptyActions];
-    }
-    return [
-      __spreadProps(__spreadValues({}, strategy), {
-        annotations: { pages: enabledPages }
-      }),
-      actions
-    ];
-  }, [strategy, enabledPages]);
+  return React.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
 }
 
 exports.AnnotationContext = AnnotationContext;
 exports.CanvasContext = CanvasContext;
+exports.CanvasPanel = CanvasPanel;
 exports.CollectionContext = CollectionContext;
 exports.ContextBridge = ContextBridge;
 exports.ImageServiceLoaderContext = ImageServiceLoaderContext;
@@ -1480,6 +1747,7 @@ exports.ResourceReactContext = ResourceReactContext;
 exports.SimpleViewerProvider = SimpleViewerProvider;
 exports.SimpleViewerReactContext = SimpleViewerReactContext;
 exports.VaultProvider = VaultProvider;
+exports.VirtualAnnotationProvider = VirtualAnnotationProvider;
 exports.VisibleCanvasReactContext = VisibleCanvasReactContext;
 exports.emptyActions = emptyActions;
 exports.expandTarget = expandTarget;
@@ -1524,4 +1792,5 @@ exports.useVault = useVault;
 exports.useVaultEffect = useVaultEffect;
 exports.useVaultSelector = useVaultSelector;
 exports.useVirtualAnnotationPage = useVirtualAnnotationPage;
+exports.useVirtualAnnotationPageContext = useVirtualAnnotationPageContext;
 exports.useVisibleCanvases = useVisibleCanvases;