visualfries 0.1.0

package/dist/animations/presets/words.js

@@ -0,0 +1,268 @@
+/**
+ * Words highlighter animation preset
+ * Highlights words within text
+ */
+export const wordsHighlighter = {
+    id: 'words-highlight',
+    presetId: 'words-highlight',
+    description: 'Highlights individual words with a custom color',
+    data: {},
+    setup: [{ type: 'splitText', by: 'words' }],
+    timeline: [
+        {
+            target: 'words',
+            tweens: [
+                {
+                    method: 'to',
+                    vars: {
+                        color: 'yellow', // Default color that can be overridden
+                        duration: 0.15,
+                        stagger: {
+                            type: 'fromData',
+                            dataKey: 'wordStartTimes'
+                        }
+                    }
+                }
+            ]
+        }
+    ]
+};
+/**
+ * Words animation preset 1
+ * Brings words in with a scale animation
+ */
+export const words1 = {
+    id: 'words-1',
+    description: 'Scales and fades in words with a nice bounce effect, then fades them out',
+    data: {},
+    setup: [
+        { type: 'style', properties: { flexDirection: 'column' } },
+        { type: 'splitText', by: 'words' }
+    ],
+    timeline: [
+        {
+            target: 'words',
+            tweens: [
+                {
+                    method: 'fromTo',
+                    vars: {
+                        from: {
+                            opacity: 0,
+                            scale: 0.3,
+                            y: '50%',
+                            yPercent: -50
+                        },
+                        opacity: 1,
+                        scale: 1,
+                        y: '50%',
+                        yPercent: -50,
+                        ease: 'back.out(5)',
+                        stagger: 0.15
+                    }
+                }
+            ]
+        },
+        {
+            target: 'words',
+            position: '>+=2', // 2 seconds after the first animation completes
+            tweens: [
+                {
+                    method: 'to',
+                    vars: {
+                        opacity: 0,
+                        scale: 0,
+                        y: '50%',
+                        ease: 'power4.out',
+                        stagger: 0.05
+                    }
+                }
+            ]
+        }
+    ]
+};
+/**
+ * Words animation preset with no overflow
+ * Text animates from below with a sliding effect
+ */
+export const words2 = {
+    id: 'words-no-overflow',
+    description: 'Fades in words sliding up from below without overflow',
+    data: {},
+    setup: [
+        { type: 'style', properties: { flexDirection: 'column' } },
+        { type: 'splitText', by: 'words' }
+    ],
+    timeline: [
+        {
+            target: 'words',
+            tweens: [
+                {
+                    method: 'fromTo',
+                    vars: {
+                        from: {
+                            opacity: 0,
+                            y: '50%',
+                            yPercent: 150
+                        },
+                        opacity: 1,
+                        y: '50%',
+                        yPercent: -50,
+                        ease: 'power3.out',
+                        stagger: 0.1
+                    }
+                }
+            ]
+        },
+        {
+            target: 'words',
+            position: '>+=2',
+            tweens: [
+                {
+                    method: 'to',
+                    vars: {
+                        opacity: 0,
+                        y: '50%',
+                        yPercent: -200,
+                        ease: 'power3.in',
+                        stagger: 0.05
+                    }
+                }
+            ]
+        }
+    ]
+};
+/**
+ * Subtitles rising back animation
+ * Words fade in with a nice back ease
+ */
+export const subtitlesRisingBack = {
+    id: 'subtitles-rising-back',
+    description: 'Words rise from bottom with a nice bounce effect',
+    data: {
+        // This preset can work with word timings provided by the consumer
+        wordStartTimes: [0, 0.1, 0.2, 0.3, 0.4]
+    },
+    setup: [
+        { type: 'splitText', by: 'words' }
+        // { type: 'style', properties: { opacity: 0 } }
+    ],
+    timeline: [
+        {
+            target: 'words',
+            tweens: [
+                {
+                    method: 'fromTo',
+                    vars: {
+                        from: {
+                            opacity: 0,
+                            scale: 0
+                        },
+                        opacity: 1,
+                        scale: 1,
+                        ease: 'back.out',
+                        stagger: {
+                            type: 'fromData',
+                            dataKey: 'wordStartTimes'
+                        }
+                    }
+                }
+            ]
+        }
+    ]
+};
+/**
+ * Words highlight animation preset
+ * Gradually highlights words one by one
+ */
+export const words3 = {
+    id: 'words-highlight',
+    description: 'Gradually highlights words by increasing opacity',
+    data: {},
+    setup: [
+        { type: 'style', properties: { flexDirection: 'column' } },
+        { type: 'splitText', by: 'words' }
+    ],
+    timeline: [
+        {
+            target: 'words',
+            tweens: [
+                {
+                    method: 'fromTo',
+                    vars: {
+                        from: {
+                            opacity: 0.4,
+                            y: '50%',
+                            yPercent: -50
+                        },
+                        opacity: 1,
+                        ease: 'power3.out',
+                        stagger: 0.4
+                    }
+                }
+            ]
+        },
+        {
+            target: 'words',
+            position: '>+=2',
+            tweens: [
+                {
+                    method: 'to',
+                    vars: {
+                        opacity: 0,
+                        y: '50%',
+                        ease: 'power4.out',
+                        stagger: 0.1
+                    }
+                }
+            ]
+        }
+    ]
+};
+/**
+ * Words active color animation preset
+ * Reveals words one by one with individual highlighting
+ */
+export const words4 = {
+    id: 'words-active-color',
+    description: 'Reveals and highlights words one by one with color changes',
+    data: {},
+    setup: [
+        { type: 'style', properties: { flexDirection: 'column' } },
+        { type: 'splitText', by: 'words' }
+    ],
+    timeline: [
+        {
+            target: 'words',
+            tweens: [
+                {
+                    method: 'fromTo',
+                    vars: {
+                        from: {
+                            opacity: 0,
+                            y: '50%',
+                            yPercent: -50
+                        },
+                        opacity: 1,
+                        ease: 'power3.out',
+                        stagger: 0.4
+                    }
+                }
+            ]
+        },
+        {
+            target: 'words',
+            position: '>+=2',
+            tweens: [
+                {
+                    method: 'to',
+                    vars: {
+                        opacity: 0,
+                        y: '50%',
+                        ease: 'power4.out',
+                        stagger: 0.1
+                    }
+                }
+            ]
+        }
+    ]
+};

package/dist/animations/transformers/AnimationReferenceTransformer.d.ts

@@ -0,0 +1,9 @@
+import type { AnimationPreset } from '../..';
+import type { AnimationPresetsRegister } from '../AnimationPresetsRegister.js';
+export declare class ComponentAnimationTransformer {
+    private animationPresetsRegister;
+    constructor(cradle: {
+        animationPresetsRegister: AnimationPresetsRegister;
+    });
+    handle(input: unknown): AnimationPreset | null;
+}

package/dist/animations/transformers/AnimationReferenceTransformer.js

@@ -0,0 +1,114 @@
+import { AnimationPresetShape, KeyframeAnimationShape } from '../..';
+class AbstractNormalizationHandler {
+    nextHandler = null;
+    setNext(handler) {
+        this.nextHandler = handler;
+        return handler; // Allows chaining like handler1.setNext(handler2).setNext(handler3)
+    }
+    handle(input, registry) {
+        if (this.canHandle(input)) {
+            return this.normalize(input, registry);
+        }
+        else if (this.nextHandler) {
+            return this.nextHandler.handle(input, registry);
+        }
+        return null;
+    }
+}
+class StringPresetHandler extends AbstractNormalizationHandler {
+    canHandle(input) {
+        return typeof input === 'string';
+    }
+    normalize(input, registry) {
+        const presetName = input;
+        const preset = registry.get(presetName);
+        if (!preset) {
+            console.warn(`StringPresetHandler: Preset "${presetName}" not found.`);
+            return null;
+        }
+        // Optional: validate preset from registry
+        const parseResult = AnimationPresetShape.safeParse(preset);
+        if (!parseResult.success) {
+            console.warn(`StringPresetHandler: Preset "${presetName}" from registry is invalid.`, parseResult.error.flatten());
+            return null;
+        }
+        return parseResult.data;
+    }
+}
+class KeyframePresetHandler extends AbstractNormalizationHandler {
+    canHandle(input) {
+        // More robust than 'tween' in input, use Zod to check shape
+        return KeyframeAnimationShape.safeParse(input).success;
+    }
+    normalize(input, _registry) {
+        const parseResult = KeyframeAnimationShape.safeParse(input);
+        if (!parseResult.success) {
+            // Should have been caught by canHandle, but good practice
+            console.warn('KeyframePresetHandler: Input is not a valid KeyframeAnimationShape.', parseResult.error.flatten());
+            return null;
+        }
+        const keyframeAnim = parseResult.data;
+        const presetId = keyframeAnim.id || `keyframe-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`;
+        const fullPresetObject = {
+            id: presetId,
+            data: { componentDuration: 0 },
+            setup: [],
+            timeline: [
+                {
+                    target: keyframeAnim.target || 'container',
+                    tweens: [keyframeAnim.tween]
+                }
+            ]
+        };
+        const normalizedValidation = AnimationPresetShape.safeParse(fullPresetObject);
+        if (!normalizedValidation.success) {
+            console.error('KeyframePresetHandler: Failed to normalize keyframe to valid AnimationPresetShape.', normalizedValidation.error.flatten());
+            return null;
+        }
+        return normalizedValidation.data;
+    }
+}
+class FullPresetHandler extends AbstractNormalizationHandler {
+    canHandle(input) {
+        const resp = AnimationPresetShape.safeParse(input);
+        if (!resp.success) {
+            // console.warn('FullPresetHandler: Input is not a valid AnimationPresetShape.', resp.error);
+        }
+        return AnimationPresetShape.safeParse(input).success;
+    }
+    normalize(input, _registry) {
+        const parseResult = AnimationPresetShape.safeParse(input);
+        if (!parseResult.success) {
+            // Should have been caught by canHandle
+            // console.warn(
+            // 	'FullPresetHandler: Input is not a valid AnimationPresetShape.',
+            // 	parseResult.error.flatten()
+            // );
+            return null;
+        }
+        return parseResult.data;
+    }
+}
+export class ComponentAnimationTransformer {
+    animationPresetsRegister;
+    constructor(cradle) {
+        this.animationPresetsRegister = cradle.animationPresetsRegister;
+    }
+    handle(input) {
+        const stringHandler = new StringPresetHandler();
+        const keyframeHandler = new KeyframePresetHandler();
+        const fullPresetHandler = new FullPresetHandler();
+        // Define the chain: Order matters!
+        // String is most specific, then keyframe (subset of object), then full object.
+        stringHandler.setNext(keyframeHandler).setNext(fullPresetHandler);
+        const normalizedPreset = stringHandler.handle(input, this.animationPresetsRegister.getPresets()); // TODO fill registry
+        if (!normalizedPreset) {
+            // console.warn(
+            // 	'normalizeAnimationReferenceWithPattern: Input animation reference does not match any known format or failed normalization.',
+            // 	input
+            // );
+            return null;
+        }
+        return normalizedPreset;
+    }
+}

package/dist/builders/PixiComponentBuilder.d.ts

@@ -0,0 +1,63 @@
+import type { IComponent, IComponentBuilder, IComponentHook as ComponentHook } from '..';
+import { Component } from '../components/Component.svelte.js';
+type PixiComponentCradle = {
+    component: Component;
+    mediaHook: ComponentHook;
+    verifyMediaHook: ComponentHook;
+    imageHook: ComponentHook;
+    verifyImageHook: ComponentHook;
+    verifyGifHook: ComponentHook;
+    videoTextureHook: ComponentHook;
+    splitScreenHook: ComponentHook;
+    htmlTextHook: ComponentHook;
+    htmlAnimationHook: ComponentHook;
+    animationHook: ComponentHook;
+    subtitlesHook: ComponentHook;
+    textureHook: ComponentHook;
+    objectHook: ComponentHook;
+    gifHook: ComponentHook;
+    canvasShapeHook: ComponentHook;
+    pixiProgressShapeHook: ComponentHook;
+    htmlToCanvasHook: ComponentHook;
+    mediaSeekingHook: ComponentHook;
+};
+export declare class PixiComponentBuilder implements IComponentBuilder {
+    private component;
+    private mediaHook;
+    private verifyMediaHook;
+    private imageHook;
+    private verifyImageHook;
+    private verifyGifHook;
+    private videoTextureHook;
+    private splitScreenHook;
+    private htmlTextHook;
+    private htmlAnimationHook;
+    private subtitlesHook;
+    private textureHook;
+    private objectHook;
+    private gifHook;
+    private canvasShapeHook;
+    private pixiProgressShapeHook;
+    private htmlToCanvasHook;
+    private animationHook;
+    private mediaSeekingHook;
+    constructor(cradle: PixiComponentCradle);
+    withCanvasShape(): this;
+    withProgressShape(): this;
+    withMedia(): this;
+    withMediaSeeking(): this;
+    withImage(): this;
+    withTexture(): this;
+    withDisplayObject(): this;
+    withVideoTexture(): this;
+    withSplitScreen(): this;
+    withHtmlText(): this;
+    withAnimation(): this;
+    withHtmlAnimation(): this;
+    withHtmlToCanvasHook(): this;
+    withSubtitles(): this;
+    withGif(): this;
+    withShape(): this;
+    getComponent(): IComponent;
+}
+export {};

package/dist/builders/PixiComponentBuilder.js

@@ -0,0 +1,112 @@
+import { Component } from '../components/Component.svelte.js';
+export class PixiComponentBuilder {
+    component;
+    mediaHook;
+    verifyMediaHook;
+    imageHook;
+    verifyImageHook;
+    verifyGifHook;
+    videoTextureHook;
+    splitScreenHook;
+    htmlTextHook;
+    htmlAnimationHook;
+    subtitlesHook;
+    textureHook;
+    objectHook;
+    gifHook;
+    canvasShapeHook;
+    pixiProgressShapeHook;
+    htmlToCanvasHook;
+    animationHook;
+    mediaSeekingHook;
+    constructor(cradle) {
+        this.component = cradle.component;
+        this.mediaHook = cradle.mediaHook;
+        this.verifyMediaHook = cradle.verifyMediaHook;
+        this.imageHook = cradle.imageHook;
+        this.verifyImageHook = cradle.verifyImageHook;
+        this.verifyGifHook = cradle.verifyGifHook;
+        this.videoTextureHook = cradle.videoTextureHook;
+        this.splitScreenHook = cradle.splitScreenHook;
+        this.htmlTextHook = cradle.htmlTextHook;
+        this.htmlAnimationHook = cradle.htmlAnimationHook;
+        this.animationHook = cradle.animationHook;
+        this.subtitlesHook = cradle.subtitlesHook;
+        this.textureHook = cradle.textureHook;
+        this.objectHook = cradle.objectHook;
+        this.gifHook = cradle.gifHook;
+        this.canvasShapeHook = cradle.canvasShapeHook;
+        this.pixiProgressShapeHook = cradle.pixiProgressShapeHook;
+        this.htmlToCanvasHook = cradle.htmlToCanvasHook;
+        this.mediaSeekingHook = cradle.mediaSeekingHook;
+    }
+    withCanvasShape() {
+        this.component.addHook(this.canvasShapeHook);
+        return this;
+    }
+    withProgressShape() {
+        this.component.addHook(this.pixiProgressShapeHook);
+        return this;
+    }
+    withMedia() {
+        this.component.addHook(this.verifyMediaHook);
+        this.component.addHook(this.mediaHook);
+        return this;
+    }
+    withMediaSeeking() {
+        this.component.addHook(this.mediaSeekingHook);
+        return this;
+    }
+    withImage() {
+        this.component.addHook(this.verifyImageHook);
+        this.component.addHook(this.imageHook);
+        return this;
+    }
+    withTexture() {
+        this.component.addHook(this.textureHook);
+        return this;
+    }
+    withDisplayObject() {
+        this.component.addHook(this.objectHook);
+        return this;
+    }
+    withVideoTexture() {
+        this.component.addHook(this.videoTextureHook);
+        return this;
+    }
+    withSplitScreen() {
+        this.component.addHook(this.splitScreenHook);
+        return this;
+    }
+    withHtmlText() {
+        this.component.addHook(this.htmlTextHook);
+        return this;
+    }
+    withAnimation() {
+        this.component.addHook(this.animationHook);
+        return this;
+    }
+    withHtmlAnimation() {
+        this.component.addHook(this.htmlAnimationHook);
+        return this;
+    }
+    withHtmlToCanvasHook() {
+        this.component.addHook(this.htmlToCanvasHook);
+        return this;
+    }
+    withSubtitles() {
+        this.component.addHook(this.subtitlesHook);
+        return this;
+    }
+    withGif() {
+        this.component.addHook(this.verifyGifHook);
+        this.component.addHook(this.gifHook);
+        return this;
+    }
+    withShape() {
+        return this;
+    }
+    getComponent() {
+        return this.component;
+    }
+}