visualfries 0.1.10120 → 0.3.2

package/dist/browser/glTransitions.js

@@ -0,0 +1,261 @@
+/**
+ * Curated, gl-transitions-compatible WebGL transitions for deterministic browser export.
+ *
+ * Shader source is intentionally private. Callers select a known transition and may only
+ * provide the parameters declared by that transition; arbitrary GLSL is never accepted.
+ */
+export const GL_TRANSITION_NAMES = ['fade', 'radial-wipe'];
+const DEFINITIONS = {
+    fade: {
+        parameters: {},
+        body: 'return mix(getFromColor(p), getToColor(p), progress);'
+    },
+    'radial-wipe': {
+        parameters: {
+            softness: { uniform: 'softness', defaultValue: 0.02, min: 0.001, max: 0.25 }
+        },
+        body: `
+			vec2 centered = p - vec2(0.5);
+			centered.x *= ratio;
+			float farthestCorner = 0.5 * sqrt(ratio * ratio + 1.0);
+			float radius = length(centered) / farthestCorner;
+			float leadingEdge = progress * (1.0 + softness);
+			float edge = smoothstep(leadingEdge - softness, leadingEdge, radius);
+			return mix(getToColor(p), getFromColor(p), edge);
+		`
+    }
+};
+export function listGlTransitions() {
+    return GL_TRANSITION_NAMES;
+}
+export function createGlTransitionRenderer(gl) {
+    return new GlTransitionRenderer(gl);
+}
+export class GlTransitionRenderer {
+    #gl;
+    #isWebGl2;
+    #programs = new Map();
+    #failures = new Map();
+    #quadBuffer;
+    #fromTexture;
+    #toTexture;
+    canvas;
+    constructor(gl) {
+        this.#gl = gl;
+        this.canvas = gl.canvas;
+        this.#isWebGl2 = typeof gl.texStorage2D === 'function';
+        const quadBuffer = gl.createBuffer();
+        if (!quadBuffer)
+            throw new Error('Unable to create WebGL transition vertex buffer');
+        this.#quadBuffer = quadBuffer;
+        this.#fromTexture = createTexture(gl);
+        this.#toTexture = createTexture(gl);
+        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW);
+    }
+    render(input) {
+        const requested = input.transition;
+        let used = requested;
+        let fallbackReason;
+        let compiled;
+        try {
+            compiled = this.#getOrCompile(requested);
+        }
+        catch (error) {
+            if (requested === 'fade')
+                throw error;
+            used = 'fade';
+            fallbackReason = errorMessage(error);
+            compiled = this.#getOrCompile('fade');
+        }
+        this.#draw(compiled, DEFINITIONS[used], input);
+        return fallbackReason ? { requested, used, fallbackReason } : { requested, used };
+    }
+    destroy() {
+        for (const compiled of this.#programs.values())
+            this.#gl.deleteProgram(compiled.program);
+        this.#programs.clear();
+        this.#gl.deleteTexture(this.#fromTexture);
+        this.#gl.deleteTexture(this.#toTexture);
+        this.#gl.deleteBuffer(this.#quadBuffer);
+    }
+    #getOrCompile(name) {
+        const existing = this.#programs.get(name);
+        if (existing)
+            return existing;
+        const previousFailure = this.#failures.get(name);
+        if (previousFailure)
+            throw new Error(previousFailure);
+        try {
+            const compiled = this.#compile(name, DEFINITIONS[name]);
+            this.#programs.set(name, compiled);
+            return compiled;
+        }
+        catch (error) {
+            const message = `${name} transition unavailable: ${errorMessage(error)}`;
+            this.#failures.set(name, message);
+            throw new Error(message, { cause: error });
+        }
+    }
+    #compile(name, definition) {
+        const gl = this.#gl;
+        const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexSource(this.#isWebGl2));
+        let fragmentShader;
+        let program;
+        let compiledSuccessfully = false;
+        try {
+            fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource(this.#isWebGl2, definition));
+            program = gl.createProgram() ?? undefined;
+            if (!program)
+                throw new Error('program allocation failed');
+            gl.attachShader(program, vertexShader);
+            gl.attachShader(program, fragmentShader);
+            gl.linkProgram(program);
+            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+                const log = gl.getProgramInfoLog(program) || 'unknown link error';
+                throw new Error(`program link failed: ${log}`);
+            }
+            const parameterLocations = {};
+            for (const [parameterName, parameter] of Object.entries(definition.parameters)) {
+                parameterLocations[parameterName] = requiredUniform(gl, program, parameter.uniform, name);
+            }
+            const position = gl.getAttribLocation(program, 'position');
+            if (position < 0) {
+                gl.deleteProgram(program);
+                throw new Error(`${name} shader missing position attribute`);
+            }
+            const result = {
+                program,
+                position,
+                from: requiredUniform(gl, program, 'from', name),
+                to: requiredUniform(gl, program, 'to', name),
+                progress: requiredUniform(gl, program, 'progress', name),
+                // Crossfade does not mathematically need ratio, so a real GLSL compiler may optimize it out.
+                ratio: gl.getUniformLocation(program, 'ratio'),
+                parameters: parameterLocations
+            };
+            compiledSuccessfully = true;
+            return result;
+        }
+        finally {
+            if (program && !compiledSuccessfully)
+                gl.deleteProgram(program);
+            gl.deleteShader(vertexShader);
+            if (fragmentShader)
+                gl.deleteShader(fragmentShader);
+        }
+    }
+    #draw(compiled, definition, input) {
+        const gl = this.#gl;
+        gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        gl.useProgram(compiled.program);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.#quadBuffer);
+        gl.enableVertexAttribArray(compiled.position);
+        gl.vertexAttribPointer(compiled.position, 2, gl.FLOAT, false, 0, 0);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
+        gl.activeTexture(gl.TEXTURE0);
+        uploadTexture(gl, this.#fromTexture, input.from);
+        gl.uniform1i(compiled.from, 0);
+        gl.activeTexture(gl.TEXTURE1);
+        uploadTexture(gl, this.#toTexture, input.to);
+        gl.uniform1i(compiled.to, 1);
+        gl.uniform1f(compiled.progress, clampFinite(input.progress, 0, 1, 0));
+        gl.uniform1f(compiled.ratio, clampFinite(input.ratio, 0.000001, 1_000_000, 1));
+        for (const [parameterName, parameter] of Object.entries(definition.parameters)) {
+            const requested = input.parameters?.[parameterName] ?? parameter.defaultValue;
+            gl.uniform1f(compiled.parameters[parameterName], clampFinite(requested, parameter.min, parameter.max, parameter.defaultValue));
+        }
+        gl.drawArrays(gl.TRIANGLES, 0, 6);
+    }
+}
+function vertexSource(webGl2) {
+    if (webGl2) {
+        return `#version 300 es
+			in vec2 position;
+			out vec2 _uv;
+			void main() {
+				_uv = position * 0.5 + 0.5;
+				gl_Position = vec4(position, 0.0, 1.0);
+			}`;
+    }
+    return `
+		attribute vec2 position;
+		varying vec2 _uv;
+		void main() {
+			_uv = position * 0.5 + 0.5;
+			gl_Position = vec4(position, 0.0, 1.0);
+		}`;
+}
+function fragmentSource(webGl2, definition) {
+    const parameterUniforms = Object.values(definition.parameters)
+        .map((parameter) => `uniform float ${parameter.uniform};`)
+        .join('\n');
+    const varying = webGl2 ? 'in vec2 _uv;' : 'varying vec2 _uv;';
+    const sample = webGl2 ? 'texture' : 'texture2D';
+    const output = webGl2 ? 'out vec4 transitionColor;' : '';
+    const setColor = webGl2 ? 'transitionColor =' : 'gl_FragColor =';
+    const version = webGl2 ? '#version 300 es' : '';
+    return `${version}
+		precision highp float;
+		uniform sampler2D from;
+		uniform sampler2D to;
+		uniform float progress;
+		uniform float ratio;
+		${parameterUniforms}
+		${varying}
+		${output}
+
+		vec4 getFromColor(vec2 p) { return ${sample}(from, p); }
+		vec4 getToColor(vec2 p) { return ${sample}(to, p); }
+		vec4 transition(vec2 p) { ${definition.body} }
+
+		void main() {
+			if (progress <= 0.0) {
+				${setColor} getFromColor(_uv);
+			} else if (progress >= 1.0) {
+				${setColor} getToColor(_uv);
+			} else {
+				${setColor} transition(_uv);
+			}
+		}`;
+}
+function compileShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader)
+        throw new Error('shader allocation failed');
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const log = gl.getShaderInfoLog(shader) || 'unknown compile error';
+        gl.deleteShader(shader);
+        throw new Error(`shader compilation failed: ${log}`);
+    }
+    return shader;
+}
+function createTexture(gl) {
+    const texture = gl.createTexture();
+    if (!texture)
+        throw new Error('Unable to create WebGL transition texture');
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    return texture;
+}
+function uploadTexture(gl, texture, source) {
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+}
+function requiredUniform(gl, program, name, transition) {
+    const location = gl.getUniformLocation(program, name);
+    if (location === null)
+        throw new Error(`${transition} shader missing ${name} uniform`);
+    return location;
+}
+function clampFinite(value, min, max, fallback) {
+    return Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : fallback;
+}
+function errorMessage(error) {
+    return error instanceof Error ? error.message : String(error);
+}

package/dist/browser/index.d.ts

@@ -0,0 +1,3 @@
+export * from './browserExport.js';
+export * from './glTransitions.js';
+export * from './mediaDecode.js';

package/dist/browser/index.js

@@ -0,0 +1,3 @@
+export * from './browserExport.js';
+export * from './glTransitions.js';
+export * from './mediaDecode.js';

package/dist/browser/mediaDecode.d.ts

@@ -0,0 +1,31 @@
+import type { DeterministicFrameProvider } from '../schemas/runtime/deterministic.js';
+export type MediabunnyVideoFrameProviderOptions = {
+    url: string;
+    componentId: string;
+    sourceStart?: number;
+    fps: number;
+    frameCount?: number;
+    /** Alias for frameCount, useful when callers derive a bounded component window. */
+    maxFrames?: number;
+};
+export type MediabunnyAudioTrack = {
+    url: string;
+    startAt: number;
+    endAt?: number;
+    volume?: number;
+    muted?: boolean;
+};
+export type MixMediabunnyAudioTracksOptions = {
+    tracks: MediabunnyAudioTrack[];
+    duration: number;
+    sampleRate?: number;
+    channels?: number;
+};
+/**
+ * Opens one video input and exposes its decoded frames to deterministic composition.
+ * Requests must be sequential so MediaBunny can decode each packet at most once. Only
+ * one sample and its temporary VideoFrame are held by this adapter at any time.
+ */
+export declare function createMediabunnyVideoFrameProvider(options: MediabunnyVideoFrameProviderOptions): Promise<DeterministicFrameProvider>;
+/** Decode staged media tracks, align each track's first decoded timestamp to startAt, then mix. */
+export declare function mixMediabunnyAudioTracks(options: MixMediabunnyAudioTracksOptions): Promise<AudioBuffer>;

package/dist/browser/mediaDecode.js

@@ -0,0 +1,152 @@
+import { ALL_FORMATS, AudioBufferSink, Input, UrlSource, VideoSampleSink } from 'mediabunny';
+const assertPositiveFinite = (value, label) => {
+    if (!Number.isFinite(value) || value <= 0) {
+        throw new Error(`${label} must be a positive finite number`);
+    }
+};
+const openInput = (url) => new Input({ formats: ALL_FORMATS, source: new UrlSource(url) });
+/**
+ * Opens one video input and exposes its decoded frames to deterministic composition.
+ * Requests must be sequential so MediaBunny can decode each packet at most once. Only
+ * one sample and its temporary VideoFrame are held by this adapter at any time.
+ */
+export async function createMediabunnyVideoFrameProvider(options) {
+    assertPositiveFinite(options.fps, 'Video provider FPS');
+    const sourceStart = options.sourceStart ?? 0;
+    if (!Number.isFinite(sourceStart) || sourceStart < 0) {
+        throw new Error('Video provider sourceStart must be a non-negative finite number');
+    }
+    const maxFrames = options.frameCount ?? options.maxFrames;
+    if (!Number.isInteger(maxFrames) || maxFrames <= 0) {
+        throw new Error('Video provider frameCount/maxFrames must be a positive integer');
+    }
+    const input = openInput(options.url);
+    try {
+        const track = await input.getPrimaryVideoTrack();
+        if (!track)
+            throw new Error(`No video track found at ${options.url}`);
+        if (!(await track.canDecode())) {
+            throw new Error(`Primary video track cannot be decoded by this browser: ${options.url}`);
+        }
+        const sink = new VideoSampleSink(track);
+        const timestamps = (function* () {
+            for (let frameIndex = 0; frameIndex < maxFrames; frameIndex += 1) {
+                yield sourceStart + frameIndex / options.fps;
+            }
+        })();
+        const samples = sink.samplesAtTimestamps(timestamps)[Symbol.asyncIterator]();
+        let nextFrameIndex = 0;
+        let disposed = false;
+        const dispose = async () => {
+            if (disposed)
+                return;
+            disposed = true;
+            try {
+                await samples.return?.();
+            }
+            finally {
+                input.dispose();
+            }
+        };
+        return {
+            async getFrame(request) {
+                if (disposed)
+                    throw new Error('MediaBunny video frame provider is disposed');
+                if (request.componentId !== options.componentId)
+                    return null;
+                if (request.fps !== options.fps) {
+                    throw new Error(`Video provider FPS mismatch: expected ${options.fps}, received ${request.fps}`);
+                }
+                if (request.frameIndex !== nextFrameIndex) {
+                    throw new Error(`MediaBunny video frames must be requested sequentially; expected ${nextFrameIndex}, ` +
+                        `received ${request.frameIndex}`);
+                }
+                if (nextFrameIndex >= maxFrames)
+                    return null;
+                const frameIndex = nextFrameIndex;
+                nextFrameIndex += 1;
+                const result = await samples.next();
+                const sample = result.done ? null : result.value;
+                if (!sample)
+                    return null;
+                let videoFrame;
+                try {
+                    videoFrame = sample.toVideoFrame();
+                    const imageBitmap = await createImageBitmap(videoFrame);
+                    return {
+                        kind: 'imageBitmap',
+                        cacheKey: `${options.componentId}:mediabunny:${frameIndex}`,
+                        imageBitmap
+                    };
+                }
+                finally {
+                    videoFrame?.close();
+                    sample.close();
+                }
+            },
+            async releaseComponent(componentId) {
+                if (componentId === options.componentId)
+                    await dispose();
+            },
+            destroy: dispose
+        };
+    }
+    catch (error) {
+        input.dispose();
+        throw error;
+    }
+}
+/** Decode staged media tracks, align each track's first decoded timestamp to startAt, then mix. */
+export async function mixMediabunnyAudioTracks(options) {
+    assertPositiveFinite(options.duration, 'Audio mix duration');
+    const sampleRate = options.sampleRate ?? 48_000;
+    const channels = options.channels ?? 2;
+    assertPositiveFinite(sampleRate, 'Audio mix sampleRate');
+    if (!Number.isInteger(channels) || channels <= 0) {
+        throw new Error('Audio mix channels must be a positive integer');
+    }
+    const context = new OfflineAudioContext(channels, Math.ceil(options.duration * sampleRate), sampleRate);
+    for (const trackOptions of options.tracks) {
+        if (trackOptions.muted || (trackOptions.volume ?? 1) <= 0)
+            continue;
+        if (!Number.isFinite(trackOptions.startAt) || trackOptions.startAt < 0) {
+            throw new Error('Audio track startAt must be a non-negative finite number');
+        }
+        const endAt = Math.min(trackOptions.endAt ?? options.duration, options.duration);
+        if (!Number.isFinite(endAt) || endAt <= trackOptions.startAt)
+            continue;
+        const input = openInput(trackOptions.url);
+        try {
+            const track = await input.getPrimaryAudioTrack();
+            if (!track)
+                throw new Error(`No audio track found at ${trackOptions.url}`);
+            if (!(await track.canDecode())) {
+                throw new Error(`Primary audio track cannot be decoded by this browser: ${trackOptions.url}`);
+            }
+            const sink = new AudioBufferSink(track);
+            const gain = context.createGain();
+            gain.gain.value = trackOptions.volume ?? 1;
+            gain.connect(context.destination);
+            let firstTimestamp;
+            const activeDuration = endAt - trackOptions.startAt;
+            for await (const wrapped of sink.buffers()) {
+                firstTimestamp ??= wrapped.timestamp;
+                const relativeTimestamp = wrapped.timestamp - firstTimestamp;
+                if (relativeTimestamp >= activeDuration)
+                    break;
+                const remaining = activeDuration - relativeTimestamp;
+                const playDuration = Math.min(wrapped.duration, wrapped.buffer.duration, remaining);
+                if (playDuration <= 0)
+                    continue;
+                const source = context.createBufferSource();
+                source.buffer = wrapped.buffer;
+                source.connect(gain);
+                source.start(trackOptions.startAt + relativeTimestamp, 0, playDuration);
+            }
+        }
+        finally {
+            input.dispose();
+        }
+    }
+    return await context.startRendering();
+}

package/dist/builders/PixiComponentBuilder.d.ts

@@ -21,6 +21,8 @@ type PixiComponentCradle = {
     htmlToCanvasHook: ComponentHook;
     mediaSeekingHook: ComponentHook;
     deterministicMediaFrameHook: ComponentHook;
+    pixiVisualTransformHook: ComponentHook;
+    canvasFillHook: ComponentHook;
 };
 export declare class PixiComponentBuilder implements IComponentBuilder {
     private component;
@@ -43,8 +45,11 @@ export declare class PixiComponentBuilder implements IComponentBuilder {
     private animationHook;
     private mediaSeekingHook;
     private deterministicMediaFrameHook;
+    private pixiVisualTransformHook;
+    private canvasFillHook;
     constructor(cradle: PixiComponentCradle);
     withCanvasShape(): this;
+    withCanvasFill(): this;
     withProgressShape(): this;
     withMedia(): this;
     withMediaSeeking(): this;
@@ -56,6 +61,7 @@ export declare class PixiComponentBuilder implements IComponentBuilder {
     withSplitScreen(): this;
     withHtmlText(): this;
     withAnimation(): this;
+    withPixiAnimationTarget(): this;
     withHtmlAnimation(): this;
     withHtmlToCanvasHook(): this;
     withSubtitles(): this;

package/dist/builders/PixiComponentBuilder.js

@@ -20,6 +20,8 @@ export class PixiComponentBuilder {
     animationHook;
     mediaSeekingHook;
     deterministicMediaFrameHook;
+    pixiVisualTransformHook;
+    canvasFillHook;
     constructor(cradle) {
         this.component = cradle.component;
         this.mediaHook = cradle.mediaHook;
@@ -41,11 +43,17 @@ export class PixiComponentBuilder {
         this.htmlToCanvasHook = cradle.htmlToCanvasHook;
         this.mediaSeekingHook = cradle.mediaSeekingHook;
         this.deterministicMediaFrameHook = cradle.deterministicMediaFrameHook;
+        this.pixiVisualTransformHook = cradle.pixiVisualTransformHook;
+        this.canvasFillHook = cradle.canvasFillHook;
     }
     withCanvasShape() {
         this.component.addHook(this.canvasShapeHook);
         return this;
     }
+    withCanvasFill() {
+        this.component.addHook(this.canvasFillHook);
+        return this;
+    }
     withProgressShape() {
         this.component.addHook(this.pixiProgressShapeHook);
         return this;
@@ -92,6 +100,10 @@ export class PixiComponentBuilder {
         this.component.addHook(this.animationHook);
         return this;
     }
+    withPixiAnimationTarget() {
+        this.component.addHook(this.pixiVisualTransformHook);
+        return this;
+    }
     withHtmlAnimation() {
         this.component.addHook(this.htmlAnimationHook);
         return this;

package/dist/builders/_ComponentState.svelte.d.ts

@@ -23,7 +23,7 @@ export declare class ComponentState implements ComponentProps {
     set end_at(time: number);
     set name(name: string);
     get order(): number;
-    get visible(): true;
+    get visible(): boolean;
     get duration(): number;
     get asset_id(): string;
     get timeline(): {
@@ -429,15 +429,17 @@ export declare class ComponentState implements ComponentProps {
             dashArray?: number[] | undefined;
         }>;
     };
+    get sourceUrl(): string | undefined;
+    get sourceStartAt(): number | undefined;
     get checksum(): string;
     getData(): ComponentData;
     setData(data: ComponentData): void;
     setStart(start: number): void;
     setEnd(end: number): void;
     setStreamPath(path: string): void;
-    updateText(text: string): Promise<void>;
+    updateText(text: string): void;
     update(data: Partial<AppearanceInput>): void;
-    updateAppearance(appearance: Partial<AppearanceInput>): Promise<void>;
-    setVisible(visible: boolean): Promise<void>;
-    setOrder(order: number): Promise<void>;
+    updateAppearance(appearance: Partial<AppearanceInput>): void;
+    setVisible(visible: boolean): void;
+    setOrder(order: number): void;
 }

package/dist/builders/_ComponentState.svelte.js

@@ -15,14 +15,15 @@ export class ComponentState {
     setRefreshCallback(callback) {
         this.refreshCallback = callback;
     }
-    async maybeAutoRefresh() {
+    maybeAutoRefresh() {
         if (this.refreshCallback) {
             try {
-                await this.refreshCallback();
+                this.refreshCallback().catch((error) => {
+                    console.warn('Auto-refresh callback failed:', error);
+                });
             }
             catch (error) {
                 console.warn('Auto-refresh callback failed:', error);
-                // Don't re-throw to avoid breaking the update operation
             }
         }
     }
@@ -55,7 +56,7 @@ export class ComponentState {
         return this.#data.order || 1;
     }
     get visible() {
-        return this.#data.visible ? this.#data.visible : true;
+        return this.#data.visible ?? true;
     }
     get duration() {
         return this.#data.timeline.endAt - this.#data.timeline.startAt;
@@ -77,6 +78,18 @@ export class ComponentState {
     get effects() {
         return this.#data.effects ?? {};
     }
+    get sourceUrl() {
+        if ('source' in this.#data && this.#data.source && 'url' in this.#data.source) {
+            return this.#data.source.url ?? undefined;
+        }
+        return undefined;
+    }
+    get sourceStartAt() {
+        if ('source' in this.#data && this.#data.source && 'startAt' in this.#data.source) {
+            return this.#data.source.startAt ?? undefined;
+        }
+        return undefined;
+    }
     get checksum() {
         return (this.id +
             '-' +
@@ -114,6 +127,9 @@ export class ComponentState {
                 source = { startAt: 0 };
                 this.#data.source = source;
             }
+            if (source.startAt === undefined || source.startAt === null) {
+                source.startAt = 0;
+            }
             if (source.startAt !== undefined && source.startAt !== null) {
                 source.startAt += diff;
                 source.startAt = Math.max(0, source.startAt);
@@ -158,7 +174,7 @@ export class ComponentState {
             if (this.type === 'VIDEO' || this.type === 'AUDIO') {
                 this.#changeVideoEnd(diff);
             }
-            this.#data.timeline.endAt = this.sceneState.transformTime(end);
+            this.#data.timeline.endAt = newEnd;
             this.#emitChange();
         }
     }
@@ -168,11 +184,11 @@ export class ComponentState {
         //     this.#emitChange();
         // }
     }
-    async updateText(text) {
+    updateText(text) {
         if (this.type === 'TEXT') {
             this.#data.text = text;
             this.#emitChange();
-            await this.maybeAutoRefresh();
+            this.maybeAutoRefresh();
         }
     }
     update(data) {
@@ -189,28 +205,26 @@ export class ComponentState {
         // 	console.error('Error updating component data', res.error);
         // }
     }
-    async updateAppearance(appearance) {
+    updateAppearance(appearance) {
         // 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();
+        this.maybeAutoRefresh();
     }
-    async setVisible(visible) {
+    setVisible(visible) {
         if (this.#data.visible !== visible) {
             this.#data.visible = visible;
             this.#emitChange();
-            await this.maybeAutoRefresh();
+            this.maybeAutoRefresh();
         }
     }
-    async setOrder(order) {
+    setOrder(order) {
         if (this.#data.order !== order) {
             this.#data.order = order;
-            // Note: Emitting change here might trigger frequent updates if order changes often.
-            // Consider if the parent manager should handle order changes and emit less frequently.
             this.#emitChange();
-            await this.maybeAutoRefresh();
+            this.maybeAutoRefresh();
         }
     }
 }