react-iiif-vault 1.0.8 → 1.0.9

package/dist/canvas-panel/esm/canvas-panel.mjs

@@ -1,94 +1,117 @@
-import { jsx as l, jsxs as A, Fragment as H } from "react/jsx-runtime";
-import * as se from "react";
-import q, { useContext as R, useMemo as y, useState as L, useEffect as N, useCallback as P, createContext as U, useRef as j, useLayoutEffect as Ce, Fragment as te, useReducer as rt, forwardRef as Ae, useImperativeHandle as it } from "react";
-import { AtlasAuto as ot, ModeContext as at, mergeStyles as st, RegionHighlight as ut, TileSet as ct, HTMLPortal as lt } from "@atlas-viewer/atlas";
+import { jsx as c, jsxs as I, Fragment as $ } from "react/jsx-runtime";
+import B, { createContext as F, Component as nt, createElement as we, isValidElement as rt, useContext as R, useMemo as y, useState as L, useEffect as N, useCallback as P, useRef as q, useLayoutEffect as Ce, Fragment as te, useReducer as it, forwardRef as Ee, useImperativeHandle as ot } from "react";
+import { AtlasAuto as at, ModeContext as st, mergeStyles as ut, RegionHighlight as ct, TileSet as lt, HTMLPortal as dt } from "@atlas-viewer/atlas";
 import { globalVault as Ie, Vault as Se } from "@iiif/helpers/vault";
 import { createStylesHelper as Me } from "@iiif/helpers/styles";
 import { expandTarget as le } from "@iiif/helpers/annotation-targets";
-import { expandTarget as dt } from "@iiif/helpers";
-import { ImageServiceLoader as ft, getImageServices as ht } from "@atlas-viewer/iiif-image-api";
-import { createThumbnailHelper as gt } from "@iiif/helpers/thumbnail";
-function de(e, t) {
-  return de = Object.setPrototypeOf || function(r, i) {
-    return r.__proto__ = i, r;
-  }, de(e, t);
-}
-function mt(e, t) {
-  e.prototype = Object.create(t.prototype), e.prototype.constructor = e, de(e, t);
-}
-var pt = function(t, n) {
-  return t === void 0 && (t = []), n === void 0 && (n = []), t.length !== n.length || t.some(function(r, i) {
-    return !Object.is(r, n[i]);
-  });
-}, Pe = {
+import { expandTarget as ft } from "@iiif/helpers";
+import { ImageServiceLoader as ht, getImageServices as gt } from "@atlas-viewer/iiif-image-api";
+import { createThumbnailHelper as mt } from "@iiif/helpers/thumbnail";
+const vt = F(null), se = {
+  didCatch: !1,
   error: null
-}, vt = /* @__PURE__ */ function(e) {
-  mt(t, e);
-  function t() {
-    for (var r, i = arguments.length, o = new Array(i), a = 0; a < i; a++)
-      o[a] = arguments[a];
-    return r = e.call.apply(e, [this].concat(o)) || this, r.state = Pe, r.resetErrorBoundary = function() {
-      for (var s, u = arguments.length, d = new Array(u), c = 0; c < u; c++)
-        d[c] = arguments[c];
-      r.props.onReset == null || (s = r.props).onReset.apply(s, d), r.reset();
-    }, r;
+};
+class pt extends nt {
+  constructor(t) {
+    super(t), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = se;
   }
-  t.getDerivedStateFromError = function(i) {
+  static getDerivedStateFromError(t) {
     return {
-      error: i
+      didCatch: !0,
+      error: t
     };
-  };
-  var n = t.prototype;
-  return n.reset = function() {
-    this.setState(Pe);
-  }, n.componentDidCatch = function(i, o) {
-    var a, s;
-    (a = (s = this.props).onError) == null || a.call(s, i, o);
-  }, n.componentDidUpdate = function(i, o) {
-    var a = this.state.error, s = this.props.resetKeys;
-    if (a !== null && o.error !== null && pt(i.resetKeys, s)) {
-      var u, d;
-      (u = (d = this.props).onResetKeysChange) == null || u.call(d, i.resetKeys, s), this.reset();
+  }
+  resetErrorBoundary() {
+    const {
+      error: t
+    } = this.state;
+    if (t !== null) {
+      for (var n, r, i = arguments.length, o = new Array(i), a = 0; a < i; a++)
+        o[a] = arguments[a];
+      (n = (r = this.props).onReset) === null || n === void 0 || n.call(r, {
+        args: o,
+        reason: "imperative-api"
+      }), this.setState(se);
+    }
+  }
+  componentDidCatch(t, n) {
+    var r, i;
+    (r = (i = this.props).onError) === null || r === void 0 || r.call(i, t, n);
+  }
+  componentDidUpdate(t, n) {
+    const {
+      didCatch: r
+    } = this.state, {
+      resetKeys: i
+    } = this.props;
+    if (r && n.error !== null && yt(t.resetKeys, i)) {
+      var o, a;
+      (o = (a = this.props).onReset) === null || o === void 0 || o.call(a, {
+        next: i,
+        prev: t.resetKeys,
+        reason: "keys"
+      }), this.setState(se);
     }
-  }, n.render = function() {
-    var i = this.state.error, o = this.props, a = o.fallbackRender, s = o.FallbackComponent, u = o.fallback;
-    if (i !== null) {
-      var d = {
-        error: i,
+  }
+  render() {
+    const {
+      children: t,
+      fallbackRender: n,
+      FallbackComponent: r,
+      fallback: i
+    } = this.props, {
+      didCatch: o,
+      error: a
+    } = this.state;
+    let s = t;
+    if (o) {
+      const u = {
+        error: a,
         resetErrorBoundary: this.resetErrorBoundary
       };
-      if (/* @__PURE__ */ se.isValidElement(u))
-        return u;
-      if (typeof a == "function")
-        return a(d);
-      if (s)
-        return /* @__PURE__ */ se.createElement(s, d);
-      throw new Error("react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop");
+      if (typeof n == "function")
+        s = n(u);
+      else if (r)
+        s = we(r, u);
+      else if (i === null || rt(i))
+        s = i;
+      else
+        throw a;
     }
-    return this.props.children;
-  }, t;
-}(se.Component);
-const yt = {
+    return we(vt.Provider, {
+      value: {
+        didCatch: o,
+        error: a,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, s);
+  }
+}
+function yt() {
+  let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+  return e.length !== t.length || e.some((n, r) => !Object.is(n, t[r]));
+}
+const xt = {
   collection: void 0,
   manifest: void 0,
   range: void 0,
   canvas: void 0,
   annotation: void 0,
   annotationPage: void 0
-}, he = q.createContext(yt), z = () => R(he);
+}, fe = B.createContext(xt), z = () => R(fe);
 function re({ value: e, children: t }) {
   const n = z(), r = y(() => ({
     ...n,
     ...e
   }), [e, n]);
-  return /* @__PURE__ */ l(he.Provider, { value: r, children: t });
+  return /* @__PURE__ */ c(fe.Provider, { value: r, children: t });
 }
-const ie = q.createContext({
+const ie = B.createContext({
   vault: null,
   setVaultInstance: (e) => {
   }
 });
-function Te({
+function Ae({
   vault: e,
   vaultOptions: t,
   useGlobal: n,
@@ -96,7 +119,7 @@ function Te({
   children: i
 }) {
   const [o, a] = L(() => e || (n ? Ie(t) : t ? new Se(t) : new Se()));
-  return /* @__PURE__ */ l(ie.Provider, { value: { vault: o, setVaultInstance: a }, children: /* @__PURE__ */ l(re, { value: r || {}, children: i }) });
+  return /* @__PURE__ */ c(ie.Provider, { value: { vault: o, setVaultInstance: a }, children: /* @__PURE__ */ c(re, { value: r || {}, children: i }) });
 }
 const T = () => {
   const { vault: e } = R(ie);
@@ -104,13 +127,13 @@ const T = () => {
     throw new Error("Vault not found. Ensure you have your provider set up correctly.");
   return e;
 };
-function xt(e, { noCache: t = !1 } = {}) {
-  const n = typeof e == "string" ? e : e.id, r = T(), [i, o] = L(n), [a, s] = L(void 0), u = y(() => r.get(n, { skipSelfReturn: !0 }) || void 0, [n, r]), [d, c] = L(u);
+function wt(e, { noCache: t = !1 } = {}) {
+  const n = typeof e == "string" ? e : e.id, r = T(), [i, o] = L(n), [a, s] = L(void 0), u = y(() => r.get(n, { skipSelfReturn: !0 }) || void 0, [n, r]), [d, l] = L(u);
   return N(() => {
     (async () => {
       try {
-        const f = u && !t ? u : await r.load(n), p = f ? f.id || f["@id"] : null;
-        f && i !== p && o(p), c(f);
+        const f = u && !t ? u : await r.load(n), v = f ? f.id || f["@id"] : null;
+        f && i !== v && o(v), l(f);
       } catch (f) {
         s(f);
       }
@@ -124,18 +147,18 @@ function xt(e, { noCache: t = !1 } = {}) {
     cached: !!(d && d === u)
   };
 }
-function wt(e, t) {
-  const { id: n, isLoaded: r, error: i, resource: o, requestId: a, cached: s } = xt(
+function St(e, t) {
+  const { id: n, isLoaded: r, error: i, resource: o, requestId: a, cached: s } = wt(
     e,
     t
   );
   return { id: n, isLoaded: r, error: i, manifest: o, requestId: a, cached: s };
 }
-function St({ manifest: e, children: t }) {
-  return /* @__PURE__ */ l(re, { value: { manifest: e }, children: t });
+function Pt({ manifest: e, children: t }) {
+  return /* @__PURE__ */ c(re, { value: { manifest: e }, children: t });
 }
-function ge({ canvas: e, children: t }) {
-  return /* @__PURE__ */ l(re, { value: { canvas: e }, children: t });
+function he({ canvas: e, children: t }) {
+  return /* @__PURE__ */ c(re, { value: { canvas: e }, children: t });
 }
 function V(e, t = []) {
   const n = T(), [r, i] = L(() => e(n.getState(), n));
@@ -147,8 +170,8 @@ function V(e, t = []) {
     !1
   ), t), r;
 }
-const oe = q.createContext([]);
-function Re() {
+const oe = B.createContext([]);
+function Te() {
   const e = R(oe);
   return V(
     (t) => e.map((n) => t.iiif.entities.Canvas[n]).filter(Boolean),
@@ -167,48 +190,48 @@ function K(e = {}, t = []) {
       return r ? r(a) : a;
   }, [a, r, ...t]);
 }
-function Pt({ range: e, children: t }) {
-  return /* @__PURE__ */ l(re, { value: { range: e }, children: t });
+function bt({ range: e, children: t }) {
+  return /* @__PURE__ */ c(re, { value: { range: e }, children: t });
 }
-function Ve(e, t) {
+function Re(e, t) {
   var r;
   const n = [];
   for (const i of t.items)
-    if (i.type === "SpecificResource" && ((r = i.source) == null ? void 0 : r.type) === "Canvas" && (i.source.id.indexOf("#") !== -1 ? n.push({ id: i.source.id.split("#")[0], type: "Canvas" }) : n.push(i.source)), i.type === "Range" && n.push(...Ve(e, e.get(i))), i.type === "SpecificResource") {
+    if (i.type === "SpecificResource" && ((r = i.source) == null ? void 0 : r.type) === "Canvas" && (i.source.id.indexOf("#") !== -1 ? n.push({ id: i.source.id.split("#")[0], type: "Canvas" }) : n.push(i.source)), i.type === "Range" && n.push(...Re(e, e.get(i))), i.type === "SpecificResource") {
       const o = typeof i.source == "string" ? i.source : i.source.id;
       n.push({ id: o, type: "Canvas" });
     }
   return n;
 }
-function bt(e, t, { disablePaging: n, skipNonPaged: r } = {}) {
-  const i = t.behavior, o = i.includes("paged"), a = o ? !1 : i.includes("continuous"), s = o || a ? !1 : i.includes("individuals"), u = t.type === "Manifest" ? t.items : Ve(e, t);
+function Ct(e, t, { disablePaging: n, skipNonPaged: r } = {}) {
+  const i = t.behavior, o = i.includes("paged"), a = o ? !1 : i.includes("continuous"), s = o || a ? !1 : i.includes("individuals"), u = t.type === "Manifest" ? t.items : Re(e, t);
   if (a)
     return [u, [u.map((m, g) => g)]];
   if (s || !o || n)
     return [u, u.map((m, g) => [g])];
   const d = [];
-  let c = [];
+  let l = [];
   const f = () => {
-    c.length && (d.push([...c]), c = []);
+    l.length && (d.push([...l]), l = []);
   };
-  let p = 0, v = !1;
+  let v = 0, p = !1;
   for (let m = 0; m < u.length; m++) {
     const g = e.get(u[m]);
     if (g.behavior.includes("non-paged")) {
-      m === p && p++, r || (f(), d.push([m]), f());
+      m === v && v++, r || (f(), d.push([m]), f());
       continue;
     }
-    if (m === p || g.behavior.includes("facing-pages")) {
-      c.length && (v = !0), f(), d.push([m]), f();
+    if (m === v || g.behavior.includes("facing-pages")) {
+      l.length && (p = !0), f(), d.push([m]), f();
       continue;
     }
-    if (c.push(m), v) {
-      f(), v = !1;
+    if (l.push(m), p) {
+      f(), p = !1;
       continue;
     }
-    c.length > 1 && f();
+    l.length > 1 && f();
   }
-  return c.length && f(), [u, d];
+  return l.length && f(), [u, d];
 }
 function Et(e = {}, t = []) {
   const { id: n, selector: r } = e, i = z(), o = n || i.range, a = V((s) => o ? s.iiif.entities.Range[o] : void 0, [o]);
@@ -217,15 +240,15 @@ function Et(e = {}, t = []) {
       return r ? r(a) : a;
   }, [a, r, ...t]);
 }
-function Ct({ startCanvas: e, disablePaging: t }) {
+function It({ startCanvas: e, disablePaging: t }) {
   var m;
   const n = T(), r = K(), i = Et(), [o, a] = L(void 0), s = i || r;
   if (!s)
     throw new Error("Nothing selected");
   const [u, d] = y(
-    () => bt(n, s, { disablePaging: t }),
+    () => Ct(n, s, { disablePaging: t }),
     [n, s]
-  ), c = P(
+  ), l = P(
     (g) => {
       const w = d.findIndex((x) => x.includes(g));
       a(w === -1 ? 0 : w);
@@ -234,12 +257,12 @@ function Ct({ startCanvas: e, disablePaging: t }) {
   ), f = P(
     (g) => {
       const w = u.findIndex((x) => x.id === g);
-      w !== -1 ? c(w) : a(0);
+      w !== -1 ? l(w) : a(0);
     },
     [u, d]
-  ), p = P(() => {
-    a((g) => g >= d.length ? g : g + 1);
-  }, [d]), v = P(() => {
+  ), v = P(() => {
+    a((g) => g >= d.length - 1 ? g : g + 1);
+  }, [d]), p = P(() => {
     a((g) => g <= 0 ? 0 : g - 1);
   }, [d]);
   return typeof o > "u" && (e ? f(e) : a(0)), {
@@ -247,15 +270,17 @@ function Ct({ startCanvas: e, disablePaging: t }) {
     cursor: o,
     items: u,
     sequence: d,
+    hasPrevious: o > 0,
+    hasNext: o < d.length - 1,
     setSequenceIndex: a,
-    setCanvasIndex: c,
+    setCanvasIndex: l,
     setCanvasId: f,
-    next: p,
-    previous: v
+    next: v,
+    previous: p
   };
 }
 const J = () => {
-}, ae = U({
+}, ae = F({
   setCurrentCanvasId: J,
   setCurrentCanvasIndex: J,
   nextCanvas: J,
@@ -263,13 +288,27 @@ const J = () => {
   items: [],
   sequence: [],
   setSequenceIndex: J,
-  currentSequenceIndex: 0
+  currentSequenceIndex: 0,
+  hasNext: !1,
+  hasPrevious: !1
 });
-function At(e) {
-  const t = K(), { cursor: n, visibleItems: r, next: i, sequence: o, items: a, setCanvasIndex: s, setCanvasId: u, previous: d, setSequenceIndex: c } = Ct({
+function Mt(e) {
+  const t = K(), {
+    cursor: n,
+    visibleItems: r,
+    next: i,
+    sequence: o,
+    items: a,
+    setCanvasIndex: s,
+    setCanvasId: u,
+    previous: d,
+    setSequenceIndex: l,
+    hasNext: f,
+    hasPrevious: v
+  } = It({
     startCanvas: e.startCanvas,
     disablePaging: e.pagingEnabled === !1
-  }), f = y(
+  }), p = y(
     () => ({
       sequence: o,
       items: a,
@@ -279,39 +318,41 @@ function At(e) {
       previousCanvas: d,
       totalCanvases: a.length,
       setCurrentCanvasIndex: s,
-      setSequenceIndex: c,
-      currentSequenceIndex: n
+      setSequenceIndex: l,
+      currentSequenceIndex: n,
+      hasNext: f,
+      hasPrevious: v
     }),
-    [o, a, u, i, d, a, s, c, n]
+    [o, a, u, i, d, a, s, l, n]
   );
-  return t ? r.length === 0 ? null : /* @__PURE__ */ l(ae.Provider, { value: f, children: /* @__PURE__ */ l(oe.Provider, { value: r, children: /* @__PURE__ */ l(ge, { canvas: r[0], children: e.children }) }) }) : (console.warn("The manifest passed to the provider is not a valid IIIF manifest."), /* @__PURE__ */ l("div", { children: "Sorry, something went wrong." }));
+  return t ? r.length === 0 ? null : /* @__PURE__ */ c(ae.Provider, { value: p, children: /* @__PURE__ */ c(oe.Provider, { value: r, children: /* @__PURE__ */ c(he, { canvas: r[0], children: e.children }) }) }) : (console.warn("The manifest passed to the provider is not a valid IIIF manifest."), /* @__PURE__ */ c("div", { children: "Sorry, something went wrong." }));
 }
-function It(e) {
-  const t = wt(e.manifest);
+function At(e) {
+  const t = St(e.manifest);
   if (!t)
-    return console.warn("The manifest passed to the provider is not a valid IIIF manifest."), /* @__PURE__ */ l("div", { children: "Sorry, something went wrong." });
+    return console.warn("The manifest passed to the provider is not a valid IIIF manifest."), /* @__PURE__ */ c("div", { children: "Sorry, something went wrong." });
   if (t.error)
-    return /* @__PURE__ */ l("div", { children: t.error.toString() });
+    return /* @__PURE__ */ c("div", { children: t.error.toString() });
   if (!t.isLoaded)
-    return /* @__PURE__ */ l("div", { children: "Loading..." });
-  const n = /* @__PURE__ */ l(At, { ...e, children: e.children });
-  return /* @__PURE__ */ l(St, { manifest: t.id, children: e.rangeId ? /* @__PURE__ */ l(Pt, { range: e.rangeId, children: n }) : n });
+    return /* @__PURE__ */ c("div", { children: "Loading..." });
+  const n = /* @__PURE__ */ c(Mt, { ...e, children: e.children });
+  return /* @__PURE__ */ c(Pt, { manifest: t.id, children: e.rangeId ? /* @__PURE__ */ c(bt, { range: e.rangeId, children: n }) : n });
 }
-function Mt() {
+function Tt() {
   return R(ae);
 }
-function Tt() {
+function Rt() {
   return {
     VaultContext: R(ie),
-    ResourceContext: R(he),
+    ResourceContext: R(fe),
     SimpleViewerReactContext: R(ae),
     VisibleCanvasReactContext: R(oe)
   };
 }
-function Rt(e) {
-  return /* @__PURE__ */ l(Te, { vault: e.bridge.VaultContext.vault || void 0, resources: e.bridge.ResourceContext, children: /* @__PURE__ */ l(oe.Provider, { value: e.bridge.VisibleCanvasReactContext, children: /* @__PURE__ */ l(ae.Provider, { value: e.bridge.SimpleViewerReactContext, children: e.children }) }) });
+function Vt(e) {
+  return /* @__PURE__ */ c(Ae, { vault: e.bridge.VaultContext.vault || void 0, resources: e.bridge.ResourceContext, children: /* @__PURE__ */ c(oe.Provider, { value: e.bridge.VisibleCanvasReactContext, children: /* @__PURE__ */ c(ae.Provider, { value: e.bridge.SimpleViewerReactContext, children: e.children }) }) });
 }
-const F = function(e) {
+const U = function(e) {
   return function() {
     const t = { type: e, getType: () => e, toString: () => e };
     return (n, r) => ({
@@ -320,27 +361,27 @@ const F = function(e) {
       ...r !== void 0 && { meta: r }
     });
   };
-}, Vt = "@iiif/IMPORT_ENTITIES", Ot = "@iiif/MODIFY_ENTITY_FIELD", Lt = "@iiif/REORDER_ENTITY_FIELD", kt = "@iiif/ADD_REFERENCE", Nt = "@iiif/UPDATE_REFERENCE", Ft = "@iiif/REMOVE_REFERENCE", Dt = "@iiif/ADD_METADATA", Ut = "@iiif/REMOVE_METADATA", _t = "@iiif/UPDATE_METADATA", jt = "@iiif/REORDER_METADATA", qt = F(Vt)(), $t = F(Ot)(), Bt = F(Lt)(), Ht = F(kt)(), Yt = F(Ft)(), zt = F(Nt)(), Kt = F(Dt)(), Wt = F(_t)(), Gt = F(Ut)(), Qt = F(jt)(), ue = {
-  importEntities: qt,
-  modifyEntityField: $t,
-  reorderEntityField: Bt,
-  addReference: Ht,
-  removeReference: Yt,
-  updateReference: zt,
-  addMetadata: Kt,
-  removeMetadata: Gt,
-  updateMetadata: Wt,
-  reorderMetadata: Qt
+}, Ot = "@iiif/IMPORT_ENTITIES", Lt = "@iiif/MODIFY_ENTITY_FIELD", kt = "@iiif/REORDER_ENTITY_FIELD", Nt = "@iiif/ADD_REFERENCE", Ft = "@iiif/UPDATE_REFERENCE", Ut = "@iiif/REMOVE_REFERENCE", Dt = "@iiif/ADD_METADATA", _t = "@iiif/REMOVE_METADATA", qt = "@iiif/UPDATE_METADATA", Bt = "@iiif/REORDER_METADATA", jt = U(Ot)(), Ht = U(Lt)(), $t = U(kt)(), Yt = U(Nt)(), zt = U(Ut)(), Kt = U(Ft)(), Wt = U(Dt)(), Gt = U(qt)(), Qt = U(_t)(), Jt = U(Bt)(), ue = {
+  importEntities: jt,
+  modifyEntityField: Ht,
+  reorderEntityField: $t,
+  addReference: Yt,
+  removeReference: zt,
+  updateReference: Kt,
+  addMetadata: Wt,
+  removeMetadata: Qt,
+  updateMetadata: Gt,
+  reorderMetadata: Jt
 };
-function Jt() {
+function Zt() {
   const t = T().getStore();
   return y(() => (n) => t.dispatch(n), [t]);
 }
-function be(e) {
+function Pe(e) {
   return typeof e != "string" && e && e.bindToVault;
 }
-function Zt() {
-  const e = T(), t = j([]), n = Jt(), r = y(() => `vault://annotation-page/${(/* @__PURE__ */ new Date()).getTime()}/${Math.round(Math.random() * 1e9).toString(16)}`, []);
+function Xt() {
+  const e = T(), t = q([]), n = Zt(), r = y(() => `vault://annotation-page/${(/* @__PURE__ */ new Date()).getTime()}/${Math.round(Math.random() * 1e9).toString(16)}`, []);
   Ce(() => {
     const s = {
       id: r,
@@ -375,13 +416,13 @@ function Zt() {
   ), o = P(
     (s, u) => {
       if (r) {
-        if (be(s)) {
+        if (Pe(s)) {
           const f = s;
           f.__vault || f.bindToVault(e), s = typeof f.source == "string" ? f.source : f.source.id, t.current[s] = f;
         } else
           typeof s != "string" && (s = s.id);
-        const d = e.get({ id: r, type: "AnnotationPage" }), c = e.get({ id: s, type: "Annotation" });
-        d && c && (d.items.find((f) => f.id === c.id) || n(
+        const d = e.get({ id: r, type: "AnnotationPage" }), l = e.get({ id: s, type: "Annotation" });
+        d && l && (d.items.find((f) => f.id === l.id) || n(
           ue.addReference({
             id: r,
             type: "AnnotationPage",
@@ -398,7 +439,7 @@ function Zt() {
     [r]
   ), a = P(
     (s) => {
-      r && (be(s) ? s = typeof s.source == "string" ? s.source : s.source.id : typeof s != "string" && (s = s.id), t.current[s] && t.current[s].beforeRemove(), e.get({ id: r, type: "AnnotationPage" }) && n(
+      r && (Pe(s) ? s = typeof s.source == "string" ? s.source : s.source.id : typeof s != "string" && (s = s.id), t.current[s] && t.current[s].beforeRemove(), e.get({ id: r, type: "AnnotationPage" }) && n(
         ue.removeReference({
           id: r,
           type: "AnnotationPage",
@@ -420,9 +461,9 @@ function Zt() {
     }
   ];
 }
-const Oe = U(null);
-function Xt() {
-  const e = R(Oe);
+const Ve = F(null);
+function en() {
+  const e = R(Ve);
   return [
     e.fullPage,
     {
@@ -431,109 +472,109 @@ function Xt() {
     }
   ];
 }
-function en({ children: e }) {
-  const [t, { addAnnotation: n, removeAnnotation: r }] = Zt();
-  return /* @__PURE__ */ l(
-    Oe.Provider,
+function tn({ children: e }) {
+  const [t, { addAnnotation: n, removeAnnotation: r }] = Xt();
+  return /* @__PURE__ */ c(
+    Ve.Provider,
     {
       value: y(() => ({ fullPage: t, addAnnotation: n, removeAnnotation: r }), [t]),
       children: e
     }
   );
 }
-function tn({
+function nn({
   width: e,
   style: t,
   height: n,
   error: r,
   resetErrorBoundary: i
 }) {
-  return /* @__PURE__ */ A("div", { style: { width: e, height: n, minHeight: 500, ...t || {}, background: "#f9f9f9" }, children: [
-    /* @__PURE__ */ l("h3", { children: "Error occurred" }),
-    /* @__PURE__ */ l("p", { children: r.message }),
-    /* @__PURE__ */ l("button", { onClick: i, children: "Reset" })
+  return /* @__PURE__ */ I("div", { style: { width: e, height: n, minHeight: 500, ...t || {}, background: "#f9f9f9" }, children: [
+    /* @__PURE__ */ c("h3", { children: "Error occurred" }),
+    /* @__PURE__ */ c("p", { children: r.message }),
+    /* @__PURE__ */ c("button", { onClick: i, children: "Reset" })
   ] });
 }
-const me = U(null);
-function nn() {
-  return R(me);
+const ge = F(null);
+function rn() {
+  return R(ge);
 }
-const Le = U(
+const Oe = F(
   () => {
   }
-), ke = U(
+), Le = F(
   () => {
   }
 );
 function Y(e, t, n, r, i = []) {
-  const o = R(e === "portal" ? ke : Le);
+  const o = R(e === "portal" ? Le : Oe);
   N(() => (e !== "none" && o(t, n, r), () => {
     o(t, null);
   }), [t, e, o, ...i]);
 }
-function $(e = {}, t = []) {
+function j(e = {}, t = []) {
   const { id: n, selector: r } = e, i = z(), o = n || i.canvas, a = V((s) => o ? s.iiif.entities.Canvas[o] : void 0, [o]);
   return y(() => {
     if (a)
       return r ? r(a) : a;
   }, [a, r, ...t]);
 }
-const Ne = U(() => {
+const ke = F(() => {
 });
-function rn(e) {
-  const t = $(), n = R(Ne);
+function on(e) {
+  const t = j(), n = R(ke);
   N(() => t && t.id ? (n(t.id, e), () => n(t.id, -1)) : () => {
   }, [t, e]);
 }
-function on({
+function an({
   children: e,
   errorFallback: t,
   outerContainerProps: n = {},
   worldScale: r,
   ...i
 }) {
-  const [o, a] = L(), s = Tt(), u = t || tn, [d, c] = L({}), f = Object.entries(d), [p, v] = L({}), m = Object.entries(p), [g, w] = L({}), x = y(() => r || Math.max(...Object.values(g)), [g]), I = y(() => ({ maxOverZoom: x || 1, ...i.runtimeOptions || {} }), [x, i.runtimeOptions]), b = P((E, M) => {
+  const [o, a] = L(), s = Rt(), u = t || nn, [d, l] = L({}), f = Object.entries(d), [v, p] = L({}), m = Object.entries(v), [g, w] = L({}), x = y(() => r || Math.max(...Object.values(g)), [g]), M = y(() => ({ maxOverZoom: x || 1, ...i.runtimeOptions || {} }), [x, i.runtimeOptions]), b = P((C, A) => {
     w((k) => {
-      if (M === -1) {
-        const { [E]: h, ...D } = k;
+      if (A === -1) {
+        const { [C]: h, ...D } = k;
         return D;
       }
-      return { ...k, [E]: M };
+      return { ...k, [C]: A };
     });
-  }, []), W = P((E, M, k) => {
-    c(({ [E]: h, ...D }) => M ? {
+  }, []), W = P((C, A, k) => {
+    l(({ [C]: h, ...D }) => A ? {
       ...D,
-      [E]: { element: M, props: k }
+      [C]: { element: A, props: k }
     } : D);
-  }, []), Z = P((E, M, k) => {
-    v(({ [E]: h, ...D }) => M ? {
+  }, []), Z = P((C, A, k) => {
+    p(({ [C]: h, ...D }) => A ? {
       ...D,
-      [E]: { element: M, props: k }
+      [C]: { element: A, props: k }
     } : D);
   }, []);
-  return /* @__PURE__ */ A(vt, { resetKeys: [], fallbackRender: (E) => /* @__PURE__ */ l(u, { ...i, ...E }), children: [
-    /* @__PURE__ */ l(
-      ot,
+  return /* @__PURE__ */ I(pt, { resetKeys: [], fallbackRender: (C) => /* @__PURE__ */ c(u, { ...i, ...C }), children: [
+    /* @__PURE__ */ c(
+      at,
       {
         ...i,
         containerProps: { style: { position: "relative" }, ...i.containerProps || {} },
-        htmlChildren: /* @__PURE__ */ l(H, { children: f.map(([E, { element: M, props: k }]) => /* @__PURE__ */ l(q.Fragment, { children: /* @__PURE__ */ l(M, { ...k || {} }) }, E)) }),
-        onCreated: (E) => {
-          a(E), i.onCreated && i.onCreated(E);
+        htmlChildren: /* @__PURE__ */ c($, { children: f.map(([C, { element: A, props: k }]) => /* @__PURE__ */ c(B.Fragment, { children: /* @__PURE__ */ c(A, { ...k || {} }) }, C)) }),
+        onCreated: (C) => {
+          a(C), i.onCreated && i.onCreated(C);
         },
-        runtimeOptions: I,
-        children: /* @__PURE__ */ l(me.Provider, { value: o, children: /* @__PURE__ */ l(Ne.Provider, { value: b, children: /* @__PURE__ */ l(Le.Provider, { value: W, children: /* @__PURE__ */ l(ke.Provider, { value: Z, children: /* @__PURE__ */ l(Rt, { bridge: s, children: /* @__PURE__ */ l(at.Provider, { value: i.mode || "explore", children: /* @__PURE__ */ l(en, { children: e }) }) }) }) }) }) })
+        runtimeOptions: M,
+        children: /* @__PURE__ */ c(ge.Provider, { value: o, children: /* @__PURE__ */ c(ke.Provider, { value: b, children: /* @__PURE__ */ c(Oe.Provider, { value: W, children: /* @__PURE__ */ c(Le.Provider, { value: Z, children: /* @__PURE__ */ c(Vt, { bridge: s, children: /* @__PURE__ */ c(st.Provider, { value: i.mode || "explore", children: /* @__PURE__ */ c(tn, { children: e }) }) }) }) }) }) })
       }
     ),
-    /* @__PURE__ */ l("div", { children: m.map(([E, { element: M, props: k }]) => /* @__PURE__ */ l(q.Fragment, { children: /* @__PURE__ */ l(M, { ...k || {} }) }, E)) })
+    /* @__PURE__ */ c("div", { children: m.map(([C, { element: A, props: k }]) => /* @__PURE__ */ c(B.Fragment, { children: /* @__PURE__ */ c(A, { ...k || {} }) }, C)) })
   ] });
 }
-const X = {}, Fe = {
+const X = {}, Ne = {
   get(e) {
     return e;
   },
   setMetaValue([e, t, n], r) {
-    const i = Fe.getResourceMeta(e, t), o = i ? i[n] : void 0, a = typeof r == "function" ? r(o) : r;
+    const i = Ne.getResourceMeta(e, t), o = i ? i[n] : void 0, a = typeof r == "function" ? r(o) : r;
     X[e] = {
       ...X[e] || {},
       [t]: {
@@ -548,7 +589,7 @@ const X = {}, Fe = {
       return t ? n[t] : n;
   }
 };
-function an(e = Fe) {
+function sn(e = Ne) {
   return {
     addEventListener(t, n, r, i) {
       if (t)
@@ -578,15 +619,15 @@ function an(e = Fe) {
         for (const a of Object.keys(i))
           o[a] = (s) => {
             const u = e.get(r);
-            for (const { callback: d, scope: c } of i[a] || [])
-              (!c || n && c.indexOf(n) !== -1) && d(s, u);
+            for (const { callback: d, scope: l } of i[a] || [])
+              (!l || n && l.indexOf(n) !== -1) && d(s, u);
           };
       return o;
     }
   };
 }
-function De(e, t) {
-  const n = T(), r = y(() => an(n), [n]), i = V(() => e && e.id ? n.getResourceMeta(e.id, "eventManager") : null, [e]);
+function Fe(e, t) {
+  const n = T(), r = y(() => sn(n), [n]), i = V(() => e && e.id ? n.getResourceMeta(e.id, "eventManager") : null, [e]);
   return y(() => e ? r.getListenersAsProps(e, t) : {}, [i, e, n, t]);
 }
 function ne(e, t) {
@@ -603,10 +644,10 @@ function Ue(e = {}, t = []) {
     (d) => a ? d.iiif.entities.Annotation[a] : void 0,
     [a]
   ), u = V(
-    (d) => s && s.body ? s.body.map((c) => c ? c.type === "SpecificResource" ? {
-      ...c,
-      source: o.get(c)
-    } : c ? d.iiif.entities[c.type][c.id] : null : null).filter(Boolean) : [],
+    (d) => s && s.body ? s.body.map((l) => l ? l.type === "SpecificResource" ? {
+      ...l,
+      source: o.get(l)
+    } : l ? d.iiif.entities[l.type][l.id] : null : null).filter(Boolean) : [],
     [s]
   );
   return y(() => {
@@ -620,15 +661,15 @@ function Ue(e = {}, t = []) {
     return r ? r(d) : d;
   }, [s, r, u, ...t]);
 }
-const _e = ({
+const De = ({
   id: e,
   style: t,
   className: n,
   interactive: r
 }) => {
-  const i = Ue({ id: e }), o = ne(i, "atlas"), a = ne(i, "html"), s = De(i, ["atlas"]), u = $(), d = y(() => st(t, o), [t, o]);
-  return u && i && i.target && i.target.selector && i.target.selector.type === "BoxSelector" && i.target.source && (i.target.source.id === u.id || i.target.source === u.id) ? /* @__PURE__ */ l(
-    ut,
+  const i = Ue({ id: e }), o = ne(i, "atlas"), a = ne(i, "html"), s = Fe(i, ["atlas"]), u = j(), d = y(() => ut(t, o), [t, o]);
+  return u && i && i.target && i.target.selector && i.target.selector.type === "BoxSelector" && i.target.source && (i.target.source.id === u.id || i.target.source === u.id) ? /* @__PURE__ */ c(
+    ct,
     {
       id: i.id,
       isEditing: !0,
@@ -645,7 +686,7 @@ const _e = ({
     }
   ) : null;
 };
-function sn(e = {}, t = []) {
+function un(e = {}, t = []) {
   const { id: n, selector: r } = e, i = z(), o = n || i.annotationPage, a = V(
     (s) => o ? s.iiif.entities.AnnotationPage[o] : void 0,
     [o]
@@ -655,14 +696,14 @@ function sn(e = {}, t = []) {
       return r ? r(a) : a;
   }, [a, ...t]);
 }
-const fe = ({
+const de = ({
   className: e,
   page: t
 }) => {
   var o;
-  const n = sn({ id: t.id }) || t, r = ne(n, "atlas"), i = ne(n, "html");
-  return V((a) => n.id ? a.iiif.entities.AnnotationPage[n.id] : null, []), /* @__PURE__ */ l(te, { children: (o = n.items) == null ? void 0 : o.map((a) => /* @__PURE__ */ l(
-    _e,
+  const n = un({ id: t.id }) || t, r = ne(n, "atlas"), i = ne(n, "html");
+  return V((a) => n.id ? a.iiif.entities.AnnotationPage[n.id] : null, []), /* @__PURE__ */ c(te, { children: (o = n.items) == null ? void 0 : o.map((a) => /* @__PURE__ */ c(
+    De,
     {
       id: a.id,
       style: r,
@@ -671,7 +712,7 @@ const fe = ({
     a.id
   )) });
 };
-function je({
+function _e({
   id: e,
   image: t,
   thumbnail: n,
@@ -683,12 +724,12 @@ function je({
   onClick: u,
   enableSizes: d
 }) {
-  var f, p;
-  const c = y(() => {
+  var f, v;
+  const l = y(() => {
     if (!(!s || s.spatial.x === 0 && s.spatial.y === 0))
       return s.spatial;
   }, [s]);
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ c(
     "world-object",
     {
       x: i + t.target.spatial.x,
@@ -696,9 +737,9 @@ function je({
       width: t.target.spatial.width,
       height: t.target.spatial.height,
       onClick: u,
-      children: t.service ? /* @__PURE__ */ A(te, { children: [
-        /* @__PURE__ */ l(
-          ct,
+      children: t.service ? /* @__PURE__ */ I(te, { children: [
+        /* @__PURE__ */ c(
+          lt,
           {
             tiles: {
               id: t.service.id || t.service["@id"] || "unknown",
@@ -711,13 +752,13 @@ function je({
             x: 0,
             y: 0,
             width: (f = t.target) == null ? void 0 : f.spatial.width,
-            height: (p = t.target) == null ? void 0 : p.spatial.height,
-            crop: c
+            height: (v = t.target) == null ? void 0 : v.spatial.height,
+            crop: l
           }
         ),
         a
-      ] }, "service") : /* @__PURE__ */ A(te, { children: [
-        /* @__PURE__ */ l(
+      ] }, "service") : /* @__PURE__ */ I(te, { children: [
+        /* @__PURE__ */ c(
           "world-image",
           {
             onClick: u,
@@ -727,7 +768,7 @@ function je({
               width: t.width,
               height: t.height
             } : void 0,
-            crop: c
+            crop: l
           }
         ),
         a
@@ -737,7 +778,7 @@ function je({
   );
 }
 function qe(e, t) {
-  const { selector: n, source: r } = dt(t);
+  const { selector: n, source: r } = ft(t);
   if (r.id !== e.id)
     return [null, r];
   const i = {
@@ -758,16 +799,16 @@ function qe(e, t) {
     r
   ];
 }
-const un = {
+const cn = {
   makeChoice: () => {
   }
-}, ce = { type: "unknown" }, C = (e) => ({ type: "unknown", reason: e, annotations: { pages: [] } }), cn = (e, t) => ({ type: "empty", width: e, height: t, annotations: { pages: [] }, image: null, images: [] });
-function ln(e, t) {
+}, ce = { type: "unknown" }, E = (e) => ({ type: "unknown", reason: e, annotations: { pages: [] } }), ln = (e, t) => ({ type: "empty", width: e, height: t, annotations: { pages: [] }, image: null, images: [] });
+function dn(e, t) {
   var r;
   const n = (r = e == null ? void 0 : e.iiif) == null ? void 0 : r.meta[t];
   return n ? n.annotationPageManager : null;
 }
-function dn(e, t) {
+function fn(e, t) {
   return V(
     (n) => {
       const r = [];
@@ -776,7 +817,7 @@ function dn(e, t) {
       const i = Object.keys(n.iiif.entities.AnnotationPage);
       for (const o of i)
         if (!t || t.indexOf(o) !== -1) {
-          const a = ln(n, o);
+          const a = dn(n, o);
           a && a.views && a.views[e] && r.push(o);
         }
       return r;
@@ -784,7 +825,7 @@ function dn(e, t) {
     [e, t]
   );
 }
-function fn({
+function hn({
   canvas: e,
   manifest: t,
   all: n,
@@ -804,21 +845,21 @@ function fn({
       i.indexOf(o.id) === -1 && i.push(o.id);
   return i;
 }
-function hn(e, t) {
+function gn(e, t) {
   var r;
   const n = (r = e == null ? void 0 : e.iiif) == null ? void 0 : r.meta[t];
   return n ? n.annotationPageManager : null;
 }
-function gn(e, t = {}) {
-  const n = T(), r = K(), i = $(), o = Re(), a = y(() => fn({
+function mn(e, t = {}) {
+  const n = T(), r = K(), i = j(), o = Te(), a = y(() => hn({
     all: t.all,
     manifest: r,
     canvas: i,
     canvases: o
-  }), [t.all, i, o, r]), s = dn(e, t.all ? void 0 : a), u = P(
-    (c) => {
+  }), [t.all, i, o, r]), s = fn(e, t.all ? void 0 : a), u = P(
+    (l) => {
       e && n.setMetaValue(
-        [c, "annotationPageManager", "views"],
+        [l, "annotationPageManager", "views"],
         (f) => f && !f[e] ? f : {
           ...f || {},
           [e]: !1
@@ -827,21 +868,21 @@ function gn(e, t = {}) {
     },
     [e, n]
   ), d = P(
-    (c, f = {}) => {
+    (l, f = {}) => {
       if (!e)
         return;
-      const p = n.getState(), v = [];
+      const v = n.getState(), p = [];
       if (f != null && f.deselectOthers) {
-        const m = Object.keys(p.iiif.entities.AnnotationPage);
+        const m = Object.keys(v.iiif.entities.AnnotationPage);
         for (const g of m) {
-          const w = hn(p, g);
-          w && w.views && w.views[e] && v.push(g);
+          const w = gn(v, g);
+          w && w.views && w.views[e] && p.push(g);
         }
       }
-      for (const m of v)
+      for (const m of p)
         u(m);
       n.setMetaValue(
-        [c, "annotationPageManager", "views"],
+        [l, "annotationPageManager", "views"],
         (m) => m && m[e] ? m : {
           ...m || {},
           [e]: !0
@@ -857,15 +898,15 @@ function gn(e, t = {}) {
     setPageDisabled: u
   };
 }
-function mn(e, t) {
+function vn(e, t) {
   return V((n, r) => r.get(e.map((i) => ({ id: i, type: t }))), [e, t]);
 }
-const pn = q.createContext(new ft());
-function $e() {
+const pn = B.createContext(new ht());
+function Be() {
   return R(pn);
 }
-function vn() {
-  const e = $e(), [t, n] = L({}), r = j(!1);
+function yn() {
+  const e = Be(), [t, n] = L({}), r = q(!1);
   return N(() => () => {
     r.current = !0;
   }, []), [P(
@@ -877,16 +918,16 @@ function vn() {
           height: o.height || a,
           source: o
         });
-        d ? o = d : t[u] || (r.current || n((c) => ({
-          ...c,
+        d ? o = d : t[u] || (r.current || n((l) => ({
+          ...l,
           [u]: "loading"
         })), e.loadService({
           id: u,
           width: o.width || s,
           height: o.height || a
         }).then(() => {
-          r.current || n((c) => ({
-            ...c,
+          r.current || n((l) => ({
+            ...l,
             [u]: "done"
           }));
         }));
@@ -896,8 +937,8 @@ function vn() {
     [e, t]
   ), t];
 }
-function yn(e = {}) {
-  const t = Ue(), n = $(e.canvasId ? { id: e.canvasId } : void 0);
+function xn(e = {}) {
+  const t = Ue(), n = j(e.canvasId ? { id: e.canvasId } : void 0);
   return V(
     (r, i) => {
       if (!n)
@@ -912,15 +953,15 @@ function yn(e = {}) {
     [n]
   );
 }
-function xn(e) {
+function wn(e) {
   return e.type === "SpecificResource" ? [e.source, { selector: e.selector }] : [e, { selector: null }];
 }
-const ee = {}, Be = {
+const ee = {}, je = {
   get(e) {
     return e;
   },
   setMetaValue([e, t, n], r) {
-    const i = Be.getResourceMeta(e, t), o = i ? i[n] : void 0, a = typeof r == "function" ? r(o) : r;
+    const i = je.getResourceMeta(e, t), o = i ? i[n] : void 0, a = typeof r == "function" ? r(o) : r;
     ee[e] = {
       ...ee[e] || {},
       [t]: {
@@ -935,7 +976,7 @@ const ee = {}, Be = {
       return t ? n[t] : n;
   }
 };
-function wn(e = Be) {
+function Sn(e = je) {
   function t(i) {
     const o = i ? typeof i == "string" ? e.get(i) : i : null;
     if (!o)
@@ -949,30 +990,30 @@ function wn(e = Be) {
     const a = Array.isArray(i) ? i : t(i), s = [];
     let u = null;
     const d = [];
-    for (const c of a) {
-      if (c.type !== "Annotation")
+    for (const l of a) {
+      if (l.type !== "Annotation")
         throw new Error("getPaintables() accept either a canvas or list of annotations");
-      const f = Array.from(Array.isArray(c.body) ? c.body : [c.body]);
-      for (const p of f) {
-        const [v, { selector: m }] = xn(p), g = e.get(v), w = (g.type || "unknown").toLowerCase();
+      const f = Array.from(Array.isArray(l.body) ? l.body : [l.body]);
+      for (const v of f) {
+        const [p, { selector: m }] = wn(v), g = e.get(p), w = (g.type || "unknown").toLowerCase();
         if (w === "choice") {
-          const x = e.get(g.items, { parent: g.id }), I = o.length ? o.map((b) => x.find((W) => W.id === b)).filter(Boolean) : [x[0]];
-          I.length === 0 && I.push(x[0]), u = {
+          const x = e.get(g.items, { parent: g.id }), M = o.length ? o.map((b) => x.find((W) => W.id === b)).filter(Boolean) : [x[0]];
+          M.length === 0 && M.push(x[0]), u = {
             type: "single-choice",
             items: x.map((b) => ({
               id: b.id,
               label: b.label,
-              selected: I.indexOf(b) !== -1
+              selected: M.indexOf(b) !== -1
             })),
-            label: v.label
-          }, f.push(...I);
+            label: p.label
+          }, f.push(...M);
           continue;
         }
         s.indexOf(w) === -1 && s.push(w), d.push({
           type: w,
-          annotationId: c.id,
+          annotationId: l.id,
           resource: g,
-          target: c.target,
+          target: l.target,
           selector: m
         });
       }
@@ -993,18 +1034,18 @@ function wn(e = Be) {
     extractChoices: r
   };
 }
-function Sn(e, t = []) {
-  const n = T(), r = y(() => wn(n), []), i = yn({ enableSingleAnnotation: e == null ? void 0 : e.enableSingleAnnotation }), [o, a] = L((e == null ? void 0 : e.defaultChoices) || []), s = y(
+function Pn(e, t = []) {
+  const n = T(), r = y(() => Sn(n), []), i = xn({ enableSingleAnnotation: e == null ? void 0 : e.enableSingleAnnotation }), [o, a] = L((e == null ? void 0 : e.defaultChoices) || []), s = y(
     () => r.getPaintables(i, o),
     [n, i, o, ...t]
   ), d = { makeChoice: P(
-    (c, { deselectOthers: f = !0, deselect: p = !1 } = {}) => {
+    (l, { deselectOthers: f = !0, deselect: v = !1 } = {}) => {
       if (s.choice) {
         if (s.choice.type !== "single-choice")
           throw new Error("Complex choice not supported yet");
-        a((v) => {
-          if (p) {
-            const g = v.filter((w) => w !== c);
+        a((p) => {
+          if (v) {
+            const g = p.filter((w) => w !== l);
             if (g.length === 0) {
               const w = s.items[0].resource.id;
               return w ? [w] : [];
@@ -1012,13 +1053,13 @@ function Sn(e, t = []) {
             return g;
           }
           if (f)
-            return [c];
-          const m = [...v];
+            return [l];
+          const m = [...p];
           if (m.length === 0 && s.items.length) {
             const g = s.items[0].resource.id;
             g && m.push(g);
           }
-          return v.indexOf(c) !== -1 ? v : [...v, c];
+          return p.indexOf(l) !== -1 ? p : [...p, l];
         });
       }
     },
@@ -1026,20 +1067,20 @@ function Sn(e, t = []) {
   ) };
   return [s, d];
 }
-const Pn = ["model/gltf-binary"];
-function bn(e, t) {
+const bn = ["model/gltf-binary"];
+function Cn(e, t) {
   const r = t.items[0].resource;
-  return r.format ? Pn.indexOf(r.format) === -1 ? C(`3D format: ${r.format} is unsupported`) : {
+  return r.format ? bn.indexOf(r.format) === -1 ? E(`3D format: ${r.format} is unsupported`) : {
     type: "3d-model",
     model: r
-  } : C("Unknown format");
+  } : E("Unknown format");
 }
 function En(e, t) {
   var r;
   if (!e.duration)
-    return C("No duration on canvas");
+    return E("No duration on canvas");
   if (t.items.length > 1)
-    return C("Only one audio source supported");
+    return E("Only one audio source supported");
   const n = (r = t.items[0]) == null ? void 0 : r.resource;
   return n ? n.format ? {
     type: "media",
@@ -1067,18 +1108,18 @@ function En(e, t) {
     annotations: {
       pages: []
     }
-  } : C("Audio does not have format") : C("Unknown audio");
+  } : E("Audio does not have format") : E("Unknown audio");
 }
-function Cn(e, t, n) {
+function In(e, t, n) {
   const r = [];
   for (const i of t.items) {
     const o = i.resource && i.resource.type === "SpecificResource" ? i.resource.source : i.resource;
     if (!o.id)
-      return C("No resource Identifier");
+      return E("No resource Identifier");
     let a;
     if (o.service) {
-      const v = ht(o);
-      v[0] && (a = n(v[0], e));
+      const p = gt(o);
+      p[0] && (a = n(p[0], e));
     }
     const s = {
       type: "BoxSelector",
@@ -1089,29 +1130,29 @@ function Cn(e, t, n) {
         height: Number(e.height)
       }
     }, [u, d] = qe(e, i.target);
-    if (d.id !== e.id)
+    if (!(d.id === e.id || decodeURIComponent(d.id || "") === (e.id || "")))
       continue;
     i.resource.width && i.resource.height && (i.resource.width, i.resource.height);
-    let c = i.resource.type === "SpecificResource" ? le(i.resource) : null;
+    let l = i.resource.type === "SpecificResource" ? le(i.resource) : null;
     if (i.selector) {
-      const v = le({
+      const p = le({
         type: "SpecificResource",
         source: i.resource,
         selector: i.selector
       });
-      v && (c = v);
+      p && (l = p);
     }
-    const f = c && c.selector && (c.selector.type === "BoxSelector" || c.selector.type === "TemporalBoxSelector") ? {
+    const f = l && l.selector && (l.selector.type === "BoxSelector" || l.selector.type === "TemporalBoxSelector") ? {
       type: "BoxSelector",
       spatial: {
-        x: c.selector.spatial.x,
-        y: c.selector.spatial.y,
-        width: c.selector.spatial.width,
-        height: c.selector.spatial.height
+        x: l.selector.spatial.x,
+        y: l.selector.spatial.y,
+        width: l.selector.spatial.width,
+        height: l.selector.spatial.height
       }
     } : void 0;
     a && !a.id && (a.id = a["@id"]);
-    const p = {
+    const v = {
       id: o.id,
       type: "Image",
       annotationId: i.annotationId,
@@ -1122,7 +1163,7 @@ function Cn(e, t, n) {
       target: u && u.type !== "PointSelector" ? u : s,
       selector: f
     };
-    r.push(p);
+    r.push(v);
   }
   return {
     type: "images",
@@ -1145,7 +1186,7 @@ function He(e, t = {}, n) {
   }
   return t;
 }
-function An(e, t) {
+function Mn(e, t) {
   const n = [];
   return t.items.forEach((r) => {
     if (r.resource) {
@@ -1157,22 +1198,22 @@ function An(e, t) {
     items: n
   };
 }
-const In = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
-function Mn(e, t) {
+const An = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
+function Tn(e, t) {
   var s;
   const n = t.items.filter((u) => u.type === "video");
   let r = !1;
   if (e.duration || (r = !0), n.length > 1)
-    return C("Only one video source supported");
+    return E("Only one video source supported");
   const i = (s = n[0]) == null ? void 0 : s.resource, o = !!(i.service || []).find(
     (u) => (u.profile || "").includes("youtube.com")
   );
   if (!o && r)
-    return C("Video does not have duration");
+    return E("Video does not have duration");
   if (!i)
-    return C("Unknown video");
+    return E("Unknown video");
   if ((!i.format || i.format === "text/html") && !o)
-    return C("Video does not have format");
+    return E("Video does not have format");
   const a = {
     annotationId: t.items[0].annotationId,
     duration: e.duration,
@@ -1197,9 +1238,9 @@ function Mn(e, t) {
   };
   if (o) {
     a.type = "VideoYouTube";
-    const u = i.id.match(In);
+    const u = i.id.match(An);
     if (!u[1])
-      return C("Video is not known youtube video");
+      return E("Video is not known youtube video");
     a.youTubeId = u[1];
   }
   return {
@@ -1210,62 +1251,62 @@ function Mn(e, t) {
     }
   };
 }
-function Tn({ canvas: e, paintables: t, supports: n, loadImageService: r }) {
+function Rn({ canvas: e, paintables: t, supports: n, loadImageService: r }) {
   if (!e)
     return console.log("No canvas"), ce;
   if (t.types.length === 0)
-    return n.indexOf("empty") !== -1 ? cn(e.width, e.height) : (console.log("No paintables"), ce);
+    return n.indexOf("empty") !== -1 ? ln(e.width, e.height) : (console.log("No paintables"), ce);
   if (t.types.length !== 1)
     if (t.types.length === 2 && t.types.indexOf("text") !== -1)
       t.types = t.types.filter((o) => o !== "text");
     else
-      return n.indexOf("complex-timeline") === -1 ? C("Complex timeline not supported") : C("ComplexTimelineStrategy not yet supported");
+      return n.indexOf("complex-timeline") === -1 ? E("Complex timeline not supported") : E("ComplexTimelineStrategy not yet supported");
   const i = t.types[0];
-  return i === "image" ? n.indexOf("images") === -1 ? C("Image not supported") : Cn(e, t, r) : i === "Model" || i === "model" ? n.indexOf("3d-model") === -1 ? C("3D not supported") : bn(e, t) : i === "textualbody" ? n.indexOf("textual-content") === -1 ? C("Textual content not supported") : An(e, t) : i === "sound" || i === "audio" ? n.indexOf("media") === -1 ? C("Media not supported") : En(e, t) : i === "video" ? n.indexOf("media") === -1 ? C("Media not supported") : Mn(e, t) : ce;
+  return i === "image" ? n.indexOf("images") === -1 ? E("Image not supported") : In(e, t, r) : i === "Model" || i === "model" ? n.indexOf("3d-model") === -1 ? E("3D not supported") : Cn(e, t) : i === "textualbody" ? n.indexOf("textual-content") === -1 ? E("Textual content not supported") : Mn(e, t) : i === "sound" || i === "audio" ? n.indexOf("media") === -1 ? E("Media not supported") : En(e, t) : i === "video" ? n.indexOf("media") === -1 ? E("Media not supported") : Tn(e, t) : ce;
 }
-function Rn(e) {
-  const t = K(), n = $(), r = T(), [i, o] = vn(), { enabledPageIds: a } = gn((e == null ? void 0 : e.annotationPageManagerId) || (t == null ? void 0 : t.id) || (n == null ? void 0 : n.id), {
+function Vn(e) {
+  const t = K(), n = j(), r = T(), [i, o] = yn(), { enabledPageIds: a } = mn((e == null ? void 0 : e.annotationPageManagerId) || (t == null ? void 0 : t.id) || (n == null ? void 0 : n.id), {
     all: !1
-  }), s = mn(a, "AnnotationPage"), u = (e == null ? void 0 : e.strategies) || [
+  }), s = vn(a, "AnnotationPage"), u = (e == null ? void 0 : e.strategies) || [
     "empty",
     "images",
     "media",
     "textual-content",
     "complex-timeline"
-  ], [d, c] = Sn(e, [o]), f = y(() => Tn({ canvas: n, paintables: d, supports: u, loadImageService: i }), [n, d, r, c.makeChoice]);
-  return y(() => f.type === "unknown" ? [f, un] : [
+  ], [d, l] = Pn(e, [o]), f = y(() => Rn({ canvas: n, paintables: d, supports: u, loadImageService: i }), [n, d, r, l.makeChoice]);
+  return y(() => f.type === "unknown" ? [f, cn] : [
     {
       ...f,
       annotations: { pages: s }
     },
-    c
+    l
   ], [f, s]);
 }
-const Vn = (e, t = []) => {
+const On = (e, t = []) => {
   const n = T();
   N(() => {
     e(n);
   }, [n, ...t]);
 };
-function On(e, t, { canvasId: n, manifestId: r } = {}) {
-  const i = T(), o = $e(), a = y(() => gt(i, { imageServiceLoader: o }), [i, o]), [s, u] = L(), d = K(r ? { id: r } : void 0), c = $(n ? { id: n } : void 0), f = c || d, p = j(!1);
-  if (N(() => (p.current = !1, () => {
-    p.current = !0;
+function Ln(e, t, { canvasId: n, manifestId: r } = {}) {
+  const i = T(), o = Be(), a = y(() => mt(i, { imageServiceLoader: o }), [i, o]), [s, u] = L(), d = K(r ? { id: r } : void 0), l = j(n ? { id: n } : void 0), f = l || d, v = q(!1);
+  if (N(() => (v.current = !1, () => {
+    v.current = !0;
   }), []), !f)
     throw new Error("Must be called under a manifest or canvas context.");
-  return Vn(
-    (v) => {
+  return On(
+    (p) => {
       a.getBestThumbnailAtSize(f, e, t).then((m) => {
-        m.best && !p.current && u(m.best);
+        m.best && !v.current && u(m.best);
       });
     },
     [f]
   ), s;
 }
-function Ln(e) {
+function kn(e) {
   return { isMuted: !1, playRequested: !1, isPlaying: !1, isFinished: !1, volume: 100, duration: e };
 }
-function kn(e, t) {
+function Nn(e, t) {
   switch (t.type) {
     case "FINISHED":
       return { ...e, isFinished: !0, isPlaying: !1, playRequested: !1 };
@@ -1288,26 +1329,26 @@ function kn(e, t) {
   }
   return e;
 }
-function Nn(e) {
+function Fn(e) {
   const t = Math.round(e);
   return `${Math.floor(t / 60)}:${`${t % 60}`.padStart(2, "0")}`;
 }
-function pe(e) {
-  const [t, n] = rt(kn, Ln(e.duration)), r = j(null), i = j(null), o = j(null), a = j(!1), s = P(() => {
-    i.current && r.current && (i.current.innerHTML = Nn(r.current.currentTime), o.current && (o.current.style.width = `${r.current.currentTime / e.duration * 100}%`), a.current !== r.current.muted && (a.current = r.current.muted, n(r.current.muted ? { type: "MUTE" } : { type: "UNMUTE" })));
+function me(e) {
+  const [t, n] = it(Nn, kn(e.duration)), r = q(null), i = q(null), o = q(null), a = q(!1), s = P(() => {
+    i.current && r.current && (i.current.innerHTML = Fn(r.current.currentTime), o.current && (o.current.style.width = `${r.current.currentTime / e.duration * 100}%`), a.current !== r.current.muted && (a.current = r.current.muted, n(r.current.muted ? { type: "MUTE" } : { type: "UNMUTE" })));
   }, [e.duration]), u = P(() => {
     r.current && (n({ type: "PLAY_REQUESTED" }), r.current.play().then(() => {
       n({ type: "PLAY" });
     }), s());
   }, [s]), d = P(() => {
-    r.current && (r.current.duration > 0 && r.current.paused ? u() : c());
-  }, [s]), c = P(() => {
+    r.current && (r.current.duration > 0 && r.current.paused ? u() : l());
+  }, [s]), l = P(() => {
     r.current && (r.current.pause(), n({ type: "PAUSE" }), s());
   }, [s]), f = P(() => {
     r.current && (r.current.muted = !r.current.muted, n(r.current.muted ? { type: "MUTE" } : { type: "UNMUTE" }));
-  }, []), p = P(() => {
-    r.current && (r.current.muted = !0, n({ type: "MUTE" }));
   }, []), v = P(() => {
+    r.current && (r.current.muted = !0, n({ type: "MUTE" }));
+  }, []), p = P(() => {
     r.current && (r.current.muted = !1, n({ type: "UNMUTE" }));
   }, []), m = P((x) => {
     r.current && (r.current.muted = !1, r.current.volume = x / 100, n({ type: "SET_VOLUME", volume: x }));
@@ -1324,17 +1365,17 @@ function pe(e) {
   }, [s, e.duration]), N(() => {
     const x = () => {
       n({ type: "FINISHED" });
-    }, I = r.current;
-    return I == null || I.addEventListener("ended", x), () => I == null ? void 0 : I.removeEventListener("ended", x);
+    }, M = r.current;
+    return M == null || M.addEventListener("ended", x), () => M == null ? void 0 : M.removeEventListener("ended", x);
   }, []), [
     { element: r, currentTime: i, progress: o },
     t,
     {
       play: u,
-      pause: c,
+      pause: l,
       playPause: d,
-      mute: p,
-      unmute: v,
+      mute: v,
+      unmute: p,
       toggleMute: f,
       setVolume: m,
       setDurationPercent: g,
@@ -1342,8 +1383,8 @@ function pe(e) {
     }
   ];
 }
-const Fn = U(null), Dn = U(null), Un = U(null);
-function Ye({
+const Un = F(null), Dn = F(null), _n = F(null);
+function $e({
   actions: e,
   state: t,
   children: n,
@@ -1351,12 +1392,12 @@ function Ye({
   progress: i,
   element: o
 }) {
-  return /* @__PURE__ */ l(Un.Provider, { value: { currentTime: r, progress: i, element: o }, children: /* @__PURE__ */ l(Dn.Provider, { value: e, children: /* @__PURE__ */ l(Fn.Provider, { value: t, children: n }) }) });
+  return /* @__PURE__ */ c(_n.Provider, { value: { currentTime: r, progress: i, element: o }, children: /* @__PURE__ */ c(Dn.Provider, { value: e, children: /* @__PURE__ */ c(Un.Provider, { value: t, children: n }) }) });
 }
-function ze({ media: e, children: t }) {
-  const [{ element: n, currentTime: r, progress: i }, o, a] = pe({ duration: e.duration });
-  return /* @__PURE__ */ A(
-    Ye,
+function Ye({ media: e, children: t }) {
+  const [{ element: n, currentTime: r, progress: i }, o, a] = me({ duration: e.duration });
+  return /* @__PURE__ */ I(
+    $e,
     {
       state: o,
       actions: a,
@@ -1364,26 +1405,26 @@ function ze({ media: e, children: t }) {
       progress: i,
       element: n,
       children: [
-        /* @__PURE__ */ l("audio", { ref: n, src: e.url }),
+        /* @__PURE__ */ c("audio", { ref: n, src: e.url }),
         t
       ]
     }
   );
 }
-function Ke({
+function ze({
   media: e,
   mediaControlsDeps: t,
   children: n
 }) {
-  return Y("portal", "audio", ze, { media: e, children: n }, [e, ...t || []]), null;
+  return Y("portal", "audio", Ye, { media: e, children: n }, [e, ...t || []]), null;
 }
-function We({
+function Ke({
   element: e,
   media: t,
   playPause: n
 }) {
-  return /* @__PURE__ */ A("div", { className: "video-container", part: "video-container", onClick: n, children: [
-    /* @__PURE__ */ l("style", { children: `
+  return /* @__PURE__ */ I("div", { className: "video-container", part: "video-container", onClick: n, children: [
+    /* @__PURE__ */ c("style", { children: `
             .video-container {
               position: absolute;
               top: 0;
@@ -1397,23 +1438,23 @@ function We({
               pointer-events: visible;
             }
           ` }),
-    /* @__PURE__ */ l("video", { ref: e, src: t.url, style: { width: "100%", objectFit: "contain" } })
+    /* @__PURE__ */ c("video", { ref: e, src: t.url, style: { width: "100%", objectFit: "contain" } })
   ] });
 }
-function Ge({
+function We({
   media: e,
   mediaControlsDeps: t,
   children: n
 }) {
-  const [{ element: r, currentTime: i, progress: o }, a, s] = pe({ duration: e.duration });
-  return Y("overlay", "video-element", We, {
+  const [{ element: r, currentTime: i, progress: o }, a, s] = me({ duration: e.duration });
+  return Y("overlay", "video-element", Ke, {
     element: r,
     media: e,
     playPause: s.playPause
   }), Y(
     "portal",
     "custom-controls",
-    Ye,
+    $e,
     {
       state: a,
       actions: s,
@@ -1425,9 +1466,9 @@ function Ge({
     [i, a, e, ...t || []]
   ), null;
 }
-function Qe({ model: e }) {
-  return /* @__PURE__ */ A(H, { children: [
-    /* @__PURE__ */ l("style", { children: `
+function Ge({ model: e }) {
+  return /* @__PURE__ */ I($, { children: [
+    /* @__PURE__ */ c("style", { children: `
             .model-container {
               position: absolute;
               top: 0;
@@ -1441,7 +1482,7 @@ function Qe({ model: e }) {
               pointer-events: visible;
             }
           ` }),
-    /* @__PURE__ */ l("div", { className: "model-container", children: /* @__PURE__ */ l(
+    /* @__PURE__ */ c("div", { className: "model-container", children: /* @__PURE__ */ c(
       "model-viewer",
       {
         "interaction-prompt": "none",
@@ -1453,12 +1494,12 @@ function Qe({ model: e }) {
     ) })
   ] });
 }
-function Je({ model: e, name: t }) {
-  return Y("overlay", `model-${t}`, Qe, { model: e }, [e]), null;
+function Qe({ model: e, name: t }) {
+  return Y("overlay", `model-${t}`, Ge, { model: e }, [e]), null;
 }
-function Ze({ style: e }) {
-  const t = $();
-  return !t || !t.height || !t.width ? null : /* @__PURE__ */ l(
+function Je({ style: e }) {
+  const t = j();
+  return !t || !t.height || !t.width ? null : /* @__PURE__ */ c(
     "box",
     {
       interactive: !1,
@@ -1467,18 +1508,18 @@ function Ze({ style: e }) {
     }
   );
 }
-const _n = q.createContext("en");
-function Xe() {
-  return q.useContext(_n);
+const qn = B.createContext("en");
+function Ze() {
+  return B.useContext(qn);
 }
-function Ee(e) {
+function be(e) {
   return e.indexOf("-") !== -1 ? e.slice(0, e.indexOf("-")) : e;
 }
-function jn({ as: e, language: t, children: n, viewingDirection: r, ...i }) {
-  const o = Xe();
-  return y(() => Ee(o) === Ee(t), [o, t]) ? e ? /* @__PURE__ */ l(e, { ...i, children: n }) : /* @__PURE__ */ l("span", { ...i, children: n }) : e ? /* @__PURE__ */ l(e, { ...i, lang: t, dir: r, children: n }) : /* @__PURE__ */ l("span", { ...i, lang: t, dir: r, children: n });
+function Bn({ as: e, language: t, children: n, viewingDirection: r, ...i }) {
+  const o = Ze();
+  return y(() => be(o) === be(t), [o, t]) ? e ? /* @__PURE__ */ c(e, { ...i, children: n }) : /* @__PURE__ */ c("span", { ...i, children: n }) : e ? /* @__PURE__ */ c(e, { ...i, lang: t, dir: r, children: n }) : /* @__PURE__ */ c("span", { ...i, lang: t, dir: r, children: n });
 }
-function qn(e, t, n) {
+function jn(e, t, n) {
   if (t.length === 0)
     return;
   if (t.length === 1)
@@ -1493,62 +1534,69 @@ function qn(e, t, n) {
       return i;
   return t.indexOf("none") !== -1 ? "none" : t.indexOf("@none") !== -1 ? "@none" : t[0];
 }
-const $n = (e, t = []) => {
-  const n = Xe();
+const Hn = (e, t = []) => {
+  const n = Ze();
   return y(() => {
     const r = e();
-    return qn(n, r, []);
+    return jn(n, r, []);
   }, [n, ...t]);
 };
-function Bn(e, t) {
-  const n = $n(() => Object.keys(e || {}), [e]);
+function $n(e, t, n = `
+`) {
+  const r = Hn(() => Object.keys(e || {}), [e]);
   return [
     y(() => {
       if (!e)
         return t || "";
       if (typeof e == "string")
         return e;
-      const r = n ? e[n] : void 0;
-      return r ? typeof r == "string" ? r : r.join(`
-`) : "";
-    }, [n, t, e]),
-    n
+      const i = r ? e[r] : void 0;
+      return i ? typeof i == "string" ? i : i.join(n) : "";
+    }, [r, t, e]),
+    r
   ];
 }
-const Hn = ({ as: e, defaultText: t, enableDangerouslySetInnerHTML: n, children: r, ...i }) => {
-  const [o, a] = Bn(r, t);
-  return a ? /* @__PURE__ */ l(
-    jn,
+function Yn({
+  as: e,
+  defaultText: t,
+  enableDangerouslySetInnerHTML: n,
+  children: r,
+  separator: i,
+  ...o
+}) {
+  const [a, s] = $n(r, t, i);
+  return s ? /* @__PURE__ */ c(
+    Bn,
     {
-      ...i,
+      ...o,
       as: e,
-      language: a,
-      title: n ? void 0 : o,
+      language: s,
+      title: n ? void 0 : a,
       dangerouslySetInnerHTML: n ? {
-        __html: o
+        __html: a
       } : void 0,
-      children: n ? void 0 : o
+      children: n ? void 0 : a
     }
-  ) : e ? /* @__PURE__ */ l(e, { ...i, children: o }) : /* @__PURE__ */ l(
+  ) : e ? /* @__PURE__ */ c(e, { ...o, children: a }) : /* @__PURE__ */ c(
     "span",
     {
-      ...i,
-      title: n ? void 0 : o,
+      ...o,
+      title: n ? void 0 : a,
       dangerouslySetInnerHTML: n ? {
-        __html: o
+        __html: a
       } : void 0,
-      children: n ? void 0 : o
+      children: n ? void 0 : a
     }
   );
-};
-function Yn({
+}
+function zn({
   element: e,
   media: t,
   playPause: n
 }) {
-  const r = j(null);
-  return t.youTubeId ? /* @__PURE__ */ A("div", { className: "video-container", part: "video-container", onClick: n, children: [
-    /* @__PURE__ */ l("style", { children: `
+  const r = q(null);
+  return t.youTubeId ? /* @__PURE__ */ I("div", { className: "video-container", part: "video-container", onClick: n, children: [
+    /* @__PURE__ */ c("style", { children: `
             .video-container {
               position: absolute;
               top: 0;
@@ -1567,7 +1615,7 @@ function Yn({
               object-fit: contain;
             }
           ` }),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       "iframe",
       {
         className: "video-yt",
@@ -1579,19 +1627,19 @@ function Yn({
     )
   ] }) : null;
 }
-function zn({
+function Kn({
   media: e,
   mediaControlsDeps: t,
   children: n
 }) {
-  const [{ element: r, currentTime: i, progress: o }, a, s] = pe({ duration: e.duration });
-  return Y("overlay", "video-element", Yn, {
+  const [{ element: r, currentTime: i, progress: o }, a, s] = me({ duration: e.duration });
+  return Y("overlay", "video-element", zn, {
     element: r,
     media: e,
     playPause: s.playPause
   }), null;
 }
-function et({
+function Xe({
   x: e,
   y: t,
   onChoiceChange: n,
@@ -1602,27 +1650,27 @@ function et({
   renderMediaControls: s,
   viewControlsDeps: u,
   mediaControlsDeps: d,
-  strategies: c,
+  strategies: l,
   throwOnUnknown: f,
-  backgroundStyle: p,
-  alwaysShowBackground: v,
+  backgroundStyle: v,
+  alwaysShowBackground: p,
   keepCanvasScale: m = !1,
   enableSizes: g = !1,
   enableYouTube: w = !0,
   onClickPaintingAnnotation: x,
-  children: I
+  children: M
 }) {
-  const b = $(), W = De(b, ["deep-zoom"]), [Z] = Xt(), E = nn(), M = T(), k = y(() => Me(M), [M]), [h, D] = Rn({
-    strategies: c || ["images"],
+  const b = j(), W = Fe(b, ["deep-zoom"]), [Z] = en(), C = rn(), A = T(), k = y(() => Me(A), [A]), [h, D] = Vn({
+    strategies: l || ["images"],
     defaultChoices: i == null ? void 0 : i.map(({ id: S }) => S)
-  }), ve = h.type === "images" ? h.choice : void 0, tt = y(() => m ? 1 : Math.max(
+  }), ve = h.type === "images" ? h.choice : void 0, et = y(() => m ? 1 : Math.max(
     1,
     ...h.type === "images" ? h.images.map((S) => {
-      var B;
-      return (S.width || 0) / ((B = S.target) == null ? void 0 : B.spatial.width);
+      var H;
+      return (S.width || 0) / ((H = S.target) == null ? void 0 : H.spatial.width);
     }) : []
   ), [m, h]);
-  rn(tt), N(() => {
+  on(et), N(() => {
     r && r(D);
   }, [h.annotations]), N(() => {
     if (i)
@@ -1633,19 +1681,19 @@ function et({
   }, [i]), Ce(() => {
     n && n(ve);
   }, [ve]), Y(
-    E && (h.type === "images" || h.type === "empty" || h.type === "textual-content" && a) ? "overlay" : "none",
+    C && (h.type === "images" || h.type === "empty" || h.type === "textual-content" && a) ? "overlay" : "none",
     `canvas-portal-controls-${b == null ? void 0 : b.id}`,
-    me.Provider,
+    ge.Provider,
     a ? {
-      value: E || null,
+      value: C || null,
       children: a(h)
     } : {},
-    [b, E, h, ...u || []]
+    [b, C, h, ...u || []]
   );
-  const _ = On({ maxWidth: 256, maxHeight: 256 });
+  const _ = Ln({ maxWidth: 256, maxHeight: 256 });
   if (!b)
     return null;
-  const ye = b.accompanyingCanvas, G = _ && _.type === "fixed" ? /* @__PURE__ */ l("world-object", { height: b.height, width: b.width, x: e, y: t, children: /* @__PURE__ */ l(
+  const pe = b.accompanyingCanvas, G = _ && _.type === "fixed" ? /* @__PURE__ */ c("world-object", { height: b.height, width: b.width, x: e, y: t, children: /* @__PURE__ */ c(
     "world-image",
     {
       uri: _.id,
@@ -1664,13 +1712,13 @@ function et({
       throw new Error(h.reason || "Unknown image strategy");
     return null;
   }
-  const xe = /* @__PURE__ */ A(te, { children: [
-    Z ? /* @__PURE__ */ l(fe, { page: Z }) : null,
-    h.annotations && h.annotations.pages ? h.annotations.pages.map((S) => /* @__PURE__ */ l(fe, { page: S }, S.id)) : null,
-    I
-  ] }), nt = h.type === "images" ? h.images.length : 0;
-  return /* @__PURE__ */ A(H, { children: [
-    /* @__PURE__ */ A(
+  const ye = /* @__PURE__ */ I(te, { children: [
+    Z ? /* @__PURE__ */ c(de, { page: Z }) : null,
+    h.annotations && h.annotations.pages ? h.annotations.pages.map((S) => /* @__PURE__ */ c(de, { page: S }, S.id)) : null,
+    M
+  ] }), tt = h.type === "images" ? h.images.length : 0;
+  return /* @__PURE__ */ I($, { children: [
+    /* @__PURE__ */ I(
       "world-object",
       {
         height: b.height,
@@ -1679,84 +1727,84 @@ function et({
         y: t,
         ...W,
         children: [
-          h.type === "empty" || v ? /* @__PURE__ */ l(Ze, { style: p }) : null,
-          h.type === "textual-content" ? h.items.map((S, B) => {
+          h.type === "empty" || p ? /* @__PURE__ */ c(Je, { style: v }) : null,
+          h.type === "textual-content" ? h.items.map((S, H) => {
             var Q;
-            return /* @__PURE__ */ A(H, { children: [
-              /* @__PURE__ */ l(
-                lt,
+            return /* @__PURE__ */ I($, { children: [
+              /* @__PURE__ */ c(
+                dt,
                 {
-                  onClick: x ? (we) => {
-                    we.stopPropagation(), x(S.annotationId, S, we);
+                  onClick: x ? (xe) => {
+                    xe.stopPropagation(), x(S.annotationId, S, xe);
                   } : void 0,
                   target: ((Q = S.target) == null ? void 0 : Q.spatial) || void 0,
-                  children: /* @__PURE__ */ l("div", { "data-textual-content": !0, children: /* @__PURE__ */ l(Hn, { enableDangerouslySetInnerHTML: !0, children: S.text }) })
+                  children: /* @__PURE__ */ c("div", { "data-textual-content": !0, children: /* @__PURE__ */ c(Yn, { enableDangerouslySetInnerHTML: !0, children: S.text }) })
                 },
-                B
+                H
               ),
-              xe
+              ye
             ] });
           }) : null,
-          h.type === "images" ? /* @__PURE__ */ A(H, { children: [
-            h.images.map((S, B) => /* @__PURE__ */ l(
-              je,
+          h.type === "images" ? /* @__PURE__ */ I($, { children: [
+            h.images.map((S, H) => /* @__PURE__ */ c(
+              _e,
               {
                 isStatic: o,
                 image: S,
                 id: S.id,
-                thumbnail: B === 0 ? _ : void 0,
+                thumbnail: H === 0 ? _ : void 0,
                 selector: S.selector,
                 enableSizes: g,
                 onClick: x ? (Q) => {
                   Q.stopPropagation(), x(S.annotationId, S, Q);
                 } : void 0
               },
-              S.id + B
+              S.id + H
             )),
-            xe
+            ye
           ] }) : null,
-          h.type === "3d-model" ? /* @__PURE__ */ l(Je, { model: h.model }) : null,
-          h.type === "media" ? /* @__PURE__ */ l(H, { children: h.media.type === "Sound" ? /* @__PURE__ */ A(Ke, { media: h.media, mediaControlsDeps: d, children: [
+          h.type === "3d-model" ? /* @__PURE__ */ c(Qe, { model: h.model }) : null,
+          h.type === "media" ? /* @__PURE__ */ c($, { children: h.media.type === "Sound" ? /* @__PURE__ */ I(ze, { media: h.media, mediaControlsDeps: d, children: [
             G,
             s ? s(h) : null
-          ] }) : h.media.type === "Video" ? /* @__PURE__ */ A(Ge, { media: h.media, mediaControlsDeps: d, children: [
+          ] }) : h.media.type === "Video" ? /* @__PURE__ */ I(We, { media: h.media, mediaControlsDeps: d, children: [
             G,
             s ? s(h) : null
-          ] }) : h.media.type === "VideoYouTube" && w ? /* @__PURE__ */ A(zn, { media: h.media, mediaControlsDeps: d, children: [
+          ] }) : h.media.type === "VideoYouTube" && w ? /* @__PURE__ */ I(Kn, { media: h.media, mediaControlsDeps: d, children: [
             G,
             s ? s(h) : null
           ] }) : null }) : null
         ]
       },
-      `${b.id}/${h.type}/${nt}`
+      `${b.id}/${h.type}/${tt}`
     ),
-    h.type === "media" && h.media.type === "Sound" && ye ? /* @__PURE__ */ l(ge, { canvas: ye.id, children: /* @__PURE__ */ l(et, { renderViewerControls: a }) }) : null
+    h.type === "media" && h.media.type === "Sound" && pe ? /* @__PURE__ */ c(he, { canvas: pe.id, children: /* @__PURE__ */ c(Xe, { renderViewerControls: a }) }) : null
   ] });
 }
-function Kn() {
+function Wn() {
   const e = R(ie);
   return e && e.vault ? e.vault : Ie();
 }
-const Wn = Ae(function(t, n) {
-  const r = K(), i = Re(), o = Mt(), { ViewerControls: a, MediaControls: s } = t.components || {};
-  if (it(n, () => o, [o]), !r)
-    return /* @__PURE__ */ l("div", {});
+const Gn = Ee(function(t, n) {
+  const r = K(), i = Te(), o = Tt(), { ViewerControls: a, MediaControls: s } = t.components || {};
+  if (ot(n, () => o, [o]), !r)
+    return /* @__PURE__ */ c("div", {});
   let u = 0;
-  return /* @__PURE__ */ A(H, { children: [
+  return /* @__PURE__ */ I($, { children: [
     t.header,
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ c(
       O.Viewer,
       {
         height: t.height,
         mode: t.mode,
-        children: i.map((d, c) => {
+        children: i.map((d, l) => {
           const f = u;
-          return u += d.width + (t.spacing || 0), /* @__PURE__ */ l(ge, { canvas: d.id, children: /* @__PURE__ */ l(
+          return u += d.width + (t.spacing || 0), /* @__PURE__ */ c(he, { canvas: d.id, children: /* @__PURE__ */ c(
             O.RenderCanvas,
             {
               strategies: ["3d-model", "media", "images", "empty", "textual-content"],
-              renderViewerControls: c === 0 && a ? () => /* @__PURE__ */ l(a, {}) : void 0,
-              renderMediaControls: c === 0 && s ? () => /* @__PURE__ */ l(s, {}) : void 0,
+              renderViewerControls: l === 0 && a ? () => /* @__PURE__ */ c(a, {}) : void 0,
+              renderMediaControls: l === 0 && s ? () => /* @__PURE__ */ c(s, {}) : void 0,
               x: f,
               ...t.canvasProps || {},
               children: t.annotations
@@ -1769,12 +1817,23 @@ const Wn = Ae(function(t, n) {
     ),
     t.children
   ] });
-}), O = Ae(function({ children: t, height: n, annotations: r, canvasProps: i, spacing: o, header: a, components: s, mode: u, ...d }, c) {
-  const f = Kn();
-  return /* @__PURE__ */ l(Te, { vault: f, children: /* @__PURE__ */ l(It, { ...d, children: /* @__PURE__ */ l(
-    Wn,
+}), O = Ee(function({
+  children: t,
+  height: n,
+  annotations: r,
+  canvasProps: i,
+  spacing: o,
+  header: a,
+  components: s,
+  mode: u,
+  reuseAtlas: d,
+  ...l
+}, f) {
+  const v = Wn();
+  return /* @__PURE__ */ c(Ae, { vault: v, children: /* @__PURE__ */ c(At, { ...l, children: /* @__PURE__ */ c(
+    Gn,
     {
-      ref: c,
+      ref: f,
       height: n,
       components: s,
       spacing: o,
@@ -1782,22 +1841,23 @@ const Wn = Ae(function(t, n) {
       annotations: r,
       header: a,
       mode: u,
+      reuseAtlas: d,
       children: t
     }
   ) }) });
 });
-O.RenderImage = je;
-O.RenderCanvas = et;
-O.RenderAnnotationPage = fe;
-O.RenderAnnotation = _e;
-O.Viewer = on;
-O.CanvasBackground = Ze;
-O.Audio = Ke;
-O.Video = Ge;
-O.Model = Je;
-O.AudioHTML = ze;
-O.VideoHTML = We;
-O.ModelHTML = Qe;
+O.RenderImage = _e;
+O.RenderCanvas = Xe;
+O.RenderAnnotationPage = de;
+O.RenderAnnotation = De;
+O.Viewer = an;
+O.CanvasBackground = Je;
+O.Audio = ze;
+O.Video = We;
+O.Model = Qe;
+O.AudioHTML = Ye;
+O.VideoHTML = Ke;
+O.ModelHTML = Ge;
 export {
   O as CanvasPanel
 };