react-iiif-vault 1.0.6 → 1.0.8

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

@@ -1,6 +1,6 @@
-import { jsx as c, jsxs as A, Fragment as H } from "react/jsx-runtime";
+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 _, useRef as j, useLayoutEffect as Ce, Fragment as te, useReducer as rt, forwardRef as Ae, useImperativeHandle as it } 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";
@@ -28,8 +28,8 @@ var pt = function(t, n) {
     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, l = arguments.length, d = new Array(l), u = 0; u < l; u++)
-        d[u] = arguments[u];
+      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;
   }
@@ -47,18 +47,18 @@ var pt = function(t, n) {
   }, 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 l, d;
-      (l = (d = this.props).onResetKeysChange) == null || l.call(d, i.resetKeys, s), this.reset();
+      var u, d;
+      (u = (d = this.props).onResetKeysChange) == null || u.call(d, i.resetKeys, s), this.reset();
     }
   }, n.render = function() {
-    var i = this.state.error, o = this.props, a = o.fallbackRender, s = o.FallbackComponent, l = o.fallback;
+    var i = this.state.error, o = this.props, a = o.fallbackRender, s = o.FallbackComponent, u = o.fallback;
     if (i !== null) {
       var d = {
         error: i,
         resetErrorBoundary: this.resetErrorBoundary
       };
-      if (/* @__PURE__ */ se.isValidElement(l))
-        return l;
+      if (/* @__PURE__ */ se.isValidElement(u))
+        return u;
       if (typeof a == "function")
         return a(d);
       if (s)
@@ -81,7 +81,7 @@ function re({ value: e, children: t }) {
     ...n,
     ...e
   }), [e, n]);
-  return /* @__PURE__ */ c(he.Provider, { value: r, children: t });
+  return /* @__PURE__ */ l(he.Provider, { value: r, children: t });
 }
 const ie = q.createContext({
   vault: null,
@@ -96,7 +96,7 @@ function Te({
   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 }) });
+  return /* @__PURE__ */ l(ie.Provider, { value: { vault: o, setVaultInstance: a }, children: /* @__PURE__ */ l(re, { value: r || {}, children: i }) });
 }
 const T = () => {
   const { vault: e } = R(ie);
@@ -105,12 +105,12 @@ const T = () => {
   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), l = y(() => r.get(n, { skipSelfReturn: !0 }) || void 0, [n, r]), [d, u] = L(l);
+  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);
   return N(() => {
     (async () => {
       try {
-        const f = l && !t ? l : await r.load(n), p = f ? f.id || f["@id"] : null;
-        f && i !== p && o(p), u(f);
+        const f = u && !t ? u : await r.load(n), p = f ? f.id || f["@id"] : null;
+        f && i !== p && o(p), c(f);
       } catch (f) {
         s(f);
       }
@@ -121,7 +121,7 @@ function xt(e, { noCache: t = !1 } = {}) {
     requestId: n,
     error: a,
     resource: d,
-    cached: !!(d && d === l)
+    cached: !!(d && d === u)
   };
 }
 function wt(e, t) {
@@ -132,10 +132,10 @@ function wt(e, t) {
   return { id: n, isLoaded: r, error: i, manifest: o, requestId: a, cached: s };
 }
 function St({ manifest: e, children: t }) {
-  return /* @__PURE__ */ c(re, { value: { manifest: e }, children: t });
+  return /* @__PURE__ */ l(re, { value: { manifest: e }, children: t });
 }
 function ge({ canvas: e, children: t }) {
-  return /* @__PURE__ */ c(re, { value: { canvas: e }, children: t });
+  return /* @__PURE__ */ l(re, { value: { canvas: e }, children: t });
 }
 function V(e, t = []) {
   const n = T(), [r, i] = L(() => e(n.getState(), n));
@@ -168,7 +168,7 @@ function K(e = {}, t = []) {
   }, [a, r, ...t]);
 }
 function Pt({ range: e, children: t }) {
-  return /* @__PURE__ */ c(re, { value: { range: e }, children: t });
+  return /* @__PURE__ */ l(re, { value: { range: e }, children: t });
 }
 function Ve(e, t) {
   var r;
@@ -181,34 +181,34 @@ 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"), l = t.type === "Manifest" ? t.items : Ve(e, t);
+  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);
   if (a)
-    return [l, [l.map((m, g) => g)]];
+    return [u, [u.map((m, g) => g)]];
   if (s || !o || n)
-    return [l, l.map((m, g) => [g])];
+    return [u, u.map((m, g) => [g])];
   const d = [];
-  let u = [];
+  let c = [];
   const f = () => {
-    u.length && (d.push([...u]), u = []);
+    c.length && (d.push([...c]), c = []);
   };
   let p = 0, v = !1;
-  for (let m = 0; m < l.length; m++) {
-    const g = e.get(l[m]);
+  for (let m = 0; m < u.length; m++) {
+    const g = e.get(u[m]);
     if (g.behavior.includes("non-paged")) {
       m === p && p++, r || (f(), d.push([m]), f());
       continue;
     }
     if (m === p || g.behavior.includes("facing-pages")) {
-      u.length && (v = !0), f(), d.push([m]), f();
+      c.length && (v = !0), f(), d.push([m]), f();
       continue;
     }
-    if (u.push(m), v) {
+    if (c.push(m), v) {
       f(), v = !1;
       continue;
     }
-    u.length > 1 && f();
+    c.length > 1 && f();
   }
-  return u.length && f(), [l, d];
+  return c.length && f(), [u, d];
 }
 function Et(e = {}, t = []) {
   const { id: n, selector: r } = e, i = z(), o = n || i.range, a = V((s) => o ? s.iiif.entities.Range[o] : void 0, [o]);
@@ -222,40 +222,40 @@ function Ct({ startCanvas: e, disablePaging: t }) {
   const n = T(), r = K(), i = Et(), [o, a] = L(void 0), s = i || r;
   if (!s)
     throw new Error("Nothing selected");
-  const [l, d] = y(
+  const [u, d] = y(
     () => bt(n, s, { disablePaging: t }),
     [n, s]
-  ), u = P(
+  ), c = P(
     (g) => {
       const w = d.findIndex((x) => x.includes(g));
       a(w === -1 ? 0 : w);
     },
-    [l, d]
+    [u, d]
   ), f = P(
     (g) => {
-      const w = l.findIndex((x) => x.id === g);
-      w !== -1 ? u(w) : a(0);
+      const w = u.findIndex((x) => x.id === g);
+      w !== -1 ? c(w) : a(0);
     },
-    [l, d]
+    [u, d]
   ), p = P(() => {
     a((g) => g >= d.length ? g : g + 1);
   }, [d]), v = 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) => l[g].id)) || [],
+    visibleItems: ((m = d[o]) == null ? void 0 : m.map((g) => u[g].id)) || [],
     cursor: o,
-    items: l,
+    items: u,
     sequence: d,
     setSequenceIndex: a,
-    setCanvasIndex: u,
+    setCanvasIndex: c,
     setCanvasId: f,
     next: p,
     previous: v
   };
 }
 const J = () => {
-}, ae = _({
+}, ae = U({
   setCurrentCanvasId: J,
   setCurrentCanvasIndex: J,
   nextCanvas: J,
@@ -266,7 +266,7 @@ const J = () => {
   currentSequenceIndex: 0
 });
 function At(e) {
-  const t = K(), { cursor: n, visibleItems: r, next: i, sequence: o, items: a, setCanvasIndex: s, setCanvasId: l, previous: d, setSequenceIndex: u } = Ct({
+  const t = K(), { cursor: n, visibleItems: r, next: i, sequence: o, items: a, setCanvasIndex: s, setCanvasId: u, previous: d, setSequenceIndex: c } = Ct({
     startCanvas: e.startCanvas,
     disablePaging: e.pagingEnabled === !1
   }), f = y(
@@ -274,28 +274,28 @@ function At(e) {
       sequence: o,
       items: a,
       // Extra functions.
-      setCurrentCanvasId: l,
+      setCurrentCanvasId: u,
       nextCanvas: i,
       previousCanvas: d,
       totalCanvases: a.length,
       setCurrentCanvasIndex: s,
-      setSequenceIndex: u,
+      setSequenceIndex: c,
       currentSequenceIndex: n
     }),
-    [o, a, l, i, d, a, s, u, n]
+    [o, a, u, i, d, a, s, c, n]
   );
-  return t ? r.length === 0 ? null : /* @__PURE__ */ c(ae.Provider, { value: f, children: /* @__PURE__ */ c(oe.Provider, { value: r, children: /* @__PURE__ */ c(ge, { 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." }));
+  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__ */ c("div", { children: "Sorry, something went wrong." });
+    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__ */ c("div", { children: t.error.toString() });
+    return /* @__PURE__ */ l("div", { children: t.error.toString() });
   if (!t.isLoaded)
-    return /* @__PURE__ */ c("div", { children: "Loading..." });
-  const n = /* @__PURE__ */ c(At, { ...e, children: e.children });
-  return /* @__PURE__ */ c(St, { manifest: t.id, children: e.rangeId ? /* @__PURE__ */ c(Pt, { range: e.rangeId, children: n }) : n });
+    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);
@@ -309,7 +309,7 @@ function Tt() {
   };
 }
 function Rt(e) {
-  return /* @__PURE__ */ c(Te, { 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 }) }) });
+  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 }) }) });
 }
 const F = function(e) {
   return function() {
@@ -320,7 +320,7 @@ 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", Ut = "@iiif/ADD_METADATA", _t = "@iiif/REMOVE_METADATA", Dt = "@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(Ut)(), Wt = F(Dt)(), Gt = F(_t)(), Qt = F(jt)(), ue = {
+}, Vt = "@iiif/IMPORT_ENTITIES", Ot = "@iiif/MODIFY_ENTITY_FIELD", Lt = "@iiif/REORDER_ENTITY_FIELD", kt = "@iiif/ADD_REFERENCE", Nt = "@iiif/UPDATE_REFERENCE", Ft = "@iiif/REMOVE_REFERENCE", Dt = "@iiif/ADD_METADATA", Ut = "@iiif/REMOVE_METADATA", _t = "@iiif/UPDATE_METADATA", jt = "@iiif/REORDER_METADATA", qt = F(Vt)(), $t = F(Ot)(), Bt = F(Lt)(), Ht = F(kt)(), Yt = F(Ft)(), zt = F(Nt)(), Kt = F(Dt)(), Wt = F(_t)(), Gt = F(Ut)(), Qt = F(jt)(), ue = {
   importEntities: qt,
   modifyEntityField: $t,
   reorderEntityField: Bt,
@@ -373,15 +373,15 @@ function Zt() {
     (s) => r ? s.iiif.entities.AnnotationPage[r] : null,
     [r]
   ), o = P(
-    (s, l) => {
+    (s, u) => {
       if (r) {
         if (be(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" }), u = e.get({ id: s, type: "Annotation" });
-        d && u && (d.items.find((f) => f.id === u.id) || n(
+        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(
           ue.addReference({
             id: r,
             type: "AnnotationPage",
@@ -390,7 +390,7 @@ function Zt() {
               id: s,
               type: "Annotation"
             },
-            index: l
+            index: u
           })
         ));
       }
@@ -420,7 +420,7 @@ function Zt() {
     }
   ];
 }
-const Oe = _(null);
+const Oe = U(null);
 function Xt() {
   const e = R(Oe);
   return [
@@ -433,7 +433,7 @@ function Xt() {
 }
 function en({ children: e }) {
   const [t, { addAnnotation: n, removeAnnotation: r }] = Zt();
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(
     Oe.Provider,
     {
       value: y(() => ({ fullPage: t, addAnnotation: n, removeAnnotation: r }), [t]),
@@ -449,19 +449,19 @@ function tn({
   resetErrorBoundary: i
 }) {
   return /* @__PURE__ */ A("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__ */ l("h3", { children: "Error occurred" }),
+    /* @__PURE__ */ l("p", { children: r.message }),
+    /* @__PURE__ */ l("button", { onClick: i, children: "Reset" })
   ] });
 }
-const me = _(null);
+const me = U(null);
 function nn() {
   return R(me);
 }
-const Le = _(
+const Le = U(
   () => {
   }
-), ke = _(
+), ke = U(
   () => {
   }
 );
@@ -478,7 +478,7 @@ function $(e = {}, t = []) {
       return r ? r(a) : a;
   }, [a, r, ...t]);
 }
-const Ne = _(() => {
+const Ne = U(() => {
 });
 function rn(e) {
   const t = $(), n = R(Ne);
@@ -492,40 +492,40 @@ function on({
   worldScale: r,
   ...i
 }) {
-  const [o, a] = L(), s = Tt(), l = t || tn, [d, u] = 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 = 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) => {
     w((k) => {
       if (M === -1) {
-        const { [E]: h, ...U } = k;
-        return U;
+        const { [E]: h, ...D } = k;
+        return D;
       }
       return { ...k, [E]: M };
     });
   }, []), W = P((E, M, k) => {
-    u(({ [E]: h, ...U }) => M ? {
-      ...U,
+    c(({ [E]: h, ...D }) => M ? {
+      ...D,
       [E]: { element: M, props: k }
-    } : U);
+    } : D);
   }, []), Z = P((E, M, k) => {
-    v(({ [E]: h, ...U }) => M ? {
-      ...U,
+    v(({ [E]: h, ...D }) => M ? {
+      ...D,
       [E]: { element: M, props: k }
-    } : U);
+    } : D);
   }, []);
-  return /* @__PURE__ */ A(vt, { resetKeys: [], fallbackRender: (E) => /* @__PURE__ */ c(l, { ...i, ...E }), children: [
-    /* @__PURE__ */ c(
+  return /* @__PURE__ */ A(vt, { resetKeys: [], fallbackRender: (E) => /* @__PURE__ */ l(u, { ...i, ...E }), children: [
+    /* @__PURE__ */ l(
       ot,
       {
         ...i,
         containerProps: { style: { position: "relative" }, ...i.containerProps || {} },
-        htmlChildren: /* @__PURE__ */ c(H, { children: f.map(([E, { element: M, props: k }]) => /* @__PURE__ */ c(q.Fragment, { children: /* @__PURE__ */ c(M, { ...k || {} }) }, E)) }),
+        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);
         },
         runtimeOptions: I,
-        children: /* @__PURE__ */ c(me.Provider, { value: o, children: /* @__PURE__ */ c(Ne.Provider, { value: b, children: /* @__PURE__ */ c(Le.Provider, { value: W, children: /* @__PURE__ */ c(ke.Provider, { value: Z, children: /* @__PURE__ */ c(Rt, { bridge: s, children: /* @__PURE__ */ c(at.Provider, { value: i.mode || "explore", children: /* @__PURE__ */ c(en, { children: e }) }) }) }) }) }) })
+        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 }) }) }) }) }) }) })
       }
     ),
-    /* @__PURE__ */ c("div", { children: m.map(([E, { element: M, props: k }]) => /* @__PURE__ */ c(q.Fragment, { children: /* @__PURE__ */ c(M, { ...k || {} }) }, E)) })
+    /* @__PURE__ */ l("div", { children: m.map(([E, { element: M, props: k }]) => /* @__PURE__ */ l(q.Fragment, { children: /* @__PURE__ */ l(M, { ...k || {} }) }, E)) })
   ] });
 }
 const X = {}, Fe = {
@@ -577,15 +577,15 @@ function an(e = Fe) {
       if (i && r)
         for (const a of Object.keys(i))
           o[a] = (s) => {
-            const l = e.get(r);
-            for (const { callback: d, scope: u } of i[a] || [])
-              (!u || n && u.indexOf(n) !== -1) && d(s, l);
+            const u = e.get(r);
+            for (const { callback: d, scope: c } of i[a] || [])
+              (!c || n && c.indexOf(n) !== -1) && d(s, u);
           };
       return o;
     }
   };
 }
-function Ue(e, t) {
+function De(e, t) {
   const n = T(), r = y(() => an(n), [n]), i = V(() => e && e.id ? n.getResourceMeta(e.id, "eventManager") : null, [e]);
   return y(() => e ? r.getListenersAsProps(e, t) : {}, [i, e, n, t]);
 }
@@ -598,15 +598,15 @@ function ne(e, t) {
     return i ? t ? i[t] : i : void 0;
   }, [e, t]);
 }
-function _e(e = {}, t = []) {
+function Ue(e = {}, t = []) {
   const { id: n, selector: r } = e, i = z(), o = T(), a = n || i.annotation, s = V(
     (d) => a ? d.iiif.entities.Annotation[a] : void 0,
     [a]
-  ), l = V(
-    (d) => s && s.body ? s.body.map((u) => u ? u.type === "SpecificResource" ? {
-      ...u,
-      source: o.get(u)
-    } : u ? d.iiif.entities[u.type][u.id] : null : null).filter(Boolean) : [],
+  ), 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) : [],
     [s]
   );
   return y(() => {
@@ -614,20 +614,20 @@ function _e(e = {}, t = []) {
       return;
     const d = {
       ...s,
-      body: l,
+      body: u,
       target: le(s.target, { typeMap: o.getState().iiif.mapping })
     };
     return r ? r(d) : d;
-  }, [s, r, l, ...t]);
+  }, [s, r, u, ...t]);
 }
-const De = ({
+const _e = ({
   id: e,
   style: t,
   className: n,
   interactive: r
 }) => {
-  const i = _e({ id: e }), o = ne(i, "atlas"), a = ne(i, "html"), s = Ue(i, ["atlas"]), l = $(), d = y(() => st(t, o), [t, o]);
-  return l && i && i.target && i.target.selector && i.target.selector.type === "BoxSelector" && i.target.source && (i.target.source.id === l.id || i.target.source === l.id) ? /* @__PURE__ */ c(
+  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,
     {
       id: i.id,
@@ -661,8 +661,8 @@ const fe = ({
 }) => {
   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__ */ c(te, { children: (o = n.items) == null ? void 0 : o.map((a) => /* @__PURE__ */ c(
-    De,
+  return V((a) => n.id ? a.iiif.entities.AnnotationPage[n.id] : null, []), /* @__PURE__ */ l(te, { children: (o = n.items) == null ? void 0 : o.map((a) => /* @__PURE__ */ l(
+    _e,
     {
       id: a.id,
       style: r,
@@ -680,24 +680,24 @@ function je({
   y: o = 0,
   children: a,
   selector: s,
-  onClick: l,
+  onClick: u,
   enableSizes: d
 }) {
   var f, p;
-  const u = y(() => {
+  const c = y(() => {
     if (!(!s || s.spatial.x === 0 && s.spatial.y === 0))
       return s.spatial;
   }, [s]);
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(
     "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: l,
+      onClick: u,
       children: t.service ? /* @__PURE__ */ A(te, { children: [
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ l(
           ct,
           {
             tiles: {
@@ -712,22 +712,22 @@ function je({
             y: 0,
             width: (f = t.target) == null ? void 0 : f.spatial.width,
             height: (p = t.target) == null ? void 0 : p.spatial.height,
-            crop: u
+            crop: c
           }
         ),
         a
       ] }, "service") : /* @__PURE__ */ A(te, { children: [
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ l(
           "world-image",
           {
-            onClick: l,
+            onClick: u,
             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: u
+            crop: c
           }
         ),
         a
@@ -815,10 +815,10 @@ function gn(e, t = {}) {
     manifest: r,
     canvas: i,
     canvases: o
-  }), [t.all, i, o, r]), s = dn(e, t.all ? void 0 : a), l = P(
-    (u) => {
+  }), [t.all, i, o, r]), s = dn(e, t.all ? void 0 : a), u = P(
+    (c) => {
       e && n.setMetaValue(
-        [u, "annotationPageManager", "views"],
+        [c, "annotationPageManager", "views"],
         (f) => f && !f[e] ? f : {
           ...f || {},
           [e]: !1
@@ -827,7 +827,7 @@ function gn(e, t = {}) {
     },
     [e, n]
   ), d = P(
-    (u, f = {}) => {
+    (c, f = {}) => {
       if (!e)
         return;
       const p = n.getState(), v = [];
@@ -839,22 +839,22 @@ function gn(e, t = {}) {
         }
       }
       for (const m of v)
-        l(m);
+        u(m);
       n.setMetaValue(
-        [u, "annotationPageManager", "views"],
+        [c, "annotationPageManager", "views"],
         (m) => m && m[e] ? m : {
           ...m || {},
           [e]: !0
         }
       );
     },
-    [e, l, n]
+    [e, u, n]
   );
   return {
     availablePageIds: a,
     enabledPageIds: s,
     setPageEnabled: d,
-    setPageDisabled: l
+    setPageDisabled: u
   };
 }
 function mn(e, t) {
@@ -871,23 +871,23 @@ function vn() {
   }, []), [P(
     (o, { height: a, width: s }) => {
       if (o) {
-        const l = o.id || o["@id"], d = e.loadServiceSync({
-          id: l,
+        const u = o.id || o["@id"], d = e.loadServiceSync({
+          id: u,
           width: o.width || s,
           height: o.height || a,
           source: o
         });
-        d ? o = d : t[l] || (r.current || n((u) => ({
-          ...u,
-          [l]: "loading"
+        d ? o = d : t[u] || (r.current || n((c) => ({
+          ...c,
+          [u]: "loading"
         })), e.loadService({
-          id: l,
+          id: u,
           width: o.width || s,
           height: o.height || a
         }).then(() => {
-          r.current || n((u) => ({
-            ...u,
-            [l]: "done"
+          r.current || n((c) => ({
+            ...c,
+            [u]: "done"
           }));
         }));
       }
@@ -897,7 +897,7 @@ function vn() {
   ), t];
 }
 function yn(e = {}) {
-  const t = _e(), n = $(e.canvasId ? { id: e.canvasId } : void 0);
+  const t = Ue(), n = $(e.canvasId ? { id: e.canvasId } : void 0);
   return V(
     (r, i) => {
       if (!n)
@@ -941,23 +941,23 @@ function wn(e = Be) {
     if (!o)
       return [];
     const a = e.get(o.items, { parent: o }), s = [];
-    for (const l of a)
-      s.push(...e.get(l.items, { parent: l }));
+    for (const u of a)
+      s.push(...e.get(u.items, { parent: u }));
     return s;
   }
   function n(i, o = []) {
     const a = Array.isArray(i) ? i : t(i), s = [];
-    let l = null;
+    let u = null;
     const d = [];
-    for (const u of a) {
-      if (u.type !== "Annotation")
+    for (const c of a) {
+      if (c.type !== "Annotation")
         throw new Error("getPaintables() accept either a canvas or list of annotations");
-      const f = Array.from(Array.isArray(u.body) ? u.body : [u.body]);
+      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();
         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]), l = {
+          I.length === 0 && I.push(x[0]), u = {
             type: "single-choice",
             items: x.map((b) => ({
               id: b.id,
@@ -970,9 +970,9 @@ function wn(e = Be) {
         }
         s.indexOf(w) === -1 && s.push(w), d.push({
           type: w,
-          annotationId: u.id,
+          annotationId: c.id,
           resource: g,
-          target: u.target,
+          target: c.target,
           selector: m
         });
       }
@@ -980,7 +980,7 @@ function wn(e = Be) {
     return {
       types: s,
       items: d,
-      choice: l
+      choice: u
     };
   }
   function r(i) {
@@ -998,13 +998,13 @@ function Sn(e, t = []) {
     () => r.getPaintables(i, o),
     [n, i, o, ...t]
   ), d = { makeChoice: P(
-    (u, { deselectOthers: f = !0, deselect: p = !1 } = {}) => {
+    (c, { deselectOthers: f = !0, deselect: p = !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 !== u);
+            const g = v.filter((w) => w !== c);
             if (g.length === 0) {
               const w = s.items[0].resource.id;
               return w ? [w] : [];
@@ -1012,13 +1012,13 @@ function Sn(e, t = []) {
             return g;
           }
           if (f)
-            return [u];
+            return [c];
           const m = [...v];
           if (m.length === 0 && s.items.length) {
             const g = s.items[0].resource.id;
             g && m.push(g);
           }
-          return v.indexOf(u) !== -1 ? v : [...v, u];
+          return v.indexOf(c) !== -1 ? v : [...v, c];
         });
       }
     },
@@ -1088,26 +1088,26 @@ function Cn(e, t, n) {
         width: Number(e.width),
         height: Number(e.height)
       }
-    }, [l, d] = qe(e, i.target);
+    }, [u, d] = qe(e, i.target);
     if (d.id !== e.id)
       continue;
     i.resource.width && i.resource.height && (i.resource.width, i.resource.height);
-    let u = i.resource.type === "SpecificResource" ? le(i.resource) : null;
+    let c = i.resource.type === "SpecificResource" ? le(i.resource) : null;
     if (i.selector) {
       const v = le({
         type: "SpecificResource",
         source: i.resource,
         selector: i.selector
       });
-      v && (u = v);
+      v && (c = v);
     }
-    const f = u && u.selector && (u.selector.type === "BoxSelector" || u.selector.type === "TemporalBoxSelector") ? {
+    const f = c && c.selector && (c.selector.type === "BoxSelector" || c.selector.type === "TemporalBoxSelector") ? {
       type: "BoxSelector",
       spatial: {
-        x: u.selector.spatial.x,
-        y: u.selector.spatial.y,
-        width: u.selector.spatial.width,
-        height: u.selector.spatial.height
+        x: c.selector.spatial.x,
+        y: c.selector.spatial.y,
+        width: c.selector.spatial.width,
+        height: c.selector.spatial.height
       }
     } : void 0;
     a && !a.id && (a.id = a["@id"]);
@@ -1115,11 +1115,11 @@ function Cn(e, t, n) {
       id: o.id,
       type: "Image",
       annotationId: i.annotationId,
-      width: Number(l || f ? o.width : e.width),
-      height: Number(l || f ? o.height : e.height),
+      width: Number(u || f ? o.width : e.width),
+      height: Number(u || f ? o.height : e.height),
       service: a,
       sizes: a && a.sizes ? a.sizes : o.width && o.height ? [{ width: o.width, height: o.height }] : [],
-      target: l && l.type !== "PointSelector" ? l : s,
+      target: u && u.type !== "PointSelector" ? u : s,
       selector: f
     };
     r.push(p);
@@ -1159,23 +1159,24 @@ function An(e, t) {
 }
 const In = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
 function Mn(e, t) {
-  var a;
-  const n = t.items.filter((s) => s.type === "video");
-  if (!e.duration)
-    return C("No duration on canvas");
-  if (n.length > 1)
+  var s;
+  const n = t.items.filter((u) => u.type === "video");
+  let r = !1;
+  if (e.duration || (r = !0), n.length > 1)
     return C("Only one video source supported");
-  const r = (a = n[0]) == null ? void 0 : a.resource, i = !!(r.service || []).find(
-    (s) => (s.profile || "").includes("youtube.com")
+  const i = (s = n[0]) == null ? void 0 : s.resource, o = !!(i.service || []).find(
+    (u) => (u.profile || "").includes("youtube.com")
   );
-  if (!r)
+  if (!o && r)
+    return C("Video does not have duration");
+  if (!i)
     return C("Unknown video");
-  if ((!r.format || r.format === "text/html") && !i)
+  if ((!i.format || i.format === "text/html") && !o)
     return C("Video does not have format");
-  const o = {
+  const a = {
     annotationId: t.items[0].annotationId,
     duration: e.duration,
-    url: r.id,
+    url: i.id,
     type: "Video",
     items: [],
     target: {
@@ -1185,7 +1186,7 @@ function Mn(e, t) {
         endTime: e.duration
       }
     },
-    format: r.format,
+    format: i.format,
     selector: {
       type: "TemporalSelector",
       temporal: {
@@ -1194,16 +1195,16 @@ function Mn(e, t) {
       }
     }
   };
-  if (i) {
-    o.type = "VideoYouTube";
-    const s = r.id.match(In);
-    if (!s[1])
+  if (o) {
+    a.type = "VideoYouTube";
+    const u = i.id.match(In);
+    if (!u[1])
       return C("Video is not known youtube video");
-    o.youTubeId = s[1];
+    a.youTubeId = u[1];
   }
   return {
     type: "media",
-    media: o,
+    media: a,
     annotations: {
       pages: []
     }
@@ -1225,19 +1226,19 @@ function Tn({ canvas: e, paintables: t, supports: n, loadImageService: r }) {
 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), {
     all: !1
-  }), s = mn(a, "AnnotationPage"), l = (e == null ? void 0 : e.strategies) || [
+  }), s = mn(a, "AnnotationPage"), u = (e == null ? void 0 : e.strategies) || [
     "empty",
     "images",
     "media",
     "textual-content",
     "complex-timeline"
-  ], [d, u] = Sn(e, [o]), f = y(() => Tn({ canvas: n, paintables: d, supports: l, loadImageService: i }), [n, d, r, u.makeChoice]);
+  ], [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] : [
     {
       ...f,
       annotations: { pages: s }
     },
-    u
+    c
   ], [f, s]);
 }
 const Vn = (e, t = []) => {
@@ -1247,7 +1248,7 @@ const Vn = (e, t = []) => {
   }, [n, ...t]);
 };
 function On(e, t, { canvasId: n, manifestId: r } = {}) {
-  const i = T(), o = $e(), a = y(() => gt(i, { imageServiceLoader: o }), [i, o]), [s, l] = L(), d = K(r ? { id: r } : void 0), u = $(n ? { id: n } : void 0), f = u || d, p = j(!1);
+  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;
   }), []), !f)
@@ -1255,7 +1256,7 @@ function On(e, t, { canvasId: n, manifestId: r } = {}) {
   return Vn(
     (v) => {
       a.getBestThumbnailAtSize(f, e, t).then((m) => {
-        m.best && !p.current && l(m.best);
+        m.best && !p.current && u(m.best);
       });
     },
     [f]
@@ -1294,13 +1295,13 @@ function Nn(e) {
 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]), l = P(() => {
+  }, [e.duration]), u = P(() => {
     r.current && (n({ type: "PLAY_REQUESTED" }), r.current.play().then(() => {
       n({ type: "PLAY" });
     }), s());
   }, [s]), d = P(() => {
-    r.current && (r.current.duration > 0 && r.current.paused ? l() : u());
-  }, [s]), u = P(() => {
+    r.current && (r.current.duration > 0 && r.current.paused ? u() : c());
+  }, [s]), c = 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" }));
@@ -1329,8 +1330,8 @@ function pe(e) {
     { element: r, currentTime: i, progress: o },
     t,
     {
-      play: l,
-      pause: u,
+      play: u,
+      pause: c,
       playPause: d,
       mute: p,
       unmute: v,
@@ -1341,7 +1342,7 @@ function pe(e) {
     }
   ];
 }
-const Fn = _(null), Un = _(null), _n = _(null);
+const Fn = U(null), Dn = U(null), Un = U(null);
 function Ye({
   actions: e,
   state: t,
@@ -1350,7 +1351,7 @@ function Ye({
   progress: i,
   element: o
 }) {
-  return /* @__PURE__ */ c(_n.Provider, { value: { currentTime: r, progress: i, element: o }, children: /* @__PURE__ */ c(Un.Provider, { value: e, children: /* @__PURE__ */ c(Fn.Provider, { value: t, children: n }) }) });
+  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 }) }) });
 }
 function ze({ media: e, children: t }) {
   const [{ element: n, currentTime: r, progress: i }, o, a] = pe({ duration: e.duration });
@@ -1363,7 +1364,7 @@ function ze({ media: e, children: t }) {
       progress: i,
       element: n,
       children: [
-        /* @__PURE__ */ c("audio", { ref: n, src: e.url }),
+        /* @__PURE__ */ l("audio", { ref: n, src: e.url }),
         t
       ]
     }
@@ -1382,7 +1383,7 @@ function We({
   playPause: n
 }) {
   return /* @__PURE__ */ A("div", { className: "video-container", part: "video-container", onClick: n, children: [
-    /* @__PURE__ */ c("style", { children: `
+    /* @__PURE__ */ l("style", { children: `
             .video-container {
               position: absolute;
               top: 0;
@@ -1396,7 +1397,7 @@ function We({
               pointer-events: visible;
             }
           ` }),
-    /* @__PURE__ */ c("video", { ref: e, src: t.url, style: { width: "100%", objectFit: "contain" } })
+    /* @__PURE__ */ l("video", { ref: e, src: t.url, style: { width: "100%", objectFit: "contain" } })
   ] });
 }
 function Ge({
@@ -1426,7 +1427,7 @@ function Ge({
 }
 function Qe({ model: e }) {
   return /* @__PURE__ */ A(H, { children: [
-    /* @__PURE__ */ c("style", { children: `
+    /* @__PURE__ */ l("style", { children: `
             .model-container {
               position: absolute;
               top: 0;
@@ -1440,7 +1441,7 @@ function Qe({ model: e }) {
               pointer-events: visible;
             }
           ` }),
-    /* @__PURE__ */ c("div", { className: "model-container", children: /* @__PURE__ */ c(
+    /* @__PURE__ */ l("div", { className: "model-container", children: /* @__PURE__ */ l(
       "model-viewer",
       {
         "interaction-prompt": "none",
@@ -1457,7 +1458,7 @@ function Je({ model: e, name: t }) {
 }
 function Ze({ style: e }) {
   const t = $();
-  return !t || !t.height || !t.width ? null : /* @__PURE__ */ c(
+  return !t || !t.height || !t.width ? null : /* @__PURE__ */ l(
     "box",
     {
       interactive: !1,
@@ -1466,16 +1467,16 @@ function Ze({ style: e }) {
     }
   );
 }
-const Dn = q.createContext("en");
+const _n = q.createContext("en");
 function Xe() {
-  return q.useContext(Dn);
+  return q.useContext(_n);
 }
 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__ */ 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 });
+  return y(() => Ee(o) === Ee(t), [o, t]) ? e ? /* @__PURE__ */ l(e, { ...i, children: n }) : /* @__PURE__ */ l("span", { ...i, children: n }) : e ? /* @__PURE__ */ l(e, { ...i, lang: t, dir: r, children: n }) : /* @__PURE__ */ l("span", { ...i, lang: t, dir: r, children: n });
 }
 function qn(e, t, n) {
   if (t.length === 0)
@@ -1516,7 +1517,7 @@ function Bn(e, t) {
 }
 const Hn = ({ as: e, defaultText: t, enableDangerouslySetInnerHTML: n, children: r, ...i }) => {
   const [o, a] = Bn(r, t);
-  return a ? /* @__PURE__ */ c(
+  return a ? /* @__PURE__ */ l(
     jn,
     {
       ...i,
@@ -1528,7 +1529,7 @@ const Hn = ({ as: e, defaultText: t, enableDangerouslySetInnerHTML: n, children:
       } : void 0,
       children: n ? void 0 : o
     }
-  ) : e ? /* @__PURE__ */ c(e, { ...i, children: o }) : /* @__PURE__ */ c(
+  ) : e ? /* @__PURE__ */ l(e, { ...i, children: o }) : /* @__PURE__ */ l(
     "span",
     {
       ...i,
@@ -1547,7 +1548,7 @@ function Yn({
 }) {
   const r = j(null);
   return t.youTubeId ? /* @__PURE__ */ A("div", { className: "video-container", part: "video-container", onClick: n, children: [
-    /* @__PURE__ */ c("style", { children: `
+    /* @__PURE__ */ l("style", { children: `
             .video-container {
               position: absolute;
               top: 0;
@@ -1566,7 +1567,7 @@ function Yn({
               object-fit: contain;
             }
           ` }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ l(
       "iframe",
       {
         className: "video-yt",
@@ -1599,9 +1600,9 @@ function et({
   isStatic: o,
   renderViewerControls: a,
   renderMediaControls: s,
-  viewControlsDeps: l,
+  viewControlsDeps: u,
   mediaControlsDeps: d,
-  strategies: u,
+  strategies: c,
   throwOnUnknown: f,
   backgroundStyle: p,
   alwaysShowBackground: v,
@@ -1611,8 +1612,8 @@ function et({
   onClickPaintingAnnotation: x,
   children: I
 }) {
-  const b = $(), W = Ue(b, ["deep-zoom"]), [Z] = Xt(), E = nn(), M = T(), k = y(() => Me(M), [M]), [h, U] = Rn({
-    strategies: u || ["images"],
+  const b = $(), W = De(b, ["deep-zoom"]), [Z] = Xt(), E = nn(), M = T(), k = y(() => Me(M), [M]), [h, D] = Rn({
+    strategies: c || ["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(
     1,
@@ -1622,7 +1623,7 @@ function et({
     }) : []
   ), [m, h]);
   rn(tt), N(() => {
-    r && r(U);
+    r && r(D);
   }, [h.annotations]), N(() => {
     if (i)
       for (const S of i)
@@ -1639,19 +1640,19 @@ function et({
       value: E || null,
       children: a(h)
     } : {},
-    [b, E, h, ...l || []]
+    [b, E, h, ...u || []]
   );
-  const D = On({ maxWidth: 256, maxHeight: 256 });
+  const _ = On({ maxWidth: 256, maxHeight: 256 });
   if (!b)
     return null;
-  const ye = b.accompanyingCanvas, G = D && D.type === "fixed" ? /* @__PURE__ */ c("world-object", { height: b.height, width: b.width, x: e, y: t, children: /* @__PURE__ */ c(
+  const ye = b.accompanyingCanvas, G = _ && _.type === "fixed" ? /* @__PURE__ */ l("world-object", { height: b.height, width: b.width, x: e, y: t, children: /* @__PURE__ */ l(
     "world-image",
     {
-      uri: D.id,
+      uri: _.id,
       target: { x: 0, y: 0, width: b.width, height: b.height },
-      display: D.width && D.height ? {
-        width: D.width,
-        height: D.height
+      display: _.width && _.height ? {
+        width: _.width,
+        height: _.height
       } : void 0,
       crop: void 0
     }
@@ -1664,8 +1665,8 @@ function et({
     return null;
   }
   const xe = /* @__PURE__ */ A(te, { children: [
-    Z ? /* @__PURE__ */ c(fe, { page: Z }) : null,
-    h.annotations && h.annotations.pages ? h.annotations.pages.map((S) => /* @__PURE__ */ c(fe, { page: S }, S.id)) : null,
+    Z ? /* @__PURE__ */ l(fe, { page: Z }) : null,
+    h.annotations && h.annotations.pages ? h.annotations.pages.map((S) => /* @__PURE__ */ l(fe, { page: S }, S.id)) : null,
     I
   ] }), nt = h.type === "images" ? h.images.length : 0;
   return /* @__PURE__ */ A(H, { children: [
@@ -1678,18 +1679,18 @@ function et({
         y: t,
         ...W,
         children: [
-          h.type === "empty" || v ? /* @__PURE__ */ c(Ze, { style: p }) : null,
+          h.type === "empty" || v ? /* @__PURE__ */ l(Ze, { style: p }) : null,
           h.type === "textual-content" ? h.items.map((S, B) => {
             var Q;
             return /* @__PURE__ */ A(H, { children: [
-              /* @__PURE__ */ c(
+              /* @__PURE__ */ l(
                 lt,
                 {
                   onClick: x ? (we) => {
                     we.stopPropagation(), x(S.annotationId, S, we);
                   } : void 0,
                   target: ((Q = S.target) == null ? void 0 : Q.spatial) || void 0,
-                  children: /* @__PURE__ */ c("div", { "data-textual-content": !0, children: /* @__PURE__ */ c(Hn, { enableDangerouslySetInnerHTML: !0, children: S.text }) })
+                  children: /* @__PURE__ */ l("div", { "data-textual-content": !0, children: /* @__PURE__ */ l(Hn, { enableDangerouslySetInnerHTML: !0, children: S.text }) })
                 },
                 B
               ),
@@ -1697,13 +1698,13 @@ function et({
             ] });
           }) : null,
           h.type === "images" ? /* @__PURE__ */ A(H, { children: [
-            h.images.map((S, B) => /* @__PURE__ */ c(
+            h.images.map((S, B) => /* @__PURE__ */ l(
               je,
               {
                 isStatic: o,
                 image: S,
                 id: S.id,
-                thumbnail: B === 0 ? D : void 0,
+                thumbnail: B === 0 ? _ : void 0,
                 selector: S.selector,
                 enableSizes: g,
                 onClick: x ? (Q) => {
@@ -1714,8 +1715,8 @@ function et({
             )),
             xe
           ] }) : null,
-          h.type === "3d-model" ? /* @__PURE__ */ c(Je, { model: h.model }) : null,
-          h.type === "media" ? /* @__PURE__ */ c(H, { children: h.media.type === "Sound" ? /* @__PURE__ */ A(Ke, { media: h.media, mediaControlsDeps: d, children: [
+          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: [
             G,
             s ? s(h) : null
           ] }) : h.media.type === "Video" ? /* @__PURE__ */ A(Ge, { media: h.media, mediaControlsDeps: d, children: [
@@ -1729,7 +1730,7 @@ function et({
       },
       `${b.id}/${h.type}/${nt}`
     ),
-    h.type === "media" && h.media.type === "Sound" && ye ? /* @__PURE__ */ c(ge, { canvas: ye.id, children: /* @__PURE__ */ c(et, { renderViewerControls: a }) }) : null
+    h.type === "media" && h.media.type === "Sound" && ye ? /* @__PURE__ */ l(ge, { canvas: ye.id, children: /* @__PURE__ */ l(et, { renderViewerControls: a }) }) : null
   ] });
 }
 function Kn() {
@@ -1739,23 +1740,23 @@ function Kn() {
 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__ */ c("div", {});
-  let l = 0;
+    return /* @__PURE__ */ l("div", {});
+  let u = 0;
   return /* @__PURE__ */ A(H, { children: [
     t.header,
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ l(
       O.Viewer,
       {
         height: t.height,
         mode: t.mode,
-        children: i.map((d, u) => {
-          const f = l;
-          return l += d.width + (t.spacing || 0), /* @__PURE__ */ c(ge, { canvas: d.id, children: /* @__PURE__ */ c(
+        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,
             {
               strategies: ["3d-model", "media", "images", "empty", "textual-content"],
-              renderViewerControls: u === 0 && a ? () => /* @__PURE__ */ c(a, {}) : void 0,
-              renderMediaControls: u === 0 && s ? () => /* @__PURE__ */ c(s, {}) : void 0,
+              renderViewerControls: c === 0 && a ? () => /* @__PURE__ */ l(a, {}) : void 0,
+              renderMediaControls: c === 0 && s ? () => /* @__PURE__ */ l(s, {}) : void 0,
               x: f,
               ...t.canvasProps || {},
               children: t.annotations
@@ -1768,19 +1769,19 @@ 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: l, ...d }, u) {
+}), 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__ */ c(Te, { vault: f, children: /* @__PURE__ */ c(It, { ...d, children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(Te, { vault: f, children: /* @__PURE__ */ l(It, { ...d, children: /* @__PURE__ */ l(
     Wn,
     {
-      ref: u,
+      ref: c,
       height: n,
       components: s,
       spacing: o,
       canvasProps: i,
       annotations: r,
       header: a,
-      mode: l,
+      mode: u,
       children: t
     }
   ) }) });
@@ -1788,7 +1789,7 @@ const Wn = Ae(function(t, n) {
 O.RenderImage = je;
 O.RenderCanvas = et;
 O.RenderAnnotationPage = fe;
-O.RenderAnnotation = De;
+O.RenderAnnotation = _e;
 O.Viewer = on;
 O.CanvasBackground = Ze;
 O.Audio = Ke;