visualfries 0.1.10120 → 0.3.2

package/dist/components/hooks/SubtitlesHook.js

@@ -58,7 +58,7 @@ export class SubtitlesHook {
         const assetSubtitles = this.subtitlesManager.getAssetSubtitles(assetId);
         const languageCode = source?.languageCode || 'default';
         const subtitleArray = assetSubtitles[languageCode] || Object.values(assetSubtitles)[0] || [];
-        this.#subtitles = subtitleArray;
+        this.#subtitles = [...subtitleArray].sort((a, b) => a.start_at - b.start_at);
         // const el = this.#buildHtmlElement();
         // this.#context.setResource('wrapperHtmlEl', el);
         if (this.activeSubtitle === undefined) {
@@ -66,16 +66,38 @@ export class SubtitlesHook {
         }
     }
     get activeSubtitle() {
+        const currentTime = this.state.currentTime;
         if (this.#currentSubtitle) {
-            if (this.state.currentTime >= this.#currentSubtitle.start_at &&
-                this.state.currentTime <= this.#currentSubtitle.end_at) {
-                return this.#currentSubtitle.visible ? this.#currentSubtitle : undefined;
+            if (currentTime >= this.#currentSubtitle.start_at &&
+                currentTime <= this.#currentSubtitle.end_at) {
+                return this.#currentSubtitle.visible !== false ? this.#currentSubtitle : undefined;
             }
         }
-        const subtitle = this.#subtitles.find((sub) => this.state.currentTime >= sub.start_at &&
-            this.state.currentTime <= sub.end_at &&
-            sub.visible !== false);
-        return subtitle;
+        let low = 0;
+        let high = this.#subtitles.length - 1;
+        let candidateIndex = -1;
+        while (low <= high) {
+            const mid = Math.floor((low + high) / 2);
+            const subtitle = this.#subtitles[mid];
+            if (subtitle.start_at <= currentTime) {
+                candidateIndex = mid;
+                low = mid + 1;
+            }
+            else {
+                high = mid - 1;
+            }
+        }
+        if (candidateIndex === -1) {
+            this.#currentSubtitle = undefined;
+            return undefined;
+        }
+        const subtitle = this.#subtitles[candidateIndex];
+        if (currentTime <= subtitle.end_at && subtitle.visible !== false) {
+            this.#currentSubtitle = subtitle;
+            return subtitle;
+        }
+        this.#currentSubtitle = undefined;
+        return undefined;
     }
     #buildFakeContext() {
         let background = this.#context.data.appearance.background;
@@ -108,19 +130,21 @@ export class SubtitlesHook {
         this.#context.updateContextData(updateData);
     }
     async #handleUpdate() {
-        const contextId = this.activeSubtitle ? this.activeSubtitle.id : undefined;
+        const activeSubtitle = this.activeSubtitle;
+        const contextId = activeSubtitle?.id;
         if (contextId === this.#currentId && !this.#refreshed) {
             return;
         }
-        if ((this.activeSubtitle && this.activeSubtitle.id !== this.#context.contextData.id) ||
-            (this.activeSubtitle && this.#refreshed)) {
-            this.#currentId = this.activeSubtitle.id;
-            const startTime = this.activeSubtitle?.start_at ?? 0;
-            const endTime = this.activeSubtitle?.end_at ?? 0;
+        if ((activeSubtitle && activeSubtitle.id !== this.#context.contextData.id) ||
+            (activeSubtitle && this.#refreshed)) {
+            this.#currentSubtitle = activeSubtitle;
+            this.#currentId = activeSubtitle.id;
+            const startTime = activeSubtitle.start_at ?? 0;
+            const endTime = activeSubtitle.end_at ?? 0;
             const duration = endTime - startTime;
             const animationData = {};
             const wordTimings = [];
-            this.activeSubtitle?.words?.forEach((word) => {
+            activeSubtitle.words?.forEach((word) => {
                 wordTimings.push(gsap.utils.clamp(0, duration, word[1] - startTime)); // timings is relative to the start of the subtitle
             });
             // reorder wordTimings by start_at
@@ -135,24 +159,24 @@ export class SubtitlesHook {
             this.#context.setResource('animationData', animationData);
             // we need to rebuild subtitle component as text component
             const currentSize = get(this.#context.data, 'appearance.text.fontSize.value', get(this.#context.data, 'appearance.text.fontSize', 50));
-            const colorOverride = this.activeSubtitle.color ? { color: this.activeSubtitle.color } : {};
-            const visibleOverride = 'visible' in this.activeSubtitle ? { visible: this.activeSubtitle.visible } : {};
-            const fontSizeOverride = 'enlarge' in this.activeSubtitle && currentSize
+            const colorOverride = activeSubtitle.color ? { color: activeSubtitle.color } : {};
+            const visibleOverride = 'visible' in activeSubtitle ? { visible: activeSubtitle.visible } : {};
+            const fontSizeOverride = 'enlarge' in activeSubtitle && currentSize
                 ? {
                     fontSize: {
-                        value: currentSize * (this.activeSubtitle.enlarge / 100),
+                        value: currentSize * (activeSubtitle.enlarge / 100),
                         unit: this.#context.data.appearance.text?.fontSize?.unit
                     }
                 }
                 : {};
             const subtitleContextData = {
                 ...this.#context.data,
-                id: this.activeSubtitle.id,
+                id: activeSubtitle.id,
                 type: 'TEXT',
-                text: this.#removePunctuation(this.activeSubtitle.text || ''),
+                text: this.#removePunctuation(activeSubtitle.text || ''),
                 timeline: {
-                    startAt: this.activeSubtitle.start_at,
-                    endAt: this.activeSubtitle.end_at
+                    startAt: activeSubtitle.start_at,
+                    endAt: activeSubtitle.end_at
                 },
                 appearance: {
                     ...this.#context.data.appearance,
@@ -169,7 +193,7 @@ export class SubtitlesHook {
                 this.#refreshed = false;
             }
         }
-        if (!this.activeSubtitle) {
+        if (!activeSubtitle) {
             this.#buildFakeContext();
         }
     }

package/dist/components/hooks/VerifyMediaHook.js

@@ -1,6 +1,6 @@
 import { VideoComponentShape } from '../..';
 export class VerifyMediaHook {
-    types = ['setup', 'refresh'];
+    types = ['setup', 'refresh:content'];
     priority = 1;
     #context;
     async #handleSetup() {
@@ -14,7 +14,7 @@ export class VerifyMediaHook {
     }
     async handle(type, context) {
         this.#context = context;
-        if (type === 'setup' || type === 'refresh') {
+        if (type === 'setup' || type === 'refresh:content') {
             return await this.#handleSetup();
         }
     }

package/dist/directors/ComponentDirector.d.ts

@@ -19,6 +19,7 @@ export declare class ComponentDirector {
     constructImage(): import("..").IComponent;
     constructGif(): import("..").IComponent;
     constructShape(): import("..").IComponent;
+    constructFill(): import("..").IComponent;
     constructSubtitle(): import("..").IComponent;
     constructText(): import("..").IComponent;
 }

package/dist/directors/ComponentDirector.js

@@ -36,18 +36,23 @@ export class ComponentDirector {
                 return this.constructText();
             case 'COLOR':
             case 'GRADIENT':
-                return this.builder.getComponent();
+                return this.constructFill();
             default:
                 throw new Error(`Unsupported component type`);
         }
     }
     constructVideo() {
         if (this.shouldUseDeterministicMedia) {
-            this.builder.withDeterministicMedia().withTexture().withSplitScreen();
+            this.builder
+                .withDeterministicMedia()
+                .withTexture()
+                .withSplitScreen()
+                .withPixiAnimationTarget()
+                .withAnimation();
             return this.builder.getComponent();
         }
         this.builder.withMedia().withMediaSeeking();
-        this.builder.withVideoTexture().withSplitScreen();
+        this.builder.withVideoTexture().withSplitScreen().withPixiAnimationTarget().withAnimation();
         return this.builder.getComponent();
     }
     constructAudio() {
@@ -55,15 +60,25 @@ export class ComponentDirector {
         return this.builder.getComponent();
     }
     constructImage() {
-        this.builder.withImage().withTexture().withSplitScreen();
+        this.builder
+            .withImage()
+            .withTexture()
+            .withSplitScreen()
+            .withPixiAnimationTarget()
+            .withAnimation();
         return this.builder.getComponent();
     }
     constructGif() {
         if (this.shouldUseDeterministicMedia) {
-            this.builder.withDeterministicMedia().withTexture().withDisplayObject();
+            this.builder
+                .withDeterministicMedia()
+                .withTexture()
+                .withDisplayObject()
+                .withPixiAnimationTarget()
+                .withAnimation();
             return this.builder.getComponent();
         }
-        this.builder.withGif(); //.withDisplayObject();
+        this.builder.withGif().withPixiAnimationTarget().withAnimation();
         return this.builder.getComponent();
     }
     constructShape() {
@@ -72,14 +87,32 @@ export class ComponentDirector {
         if (shapeData.shape?.type === 'progress') {
             // Progress shapes use GPU-based PIXI Graphics rendering
             // Still need DisplayObjectHook to add the progress display object to the stage
-            this.builder.withProgressShape().withDisplayObject();
+            this.builder
+                .withProgressShape()
+                .withDisplayObject()
+                .withPixiAnimationTarget()
+                .withAnimation();
         }
         else {
             // Regular shapes use canvas-based rendering
-            this.builder.withCanvasShape().withTexture().withDisplayObject();
+            this.builder
+                .withCanvasShape()
+                .withTexture()
+                .withDisplayObject()
+                .withPixiAnimationTarget()
+                .withAnimation();
         }
         return this.builder.getComponent();
     }
+    constructFill() {
+        this.builder
+            .withCanvasFill()
+            .withTexture()
+            .withDisplayObject()
+            .withPixiAnimationTarget()
+            .withAnimation();
+        return this.builder.getComponent();
+    }
     constructSubtitle() {
         this.builder.withSubtitles().withHtmlText().withAnimation();
         if (this.sceneState.environment === 'server') {

package/dist/fonts/fontDiscovery.js

@@ -128,11 +128,17 @@ const collectComponentTextVariants = (component, configuredLookup, output) => {
     if (!textAppearance) {
         return;
     }
-    const family = normalizeFamily(textAppearance.fontFamily) ?? normalizeFamily(textAppearance.fontSource?.family);
+    const family = normalizeFamily(textAppearance.fontFamily) ??
+        normalizeFamily(textAppearance.fontSource?.family);
     if (!family) {
         return;
     }
     const configMatch = configuredLookup.get(family.toLowerCase());
+    // An unconfigured family is a browser/system-font request, not an implicit
+    // Google Fonts dependency. Remote loading must be explicit and reproducible.
+    if (!textAppearance.fontSource?.source && !configMatch) {
+        return;
+    }
     const source = (textAppearance.fontSource?.source ?? configMatch?.source ?? 'google');
     const fileUrl = normalizeFamily(textAppearance.fontSource?.fileUrl) ?? configMatch?.fileUrl ?? undefined;
     const weights = new Set();
@@ -191,6 +197,11 @@ export const discoverRequiredFontVariants = (sceneData, configuredFonts = []) =>
             if (component.type !== 'TEXT' && component.type !== 'SUBTITLES') {
                 continue;
             }
+            if (component.type === 'TEXT' &&
+                typeof component.text === 'string' &&
+                !component.text.trim()) {
+                continue;
+            }
             collectComponentTextVariants(component, configuredLookup, variants);
         }
     }

package/dist/layers/Layer.svelte.d.ts

@@ -482,6 +482,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -1101,6 +1107,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -1694,6 +1706,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -2285,6 +2303,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -2910,6 +2934,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -3505,6 +3535,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -4051,6 +4087,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -4602,6 +4644,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -5146,6 +5194,12 @@ export declare class Layer implements ILayer {
                         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/layers/Layer.svelte.js

@@ -49,7 +49,7 @@ export class Layer {
             this.#displayObject.addChild(component.displayObject);
         }
         // resort components
-        this.components.sort((a, b) => a.props.timeline.startAt - b.props.timeline.startAt);
+        this.components.sort((a, b) => a.props.order - b.props.order || a.props.timeline.startAt - b.props.timeline.startAt);
         this.#emit('layerschange');
     }
     syncDisplayObjects() {
@@ -92,29 +92,6 @@ export class Layer {
             }
             componentDisplayIndex += 1;
         }
-        // Ensure deterministic ordering among only component display objects without
-        // assuming a 1:1 mapping with all container children.
-        if (typeof this.#displayObject.getChildIndex === 'function' &&
-            typeof this.#displayObject.setChildIndex === 'function') {
-            let nextIndex = 0;
-            for (const component of this.components) {
-                const displayObject = component.displayObject;
-                if (!displayObject || displayObject.parent !== this.#displayObject) {
-                    continue;
-                }
-                const childCount = this.#displayObject.children?.length ?? 0;
-                if (childCount === 0) {
-                    break;
-                }
-                const currentIndex = this.#displayObject.getChildIndex(displayObject);
-                const targetIndex = Math.max(0, Math.min(nextIndex, childCount - 1));
-                if (currentIndex >= 0 && currentIndex !== targetIndex) {
-                    this.#displayObject.setChildIndex(displayObject, targetIndex);
-                    changed = true;
-                }
-                nextIndex += 1;
-            }
-        }
         return changed;
     }
     removeComponent(component) {
@@ -124,7 +101,7 @@ export class Layer {
             if (component.displayObject) {
                 this.#displayObject.removeChild(component.displayObject);
             }
-            this.components.sort((a, b) => a.props.timeline.startAt - b.props.timeline.startAt);
+            this.components.sort((a, b) => a.props.order - b.props.order || a.props.timeline.startAt - b.props.timeline.startAt);
             this.#emit('layerschange');
         }
     }

package/dist/managers/AppManager.svelte.js

@@ -45,6 +45,8 @@ export class AppManager {
         const { PixiPlugin } = await registerGsapPlugins();
         // give the plugin a reference to the PIXI object
         PixiPlugin.registerPIXI(PIXI);
+        const sceneBackground = this.state.data.settings.backgroundColor;
+        const solidBackground = typeof sceneBackground === 'string' ? sceneBackground : 'transparent';
         const baseOptions = {
             ...PIXI_DEFAULTS,
             preserveDrawingBuffer: environment === 'server',
@@ -52,8 +54,8 @@ export class AppManager {
             width,
             height,
             view: canvas,
-            backgroundColor: environment === 'server' ? 'transparent' : '#ffffff',
-            backgroundAlpha: environment === 'server' ? 0 : 1
+            backgroundColor: solidBackground,
+            backgroundAlpha: solidBackground === 'transparent' ? 0 : 1
         };
         let options = this.#buildRendererOptions(baseOptions, environment, rendererSelection);
         try {
@@ -175,10 +177,11 @@ export class AppManager {
     }
     #checkWebGLSupport() {
         try {
-            if (typeof document === 'undefined') {
-                return { supported: false, reason: 'WebGL unavailable: no document in server environment' };
+            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' };
             }
-            const probe = document.createElement('canvas');
             if (this.preferWebGL2 && probe.getContext('webgl2')) {
                 return { supported: true, reason: '' };
             }

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.');
     }
 }