@grandgular/rive-angular 0.1.0

package/fesm2022/grandgular-rive-angular.mjs

@@ -0,0 +1,717 @@
+import * as i0 from '@angular/core';
+import { viewChild, inject, DestroyRef, PLATFORM_ID, NgZone, input, output, signal, effect, untracked, ChangeDetectionStrategy, Component, Injectable } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Fit, Alignment, Layout, Rive, RiveFile, EventType } from '@rive-app/canvas';
+export { Alignment, EventType, Fit, Layout, Rive, RiveFile, StateMachineInput } from '@rive-app/canvas';
+
+/**
+ * Re-export Rive SDK types for consumer convenience
+ */
+/**
+ * Error thrown when Rive animation fails to load
+ */
+class RiveLoadError extends Error {
+    originalError;
+    constructor(message, originalError) {
+        super(message);
+        this.originalError = originalError;
+        this.name = 'RiveLoadError';
+    }
+}
+
+/**
+ * Fake IntersectionObserver for environments where it's not available (e.g., SSR)
+ */
+class FakeIntersectionObserver {
+    root = null;
+    rootMargin = '';
+    thresholds = [];
+    observe() {
+        // Intentionally empty for SSR compatibility
+    }
+    unobserve() {
+        // Intentionally empty for SSR compatibility
+    }
+    disconnect() {
+        // Intentionally empty for SSR compatibility
+    }
+    takeRecords() {
+        return [];
+    }
+}
+const MyIntersectionObserver = (typeof globalThis !== 'undefined' && globalThis.IntersectionObserver) ||
+    FakeIntersectionObserver;
+/**
+ * Singleton IntersectionObserver wrapper for observing multiple elements
+ * with individual callbacks. This avoids creating multiple IntersectionObserver
+ * instances which is more efficient.
+ */
+class ElementObserver {
+    observer;
+    elementsMap = new Map();
+    constructor() {
+        this.observer = new MyIntersectionObserver(this.onObserved);
+    }
+    onObserved = (entries) => {
+        entries.forEach((entry) => {
+            const elementCallback = this.elementsMap.get(entry.target);
+            if (elementCallback) {
+                elementCallback(entry);
+            }
+        });
+    };
+    registerCallback(element, callback) {
+        this.observer.observe(element);
+        this.elementsMap.set(element, callback);
+    }
+    removeCallback(element) {
+        this.observer.unobserve(element);
+        this.elementsMap.delete(element);
+    }
+}
+// Singleton instance
+let observerInstance = null;
+/**
+ * Get the singleton ElementObserver instance
+ */
+function getElementObserver() {
+    if (!observerInstance) {
+        observerInstance = new ElementObserver();
+    }
+    return observerInstance;
+}
+
+/**
+ * Standalone Angular component for Rive animations
+ *
+ * Features:
+ * - Signal-based inputs for reactive updates
+ * - Automatic canvas sizing via ResizeObserver with DPR support
+ * - OnPush change detection strategy
+ * - SSR compatible
+ * - Zoneless architecture ready
+ * - Automatic resource cleanup
+ * - Runs outside Angular zone for optimal performance
+ *
+ * @example
+ * ```html
+ * <rive-canvas
+ *   src="assets/animations/rive/animation.riv"
+ *   [stateMachines]="'StateMachine'"
+ *   [autoplay]="true"
+ *   [fit]="Fit.Cover"
+ *   [alignment]="Alignment.Center"
+ *   (loaded)="onLoad()"
+ * />
+ * ```
+ */
+class RiveCanvasComponent {
+    canvas = viewChild.required('canvas');
+    #destroyRef = inject(DestroyRef);
+    #platformId = inject(PLATFORM_ID);
+    #ngZone = inject(NgZone);
+    src = input(...(ngDevMode ? [undefined, { debugName: "src" }] : []));
+    buffer = input(...(ngDevMode ? [undefined, { debugName: "buffer" }] : []));
+    /**
+     * Preloaded RiveFile instance (from RiveFileService).
+     * If provided, this takes precedence over src/buffer.
+     */
+    riveFile = input(...(ngDevMode ? [undefined, { debugName: "riveFile" }] : []));
+    artboard = input(...(ngDevMode ? [undefined, { debugName: "artboard" }] : []));
+    animations = input(...(ngDevMode ? [undefined, { debugName: "animations" }] : []));
+    stateMachines = input(...(ngDevMode ? [undefined, { debugName: "stateMachines" }] : []));
+    autoplay = input(true, ...(ngDevMode ? [{ debugName: "autoplay" }] : []));
+    fit = input(Fit.Contain, ...(ngDevMode ? [{ debugName: "fit" }] : []));
+    alignment = input(Alignment.Center, ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    useOffscreenRenderer = input(false, ...(ngDevMode ? [{ debugName: "useOffscreenRenderer" }] : []));
+    /**
+     * Enable IntersectionObserver to automatically stop rendering when canvas is not visible.
+     * This optimizes performance by pausing animations that are off-screen.
+     */
+    shouldUseIntersectionObserver = input(true, ...(ngDevMode ? [{ debugName: "shouldUseIntersectionObserver" }] : []));
+    /**
+     * Disable Rive event listeners on the canvas (pointer events, touch events).
+     * Useful for decorative animations without interactivity.
+     */
+    shouldDisableRiveListeners = input(false, ...(ngDevMode ? [{ debugName: "shouldDisableRiveListeners" }] : []));
+    /**
+     * Allow Rive to automatically handle Rive Events (e.g., OpenUrlEvent opens URLs).
+     * Default is false for security - events must be handled manually via riveEvent output.
+     */
+    automaticallyHandleEvents = input(false, ...(ngDevMode ? [{ debugName: "automaticallyHandleEvents" }] : []));
+    // Outputs (Events)
+    loaded = output();
+    loadError = output();
+    /**
+     * Emitted when state machine state changes.
+     * Contains information about the state change event.
+     */
+    stateChange = output();
+    /**
+     * Emitted for Rive Events (custom events defined in the .riv file).
+     * Use this to handle custom events like OpenUrlEvent, etc.
+     */
+    riveEvent = output();
+    /**
+     * Emitted when Rive instance is created and ready.
+     * Provides direct access to the Rive instance for advanced use cases.
+     */
+    riveReady = output();
+    // Signals for reactive state
+    isPlaying = signal(false, ...(ngDevMode ? [{ debugName: "isPlaying" }] : []));
+    isPaused = signal(false, ...(ngDevMode ? [{ debugName: "isPaused" }] : []));
+    isLoaded = signal(false, ...(ngDevMode ? [{ debugName: "isLoaded" }] : []));
+    /**
+     * Public signal providing access to the Rive instance.
+     * Use this to access advanced Rive SDK features.
+     */
+    riveInstance = signal(null, ...(ngDevMode ? [{ debugName: "riveInstance" }] : []));
+    // Private state
+    #rive = null;
+    resizeObserver = null;
+    isInitialized = false;
+    isPausedByIntersectionObserver = false;
+    retestIntersectionTimeoutId = null;
+    constructor() {
+        // Effect to reload animation when src, buffer, or riveFile changes
+        effect(() => {
+            const src = this.src();
+            const buffer = this.buffer();
+            const riveFile = this.riveFile();
+            untracked(() => {
+                if ((src || buffer || riveFile) &&
+                    isPlatformBrowser(this.#platformId) &&
+                    this.isInitialized)
+                    this.loadAnimation();
+            });
+        });
+        // Auto cleanup on destroy
+        this.#destroyRef.onDestroy(() => {
+            this.cleanupRive();
+            this.disconnectResizeObserver();
+            this.disconnectIntersectionObserver();
+        });
+    }
+    ngAfterViewInit() {
+        if (isPlatformBrowser(this.#platformId)) {
+            this.isInitialized = true;
+            this.setupResizeObserver();
+            this.setupIntersectionObserver();
+            this.loadAnimation();
+        }
+    }
+    /**
+     * Setup ResizeObserver for automatic canvas sizing with DPR support
+     */
+    setupResizeObserver() {
+        const canvas = this.canvas().nativeElement;
+        const dpr = window.devicePixelRatio || 1;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const { width, height } = entry.contentRect;
+                // Set canvas size with device pixel ratio for sharp rendering
+                canvas.width = width * dpr;
+                canvas.height = height * dpr;
+                // Resize Rive instance if it exists
+                if (this.#rive)
+                    this.#rive.resizeDrawingSurfaceToCanvas();
+            }
+        });
+        this.resizeObserver.observe(canvas);
+    }
+    /**
+     * Disconnect ResizeObserver
+     */
+    disconnectResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
+    /**
+     * Setup IntersectionObserver to stop rendering when canvas is not visible
+     */
+    setupIntersectionObserver() {
+        if (!this.shouldUseIntersectionObserver())
+            return;
+        const canvas = this.canvas().nativeElement;
+        const observer = getElementObserver();
+        const onIntersectionChange = (entry) => {
+            if (entry.isIntersecting) {
+                // Canvas is visible - start rendering
+                if (this.#rive) {
+                    this.#rive.startRendering();
+                }
+                this.isPausedByIntersectionObserver = false;
+            }
+            else {
+                // Canvas is not visible - stop rendering
+                if (this.#rive) {
+                    this.#rive.stopRendering();
+                }
+                this.isPausedByIntersectionObserver = true;
+                // Workaround for Chrome bug with insertBefore
+                // Retest after 10ms if boundingClientRect.width is 0
+                if (this.retestIntersectionTimeoutId) {
+                    clearTimeout(this.retestIntersectionTimeoutId);
+                }
+                if (entry.boundingClientRect.width === 0) {
+                    this.retestIntersectionTimeoutId = setTimeout(() => {
+                        this.retestIntersection();
+                    }, 10);
+                }
+            }
+        };
+        observer.registerCallback(canvas, onIntersectionChange);
+    }
+    /**
+     * Retest intersection - workaround for Chrome bug
+     */
+    retestIntersection() {
+        if (!this.isPausedByIntersectionObserver)
+            return;
+        const canvas = this.canvas().nativeElement;
+        const rect = canvas.getBoundingClientRect();
+        const isIntersecting = rect.width > 0 &&
+            rect.height > 0 &&
+            rect.top <
+                (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.bottom > 0 &&
+            rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
+            rect.right > 0;
+        if (isIntersecting && this.#rive) {
+            this.#rive.startRendering();
+            this.isPausedByIntersectionObserver = false;
+        }
+    }
+    /**
+     * Disconnect IntersectionObserver
+     */
+    disconnectIntersectionObserver() {
+        if (this.retestIntersectionTimeoutId) {
+            clearTimeout(this.retestIntersectionTimeoutId);
+            this.retestIntersectionTimeoutId = null;
+        }
+        if (this.shouldUseIntersectionObserver()) {
+            const canvas = this.canvas().nativeElement;
+            const observer = getElementObserver();
+            observer.removeCallback(canvas);
+        }
+    }
+    /**
+     * Load animation from src or buffer
+     */
+    loadAnimation() {
+        // Run outside Angular zone for better performance
+        this.#ngZone.runOutsideAngular(() => {
+            try {
+                // Clean up existing Rive instance only
+                this.cleanupRive();
+                const canvas = this.canvas().nativeElement;
+                const src = this.src();
+                const buffer = this.buffer();
+                const riveFile = this.riveFile();
+                if (!src && !buffer && !riveFile)
+                    return;
+                // Build layout configuration
+                const layoutParams = {
+                    fit: this.fit(),
+                    alignment: this.alignment(),
+                };
+                // Create Rive instance configuration
+                // Using Record to allow dynamic property assignment
+                const config = {
+                    canvas,
+                    autoplay: this.autoplay(),
+                    layout: new Layout(layoutParams),
+                    useOffscreenRenderer: this.useOffscreenRenderer(),
+                    shouldDisableRiveListeners: this.shouldDisableRiveListeners(),
+                    automaticallyHandleEvents: this.automaticallyHandleEvents(),
+                    onLoad: () => this.onLoad(),
+                    onLoadError: (error) => this.onLoadError(error),
+                    onPlay: () => this.onPlay(),
+                    onPause: () => this.onPause(),
+                    onStop: () => this.onStop(),
+                    onStateChange: (event) => this.onStateChange(event),
+                    onRiveEvent: (event) => this.onRiveEvent(event),
+                };
+                // Add src, buffer, or riveFile (priority: riveFile > src > buffer)
+                if (riveFile) {
+                    config['riveFile'] = riveFile;
+                }
+                else if (src) {
+                    config['src'] = src;
+                }
+                else if (buffer) {
+                    config['buffer'] = buffer;
+                }
+                // Add artboard if specified
+                const artboard = this.artboard();
+                if (artboard)
+                    config['artboard'] = artboard;
+                // Add animations if specified
+                const animations = this.animations();
+                if (animations)
+                    config['animations'] = animations;
+                // Add state machines if specified
+                const stateMachines = this.stateMachines();
+                if (stateMachines)
+                    config['stateMachines'] = stateMachines;
+                // Safe type assertion - config contains all required properties
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.#rive = new Rive(config);
+                // Update public signal and emit riveReady event
+                this.#ngZone.run(() => {
+                    this.riveInstance.set(this.#rive);
+                    this.riveReady.emit(this.#rive);
+                });
+            }
+            catch (error) {
+                console.error('Failed to initialize Rive instance:', error);
+                this.#ngZone.run(() => this.loadError.emit(new RiveLoadError('Failed to load Rive animation', error)));
+            }
+        });
+    }
+    // Event handlers (run inside Angular zone for change detection)
+    onLoad() {
+        this.#ngZone.run(() => {
+            this.isLoaded.set(true);
+            this.loaded.emit();
+        });
+    }
+    onLoadError(originalError) {
+        this.#ngZone.run(() => {
+            const error = new RiveLoadError('Failed to load Rive animation', originalError instanceof Error ? originalError : undefined);
+            console.error('Rive load error:', error);
+            this.loadError.emit(error);
+        });
+    }
+    onPlay() {
+        this.#ngZone.run(() => {
+            this.isPlaying.set(true);
+            this.isPaused.set(false);
+        });
+    }
+    onPause() {
+        this.#ngZone.run(() => {
+            this.isPlaying.set(false);
+            this.isPaused.set(true);
+        });
+    }
+    onStop() {
+        this.#ngZone.run(() => {
+            this.isPlaying.set(false);
+            this.isPaused.set(false);
+        });
+    }
+    onStateChange(event) {
+        this.#ngZone.run(() => this.stateChange.emit(event));
+    }
+    onRiveEvent(event) {
+        this.#ngZone.run(() => this.riveEvent.emit(event));
+    }
+    // Public API methods
+    /**
+     * Play animation(s)
+     */
+    playAnimation(animations) {
+        if (!this.#rive)
+            return;
+        this.#ngZone.runOutsideAngular(() => {
+            if (animations) {
+                this.#rive.play(animations);
+            }
+            else {
+                this.#rive.play();
+            }
+        });
+    }
+    /**
+     * Pause animation(s)
+     */
+    pauseAnimation(animations) {
+        if (!this.#rive)
+            return;
+        this.#ngZone.runOutsideAngular(() => {
+            if (animations) {
+                this.#rive.pause(animations);
+            }
+            else {
+                this.#rive.pause();
+            }
+        });
+    }
+    /**
+     * Stop animation(s)
+     */
+    stopAnimation(animations) {
+        if (!this.#rive)
+            return;
+        this.#ngZone.runOutsideAngular(() => {
+            if (animations) {
+                this.#rive.stop(animations);
+            }
+            else {
+                this.#rive.stop();
+            }
+        });
+    }
+    /**
+     * Reset the animation to the beginning
+     */
+    reset() {
+        if (!this.#rive)
+            return;
+        this.#ngZone.runOutsideAngular(() => {
+            this.#rive.reset();
+        });
+    }
+    /**
+     * Set a state machine input value
+     */
+    setInput(stateMachineName, inputName, value) {
+        if (!this.#rive)
+            return;
+        this.#ngZone.runOutsideAngular(() => {
+            const inputs = this.#rive.stateMachineInputs(stateMachineName);
+            const input = inputs.find((i) => i.name === inputName);
+            if (input && 'value' in input) {
+                input.value = value;
+            }
+        });
+    }
+    /**
+     * Fire a state machine trigger
+     */
+    fireTrigger(stateMachineName, triggerName) {
+        if (!this.#rive)
+            return;
+        this.#ngZone.runOutsideAngular(() => {
+            const inputs = this.#rive.stateMachineInputs(stateMachineName);
+            const input = inputs.find((i) => i.name === triggerName);
+            if (input && 'fire' in input && typeof input.fire === 'function') {
+                input.fire();
+            }
+        });
+    }
+    /**
+     * Clean up Rive instance only
+     */
+    cleanupRive() {
+        if (this.#rive) {
+            try {
+                this.#rive.cleanup();
+            }
+            catch (error) {
+                console.warn('Error during Rive cleanup:', error);
+            }
+            this.#rive = null;
+        }
+        // Reset signals
+        this.riveInstance.set(null);
+        this.isLoaded.set(false);
+        this.isPlaying.set(false);
+        this.isPaused.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RiveCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.4", type: RiveCanvasComponent, isStandalone: true, selector: "rive-canvas", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, buffer: { classPropertyName: "buffer", publicName: "buffer", isSignal: true, isRequired: false, transformFunction: null }, riveFile: { classPropertyName: "riveFile", publicName: "riveFile", isSignal: true, isRequired: false, transformFunction: null }, artboard: { classPropertyName: "artboard", publicName: "artboard", isSignal: true, isRequired: false, transformFunction: null }, animations: { classPropertyName: "animations", publicName: "animations", isSignal: true, isRequired: false, transformFunction: null }, stateMachines: { classPropertyName: "stateMachines", publicName: "stateMachines", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, useOffscreenRenderer: { classPropertyName: "useOffscreenRenderer", publicName: "useOffscreenRenderer", isSignal: true, isRequired: false, transformFunction: null }, shouldUseIntersectionObserver: { classPropertyName: "shouldUseIntersectionObserver", publicName: "shouldUseIntersectionObserver", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableRiveListeners: { classPropertyName: "shouldDisableRiveListeners", publicName: "shouldDisableRiveListeners", isSignal: true, isRequired: false, transformFunction: null }, automaticallyHandleEvents: { classPropertyName: "automaticallyHandleEvents", publicName: "automaticallyHandleEvents", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", loadError: "loadError", stateChange: "stateChange", riveEvent: "riveEvent", riveReady: "riveReady" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <canvas #canvas [style.width.%]="100" [style.height.%]="100"></canvas>
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}canvas{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RiveCanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rive-canvas', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <canvas #canvas [style.width.%]="100" [style.height.%]="100"></canvas>
+  `, styles: [":host{display:block;width:100%;height:100%}canvas{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], buffer: [{ type: i0.Input, args: [{ isSignal: true, alias: "buffer", required: false }] }], riveFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "riveFile", required: false }] }], artboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "artboard", required: false }] }], animations: [{ type: i0.Input, args: [{ isSignal: true, alias: "animations", required: false }] }], stateMachines: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateMachines", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], fit: [{ type: i0.Input, args: [{ isSignal: true, alias: "fit", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], useOffscreenRenderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "useOffscreenRenderer", required: false }] }], shouldUseIntersectionObserver: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldUseIntersectionObserver", required: false }] }], shouldDisableRiveListeners: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableRiveListeners", required: false }] }], automaticallyHandleEvents: [{ type: i0.Input, args: [{ isSignal: true, alias: "automaticallyHandleEvents", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], loadError: [{ type: i0.Output, args: ["loadError"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], riveEvent: [{ type: i0.Output, args: ["riveEvent"] }], riveReady: [{ type: i0.Output, args: ["riveReady"] }] } });
+
+/**
+ * Service for preloading and caching Rive files.
+ *
+ * This service allows you to:
+ * - Preload .riv files before they're needed
+ * - Share the same file across multiple components
+ * - Cache files to avoid redundant network requests
+ * - Deduplicate concurrent loads of the same file
+ *
+ * @example
+ * ```typescript
+ * export class MyComponent {
+ *   private riveFileService = inject(RiveFileService);
+ *   private destroyRef = inject(DestroyRef);
+ *
+ *   fileState = this.riveFileService.loadFile({
+ *     src: 'assets/animation.riv'
+ *   });
+ *
+ *   constructor() {
+ *     // Auto-release on component destroy
+ *     this.destroyRef.onDestroy(() => {
+ *       this.riveFileService.releaseFile({ src: 'assets/animation.riv' });
+ *     });
+ *   }
+ * }
+ * ```
+ */
+class RiveFileService {
+    cache = new Map();
+    pendingLoads = new Map();
+    bufferIdCounter = 0;
+    /**
+     * Load a RiveFile from URL or ArrayBuffer.
+     * Returns a signal with the file state and loading status.
+     * Files are cached by src URL to avoid redundant loads.
+     * Concurrent loads of the same file are deduplicated.
+     *
+     * @param params - Parameters containing src URL or buffer
+     * @returns Signal with RiveFileState
+     */
+    loadFile(params) {
+        const cacheKey = this.getCacheKey(params);
+        // Return cached entry if exists
+        const cached = this.cache.get(cacheKey);
+        if (cached) {
+            cached.refCount++;
+            return cached.state;
+        }
+        // Return pending load if already in progress
+        const pending = this.pendingLoads.get(cacheKey);
+        if (pending) {
+            return pending.stateSignal.asReadonly();
+        }
+        // Create new loading state
+        const stateSignal = signal({
+            riveFile: null,
+            status: 'loading',
+        }, ...(ngDevMode ? [{ debugName: "stateSignal" }] : []));
+        // Start loading and track as pending
+        const promise = this.loadRiveFile(params, stateSignal, cacheKey);
+        this.pendingLoads.set(cacheKey, { stateSignal, promise });
+        return stateSignal.asReadonly();
+    }
+    /**
+     * Release a cached file. Decrements reference count and cleans up if no longer used.
+     *
+     * @param params - Parameters used to load the file
+     */
+    releaseFile(params) {
+        const cacheKey = this.getCacheKey(params);
+        const cached = this.cache.get(cacheKey);
+        if (cached) {
+            cached.refCount--;
+            if (cached.refCount <= 0) {
+                try {
+                    cached.file.cleanup();
+                }
+                catch (error) {
+                    console.warn('Error cleaning up RiveFile:', error);
+                }
+                this.cache.delete(cacheKey);
+            }
+        }
+    }
+    /**
+     * Clear all cached files
+     */
+    clearCache() {
+        this.cache.forEach((entry) => {
+            try {
+                entry.file.cleanup();
+            }
+            catch (error) {
+                console.warn('Error cleaning up RiveFile:', error);
+            }
+        });
+        this.cache.clear();
+    }
+    /**
+     * Get cache key from params
+     */
+    getCacheKey(params) {
+        if (params.src) {
+            return `src:${params.src}`;
+        }
+        if (params.buffer) {
+            // For buffers, generate unique ID to avoid collisions
+            // Store the ID on the buffer object itself
+            const bufferWithId = params.buffer;
+            if (!bufferWithId.__riveBufferId) {
+                bufferWithId.__riveBufferId = ++this.bufferIdCounter;
+            }
+            return `buffer:${bufferWithId.__riveBufferId}`;
+        }
+        return 'unknown';
+    }
+    /**
+     * Load RiveFile and update state signal
+     */
+    loadRiveFile(params, stateSignal, cacheKey) {
+        return new Promise((resolve) => {
+            try {
+                const file = new RiveFile(params);
+                file.init();
+                file.on(EventType.Load, () => {
+                    // Request an instance to increment reference count
+                    // This prevents the file from being destroyed while in use
+                    file.getInstance();
+                    stateSignal.set({
+                        riveFile: file,
+                        status: 'success',
+                    });
+                    // Cache the successfully loaded file
+                    this.cache.set(cacheKey, {
+                        file,
+                        state: stateSignal.asReadonly(),
+                        refCount: 1,
+                    });
+                    // Remove from pending loads
+                    this.pendingLoads.delete(cacheKey);
+                    resolve();
+                });
+                file.on(EventType.LoadError, () => {
+                    stateSignal.set({
+                        riveFile: null,
+                        status: 'failed',
+                    });
+                    // Remove from pending loads
+                    this.pendingLoads.delete(cacheKey);
+                    // Resolve (not reject) — error state is communicated via the signal.
+                    // Rejecting would cause an unhandled promise rejection since no
+                    // consumer awaits or catches this promise.
+                    resolve();
+                });
+            }
+            catch (error) {
+                console.error('Failed to load RiveFile:', error);
+                stateSignal.set({
+                    riveFile: null,
+                    status: 'failed',
+                });
+                // Remove from pending loads
+                this.pendingLoads.delete(cacheKey);
+                // Resolve (not reject) — error state is communicated via the signal.
+                resolve();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RiveFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RiveFileService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: RiveFileService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/*
+ * Public API Surface of @Grandgular/rive-angular
+ */
+// Component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RiveCanvasComponent, RiveFileService, RiveLoadError };
+//# sourceMappingURL=grandgular-rive-angular.mjs.map