react-iiif-vault 1.0.9 → 1.0.10

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

@@ -1,17 +1,17 @@
-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 { 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 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 = {
+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
 };
-class pt extends nt {
+class yt extends rt {
   constructor(t) {
     super(t), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = se;
   }
@@ -44,7 +44,7 @@ class pt extends nt {
     } = this.state, {
       resetKeys: i
     } = this.props;
-    if (r && n.error !== null && yt(t.resetKeys, i)) {
+    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,
@@ -65,20 +65,20 @@ class pt extends nt {
     } = this.state;
     let s = t;
     if (o) {
-      const u = {
+      const c = {
         error: a,
         resetErrorBoundary: this.resetErrorBoundary
       };
       if (typeof n == "function")
-        s = n(u);
+        s = n(c);
       else if (r)
-        s = we(r, u);
-      else if (i === null || rt(i))
+        s = Pe(r, c);
+      else if (i === null || it(i))
         s = i;
       else
         throw a;
     }
-    return we(vt.Provider, {
+    return Pe(pt.Provider, {
       value: {
         didCatch: o,
         error: a,
@@ -87,52 +87,50 @@ class pt extends nt {
     }, s);
   }
 }
-function yt() {
+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 xt = {
+const wt = {
   collection: void 0,
   manifest: void 0,
   range: void 0,
   canvas: void 0,
   annotation: void 0,
   annotationPage: void 0
-}, fe = B.createContext(xt), z = () => R(fe);
+}, fe = B.createContext(wt), z = () => T(fe);
 function re({ value: e, children: t }) {
   const n = z(), r = y(() => ({
     ...n,
     ...e
   }), [e, n]);
-  return /* @__PURE__ */ c(fe.Provider, { value: r, children: t });
+  return /* @__PURE__ */ u(fe.Provider, { value: r, children: t });
 }
 const ie = B.createContext({
   vault: null,
   setVaultInstance: (e) => {
   }
 });
-function Ae({
+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__ */ c(ie.Provider, { value: { vault: o, setVaultInstance: a }, children: /* @__PURE__ */ c(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 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);
+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), v = f ? f.id || f["@id"] : null;
+        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);
@@ -144,24 +142,30 @@ function wt(e, { noCache: t = !1 } = {}) {
     requestId: n,
     error: a,
     resource: d,
-    cached: !!(d && d === u)
+    cached: !!(d && d === c)
   };
 }
-function St(e, t) {
-  const { id: n, isLoaded: r, error: i, resource: o, requestId: a, cached: s } = wt(
+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 Pt({ manifest: e, children: t }) {
-  return /* @__PURE__ */ c(re, { value: { manifest: e }, children: t });
+function bt({ manifest: e, children: t }) {
+  return /* @__PURE__ */ u(re, { value: { manifest: e }, children: t });
 }
-function he({ canvas: e, children: t }) {
-  return /* @__PURE__ */ c(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) => {
@@ -171,17 +175,17 @@ function V(e, t = []) {
   ), t), r;
 }
 const oe = B.createContext([]);
-function Te() {
-  const e = R(oe);
-  return V(
+function Re() {
+  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]
   );
@@ -190,33 +194,33 @@ function K(e = {}, t = []) {
       return r ? r(a) : a;
   }, [a, r, ...t]);
 }
-function bt({ range: e, children: t }) {
-  return /* @__PURE__ */ c(re, { value: { range: e }, children: t });
+function Ct({ range: e, children: t }) {
+  return /* @__PURE__ */ u(re, { value: { range: e }, children: t });
 }
-function Re(e, t) {
+function Ve(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(...Re(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(...Ve(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 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);
+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 l = [];
   const f = () => {
     l.length && (d.push([...l]), l = []);
   };
   let v = 0, p = !1;
-  for (let m = 0; m < u.length; m++) {
-    const g = e.get(u[m]);
+  for (let m = 0; m < c.length; m++) {
+    const g = e.get(c[m]);
     if (g.behavior.includes("non-paged")) {
       m === v && v++, r || (f(), d.push([m]), f());
       continue;
@@ -231,44 +235,44 @@ function Ct(e, t, { disablePaging: n, skipNonPaged: r } = {}) {
     }
     l.length > 1 && f();
   }
-  return l.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 It({ 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(
-    () => Ct(n, s, { disablePaging: t }),
-    [n, s]
+  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);
+      const w = c.findIndex((x) => x.id === g);
       w !== -1 ? l(w) : a(0);
     },
-    [u, d]
+    [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,
@@ -292,7 +296,7 @@ const J = () => {
   hasNext: !1,
   hasPrevious: !1
 });
-function Mt(e) {
+function At(e) {
   const t = K(), {
     cursor: n,
     visibleItems: r,
@@ -300,12 +304,12 @@ function Mt(e) {
     sequence: o,
     items: a,
     setCanvasIndex: s,
-    setCanvasId: u,
+    setCanvasId: c,
     previous: d,
     setSequenceIndex: l,
     hasNext: f,
     hasPrevious: v
-  } = It({
+  } = Mt({
     startCanvas: e.startCanvas,
     disablePaging: e.pagingEnabled === !1
   }), p = y(
@@ -313,7 +317,7 @@ function Mt(e) {
       sequence: o,
       items: a,
       // Extra functions.
-      setCurrentCanvasId: u,
+      setCurrentCanvasId: c,
       nextCanvas: i,
       previousCanvas: d,
       totalCanvases: a.length,
@@ -323,34 +327,34 @@ function Mt(e) {
       hasNext: f,
       hasPrevious: v
     }),
-    [o, a, u, i, d, a, s, l, n]
+    [o, a, c, i, d, a, s, l, n]
   );
-  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 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__ */ c("div", { children: "Sorry, something went wrong." });
-  if (t.error)
-    return /* @__PURE__ */ c("div", { children: t.error.toString() });
-  if (!t.isLoaded)
-    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 Tt() {
-  return R(ae);
+  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(fe),
-    SimpleViewerReactContext: R(ae),
-    VisibleCanvasReactContext: R(oe)
+    VaultContext: T(ie),
+    ResourceContext: T(fe),
+    SimpleViewerReactContext: T(ae),
+    VisibleCanvasReactContext: T(oe)
   };
 }
-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 }) }) });
+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 U = function(e) {
   return function() {
@@ -361,28 +365,28 @@ const U = function(e) {
       ...r !== void 0 && { meta: r }
     });
   };
-}, 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
+}, 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: Yt,
+  addReference: zt,
+  removeReference: Kt,
+  updateReference: Wt,
+  addMetadata: Gt,
+  removeMetadata: Jt,
+  updateMetadata: Qt,
+  reorderMetadata: Zt
 };
-function Zt() {
-  const t = T().getStore();
+function Xt() {
+  const t = O().getStore();
   return y(() => (n) => t.dispatch(n), [t]);
 }
-function Pe(e) {
+function Ce(e) {
   return typeof e != "string" && e && e.bindToVault;
 }
-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(() => {
+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",
@@ -410,13 +414,13 @@ function Xt() {
       })
     );
   }, [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 (Pe(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
@@ -431,7 +435,7 @@ function Xt() {
               id: s,
               type: "Annotation"
             },
-            index: u
+            index: c
           })
         ));
       }
@@ -439,7 +443,7 @@ function Xt() {
     [r]
   ), a = P(
     (s) => {
-      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(
+      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",
@@ -461,9 +465,9 @@ function Xt() {
     }
   ];
 }
-const Ve = F(null);
-function en() {
-  const e = R(Ve);
+const Oe = F(null);
+function tn() {
+  const e = T(Oe);
   return [
     e.fullPage,
     {
@@ -472,17 +476,17 @@ function en() {
     }
   ];
 }
-function tn({ children: e }) {
-  const [t, { addAnnotation: n, removeAnnotation: r }] = Xt();
-  return /* @__PURE__ */ c(
-    Ve.Provider,
+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]),
       children: e
     }
   );
 }
-function nn({
+function rn({
   width: e,
   style: t,
   height: n,
@@ -490,50 +494,50 @@ function nn({
   resetErrorBoundary: i
 }) {
   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" })
+    /* @__PURE__ */ u("h3", { children: "Error occurred" }),
+    /* @__PURE__ */ u("p", { children: r.message }),
+    /* @__PURE__ */ u("button", { onClick: i, children: "Reset" })
   ] });
 }
-const ge = F(null);
-function rn() {
-  return R(ge);
+const ve = F(null);
+function on() {
+  return T(ve);
 }
-const Oe = F(
+const Le = F(
   () => {
   }
-), Le = F(
+), ke = F(
   () => {
   }
 );
 function Y(e, t, n, r, i = []) {
-  const o = R(e === "portal" ? Le : Oe);
+  const o = T(e === "portal" ? ke : Le);
   N(() => (e !== "none" && o(t, n, r), () => {
     o(t, null);
   }), [t, e, o, ...i]);
 }
 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]);
+  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 ke = F(() => {
+const Ne = F(() => {
 });
-function on(e) {
-  const t = j(), n = R(ke);
+function an(e) {
+  const t = j(), n = T(Ne);
   N(() => t && t.id ? (n(t.id, e), () => n(t.id, -1)) : () => {
   }, [t, e]);
 }
-function an({
+function sn({
   children: e,
   errorFallback: t,
   outerContainerProps: n = {},
   worldScale: r,
   ...i
 }) {
-  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) => {
+  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 (A === -1) {
         const { [C]: h, ...D } = k;
@@ -552,29 +556,29 @@ function an({
       [C]: { element: A, props: k }
     } : D);
   }, []);
-  return /* @__PURE__ */ I(pt, { resetKeys: [], fallbackRender: (C) => /* @__PURE__ */ c(u, { ...i, ...C }), children: [
-    /* @__PURE__ */ c(
-      at,
+  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__ */ c($, { children: f.map(([C, { element: A, props: k }]) => /* @__PURE__ */ c(B.Fragment, { children: /* @__PURE__ */ c(A, { ...k || {} }) }, C)) }),
+        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: 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 }) }) }) }) }) }) })
+        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__ */ c("div", { children: m.map(([C, { element: A, props: k }]) => /* @__PURE__ */ c(B.Fragment, { children: /* @__PURE__ */ c(A, { ...k || {} }) }, C)) })
+    /* @__PURE__ */ u("div", { children: m.map(([C, { element: A, props: k }]) => /* @__PURE__ */ u(B.Fragment, { children: /* @__PURE__ */ u(A, { ...k || {} }) }, C)) })
   ] });
 }
-const X = {}, Ne = {
+const X = {}, Fe = {
   get(e) {
     return e;
   },
   setMetaValue([e, t, n], r) {
-    const i = Ne.getResourceMeta(e, t), o = i ? i[n] : void 0, a = typeof r == "function" ? r(o) : r;
+    const i = Fe.getResourceMeta(e, t), o = i ? i[n] : void 0, a = typeof r == "function" ? r(o) : r;
     X[e] = {
       ...X[e] || {},
       [t]: {
@@ -589,7 +593,7 @@ const X = {}, Ne = {
       return t ? n[t] : n;
   }
 };
-function sn(e = Ne) {
+function un(e = Fe) {
   return {
     addEventListener(t, n, r, i) {
       if (t)
@@ -618,32 +622,32 @@ function sn(e = Ne) {
       if (i && r)
         for (const a of Object.keys(i))
           o[a] = (s) => {
-            const u = e.get(r);
+            const c = e.get(r);
             for (const { callback: d, scope: l } of i[a] || [])
-              (!l || n && l.indexOf(n) !== -1) && d(s, u);
+              (!l || n && l.indexOf(n) !== -1) && d(s, c);
           };
       return o;
     }
   };
 }
-function Fe(e, t) {
-  const n = T(), r = y(() => sn(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(
+  ), c = R(
     (d) => s && s.body ? s.body.map((l) => l ? l.type === "SpecificResource" ? {
       ...l,
       source: o.get(l)
@@ -655,21 +659,21 @@ 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 De = ({
+const _e = ({
   id: e,
   style: t,
   className: n,
   interactive: r
 }) => {
-  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,
+  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,
@@ -686,8 +690,8 @@ const De = ({
     }
   ) : null;
 };
-function un(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]
   );
@@ -701,9 +705,9 @@ const de = ({
   page: t
 }) => {
   var o;
-  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,
+  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,
       style: r,
@@ -712,7 +716,7 @@ const de = ({
     a.id
   )) });
 };
-function _e({
+function qe({
   id: e,
   image: t,
   thumbnail: n,
@@ -721,7 +725,7 @@ function _e({
   y: o = 0,
   children: a,
   selector: s,
-  onClick: u,
+  onClick: c,
   enableSizes: d
 }) {
   var f, v;
@@ -729,17 +733,17 @@ function _e({
     if (!(!s || s.spatial.x === 0 && s.spatial.y === 0))
       return s.spatial;
   }, [s]);
-  return /* @__PURE__ */ c(
+  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,
+      onClick: c,
       children: t.service ? /* @__PURE__ */ I(te, { children: [
-        /* @__PURE__ */ c(
-          lt,
+        /* @__PURE__ */ u(
+          dt,
           {
             tiles: {
               id: t.service.id || t.service["@id"] || "unknown",
@@ -758,10 +762,10 @@ function _e({
         ),
         a
       ] }, "service") : /* @__PURE__ */ I(te, { children: [
-        /* @__PURE__ */ c(
+        /* @__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 ? {
@@ -777,8 +781,8 @@ function _e({
     e + (t.service ? "server" : "no-service")
   );
 }
-function qe(e, t) {
-  const { selector: n, source: r } = ft(t);
+function Be(e, t) {
+  const { selector: n, source: r } = ht(t);
   if (r.id !== e.id)
     return [null, r];
   const i = {
@@ -799,17 +803,17 @@ function qe(e, t) {
     r
   ];
 }
-const cn = {
+const ln = {
   makeChoice: () => {
   }
-}, 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) {
+}, 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 fn(e, t) {
-  return V(
+function hn(e, t) {
+  return R(
     (n) => {
       const r = [];
       if (!e)
@@ -817,7 +821,7 @@ function fn(e, t) {
       const i = Object.keys(n.iiif.entities.AnnotationPage);
       for (const o of i)
         if (!t || t.indexOf(o) !== -1) {
-          const a = dn(n, o);
+          const a = fn(n, o);
           a && a.views && a.views[e] && r.push(o);
         }
       return r;
@@ -825,7 +829,7 @@ function fn(e, t) {
     [e, t]
   );
 }
-function hn({
+function gn({
   canvas: e,
   manifest: t,
   all: n,
@@ -845,18 +849,18 @@ function hn({
       i.indexOf(o.id) === -1 && i.push(o.id);
   return i;
 }
-function gn(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 mn(e, t = {}) {
-  const n = T(), r = K(), i = j(), o = Te(), a = y(() => hn({
+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 = fn(e, t.all ? void 0 : a), u = P(
+  }), [t.all, i, o, r]), s = hn(e, t.all ? void 0 : a), c = P(
     (l) => {
       e && n.setMetaValue(
         [l, "annotationPageManager", "views"],
@@ -875,12 +879,12 @@ function mn(e, t = {}) {
       if (f != null && f.deselectOthers) {
         const m = Object.keys(v.iiif.entities.AnnotationPage);
         for (const g of m) {
-          const w = gn(v, g);
+          const w = mn(v, g);
           w && w.views && w.views[e] && p.push(g);
         }
       }
       for (const m of p)
-        u(m);
+        c(m);
       n.setMetaValue(
         [l, "annotationPageManager", "views"],
         (m) => m && m[e] ? m : {
@@ -889,46 +893,46 @@ function mn(e, t = {}) {
         }
       );
     },
-    [e, u, n]
+    [e, c, n]
   );
   return {
     availablePageIds: a,
     enabledPageIds: s,
     setPageEnabled: d,
-    setPageDisabled: u
+    setPageDisabled: c
   };
 }
-function vn(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 = B.createContext(new ht());
-function Be() {
-  return R(pn);
+const yn = B.createContext(new gt());
+function je() {
+  return T(yn);
 }
-function yn() {
-  const e = Be(), [t, n] = L({}), r = q(!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((l) => ({
+        d ? o = d : t[c] || (r.current || n((l) => ({
           ...l,
-          [u]: "loading"
+          [c]: "loading"
         })), e.loadService({
-          id: u,
+          id: c,
           width: o.width || s,
           height: o.height || a
         }).then(() => {
           r.current || n((l) => ({
             ...l,
-            [u]: "done"
+            [c]: "done"
           }));
         }));
       }
@@ -937,9 +941,9 @@ function yn() {
     [e, t]
   ), t];
 }
-function xn(e = {}) {
-  const t = Ue(), n = j(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 [];
@@ -953,15 +957,15 @@ function xn(e = {}) {
     [n]
   );
 }
-function wn(e) {
+function Sn(e) {
   return e.type === "SpecificResource" ? [e.source, { selector: e.selector }] : [e, { selector: null }];
 }
-const ee = {}, je = {
+const ee = {}, He = {
   get(e) {
     return e;
   },
   setMetaValue([e, t, n], r) {
-    const i = je.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]: {
@@ -976,29 +980,29 @@ const ee = {}, je = {
       return t ? n[t] : n;
   }
 };
-function Sn(e = je) {
+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 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(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();
+        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 }), M = o.length ? o.map((b) => x.find((W) => W.id === b)).filter(Boolean) : [x[0]];
-          M.length === 0 && M.push(x[0]), u = {
+          M.length === 0 && M.push(x[0]), c = {
             type: "single-choice",
             items: x.map((b) => ({
               id: b.id,
@@ -1021,7 +1025,7 @@ function Sn(e = je) {
     return {
       types: s,
       items: d,
-      choice: u
+      choice: c
     };
   }
   function r(i) {
@@ -1034,8 +1038,8 @@ function Sn(e = je) {
     extractChoices: r
   };
 }
-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(
+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(
@@ -1067,15 +1071,15 @@ function Pn(e, t = []) {
   ) };
   return [s, d];
 }
-const bn = ["model/gltf-binary"];
-function Cn(e, t) {
+const Cn = ["model/gltf-binary"];
+function En(e, t) {
   const r = t.items[0].resource;
-  return r.format ? bn.indexOf(r.format) === -1 ? E(`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
   } : E("Unknown format");
 }
-function En(e, t) {
+function In(e, t) {
   var r;
   if (!e.duration)
     return E("No duration on canvas");
@@ -1110,7 +1114,7 @@ function En(e, t) {
     }
   } : E("Audio does not have format") : E("Unknown audio");
 }
-function In(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;
@@ -1118,7 +1122,7 @@ function In(e, t, n) {
       return E("No resource Identifier");
     let a;
     if (o.service) {
-      const p = gt(o);
+      const p = mt(o);
       p[0] && (a = n(p[0], e));
     }
     const s = {
@@ -1129,7 +1133,7 @@ function In(e, t, n) {
         width: Number(e.width),
         height: Number(e.height)
       }
-    }, [u, d] = qe(e, i.target);
+    }, [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);
@@ -1156,11 +1160,11 @@ function In(e, t, n) {
       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(v);
@@ -1172,7 +1176,7 @@ function In(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": {
@@ -1182,31 +1186,31 @@ 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;
 }
-function Mn(e, t) {
+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 An = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
-function Tn(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 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 E("Video does not have duration");
@@ -1238,10 +1242,10 @@ function Tn(e, t) {
   };
   if (o) {
     a.type = "VideoYouTube";
-    const u = i.id.match(An);
-    if (!u[1])
+    const c = i.id.match(Tn);
+    if (!c[1])
       return E("Video is not known youtube video");
-    a.youTubeId = u[1];
+    a.youTubeId = c[1];
   }
   return {
     type: "media",
@@ -1251,30 +1255,30 @@ function Tn(e, t) {
     }
   };
 }
-function Rn({ 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 ? ln(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 ? E("Complex timeline not supported") : E("ComplexTimelineStrategy not yet supported");
   const i = t.types[0];
-  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;
+  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 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), {
+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 = vn(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, 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] : [
+  ], [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 }
@@ -1282,31 +1286,31 @@ function Vn(e) {
     l
   ], [f, s]);
 }
-const On = (e, t = []) => {
-  const n = T();
+const Ln = (e, t = []) => {
+  const n = O();
   N(() => {
     e(n);
   }, [n, ...t]);
 };
-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);
+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 On(
+  return Ln(
     (p) => {
       a.getBestThumbnailAtSize(f, e, t).then((m) => {
-        m.best && !v.current && u(m.best);
+        m.best && !v.current && c(m.best);
       });
     },
     [f]
   ), s;
 }
-function kn(e) {
+function Nn(e) {
   return { isMuted: !1, playRequested: !1, isPlaying: !1, isFinished: !1, volume: 100, duration: e };
 }
-function Nn(e, t) {
+function Fn(e, t) {
   switch (t.type) {
     case "FINISHED":
       return { ...e, isFinished: !0, isPlaying: !1, playRequested: !1 };
@@ -1329,19 +1333,19 @@ function Nn(e, t) {
   }
   return e;
 }
-function Fn(e) {
+function Un(e) {
   const t = Math.round(e);
   return `${Math.floor(t / 60)}:${`${t % 60}`.padStart(2, "0")}`;
 }
-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(() => {
+function pe(e) {
+  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() : l());
+    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(() => {
@@ -1371,7 +1375,7 @@ function me(e) {
     { element: r, currentTime: i, progress: o },
     t,
     {
-      play: u,
+      play: c,
       pause: l,
       playPause: d,
       mute: v,
@@ -1383,8 +1387,8 @@ function me(e) {
     }
   ];
 }
-const Un = F(null), Dn = F(null), _n = F(null);
-function $e({
+const Dn = F(null), _n = F(null), qn = F(null);
+function Ye({
   actions: e,
   state: t,
   children: n,
@@ -1392,12 +1396,12 @@ function $e({
   progress: i,
   element: o
 }) {
-  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 }) }) });
+  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 Ye({ media: e, children: t }) {
-  const [{ element: n, currentTime: r, progress: i }, o, a] = me({ duration: e.duration });
+function ze({ media: e, children: t }) {
+  const [{ element: n, currentTime: r, progress: i }, o, a] = pe({ duration: e.duration });
   return /* @__PURE__ */ I(
-    $e,
+    Ye,
     {
       state: o,
       actions: a,
@@ -1405,26 +1409,26 @@ function Ye({ media: e, children: t }) {
       progress: i,
       element: n,
       children: [
-        /* @__PURE__ */ c("audio", { ref: n, src: e.url }),
+        /* @__PURE__ */ u("audio", { ref: n, src: e.url }),
         t
       ]
     }
   );
 }
-function ze({
+function Ke({
   media: e,
   mediaControlsDeps: t,
   children: n
 }) {
-  return Y("portal", "audio", Ye, { media: e, children: n }, [e, ...t || []]), null;
+  return Y("portal", "audio", ze, { media: e, children: n }, [e, ...t || []]), null;
 }
-function Ke({
+function We({
   element: e,
   media: t,
   playPause: n
 }) {
   return /* @__PURE__ */ I("div", { className: "video-container", part: "video-container", onClick: n, children: [
-    /* @__PURE__ */ c("style", { children: `
+    /* @__PURE__ */ u("style", { children: `
             .video-container {
               position: absolute;
               top: 0;
@@ -1438,23 +1442,23 @@ function Ke({
               pointer-events: visible;
             }
           ` }),
-    /* @__PURE__ */ c("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 We({
+function Ge({
   media: e,
   mediaControlsDeps: t,
   children: n
 }) {
-  const [{ element: r, currentTime: i, progress: o }, a, s] = me({ duration: e.duration });
-  return Y("overlay", "video-element", Ke, {
+  const [{ element: r, currentTime: i, progress: o }, a, s] = pe({ duration: e.duration });
+  return Y("overlay", "video-element", We, {
     element: r,
     media: e,
     playPause: s.playPause
   }), Y(
     "portal",
     "custom-controls",
-    $e,
+    Ye,
     {
       state: a,
       actions: s,
@@ -1466,9 +1470,9 @@ function We({
     [i, a, e, ...t || []]
   ), null;
 }
-function Ge({ model: e }) {
+function Qe({ model: e }) {
   return /* @__PURE__ */ I($, { children: [
-    /* @__PURE__ */ c("style", { children: `
+    /* @__PURE__ */ u("style", { children: `
             .model-container {
               position: absolute;
               top: 0;
@@ -1482,7 +1486,7 @@ function Ge({ model: e }) {
               pointer-events: visible;
             }
           ` }),
-    /* @__PURE__ */ c("div", { className: "model-container", children: /* @__PURE__ */ c(
+    /* @__PURE__ */ u("div", { className: "model-container", children: /* @__PURE__ */ u(
       "model-viewer",
       {
         "interaction-prompt": "none",
@@ -1494,12 +1498,12 @@ function Ge({ model: e }) {
     ) })
   ] });
 }
-function Qe({ model: e, name: t }) {
-  return Y("overlay", `model-${t}`, Ge, { model: e }, [e]), null;
+function Je({ model: e, name: t }) {
+  return Y("overlay", `model-${t}`, Qe, { model: e }, [e]), null;
 }
-function Je({ style: e }) {
+function Ze({ style: e }) {
   const t = j();
-  return !t || !t.height || !t.width ? null : /* @__PURE__ */ c(
+  return !t || !t.height || !t.width ? null : /* @__PURE__ */ u(
     "box",
     {
       interactive: !1,
@@ -1508,18 +1512,18 @@ function Je({ style: e }) {
     }
   );
 }
-const qn = B.createContext("en");
-function Ze() {
-  return B.useContext(qn);
+const Bn = B.createContext("en");
+function Xe() {
+  return B.useContext(Bn);
 }
-function be(e) {
+function Ee(e) {
   return e.indexOf("-") !== -1 ? e.slice(0, e.indexOf("-")) : e;
 }
-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 jn({ as: e, language: t, children: n, viewingDirection: r, ...i }) {
+  const o = Xe();
+  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 jn(e, t, n) {
+function Hn(e, t, n) {
   if (t.length === 0)
     return;
   if (t.length === 1)
@@ -1534,16 +1538,16 @@ function jn(e, t, n) {
       return i;
   return t.indexOf("none") !== -1 ? "none" : t.indexOf("@none") !== -1 ? "@none" : t[0];
 }
-const Hn = (e, t = []) => {
-  const n = Ze();
+const $n = (e, t = []) => {
+  const n = Xe();
   return y(() => {
     const r = e();
-    return jn(n, r, []);
+    return Hn(n, r, []);
   }, [n, ...t]);
 };
-function $n(e, t, n = `
+function Yn(e, t, n = `
 `) {
-  const r = Hn(() => Object.keys(e || {}), [e]);
+  const r = $n(() => Object.keys(e || {}), [e]);
   return [
     y(() => {
       if (!e)
@@ -1556,7 +1560,7 @@ function $n(e, t, n = `
     r
   ];
 }
-function Yn({
+function zn({
   as: e,
   defaultText: t,
   enableDangerouslySetInnerHTML: n,
@@ -1564,9 +1568,9 @@ function Yn({
   separator: i,
   ...o
 }) {
-  const [a, s] = $n(r, t, i);
-  return s ? /* @__PURE__ */ c(
-    Bn,
+  const [a, s] = Yn(r, t, i);
+  return s ? /* @__PURE__ */ u(
+    jn,
     {
       ...o,
       as: e,
@@ -1577,7 +1581,7 @@ function Yn({
       } : void 0,
       children: n ? void 0 : a
     }
-  ) : e ? /* @__PURE__ */ c(e, { ...o, children: a }) : /* @__PURE__ */ c(
+  ) : e ? /* @__PURE__ */ u(e, { ...o, children: a }) : /* @__PURE__ */ u(
     "span",
     {
       ...o,
@@ -1589,14 +1593,14 @@ function Yn({
     }
   );
 }
-function zn({
+function Kn({
   element: e,
   media: t,
   playPause: n
 }) {
   const r = q(null);
   return t.youTubeId ? /* @__PURE__ */ I("div", { className: "video-container", part: "video-container", onClick: n, children: [
-    /* @__PURE__ */ c("style", { children: `
+    /* @__PURE__ */ u("style", { children: `
             .video-container {
               position: absolute;
               top: 0;
@@ -1615,7 +1619,7 @@ function zn({
               object-fit: contain;
             }
           ` }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ u(
       "iframe",
       {
         className: "video-yt",
@@ -1627,19 +1631,19 @@ function zn({
     )
   ] }) : null;
 }
-function Kn({
+function Wn({
   media: e,
   mediaControlsDeps: t,
   children: n
 }) {
-  const [{ element: r, currentTime: i, progress: o }, a, s] = me({ duration: e.duration });
-  return Y("overlay", "video-element", zn, {
+  const [{ element: r, currentTime: i, progress: o }, a, s] = pe({ duration: e.duration });
+  return Y("overlay", "video-element", Kn, {
     element: r,
     media: e,
     playPause: s.playPause
   }), null;
 }
-function Xe({
+function et({
   x: e,
   y: t,
   onChoiceChange: n,
@@ -1648,7 +1652,7 @@ function Xe({
   isStatic: o,
   renderViewerControls: a,
   renderMediaControls: s,
-  viewControlsDeps: u,
+  viewControlsDeps: c,
   mediaControlsDeps: d,
   strategies: l,
   throwOnUnknown: f,
@@ -1660,17 +1664,17 @@ function Xe({
   onClickPaintingAnnotation: x,
   children: M
 }) {
-  const b = j(), W = Fe(b, ["deep-zoom"]), [Z] = en(), C = rn(), A = T(), k = y(() => Me(A), [A]), [h, D] = Vn({
+  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, et = 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 H;
       return (S.width || 0) / ((H = S.target) == null ? void 0 : H.spatial.width);
     }) : []
   ), [m, h]);
-  on(et), N(() => {
+  an(tt), N(() => {
     r && r(D);
   }, [h.annotations]), N(() => {
     if (i)
@@ -1678,22 +1682,22 @@ function Xe({
         typeof S.opacity < "u" && k.applyStyles({ id: S.id }, "atlas", {
           opacity: S.opacity
         });
-  }, [i]), Ce(() => {
-    n && n(ve);
-  }, [ve]), Y(
+  }, [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}`,
-    ge.Provider,
+    ve.Provider,
     a ? {
       value: C || null,
       children: a(h)
     } : {},
-    [b, C, h, ...u || []]
+    [b, C, h, ...c || []]
   );
-  const _ = Ln({ maxWidth: 256, maxHeight: 256 });
+  const _ = kn({ maxWidth: 256, maxHeight: 256 });
   if (!b)
     return null;
-  const pe = b.accompanyingCanvas, G = _ && _.type === "fixed" ? /* @__PURE__ */ c("world-object", { height: b.height, width: b.width, x: e, y: t, children: /* @__PURE__ */ c(
+  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,
@@ -1712,11 +1716,11 @@ function Xe({
       throw new Error(h.reason || "Unknown image strategy");
     return null;
   }
-  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,
+  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
-  ] }), tt = h.type === "images" ? h.images.length : 0;
+  ] }), nt = h.type === "images" ? h.images.length : 0;
   return /* @__PURE__ */ I($, { children: [
     /* @__PURE__ */ I(
       "world-object",
@@ -1727,27 +1731,27 @@ function Xe({
         y: t,
         ...W,
         children: [
-          h.type === "empty" || p ? /* @__PURE__ */ c(Je, { style: v }) : null,
+          h.type === "empty" || p ? /* @__PURE__ */ u(Ze, { style: v }) : null,
           h.type === "textual-content" ? h.items.map((S, H) => {
             var Q;
             return /* @__PURE__ */ I($, { children: [
-              /* @__PURE__ */ c(
-                dt,
+              /* @__PURE__ */ u(
+                ft,
                 {
-                  onClick: x ? (xe) => {
-                    xe.stopPropagation(), x(S.annotationId, S, xe);
+                  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__ */ c("div", { "data-textual-content": !0, children: /* @__PURE__ */ c(Yn, { enableDangerouslySetInnerHTML: !0, children: S.text }) })
+                  children: /* @__PURE__ */ u("div", { "data-textual-content": !0, children: /* @__PURE__ */ u(zn, { enableDangerouslySetInnerHTML: !0, children: S.text }) })
                 },
                 H
               ),
-              ye
+              we
             ] });
           }) : null,
           h.type === "images" ? /* @__PURE__ */ I($, { children: [
-            h.images.map((S, H) => /* @__PURE__ */ c(
-              _e,
+            h.images.map((S, H) => /* @__PURE__ */ u(
+              qe,
               {
                 isStatic: o,
                 image: S,
@@ -1761,50 +1765,46 @@ function Xe({
               },
               S.id + H
             )),
-            ye
+            we
           ] }) : null,
-          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: [
+          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__ */ I(We, { 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__ */ I(Kn, { 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
         ]
       },
-      `${b.id}/${h.type}/${tt}`
+      `${b.id}/${h.type}/${nt}`
     ),
-    h.type === "media" && h.media.type === "Sound" && pe ? /* @__PURE__ */ c(he, { canvas: pe.id, children: /* @__PURE__ */ c(Xe, { 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 Wn() {
-  const e = R(ie);
-  return e && e.vault ? e.vault : Ie();
-}
-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;
+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__ */ c(
-      O.Viewer,
+    /* @__PURE__ */ u(
+      V.Viewer,
       {
         height: t.height,
         mode: t.mode,
         children: i.map((d, l) => {
-          const f = u;
-          return u += d.width + (t.spacing || 0), /* @__PURE__ */ c(he, { canvas: d.id, children: /* @__PURE__ */ c(
-            O.RenderCanvas,
+          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: l === 0 && a ? () => /* @__PURE__ */ c(a, {}) : void 0,
-              renderMediaControls: l === 0 && s ? () => /* @__PURE__ */ c(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
@@ -1817,20 +1817,9 @@ const Gn = Ee(function(t, n) {
     ),
     t.children
   ] });
-}), 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(
+}), 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: f,
@@ -1840,25 +1829,25 @@ const Gn = Ee(function(t, n) {
       canvasProps: i,
       annotations: r,
       header: a,
-      mode: u,
+      mode: c,
       reuseAtlas: d,
       children: t
     }
   ) }) });
 });
-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;
+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