visualfries 0.1.10120 → 0.3.2

package/dist/agent/transitions.js

@@ -0,0 +1,169 @@
+import { ComponentShape, SceneShape } from '../schemas/scene/index.js';
+function transitionAnimation(id, cue, scene) {
+    const style = cue.style ?? 'dip-to-black';
+    const duration = cue.duration ?? 0.26;
+    const half = Math.max(0.04, duration / 2);
+    if (style === 'focus-pull') {
+        return {
+            id: `${id}-focus-pull`,
+            name: 'Agent transition focus pull',
+            animation: {
+                id: `${id}-focus-pull-preset`,
+                timeline: [
+                    {
+                        tweens: [
+                            {
+                                method: 'fromTo',
+                                vars: {
+                                    from: { opacity: 0, scale: 0.82 },
+                                    duration: half,
+                                    opacity: 0.42,
+                                    scale: 1.08,
+                                    ease: 'power2.in'
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        tweens: [
+                            {
+                                method: 'to',
+                                vars: { duration: half, opacity: 0, scale: 1.22, ease: 'power2.out' }
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+    }
+    if (style === 'swipe-left') {
+        return {
+            id: `${id}-swipe-left`,
+            name: 'Agent transition swipe left',
+            animation: {
+                id: `${id}-swipe-left-preset`,
+                timeline: [
+                    {
+                        tweens: [
+                            {
+                                method: 'fromTo',
+                                vars: {
+                                    from: { x: scene.settings.width },
+                                    duration,
+                                    x: -scene.settings.width,
+                                    ease: 'power2.inOut'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+    }
+    if (style === 'swipe-up') {
+        return {
+            id: `${id}-swipe-up`,
+            name: 'Agent transition swipe up',
+            animation: {
+                id: `${id}-swipe-up-preset`,
+                timeline: [
+                    {
+                        tweens: [
+                            {
+                                method: 'fromTo',
+                                vars: {
+                                    from: { y: scene.settings.height },
+                                    duration,
+                                    y: -scene.settings.height,
+                                    ease: 'power2.inOut'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+    }
+    return {
+        id: `${id}-fade`,
+        name: style === 'flash' ? 'Agent transition flash' : 'Agent transition dip',
+        animation: {
+            id: `${id}-fade-preset`,
+            timeline: [
+                {
+                    tweens: [
+                        {
+                            method: 'fromTo',
+                            vars: {
+                                from: { opacity: 0 },
+                                duration: half,
+                                opacity: style === 'flash' ? 0.85 : 1,
+                                ease: 'power1.out'
+                            }
+                        }
+                    ]
+                },
+                {
+                    tweens: [
+                        {
+                            method: 'to',
+                            vars: {
+                                duration: half,
+                                opacity: 0,
+                                ease: 'power1.in'
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+}
+export function createAgentTransitionComponent(cue, scene, index = 0) {
+    const parsedScene = SceneShape.parse(scene);
+    const id = cue.id ?? `agent-transition-${index + 1}`;
+    const style = cue.style ?? 'dip-to-black';
+    const duration = cue.duration ?? 0.26;
+    const component = {
+        id,
+        name: `Agent Transition: ${style}`,
+        type: 'SHAPE',
+        shape: { type: 'rectangle', cornerRadius: 0 },
+        timeline: {
+            startAt: Math.max(0, cue.time - duration / 2),
+            endAt: cue.time + duration / 2
+        },
+        order: index,
+        appearance: {
+            x: 0,
+            y: 0,
+            width: parsedScene.settings.width,
+            height: parsedScene.settings.height,
+            opacity: 1,
+            rotation: 0,
+            scaleX: 1,
+            scaleY: 1,
+            color: cue.animated === false
+                ? 'transparent'
+                : (cue.color ?? (style === 'flash' || style === 'focus-pull' ? '#FFFFFF' : '#000000'))
+        },
+        animations: {
+            enabled: cue.animated !== false,
+            list: cue.animated === false ? [] : [transitionAnimation(id, cue, parsedScene)]
+        }
+    };
+    return ComponentShape.parse(component);
+}
+export function addAgentTransitions(input) {
+    const scene = SceneShape.parse(input.scene);
+    const layer = {
+        id: input.layerId ?? 'layer-agent-transitions',
+        name: input.layerName ?? 'Agent Transitions',
+        order: input.layerOrder ?? 95,
+        components: input.transitions.map((cue, index) => createAgentTransitionComponent(cue, scene, index))
+    };
+    return SceneShape.parse({
+        ...scene,
+        layers: [...scene.layers, layer]
+    });
+}

package/dist/animations/PixiAnimationTarget.d.ts

@@ -0,0 +1,29 @@
+export type PixiTransformContainer = {
+    x: number;
+    y: number;
+    alpha: number;
+    angle: number;
+    scale: {
+        x: number;
+        y: number;
+        set?: (value: number) => void;
+    };
+};
+export type PixiAnimationTarget = {
+    x: number;
+    y: number;
+    opacity: number;
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    rotation: number;
+};
+/**
+ * Presents Pixi's transform model as the numeric properties used by native
+ * VisualFries animation data. Rotation is expressed in degrees, matching the
+ * scene schema; uniform scale maps to both Pixi scale axes.
+ */
+export declare function createPixiAnimationTarget(container: PixiTransformContainer, onChange?: () => void, origin?: {
+    x: number;
+    y: number;
+}): PixiAnimationTarget;

package/dist/animations/PixiAnimationTarget.js

@@ -0,0 +1,63 @@
+/**
+ * Presents Pixi's transform model as the numeric properties used by native
+ * VisualFries animation data. Rotation is expressed in degrees, matching the
+ * scene schema; uniform scale maps to both Pixi scale axes.
+ */
+export function createPixiAnimationTarget(container, onChange = () => undefined, origin) {
+    return {
+        get x() {
+            return origin ? container.x - origin.x : container.x;
+        },
+        set x(value) {
+            container.x = (origin?.x ?? 0) + value;
+            onChange();
+        },
+        get y() {
+            return origin ? container.y - origin.y : container.y;
+        },
+        set y(value) {
+            container.y = (origin?.y ?? 0) + value;
+            onChange();
+        },
+        get opacity() {
+            return container.alpha;
+        },
+        set opacity(value) {
+            container.alpha = value;
+            onChange();
+        },
+        get scale() {
+            return container.scale.x;
+        },
+        set scale(value) {
+            if (container.scale.set)
+                container.scale.set(value);
+            else {
+                container.scale.x = value;
+                container.scale.y = value;
+            }
+            onChange();
+        },
+        get scaleX() {
+            return container.scale.x;
+        },
+        set scaleX(value) {
+            container.scale.x = value;
+            onChange();
+        },
+        get scaleY() {
+            return container.scale.y;
+        },
+        set scaleY(value) {
+            container.scale.y = value;
+            onChange();
+        },
+        get rotation() {
+            return container.angle;
+        },
+        set rotation(value) {
+            container.angle = value;
+            onChange();
+        }
+    };
+}

package/dist/animations/builders/LineHighlighterAnimationBuilder.js

@@ -11,6 +11,10 @@ export class LineHighlighterAnimationBuilder {
         if (!activeLine || !activeLine.enabled) {
             return [];
         }
+        // Both modes target the same split glyphs. Active-word highlighting is the
+        // deterministic precedence for old scenes that enable both.
+        if (get(data, 'appearance.text.activeWord.enabled', false))
+            return [];
         const config = {
             activeLine,
             data,
@@ -39,14 +43,27 @@ export class LineHighlighterAnimationBuilder {
         return animations;
     }
     static prepareHighlightStyles(config) {
-        const { activeLine, data } = config;
-        const highlightStyles = ColorTransformer.transform(activeLine.color, 'background');
-        const originalStyles = ColorTransformer.transform(data.appearance.text?.color, 'background');
+        const { activeLine, data, animationData } = config;
+        const solidPalette = (data.appearance.text?.highlightColors ?? []).filter((color) => typeof color === 'string');
+        const highlightStyles = solidPalette.length > 0
+            ? {
+                color: { fromData: 'highlightColors', mode: 'cycle', fallbackValue: solidPalette[0] }
+            }
+            : ColorTransformer.transform(activeLine.color, 'text');
+        if (solidPalette.length > 0)
+            animationData.highlightColors = solidPalette;
+        const originalStyles = ColorTransformer.transform(data.appearance.text?.color, 'text');
         // Handle font weight if specified
         if (get(activeLine, 'fontWeight', undefined)) {
             highlightStyles.fontWeight = activeLine.fontWeight;
             originalStyles.fontWeight = data.appearance.text?.fontWeight ?? 'normal';
         }
+        if (get(activeLine, 'scale', undefined)) {
+            highlightStyles.scale = activeLine.scale;
+            highlightStyles.transformOrigin = '50% 50%';
+            originalStyles.scale = 1;
+            originalStyles.transformOrigin = '50% 50%';
+        }
         return {
             highlight: highlightStyles,
             original: originalStyles

package/dist/animations/builders/WordHighlighterAnimationBuilder.js

@@ -39,14 +39,27 @@ export class WordHighlighterAnimationBuilder {
         return animations;
     }
     static prepareHighlightStyles(config) {
-        const { activeWord, data } = config;
-        const highlightStyles = ColorTransformer.transform(activeWord.color, 'text');
+        const { activeWord, data, animationData } = config;
+        const solidPalette = (data.appearance.text?.highlightColors ?? []).filter((color) => typeof color === 'string');
+        const highlightStyles = solidPalette.length > 0
+            ? {
+                color: { fromData: 'highlightColors', mode: 'cycle', fallbackValue: solidPalette[0] }
+            }
+            : ColorTransformer.transform(activeWord.color, 'text');
+        if (solidPalette.length > 0)
+            animationData.highlightColors = solidPalette;
         const originalStyles = ColorTransformer.transform(data.appearance.text?.color, 'text');
         // Handle font weight if specified
         if (get(activeWord, 'fontWeight', undefined)) {
             highlightStyles.fontWeight = activeWord.fontWeight;
             originalStyles.fontWeight = data.appearance.text?.fontWeight ?? 'normal';
         }
+        if (get(activeWord, 'scale', undefined)) {
+            highlightStyles.scale = activeWord.scale;
+            highlightStyles.transformOrigin = '50% 50%';
+            originalStyles.scale = 1;
+            originalStyles.transformOrigin = '50% 50%';
+        }
         return {
             highlight: highlightStyles,
             original: originalStyles

package/dist/browser/browserExport.d.ts

@@ -0,0 +1,73 @@
+import { getFirstEncodableAudioCodec, getFirstEncodableVideoCodec, type StreamTargetChunk } from 'mediabunny';
+export declare const BROWSER_EXPORT_FALLBACK: "deterministic-local-ffmpeg";
+export type BrowserExportCapabilityRequest = {
+    width: number;
+    height: number;
+    fps: number;
+    videoBitrate?: number;
+    audio?: boolean;
+    audioBitrate?: number;
+    sampleRate?: number;
+    numberOfChannels?: number;
+};
+export type BrowserExportCapabilityReport = {
+    supported: boolean;
+    container: 'mp4';
+    videoCodec: 'avc' | null;
+    audioCodec: 'aac' | null;
+    reasons: string[];
+    fallback: typeof BROWSER_EXPORT_FALLBACK;
+};
+type CapabilityDependencies = {
+    getVideoCodec: typeof getFirstEncodableVideoCodec;
+    getAudioCodec: typeof getFirstEncodableAudioCodec;
+};
+/** Probe exact MVP codecs. A different codec is not silently substituted into an MP4. */
+export declare function probeBrowserExportCapabilities(request: BrowserExportCapabilityRequest, dependencies?: CapabilityDependencies): Promise<BrowserExportCapabilityReport>;
+export type BrowserExportFrame = {
+    frameIndex: number;
+    timestamp: number;
+    duration: number;
+    progress: number;
+};
+export type BrowserExportOptions = Omit<BrowserExportCapabilityRequest, 'audio'> & {
+    canvas: HTMLCanvasElement | OffscreenCanvas;
+    duration: number;
+    renderFrame: (frame: BrowserExportFrame) => void | Promise<void>;
+    audioBuffer?: AudioBuffer;
+    /** Positional stream: its sink must honor each StreamTargetChunk.position (not append blindly). */
+    writable?: WritableStream<StreamTargetChunk>;
+    onProgress?: (progress: number, frameIndex: number) => void;
+};
+export type BrowserExportResult = {
+    buffer: ArrayBuffer | null;
+    mimeType: 'video/mp4';
+    frameCount: number;
+    duration: number;
+    capabilities: BrowserExportCapabilityReport;
+};
+export declare class BrowserExportUnsupportedError extends Error {
+    readonly capabilities: BrowserExportCapabilityReport;
+    constructor(capabilities: BrowserExportCapabilityReport);
+}
+/**
+ * Deterministic canvas-to-MP4 path. Every await on source.add() propagates encoder/writer
+ * backpressure; no image serialization or frame queue exists between compositor and encoder.
+ */
+export declare function exportCanvasToMp4(options: BrowserExportOptions): Promise<BrowserExportResult>;
+export type BrowserAudioTone = {
+    start: number;
+    end: number;
+    frequency: number;
+    gain?: number;
+    pan?: number;
+};
+/** Minimal deterministic in-browser MVP mix. First sample begins at t=0. */
+export declare function mixBrowserAudio(options: {
+    duration: number;
+    tone?: BrowserAudioTone[];
+    source?: AudioBuffer;
+    sourceGain?: number;
+    sampleRate?: number;
+}): Promise<AudioBuffer>;
+export {};

package/dist/browser/browserExport.js

@@ -0,0 +1,180 @@
+import { AudioBufferSource, BufferTarget, CanvasSource, Mp4OutputFormat, Output, QUALITY_HIGH, StreamTarget, getFirstEncodableAudioCodec, getFirstEncodableVideoCodec } from 'mediabunny';
+export const BROWSER_EXPORT_FALLBACK = 'deterministic-local-ffmpeg';
+const defaultCapabilityDependencies = {
+    getVideoCodec: getFirstEncodableVideoCodec,
+    getAudioCodec: getFirstEncodableAudioCodec
+};
+/** Probe exact MVP codecs. A different codec is not silently substituted into an MP4. */
+export async function probeBrowserExportCapabilities(request, dependencies = defaultCapabilityDependencies) {
+    const reasons = [];
+    const videoCodec = await dependencies.getVideoCodec(['avc'], {
+        width: request.width,
+        height: request.height,
+        bitrate: request.videoBitrate ?? QUALITY_HIGH
+    });
+    if (videoCodec !== 'avc') {
+        reasons.push(`AVC/H.264 encoding unavailable at ${request.width}x${request.height}`);
+    }
+    let audioCodec = null;
+    if (request.audio === true) {
+        const result = await dependencies.getAudioCodec(['aac'], {
+            numberOfChannels: request.numberOfChannels ?? 2,
+            sampleRate: request.sampleRate ?? 48_000,
+            bitrate: request.audioBitrate ?? 192_000
+        });
+        audioCodec = result === 'aac' ? 'aac' : null;
+        if (!audioCodec) {
+            reasons.push('AAC encoding unavailable');
+        }
+    }
+    return {
+        supported: reasons.length === 0,
+        container: 'mp4',
+        videoCodec: videoCodec === 'avc' ? 'avc' : null,
+        audioCodec,
+        reasons,
+        fallback: BROWSER_EXPORT_FALLBACK
+    };
+}
+export class BrowserExportUnsupportedError extends Error {
+    capabilities;
+    constructor(capabilities) {
+        super(`Browser export unavailable: ${capabilities.reasons.join('; ')}. ` +
+            `Use ${capabilities.fallback}.`);
+        this.name = 'BrowserExportUnsupportedError';
+        this.capabilities = capabilities;
+    }
+}
+/**
+ * Deterministic canvas-to-MP4 path. Every await on source.add() propagates encoder/writer
+ * backpressure; no image serialization or frame queue exists between compositor and encoder.
+ */
+export async function exportCanvasToMp4(options) {
+    if (!Number.isFinite(options.duration) || options.duration <= 0) {
+        throw new Error('Browser export duration must be a positive finite number');
+    }
+    if (!Number.isFinite(options.fps) || options.fps <= 0) {
+        throw new Error('Browser export FPS must be a positive finite number');
+    }
+    if (options.audioBuffer &&
+        options.audioBuffer.duration > options.duration + 1 / options.audioBuffer.sampleRate) {
+        throw new Error(`Audio duration ${options.audioBuffer.duration.toFixed(6)}s exceeds video duration ` +
+            `${options.duration.toFixed(6)}s`);
+    }
+    const capabilities = await probeBrowserExportCapabilities({
+        width: options.width,
+        height: options.height,
+        fps: options.fps,
+        videoBitrate: options.videoBitrate,
+        audio: Boolean(options.audioBuffer),
+        audioBitrate: options.audioBitrate,
+        sampleRate: options.audioBuffer?.sampleRate ?? options.sampleRate,
+        numberOfChannels: options.audioBuffer?.numberOfChannels ?? options.numberOfChannels
+    });
+    if (!capabilities.supported) {
+        throw new BrowserExportUnsupportedError(capabilities);
+    }
+    if (options.canvas.width !== options.width || options.canvas.height !== options.height) {
+        throw new Error(`Canvas size ${options.canvas.width}x${options.canvas.height} does not match export ` +
+            `${options.width}x${options.height}`);
+    }
+    const frameCount = Math.round(options.duration * options.fps);
+    const frameDuration = 1 / options.fps;
+    const target = options.writable
+        ? new StreamTarget(options.writable, { chunked: true, chunkSize: 4 * 1024 * 1024 })
+        : new BufferTarget();
+    const output = new Output({
+        // BufferTarget already owns the finished file. Avoid a second full media copy for fast-start.
+        format: new Mp4OutputFormat({ fastStart: options.writable ? 'reserve' : false }),
+        target
+    });
+    const videoSource = new CanvasSource(options.canvas, {
+        codec: 'avc',
+        bitrate: options.videoBitrate ?? QUALITY_HIGH,
+        keyFrameInterval: 2
+    });
+    output.addVideoTrack(videoSource, {
+        frameRate: options.fps,
+        maximumPacketCount: Math.ceil(frameCount * 1.05)
+    });
+    let audioSource;
+    if (options.audioBuffer) {
+        audioSource = new AudioBufferSource({
+            codec: 'aac',
+            bitrate: options.audioBitrate ?? 192_000
+        });
+        output.addAudioTrack(audioSource, {
+            maximumPacketCount: Math.ceil(options.duration * 100 * 1.33)
+        });
+    }
+    await output.start();
+    try {
+        // AudioBufferSource places its first sample at timestamp zero. It can encode in
+        // parallel with video while both sources apply backpressure to the same output.
+        // Audio is small relative to video and first AudioBuffer is guaranteed to start at zero.
+        // Adding it first surfaces encoder failure before expensive video composition begins.
+        if (audioSource)
+            await audioSource.add(options.audioBuffer);
+        for (let frameIndex = 0; frameIndex < frameCount; frameIndex += 1) {
+            const timestamp = frameIndex / options.fps;
+            await options.renderFrame({
+                frameIndex,
+                timestamp,
+                duration: frameDuration,
+                progress: frameCount <= 1 ? 1 : frameIndex / (frameCount - 1)
+            });
+            await videoSource.add(timestamp, frameDuration);
+            options.onProgress?.((frameIndex + 1) / frameCount, frameIndex);
+        }
+        await output.finalize();
+    }
+    catch (error) {
+        if (output.state !== 'finalized' && output.state !== 'canceled') {
+            await output.cancel();
+        }
+        throw error;
+    }
+    return {
+        buffer: target instanceof BufferTarget ? target.buffer : null,
+        mimeType: 'video/mp4',
+        frameCount,
+        duration: frameCount / options.fps,
+        capabilities
+    };
+}
+/** Minimal deterministic in-browser MVP mix. First sample begins at t=0. */
+export async function mixBrowserAudio(options) {
+    if (!Number.isFinite(options.duration) || options.duration <= 0) {
+        throw new Error('Browser audio duration must be a positive finite number');
+    }
+    const sampleRate = options.sampleRate ?? 48_000;
+    const context = new OfflineAudioContext(2, Math.ceil(options.duration * sampleRate), sampleRate);
+    const master = context.createGain();
+    master.gain.value = 0.92;
+    master.connect(context.destination);
+    if (options.source) {
+        const source = context.createBufferSource();
+        const gain = context.createGain();
+        source.buffer = options.source;
+        gain.gain.value = options.sourceGain ?? 1;
+        source.connect(gain).connect(master);
+        source.start(0);
+    }
+    for (const tone of options.tone ?? []) {
+        const oscillator = context.createOscillator();
+        const gain = context.createGain();
+        const panner = context.createStereoPanner();
+        oscillator.frequency.value = tone.frequency;
+        oscillator.type = 'sine';
+        panner.pan.value = tone.pan ?? 0;
+        const level = tone.gain ?? 0.08;
+        gain.gain.setValueAtTime(0, tone.start);
+        gain.gain.linearRampToValueAtTime(level, tone.start + 0.01);
+        gain.gain.setValueAtTime(level, Math.max(tone.start + 0.01, tone.end - 0.03));
+        gain.gain.linearRampToValueAtTime(0, tone.end);
+        oscillator.connect(gain).connect(panner).connect(master);
+        oscillator.start(tone.start);
+        oscillator.stop(tone.end);
+    }
+    return context.startRendering();
+}

package/dist/browser/glTransitions.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 declare const GL_TRANSITION_NAMES: readonly ["fade", "radial-wipe"];
+export type GlTransitionName = (typeof GL_TRANSITION_NAMES)[number];
+export type GlTransitionParameters = Readonly<Record<string, number>>;
+export type GlTransitionRenderInput = {
+    /** Image source uploaded to the reusable `from` texture and shown at progress=0. */
+    from: TexImageSource;
+    /** Image source uploaded to the reusable `to` texture and shown at progress=1. */
+    to: TexImageSource;
+    /** Normalized transition position. Values outside 0..1 are clamped. */
+    progress: number;
+    /** Output width / output height. */
+    ratio: number;
+    transition: GlTransitionName;
+    parameters?: GlTransitionParameters;
+};
+export type GlTransitionRenderResult = {
+    requested: GlTransitionName;
+    used: GlTransitionName;
+    fallbackReason?: string;
+};
+type GlContext = WebGLRenderingContext | WebGL2RenderingContext;
+export declare function listGlTransitions(): readonly GlTransitionName[];
+export declare function createGlTransitionRenderer(gl: GlContext): GlTransitionRenderer;
+export declare class GlTransitionRenderer {
+    #private;
+    readonly canvas: HTMLCanvasElement | OffscreenCanvas;
+    constructor(gl: GlContext);
+    render(input: GlTransitionRenderInput): GlTransitionRenderResult;
+    destroy(): void;
+}
+export {};