@samvera/bloom-iiif - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4-alpha.0

dist/index.cjs.js

@@ -1,2 +0,2 @@
-var Ae=Object.create;var P=Object.defineProperty,Re=Object.defineProperties,ke=Object.getOwnPropertyDescriptor,Me=Object.getOwnPropertyDescriptors,De=Object.getOwnPropertyNames,_=Object.getOwnPropertySymbols,Le=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty,Te=Object.prototype.propertyIsEnumerable;var U=(e,t,o)=>t in e?P(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,w=(e,t)=>{for(var o in t||(t={}))Y.call(t,o)&&U(e,o,t[o]);if(_)for(var o of _(t))Te.call(t,o)&&U(e,o,t[o]);return e},q=(e,t)=>Re(e,Me(t));var ze=(e,t)=>{for(var o in t)P(e,o,{get:t[o],enumerable:!0})},J=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of De(t))!Y.call(e,n)&&n!==o&&P(e,n,{get:()=>t[n],enumerable:!(r=ke(t,n))||r.enumerable});return e};var u=(e,t,o)=>(o=e!=null?Ae(Le(e)):{},J(t||!e||!e.__esModule?P(o,"default",{value:e,enumerable:!0}):o,e)),Ee=e=>J(P({},"__esModule",{value:!0}),e);var tt={};ze(tt,{default:()=>et});module.exports=Ee(tt);var d=u(require("react"));var b=u(require("react")),K=require("@iiif/vault"),H={isLoaded:!1,vault:new K.Vault},Q=b.default.createContext(H),Ve=b.default.createContext(H);function He(e,t){switch(t.type){case"updateIsLoaded":return q(w({},e),{isLoaded:t.isLoaded});default:throw new Error(`Unhandled action type: ${t.type}`)}}var X=({initialState:e=H,children:t})=>{let[o,r]=(0,b.useReducer)(He,e);return b.default.createElement(Q.Provider,{value:o},b.default.createElement(Ve.Provider,{value:r},t))};function D(){let e=b.default.useContext(Q);if(e===void 0)throw new Error("useViewerState must be used within a ViewerProvider");return e}var C=u(require("react"));var a=u(require("react"));var l=u(require("react")),le=u(require("clsx"));var ee=require("@stitches/react"),h=e=>1.618**e,te=19,Z={1:"0.382rem",2:"0.618rem",3:"1rem",4:"1.618rem",5:`calc(1rem * ${h(2)})`,6:`calc(1rem * ${h(3)})`,7:`calc(1rem * ${h(4)})`,8:`calc(1rem * ${h(5)})`,9:`calc(1rem * ${h(6)})`,10:`calc(1rem * ${h(7)})`,11:`calc(1rem * ${h(8)})`,12:`calc(1rem * ${h(9)})`},Ne={colors:{primary:"#1a1d1e",primaryMuted:"#26292b",primaryAlt:"#151718",accent:"#006adc",accentMuted:"#5eb0ef",accentAlt:"#00254d",secondary:"#FFFFFF",secondaryMuted:"#e6e8eb",secondaryAlt:"#c1c8cd"},fonts:{sans:"'Inter', Arial, sans-serif",display:"'Inter', Arial, sans-serif"},fontSizes:{1:"0.611rem",2:"0.722rem",3:"0.833rem",4:"1rem",5:"1.177rem",6:"1.318rem",7:`calc(1rem * ${h(1)})`,8:`calc(1rem * ${h(2)})`,9:`calc(1rem * ${h(3)})`},sizes:w({},Z),space:w({},Z),transitions:{all:"all 250ms cubic-bezier(0.16, 1, 0.3, 1)",load:"all 1.25s cubic-bezier(0.16, 1, 0.3, 1)"}},je={xxs:"(max-width: 349px)",xs:"(max-width: 575px)",sm:"(max-width: 767px)",md:"(max-width: 991px)",xl:"(max-width: 1199px)",lg:"(min-width: 1200px)"},{styled:i,css:nt,keyframes:it,createTheme:st}=(0,ee.createStitches)({theme:Ne,media:je});var L=i("figure",{display:"flex",flexDirection:"column",margin:"0 0 $2",flexGrow:"0",flexShrink:"0",borderRadius:"3px",transition:"$all",figcaption:{display:"flex",flexDirection:"column",padding:"$2 0",color:"$primary",transition:"$all"},variants:{isFocused:{true:{margin:"-$2 -$2 0",figcaption:{padding:"$2",color:"$accent"}}}}}),oe=i("img",{position:"relative",display:"flex",flexDirection:"column",objectFit:"cover",zIndex:"1",width:"100%",opacity:0,transition:"$load",["&.loaded"]:{opacity:1}}),T=i("span",{display:"flex",position:"relative",backgroundColor:"$secondaryAlt",width:"100%",height:"100%",overflow:"hidden",borderRadius:"3px",boxShadow:"none",transition:"$all"}),re=i("span",{fontSize:"$3",fontWeight:"700"}),ne=i("span",{fontSize:"$1",marginTop:"$1",color:"$primary"});var ce=u(require("@radix-ui/react-aspect-ratio"));var y=u(require("react")),se=u(require("@radix-ui/react-aspect-ratio"));var ie=i("div",{position:"absolute",zIndex:"2",left:"0",top:"0",width:"100%",opacity:"0",transition:"$load",backgroundColor:"$primary",video:{width:"100%",height:"100%",objectFit:"cover"},variants:{isFocused:{true:{opacity:"1",left:"-$2",top:"-$2",width:"calc(100% + (0.618rem * 2))"}}}});var Be=({resource:e,isFocused:t})=>{let o=(0,y.useRef)();(0,y.useEffect)(()=>r(),[t,e]);let r=()=>{let n=o.current;n.currentTime=262,n.play(),setTimeout(()=>{n.currentTime=262},3e4)};return y.default.createElement(ie,{isFocused:t},y.default.createElement(se.Root,{ratio:1/1},y.default.createElement("video",{loop:!0,muted:!0,ref:o,onPause:r},y.default.createElement("source",{src:"https://upload.wikimedia.org/wikipedia/commons/3/31/New_York_1911.webm",type:"video/mp4"}))))},ae=Be;var Ge=({caption:e,description:t,image:o,isFocused:r,video:n})=>{let[s,m]=(0,l.useState)(!1),x=(0,l.useRef)(null);return(0,l.useEffect)(()=>{x.current&&x.current.complete&&m(!0)},[s]),(0,l.useEffect)(()=>{m(!1)},[o]),l.default.createElement(L,{isFocused:r},l.default.createElement(ce.Root,{ratio:1/1},l.default.createElement(T,null,n&&l.default.createElement(ae,{resource:n,isFocused:r}),o&&l.default.createElement(oe,{src:o,ref:x,onLoad:()=>m(!0),className:(0,le.default)("source",s&&"loaded")}))),l.default.createElement("figcaption",null,l.default.createElement(re,null,e),t&&l.default.createElement(ne,null,t)))},de=Ge;var F=(e,t="en")=>{if(!e)return null;if(typeof e=="string")return[e];if(!e[t]){let o=Object.getOwnPropertyNames(e);if(o.length>0)return e[o[0]]}return e[t]};var z=(e,t="600,",o="full")=>{Array.isArray(e)&&(e=e[0]);let r=e.id;if(!e.service)return e.id;if(!Array.isArray(e.service)){if(e.service["@id"])return`${e.service["@id"]}/${o}/${t}/0/default.jpg`;if(e.service.id)return`${e.service.id}/${o}/${t}/0/default.jpg`}return e.service["@id"]?`${e.service["@id"]}/${o}/${t}/0/default.jpg`:`${e.service[0].id}/${o}/${t}/0/default.jpg`};var N=i("a",{color:"black",textDecoration:"none"}),E=i("div",{position:"relative",width:"calc(100% / 4)",zIndex:"0",borderRadius:"3px",[`> ${N}:hover`]:{[`${L}`]:{boxShadow:"3px 3px 11px #0003"},[`${T}`]:{borderBottomLeftRadius:"0",borderBottomRightRadius:"0"}}});var p=u(require("react"));var me=i("div",{position:"absolute",zIndex:"2",left:"-$2",top:"-$2",width:"calc(100% + (0.618rem * 2))",opacity:"0",variants:{isFocused:{true:{opacity:"1"}}}}),ue=i("div",{width:"100%",height:"100%",display:"flex",flexDirection:"column",justifyContent:"flex-end",zIndex:"1"}),pe=i("div",{display:"flex",justifyContent:"center",padding:"$2 $2 0",background:"linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)",cursor:"default",button:{width:"$3"}}),fe=i("div",{display:"flex",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.7)",color:"$secondaryAlt",fontSize:"$1",padding:"$1",cursor:"default"});var ge=u(require("@radix-ui/react-aspect-ratio")),We=({activeCanvas:e,handleActiveCanvas:t,isFocused:o,manifest:r})=>{let[n,s]=(0,p.useState)(!1),[m,x]=(0,p.useState)(!1),$=e+1,c=0;return r&&(c=r.items.length),(0,p.useEffect)(()=>{$<=1?s(!1):s(!0),$>=c?x(!1):x(!0)},[e,r]),p.default.createElement(me,{isFocused:o},p.default.createElement(ge.Root,{ratio:1/1},r&&p.default.createElement(ue,null,p.default.createElement(pe,{onClick:v=>v.preventDefault()},n&&p.default.createElement("button",{onClick:t,"data-increment":-1},"-"),m&&p.default.createElement("button",{onClick:t,"data-increment":1},"+")),p.default.createElement(fe,{onClick:v=>v.preventDefault()},$," of ",c))))},he=We;var Oe=({item:e})=>{let t=D(),{vault:o}=t,r=(0,a.useRef)(null),[n,s]=(0,a.useState)(!1),[m,x]=(0,a.useState)(0),[$,c]=(0,a.useState)(),[v,Se]=(0,a.useState)(),[I,Fe]=(0,a.useState)();(0,a.useEffect)(()=>{e.thumbnail&&c(z(o.get(e.thumbnail[0].id),"300,"))},[]),(0,a.useEffect)(()=>{n&&setTimeout(()=>{I||o.loadCollection(e.id).then(f=>Fe(f)).catch(f=>{console.error(`Manifest failed to load: ${f}`)})},1e3)},[n]),(0,a.useEffect)(()=>{if(!I)return;let f=o.get(I.items[m]);c(O(f))},[I]);let B=()=>s(!0),G=()=>s(!1),W="";e.homepage&&(W=e.homepage[0].id);let Pe=f=>{if(f.preventDefault(),!I)return;let k=m+parseInt(f.target.dataset.increment),V=o.get(I.items[k]);c(O(V)),x(k)},O=f=>{let k=o.get(f.items[0]),V=o.get(k.items[0]),M=o.get(V.body[0]);if(M.type==="Video"&&Se(M),f.thumbnail.length>0)return z(o.get(f.thumbnail[0].id),"300,");if(M.type==="Image")return z(M,"300,")};return a.default.createElement(E,null,a.default.createElement(N,{href:W,tabIndex:0,onFocus:B,onBlur:G,onMouseEnter:B,onMouseLeave:G,ref:r},a.default.createElement(de,{caption:F(e.label),description:F(e.summary),image:$,video:v,isFocused:n}),a.default.createElement(he,{manifest:I,activeCanvas:m,handleActiveCanvas:Pe,isFocused:n})))},Ce=Oe;var xe=i("div",{position:"relative",display:"flex",flexDirection:"row",[`> ${E}`]:{marginRight:"$4","&:last-child":{marginRight:"0"}}});var g=u(require("react"));var A=i("div",{position:"absolute",background:"black",borderRadius:"3px",opacity:"0",transition:"$all"}),S=i("div",{position:"absolute",display:"flex",flexDirection:"column",width:"$4",height:"$4",borderRadius:"100%",backgroundColor:"white",justifyContent:"center",textAlign:"center",alignItems:"center",boxShadow:"none",transform:"none",transition:"$all",svg:{display:"flex",width:"$3",height:"$3",fill:"$primary",stroke:"$primary",color:"$primary",transition:"$all"}}),ve=i("button",{position:"absolute",height:"100%",zIndex:"1",border:"none",cursor:"pointer",background:"transparent",["&:hover"]:{[`> ${A}`]:{opacity:1},[`> ${S}`]:{boxShadow:"3px 3px 11px #0003",svg:{fill:"$accent",stroke:"$accent",color:"$accent"}}},variants:{direction:{next:{left:"unset",right:"0",[`> ${A}`]:{left:"unset",right:"0",top:"0",background:"linear-gradient(270deg, rgba(0,0,0,0.7) 38.2%, rgba(0,0,0,0) 98%)"},[`> ${S}`]:{right:"calc(-$4 / 2)",marginTop:"calc(-$4 / 2)"},[`&:hover > ${S}`]:{marginRight:"$1"}},previous:{left:"0",right:"unset",[`> ${A}`]:{left:"0",right:"unset",top:"0",background:"linear-gradient(90deg, rgba(0,0,0,0.7) 38.2%, rgba(0,0,0,0) 98%)"},[`> ${S}`]:{left:"calc(-$4 / 2)",marginTop:"calc(-$4 / 2)"},[`&:hover > ${S}`]:{marginLeft:"$1"}}}}});var _e=()=>g.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},g.default.createElement("title",null,"Arrow Back"),g.default.createElement("path",{fill:"none",stroke:"currentColor",strokeMiterlimit:"10",strokeWidth:"70",d:"M244 400L100 256l144-144M120 256h292"})),Ue=()=>g.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},g.default.createElement("title",null,"Arrow Forward"),g.default.createElement("path",{fill:"none",stroke:"currentColor",strokeMiterlimit:"10",strokeWidth:"70",d:"M268 112l144 144-144 144M392 256H100"})),Ye=({label:e,increment:t,handleControl:o,height:r})=>{let n=r*.382;return g.default.createElement(ve,{"aria-label":e,direction:e,onClick:()=>o(t),value:e,style:{height:`${r}px`,width:`${n}px`}},g.default.createElement(A,{style:{height:`${r}px`,width:`${n}px`}}),g.default.createElement(S,null,e==="next"&&g.default.createElement(Ue,null),e==="previous"&&g.default.createElement(_e,null)))},j=Ye;var qe=e=>{let[t,o]=(0,C.useState)({width:0,height:0});return C.default.useEffect(()=>{if(e.current){let{current:r}=e,n=r.getBoundingClientRect(),{width:s,height:m}=n;o({width:Math.round(s),height:Math.round(m)})}},[]),t},Je=({items:e})=>{let[t,o]=(0,C.useState)([0,1,2,3,4]),r=(0,C.useRef)(null),n=qe(r),s=c=>{o(t.map(v=>v+c))},m=te*1.618*4,$=(n.width-m)/5;return C.default.createElement(xe,{ref:r},C.default.createElement(j,{increment:-1,label:"previous",handleControl:s,height:$}),C.default.createElement(j,{increment:1,label:"next",handleControl:s,height:$}),e.filter((c,v)=>{if(t.includes(v))return c}).map(c=>C.default.createElement(Ce,{item:c,key:c.id})))},ye=Je;var R=u(require("react"));var $e=i("div",{display:"flex",flexDirection:"column",paddingBottom:"$4",margin:"0",color:"$primary"}),be=i("span",{fontSize:"$5",fontWeight:"800",a:{color:"$accent",textDecoration:"none"}}),Ie=i("span",{fontSize:"$3",marginTop:"$2"});var Ke=({label:e,summary:t,homepage:o=null})=>{let r="";o&&o.length>0&&(r=o[0].id);let n=F(t);return R.default.createElement($e,null,R.default.createElement(be,null,R.default.createElement("a",{href:r},F(e))),n&&R.default.createElement(Ie,null,n))},we=Ke;var Qe=e=>d.default.createElement(X,null,d.default.createElement(Xe,w({},e))),Xe=({collectionId:e})=>{let t=D(),{vault:o}=t,[r,n]=(0,d.useState)();return(0,d.useEffect)(()=>{o.loadCollection(e).then(s=>n(s)).catch(s=>{console.error(`Collection failed to load: ${s}`)}).finally(()=>{})},[]),!r||!r.items?(console.log(`The IIIF Collection ${e} failed to load.`),d.default.createElement(d.default.Fragment,null)):r.items.length===0?(console.log(`The IIIF collection ${e} does not contain items.`),d.default.createElement(d.default.Fragment,null)):d.default.createElement(Ze,null,d.default.createElement(we,{label:r.label,summary:r.summary,homepage:r.homepage}),d.default.createElement(ye,{items:r.items}))},Ze=i("div",{padding:"$4 0"}),et=Qe;
+var De=Object.create;var k=Object.defineProperty,Le=Object.defineProperties,Ee=Object.getOwnPropertyDescriptor,Te=Object.getOwnPropertyDescriptors,ze=Object.getOwnPropertyNames,Q=Object.getOwnPropertySymbols,Ne=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty,He=Object.prototype.propertyIsEnumerable;var X=(e,t,o)=>t in e?k(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,w=(e,t)=>{for(var o in t||(t={}))Z.call(t,o)&&X(e,o,t[o]);if(Q)for(var o of Q(t))He.call(t,o)&&X(e,o,t[o]);return e},ee=(e,t)=>Le(e,Te(t));var Ve=(e,t)=>{for(var o in t)k(e,o,{get:t[o],enumerable:!0})},te=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of ze(t))!Z.call(e,n)&&n!==o&&k(e,n,{get:()=>t[n],enumerable:!(r=Ee(t,n))||r.enumerable});return e};var c=(e,t,o)=>(o=e!=null?De(Ne(e)):{},te(t||!e||!e.__esModule?k(o,"default",{value:e,enumerable:!0}):o,e)),je=e=>te(k({},"__esModule",{value:!0}),e);var rt={};Ve(rt,{default:()=>ot});module.exports=je(rt);var p=c(require("react"));var b=c(require("react")),oe=require("@iiif/vault"),O={isLoaded:!1,vault:new oe.Vault},re=b.default.createContext(O),Be=b.default.createContext(O);function Ge(e,t){switch(t.type){case"updateIsLoaded":return ee(w({},e),{isLoaded:t.isLoaded});default:throw new Error(`Unhandled action type: ${t.type}`)}}var ne=({initialState:e=O,children:t})=>{let[o,r]=(0,b.useReducer)(Ge,e);return b.default.createElement(re.Provider,{value:o},b.default.createElement(Be.Provider,{value:r},t))};function E(){let e=b.default.useContext(re);if(e===void 0)throw new Error("useViewerState must be used within a ViewerProvider");return e}var m=c(require("react"));var l=c(require("react"));var a=c(require("react")),fe=c(require("clsx"));var se=require("@stitches/react"),h=e=>1.618**e,le=19,ie={1:"0.382rem",2:"0.618rem",3:"1rem",4:"1.618rem",5:`calc(1rem * ${h(2)})`,6:`calc(1rem * ${h(3)})`,7:`calc(1rem * ${h(4)})`,8:`calc(1rem * ${h(5)})`,9:`calc(1rem * ${h(6)})`,10:`calc(1rem * ${h(7)})`,11:`calc(1rem * ${h(8)})`,12:`calc(1rem * ${h(9)})`},We={colors:{primary:"#1a1d1e",primaryMuted:"#26292b",primaryAlt:"#151718",accent:"#006adc",accentMuted:"#5eb0ef",accentAlt:"#00254d",secondary:"#FFFFFF",secondaryMuted:"#e6e8eb",secondaryAlt:"#c1c8cd"},fonts:{sans:"'Inter', Arial, sans-serif",display:"'Inter', Arial, sans-serif"},fontSizes:{1:"0.611rem",2:"0.722rem",3:"0.833rem",4:"1rem",5:"1.177rem",6:"1.318rem",7:`calc(1rem * ${h(1)})`,8:`calc(1rem * ${h(2)})`,9:`calc(1rem * ${h(3)})`},sizes:w({},ie),space:w({},ie),transitions:{all:"all 250ms cubic-bezier(0.16, 1, 0.3, 1)",load:"all 1.25s cubic-bezier(0.16, 1, 0.3, 1)"}},Oe={xxs:"(max-width: 349px)",xs:"(max-width: 575px)",sm:"(max-width: 767px)",md:"(max-width: 991px)",xl:"(max-width: 1199px)",lg:"(min-width: 1200px)"},{styled:i,css:st,keyframes:lt,createTheme:at}=(0,se.createStitches)({theme:We,media:Oe});var T=i("figure",{display:"flex",flexDirection:"column",margin:"0 0 $2",flexGrow:"0",flexShrink:"0",borderRadius:"3px",transition:"$all",figcaption:{display:"flex",flexDirection:"column",padding:"$2 0",color:"$primary",transition:"$all"},variants:{isFocused:{true:{margin:"-$2 -$2 0",figcaption:{padding:"$2",color:"$accent"}}}}}),ae=i("img",{position:"relative",display:"flex",flexDirection:"column",objectFit:"cover",zIndex:"1",width:"100%",opacity:0,transition:"$load",["&.loaded"]:{opacity:1}}),z=i("span",{display:"flex",position:"relative",backgroundColor:"$secondaryAlt",width:"100%",height:"100%",overflow:"hidden",borderRadius:"3px",boxShadow:"none",transition:"$all"}),ce=i("span",{fontSize:"$3",fontWeight:"700"}),de=i("span",{fontSize:"$1",marginTop:"$1",color:"$primary"});var ge=c(require("@radix-ui/react-aspect-ratio"));var v=c(require("react")),ue=c(require("@radix-ui/react-aspect-ratio"));var me=i("div",{position:"absolute",zIndex:"2",left:"0",top:"0",width:"100%",opacity:"0",transition:"$load",backgroundColor:"$primary",video:{width:"100%",height:"100%",objectFit:"cover"},variants:{isFocused:{true:{opacity:"1",left:"-$2",top:"-$2",width:"calc(100% + (0.618rem * 2))"}}}});var _e=({resource:e,isFocused:t})=>{let o=(0,v.useRef)();(0,v.useEffect)(()=>r(),[t,e]);let r=()=>{let n=o.current;n.currentTime=262,n.play(),setTimeout(()=>{n.currentTime=262},3e4)};return v.default.createElement(me,{isFocused:t},v.default.createElement(ue.Root,{ratio:1/1},v.default.createElement("video",{loop:!0,muted:!0,ref:o,onPause:r},v.default.createElement("source",{src:"https://upload.wikimedia.org/wikipedia/commons/3/31/New_York_1911.webm",type:"video/mp4"}))))},pe=_e;var Ue=({caption:e,description:t,image:o,isFocused:r,video:n})=>{let[s,u]=(0,a.useState)(!1),f=(0,a.useRef)(null);return(0,a.useEffect)(()=>{f.current&&f.current.complete&&u(!0)},[s]),(0,a.useEffect)(()=>{u(!1)},[o]),a.default.createElement(T,{isFocused:r},a.default.createElement(ge.Root,{ratio:1/1},a.default.createElement(z,null,n&&a.default.createElement(pe,{resource:n,isFocused:r}),o&&a.default.createElement(ae,{src:o,ref:f,onLoad:()=>u(!0),className:(0,fe.default)("source",s&&"loaded")}))),a.default.createElement("figcaption",null,a.default.createElement(ce,null,e),t&&a.default.createElement(de,null,t)))},he=Ue;var F=(e,t="en")=>{if(!e)return null;if(typeof e=="string")return[e];if(!e[t]){let o=Object.getOwnPropertyNames(e);if(o.length>0)return e[o[0]]}return e[t]};var N=(e,t="600,",o="full")=>{Array.isArray(e)&&(e=e[0]);let r=e.id;if(!e.service)return e.id;if(!Array.isArray(e.service)){if(e.service["@id"])return`${e.service["@id"]}/${o}/${t}/0/default.jpg`;if(e.service.id)return`${e.service.id}/${o}/${t}/0/default.jpg`}return e.service["@id"]?`${e.service["@id"]}/${o}/${t}/0/default.jpg`:`${e.service[0].id}/${o}/${t}/0/default.jpg`};var _=i("a",{color:"black",textDecoration:"none"}),H=i("div",{position:"relative",width:"calc(100% / 4)",zIndex:"0",borderRadius:"3px",[`> ${_}:hover`]:{[`${T}`]:{boxShadow:"3px 3px 11px #0003"},[`${z}`]:{borderBottomLeftRadius:"0",borderBottomRightRadius:"0"}}});var d=c(require("react"));var xe=i("div",{position:"absolute",zIndex:"2",left:"-$2",top:"-$2",width:"calc(100% + (0.618rem * 2))",opacity:"0",variants:{isFocused:{true:{opacity:"1"}}}}),Ce=i("div",{width:"100%",height:"100%",display:"flex",flexDirection:"column",justifyContent:"flex-end",zIndex:"1"}),ve=i("div",{display:"flex",justifyContent:"center",padding:"$2 $2 0",background:"linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)",cursor:"default",button:{width:"$4",height:"$4",display:"flex",flexDirection:"column",textAlign:"center",justifyContent:"center",alignItems:"center",borderRadious:"100%",backgroundColor:"transparent",border:"none",cursor:"pointer","&:disabled":{opacity:"0.2"},svg:{width:"100%",fill:"$secondary",stroke:"$secondary",color:"$secondary"}}}),ye=i("div",{display:"flex",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.7)",color:"$secondaryAlt",fontSize:"$1",padding:"$1",cursor:"default"});var be=c(require("@radix-ui/react-aspect-ratio"));var V=c(require("react")),j=()=>V.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},V.default.createElement("title",null,"Next"),V.default.createElement("path",{fill:"none",stroke:"currentColor",strokeMiterlimit:"10",strokeWidth:"70",d:"M268 112l144 144-144 144M392 256H100"}));var B=c(require("react")),G=()=>B.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},B.default.createElement("title",null,"Previous"),B.default.createElement("path",{fill:"none",stroke:"currentColor",strokeMiterlimit:"10",strokeWidth:"70",d:"M244 400L100 256l144-144M120 256h292"}));var Ye=({activeCanvas:e,handleActiveCanvas:t,isFocused:o,manifest:r})=>{let[n,s]=(0,d.useState)(!1),[u,f]=(0,d.useState)(!1),$=e+1,x=0;return r&&(x=r.items.length),(0,d.useEffect)(()=>{$<=1?s(!1):s(!0),$>=x?f(!1):f(!0)},[e,r]),d.default.createElement(xe,{isFocused:o},d.default.createElement(be.Root,{ratio:1/1},r&&d.default.createElement(Ce,null,d.default.createElement(ve,{onClick:I=>I.preventDefault()},d.default.createElement("button",{onClick:()=>t(-1),disabled:!n},d.default.createElement(G,null)),d.default.createElement("button",{onClick:()=>t(1),disabled:!u},d.default.createElement(j,null))),d.default.createElement(ye,{onClick:I=>I.preventDefault()},$," of ",x))))},$e=Ye;var qe=({item:e})=>{let t=E(),{vault:o}=t,r=(0,l.useRef)(null),[n,s]=(0,l.useState)(!1),[u,f]=(0,l.useState)(0),[$,x]=(0,l.useState)(),[I,Y]=(0,l.useState)(),[C,y]=(0,l.useState)();(0,l.useEffect)(()=>{e.thumbnail&&x(N(o.get(e.thumbnail[0].id),"300,"))},[]),(0,l.useEffect)(()=>{n&&setTimeout(()=>{C||o.loadCollection(e.id).then(g=>y(g)).catch(g=>{console.error(`Manifest failed to load: ${g}`)})},1e3)},[n]),(0,l.useEffect)(()=>{if(!C)return;let g=o.get(C.items[u]);x(K(g))},[C]);let P=()=>s(!0),q=()=>s(!1),J="";e.homepage&&(J=e.homepage[0].id);let Me=g=>{if(!C)return;let D=u+g,W=o.get(C.items[D]);x(K(W)),f(D)},K=g=>{let D=o.get(g.items[0]),W=o.get(D.items[0]),L=o.get(W.body[0]);if(L.type==="Video"&&Y(L),g.thumbnail.length>0)return N(o.get(g.thumbnail[0].id),"300,");if(L.type==="Image")return N(L,"300,")};return l.default.createElement(H,null,l.default.createElement(_,{href:J,tabIndex:0,onFocus:P,onBlur:q,onMouseEnter:P,onMouseLeave:q,ref:r},l.default.createElement(he,{caption:F(e.label),description:F(e.summary),image:$,video:I,isFocused:n}),l.default.createElement($e,{manifest:C,activeCanvas:u,handleActiveCanvas:Me,isFocused:n})))},Ie=qe;var we=i("div",{position:"relative",display:"flex",flexDirection:"row",[`> ${H}`]:{marginRight:"$4","&:last-child":{marginRight:"0"}}});var R=c(require("react"));var A=i("div",{position:"absolute",background:"black",borderRadius:"3px",opacity:"0",transition:"$all"}),S=i("div",{position:"absolute",display:"flex",flexDirection:"column",width:"$4",height:"$4",borderRadius:"100%",backgroundColor:"white",justifyContent:"center",textAlign:"center",alignItems:"center",boxShadow:"none",transform:"none",transition:"$all",svg:{display:"flex",width:"$3",height:"$3",fill:"$primary",stroke:"$primary",color:"$primary",transition:"$all"}}),Se=i("button",{position:"absolute",height:"100%",zIndex:"1",border:"none",cursor:"pointer",background:"transparent",["&:disabled"]:{opacity:"0"},["&:hover"]:{[`> ${A}`]:{opacity:1},[`> ${S}`]:{boxShadow:"3px 3px 11px #0003",svg:{fill:"$accent",stroke:"$accent",color:"$accent"}}},variants:{direction:{next:{left:"unset",right:"0",[`> ${A}`]:{left:"unset",right:"0",top:"0",background:"linear-gradient(270deg, rgba(0,0,0,0.7) 38.2%, rgba(0,0,0,0) 98%)"},[`> ${S}`]:{right:"calc(-$4 / 2)",marginTop:"calc(-$4 / 2)"},[`&:hover > ${S}`]:{marginRight:"$1"}},previous:{left:"0",right:"unset",[`> ${A}`]:{left:"0",right:"unset",top:"0",background:"linear-gradient(90deg, rgba(0,0,0,0.7) 38.2%, rgba(0,0,0,0) 98%)"},[`> ${S}`]:{left:"calc(-$4 / 2)",marginTop:"calc(-$4 / 2)"},[`&:hover > ${S}`]:{marginLeft:"$1"}}}}});var Je=({disabled:e,label:t,increment:o,handleControl:r,height:n})=>{let s=n*.382;return R.default.createElement(Se,{"aria-label":t,direction:t,onClick:()=>r(o),value:t,style:{height:`${n}px`,width:`${s}px`},disabled:e},R.default.createElement(A,{style:{height:`${n}px`,width:`${s}px`}}),R.default.createElement(S,null,t==="next"&&R.default.createElement(j,null),t==="previous"&&R.default.createElement(G,null)))},U=Je;var Ke=e=>{let[t,o]=(0,m.useState)({width:0,height:0});return m.default.useEffect(()=>{if(e.current){let{current:r}=e,n=r.getBoundingClientRect(),{width:s,height:u}=n;o({width:Math.round(s),height:Math.round(u)})}},[]),t},Qe=({items:e})=>{let[t,o]=(0,m.useState)([0,1,2,3,4]),[r,n]=(0,m.useState)(!1),[s,u]=(0,m.useState)(!1),f=(0,m.useRef)(null),$=Ke(f);(0,m.useEffect)(()=>{!e||(t.includes(0)?n(!1):n(!0),t.includes(e.length-1)?u(!1):u(!0))},[t]);let x=y=>{o(t.map(P=>P+y))},I=le*1.618*4,C=($.width-I)/5;return m.default.createElement(we,{ref:f},m.default.createElement(U,{increment:-1,label:"previous",handleControl:x,height:C,disabled:!r}),m.default.createElement(U,{increment:1,label:"next",handleControl:x,height:C,disabled:!s}),e.filter((y,P)=>{if(t.includes(P))return y}).map(y=>m.default.createElement(Ie,{item:y,key:y.id})))},Pe=Qe;var M=c(require("react"));var Fe=i("div",{display:"flex",flexDirection:"column",paddingBottom:"$4",margin:"0",color:"$primary"}),Re=i("span",{fontSize:"$5",fontWeight:"800",a:{color:"$accent",textDecoration:"none"}}),ke=i("span",{fontSize:"$3",marginTop:"$2"});var Xe=({label:e,summary:t,homepage:o=null})=>{let r="";o&&o.length>0&&(r=o[0].id);let n=F(t);return M.default.createElement(Fe,null,M.default.createElement(Re,null,M.default.createElement("a",{href:r},F(e))),n&&M.default.createElement(ke,null,n))},Ae=Xe;var Ze=e=>p.default.createElement(ne,null,p.default.createElement(et,w({},e))),et=({collectionId:e})=>{let t=E(),{vault:o}=t,[r,n]=(0,p.useState)();return(0,p.useEffect)(()=>{o.loadCollection(e).then(s=>n(s)).catch(s=>{console.error(`Collection failed to load: ${s}`)}).finally(()=>{})},[]),!r||!r.items?(console.log(`The IIIF Collection ${e} failed to load.`),p.default.createElement(p.default.Fragment,null)):r.items.length===0?(console.log(`The IIIF collection ${e} does not contain items.`),p.default.createElement(p.default.Fragment,null)):p.default.createElement(tt,null,p.default.createElement(Ae,{label:r.label,summary:r.summary,homepage:r.homepage}),p.default.createElement(Pe,{items:r.items}))},tt=i("div",{padding:"$4 0"}),ot=Ze;
 //# sourceMappingURL=index.cjs.js.map

dist/index.esm.js

@@ -1,2 +0,2 @@
-var Fe=Object.defineProperty,Pe=Object.defineProperties;var Ae=Object.getOwnPropertyDescriptors;var _=Object.getOwnPropertySymbols;var Re=Object.prototype.hasOwnProperty,ke=Object.prototype.propertyIsEnumerable;var U=(e,o,t)=>o in e?Fe(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,x=(e,o)=>{for(var t in o||(o={}))Re.call(o,t)&&U(e,t,o[t]);if(_)for(var t of _(o))ke.call(o,t)&&U(e,t,o[t]);return e},Y=(e,o)=>Pe(e,Ae(o));import f,{useEffect as ot,useState as rt}from"react";import b,{useReducer as Me}from"react";import{Vault as De}from"@iiif/vault";var V={isLoaded:!1,vault:new De},q=b.createContext(V),Le=b.createContext(V);function Te(e,o){switch(o.type){case"updateIsLoaded":return Y(x({},e),{isLoaded:o.isLoaded});default:throw new Error(`Unhandled action type: ${o.type}`)}}var J=({initialState:e=V,children:o})=>{let[t,r]=Me(Te,e);return b.createElement(q.Provider,{value:t},b.createElement(Le.Provider,{value:r},o))};function A(){let e=b.useContext(q);if(e===void 0)throw new Error("useViewerState must be used within a ViewerProvider");return e}import S,{useState as Ce,useRef as Xe}from"react";import T,{useEffect as N,useState as I,useRef as Ye}from"react";import h,{useEffect as ne,useRef as Be,useState as Ge}from"react";import We from"clsx";import{createStitches as ze}from"@stitches/react";var d=e=>1.618**e,Q=19,K={1:"0.382rem",2:"0.618rem",3:"1rem",4:"1.618rem",5:`calc(1rem * ${d(2)})`,6:`calc(1rem * ${d(3)})`,7:`calc(1rem * ${d(4)})`,8:`calc(1rem * ${d(5)})`,9:`calc(1rem * ${d(6)})`,10:`calc(1rem * ${d(7)})`,11:`calc(1rem * ${d(8)})`,12:`calc(1rem * ${d(9)})`},Ee={colors:{primary:"#1a1d1e",primaryMuted:"#26292b",primaryAlt:"#151718",accent:"#006adc",accentMuted:"#5eb0ef",accentAlt:"#00254d",secondary:"#FFFFFF",secondaryMuted:"#e6e8eb",secondaryAlt:"#c1c8cd"},fonts:{sans:"'Inter', Arial, sans-serif",display:"'Inter', Arial, sans-serif"},fontSizes:{1:"0.611rem",2:"0.722rem",3:"0.833rem",4:"1rem",5:"1.177rem",6:"1.318rem",7:`calc(1rem * ${d(1)})`,8:`calc(1rem * ${d(2)})`,9:`calc(1rem * ${d(3)})`},sizes:x({},K),space:x({},K),transitions:{all:"all 250ms cubic-bezier(0.16, 1, 0.3, 1)",load:"all 1.25s cubic-bezier(0.16, 1, 0.3, 1)"}},Ve={xxs:"(max-width: 349px)",xs:"(max-width: 575px)",sm:"(max-width: 767px)",md:"(max-width: 991px)",xl:"(max-width: 1199px)",lg:"(min-width: 1200px)"},{styled:n,css:ut,keyframes:pt,createTheme:ft}=ze({theme:Ee,media:Ve});var R=n("figure",{display:"flex",flexDirection:"column",margin:"0 0 $2",flexGrow:"0",flexShrink:"0",borderRadius:"3px",transition:"$all",figcaption:{display:"flex",flexDirection:"column",padding:"$2 0",color:"$primary",transition:"$all"},variants:{isFocused:{true:{margin:"-$2 -$2 0",figcaption:{padding:"$2",color:"$accent"}}}}}),X=n("img",{position:"relative",display:"flex",flexDirection:"column",objectFit:"cover",zIndex:"1",width:"100%",opacity:0,transition:"$load",["&.loaded"]:{opacity:1}}),k=n("span",{display:"flex",position:"relative",backgroundColor:"$secondaryAlt",width:"100%",height:"100%",overflow:"hidden",borderRadius:"3px",boxShadow:"none",transition:"$all"}),Z=n("span",{fontSize:"$3",fontWeight:"700"}),ee=n("span",{fontSize:"$1",marginTop:"$1",color:"$primary"});import*as ie from"@radix-ui/react-aspect-ratio";import M,{useEffect as He,useRef as Ne}from"react";import*as oe from"@radix-ui/react-aspect-ratio";var te=n("div",{position:"absolute",zIndex:"2",left:"0",top:"0",width:"100%",opacity:"0",transition:"$load",backgroundColor:"$primary",video:{width:"100%",height:"100%",objectFit:"cover"},variants:{isFocused:{true:{opacity:"1",left:"-$2",top:"-$2",width:"calc(100% + (0.618rem * 2))"}}}});var je=({resource:e,isFocused:o})=>{let t=Ne();He(()=>r(),[o,e]);let r=()=>{let i=t.current;i.currentTime=262,i.play(),setTimeout(()=>{i.currentTime=262},3e4)};return M.createElement(te,{isFocused:o},M.createElement(oe.Root,{ratio:1/1},M.createElement("video",{loop:!0,muted:!0,ref:t,onPause:r},M.createElement("source",{src:"https://upload.wikimedia.org/wikipedia/commons/3/31/New_York_1911.webm",type:"video/mp4"}))))},re=je;var Oe=({caption:e,description:o,image:t,isFocused:r,video:i})=>{let[s,l]=Ge(!1),u=Be(null);return ne(()=>{u.current&&u.current.complete&&l(!0)},[s]),ne(()=>{l(!1)},[t]),h.createElement(R,{isFocused:r},h.createElement(ie.Root,{ratio:1/1},h.createElement(k,null,i&&h.createElement(re,{resource:i,isFocused:r}),t&&h.createElement(X,{src:t,ref:u,onLoad:()=>l(!0),className:We("source",s&&"loaded")}))),h.createElement("figcaption",null,h.createElement(Z,null,e),o&&h.createElement(ee,null,o)))},se=Oe;var $=(e,o="en")=>{if(!e)return null;if(typeof e=="string")return[e];if(!e[o]){let t=Object.getOwnPropertyNames(e);if(t.length>0)return e[t[0]]}return e[o]};var D=(e,o="600,",t="full")=>{Array.isArray(e)&&(e=e[0]);let r=e.id;if(!e.service)return e.id;if(!Array.isArray(e.service)){if(e.service["@id"])return`${e.service["@id"]}/${t}/${o}/0/default.jpg`;if(e.service.id)return`${e.service.id}/${t}/${o}/0/default.jpg`}return e.service["@id"]?`${e.service["@id"]}/${t}/${o}/0/default.jpg`:`${e.service[0].id}/${t}/${o}/0/default.jpg`};var H=n("a",{color:"black",textDecoration:"none"}),L=n("div",{position:"relative",width:"calc(100% / 4)",zIndex:"0",borderRadius:"3px",[`> ${H}:hover`]:{[`${R}`]:{boxShadow:"3px 3px 11px #0003"},[`${k}`]:{borderBottomLeftRadius:"0",borderBottomRightRadius:"0"}}});import v,{useEffect as _e,useState as me}from"react";var ae=n("div",{position:"absolute",zIndex:"2",left:"-$2",top:"-$2",width:"calc(100% + (0.618rem * 2))",opacity:"0",variants:{isFocused:{true:{opacity:"1"}}}}),le=n("div",{width:"100%",height:"100%",display:"flex",flexDirection:"column",justifyContent:"flex-end",zIndex:"1"}),ce=n("div",{display:"flex",justifyContent:"center",padding:"$2 $2 0",background:"linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)",cursor:"default",button:{width:"$3"}}),de=n("div",{display:"flex",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.7)",color:"$secondaryAlt",fontSize:"$1",padding:"$1",cursor:"default"});import*as ue from"@radix-ui/react-aspect-ratio";var Ue=({activeCanvas:e,handleActiveCanvas:o,isFocused:t,manifest:r})=>{let[i,s]=me(!1),[l,u]=me(!1),g=e+1,a=0;return r&&(a=r.items.length),_e(()=>{g<=1?s(!1):s(!0),g>=a?u(!1):u(!0)},[e,r]),v.createElement(ae,{isFocused:t},v.createElement(ue.Root,{ratio:1/1},r&&v.createElement(le,null,v.createElement(ce,{onClick:p=>p.preventDefault()},i&&v.createElement("button",{onClick:o,"data-increment":-1},"-"),l&&v.createElement("button",{onClick:o,"data-increment":1},"+")),v.createElement(de,{onClick:p=>p.preventDefault()},g," of ",a))))},pe=Ue;var qe=({item:e})=>{let o=A(),{vault:t}=o,r=Ye(null),[i,s]=I(!1),[l,u]=I(0),[g,a]=I(),[p,Ie]=I(),[C,we]=I();N(()=>{e.thumbnail&&a(D(t.get(e.thumbnail[0].id),"300,"))},[]),N(()=>{i&&setTimeout(()=>{C||t.loadCollection(e.id).then(c=>we(c)).catch(c=>{console.error(`Manifest failed to load: ${c}`)})},1e3)},[i]),N(()=>{if(!C)return;let c=t.get(C.items[l]);a(O(c))},[C]);let B=()=>s(!0),G=()=>s(!1),W="";e.homepage&&(W=e.homepage[0].id);let Se=c=>{if(c.preventDefault(),!C)return;let F=l+parseInt(c.target.dataset.increment),E=t.get(C.items[F]);a(O(E)),u(F)},O=c=>{let F=t.get(c.items[0]),E=t.get(F.items[0]),P=t.get(E.body[0]);if(P.type==="Video"&&Ie(P),c.thumbnail.length>0)return D(t.get(c.thumbnail[0].id),"300,");if(P.type==="Image")return D(P,"300,")};return T.createElement(L,null,T.createElement(H,{href:W,tabIndex:0,onFocus:B,onBlur:G,onMouseEnter:B,onMouseLeave:G,ref:r},T.createElement(se,{caption:$(e.label),description:$(e.summary),image:g,video:p,isFocused:i}),T.createElement(pe,{manifest:C,activeCanvas:l,handleActiveCanvas:Se,isFocused:i})))},fe=qe;var ge=n("div",{position:"relative",display:"flex",flexDirection:"row",[`> ${L}`]:{marginRight:"$4","&:last-child":{marginRight:"0"}}});import m from"react";var w=n("div",{position:"absolute",background:"black",borderRadius:"3px",opacity:"0",transition:"$all"}),y=n("div",{position:"absolute",display:"flex",flexDirection:"column",width:"$4",height:"$4",borderRadius:"100%",backgroundColor:"white",justifyContent:"center",textAlign:"center",alignItems:"center",boxShadow:"none",transform:"none",transition:"$all",svg:{display:"flex",width:"$3",height:"$3",fill:"$primary",stroke:"$primary",color:"$primary",transition:"$all"}}),he=n("button",{position:"absolute",height:"100%",zIndex:"1",border:"none",cursor:"pointer",background:"transparent",["&:hover"]:{[`> ${w}`]:{opacity:1},[`> ${y}`]:{boxShadow:"3px 3px 11px #0003",svg:{fill:"$accent",stroke:"$accent",color:"$accent"}}},variants:{direction:{next:{left:"unset",right:"0",[`> ${w}`]:{left:"unset",right:"0",top:"0",background:"linear-gradient(270deg, rgba(0,0,0,0.7) 38.2%, rgba(0,0,0,0) 98%)"},[`> ${y}`]:{right:"calc(-$4 / 2)",marginTop:"calc(-$4 / 2)"},[`&:hover > ${y}`]:{marginRight:"$1"}},previous:{left:"0",right:"unset",[`> ${w}`]:{left:"0",right:"unset",top:"0",background:"linear-gradient(90deg, rgba(0,0,0,0.7) 38.2%, rgba(0,0,0,0) 98%)"},[`> ${y}`]:{left:"calc(-$4 / 2)",marginTop:"calc(-$4 / 2)"},[`&:hover > ${y}`]:{marginLeft:"$1"}}}}});var Je=()=>m.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},m.createElement("title",null,"Arrow Back"),m.createElement("path",{fill:"none",stroke:"currentColor",strokeMiterlimit:"10",strokeWidth:"70",d:"M244 400L100 256l144-144M120 256h292"})),Ke=()=>m.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},m.createElement("title",null,"Arrow Forward"),m.createElement("path",{fill:"none",stroke:"currentColor",strokeMiterlimit:"10",strokeWidth:"70",d:"M268 112l144 144-144 144M392 256H100"})),Qe=({label:e,increment:o,handleControl:t,height:r})=>{let i=r*.382;return m.createElement(he,{"aria-label":e,direction:e,onClick:()=>t(o),value:e,style:{height:`${r}px`,width:`${i}px`}},m.createElement(w,{style:{height:`${r}px`,width:`${i}px`}}),m.createElement(y,null,e==="next"&&m.createElement(Ke,null),e==="previous"&&m.createElement(Je,null)))},j=Qe;var Ze=e=>{let[o,t]=Ce({width:0,height:0});return S.useEffect(()=>{if(e.current){let{current:r}=e,i=r.getBoundingClientRect(),{width:s,height:l}=i;t({width:Math.round(s),height:Math.round(l)})}},[]),o},et=({items:e})=>{let[o,t]=Ce([0,1,2,3,4]),r=Xe(null),i=Ze(r),s=a=>{t(o.map(p=>p+a))},l=Q*1.618*4,g=(i.width-l)/5;return S.createElement(ge,{ref:r},S.createElement(j,{increment:-1,label:"previous",handleControl:s,height:g}),S.createElement(j,{increment:1,label:"next",handleControl:s,height:g}),e.filter((a,p)=>{if(o.includes(p))return a}).map(a=>S.createElement(fe,{item:a,key:a.id})))},xe=et;import z from"react";var ve=n("div",{display:"flex",flexDirection:"column",paddingBottom:"$4",margin:"0",color:"$primary"}),ye=n("span",{fontSize:"$5",fontWeight:"800",a:{color:"$accent",textDecoration:"none"}}),$e=n("span",{fontSize:"$3",marginTop:"$2"});var tt=({label:e,summary:o,homepage:t=null})=>{let r="";t&&t.length>0&&(r=t[0].id);let i=$(o);return z.createElement(ve,null,z.createElement(ye,null,z.createElement("a",{href:r},$(e))),i&&z.createElement($e,null,i))},be=tt;var nt=e=>f.createElement(J,null,f.createElement(it,x({},e))),it=({collectionId:e})=>{let o=A(),{vault:t}=o,[r,i]=rt();return ot(()=>{t.loadCollection(e).then(s=>i(s)).catch(s=>{console.error(`Collection failed to load: ${s}`)}).finally(()=>{})},[]),!r||!r.items?(console.log(`The IIIF Collection ${e} failed to load.`),f.createElement(f.Fragment,null)):r.items.length===0?(console.log(`The IIIF collection ${e} does not contain items.`),f.createElement(f.Fragment,null)):f.createElement(st,null,f.createElement(be,{label:r.label,summary:r.summary,homepage:r.homepage}),f.createElement(xe,{items:r.items}))},st=n("div",{padding:"$4 0"}),vo=nt;export{vo as default};
+var Ae=Object.defineProperty,Me=Object.defineProperties;var De=Object.getOwnPropertyDescriptors;var X=Object.getOwnPropertySymbols;var Le=Object.prototype.hasOwnProperty,Ee=Object.prototype.propertyIsEnumerable;var Z=(e,t,o)=>t in e?Ae(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,v=(e,t)=>{for(var o in t||(t={}))Le.call(t,o)&&Z(e,o,t[o]);if(X)for(var o of X(t))Ee.call(t,o)&&Z(e,o,t[o]);return e},ee=(e,t)=>Me(e,De(t));import f,{useEffect as it,useState as st}from"react";import I,{useReducer as Te}from"react";import{Vault as ze}from"@iiif/vault";var G={isLoaded:!1,vault:new ze},te=I.createContext(G),Ne=I.createContext(G);function He(e,t){switch(t.type){case"updateIsLoaded":return ee(v({},e),{isLoaded:t.isLoaded});default:throw new Error(`Unhandled action type: ${t.type}`)}}var oe=({initialState:e=G,children:t})=>{let[o,r]=Te(He,e);return I.createElement(te.Provider,{value:o},I.createElement(Ne.Provider,{value:r},t))};function A(){let e=I.useContext(te);if(e===void 0)throw new Error("useViewerState must be used within a ViewerProvider");return e}import F,{useEffect as et,useState as V,useRef as tt}from"react";import H,{useEffect as U,useState as w,useRef as Qe}from"react";import h,{useEffect as me,useRef as _e,useState as Ue}from"react";import Ye from"clsx";import{createStitches as Ve}from"@stitches/react";var d=e=>1.618**e,ne=19,re={1:"0.382rem",2:"0.618rem",3:"1rem",4:"1.618rem",5:`calc(1rem * ${d(2)})`,6:`calc(1rem * ${d(3)})`,7:`calc(1rem * ${d(4)})`,8:`calc(1rem * ${d(5)})`,9:`calc(1rem * ${d(6)})`,10:`calc(1rem * ${d(7)})`,11:`calc(1rem * ${d(8)})`,12:`calc(1rem * ${d(9)})`},je={colors:{primary:"#1a1d1e",primaryMuted:"#26292b",primaryAlt:"#151718",accent:"#006adc",accentMuted:"#5eb0ef",accentAlt:"#00254d",secondary:"#FFFFFF",secondaryMuted:"#e6e8eb",secondaryAlt:"#c1c8cd"},fonts:{sans:"'Inter', Arial, sans-serif",display:"'Inter', Arial, sans-serif"},fontSizes:{1:"0.611rem",2:"0.722rem",3:"0.833rem",4:"1rem",5:"1.177rem",6:"1.318rem",7:`calc(1rem * ${d(1)})`,8:`calc(1rem * ${d(2)})`,9:`calc(1rem * ${d(3)})`},sizes:v({},re),space:v({},re),transitions:{all:"all 250ms cubic-bezier(0.16, 1, 0.3, 1)",load:"all 1.25s cubic-bezier(0.16, 1, 0.3, 1)"}},Be={xxs:"(max-width: 349px)",xs:"(max-width: 575px)",sm:"(max-width: 767px)",md:"(max-width: 991px)",xl:"(max-width: 1199px)",lg:"(min-width: 1200px)"},{styled:n,css:gt,keyframes:ht,createTheme:xt}=Ve({theme:je,media:Be});var M=n("figure",{display:"flex",flexDirection:"column",margin:"0 0 $2",flexGrow:"0",flexShrink:"0",borderRadius:"3px",transition:"$all",figcaption:{display:"flex",flexDirection:"column",padding:"$2 0",color:"$primary",transition:"$all"},variants:{isFocused:{true:{margin:"-$2 -$2 0",figcaption:{padding:"$2",color:"$accent"}}}}}),ie=n("img",{position:"relative",display:"flex",flexDirection:"column",objectFit:"cover",zIndex:"1",width:"100%",opacity:0,transition:"$load",["&.loaded"]:{opacity:1}}),D=n("span",{display:"flex",position:"relative",backgroundColor:"$secondaryAlt",width:"100%",height:"100%",overflow:"hidden",borderRadius:"3px",boxShadow:"none",transition:"$all"}),se=n("span",{fontSize:"$3",fontWeight:"700"}),le=n("span",{fontSize:"$1",marginTop:"$1",color:"$primary"});import*as ue from"@radix-ui/react-aspect-ratio";import L,{useEffect as Ge,useRef as We}from"react";import*as ce from"@radix-ui/react-aspect-ratio";var ae=n("div",{position:"absolute",zIndex:"2",left:"0",top:"0",width:"100%",opacity:"0",transition:"$load",backgroundColor:"$primary",video:{width:"100%",height:"100%",objectFit:"cover"},variants:{isFocused:{true:{opacity:"1",left:"-$2",top:"-$2",width:"calc(100% + (0.618rem * 2))"}}}});var Oe=({resource:e,isFocused:t})=>{let o=We();Ge(()=>r(),[t,e]);let r=()=>{let i=o.current;i.currentTime=262,i.play(),setTimeout(()=>{i.currentTime=262},3e4)};return L.createElement(ae,{isFocused:t},L.createElement(ce.Root,{ratio:1/1},L.createElement("video",{loop:!0,muted:!0,ref:o,onPause:r},L.createElement("source",{src:"https://upload.wikimedia.org/wikipedia/commons/3/31/New_York_1911.webm",type:"video/mp4"}))))},de=Oe;var qe=({caption:e,description:t,image:o,isFocused:r,video:i})=>{let[s,l]=Ue(!1),a=_e(null);return me(()=>{a.current&&a.current.complete&&l(!0)},[s]),me(()=>{l(!1)},[o]),h.createElement(M,{isFocused:r},h.createElement(ue.Root,{ratio:1/1},h.createElement(D,null,i&&h.createElement(de,{resource:i,isFocused:r}),o&&h.createElement(ie,{src:o,ref:a,onLoad:()=>l(!0),className:Ye("source",s&&"loaded")}))),h.createElement("figcaption",null,h.createElement(se,null,e),t&&h.createElement(le,null,t)))},pe=qe;var $=(e,t="en")=>{if(!e)return null;if(typeof e=="string")return[e];if(!e[t]){let o=Object.getOwnPropertyNames(e);if(o.length>0)return e[o[0]]}return e[t]};var E=(e,t="600,",o="full")=>{Array.isArray(e)&&(e=e[0]);let r=e.id;if(!e.service)return e.id;if(!Array.isArray(e.service)){if(e.service["@id"])return`${e.service["@id"]}/${o}/${t}/0/default.jpg`;if(e.service.id)return`${e.service.id}/${o}/${t}/0/default.jpg`}return e.service["@id"]?`${e.service["@id"]}/${o}/${t}/0/default.jpg`:`${e.service[0].id}/${o}/${t}/0/default.jpg`};var W=n("a",{color:"black",textDecoration:"none"}),T=n("div",{position:"relative",width:"calc(100% / 4)",zIndex:"0",borderRadius:"3px",[`> ${W}:hover`]:{[`${M}`]:{boxShadow:"3px 3px 11px #0003"},[`${D}`]:{borderBottomLeftRadius:"0",borderBottomRightRadius:"0"}}});import p,{useEffect as Je,useState as Ce}from"react";var fe=n("div",{position:"absolute",zIndex:"2",left:"-$2",top:"-$2",width:"calc(100% + (0.618rem * 2))",opacity:"0",variants:{isFocused:{true:{opacity:"1"}}}}),ge=n("div",{width:"100%",height:"100%",display:"flex",flexDirection:"column",justifyContent:"flex-end",zIndex:"1"}),he=n("div",{display:"flex",justifyContent:"center",padding:"$2 $2 0",background:"linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)",cursor:"default",button:{width:"$4",height:"$4",display:"flex",flexDirection:"column",textAlign:"center",justifyContent:"center",alignItems:"center",borderRadious:"100%",backgroundColor:"transparent",border:"none",cursor:"pointer","&:disabled":{opacity:"0.2"},svg:{width:"100%",fill:"$secondary",stroke:"$secondary",color:"$secondary"}}}),xe=n("div",{display:"flex",justifyContent:"center",backgroundColor:"rgba(0,0,0,0.7)",color:"$secondaryAlt",fontSize:"$1",padding:"$1",cursor:"default"});import*as ve from"@radix-ui/react-aspect-ratio";import O from"react";var z=()=>O.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},O.createElement("title",null,"Next"),O.createElement("path",{fill:"none",stroke:"currentColor",strokeMiterlimit:"10",strokeWidth:"70",d:"M268 112l144 144-144 144M392 256H100"}));import _ from"react";var N=()=>_.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},_.createElement("title",null,"Previous"),_.createElement("path",{fill:"none",stroke:"currentColor",strokeMiterlimit:"10",strokeWidth:"70",d:"M244 400L100 256l144-144M120 256h292"}));var Ke=({activeCanvas:e,handleActiveCanvas:t,isFocused:o,manifest:r})=>{let[i,s]=Ce(!1),[l,a]=Ce(!1),x=e+1,m=0;return r&&(m=r.items.length),Je(()=>{x<=1?s(!1):s(!0),x>=m?a(!1):a(!0)},[e,r]),p.createElement(fe,{isFocused:o},p.createElement(ve.Root,{ratio:1/1},r&&p.createElement(ge,null,p.createElement(he,{onClick:C=>C.preventDefault()},p.createElement("button",{onClick:()=>t(-1),disabled:!i},p.createElement(N,null)),p.createElement("button",{onClick:()=>t(1),disabled:!l},p.createElement(z,null))),p.createElement(xe,{onClick:C=>C.preventDefault()},x," of ",m))))},ye=Ke;var Xe=({item:e})=>{let t=A(),{vault:o}=t,r=Qe(null),[i,s]=w(!1),[l,a]=w(0),[x,m]=w(),[C,q]=w(),[u,g]=w();U(()=>{e.thumbnail&&m(E(o.get(e.thumbnail[0].id),"300,"))},[]),U(()=>{i&&setTimeout(()=>{u||o.loadCollection(e.id).then(c=>g(c)).catch(c=>{console.error(`Manifest failed to load: ${c}`)})},1e3)},[i]),U(()=>{if(!u)return;let c=o.get(u.items[l]);m(Q(c))},[u]);let b=()=>s(!0),J=()=>s(!1),K="";e.homepage&&(K=e.homepage[0].id);let ke=c=>{if(!u)return;let R=l+c,B=o.get(u.items[R]);m(Q(B)),a(R)},Q=c=>{let R=o.get(c.items[0]),B=o.get(R.items[0]),k=o.get(B.body[0]);if(k.type==="Video"&&q(k),c.thumbnail.length>0)return E(o.get(c.thumbnail[0].id),"300,");if(k.type==="Image")return E(k,"300,")};return H.createElement(T,null,H.createElement(W,{href:K,tabIndex:0,onFocus:b,onBlur:J,onMouseEnter:b,onMouseLeave:J,ref:r},H.createElement(pe,{caption:$(e.label),description:$(e.summary),image:x,video:C,isFocused:i}),H.createElement(ye,{manifest:u,activeCanvas:l,handleActiveCanvas:ke,isFocused:i})))},be=Xe;var $e=n("div",{position:"relative",display:"flex",flexDirection:"row",[`> ${T}`]:{marginRight:"$4","&:last-child":{marginRight:"0"}}});import P from"react";var S=n("div",{position:"absolute",background:"black",borderRadius:"3px",opacity:"0",transition:"$all"}),y=n("div",{position:"absolute",display:"flex",flexDirection:"column",width:"$4",height:"$4",borderRadius:"100%",backgroundColor:"white",justifyContent:"center",textAlign:"center",alignItems:"center",boxShadow:"none",transform:"none",transition:"$all",svg:{display:"flex",width:"$3",height:"$3",fill:"$primary",stroke:"$primary",color:"$primary",transition:"$all"}}),Ie=n("button",{position:"absolute",height:"100%",zIndex:"1",border:"none",cursor:"pointer",background:"transparent",["&:disabled"]:{opacity:"0"},["&:hover"]:{[`> ${S}`]:{opacity:1},[`> ${y}`]:{boxShadow:"3px 3px 11px #0003",svg:{fill:"$accent",stroke:"$accent",color:"$accent"}}},variants:{direction:{next:{left:"unset",right:"0",[`> ${S}`]:{left:"unset",right:"0",top:"0",background:"linear-gradient(270deg, rgba(0,0,0,0.7) 38.2%, rgba(0,0,0,0) 98%)"},[`> ${y}`]:{right:"calc(-$4 / 2)",marginTop:"calc(-$4 / 2)"},[`&:hover > ${y}`]:{marginRight:"$1"}},previous:{left:"0",right:"unset",[`> ${S}`]:{left:"0",right:"unset",top:"0",background:"linear-gradient(90deg, rgba(0,0,0,0.7) 38.2%, rgba(0,0,0,0) 98%)"},[`> ${y}`]:{left:"calc(-$4 / 2)",marginTop:"calc(-$4 / 2)"},[`&:hover > ${y}`]:{marginLeft:"$1"}}}}});var Ze=({disabled:e,label:t,increment:o,handleControl:r,height:i})=>{let s=i*.382;return P.createElement(Ie,{"aria-label":t,direction:t,onClick:()=>r(o),value:t,style:{height:`${i}px`,width:`${s}px`},disabled:e},P.createElement(S,{style:{height:`${i}px`,width:`${s}px`}}),P.createElement(y,null,t==="next"&&P.createElement(z,null),t==="previous"&&P.createElement(N,null)))},Y=Ze;var ot=e=>{let[t,o]=V({width:0,height:0});return F.useEffect(()=>{if(e.current){let{current:r}=e,i=r.getBoundingClientRect(),{width:s,height:l}=i;o({width:Math.round(s),height:Math.round(l)})}},[]),t},rt=({items:e})=>{let[t,o]=V([0,1,2,3,4]),[r,i]=V(!1),[s,l]=V(!1),a=tt(null),x=ot(a);et(()=>{!e||(t.includes(0)?i(!1):i(!0),t.includes(e.length-1)?l(!1):l(!0))},[t]);let m=g=>{o(t.map(b=>b+g))},C=ne*1.618*4,u=(x.width-C)/5;return F.createElement($e,{ref:a},F.createElement(Y,{increment:-1,label:"previous",handleControl:m,height:u,disabled:!r}),F.createElement(Y,{increment:1,label:"next",handleControl:m,height:u,disabled:!s}),e.filter((g,b)=>{if(t.includes(b))return g}).map(g=>F.createElement(be,{item:g,key:g.id})))},we=rt;import j from"react";var Se=n("div",{display:"flex",flexDirection:"column",paddingBottom:"$4",margin:"0",color:"$primary"}),Pe=n("span",{fontSize:"$5",fontWeight:"800",a:{color:"$accent",textDecoration:"none"}}),Fe=n("span",{fontSize:"$3",marginTop:"$2"});var nt=({label:e,summary:t,homepage:o=null})=>{let r="";o&&o.length>0&&(r=o[0].id);let i=$(t);return j.createElement(Se,null,j.createElement(Pe,null,j.createElement("a",{href:r},$(e))),i&&j.createElement(Fe,null,i))},Re=nt;var lt=e=>f.createElement(oe,null,f.createElement(at,v({},e))),at=({collectionId:e})=>{let t=A(),{vault:o}=t,[r,i]=st();return it(()=>{o.loadCollection(e).then(s=>i(s)).catch(s=>{console.error(`Collection failed to load: ${s}`)}).finally(()=>{})},[]),!r||!r.items?(console.log(`The IIIF Collection ${e} failed to load.`),f.createElement(f.Fragment,null)):r.items.length===0?(console.log(`The IIIF collection ${e} does not contain items.`),f.createElement(f.Fragment,null)):f.createElement(ct,null,f.createElement(Re,{label:r.label,summary:r.summary,homepage:r.homepage}),f.createElement(we,{items:r.items}))},ct=n("div",{padding:"$4 0"}),Ao=lt;export{Ao as default};
 //# sourceMappingURL=index.esm.js.map

package.json

 {
   "name": "@samvera/bloom-iiif",
-  "version": "0.0.3",
+  "version": "0.0.4-alpha.0",
   "description": "<img src=\"https://user-images.githubusercontent.com/7376450/160845852-39bf8942-1db4-41ee-881f-889ba2a4f61e.png\" class=\"bloom-screenshot\" alt=\"Bloom screenshot\"/>",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

README.md

 <img src="https://user-images.githubusercontent.com/7376450/160845852-39bf8942-1db4-41ee-881f-889ba2a4f61e.png" class="bloom-screenshot" alt="Bloom screenshot"/>
 
-### :construction: Under Development :construction:
-
-Bloom is still in alpha development. We do not recommend incorporating this into projects yet. You can test it out locally with your IIIF collections.
-
 # Bloom IIIF
@@ -11,2 +7,4 @@
 
+_Bloom is still in alpha development. We do not recommend incorporating this into projects yet. You can test it out locally with your IIIF collections._
+
 ---
@@ -16,2 +14,4 @@
 
+- [Installation](#installation)
+- [Basic Usage](#basic-usage)
 - [Collection Anatomy](#collection-anatomy)
@@ -22,2 +22,36 @@ - [Development](#development)
 
+<h2 id="installation">Installation</h2>
+
+Install the component from your command line using `npm install`,
+
+```shell
+npm install @samvera/bloom-iiif
+```
+
+**OR** if you prefer Yarn, use `yarn add`.
+
+```shell
+yarn add @samvera/bloom-iiif
+```
+
+---
+
+<h2 id="basic-usage">Basic Usage</h2>
+
+Add the BloomIIIF component to your `jsx` or `tsx` code.
+
+```jsx
+import BloomIIIF from "@samvera/bloom-iiif";
+```
+
+Minimal usage providing the `<BloomIIIF/>` component with an external manifest.
+
+```jsx
+const collectionId = `https://raw.githubusercontent.com/samvera-labs/bloom-iiif/main/public/fixtures/iiif/collection/masks-of-antonio-fava.json`;
+
+return <BloomIIIF collectionId={collectionId} />;
+```
+
+---
+
 <h2 id="collection-anatomy">Collection Anatomy</h2>
@@ -66,3 +100,3 @@
 
-The [**items** array](https://github.com/samvera-labs/bloom-iiif/blob/main/public/fixtures/iiif/collection/masks-of-antonio-fava.json#L21-L292) is mapped to the slider/carousel with each item render an HTML `<figure>`
+The [**items** array](https://github.com/samvera-labs/bloom-iiif/blob/main/public/fixtures/iiif/collection/masks-of-antonio-fava.json#L21-L292) is mapped to the slider/carousel with each item render as an HTML `<figure>`
 
@@ -109,7 +143,7 @@ ```json
 ```json
-"label": { "none": ["Pantalone classico"] },
+"label": { "none": ["Pantalone classico"] }
 ```
 
 ```json
-"summary": { "none": ["Image"] },
+"summary": { "none": ["Image"] }
 ```
@@ -137,3 +171,3 @@
   }
-],
+]
 ```
@@ -140,0 +174,0 @@

No alert changes

Improved metrics

Total package byte prevSize

117140

increased by4.99%

Lines of code

101

increased by4.12%

Number of lines in readme file

223

increased by17.99%

No dependency changes