react-iiif-vault 1.0.10 → 1.0.11

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

@@ -1,5 +1,5 @@
-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 { jsx as u, jsxs as M, 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 w, useState as L, useEffect as N, useRef as _, useCallback as b, 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";
@@ -100,7 +100,7 @@ const wt = {
   annotationPage: void 0
 }, fe = B.createContext(wt), z = () => T(fe);
 function re({ value: e, children: t }) {
-  const n = z(), r = y(() => ({
+  const n = z(), r = w(() => ({
     ...n,
     ...e
   }), [e, n]);
@@ -126,12 +126,12 @@ function ge(e) {
   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);
+  const n = typeof e == "string" ? e : e.id, r = ge(), [i, o] = L(n), [a, s] = L(void 0), c = w(() => r.get(n, { skipSelfReturn: !0 }) || void 0, [n, r]), [d, l] = L(c);
   return N(() => {
     (async () => {
       try {
-        const f = c && !t ? c : await r.load(n), v = f ? f.id || f["@id"] : null;
-        f && i !== v && o(v), l(f);
+        const f = c && !t ? c : await r.load(n), m = f ? f.id || f["@id"] : null;
+        f && i !== m && o(m), l(f);
       } catch (f) {
         s(f);
       }
@@ -189,7 +189,7 @@ function K(e = {}, t = []) {
     (s) => o ? s.iiif.entities.Manifest[o] : void 0,
     [o]
   );
-  return y(() => {
+  return w(() => {
     if (a)
       return r ? r(a) : a;
   }, [a, r, ...t]);
@@ -210,26 +210,26 @@ function Ve(e, t) {
 function Et(e, t, { disablePaging: n, skipNonPaged: r } = {}) {
   const i = t.behavior, o = i.includes("paged"), a = o ? !1 : i.includes("continuous"), s = o || a ? !1 : i.includes("individuals"), c = t.type === "Manifest" ? t.items : Ve(e, t);
   if (a)
-    return [c, [c.map((m, g) => g)]];
+    return [c, [c.map((g, x) => x)]];
   if (s || !o || n)
-    return [c, c.map((m, g) => [g])];
+    return [c, c.map((g, x) => [x])];
   const d = [];
   let l = [];
   const f = () => {
     l.length && (d.push([...l]), l = []);
   };
-  let v = 0, p = !1;
-  for (let m = 0; m < c.length; m++) {
-    const g = e.get(c[m]);
-    if (g.behavior.includes("non-paged")) {
-      m === v && v++, r || (f(), d.push([m]), f());
+  let m = 0, p = !1;
+  for (let g = 0; g < c.length; g++) {
+    const x = e.get(c[g]);
+    if (x.behavior.includes("non-paged")) {
+      g === m && m++, r || (f(), d.push([g]), f());
       continue;
     }
-    if (m === v || g.behavior.includes("facing-pages")) {
-      l.length && (p = !0), f(), d.push([m]), f();
+    if (g === m || x.behavior.includes("facing-pages")) {
+      l.length && (p = !0), f(), d.push([g]), f();
       continue;
     }
-    if (l.push(m), p) {
+    if (l.push(g), p) {
       f(), p = !1;
       continue;
     }
@@ -239,48 +239,53 @@ function Et(e, t, { disablePaging: n, skipNonPaged: r } = {}) {
 }
 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(() => {
+  return w(() => {
     if (a)
       return r ? r(a) : a;
   }, [a, r, ...t]);
 }
 function Mt({ startCanvas: e, disablePaging: t }) {
-  var m;
+  var x;
   const n = O(), r = K(), i = It(), [o, a] = L(void 0), s = i || r;
   if (!s)
     throw new Error("Nothing selected");
-  const [c, d] = y(
+  const [c, d] = w(
     () => Et(n, s, { disablePaging: t }),
     [n, s, t]
-  ), l = P(
-    (g) => {
-      const w = d.findIndex((x) => x.includes(g));
-      a(w === -1 ? 0 : w);
+  ), l = _(d);
+  if (l.current !== d) {
+    const y = l.current[o][0], C = d.findIndex((S) => S.includes(y));
+    l.current = d, a(C);
+  }
+  const f = b(
+    (v) => {
+      const y = d.findIndex((C) => C.includes(v));
+      a(y === -1 ? 0 : y);
     },
     [c, d]
-  ), f = P(
-    (g) => {
-      const w = c.findIndex((x) => x.id === g);
-      w !== -1 ? l(w) : a(0);
+  ), m = b(
+    (v) => {
+      const y = c.findIndex((C) => C.id === v);
+      y !== -1 ? f(y) : a(0);
     },
     [c, d]
-  ), v = P(() => {
-    a((g) => g >= d.length - 1 ? g : g + 1);
-  }, [d]), p = P(() => {
-    a((g) => g <= 0 ? 0 : g - 1);
+  ), p = b(() => {
+    a((v) => v >= d.length - 1 ? v : v + 1);
+  }, [d]), g = b(() => {
+    a((v) => v <= 0 ? 0 : v - 1);
   }, [d]);
-  return typeof o > "u" && (e ? f(e) : a(0)), {
-    visibleItems: ((m = d[o]) == null ? void 0 : m.map((g) => c[g].id)) || [],
+  return typeof o > "u" && (e ? m(e) : a(0)), {
+    visibleItems: ((x = d[o]) == null ? void 0 : x.map((v) => c[v].id)) || [],
     cursor: o,
     items: c,
     sequence: d,
     hasPrevious: o > 0,
     hasNext: o < d.length - 1,
     setSequenceIndex: a,
-    setCanvasIndex: l,
-    setCanvasId: f,
-    next: v,
-    previous: p
+    setCanvasIndex: f,
+    setCanvasId: m,
+    next: p,
+    previous: g
   };
 }
 const J = () => {
@@ -308,11 +313,11 @@ function At(e) {
     previous: d,
     setSequenceIndex: l,
     hasNext: f,
-    hasPrevious: v
+    hasPrevious: m
   } = Mt({
     startCanvas: e.startCanvas,
     disablePaging: e.pagingEnabled === !1
-  }), p = y(
+  }), p = w(
     () => ({
       sequence: o,
       items: a,
@@ -325,7 +330,7 @@ function At(e) {
       setSequenceIndex: l,
       currentSequenceIndex: n,
       hasNext: f,
-      hasPrevious: v
+      hasPrevious: m
     }),
     [o, a, c, i, d, a, s, l, n]
   );
@@ -379,13 +384,13 @@ const U = function(e) {
 };
 function Xt() {
   const t = O().getStore();
-  return y(() => (n) => t.dispatch(n), [t]);
+  return w(() => (n) => t.dispatch(n), [t]);
 }
 function Ce(e) {
   return typeof e != "string" && e && e.bindToVault;
 }
 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)}`, []);
+  const e = O(), t = _([]), n = Xt(), r = w(() => `vault://annotation-page/${(/* @__PURE__ */ new Date()).getTime()}/${Math.round(Math.random() * 1e9).toString(16)}`, []);
   Ie(() => {
     const s = {
       id: r,
@@ -417,7 +422,7 @@ function en() {
   const i = R(
     (s) => r ? s.iiif.entities.AnnotationPage[r] : null,
     [r]
-  ), o = P(
+  ), o = b(
     (s, c) => {
       if (r) {
         if (Ce(s)) {
@@ -441,7 +446,7 @@ function en() {
       }
     },
     [r]
-  ), a = P(
+  ), a = b(
     (s) => {
       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({
@@ -481,7 +486,7 @@ function nn({ children: e }) {
   return /* @__PURE__ */ u(
     Oe.Provider,
     {
-      value: y(() => ({ fullPage: t, addAnnotation: n, removeAnnotation: r }), [t]),
+      value: w(() => ({ fullPage: t, addAnnotation: n, removeAnnotation: r }), [t]),
       children: e
     }
   );
@@ -493,7 +498,7 @@ function rn({
   error: r,
   resetErrorBoundary: i
 }) {
-  return /* @__PURE__ */ I("div", { style: { width: e, height: n, minHeight: 500, ...t || {}, background: "#f9f9f9" }, children: [
+  return /* @__PURE__ */ M("div", { style: { width: e, height: n, minHeight: 500, ...t || {}, background: "#f9f9f9" }, children: [
     /* @__PURE__ */ u("h3", { children: "Error occurred" }),
     /* @__PURE__ */ u("p", { children: r.message }),
     /* @__PURE__ */ u("button", { onClick: i, children: "Reset" })
@@ -518,7 +523,7 @@ function Y(e, t, n, r, i = []) {
 }
 function j(e = {}, t = []) {
   const { id: n, selector: r } = e, i = z(), o = n || i.canvas, a = R((s) => o ? s.iiif.entities.Canvas[o] : void 0, [o]);
-  return y(() => {
+  return w(() => {
     if (a)
       return r ? r(a) : a;
   }, [a, r, ...t]);
@@ -537,40 +542,40 @@ function sn({
   worldScale: r,
   ...i
 }) {
-  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) => {
+  const [o, a] = L(), s = Vt(), c = t || rn, [d, l] = L({}), f = Object.entries(d), [m, p] = L({}), g = Object.entries(m), [x, v] = L({}), y = w(() => r || Math.max(...Object.values(x)), [x]), C = w(() => ({ maxOverZoom: y || 1, ...i.runtimeOptions || {} }), [y, i.runtimeOptions]), S = b((E, A) => {
+    v((k) => {
       if (A === -1) {
-        const { [C]: h, ...D } = k;
+        const { [E]: h, ...D } = k;
         return D;
       }
-      return { ...k, [C]: A };
+      return { ...k, [E]: A };
     });
-  }, []), W = P((C, A, k) => {
-    l(({ [C]: h, ...D }) => A ? {
+  }, []), W = b((E, A, k) => {
+    l(({ [E]: h, ...D }) => A ? {
       ...D,
-      [C]: { element: A, props: k }
+      [E]: { element: A, props: k }
     } : D);
-  }, []), Z = P((C, A, k) => {
-    p(({ [C]: h, ...D }) => A ? {
+  }, []), Z = b((E, A, k) => {
+    p(({ [E]: h, ...D }) => A ? {
       ...D,
-      [C]: { element: A, props: k }
+      [E]: { element: A, props: k }
     } : D);
   }, []);
-  return /* @__PURE__ */ I(yt, { resetKeys: [], fallbackRender: (C) => /* @__PURE__ */ u(c, { ...i, ...C }), children: [
+  return /* @__PURE__ */ M(yt, { resetKeys: [], fallbackRender: (E) => /* @__PURE__ */ u(c, { ...i, ...E }), children: [
     /* @__PURE__ */ u(
       st,
       {
         ...i,
         containerProps: { style: { position: "relative" }, ...i.containerProps || {} },
-        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);
+        htmlChildren: /* @__PURE__ */ u($, { children: f.map(([E, { element: A, props: k }]) => /* @__PURE__ */ u(B.Fragment, { children: /* @__PURE__ */ u(A, { ...k || {} }) }, E)) }),
+        onCreated: (E) => {
+          a(E), i.onCreated && i.onCreated(E);
         },
-        runtimeOptions: M,
-        children: /* @__PURE__ */ u(ve.Provider, { value: o, children: /* @__PURE__ */ u(Ne.Provider, { value: b, children: /* @__PURE__ */ u(Le.Provider, { value: W, children: /* @__PURE__ */ u(ke.Provider, { value: Z, children: /* @__PURE__ */ u(Ot, { bridge: s, children: /* @__PURE__ */ u(ut.Provider, { value: i.mode || "explore", children: /* @__PURE__ */ u(nn, { children: e }) }) }) }) }) }) })
+        runtimeOptions: C,
+        children: /* @__PURE__ */ u(ve.Provider, { value: o, children: /* @__PURE__ */ u(Ne.Provider, { value: S, 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__ */ u("div", { children: m.map(([C, { element: A, props: k }]) => /* @__PURE__ */ u(B.Fragment, { children: /* @__PURE__ */ u(A, { ...k || {} }) }, C)) })
+    /* @__PURE__ */ u("div", { children: g.map(([E, { element: A, props: k }]) => /* @__PURE__ */ u(B.Fragment, { children: /* @__PURE__ */ u(A, { ...k || {} }) }, E)) })
   ] });
 }
 const X = {}, Fe = {
@@ -631,11 +636,11 @@ function un(e = Fe) {
   };
 }
 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]);
+  const n = O(), r = w(() => un(n), [n]), i = R(() => e && e.id ? n.getResourceMeta(e.id, "eventManager") : null, [e]);
+  return w(() => e ? r.getListenersAsProps(e, t) : {}, [i, e, n, t]);
 }
 function ne(e, t) {
-  const n = O(), r = y(() => Te(n), [n]);
+  const n = O(), r = w(() => Te(n), [n]);
   return R(() => {
     if (!e)
       return null;
@@ -654,7 +659,7 @@ function De(e = {}, t = []) {
     } : l ? d.iiif.entities[l.type][l.id] : null : null).filter(Boolean) : [],
     [s]
   );
-  return y(() => {
+  return w(() => {
     if (!s)
       return;
     const d = {
@@ -671,7 +676,7 @@ const _e = ({
   className: n,
   interactive: r
 }) => {
-  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]);
+  const i = De({ id: e }), o = ne(i, "atlas"), a = ne(i, "html"), s = Ue(i, ["atlas"]), c = j(), d = w(() => 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,
     {
@@ -695,7 +700,7 @@ function cn(e = {}, t = []) {
     (s) => o ? s.iiif.entities.AnnotationPage[o] : void 0,
     [o]
   );
-  return y(() => {
+  return w(() => {
     if (a)
       return r ? r(a) : a;
   }, [a, ...t]);
@@ -728,8 +733,8 @@ function qe({
   onClick: c,
   enableSizes: d
 }) {
-  var f, v;
-  const l = y(() => {
+  var f, m;
+  const l = w(() => {
     if (!(!s || s.spatial.x === 0 && s.spatial.y === 0))
       return s.spatial;
   }, [s]);
@@ -741,7 +746,7 @@ function qe({
       width: t.target.spatial.width,
       height: t.target.spatial.height,
       onClick: c,
-      children: t.service ? /* @__PURE__ */ I(te, { children: [
+      children: t.service ? /* @__PURE__ */ M(te, { children: [
         /* @__PURE__ */ u(
           dt,
           {
@@ -756,12 +761,12 @@ function qe({
             x: 0,
             y: 0,
             width: (f = t.target) == null ? void 0 : f.spatial.width,
-            height: (v = t.target) == null ? void 0 : v.spatial.height,
+            height: (m = t.target) == null ? void 0 : m.spatial.height,
             crop: l
           }
         ),
         a
-      ] }, "service") : /* @__PURE__ */ I(te, { children: [
+      ] }, "service") : /* @__PURE__ */ M(te, { children: [
         /* @__PURE__ */ u(
           "world-image",
           {
@@ -806,7 +811,7 @@ function Be(e, t) {
 const ln = {
   makeChoice: () => {
   }
-}, 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: [] });
+}, ce = { type: "unknown" }, I = (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];
@@ -855,12 +860,12 @@ function mn(e, t) {
   return n ? n.annotationPageManager : null;
 }
 function vn(e, t = {}) {
-  const n = O(), r = K(), i = j(), o = Re(), a = y(() => gn({
+  const n = O(), r = K(), i = j(), o = Re(), a = w(() => gn({
     all: t.all,
     manifest: r,
     canvas: i,
     canvases: o
-  }), [t.all, i, o, r]), s = hn(e, t.all ? void 0 : a), c = P(
+  }), [t.all, i, o, r]), s = hn(e, t.all ? void 0 : a), c = b(
     (l) => {
       e && n.setMetaValue(
         [l, "annotationPageManager", "views"],
@@ -871,24 +876,24 @@ function vn(e, t = {}) {
       );
     },
     [e, n]
-  ), d = P(
+  ), d = b(
     (l, f = {}) => {
       if (!e)
         return;
-      const v = n.getState(), p = [];
+      const m = n.getState(), p = [];
       if (f != null && f.deselectOthers) {
-        const m = Object.keys(v.iiif.entities.AnnotationPage);
-        for (const g of m) {
-          const w = mn(v, g);
-          w && w.views && w.views[e] && p.push(g);
+        const g = Object.keys(m.iiif.entities.AnnotationPage);
+        for (const x of g) {
+          const v = mn(m, x);
+          v && v.views && v.views[e] && p.push(x);
         }
       }
-      for (const m of p)
-        c(m);
+      for (const g of p)
+        c(g);
       n.setMetaValue(
         [l, "annotationPageManager", "views"],
-        (m) => m && m[e] ? m : {
-          ...m || {},
+        (g) => g && g[e] ? g : {
+          ...g || {},
           [e]: !0
         }
       );
@@ -910,10 +915,10 @@ function je() {
   return T(yn);
 }
 function xn() {
-  const e = je(), [t, n] = L({}), r = q(!1);
+  const e = je(), [t, n] = L({}), r = _(!1);
   return N(() => () => {
     r.current = !0;
-  }, []), [P(
+  }, []), [b(
     (o, { height: a, width: s }) => {
       if (o) {
         const c = o.id || o["@id"], d = e.loadServiceSync({
@@ -998,27 +1003,27 @@ function Pn(e = He) {
       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 }] = 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]), c = {
+      for (const m of f) {
+        const [p, { selector: g }] = Sn(m), x = e.get(p), v = (x.type || "unknown").toLowerCase();
+        if (v === "choice") {
+          const y = e.get(x.items, { parent: x.id }), C = o.length ? o.map((S) => y.find((W) => W.id === S)).filter(Boolean) : [y[0]];
+          C.length === 0 && C.push(y[0]), c = {
             type: "single-choice",
-            items: x.map((b) => ({
-              id: b.id,
-              label: b.label,
-              selected: M.indexOf(b) !== -1
+            items: y.map((S) => ({
+              id: S.id,
+              label: S.label,
+              selected: C.indexOf(S) !== -1
             })),
             label: p.label
-          }, f.push(...M);
+          }, f.push(...C);
           continue;
         }
-        s.indexOf(w) === -1 && s.push(w), d.push({
-          type: w,
+        s.indexOf(v) === -1 && s.push(v), d.push({
+          type: v,
           annotationId: l.id,
-          resource: g,
+          resource: x,
           target: l.target,
-          selector: m
+          selector: g
         });
       }
     }
@@ -1039,29 +1044,29 @@ function Pn(e = He) {
   };
 }
 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(
+  const n = O(), r = w(() => Pn(n), []), i = wn({ enableSingleAnnotation: e == null ? void 0 : e.enableSingleAnnotation }), [o, a] = L((e == null ? void 0 : e.defaultChoices) || []), s = w(
     () => r.getPaintables(i, o),
     [n, i, o, ...t]
-  ), d = { makeChoice: P(
-    (l, { deselectOthers: f = !0, deselect: v = !1 } = {}) => {
+  ), d = { makeChoice: b(
+    (l, { deselectOthers: f = !0, deselect: m = !1 } = {}) => {
       if (s.choice) {
         if (s.choice.type !== "single-choice")
           throw new Error("Complex choice not supported yet");
         a((p) => {
-          if (v) {
-            const g = p.filter((w) => w !== l);
-            if (g.length === 0) {
-              const w = s.items[0].resource.id;
-              return w ? [w] : [];
+          if (m) {
+            const x = p.filter((v) => v !== l);
+            if (x.length === 0) {
+              const v = s.items[0].resource.id;
+              return v ? [v] : [];
             }
-            return g;
+            return x;
           }
           if (f)
             return [l];
-          const m = [...p];
-          if (m.length === 0 && s.items.length) {
-            const g = s.items[0].resource.id;
-            g && m.push(g);
+          const g = [...p];
+          if (g.length === 0 && s.items.length) {
+            const x = s.items[0].resource.id;
+            x && g.push(x);
           }
           return p.indexOf(l) !== -1 ? p : [...p, l];
         });
@@ -1074,17 +1079,17 @@ function bn(e, t = []) {
 const Cn = ["model/gltf-binary"];
 function En(e, t) {
   const r = t.items[0].resource;
-  return r.format ? Cn.indexOf(r.format) === -1 ? E(`3D format: ${r.format} is unsupported`) : {
+  return r.format ? Cn.indexOf(r.format) === -1 ? I(`3D format: ${r.format} is unsupported`) : {
     type: "3d-model",
     model: r
-  } : E("Unknown format");
+  } : I("Unknown format");
 }
 function In(e, t) {
   var r;
   if (!e.duration)
-    return E("No duration on canvas");
+    return I("No duration on canvas");
   if (t.items.length > 1)
-    return E("Only one audio source supported");
+    return I("Only one audio source supported");
   const n = (r = t.items[0]) == null ? void 0 : r.resource;
   return n ? n.format ? {
     type: "media",
@@ -1112,14 +1117,14 @@ function In(e, t) {
     annotations: {
       pages: []
     }
-  } : E("Audio does not have format") : E("Unknown audio");
+  } : I("Audio does not have format") : I("Unknown audio");
 }
 function Mn(e, t, n) {
   const r = [];
   for (const i of t.items) {
     const o = i.resource && i.resource.type === "SpecificResource" ? i.resource.source : i.resource;
     if (!o.id)
-      return E("No resource Identifier");
+      return I("No resource Identifier");
     let a;
     if (o.service) {
       const p = mt(o);
@@ -1156,7 +1161,7 @@ function Mn(e, t, n) {
       }
     } : void 0;
     a && !a.id && (a.id = a["@id"]);
-    const v = {
+    const m = {
       id: o.id,
       type: "Image",
       annotationId: i.annotationId,
@@ -1167,7 +1172,7 @@ function Mn(e, t, n) {
       target: c && c.type !== "PointSelector" ? c : s,
       selector: f
     };
-    r.push(v);
+    r.push(m);
   }
   return {
     type: "images",
@@ -1208,16 +1213,16 @@ function Rn(e, t) {
   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");
+    return I("Only one video source supported");
   const i = (s = n[0]) == null ? void 0 : s.resource, o = !!(i.service || []).find(
     (c) => (c.profile || "").includes("youtube.com")
   );
   if (!o && r)
-    return E("Video does not have duration");
+    return I("Video does not have duration");
   if (!i)
-    return E("Unknown video");
+    return I("Unknown video");
   if ((!i.format || i.format === "text/html") && !o)
-    return E("Video does not have format");
+    return I("Video does not have format");
   const a = {
     annotationId: t.items[0].annotationId,
     duration: e.duration,
@@ -1244,7 +1249,7 @@ function Rn(e, t) {
     a.type = "VideoYouTube";
     const c = i.id.match(Tn);
     if (!c[1])
-      return E("Video is not known youtube video");
+      return I("Video is not known youtube video");
     a.youTubeId = c[1];
   }
   return {
@@ -1264,9 +1269,9 @@ function Vn({ canvas: e, paintables: t, supports: n, loadImageService: r }) {
     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");
+      return n.indexOf("complex-timeline") === -1 ? I("Complex timeline not supported") : I("ComplexTimelineStrategy not yet supported");
   const i = t.types[0];
-  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;
+  return i === "image" ? n.indexOf("images") === -1 ? I("Image not supported") : Mn(e, t, r) : i === "Model" || i === "model" ? n.indexOf("3d-model") === -1 ? I("3D not supported") : En(e, t) : i === "textualbody" ? n.indexOf("textual-content") === -1 ? I("Textual content not supported") : An(e, t) : i === "sound" || i === "audio" ? n.indexOf("media") === -1 ? I("Media not supported") : In(e, t) : i === "video" ? n.indexOf("media") === -1 ? I("Media not supported") : Rn(e, t) : ce;
 }
 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), {
@@ -1277,8 +1282,8 @@ function On(e) {
     "media",
     "textual-content",
     "complex-timeline"
-  ], [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] : [
+  ], [d, l] = bn(e, [o]), f = w(() => Vn({ canvas: n, paintables: d, supports: c, loadImageService: i }), [n, d, r, l.makeChoice]);
+  return w(() => f.type === "unknown" ? [f, ln] : [
     {
       ...f,
       annotations: { pages: s }
@@ -1293,15 +1298,15 @@ const Ln = (e, t = []) => {
   }, [n, ...t]);
 };
 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;
+  const i = O(), o = je(), a = w(() => 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, m = _(!1);
+  if (N(() => (m.current = !1, () => {
+    m.current = !0;
   }), []), !f)
     throw new Error("Must be called under a manifest or canvas context.");
   return Ln(
     (p) => {
-      a.getBestThumbnailAtSize(f, e, t).then((m) => {
-        m.best && !v.current && c(m.best);
+      a.getBestThumbnailAtSize(f, e, t).then((g) => {
+        g.best && !m.current && c(g.best);
       });
     },
     [f]
@@ -1338,39 +1343,39 @@ function Un(e) {
   return `${Math.floor(t / 60)}:${`${t % 60}`.padStart(2, "0")}`;
 }
 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(() => {
+  const [t, n] = ot(Fn, Nn(e.duration)), r = _(null), i = _(null), o = _(null), a = _(!1), s = b(() => {
     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(() => {
+  }, [e.duration]), c = b(() => {
     r.current && (n({ type: "PLAY_REQUESTED" }), r.current.play().then(() => {
       n({ type: "PLAY" });
     }), s());
-  }, [s]), d = P(() => {
+  }, [s]), d = b(() => {
     r.current && (r.current.duration > 0 && r.current.paused ? c() : l());
-  }, [s]), l = P(() => {
+  }, [s]), l = b(() => {
     r.current && (r.current.pause(), n({ type: "PAUSE" }), s());
-  }, [s]), f = P(() => {
+  }, [s]), f = b(() => {
     r.current && (r.current.muted = !r.current.muted, n(r.current.muted ? { type: "MUTE" } : { type: "UNMUTE" }));
-  }, []), v = P(() => {
+  }, []), m = b(() => {
     r.current && (r.current.muted = !0, n({ type: "MUTE" }));
-  }, []), p = P(() => {
+  }, []), p = b(() => {
     r.current && (r.current.muted = !1, n({ type: "UNMUTE" }));
-  }, []), m = P((x) => {
-    r.current && (r.current.muted = !1, r.current.volume = x / 100, n({ type: "SET_VOLUME", volume: x }));
-  }, []), g = P((x) => {
-    r.current && (r.current.currentTime = Math.max(0, Math.min(x * e.duration, e.duration)), s());
-  }, []), w = P((x) => {
-    r.current && (r.current.currentTime = Math.max(0, Math.min(x, e.duration)), s());
+  }, []), g = b((y) => {
+    r.current && (r.current.muted = !1, r.current.volume = y / 100, n({ type: "SET_VOLUME", volume: y }));
+  }, []), x = b((y) => {
+    r.current && (r.current.currentTime = Math.max(0, Math.min(y * e.duration, e.duration)), s());
+  }, []), v = b((y) => {
+    r.current && (r.current.currentTime = Math.max(0, Math.min(y, e.duration)), s());
   }, []);
   return N(() => {
-    const x = setInterval(() => {
+    const y = setInterval(() => {
       s();
     }, 350);
-    return () => clearInterval(x);
+    return () => clearInterval(y);
   }, [s, e.duration]), N(() => {
-    const x = () => {
+    const y = () => {
       n({ type: "FINISHED" });
-    }, M = r.current;
-    return M == null || M.addEventListener("ended", x), () => M == null ? void 0 : M.removeEventListener("ended", x);
+    }, C = r.current;
+    return C == null || C.addEventListener("ended", y), () => C == null ? void 0 : C.removeEventListener("ended", y);
   }, []), [
     { element: r, currentTime: i, progress: o },
     t,
@@ -1378,12 +1383,12 @@ function pe(e) {
       play: c,
       pause: l,
       playPause: d,
-      mute: v,
+      mute: m,
       unmute: p,
       toggleMute: f,
-      setVolume: m,
-      setDurationPercent: g,
-      setTime: w
+      setVolume: g,
+      setDurationPercent: x,
+      setTime: v
     }
   ];
 }
@@ -1400,7 +1405,7 @@ function Ye({
 }
 function ze({ media: e, children: t }) {
   const [{ element: n, currentTime: r, progress: i }, o, a] = pe({ duration: e.duration });
-  return /* @__PURE__ */ I(
+  return /* @__PURE__ */ M(
     Ye,
     {
       state: o,
@@ -1427,7 +1432,7 @@ function We({
   media: t,
   playPause: n
 }) {
-  return /* @__PURE__ */ I("div", { className: "video-container", part: "video-container", onClick: n, children: [
+  return /* @__PURE__ */ M("div", { className: "video-container", part: "video-container", onClick: n, children: [
     /* @__PURE__ */ u("style", { children: `
             .video-container {
               position: absolute;
@@ -1471,7 +1476,7 @@ function Ge({
   ), null;
 }
 function Qe({ model: e }) {
-  return /* @__PURE__ */ I($, { children: [
+  return /* @__PURE__ */ M($, { children: [
     /* @__PURE__ */ u("style", { children: `
             .model-container {
               position: absolute;
@@ -1521,7 +1526,7 @@ function Ee(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__ */ 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 });
+  return w(() => 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 Hn(e, t, n) {
   if (t.length === 0)
@@ -1540,7 +1545,7 @@ function Hn(e, t, n) {
 }
 const $n = (e, t = []) => {
   const n = Xe();
-  return y(() => {
+  return w(() => {
     const r = e();
     return Hn(n, r, []);
   }, [n, ...t]);
@@ -1549,7 +1554,7 @@ function Yn(e, t, n = `
 `) {
   const r = $n(() => Object.keys(e || {}), [e]);
   return [
-    y(() => {
+    w(() => {
       if (!e)
         return t || "";
       if (typeof e == "string")
@@ -1598,8 +1603,8 @@ function Kn({
   media: t,
   playPause: n
 }) {
-  const r = q(null);
-  return t.youTubeId ? /* @__PURE__ */ I("div", { className: "video-container", part: "video-container", onClick: n, children: [
+  const r = _(null);
+  return t.youTubeId ? /* @__PURE__ */ M("div", { className: "video-container", part: "video-container", onClick: n, children: [
     /* @__PURE__ */ u("style", { children: `
             .video-container {
               position: absolute;
@@ -1656,55 +1661,55 @@ function et({
   mediaControlsDeps: d,
   strategies: l,
   throwOnUnknown: f,
-  backgroundStyle: v,
+  backgroundStyle: m,
   alwaysShowBackground: p,
-  keepCanvasScale: m = !1,
-  enableSizes: g = !1,
-  enableYouTube: w = !0,
-  onClickPaintingAnnotation: x,
-  children: M
+  keepCanvasScale: g = !1,
+  enableSizes: x = !1,
+  enableYouTube: v = !0,
+  onClickPaintingAnnotation: y,
+  children: C
 }) {
-  const b = j(), W = Ue(b, ["deep-zoom"]), [Z] = tn(), C = on(), A = O(), k = y(() => Te(A), [A]), [h, D] = On({
+  const S = j(), W = Ue(S, ["deep-zoom"]), [Z] = tn(), E = on(), A = O(), k = w(() => Te(A), [A]), [h, D] = On({
     strategies: l || ["images"],
-    defaultChoices: i == null ? void 0 : i.map(({ id: S }) => S)
-  }), ye = h.type === "images" ? h.choice : void 0, tt = y(() => m ? 1 : Math.max(
+    defaultChoices: i == null ? void 0 : i.map(({ id: P }) => P)
+  }), ye = h.type === "images" ? h.choice : void 0, tt = w(() => g ? 1 : Math.max(
     1,
-    ...h.type === "images" ? h.images.map((S) => {
+    ...h.type === "images" ? h.images.map((P) => {
       var H;
-      return (S.width || 0) / ((H = S.target) == null ? void 0 : H.spatial.width);
+      return (P.width || 0) / ((H = P.target) == null ? void 0 : H.spatial.width);
     }) : []
-  ), [m, h]);
+  ), [g, h]);
   an(tt), N(() => {
     r && r(D);
   }, [h.annotations]), N(() => {
     if (i)
-      for (const S of i)
-        typeof S.opacity < "u" && k.applyStyles({ id: S.id }, "atlas", {
-          opacity: S.opacity
+      for (const P of i)
+        typeof P.opacity < "u" && k.applyStyles({ id: P.id }, "atlas", {
+          opacity: P.opacity
         });
   }, [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}`,
+    E && (h.type === "images" || h.type === "empty" || h.type === "textual-content" && a) ? "overlay" : "none",
+    `canvas-portal-controls-${S == null ? void 0 : S.id}`,
     ve.Provider,
     a ? {
-      value: C || null,
+      value: E || null,
       children: a(h)
     } : {},
-    [b, C, h, ...c || []]
+    [S, E, h, ...c || []]
   );
-  const _ = kn({ maxWidth: 256, maxHeight: 256 });
-  if (!b)
+  const q = kn({ maxWidth: 256, maxHeight: 256 });
+  if (!S)
     return null;
-  const xe = b.accompanyingCanvas, G = _ && _.type === "fixed" ? /* @__PURE__ */ u("world-object", { height: b.height, width: b.width, x: e, y: t, children: /* @__PURE__ */ u(
+  const xe = S.accompanyingCanvas, G = q && q.type === "fixed" ? /* @__PURE__ */ u("world-object", { height: S.height, width: S.width, x: e, y: t, children: /* @__PURE__ */ u(
     "world-image",
     {
-      uri: _.id,
-      target: { x: 0, y: 0, width: b.width, height: b.height },
-      display: _.width && _.height ? {
-        width: _.width,
-        height: _.height
+      uri: q.id,
+      target: { x: 0, y: 0, width: S.width, height: S.height },
+      display: q.width && q.height ? {
+        width: q.width,
+        height: q.height
       } : void 0,
       crop: void 0
     }
@@ -1716,71 +1721,71 @@ function et({
       throw new Error(h.reason || "Unknown image strategy");
     return null;
   }
-  const we = /* @__PURE__ */ I(te, { children: [
+  const we = /* @__PURE__ */ M(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
+    h.annotations && h.annotations.pages ? h.annotations.pages.map((P) => /* @__PURE__ */ u(de, { page: P }, P.id)) : null,
+    C
   ] }), nt = h.type === "images" ? h.images.length : 0;
-  return /* @__PURE__ */ I($, { children: [
-    /* @__PURE__ */ I(
+  return /* @__PURE__ */ M($, { children: [
+    /* @__PURE__ */ M(
       "world-object",
       {
-        height: b.height,
-        width: b.width,
+        height: S.height,
+        width: S.width,
         x: e,
         y: t,
         ...W,
         children: [
-          h.type === "empty" || p ? /* @__PURE__ */ u(Ze, { style: v }) : null,
-          h.type === "textual-content" ? h.items.map((S, H) => {
+          h.type === "empty" || p ? /* @__PURE__ */ u(Ze, { style: m }) : null,
+          h.type === "textual-content" ? h.items.map((P, H) => {
             var Q;
-            return /* @__PURE__ */ I($, { children: [
+            return /* @__PURE__ */ M($, { children: [
               /* @__PURE__ */ u(
                 ft,
                 {
-                  onClick: x ? (Se) => {
-                    Se.stopPropagation(), x(S.annotationId, S, Se);
+                  onClick: y ? (Se) => {
+                    Se.stopPropagation(), y(P.annotationId, P, Se);
                   } : void 0,
-                  target: ((Q = S.target) == null ? void 0 : Q.spatial) || void 0,
-                  children: /* @__PURE__ */ u("div", { "data-textual-content": !0, children: /* @__PURE__ */ u(zn, { enableDangerouslySetInnerHTML: !0, children: S.text }) })
+                  target: ((Q = P.target) == null ? void 0 : Q.spatial) || void 0,
+                  children: /* @__PURE__ */ u("div", { "data-textual-content": !0, children: /* @__PURE__ */ u(zn, { enableDangerouslySetInnerHTML: !0, children: P.text }) })
                 },
                 H
               ),
               we
             ] });
           }) : null,
-          h.type === "images" ? /* @__PURE__ */ I($, { children: [
-            h.images.map((S, H) => /* @__PURE__ */ u(
+          h.type === "images" ? /* @__PURE__ */ M($, { children: [
+            h.images.map((P, H) => /* @__PURE__ */ u(
               qe,
               {
                 isStatic: o,
-                image: S,
-                id: S.id,
-                thumbnail: H === 0 ? _ : void 0,
-                selector: S.selector,
-                enableSizes: g,
-                onClick: x ? (Q) => {
-                  Q.stopPropagation(), x(S.annotationId, S, Q);
+                image: P,
+                id: P.id,
+                thumbnail: H === 0 ? q : void 0,
+                selector: P.selector,
+                enableSizes: x,
+                onClick: y ? (Q) => {
+                  Q.stopPropagation(), y(P.annotationId, P, Q);
                 } : void 0
               },
-              S.id + H
+              P.id + H
             )),
             we
           ] }) : null,
           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: [
+          h.type === "media" ? /* @__PURE__ */ u($, { children: h.media.type === "Sound" ? /* @__PURE__ */ M(Ke, { media: h.media, mediaControlsDeps: d, children: [
             G,
             s ? s(h) : null
-          ] }) : h.media.type === "Video" ? /* @__PURE__ */ I(Ge, { media: h.media, mediaControlsDeps: d, children: [
+          ] }) : h.media.type === "Video" ? /* @__PURE__ */ M(Ge, { media: h.media, mediaControlsDeps: d, children: [
             G,
             s ? s(h) : null
-          ] }) : h.media.type === "VideoYouTube" && w ? /* @__PURE__ */ I(Wn, { media: h.media, mediaControlsDeps: d, children: [
+          ] }) : h.media.type === "VideoYouTube" && v ? /* @__PURE__ */ M(Wn, { media: h.media, mediaControlsDeps: d, children: [
             G,
             s ? s(h) : null
           ] }) : null }) : null
         ]
       },
-      `${b.id}/${h.type}/${nt}`
+      `${S.id}/${h.type}/${nt}`
     ),
     h.type === "media" && h.media.type === "Sound" && xe ? /* @__PURE__ */ u(me, { canvas: xe.id, children: /* @__PURE__ */ u(et, { renderViewerControls: a }) }) : null
   ] });
@@ -1790,7 +1795,7 @@ const Gn = Me(function(t, n) {
   if (at(n, () => o, [o]), !r)
     return /* @__PURE__ */ u("div", {});
   let c = 0;
-  return /* @__PURE__ */ I($, { children: [
+  return /* @__PURE__ */ M($, { children: [
     t.header,
     /* @__PURE__ */ u(
       V.Viewer,
@@ -1818,8 +1823,8 @@ const Gn = Me(function(t, n) {
     t.children
   ] });
 }), 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(
+  const m = ge();
+  return /* @__PURE__ */ u(he, { vault: m, children: /* @__PURE__ */ u(Tt, { ...l, children: /* @__PURE__ */ u(
     Gn,
     {
       ref: f,