@rive-app/react-canvas 4.30.0 → 4.31.0

package/dist/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0});var observer,React=require("react"),canvas=require("@rive-app/canvas");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=/*#__PURE__*/_interopDefaultLegacy(React);function useDevicePixelRatio(e){var t=e||getDevicePixelRatio(),n=React.useState(t),a=n[0],r=n[1];return React.useEffect(function(){if("u">typeof window&&"matchMedia"in window){var t=function(){r(e||getDevicePixelRatio())},n=window.matchMedia("screen and (resolution: "+a+"dppx)");return n.hasOwnProperty("addEventListener")?n.addEventListener("change",t):n.addListener(t),function(){n.hasOwnProperty("removeEventListener")?n.removeEventListener("change",t):n.removeListener(t)}}},[a,e]),a}function getDevicePixelRatio(){return Math.min(Math.max(1,"u">typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1),3)}var FakeResizeObserver=/*#__PURE__*/function(){function e(){}var t=e.prototype;return t.observe=function(){},t.unobserve=function(){},t.disconnect=function(){},e}();function throttle(e,t){var n=0;return function(){for(var a=this,r=arguments.length,u=Array(r),i=0;i<r;i++)u[i]=arguments[i];clearTimeout(n),n=window.setTimeout(function(){return e.apply(a,u)},t)}}var MyResizeObserver=globalThis.ResizeObserver||FakeResizeObserver,hasResizeObserver=void 0!==globalThis.ResizeObserver,useResizeObserver=hasResizeObserver,useWindowListener=!useResizeObserver;function useSize(e,t){void 0===t&&(t=!0);var n=React.useState({width:0,height:0}),a=n[0],r=n[1];React.useEffect(function(){if("u">typeof window&&t){var e=function(){r({width:window.innerWidth,height:window.innerHeight})};return useWindowListener&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var u=React.useRef(new MyResizeObserver(throttle(function(e){useResizeObserver&&r({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},0)));return React.useEffect(function(){var n=u.current;if(!t)return void n.disconnect();var a=e.current;return e.current&&useResizeObserver&&n.observe(e.current),function(){n.disconnect(),a&&useResizeObserver&&n.unobserve(a)}},[e,u]),a}var defaultOptions={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function getOptions(e){return Object.assign({},defaultOptions,e)}function useResizeCanvas(e){var t=e.riveLoaded,n=void 0!==t&&t,a=e.canvasElem,r=e.containerRef,u=e.options,i=e.onCanvasHasResized,o=e.artboardBounds,s=getOptions(void 0===u?{}:u),c=React.useState({height:0,width:0}),l=c[0],f=l.height,d=l.width,v=c[1],p=React.useState({height:0,width:0}),b=p[0],h=b.height,R=b.width,g=p[1],w=React.useState(!0),y=w[0],m=w[1],V=s.fitCanvasToArtboardHeight,I=s.shouldResizeCanvasToContainer,C=s.useDevicePixelRatio,M=s.customDevicePixelRatio,O=useSize(r,I),x=useDevicePixelRatio(M),E=null!=o?o:{},P=E.maxX,_=E.maxY,k=React.useCallback(function(){var e,t,n,a,u=null!=(e=null==(n=r.current)?void 0:n.clientWidth)?e:0,i=null!=(t=null==(a=r.current)?void 0:a.clientHeight)?t:0;return V&&o?{width:u,height:o.maxY/o.maxX*u}:{width:u,height:i}},[r,V,P,_]);React.useEffect(function(){if(I&&r.current&&n){var e=k(),t=e.width,u=e.height,o=!1;if(a){var c=t!==d||u!==f;if(s.fitCanvasToArtboardHeight&&c&&(r.current.style.height=u+"px",o=!0),s.useDevicePixelRatio){var l=t*x!==R||u*x!==h;if(c||l){var p=x*t,b=x*u;a.width=p,a.height=b,a.style.width=t+"px",a.style.height=u+"px",g({width:p,height:b}),o=!0}}else c&&(a.width=t,a.height=u,g({width:t,height:u}),o=!0);v({width:t,height:u})}i&&(y||o)&&i&&i(),y&&m(!1)}},[a,r,O,x,k,y,m,h,R,f,d,i,I,V,C,n]),React.useEffect(function(){g({width:0,height:0})},[a])}var FakeIntersectionObserver=/*#__PURE__*/function(){function e(){}var t=e.prototype;return t.observe=function(){},t.unobserve=function(){},t.disconnect=function(){},e}(),MyIntersectionObserver=globalThis.IntersectionObserver||FakeIntersectionObserver,ElementObserver=/*#__PURE__*/function(){function e(){var e=this;this.elementsMap=new Map,this.onObserved=function(t){t.forEach(function(t){var n=e.elementsMap.get(t.target);n&&n(t)})},this.observer=new MyIntersectionObserver(this.onObserved)}var t=e.prototype;return t.registerCallback=function(e,t){this.observer.observe(e),this.elementsMap.set(e,t)},t.removeCallback=function(e){this.observer.unobserve(e),this.elementsMap.delete(e)},e}(),getObserver=function(){return observer||(observer=new ElementObserver),observer};function useIntersectionObserver(){return{observe:React.useCallback(function(e,t){getObserver().registerCallback(e,t)},[]),unobserve:React.useCallback(function(e){getObserver().removeCallback(e)},[])}}function _extends$1(){return(_extends$1=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function _object_without_properties_loose$1(e,t){if(null==e)return{};var n,a,r={},u=Object.getOwnPropertyNames(e);for(a=0;a<u.length;a++)n=u[a],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n]);return r}function RiveComponent(e){var t=e.setContainerRef,n=e.setCanvasRef,a=e.className,r=void 0===a?"":a,u=e.style,i=e.children,o=_object_without_properties_loose$1(e,["setContainerRef","setCanvasRef","className","style","children"]),s=_extends$1({width:"100%",height:"100%"},u);return /*#__PURE__*/React__default.default.createElement("div",_extends$1({ref:t,className:r},!r&&{style:s}),/*#__PURE__*/React__default.default.createElement("canvas",_extends$1({ref:n,style:{verticalAlign:"top",width:0,height:0}},o),i))}function useRive(e,t){void 0===t&&(t={});var n=React.useState(null),a=n[0],r=n[1],u=React.useRef(null),i=React.useRef(null),o=React.useState(null),s=o[0],c=o[1],l=!!e,f=getOptions(t),d=useDevicePixelRatio(),v=React.useCallback(function(){if(s){if(s.layout&&s.layout.fit===canvas.Fit.Layout&&a){var e=d*s.layout.layoutScaleFactor;s.devicePixelRatioUsed=d,s.artboardWidth=(null==a?void 0:a.width)/e,s.artboardHeight=(null==a?void 0:a.height)/e}s.startRendering(),s.resizeToCanvas()}},[s,d]);useResizeCanvas({riveLoaded:!!s,canvasElem:a,containerRef:u,options:f,onCanvasHasResized:v,artboardBounds:null==s?void 0:s.bounds});var p=React.useCallback(function(e){null===e&&a&&(a.height=0,a.width=0),r(e)},[]);React.useEffect(function(){if(a&&e){var t,n=null!=s;if(null==s){var r=f.useOffscreenRenderer,u=e.onRiveReady,o=_object_without_properties_loose$1(e,["onRiveReady"]);t=new canvas.Rive(_extends$1({useOffscreenRenderer:r},o,{canvas:a})),null!=i.current&&i.current.cleanup(),i.current=t,t.on(canvas.EventType.Load,function(){n=!0,u&&u(t),a?c(t):t.cleanup()})}return function(){n||null==t||t.cleanup()}}},[a,l,s]);var b=React.useCallback(function(e){u.current=e},[]),h=useIntersectionObserver(),R=h.observe,g=h.unobserve;React.useEffect(function(){var e,t=!1,n=function(){if(a&&t){var e=a.getBoundingClientRect();e.width>0&&e.height>0&&e.top<(window.innerHeight||document.documentElement.clientHeight)&&e.bottom>0&&e.left<(window.innerWidth||document.documentElement.clientWidth)&&e.right>0&&(null==s||s.startRendering(),t=!1)}};return a&&!1!==f.shouldUseIntersectionObserver&&R(a,function(a){a.isIntersecting?s&&s.startRendering():s&&s.stopRendering(),t=!a.isIntersecting,clearTimeout(e),a.isIntersecting||0!==a.boundingClientRect.width||(e=setTimeout(n,10))}),function(){a&&g(a)}},[R,g,s,a,f.shouldUseIntersectionObserver]),React.useEffect(function(){return function(){s&&(s.cleanup(),c(null))}},[s,a]),React.useEffect(function(){return function(){null!=i.current&&i.current.cleanup()}},[]);var w=null==e?void 0:e.animations;React.useEffect(function(){s&&w&&(s.isPlaying?(s.stop(s.animationNames),s.play(w)):s.isPaused&&(s.stop(s.animationNames),s.pause(w)))},[w,s]);var y=React.useCallback(function(e){return /*#__PURE__*/React__default.default.createElement(RiveComponent,_extends$1({setContainerRef:b,setCanvasRef:p},e))},[p,b]);return{canvas:a,container:u.current,setCanvasRef:p,setContainerRef:b,rive:s,RiveComponent:y}}function _object_without_properties_loose(e,t){if(null==e)return{};var n,a,r={},u=Object.getOwnPropertyNames(e);for(a=0;a<u.length;a++)n=u[a],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n]);return r}var Rive=function(e){var t=e.src,n=e.artboard,a=e.animations,r=e.stateMachines,u=e.layout,i=e.useOffscreenRenderer,o=e.shouldDisableRiveListeners,s=e.shouldResizeCanvasToContainer,c=e.automaticallyHandleEvents,l=e.children,f=_object_without_properties_loose(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),d=useRive({src:t,artboard:n,animations:a,layout:u,stateMachines:r,autoplay:!0,shouldDisableRiveListeners:void 0!==o&&o,automaticallyHandleEvents:void 0!==c&&c},{useOffscreenRenderer:void 0===i||i,shouldResizeCanvasToContainer:void 0===s||s}).RiveComponent;return /*#__PURE__*/React__default.default.createElement(d,f,l)};function useStateMachineInput(e,t,n,a){var r=React.useState(null),u=r[0],i=r[1];return React.useEffect(function(){var r=function(){if(e&&t&&n||i(null),e&&t&&n){var r=e.stateMachineInputs(t);if(r){var u=r.find(function(e){return e.name===n});void 0!==a&&u&&(u.value=a),i(u||null)}}else i(null)};r(),e&&e.on(canvas.EventType.Load,function(){r()})},[e]),u}function useViewModel(e,t){var n=null!=t?t:{},a=n.name,r=n.useDefault,u=React.useState(null),i=u[0],o=u[1];return React.useEffect(function(){var t=function(){if(!e)return void o(null);var t=null;o(t=null!=a?(null==e.viewModelByName?void 0:e.viewModelByName.call(e,a))||null:e.defaultViewModel()||null)};return t(),e&&e.on(canvas.EventType.Load,t),function(){e&&e.off(canvas.EventType.Load,t)}},[e,a,void 0!==r&&r]),i}var pendingBinds=new WeakSet;function scheduleBind(e){pendingBinds.has(e)||(pendingBinds.add(e),queueMicrotask(function(){pendingBinds.delete(e),e.bind()}))}function resolveViewModelInstance(e,t){var n=t.name,a=t.useNew,r=t.instance;return void 0!==r?r:e?null!=n?e.instanceByName(n)||null:a?(null==e.instance?void 0:e.instance.call(e))||null:(null==e.defaultInstance?void 0:e.defaultInstance.call(e))||null:null}function useViewModelInstance(e,t){var n=null!=t?t:{},a=n.name,r=n.useDefault,u=n.useNew,i=void 0!==u&&u,o=n.rive,s=React.useState(null),c=s[0],l=s[1];return React.useEffect(function(){if(!e)return void l(null);var t=resolveViewModelInstance(e,{name:a,useNew:i});l(t),o&&t&&o.viewModelInstance!==t&&(o.setViewModelInstance(t),scheduleBind(o))},[e,a,void 0!==r&&r,i,o]),c}function useGlobalViewModelInstance(e,t,n){var a=null!=n?n:{},r=a.instanceName,u=a.useNew,i=void 0!==u&&u,o=a.instance,s=a.rive,c=React.useState(null),l=c[0],f=c[1];return React.useEffect(function(){var n=resolveViewModelInstance(e,{name:r,useNew:i,instance:o});f(n),s&&t&&n&&s.setGlobalViewModelInstance(t,n)&&scheduleBind(s)},[e,t,r,i,o,s]),l}function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function useViewModelInstanceProperty(e,t,n){var a=React.useState(null),r=a[0],u=a[1],i=React.useState(n.defaultValue),o=i[0],s=i[1],c=React.useState(null),l=c[0],f=c[1],d=React.useRef(null),v=React.useRef(e),p=React.useRef(n);React.useEffect(function(){p.current=n},[n]);var b=React.useCallback(function(){var e=d.current,t=v.current,n=p.current;if(!e||!t)return u(null),s(n.defaultValue),f(null),function(){};var a=n.getProperty(e,t);if(a){u(a),s(n.getValue(a)),n.getExtendedData&&f(n.getExtendedData(a));var r=function(){s(n.getValue(a)),n.getExtendedData&&f(n.getExtendedData(a)),n.onPropertyEvent&&n.onPropertyEvent()};return a.on(r),function(){a.off(r)}}return function(){}},[]);React.useEffect(function(){return d.current=t,v.current=e,b()},[t,e,b]);var h=React.useCallback(function(e){if(r&&d.current===t)try{e(r),p.current.getExtendedData&&f(p.current.getExtendedData(r));return}catch(e){}if(d.current)try{var n=p.current.getProperty(d.current,v.current);n&&(u(n),e(n),p.current.getExtendedData&&f(p.current.getExtendedData(n)))}catch(e){}},[r,t]),R=React.useMemo(function(){return p.current.buildPropertyOperations(h)},[h]),g=_extends({value:o},R);return n.getExtendedData&&(g.extendedData=l),g}function useViewModelInstanceNumber(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.number(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,setValue:n.setValue}}function useViewModelInstanceString(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.string(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,setValue:n.setValue}}function useViewModelInstanceBoolean(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.boolean(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,setValue:n.setValue}}function useViewModelInstanceColor(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.color(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})},setRgb:function(t,n,a){e(function(e){e.rgb(t,n,a)})},setRgba:function(t,n,a,r){e(function(e){e.rgba(t,n,a,r)})},setAlpha:function(t){e(function(e){e.alpha(t)})},setOpacity:function(t){e(function(e){e.opacity(t)})}}},[])});return{value:n.value,setValue:n.setValue,setRgb:n.setRgb,setRgba:n.setRgba,setAlpha:n.setAlpha,setOpacity:n.setOpacity}}function useViewModelInstanceEnum(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.enum(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,getExtendedData:React.useCallback(function(e){return e.values},[]),buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,values:n.extendedData||[],setValue:n.setValue}}function useViewModelInstanceTrigger(e,t,n){var a=(null!=n?n:{}).onTrigger;return{trigger:useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.trigger(t)},[]),getValue:React.useCallback(function(){},[]),defaultValue:null,onPropertyEvent:a,buildPropertyOperations:React.useCallback(function(e){return{trigger:function(){e(function(e){e.trigger()})}}},[])}).trigger}}function useViewModelInstanceImage(e,t){return{setValue:useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.image(t)},[]),getValue:React.useCallback(function(){},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])}).setValue}}function useViewModelInstanceList(e,t){var n,a=React.useState(0)[1],r=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.list(t)},[]),getValue:React.useCallback(function(e){return e.length},[]),defaultValue:null,onPropertyEvent:function(){a(function(e){return e+1})},buildPropertyOperations:React.useCallback(function(e){return{addInstance:function(t){e(function(e){return e.addInstance(t)})},addInstanceAt:function(t,n){var a=!1;return e(function(e){a=e.addInstanceAt(t,n)}),a},removeInstance:function(t){e(function(e){return e.removeInstance(t)})},removeInstanceAt:function(t){e(function(e){return e.removeInstanceAt(t)})},getInstanceAt:function(t){var n=null;return e(function(e){n=e.instanceAt(t)}),n},swap:function(t,n){e(function(e){return e.swap(t,n)})}}},[])});return{length:null!=(n=r.value)?n:0,addInstance:r.addInstance,addInstanceAt:r.addInstanceAt,removeInstance:r.removeInstance,removeInstanceAt:r.removeInstanceAt,getInstanceAt:r.getInstanceAt,swap:r.swap}}function asyncGeneratorStep(e,t,n,a,r,u,i){try{var o=e[u](i),s=o.value}catch(e){n(e);return}o.done?t(s):Promise.resolve(s).then(a,r)}function _async_to_generator(e){return function(){var t=this,n=arguments;return new Promise(function(a,r){var u=e.apply(t,n);function i(e){asyncGeneratorStep(u,a,r,i,o,"next",e)}function o(e){asyncGeneratorStep(u,a,r,i,o,"throw",e)}i(void 0)})}}function _ts_generator(e,t){var n,a,r,u={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype),o=Object.defineProperty;return o(i,"next",{value:s(0)}),o(i,"throw",{value:s(1)}),o(i,"return",{value:s(2)}),"function"==typeof Symbol&&o(i,Symbol.iterator,{value:function(){return this}}),i;function s(o){return function(s){var c=[o,s];if(n)throw TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(u=0)),u;)try{if(n=1,a&&(r=2&c[0]?a.return:c[0]?a.throw||((r=a.return)&&r.call(a),0):a.next)&&!(r=r.call(a,c[1])).done)return r;switch(a=0,r&&(c=[2&c[0],r.value]),c[0]){case 0:case 1:r=c;break;case 4:return u.label++,{value:c[1],done:!1};case 5:u.label++,a=c[1],c=[0];continue;case 7:c=u.ops.pop(),u.trys.pop();continue;default:if(!(r=(r=u.trys).length>0&&r[r.length-1])&&(6===c[0]||2===c[0])){u=0;continue}if(3===c[0]&&(!r||c[1]>r[0]&&c[1]<r[3])){u.label=c[1];break}if(6===c[0]&&u.label<r[1]){u.label=r[1],r=c;break}if(r&&u.label<r[2]){u.label=r[2],u.ops.push(c);break}r[2]&&u.ops.pop(),u.trys.pop();continue}c=t.call(e,u)}catch(e){c=[6,e],a=0}finally{n=r=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}}}function useRiveFile(e){var t=React.useState(null),n=t[0],a=t[1],r=React.useState("idle"),u=r[0],i=r[1];return React.useEffect(function(){var t=null;return _async_to_generator(function(){return _ts_generator(this,function(n){try{i("loading"),(t=new canvas.RiveFile(e)).init(),t.on(canvas.EventType.Load,function(){null==t||t.getInstance(),a(t),i("success")}),t.on(canvas.EventType.LoadError,function(){i("failed")}),a(t)}catch(e){console.error(e),i("failed")}return[2]})})(),function(){null==t||t.cleanup()}},[e.src,e.buffer]),{riveFile:n,status:u}}function useViewModelInstanceArtboard(e,t){return{setValue:useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.artboard(t)},[]),getValue:React.useCallback(function(){},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])}).setValue}}exports.default=Rive,exports.useGlobalViewModelInstance=useGlobalViewModelInstance,exports.useResizeCanvas=useResizeCanvas,exports.useRive=useRive,exports.useRiveFile=useRiveFile,exports.useStateMachineInput=useStateMachineInput,exports.useViewModel=useViewModel,exports.useViewModelInstance=useViewModelInstance,exports.useViewModelInstanceArtboard=useViewModelInstanceArtboard,exports.useViewModelInstanceBoolean=useViewModelInstanceBoolean,exports.useViewModelInstanceColor=useViewModelInstanceColor,exports.useViewModelInstanceEnum=useViewModelInstanceEnum,exports.useViewModelInstanceImage=useViewModelInstanceImage,exports.useViewModelInstanceList=useViewModelInstanceList,exports.useViewModelInstanceNumber=useViewModelInstanceNumber,exports.useViewModelInstanceString=useViewModelInstanceString,exports.useViewModelInstanceTrigger=useViewModelInstanceTrigger,Object.keys(canvas).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return canvas[e]}})});
+Object.defineProperty(exports,"__esModule",{value:!0});var observer,React=require("react"),canvas=require("@rive-app/canvas");function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=/*#__PURE__*/_interopDefaultLegacy(React);function useDevicePixelRatio(e){var t=e||getDevicePixelRatio(),n=React.useState(t),a=n[0],r=n[1];return React.useEffect(function(){if("u">typeof window&&"matchMedia"in window){var t=function(){r(e||getDevicePixelRatio())},n=window.matchMedia("screen and (resolution: "+a+"dppx)");return n.hasOwnProperty("addEventListener")?n.addEventListener("change",t):n.addListener(t),function(){n.hasOwnProperty("removeEventListener")?n.removeEventListener("change",t):n.removeListener(t)}}},[a,e]),a}function getDevicePixelRatio(){return Math.min(Math.max(1,"u">typeof window&&"number"==typeof window.devicePixelRatio?window.devicePixelRatio:1),3)}var FakeResizeObserver=/*#__PURE__*/function(){function e(){}var t=e.prototype;return t.observe=function(){},t.unobserve=function(){},t.disconnect=function(){},e}();function throttle(e,t){var n=0;return function(){for(var a=this,r=arguments.length,u=Array(r),i=0;i<r;i++)u[i]=arguments[i];clearTimeout(n),n=window.setTimeout(function(){return e.apply(a,u)},t)}}var MyResizeObserver=globalThis.ResizeObserver||FakeResizeObserver,hasResizeObserver=void 0!==globalThis.ResizeObserver,useResizeObserver=hasResizeObserver,useWindowListener=!useResizeObserver;function useSize(e,t){void 0===t&&(t=!0);var n=React.useState({width:0,height:0}),a=n[0],r=n[1];React.useEffect(function(){if("u">typeof window&&t){var e=function(){r({width:window.innerWidth,height:window.innerHeight})};return useWindowListener&&(e(),window.addEventListener("resize",e)),function(){return window.removeEventListener("resize",e)}}},[]);var u=React.useRef(new MyResizeObserver(throttle(function(e){useResizeObserver&&r({width:e[e.length-1].contentRect.width,height:e[e.length-1].contentRect.height})},0)));return React.useEffect(function(){var n=u.current;if(!t)return void n.disconnect();var a=e.current;return e.current&&useResizeObserver&&n.observe(e.current),function(){n.disconnect(),a&&useResizeObserver&&n.unobserve(a)}},[e,u]),a}var defaultOptions={useDevicePixelRatio:!0,fitCanvasToArtboardHeight:!1,useOffscreenRenderer:!0,shouldResizeCanvasToContainer:!0};function getOptions(e){return Object.assign({},defaultOptions,e)}function useResizeCanvas(e){var t=e.riveLoaded,n=void 0!==t&&t,a=e.canvasElem,r=e.containerRef,u=e.options,i=e.onCanvasHasResized,o=e.artboardBounds,s=getOptions(void 0===u?{}:u),c=React.useState({height:0,width:0}),l=c[0],f=l.height,d=l.width,v=c[1],p=React.useState({height:0,width:0}),b=p[0],R=b.height,h=b.width,g=p[1],w=React.useState(!0),y=w[0],V=w[1],I=s.fitCanvasToArtboardHeight,m=s.shouldResizeCanvasToContainer,M=s.useDevicePixelRatio,C=s.customDevicePixelRatio,O=useSize(r,m),x=useDevicePixelRatio(C),E=null!=o?o:{},P=E.maxX,k=E.maxY,_=React.useCallback(function(){var e,t,n,a,u=null!=(e=null==(n=r.current)?void 0:n.clientWidth)?e:0,i=null!=(t=null==(a=r.current)?void 0:a.clientHeight)?t:0;return I&&o?{width:u,height:o.maxY/o.maxX*u}:{width:u,height:i}},[r,I,P,k]);React.useEffect(function(){if(m&&r.current&&n){var e=_(),t=e.width,u=e.height,o=!1;if(a){var c=t!==d||u!==f;if(s.fitCanvasToArtboardHeight&&c&&(r.current.style.height=u+"px",o=!0),s.useDevicePixelRatio){var l=t*x!==h||u*x!==R;if(c||l){var p=x*t,b=x*u;a.width=p,a.height=b,a.style.width=t+"px",a.style.height=u+"px",g({width:p,height:b}),o=!0}}else c&&(a.width=t,a.height=u,g({width:t,height:u}),o=!0);v({width:t,height:u})}i&&(y||o)&&i&&i(),y&&V(!1)}},[a,r,O,x,_,y,V,R,h,f,d,i,m,I,M,n]),React.useEffect(function(){g({width:0,height:0})},[a])}var FakeIntersectionObserver=/*#__PURE__*/function(){function e(){}var t=e.prototype;return t.observe=function(){},t.unobserve=function(){},t.disconnect=function(){},e}(),MyIntersectionObserver=globalThis.IntersectionObserver||FakeIntersectionObserver,ElementObserver=/*#__PURE__*/function(){function e(){var e=this;this.elementsMap=new Map,this.onObserved=function(t){t.forEach(function(t){var n=e.elementsMap.get(t.target);n&&n(t)})},this.observer=new MyIntersectionObserver(this.onObserved)}var t=e.prototype;return t.registerCallback=function(e,t){this.observer.observe(e),this.elementsMap.set(e,t)},t.removeCallback=function(e){this.observer.unobserve(e),this.elementsMap.delete(e)},e}(),getObserver=function(){return observer||(observer=new ElementObserver),observer};function useIntersectionObserver(){return{observe:React.useCallback(function(e,t){getObserver().registerCallback(e,t)},[]),unobserve:React.useCallback(function(e){getObserver().removeCallback(e)},[])}}function _extends$1(){return(_extends$1=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function _object_without_properties_loose$1(e,t){if(null==e)return{};var n,a,r={},u=Object.getOwnPropertyNames(e);for(a=0;a<u.length;a++)n=u[a],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n]);return r}function RiveComponent(e){var t=e.setContainerRef,n=e.setCanvasRef,a=e.className,r=void 0===a?"":a,u=e.style,i=e.children,o=_object_without_properties_loose$1(e,["setContainerRef","setCanvasRef","className","style","children"]),s=_extends$1({width:"100%",height:"100%"},u);return /*#__PURE__*/React__default.default.createElement("div",_extends$1({ref:t,className:r},!r&&{style:s}),/*#__PURE__*/React__default.default.createElement("canvas",_extends$1({ref:n,style:{verticalAlign:"top",width:0,height:0}},o),i))}function useRive(e,t){void 0===t&&(t={});var n=React.useState(null),a=n[0],r=n[1],u=React.useRef(null),i=React.useRef(null),o=React.useState(null),s=o[0],c=o[1],l=!!e,f=getOptions(t),d=useDevicePixelRatio(),v=React.useCallback(function(){if(s){if(s.layout&&s.layout.fit===canvas.Fit.Layout&&a){var e=d*s.layout.layoutScaleFactor;s.devicePixelRatioUsed=d,s.artboardWidth=(null==a?void 0:a.width)/e,s.artboardHeight=(null==a?void 0:a.height)/e}s.startRendering(),s.resizeToCanvas()}},[s,d]);useResizeCanvas({riveLoaded:!!s,canvasElem:a,containerRef:u,options:f,onCanvasHasResized:v,artboardBounds:null==s?void 0:s.bounds});var p=React.useCallback(function(e){null===e&&a&&(a.height=0,a.width=0),r(e)},[]);React.useEffect(function(){if(a&&e){var t,n=null!=s;if(null==s){var r=f.useOffscreenRenderer,u=e.onRiveReady,o=_object_without_properties_loose$1(e,["onRiveReady"]);t=new canvas.Rive(_extends$1({useOffscreenRenderer:r},o,{canvas:a})),null!=i.current&&i.current.cleanup(),i.current=t,t.on(canvas.EventType.Load,function(){n=!0,u&&u(t),a?c(t):t.cleanup()})}return function(){n||null==t||t.cleanup()}}},[a,l,s]);var b=React.useCallback(function(e){u.current=e},[]),R=useIntersectionObserver(),h=R.observe,g=R.unobserve;React.useEffect(function(){var e,t=!1,n=function(){if(a&&t){var e=a.getBoundingClientRect();e.width>0&&e.height>0&&e.top<(window.innerHeight||document.documentElement.clientHeight)&&e.bottom>0&&e.left<(window.innerWidth||document.documentElement.clientWidth)&&e.right>0&&(null==s||s.startRendering(),t=!1)}};return a&&!1!==f.shouldUseIntersectionObserver&&h(a,function(a){a.isIntersecting?s&&s.startRendering():s&&s.stopRendering(),t=!a.isIntersecting,clearTimeout(e),a.isIntersecting||0!==a.boundingClientRect.width||(e=setTimeout(n,10))}),function(){a&&g(a)}},[h,g,s,a,f.shouldUseIntersectionObserver]),React.useEffect(function(){return function(){s&&(s.cleanup(),c(null))}},[s,a]),React.useEffect(function(){return function(){null!=i.current&&i.current.cleanup()}},[]);var w=null==e?void 0:e.animations;React.useEffect(function(){s&&w&&(s.isPlaying?(s.stop(s.animationNames),s.play(w)):s.isPaused&&(s.stop(s.animationNames),s.pause(w)))},[w,s]);var y=React.useCallback(function(e){return /*#__PURE__*/React__default.default.createElement(RiveComponent,_extends$1({setContainerRef:b,setCanvasRef:p},e))},[p,b]);return{canvas:a,container:u.current,setCanvasRef:p,setContainerRef:b,rive:s,RiveComponent:y}}function _object_without_properties_loose(e,t){if(null==e)return{};var n,a,r={},u=Object.getOwnPropertyNames(e);for(a=0;a<u.length;a++)n=u[a],!(t.indexOf(n)>=0)&&Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n]);return r}var Rive=function(e){var t=e.src,n=e.artboard,a=e.animations,r=e.stateMachines,u=e.layout,i=e.useOffscreenRenderer,o=e.shouldDisableRiveListeners,s=e.shouldResizeCanvasToContainer,c=e.automaticallyHandleEvents,l=e.children,f=_object_without_properties_loose(e,["src","artboard","animations","stateMachines","layout","useOffscreenRenderer","shouldDisableRiveListeners","shouldResizeCanvasToContainer","automaticallyHandleEvents","children"]),d=useRive({src:t,artboard:n,animations:a,layout:u,stateMachines:r,autoplay:!0,shouldDisableRiveListeners:void 0!==o&&o,automaticallyHandleEvents:void 0!==c&&c},{useOffscreenRenderer:void 0===i||i,shouldResizeCanvasToContainer:void 0===s||s}).RiveComponent;return /*#__PURE__*/React__default.default.createElement(d,f,l)};function useStateMachineInput(e,t,n,a){var r=React.useState(null),u=r[0],i=r[1];return React.useEffect(function(){var r=function(){if(e&&t&&n||i(null),e&&t&&n){var r=e.stateMachineInputs(t);if(r){var u=r.find(function(e){return e.name===n});void 0!==a&&u&&(u.value=a),i(u||null)}}else i(null)};r(),e&&e.on(canvas.EventType.Load,function(){r()})},[e]),u}function useViewModel(e,t){var n=null!=t?t:{},a=n.name,r=n.useDefault,u=React.useState(null),i=u[0],o=u[1];return React.useEffect(function(){var t=function(){if(!e)return void o(null);var t=null;o(t=null!=a?(null==e.viewModelByName?void 0:e.viewModelByName.call(e,a))||null:e.defaultViewModel()||null)};return t(),e&&e.on(canvas.EventType.Load,t),function(){e&&e.off(canvas.EventType.Load,t)}},[e,a,void 0!==r&&r]),i}var pendingBinds=new WeakSet;function scheduleBind(e){pendingBinds.has(e)||(pendingBinds.add(e),queueMicrotask(function(){pendingBinds.delete(e),e.bind()}))}function resolveViewModelInstance(e,t){var n=t.name,a=t.useNew,r=t.instance;return void 0!==r?r:e?null!=n?e.instanceByName(n)||null:a?(null==e.instance?void 0:e.instance.call(e))||null:(null==e.defaultInstance?void 0:e.defaultInstance.call(e))||null:null}function useViewModelInstance(e,t){var n=null!=t?t:{},a=n.name,r=n.useDefault,u=n.useNew,i=void 0!==u&&u,o=n.rive,s=React.useState(null),c=s[0],l=s[1];return React.useEffect(function(){if(!e)return void l(null);var t=resolveViewModelInstance(e,{name:a,useNew:i});l(t),o&&t&&o.viewModelInstance!==t&&(o.setViewModelInstance(t),scheduleBind(o))},[e,a,void 0!==r&&r,i,o]),c}function useGlobalViewModelInstance(e,t,n){var a=null!=n?n:{},r=a.instanceName,u=a.useNew,i=void 0!==u&&u,o=a.instance,s=a.rive,c=React.useState(null),l=c[0],f=c[1];return React.useEffect(function(){var n=resolveViewModelInstance(e,{name:r,useNew:i,instance:o});f(n),s&&t&&n&&s.setGlobalViewModelInstance(t,n)&&scheduleBind(s)},[e,t,r,i,o,s]),l}function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}function useViewModelInstanceProperty(e,t,n){var a=React.useState(null),r=a[0],u=a[1],i=React.useState(n.defaultValue),o=i[0],s=i[1],c=React.useState(null),l=c[0],f=c[1],d=React.useRef(null),v=React.useRef(e),p=React.useRef(n);React.useEffect(function(){p.current=n},[n]);var b=React.useCallback(function(){var e=d.current,t=v.current,n=p.current;if(!e||!t)return u(null),s(n.defaultValue),f(null),function(){};var a=n.getProperty(e,t);if(a){u(a),s(n.getValue(a)),n.getExtendedData&&f(n.getExtendedData(a));var r=function(){s(n.getValue(a)),n.getExtendedData&&f(n.getExtendedData(a)),n.onPropertyEvent&&n.onPropertyEvent()};return a.on(r),function(){a.off(r)}}return function(){}},[]);React.useEffect(function(){return d.current=t,v.current=e,b()},[t,e,b]);var R=React.useCallback(function(e){if(r&&d.current===t)try{e(r),p.current.getExtendedData&&f(p.current.getExtendedData(r));return}catch(e){}if(d.current)try{var n=p.current.getProperty(d.current,v.current);n&&(u(n),e(n),p.current.getExtendedData&&f(p.current.getExtendedData(n)))}catch(e){}},[r,t]),h=React.useMemo(function(){return p.current.buildPropertyOperations(R)},[R]),g=_extends({value:o},h);return n.getExtendedData&&(g.extendedData=l),g}function useViewModelInstanceNumber(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.number(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,setValue:n.setValue}}function useViewModelInstanceString(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.string(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,setValue:n.setValue}}function useViewModelInstanceBoolean(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.boolean(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,setValue:n.setValue}}function useViewModelInstanceColor(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.color(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})},setRgb:function(t,n,a){e(function(e){e.rgb(t,n,a)})},setRgba:function(t,n,a,r){e(function(e){e.rgba(t,n,a,r)})},setAlpha:function(t){e(function(e){e.alpha(t)})},setOpacity:function(t){e(function(e){e.opacity(t)})}}},[])});return{value:n.value,setValue:n.setValue,setRgb:n.setRgb,setRgba:n.setRgba,setAlpha:n.setAlpha,setOpacity:n.setOpacity}}function useViewModelInstanceEnum(e,t){var n=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.enum(t)},[]),getValue:React.useCallback(function(e){return e.value},[]),defaultValue:null,getExtendedData:React.useCallback(function(e){return e.values},[]),buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])});return{value:n.value,values:n.extendedData||[],setValue:n.setValue}}function useViewModelInstanceTrigger(e,t,n){var a=(null!=n?n:{}).onTrigger;return{trigger:useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.trigger(t)},[]),getValue:React.useCallback(function(){},[]),defaultValue:null,onPropertyEvent:a,buildPropertyOperations:React.useCallback(function(e){return{trigger:function(){e(function(e){e.trigger()})}}},[])}).trigger}}function useViewModelInstanceImage(e,t){return{setValue:useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.image(t)},[]),getValue:React.useCallback(function(){},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])}).setValue}}function useViewModelInstanceFont(e,t){return{setValue:useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.font(t)},[]),getValue:React.useCallback(function(){},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])}).setValue}}function useViewModelInstanceList(e,t){var n,a=React.useState(0)[1],r=useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.list(t)},[]),getValue:React.useCallback(function(e){return e.length},[]),defaultValue:null,onPropertyEvent:function(){a(function(e){return e+1})},buildPropertyOperations:React.useCallback(function(e){return{addInstance:function(t){e(function(e){return e.addInstance(t)})},addInstanceAt:function(t,n){var a=!1;return e(function(e){a=e.addInstanceAt(t,n)}),a},removeInstance:function(t){e(function(e){return e.removeInstance(t)})},removeInstanceAt:function(t){e(function(e){return e.removeInstanceAt(t)})},getInstanceAt:function(t){var n=null;return e(function(e){n=e.instanceAt(t)}),n},swap:function(t,n){e(function(e){return e.swap(t,n)})}}},[])});return{length:null!=(n=r.value)?n:0,addInstance:r.addInstance,addInstanceAt:r.addInstanceAt,removeInstance:r.removeInstance,removeInstanceAt:r.removeInstanceAt,getInstanceAt:r.getInstanceAt,swap:r.swap}}function asyncGeneratorStep(e,t,n,a,r,u,i){try{var o=e[u](i),s=o.value}catch(e){n(e);return}o.done?t(s):Promise.resolve(s).then(a,r)}function _async_to_generator(e){return function(){var t=this,n=arguments;return new Promise(function(a,r){var u=e.apply(t,n);function i(e){asyncGeneratorStep(u,a,r,i,o,"next",e)}function o(e){asyncGeneratorStep(u,a,r,i,o,"throw",e)}i(void 0)})}}function _ts_generator(e,t){var n,a,r,u={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype),o=Object.defineProperty;return o(i,"next",{value:s(0)}),o(i,"throw",{value:s(1)}),o(i,"return",{value:s(2)}),"function"==typeof Symbol&&o(i,Symbol.iterator,{value:function(){return this}}),i;function s(o){return function(s){var c=[o,s];if(n)throw TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(u=0)),u;)try{if(n=1,a&&(r=2&c[0]?a.return:c[0]?a.throw||((r=a.return)&&r.call(a),0):a.next)&&!(r=r.call(a,c[1])).done)return r;switch(a=0,r&&(c=[2&c[0],r.value]),c[0]){case 0:case 1:r=c;break;case 4:return u.label++,{value:c[1],done:!1};case 5:u.label++,a=c[1],c=[0];continue;case 7:c=u.ops.pop(),u.trys.pop();continue;default:if(!(r=(r=u.trys).length>0&&r[r.length-1])&&(6===c[0]||2===c[0])){u=0;continue}if(3===c[0]&&(!r||c[1]>r[0]&&c[1]<r[3])){u.label=c[1];break}if(6===c[0]&&u.label<r[1]){u.label=r[1],r=c;break}if(r&&u.label<r[2]){u.label=r[2],u.ops.push(c);break}r[2]&&u.ops.pop(),u.trys.pop();continue}c=t.call(e,u)}catch(e){c=[6,e],a=0}finally{n=r=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}}}function useRiveFile(e){var t=React.useState(null),n=t[0],a=t[1],r=React.useState("idle"),u=r[0],i=r[1];return React.useEffect(function(){var t=null;return _async_to_generator(function(){return _ts_generator(this,function(n){try{i("loading"),(t=new canvas.RiveFile(e)).init(),t.on(canvas.EventType.Load,function(){null==t||t.getInstance(),a(t),i("success")}),t.on(canvas.EventType.LoadError,function(){i("failed")}),a(t)}catch(e){console.error(e),i("failed")}return[2]})})(),function(){null==t||t.cleanup()}},[e.src,e.buffer]),{riveFile:n,status:u}}function useViewModelInstanceArtboard(e,t){return{setValue:useViewModelInstanceProperty(e,t,{getProperty:React.useCallback(function(e,t){return e.artboard(t)},[]),getValue:React.useCallback(function(){},[]),defaultValue:null,buildPropertyOperations:React.useCallback(function(e){return{setValue:function(t){e(function(e){e.value=t})}}},[])}).setValue}}exports.default=Rive,exports.useGlobalViewModelInstance=useGlobalViewModelInstance,exports.useResizeCanvas=useResizeCanvas,exports.useRive=useRive,exports.useRiveFile=useRiveFile,exports.useStateMachineInput=useStateMachineInput,exports.useViewModel=useViewModel,exports.useViewModelInstance=useViewModelInstance,exports.useViewModelInstanceArtboard=useViewModelInstanceArtboard,exports.useViewModelInstanceBoolean=useViewModelInstanceBoolean,exports.useViewModelInstanceColor=useViewModelInstanceColor,exports.useViewModelInstanceEnum=useViewModelInstanceEnum,exports.useViewModelInstanceFont=useViewModelInstanceFont,exports.useViewModelInstanceImage=useViewModelInstanceImage,exports.useViewModelInstanceList=useViewModelInstanceList,exports.useViewModelInstanceNumber=useViewModelInstanceNumber,exports.useViewModelInstanceString=useViewModelInstanceString,exports.useViewModelInstanceTrigger=useViewModelInstanceTrigger,Object.keys(canvas).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return canvas[e]}})});

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-import { Layout, RiveParameters, Rive as Rive$1, RiveFileParameters, RiveFile, ViewModelInstance, ViewModelInstanceArtboard, decodeImage, StateMachineInput, ViewModel, Bounds } from '@rive-app/canvas';
+import { Layout, RiveParameters, Rive as Rive$1, RiveFileParameters, RiveFile, ViewModelInstance, ViewModelInstanceArtboard, decodeImage, decodeFont, StateMachineInput, ViewModel, Bounds } from '@rive-app/canvas';
 export * from '@rive-app/canvas';
 import React, { ComponentProps, RefCallback, MutableRefObject } from 'react';
 
@@ -258,6 +258,14 @@ type UseViewModelInstanceImageResult = {
      */
     setValue: (value: RiveRenderImage | null) => void;
 };
+type RiveDecodedFont = Awaited<ReturnType<typeof decodeFont>>;
+type UseViewModelInstanceFontResult = {
+    /**
+     * Set the value of the font.
+     * @param value - The decoded font to set (from `decodeFont`), or null to clear.
+     */
+    setValue: (value: RiveDecodedFont | null) => void;
+};
 type UseViewModelInstanceListResult = {
     /**
      * The current length of the list.
@@ -440,10 +448,19 @@ declare function useViewModelInstanceTrigger(path: string, viewModelInstance?: V
  *
  * @param path - Path to the image property (e.g. "profileImage" or "group/avatar")
  * @param viewModelInstance - The ViewModelInstance containing the image property
- * @returns An object with a setter function
+ * @returns An object with a setter function to set a new image value
  */
 declare function useViewModelInstanceImage(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceImageResult;
 
+/**
+ * Hook for interacting with font properties of a ViewModelInstance.
+ *
+ * @param path - Path to the font property (e.g. "boundFont" or "group/titleFont")
+ * @param viewModelInstance - The ViewModelInstance containing the font property
+ * @returns An object with a setter function to set a new font value
+ */
+declare function useViewModelInstanceFont(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceFontResult;
+
 /**
  * Hook for interacting with list properties of a ViewModelInstance.
  *
@@ -522,4 +539,4 @@ declare function useRiveFile(params: UseRiveFileParameters): RiveFileState;
  */
 declare function useViewModelInstanceArtboard(path: string, viewModelInstance?: ViewModelInstance | null): UseViewModelInstanceArtboardResult;
 
-export { RiveProps, RiveState, UseRiveFileParameters, UseRiveOptions, UseRiveParameters, Rive as default, useGlobalViewModelInstance, useResizeCanvas, useRive, useRiveFile, useStateMachineInput, useViewModel, useViewModelInstance, useViewModelInstanceArtboard, useViewModelInstanceBoolean, useViewModelInstanceColor, useViewModelInstanceEnum, useViewModelInstanceImage, useViewModelInstanceList, useViewModelInstanceNumber, useViewModelInstanceString, useViewModelInstanceTrigger };
+export { RiveProps, RiveState, UseRiveFileParameters, UseRiveOptions, UseRiveParameters, Rive as default, useGlobalViewModelInstance, useResizeCanvas, useRive, useRiveFile, useStateMachineInput, useViewModel, useViewModelInstance, useViewModelInstanceArtboard, useViewModelInstanceBoolean, useViewModelInstanceColor, useViewModelInstanceEnum, useViewModelInstanceFont, useViewModelInstanceImage, useViewModelInstanceList, useViewModelInstanceNumber, useViewModelInstanceString, useViewModelInstanceTrigger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas",
-  "version": "4.30.0",
+  "version": "4.31.0",
   "description": "React wrapper around the @rive-app/canvas library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -18,7 +18,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "2.39.1"
+    "@rive-app/canvas": "2.39.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"