visualfries 0.1.10115 → 0.3.2

package/dist/builders/html/StyleBuilder.js

@@ -47,23 +47,24 @@ export class StyleBuilder {
             const textAppearance = appearance?.text;
             if (textAppearance?.shadow) {
                 component.effects.map['textShadow'] = {
-                    preset: TextEffectPresetName.DEFAULT,
+                    structured: true,
                     enabled: textAppearance.shadow.enabled ? true : false,
-                    color: typeof textAppearance.color === 'string'
-                        ? textAppearance.color
-                        : textAppearance.color.colors[0],
+                    color: textAppearance.shadow.color ?? '#000000',
                     size: textAppearance.shadow.size,
-                    blur: textAppearance.shadow.blur,
+                    blur: textAppearance.shadow.blur ?? 0,
+                    offsetX: textAppearance.shadow.offsetX ?? 0,
+                    offsetY: textAppearance.shadow.offsetY ?? 0,
+                    opacity: textAppearance.shadow.opacity ?? 1,
                     type: 'textShadow'
                 };
             }
             if (textAppearance?.outline) {
-                // TODO
                 component.effects.map['textOutline'] = {
-                    preset: TextEffectPresetName.OUTLINE,
+                    structured: true,
                     enabled: textAppearance.outline.enabled ? true : false,
                     size: textAppearance.outline.size,
-                    color: textAppearance.outline.color
+                    color: textAppearance.outline.color,
+                    opacity: textAppearance.outline.opacity ?? 1
                 };
             }
             return component;

package/dist/builders/html/TextComponentHtmlBuilder.js

@@ -23,7 +23,8 @@ export class TextComponentHtmlBuilder {
             'height',
             'justifyContent',
             'alignItems',
-            'display'
+            'display',
+            'transform'
         ];
         if (get(appearance, 'background.enabled', false) &&
             get(appearance, 'background.target') === 'wrapper') {
@@ -50,7 +51,8 @@ export class TextComponentHtmlBuilder {
             'alignItems',
             'display',
             'width',
-            'height'
+            'height',
+            'transform'
         ];
         let addPadding = false;
         if (get(appearance, 'background.enabled', false)) {

package/dist/builders/html/processors/AppearanceStyleProcessor.js

@@ -48,7 +48,7 @@ export class AppearanceStyleProcessor {
         if (appearance.background && get(appearance.background, 'enabled')) {
             const color = ColorTransformer.transform(get(appearance.background, 'color', '#000000'), 'background');
             if (get(appearance, 'background.radius', 0) > 0) {
-                styles.borderRadius = `${get(appearance.background, 'radius')}em`;
+                styles.borderRadius = `${get(appearance.background, 'radius')}px`;
             }
             styles = { ...styles, ...color };
         }

package/dist/builders/html/processors/TextAppearanceStyleProcessor.js

@@ -32,6 +32,13 @@ export class TextAppearanceStyleProcessor {
         if (textAppearance.textTransform && textAppearance.textTransform !== 'none') {
             styles.textTransform = textAppearance.textTransform;
         }
+        if (textAppearance.padding !== undefined) {
+            styles.padding =
+                typeof textAppearance.padding === 'number'
+                    ? `${textAppearance.padding}px`
+                    : `${textAppearance.padding.top}px ${textAppearance.padding.right}px ${textAppearance.padding.bottom}px ${textAppearance.padding.left}px`;
+            styles.boxSizing = 'border-box';
+        }
         return styles;
     }
 }

package/dist/builders/html/processors/TextEffectsStyleProcessor.js

@@ -1,11 +1,16 @@
 import { z } from 'zod';
 import { TextEffectPresetName, TextShadowBuilder } from '../TextShadowBuilder.js';
+import tinycolor from 'tinycolor2';
 const GenericTextEffectShape = z.object({
     enabled: z.boolean().optional(),
     preset: z.enum(TextEffectPresetName).optional(),
     size: z.number().optional(),
     color: z.string().optional(),
-    opacity: z.number().optional()
+    opacity: z.number().optional(),
+    blur: z.number().optional(),
+    offsetX: z.number().optional(),
+    offsetY: z.number().optional(),
+    structured: z.boolean().optional()
 });
 export class TextEffectsStyleProcessor {
     process(effectsMap) {
@@ -24,24 +29,38 @@ export class TextEffectsStyleProcessor {
                 const data = parsedEffect.data;
                 const size = data.size || 0.3;
                 const color = data.color || '#000000';
-                const shadow = TextShadowBuilder.build({
-                    preset: TextEffectPresetName.OUTLINE,
-                    size,
-                    color,
-                    opacity: data.opacity || 1
-                });
-                if (shadow && shadow !== 'none') {
-                    shadowStrings.push(shadow);
+                if (data.structured) {
+                    const strokeColor = data.opacity === undefined || data.opacity === 1
+                        ? color
+                        : tinycolor(color).setAlpha(data.opacity).toRgbString();
+                    styles.webkitTextStroke = `${size}px ${strokeColor}`;
+                    styles.paintOrder = 'stroke fill';
+                }
+                else {
+                    const shadow = TextShadowBuilder.build({
+                        preset: TextEffectPresetName.OUTLINE,
+                        size,
+                        color,
+                        opacity: data.opacity ?? 1
+                    });
+                    if (shadow && shadow !== 'none') {
+                        shadowStrings.push(shadow);
+                    }
                 }
-                // styles.webkitTextStroke = `${size}em ${color}`;
-                // styles.webkitTextFillColor = 'white';
-                // styles.paintOrder = 'stroke fill';
             }
         }
         for (const effectName in effectsMap) {
             const effect = effectsMap[effectName];
             if (effect.type === 'textShadow') {
                 const parsedEffect = GenericTextEffectShape.safeParse(effect);
+                if (parsedEffect.success && parsedEffect.data.enabled && parsedEffect.data.structured) {
+                    const data = parsedEffect.data;
+                    const color = tinycolor(data.color ?? '#000000')
+                        .setAlpha(data.opacity ?? 1)
+                        .toRgbString();
+                    shadowStrings.push(`${data.offsetX ?? 0}px ${data.offsetY ?? 0}px ${data.blur ?? data.size ?? 0}px ${color}`);
+                    continue;
+                }
                 if (parsedEffect.success &&
                     parsedEffect.data.enabled &&
                     parsedEffect.data.size &&
@@ -52,7 +71,7 @@ export class TextEffectsStyleProcessor {
                         preset,
                         size: data.size || 0.3,
                         color: data.color || '#000000',
-                        opacity: data.opacity || 1
+                        opacity: data.opacity ?? 1
                     });
                     if (shadow && shadow !== 'none') {
                         shadowStrings.push(shadow);

package/dist/commands/ReplaceSourceOnTimeCommand.js

@@ -27,7 +27,7 @@ export class ReplaceSourceOnTimeCommand {
         if (!blob) {
             return;
         }
-        const cacheKey = `replace:${componentId}:${frameIndex}:${base64data.length}`;
+        const cacheKey = `replace:${componentId}:${frameIndex}:${this.#hashBase64(base64data)}`;
         this.deterministicMediaManager.setOneTimeOverride(componentId, frameIndex, {
             kind: 'blob',
             cacheKey,
@@ -52,4 +52,12 @@ export class ReplaceSourceOnTimeCommand {
             return null;
         }
     }
+    #hashBase64(value) {
+        let hash = 0x811c9dc5;
+        for (let index = 0; index < value.length; index += 1) {
+            hash ^= value.charCodeAt(index);
+            hash = Math.imul(hash, 0x01000193) >>> 0;
+        }
+        return hash.toString(16).padStart(8, '0');
+    }
 }

package/dist/commands/SeekCommand.js

@@ -54,7 +54,8 @@ export class SeekCommand {
                 continue;
             }
             if (this.#hasBlurEffect(component)) {
-                const sourceElement = component.context.getResource('videoElement') || component.context.getResource('imageElement');
+                const sourceElement = component.context.getResource('videoElement') ||
+                    component.context.getResource('imageElement');
                 if (!sourceElement) {
                     pending.push(component.id);
                 }
@@ -65,7 +66,7 @@ export class SeekCommand {
     #getCurrentSceneFrameIndex() {
         const fps = this.state.data?.settings?.fps || 30;
         const currentTime = this.state.currentTime ?? 0;
-        return Math.max(0, Math.round(currentTime * fps));
+        return Math.max(0, Math.floor(currentTime * fps));
     }
     async #delay(ms) {
         if (ms <= 0) {
@@ -119,7 +120,11 @@ export class SeekCommand {
             }
         }
         if (pending.length > 0) {
-            throw new Error(`Deterministic media was not ready after seek for active components: ${pending.join(', ')}`);
+            const message = `Deterministic media was not ready after seek for active components: ${pending.join(', ')}`;
+            if (this.deterministicMediaManager.config.strict) {
+                throw new Error(message);
+            }
+            console.warn(message);
         }
     }
     async execute(args) {
@@ -129,6 +134,16 @@ export class SeekCommand {
         }
         const time = Math.max(0, Math.min(check.data.time, this.state.duration));
         this.timeline.seek(time);
+        // Timeline events start rendering asynchronously. Await the shared render queue
+        // on clients so seek() is a frame-readiness boundary for preview captures.
+        if (this.state.environment !== 'server') {
+            await this.renderManager.render();
+            // Components may attach animation timelines during their first active update.
+            // Re-seek after construction, then render the authored state before resolving.
+            this.timeline.seek(time);
+            await this.renderManager.render();
+            return;
+        }
         // Ensure a deterministic render on server after seek to advance media frames
         if (this.state.environment === 'server') {
             const deterministicEnabled = this.deterministicMediaManager.isEnabled();
@@ -152,12 +167,10 @@ export class SeekCommand {
             // 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);
+            await this.renderManager.render();
             if (deterministicEnabled) {
                 await this.#renderUntilDeterministicReady();
             }
-            else {
-                await this.renderManager.render();
-            }
         }
     }
 }

package/dist/components/AnimatedGIF.d.ts

@@ -9,6 +9,7 @@ interface FrameObject {
     /** The end of the current frame, in milliseconds */
     end: number;
 }
+export declare const resolveGifFrameIndexAtTime: (frames: ReadonlyArray<Pick<FrameObject, "start" | "end">>, duration: number, timeMs: number, loop: boolean) => number;
 /** Default options for all AnimatedGIF objects. */
 interface AnimatedGIFOptions {
     /** Whether to start playing right away */
@@ -138,6 +139,8 @@ declare class AnimatedGIF extends Sprite {
     constructor(frames: FrameObject[], options: Partial<AnimatedGIFOptions> & AnimatedGIFSize);
     /** Stops the animation. */
     stop(): void;
+    /** Seek using authored GIF frame delays rather than assuming a fixed FPS. */
+    seek(timeMs: number): void;
     /** Plays the animation. */
     play(): void;
     /**

package/dist/components/AnimatedGIF.js

@@ -1,6 +1,16 @@
 import { Sprite } from "pixi.js-legacy";
 import { Texture, Renderer, settings, SCALE_MODES, Ticker, UPDATE_PRIORITY, } from "pixi.js-legacy";
 import { parseGIF, decompressFrames } from "gifuct-js";
+export const resolveGifFrameIndexAtTime = (frames, duration, timeMs, loop) => {
+    if (!frames.length || duration <= 0)
+        return 0;
+    const safeTime = Number.isFinite(timeMs) ? Math.max(0, timeMs) : 0;
+    const localTime = loop
+        ? safeTime % duration
+        : Math.min(safeTime, Math.max(0, duration - Number.EPSILON));
+    const index = frames.findIndex((frame) => frame.start <= localTime && frame.end > localTime);
+    return index >= 0 ? index : frames.length - 1;
+};
 /**
  * Runtime object to play animated GIFs. This object is similar to an AnimatedSprite.
  * It support playback (seek, play, stop) as well as animation speed and looping.
@@ -206,6 +216,21 @@ class AnimatedGIF extends Sprite {
             this._isConnectedToTicker = false;
         }
     }
+    /** Seek using authored GIF frame delays rather than assuming a fixed FPS. */
+    seek(timeMs) {
+        if (!Number.isFinite(this.duration) || this.duration <= 0) {
+            this._currentTime = 0;
+            if (this._frames.length > 0)
+                this.updateFrameIndex(0);
+            return;
+        }
+        const safeTime = Number.isFinite(timeMs) ? Math.max(0, timeMs) : 0;
+        const localTime = this.loop
+            ? safeTime % this.duration
+            : Math.min(safeTime, Math.max(0, this.duration - Number.EPSILON));
+        this._currentTime = localTime;
+        this.updateFrameIndex(resolveGifFrameIndexAtTime(this._frames, this.duration, safeTime, this.loop));
+    }
     /** Plays the animation. */
     play() {
         if (this._playing) {
@@ -226,7 +251,9 @@ class AnimatedGIF extends Sprite {
      * @readonly
      */
     get progress() {
-        return this._currentTime / this.duration;
+        return Number.isFinite(this.duration) && this.duration > 0
+            ? this._currentTime / this.duration
+            : 0;
     }
     /** `true` if the current animation is playing */
     get playing() {

package/dist/components/Component.svelte.d.ts

@@ -21,13 +21,13 @@ export declare class Component implements IComponent {
     update(): Promise<void>;
     refresh(type?: ComponentRefreshType): Promise<void>;
     destroy(): Promise<void>;
-    updateAppearance(appearance: Partial<AppearanceInput>): Promise<Component>;
+    updateAppearance(appearance: Partial<AppearanceInput>): Component;
     setStart(start: number): Component;
     setEnd(end: number): Component;
-    updateText(text: string): Promise<Component>;
-    setText(text: string): Promise<Component>;
-    setVisible(visible: boolean): Promise<Component>;
-    setOrder(order: number): Promise<Component>;
+    updateText(text: string): Component;
+    setText(text: string): Component;
+    setVisible(visible: boolean): Component;
+    setOrder(order: number): Component;
     onChange(callback: (changes: ComponentData) => void): () => void;
     onTimelineChange(callback: (time: number) => void): () => void;
 }

package/dist/components/Component.svelte.js

@@ -4,6 +4,7 @@ export class Component {
     #context;
     #hooks = [];
     #autoRefresh = false;
+    #hookLock = Promise.resolve();
     #eventUnsubscribers = [];
     constructor(cradle) {
         this.#properties = cradle.componentState;
@@ -47,12 +48,28 @@ export class Component {
     }
     addHook(hook, priority) {
         const maxPriority = this.#hooks.length > 0 ? Math.max(...this.#hooks.map((h) => h.priority ?? 0)) : 0;
-        hook.priority = priority ? priority : maxPriority + 1;
+        hook.priority = priority ?? maxPriority + 1;
         this.#hooks.push(hook);
+        this.#hooks.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
     }
     async #handle(type) {
-        const hooks = this.#hooks.filter((hook) => hook.types.includes(type));
-        await this.#context.runHooks(hooks, type);
+        // Serialize all hook executions via a promise-based mutex.
+        // Each call waits for the previous one to finish before running,
+        // so hooks on the same component never interleave.
+        let release;
+        const nextLock = new Promise((r) => {
+            release = r;
+        });
+        const prevLock = this.#hookLock;
+        this.#hookLock = nextLock;
+        await prevLock;
+        try {
+            const hooks = this.#hooks.filter((hook) => hook.types.includes(type));
+            await this.#context.runHooks(hooks, type);
+        }
+        finally {
+            release();
+        }
     }
     async setup() {
         this.#context.setComponentProps(this.#properties);
@@ -64,7 +81,6 @@ export class Component {
     async refresh(type = 'refresh') {
         this.#context.setComponentProps(this.#properties);
         await this.#handle(type);
-        await this.update(); // also auto update to fix timing bug
     }
     async destroy() {
         // Clean up all event listeners automatically
@@ -78,8 +94,8 @@ export class Component {
         }
     }
     // Fluent method chaining - modify existing methods to return Component instance
-    async updateAppearance(appearance) {
-        await this.#properties.updateAppearance(appearance);
+    updateAppearance(appearance) {
+        this.#properties.updateAppearance(appearance);
         return this;
     }
     setStart(start) {
@@ -90,20 +106,20 @@ export class Component {
         this.#properties.setEnd(end);
         return this;
     }
-    async updateText(text) {
-        await this.#properties.updateText(text);
+    updateText(text) {
+        this.#properties.updateText(text);
         return this;
     }
     // Simple fluent wrapper methods
-    async setText(text) {
+    setText(text) {
         return this.updateText(text);
     }
-    async setVisible(visible) {
-        await this.#properties.setVisible(visible);
+    setVisible(visible) {
+        this.#properties.setVisible(visible);
         return this;
     }
-    async setOrder(order) {
-        await this.#properties.setOrder(order);
+    setOrder(order) {
+        this.#properties.setOrder(order);
         return this;
     }
     // Component-scoped event filtering methods

package/dist/components/ComponentContext.svelte.js

@@ -1,5 +1,7 @@
 import { StateManager } from '../managers/StateManager.svelte.js';
 import { EventManager } from '../managers/EventManager.js';
+import { DeterministicRenderError } from '../schemas/runtime/deterministic.js';
+import { isTimeWithinTimeline, TIMELINE_BOUNDARY_EPSILON } from '../utils/timelineWindow.js';
 export class ComponentContext {
     #data;
     // context data replacement, useful for modifiing context of subtitles
@@ -16,6 +18,37 @@ export class ComponentContext {
         this.#data = props;
         this.#contextData = undefined;
     }
+    #getBaseData() {
+        return this.#data.getData();
+    }
+    #getBaseId() {
+        if ('id' in this.#data && typeof this.#data.id === 'string') {
+            return this.#data.id;
+        }
+        return this.#getBaseData().id;
+    }
+    #getBaseType() {
+        if ('type' in this.#data && typeof this.#data.type === 'string') {
+            return this.#data.type;
+        }
+        return this.#getBaseData().type;
+    }
+    #getBaseTimeline() {
+        if ('timeline' in this.#data && this.#data.timeline) {
+            return this.#data.timeline;
+        }
+        return this.#getBaseData().timeline;
+    }
+    #getBaseSourceStartAt() {
+        if ('sourceStartAt' in this.#data) {
+            return this.#data.sourceStartAt;
+        }
+        const data = this.#getBaseData();
+        if (data.type === 'VIDEO' || data.type === 'AUDIO') {
+            return data.source.startAt ?? undefined;
+        }
+        return undefined;
+    }
     get duration() {
         // TODO maybe we will need to get duration from the contextData
         return this.#data.duration;
@@ -27,23 +60,23 @@ export class ComponentContext {
         return this.#data.getData();
     }
     get id() {
-        return this.data.id;
+        return this.#contextData?.id ?? this.#getBaseId();
     }
     get type() {
-        return this.data.type;
+        return this.#contextData?.type ?? this.#getBaseType();
     }
     get isActive() {
         const currentTime = this.sceneState.currentTime;
-        const startAt = this.data.timeline.startAt;
-        const endAt = this.data.timeline.endAt;
-        // Add small tolerance to handle floating point precision issues
-        const tolerance = 1e-10;
-        return currentTime >= startAt - tolerance && currentTime <= endAt + tolerance;
+        const timeline = this.#contextData?.timeline ?? this.#getBaseTimeline();
+        const startAt = timeline.startAt;
+        const endAt = timeline.endAt;
+        return isTimeWithinTimeline(currentTime, startAt, endAt, TIMELINE_BOUNDARY_EPSILON);
     }
     get progress() {
         const currentTime = this.sceneState.currentTime;
-        const startAt = this.data.timeline.startAt;
-        const endAt = this.data.timeline.endAt;
+        const timeline = this.#contextData?.timeline ?? this.#getBaseTimeline();
+        const startAt = timeline.startAt;
+        const endAt = timeline.endAt;
         const duration = endAt - startAt;
         if (duration === 0)
             return 0;
@@ -52,10 +85,15 @@ export class ComponentContext {
         return progress;
     }
     get currentComponentTime() {
-        const startAt = this.state.transformTime(this.data.timeline.startAt);
+        const timeline = this.#contextData?.timeline ?? this.#getBaseTimeline();
+        const componentType = this.#contextData?.type ?? this.#getBaseType();
+        const startAt = this.state.transformTime(timeline.startAt);
         let startAtModifier = 0;
-        if (this.data.type === 'VIDEO') {
-            startAtModifier = this.data.source.startAt ?? 0;
+        if (componentType === 'VIDEO' || componentType === 'AUDIO') {
+            const overrideSourceStartAt = this.#contextData?.type === 'VIDEO' || this.#contextData?.type === 'AUDIO'
+                ? this.#contextData.source.startAt
+                : undefined;
+            startAtModifier = overrideSourceStartAt ?? this.#getBaseSourceStartAt() ?? 0;
         }
         // Calculate relative time from start of component
         const relativeTime = this.sceneState.currentTime - startAt;
@@ -63,13 +101,13 @@ export class ComponentContext {
         return this.state.transformTime(startAtModifier, true) + relativeTime;
     }
     get componentTimelineTime() {
-        const startAt = this.data.timeline.startAt;
-        const endAt = this.data.timeline.endAt;
-        const duration = endAt - startAt;
-        const relativeTime = this.sceneState.currentTime - startAt;
-        if (relativeTime < 0 || relativeTime > duration) {
+        const timeline = this.#contextData?.timeline ?? this.#getBaseTimeline();
+        const startAt = timeline.startAt;
+        const endAt = timeline.endAt;
+        if (!isTimeWithinTimeline(this.sceneState.currentTime, startAt, endAt, TIMELINE_BOUNDARY_EPSILON)) {
             return undefined;
         }
+        const relativeTime = this.sceneState.currentTime - startAt;
         return this.state.transformTime(relativeTime);
     }
     get currentTime() {
@@ -94,25 +132,32 @@ export class ComponentContext {
         this.resources.delete(type);
     }
     async runHooks(hooks, type) {
-        // Sort handlers by priority (low to high, meaning 1 has higher priority then 100)
-        const sortedHooks = [...hooks].sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+        const sortedHooks = [...hooks];
+        for (let i = 1; i < sortedHooks.length; i += 1) {
+            if ((sortedHooks[i - 1].priority ?? 0) > (sortedHooks[i].priority ?? 0)) {
+                sortedHooks.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
+                break;
+            }
+        }
         for (let i = 0; i < sortedHooks.length; i += 1) {
             const handler = sortedHooks[i];
             try {
                 await handler.handle(type, this);
             }
             catch (error) {
-                // Log the error but continue to next hook
+                const normalizedError = error instanceof Error ? error : new Error(String(error));
                 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
+                console.warn(`[ComponentContext] Hook "${hookName}" failed during "${type}" for component "${this.id}":`, normalizedError.message);
                 this.eventManager.emit('hookerror', {
                     hookName,
                     hookType: type,
-                    error: error instanceof Error ? error : new Error(String(error)),
+                    error: normalizedError,
                     componentId: this.id,
                     timestamp: Date.now()
                 });
+                if (normalizedError instanceof DeterministicRenderError) {
+                    throw normalizedError;
+                }
             }
         }
     }

package/dist/components/hooks/AnimationHook.js

@@ -38,7 +38,7 @@ export class AnimationHook {
         const target = this.#context.resources.get('animationTarget');
         const animationData = this.#context.resources.get('animationData') ??
             {};
-        const animations = [...(this.#context.contextData.animations.list ?? [])];
+        const animations = (this.#context.contextData.animations.list ?? []).filter((animation) => animation.enabled !== false);
         const customAnimations = WordHighlighterAnimationBuilder.build(this.#context.contextData, target, animationData, this.splitTextCache);
         const lineAnimations = LineHighlighterAnimationBuilder.build(this.#context.contextData, target, animationData, this.splitTextCache);
         animations.push(...customAnimations);

package/dist/components/hooks/CanvasFillHook.d.ts

@@ -0,0 +1,12 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import type { StateManager } from '../../managers/StateManager.svelte.js';
+/** Renders COLOR and GRADIENT schema components into a Pixi texture source. */
+export declare class CanvasFillHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    constructor(cradle: {
+        stateManager: StateManager;
+    });
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}