react-iiif-vault 0.9.3 → 0.9.6

package/dist/cjs/index.js

@@ -1 +1,1527 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var u=require("react"),T=require("@iiif/vault"),k=require("react-query"),L=require("@atlas-viewer/iiif-image-api"),b=require("@iiif/vault-helpers"),h=require("typesafe-actions"),je=require("@iiif/parser");function De(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var g=De(u),Fe=Object.defineProperty,z=Object.getOwnPropertySymbols,Ne=Object.prototype.hasOwnProperty,Be=Object.prototype.propertyIsEnumerable,Y=(e,t,n)=>t in e?Fe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,W=(e,t)=>{for(var n in t||(t={}))Ne.call(t,n)&&Y(e,n,t[n]);if(z)for(var n of z(t))Be.call(t,n)&&Y(e,n,t[n]);return e};const Ue={collection:void 0,manifest:void 0,range:void 0,canvas:void 0,annotation:void 0},j=g.default.createContext(Ue),C=()=>u.useContext(j),E=({value:e,children:t})=>{const n=C(),r=u.useMemo(()=>W(W({},n),e),[e,n]);return g.default.createElement(j.Provider,{value:r},t)},ke=({annotation:e,children:t})=>g.default.createElement(E,{value:{annotation:e}},t),G=({canvas:e,children:t})=>g.default.createElement(E,{value:{canvas:e}},t),He=({collection:e,children:t})=>g.default.createElement(E,{value:{collection:e}},t),X=({manifest:e,children:t})=>g.default.createElement(E,{value:{manifest:e}},t),Qe=({range:e,children:t})=>g.default.createElement(E,{value:{range:e}},t),A=g.default.createContext({vault:null,setVaultInstance:e=>{}}),J=({vault:e,vaultOptions:t,useGlobal:n,resources:r,children:c})=>{const[i,a]=u.useState(()=>e||(n?T.globalVault(t):t?new T.Vault(t):new T.Vault));return g.default.createElement(A.Provider,{value:{vault:i,setVaultInstance:a}},g.default.createElement(E,{value:r||{}},c))},y=()=>{const{vault:e}=u.useContext(A);if(e===null)throw new Error("Vault not found. Ensure you have your provider set up correctly.");return e};var qe=Object.defineProperty,K=Object.getOwnPropertySymbols,ze=Object.prototype.hasOwnProperty,Ye=Object.prototype.propertyIsEnumerable,Z=(e,t,n)=>t in e?qe(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,We=(e,t)=>{for(var n in t||(t={}))ze.call(t,n)&&Z(e,n,t[n]);if(K)for(var n of K(t))Ye.call(t,n)&&Z(e,n,t[n]);return e},Ge=(e,t,n)=>new Promise((r,c)=>{var i=s=>{try{o(n.next(s))}catch(l){c(l)}},a=s=>{try{o(n.throw(s))}catch(l){c(l)}},o=s=>s.done?r(s.value):Promise.resolve(s.value).then(i,a);o((n=n.apply(e,t)).next())});const ee=(e,t={})=>{const n=y(),[r,c]=u.useState(e),i=u.useMemo(()=>n.get(e)||void 0,[e,n]),{data:a,error:o}=k.useQuery(["manifest",e],()=>Ge(void 0,null,function*(){const s=i||(yield n.load(e));return s&&r!==s.id&&c(s.id),s}),We({refetchIntervalInBackground:!1,refetchOnMount:!1,refetchOnWindowFocus:!1,refetchInterval:!1,retry:!1,initialData:i},t));return{isLoaded:!!a,id:r,error:o,manifest:a}};function P(e,t=[]){const n=y(),[r,c]=u.useState(()=>e(n.getState(),n));return u.useEffect(()=>n.subscribe(i=>e(i,n),i=>{c(i)},!0),t),r}const R=g.default.createContext([]);function te(){const e=u.useContext(R);return P(t=>e.map(n=>t.iiif.entities.Canvas[n]).filter(Boolean),[e])}const D=()=>{},M=u.createContext({setCurrentCanvasId:D,setCurrentCanvasIndex:D,nextCanvas:D,previousCanvas:D,currentCanvasIndex:-1,totalCanvases:0,pagingView:!0}),Xe=e=>{const t=ee(e.manifest),[n,r]=u.useState(""),[c,i]=u.useState([]),a=(typeof e.pagingEnabled>"u"||e.pagingEnabled)&&t.manifest&&t.manifest.behavior&&t.manifest.behavior.includes("paged");u.useEffect(()=>{var f,m;t.manifest&&(r((f=t.manifest.items[0])==null?void 0:f.id),i([(m=t.manifest.items[0])==null?void 0:m.id]))},[t.manifest,e.manifest]);const o=u.useMemo(()=>{var f;return((f=t.manifest)==null?void 0:f.items.map(m=>m.id))||[]},[t.manifest,e.manifest]),s=u.useMemo(()=>o.indexOf(n),[o,n]),l=u.useCallback(()=>{if(o.length&&n){if(s===-1||(o[s+2]?s+2===o.length:s===o.length))return;const f=a&&s!==0?o[s+2]:o[s+1],m=a?s!==0?o[s+3]:o[s+2]:null;f&&(r(f),i(m?[f,m]:[f]))}},[a,o,n,s]),p=u.useCallback(()=>{if(o.length&&n){if(s===0||s===-1)return;const f=a&&s!==1?o[s-2]:o[s-1],m=a&&s!==1?o[s-1]:null;f&&(r(f),i(m?[f,m]:[f]))}},[a,o,n,s]),d=u.useCallback(f=>{const m=a&&f%2===1?f-1:f,w=o[m],q=a&&m!==0?o[m+1]:null;w&&(r(w),i(I=>{const U=q?[w,q]:[w];if(I.length===I.length){for(let V=0;V<I.length;V++)if(I[V]!==U[V])return U;return I}return U}))},[a,o]),v=u.useCallback(f=>{const m=o.indexOf(f);m!==-1&&d(m)},[o,d]),_=u.useMemo(()=>({setCurrentCanvasId:v,nextCanvas:l,previousCanvas:p,currentCanvasIndex:s,totalCanvases:o.length,setCurrentCanvasIndex:d,pagingView:!0}),[l,p,s,o,d,v]);return!t.isLoaded||!t.manifest?g.default.createElement("div",null,"Loading..."):g.default.createElement(M.Provider,{value:_},g.default.createElement(R.Provider,{value:c},g.default.createElement(X,{manifest:t.manifest.id},g.default.createElement(G,{canvas:n},e.children))))};function Je(){return u.useContext(M)}function Ke(){return{VaultContext:u.useContext(A),ResourceContext:u.useContext(j),SimpleViewerReactContext:u.useContext(M),VisibleCanvasReactContext:u.useContext(R)}}const Ze=e=>g.default.createElement(J,{vault:e.bridge.VaultContext.vault||void 0,resources:e.bridge.ResourceContext},g.default.createElement(R.Provider,{value:e.bridge.VisibleCanvasReactContext},g.default.createElement(M.Provider,{value:e.bridge.SimpleViewerReactContext},e.children))),ne=g.default.createContext(new L.ImageServiceLoader);function F(){return u.useContext(ne)}const et=/&?(xywh=)?(pixel:|percent:)?([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?)/,tt=/&?(t=)(npt:)?([0-9]+(.[0-9]+)?)?(,([0-9]+(.[0-9]+)?))?/;function N(e){if(Array.isArray(e))return e.reduce((t,n)=>{const{selector:r,selectors:c}=N(n);return r&&(t.selector||(t.selector=r),t.selectors.push(...c)),t},{selector:null,selectors:[]});if(!e)return{selector:null,selectors:[]};if(typeof e=="string"){const[t,n]=e.split("#");return n?N({type:"FragmentSelector",value:n}):{selector:null,selectors:[]}}if(e.type==="PointSelector"&&(e.t||e.t===0)){const t={type:"TemporalSelector",temporal:{startTime:e.t}};return{selector:t,selectors:[t]}}if(e.type==="FragmentSelector"){const t=et.exec(e.value);if(t){const r={type:"BoxSelector",spatial:{unit:t[2]==="percent:"?"percent":"pixel",x:parseFloat(t[3]),y:parseFloat(t[4]),width:parseFloat(t[5]),height:parseFloat(t[6])}};return{selector:r,selectors:[r]}}const n=e.value.match(tt);if(n){const r={type:"TemporalSelector",temporal:{startTime:n[4]?parseFloat(n[4]):0,endTime:n[7]?parseFloat(n[7]):void 0}};return{selector:r,selectors:[r]}}return{selector:null,selectors:[]}}return{selector:null,selectors:[]}}var nt=Object.defineProperty,rt=Object.defineProperties,ot=Object.getOwnPropertyDescriptors,re=Object.getOwnPropertySymbols,it=Object.prototype.hasOwnProperty,at=Object.prototype.propertyIsEnumerable,oe=(e,t,n)=>t in e?nt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,ie=(e,t)=>{for(var n in t||(t={}))it.call(t,n)&&oe(e,n,t[n]);if(re)for(var n of re(t))at.call(t,n)&&oe(e,n,t[n]);return e},ae=(e,t)=>rt(e,ot(t));function O(e,t={}){if(Array.isArray(e))return O(e[0]);if(typeof e=="string"){const[n,r]=e.split("#");return r?O({type:"SpecificResource",source:{id:n,type:"Unknown"},selector:{type:"FragmentSelector",value:r}}):{type:"SpecificResource",source:{id:n,type:t.typeMap&&t.typeMap[n]||"Unknown"},selector:null,selectors:[]}}if(e.type==="Choice"||e.type==="List"||e.type==="Composite"||e.type==="Independents")return O(e.items[0]);if(e.type==="SpecificResource"){e.source.type==="Canvas"&&e.source.partOf&&typeof e.source.partOf=="string"&&(e.source.partOf=[{id:e.source.partOf,type:"Manifest"}]);const{selector:n,selectors:r}=e.selector?N(e.selector):{selector:null,selectors:[]};return{type:"SpecificResource",source:e.source,selector:n,selectors:r}}if(e.id){e.type==="Canvas"&&e.partOf&&typeof e.partOf=="string"&&(e.partOf=[{id:e.partOf,type:"Manifest"}]);const[n,r]=e.id.split("#");return r?O({type:"SpecificResource",source:ae(ie({},e),{id:n}),selector:{type:"FragmentSelector",value:r}}):{type:"SpecificResource",source:ae(ie({},e),{id:n}),selector:null,selectors:[]}}return{type:"SpecificResource",source:e,selector:null,selectors:[]}}function se(e){return e.type==="SpecificResource"?[e.source,{selector:e.selector}]:[e,{selector:null}]}function ce(e,t,n){const r=[];let c=null;const i=[];for(const a of t){const o=e.get(a.body);for(const s of o){const[l,{selector:p}]=se(s),d=(l.type||"unknown").toLowerCase();if(d==="choice"){const v=e.get(l.items),_=n.length?n.map(f=>v.find(m=>m.id===f)).filter(Boolean):[v[0]];_.length===0&&_.push(v[0]),c={type:"single-choice",items:v.map(f=>({id:f.id,label:f.label,selected:_.indexOf(f)!==-1})),label:s.label},o.push(..._);continue}r.indexOf(d)===-1&&r.push(d),i.push({type:d,resource:l,target:a.target,selector:p})}}return{types:r,items:i,choice:c}}const ue={makeChoice:()=>{}},H={type:"unknown"},S=e=>({type:"unknown",reason:e,annotations:{pages:[]}});function le(e,t,n){const r=[];for(const c of t.items){const i=c.resource&&c.resource.type==="SpecificResource"?c.resource.source:c.resource;if(!i.id)return S("No resource Identifier");let a;if(i.service){const m=L.getImageServices(i);m[0]&&(a=n(m[0],e))}const{selector:o,source:s}=O(c.target);if(s.id!==e.id)continue;const l={type:"BoxSelector",spatial:{x:0,y:0,width:e.width,height:e.height}},p=o?o.type==="TemporalSelector"?{type:"TemporalBoxSelector",temporal:o.temporal,spatial:l.spatial}:o:null,d={type:"BoxSelector",spatial:{x:0,y:0,width:e.width,height:e.height}},v=c.resource.type==="SpecificResource"?O(c.resource):null,_=v&&v.selector&&(v.selector.type==="BoxSelector"||v.selector.type==="TemporalBoxSelector")?{type:"BoxSelector",spatial:{x:v.selector.spatial.x,y:v.selector.spatial.y,width:v.selector.spatial.width,height:v.selector.spatial.height}}:d,f={id:i.id,type:"Image",width:p?i.width:e.width,height:p?i.height:e.height,service:a,sizes:a&&a.sizes?a.sizes:i.width&&i.height?[{width:i.width,height:i.height}]:[],target:p&&p.type!=="PointSelector"?p:l,selector:_};r.push(f)}return{type:"images",image:r[0],images:r,choice:t.choice}}var st=Object.defineProperty,ct=Object.defineProperties,ut=Object.getOwnPropertyDescriptors,fe=Object.getOwnPropertySymbols,lt=Object.prototype.hasOwnProperty,ft=Object.prototype.propertyIsEnumerable,de=(e,t,n)=>t in e?st(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,dt=(e,t)=>{for(var n in t||(t={}))lt.call(t,n)&&de(e,n,t[n]);if(fe)for(var n of fe(t))ft.call(t,n)&&de(e,n,t[n]);return e},pt=(e,t)=>ct(e,ut(t));function vt(e={},t=[]){const{id:n,selector:r}=e,c=C(),i=y(),a=n||c.annotation,o=P(l=>a?l.iiif.entities.Annotation[a]:void 0,[a]),s=P(l=>o&&o.body?o.body.map(p=>p?l.iiif.entities[p.type][p.id]:null).filter(Boolean):[],[o]);return u.useMemo(()=>{if(!o)return;const l=pt(dt({},o),{body:s,target:O(o.target,{typeMap:i.getState().iiif.mapping})});return r?r(l):l},[o,r,s,...t])}function $(e={},t=[]){const{id:n,selector:r}=e,c=C();y();const i=n||c.manifest,a=P(o=>i?o.iiif.entities.Manifest[i]:void 0,[i]);return u.useMemo(()=>{if(!!a)return r?r(a):a},[a,r,...t])}function x(e={},t=[]){const{id:n,selector:r}=e,c=C(),i=n||c.canvas,a=P(o=>i?o.iiif.entities.Canvas[i]:void 0,[i]);return u.useMemo(()=>{if(!!a)return r?r(a):a},[a,r,...t])}function mt(e,t){var n;const r=(n=e==null?void 0:e.iiif)==null?void 0:n.meta[t];return r?r.annotationPageManager:null}function gt(e,t){return P(n=>{const r=[];if(!e)return r;const c=Object.keys(n.iiif.entities.AnnotationPage);for(const i of c)if(!t||t.indexOf(i)!==-1){const a=mt(n,i);a&&a.views&&a.views[e]&&r.push(i)}return r},[e])}function pe({canvas:e,manifest:t,all:n,canvases:r}){const c=[];if(t)for(const i of t.annotations)c.indexOf(i.id)===-1&&c.push(i.id);if(n){if(r&&r.length)for(const i of r)for(const a of i.annotations)c.indexOf(a.id)===-1&&c.push(a.id)}else if(e)for(const i of e.annotations)c.indexOf(i.id)===-1&&c.push(i.id);return c}var yt=Object.defineProperty,ht=Object.defineProperties,_t=Object.getOwnPropertyDescriptors,ve=Object.getOwnPropertySymbols,Pt=Object.prototype.hasOwnProperty,St=Object.prototype.propertyIsEnumerable,me=(e,t,n)=>t in e?yt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,ge=(e,t)=>{for(var n in t||(t={}))Pt.call(t,n)&&me(e,n,t[n]);if(ve)for(var n of ve(t))St.call(t,n)&&me(e,n,t[n]);return e},ye=(e,t)=>ht(e,_t(t));function wt(e,t){var n;const r=(n=e==null?void 0:e.iiif)==null?void 0:n.meta[t];return r?r.annotationPageManager:null}function he(e,t={}){const n=y(),r=$(),c=x(),i=te(),a=u.useMemo(()=>pe({all:t.all,manifest:r,canvas:c,canvases:i}),[t.all,c,i,r]),o=gt(e,t.all?void 0:a),s=u.useCallback(p=>{!e||n.setMetaValue([p,"annotationPageManager","views"],d=>d&&!d[e]?d:ye(ge({},d||{}),{[e]:!1}))},[e,n]),l=u.useCallback((p,d={})=>{if(!e)return;const v=n.getState(),_=[];if(d==null?void 0:d.deselectOthers){const f=Object.keys(v.iiif.entities.AnnotationPage);for(const m of f){const w=wt(v,m);w&&w.views&&w.views[e]&&_.push(m)}}for(const f of _)s(f);n.setMetaValue([p,"annotationPageManager","views"],f=>f&&f[e]?f:ye(ge({},f||{}),{[e]:!0}))},[e,s,n]);return{availablePageIds:a,enabledPageIds:o,setPageEnabled:l,setPageDisabled:s}}function B(e={}){const t=x(e.canvasId?{id:e.canvasId}:void 0);return P((n,r)=>{if(!t)return[];const c=r.get(t.items),i=[];for(const a of c)i.push(...r.get(a.items));return i},[t])}function Ot(e,t={}){return B(t)}function Ct(e,t=!1){}function Et(e,t=[]){const{id:n,selector:r}=e,c=C(),i=n||c.collection,a=P(o=>i?o.iiif.entities.Collection[i]:void 0,[i]);return u.useMemo(()=>{if(!!a)return r?r(a):a},[a,r,...t])}function _e(){const t=y().getStore();return u.useMemo(()=>n=>t.dispatch(n),[t])}function xt(e,t,n,r,c=[]){const i=y(),a=u.useMemo(()=>b.createEventsHelper(i),[i]);u.useEffect(()=>{const o=e;return o?(a.addEventListener(o,t,n,r),()=>{a.removeEventListener(o,t,n)}):()=>{}},[a,e,t,...c])}function It(){const e=u.useContext(A);return e&&e.vault?e.vault:T.globalVault()}var bt=Object.defineProperty,Pe=Object.getOwnPropertySymbols,At=Object.prototype.hasOwnProperty,Rt=Object.prototype.propertyIsEnumerable,Se=(e,t,n)=>t in e?bt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,Mt=(e,t)=>{for(var n in t||(t={}))At.call(t,n)&&Se(e,n,t[n]);if(Pe)for(var n of Pe(t))Rt.call(t,n)&&Se(e,n,t[n]);return e},$t=(e,t,n)=>new Promise((r,c)=>{var i=s=>{try{o(n.next(s))}catch(l){c(l)}},a=s=>{try{o(n.throw(s))}catch(l){c(l)}},o=s=>s.done?r(s.value):Promise.resolve(s.value).then(i,a);o((n=n.apply(e,t)).next())});const Vt=(e,t={})=>{const n=y(),[r,c]=u.useState(e),i=u.useMemo(()=>n.get(e),[e,n]),{data:a,isFetching:o}=k.useQuery(`collection:${e}`,()=>$t(void 0,null,function*(){const s=i||(yield n.loadCollection(e));return s&&c(s.id),s}),Mt({refetchIntervalInBackground:!1,refetchOnMount:!1,refetchOnWindowFocus:!1,refetchInterval:!1,initialData:i},t));return{isLoaded:!o,id:r,collection:a}};var Tt=(e,t,n)=>new Promise((r,c)=>{var i=s=>{try{o(n.next(s))}catch(l){c(l)}},a=s=>{try{o(n.throw(s))}catch(l){c(l)}},o=s=>s.done?r(s.value):Promise.resolve(s.value).then(i,a);o((n=n.apply(e,t)).next())});function we(){const e=x(),t=B(),n=y(),r=F();return k.useQuery(`canvas-first-image-service:${e?e.id:"undefined"}`,()=>Tt(this,null,function*(){if(e&&t.length){const c=t[0],i=n.get(c.body[0]),o=L.getImageServices(i)[0];return o&&(yield r.loadService({id:o.id||o["@id"],width:o.width||e.width,height:o.height||e.height}))||void 0}}),{refetchOnWindowFocus:!1,refetchOnMount:!1,refetchIntervalInBackground:!1,refetchInterval:!1,initialData:()=>{if(e&&t.length){const c=t[0],i=n.get(c.body[0]),o=L.getImageServices(i)[0];return o&&r.loadServiceSync({id:o.id||o["@id"],width:o.width||e.width,height:o.height||e.height})||void 0}}})}function Lt(){const e=we();return{isLoading:e.isFetching,tile:e.data?{id:e.data.id||e.data["@id"],width:e.data.width,height:e.data.height,imageService:e.data,thumbnail:void 0}:null}}function Oe(e,t=[]){const n=y(),r=B(),[c,i]=u.useState((e==null?void 0:e.defaultChoices)||[]),a=u.useMemo(()=>ce(n,r,c),[n,r,c,...t]),s={makeChoice:u.useCallback((l,{deselectOthers:p=!0,deselect:d=!1}={})=>{if(a.choice){if(a.choice.type!=="single-choice")throw new Error("Complex choice not supported yet");i(v=>{if(d){const f=v.filter(m=>m!==l);if(f.length===0){const m=a.items[0].resource.id;return m?[m]:[]}return f}if(p)return[l];const _=[...v];if(_.length===0&&a.items.length){const f=a.items[0].resource.id;f&&_.push(f)}return v.indexOf(l)!==-1?v:[...v,l]})}},[a.choice])};return[a,s]}function jt(e={},t=[]){const{id:n,selector:r}=e,c=C(),i=n||c.range,a=P(o=>i?o.iiif.entities.Range[i]:void 0,[i]);return u.useMemo(()=>{if(!!a)return r?r(a):a},[a,r,...t])}function Dt(e,t){const n=y(),r=u.useMemo(()=>b.createEventsHelper(n),[n]),c=P(()=>e&&e.id?n.getResourceMeta(e.id,"eventManager"):null,[e]);return u.useMemo(()=>e?r.getListenersAsProps(e,t):{},[c,e,n,t])}function Ce(e,t){return P((n,r)=>r.get(e.map(c=>({id:c,type:t}))),[e,t])}function Ft(){const e=$();return e?e.service.find(t=>t.profile==="SearchService1"||t.profile==="http://iiif.io/api/search/1/search"):void 0}function Nt(){const e=y();return u.useMemo(()=>b.createStylesHelper(e),[e])}function Bt(e,t){const n=y(),r=u.useMemo(()=>b.createStylesHelper(n),[n]);return P(()=>{if(!e)return null;const c=r.getAppliedStyles(e.id);return c?t?c[t]:c:void 0},[e,t])}const Ee=(e,t=[])=>{const n=y();u.useEffect(()=>{e(n)},[n,...t])};function Ut(e,t,{canvasId:n,manifestId:r}={}){const c=y(),i=F(),a=u.useMemo(()=>b.createThumbnailHelper(c,{imageServiceLoader:i}),[c,i]),[o,s]=u.useState(),l=$(r?{id:r}:void 0),p=x(n?{id:n}:void 0),d=p||l,v=u.useRef(!1);if(u.useEffect(()=>()=>{v.current=!0},[]),!d)throw new Error("Must be called under a manifest or canvas context.");return Ee(_=>{a.getBestThumbnailAtSize(d,e,t).then(f=>{f.best&&!v.current&&s(f.best)})},[d]),o}var kt=Object.defineProperty,Ht=Object.defineProperties,Qt=Object.getOwnPropertyDescriptors,xe=Object.getOwnPropertySymbols,qt=Object.prototype.hasOwnProperty,zt=Object.prototype.propertyIsEnumerable,Ie=(e,t,n)=>t in e?kt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,be=(e,t)=>{for(var n in t||(t={}))qt.call(t,n)&&Ie(e,n,t[n]);if(xe)for(var n of xe(t))zt.call(t,n)&&Ie(e,n,t[n]);return e},Ae=(e,t)=>Ht(e,Qt(t));function Re(){const e=F(),[t,n]=u.useState({}),r=u.useRef(!1);return u.useEffect(()=>()=>{r.current=!0},[]),[u.useCallback((i,{height:a,width:o})=>{if(i){const s=i.id||i["@id"],l=e.loadServiceSync({id:s,width:i.width||o,height:i.height||a});l?i=l:t[s]||(r.current||n(p=>Ae(be({},p),{[s]:"loading"})),e.loadService({id:s,width:i.width||o,height:i.height||a}).then(()=>{r.current||n(p=>Ae(be({},p),{[s]:"done"}))}))}return i},[e,t]),t]}const Yt="@iiif/IMPORT_ENTITIES",Wt="@iiif/MODIFY_ENTITY_FIELD",Gt="@iiif/REORDER_ENTITY_FIELD",Xt="@iiif/ADD_REFERENCE",Jt="@iiif/REMOVE_REFERENCE",Kt=h.createAction(Yt)(),Zt=h.createAction(Wt)(),en=h.createAction(Gt)(),tn=h.createAction(Xt)(),nn=h.createAction(Jt)(),Q={importEntities:Kt,modifyEntityField:Zt,reorderEntityField:en,addReference:tn,removeReference:nn},rn="@iiif/ADD_MAPPING",on="@iiif/ADD_MAPPINGS";h.createAction(rn)(),h.createAction(on)();const an="@iiif/SET_META_VALUE",sn="@iiif/SET_META_VALUE_DYNAMIC",cn="@iiif/UNSET_META_VALUE";h.createAction(an)(),h.createAction(sn)(),h.createAction(cn)();const un="@iiif/REQUEST_RESOURCE",ln="@iiif/REQUEST_ERROR",fn="@iiif/REQUEST_MISMATCH",dn="@iiif/REQUEST_COMPLETE",pn="@iiif/REQUEST_OFFLINE_RESOURCE";h.createAction(un)(),h.createAction(ln)(),h.createAction(fn)(),h.createAction(dn)(),h.createAction(pn)();const vn="@iiif/BATCH";h.createAction(vn)();var mn=Object.defineProperty,gn=Object.defineProperties,yn=Object.getOwnPropertyDescriptors,Me=Object.getOwnPropertySymbols,hn=Object.prototype.hasOwnProperty,_n=Object.prototype.propertyIsEnumerable,$e=(e,t,n)=>t in e?mn(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,Pn=(e,t)=>{for(var n in t||(t={}))hn.call(t,n)&&$e(e,n,t[n]);if(Me)for(var n of Me(t))_n.call(t,n)&&$e(e,n,t[n]);return e},Sn=(e,t)=>gn(e,yn(t));function Ve(e){return typeof e!="string"&&e&&e.bindToVault}function wn(){const e=y(),t=u.useRef([]),n=_e(),r=u.useMemo(()=>`vault://annotation-page/${new Date().getTime()}/${Math.round(Math.random()*1e9).toString(16)}`,[]);u.useLayoutEffect(()=>{const o=Sn(Pn({},je.emptyAnnotationPage),{id:r,items:[]});n(Q.importEntities({entities:{AnnotationPage:{[o.id]:o}}}))},[r]);const c=P(o=>r?o.iiif.entities.AnnotationPage[r]:null,[r]),i=u.useCallback((o,s)=>{if(r){if(Ve(o)){const d=o;d.__vault||d.bindToVault(e),o=typeof d.source=="string"?d.source:d.source.id,t.current[o]=d}else typeof o!="string"&&(o=o.id);const l=e.get({id:r,type:"AnnotationPage"}),p=e.get({id:o,type:"Annotation"});l&&p&&(l.items.find(d=>d.id===p.id)||n(Q.addReference({id:r,type:"AnnotationPage",key:"items",reference:{id:o,type:"Annotation"},index:s})))}},[r]),a=u.useCallback(o=>{r&&(Ve(o)?o=typeof o.source=="string"?o.source:o.source.id:typeof o!="string"&&(o=o.id),t.current[o]&&t.current[o].beforeRemove(),e.get({id:r,type:"AnnotationPage"})&&n(Q.removeReference({id:r,type:"AnnotationPage",key:"items",reference:{id:o,type:"Annotation"}})))},[r]);return[c,{addAnnotation:i,removeAnnotation:a}]}var On=Object.defineProperty,Cn=Object.defineProperties,En=Object.getOwnPropertyDescriptors,Te=Object.getOwnPropertySymbols,xn=Object.prototype.hasOwnProperty,In=Object.prototype.propertyIsEnumerable,Le=(e,t,n)=>t in e?On(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,bn=(e,t)=>{for(var n in t||(t={}))xn.call(t,n)&&Le(e,n,t[n]);if(Te)for(var n of Te(t))In.call(t,n)&&Le(e,n,t[n]);return e},An=(e,t)=>Cn(e,En(t));function Rn(e){const t=$(),n=x(),r=y(),[c,i]=Re(),{enabledPageIds:a}=he((e==null?void 0:e.annotationPageManagerId)||(t==null?void 0:t.id),{all:!1}),o=Ce(a,"AnnotationPage"),s=(e==null?void 0:e.strategies)||["images","media","complex-timeline"],[l,p]=Oe(e,[i]),d=u.useMemo(()=>{if(!n||l.types.length===0)return H;if(l.types.length!==1)return s.indexOf("complex-timeline")===-1?S("Complex timeline not supported"):S("ComplexTimelineStrategy not yet supported");const v=l.types[0];return v==="image"?s.indexOf("images")===-1?S("Image not supported"):le(n,l,c):v==="audio"?s.indexOf("media")===-1?S("Media not supported"):S("Audio strategy not yet supported"):v==="video"?s.indexOf("media")===-1?S("Media not supported"):S("Video strategy not yet supported"):H},[n,l,r,p.makeChoice]);return u.useMemo(()=>d.type==="unknown"?[d,ue]:[An(bn({},d),{annotations:{pages:o}}),p],[d,o])}exports.AnnotationContext=ke,exports.CanvasContext=G,exports.CollectionContext=He,exports.ContextBridge=Ze,exports.ImageServiceLoaderContext=ne,exports.ManifestContext=X,exports.RangeContext=Qe,exports.ReactVaultContext=A,exports.ResourceProvider=E,exports.ResourceReactContext=j,exports.SimpleViewerProvider=Xe,exports.SimpleViewerReactContext=M,exports.VaultProvider=J,exports.VisibleCanvasReactContext=R,exports.emptyActions=ue,exports.expandTarget=O,exports.flattenAnnotationPageIds=pe,exports.getImageStrategy=le,exports.getPaintables=ce,exports.parseSelector=N,exports.parseSpecificResource=se,exports.unknownResponse=H,exports.unsupportedStrategy=S,exports.useAnnotation=vt,exports.useAnnotationPageManager=he,exports.useAnnotationsAtTime=Ot,exports.useCanvas=x,exports.useCanvasClock=Ct,exports.useCollection=Et,exports.useContextBridge=Ke,exports.useDispatch=_e,exports.useEventListener=xt,exports.useExistingVault=It,exports.useExternalCollection=Vt,exports.useExternalManifest=ee,exports.useImageService=we,exports.useImageServiceLoader=F,exports.useImageTile=Lt,exports.useLoadImageService=Re,exports.useManifest=$,exports.usePaintables=Oe,exports.usePaintingAnnotations=B,exports.useRange=jt,exports.useRenderingStrategy=Rn,exports.useResourceContext=C,exports.useResourceEvents=Dt,exports.useResources=Ce,exports.useSearchService=Ft,exports.useSimpleViewer=Je,exports.useStyleHelper=Nt,exports.useStyles=Bt,exports.useThumbnail=Ut,exports.useVault=y,exports.useVaultEffect=Ee,exports.useVaultSelector=P,exports.useVirtualAnnotationPage=wn,exports.useVisibleCanvases=te;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var vault = require('@iiif/vault');
+var iiifImageApi = require('@atlas-viewer/iiif-image-api');
+var vaultHelpers = require('@iiif/vault-helpers');
+var typesafeActions = require('typesafe-actions');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    }
+  return a;
+};
+const defaultResourceContext = {
+  collection: void 0,
+  manifest: void 0,
+  range: void 0,
+  canvas: void 0,
+  annotation: void 0
+};
+const ResourceReactContext = React__default["default"].createContext(defaultResourceContext);
+const useResourceContext = () => {
+  return React.useContext(ResourceReactContext);
+};
+const ResourceProvider = ({ value, children }) => {
+  const parentContext = useResourceContext();
+  const newContext = React.useMemo(() => {
+    return __spreadValues$5(__spreadValues$5({}, parentContext), value);
+  }, [value, parentContext]);
+  return /* @__PURE__ */ React__default["default"].createElement(ResourceReactContext.Provider, {
+    value: newContext
+  }, children);
+};
+
+const AnnotationContext = ({ annotation, children }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
+    value: { annotation }
+  }, children);
+};
+
+const CanvasContext = ({ canvas, children }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
+    value: { canvas }
+  }, children);
+};
+
+const CollectionContext = ({ collection, children }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
+    value: { collection }
+  }, children);
+};
+
+const ManifestContext = ({ manifest, children }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
+    value: { manifest }
+  }, children);
+};
+
+const RangeContext = ({ range, children }) => {
+  return /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
+    value: { range }
+  }, children);
+};
+
+const ReactVaultContext = React__default["default"].createContext({
+  vault: null,
+  setVaultInstance: (vault) => {
+  }
+});
+const VaultProvider = ({ vault: vault$1, vaultOptions, useGlobal, resources, children }) => {
+  const [vaultInstance, setVaultInstance] = React.useState(() => {
+    if (vault$1) {
+      return vault$1;
+    }
+    if (useGlobal) {
+      return vault.globalVault(vaultOptions);
+    }
+    if (vaultOptions) {
+      return new vault.Vault(vaultOptions);
+    }
+    return new vault.Vault();
+  });
+  return /* @__PURE__ */ React__default["default"].createElement(ReactVaultContext.Provider, {
+    value: { vault: vaultInstance, setVaultInstance }
+  }, /* @__PURE__ */ React__default["default"].createElement(ResourceProvider, {
+    value: resources || {}
+  }, children));
+};
+
+const useVault = () => {
+  const { vault } = React.useContext(ReactVaultContext);
+  if (vault === null) {
+    throw new Error("Vault not found. Ensure you have your provider set up correctly.");
+  }
+  return vault;
+};
+
+var __async$1 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function useExternalResource(idOrRef, { noCache = false } = {}) {
+  const id = typeof idOrRef === "string" ? idOrRef : idOrRef.id;
+  const vault = useVault();
+  const [realId, setRealId] = React.useState(id);
+  const [error, setError] = React.useState(void 0);
+  const initialData = React.useMemo(() => {
+    return vault.get(id, { skipSelfReturn: true }) || void 0;
+  }, [id, vault]);
+  const [resource, setResource] = React.useState(initialData);
+  React.useEffect(() => {
+    (() => __async$1(this, null, function* () {
+      try {
+        const fetchedResource = initialData && !noCache ? initialData : yield vault.load(id);
+        const _realId = fetchedResource ? fetchedResource.id || fetchedResource["@id"] : null;
+        if (fetchedResource && realId !== _realId) {
+          setRealId(_realId);
+        }
+        setResource(fetchedResource);
+      } catch (err) {
+        setError(err);
+      }
+    }))();
+  }, [id, noCache]);
+  return {
+    isLoaded: !!resource,
+    id: realId,
+    requestId: id,
+    error,
+    resource,
+    cached: !!(resource && resource === initialData)
+  };
+}
+
+function useExternalManifest(idOrRef, options) {
+  const { id, isLoaded, error, resource, requestId, cached } = useExternalResource(idOrRef, options);
+  return { id, isLoaded, error, manifest: resource, requestId, cached };
+}
+
+function useVaultSelector(selector, deps = []) {
+  const vault = useVault();
+  const [selectedState, setSelectedState] = React.useState(() => selector(vault.getState(), vault));
+  React.useEffect(() => {
+    return vault.subscribe((s) => selector(s, vault), (state) => {
+      setSelectedState(state);
+    }, false);
+  }, deps);
+  return selectedState;
+}
+
+const VisibleCanvasReactContext = React__default["default"].createContext([]);
+function useVisibleCanvases() {
+  const ids = React.useContext(VisibleCanvasReactContext);
+  return useVaultSelector((state) => {
+    return ids.map((id) => state.iiif.entities.Canvas[id]).filter(Boolean);
+  }, [ids]);
+}
+
+const noop = () => {
+};
+const SimpleViewerReactContext = React.createContext({
+  setCurrentCanvasId: noop,
+  setCurrentCanvasIndex: noop,
+  nextCanvas: noop,
+  previousCanvas: noop,
+  currentCanvasIndex: -1,
+  totalCanvases: 0,
+  pagingView: true
+});
+const SimpleViewerProvider = (props) => {
+  const manifest = useExternalManifest(props.manifest);
+  const [currentCanvasId, setCurrentCanvasId] = React.useState("");
+  const [visible, setVisible] = React.useState([]);
+  const pagingView = (typeof props.pagingEnabled === "undefined" || props.pagingEnabled) && manifest.manifest && manifest.manifest.behavior && manifest.manifest.behavior.includes("paged");
+  React.useEffect(() => {
+    var _a, _b;
+    if (manifest.manifest) {
+      setCurrentCanvasId((_a = manifest.manifest.items[0]) == null ? void 0 : _a.id);
+      setVisible([(_b = manifest.manifest.items[0]) == null ? void 0 : _b.id]);
+    }
+  }, [manifest.manifest, props.manifest]);
+  const canvasList = React.useMemo(() => {
+    var _a;
+    return ((_a = manifest.manifest) == null ? void 0 : _a.items.map((c) => c.id)) || [];
+  }, [manifest.manifest, props.manifest]);
+  const currentCanvasIndex = React.useMemo(() => canvasList.indexOf(currentCanvasId), [canvasList, currentCanvasId]);
+  const nextCanvas = React.useCallback(() => {
+    if (canvasList.length && currentCanvasId) {
+      if (currentCanvasIndex === -1) {
+        return;
+      }
+      if (canvasList[currentCanvasIndex + 2] ? currentCanvasIndex + 2 === canvasList.length : currentCanvasIndex === canvasList.length) {
+        return;
+      }
+      const newCanvas = pagingView && currentCanvasIndex !== 0 ? canvasList[currentCanvasIndex + 2] : canvasList[currentCanvasIndex + 1];
+      const pageCanvas = pagingView ? currentCanvasIndex !== 0 ? canvasList[currentCanvasIndex + 3] : canvasList[currentCanvasIndex + 2] : null;
+      if (newCanvas) {
+        setCurrentCanvasId(newCanvas);
+        setVisible(pageCanvas ? [newCanvas, pageCanvas] : [newCanvas]);
+      }
+    }
+  }, [pagingView, canvasList, currentCanvasId, currentCanvasIndex]);
+  const previousCanvas = React.useCallback(() => {
+    if (canvasList.length && currentCanvasId) {
+      if (currentCanvasIndex === 0 || currentCanvasIndex === -1) {
+        return;
+      }
+      const newCanvas = pagingView && currentCanvasIndex !== 1 ? canvasList[currentCanvasIndex - 2] : canvasList[currentCanvasIndex - 1];
+      const pageCanvas = pagingView && currentCanvasIndex !== 1 ? canvasList[currentCanvasIndex - 1] : null;
+      if (newCanvas) {
+        setCurrentCanvasId(newCanvas);
+        setVisible(pageCanvas ? [newCanvas, pageCanvas] : [newCanvas]);
+      }
+    }
+  }, [pagingView, canvasList, currentCanvasId, currentCanvasIndex]);
+  const setCurrentCanvasIndex = React.useCallback((idx) => {
+    const realIdx = pagingView && idx % 2 === 1 ? idx - 1 : idx;
+    const newId = canvasList[realIdx];
+    const newNextId = pagingView && realIdx !== 0 ? canvasList[realIdx + 1] : null;
+    if (newId) {
+      setCurrentCanvasId(newId);
+      setVisible((prevValue) => {
+        const newValue = newNextId ? [newId, newNextId] : [newId];
+        if (prevValue.length === prevValue.length) {
+          for (let i = 0; i < prevValue.length; i++) {
+            if (prevValue[i] !== newValue[i]) {
+              return newValue;
+            }
+          }
+          return prevValue;
+        }
+        return newValue;
+      });
+    }
+  }, [pagingView, canvasList]);
+  const internalSetCurrentCanvasId = React.useCallback((nextId) => {
+    const idx = canvasList.indexOf(nextId);
+    if (idx !== -1) {
+      setCurrentCanvasIndex(idx);
+    }
+  }, [canvasList, setCurrentCanvasIndex]);
+  const ctx = React.useMemo(() => ({
+    setCurrentCanvasId: internalSetCurrentCanvasId,
+    nextCanvas,
+    previousCanvas,
+    currentCanvasIndex,
+    totalCanvases: canvasList.length,
+    setCurrentCanvasIndex,
+    pagingView: true
+  }), [nextCanvas, previousCanvas, currentCanvasIndex, canvasList, setCurrentCanvasIndex, internalSetCurrentCanvasId]);
+  if (!manifest.manifest) {
+    console.warn("The manifest passed to the provider is not a valid IIIF manifest.");
+    return /* @__PURE__ */ React__default["default"].createElement("div", null, "Sorry, something went wrong.");
+  }
+  if (!manifest.isLoaded) {
+    return /* @__PURE__ */ React__default["default"].createElement("div", null, "Loading...");
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(SimpleViewerReactContext.Provider, {
+    value: ctx
+  }, /* @__PURE__ */ React__default["default"].createElement(VisibleCanvasReactContext.Provider, {
+    value: visible
+  }, /* @__PURE__ */ React__default["default"].createElement(ManifestContext, {
+    manifest: manifest.manifest.id
+  }, /* @__PURE__ */ React__default["default"].createElement(CanvasContext, {
+    canvas: currentCanvasId
+  }, props.children))));
+};
+function useSimpleViewer() {
+  return React.useContext(SimpleViewerReactContext);
+}
+
+function useContextBridge() {
+  return {
+    VaultContext: React.useContext(ReactVaultContext),
+    ResourceContext: React.useContext(ResourceReactContext),
+    SimpleViewerReactContext: React.useContext(SimpleViewerReactContext),
+    VisibleCanvasReactContext: React.useContext(VisibleCanvasReactContext)
+  };
+}
+const ContextBridge = (props) => {
+  return /* @__PURE__ */ React__default["default"].createElement(VaultProvider, {
+    vault: props.bridge.VaultContext.vault || void 0,
+    resources: props.bridge.ResourceContext
+  }, /* @__PURE__ */ React__default["default"].createElement(VisibleCanvasReactContext.Provider, {
+    value: props.bridge.VisibleCanvasReactContext
+  }, /* @__PURE__ */ React__default["default"].createElement(SimpleViewerReactContext.Provider, {
+    value: props.bridge.SimpleViewerReactContext
+  }, props.children)));
+};
+
+const ImageServiceLoaderContext = React__default["default"].createContext(new iiifImageApi.ImageServiceLoader());
+function useImageServiceLoader() {
+  return React.useContext(ImageServiceLoaderContext);
+}
+
+const BOX_SELECTOR = /&?(xywh=)?(pixel:|percent:)?([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?),([0-9]+(?:\.[0-9]+)?)/;
+const TEMPORAL_SELECTOR = /&?(t=)(npt:)?([0-9]+(.[0-9]+)?)?(,([0-9]+(.[0-9]+)?))?/;
+function parseSelector(source) {
+  if (Array.isArray(source)) {
+    return source.reduce((data, nextSource) => {
+      const { selector, selectors } = parseSelector(nextSource);
+      if (selector) {
+        if (!data.selector) {
+          data.selector = selector;
+        }
+        data.selectors.push(...selectors);
+      }
+      return data;
+    }, {
+      selector: null,
+      selectors: []
+    });
+  }
+  if (!source) {
+    return {
+      selector: null,
+      selectors: []
+    };
+  }
+  if (typeof source === "string") {
+    const [id, fragment] = source.split("#");
+    if (!fragment) {
+      return {
+        selector: null,
+        selectors: []
+      };
+    }
+    return parseSelector({ type: "FragmentSelector", value: fragment });
+  }
+  if (source.type === "PointSelector" && (source.t || source.t === 0)) {
+    const selector = {
+      type: "TemporalSelector",
+      temporal: {
+        startTime: source.t
+      }
+    };
+    return {
+      selector,
+      selectors: [selector]
+    };
+  }
+  if (source.type === "FragmentSelector") {
+    const matchBoxSelector = BOX_SELECTOR.exec(source.value);
+    if (matchBoxSelector) {
+      const selector = {
+        type: "BoxSelector",
+        spatial: {
+          unit: matchBoxSelector[2] === "percent:" ? "percent" : "pixel",
+          x: parseFloat(matchBoxSelector[3]),
+          y: parseFloat(matchBoxSelector[4]),
+          width: parseFloat(matchBoxSelector[5]),
+          height: parseFloat(matchBoxSelector[6])
+        }
+      };
+      return {
+        selector,
+        selectors: [selector]
+      };
+    }
+    const matchTimeSelector = source.value.match(TEMPORAL_SELECTOR);
+    if (matchTimeSelector) {
+      const selector = {
+        type: "TemporalSelector",
+        temporal: {
+          startTime: matchTimeSelector[4] ? parseFloat(matchTimeSelector[4]) : 0,
+          endTime: matchTimeSelector[7] ? parseFloat(matchTimeSelector[7]) : void 0
+        }
+      };
+      return {
+        selector,
+        selectors: [selector]
+      };
+    }
+    return {
+      selector: null,
+      selectors: []
+    };
+  }
+  return {
+    selector: null,
+    selectors: []
+  };
+}
+
+var __defProp$4 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+function expandTarget(target, options = {}) {
+  if (Array.isArray(target)) {
+    return expandTarget(target[0]);
+  }
+  if (typeof target === "string") {
+    const [id, fragment] = target.split("#");
+    if (!fragment) {
+      return {
+        type: "SpecificResource",
+        source: { id, type: options.typeMap && options.typeMap[id] || "Unknown" },
+        selector: null,
+        selectors: []
+      };
+    }
+    return expandTarget({
+      type: "SpecificResource",
+      source: { id, type: "Unknown" },
+      selector: {
+        type: "FragmentSelector",
+        value: fragment
+      }
+    });
+  }
+  if (target.type === "Choice" || target.type === "List" || target.type === "Composite" || target.type === "Independents") {
+    return expandTarget(target.items[0]);
+  }
+  if (target.type === "SpecificResource") {
+    if (target.source.type === "Canvas" && target.source.partOf && typeof target.source.partOf === "string") {
+      target.source.partOf = [
+        {
+          id: target.source.partOf,
+          type: "Manifest"
+        }
+      ];
+    }
+    const { selector, selectors } = target.selector ? parseSelector(target.selector) : { selector: null, selectors: [] };
+    return {
+      type: "SpecificResource",
+      source: target.source,
+      selector,
+      selectors
+    };
+  }
+  if (target.id) {
+    if (target.type === "Canvas" && target.partOf && typeof target.partOf === "string") {
+      target.partOf = [
+        {
+          id: target.partOf,
+          type: "Manifest"
+        }
+      ];
+    }
+    const [id, fragment] = target.id.split("#");
+    if (!fragment) {
+      return {
+        type: "SpecificResource",
+        source: __spreadProps$4(__spreadValues$4({}, target), {
+          id
+        }),
+        selector: null,
+        selectors: []
+      };
+    }
+    return expandTarget({
+      type: "SpecificResource",
+      source: __spreadProps$4(__spreadValues$4({}, target), {
+        id
+      }),
+      selector: {
+        type: "FragmentSelector",
+        value: fragment
+      }
+    });
+  }
+  return {
+    type: "SpecificResource",
+    source: target,
+    selector: null,
+    selectors: []
+  };
+}
+
+function parseSpecificResource(resource) {
+  if (resource.type === "SpecificResource") {
+    return [resource.source, { selector: resource.selector }];
+  }
+  return [resource, { selector: null }];
+}
+function getPaintables(vault, paintingAnnotations, enabledChoices) {
+  const types = [];
+  let choice = null;
+  const items = [];
+  for (const annotation of paintingAnnotations) {
+    const bodies = vault.get(annotation.body);
+    for (const unknownBody of bodies) {
+      const [body, { selector }] = parseSpecificResource(unknownBody);
+      const type = (body.type || "unknown").toLowerCase();
+      if (type === "choice") {
+        const nestedBodies = vault.get(body.items);
+        const selected = enabledChoices.length ? enabledChoices.map((cid) => nestedBodies.find((b) => b.id === cid)).filter(Boolean) : [nestedBodies[0]];
+        if (selected.length === 0) {
+          selected.push(nestedBodies[0]);
+        }
+        choice = {
+          type: "single-choice",
+          items: nestedBodies.map((b) => ({
+            id: b.id,
+            label: b.label,
+            selected: selected.indexOf(b) !== -1
+          })),
+          label: unknownBody.label
+        };
+        bodies.push(...selected);
+        continue;
+      }
+      if (types.indexOf(type) === -1) {
+        types.push(type);
+      }
+      items.push({
+        type,
+        resource: body,
+        target: annotation.target,
+        selector
+      });
+    }
+  }
+  return {
+    types,
+    items,
+    choice
+  };
+}
+const emptyActions = {
+  makeChoice: () => {
+  }
+};
+const unknownResponse = { type: "unknown" };
+const unsupportedStrategy = (reason) => {
+  return { type: "unknown", reason, annotations: { pages: [] } };
+};
+
+function getImageStrategy(canvas, paintables, loadImageService) {
+  const imageTypes = [];
+  for (const singleImage of paintables.items) {
+    const resource = singleImage.resource && singleImage.resource.type === "SpecificResource" ? singleImage.resource.source : singleImage.resource;
+    if (!resource.id) {
+      return unsupportedStrategy("No resource Identifier");
+    }
+    let imageService = void 0;
+    if (resource.service) {
+      const imageServices = iiifImageApi.getImageServices(resource);
+      if (imageServices[0]) {
+        imageService = loadImageService(imageServices[0], canvas);
+      }
+    }
+    const { selector: imageTarget, source } = expandTarget(singleImage.target);
+    if (source.id !== canvas.id) {
+      continue;
+    }
+    const defaultTarget = {
+      type: "BoxSelector",
+      spatial: {
+        x: 0,
+        y: 0,
+        width: canvas.width,
+        height: canvas.height
+      }
+    };
+    const target = imageTarget ? imageTarget.type === "TemporalSelector" ? {
+      type: "TemporalBoxSelector",
+      temporal: imageTarget.temporal,
+      spatial: defaultTarget.spatial
+    } : imageTarget : null;
+    const defaultImageSelector = {
+      type: "BoxSelector",
+      spatial: {
+        x: 0,
+        y: 0,
+        width: canvas.width,
+        height: canvas.height
+      }
+    };
+    const imageSelector = singleImage.resource.type === "SpecificResource" ? expandTarget(singleImage.resource) : null;
+    const selector = imageSelector && imageSelector.selector && (imageSelector.selector.type === "BoxSelector" || imageSelector.selector.type === "TemporalBoxSelector") ? {
+      type: "BoxSelector",
+      spatial: {
+        x: imageSelector.selector.spatial.x,
+        y: imageSelector.selector.spatial.y,
+        width: imageSelector.selector.spatial.width,
+        height: imageSelector.selector.spatial.height
+      }
+    } : defaultImageSelector;
+    const imageType = {
+      id: resource.id,
+      type: "Image",
+      width: target ? resource.width : canvas.width,
+      height: target ? resource.height : canvas.height,
+      service: imageService,
+      sizes: imageService && imageService.sizes ? imageService.sizes : resource.width && resource.height ? [{ width: resource.width, height: resource.height }] : [],
+      target: target && target.type !== "PointSelector" ? target : defaultTarget,
+      selector
+    };
+    imageTypes.push(imageType);
+  }
+  return {
+    type: "images",
+    image: imageTypes[0],
+    images: imageTypes,
+    choice: paintables.choice
+  };
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+function useAnnotation(options = {}, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  const vault = useVault();
+  const annotationId = id ? id : ctx.annotation;
+  const annotation = useVaultSelector((s) => annotationId ? s.iiif.entities.Annotation[annotationId] : void 0, [annotationId]);
+  const body = useVaultSelector((s) => annotation && annotation.body ? annotation.body.map((singleBody) => singleBody ? s.iiif.entities[singleBody.type][singleBody.id] : null).filter(Boolean) : [], [annotation]);
+  return React.useMemo(() => {
+    if (!annotation) {
+      return void 0;
+    }
+    const newAnnotation = __spreadProps$3(__spreadValues$3({}, annotation), {
+      body,
+      target: expandTarget(annotation.target, { typeMap: vault.getState().iiif.mapping })
+    });
+    if (selector) {
+      return selector(newAnnotation);
+    }
+    return newAnnotation;
+  }, [annotation, selector, body, ...deps]);
+}
+
+function useManifest(options = {}, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  useVault();
+  const manifestId = id ? id : ctx.manifest;
+  const manifest = useVaultSelector((s) => manifestId ? s.iiif.entities.Manifest[manifestId] : void 0, [manifestId]);
+  return React.useMemo(() => {
+    if (!manifest) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(manifest);
+    }
+    return manifest;
+  }, [manifest, selector, ...deps]);
+}
+
+function useCanvas(options = {}, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  const canvasId = id ? id : ctx.canvas;
+  const canvas = useVaultSelector((s) => canvasId ? s.iiif.entities.Canvas[canvasId] : void 0, [canvasId]);
+  return React.useMemo(() => {
+    if (!canvas) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(canvas);
+    }
+    return canvas;
+  }, [canvas, selector, ...deps]);
+}
+
+function getMeta$1(state, resourceId) {
+  var _a;
+  const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
+  if (!resourceMeta) {
+    return null;
+  }
+  return resourceMeta.annotationPageManager;
+}
+function useEnabledAnnotationPageIds(resourceId, availablePageIds) {
+  return useVaultSelector((state) => {
+    const pageIds = [];
+    if (!resourceId) {
+      return pageIds;
+    }
+    const allAnnotationListIds = Object.keys(state.iiif.entities.AnnotationPage);
+    for (const annotationListId of allAnnotationListIds) {
+      if (!availablePageIds || availablePageIds.indexOf(annotationListId) !== -1) {
+        const annotationListMeta = getMeta$1(state, annotationListId);
+        if (annotationListMeta && annotationListMeta.views && annotationListMeta.views[resourceId]) {
+          pageIds.push(annotationListId);
+        }
+      }
+    }
+    return pageIds;
+  }, [resourceId, availablePageIds]);
+}
+
+function flattenAnnotationPageIds({
+  canvas,
+  manifest,
+  all,
+  canvases
+}) {
+  const foundIds = [];
+  if (manifest) {
+    for (const page of manifest.annotations) {
+      if (foundIds.indexOf(page.id) === -1) {
+        foundIds.push(page.id);
+      }
+    }
+  }
+  if (all) {
+    if (canvases && canvases.length) {
+      for (const canvas_ of canvases) {
+        for (const page of canvas_.annotations) {
+          if (foundIds.indexOf(page.id) === -1) {
+            foundIds.push(page.id);
+          }
+        }
+      }
+    }
+  } else if (canvas) {
+    for (const page of canvas.annotations) {
+      if (foundIds.indexOf(page.id) === -1) {
+        foundIds.push(page.id);
+      }
+    }
+  }
+  return foundIds;
+}
+
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+function getMeta(state, resourceId) {
+  var _a;
+  const resourceMeta = (_a = state == null ? void 0 : state.iiif) == null ? void 0 : _a.meta[resourceId];
+  if (!resourceMeta) {
+    return null;
+  }
+  return resourceMeta.annotationPageManager;
+}
+function useAnnotationPageManager(resourceId, options = {}) {
+  const vault = useVault();
+  const manifest = useManifest();
+  const canvas = useCanvas();
+  const canvases = useVisibleCanvases();
+  const availablePageIds = React.useMemo(() => {
+    return flattenAnnotationPageIds({
+      all: options.all,
+      manifest,
+      canvas,
+      canvases
+    });
+  }, [options.all, canvas, canvases, manifest]);
+  const enabledPageIds = useEnabledAnnotationPageIds(resourceId, options.all ? void 0 : availablePageIds);
+  const setPageDisabled = React.useCallback((deselectId) => {
+    if (!resourceId) {
+      return;
+    }
+    vault.setMetaValue([deselectId, "annotationPageManager", "views"], (existingResources) => {
+      if (existingResources && !existingResources[resourceId]) {
+        return existingResources;
+      }
+      return __spreadProps$2(__spreadValues$2({}, existingResources || {}), {
+        [resourceId]: false
+      });
+    });
+  }, [resourceId, vault]);
+  const setPageEnabled = React.useCallback((id, opt = {}) => {
+    if (!resourceId) {
+      return;
+    }
+    const state = vault.getState();
+    const toDeselect = [];
+    if (opt == null ? void 0 : opt.deselectOthers) {
+      const allAnnotationListIds = Object.keys(state.iiif.entities.AnnotationPage);
+      for (const annotationPageId of allAnnotationListIds) {
+        const annotationListMeta = getMeta(state, annotationPageId);
+        if (annotationListMeta && annotationListMeta.views && annotationListMeta.views[resourceId]) {
+          toDeselect.push(annotationPageId);
+        }
+      }
+    }
+    for (const deselectId of toDeselect) {
+      setPageDisabled(deselectId);
+    }
+    vault.setMetaValue([id, "annotationPageManager", "views"], (existingResources) => {
+      if (existingResources && existingResources[resourceId]) {
+        return existingResources;
+      }
+      return __spreadProps$2(__spreadValues$2({}, existingResources || {}), {
+        [resourceId]: true
+      });
+    });
+  }, [resourceId, setPageDisabled, vault]);
+  return {
+    availablePageIds,
+    enabledPageIds,
+    setPageEnabled,
+    setPageDisabled
+  };
+}
+
+function usePaintingAnnotations(options = {}) {
+  const canvas = useCanvas(options.canvasId ? { id: options.canvasId } : void 0);
+  return useVaultSelector((state, vault) => {
+    if (!canvas) {
+      return [];
+    }
+    const annotationPages = vault.get(canvas.items);
+    const flatAnnotations = [];
+    for (const page of annotationPages) {
+      flatAnnotations.push(...vault.get(page.items));
+    }
+    return flatAnnotations;
+  }, [canvas]);
+}
+
+function useAnnotationsAtTime(time, options = {}) {
+  const allAnnotations = usePaintingAnnotations(options);
+  return allAnnotations;
+}
+
+function useCanvasClock(canvasId, autoplay = false) {
+}
+
+function useCollection(options, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  const collectionId = id ? id : ctx.collection;
+  const collection = useVaultSelector((s) => collectionId ? s.iiif.entities.Collection[collectionId] : void 0, [collectionId]);
+  return React.useMemo(() => {
+    if (!collection) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(collection);
+    }
+    return collection;
+  }, [collection, selector, ...deps]);
+}
+
+function useDispatch() {
+  const vault = useVault();
+  const store = vault.getStore();
+  return React.useMemo(() => {
+    return (action) => store.dispatch(action);
+  }, [store]);
+}
+
+function useEventListener(resource, name, listener, scope, deps = []) {
+  const vault = useVault();
+  const helper = React.useMemo(() => vaultHelpers.createEventsHelper(vault), [vault]);
+  React.useEffect(() => {
+    const currentResource = resource;
+    if (!currentResource) {
+      return () => {
+      };
+    }
+    helper.addEventListener(currentResource, name, listener, scope);
+    return () => {
+      helper.removeEventListener(currentResource, name, listener);
+    };
+  }, [helper, resource, name, ...deps]);
+}
+
+function useExistingVault() {
+  const oldContext = React.useContext(ReactVaultContext);
+  return oldContext && oldContext.vault ? oldContext.vault : vault.globalVault();
+}
+
+function useExternalCollection(idOrRef, options) {
+  const { id, isLoaded, error, resource, requestId, cached } = useExternalResource(idOrRef, options);
+  return { id, isLoaded, error, manifest: resource, requestId, cached };
+}
+
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function useImageService({ cacheKey } = {}) {
+  const canvas = useCanvas();
+  const annotations = usePaintingAnnotations();
+  const vault = useVault();
+  const imageService = useImageServiceLoader();
+  const [_data, setData] = React.useState(void 0);
+  const [isFetching, setIsFetching] = React.useState(false);
+  const [status, setStatus] = React.useState("idle");
+  const [error, setError] = React.useState(void 0);
+  const key = canvas ? canvas.id : "undefined";
+  const initialData = React.useMemo(() => {
+    try {
+      if (canvas && annotations.length) {
+        const annotation = annotations[0];
+        const resource = vault.get(annotation.body[0]);
+        const imageServices = iiifImageApi.getImageServices(resource);
+        const firstImageService = imageServices[0];
+        if (!firstImageService) {
+          return void 0;
+        }
+        return imageService.loadServiceSync({
+          id: firstImageService.id || firstImageService["@id"],
+          width: firstImageService.width || canvas.width,
+          height: firstImageService.height || canvas.height
+        }) || void 0;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return void 0;
+  }, [key, cacheKey, canvas]);
+  const data = status === "success" && _data ? _data : initialData;
+  React.useEffect(() => {
+    (() => __async(this, null, function* () {
+      try {
+        if (canvas && annotations.length) {
+          const annotation = annotations[0];
+          const resource = vault.get(annotation.body[0]);
+          const imageServices = iiifImageApi.getImageServices(resource);
+          const firstImageService = imageServices[0];
+          if (!firstImageService) {
+            return;
+          }
+          setIsFetching(true);
+          setStatus("loading");
+          try {
+            const loadedService = (yield imageService.loadService({
+              id: firstImageService.id || firstImageService["@id"],
+              width: firstImageService.width || canvas.width,
+              height: firstImageService.height || canvas.height
+            })) || void 0;
+            setData(loadedService);
+            setStatus("success");
+            setIsFetching(false);
+          } catch (err) {
+            setStatus("error");
+            setError(err);
+          }
+        }
+      } catch (err) {
+        setStatus("error");
+        setError(err);
+      }
+    }))();
+  }, [key, cacheKey]);
+  return React.useMemo(() => {
+    return {
+      data,
+      isFetching,
+      status,
+      error
+    };
+  }, [data, isFetching, status, error]);
+}
+
+function useImageTile() {
+  const imageService = useImageService();
+  return {
+    isLoading: imageService.isFetching,
+    tile: imageService.data ? {
+      id: imageService.data.id || imageService.data["@id"],
+      width: imageService.data.width,
+      height: imageService.data.height,
+      imageService: imageService.data,
+      thumbnail: void 0
+    } : null
+  };
+}
+
+function usePaintables(options, deps = []) {
+  const vault = useVault();
+  const paintingAnnotations = usePaintingAnnotations();
+  const [enabledChoices, setEnabledChoices] = React.useState((options == null ? void 0 : options.defaultChoices) || []);
+  const paintables = React.useMemo(() => getPaintables(vault, paintingAnnotations, enabledChoices), [vault, paintingAnnotations, enabledChoices, ...deps]);
+  const makeChoice = React.useCallback((id, { deselectOthers = true, deselect = false } = {}) => {
+    if (paintables.choice) {
+      if (paintables.choice.type !== "single-choice") {
+        throw new Error("Complex choice not supported yet");
+      }
+      setEnabledChoices((prevChoices) => {
+        if (deselect) {
+          const without = prevChoices.filter((e) => e !== id);
+          if (without.length === 0) {
+            const defaultId = paintables.items[0].resource.id;
+            if (defaultId) {
+              return [defaultId];
+            } else {
+              return [];
+            }
+          }
+          return without;
+        }
+        if (deselectOthers) {
+          return [id];
+        }
+        const newChoices = [...prevChoices];
+        if (newChoices.length === 0 && paintables.items.length) {
+          const defaultId = paintables.items[0].resource.id;
+          if (defaultId) {
+            newChoices.push(defaultId);
+          }
+        }
+        if (prevChoices.indexOf(id) !== -1) {
+          return prevChoices;
+        }
+        return [...prevChoices, id];
+      });
+    }
+  }, [paintables.choice]);
+  const actions = { makeChoice };
+  return [paintables, actions];
+}
+
+function useRange(options = {}, deps = []) {
+  const { id, selector } = options;
+  const ctx = useResourceContext();
+  const rangeId = id ? id : ctx.range;
+  const range = useVaultSelector((s) => rangeId ? s.iiif.entities.Range[rangeId] : void 0, [rangeId]);
+  return React.useMemo(() => {
+    if (!range) {
+      return void 0;
+    }
+    if (selector) {
+      return selector(range);
+    }
+    return range;
+  }, [range, selector, ...deps]);
+}
+
+function useResourceEvents(resource, scope) {
+  const vault = useVault();
+  const helper = React.useMemo(() => vaultHelpers.createEventsHelper(vault), [vault]);
+  const hooks = useVaultSelector(() => {
+    if (resource && resource.id) {
+      return vault.getResourceMeta(resource.id, "eventManager");
+    }
+    return null;
+  }, [resource]);
+  return React.useMemo(() => {
+    return resource ? helper.getListenersAsProps(resource, scope) : {};
+  }, [hooks, resource, vault, scope]);
+}
+
+function useResources(ids, type) {
+  return useVaultSelector((state, vault) => vault.get(ids.map((id) => ({ id, type }))), [ids, type]);
+}
+
+function useSearchService() {
+  const manifest = useManifest();
+  return manifest ? manifest.service.find((service) => service.profile === "SearchService1" || service.profile === "http://iiif.io/api/search/1/search") : void 0;
+}
+
+function useStyleHelper() {
+  const vault = useVault();
+  return React.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
+}
+
+function useStyles(resource, scope) {
+  const vault = useVault();
+  const helper = React.useMemo(() => vaultHelpers.createStylesHelper(vault), [vault]);
+  return useVaultSelector(() => {
+    if (!resource) {
+      return null;
+    }
+    const styles = helper.getAppliedStyles(resource.id);
+    return styles ? scope ? styles[scope] : styles : void 0;
+  }, [resource, scope]);
+}
+
+const useVaultEffect = (callback, deps = []) => {
+  const vault = useVault();
+  React.useEffect(() => {
+    callback(vault);
+  }, [vault, ...deps]);
+};
+
+function useThumbnail(request, dereference, { canvasId, manifestId } = {}) {
+  const vault = useVault();
+  const loader = useImageServiceLoader();
+  const helper = React.useMemo(() => vaultHelpers.createThumbnailHelper(vault, { imageServiceLoader: loader }), [vault, loader]);
+  const [thumbnail, setThumbnail] = React.useState();
+  const manifest = useManifest(manifestId ? { id: manifestId } : void 0);
+  const canvas = useCanvas(canvasId ? { id: canvasId } : void 0);
+  const subject = canvas ? canvas : manifest;
+  const didUnmount = React.useRef(false);
+  React.useEffect(() => {
+    return () => {
+      didUnmount.current = true;
+    };
+  }, []);
+  if (!subject) {
+    throw new Error("Must be called under a manifest or canvas context.");
+  }
+  useVaultEffect((v) => {
+    helper.getBestThumbnailAtSize(subject, request, dereference).then((thumb) => {
+      if (thumb.best && !didUnmount.current) {
+        setThumbnail(thumb.best);
+      }
+    });
+  }, [subject]);
+  return thumbnail;
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+function useLoadImageService() {
+  const loader = useImageServiceLoader();
+  const [imageServiceStatus, setImageServiceStatus] = React.useState({});
+  const didUnmount = React.useRef(false);
+  React.useEffect(() => {
+    return () => {
+      didUnmount.current = true;
+    };
+  }, []);
+  const loadImageService = React.useCallback((imageService, { height, width }) => {
+    if (imageService) {
+      const imageServiceId = imageService.id || imageService["@id"];
+      const syncLoaded = loader.loadServiceSync({
+        id: imageServiceId,
+        width: imageService.width || width,
+        height: imageService.height || height
+      });
+      if (syncLoaded) {
+        imageService = syncLoaded;
+      } else if (!imageServiceStatus[imageServiceId]) {
+        if (!didUnmount.current) {
+          setImageServiceStatus((r) => {
+            return __spreadProps$1(__spreadValues$1({}, r), {
+              [imageServiceId]: "loading"
+            });
+          });
+        }
+        loader.loadService({
+          id: imageServiceId,
+          width: imageService.width || width,
+          height: imageService.height || height
+        }).then(() => {
+          if (!didUnmount.current) {
+            setImageServiceStatus((r) => {
+              return __spreadProps$1(__spreadValues$1({}, r), {
+                [imageServiceId]: "done"
+              });
+            });
+          }
+        });
+      }
+    }
+    return imageService;
+  }, [loader, imageServiceStatus]);
+  return [loadImageService, imageServiceStatus];
+}
+
+const IMPORT_ENTITIES = "@iiif/IMPORT_ENTITIES";
+const MODIFY_ENTITY_FIELD = "@iiif/MODIFY_ENTITY_FIELD";
+const REORDER_ENTITY_FIELD = "@iiif/REORDER_ENTITY_FIELD";
+const ADD_REFERENCE = "@iiif/ADD_REFERENCE";
+const REMOVE_REFERENCE = "@iiif/REMOVE_REFERENCE";
+const importEntities = typesafeActions.createAction(IMPORT_ENTITIES)();
+const modifyEntityField = typesafeActions.createAction(MODIFY_ENTITY_FIELD)();
+const reorderEntityField = typesafeActions.createAction(REORDER_ENTITY_FIELD)();
+const addReference = typesafeActions.createAction(ADD_REFERENCE)();
+const removeReference = typesafeActions.createAction(REMOVE_REFERENCE)();
+const entityActions = { importEntities, modifyEntityField, reorderEntityField, addReference, removeReference };
+
+const ADD_MAPPING = "@iiif/ADD_MAPPING";
+const ADD_MAPPINGS = "@iiif/ADD_MAPPINGS";
+typesafeActions.createAction(ADD_MAPPING)();
+typesafeActions.createAction(ADD_MAPPINGS)();
+
+const SET_META_VALUE = "@iiif/SET_META_VALUE";
+const SET_META_VALUE_DYNAMIC = "@iiif/SET_META_VALUE_DYNAMIC";
+const UNSET_META_VALUE = "@iiif/UNSET_META_VALUE";
+typesafeActions.createAction(SET_META_VALUE)();
+typesafeActions.createAction(SET_META_VALUE_DYNAMIC)();
+typesafeActions.createAction(UNSET_META_VALUE)();
+const REQUEST_RESOURCE = "@iiif/REQUEST_RESOURCE";
+const REQUEST_ERROR = "@iiif/REQUEST_ERROR";
+const REQUEST_MISMATCH = "@iiif/REQUEST_MISMATCH";
+const REQUEST_COMPLETE = "@iiif/REQUEST_COMPLETE";
+const REQUEST_OFFLINE_RESOURCE = "@iiif/REQUEST_OFFLINE_RESOURCE";
+typesafeActions.createAction(REQUEST_RESOURCE)();
+typesafeActions.createAction(REQUEST_ERROR)();
+typesafeActions.createAction(REQUEST_MISMATCH)();
+typesafeActions.createAction(REQUEST_COMPLETE)();
+typesafeActions.createAction(REQUEST_OFFLINE_RESOURCE)();
+
+const BATCH_ACTIONS = "@iiif/BATCH";
+const BATCH_IMPORT = "@iiif/BATCH_IMPORT";
+typesafeActions.createAction(BATCH_ACTIONS)();
+typesafeActions.createAction(BATCH_IMPORT)();
+
+function isVaultActivated(obj) {
+  return typeof obj !== "string" && obj && obj.bindToVault;
+}
+function useVirtualAnnotationPage() {
+  const vault = useVault();
+  const sources = React.useRef([]);
+  const dispatch = useDispatch();
+  const virtualId = React.useMemo(() => {
+    return `vault://annotation-page/${new Date().getTime()}/${Math.round(Math.random() * 1e9).toString(16)}`;
+  }, []);
+  React.useLayoutEffect(() => {
+    const page = {
+      id: virtualId,
+      type: "AnnotationPage",
+      behavior: [],
+      motivation: null,
+      label: null,
+      thumbnail: [],
+      summary: null,
+      requiredStatement: null,
+      metadata: [],
+      rights: null,
+      provider: [],
+      items: [],
+      seeAlso: [],
+      homepage: [],
+      logo: [],
+      rendering: [],
+      service: []
+    };
+    dispatch(entityActions.importEntities({
+      entities: {
+        AnnotationPage: {
+          [page.id]: page
+        }
+      }
+    }));
+  }, [virtualId]);
+  const fullPage = useVaultSelector((state) => virtualId ? state.iiif.entities.AnnotationPage[virtualId] : null, [virtualId]);
+  const addAnnotation = React.useCallback((id, atIndex) => {
+    if (virtualId) {
+      if (isVaultActivated(id)) {
+        const display = id;
+        if (!display.__vault) {
+          display.bindToVault(vault);
+        }
+        id = typeof display.source === "string" ? display.source : display.source.id;
+        sources.current[id] = display;
+      } else if (typeof id !== "string") {
+        id = id.id;
+      }
+      const full = vault.get({ id: virtualId, type: "AnnotationPage" });
+      const annotation = vault.get({ id, type: "Annotation" });
+      if (full && annotation) {
+        if (!full.items.find((r) => r.id === annotation.id)) {
+          dispatch(entityActions.addReference({
+            id: virtualId,
+            type: "AnnotationPage",
+            key: "items",
+            reference: {
+              id,
+              type: "Annotation"
+            },
+            index: atIndex
+          }));
+        }
+      }
+    }
+  }, [virtualId]);
+  const removeAnnotation = React.useCallback((id) => {
+    if (virtualId) {
+      if (isVaultActivated(id)) {
+        id = typeof id.source === "string" ? id.source : id.source.id;
+      } else if (typeof id !== "string") {
+        id = id.id;
+      }
+      if (sources.current[id]) {
+        sources.current[id].beforeRemove();
+      }
+      const full = vault.get({ id: virtualId, type: "AnnotationPage" });
+      if (full) {
+        dispatch(entityActions.removeReference({
+          id: virtualId,
+          type: "AnnotationPage",
+          key: "items",
+          reference: {
+            id,
+            type: "Annotation"
+          }
+        }));
+      }
+    }
+  }, [virtualId]);
+  return [
+    fullPage,
+    {
+      addAnnotation,
+      removeAnnotation
+    }
+  ];
+}
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function useRenderingStrategy(options) {
+  const manifest = useManifest();
+  const canvas = useCanvas();
+  const vault = useVault();
+  const [loadImageService, imageServiceStatus] = useLoadImageService();
+  const { enabledPageIds } = useAnnotationPageManager((options == null ? void 0 : options.annotationPageManagerId) || (manifest == null ? void 0 : manifest.id) || (canvas == null ? void 0 : canvas.id), {
+    all: false
+  });
+  const enabledPages = useResources(enabledPageIds, "AnnotationPage");
+  const supports = (options == null ? void 0 : options.strategies) || ["images", "media", "complex-timeline"];
+  const [paintables, actions] = usePaintables(options, [imageServiceStatus]);
+  const strategy = React.useMemo(() => {
+    if (!canvas || paintables.types.length === 0) {
+      return unknownResponse;
+    }
+    if (paintables.types.length !== 1) {
+      if (supports.indexOf("complex-timeline") === -1) {
+        return unsupportedStrategy("Complex timeline not supported");
+      }
+      return unsupportedStrategy("ComplexTimelineStrategy not yet supported");
+    }
+    const mainType = paintables.types[0];
+    if (mainType === "image") {
+      if (supports.indexOf("images") === -1) {
+        return unsupportedStrategy("Image not supported");
+      }
+      return getImageStrategy(canvas, paintables, loadImageService);
+    }
+    if (mainType === "audio") {
+      if (supports.indexOf("media") === -1) {
+        return unsupportedStrategy("Media not supported");
+      }
+      return unsupportedStrategy("Audio strategy not yet supported");
+    }
+    if (mainType === "video") {
+      if (supports.indexOf("media") === -1) {
+        return unsupportedStrategy("Media not supported");
+      }
+      return unsupportedStrategy("Video strategy not yet supported");
+    }
+    return unknownResponse;
+  }, [canvas, paintables, vault, actions.makeChoice]);
+  return React.useMemo(() => {
+    if (strategy.type === "unknown") {
+      return [strategy, emptyActions];
+    }
+    return [
+      __spreadProps(__spreadValues({}, strategy), {
+        annotations: { pages: enabledPages }
+      }),
+      actions
+    ];
+  }, [strategy, enabledPages]);
+}
+
+exports.AnnotationContext = AnnotationContext;
+exports.CanvasContext = CanvasContext;
+exports.CollectionContext = CollectionContext;
+exports.ContextBridge = ContextBridge;
+exports.ImageServiceLoaderContext = ImageServiceLoaderContext;
+exports.ManifestContext = ManifestContext;
+exports.RangeContext = RangeContext;
+exports.ReactVaultContext = ReactVaultContext;
+exports.ResourceProvider = ResourceProvider;
+exports.ResourceReactContext = ResourceReactContext;
+exports.SimpleViewerProvider = SimpleViewerProvider;
+exports.SimpleViewerReactContext = SimpleViewerReactContext;
+exports.VaultProvider = VaultProvider;
+exports.VisibleCanvasReactContext = VisibleCanvasReactContext;
+exports.emptyActions = emptyActions;
+exports.expandTarget = expandTarget;
+exports.flattenAnnotationPageIds = flattenAnnotationPageIds;
+exports.getImageStrategy = getImageStrategy;
+exports.getPaintables = getPaintables;
+exports.parseSelector = parseSelector;
+exports.parseSpecificResource = parseSpecificResource;
+exports.unknownResponse = unknownResponse;
+exports.unsupportedStrategy = unsupportedStrategy;
+exports.useAnnotation = useAnnotation;
+exports.useAnnotationPageManager = useAnnotationPageManager;
+exports.useAnnotationsAtTime = useAnnotationsAtTime;
+exports.useCanvas = useCanvas;
+exports.useCanvasClock = useCanvasClock;
+exports.useCollection = useCollection;
+exports.useContextBridge = useContextBridge;
+exports.useDispatch = useDispatch;
+exports.useEventListener = useEventListener;
+exports.useExistingVault = useExistingVault;
+exports.useExternalCollection = useExternalCollection;
+exports.useExternalManifest = useExternalManifest;
+exports.useExternalResource = useExternalResource;
+exports.useImageService = useImageService;
+exports.useImageServiceLoader = useImageServiceLoader;
+exports.useImageTile = useImageTile;
+exports.useLoadImageService = useLoadImageService;
+exports.useManifest = useManifest;
+exports.usePaintables = usePaintables;
+exports.usePaintingAnnotations = usePaintingAnnotations;
+exports.useRange = useRange;
+exports.useRenderingStrategy = useRenderingStrategy;
+exports.useResourceContext = useResourceContext;
+exports.useResourceEvents = useResourceEvents;
+exports.useResources = useResources;
+exports.useSearchService = useSearchService;
+exports.useSimpleViewer = useSimpleViewer;
+exports.useStyleHelper = useStyleHelper;
+exports.useStyles = useStyles;
+exports.useThumbnail = useThumbnail;
+exports.useVault = useVault;
+exports.useVaultEffect = useVaultEffect;
+exports.useVaultSelector = useVaultSelector;
+exports.useVirtualAnnotationPage = useVirtualAnnotationPage;
+exports.useVisibleCanvases = useVisibleCanvases;