visualfries 0.1.102 → 0.1.103

package/dist/SceneBuilder.svelte.js

@@ -276,6 +276,25 @@ export class SceneBuilder {
             },
             checksum: 'new-' + uuidv4()
         };
+        // For VIDEO components, adjust source.startAt for the second part
+        // source.startAt determines at what point in the video file playback starts
+        // when the timeline reaches timeline.startAt
+        if (cloneData.type === 'VIDEO') {
+            const videoClone = cloneData;
+            // Calculate the time offset from original component start to split point
+            const timeOffsetFromStart = currentTime - compStart;
+            // Get current source.startAt (or 0 if not set/undefined)
+            const currentSourceStartAt = videoClone.source?.startAt ?? 0;
+            // The new source.startAt is the original offset plus the split offset
+            const newSourceStartAt = currentSourceStartAt + timeOffsetFromStart;
+            // Ensure source object exists and update startAt
+            if (!videoClone.source) {
+                videoClone.source = { startAt: newSourceStartAt };
+            }
+            else {
+                videoClone.source.startAt = newSourceStartAt;
+            }
+        }
         // Update original component's end time
         component.props.setEnd(this.currentTime);
         // Add the cloned component to the same layer

package/dist/builders/_ComponentState.svelte.js

@@ -179,8 +179,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/schemas/runtime/types.d.ts

@@ -37,6 +37,13 @@ export interface LayerEvents {
 export interface ComponentEvents {
     componentschange: void;
     componentchange: ComponentData;
+    hookerror: {
+        hookName: string;
+        hookType: string;
+        error: Error;
+        componentId: string;
+        timestamp: number;
+    };
 }
 export interface SubtitlesEvents {
     subtitleschange: void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visualfries",
-  "version": "0.1.102",
+  "version": "0.1.103",
   "license": "MIT",
   "author": "ContentFries",
   "repository": {