react-iiif-vault 1.0.8 → 1.0.10

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

@@ -1,116 +1,137 @@
-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 { globalVault as Ie, Vault as Se } from "@iiif/helpers/vault";
-import { createStylesHelper as Me } from "@iiif/helpers/styles";
+import { jsx as u, jsxs as I, Fragment as $ } from "react/jsx-runtime";
+import B, { createContext as F, Component as rt, createElement as Pe, isValidElement as it, useContext as T, useMemo as y, useState as L, useEffect as N, useCallback as P, useRef as q, useLayoutEffect as Ie, Fragment as te, useReducer as ot, forwardRef as Me, useImperativeHandle as at } from "react";
+import { AtlasAuto as st, ModeContext as ut, mergeStyles as ct, RegionHighlight as lt, TileSet as dt, HTMLPortal as ft } from "@atlas-viewer/atlas";
+import { globalVault as Ae, Vault as be } from "@iiif/helpers/vault";
+import { createStylesHelper as Te } 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 ht } from "@iiif/helpers";
+import { ImageServiceLoader as gt, getImageServices as mt } from "@atlas-viewer/iiif-image-api";
+import { createThumbnailHelper as vt } from "@iiif/helpers/thumbnail";
+const pt = 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 yt extends rt {
+  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 && xt(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 c = {
+        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(c);
+      else if (r)
+        s = Pe(r, c);
+      else if (i === null || it(i))
+        s = i;
+      else
+        throw a;
     }
-    return this.props.children;
-  }, t;
-}(se.Component);
-const yt = {
+    return Pe(pt.Provider, {
+      value: {
+        didCatch: o,
+        error: a,
+        resetErrorBoundary: this.resetErrorBoundary
+      }
+    }, s);
+  }
+}
+function xt() {
+  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 wt = {
   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(wt), z = () => T(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__ */ u(fe.Provider, { value: r, children: t });
 }
-const ie = q.createContext({
+const ie = B.createContext({
   vault: null,
   setVaultInstance: (e) => {
   }
 });
-function Te({
+function he({
   vault: e,
   vaultOptions: t,
   useGlobal: n,
   resources: r,
   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 }) });
+  const [o, a] = L(() => e || (n ? Ae(t) : t ? new be(t) : new be()));
+  return /* @__PURE__ */ u(ie.Provider, { value: { vault: o, setVaultInstance: a }, children: /* @__PURE__ */ u(re, { value: r || {}, children: i }) });
 }
-const T = () => {
-  const { vault: e } = R(ie);
-  if (e === null)
-    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 ge(e) {
+  const t = T(ie);
+  return e || (t && t.vault ? t.vault : Ae());
+}
+function St(e, { noCache: t = !1 } = {}) {
+  const n = typeof e == "string" ? e : e.id, r = ge(), [i, o] = L(n), [a, s] = L(void 0), c = y(() => r.get(n, { skipSelfReturn: !0 }) || void 0, [n, r]), [d, l] = L(c);
   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 = c && !t ? c : await r.load(n), v = f ? f.id || f["@id"] : null;
+        f && i !== v && o(v), l(f);
       } catch (f) {
         s(f);
       }
@@ -121,24 +142,30 @@ function xt(e, { noCache: t = !1 } = {}) {
     requestId: n,
     error: a,
     resource: d,
-    cached: !!(d && d === u)
+    cached: !!(d && d === c)
   };
 }
-function wt(e, t) {
-  const { id: n, isLoaded: r, error: i, resource: o, requestId: a, cached: s } = xt(
+function Pt(e, t) {
+  const { id: n, isLoaded: r, error: i, resource: o, requestId: a, cached: s } = St(
     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 bt({ manifest: e, children: t }) {
+  return /* @__PURE__ */ u(re, { value: { manifest: e }, children: t });
 }
-function ge({ canvas: e, children: t }) {
-  return /* @__PURE__ */ l(re, { value: { canvas: e }, children: t });
+function me({ canvas: e, children: t }) {
+  return /* @__PURE__ */ u(re, { value: { canvas: e }, children: t });
 }
-function V(e, t = []) {
-  const n = T(), [r, i] = L(() => e(n.getState(), n));
+const O = () => {
+  const { vault: e } = T(ie);
+  if (e === null)
+    throw new Error("Vault not found. Ensure you have your provider set up correctly.");
+  return e;
+};
+function R(e, t = []) {
+  const n = O(), [r, i] = L(() => e(n.getState(), n));
   return N(() => n.subscribe(
     (o) => e(o, n),
     (o) => {
@@ -147,18 +174,18 @@ function V(e, t = []) {
     !1
   ), t), r;
 }
-const oe = q.createContext([]);
+const oe = B.createContext([]);
 function Re() {
-  const e = R(oe);
-  return V(
+  const e = T(oe);
+  return R(
     (t) => e.map((n) => t.iiif.entities.Canvas[n]).filter(Boolean),
     [e]
   );
 }
 function K(e = {}, t = []) {
   const { id: n, selector: r } = e, i = z();
-  T();
-  const o = n || i.manifest, a = V(
+  O();
+  const o = n || i.manifest, a = R(
     (s) => o ? s.iiif.entities.Manifest[o] : void 0,
     [o]
   );
@@ -167,8 +194,8 @@ 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 Ct({ range: e, children: t }) {
+  return /* @__PURE__ */ u(re, { value: { range: e }, children: t });
 }
 function Ve(e, t) {
   var r;
@@ -180,82 +207,84 @@ function Ve(e, t) {
     }
   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 Et(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"), c = t.type === "Manifest" ? t.items : Ve(e, t);
   if (a)
-    return [u, [u.map((m, g) => g)]];
+    return [c, [c.map((m, g) => g)]];
   if (s || !o || n)
-    return [u, u.map((m, g) => [g])];
+    return [c, c.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;
-  for (let m = 0; m < u.length; m++) {
-    const g = e.get(u[m]);
+  let v = 0, p = !1;
+  for (let m = 0; m < c.length; m++) {
+    const g = e.get(c[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(), [c, 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]);
+function It(e = {}, t = []) {
+  const { id: n, selector: r } = e, i = z(), o = n || i.range, a = R((s) => o ? s.iiif.entities.Range[o] : void 0, [o]);
   return y(() => {
     if (a)
       return r ? r(a) : a;
   }, [a, r, ...t]);
 }
-function Ct({ startCanvas: e, disablePaging: t }) {
+function Mt({ startCanvas: e, disablePaging: t }) {
   var m;
-  const n = T(), r = K(), i = Et(), [o, a] = L(void 0), s = i || r;
+  const n = O(), r = K(), i = It(), [o, a] = L(void 0), s = i || r;
   if (!s)
     throw new Error("Nothing selected");
-  const [u, d] = y(
-    () => bt(n, s, { disablePaging: t }),
-    [n, s]
-  ), c = P(
+  const [c, d] = y(
+    () => Et(n, s, { disablePaging: t }),
+    [n, s, t]
+  ), l = P(
     (g) => {
       const w = d.findIndex((x) => x.includes(g));
       a(w === -1 ? 0 : w);
     },
-    [u, d]
+    [c, d]
   ), f = P(
     (g) => {
-      const w = u.findIndex((x) => x.id === g);
-      w !== -1 ? c(w) : a(0);
+      const w = c.findIndex((x) => x.id === g);
+      w !== -1 ? l(w) : a(0);
     },
-    [u, d]
-  ), p = P(() => {
-    a((g) => g >= d.length ? g : g + 1);
-  }, [d]), v = P(() => {
+    [c, d]
+  ), 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)), {
-    visibleItems: ((m = d[o]) == null ? void 0 : m.map((g) => u[g].id)) || [],
+    visibleItems: ((m = d[o]) == null ? void 0 : m.map((g) => c[g].id)) || [],
     cursor: o,
-    items: u,
+    items: c,
     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,55 +292,71 @@ 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({
+  const t = K(), {
+    cursor: n,
+    visibleItems: r,
+    next: i,
+    sequence: o,
+    items: a,
+    setCanvasIndex: s,
+    setCanvasId: c,
+    previous: d,
+    setSequenceIndex: l,
+    hasNext: f,
+    hasPrevious: v
+  } = Mt({
     startCanvas: e.startCanvas,
     disablePaging: e.pagingEnabled === !1
-  }), f = y(
+  }), p = y(
     () => ({
       sequence: o,
       items: a,
       // Extra functions.
-      setCurrentCanvasId: u,
+      setCurrentCanvasId: c,
       nextCanvas: i,
       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, c, 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." }));
-}
-function It(e) {
-  const t = wt(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." });
-  if (t.error)
-    return /* @__PURE__ */ l("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 });
-}
-function Mt() {
-  return R(ae);
-}
-function Tt() {
+  return t ? r.length === 0 ? null : /* @__PURE__ */ u(ae.Provider, { value: p, children: /* @__PURE__ */ u(oe.Provider, { value: r, children: /* @__PURE__ */ u(me, { canvas: r[0], children: e.children }) }) }) : (console.warn("The manifest passed to the provider is not a valid IIIF manifest."), /* @__PURE__ */ u("div", { children: "Sorry, something went wrong." }));
+}
+function Tt(e) {
+  const t = ge(e.vault), n = Pt(e.manifest);
+  if (!n)
+    return console.warn("The manifest passed to the provider is not a valid IIIF manifest."), /* @__PURE__ */ u("div", { children: "Sorry, something went wrong." });
+  if (n.error)
+    return /* @__PURE__ */ u("div", { children: n.error.toString() });
+  if (!n.isLoaded)
+    return /* @__PURE__ */ u("div", { children: "Loading..." });
+  const r = /* @__PURE__ */ u(At, { ...e, children: e.children });
+  return /* @__PURE__ */ u(he, { vault: t, children: /* @__PURE__ */ u(bt, { manifest: n.id, children: e.rangeId ? /* @__PURE__ */ u(Ct, { range: e.rangeId, children: r }) : r }) });
+}
+function Rt() {
+  return T(ae);
+}
+function Vt() {
   return {
-    VaultContext: R(ie),
-    ResourceContext: R(he),
-    SimpleViewerReactContext: R(ae),
-    VisibleCanvasReactContext: R(oe)
+    VaultContext: T(ie),
+    ResourceContext: T(fe),
+    SimpleViewerReactContext: T(ae),
+    VisibleCanvasReactContext: T(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 Ot(e) {
+  return /* @__PURE__ */ u(he, { vault: e.bridge.VaultContext.vault || void 0, resources: e.bridge.ResourceContext, children: /* @__PURE__ */ u(oe.Provider, { value: e.bridge.VisibleCanvasReactContext, children: /* @__PURE__ */ u(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,28 +365,28 @@ 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,
+}, Lt = "@iiif/IMPORT_ENTITIES", kt = "@iiif/MODIFY_ENTITY_FIELD", Nt = "@iiif/REORDER_ENTITY_FIELD", Ft = "@iiif/ADD_REFERENCE", Ut = "@iiif/UPDATE_REFERENCE", Dt = "@iiif/REMOVE_REFERENCE", _t = "@iiif/ADD_METADATA", qt = "@iiif/REMOVE_METADATA", Bt = "@iiif/UPDATE_METADATA", jt = "@iiif/REORDER_METADATA", Ht = U(Lt)(), $t = U(kt)(), Yt = U(Nt)(), zt = U(Ft)(), Kt = U(Dt)(), Wt = U(Ut)(), Gt = U(_t)(), Qt = U(Bt)(), Jt = U(qt)(), Zt = U(jt)(), ue = {
+  importEntities: Ht,
   modifyEntityField: $t,
-  reorderEntityField: Bt,
-  addReference: Ht,
-  removeReference: Yt,
-  updateReference: zt,
-  addMetadata: Kt,
-  removeMetadata: Gt,
-  updateMetadata: Wt,
-  reorderMetadata: Qt
+  reorderEntityField: Yt,
+  addReference: zt,
+  removeReference: Kt,
+  updateReference: Wt,
+  addMetadata: Gt,
+  removeMetadata: Jt,
+  updateMetadata: Qt,
+  reorderMetadata: Zt
 };
-function Jt() {
-  const t = T().getStore();
+function Xt() {
+  const t = O().getStore();
   return y(() => (n) => t.dispatch(n), [t]);
 }
-function be(e) {
+function Ce(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)}`, []);
-  Ce(() => {
+function en() {
+  const e = O(), t = q([]), n = Xt(), r = y(() => `vault://annotation-page/${(/* @__PURE__ */ new Date()).getTime()}/${Math.round(Math.random() * 1e9).toString(16)}`, []);
+  Ie(() => {
     const s = {
       id: r,
       type: "AnnotationPage",
@@ -369,19 +414,19 @@ function Zt() {
       })
     );
   }, [r]);
-  const i = V(
+  const i = R(
     (s) => r ? s.iiif.entities.AnnotationPage[r] : null,
     [r]
   ), o = P(
-    (s, u) => {
+    (s, c) => {
       if (r) {
-        if (be(s)) {
+        if (Ce(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",
@@ -390,7 +435,7 @@ function Zt() {
               id: s,
               type: "Annotation"
             },
-            index: u
+            index: c
           })
         ));
       }
@@ -398,7 +443,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 && (Ce(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 +465,9 @@ function Zt() {
     }
   ];
 }
-const Oe = U(null);
-function Xt() {
-  const e = R(Oe);
+const Oe = F(null);
+function tn() {
+  const e = T(Oe);
   return [
     e.fullPage,
     {
@@ -431,9 +476,9 @@ function Xt() {
     }
   ];
 }
-function en({ children: e }) {
-  const [t, { addAnnotation: n, removeAnnotation: r }] = Zt();
-  return /* @__PURE__ */ l(
+function nn({ children: e }) {
+  const [t, { addAnnotation: n, removeAnnotation: r }] = en();
+  return /* @__PURE__ */ u(
     Oe.Provider,
     {
       value: y(() => ({ fullPage: t, addAnnotation: n, removeAnnotation: r }), [t]),
@@ -441,91 +486,91 @@ function en({ children: e }) {
     }
   );
 }
-function tn({
+function rn({
   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__ */ u("h3", { children: "Error occurred" }),
+    /* @__PURE__ */ u("p", { children: r.message }),
+    /* @__PURE__ */ u("button", { onClick: i, children: "Reset" })
   ] });
 }
-const me = U(null);
-function nn() {
-  return R(me);
+const ve = F(null);
+function on() {
+  return T(ve);
 }
-const Le = U(
+const Le = F(
   () => {
   }
-), ke = U(
+), ke = F(
   () => {
   }
 );
 function Y(e, t, n, r, i = []) {
-  const o = R(e === "portal" ? ke : Le);
+  const o = T(e === "portal" ? ke : Le);
   N(() => (e !== "none" && o(t, n, r), () => {
     o(t, null);
   }), [t, e, o, ...i]);
 }
-function $(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]);
+function j(e = {}, t = []) {
+  const { id: n, selector: r } = e, i = z(), o = n || i.canvas, a = R((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 Ne = F(() => {
 });
-function rn(e) {
-  const t = $(), n = R(Ne);
+function an(e) {
+  const t = j(), n = T(Ne);
   N(() => t && t.id ? (n(t.id, e), () => n(t.id, -1)) : () => {
   }, [t, e]);
 }
-function on({
+function sn({
   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 = Vt(), c = t || rn, [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(yt, { resetKeys: [], fallbackRender: (C) => /* @__PURE__ */ u(c, { ...i, ...C }), children: [
+    /* @__PURE__ */ u(
+      st,
       {
         ...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__ */ u($, { children: f.map(([C, { element: A, props: k }]) => /* @__PURE__ */ u(B.Fragment, { children: /* @__PURE__ */ u(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__ */ u(ve.Provider, { value: o, children: /* @__PURE__ */ u(Ne.Provider, { value: b, children: /* @__PURE__ */ u(Le.Provider, { value: W, children: /* @__PURE__ */ u(ke.Provider, { value: Z, children: /* @__PURE__ */ u(Ot, { bridge: s, children: /* @__PURE__ */ u(ut.Provider, { value: i.mode || "explore", children: /* @__PURE__ */ u(nn, { children: e }) }) }) }) }) }) })
       }
     ),
-    /* @__PURE__ */ l("div", { children: m.map(([E, { element: M, props: k }]) => /* @__PURE__ */ l(q.Fragment, { children: /* @__PURE__ */ l(M, { ...k || {} }) }, E)) })
+    /* @__PURE__ */ u("div", { children: m.map(([C, { element: A, props: k }]) => /* @__PURE__ */ u(B.Fragment, { children: /* @__PURE__ */ u(A, { ...k || {} }) }, C)) })
   ] });
 }
 const X = {}, Fe = {
@@ -548,7 +593,7 @@ const X = {}, Fe = {
       return t ? n[t] : n;
   }
 };
-function an(e = Fe) {
+function un(e = Fe) {
   return {
     addEventListener(t, n, r, i) {
       if (t)
@@ -577,36 +622,36 @@ function an(e = Fe) {
       if (i && r)
         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);
+            const c = e.get(r);
+            for (const { callback: d, scope: l } of i[a] || [])
+              (!l || n && l.indexOf(n) !== -1) && d(s, c);
           };
       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 Ue(e, t) {
+  const n = O(), r = y(() => un(n), [n]), i = R(() => 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) {
-  const n = T(), r = y(() => Me(n), [n]);
-  return V(() => {
+  const n = O(), r = y(() => Te(n), [n]);
+  return R(() => {
     if (!e)
       return null;
     const i = r.getAppliedStyles(e.id);
     return i ? t ? i[t] : i : void 0;
   }, [e, t]);
 }
-function Ue(e = {}, t = []) {
-  const { id: n, selector: r } = e, i = z(), o = T(), a = n || i.annotation, s = V(
+function De(e = {}, t = []) {
+  const { id: n, selector: r } = e, i = z(), o = O(), a = n || i.annotation, s = R(
     (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) : [],
+  ), c = R(
+    (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(() => {
@@ -614,11 +659,11 @@ function Ue(e = {}, t = []) {
       return;
     const d = {
       ...s,
-      body: u,
+      body: c,
       target: le(s.target, { typeMap: o.getState().iiif.mapping })
     };
     return r ? r(d) : d;
-  }, [s, r, u, ...t]);
+  }, [s, r, c, ...t]);
 }
 const _e = ({
   id: e,
@@ -626,9 +671,9 @@ const _e = ({
   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 = De({ id: e }), o = ne(i, "atlas"), a = ne(i, "html"), s = Ue(i, ["atlas"]), c = j(), d = y(() => ct(t, o), [t, o]);
+  return c && i && i.target && i.target.selector && i.target.selector.type === "BoxSelector" && i.target.source && (i.target.source.id === c.id || i.target.source === c.id) ? /* @__PURE__ */ u(
+    lt,
     {
       id: i.id,
       isEditing: !0,
@@ -645,8 +690,8 @@ const _e = ({
     }
   ) : null;
 };
-function sn(e = {}, t = []) {
-  const { id: n, selector: r } = e, i = z(), o = n || i.annotationPage, a = V(
+function cn(e = {}, t = []) {
+  const { id: n, selector: r } = e, i = z(), o = n || i.annotationPage, a = R(
     (s) => o ? s.iiif.entities.AnnotationPage[o] : void 0,
     [o]
   );
@@ -655,13 +700,13 @@ 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(
+  const n = cn({ id: t.id }) || t, r = ne(n, "atlas"), i = ne(n, "html");
+  return R((a) => n.id ? a.iiif.entities.AnnotationPage[n.id] : null, []), /* @__PURE__ */ u(te, { children: (o = n.items) == null ? void 0 : o.map((a) => /* @__PURE__ */ u(
     _e,
     {
       id: a.id,
@@ -671,7 +716,7 @@ const fe = ({
     a.id
   )) });
 };
-function je({
+function qe({
   id: e,
   image: t,
   thumbnail: n,
@@ -680,25 +725,25 @@ function je({
   y: o = 0,
   children: a,
   selector: s,
-  onClick: u,
+  onClick: c,
   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__ */ u(
     "world-object",
     {
       x: i + t.target.spatial.x,
       y: o + t.target.spatial.y,
       width: t.target.spatial.width,
       height: t.target.spatial.height,
-      onClick: u,
-      children: t.service ? /* @__PURE__ */ A(te, { children: [
-        /* @__PURE__ */ l(
-          ct,
+      onClick: c,
+      children: t.service ? /* @__PURE__ */ I(te, { children: [
+        /* @__PURE__ */ u(
+          dt,
           {
             tiles: {
               id: t.service.id || t.service["@id"] || "unknown",
@@ -711,23 +756,23 @@ 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__ */ u(
           "world-image",
           {
-            onClick: u,
+            onClick: c,
             uri: t.id,
             target: { x: 0, y: 0, width: t.target.spatial.width, height: t.target.spatial.height },
             display: t.width && t.height ? {
               width: t.width,
               height: t.height
             } : void 0,
-            crop: c
+            crop: l
           }
         ),
         a
@@ -736,8 +781,8 @@ function je({
     e + (t.service ? "server" : "no-service")
   );
 }
-function qe(e, t) {
-  const { selector: n, source: r } = dt(t);
+function Be(e, t) {
+  const { selector: n, source: r } = ht(t);
   if (r.id !== e.id)
     return [null, r];
   const i = {
@@ -758,17 +803,17 @@ function qe(e, t) {
     r
   ];
 }
-const un = {
+const ln = {
   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: [] } }), dn = (e, t) => ({ type: "empty", width: e, height: t, annotations: { pages: [] }, image: null, images: [] });
+function fn(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) {
-  return V(
+function hn(e, t) {
+  return R(
     (n) => {
       const r = [];
       if (!e)
@@ -776,7 +821,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 = fn(n, o);
           a && a.views && a.views[e] && r.push(o);
         }
       return r;
@@ -784,7 +829,7 @@ function dn(e, t) {
     [e, t]
   );
 }
-function fn({
+function gn({
   canvas: e,
   manifest: t,
   all: n,
@@ -804,21 +849,21 @@ function fn({
       i.indexOf(o.id) === -1 && i.push(o.id);
   return i;
 }
-function hn(e, t) {
+function mn(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 vn(e, t = {}) {
+  const n = O(), r = K(), i = j(), o = Re(), a = y(() => gn({
     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 = hn(e, t.all ? void 0 : a), c = P(
+    (l) => {
       e && n.setMetaValue(
-        [c, "annotationPageManager", "views"],
+        [l, "annotationPageManager", "views"],
         (f) => f && !f[e] ? f : {
           ...f || {},
           [e]: !1
@@ -827,67 +872,67 @@ 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 = mn(v, g);
+          w && w.views && w.views[e] && p.push(g);
         }
       }
-      for (const m of v)
-        u(m);
+      for (const m of p)
+        c(m);
       n.setMetaValue(
-        [c, "annotationPageManager", "views"],
+        [l, "annotationPageManager", "views"],
         (m) => m && m[e] ? m : {
           ...m || {},
           [e]: !0
         }
       );
     },
-    [e, u, n]
+    [e, c, n]
   );
   return {
     availablePageIds: a,
     enabledPageIds: s,
     setPageEnabled: d,
-    setPageDisabled: u
+    setPageDisabled: c
   };
 }
-function mn(e, t) {
-  return V((n, r) => r.get(e.map((i) => ({ id: i, type: t }))), [e, t]);
+function pn(e, t) {
+  return R((n, r) => r.get(e.map((i) => ({ id: i, type: t }))), [e, t]);
 }
-const pn = q.createContext(new ft());
-function $e() {
-  return R(pn);
+const yn = B.createContext(new gt());
+function je() {
+  return T(yn);
 }
-function vn() {
-  const e = $e(), [t, n] = L({}), r = j(!1);
+function xn() {
+  const e = je(), [t, n] = L({}), r = q(!1);
   return N(() => () => {
     r.current = !0;
   }, []), [P(
     (o, { height: a, width: s }) => {
       if (o) {
-        const u = o.id || o["@id"], d = e.loadServiceSync({
-          id: u,
+        const c = o.id || o["@id"], d = e.loadServiceSync({
+          id: c,
           width: o.width || s,
           height: o.height || a,
           source: o
         });
-        d ? o = d : t[u] || (r.current || n((c) => ({
-          ...c,
-          [u]: "loading"
+        d ? o = d : t[c] || (r.current || n((l) => ({
+          ...l,
+          [c]: "loading"
         })), e.loadService({
-          id: u,
+          id: c,
           width: o.width || s,
           height: o.height || a
         }).then(() => {
-          r.current || n((c) => ({
-            ...c,
-            [u]: "done"
+          r.current || n((l) => ({
+            ...l,
+            [c]: "done"
           }));
         }));
       }
@@ -896,9 +941,9 @@ function vn() {
     [e, t]
   ), t];
 }
-function yn(e = {}) {
-  const t = Ue(), n = $(e.canvasId ? { id: e.canvasId } : void 0);
-  return V(
+function wn(e = {}) {
+  const t = De(), n = j(e.canvasId ? { id: e.canvasId } : void 0);
+  return R(
     (r, i) => {
       if (!n)
         return [];
@@ -912,15 +957,15 @@ function yn(e = {}) {
     [n]
   );
 }
-function xn(e) {
+function Sn(e) {
   return e.type === "SpecificResource" ? [e.source, { selector: e.selector }] : [e, { selector: null }];
 }
-const ee = {}, Be = {
+const ee = {}, He = {
   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 = He.getResourceMeta(e, t), o = i ? i[n] : void 0, a = typeof r == "function" ? r(o) : r;
     ee[e] = {
       ...ee[e] || {},
       [t]: {
@@ -935,44 +980,44 @@ const ee = {}, Be = {
       return t ? n[t] : n;
   }
 };
-function wn(e = Be) {
+function Pn(e = He) {
   function t(i) {
     const o = i ? typeof i == "string" ? e.get(i) : i : null;
     if (!o)
       return [];
     const a = e.get(o.items, { parent: o }), s = [];
-    for (const u of a)
-      s.push(...e.get(u.items, { parent: u }));
+    for (const c of a)
+      s.push(...e.get(c.items, { parent: c }));
     return s;
   }
   function n(i, o = []) {
     const a = Array.isArray(i) ? i : t(i), s = [];
-    let u = null;
+    let c = 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 }] = Sn(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]), c = {
             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
         });
       }
@@ -980,7 +1025,7 @@ function wn(e = Be) {
     return {
       types: s,
       items: d,
-      choice: u
+      choice: c
     };
   }
   function r(i) {
@@ -993,18 +1038,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 bn(e, t = []) {
+  const n = O(), r = y(() => Pn(n), []), i = wn({ 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 +1057,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 +1071,20 @@ function Sn(e, t = []) {
   ) };
   return [s, d];
 }
-const Pn = ["model/gltf-binary"];
-function bn(e, t) {
+const Cn = ["model/gltf-binary"];
+function En(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 ? Cn.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) {
+function In(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 +1112,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 Mn(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 = mt(o);
+      p[0] && (a = n(p[0], e));
     }
     const s = {
       type: "BoxSelector",
@@ -1088,41 +1133,41 @@ function Cn(e, t, n) {
         width: Number(e.width),
         height: Number(e.height)
       }
-    }, [u, d] = qe(e, i.target);
-    if (d.id !== e.id)
+    }, [c, d] = Be(e, i.target);
+    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,
-      width: Number(u || f ? o.width : e.width),
-      height: Number(u || f ? o.height : e.height),
+      width: Number(c || f ? o.width : e.width),
+      height: Number(c || f ? o.height : e.height),
       service: a,
       sizes: a && a.sizes ? a.sizes : o.width && o.height ? [{ width: o.width, height: o.height }] : [],
-      target: u && u.type !== "PointSelector" ? u : s,
+      target: c && c.type !== "PointSelector" ? c : s,
       selector: f
     };
-    r.push(p);
+    r.push(v);
   }
   return {
     type: "images",
@@ -1131,7 +1176,7 @@ function Cn(e, t, n) {
     choice: t.choice
   };
 }
-function He(e, t = {}, n) {
+function $e(e, t = {}, n) {
   const r = e.language || n || "none";
   switch (e.type) {
     case "TextualBody": {
@@ -1141,7 +1186,7 @@ function He(e, t = {}, n) {
     case "List":
     case "Composite":
     case "Choice":
-      e.items && e.items.forEach((i) => He(i, t, r));
+      e.items && e.items.forEach((i) => $e(i, t, r));
   }
   return t;
 }
@@ -1149,30 +1194,30 @@ function An(e, t) {
   const n = [];
   return t.items.forEach((r) => {
     if (r.resource) {
-      const [i] = qe(e, r.target);
-      n.push({ annotationId: r.annotationId, text: He(r.resource), target: i });
+      const [i] = Be(e, r.target);
+      n.push({ annotationId: r.annotationId, text: $e(r.resource), target: i });
     }
   }), {
     type: "textual-content",
     items: n
   };
 }
-const In = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
-function Mn(e, t) {
+const Tn = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
+function Rn(e, t) {
   var s;
-  const n = t.items.filter((u) => u.type === "video");
+  const n = t.items.filter((c) => c.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")
+    (c) => (c.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,10 +1242,10 @@ function Mn(e, t) {
   };
   if (o) {
     a.type = "VideoYouTube";
-    const u = i.id.match(In);
-    if (!u[1])
-      return C("Video is not known youtube video");
-    a.youTubeId = u[1];
+    const c = i.id.match(Tn);
+    if (!c[1])
+      return E("Video is not known youtube video");
+    a.youTubeId = c[1];
   }
   return {
     type: "media",
@@ -1210,62 +1255,62 @@ function Mn(e, t) {
     }
   };
 }
-function Tn({ canvas: e, paintables: t, supports: n, loadImageService: r }) {
+function Vn({ 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 ? dn(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") : Mn(e, t, r) : i === "Model" || i === "model" ? n.indexOf("3d-model") === -1 ? E("3D not supported") : En(e, t) : i === "textualbody" ? n.indexOf("textual-content") === -1 ? E("Textual content not supported") : An(e, t) : i === "sound" || i === "audio" ? n.indexOf("media") === -1 ? E("Media not supported") : In(e, t) : i === "video" ? n.indexOf("media") === -1 ? E("Media not supported") : Rn(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 On(e) {
+  const t = K(), n = j(), r = O(), [i, o] = xn(), { enabledPageIds: a } = vn((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 = pn(a, "AnnotationPage"), c = (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] = bn(e, [o]), f = y(() => Vn({ canvas: n, paintables: d, supports: c, loadImageService: i }), [n, d, r, l.makeChoice]);
+  return y(() => f.type === "unknown" ? [f, ln] : [
     {
       ...f,
       annotations: { pages: s }
     },
-    c
+    l
   ], [f, s]);
 }
-const Vn = (e, t = []) => {
-  const n = T();
+const Ln = (e, t = []) => {
+  const n = O();
   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 kn(e, t, { canvasId: n, manifestId: r } = {}) {
+  const i = O(), o = je(), a = y(() => vt(i, { imageServiceLoader: o }), [i, o]), [s, c] = 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 Ln(
+    (p) => {
       a.getBestThumbnailAtSize(f, e, t).then((m) => {
-        m.best && !p.current && u(m.best);
+        m.best && !v.current && c(m.best);
       });
     },
     [f]
   ), s;
 }
-function Ln(e) {
+function Nn(e) {
   return { isMuted: !1, playRequested: !1, isPlaying: !1, isFinished: !1, volume: 100, duration: e };
 }
-function kn(e, t) {
+function Fn(e, t) {
   switch (t.type) {
     case "FINISHED":
       return { ...e, isFinished: !0, isPlaying: !1, playRequested: !1 };
@@ -1288,26 +1333,26 @@ function kn(e, t) {
   }
   return e;
 }
-function Nn(e) {
+function Un(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" })));
-  }, [e.duration]), u = P(() => {
+  const [t, n] = ot(Fn, Nn(e.duration)), r = q(null), i = q(null), o = q(null), a = q(!1), s = P(() => {
+    i.current && r.current && (i.current.innerHTML = Un(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]), c = 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 ? c() : 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 +1369,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,
+      play: c,
+      pause: l,
       playPause: d,
-      mute: p,
-      unmute: v,
+      mute: v,
+      unmute: p,
       toggleMute: f,
       setVolume: m,
       setDurationPercent: g,
@@ -1342,7 +1387,7 @@ function pe(e) {
     }
   ];
 }
-const Fn = U(null), Dn = U(null), Un = U(null);
+const Dn = F(null), _n = F(null), qn = F(null);
 function Ye({
   actions: e,
   state: t,
@@ -1351,11 +1396,11 @@ 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__ */ u(qn.Provider, { value: { currentTime: r, progress: i, element: o }, children: /* @__PURE__ */ u(_n.Provider, { value: e, children: /* @__PURE__ */ u(Dn.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(
+  return /* @__PURE__ */ I(
     Ye,
     {
       state: o,
@@ -1364,7 +1409,7 @@ function ze({ media: e, children: t }) {
       progress: i,
       element: n,
       children: [
-        /* @__PURE__ */ l("audio", { ref: n, src: e.url }),
+        /* @__PURE__ */ u("audio", { ref: n, src: e.url }),
         t
       ]
     }
@@ -1382,8 +1427,8 @@ function We({
   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__ */ u("style", { children: `
             .video-container {
               position: absolute;
               top: 0;
@@ -1397,7 +1442,7 @@ function We({
               pointer-events: visible;
             }
           ` }),
-    /* @__PURE__ */ l("video", { ref: e, src: t.url, style: { width: "100%", objectFit: "contain" } })
+    /* @__PURE__ */ u("video", { ref: e, src: t.url, style: { width: "100%", objectFit: "contain" } })
   ] });
 }
 function Ge({
@@ -1426,8 +1471,8 @@ function Ge({
   ), null;
 }
 function Qe({ model: e }) {
-  return /* @__PURE__ */ A(H, { children: [
-    /* @__PURE__ */ l("style", { children: `
+  return /* @__PURE__ */ I($, { children: [
+    /* @__PURE__ */ u("style", { children: `
             .model-container {
               position: absolute;
               top: 0;
@@ -1441,7 +1486,7 @@ function Qe({ model: e }) {
               pointer-events: visible;
             }
           ` }),
-    /* @__PURE__ */ l("div", { className: "model-container", children: /* @__PURE__ */ l(
+    /* @__PURE__ */ u("div", { className: "model-container", children: /* @__PURE__ */ u(
       "model-viewer",
       {
         "interaction-prompt": "none",
@@ -1457,8 +1502,8 @@ function Je({ model: e, name: t }) {
   return Y("overlay", `model-${t}`, Qe, { model: e }, [e]), null;
 }
 function Ze({ style: e }) {
-  const t = $();
-  return !t || !t.height || !t.width ? null : /* @__PURE__ */ l(
+  const t = j();
+  return !t || !t.height || !t.width ? null : /* @__PURE__ */ u(
     "box",
     {
       interactive: !1,
@@ -1467,18 +1512,18 @@ function Ze({ style: e }) {
     }
   );
 }
-const _n = q.createContext("en");
+const Bn = B.createContext("en");
 function Xe() {
-  return q.useContext(_n);
+  return B.useContext(Bn);
 }
 function Ee(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 });
+  return y(() => Ee(o) === Ee(t), [o, t]) ? e ? /* @__PURE__ */ u(e, { ...i, children: n }) : /* @__PURE__ */ u("span", { ...i, children: n }) : e ? /* @__PURE__ */ u(e, { ...i, lang: t, dir: r, children: n }) : /* @__PURE__ */ u("span", { ...i, lang: t, dir: r, children: n });
 }
-function qn(e, t, n) {
+function Hn(e, t, n) {
   if (t.length === 0)
     return;
   if (t.length === 1)
@@ -1497,58 +1542,65 @@ const $n = (e, t = []) => {
   const n = Xe();
   return y(() => {
     const r = e();
-    return qn(n, r, []);
+    return Hn(n, r, []);
   }, [n, ...t]);
 };
-function Bn(e, t) {
-  const n = $n(() => Object.keys(e || {}), [e]);
+function Yn(e, t, n = `
+`) {
+  const r = $n(() => 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(
+function zn({
+  as: e,
+  defaultText: t,
+  enableDangerouslySetInnerHTML: n,
+  children: r,
+  separator: i,
+  ...o
+}) {
+  const [a, s] = Yn(r, t, i);
+  return s ? /* @__PURE__ */ u(
     jn,
     {
-      ...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__ */ u(e, { ...o, children: a }) : /* @__PURE__ */ u(
     "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 Kn({
   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__ */ u("style", { children: `
             .video-container {
               position: absolute;
               top: 0;
@@ -1567,7 +1619,7 @@ function Yn({
               object-fit: contain;
             }
           ` }),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ u(
       "iframe",
       {
         className: "video-yt",
@@ -1579,13 +1631,13 @@ function Yn({
     )
   ] }) : null;
 }
-function zn({
+function Wn({
   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, {
+  return Y("overlay", "video-element", Kn, {
     element: r,
     media: e,
     playPause: s.playPause
@@ -1600,29 +1652,29 @@ function et({
   isStatic: o,
   renderViewerControls: a,
   renderMediaControls: s,
-  viewControlsDeps: u,
+  viewControlsDeps: c,
   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 = Ue(b, ["deep-zoom"]), [Z] = tn(), C = on(), A = O(), k = y(() => Te(A), [A]), [h, D] = On({
+    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(
+  }), ye = h.type === "images" ? h.choice : void 0, tt = 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(() => {
+  an(tt), N(() => {
     r && r(D);
   }, [h.annotations]), N(() => {
     if (i)
@@ -1630,22 +1682,22 @@ function et({
         typeof S.opacity < "u" && k.applyStyles({ id: S.id }, "atlas", {
           opacity: S.opacity
         });
-  }, [i]), Ce(() => {
-    n && n(ve);
-  }, [ve]), Y(
-    E && (h.type === "images" || h.type === "empty" || h.type === "textual-content" && a) ? "overlay" : "none",
+  }, [i]), Ie(() => {
+    n && n(ye);
+  }, [ye]), Y(
+    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,
+    ve.Provider,
     a ? {
-      value: E || null,
+      value: C || null,
       children: a(h)
     } : {},
-    [b, E, h, ...u || []]
+    [b, C, h, ...c || []]
   );
-  const _ = On({ maxWidth: 256, maxHeight: 256 });
+  const _ = kn({ 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 xe = b.accompanyingCanvas, G = _ && _.type === "fixed" ? /* @__PURE__ */ u("world-object", { height: b.height, width: b.width, x: e, y: t, children: /* @__PURE__ */ u(
     "world-image",
     {
       uri: _.id,
@@ -1664,13 +1716,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
+  const we = /* @__PURE__ */ I(te, { children: [
+    Z ? /* @__PURE__ */ u(de, { page: Z }) : null,
+    h.annotations && h.annotations.pages ? h.annotations.pages.map((S) => /* @__PURE__ */ u(de, { page: S }, S.id)) : null,
+    M
   ] }), nt = h.type === "images" ? h.images.length : 0;
-  return /* @__PURE__ */ A(H, { children: [
-    /* @__PURE__ */ A(
+  return /* @__PURE__ */ I($, { children: [
+    /* @__PURE__ */ I(
       "world-object",
       {
         height: b.height,
@@ -1679,50 +1731,50 @@ 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__ */ u(Ze, { 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__ */ u(
+                ft,
                 {
-                  onClick: x ? (we) => {
-                    we.stopPropagation(), x(S.annotationId, S, we);
+                  onClick: x ? (Se) => {
+                    Se.stopPropagation(), x(S.annotationId, S, Se);
                   } : 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__ */ u("div", { "data-textual-content": !0, children: /* @__PURE__ */ u(zn, { enableDangerouslySetInnerHTML: !0, children: S.text }) })
                 },
-                B
+                H
               ),
-              xe
+              we
             ] });
           }) : 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__ */ u(
+              qe,
               {
                 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
+            we
           ] }) : 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__ */ u(Je, { model: h.model }) : null,
+          h.type === "media" ? /* @__PURE__ */ u($, { children: h.media.type === "Sound" ? /* @__PURE__ */ I(Ke, { 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(Ge, { 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(Wn, { media: h.media, mediaControlsDeps: d, children: [
             G,
             s ? s(h) : null
           ] }) : null }) : null
@@ -1730,33 +1782,29 @@ function et({
       },
       `${b.id}/${h.type}/${nt}`
     ),
-    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" && xe ? /* @__PURE__ */ u(me, { canvas: xe.id, children: /* @__PURE__ */ u(et, { renderViewerControls: a }) }) : null
   ] });
 }
-function Kn() {
-  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", {});
-  let u = 0;
-  return /* @__PURE__ */ A(H, { children: [
+const Gn = Me(function(t, n) {
+  const r = K(), i = Re(), o = Rt(), { ViewerControls: a, MediaControls: s } = t.components || {};
+  if (at(n, () => o, [o]), !r)
+    return /* @__PURE__ */ u("div", {});
+  let c = 0;
+  return /* @__PURE__ */ I($, { children: [
     t.header,
-    /* @__PURE__ */ l(
-      O.Viewer,
+    /* @__PURE__ */ u(
+      V.Viewer,
       {
         height: t.height,
         mode: t.mode,
-        children: i.map((d, c) => {
-          const f = u;
-          return u += d.width + (t.spacing || 0), /* @__PURE__ */ l(ge, { canvas: d.id, children: /* @__PURE__ */ l(
-            O.RenderCanvas,
+        children: i.map((d, l) => {
+          const f = c;
+          return c += d.width + (t.spacing || 0), /* @__PURE__ */ u(me, { canvas: d.id, children: /* @__PURE__ */ u(
+            V.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__ */ u(a, {}) : void 0,
+              renderMediaControls: l === 0 && s ? () => /* @__PURE__ */ u(s, {}) : void 0,
               x: f,
               ...t.canvasProps || {},
               children: t.annotations
@@ -1769,36 +1817,37 @@ 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,
+}), V = Me(function({ children: t, height: n, annotations: r, canvasProps: i, spacing: o, header: a, components: s, mode: c, reuseAtlas: d, ...l }, f) {
+  const v = ge();
+  return /* @__PURE__ */ u(he, { vault: v, children: /* @__PURE__ */ u(Tt, { ...l, children: /* @__PURE__ */ u(
+    Gn,
     {
-      ref: c,
+      ref: f,
       height: n,
       components: s,
       spacing: o,
       canvasProps: i,
       annotations: r,
       header: a,
-      mode: u,
+      mode: c,
+      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;
+V.RenderImage = qe;
+V.RenderCanvas = et;
+V.RenderAnnotationPage = de;
+V.RenderAnnotation = _e;
+V.Viewer = sn;
+V.CanvasBackground = Ze;
+V.Audio = Ke;
+V.Video = Ge;
+V.Model = Je;
+V.AudioHTML = ze;
+V.VideoHTML = We;
+V.ModelHTML = Qe;
 export {
-  O as CanvasPanel
+  V as CanvasPanel
 };
 //# sourceMappingURL=canvas-panel.mjs.map