visualfries 0.1.10115 → 0.3.2

package/dist/managers/AppManager.svelte.js

@@ -9,10 +9,18 @@ export class AppManager {
     state;
     dom;
     forceCanvas; // ForceCanvas
+    serverRendererMode;
+    preferWebGL2;
+    powerPreference;
+    deterministicMediaManager;
     constructor(cradle) {
         this.state = cradle.stateManager;
         this.dom = cradle.domManager;
         this.forceCanvas = cradle.forceCanvas;
+        this.serverRendererMode = cradle.serverRendererMode ?? 'canvas';
+        this.preferWebGL2 = cradle.preferWebGL2 ?? true;
+        this.powerPreference = cradle.powerPreference ?? 'high-performance';
+        this.deterministicMediaManager = cradle.deterministicMediaManager;
     }
     get app() {
         return this.#app;
@@ -30,29 +38,193 @@ export class AppManager {
         const { width, height, environment, scale } = this.state;
         this.#destroyed = false;
         const canvas = this.dom.canvas;
-        if (environment === 'server') {
-            const ctx = canvas.getContext('2d', { willReadFrequently: true });
+        let rendererSelection = this.#resolveRendererSelection(environment);
+        if (environment === 'server' && rendererSelection.forceCanvas) {
+            canvas.getContext('2d', { willReadFrequently: true });
         }
         const { PixiPlugin } = await registerGsapPlugins();
         // give the plugin a reference to the PIXI object
-        PixiPlugin.registerPIXI(this.app);
-        const options = {
+        PixiPlugin.registerPIXI(PIXI);
+        const sceneBackground = this.state.data.settings.backgroundColor;
+        const solidBackground = typeof sceneBackground === 'string' ? sceneBackground : 'transparent';
+        const baseOptions = {
             ...PIXI_DEFAULTS,
             preserveDrawingBuffer: environment === 'server',
             // clearBeforeRender: environment === 'server' ? false : true,
             width,
             height,
             view: canvas,
-            forceCanvas: environment === 'server' || this.forceCanvas,
-            backgroundColor: environment === 'server' ? 'transparent' : '#ffffff',
-            backgroundAlpha: environment === 'server' ? 0 : 1
+            backgroundColor: solidBackground,
+            backgroundAlpha: solidBackground === 'transparent' ? 0 : 1
         };
-        this.#app = new PIXI.Application(options);
+        let options = this.#buildRendererOptions(baseOptions, environment, rendererSelection);
+        try {
+            this.#app = new PIXI.Application(options);
+        }
+        catch (error) {
+            if (!rendererSelection.forceCanvas) {
+                const fallbackReason = this.#buildInitFallbackReason(error);
+                this.#warnRendererFallback(fallbackReason);
+                rendererSelection = {
+                    requestedMode: rendererSelection.requestedMode,
+                    selectedMode: 'canvas',
+                    forceCanvas: true,
+                    fallbackOccurred: true,
+                    fallbackReason
+                };
+                canvas.getContext('2d', { willReadFrequently: true });
+                options = this.#buildRendererOptions(baseOptions, environment, rendererSelection);
+                this.#app = new PIXI.Application(options);
+            }
+            else {
+                throw error;
+            }
+        }
+        if (!rendererSelection.forceCanvas) {
+            const actualRenderer = this.#detectRendererType();
+            if (actualRenderer !== 'webgl') {
+                const fallbackReason = 'Renderer initialized as canvas despite serverRendererMode="webgl"';
+                this.#warnRendererFallback(fallbackReason);
+                rendererSelection = {
+                    requestedMode: rendererSelection.requestedMode,
+                    selectedMode: 'canvas',
+                    forceCanvas: true,
+                    fallbackOccurred: true,
+                    fallbackReason
+                };
+            }
+            else {
+                rendererSelection = { ...rendererSelection, selectedMode: actualRenderer };
+            }
+        }
         if (scale !== 1) {
             this.scale(scale);
         }
         // Stop the default ticker as we'll use GSAP's ticker
         this.#app.ticker.stop();
+        this.deterministicMediaManager?.recordRendererSelection({
+            rendererType: rendererSelection.selectedMode,
+            fallbackOccurred: rendererSelection.fallbackOccurred,
+            fallbackReason: rendererSelection.fallbackReason
+        });
+    }
+    #buildRendererOptions(baseOptions, environment, selection) {
+        const options = {
+            ...baseOptions,
+            forceCanvas: selection.forceCanvas
+        };
+        if (environment === 'server' && selection.selectedMode === 'webgl' && !selection.forceCanvas) {
+            this.#configureWebGLEnvironmentPreference();
+            options.preference = 'webgl';
+            options.powerPreference = this.powerPreference;
+        }
+        return options;
+    }
+    #resolveRendererSelection(environment) {
+        if (environment !== 'server') {
+            return {
+                requestedMode: 'canvas',
+                selectedMode: this.forceCanvas ? 'canvas' : 'webgl',
+                forceCanvas: this.forceCanvas,
+                fallbackOccurred: false
+            };
+        }
+        const requestedMode = this.serverRendererMode;
+        if (this.forceCanvas) {
+            if (requestedMode === 'webgl') {
+                const fallbackReason = 'serverRendererMode="webgl" requested but forceCanvas=true override is enabled';
+                this.#warnRendererFallback(fallbackReason);
+                return {
+                    requestedMode,
+                    selectedMode: 'canvas',
+                    forceCanvas: true,
+                    fallbackOccurred: true,
+                    fallbackReason
+                };
+            }
+            return {
+                requestedMode,
+                selectedMode: 'canvas',
+                forceCanvas: true,
+                fallbackOccurred: false
+            };
+        }
+        if (requestedMode === 'canvas') {
+            return {
+                requestedMode,
+                selectedMode: 'canvas',
+                forceCanvas: true,
+                fallbackOccurred: false
+            };
+        }
+        const support = this.#checkWebGLSupport();
+        if (!support.supported) {
+            this.#warnRendererFallback(support.reason);
+            return {
+                requestedMode,
+                selectedMode: 'canvas',
+                forceCanvas: true,
+                fallbackOccurred: true,
+                fallbackReason: support.reason
+            };
+        }
+        return {
+            requestedMode,
+            selectedMode: 'webgl',
+            forceCanvas: false,
+            fallbackOccurred: false
+        };
+    }
+    #checkWebGLSupport() {
+        try {
+            const probe = this.dom?.canvas ??
+                (typeof document !== 'undefined' ? document.createElement('canvas') : null);
+            if (!probe || typeof probe.getContext !== 'function') {
+                return { supported: false, reason: 'WebGL unavailable: no canvas available for probing' };
+            }
+            if (this.preferWebGL2 && probe.getContext('webgl2')) {
+                return { supported: true, reason: '' };
+            }
+            if (probe.getContext('webgl') || probe.getContext('experimental-webgl')) {
+                return { supported: true, reason: '' };
+            }
+            return { supported: false, reason: 'WebGL unavailable: context creation failed' };
+        }
+        catch {
+            return { supported: false, reason: 'WebGL unavailable: context probe failed' };
+        }
+    }
+    #configureWebGLEnvironmentPreference() {
+        const pixiAny = PIXI;
+        if (!pixiAny.settings || !pixiAny.ENV) {
+            return;
+        }
+        if (this.preferWebGL2 && pixiAny.ENV.WEBGL2 !== undefined) {
+            pixiAny.settings.PREFER_ENV = pixiAny.ENV.WEBGL2;
+            return;
+        }
+        if (pixiAny.ENV.WEBGL !== undefined) {
+            pixiAny.settings.PREFER_ENV = pixiAny.ENV.WEBGL;
+        }
+    }
+    #detectRendererType() {
+        if (!this.#app) {
+            return 'canvas';
+        }
+        const renderer = this.#app.renderer;
+        if (renderer?.gl || renderer?.context?.gl || renderer?.context?.webGLVersion) {
+            return 'webgl';
+        }
+        return 'canvas';
+    }
+    #buildInitFallbackReason(error) {
+        if (error instanceof Error && error.message) {
+            return `WebGL initialization failed: ${error.message}`;
+        }
+        return 'WebGL initialization failed with unknown error';
+    }
+    #warnRendererFallback(reason) {
+        console.warn(`[AppManager] Falling back to canvas renderer. ${reason}`);
     }
     async extractBase64(target, format = 'png', quality = 1) {
         if (!this.#app)

package/dist/managers/ComponentsManager.svelte.d.ts

@@ -24,9 +24,9 @@ export declare class ComponentsManager implements ResourceManager<IComponent, Co
     private isVisible;
     getAll(): IComponent[];
     getMediaComponents(): (Component & MediaComponent)[];
-    update(componentId: string, data: Partial<AppearanceInput>, refreshType?: ComponentRefreshType): Promise<void>;
+    update(componentId: string, data: Partial<AppearanceInput>, refreshType?: ComponentRefreshType): void;
     get(componentId: string): IComponent | undefined;
-    delete(componentId: string): void;
+    delete(componentId: string): Promise<void>;
     create(componentData: ComponentData): Promise<IComponent | null>;
     setOrder(id: string, order: number): void;
     moveUp(id: string): void;
@@ -39,11 +39,11 @@ export declare class ComponentsManager implements ResourceManager<IComponent, Co
         id: string;
         data: Partial<AppearanceInput>;
     }[]): void;
-    bulkDelete(ids: string[]): void;
-    hide(id: string): Promise<void>;
-    show(id: string): Promise<void>;
-    toggle(id: string): Promise<void>;
+    bulkDelete(ids: string[]): Promise<void>;
+    hide(id: string): void;
+    show(id: string): void;
+    toggle(id: string): void;
     filter(predicate: (component: IComponent) => boolean): IComponent[];
     isComponentVisible(componentId: string): boolean;
-    destroy(): void;
+    destroy(): Promise<void>;
 }

package/dist/managers/ComponentsManager.svelte.js

@@ -6,6 +6,7 @@ import { PixiComponentBuilder } from '../builders/PixiComponentBuilder.js';
 import { ComponentState } from '../builders/_ComponentState.svelte.js';
 import { asClass, asValue } from 'awilix/browser';
 import { debounce } from 'lodash-es';
+import { isTimeWithinTimeline } from '../utils/timelineWindow.js';
 // import { builtTextComponentForSubtitle } from '../utils/subtitles.js';
 export class ComponentsManager {
     components = $state(new Map());
@@ -28,7 +29,7 @@ export class ComponentsManager {
         this.initializeEventListeners();
     }
     initializeEventListeners() {
-        this.eventManager.on('subtitleschange', this.debouncedRefreshSubtitles.bind(this));
+        this.eventManager.on('subtitleschange', this.debouncedRefreshSubtitles);
     }
     #scheduleSubtitleRefresh() {
         // Schedule the refresh on the next animation frame to avoid blocking
@@ -43,7 +44,7 @@ export class ComponentsManager {
         const { currentTime, duration } = this.state;
         const startAt = component.props.timeline.startAt || 0;
         const endAt = component.props.timeline.endAt || duration;
-        return currentTime >= startAt && currentTime <= endAt;
+        return isTimeWithinTimeline(currentTime, startAt, endAt);
     }
     getAll() {
         return Array.from(this.components.values());
@@ -57,10 +58,10 @@ export class ComponentsManager {
             component.refresh(refreshType);
         }
     }
-    async update(componentId, data, refreshType = 'refresh') {
+    update(componentId, data, refreshType = 'refresh') {
         const component = this.get(componentId);
         if (component) {
-            await component.props.updateAppearance(data);
+            component.props.updateAppearance(data);
             // Only manually refresh if auto-refresh is not enabled
             if (!component.autoRefresh) {
                 this.#refreshComponent(component, refreshType);
@@ -70,7 +71,7 @@ export class ComponentsManager {
     get(componentId) {
         return this.components.get(componentId);
     }
-    delete(componentId) {
+    async delete(componentId) {
         const component = this.components.get(componentId);
         if (component) {
             const layers = this.layersManager.getAll();
@@ -82,8 +83,8 @@ export class ComponentsManager {
                     this.layersManager.delete(componentLayer.id);
                 }
             }
-            component.destroy();
             this.components.delete(componentId);
+            await component.destroy();
         }
     }
     async #buildComponent(componentData) {
@@ -236,25 +237,30 @@ export class ComponentsManager {
     bulkUpdate(updates) {
         updates.forEach(({ id, data }) => this.update(id, data));
     }
-    bulkDelete(ids) {
-        ids.forEach((id) => this.delete(id));
+    async bulkDelete(ids) {
+        const results = await Promise.allSettled(ids.map((id) => this.delete(id)));
+        const errors = results
+            .filter((result) => result.status === 'rejected')
+            .map((result) => result.reason);
+        if (errors.length > 0)
+            throw new AggregateError(errors, 'Component deletion failed.');
     }
-    async hide(id) {
+    hide(id) {
         const component = this.get(id);
         if (component) {
-            await component.props.setVisible(false);
+            component.props.setVisible(false);
         }
     }
-    async show(id) {
+    show(id) {
         const component = this.get(id);
         if (component) {
-            await component.props.setVisible(true);
+            component.props.setVisible(true);
         }
     }
-    async toggle(id) {
+    toggle(id) {
         const component = this.get(id);
         if (component) {
-            await component.props.setVisible(!component.props.visible);
+            component.props.setVisible(!component.props.visible);
         }
     }
     filter(predicate) {
@@ -267,8 +273,16 @@ export class ComponentsManager {
         }
         return this.isVisible(component);
     }
-    destroy() {
+    async destroy() {
         this.eventManager.removeEventListener('subtitleschange', this.debouncedRefreshSubtitles);
         this.debouncedRefreshSubtitles.cancel(); // Cancel any pending debounced calls
+        const components = [...this.components.values()];
+        this.components.clear();
+        const results = await Promise.allSettled(components.map((component) => component.destroy()));
+        const errors = results
+            .filter((result) => result.status === 'rejected')
+            .map((result) => result.reason);
+        if (errors.length > 0)
+            throw new AggregateError(errors, 'Component teardown failed.');
     }
 }

package/dist/managers/DeterministicMediaManager.d.ts

@@ -16,6 +16,12 @@ export declare class DeterministicMediaManager {
     getFingerprint(): string;
     setOneTimeOverride(componentId: string, frameIndex: number, payload: DeterministicFramePayload): void;
     getDiagnosticsReport(): DeterministicDiagnosticsReport | null;
+    getSelectedRendererType(): 'canvas' | 'webgl';
+    recordRendererSelection(args: {
+        rendererType: 'canvas' | 'webgl';
+        fallbackOccurred?: boolean;
+        fallbackReason?: string;
+    }): void;
     recordReadyAttempt(sceneFrameIndex: number, count?: number): void;
     recordExtraRenderPass(sceneFrameIndex: number, count?: number): void;
     recordBlurRedraw(sceneFrameIndex: number, count?: number): void;

package/dist/managers/DeterministicMediaManager.js

@@ -4,6 +4,9 @@ const createDefaultDiagnosticsState = () => ({
     providerHits: 0,
     providerMisses: 0,
     cacheHits: 0,
+    selectedRendererType: 'canvas',
+    rendererFallbackOccurred: false,
+    rendererFallbackReason: undefined,
     readyAttempts: 0,
     extraRenderPasses: 0,
     blurRedraws: 0,
@@ -13,6 +16,7 @@ const createDefaultDiagnosticsState = () => ({
     latencyMinMs: Number.POSITIVE_INFINITY,
     latencyMaxMs: 0
 });
+const IMAGE_LOAD_TIMEOUT_MS = 5000;
 export class DeterministicMediaManager {
     config;
     #provider;
@@ -144,6 +148,9 @@ export class DeterministicMediaManager {
             providerMisses: this.#diagnostics.providerMisses,
             cacheHits: this.#diagnostics.cacheHits,
             cacheHitRatio,
+            selectedRendererType: this.#diagnostics.selectedRendererType,
+            rendererFallbackOccurred: this.#diagnostics.rendererFallbackOccurred,
+            rendererFallbackReason: this.#diagnostics.rendererFallbackReason,
             readyAttempts: this.#diagnostics.readyAttempts,
             extraRenderPasses: this.#diagnostics.extraRenderPasses,
             blurRedraws: this.#diagnostics.blurRedraws,
@@ -155,6 +162,19 @@ export class DeterministicMediaManager {
             }
         };
     }
+    getSelectedRendererType() {
+        return this.#diagnostics.selectedRendererType;
+    }
+    recordRendererSelection(args) {
+        try {
+            this.#diagnostics.selectedRendererType = args.rendererType;
+            this.#diagnostics.rendererFallbackOccurred = Boolean(args.fallbackOccurred);
+            this.#diagnostics.rendererFallbackReason = args.fallbackReason;
+        }
+        catch {
+            // Diagnostics are best-effort and never allowed to fail the render path.
+        }
+    }
     recordReadyAttempt(sceneFrameIndex, count = 1) {
         this.#recordRuntimeCounter(sceneFrameIndex, 'readyAttempts', count);
     }
@@ -300,10 +320,44 @@ export class DeterministicMediaManager {
     async #loadImage(url) {
         const img = new Image();
         img.crossOrigin = 'anonymous';
-        img.src = url;
         await new Promise((resolve, reject) => {
-            img.onload = () => resolve();
-            img.onerror = () => reject(new Error(`Failed to load deterministic frame: ${url}`));
+            let settled = false;
+            const timeoutId = setTimeout(() => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                cleanup();
+                try {
+                    img.src = '';
+                }
+                catch {
+                    // Ignore cancellation failures.
+                }
+                reject(new Error(`Timed out loading deterministic frame after ${IMAGE_LOAD_TIMEOUT_MS}ms: ${url}`));
+            }, IMAGE_LOAD_TIMEOUT_MS);
+            const cleanup = () => {
+                clearTimeout(timeoutId);
+                img.onload = null;
+                img.onerror = null;
+            };
+            img.onload = () => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                cleanup();
+                resolve();
+            };
+            img.onerror = () => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                cleanup();
+                reject(new Error(`Failed to load deterministic frame: ${url}`));
+            };
+            img.src = url;
         });
         return img;
     }

package/dist/managers/EventManager.js

@@ -17,6 +17,8 @@ export class EventManager extends EventTarget {
     }
     // "on" automatically returns the right type under event.details object
     on(event, callback, options) {
-        this.addEventListener(event, ((e) => callback(e)), options);
+        // Register the original function identity so removeEventListener can reliably
+        // detach manager callbacks during scene teardown.
+        this.addEventListener(event, callback, options);
     }
 }

package/dist/managers/LayersManager.svelte.d.ts

@@ -476,6 +476,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -1095,6 +1101,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -1688,6 +1700,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -2279,6 +2297,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -2904,6 +2928,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -3499,6 +3529,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -4045,6 +4081,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -4596,6 +4638,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -5140,6 +5188,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;

package/dist/managers/RenderManager.d.ts

@@ -13,6 +13,11 @@ export declare class RenderManager {
     private layersManager;
     private lastActiveById;
     private lastRenderTime;
+    private renderInFlight;
+    private rerenderRequested;
+    private readonly boundHandleBeforeRender;
+    private readonly boundRender;
+    private readonly boundHandleChangeState;
     constructor(cradle: {
         stateManager: StateManager;
         componentsManager: ResourceManager<IComponent, ComponentData, AppearanceInput>;