@rive-app/canvas-lite 2.37.6 → 2.37.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/canvas-lite",
-  "version": "2.37.6",
+  "version": "2.37.8",
   "description": "A lite version of Rive's canvas based web api.",
   "main": "rive.js",
   "homepage": "https://rive.app",

package/rive.d.ts

@@ -215,6 +215,10 @@ export interface RiveParameters {
     layout?: Layout;
     autoplay?: boolean;
     useOffscreenRenderer?: boolean;
+    /**
+     * Optional tab index to set for the canvas element if there are any Focus nodes within the graphic
+     */
+    tabIndex?: number;
     /**
      * Allow the runtime to automatically load assets hosted in Rive's CDN.
      * enabled by default.
@@ -316,6 +320,7 @@ export interface RiveLoadParameters {
     stateMachines?: string | string[];
     useOffscreenRenderer?: boolean;
     shouldDisableRiveListeners?: boolean;
+    tabIndex?: number;
 }
 export interface RiveResetParameters {
     artboard?: string;
@@ -415,6 +420,7 @@ export declare class Rive {
     private runtime;
     private artboard;
     private eventCleanup;
+    private keyboardEventCleanup;
     private file;
     private riveFile;
     private eventManager;
@@ -438,8 +444,11 @@ export declare class Rive {
     private _currentCanvasHeight;
     private _audioEventListener;
     private _boundDraw;
+    private _pageVisibilityHandler;
+    private _explicitlyStoppedRendering;
     private _viewModelInstance;
     private _dataEnums;
+    private _tabIndex;
     private drawOptimization;
     private enablePerfMarks;
     durations: number[];
@@ -723,6 +732,13 @@ export declare class Rive {
      */
     startRendering(): void;
     private scheduleRendering;
+    /**
+     * Called when document.visibilitychange fires (tab change, window minimize, etc.).
+     * Cancels the rAF loop on hide and resets the time reference so that no accumulated time is
+     * applied to state machines when the tab becomes visible again. This prevents state machine
+     * advances with large time deltas when rAF starts up again.
+     */
+    private _onPageVisibilityChange;
     /**
      * Enables frames-per-second (FPS) reporting for the runtime
      * If no callback is provided, Rive will append a fixed-position div at the top-right corner of

package/rive.js

@@ -2546,7 +2546,7 @@ moduleRtn = da;
 /* 5 */
 /***/ ((module) => {
 
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.37.6","description":"A lite version of Rive\'s canvas based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.js.map","rive.wasm","rive_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts","runtimeLoader.d.ts","utils"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","version":"2.37.8","description":"A lite version of Rive\'s canvas based web api.","main":"rive.js","homepage":"https://rive.app","repository":{"type":"git","url":"https://github.com/rive-app/rive-wasm/tree/master/js"},"keywords":["rive","animation"],"author":"Rive","contributors":["Luigi Rosso <luigi@rive.app> (https://rive.app)","Maxwell Talbot <max@rive.app> (https://rive.app)","Arthur Vivian <arthur@rive.app> (https://rive.app)","Umberto Sonnino <umberto@rive.app> (https://rive.app)","Matthew Sullivan <matt.j.sullivan@gmail.com> (mailto:matt.j.sullivan@gmail.com)"],"license":"MIT","files":["rive.js","rive.js.map","rive.wasm","rive_fallback.wasm","rive.d.ts","rive_advanced.mjs.d.ts","runtimeLoader.d.ts","utils"],"typings":"rive.d.ts","dependencies":{},"browser":{"fs":false,"path":false}}');
 
 /***/ }),
 /* 6 */
@@ -2554,26 +2554,29 @@ module.exports = /*#__PURE__*/JSON.parse('{"name":"@rive-app/canvas-lite","versi
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   AudioAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.AudioAssetWrapper),
-/* harmony export */   AudioWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.AudioWrapper),
-/* harmony export */   BLANK_URL: () => (/* reexport safe */ _sanitizeUrl__WEBPACK_IMPORTED_MODULE_1__.BLANK_URL),
-/* harmony export */   CustomFileAssetLoaderWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.CustomFileAssetLoaderWrapper),
-/* harmony export */   FileAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.FileAssetWrapper),
-/* harmony export */   FileFinalizer: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.FileFinalizer),
-/* harmony export */   FontAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.FontAssetWrapper),
-/* harmony export */   FontWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.FontWrapper),
-/* harmony export */   ImageAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.ImageAssetWrapper),
-/* harmony export */   ImageWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.ImageWrapper),
-/* harmony export */   RiveFont: () => (/* reexport safe */ _riveFont__WEBPACK_IMPORTED_MODULE_3__.RiveFont),
-/* harmony export */   createFinalization: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.createFinalization),
-/* harmony export */   finalizationRegistry: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__.finalizationRegistry),
+/* harmony export */   AudioAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.AudioAssetWrapper),
+/* harmony export */   AudioWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.AudioWrapper),
+/* harmony export */   BLANK_URL: () => (/* reexport safe */ _sanitizeUrl__WEBPACK_IMPORTED_MODULE_2__.BLANK_URL),
+/* harmony export */   CustomFileAssetLoaderWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.CustomFileAssetLoaderWrapper),
+/* harmony export */   FileAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.FileAssetWrapper),
+/* harmony export */   FileFinalizer: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.FileFinalizer),
+/* harmony export */   FontAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.FontAssetWrapper),
+/* harmony export */   FontWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.FontWrapper),
+/* harmony export */   ImageAssetWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.ImageAssetWrapper),
+/* harmony export */   ImageWrapper: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.ImageWrapper),
+/* harmony export */   RiveFont: () => (/* reexport safe */ _riveFont__WEBPACK_IMPORTED_MODULE_4__.RiveFont),
+/* harmony export */   createFinalization: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.createFinalization),
+/* harmony export */   finalizationRegistry: () => (/* reexport safe */ _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__.finalizationRegistry),
+/* harmony export */   registerKeyboardInteractions: () => (/* reexport safe */ _registerKeyboardInteractions__WEBPACK_IMPORTED_MODULE_1__.registerKeyboardInteractions),
 /* harmony export */   registerTouchInteractions: () => (/* reexport safe */ _registerTouchInteractions__WEBPACK_IMPORTED_MODULE_0__.registerTouchInteractions),
-/* harmony export */   sanitizeUrl: () => (/* reexport safe */ _sanitizeUrl__WEBPACK_IMPORTED_MODULE_1__.sanitizeUrl)
+/* harmony export */   sanitizeUrl: () => (/* reexport safe */ _sanitizeUrl__WEBPACK_IMPORTED_MODULE_2__.sanitizeUrl)
 /* harmony export */ });
 /* harmony import */ var _registerTouchInteractions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(7);
-/* harmony import */ var _sanitizeUrl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
-/* harmony import */ var _finalizationRegistry__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
-/* harmony import */ var _riveFont__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
+/* harmony import */ var _registerKeyboardInteractions__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
+/* harmony import */ var _sanitizeUrl__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(9);
+/* harmony import */ var _finalizationRegistry__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
+/* harmony import */ var _riveFont__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(11);
+
 
 
 
@@ -2875,6 +2878,68 @@ var registerTouchInteractions = function (_a) {
 /* 8 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   registerKeyboardInteractions: () => (/* binding */ registerKeyboardInteractions)
+/* harmony export */ });
+/**
+ * Registers focus and tab-traversal event handlers on the canvas to route
+ * Tab/Shift+Tab to the active Rive state machine's focus manager.
+ *
+ * Mirrors registerTouchInteractions for pointer events.
+ *
+ * Returns a cleanup function that removes all registered event listeners,
+ * or null if the setup conditions are not met.
+ */
+var registerKeyboardInteractions = function (_a) {
+    var canvas = _a.canvas, stateMachine = _a.stateMachine, rive = _a.rive, hasFocusNodes = _a.hasFocusNodes;
+    if (!canvas ||
+        !stateMachine ||
+        !rive ||
+        typeof window === "undefined") {
+        return null;
+    }
+    // Work off an assumption of a single state machine
+    var mainSm = stateMachine;
+    var canvasHasFocus = false;
+    var onCanvasFocus = function (_event) {
+        canvasHasFocus = true;
+    };
+    var onCanvasBlur = function (_event) {
+        canvasHasFocus = false;
+    };
+    var onKeyDown = function (event) {
+        if (!canvasHasFocus)
+            return;
+        if (event.code === "Tab" && hasFocusNodes) {
+            var forward = !event.shiftKey;
+            var focusMoved = forward ? mainSm.focusNext() : mainSm.focusPrevious();
+            if (focusMoved) {
+                // Keep Tab inside the canvas — a Rive node received focus.
+                event.preventDefault();
+            }
+            else {
+                // No more traversable nodes — release Tab to the page.
+                // Since we're not preventing default, blur event will fire on the canvas
+                canvasHasFocus = false;
+            }
+        }
+    };
+    canvas.addEventListener("focus", onCanvasFocus);
+    canvas.addEventListener("blur", onCanvasBlur);
+    canvas.addEventListener("keydown", onKeyDown);
+    return function () {
+        canvas.removeEventListener("focus", onCanvasFocus);
+        canvas.removeEventListener("blur", onCanvasBlur);
+        canvas.removeEventListener("keydown", onKeyDown);
+    };
+};
+
+
+/***/ }),
+/* 9 */
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   BLANK_URL: () => (/* binding */ BLANK_URL),
@@ -2925,7 +2990,7 @@ function sanitizeUrl(url) {
 
 
 /***/ }),
-/* 9 */
+/* 10 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
@@ -3204,7 +3269,7 @@ var createFinalization = function (target, finalizable) {
 
 
 /***/ }),
-/* 10 */
+/* 11 */
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
@@ -4823,8 +4888,10 @@ var Rive = /** @class */ (function () {
         this.readyForPlaying = false;
         // Runtime artboard
         this.artboard = null;
-        // place to clear up event listeners
+        // place to clear up pointer/touch event listeners
         this.eventCleanup = null;
+        // place to clear up focus/keyboard event listeners
+        this.keyboardEventCleanup = null;
         this.shouldDisableRiveListeners = false;
         this.automaticallyHandleEvents = false;
         this.dispatchPointerExit = true;
@@ -4852,8 +4919,16 @@ var Rive = /** @class */ (function () {
         this._audioEventListener = null;
         // draw method bound to the class
         this._boundDraw = null;
+        // Page visibility handler — prevents state machine advancing / rAF from being invoked with large time delta
+        // when the browser tab is switched back to after being hidden.
+        this._pageVisibilityHandler = null;
+        // True only when the page visibility handler itself cancelled an active frame.
+        // Set by stopRendering(), cleared by startRendering(). Prevents the
+        // visibilitychange handler from restarting a rendering loop the caller intentionally stopped.
+        this._explicitlyStoppedRendering = false;
         this._viewModelInstance = null;
         this._dataEnums = null;
+        this._tabIndex = null;
         this.drawOptimization = DrawOptimizationOptions.DrawOnChanged;
         // When true, emits performance.mark/measure entries for load and render.
         this.enablePerfMarks = false;
@@ -4874,12 +4949,18 @@ var Rive = /** @class */ (function () {
                 _this.resizeToCanvas();
             }
         };
+        // Tracks the current animation frame request
+        this.frameRequestId = null;
         /**
          * Used be draw to track when a second of active rendering time has passed.
          * Used for debugging purposes
          */
         this.renderSecondTimer = 0;
         this._boundDraw = this.draw.bind(this);
+        if (typeof document !== 'undefined') {
+            this._pageVisibilityHandler = this._onPageVisibilityChange.bind(this);
+            document.addEventListener('visibilitychange', this._pageVisibilityHandler);
+        }
         this.canvas = params.canvas;
         if (params.canvas.constructor === HTMLCanvasElement) {
             this._observed = observers.add(this.canvas, this.onCanvasResize);
@@ -4958,6 +5039,7 @@ var Rive = /** @class */ (function () {
             stateMachines: params.stateMachines,
             artboard: params.artboard,
             useOffscreenRenderer: params.useOffscreenRenderer,
+            tabIndex: params.tabIndex,
         });
     }
     Object.defineProperty(Rive.prototype, "viewModelCount", {
@@ -4979,13 +5061,14 @@ var Rive = /** @class */ (function () {
     // Initializes the Rive object either from constructor or load()
     Rive.prototype.init = function (_a) {
         var _this = this;
-        var src = _a.src, buffer = _a.buffer, riveFile = _a.riveFile, animations = _a.animations, stateMachines = _a.stateMachines, artboard = _a.artboard, _b = _a.autoplay, autoplay = _b === void 0 ? false : _b, _c = _a.useOffscreenRenderer, useOffscreenRenderer = _c === void 0 ? false : _c, _d = _a.autoBind, autoBind = _d === void 0 ? false : _d;
+        var src = _a.src, buffer = _a.buffer, riveFile = _a.riveFile, animations = _a.animations, stateMachines = _a.stateMachines, artboard = _a.artboard, _b = _a.autoplay, autoplay = _b === void 0 ? false : _b, _c = _a.useOffscreenRenderer, useOffscreenRenderer = _c === void 0 ? false : _c, _d = _a.autoBind, autoBind = _d === void 0 ? false : _d, tabIndex = _a.tabIndex;
         if (this.destroyed) {
             return;
         }
         this.src = src;
         this.buffer = buffer;
         this.riveFile = riveFile;
+        this._tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : null;
         // If no source file url specified, it's a bust
         if (!this.src && !this.buffer && !this.riveFile) {
             throw new RiveError(Rive.missingErrorMessage);
@@ -5009,7 +5092,16 @@ var Rive = /** @class */ (function () {
             // Get the canvas where you want to render the animation and create a renderer
             if (_this.enablePerfMarks)
                 performance.mark('rive:make-renderer:start');
-            _this.renderer = _this.runtime.makeRenderer(_this.canvas, useOffscreenRenderer);
+            try {
+                _this.renderer = _this.runtime.makeRenderer(_this.canvas, useOffscreenRenderer);
+                if (!_this.renderer) {
+                    throw new Error("Renderer is null, cannot render Rive on the canvas.");
+                }
+            }
+            catch (e) {
+                console.error(e);
+                throw new RiveError("Unable to create the renderer, your environment may not support WebGL. Try the @rive-app/canvas runtime as an alternative.");
+            }
             if (_this.enablePerfMarks) {
                 performance.mark('rive:make-renderer:end');
                 performance.measure('rive:make-renderer', 'rive:make-renderer:start', 'rive:make-renderer:end');
@@ -5047,9 +5139,14 @@ var Rive = /** @class */ (function () {
         if (this.eventCleanup) {
             this.eventCleanup();
         }
+        if (this.keyboardEventCleanup) {
+            this.keyboardEventCleanup();
+            this.keyboardEventCleanup = null;
+        }
         if (!this.shouldDisableRiveListeners) {
-            var activeStateMachines = (this.animator.stateMachines || [])
-                .filter(function (sm) { return sm.playing && _this.runtime.hasListeners(sm.instance); })
+            var playingStateMachines = this.animator.stateMachines.filter(function (sm) { return sm.playing; });
+            var activeStateMachines = playingStateMachines
+                .filter(function (sm) { return _this.runtime.hasListeners(sm.instance); })
                 .map(function (sm) { return sm.instance; });
             var touchScrollEnabledOption = this.isTouchScrollEnabled;
             var dispatchPointerExit = this.dispatchPointerExit;
@@ -5071,6 +5168,27 @@ var Rive = /** @class */ (function () {
                 enableMultiTouch: enableMultiTouch,
                 layoutScaleFactor: this._layout.layoutScaleFactor,
             });
+            // Wire up keyboard interactions for state machines that have focus nodes.
+            //   hasFocusNodes — unified focus tree check, gates tab traversal
+            var smWithFocusNodes = playingStateMachines
+                .filter(function (sm) { return sm.instance.hasFocusNodes(); })
+                .map(function (sm) { return sm.instance; });
+            if (smWithFocusNodes.length) {
+                // Set the canvas as a tabbable element if there are any focus nodes.
+                // Prefer the tabIndex param set by the user, otherwise use 0.
+                // But do not override any explicit tabIndex already set on the canvas, if any.
+                var currentCanvasTabIndex = this.canvas.tabIndex;
+                // By default, canvas elements have a tabIndex of -1
+                if (currentCanvasTabIndex === -1 || isNaN(currentCanvasTabIndex)) {
+                    this.canvas.tabIndex = (this._tabIndex !== null ? this._tabIndex : 0);
+                }
+                this.keyboardEventCleanup = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.registerKeyboardInteractions)({
+                    canvas: this.canvas,
+                    stateMachine: smWithFocusNodes[0], // work off assumption of single state machine
+                    rive: this.runtime,
+                    hasFocusNodes: smWithFocusNodes.length > 0,
+                });
+            }
         }
     };
     /**
@@ -5081,6 +5199,10 @@ var Rive = /** @class */ (function () {
             this.eventCleanup();
             this.eventCleanup = null;
         }
+        if (this.keyboardEventCleanup) {
+            this.keyboardEventCleanup();
+            this.keyboardEventCleanup = null;
+        }
     };
     /**
      * If the instance has audio and the system audio is not ready
@@ -5480,6 +5602,10 @@ var Rive = /** @class */ (function () {
             audioManager.remove(this._audioEventListener);
             this._audioEventListener = null;
         }
+        if (this._pageVisibilityHandler) {
+            document.removeEventListener('visibilitychange', this._pageVisibilityHandler);
+            this._pageVisibilityHandler = null;
+        }
         (_b = this._viewModelInstance) === null || _b === void 0 ? void 0 : _b.cleanup();
         this._viewModelInstance = null;
         this._dataEnums = null;
@@ -5504,6 +5630,10 @@ var Rive = /** @class */ (function () {
         if (this.eventCleanup !== null) {
             this.eventCleanup();
         }
+        if (this.keyboardEventCleanup) {
+            this.keyboardEventCleanup();
+            this.keyboardEventCleanup = null;
+        }
         // Delete all animation and state machine instances
         this.stop();
         if (this.artboard) {
@@ -5572,6 +5702,10 @@ var Rive = /** @class */ (function () {
         if (this.eventCleanup) {
             this.eventCleanup();
         }
+        if (this.keyboardEventCleanup) {
+            this.keyboardEventCleanup();
+            this.keyboardEventCleanup = null;
+        }
         this.setupRiveListeners();
         this.startRendering();
     };
@@ -5589,6 +5723,10 @@ var Rive = /** @class */ (function () {
         if (this.eventCleanup) {
             this.eventCleanup();
         }
+        if (this.keyboardEventCleanup) {
+            this.keyboardEventCleanup();
+            this.keyboardEventCleanup = null;
+        }
         this.animator.pause(animationNames);
     };
     Rive.prototype.scrub = function (animationNames, value) {
@@ -5624,6 +5762,10 @@ var Rive = /** @class */ (function () {
         if (this.eventCleanup) {
             this.eventCleanup();
         }
+        if (this.keyboardEventCleanup) {
+            this.keyboardEventCleanup();
+            this.keyboardEventCleanup = null;
+        }
     };
     /**
      * Resets the animation
@@ -6083,6 +6225,7 @@ var Rive = /** @class */ (function () {
      * they would have been at if rendering had not been stopped.
      */
     Rive.prototype.stopRendering = function () {
+        this._explicitlyStoppedRendering = true;
         if (this.loaded && this.frameRequestId) {
             if (this.runtime.cancelAnimationFrame) {
                 this.runtime.cancelAnimationFrame(this.frameRequestId);
@@ -6098,6 +6241,7 @@ var Rive = /** @class */ (function () {
      * renderer is already active, then this will have zero effect.
      */
     Rive.prototype.startRendering = function () {
+        this._explicitlyStoppedRendering = false;
         this.drawFrame();
     };
     Rive.prototype.scheduleRendering = function () {
@@ -6110,6 +6254,31 @@ var Rive = /** @class */ (function () {
             }
         }
     };
+    /**
+     * Called when document.visibilitychange fires (tab change, window minimize, etc.).
+     * Cancels the rAF loop on hide and resets the time reference so that no accumulated time is
+     * applied to state machines when the tab becomes visible again. This prevents state machine
+     * advances with large time deltas when rAF starts up again.
+     */
+    Rive.prototype._onPageVisibilityChange = function () {
+        var _a, _b;
+        if (document.hidden) {
+            if (this.frameRequestId !== null) {
+                if ((_a = this.runtime) === null || _a === void 0 ? void 0 : _a.cancelAnimationFrame) {
+                    this.runtime.cancelAnimationFrame(this.frameRequestId);
+                }
+                else {
+                    cancelAnimationFrame(this.frameRequestId);
+                }
+                this.frameRequestId = null;
+            }
+            // Reset so the first resumed frame starts with elapsedTime === 0.
+            this.lastRenderTime = 0;
+        }
+        else if (((_b = this.animator) === null || _b === void 0 ? void 0 : _b.isPlaying) && !this._explicitlyStoppedRendering) {
+            this.scheduleRendering();
+        }
+    };
     /**
      * Enables frames-per-second (FPS) reporting for the runtime
      * If no callback is provided, Rive will append a fixed-position div at the top-right corner of