visualfries 0.1.0

package/dist/builders/_ComponentState.svelte.js

@@ -0,0 +1,203 @@
+import { EventManager } from '../managers/EventManager.js';
+import { StateManager } from '../managers/StateManager.svelte.js';
+import { merge } from 'lodash-es';
+import md5 from 'md5';
+export class ComponentState {
+    #data = $state();
+    eventManager;
+    sceneState;
+    refreshCallback;
+    constructor(cradle) {
+        this.#data = cradle.componentData;
+        this.eventManager = cradle.eventManager;
+        this.sceneState = cradle.stateManager;
+    }
+    setRefreshCallback(callback) {
+        this.refreshCallback = callback;
+    }
+    async maybeAutoRefresh() {
+        if (this.refreshCallback) {
+            try {
+                await this.refreshCallback();
+            }
+            catch (error) {
+                console.warn('Auto-refresh callback failed:', error);
+                // Don't re-throw to avoid breaking the update operation
+            }
+        }
+    }
+    get id() {
+        return this.#data.id;
+    }
+    get type() {
+        return this.#data.type;
+    }
+    get name() {
+        return (this.#data.name ??
+            this.#data.type.charAt(0).toUpperCase() + this.#data.type.slice(1) + ' Component');
+    }
+    get start_at() {
+        return this.#data.timeline.startAt;
+    }
+    get end_at() {
+        return this.#data.timeline.endAt;
+    }
+    set start_at(time) {
+        this.#data.timeline.startAt = time;
+    }
+    set end_at(time) {
+        this.#data.timeline.endAt = time;
+    }
+    set name(name) {
+        this.#data.name = name;
+    }
+    get order() {
+        return this.#data.order || 1;
+    }
+    get visible() {
+        return this.#data.visible ? this.#data.visible : true;
+    }
+    get duration() {
+        return this.#data.timeline.endAt - this.#data.timeline.startAt;
+    }
+    get asset_id() {
+        // TODO
+        return '';
+        // return this.#data!.source.assetId;
+    }
+    get timeline() {
+        return this.#data.timeline;
+    }
+    get appearance() {
+        return this.#data.appearance;
+    }
+    get animations() {
+        return this.#data.animations ?? {};
+    }
+    get effects() {
+        return this.#data.effects ?? {};
+    }
+    get checksum() {
+        return (this.id +
+            '-' +
+            md5(JSON.stringify({
+                ...$state.snapshot(this.#data)
+                // element: {
+                // 	...this.#data!.element,
+                // 	path: undefined
+                // }
+            })));
+    }
+    #emitChange() {
+        this.#data.checksum = md5(JSON.stringify(this.#data)).slice(0, 8);
+        this.eventManager.emit('componentchange', this.getData());
+    }
+    getData() {
+        return {
+            ...$state.snapshot(this.#data),
+            order: this.order,
+            // checksum: this.checksum,
+            visible: this.visible
+        };
+    }
+    setData(data) {
+        const id = this.id;
+        const type = this.type;
+        const newData = $state({ ...data, id, type });
+        this.#data = newData;
+        this.#emitChange();
+    }
+    #changeVideoStart(diff) {
+        if (this.type === 'VIDEO') {
+            let source = this.#data.source;
+            if (!source) {
+                source = {
+                    startAt: 0
+                };
+                this.#data.source = source;
+            }
+            if (source.startAt !== undefined && source.startAt !== null) {
+                source.startAt += diff;
+                source.startAt = Math.max(0, source.startAt);
+            }
+            if (source.endAt !== undefined && source.endAt !== null) {
+                source.endAt += diff;
+            }
+        }
+        // TODO verify starting time is not beyond video duration
+        // const metadata = this.#data!.metadata
+        // 	? (this.#data!.metadata as Metadata)
+        // 	: ({ starting_time: 0 } as Metadata);
+        // let startingTime = metadata.starting_time ? (metadata.starting_time as number) : 0;
+        // startingTime += diff;
+        // startingTime = Math.max(0, startingTime);
+        // this.updateMetadata({
+        // 	starting_time: startingTime
+        // });
+    }
+    setStart(start) {
+        const beforeStart = this.sceneState.transformTime(this.#data.timeline.startAt);
+        const newStart = this.sceneState.transformTime(start);
+        const diff = newStart - beforeStart;
+        if (diff !== 0) {
+            if (this.type === 'VIDEO') {
+                this.#changeVideoStart(diff);
+            }
+            this.#data.timeline.startAt = this.sceneState.transformTime(start);
+            this.#emitChange();
+        }
+    }
+    setEnd(end) {
+        this.#data.timeline.endAt = this.sceneState.transformTime(end);
+        this.#emitChange();
+    }
+    setStreamPath(path) {
+        // if (this.type === 'VIDEO' || this.type === 'AUDIO') {
+        //     this.#data!.element.stream_path = path;
+        //     this.#emitChange();
+        // }
+    }
+    async updateText(text) {
+        if (this.type === 'TEXT') {
+            this.#data.text = text;
+            this.#emitChange();
+            await this.maybeAutoRefresh();
+        }
+    }
+    update(data) {
+        console.warn('update not implemented yet', data);
+        // const newConfig = {
+        // 	...this.#data!.element.config,
+        // 	...data
+        // };
+        // const res = PlacableConfigShape.safeParse(newConfig);
+        // if (res.success) {
+        // 	this.#data!.element.config = newConfig;
+        // 	this.#emitChange();
+        // } else {
+        // 	console.error('Error updating component data', res.error);
+        // }
+    }
+    async updateAppearance(appearance) {
+        const mergedAppearance = merge({}, this.#data.appearance, appearance);
+        this.#data = { ...this.#data, appearance: mergedAppearance };
+        this.#emitChange();
+        await this.maybeAutoRefresh();
+    }
+    async setVisible(visible) {
+        if (this.#data.visible !== visible) {
+            this.#data.visible = visible;
+            this.#emitChange();
+            await this.maybeAutoRefresh();
+        }
+    }
+    async 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();
+        }
+    }
+}

package/dist/builders/html/HtmlBuilder.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Represents a flexible way to define HTML element styles.
+ * It uses Partial<CSSStyleDeclaration> for known CSS properties
+ * and allows any string key for custom properties or less common ones.
+ */
+export type HtmlElementStyle = Omit<Partial<CSSStyleDeclaration>, 'length' | 'parentRule' | 'getPropertyPriority' | 'getPropertyValue' | 'item' | 'removeProperty' | 'setProperty'> & Record<string, string | number | undefined>;
+/**
+ * Configuration for the wrapper HTML element.
+ */
+export interface WrapperConfig {
+    id?: string;
+    style?: HtmlElementStyle;
+}
+/**
+ * Configuration for the inner HTML element.
+ */
+export interface ElementConfig {
+    id?: string;
+    classList?: string[];
+    dir?: 'auto' | 'ltr' | 'rtl';
+    innerHTML?: string;
+    innerText?: string;
+    style?: HtmlElementStyle;
+}
+export declare class HtmlBuilder {
+    private wrapper;
+    private element;
+    private document;
+    constructor(document: Document);
+    private applyDefaultWrapperStyles;
+    private applyDefaultElementStyles;
+    /**
+     * Configures the wrapper element.
+     */
+    withWrapper(config: WrapperConfig): HtmlBuilder;
+    /**
+     * Configures the inner element.
+     */
+    withElement(config: ElementConfig): HtmlBuilder;
+    /**
+     * Builds and returns the wrapper and inner HTML elements.
+     * Ensures the inner element is a child of the wrapper.
+     */
+    build(): {
+        wrapper: HTMLElement;
+        element: HTMLElement;
+    };
+    /**
+     * Builds the elements and extracts inline styles to document-level CSS rules.
+     * Returns the elements with their inline styles converted to CSS classes.
+     */
+    buildAndExtractStyles(): {
+        wrapper: HTMLElement;
+        element: HTMLElement;
+    };
+    /**
+     * Extracts inline styles from an element and registers them as CSS rules in the document.
+     * Clears the inline styles after extraction.
+     * Special handling for -webkit-text-stroke properties which are registered to ::before pseudo-element.
+     */
+    private extractAndRegisterStyles;
+    /**
+     * Adds a CSS rule to the document's head or creates a style element if needed.
+     */
+    private addStyleToDocument;
+}

package/dist/builders/html/HtmlBuilder.js

@@ -0,0 +1,171 @@
+import { sanitizeElement } from '../../utils/html.js';
+export class HtmlBuilder {
+    wrapper;
+    element;
+    document;
+    constructor(document) {
+        this.document = document;
+        this.wrapper = this.document.createElement('div');
+        this.element = this.document.createElement('div');
+        this.applyDefaultWrapperStyles();
+        this.applyDefaultElementStyles();
+    }
+    applyDefaultWrapperStyles() {
+        this.wrapper.style.position = 'absolute';
+        this.wrapper.style.display = 'flex';
+        // Consider if top/left should be default 0px if not using transform for positioning
+        // this.wrapper.style.top = '0px';
+        // this.wrapper.style.left = '0px';
+    }
+    applyDefaultElementStyles() {
+        // The inner element is often positioned relative to the wrapper
+        this.element.style.position = 'relative'; // Or 'absolute' with top/left 0 if preferred
+        // this.element.style.display = 'flex';
+        this.element.dir = 'auto';
+        this.element.classList.add('con-el'); // Common class from your example
+        // this.element.style.width = '100%'; // Often inner element spans full wrapper width
+        // this.element.style.height = '100%'; // Often inner element spans full wrapper height
+    }
+    /**
+     * Configures the wrapper element.
+     */
+    withWrapper(config) {
+        if (config.id)
+            this.wrapper.id = config.id;
+        if (config.style) {
+            Object.assign(this.wrapper.style, config.style);
+        }
+        return this;
+    }
+    /**
+     * Configures the inner element.
+     */
+    withElement(config) {
+        if (config.id)
+            this.element.id = config.id;
+        if (config.classList) {
+            config.classList.forEach((cls) => {
+                if (!this.element.classList.contains(cls)) {
+                    // Avoid duplicates if con-el is passed again
+                    this.element.classList.add(cls);
+                }
+            });
+        }
+        if (config.dir)
+            this.element.dir = config.dir;
+        // innerHTML takes precedence over innerText if both are provided
+        if (config.innerHTML !== undefined) {
+            this.element.innerHTML = config.innerHTML;
+        }
+        else if (config.innerText !== undefined) {
+            this.element.innerText = config.innerText;
+        }
+        if (config.style) {
+            Object.assign(this.element.style, config.style);
+        }
+        return this;
+    }
+    /**
+     * Builds and returns the wrapper and inner HTML elements.
+     * Ensures the inner element is a child of the wrapper.
+     */
+    build() {
+        if (!this.wrapper.contains(this.element)) {
+            this.wrapper.appendChild(this.element);
+        }
+        return {
+            wrapper: sanitizeElement(this.wrapper),
+            element: sanitizeElement(this.element)
+        };
+    }
+    /**
+     * Builds the elements and extracts inline styles to document-level CSS rules.
+     * Returns the elements with their inline styles converted to CSS classes.
+     */
+    buildAndExtractStyles() {
+        if (!this.wrapper.contains(this.element)) {
+            this.wrapper.appendChild(this.element);
+        }
+        // Extract and register wrapper styles
+        if (this.wrapper.id) {
+            this.extractAndRegisterStyles(this.wrapper, this.wrapper.id);
+        }
+        // Extract and register element styles
+        if (this.element.id) {
+            this.extractAndRegisterStyles(this.element, this.element.id);
+        }
+        return { wrapper: this.wrapper, element: this.element };
+    }
+    /**
+     * Extracts inline styles from an element and registers them as CSS rules in the document.
+     * Clears the inline styles after extraction.
+     * Special handling for -webkit-text-stroke properties which are registered to ::before pseudo-element.
+     */
+    extractAndRegisterStyles(element, elementId) {
+        const inlineStyles = element.style;
+        const regularStyleProperties = [];
+        const beforeProperties = [];
+        // Collect all inline style properties and separate webkit-text-stroke properties
+        for (let i = 0; i < inlineStyles.length; i++) {
+            const property = inlineStyles.item(i);
+            const value = inlineStyles.getPropertyValue(property);
+            if (value) {
+                if (property.startsWith('-webkit-text-stroke')) {
+                    beforeProperties.push(`${property}: ${value}`);
+                }
+                else {
+                    regularStyleProperties.push(`${property}: ${value}`);
+                }
+            }
+        }
+        if (beforeProperties.length > 0) {
+            beforeProperties.push(`color: transparent`);
+            beforeProperties.push('content: "' + element.textContent + '"');
+            beforeProperties.push('position: absolute');
+            beforeProperties.push('top: 0');
+            beforeProperties.push('left: 0');
+            beforeProperties.push('paint-order: stroke');
+        }
+        // Register regular styles to the main element
+        if (regularStyleProperties.length > 0) {
+            const cssRule = `#${elementId} { ${regularStyleProperties.join('; ')} }`;
+            this.addStyleToDocument(cssRule);
+        }
+        // Register webkit-text-stroke properties to ::before pseudo-element
+        if (beforeProperties.length > 0) {
+            const pseudoRule = `#${elementId}::before { ${beforeProperties.join('; ')} }`;
+            this.addStyleToDocument(pseudoRule);
+        }
+        // Clear inline styles after extraction
+        element.style.cssText = '';
+    }
+    /**
+     * Adds a CSS rule to the document's head or creates a style element if needed.
+     */
+    addStyleToDocument(cssRule) {
+        // Try to find existing style element for this builder
+        let styleElement = this.document.getElementById('html-builder-styles');
+        if (!styleElement) {
+            // Create new style element if it doesn't exist
+            styleElement = this.document.createElement('style');
+            styleElement.id = 'html-builder-styles';
+            styleElement.type = 'text/css';
+            this.document.head.appendChild(styleElement);
+        }
+        // Add the CSS rule to the style element
+        if (styleElement.sheet) {
+            try {
+                styleElement.sheet.insertRule(cssRule, styleElement.sheet.cssRules.length);
+            }
+            catch (error) {
+                // Fallback: append as text content if insertRule fails
+                console.warn('Failed to insert CSS rule, using fallback method:', error);
+                styleElement.textContent += cssRule + '\n';
+            }
+        }
+        else {
+            // Fallback: append as text content
+            styleElement.textContent += cssRule + '\n';
+        }
+    }
+}

package/dist/builders/html/HtmlBuilderFactory.d.ts

@@ -0,0 +1,27 @@
+import type { Component } from '../..';
+/**
+ * Factory for creating the appropriate HTML builder based on component type.
+ *
+ * This factory simplifies the process of creating component-specific builders,
+ * allowing hooks to easily get the right builder without needing to know which
+ * concrete class to instantiate.
+ */
+export declare class HtmlBuilderFactory {
+    /**
+     * Creates the appropriate builder for a given component.
+     *
+     * @param component The component to create a builder for
+     * @param document The document object to use for creating elements
+     * @returns A builder capable of creating HTML elements for the component
+     */
+    static createBuilder(component: Component, document: Document): {
+        build(): {
+            wrapper: HTMLElement;
+            element: HTMLElement;
+        };
+        buildAndExtractStyles(): {
+            wrapper: HTMLElement;
+            element: HTMLElement;
+        };
+    };
+}

package/dist/builders/html/HtmlBuilderFactory.js

@@ -0,0 +1,30 @@
+import { TextComponentHtmlBuilder } from './TextComponentHtmlBuilder.js';
+/**
+ * Factory for creating the appropriate HTML builder based on component type.
+ *
+ * This factory simplifies the process of creating component-specific builders,
+ * allowing hooks to easily get the right builder without needing to know which
+ * concrete class to instantiate.
+ */
+export class HtmlBuilderFactory {
+    /**
+     * Creates the appropriate builder for a given component.
+     *
+     * @param component The component to create a builder for
+     * @param document The document object to use for creating elements
+     * @returns A builder capable of creating HTML elements for the component
+     */
+    static createBuilder(component, document) {
+        switch (component.type) {
+            case 'TEXT':
+                return new TextComponentHtmlBuilder(component, document);
+            // Add cases for other component types as they're implemented
+            // case 'SUBTITLES':
+            //   return new SubtitleComponentHtmlBuilder(component as SubtitleComponent, document);
+            // case 'SHAPE':
+            //   return new ShapeComponentHtmlBuilder(component as ShapeComponent, document);
+            default:
+                throw new Error(`No HTML builder available for component type: ${component.type}`);
+        }
+    }
+}

package/dist/builders/html/StyleBuilder.d.ts

@@ -0,0 +1,13 @@
+import type { Component } from '../..';
+export declare class StyleBuilder {
+    private component;
+    private processors;
+    private omitStyles;
+    private onlyStyles;
+    constructor(component: Component);
+    private prepareComponent;
+    omit(keys: string[]): void;
+    only(keys: string[]): void;
+    build(): Record<string, any>;
+    private _mergeStyles;
+}

package/dist/builders/html/StyleBuilder.js

@@ -0,0 +1,133 @@
+import { AppearanceStyleProcessor } from './processors/AppearanceStyleProcessor.js';
+import { TextAppearanceStyleProcessor } from './processors/TextAppearanceStyleProcessor.js';
+import { TextEffectsStyleProcessor } from './processors/TextEffectsStyleProcessor.js';
+import { TextEffectPresetName } from './TextShadowBuilder.js';
+export class StyleBuilder {
+    component;
+    // Using an array of a more general ProcessorEntry type or a union if strictly typed
+    processors;
+    omitStyles = [];
+    onlyStyles = [];
+    constructor(component) {
+        this.component = this.prepareComponent(component);
+        this.processors = [
+            {
+                name: 'appearance',
+                instance: new AppearanceStyleProcessor(),
+                getData: (comp) => comp.appearance ? comp.appearance : undefined
+            },
+            {
+                name: 'textAppearance',
+                instance: new TextAppearanceStyleProcessor(),
+                getData: (comp) => {
+                    if (comp.type === 'TEXT' || comp.type === 'SUBTITLES') {
+                        return comp.appearance?.text;
+                    }
+                    return undefined;
+                },
+                condition: (comp) => comp.type === 'TEXT' || comp.type === 'SUBTITLES'
+            },
+            {
+                name: 'textEffects',
+                instance: new TextEffectsStyleProcessor(),
+                getData: (comp) => {
+                    if (comp.type === 'TEXT' || comp.type === 'SUBTITLES') {
+                        return comp.effects?.map;
+                    }
+                    return undefined;
+                },
+                condition: (comp) => comp.type === 'TEXT' || comp.type === 'SUBTITLES'
+            }
+        ];
+    }
+    prepareComponent(c) {
+        const component = { ...c };
+        if (component.type === 'TEXT' || component.type === 'SUBTITLES') {
+            const { appearance } = component;
+            const textAppearance = appearance?.text;
+            if (textAppearance?.shadow) {
+                component.effects.map['textShadow'] = {
+                    preset: TextEffectPresetName.DEFAULT,
+                    enabled: textAppearance.shadow.enabled ? true : false,
+                    color: typeof textAppearance.color === 'string'
+                        ? textAppearance.color
+                        : textAppearance.color.colors[0],
+                    size: textAppearance.shadow.size,
+                    blur: textAppearance.shadow.blur,
+                    type: 'textShadow'
+                };
+            }
+            if (textAppearance?.outline) {
+                // TODO
+                component.effects.map['textOutline'] = {
+                    preset: TextEffectPresetName.OUTLINE,
+                    enabled: textAppearance.outline.enabled ? true : false,
+                    size: textAppearance.outline.size,
+                    color: textAppearance.outline.color
+                };
+            }
+            return component;
+        }
+        return component;
+    }
+    omit(keys) {
+        this.omitStyles = keys;
+    }
+    only(keys) {
+        this.onlyStyles = keys;
+    }
+    build() {
+        const finalStyles = {};
+        let processedSpecificLogic = false;
+        for (const processorEntry of this.processors) {
+            if (processorEntry.condition && !processorEntry.condition(this.component)) {
+                continue; // Skip processor if condition not met
+            }
+            const dataForProcessor = processorEntry.getData(this.component);
+            // Ensure data is not undefined if processor expects non-nullable, though current processors handle undefined.
+            const partialStyles = processorEntry.instance.process(dataForProcessor);
+            this._mergeStyles(finalStyles, partialStyles);
+            // Track if specific (conditional) logic was run
+            if (processorEntry.condition) {
+                processedSpecificLogic = true;
+            }
+        }
+        // If it's not a TEXT/SUBTITLES component and no specific logic was run (beyond base appearance)
+        if (!processedSpecificLogic &&
+            !(this.component.type === 'TEXT' || this.component.type === 'SUBTITLES')) {
+            // Check if only the unconditional 'appearance' processor ran
+            const ranProcessors = this.processors.filter((p) => !p.condition || p.condition(this.component));
+            if (ranProcessors.length === 1 && ranProcessors[0].name === 'appearance') {
+                console.warn(`StyleBuilder: Fallback styling for component type '${this.component.type}'. Only base appearance processed.`);
+            }
+        }
+        // Remove the omitted styles from the final styles
+        this.omitStyles.forEach((key) => {
+            delete finalStyles[key];
+        });
+        if (this.onlyStyles.length > 0) {
+            Object.keys(finalStyles).forEach((key) => {
+                if (!this.onlyStyles.includes(key)) {
+                    delete finalStyles[key];
+                }
+            });
+        }
+        return finalStyles;
+    }
+    _mergeStyles(targetStyles, sourceStyles) {
+        for (const [key, value] of Object.entries(sourceStyles)) {
+            if (value === undefined || value === null)
+                continue;
+            if (key === 'textShadow') {
+                targetStyles[key] = targetStyles[key] ? `${targetStyles[key]}, ${value}` : value;
+            }
+            else if (key === 'transform') {
+                // Ensure space separation for multiple transform functions
+                targetStyles[key] = targetStyles[key] ? `${targetStyles[key]} ${value}` : value;
+            }
+            else {
+                targetStyles[key] = value; // Default: overwrite
+            }
+        }
+    }
+}

package/dist/builders/html/StyleProcessor.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from '../..';
+export interface StyleProcessor<K = Component> {
+    /**
+     * Processes a part of the component's data to generate styles.
+     * @param data The specific data part (e.g., appearance, text properties) needed by this processor.
+     * @returns A record of CSS style properties generated by this processor.
+     */
+    process(data: K): Record<string, any>;
+}

package/dist/builders/html/StyleProcessor.js

@@ -0,0 +1 @@
+export {};

package/dist/builders/html/TextComponentHtmlBuilder.d.ts

@@ -0,0 +1,16 @@
+import type { TextComponent } from '../..';
+export declare class TextComponentHtmlBuilder {
+    private component;
+    private document;
+    constructor(component: TextComponent, document: Document);
+    private getWrapperConfig;
+    private getElementConfig;
+    build(): {
+        wrapper: HTMLElement;
+        element: HTMLElement;
+    };
+    buildAndExtractStyles(): {
+        wrapper: HTMLElement;
+        element: HTMLElement;
+    };
+}