visualfries 0.1.902 → 0.1.1096

package/dist/SceneBuilder.svelte.js

@@ -264,16 +264,11 @@ export class SceneBuilder {
         if (!layer) {
             return false;
         }
-        // Create clone of component data with adjusted times
-        const originalEndAt = component.props.timeline.endAt;
+        // Create clone of component data EXACTLY as it is
         const newData = changeIdDeep(component.props.getData());
         const cloneData = {
             ...newData,
             id: uuidv4(), // Generate new ID for clone
-            timeline: {
-                ...newData.timeline,
-                endAt: originalEndAt
-            },
             checksum: 'new-' + uuidv4()
         };
         // Update original component's end time

package/dist/animations/builders/WordHighlighterAnimationBuilder.js

@@ -110,6 +110,11 @@ export class WordHighlighterAnimationBuilder {
         };
     }
     static createBackgroundElement(target) {
+        // Clean up any existing highlighter-bg element from previous builds
+        const existingBg = target.querySelector('#highlighter-bg');
+        if (existingBg) {
+            existingBg.remove();
+        }
         const bgHighlighter = document.createElement('div');
         bgHighlighter.id = 'highlighter-bg';
         bgHighlighter.style.position = 'absolute';

package/dist/builders/_ComponentState.svelte.js

@@ -108,39 +108,42 @@ export class ComponentState {
         this.#emitChange();
     }
     #changeVideoStart(diff) {
-        if (this.type === 'VIDEO') {
+        if (this.type === 'VIDEO' || this.type === 'AUDIO') {
             let source = this.#data.source;
             if (!source) {
-                source = {
-                    startAt: 0
-                };
+                source = { startAt: 0 };
                 this.#data.source = source;
             }
             if (source.startAt !== undefined && source.startAt !== null) {
                 source.startAt += diff;
                 source.startAt = Math.max(0, source.startAt);
             }
+        }
+    }
+    #changeVideoEnd(diff) {
+        if (this.type === 'VIDEO' || this.type === 'AUDIO') {
+            let source = this.#data.source;
+            if (!source) {
+                source = { startAt: 0 };
+                this.#data.source = source;
+            }
+            const currentDuration = this.#data.timeline.endAt - this.#data.timeline.startAt;
             if (source.endAt !== undefined && source.endAt !== null) {
                 source.endAt += diff;
             }
+            else {
+                // Initialize the implicit end bound via start bound prior to truncation
+                const startAt = source.startAt || 0;
+                source.endAt = startAt + currentDuration + diff;
+            }
         }
-        // TODO verify starting time is not beyond video duration
-        // const metadata = this.#data!.metadata
-        // 	? (this.#data!.metadata as Metadata)
-        // 	: ({ starting_time: 0 } as Metadata);
-        // let startingTime = metadata.starting_time ? (metadata.starting_time as number) : 0;
-        // startingTime += diff;
-        // startingTime = Math.max(0, startingTime);
-        // this.updateMetadata({
-        // 	starting_time: startingTime
-        // });
     }
     setStart(start) {
         const beforeStart = this.sceneState.transformTime(this.#data.timeline.startAt);
         const newStart = this.sceneState.transformTime(start);
         const diff = newStart - beforeStart;
         if (diff !== 0) {
-            if (this.type === 'VIDEO') {
+            if (this.type === 'VIDEO' || this.type === 'AUDIO') {
                 this.#changeVideoStart(diff);
             }
             this.#data.timeline.startAt = this.sceneState.transformTime(start);
@@ -148,8 +151,16 @@ export class ComponentState {
         }
     }
     setEnd(end) {
-        this.#data.timeline.endAt = this.sceneState.transformTime(end);
-        this.#emitChange();
+        const beforeEnd = this.sceneState.transformTime(this.#data.timeline.endAt);
+        const newEnd = this.sceneState.transformTime(end);
+        const diff = newEnd - beforeEnd;
+        if (diff !== 0) {
+            if (this.type === 'VIDEO' || this.type === 'AUDIO') {
+                this.#changeVideoEnd(diff);
+            }
+            this.#data.timeline.endAt = this.sceneState.transformTime(end);
+            this.#emitChange();
+        }
     }
     setStreamPath(path) {
         // if (this.type === 'VIDEO' || this.type === 'AUDIO') {
@@ -179,8 +190,10 @@ export class ComponentState {
         // }
     }
     async updateAppearance(appearance) {
-        const mergedAppearance = merge({}, this.#data.appearance, appearance);
-        this.#data = { ...this.#data, appearance: mergedAppearance };
+        // Use $state.snapshot() to properly extract all properties from the reactive proxy
+        const currentData = $state.snapshot(this.#data);
+        const mergedAppearance = merge({}, currentData.appearance, appearance);
+        this.#data = { ...currentData, appearance: mergedAppearance };
         this.#emitChange();
         await this.maybeAutoRefresh();
     }

package/dist/commands/SeekCommand.js

@@ -23,6 +23,21 @@ export class SeekCommand {
         this.timeline.seek(time);
         // Ensure a deterministic render on server after seek to advance media frames
         if (this.state.environment === 'server') {
+            // Wait for fonts to be ready before rendering
+            // This is critical for subtitle animations that use SplitText -
+            // if fonts aren't loaded, text measurements will be wrong and
+            // animations may fail silently or not appear on first subtitles
+            if (typeof document !== 'undefined' && document.fonts?.ready) {
+                try {
+                    await Promise.race([
+                        document.fonts.ready,
+                        new Promise((resolve) => setTimeout(resolve, 2000)) // 2s timeout
+                    ]);
+                }
+                catch {
+                    // Ignore font loading errors, continue with rendering
+                }
+            }
             // Try multiple render passes until loading state clears or attempts exhausted
             const maxAttempts = 10;
             for (let i = 0; i < maxAttempts; i += 1) {
@@ -34,6 +49,11 @@ export class SeekCommand {
             if (this.state.state === 'loading') {
                 console.warn('SeekCommand: Max render attempts exhausted while still loading');
             }
+            // Re-seek to apply correct animation state to any animations
+            // that were added during the render passes above.
+            // This fixes the race condition where subtitle animations are added
+            // AFTER the initial seek, causing them to miss their initial state.
+            this.timeline.seek(time);
         }
     }
 }

package/dist/components/ComponentContext.svelte.js

@@ -98,7 +98,22 @@ export class ComponentContext {
         const sortedHooks = [...hooks].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
         for (let i = 0; i < sortedHooks.length; i += 1) {
             const handler = sortedHooks[i];
-            await handler.handle(type, this);
+            try {
+                await handler.handle(type, this);
+            }
+            catch (error) {
+                // Log the error but continue to next hook
+                const hookName = handler.constructor?.name ?? `Hook[${i}]`;
+                console.warn(`[ComponentContext] Hook "${hookName}" failed during "${type}" for component "${this.id}":`, error instanceof Error ? error.message : String(error));
+                // Emit error event for debugging/monitoring
+                this.eventManager.emit('hookerror', {
+                    hookName,
+                    hookType: type,
+                    error: error instanceof Error ? error : new Error(String(error)),
+                    componentId: this.id,
+                    timestamp: Date.now()
+                });
+            }
         }
     }
     destroy() { }

package/dist/components/ComponentContextHelpers.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Component Context Helpers
+ *
+ * Type guards and helper functions for type-safe access to component-specific data
+ * in hook contexts. Eliminates the need for `as any` casts throughout the codebase.
+ */
+import type { Component, VideoComponent, AudioComponent, ImageComponent, GifComponent, TextComponent, SubtitleComponent, ShapeComponent, ColorComponent, GradientComponent, ComponentSource, IComponentContext } from '..';
+export declare const MEDIA_COMPONENT_TYPES: readonly ["VIDEO", "AUDIO"];
+export declare const SOURCE_COMPONENT_TYPES: readonly ["VIDEO", "AUDIO", "IMAGE", "GIF"];
+export declare const VISUAL_COMPONENT_TYPES: readonly ["VIDEO", "IMAGE", "GIF", "TEXT", "SHAPE", "SUBTITLES", "COLOR", "GRADIENT"];
+export type MediaComponentType = (typeof MEDIA_COMPONENT_TYPES)[number];
+export type SourceComponentType = (typeof SOURCE_COMPONENT_TYPES)[number];
+/**
+ * Type guard for VIDEO component
+ */
+export declare function isVideoComponent(data: Component | undefined): data is VideoComponent;
+/**
+ * Type guard for AUDIO component
+ */
+export declare function isAudioComponent(data: Component | undefined): data is AudioComponent;
+/**
+ * Type guard for IMAGE component
+ */
+export declare function isImageComponent(data: Component | undefined): data is ImageComponent;
+/**
+ * Type guard for GIF component
+ */
+export declare function isGifComponent(data: Component | undefined): data is GifComponent;
+/**
+ * Type guard for TEXT component
+ */
+export declare function isTextComponent(data: Component | undefined): data is TextComponent;
+/**
+ * Type guard for SUBTITLES component
+ */
+export declare function isSubtitleComponent(data: Component | undefined): data is SubtitleComponent;
+/**
+ * Type guard for SHAPE component
+ */
+export declare function isShapeComponent(data: Component | undefined): data is ShapeComponent;
+/**
+ * Type guard for COLOR component
+ */
+export declare function isColorComponent(data: Component | undefined): data is ColorComponent;
+/**
+ * Type guard for GRADIENT component
+ */
+export declare function isGradientComponent(data: Component | undefined): data is GradientComponent;
+/**
+ * Type guard for components with a media source (VIDEO, AUDIO, IMAGE, GIF)
+ */
+export declare function hasSource(data: Component | undefined): data is VideoComponent | AudioComponent | ImageComponent | GifComponent;
+/**
+ * Type guard for media components (VIDEO, AUDIO)
+ */
+export declare function isMediaComponent(data: Component | undefined): data is VideoComponent | AudioComponent;
+/**
+ * Safely get source from component data
+ */
+export declare function getSource(data: Component | undefined): ComponentSource | undefined;
+/**
+ * Safely get source.url from component data
+ */
+export declare function getSourceUrl(data: Component | undefined): string | undefined;
+/**
+ * Safely get source.startAt from component data (for VIDEO/AUDIO)
+ */
+export declare function getSourceStartAt(data: Component | undefined): number | undefined;
+/**
+ * Safely get muted state from media component
+ */
+export declare function getMuted(data: Component | undefined): boolean;
+/**
+ * Safely get volume from media component
+ */
+export declare function getVolume(data: Component | undefined): number;
+/**
+ * Safely get text content from TEXT component
+ */
+export declare function getTextContent(data: Component | undefined): string | undefined;
+/**
+ * Get typed component data from context
+ */
+export declare function getContextData<T extends Component>(context: IComponentContext, typeGuard: (data: Component | undefined) => data is T): T | undefined;
+/**
+ * Get video component data from context
+ */
+export declare function getVideoData(context: IComponentContext): VideoComponent | undefined;
+/**
+ * Get audio component data from context
+ */
+export declare function getAudioData(context: IComponentContext): AudioComponent | undefined;
+/**
+ * Get image component data from context
+ */
+export declare function getImageData(context: IComponentContext): ImageComponent | undefined;
+/**
+ * Get gif component data from context
+ */
+export declare function getGifData(context: IComponentContext): GifComponent | undefined;
+/**
+ * Get text component data from context
+ */
+export declare function getTextData(context: IComponentContext): TextComponent | undefined;
+/**
+ * Get source from context's component data
+ */
+export declare function getContextSource(context: IComponentContext): ComponentSource | undefined;
+/**
+ * Get media properties (muted, volume) from context
+ */
+export declare function getMediaProps(context: IComponentContext): {
+    muted: boolean;
+    volume: number;
+};

package/dist/components/ComponentContextHelpers.js

@@ -0,0 +1,196 @@
+/**
+ * Component Context Helpers
+ *
+ * Type guards and helper functions for type-safe access to component-specific data
+ * in hook contexts. Eliminates the need for `as any` casts throughout the codebase.
+ */
+// ============================================================================
+// Component Type Constants
+// ============================================================================
+export const MEDIA_COMPONENT_TYPES = ['VIDEO', 'AUDIO'];
+export const SOURCE_COMPONENT_TYPES = ['VIDEO', 'AUDIO', 'IMAGE', 'GIF'];
+export const VISUAL_COMPONENT_TYPES = ['VIDEO', 'IMAGE', 'GIF', 'TEXT', 'SHAPE', 'SUBTITLES', 'COLOR', 'GRADIENT'];
+// ============================================================================
+// Type Guards for Component Data
+// ============================================================================
+/**
+ * Type guard for VIDEO component
+ */
+export function isVideoComponent(data) {
+    return data?.type === 'VIDEO';
+}
+/**
+ * Type guard for AUDIO component
+ */
+export function isAudioComponent(data) {
+    return data?.type === 'AUDIO';
+}
+/**
+ * Type guard for IMAGE component
+ */
+export function isImageComponent(data) {
+    return data?.type === 'IMAGE';
+}
+/**
+ * Type guard for GIF component
+ */
+export function isGifComponent(data) {
+    return data?.type === 'GIF';
+}
+/**
+ * Type guard for TEXT component
+ */
+export function isTextComponent(data) {
+    return data?.type === 'TEXT';
+}
+/**
+ * Type guard for SUBTITLES component
+ */
+export function isSubtitleComponent(data) {
+    return data?.type === 'SUBTITLES';
+}
+/**
+ * Type guard for SHAPE component
+ */
+export function isShapeComponent(data) {
+    return data?.type === 'SHAPE';
+}
+/**
+ * Type guard for COLOR component
+ */
+export function isColorComponent(data) {
+    return data?.type === 'COLOR';
+}
+/**
+ * Type guard for GRADIENT component
+ */
+export function isGradientComponent(data) {
+    return data?.type === 'GRADIENT';
+}
+/**
+ * Type guard for components with a media source (VIDEO, AUDIO, IMAGE, GIF)
+ */
+export function hasSource(data) {
+    return (data !== undefined &&
+        SOURCE_COMPONENT_TYPES.includes(data.type));
+}
+/**
+ * Type guard for media components (VIDEO, AUDIO)
+ */
+export function isMediaComponent(data) {
+    return (data !== undefined &&
+        MEDIA_COMPONENT_TYPES.includes(data.type));
+}
+// ============================================================================
+// Safe Accessor Helpers
+// ============================================================================
+/**
+ * Safely get source from component data
+ */
+export function getSource(data) {
+    if (hasSource(data)) {
+        return data.source;
+    }
+    return undefined;
+}
+/**
+ * Safely get source.url from component data
+ */
+export function getSourceUrl(data) {
+    return getSource(data)?.url;
+}
+/**
+ * Safely get source.startAt from component data (for VIDEO/AUDIO)
+ */
+export function getSourceStartAt(data) {
+    const startAt = getSource(data)?.startAt;
+    // Convert null to undefined for consistency
+    return startAt ?? undefined;
+}
+/**
+ * Safely get muted state from media component
+ */
+export function getMuted(data) {
+    if (isVideoComponent(data) || isAudioComponent(data)) {
+        return data.muted ?? false;
+    }
+    return false;
+}
+/**
+ * Safely get volume from media component
+ */
+export function getVolume(data) {
+    if (isVideoComponent(data) || isAudioComponent(data)) {
+        return data.volume ?? 1;
+    }
+    return 1;
+}
+/**
+ * Safely get text content from TEXT component
+ */
+export function getTextContent(data) {
+    if (isTextComponent(data)) {
+        return data.text;
+    }
+    return undefined;
+}
+// ============================================================================
+// Context Helper Functions
+// ============================================================================
+/**
+ * Get typed component data from context
+ */
+export function getContextData(context, typeGuard) {
+    const data = context.contextData;
+    if (typeGuard(data)) {
+        return data;
+    }
+    return undefined;
+}
+/**
+ * Get video component data from context
+ */
+export function getVideoData(context) {
+    return getContextData(context, isVideoComponent);
+}
+/**
+ * Get audio component data from context
+ */
+export function getAudioData(context) {
+    return getContextData(context, isAudioComponent);
+}
+/**
+ * Get image component data from context
+ */
+export function getImageData(context) {
+    return getContextData(context, isImageComponent);
+}
+/**
+ * Get gif component data from context
+ */
+export function getGifData(context) {
+    return getContextData(context, isGifComponent);
+}
+/**
+ * Get text component data from context
+ */
+export function getTextData(context) {
+    return getContextData(context, isTextComponent);
+}
+/**
+ * Get source from context's component data
+ */
+export function getContextSource(context) {
+    const data = context.contextData;
+    return getSource(data);
+}
+/**
+ * Get media properties (muted, volume) from context
+ */
+export function getMediaProps(context) {
+    const data = context.contextData;
+    return {
+        muted: getMuted(data),
+        volume: getVolume(data)
+    };
+}

package/dist/components/SafeHookRunner.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Safe Hook Runner
+ *
+ * Utility for safely executing hooks with error boundaries.
+ * Prevents one failing hook from crashing the entire component lifecycle.
+ */
+import type { EventManager } from '../managers/EventManager.js';
+export interface HookError {
+    hookName: string;
+    hookType: string;
+    error: Error;
+    componentId: string;
+    timestamp: number;
+}
+export interface SafeHookRunnerOptions {
+    /**
+     * Whether to continue executing remaining hooks after one fails
+     * @default true
+     */
+    continueOnError?: boolean;
+    /**
+     * Whether to log errors to console
+     * @default true
+     */
+    logErrors?: boolean;
+    /**
+     * Event manager to emit error events
+     */
+    eventManager?: EventManager;
+}
+/**
+ * Safely execute a single hook handler with error boundary
+ */
+export declare function safeExecuteHook<T>(hookName: string, hookType: string, componentId: string, handler: () => Promise<T> | T, options?: SafeHookRunnerOptions): Promise<{
+    success: boolean;
+    result?: T;
+    error?: HookError;
+}>;
+/**
+ * Execute multiple hooks in sequence with error boundaries
+ */
+export declare function safeExecuteHooks(hooks: Array<{
+    name: string;
+    handler: () => Promise<void> | void;
+}>, hookType: string, componentId: string, options?: SafeHookRunnerOptions): Promise<{
+    allSucceeded: boolean;
+    errors: HookError[];
+}>;
+/**
+ * Create a wrapped version of a hook handler that catches errors
+ */
+export declare function createSafeHandler<T extends (...args: any[]) => Promise<any> | any>(hookName: string, hookType: string, componentId: string, handler: T, options?: SafeHookRunnerOptions): T;

package/dist/components/SafeHookRunner.js

@@ -0,0 +1,67 @@
+/**
+ * Safe Hook Runner
+ *
+ * Utility for safely executing hooks with error boundaries.
+ * Prevents one failing hook from crashing the entire component lifecycle.
+ */
+const defaultOptions = {
+    continueOnError: true,
+    logErrors: true
+};
+/**
+ * Safely execute a single hook handler with error boundary
+ */
+export async function safeExecuteHook(hookName, hookType, componentId, handler, options = {}) {
+    const opts = { ...defaultOptions, ...options };
+    try {
+        const result = await handler();
+        return { success: true, result };
+    }
+    catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        const hookError = {
+            hookName,
+            hookType,
+            error,
+            componentId,
+            timestamp: Date.now()
+        };
+        if (opts.logErrors) {
+            console.warn(`[SafeHookRunner] Hook "${hookName}" failed during "${hookType}" for component "${componentId}":`, error.message);
+        }
+        if (opts.eventManager) {
+            opts.eventManager.emit('hookerror', hookError);
+        }
+        return { success: false, error: hookError };
+    }
+}
+/**
+ * Execute multiple hooks in sequence with error boundaries
+ */
+export async function safeExecuteHooks(hooks, hookType, componentId, options = {}) {
+    const opts = { ...defaultOptions, ...options };
+    const errors = [];
+    for (const hook of hooks) {
+        const result = await safeExecuteHook(hook.name, hookType, componentId, hook.handler, options);
+        if (!result.success && result.error) {
+            errors.push(result.error);
+            if (!opts.continueOnError) {
+                break;
+            }
+        }
+    }
+    return {
+        allSucceeded: errors.length === 0,
+        errors
+    };
+}
+/**
+ * Create a wrapped version of a hook handler that catches errors
+ */
+export function createSafeHandler(hookName, hookType, componentId, handler, options = {}) {
+    const wrapped = async (...args) => {
+        const result = await safeExecuteHook(hookName, hookType, componentId, () => handler(...args), options);
+        return result.result;
+    };
+    return wrapped;
+}

package/dist/components/hooks/HtmlToCanvasHook.js

@@ -67,7 +67,30 @@ export class HtmlToCanvasHook {
         }
         const { width, height } = this.state;
         if (!this.svgBase) {
-            const { base, content, end } = await svgGenerator.generateSVG(this.#htmlEl, this.#context.data.appearance.text, width, height, 'svg-' + this.#context.contextData.id, encodeURIComponent(this.state.getCharactersList().join('')));
+            // Safely encode characters list, filtering out any problematic characters
+            let encodedChars = '';
+            try {
+                const charsList = this.state.getCharactersList().join('');
+                encodedChars = encodeURIComponent(charsList);
+            }
+            catch (error) {
+                // If encoding fails (e.g., unpaired surrogates), filter to only safe characters
+                console.warn('Failed to encode characters list, filtering to safe characters:', error);
+                const safeChars = this.state
+                    .getCharactersList()
+                    .filter((char) => {
+                    try {
+                        encodeURIComponent(char);
+                        return true;
+                    }
+                    catch {
+                        return false;
+                    }
+                })
+                    .join('');
+                encodedChars = encodeURIComponent(safeChars);
+            }
+            const { base, content, end } = await svgGenerator.generateSVG(this.#htmlEl, this.#context.data.appearance.text, width, height, 'svg-' + this.#context.contextData.id, encodedChars);
             this.svgBase = base;
             this.svgEnd = end;
             this.svg = base + content + end;

package/dist/components/hooks/MediaHook.js

@@ -2,7 +2,7 @@ import { MediaManager } from '../../managers/MediaManager.js';
 import { z } from 'zod';
 import { StateManager } from '../../managers/StateManager.svelte.js';
 export class MediaHook {
-    types = ['setup', 'update', 'destroy', 'refresh'];
+    types = ['setup', 'update', 'destroy'];
     priority = 1;
     #context;
     #mediaElement;