react-iiif-vault 1.0.11 → 1.1.0

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

@@ -1,1858 +0,0 @@
-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";
-import { expandTarget as le } from "@iiif/helpers/annotation-targets";
-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 yt extends rt {
-  constructor(t) {
-    super(t), this.resetErrorBoundary = this.resetErrorBoundary.bind(this), this.state = se;
-  }
-  static getDerivedStateFromError(t) {
-    return {
-      didCatch: !0,
-      error: t
-    };
-  }
-  resetErrorBoundary() {
-    const {
-      error: t
-    } = this.state;
-    if (t !== null) {
-      for (var n, r, i = arguments.length, o = new Array(i), a = 0; a < i; a++)
-        o[a] = arguments[a];
-      (n = (r = this.props).onReset) === null || n === void 0 || n.call(r, {
-        args: o,
-        reason: "imperative-api"
-      }), this.setState(se);
-    }
-  }
-  componentDidCatch(t, n) {
-    var r, i;
-    (r = (i = this.props).onError) === null || r === void 0 || r.call(i, t, n);
-  }
-  componentDidUpdate(t, n) {
-    const {
-      didCatch: r
-    } = this.state, {
-      resetKeys: i
-    } = this.props;
-    if (r && n.error !== null && xt(t.resetKeys, i)) {
-      var o, a;
-      (o = (a = this.props).onReset) === null || o === void 0 || o.call(a, {
-        next: i,
-        prev: t.resetKeys,
-        reason: "keys"
-      }), this.setState(se);
-    }
-  }
-  render() {
-    const {
-      children: t,
-      fallbackRender: n,
-      FallbackComponent: r,
-      fallback: i
-    } = this.props, {
-      didCatch: o,
-      error: a
-    } = this.state;
-    let s = t;
-    if (o) {
-      const c = {
-        error: a,
-        resetErrorBoundary: this.resetErrorBoundary
-      };
-      if (typeof n == "function")
-        s = n(c);
-      else if (r)
-        s = Pe(r, c);
-      else if (i === null || it(i))
-        s = i;
-      else
-        throw a;
-    }
-    return Pe(pt.Provider, {
-      value: {
-        didCatch: o,
-        error: a,
-        resetErrorBoundary: this.resetErrorBoundary
-      }
-    }, s);
-  }
-}
-function xt() {
-  let e = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
-  return e.length !== t.length || e.some((n, r) => !Object.is(n, t[r]));
-}
-const wt = {
-  collection: void 0,
-  manifest: void 0,
-  range: void 0,
-  canvas: void 0,
-  annotation: void 0,
-  annotationPage: void 0
-}, fe = B.createContext(wt), z = () => T(fe);
-function re({ value: e, children: t }) {
-  const n = z(), r = w(() => ({
-    ...n,
-    ...e
-  }), [e, n]);
-  return /* @__PURE__ */ u(fe.Provider, { value: r, children: t });
-}
-const ie = B.createContext({
-  vault: null,
-  setVaultInstance: (e) => {
-  }
-});
-function he({
-  vault: e,
-  vaultOptions: t,
-  useGlobal: n,
-  resources: 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 }) });
-}
-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 = 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), m = f ? f.id || f["@id"] : null;
-        f && i !== m && o(m), l(f);
-      } catch (f) {
-        s(f);
-      }
-    })();
-  }, [n, t]), {
-    isLoaded: !!d,
-    id: i,
-    requestId: n,
-    error: a,
-    resource: d,
-    cached: !!(d && d === c)
-  };
-}
-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 bt({ manifest: e, children: t }) {
-  return /* @__PURE__ */ u(re, { value: { manifest: e }, children: t });
-}
-function me({ canvas: e, children: t }) {
-  return /* @__PURE__ */ u(re, { value: { canvas: e }, children: t });
-}
-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) => {
-      i(o);
-    },
-    !1
-  ), t), r;
-}
-const oe = B.createContext([]);
-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();
-  O();
-  const o = n || i.manifest, a = R(
-    (s) => o ? s.iiif.entities.Manifest[o] : void 0,
-    [o]
-  );
-  return w(() => {
-    if (a)
-      return r ? r(a) : a;
-  }, [a, r, ...t]);
-}
-function Ct({ range: e, children: t }) {
-  return /* @__PURE__ */ u(re, { value: { range: e }, children: 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(...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 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((g, x) => x)]];
-  if (s || !o || n)
-    return [c, c.map((g, x) => [x])];
-  const d = [];
-  let l = [];
-  const f = () => {
-    l.length && (d.push([...l]), l = []);
-  };
-  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 (g === m || x.behavior.includes("facing-pages")) {
-      l.length && (p = !0), f(), d.push([g]), f();
-      continue;
-    }
-    if (l.push(g), p) {
-      f(), p = !1;
-      continue;
-    }
-    l.length > 1 && f();
-  }
-  return l.length && f(), [c, d];
-}
-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 w(() => {
-    if (a)
-      return r ? r(a) : a;
-  }, [a, r, ...t]);
-}
-function Mt({ startCanvas: e, disablePaging: t }) {
-  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] = w(
-    () => Et(n, s, { disablePaging: t }),
-    [n, s, t]
-  ), 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]
-  ), m = b(
-    (v) => {
-      const y = c.findIndex((C) => C.id === v);
-      y !== -1 ? f(y) : a(0);
-    },
-    [c, d]
-  ), 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 ? 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: f,
-    setCanvasId: m,
-    next: p,
-    previous: g
-  };
-}
-const J = () => {
-}, ae = F({
-  setCurrentCanvasId: J,
-  setCurrentCanvasIndex: J,
-  nextCanvas: J,
-  previousCanvas: J,
-  items: [],
-  sequence: [],
-  setSequenceIndex: J,
-  currentSequenceIndex: 0,
-  hasNext: !1,
-  hasPrevious: !1
-});
-function At(e) {
-  const t = K(), {
-    cursor: n,
-    visibleItems: r,
-    next: i,
-    sequence: o,
-    items: a,
-    setCanvasIndex: s,
-    setCanvasId: c,
-    previous: d,
-    setSequenceIndex: l,
-    hasNext: f,
-    hasPrevious: m
-  } = Mt({
-    startCanvas: e.startCanvas,
-    disablePaging: e.pagingEnabled === !1
-  }), p = w(
-    () => ({
-      sequence: o,
-      items: a,
-      // Extra functions.
-      setCurrentCanvasId: c,
-      nextCanvas: i,
-      previousCanvas: d,
-      totalCanvases: a.length,
-      setCurrentCanvasIndex: s,
-      setSequenceIndex: l,
-      currentSequenceIndex: n,
-      hasNext: f,
-      hasPrevious: m
-    }),
-    [o, a, c, i, d, a, s, l, n]
-  );
-  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: T(ie),
-    ResourceContext: T(fe),
-    SimpleViewerReactContext: T(ae),
-    VisibleCanvasReactContext: T(oe)
-  };
-}
-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() {
-    const t = { type: e, getType: () => e, toString: () => e };
-    return (n, r) => ({
-      ...t,
-      ...n !== void 0 && { payload: n },
-      ...r !== void 0 && { meta: r }
-    });
-  };
-}, 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 Xt() {
-  const t = O().getStore();
-  return w(() => (n) => t.dispatch(n), [t]);
-}
-function Ce(e) {
-  return typeof e != "string" && e && e.bindToVault;
-}
-function en() {
-  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,
-      type: "AnnotationPage",
-      behavior: [],
-      label: null,
-      thumbnail: [],
-      summary: null,
-      requiredStatement: null,
-      metadata: [],
-      rights: null,
-      provider: [],
-      items: [],
-      seeAlso: [],
-      homepage: [],
-      rendering: [],
-      service: []
-    };
-    n(
-      ue.importEntities({
-        entities: {
-          AnnotationPage: {
-            [s.id]: s
-          }
-        }
-      })
-    );
-  }, [r]);
-  const i = R(
-    (s) => r ? s.iiif.entities.AnnotationPage[r] : null,
-    [r]
-  ), o = b(
-    (s, c) => {
-      if (r) {
-        if (Ce(s)) {
-          const f = s;
-          f.__vault || f.bindToVault(e), s = typeof f.source == "string" ? f.source : f.source.id, t.current[s] = f;
-        } else
-          typeof s != "string" && (s = s.id);
-        const d = e.get({ id: r, type: "AnnotationPage" }), l = e.get({ id: s, type: "Annotation" });
-        d && l && (d.items.find((f) => f.id === l.id) || n(
-          ue.addReference({
-            id: r,
-            type: "AnnotationPage",
-            key: "items",
-            reference: {
-              id: s,
-              type: "Annotation"
-            },
-            index: c
-          })
-        ));
-      }
-    },
-    [r]
-  ), 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({
-          id: r,
-          type: "AnnotationPage",
-          key: "items",
-          reference: {
-            id: s,
-            type: "Annotation"
-          }
-        })
-      ));
-    },
-    [r]
-  );
-  return [
-    i,
-    {
-      addAnnotation: o,
-      removeAnnotation: a
-    }
-  ];
-}
-const Oe = F(null);
-function tn() {
-  const e = T(Oe);
-  return [
-    e.fullPage,
-    {
-      addAnnotation: e.addAnnotation,
-      removeAnnotation: e.removeAnnotation
-    }
-  ];
-}
-function nn({ children: e }) {
-  const [t, { addAnnotation: n, removeAnnotation: r }] = en();
-  return /* @__PURE__ */ u(
-    Oe.Provider,
-    {
-      value: w(() => ({ fullPage: t, addAnnotation: n, removeAnnotation: r }), [t]),
-      children: e
-    }
-  );
-}
-function rn({
-  width: e,
-  style: t,
-  height: n,
-  error: r,
-  resetErrorBoundary: i
-}) {
-  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" })
-  ] });
-}
-const ve = F(null);
-function on() {
-  return T(ve);
-}
-const Le = F(
-  () => {
-  }
-), ke = F(
-  () => {
-  }
-);
-function Y(e, t, n, r, i = []) {
-  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 = R((s) => o ? s.iiif.entities.Canvas[o] : void 0, [o]);
-  return w(() => {
-    if (a)
-      return r ? r(a) : a;
-  }, [a, r, ...t]);
-}
-const Ne = F(() => {
-});
-function an(e) {
-  const t = j(), n = T(Ne);
-  N(() => t && t.id ? (n(t.id, e), () => n(t.id, -1)) : () => {
-  }, [t, e]);
-}
-function sn({
-  children: e,
-  errorFallback: t,
-  outerContainerProps: n = {},
-  worldScale: r,
-  ...i
-}) {
-  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 { [E]: h, ...D } = k;
-        return D;
-      }
-      return { ...k, [E]: A };
-    });
-  }, []), W = b((E, A, k) => {
-    l(({ [E]: h, ...D }) => A ? {
-      ...D,
-      [E]: { element: A, props: k }
-    } : D);
-  }, []), Z = b((E, A, k) => {
-    p(({ [E]: h, ...D }) => A ? {
-      ...D,
-      [E]: { element: A, props: k }
-    } : D);
-  }, []);
-  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(([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: 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: g.map(([E, { element: A, props: k }]) => /* @__PURE__ */ u(B.Fragment, { children: /* @__PURE__ */ u(A, { ...k || {} }) }, E)) })
-  ] });
-}
-const X = {}, Fe = {
-  get(e) {
-    return e;
-  },
-  setMetaValue([e, t, n], r) {
-    const i = Fe.getResourceMeta(e, t), o = i ? i[n] : void 0, a = typeof r == "function" ? r(o) : r;
-    X[e] = {
-      ...X[e] || {},
-      [t]: {
-        ...(X[e] || {})[t] || {},
-        [n]: a
-      }
-    };
-  },
-  getResourceMeta: (e, t) => {
-    const n = X[e];
-    if (n)
-      return t ? n[t] : n;
-  }
-};
-function un(e = Fe) {
-  return {
-    addEventListener(t, n, r, i) {
-      if (t)
-        return e.setMetaValue(
-          [t.id, "eventManager", n],
-          (o) => {
-            const a = o || [];
-            for (const s of a)
-              if (s.callback === r)
-                return a;
-            return [...a, { callback: r, scope: i }];
-          }
-        ), r;
-    },
-    removeEventListener(t, n, r) {
-      t && e.setMetaValue(
-        [t.id, "eventManager", n],
-        (i) => (i || []).filter((o) => o.callback !== r)
-      );
-    },
-    getListenersAsProps(t, n) {
-      const r = typeof t == "string" ? { id: t } : t;
-      if (!r || !r.id)
-        return {};
-      const i = e.getResourceMeta(r.id, "eventManager"), o = {};
-      if (i && r)
-        for (const a of Object.keys(i))
-          o[a] = (s) => {
-            const c = e.get(r);
-            for (const { callback: d, scope: l } of i[a] || [])
-              (!l || n && l.indexOf(n) !== -1) && d(s, c);
-          };
-      return o;
-    }
-  };
-}
-function Ue(e, 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 = w(() => 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 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]
-  ), c = R(
-    (d) => s && s.body ? s.body.map((l) => l ? l.type === "SpecificResource" ? {
-      ...l,
-      source: o.get(l)
-    } : l ? d.iiif.entities[l.type][l.id] : null : null).filter(Boolean) : [],
-    [s]
-  );
-  return w(() => {
-    if (!s)
-      return;
-    const d = {
-      ...s,
-      body: c,
-      target: le(s.target, { typeMap: o.getState().iiif.mapping })
-    };
-    return r ? r(d) : d;
-  }, [s, r, c, ...t]);
-}
-const _e = ({
-  id: e,
-  style: t,
-  className: n,
-  interactive: r
-}) => {
-  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,
-    {
-      id: i.id,
-      isEditing: !0,
-      region: i.target.selector.spatial,
-      style: d,
-      className: (a == null ? void 0 : a.className) || n,
-      interactive: !!(a != null && a.href || r),
-      href: (a == null ? void 0 : a.href) || null,
-      title: (a == null ? void 0 : a.title) || null,
-      hrefTarget: (a == null ? void 0 : a.target) || null,
-      onClick: () => {
-      },
-      ...s
-    }
-  ) : null;
-};
-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]
-  );
-  return w(() => {
-    if (a)
-      return r ? r(a) : a;
-  }, [a, ...t]);
-}
-const de = ({
-  className: e,
-  page: t
-}) => {
-  var o;
-  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,
-      className: (i == null ? void 0 : i.className) || e
-    },
-    a.id
-  )) });
-};
-function qe({
-  id: e,
-  image: t,
-  thumbnail: n,
-  isStatic: r,
-  x: i = 0,
-  y: o = 0,
-  children: a,
-  selector: s,
-  onClick: c,
-  enableSizes: d
-}) {
-  var f, m;
-  const l = w(() => {
-    if (!(!s || s.spatial.x === 0 && s.spatial.y === 0))
-      return s.spatial;
-  }, [s]);
-  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: c,
-      children: t.service ? /* @__PURE__ */ M(te, { children: [
-        /* @__PURE__ */ u(
-          dt,
-          {
-            tiles: {
-              id: t.service.id || t.service["@id"] || "unknown",
-              height: t.height,
-              width: t.width,
-              imageService: t.service,
-              thumbnail: n && n.type === "fixed" ? n : void 0
-            },
-            enableSizes: d,
-            x: 0,
-            y: 0,
-            width: (f = t.target) == null ? void 0 : f.spatial.width,
-            height: (m = t.target) == null ? void 0 : m.spatial.height,
-            crop: l
-          }
-        ),
-        a
-      ] }, "service") : /* @__PURE__ */ M(te, { children: [
-        /* @__PURE__ */ u(
-          "world-image",
-          {
-            onClick: c,
-            uri: t.id,
-            target: { x: 0, y: 0, width: t.target.spatial.width, height: t.target.spatial.height },
-            display: t.width && t.height ? {
-              width: t.width,
-              height: t.height
-            } : void 0,
-            crop: l
-          }
-        ),
-        a
-      ] }, "no-service")
-    },
-    e + (t.service ? "server" : "no-service")
-  );
-}
-function Be(e, t) {
-  const { selector: n, source: r } = ht(t);
-  if (r.id !== e.id)
-    return [null, r];
-  const i = {
-    type: "BoxSelector",
-    spatial: {
-      x: 0,
-      y: 0,
-      width: Number(e.width),
-      height: Number(e.height)
-    }
-  };
-  return [
-    n ? n.type === "TemporalSelector" ? {
-      type: "TemporalBoxSelector",
-      temporal: n.temporal,
-      spatial: i.spatial
-    } : n : null,
-    r
-  ];
-}
-const ln = {
-  makeChoice: () => {
-  }
-}, 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];
-  return n ? n.annotationPageManager : null;
-}
-function hn(e, t) {
-  return R(
-    (n) => {
-      const r = [];
-      if (!e)
-        return r;
-      const i = Object.keys(n.iiif.entities.AnnotationPage);
-      for (const o of i)
-        if (!t || t.indexOf(o) !== -1) {
-          const a = fn(n, o);
-          a && a.views && a.views[e] && r.push(o);
-        }
-      return r;
-    },
-    [e, t]
-  );
-}
-function gn({
-  canvas: e,
-  manifest: t,
-  all: n,
-  canvases: r
-}) {
-  const i = [];
-  if (t)
-    for (const o of t.annotations)
-      i.indexOf(o.id) === -1 && i.push(o.id);
-  if (n) {
-    if (r && r.length)
-      for (const o of r)
-        for (const a of o.annotations)
-          i.indexOf(a.id) === -1 && i.push(a.id);
-  } else if (e)
-    for (const o of e.annotations)
-      i.indexOf(o.id) === -1 && i.push(o.id);
-  return i;
-}
-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 vn(e, t = {}) {
-  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 = b(
-    (l) => {
-      e && n.setMetaValue(
-        [l, "annotationPageManager", "views"],
-        (f) => f && !f[e] ? f : {
-          ...f || {},
-          [e]: !1
-        }
-      );
-    },
-    [e, n]
-  ), d = b(
-    (l, f = {}) => {
-      if (!e)
-        return;
-      const m = n.getState(), p = [];
-      if (f != null && f.deselectOthers) {
-        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 g of p)
-        c(g);
-      n.setMetaValue(
-        [l, "annotationPageManager", "views"],
-        (g) => g && g[e] ? g : {
-          ...g || {},
-          [e]: !0
-        }
-      );
-    },
-    [e, c, n]
-  );
-  return {
-    availablePageIds: a,
-    enabledPageIds: s,
-    setPageEnabled: d,
-    setPageDisabled: c
-  };
-}
-function pn(e, t) {
-  return R((n, r) => r.get(e.map((i) => ({ id: i, type: t }))), [e, t]);
-}
-const yn = B.createContext(new gt());
-function je() {
-  return T(yn);
-}
-function xn() {
-  const e = je(), [t, n] = L({}), r = _(!1);
-  return N(() => () => {
-    r.current = !0;
-  }, []), [b(
-    (o, { height: a, width: s }) => {
-      if (o) {
-        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[c] || (r.current || n((l) => ({
-          ...l,
-          [c]: "loading"
-        })), e.loadService({
-          id: c,
-          width: o.width || s,
-          height: o.height || a
-        }).then(() => {
-          r.current || n((l) => ({
-            ...l,
-            [c]: "done"
-          }));
-        }));
-      }
-      return o;
-    },
-    [e, t]
-  ), t];
-}
-function wn(e = {}) {
-  const t = De(), n = j(e.canvasId ? { id: e.canvasId } : void 0);
-  return R(
-    (r, i) => {
-      if (!n)
-        return [];
-      if (t && e.enableSingleAnnotation)
-        return [t];
-      const o = i.get(n.items), a = [];
-      for (const s of o)
-        a.push(...i.get(s.items));
-      return a;
-    },
-    [n]
-  );
-}
-function Sn(e) {
-  return e.type === "SpecificResource" ? [e.source, { selector: e.selector }] : [e, { selector: null }];
-}
-const ee = {}, He = {
-  get(e) {
-    return e;
-  },
-  setMetaValue([e, t, n], 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]: {
-        ...(ee[e] || {})[t] || {},
-        [n]: a
-      }
-    };
-  },
-  getResourceMeta: (e, t) => {
-    const n = ee[e];
-    if (n)
-      return t ? n[t] : n;
-  }
-};
-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 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 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 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: y.map((S) => ({
-              id: S.id,
-              label: S.label,
-              selected: C.indexOf(S) !== -1
-            })),
-            label: p.label
-          }, f.push(...C);
-          continue;
-        }
-        s.indexOf(v) === -1 && s.push(v), d.push({
-          type: v,
-          annotationId: l.id,
-          resource: x,
-          target: l.target,
-          selector: g
-        });
-      }
-    }
-    return {
-      types: s,
-      items: d,
-      choice: c
-    };
-  }
-  function r(i) {
-    const { choice: o } = n(i);
-    return o;
-  }
-  return {
-    getAllPaintingAnnotations: t,
-    getPaintables: n,
-    extractChoices: r
-  };
-}
-function bn(e, t = []) {
-  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: 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 (m) {
-            const x = p.filter((v) => v !== l);
-            if (x.length === 0) {
-              const v = s.items[0].resource.id;
-              return v ? [v] : [];
-            }
-            return x;
-          }
-          if (f)
-            return [l];
-          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];
-        });
-      }
-    },
-    [s.choice]
-  ) };
-  return [s, d];
-}
-const Cn = ["model/gltf-binary"];
-function En(e, t) {
-  const r = t.items[0].resource;
-  return r.format ? Cn.indexOf(r.format) === -1 ? I(`3D format: ${r.format} is unsupported`) : {
-    type: "3d-model",
-    model: r
-  } : I("Unknown format");
-}
-function In(e, t) {
-  var r;
-  if (!e.duration)
-    return I("No duration on canvas");
-  if (t.items.length > 1)
-    return I("Only one audio source supported");
-  const n = (r = t.items[0]) == null ? void 0 : r.resource;
-  return n ? n.format ? {
-    type: "media",
-    media: {
-      annotationId: t.items[0].annotationId,
-      duration: e.duration,
-      url: n.id,
-      type: "Sound",
-      target: {
-        type: "TemporalSelector",
-        temporal: {
-          startTime: 0,
-          endTime: e.duration
-        }
-      },
-      format: n.format,
-      selector: {
-        type: "TemporalSelector",
-        temporal: {
-          startTime: 0,
-          endTime: e.duration
-        }
-      }
-    },
-    annotations: {
-      pages: []
-    }
-  } : 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 I("No resource Identifier");
-    let a;
-    if (o.service) {
-      const p = mt(o);
-      p[0] && (a = n(p[0], e));
-    }
-    const s = {
-      type: "BoxSelector",
-      spatial: {
-        x: 0,
-        y: 0,
-        width: Number(e.width),
-        height: Number(e.height)
-      }
-    }, [c, d] = Be(e, i.target);
-    if (!(d.id === e.id || decodeURIComponent(d.id || "") === (e.id || "")))
-      continue;
-    i.resource.width && i.resource.height && (i.resource.width, i.resource.height);
-    let l = i.resource.type === "SpecificResource" ? le(i.resource) : null;
-    if (i.selector) {
-      const p = le({
-        type: "SpecificResource",
-        source: i.resource,
-        selector: i.selector
-      });
-      p && (l = p);
-    }
-    const f = l && l.selector && (l.selector.type === "BoxSelector" || l.selector.type === "TemporalBoxSelector") ? {
-      type: "BoxSelector",
-      spatial: {
-        x: l.selector.spatial.x,
-        y: l.selector.spatial.y,
-        width: l.selector.spatial.width,
-        height: l.selector.spatial.height
-      }
-    } : void 0;
-    a && !a.id && (a.id = a["@id"]);
-    const m = {
-      id: o.id,
-      type: "Image",
-      annotationId: i.annotationId,
-      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: c && c.type !== "PointSelector" ? c : s,
-      selector: f
-    };
-    r.push(m);
-  }
-  return {
-    type: "images",
-    image: r[0],
-    images: r,
-    choice: t.choice
-  };
-}
-function $e(e, t = {}, n) {
-  const r = e.language || n || "none";
-  switch (e.type) {
-    case "TextualBody": {
-      typeof e.value < "u" && (t[r] = e.value);
-      break;
-    }
-    case "List":
-    case "Composite":
-    case "Choice":
-      e.items && e.items.forEach((i) => $e(i, t, r));
-  }
-  return t;
-}
-function An(e, t) {
-  const n = [];
-  return t.items.forEach((r) => {
-    if (r.resource) {
-      const [i] = Be(e, r.target);
-      n.push({ annotationId: r.annotationId, text: $e(r.resource), target: i });
-    }
-  }), {
-    type: "textual-content",
-    items: n
-  };
-}
-const Tn = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\/)|(?:(?:watch)?\?vi?=|&vi?=))([^#&?]*).*/;
-function Rn(e, t) {
-  var s;
-  const n = t.items.filter((c) => c.type === "video");
-  let r = !1;
-  if (e.duration || (r = !0), n.length > 1)
-    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 I("Video does not have duration");
-  if (!i)
-    return I("Unknown video");
-  if ((!i.format || i.format === "text/html") && !o)
-    return I("Video does not have format");
-  const a = {
-    annotationId: t.items[0].annotationId,
-    duration: e.duration,
-    url: i.id,
-    type: "Video",
-    items: [],
-    target: {
-      type: "TemporalSelector",
-      temporal: {
-        startTime: 0,
-        endTime: e.duration
-      }
-    },
-    format: i.format,
-    selector: {
-      type: "TemporalSelector",
-      temporal: {
-        startTime: 0,
-        endTime: e.duration
-      }
-    }
-  };
-  if (o) {
-    a.type = "VideoYouTube";
-    const c = i.id.match(Tn);
-    if (!c[1])
-      return I("Video is not known youtube video");
-    a.youTubeId = c[1];
-  }
-  return {
-    type: "media",
-    media: a,
-    annotations: {
-      pages: []
-    }
-  };
-}
-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 ? 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 ? I("Complex timeline not supported") : I("ComplexTimelineStrategy not yet supported");
-  const i = t.types[0];
-  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), {
-    all: !1
-  }), s = pn(a, "AnnotationPage"), c = (e == null ? void 0 : e.strategies) || [
-    "empty",
-    "images",
-    "media",
-    "textual-content",
-    "complex-timeline"
-  ], [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 }
-    },
-    l
-  ], [f, s]);
-}
-const Ln = (e, t = []) => {
-  const n = O();
-  N(() => {
-    e(n);
-  }, [n, ...t]);
-};
-function kn(e, t, { canvasId: n, manifestId: r } = {}) {
-  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((g) => {
-        g.best && !m.current && c(g.best);
-      });
-    },
-    [f]
-  ), s;
-}
-function Nn(e) {
-  return { isMuted: !1, playRequested: !1, isPlaying: !1, isFinished: !1, volume: 100, duration: e };
-}
-function Fn(e, t) {
-  switch (t.type) {
-    case "FINISHED":
-      return { ...e, isFinished: !0, isPlaying: !1, playRequested: !1 };
-    case "PLAY_PAUSE":
-      return { ...e, isFinished: !1, isPlaying: !e.isPlaying };
-    case "PLAY_REQUESTED":
-      return { ...e, isFinished: !1, playRequested: !0 };
-    case "PAUSE":
-      return { ...e, isPlaying: !1 };
-    case "PLAY":
-      return { ...e, isFinished: !1, playRequested: !1, isPlaying: !0 };
-    case "MUTE":
-      return { ...e, isMuted: !0 };
-    case "SET_VOLUME":
-      return { ...e, volume: t.volume, isMuted: t.volume === 0 };
-    case "TOGGLE_MUTE":
-      return { ...e, isMuted: !e.isMuted };
-    case "UNMUTE":
-      return { ...e, isMuted: !1 };
-  }
-  return e;
-}
-function Un(e) {
-  const t = Math.round(e);
-  return `${Math.floor(t / 60)}:${`${t % 60}`.padStart(2, "0")}`;
-}
-function pe(e) {
-  const [t, n] = 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 = b(() => {
-    r.current && (n({ type: "PLAY_REQUESTED" }), r.current.play().then(() => {
-      n({ type: "PLAY" });
-    }), s());
-  }, [s]), d = b(() => {
-    r.current && (r.current.duration > 0 && r.current.paused ? c() : l());
-  }, [s]), l = b(() => {
-    r.current && (r.current.pause(), n({ type: "PAUSE" }), s());
-  }, [s]), f = b(() => {
-    r.current && (r.current.muted = !r.current.muted, n(r.current.muted ? { type: "MUTE" } : { type: "UNMUTE" }));
-  }, []), m = b(() => {
-    r.current && (r.current.muted = !0, n({ type: "MUTE" }));
-  }, []), p = b(() => {
-    r.current && (r.current.muted = !1, n({ type: "UNMUTE" }));
-  }, []), 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 y = setInterval(() => {
-      s();
-    }, 350);
-    return () => clearInterval(y);
-  }, [s, e.duration]), N(() => {
-    const y = () => {
-      n({ type: "FINISHED" });
-    }, 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,
-    {
-      play: c,
-      pause: l,
-      playPause: d,
-      mute: m,
-      unmute: p,
-      toggleMute: f,
-      setVolume: g,
-      setDurationPercent: x,
-      setTime: v
-    }
-  ];
-}
-const Dn = F(null), _n = F(null), qn = F(null);
-function Ye({
-  actions: e,
-  state: t,
-  children: n,
-  currentTime: r,
-  progress: i,
-  element: o
-}) {
-  return /* @__PURE__ */ u(qn.Provider, { value: { currentTime: r, progress: i, element: o }, children: /* @__PURE__ */ u(_n.Provider, { value: e, children: /* @__PURE__ */ u(Dn.Provider, { value: t, children: n }) }) });
-}
-function ze({ media: e, children: t }) {
-  const [{ element: n, currentTime: r, progress: i }, o, a] = pe({ duration: e.duration });
-  return /* @__PURE__ */ M(
-    Ye,
-    {
-      state: o,
-      actions: a,
-      currentTime: r,
-      progress: i,
-      element: n,
-      children: [
-        /* @__PURE__ */ u("audio", { ref: n, src: e.url }),
-        t
-      ]
-    }
-  );
-}
-function Ke({
-  media: e,
-  mediaControlsDeps: t,
-  children: n
-}) {
-  return Y("portal", "audio", ze, { media: e, children: n }, [e, ...t || []]), null;
-}
-function We({
-  element: e,
-  media: t,
-  playPause: n
-}) {
-  return /* @__PURE__ */ M("div", { className: "video-container", part: "video-container", onClick: n, children: [
-    /* @__PURE__ */ u("style", { children: `
-            .video-container {
-              position: absolute;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              background: #000;
-              z-index: 13;
-              display: flex;
-              justify-content: center;
-              pointer-events: visible;
-            }
-          ` }),
-    /* @__PURE__ */ u("video", { ref: e, src: t.url, style: { width: "100%", objectFit: "contain" } })
-  ] });
-}
-function Ge({
-  media: e,
-  mediaControlsDeps: t,
-  children: n
-}) {
-  const [{ element: r, currentTime: i, progress: o }, a, s] = pe({ duration: e.duration });
-  return Y("overlay", "video-element", We, {
-    element: r,
-    media: e,
-    playPause: s.playPause
-  }), Y(
-    "portal",
-    "custom-controls",
-    Ye,
-    {
-      state: a,
-      actions: s,
-      currentTime: i,
-      progress: o,
-      element: r,
-      children: n
-    },
-    [i, a, e, ...t || []]
-  ), null;
-}
-function Qe({ model: e }) {
-  return /* @__PURE__ */ M($, { children: [
-    /* @__PURE__ */ u("style", { children: `
-            .model-container {
-              position: absolute;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              background: #000;
-              z-index: 13;
-              display: flex;
-              justify-content: center;
-              pointer-events: visible;
-            }
-          ` }),
-    /* @__PURE__ */ u("div", { className: "model-container", children: /* @__PURE__ */ u(
-      "model-viewer",
-      {
-        "interaction-prompt": "none",
-        style: { width: "100%", height: "100%" },
-        "camera-controls": "",
-        "ar-status": "not-presenting",
-        src: e.id
-      }
-    ) })
-  ] });
-}
-function Je({ model: e, name: t }) {
-  return Y("overlay", `model-${t}`, Qe, { model: e }, [e]), null;
-}
-function Ze({ style: e }) {
-  const t = j();
-  return !t || !t.height || !t.width ? null : /* @__PURE__ */ u(
-    "box",
-    {
-      interactive: !1,
-      target: { x: 0, y: 0, width: Number(t.width), height: Number(t.height) },
-      style: e
-    }
-  );
-}
-const Bn = B.createContext("en");
-function Xe() {
-  return B.useContext(Bn);
-}
-function Ee(e) {
-  return e.indexOf("-") !== -1 ? e.slice(0, e.indexOf("-")) : e;
-}
-function jn({ as: e, language: t, children: n, viewingDirection: r, ...i }) {
-  const o = Xe();
-  return 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)
-    return;
-  if (t.length === 1)
-    return t[0];
-  if (t.indexOf(e) !== -1)
-    return e;
-  const r = e.indexOf("-") !== -1 ? e.slice(0, e.indexOf("-")) : null;
-  if (r && t.indexOf(r) !== -1)
-    return r;
-  for (const i of n)
-    if (t.indexOf(i) !== -1)
-      return i;
-  return t.indexOf("none") !== -1 ? "none" : t.indexOf("@none") !== -1 ? "@none" : t[0];
-}
-const $n = (e, t = []) => {
-  const n = Xe();
-  return w(() => {
-    const r = e();
-    return Hn(n, r, []);
-  }, [n, ...t]);
-};
-function Yn(e, t, n = `
-`) {
-  const r = $n(() => Object.keys(e || {}), [e]);
-  return [
-    w(() => {
-      if (!e)
-        return t || "";
-      if (typeof e == "string")
-        return e;
-      const i = r ? e[r] : void 0;
-      return i ? typeof i == "string" ? i : i.join(n) : "";
-    }, [r, t, e]),
-    r
-  ];
-}
-function zn({
-  as: e,
-  defaultText: t,
-  enableDangerouslySetInnerHTML: n,
-  children: r,
-  separator: i,
-  ...o
-}) {
-  const [a, s] = Yn(r, t, i);
-  return s ? /* @__PURE__ */ u(
-    jn,
-    {
-      ...o,
-      as: e,
-      language: s,
-      title: n ? void 0 : a,
-      dangerouslySetInnerHTML: n ? {
-        __html: a
-      } : void 0,
-      children: n ? void 0 : a
-    }
-  ) : e ? /* @__PURE__ */ u(e, { ...o, children: a }) : /* @__PURE__ */ u(
-    "span",
-    {
-      ...o,
-      title: n ? void 0 : a,
-      dangerouslySetInnerHTML: n ? {
-        __html: a
-      } : void 0,
-      children: n ? void 0 : a
-    }
-  );
-}
-function Kn({
-  element: e,
-  media: t,
-  playPause: n
-}) {
-  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;
-              top: 0;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              background: #000;
-              z-index: 13;
-              display: flex;
-              justify-content: center;
-              pointer-events: visible;
-            }
-            .video-yt {
-              border: none;
-              width: 100%;
-              object-fit: contain;
-            }
-          ` }),
-    /* @__PURE__ */ u(
-      "iframe",
-      {
-        className: "video-yt",
-        ref: r,
-        src: `https://www.youtube.com/embed/${t.youTubeId}?enablejsapi=1&origin=${window.location.host}`,
-        referrerPolicy: "no-referrer",
-        sandbox: "allow-scripts allow-same-origin allow-presentation"
-      }
-    )
-  ] }) : null;
-}
-function Wn({
-  media: e,
-  mediaControlsDeps: t,
-  children: n
-}) {
-  const [{ element: r, currentTime: i, progress: o }, a, s] = pe({ duration: e.duration });
-  return Y("overlay", "video-element", Kn, {
-    element: r,
-    media: e,
-    playPause: s.playPause
-  }), null;
-}
-function et({
-  x: e,
-  y: t,
-  onChoiceChange: n,
-  registerActions: r,
-  defaultChoices: i,
-  isStatic: o,
-  renderViewerControls: a,
-  renderMediaControls: s,
-  viewControlsDeps: c,
-  mediaControlsDeps: d,
-  strategies: l,
-  throwOnUnknown: f,
-  backgroundStyle: m,
-  alwaysShowBackground: p,
-  keepCanvasScale: g = !1,
-  enableSizes: x = !1,
-  enableYouTube: v = !0,
-  onClickPaintingAnnotation: y,
-  children: C
-}) {
-  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: P }) => P)
-  }), ye = h.type === "images" ? h.choice : void 0, tt = w(() => g ? 1 : Math.max(
-    1,
-    ...h.type === "images" ? h.images.map((P) => {
-      var H;
-      return (P.width || 0) / ((H = P.target) == null ? void 0 : H.spatial.width);
-    }) : []
-  ), [g, h]);
-  an(tt), N(() => {
-    r && r(D);
-  }, [h.annotations]), N(() => {
-    if (i)
-      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(
-    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: E || null,
-      children: a(h)
-    } : {},
-    [S, E, h, ...c || []]
-  );
-  const q = kn({ maxWidth: 256, maxHeight: 256 });
-  if (!S)
-    return null;
-  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: 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
-    }
-  ) }) : null;
-  if (h.type === "unknown") {
-    if (G)
-      return G;
-    if (f)
-      throw new Error(h.reason || "Unknown image strategy");
-    return null;
-  }
-  const we = /* @__PURE__ */ M(te, { children: [
-    Z ? /* @__PURE__ */ u(de, { page: Z }) : null,
-    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__ */ M($, { children: [
-    /* @__PURE__ */ M(
-      "world-object",
-      {
-        height: S.height,
-        width: S.width,
-        x: e,
-        y: t,
-        ...W,
-        children: [
-          h.type === "empty" || p ? /* @__PURE__ */ u(Ze, { style: m }) : null,
-          h.type === "textual-content" ? h.items.map((P, H) => {
-            var Q;
-            return /* @__PURE__ */ M($, { children: [
-              /* @__PURE__ */ u(
-                ft,
-                {
-                  onClick: y ? (Se) => {
-                    Se.stopPropagation(), y(P.annotationId, P, Se);
-                  } : void 0,
-                  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__ */ M($, { children: [
-            h.images.map((P, H) => /* @__PURE__ */ u(
-              qe,
-              {
-                isStatic: o,
-                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
-              },
-              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__ */ M(Ke, { media: h.media, mediaControlsDeps: d, children: [
-            G,
-            s ? s(h) : null
-          ] }) : h.media.type === "Video" ? /* @__PURE__ */ M(Ge, { media: h.media, mediaControlsDeps: d, children: [
-            G,
-            s ? s(h) : null
-          ] }) : h.media.type === "VideoYouTube" && v ? /* @__PURE__ */ M(Wn, { media: h.media, mediaControlsDeps: d, children: [
-            G,
-            s ? s(h) : null
-          ] }) : null }) : null
-        ]
-      },
-      `${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
-  ] });
-}
-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__ */ M($, { children: [
-    t.header,
-    /* @__PURE__ */ u(
-      V.Viewer,
-      {
-        height: t.height,
-        mode: t.mode,
-        children: i.map((d, l) => {
-          const f = c;
-          return c += d.width + (t.spacing || 0), /* @__PURE__ */ u(me, { canvas: d.id, children: /* @__PURE__ */ u(
-            V.RenderCanvas,
-            {
-              strategies: ["3d-model", "media", "images", "empty", "textual-content"],
-              renderViewerControls: l === 0 && a ? () => /* @__PURE__ */ u(a, {}) : void 0,
-              renderMediaControls: l === 0 && s ? () => /* @__PURE__ */ u(s, {}) : void 0,
-              x: f,
-              ...t.canvasProps || {},
-              children: t.annotations
-            },
-            d.id
-          ) }, d.id);
-        })
-      },
-      t.reuseAtlas ? "" : o.currentSequenceIndex
-    ),
-    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 m = ge();
-  return /* @__PURE__ */ u(he, { vault: m, children: /* @__PURE__ */ u(Tt, { ...l, children: /* @__PURE__ */ u(
-    Gn,
-    {
-      ref: f,
-      height: n,
-      components: s,
-      spacing: o,
-      canvasProps: i,
-      annotations: r,
-      header: a,
-      mode: c,
-      reuseAtlas: d,
-      children: t
-    }
-  ) }) });
-});
-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 {
-  V as CanvasPanel
-};
-//# sourceMappingURL=canvas-panel.mjs.map