visualfries 0.1.10120 → 0.3.2

package/dist/DIContainer.d.ts

@@ -1,4 +1,5 @@
 import { type AwilixContainer } from 'awilix/browser';
 import type { Scene as SceneData } from './';
 export declare const registerNewContainer: (data: SceneData, instances: [string, unknown][]) => AwilixContainer;
-export declare const removeContainer: (sceneId: string) => void;
+export declare const evictContainer: (sceneId: string) => AwilixContainer | undefined;
+export declare const removeContainer: (sceneId: string, expectedContainer?: AwilixContainer) => Promise<void>;

package/dist/DIContainer.js

@@ -42,6 +42,8 @@ import { LayersManager } from './managers/LayersManager.svelte.js';
 import { MediaSeekingHook } from './components/hooks/MediaSeekingHook.js';
 import { VerifyGifHook } from './components/hooks/VerifyGifHook.js';
 import { DeterministicMediaFrameHook } from './components/hooks/DeterministicMediaFrameHook.js';
+import { PixiVisualTransformHook } from './components/hooks/PixiVisualTransformHook.js';
+import { CanvasFillHook } from './components/hooks/CanvasFillHook.js';
 import { ComponentAnimationTransformer } from './animations/transformers/AnimationReferenceTransformer.js';
 import { AnimationPresetsRegister } from './animations/AnimationPresetsRegister.js';
 import { SplitTextCache } from './animations/SplitTextCache.js';
@@ -95,6 +97,8 @@ export const registerNewContainer = function (data, instances) {
         deterministicMediaFrameHook: asClass(DeterministicMediaFrameHook, {
             lifetime: Lifetime.TRANSIENT
         }),
+        pixiVisualTransformHook: asClass(PixiVisualTransformHook, { lifetime: Lifetime.TRANSIENT }),
+        canvasFillHook: asClass(CanvasFillHook, { lifetime: Lifetime.TRANSIENT }),
         videoTextureHook: asClass(PixiVideoTextureHook, { lifetime: Lifetime.TRANSIENT }),
         splitScreenHook: asClass(PixiSplitScreenDisplayObjectHook, { lifetime: Lifetime.TRANSIENT }),
         htmlTextHook: asClass(HtmlTextHook, { lifetime: Lifetime.TRANSIENT }),
@@ -144,10 +148,17 @@ export const registerNewContainer = function (data, instances) {
     containers.set(data.id, childContainer);
     return childContainer;
 };
-export const removeContainer = function (sceneId) {
-    if (containers.has(sceneId)) {
-        const container = containers.get(sceneId);
-        container.dispose();
+export const evictContainer = function (sceneId) {
+    const container = containers.get(sceneId);
+    if (container)
         containers.delete(sceneId);
-    }
+    return container;
+};
+export const removeContainer = async function (sceneId, expectedContainer) {
+    const current = containers.get(sceneId);
+    if (expectedContainer && current !== expectedContainer)
+        return;
+    const container = evictContainer(sceneId);
+    if (container)
+        await container.dispose();
 };

package/dist/SceneBuilder.svelte.d.ts

@@ -64,6 +64,21 @@ export declare class SceneBuilder implements ISceneBuilder {
         start: number;
         end: number;
     }[];
+    explainComponentState(componentId: string): {
+        componentId: string;
+        type: "VIDEO" | "GIF" | "IMAGE" | "TEXT" | "SHAPE" | "AUDIO" | "COLOR" | "GRADIENT" | "SUBTITLES";
+        time: number;
+        active: boolean;
+        relativeTime: number;
+        targetKind: "none" | "html" | "pixi";
+        targetOwner: "wrapper" | "element" | "none" | "pixi";
+        computed: Record<string, string | number>;
+        animations: {
+            id: string;
+            enabled: boolean;
+            startAt: number;
+        }[];
+    } | null;
     addExcludedTimestamp(start: number, end: number): void;
     removeExcludedTimestampsBetween(start: number, end: number): void;
     syncChanges(): void;
@@ -538,6 +553,12 @@ export declare class SceneBuilder implements ISceneBuilder {
                     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;
@@ -1157,6 +1178,12 @@ export declare class SceneBuilder implements ISceneBuilder {
                     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;
@@ -1750,6 +1777,12 @@ export declare class SceneBuilder implements ISceneBuilder {
                     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;
@@ -2341,6 +2374,12 @@ export declare class SceneBuilder implements ISceneBuilder {
                     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;
@@ -2966,6 +3005,12 @@ export declare class SceneBuilder implements ISceneBuilder {
                     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;
@@ -3561,6 +3606,12 @@ export declare class SceneBuilder implements ISceneBuilder {
                     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;
@@ -4107,6 +4158,12 @@ export declare class SceneBuilder implements ISceneBuilder {
                     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;
@@ -4658,6 +4715,12 @@ export declare class SceneBuilder implements ISceneBuilder {
                     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;
@@ -5202,6 +5265,12 @@ export declare class SceneBuilder implements ISceneBuilder {
                     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;
@@ -5412,5 +5481,5 @@ export declare class SceneBuilder implements ISceneBuilder {
     removeLoadingComponent(componentId: string): void;
     buildCharactersList(): void;
     render(): void;
-    destroy(): void;
+    destroy(): Promise<void>;
 }

package/dist/SceneBuilder.svelte.js

@@ -17,7 +17,7 @@ import { MediaManager } from './managers/MediaManager.js';
 import { DeterministicMediaManager } from './managers/DeterministicMediaManager.js';
 import { LayersManager } from './managers/LayersManager.svelte.js';
 import { SubtitlesManager } from './managers/SubtitlesManager.svelte.js';
-import { removeContainer } from './DIContainer.js';
+import { evictContainer, removeContainer } from './DIContainer.js';
 export class SceneBuilder {
     initialized = false;
     renderTicker;
@@ -106,6 +106,50 @@ export class SceneBuilder {
     get disabledTimeZones() {
         return this.stateManager.disabledTimeZones;
     }
+    explainComponentState(componentId) {
+        const component = this.componentsManager.get(componentId);
+        if (!component)
+            return null;
+        const data = component.props.getData();
+        const target = component.context.getResource('animationTarget');
+        const isHtml = typeof HTMLElement !== 'undefined' && target instanceof HTMLElement;
+        const wrapper = component.context.getResource('wrapperHtmlEl');
+        const element = component.context.getResource('htmlEl');
+        let targetKind = 'none';
+        let targetOwner = 'none';
+        const computed = {};
+        if (isHtml) {
+            targetKind = 'html';
+            targetOwner = target === wrapper ? 'wrapper' : target === element ? 'element' : 'element';
+            const style = getComputedStyle(target);
+            computed.opacity = Number.parseFloat(style.opacity || '1');
+            computed.transform = style.transform || 'none';
+        }
+        else if (target) {
+            targetKind = 'pixi';
+            targetOwner = 'pixi';
+            for (const key of ['x', 'y', 'opacity', 'rotation', 'scale', 'scaleX', 'scaleY']) {
+                const value = target[key];
+                if (typeof value === 'number')
+                    computed[key] = value;
+            }
+        }
+        return {
+            componentId,
+            type: data.type,
+            time: this.currentTime,
+            active: component.context.isActive,
+            relativeTime: this.currentTime - data.timeline.startAt,
+            targetKind,
+            targetOwner,
+            computed,
+            animations: (data.animations?.list ?? []).map((entry) => ({
+                id: entry.id,
+                enabled: data.animations?.enabled !== false && entry.enabled !== false,
+                startAt: entry.startAt ?? 0
+            }))
+        };
+    }
     addExcludedTimestamp(start, end) {
         this.stateManager.data.settings.trimZones = this.stateManager.data.settings?.trimZones || [];
         this.stateManager.data.settings.trimZones.push({
@@ -181,21 +225,27 @@ export class SceneBuilder {
             return;
         }
         this.initialized = true;
-        gsap.ticker.fps(this.fps);
-        this.renderTicker = () => {
-            this.render();
-        };
-        await this.loadFonts(this.fonts);
-        this.layersManager.setAppManager(this.appManager);
-        await this.appManager.initialize();
-        if (this.stateManager.scale !== 1) {
-            this.scale(this.stateManager.scale);
+        try {
+            gsap.ticker.fps(this.fps);
+            this.renderTicker = () => {
+                this.render();
+            };
+            await this.loadFonts(this.fonts);
+            this.layersManager.setAppManager(this.appManager);
+            await this.appManager.initialize();
+            if (this.stateManager.scale !== 1) {
+                this.scale(this.stateManager.scale);
+            }
+            await this.buildSceneTree();
+            await this.seek(0);
+            this.eventManager.isReady = true;
+            this.domManager.removeLoader();
+        }
+        catch (error) {
+            this.initialized = false;
+            this.eventManager.isReady = false;
+            throw error;
         }
-        await this.buildSceneTree();
-        this.seek(0);
-        this.render();
-        this.eventManager.isReady = true;
-        this.domManager.removeLoader();
     }
     async buildSceneTree() {
         // Sort layers by order
@@ -423,6 +473,7 @@ export class SceneBuilder {
             if (!isDuplicate) {
                 previousMimeType = mimeType;
             }
+            // Current frame payloads are strings, ArrayBuffers, or Blobs, so release() is a no-op today.
             let released = false;
             const release = () => {
                 if (released) {
@@ -491,20 +542,36 @@ export class SceneBuilder {
             gsap.ticker.remove(this.renderTicker);
         }
     }
-    destroy() {
-        // Stop the timeline and remove the render ticker
-        gsap.ticker.remove(this.renderTicker);
-        // Clear the components map
+    async destroy() {
         this.initialized = false;
-        this.appManager.destroy();
-        this.domManager.destroy();
-        this.stateManager.destroy();
-        this.timelineManager.destroy();
-        this.componentsManager.destroy();
-        // media manages should be destroyed last
-        this.mediaManager.destroy();
-        void this.deterministicMediaManager.destroy();
-        // Remove the container from the DI container cache
-        removeContainer(this.sceneData.id);
+        this.eventManager.isReady = false;
+        const container = evictContainer(this.sceneData.id);
+        const errors = [];
+        const cleanup = async (operation) => {
+            try {
+                await operation();
+            }
+            catch (error) {
+                errors.push(error);
+            }
+        };
+        try {
+            await cleanup(() => gsap.ticker.remove(this.renderTicker));
+            await cleanup(() => this.componentsManager.destroy());
+            await cleanup(() => this.mediaManager.destroy());
+            await cleanup(() => this.deterministicMediaManager.destroy());
+            await cleanup(() => this.timelineManager.destroy());
+            await cleanup(() => this.appManager.destroy());
+            await cleanup(() => this.domManager.destroy());
+            await cleanup(() => this.stateManager.destroy());
+        }
+        finally {
+            await cleanup(() => container?.dispose());
+            if (container)
+                await cleanup(() => removeContainer(this.sceneData.id, container));
+        }
+        if (errors.length > 0) {
+            throw new AggregateError(errors, `SceneBuilder teardown failed for ${this.sceneData.id}.`);
+        }
     }
 }

package/dist/agent/audioMixer.d.ts

@@ -0,0 +1,34 @@
+export type AudioMixRange = {
+    start: number;
+    end: number;
+};
+export type AudioSourcePlan = {
+    id: string;
+    kind: 'component' | 'track' | 'scene';
+    url: string;
+    startInChunkSec: number;
+    durationSec: number;
+    sourceOffsetSec: number;
+    volume: number;
+};
+export type BuildLocalMixedAudioResult = {
+    audioPath: string | null;
+    selectedSources: number;
+    skippedSources: number;
+    plannedSources: AudioSourcePlan[];
+};
+export declare function resolveAudioMixRanges(sceneInput: unknown, chunkStartSec: number, chunkEndSec: number): AudioMixRange[];
+export declare function collectAudioSourcesForRanges(sceneInput: unknown, ranges: AudioMixRange[]): AudioSourcePlan[];
+export declare function sourceHasAudio(url: string): Promise<boolean>;
+export declare function createPrepareSourceAudioArgs(source: AudioSourcePlan, outputPath: string): string[];
+export declare function createMixAudioArgs(inputs: Array<{
+    plan: AudioSourcePlan;
+    path: string;
+}>, outputPath: string, chunkDurationSec: number): string[];
+export declare function buildLocalMixedAudioTrack(input: {
+    scene: unknown;
+    ranges: AudioMixRange[];
+    workDir: string;
+    renderId?: string;
+    debug?: boolean;
+}): Promise<BuildLocalMixedAudioResult>;