react-iiif-vault 0.9.14 → 0.9.17

package/dist/react17/esm/index.mjs

@@ -0,0 +1,3198 @@
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React__default, { useContext, useMemo, useState, useEffect, useCallback, createContext, useRef, useLayoutEffect, Fragment, useReducer } from "react";
+import { AtlasAuto, mergeStyles, RegionHighlight, TileSet, HTMLPortal } from "@atlas-viewer/atlas";
+import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { globalVault, Vault } from "@iiif/vault";
+import { createAction } from "typesafe-actions";
+import require$$0 from "react-dom";
+import { expandTarget as expandTarget$1 } from "@iiif/vault-helpers";
+import { ImageServiceLoader, getImageServices, getFixedSizeFromImage } from "@atlas-viewer/iiif-image-api";
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf2(o2, p2) {
+    o2.__proto__ = p2;
+    return o2;
+  };
+  return _setPrototypeOf(o, p);
+}
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+var changedArray = function changedArray2(a, b) {
+  if (a === void 0) {
+    a = [];
+  }
+  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(ErrorBoundary2, _React$Component);
+  function ErrorBoundary2() {
+    var _this;
+    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
+      _args[_key] = arguments[_key];
+    }
+    _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;
+    _this.state = initialState;
+    _this.resetErrorBoundary = function() {
+      var _this$props;
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      _this.props.onReset == null ? void 0 : (_this$props = _this.props).onReset.apply(_this$props, args);
+      _this.reset();
+    };
+    return _this;
+  }
+  ErrorBoundary2.getDerivedStateFromError = function getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  };
+  var _proto = ErrorBoundary2.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;
+    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,
+        resetErrorBoundary: this.resetErrorBoundary
+      };
+      if (/* @__PURE__ */ React.isValidElement(fallback)) {
+        return fallback;
+      } else if (typeof fallbackRender === "function") {
+        return fallbackRender(_props);
+      } else if (FallbackComponent) {
+        return /* @__PURE__ */ React.createElement(FallbackComponent, _props);
+      } else {
+        throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
+      }
+    }
+    return this.props.children;
+  };
+  return ErrorBoundary2;
+}(React.Component);
+const defaultResourceContext = {
+  collection: void 0,
+  manifest: void 0,
+  range: void 0,
+  canvas: void 0,
+  annotation: void 0,
+  annotationPage: void 0
+};
+const ResourceReactContext = React__default.createContext(defaultResourceContext);
+const useResourceContext = () => {
+  return useContext(ResourceReactContext);
+};
+function ResourceProvider({
+  value,
+  children
+}) {
+  const parentContext = useResourceContext();
+  const newContext = useMemo(() => {
+    return __spreadValues(__spreadValues({}, parentContext), value);
+  }, [value, parentContext]);
+  return /* @__PURE__ */ jsx(ResourceReactContext.Provider, {
+    value: newContext,
+    children
+  });
+}
+const ReactVaultContext = React__default.createContext({
+  vault: null,
+  setVaultInstance: (vault) => {
+  }
+});
+function VaultProvider({
+  vault,
+  vaultOptions,
+  useGlobal,
+  resources,
+  children
+}) {
+  const [vaultInstance, setVaultInstance] = useState(() => {
+    if (vault) {
+      return vault;
+    }
+    if (useGlobal) {
+      return globalVault(vaultOptions);
+    }
+    if (vaultOptions) {
+      return new Vault(vaultOptions);
+    }
+    return new Vault();
+  });
+  return /* @__PURE__ */ jsx(ReactVaultContext.Provider, {
+    value: {
+      vault: vaultInstance,
+      setVaultInstance
+    },
+    children: /* @__PURE__ */ jsx(ResourceProvider, {
+      value: resources || {},
+      children
+    })
+  });
+}
+const useVault = () => {
+  const { vault } = useContext(ReactVaultContext);
+  if (vault === null) {
+    throw new Error("Vault not found. Ensure you have your provider set up correctly.");
+  }
+  return vault;
+};
+function useExternalResource(idOrRef, { noCache = false } = {}) {
+  const id = typeof idOrRef === "string" ? idOrRef : idOrRef.id;
+  const vault = useVault();
+  const [realId, setRealId] = useState(id);
+  const [error, setError] = useState(void 0);
+  const initialData = useMemo(() => {
+    return vault.get(id, { skipSelfReturn: true }) || void 0;
+  }, [id, vault]);
+  const [resource, setResource] = useState(initialData);
+  useEffect(() => {
+    (async () => {
+      try {
+        const fetchedResource = initialData && !noCache ? initialData : await vault.load(id);
+        const _realId = fetchedResource ? fetchedResource.id || fetchedResource["@id"] : null;
+        if (fetchedResource && realId !== _realId) {
+          setRealId(_realId);
+        }
+        setResource(fetchedResource);
+      } catch (err) {
+        setError(err);
+      }
+    })();
+  }, [id, noCache]);
+  return {
+    isLoaded: !!resource,
+    id: realId,
+    requestId: id,
+    error,
+    resource,
+    cached: !!(resource && resource === initialData)
+  };
+}
+function useExternalManifest(idOrRef, options) {
+  const { id, isLoaded, error, resource, requestId, cached } = useExternalResource(idOrRef, options);
+  return { id, isLoaded, error, manifest: resource, requestId, cached };
+}
+function ManifestContext({
+  manifest,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      manifest
+    },
+    children
+  });
+}
+function CanvasContext({
+  canvas,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      canvas
+    },
+    children
+  });
+}
+function useVaultSelector(selector, deps = []) {
+  const vault = useVault();
+  const [selectedState, setSelectedState] = useState(() => selector(vault.getState(), vault));
+  useEffect(() => {
+    return vault.subscribe((s) => selector(s, vault), (s) => {
+      setSelectedState(s);
+    }, false);
+  }, deps);
+  return selectedState;
+}
+const VisibleCanvasReactContext = React__default.createContext([]);
+function useVisibleCanvases() {
+  const ids = useContext(VisibleCanvasReactContext);
+  return useVaultSelector((state) => {
+    return ids.map((id) => state.iiif.entities.Canvas[id]).filter(Boolean);
+  }, [ids]);
+}
+function useManifest(options = {}, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  useVault();
+  const manifestId = id ? id : ctx.manifest;
+  const manifest = useVaultSelector((s) => manifestId ? s.iiif.entities.Manifest[manifestId] : void 0, [manifestId]);
+  return useMemo(() => {
+    if (!manifest) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(manifest);
+    }
+    return manifest;
+  }, [manifest, selector, ...deps]);
+}
+function RangeContext({
+  range,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      range
+    },
+    children
+  });
+}
+function findFirstCanvasFromRange(vault, range) {
+  for (const inner of range.items) {
+    if (inner.type === "Canvas") {
+      return inner;
+    }
+    if (inner.type === "Range") {
+      const found = findFirstCanvasFromRange(vault, vault.get(inner));
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+function findAllCanvasesInRange(vault, range) {
+  const found = [];
+  for (const inner of range.items) {
+    if (inner.type === "Canvas") {
+      if (inner.id.indexOf("#") !== -1) {
+        found.push({ id: inner.id.split("#")[0], type: "Canvas" });
+      } else {
+        found.push(inner);
+      }
+    }
+    if (inner.type === "Range") {
+      found.push(...findAllCanvasesInRange(vault, vault.get(inner)));
+    }
+    if (inner.type === "SpecificResource") {
+      const sourceId = typeof inner.source === "string" ? inner.source : inner.source.id;
+      found.push({ id: sourceId, type: "Canvas" });
+    }
+  }
+  return found;
+}
+function findManifestSelectedRange(vault, manifest, canvasId) {
+  for (const range of manifest.structures) {
+    const found = findSelectedRange(vault, vault.get(range), canvasId);
+    if (found) {
+      return found;
+    }
+  }
+  return null;
+}
+function findSelectedRange(vault, range, canvasId) {
+  var _a;
+  for (const inner of range.items) {
+    const parsedId = (_a = inner.id) == null ? void 0 : _a.split("#")[0];
+    if (inner.type === "SpecificResource" && inner.source === canvasId) {
+      return range;
+    }
+    if (inner.type === "Canvas" && canvasId === parsedId) {
+      return range;
+    }
+    if (inner.type === "Range") {
+      const found = findSelectedRange(vault, vault.get(inner), canvasId);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+function getVisibleCanvasesFromCanvasId(vault, manifestOrRange, canvasId, preventPaged = false) {
+  const behavior = manifestOrRange.behavior;
+  const fullCanvas = canvasId ? vault.get(canvasId) : null;
+  if (!fullCanvas) {
+    return [];
+  }
+  const canvasBehavior = fullCanvas.behavior;
+  const isPaged = preventPaged ? false : behavior.includes("paged");
+  const isContinuous = isPaged ? false : behavior.includes("continuous");
+  const isIndividuals = isPaged || isContinuous ? false : behavior.includes("individuals");
+  const isCanvasFacingPages = canvasBehavior.includes("facing-pages");
+  const isCanvasNonPaged = canvasBehavior.includes("non-paged");
+  if (isCanvasFacingPages || isCanvasNonPaged || isIndividuals || preventPaged) {
+    return [{ id: fullCanvas.id, type: "Canvas" }];
+  }
+  const [manifestItems, ordering] = getManifestSequence(vault, manifestOrRange);
+  if (isContinuous) {
+    return manifestItems;
+  }
+  const canvasIndex = manifestItems.findIndex((r) => r.id === canvasId);
+  if (canvasIndex === -1) {
+    return [];
+  }
+  for (const indexes of ordering) {
+    if (indexes.includes(canvasIndex)) {
+      return indexes.map((index) => manifestItems[index]);
+    }
+  }
+  return [{ id: fullCanvas.id, type: "Canvas" }];
+}
+function getManifestSequence(vault, manifestOrRange, { disablePaging } = {}) {
+  const behavior = manifestOrRange.behavior;
+  const isPaged = behavior.includes("paged");
+  const isContinuous = isPaged ? false : behavior.includes("continuous");
+  const isIndividuals = isPaged || isContinuous ? false : behavior.includes("individuals");
+  const manifestItems = manifestOrRange.type === "Manifest" ? manifestOrRange.items : findAllCanvasesInRange(vault, manifestOrRange);
+  if (isContinuous) {
+    return [manifestItems, [manifestItems.map((_, index) => index)]];
+  }
+  if (isIndividuals || !isPaged || disablePaging) {
+    return [manifestItems, manifestItems.map((_, index) => [index])];
+  }
+  const ordering = [];
+  let currentOrdering = [];
+  const flush = () => {
+    if (currentOrdering.length) {
+      ordering.push([...currentOrdering]);
+      currentOrdering = [];
+    }
+  };
+  for (let i = 0; i < manifestItems.length; i++) {
+    const canvas = vault.get(manifestItems[i]);
+    if (i === 0 || canvas.behavior.includes("facing-pages")) {
+      flush();
+      ordering.push([i]);
+      continue;
+    }
+    if (canvas.behavior.includes("non-paged")) {
+      continue;
+    }
+    currentOrdering.push(i);
+    if (currentOrdering.length > 1) {
+      flush();
+    }
+  }
+  if (currentOrdering.length) {
+    flush();
+  }
+  return [manifestItems, ordering];
+}
+function useRange(options = {}, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  const rangeId = id ? id : ctx.range;
+  const range = useVaultSelector((s) => rangeId ? s.iiif.entities.Range[rangeId] : void 0, [rangeId]);
+  return useMemo(() => {
+    if (!range) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(range);
+    }
+    return range;
+  }, [range, selector, ...deps]);
+}
+function useCanvasSequence({ startCanvas, disablePaging }) {
+  var _a;
+  const vault = useVault();
+  const manifest = useManifest();
+  const range = useRange();
+  const [cursor, setCursor] = useState(void 0);
+  const rangeOrManifest = range ? range : manifest;
+  if (!rangeOrManifest) {
+    throw new Error("Nothing selected");
+  }
+  const [items, initialSequence] = useMemo(() => getManifestSequence(vault, rangeOrManifest, { disablePaging }), [vault, rangeOrManifest]);
+  const setCanvasIndex = useCallback((index) => {
+    const foundSequence = initialSequence.findIndex((i) => i.includes(index));
+    setCursor(foundSequence === -1 ? 0 : foundSequence);
+  }, [items, initialSequence]);
+  const setCanvasId = useCallback((id) => {
+    const foundIndex = items.findIndex((i) => i.id === id);
+    if (foundIndex !== -1) {
+      setCanvasIndex(foundIndex);
+    } else {
+      setCursor(0);
+    }
+  }, [items, initialSequence]);
+  const next = useCallback(() => {
+    setCursor((i) => {
+      if (i >= initialSequence.length) {
+        return i;
+      }
+      return i + 1;
+    });
+  }, [initialSequence]);
+  const previous = useCallback(() => {
+    setCursor((i) => {
+      if (i <= 0) {
+        return 0;
+      }
+      return i - 1;
+    });
+  }, [initialSequence]);
+  if (typeof cursor === "undefined") {
+    if (startCanvas) {
+      setCanvasId(startCanvas);
+    } else {
+      setCursor(0);
+    }
+  }
+  return {
+    visibleItems: ((_a = initialSequence[cursor]) == null ? void 0 : _a.map((idx) => items[idx].id)) || [],
+    cursor,
+    items,
+    sequence: initialSequence,
+    setSequenceIndex: setCursor,
+    setCanvasIndex,
+    setCanvasId,
+    next,
+    previous
+  };
+}
+const noop = () => {
+};
+const SimpleViewerReactContext = createContext({
+  setCurrentCanvasId: noop,
+  setCurrentCanvasIndex: noop,
+  nextCanvas: noop,
+  previousCanvas: noop,
+  items: [],
+  sequence: [],
+  setSequenceIndex: noop,
+  currentSequenceIndex: 0
+});
+function InnerViewerProvider(props) {
+  const manifest = useManifest();
+  const {
+    cursor,
+    visibleItems,
+    next,
+    sequence,
+    items,
+    setCanvasIndex,
+    setCanvasId,
+    previous,
+    setSequenceIndex
+  } = useCanvasSequence({
+    startCanvas: props.startCanvas,
+    disablePaging: props.pagingEnabled === false
+  });
+  const ctx = useMemo(() => ({
+    sequence,
+    items,
+    setCurrentCanvasId: setCanvasId,
+    nextCanvas: next,
+    previousCanvas: previous,
+    totalCanvases: items.length,
+    setCurrentCanvasIndex: setCanvasIndex,
+    setSequenceIndex,
+    currentSequenceIndex: cursor
+  }), [sequence, items, setCanvasId, next, previous, items, setCanvasIndex, setSequenceIndex, cursor]);
+  if (!manifest) {
+    console.warn("The manifest passed to the provider is not a valid IIIF manifest.");
+    return /* @__PURE__ */ jsx("div", {
+      children: "Sorry, something went wrong."
+    });
+  }
+  return /* @__PURE__ */ jsx(SimpleViewerReactContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(VisibleCanvasReactContext.Provider, {
+      value: visibleItems,
+      children: /* @__PURE__ */ jsx(CanvasContext, {
+        canvas: visibleItems[0],
+        children: props.children
+      })
+    })
+  });
+}
+function SimpleViewerProvider(props) {
+  const manifest = useExternalManifest(props.manifest);
+  if (!manifest) {
+    console.warn("The manifest passed to the provider is not a valid IIIF manifest.");
+    return /* @__PURE__ */ jsx("div", {
+      children: "Sorry, something went wrong."
+    });
+  }
+  if (!manifest.isLoaded) {
+    return /* @__PURE__ */ jsx("div", {
+      children: "Loading..."
+    });
+  }
+  const inner = /* @__PURE__ */ jsx(InnerViewerProvider, __spreadProps(__spreadValues({}, props), {
+    children: props.children
+  }));
+  return /* @__PURE__ */ jsx(ManifestContext, {
+    manifest: manifest.id,
+    children: props.rangeId ? /* @__PURE__ */ jsx(RangeContext, {
+      range: props.rangeId,
+      children: inner
+    }) : inner
+  });
+}
+function useSimpleViewer() {
+  return useContext(SimpleViewerReactContext);
+}
+function useContextBridge() {
+  return {
+    VaultContext: useContext(ReactVaultContext),
+    ResourceContext: useContext(ResourceReactContext),
+    SimpleViewerReactContext: useContext(SimpleViewerReactContext),
+    VisibleCanvasReactContext: useContext(VisibleCanvasReactContext)
+  };
+}
+function ContextBridge(props) {
+  return /* @__PURE__ */ jsx(VaultProvider, {
+    vault: props.bridge.VaultContext.vault || void 0,
+    resources: props.bridge.ResourceContext,
+    children: /* @__PURE__ */ jsx(VisibleCanvasReactContext.Provider, {
+      value: props.bridge.VisibleCanvasReactContext,
+      children: /* @__PURE__ */ jsx(SimpleViewerReactContext.Provider, {
+        value: props.bridge.SimpleViewerReactContext,
+        children: props.children
+      })
+    })
+  });
+}
+const IMPORT_ENTITIES = "@iiif/IMPORT_ENTITIES";
+const MODIFY_ENTITY_FIELD = "@iiif/MODIFY_ENTITY_FIELD";
+const REORDER_ENTITY_FIELD = "@iiif/REORDER_ENTITY_FIELD";
+const ADD_REFERENCE = "@iiif/ADD_REFERENCE";
+const REMOVE_REFERENCE = "@iiif/REMOVE_REFERENCE";
+const importEntities = createAction(IMPORT_ENTITIES)();
+const modifyEntityField = createAction(MODIFY_ENTITY_FIELD)();
+const reorderEntityField = createAction(REORDER_ENTITY_FIELD)();
+const addReference = createAction(ADD_REFERENCE)();
+const removeReference = createAction(REMOVE_REFERENCE)();
+const entityActions = { importEntities, modifyEntityField, reorderEntityField, addReference, removeReference };
+const ADD_MAPPING = "@iiif/ADD_MAPPING";
+const ADD_MAPPINGS = "@iiif/ADD_MAPPINGS";
+createAction(ADD_MAPPING)();
+createAction(ADD_MAPPINGS)();
+const SET_META_VALUE = "@iiif/SET_META_VALUE";
+const SET_META_VALUE_DYNAMIC = "@iiif/SET_META_VALUE_DYNAMIC";
+const UNSET_META_VALUE = "@iiif/UNSET_META_VALUE";
+createAction(SET_META_VALUE)();
+createAction(SET_META_VALUE_DYNAMIC)();
+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";
+createAction(REQUEST_RESOURCE)();
+createAction(REQUEST_ERROR)();
+createAction(REQUEST_MISMATCH)();
+createAction(REQUEST_COMPLETE)();
+createAction(REQUEST_OFFLINE_RESOURCE)();
+const BATCH_ACTIONS = "@iiif/BATCH";
+const BATCH_IMPORT = "@iiif/BATCH_IMPORT";
+createAction(BATCH_ACTIONS)();
+createAction(BATCH_IMPORT)();
+function useDispatch() {
+  const vault = useVault();
+  const store = vault.getStore();
+  return useMemo(() => {
+    return (action) => store.dispatch(action);
+  }, [store]);
+}
+function isVaultActivated(obj) {
+  return typeof obj !== "string" && obj && obj.bindToVault;
+}
+function useVirtualAnnotationPage() {
+  const vault = useVault();
+  const sources = useRef([]);
+  const dispatch = useDispatch();
+  const virtualId = useMemo(() => {
+    return `vault://annotation-page/${new Date().getTime()}/${Math.round(Math.random() * 1e9).toString(16)}`;
+  }, []);
+  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 = 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 = 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 = createContext(null);
+function useVirtualAnnotationPageContext() {
+  const ctx = useContext(VirtualAnnotationPageContext);
+  return [ctx.fullPage, {
+    addAnnotation: ctx.addAnnotation,
+    removeAnnotation: ctx.removeAnnotation
+  }];
+}
+function VirtualAnnotationProvider({
+  children
+}) {
+  const [fullPage, {
+    addAnnotation,
+    removeAnnotation
+  }] = useVirtualAnnotationPage();
+  return /* @__PURE__ */ jsx(VirtualAnnotationPageContext.Provider, {
+    value: useMemo(() => ({
+      fullPage,
+      addAnnotation,
+      removeAnnotation
+    }), [fullPage]),
+    children
+  });
+}
+function DefaultCanvasFallback({
+  width,
+  style,
+  height
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    style: __spreadProps(__spreadValues({
+      width,
+      height,
+      minHeight: 500
+    }, style || {}), {
+      background: "#f9f9f9"
+    }),
+    children: "Unknown error"
+  });
+}
+const ViewerPresetContext = createContext(null);
+function useViewerPreset() {
+  return useContext(ViewerPresetContext);
+}
+const PortalContext = React__default.createContext(null);
+const OverlayPortalContext = React__default.createContext(null);
+function CanvasPortal({
+  children,
+  overlay
+}) {
+  const htmlElement = useContext(overlay ? OverlayPortalContext : PortalContext);
+  const preset = useViewerPreset();
+  useLayoutEffect(() => {
+    if (htmlElement) {
+      try {
+        htmlElement.render(/* @__PURE__ */ jsx(ViewerPresetContext.Provider, {
+          value: preset,
+          children
+        }));
+      } catch (e) {
+      }
+    }
+  }, [children, preset]);
+  return null;
+}
+var createRoot;
+var m = require$$0;
+{
+  createRoot = m.createRoot;
+}
+function Viewer(_a) {
+  var _b = _a, {
+    children,
+    errorFallback,
+    outerContainerProps = {}
+  } = _b, props = __objRest(_b, [
+    "children",
+    "errorFallback",
+    "outerContainerProps"
+  ]);
+  const portal = useRef(null);
+  const [portalElement, setPortalElement] = useState();
+  const [viewerPreset, setViewerPreset] = useState();
+  const overlayPortal = useRef(null);
+  const [overlayPortalElement, setOverlayPortalElement] = useState();
+  const bridge = useContextBridge();
+  const ErrorFallback = errorFallback || DefaultCanvasFallback;
+  useLayoutEffect(() => {
+    const roots = {};
+    if (portal.current) {
+      const $el = document.createElement("div");
+      portal.current.appendChild($el);
+      roots.portal = createRoot($el);
+      setPortalElement(roots.portal);
+    }
+    if (overlayPortal.current) {
+      const $el = document.createElement("div");
+      overlayPortal.current.appendChild($el);
+      roots.overlayPortal = createRoot($el);
+      setOverlayPortalElement(roots.overlayPortal);
+    }
+    return () => {
+      setPortalElement(null);
+      setOverlayPortalElement(null);
+      setTimeout(() => {
+        if (roots.portal) {
+          roots.portal.unmount();
+        }
+        if (roots.overlayPortal) {
+          roots.overlayPortal.unmount();
+        }
+      }, 0);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(ErrorBoundary, {
+    fallbackRender: () => /* @__PURE__ */ jsx(ErrorFallback, __spreadValues({}, props)),
+    children: [/* @__PURE__ */ jsx(AtlasAuto, __spreadProps(__spreadValues({}, props), {
+      containerProps: __spreadValues({
+        style: {
+          position: "relative"
+        }
+      }, props.containerProps || {}),
+      htmlChildren: /* @__PURE__ */ jsx("div", {
+        ref: overlayPortal
+      }),
+      onCreated: (preset) => {
+        setViewerPreset(preset);
+        if (props.onCreated) {
+          props.onCreated(preset);
+        }
+      },
+      children: /* @__PURE__ */ jsx(ViewerPresetContext.Provider, {
+        value: viewerPreset,
+        children: /* @__PURE__ */ jsx(PortalContext.Provider, {
+          value: portalElement,
+          children: /* @__PURE__ */ jsx(OverlayPortalContext.Provider, {
+            value: overlayPortalElement,
+            children: /* @__PURE__ */ jsx(ContextBridge, {
+              bridge,
+              children: /* @__PURE__ */ jsx(VirtualAnnotationProvider, {
+                children
+              })
+            })
+          })
+        })
+      })
+    })), /* @__PURE__ */ jsx("div", {
+      ref: portal
+    })]
+  });
+}
+function createEventsHelper(vault) {
+  return {
+    addEventListener(resource, event, listener, scope) {
+      if (!resource) {
+        return;
+      }
+      vault.setMetaValue([resource.id, "eventManager", event], (registeredCallbacks) => {
+        const callbacks = registeredCallbacks || [];
+        for (const registered of callbacks) {
+          if (registered.callback === listener) {
+            return callbacks;
+          }
+        }
+        return [...callbacks, { callback: listener, scope }];
+      });
+      return listener;
+    },
+    removeEventListener(resource, event, listener) {
+      if (!resource) {
+        return;
+      }
+      vault.setMetaValue([resource.id, "eventManager", event], (registeredCallbacks) => {
+        return (registeredCallbacks || []).filter((registeredCallback) => registeredCallback.callback !== listener);
+      });
+    },
+    getListenersAsProps(resourceOrId, scope) {
+      const resource = typeof resourceOrId === "string" ? { id: resourceOrId } : resourceOrId;
+      if (!resource || !resource.id) {
+        return {};
+      }
+      const hooks = vault.getResourceMeta(resource.id, "eventManager");
+      const props = {};
+      if (hooks && resource) {
+        for (const hook of Object.keys(hooks)) {
+          props[hook] = (e) => {
+            const fullResource = vault.get(resource);
+            for (const { callback, scope: _scope } of hooks[hook] || []) {
+              if (!_scope || scope && _scope.indexOf(scope) !== -1) {
+                callback(e, fullResource);
+              }
+            }
+          };
+        }
+      }
+      return props;
+    }
+  };
+}
+function useResourceEvents(resource, scope) {
+  const vault = useVault();
+  const helper = useMemo(() => createEventsHelper(vault), [vault]);
+  const hooks = useVaultSelector(() => {
+    if (resource && resource.id) {
+      return vault.getResourceMeta(resource.id, "eventManager");
+    }
+    return null;
+  }, [resource]);
+  return useMemo(() => {
+    return resource ? helper.getListenersAsProps(resource, scope) : {};
+  }, [hooks, resource, vault, scope]);
+}
+function createStylesHelper(vault) {
+  return {
+    applyStyles(resource, scope, styles) {
+      const id = typeof resource === "string" ? resource : resource.id;
+      return vault.setMetaValue([id, "styles", scope], styles);
+    },
+    getAppliedStyles(resource) {
+      const id = typeof resource === "string" ? resource : resource.id;
+      return vault.getResourceMeta(id, "styles");
+    }
+  };
+}
+function useStyles(resource, scope) {
+  const vault = useVault();
+  const helper = useMemo(() => createStylesHelper(vault), [vault]);
+  return useVaultSelector(() => {
+    if (!resource) {
+      return null;
+    }
+    const styles = helper.getAppliedStyles(resource.id);
+    return styles ? scope ? styles[scope] : styles : void 0;
+  }, [resource, scope]);
+}
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__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$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const BOX_SELECTOR = /&?(xywh=)?(pixel:|percent:|pct:)?([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?)/;
+const TEMPORAL_SELECTOR = /&?(t=)(npt:)?([0-9]+(.[0-9]+)?)?(,([0-9]+(.[0-9]+)?))?/;
+function parseSelector(source) {
+  if (Array.isArray(source)) {
+    return source.reduce((data, nextSource) => {
+      const { selector, selectors } = parseSelector(nextSource);
+      if (selector) {
+        if (!data.selector) {
+          data.selector = selector;
+        }
+        data.selectors.push(...selectors);
+      }
+      return data;
+    }, {
+      selector: null,
+      selectors: []
+    });
+  }
+  if (!source) {
+    return {
+      selector: null,
+      selectors: []
+    };
+  }
+  if (typeof source === "string") {
+    const [id, fragment] = source.split("#");
+    if (!fragment) {
+      return {
+        selector: null,
+        selectors: []
+      };
+    }
+    return parseSelector({ type: "FragmentSelector", value: fragment });
+  }
+  if (source.type === "PointSelector" && (source.t || source.t === 0)) {
+    const selector = {
+      type: "TemporalSelector",
+      temporal: {
+        startTime: source.t
+      }
+    };
+    return {
+      selector,
+      selectors: [selector]
+    };
+  }
+  if (source.type === "FragmentSelector") {
+    const matchBoxSelector = BOX_SELECTOR.exec(source.value);
+    if (matchBoxSelector) {
+      const selector = {
+        type: "BoxSelector",
+        spatial: {
+          unit: matchBoxSelector[2] === "percent:" || matchBoxSelector[2] === "pct:" ? "percent" : "pixel",
+          x: parseFloat(matchBoxSelector[3]),
+          y: parseFloat(matchBoxSelector[4]),
+          width: parseFloat(matchBoxSelector[5]),
+          height: parseFloat(matchBoxSelector[6])
+        }
+      };
+      return {
+        selector,
+        selectors: [selector]
+      };
+    }
+    const matchTimeSelector = source.value.match(TEMPORAL_SELECTOR);
+    if (matchTimeSelector) {
+      const selector = {
+        type: "TemporalSelector",
+        temporal: {
+          startTime: matchTimeSelector[4] ? parseFloat(matchTimeSelector[4]) : 0,
+          endTime: matchTimeSelector[7] ? parseFloat(matchTimeSelector[7]) : void 0
+        }
+      };
+      return {
+        selector,
+        selectors: [selector]
+      };
+    }
+    return {
+      selector: null,
+      selectors: []
+    };
+  }
+  return {
+    selector: null,
+    selectors: []
+  };
+}
+function expandTarget(target, options = {}) {
+  if (Array.isArray(target)) {
+    return expandTarget(target[0]);
+  }
+  if (typeof target === "string") {
+    const [id, fragment] = target.split("#");
+    if (!fragment) {
+      return {
+        type: "SpecificResource",
+        source: { id, type: options.typeMap && options.typeMap[id] || "Unknown" },
+        selector: null,
+        selectors: []
+      };
+    }
+    return expandTarget({
+      type: "SpecificResource",
+      source: { id, type: "Unknown" },
+      selector: {
+        type: "FragmentSelector",
+        value: fragment
+      }
+    });
+  }
+  if (target.type === "Choice" || target.type === "List" || target.type === "Composite" || target.type === "Independents") {
+    return expandTarget(target.items[0]);
+  }
+  if (target.type === "SpecificResource") {
+    if (target.source.type === "Canvas" && target.source.partOf && typeof target.source.partOf === "string") {
+      target.source.partOf = [
+        {
+          id: target.source.partOf,
+          type: "Manifest"
+        }
+      ];
+    }
+    const { selector, selectors } = target.selector ? parseSelector(target.selector) : { selector: null, selectors: [] };
+    return {
+      type: "SpecificResource",
+      source: target.source,
+      selector,
+      selectors
+    };
+  }
+  if (target.id) {
+    if (target.type === "Canvas" && target.partOf && typeof target.partOf === "string") {
+      target.partOf = [
+        {
+          id: target.partOf,
+          type: "Manifest"
+        }
+      ];
+    }
+    const [id, fragment] = target.id.split("#");
+    if (!fragment) {
+      return {
+        type: "SpecificResource",
+        source: __spreadProps$1(__spreadValues$1({}, target), {
+          id
+        }),
+        selector: null,
+        selectors: []
+      };
+    }
+    return expandTarget({
+      type: "SpecificResource",
+      source: __spreadProps$1(__spreadValues$1({}, target), {
+        id
+      }),
+      selector: {
+        type: "FragmentSelector",
+        value: fragment
+      }
+    });
+  }
+  return {
+    type: "SpecificResource",
+    source: target,
+    selector: null,
+    selectors: []
+  };
+}
+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 useMemo(() => {
+    if (!annotation) {
+      return void 0;
+    }
+    const newAnnotation = __spreadProps(__spreadValues({}, 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 useMemo(() => {
+    if (!canvas) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(canvas);
+    }
+    return canvas;
+  }, [canvas, selector, ...deps]);
+}
+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 = useMemo(() => {
+    return 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__ */ jsx(RegionHighlight, __spreadValues({
+    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__ */ jsx(Fragment, {
+    children: (_a = page.items) == null ? void 0 : _a.map((annotation) => {
+      return /* @__PURE__ */ jsx(RenderAnnotation, {
+        id: annotation.id,
+        style,
+        className: (html == null ? void 0 : html.className) || className
+      }, annotation.id);
+    })
+  });
+};
+function RenderImage({
+  id,
+  image,
+  thumbnail,
+  isStatic,
+  x = 0,
+  y = 0,
+  children,
+  onClick
+}) {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: !image.service ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("world-image", {
+        onClick,
+        uri: image.id,
+        target: image.target.spatial,
+        display: image.width && image.height ? {
+          width: image.width,
+          height: image.height
+        } : void 0
+      }), children]
+    }, "no-service") : /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(TileSet, {
+        tiles: {
+          id: image.service.id || image.service["@id"] || "unknown",
+          height: image.height,
+          width: image.width,
+          imageService: image.service,
+          thumbnail: thumbnail && thumbnail.type === "fixed" ? thumbnail : void 0
+        },
+        x: ((_a = image.target) == null ? void 0 : _a.spatial.x) + x,
+        y: ((_b = image.target) == null ? void 0 : _b.spatial.y) + y,
+        width: (_c = image.target) == null ? void 0 : _c.spatial.width,
+        height: (_d = image.target) == null ? void 0 : _d.spatial.height,
+        onClick
+      }), children]
+    }, "service")
+  }, id);
+}
+function parseSpecificResource(resource) {
+  if (resource.type === "SpecificResource") {
+    return [resource.source, { selector: resource.selector }];
+  }
+  return [resource, { selector: null }];
+}
+function getPaintables(vault, paintingAnnotations, enabledChoices) {
+  const types = [];
+  let choice = null;
+  const items = [];
+  for (const annotation of paintingAnnotations) {
+    const bodies = vault.get(annotation.body);
+    for (const unknownBody of bodies) {
+      const [body, { selector }] = parseSpecificResource(unknownBody);
+      const type = (body.type || "unknown").toLowerCase();
+      if (type === "choice") {
+        const nestedBodies = vault.get(body.items);
+        const selected = enabledChoices.length ? enabledChoices.map((cid) => nestedBodies.find((b) => b.id === cid)).filter(Boolean) : [nestedBodies[0]];
+        if (selected.length === 0) {
+          selected.push(nestedBodies[0]);
+        }
+        choice = {
+          type: "single-choice",
+          items: nestedBodies.map((b) => ({
+            id: b.id,
+            label: b.label,
+            selected: selected.indexOf(b) !== -1
+          })),
+          label: unknownBody.label
+        };
+        bodies.push(...selected);
+        continue;
+      }
+      if (types.indexOf(type) === -1) {
+        types.push(type);
+      }
+      items.push({
+        annotationId: annotation.id,
+        type,
+        resource: body,
+        target: annotation.target,
+        selector
+      });
+    }
+  }
+  return {
+    types,
+    items,
+    choice
+  };
+}
+function getParsedTargetSelector(canvas, target) {
+  const { selector: imageTarget, source } = expandTarget$1(target);
+  if (source.id !== canvas.id) {
+    return [null, source];
+  }
+  const defaultTarget = {
+    type: "BoxSelector",
+    spatial: {
+      x: 0,
+      y: 0,
+      width: canvas.width,
+      height: canvas.height
+    }
+  };
+  return [
+    imageTarget ? imageTarget.type === "TemporalSelector" ? {
+      type: "TemporalBoxSelector",
+      temporal: imageTarget.temporal,
+      spatial: defaultTarget.spatial
+    } : imageTarget : null,
+    source
+  ];
+}
+const emptyActions = {
+  makeChoice: () => {
+  }
+};
+const unknownResponse = { type: "unknown" };
+const unsupportedStrategy = (reason) => {
+  return { type: "unknown", reason, annotations: { pages: [] } };
+};
+const emptyStrategy = (width, height) => {
+  return { type: "empty", width, height, annotations: { pages: [] }, image: null, images: [] };
+};
+function getMeta$1(state, resourceId) {
+  var _a;
+  const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
+  if (!resourceMeta) {
+    return null;
+  }
+  return resourceMeta.annotationPageManager;
+}
+function useEnabledAnnotationPageIds(resourceId, availablePageIds) {
+  return useVaultSelector((state) => {
+    const pageIds = [];
+    if (!resourceId) {
+      return pageIds;
+    }
+    const allAnnotationListIds = Object.keys(state.iiif.entities.AnnotationPage);
+    for (const annotationListId of allAnnotationListIds) {
+      if (!availablePageIds || availablePageIds.indexOf(annotationListId) !== -1) {
+        const annotationListMeta = getMeta$1(state, annotationListId);
+        if (annotationListMeta && annotationListMeta.views && annotationListMeta.views[resourceId]) {
+          pageIds.push(annotationListId);
+        }
+      }
+    }
+    return pageIds;
+  }, [resourceId, availablePageIds]);
+}
+function flattenAnnotationPageIds({
+  canvas,
+  manifest,
+  all,
+  canvases
+}) {
+  const foundIds = [];
+  if (manifest) {
+    for (const page of manifest.annotations) {
+      if (foundIds.indexOf(page.id) === -1) {
+        foundIds.push(page.id);
+      }
+    }
+  }
+  if (all) {
+    if (canvases && canvases.length) {
+      for (const canvas_ of canvases) {
+        for (const page of canvas_.annotations) {
+          if (foundIds.indexOf(page.id) === -1) {
+            foundIds.push(page.id);
+          }
+        }
+      }
+    }
+  } else if (canvas) {
+    for (const page of canvas.annotations) {
+      if (foundIds.indexOf(page.id) === -1) {
+        foundIds.push(page.id);
+      }
+    }
+  }
+  return foundIds;
+}
+function getMeta(state, resourceId) {
+  var _a;
+  const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
+  if (!resourceMeta) {
+    return null;
+  }
+  return resourceMeta.annotationPageManager;
+}
+function useAnnotationPageManager(resourceId, options = {}) {
+  const vault = useVault();
+  const manifest = useManifest();
+  const canvas = useCanvas();
+  const canvases = useVisibleCanvases();
+  const availablePageIds = useMemo(() => {
+    return flattenAnnotationPageIds({
+      all: options.all,
+      manifest,
+      canvas,
+      canvases
+    });
+  }, [options.all, canvas, canvases, manifest]);
+  const enabledPageIds = useEnabledAnnotationPageIds(resourceId, options.all ? void 0 : availablePageIds);
+  const setPageDisabled = useCallback((deselectId) => {
+    if (!resourceId) {
+      return;
+    }
+    vault.setMetaValue([deselectId, "annotationPageManager", "views"], (existingResources) => {
+      if (existingResources && !existingResources[resourceId]) {
+        return existingResources;
+      }
+      return __spreadProps(__spreadValues({}, existingResources || {}), {
+        [resourceId]: false
+      });
+    });
+  }, [resourceId, vault]);
+  const setPageEnabled = useCallback((id, opt = {}) => {
+    if (!resourceId) {
+      return;
+    }
+    const state = vault.getState();
+    const toDeselect = [];
+    if (opt == null ? void 0 : opt.deselectOthers) {
+      const allAnnotationListIds = Object.keys(state.iiif.entities.AnnotationPage);
+      for (const annotationPageId of allAnnotationListIds) {
+        const annotationListMeta = getMeta(state, annotationPageId);
+        if (annotationListMeta && annotationListMeta.views && annotationListMeta.views[resourceId]) {
+          toDeselect.push(annotationPageId);
+        }
+      }
+    }
+    for (const deselectId of toDeselect) {
+      setPageDisabled(deselectId);
+    }
+    vault.setMetaValue([id, "annotationPageManager", "views"], (existingResources) => {
+      if (existingResources && existingResources[resourceId]) {
+        return existingResources;
+      }
+      return __spreadProps(__spreadValues({}, existingResources || {}), {
+        [resourceId]: true
+      });
+    });
+  }, [resourceId, setPageDisabled, vault]);
+  return {
+    availablePageIds,
+    enabledPageIds,
+    setPageEnabled,
+    setPageDisabled
+  };
+}
+function useResources(ids, type) {
+  return useVaultSelector((state, vault) => vault.get(ids.map((id) => ({ id, type }))), [ids, type]);
+}
+const ImageServiceLoaderContext = React__default.createContext(new ImageServiceLoader());
+function useImageServiceLoader() {
+  return useContext(ImageServiceLoaderContext);
+}
+function useLoadImageService() {
+  const loader = useImageServiceLoader();
+  const [imageServiceStatus, setImageServiceStatus] = useState({});
+  const didUnmount = useRef(false);
+  useEffect(() => {
+    return () => {
+      didUnmount.current = true;
+    };
+  }, []);
+  const loadImageService = useCallback((imageService, { height, width }) => {
+    if (imageService) {
+      const imageServiceId = imageService.id || imageService["@id"];
+      const syncLoaded = loader.loadServiceSync({
+        id: imageServiceId,
+        width: imageService.width || width,
+        height: imageService.height || height,
+        source: imageService
+      });
+      if (syncLoaded) {
+        imageService = syncLoaded;
+      } else if (!imageServiceStatus[imageServiceId]) {
+        if (!didUnmount.current) {
+          setImageServiceStatus((r) => {
+            return __spreadProps(__spreadValues({}, r), {
+              [imageServiceId]: "loading"
+            });
+          });
+        }
+        loader.loadService({
+          id: imageServiceId,
+          width: imageService.width || width,
+          height: imageService.height || height
+        }).then(() => {
+          if (!didUnmount.current) {
+            setImageServiceStatus((r) => {
+              return __spreadProps(__spreadValues({}, r), {
+                [imageServiceId]: "done"
+              });
+            });
+          }
+        });
+      }
+    }
+    return imageService;
+  }, [loader, imageServiceStatus]);
+  return [loadImageService, imageServiceStatus];
+}
+function usePaintingAnnotations(options = {}) {
+  const canvas = useCanvas(options.canvasId ? { id: options.canvasId } : void 0);
+  return useVaultSelector((state, vault) => {
+    if (!canvas) {
+      return [];
+    }
+    const annotationPages = vault.get(canvas.items);
+    const flatAnnotations = [];
+    for (const page of annotationPages) {
+      flatAnnotations.push(...vault.get(page.items));
+    }
+    return flatAnnotations;
+  }, [canvas]);
+}
+function usePaintables(options, deps = []) {
+  const vault = useVault();
+  const paintingAnnotations = usePaintingAnnotations();
+  const [enabledChoices, setEnabledChoices] = useState((options == null ? void 0 : options.defaultChoices) || []);
+  const paintables = useMemo(() => getPaintables(vault, paintingAnnotations, enabledChoices), [vault, paintingAnnotations, enabledChoices, ...deps]);
+  const makeChoice = useCallback((id, { deselectOthers = true, deselect = false } = {}) => {
+    if (paintables.choice) {
+      if (paintables.choice.type !== "single-choice") {
+        throw new Error("Complex choice not supported yet");
+      }
+      setEnabledChoices((prevChoices) => {
+        if (deselect) {
+          const without = prevChoices.filter((e) => e !== id);
+          if (without.length === 0) {
+            const defaultId = paintables.items[0].resource.id;
+            if (defaultId) {
+              return [defaultId];
+            } else {
+              return [];
+            }
+          }
+          return without;
+        }
+        if (deselectOthers) {
+          return [id];
+        }
+        const newChoices = [...prevChoices];
+        if (newChoices.length === 0 && paintables.items.length) {
+          const defaultId = paintables.items[0].resource.id;
+          if (defaultId) {
+            newChoices.push(defaultId);
+          }
+        }
+        if (prevChoices.indexOf(id) !== -1) {
+          return prevChoices;
+        }
+        return [...prevChoices, id];
+      });
+    }
+  }, [paintables.choice]);
+  const actions = { makeChoice };
+  return [paintables, actions];
+}
+function getImageStrategy(canvas, paintables, loadImageService) {
+  const imageTypes = [];
+  for (const singleImage of paintables.items) {
+    const resource = singleImage.resource && singleImage.resource.type === "SpecificResource" ? singleImage.resource.source : singleImage.resource;
+    if (!resource.id) {
+      return unsupportedStrategy("No resource Identifier");
+    }
+    let imageService = void 0;
+    if (resource.service) {
+      const imageServices = getImageServices(resource);
+      if (imageServices[0]) {
+        imageService = loadImageService(imageServices[0], canvas);
+      }
+    }
+    const defaultTarget = {
+      type: "BoxSelector",
+      spatial: {
+        x: 0,
+        y: 0,
+        width: canvas.width,
+        height: canvas.height
+      }
+    };
+    const [target, source] = getParsedTargetSelector(canvas, singleImage.target);
+    if (source.id !== canvas.id) {
+      continue;
+    }
+    const defaultImageSelector = {
+      type: "BoxSelector",
+      spatial: {
+        x: 0,
+        y: 0,
+        width: canvas.width,
+        height: canvas.height
+      }
+    };
+    const imageSelector = singleImage.resource.type === "SpecificResource" ? expandTarget(singleImage.resource) : null;
+    const selector = imageSelector && imageSelector.selector && (imageSelector.selector.type === "BoxSelector" || imageSelector.selector.type === "TemporalBoxSelector") ? {
+      type: "BoxSelector",
+      spatial: {
+        x: imageSelector.selector.spatial.x,
+        y: imageSelector.selector.spatial.y,
+        width: imageSelector.selector.spatial.width,
+        height: imageSelector.selector.spatial.height
+      }
+    } : defaultImageSelector;
+    if (imageService && !imageService.id) {
+      imageService.id = imageService["@id"];
+    }
+    const imageType = {
+      id: resource.id,
+      type: "Image",
+      annotationId: singleImage.annotationId,
+      width: target ? resource.width : canvas.width,
+      height: target ? resource.height : canvas.height,
+      service: imageService,
+      sizes: imageService && imageService.sizes ? imageService.sizes : resource.width && resource.height ? [{ width: resource.width, height: resource.height }] : [],
+      target: target && target.type !== "PointSelector" ? target : defaultTarget,
+      selector
+    };
+    imageTypes.push(imageType);
+  }
+  return {
+    type: "images",
+    image: imageTypes[0],
+    images: imageTypes,
+    choice: paintables.choice
+  };
+}
+const supportedFormats = ["model/gltf-binary"];
+function get3dStrategy(canvas, paintables) {
+  const first = paintables.items[0];
+  const resource = first.resource;
+  if (!resource.format) {
+    return unsupportedStrategy("Unknown format");
+  }
+  if (supportedFormats.indexOf(resource.format) === -1) {
+    return unsupportedStrategy(`3D format: ${resource.format} is unsupported`);
+  }
+  return {
+    type: "3d-model",
+    model: resource
+  };
+}
+function getAudioStrategy(canvas, paintables) {
+  var _a;
+  if (!canvas.duration) {
+    return unsupportedStrategy("No duration on canvas");
+  }
+  if (paintables.items.length > 1) {
+    return unsupportedStrategy("Only one audio source supported");
+  }
+  const audioResource = (_a = paintables.items[0]) == null ? void 0 : _a.resource;
+  if (!audioResource) {
+    return unsupportedStrategy("Unknown audio");
+  }
+  if (!audioResource.format) {
+    return unsupportedStrategy("Audio does not have format");
+  }
+  return {
+    type: "media",
+    media: {
+      annotationId: paintables.items[0].annotationId,
+      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: {
+      annotationId: paintables.items[0].annotationId,
+      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: []
+    }
+  };
+}
+function parseType(item, languageMap = {}, lang) {
+  const language = item.language || lang || "none";
+  switch (item.type) {
+    case "TextualBody": {
+      if (typeof item.value !== "undefined") {
+        languageMap[language] = item.value;
+      }
+      break;
+    }
+    case "List":
+    case "Composite":
+    case "Choice": {
+      if (item.items) {
+        item.items.forEach((inner) => parseType(inner, languageMap, language));
+      }
+    }
+  }
+  return languageMap;
+}
+function getTextualContentStrategy(canvas, paintables) {
+  const items = [];
+  paintables.items.forEach((item) => {
+    if (item.resource) {
+      const [target] = getParsedTargetSelector(canvas, item.target);
+      items.push({ annotationId: item.annotationId, text: parseType(item.resource), target });
+    }
+  });
+  return {
+    type: "textual-content",
+    items
+  };
+}
+function useRenderingStrategy(options) {
+  const manifest = useManifest();
+  const canvas = useCanvas();
+  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) || [
+    "empty",
+    "images",
+    "media",
+    "textual-content",
+    "complex-timeline"
+  ];
+  const [paintables, actions] = usePaintables(options, [imageServiceStatus]);
+  const strategy = useMemo(() => {
+    if (!canvas) {
+      return unknownResponse;
+    }
+    if (paintables.types.length === 0) {
+      if (supports.indexOf("empty") !== -1) {
+        return emptyStrategy(canvas.width, canvas.height);
+      }
+      return unknownResponse;
+    }
+    if (paintables.types.length !== 1) {
+      if (paintables.types.length === 2 && paintables.types.indexOf("text") !== -1) {
+        paintables.types = paintables.types.filter((t) => t !== "text");
+      } else {
+        if (supports.indexOf("complex-timeline") === -1) {
+          return unsupportedStrategy("Complex timeline not supported");
+        }
+        return unsupportedStrategy("ComplexTimelineStrategy not yet supported");
+      }
+    }
+    const mainType = paintables.types[0];
+    if (mainType === "image") {
+      if (supports.indexOf("images") === -1) {
+        return unsupportedStrategy("Image not supported");
+      }
+      return getImageStrategy(canvas, paintables, loadImageService);
+    }
+    if (mainType === "Model" || mainType === "model") {
+      if (supports.indexOf("3d-model") === -1) {
+        return unsupportedStrategy("3D not supported");
+      }
+      return get3dStrategy(canvas, paintables);
+    }
+    if (mainType === "textualbody") {
+      if (supports.indexOf("textual-content") === -1) {
+        return unsupportedStrategy("Textual content not supported");
+      }
+      return getTextualContentStrategy(canvas, paintables);
+    }
+    if (mainType === "sound" || mainType === "audio") {
+      if (supports.indexOf("media") === -1) {
+        return unsupportedStrategy("Media not supported");
+      }
+      return getAudioStrategy(canvas, paintables);
+    }
+    if (mainType === "video") {
+      if (supports.indexOf("media") === -1) {
+        return unsupportedStrategy("Media not supported");
+      }
+      return getVideoStrategy(canvas, paintables);
+    }
+    return unknownResponse;
+  }, [canvas, paintables, vault, actions.makeChoice]);
+  return useMemo(() => {
+    if (strategy.type === "unknown") {
+      return [strategy, emptyActions];
+    }
+    return [
+      __spreadProps(__spreadValues({}, strategy), {
+        annotations: { pages: enabledPages }
+      }),
+      actions
+    ];
+  }, [strategy, enabledPages]);
+}
+const useVaultEffect = (callback, deps = []) => {
+  const vault = useVault();
+  useEffect(() => {
+    callback(vault);
+  }, [vault, ...deps]);
+};
+function createThumbnailHelper(vault, dependencies = {}) {
+  const imageServiceLoader = dependencies.imageServiceLoader || new ImageServiceLoader();
+  async function getBestThumbnailAtSize(input, request, dereference, candidates = [], dimensions) {
+    if (typeof input === "string") {
+      return { best: getFixedSizeFromImage(input), fallback: [], log: [] };
+    }
+    const fullInput = vault.get(input);
+    if (typeof fullInput === "string") {
+      return { best: getFixedSizeFromImage(fullInput), fallback: [], log: [] };
+    }
+    switch (fullInput.type) {
+      case "Annotation": {
+        const contentResources = fullInput.body;
+        const firstContentResources = vault.get(contentResources[0]);
+        if (dimensions && !firstContentResources.width) {
+          firstContentResources.width = dimensions.width;
+          firstContentResources.height = dimensions.height;
+        }
+        return await imageServiceLoader.getThumbnailFromResource(firstContentResources, request, dereference, candidates);
+      }
+      case "Canvas": {
+        const canvas = fullInput;
+        if (canvas.thumbnail && canvas.thumbnail.length) {
+          const thumbnail = vault.get(canvas.thumbnail[0]);
+          const potentialThumbnails = await imageServiceLoader.getImageCandidates(thumbnail, dereference);
+          if (potentialThumbnails && potentialThumbnails.length) {
+            candidates.push(...potentialThumbnails);
+          }
+        }
+        return getBestThumbnailAtSize(canvas.items[0], request, dereference, candidates, {
+          width: canvas.width,
+          height: canvas.height
+        });
+      }
+      case "AnnotationPage": {
+        const annotationPage = fullInput;
+        return getBestThumbnailAtSize(annotationPage.items[0], request, dereference, candidates, dimensions);
+      }
+      case "Choice": {
+        const choice = fullInput;
+        return getBestThumbnailAtSize(choice.items[0], request, dereference, candidates, dimensions);
+      }
+      case "Collection": {
+        const collection = fullInput;
+        const firstManifest = collection.items[0];
+        return getBestThumbnailAtSize(firstManifest, request, dereference, candidates, dimensions);
+      }
+      case "Manifest": {
+        const manifest = fullInput;
+        const firstCanvas = manifest.items[0];
+        return getBestThumbnailAtSize(firstCanvas, request, dereference, candidates, dimensions);
+      }
+      case "SpecificResource":
+      case "Image":
+      case "Dataset":
+      case "Sound":
+      case "Text":
+      case "TextualBody":
+      case "Video":
+        if (dimensions && !fullInput.width) {
+          fullInput.width = dimensions.width;
+          fullInput.height = dimensions.height;
+        }
+        return imageServiceLoader.getThumbnailFromResource(fullInput, request, dereference, candidates);
+      case "Service":
+      case "Range":
+      case "AnnotationCollection":
+      case "CanvasReference":
+      case "ContentResource":
+        return { best: void 0, fallback: [], log: [] };
+    }
+    return { best: void 0, fallback: [], log: [] };
+  }
+  return {
+    getBestThumbnailAtSize
+  };
+}
+function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
+  const vault = useVault();
+  const loader = useImageServiceLoader();
+  const helper = useMemo(() => createThumbnailHelper(vault, { imageServiceLoader: loader }), [vault, loader]);
+  const [thumbnail, setThumbnail] = useState();
+  const manifest = useManifest(manifestId ? { id: manifestId } : void 0);
+  const canvas = useCanvas(canvasId ? { id: canvasId } : void 0);
+  const subject = canvas ? canvas : manifest;
+  const didUnmount = useRef(false);
+  useEffect(() => {
+    didUnmount.current = false;
+    return () => {
+      didUnmount.current = true;
+    };
+  }, []);
+  if (!subject) {
+    throw new Error("Must be called under a manifest or canvas context.");
+  }
+  useVaultEffect((v) => {
+    helper.getBestThumbnailAtSize(subject, request, dereference).then((thumb) => {
+      if (thumb.best && !didUnmount.current) {
+        setThumbnail(thumb.best);
+      }
+    });
+  }, [subject]);
+  return thumbnail;
+}
+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({}, state), { isFinished: true, isPlaying: false, playRequested: false });
+    case "PLAY_PAUSE":
+      return __spreadProps(__spreadValues({}, state), { isFinished: false, isPlaying: !state.isPlaying });
+    case "PLAY_REQUESTED":
+      return __spreadProps(__spreadValues({}, state), { isFinished: false, playRequested: true });
+    case "PAUSE":
+      return __spreadProps(__spreadValues({}, state), { isPlaying: false });
+    case "PLAY":
+      return __spreadProps(__spreadValues({}, state), { isFinished: false, playRequested: false, isPlaying: true });
+    case "MUTE":
+      return __spreadProps(__spreadValues({}, state), { isMuted: true });
+    case "SET_VOLUME":
+      return __spreadProps(__spreadValues({}, state), { volume: action.volume, isMuted: action.volume === 0 });
+    case "TOGGLE_MUTE":
+      return __spreadProps(__spreadValues({}, state), { isMuted: !state.isMuted });
+    case "UNMUTE":
+      return __spreadProps(__spreadValues({}, 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] = useReducer(reducer, getDefaultState(props.duration));
+  const media = useRef(null);
+  const currentTime = useRef(null);
+  const progress = useRef(null);
+  const _isMuted = useRef(false);
+  const _updateCurrentTime = 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 = useCallback(() => {
+    if (media.current) {
+      dispatch({ type: "PLAY_REQUESTED" });
+      media.current.play().then(() => {
+        dispatch({ type: "PLAY" });
+      });
+      _updateCurrentTime();
+    }
+  }, [_updateCurrentTime]);
+  const playPause = useCallback(() => {
+    if (media.current) {
+      if (media.current.duration > 0 && media.current.paused) {
+        play();
+      } else {
+        pause();
+      }
+    }
+  }, [_updateCurrentTime]);
+  const pause = useCallback(() => {
+    if (media.current) {
+      media.current.pause();
+      dispatch({ type: "PAUSE" });
+      _updateCurrentTime();
+    }
+  }, [_updateCurrentTime]);
+  const toggleMute = useCallback(() => {
+    if (media.current) {
+      media.current.muted = !media.current.muted;
+      dispatch(media.current.muted ? { type: "MUTE" } : { type: "UNMUTE" });
+    }
+  }, []);
+  const mute = useCallback(() => {
+    if (media.current) {
+      media.current.muted = true;
+      dispatch({ type: "MUTE" });
+    }
+  }, []);
+  const unmute = useCallback(() => {
+    if (media.current) {
+      media.current.muted = false;
+      dispatch({ type: "UNMUTE" });
+    }
+  }, []);
+  const setVolume = useCallback((newVolume) => {
+    if (media.current) {
+      media.current.muted = false;
+      media.current.volume = newVolume / 100;
+      dispatch({ type: "SET_VOLUME", volume: newVolume });
+    }
+  }, []);
+  const setDurationPercent = useCallback((percent) => {
+    if (media.current) {
+      media.current.currentTime = Math.max(0, Math.min(percent * props.duration, props.duration));
+      _updateCurrentTime();
+    }
+  }, []);
+  const setTime = useCallback((time) => {
+    if (media.current) {
+      media.current.currentTime = Math.max(0, Math.min(time, props.duration));
+      _updateCurrentTime();
+    }
+  }, []);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      _updateCurrentTime();
+    }, 350);
+    return () => clearInterval(interval);
+  }, [_updateCurrentTime, props.duration]);
+  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 = createContext(null);
+const MediaReactContextActions = createContext(null);
+const MediaReactContextElements = createContext(null);
+function useMediaState() {
+  const ctx = useContext(MediaReactContextState);
+  if (!ctx) {
+    throw new Error("Ctx not found");
+  }
+  return ctx;
+}
+function useMediaActions() {
+  const ctx = useContext(MediaReactContextActions);
+  if (!ctx) {
+    throw new Error("Ctx not found");
+  }
+  return ctx;
+}
+function useMediaElements() {
+  const ctx = useContext(MediaReactContextElements);
+  if (!ctx) {
+    throw new Error("Ctx not found");
+  }
+  return ctx;
+}
+function MediaPlayerProvider({
+  actions,
+  state,
+  children,
+  currentTime,
+  progress,
+  element
+}) {
+  return /* @__PURE__ */ jsx(MediaReactContextElements.Provider, {
+    value: {
+      currentTime,
+      progress,
+      element
+    },
+    children: /* @__PURE__ */ jsx(MediaReactContextActions.Provider, {
+      value: actions,
+      children: /* @__PURE__ */ jsx(MediaReactContextState.Provider, {
+        value: state,
+        children
+      })
+    })
+  });
+}
+function Audio({
+  media,
+  children
+}) {
+  const [{
+    element,
+    currentTime,
+    progress
+  }, state, actions] = useSimpleMediaPlayer({
+    duration: media.duration
+  });
+  return /* @__PURE__ */ jsx(Fragment$1, {
+    children: /* @__PURE__ */ jsx(CanvasPortal, {
+      children: /* @__PURE__ */ jsxs(MediaPlayerProvider, {
+        state,
+        actions,
+        currentTime,
+        progress,
+        element,
+        children: [/* @__PURE__ */ jsx("audio", {
+          ref: element,
+          src: media.url
+        }), children]
+      })
+    })
+  });
+}
+function Video({
+  media,
+  children
+}) {
+  const [{
+    element,
+    currentTime,
+    progress
+  }, state, actions] = useSimpleMediaPlayer({
+    duration: media.duration
+  });
+  const Component = "div";
+  return /* @__PURE__ */ jsxs(Fragment$1, {
+    children: [/* @__PURE__ */ jsxs(CanvasPortal, {
+      overlay: true,
+      children: [/* @__PURE__ */ jsx("style", {
+        children: `
+            .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__ */ jsx(Component, {
+        className: "video-container",
+        part: "video-container",
+        onClick: () => actions.playPause(),
+        children: /* @__PURE__ */ jsx("video", {
+          ref: element,
+          src: media.url,
+          style: {
+            width: "100%",
+            objectFit: "contain"
+          }
+        })
+      })]
+    }), /* @__PURE__ */ jsx(CanvasPortal, {
+      children: /* @__PURE__ */ jsx(MediaPlayerProvider, {
+        state,
+        actions,
+        currentTime,
+        progress,
+        element,
+        children
+      })
+    })]
+  });
+}
+function Model({
+  model
+}) {
+  return /* @__PURE__ */ jsxs(CanvasPortal, {
+    overlay: true,
+    children: [/* @__PURE__ */ jsx("style", {
+      children: `
+            .model-container {
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              background: #000;
+              z-index: 13;
+              display: flex;
+              justify-content: center;
+              pointer-events: visible;
+            }
+          `
+    }), /* @__PURE__ */ jsx("div", {
+      className: "model-container",
+      children: /* @__PURE__ */ jsx("model-viewer", {
+        "interaction-prompt": "none",
+        style: {
+          width: "100%",
+          height: "100%"
+        },
+        "camera-controls": "",
+        "ar-status": "not-presenting",
+        src: model.id
+      })
+    })]
+  });
+}
+function CanvasBackground({
+  style
+}) {
+  const canvas = useCanvas();
+  if (!canvas || !canvas.height || !canvas.width) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("box", {
+    interactive: false,
+    target: {
+      x: 0,
+      y: 0,
+      width: canvas.width,
+      height: canvas.height
+    },
+    style
+  });
+}
+var __defProp2 = Object.defineProperty;
+var __defProps2 = Object.defineProperties;
+var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
+var __objRest2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum2.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor)
+      descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps)
+    _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps)
+    _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+var defaultOptions = {
+  bindI18n: "languageChanged",
+  bindI18nStore: "",
+  transEmptyNodeValue: "",
+  transSupportBasicHtmlNodes: true,
+  transWrapTextNodes: "",
+  transKeepBasicHtmlNodesFor: ["br", "strong", "i", "p"],
+  useSuspense: true
+};
+var i18nInstance;
+var I18nContext = React__default.createContext();
+function getDefaults() {
+  return defaultOptions;
+}
+var ReportNamespaces = function() {
+  function ReportNamespaces2() {
+    _classCallCheck(this, ReportNamespaces2);
+    this.usedNamespaces = {};
+  }
+  _createClass(ReportNamespaces2, [{
+    key: "addUsedNamespaces",
+    value: function addUsedNamespaces(namespaces) {
+      var _this = this;
+      namespaces.forEach(function(ns) {
+        if (!_this.usedNamespaces[ns])
+          _this.usedNamespaces[ns] = true;
+      });
+    }
+  }, {
+    key: "getUsedNamespaces",
+    value: function getUsedNamespaces() {
+      return Object.keys(this.usedNamespaces);
+    }
+  }]);
+  return ReportNamespaces2;
+}();
+function getI18n() {
+  return i18nInstance;
+}
+function warn() {
+  if (console && console.warn) {
+    var _console;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (typeof args[0] === "string")
+      args[0] = "react-i18next:: ".concat(args[0]);
+    (_console = console).warn.apply(_console, args);
+  }
+}
+var alreadyWarned = {};
+function warnOnce() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  if (typeof args[0] === "string" && alreadyWarned[args[0]])
+    return;
+  if (typeof args[0] === "string")
+    alreadyWarned[args[0]] = new Date();
+  warn.apply(void 0, args);
+}
+function loadNamespaces(i18n, ns, cb) {
+  i18n.loadNamespaces(ns, function() {
+    if (i18n.isInitialized) {
+      cb();
+    } else {
+      var initialized = function initialized2() {
+        setTimeout(function() {
+          i18n.off("initialized", initialized2);
+        }, 0);
+        cb();
+      };
+      i18n.on("initialized", initialized);
+    }
+  });
+}
+function hasLoadedNamespace(ns, i18n) {
+  var options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  if (!i18n.languages || !i18n.languages.length) {
+    warnOnce("i18n.languages were undefined or empty", i18n.languages);
+    return true;
+  }
+  var lng = i18n.languages[0];
+  var fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
+  var lastLng = i18n.languages[i18n.languages.length - 1];
+  if (lng.toLowerCase() === "cimode")
+    return true;
+  var loadNotPending = function loadNotPending2(l, n) {
+    var loadState = i18n.services.backendConnector.state["".concat(l, "|").concat(n)];
+    return loadState === -1 || loadState === 2;
+  };
+  if (options.bindI18n && options.bindI18n.indexOf("languageChanging") > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns))
+    return false;
+  if (i18n.hasResourceBundle(lng, ns))
+    return true;
+  if (!i18n.services.backendConnector.backend)
+    return true;
+  if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns)))
+    return true;
+  return false;
+}
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr))
+    return arr;
+}
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i == null)
+    return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _s, _e;
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+      if (i && _arr.length === i)
+        break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null)
+        _i["return"]();
+    } finally {
+      if (_d)
+        throw _e;
+    }
+  }
+  return _arr;
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length)
+    len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o)
+    return;
+  if (typeof o === "string")
+    return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor)
+    n = o.constructor.name;
+  if (n === "Map" || n === "Set")
+    return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+    return _arrayLikeToArray(o, minLen);
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function(key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+  return target;
+}
+function useTranslation(ns) {
+  var props = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  var i18nFromProps = props.i18n;
+  var _ref = useContext(I18nContext) || {}, i18nFromContext = _ref.i18n, defaultNSFromContext = _ref.defaultNS;
+  var i18n = i18nFromProps || i18nFromContext || getI18n();
+  if (i18n && !i18n.reportNamespaces)
+    i18n.reportNamespaces = new ReportNamespaces();
+  if (!i18n) {
+    warnOnce("You will need to pass in an i18next instance by using initReactI18next");
+    var notReadyT = function notReadyT2(k) {
+      return Array.isArray(k) ? k[k.length - 1] : k;
+    };
+    var retNotReady = [notReadyT, {}, false];
+    retNotReady.t = notReadyT;
+    retNotReady.i18n = {};
+    retNotReady.ready = false;
+    return retNotReady;
+  }
+  if (i18n.options.react && i18n.options.react.wait !== void 0)
+    warnOnce("It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
+  var i18nOptions = _objectSpread(_objectSpread(_objectSpread({}, getDefaults()), i18n.options.react), props);
+  var useSuspense = i18nOptions.useSuspense, keyPrefix = i18nOptions.keyPrefix;
+  var namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === "string" ? [namespaces] : namespaces || ["translation"];
+  if (i18n.reportNamespaces.addUsedNamespaces)
+    i18n.reportNamespaces.addUsedNamespaces(namespaces);
+  var ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(function(n) {
+    return hasLoadedNamespace(n, i18n, i18nOptions);
+  });
+  function getT() {
+    return i18n.getFixedT(null, i18nOptions.nsMode === "fallback" ? namespaces : namespaces[0], keyPrefix);
+  }
+  var _useState = useState(getT), _useState2 = _slicedToArray(_useState, 2), t = _useState2[0], setT = _useState2[1];
+  var isMounted = useRef(true);
+  useEffect(function() {
+    var bindI18n = i18nOptions.bindI18n, bindI18nStore = i18nOptions.bindI18nStore;
+    isMounted.current = true;
+    if (!ready && !useSuspense) {
+      loadNamespaces(i18n, namespaces, function() {
+        if (isMounted.current)
+          setT(getT);
+      });
+    }
+    function boundReset() {
+      if (isMounted.current)
+        setT(getT);
+    }
+    if (bindI18n && i18n)
+      i18n.on(bindI18n, boundReset);
+    if (bindI18nStore && i18n)
+      i18n.store.on(bindI18nStore, boundReset);
+    return function() {
+      isMounted.current = false;
+      if (bindI18n && i18n)
+        bindI18n.split(" ").forEach(function(e) {
+          return i18n.off(e, boundReset);
+        });
+      if (bindI18nStore && i18n)
+        bindI18nStore.split(" ").forEach(function(e) {
+          return i18n.store.off(e, boundReset);
+        });
+    };
+  }, [i18n, namespaces.join()]);
+  var isInitial = useRef(true);
+  useEffect(function() {
+    if (isMounted.current && !isInitial.current) {
+      setT(getT);
+    }
+    isInitial.current = false;
+  }, [i18n]);
+  var ret = [t, i18n, ready];
+  ret.t = t;
+  ret.i18n = i18n;
+  ret.ready = ready;
+  if (ready)
+    return ret;
+  if (!ready && !useSuspense)
+    return ret;
+  throw new Promise(function(resolve) {
+    loadNamespaces(i18n, namespaces, function() {
+      resolve();
+    });
+  });
+}
+function LanguageString(_a) {
+  var _b = _a, {
+    as: Component,
+    language,
+    children
+  } = _b, props = __objRest2(_b, ["as", "language", "children"]);
+  const {
+    i18n
+  } = useTranslation();
+  const viewingDirection = useMemo(() => i18n.dir ? i18n.dir(language) : "ltr", [language]);
+  const isSame = useMemo(() => {
+    if (!i18n.services) {
+      return false;
+    }
+    return i18n.services.languageUtils.getLanguagePartFromCode(i18n.language) === i18n.services.languageUtils.getLanguagePartFromCode(language);
+  }, [i18n.language, language]);
+  if (isSame) {
+    if (Component) {
+      return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, __spreadValues2({}, props)), {
+        children
+      }));
+    }
+    return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, __spreadValues2({}, props)), {
+      children
+    }));
+  }
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, __spreadProps2(__spreadValues2({}, props), {
+      lang: language,
+      dir: viewingDirection
+    })), {
+      children
+    }));
+  }
+  return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, __spreadProps2(__spreadValues2({}, props), {
+    lang: language,
+    dir: viewingDirection
+  })), {
+    children
+  }));
+}
+function getClosestLanguage(i18nLanguage, languages, i18nLanguages = [], strictFallback = false) {
+  if (!i18nLanguage || !languages || languages.length === 0) {
+    return void 0;
+  }
+  if (languages.length === 1) {
+    return languages[0];
+  }
+  if (languages.indexOf(i18nLanguage) !== -1) {
+    return i18nLanguage;
+  }
+  const root = i18nLanguage.indexOf("-") !== -1 ? i18nLanguage.slice(0, i18nLanguage.indexOf("-")) : null;
+  if (root && languages.indexOf(root) !== -1) {
+    return root;
+  }
+  for (const lang of i18nLanguages) {
+    if (languages.indexOf(lang) !== -1) {
+      return lang;
+    }
+  }
+  if (!strictFallback) {
+    const inverseRoot = languages.map((l) => l.indexOf("-") !== -1 ? l.slice(0, l.indexOf("-")) : null);
+    const inverseIdx = inverseRoot.indexOf(i18nLanguage);
+    if (inverseIdx !== -1) {
+      return languages[inverseIdx];
+    }
+    for (const lang of i18nLanguages) {
+      const root2 = lang.indexOf("-") !== -1 ? lang.slice(0, lang.indexOf("-")) : null;
+      const inverseIdx2 = root2 ? languages.indexOf(root2) : -1;
+      if (inverseIdx2 !== -1) {
+        return languages[inverseIdx2];
+      }
+    }
+  }
+  if (languages.indexOf("none") !== -1) {
+    return "none";
+  }
+  if (languages.indexOf("@none") !== -1) {
+    return "@none";
+  }
+  return languages[0];
+}
+function buildLocaleString(inputText, i18nLanguage, options = {}) {
+  const {
+    strictFallback = false,
+    defaultText = "",
+    separator = "\n",
+    fallbackLanguages = [],
+    closest
+  } = options;
+  const languages = Object.keys(inputText || {});
+  const language = closest ? i18nLanguage : getClosestLanguage(i18nLanguage, languages, fallbackLanguages, strictFallback);
+  if (!inputText) {
+    return defaultText;
+  }
+  if (typeof inputText === "string") {
+    return inputText;
+  }
+  const candidateText = language ? inputText[language] : void 0;
+  if (candidateText) {
+    if (typeof candidateText === "string") {
+      return candidateText;
+    }
+    return candidateText.join(separator);
+  }
+  return "";
+}
+function useClosestLanguage(getLanguages, deps = []) {
+  const {
+    i18n
+  } = useTranslation();
+  const i18nLanguages = i18n && i18n.languages ? i18n.languages : [];
+  const i18nLanguage = i18n && i18n.language ? i18n.language : "en";
+  return useMemo(() => {
+    const languages = getLanguages();
+    return getClosestLanguage(i18nLanguage, languages, i18nLanguages);
+  }, [i18nLanguages, i18nLanguage, ...deps]);
+}
+function useLocaleString(inputText, defaultText) {
+  const language = useClosestLanguage(() => Object.keys(inputText || {}), [inputText]);
+  return [useMemo(() => {
+    return buildLocaleString(inputText, language, {
+      defaultText,
+      closest: true
+    });
+  }, [language, defaultText, inputText]), language];
+}
+const LocaleString = (_c) => {
+  var _d = _c, {
+    as: Component,
+    defaultText,
+    enableDangerouslySetInnerHTML,
+    children
+  } = _d, props = __objRest2(_d, ["as", "defaultText", "enableDangerouslySetInnerHTML", "children"]);
+  const [text, language] = useLocaleString(children, defaultText);
+  if (language) {
+    return /* @__PURE__ */ jsx(LanguageString, __spreadProps(__spreadValues({}, __spreadProps2(__spreadValues2({}, props), {
+      as: Component,
+      language,
+      title: enableDangerouslySetInnerHTML ? void 0 : text,
+      dangerouslySetInnerHTML: enableDangerouslySetInnerHTML ? {
+        __html: text
+      } : void 0
+    })), {
+      children: enableDangerouslySetInnerHTML ? void 0 : text
+    }));
+  }
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, __spreadValues2({}, props)), {
+      children: text
+    }));
+  }
+  return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, __spreadProps2(__spreadValues2({}, props), {
+    title: enableDangerouslySetInnerHTML ? void 0 : text,
+    dangerouslySetInnerHTML: enableDangerouslySetInnerHTML ? {
+      __html: text
+    } : void 0
+  })), {
+    children: enableDangerouslySetInnerHTML ? void 0 : text
+  }));
+};
+function RenderCanvas({
+  x,
+  y,
+  onChoiceChange,
+  registerActions,
+  defaultChoices,
+  isStatic,
+  renderViewerControls,
+  renderMediaControls,
+  strategies,
+  backgroundStyle,
+  alwaysShowBackground,
+  onClickPaintingAnnotation,
+  children
+}) {
+  const canvas = useCanvas();
+  const elementProps = useResourceEvents(canvas, ["deep-zoom"]);
+  const [virtualPage] = useVirtualAnnotationPageContext();
+  const vault = useVault();
+  const helper = useMemo(() => createStylesHelper(vault), [vault]);
+  const [strategy, actions] = useRenderingStrategy({
+    strategies: strategies || ["images"],
+    defaultChoices: defaultChoices == null ? void 0 : defaultChoices.map(({
+      id
+    }) => id)
+  });
+  const choice = strategy.type === "images" ? strategy.choice : void 0;
+  useEffect(() => {
+    if (registerActions) {
+      registerActions(actions);
+    }
+  }, [strategy.annotations]);
+  useEffect(() => {
+    if (defaultChoices) {
+      for (const choice2 of defaultChoices) {
+        if (typeof choice2.opacity !== "undefined") {
+          helper.applyStyles({
+            id: choice2.id
+          }, "atlas", {
+            opacity: choice2.opacity
+          });
+        }
+      }
+    }
+  }, [defaultChoices]);
+  useLayoutEffect(() => {
+    if (onChoiceChange) {
+      onChoiceChange(choice);
+    }
+  }, [choice]);
+  const thumbnail = useThumbnail({
+    maxWidth: 256,
+    maxHeight: 256
+  });
+  if (!canvas) {
+    return null;
+  }
+  const accompanyingCanvas = canvas.accompanyingCanvas;
+  const thumbnailFallbackImage = thumbnail && thumbnail.type === "fixed" ? /* @__PURE__ */ jsx("world-object", {
+    height: canvas.height,
+    width: canvas.width,
+    x,
+    y,
+    children: /* @__PURE__ */ jsx("world-image", {
+      uri: thumbnail.id,
+      target: {
+        x: 0,
+        y: 0,
+        width: canvas.width,
+        height: canvas.height
+      },
+      display: thumbnail.width && thumbnail.height ? {
+        width: thumbnail.width,
+        height: thumbnail.height
+      } : void 0
+    })
+  }) : null;
+  if (strategy.type === "unknown") {
+    if (thumbnailFallbackImage) {
+      return thumbnailFallbackImage;
+    }
+    throw new Error(strategy.reason || "Unknown image strategy");
+  }
+  const annotations = /* @__PURE__ */ jsxs(Fragment, {
+    children: [virtualPage ? /* @__PURE__ */ jsx(RenderAnnotationPage, {
+      page: virtualPage
+    }) : null, strategy.annotations && strategy.annotations.pages ? strategy.annotations.pages.map((page) => {
+      return /* @__PURE__ */ jsx(RenderAnnotationPage, {
+        page
+      }, page.id);
+    }) : null, children]
+  });
+  return /* @__PURE__ */ jsxs(Fragment$1, {
+    children: [/* @__PURE__ */ jsxs("world-object", __spreadProps(__spreadValues({
+      height: canvas.height,
+      width: canvas.width,
+      x,
+      y
+    }, elementProps), {
+      children: [strategy.type === "empty" || alwaysShowBackground ? /* @__PURE__ */ jsx(CanvasBackground, {
+        style: backgroundStyle
+      }) : null, strategy.type === "textual-content" ? strategy.items.map((item, n) => {
+        return /* @__PURE__ */ jsxs(Fragment$1, {
+          children: [/* @__PURE__ */ jsx(HTMLPortal, {
+            onClick: onClickPaintingAnnotation ? (e) => {
+              e.stopPropagation();
+              onClickPaintingAnnotation(item.annotationId, item, e);
+            } : void 0,
+            target: item.target.spatial || void 0,
+            children: /* @__PURE__ */ jsx(LocaleString, {
+              children: item.text
+            })
+          }, n), annotations]
+        });
+      }) : null, strategy.type === "images" ? /* @__PURE__ */ jsxs(Fragment$1, {
+        children: [strategy.images.map((image, idx) => /* @__PURE__ */ jsx(RenderImage, {
+          isStatic,
+          image,
+          id: image.id,
+          thumbnail: idx === 0 ? thumbnail : void 0,
+          onClick: onClickPaintingAnnotation ? (e) => {
+            e.stopPropagation();
+            onClickPaintingAnnotation(image.annotationId, image, e);
+          } : void 0
+        }, image.id)), annotations]
+      }) : null, (strategy.type === "images" || strategy.type === "empty" || strategy.type === "textual-content") && renderViewerControls ? /* @__PURE__ */ jsx(CanvasPortal, {
+        overlay: true,
+        children: renderViewerControls(strategy)
+      }) : null, strategy.type === "3d-model" ? /* @__PURE__ */ jsx(Model, {
+        model: strategy.model
+      }) : null, strategy.type === "media" ? /* @__PURE__ */ jsx(Fragment$1, {
+        children: strategy.media.type === "Sound" ? /* @__PURE__ */ jsxs(Audio, {
+          media: strategy.media,
+          children: [thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null]
+        }) : strategy.media.type === "Video" ? /* @__PURE__ */ jsxs(Video, {
+          media: strategy.media,
+          children: [thumbnailFallbackImage, renderMediaControls ? renderMediaControls(strategy) : null]
+        }) : null
+      }) : null]
+    }), `${canvas.id}/${strategy.type}`), strategy.type === "media" && strategy.media.type === "Sound" && accompanyingCanvas ? /* @__PURE__ */ jsx(CanvasContext, {
+      canvas: accompanyingCanvas.id,
+      children: /* @__PURE__ */ jsx(RenderCanvas, {
+        renderViewerControls
+      })
+    }) : null]
+  });
+}
+const CanvasPanel = {
+  RenderImage,
+  RenderCanvas,
+  RenderAnnotationPage,
+  RenderAnnotation,
+  Viewer,
+  CanvasBackground
+};
+function AnnotationContext({
+  annotation,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      annotation
+    },
+    children
+  });
+}
+function AnnotationPageContext({
+  annotationPage,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      annotationPage
+    },
+    children
+  });
+}
+function CollectionContext({
+  collection,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResourceProvider, {
+    value: {
+      collection
+    },
+    children
+  });
+}
+function useAnnotationsAtTime(time, options = {}) {
+  const allAnnotations = usePaintingAnnotations(options);
+  return allAnnotations;
+}
+function useCanvasClock(canvasId, autoplay = false) {
+}
+function useCanvasSubset(idsOrRefs) {
+  const ctx = useResourceContext();
+  const manifestId = ctx.manifest;
+  const refs = idsOrRefs ? idsOrRefs.map((item) => typeof item === "string" ? item : item == null ? void 0 : item.id) : [];
+  return useVaultSelector((s) => {
+    const manifest = manifestId ? s.iiif.entities.Manifest[manifestId] : void 0;
+    const items = (manifest == null ? void 0 : manifest.items) || [];
+    if (typeof idsOrRefs === "undefined") {
+      return items;
+    }
+    const newItems = [];
+    for (const item of (manifest == null ? void 0 : manifest.items) || []) {
+      if (refs.indexOf(item.id) !== -1) {
+        newItems.push(item);
+      }
+    }
+    return newItems;
+  }, [refs.join("/")]);
+}
+function useCollection(options, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  const collectionId = id ? id : ctx.collection;
+  const collection = useVaultSelector((s) => collectionId ? s.iiif.entities.Collection[collectionId] : void 0, [collectionId]);
+  return useMemo(() => {
+    if (!collection) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(collection);
+    }
+    return collection;
+  }, [collection, selector, ...deps]);
+}
+function useEventListener(resource, name, listener, scope, deps = []) {
+  const vault = useVault();
+  const helper = useMemo(() => createEventsHelper(vault), [vault]);
+  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 = useContext(ReactVaultContext);
+  return oldContext && oldContext.vault ? oldContext.vault : globalVault();
+}
+function useExternalCollection(idOrRef, options) {
+  const { id, isLoaded, error, resource, requestId, cached } = useExternalResource(idOrRef, options);
+  return { id, isLoaded, error, manifest: resource, requestId, cached };
+}
+function useImageService({ cacheKey } = {}) {
+  const canvas = useCanvas();
+  const annotations = usePaintingAnnotations();
+  const vault = useVault();
+  const imageService = useImageServiceLoader();
+  const [_data, setData] = useState(void 0);
+  const [isFetching, setIsFetching] = useState(false);
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(void 0);
+  const key = canvas ? canvas.id : "undefined";
+  const initialData = useMemo(() => {
+    try {
+      if (canvas && annotations.length) {
+        const annotation = annotations[0];
+        const resource = vault.get(annotation.body[0]);
+        const imageServices = getImageServices(resource);
+        const firstImageService = imageServices[0];
+        if (!firstImageService) {
+          return void 0;
+        }
+        return imageService.loadServiceSync({
+          id: firstImageService.id || firstImageService["@id"],
+          width: firstImageService.width || canvas.width,
+          height: firstImageService.height || canvas.height
+        }) || void 0;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return void 0;
+  }, [key, cacheKey, canvas]);
+  const data = status === "success" && _data ? _data : initialData;
+  useEffect(() => {
+    (async () => {
+      try {
+        if (canvas && annotations.length) {
+          const annotation = annotations[0];
+          const resource = vault.get(annotation.body[0]);
+          const imageServices = getImageServices(resource);
+          const firstImageService = imageServices[0];
+          if (!firstImageService) {
+            return;
+          }
+          setIsFetching(true);
+          setStatus("loading");
+          try {
+            const loadedService = await 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 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 useSearchService() {
+  const manifest = useManifest();
+  return manifest ? manifest.service.find((service) => service.profile === "SearchService1" || service.profile === "http://iiif.io/api/search/1/search") : void 0;
+}
+function useStyleHelper() {
+  const vault = useVault();
+  return useMemo(() => createStylesHelper(vault), [vault]);
+}
+export { AnnotationContext, AnnotationPageContext, CanvasContext, CanvasPanel, CanvasPortal, CollectionContext, ContextBridge, ImageServiceLoaderContext, InnerViewerProvider, ManifestContext, MediaPlayerProvider, OverlayPortalContext, PortalContext, RangeContext, ReactVaultContext, ResourceProvider, ResourceReactContext, SimpleViewerProvider, SimpleViewerReactContext, VaultProvider, ViewerPresetContext, VirtualAnnotationProvider, VisibleCanvasReactContext, emptyActions, emptyStrategy, expandTarget, findAllCanvasesInRange, findFirstCanvasFromRange, findManifestSelectedRange, findSelectedRange, flattenAnnotationPageIds, formatTime, getImageStrategy, getManifestSequence, getPaintables, getParsedTargetSelector, getVisibleCanvasesFromCanvasId, parseSelector, parseSpecificResource, unknownResponse, unsupportedStrategy, useAnnotation, useAnnotationPageManager, useAnnotationsAtTime, useCanvas, useCanvasClock, useCanvasSequence, useCanvasSubset, useCollection, useContextBridge, useDispatch, useEventListener, useExistingVault, useExternalCollection, useExternalManifest, useExternalResource, useImageService, useImageServiceLoader, useImageTile, useLoadImageService, useManifest, useMediaActions, useMediaElements, useMediaState, usePaintables, usePaintingAnnotations, useRange, useRenderingStrategy, useResourceContext, useResourceEvents, useResources, useSearchService, useSimpleMediaPlayer, useSimpleViewer, useStyleHelper, useStyles, useThumbnail, useVault, useVaultEffect, useVaultSelector, useViewerPreset, useVirtualAnnotationPage, useVirtualAnnotationPageContext, useVisibleCanvases };
+//# sourceMappingURL=index.mjs.map