visualfries 0.1.0

package/dist/builders/html/TextComponentHtmlBuilder.js

@@ -0,0 +1,93 @@
+import { sanitizeText, wrapEmojis } from '../../utils/html.js';
+import { get } from 'lodash-es';
+import { HtmlBuilder } from './HtmlBuilder.js';
+import { StyleBuilder } from './StyleBuilder.js';
+export class TextComponentHtmlBuilder {
+    component;
+    document;
+    constructor(component, document) {
+        this.component = component;
+        this.document = document;
+    }
+    getWrapperConfig() {
+        // wrapper is always just one
+        const { appearance, id } = this.component;
+        const styleBuilder = new StyleBuilder(this.component);
+        const onlyStyles = [
+            'left',
+            'top',
+            'position',
+            'fontFamily',
+            'fontWeight',
+            'width',
+            'height',
+            'justifyContent',
+            'alignItems',
+            'display'
+        ];
+        if (get(appearance, 'background.enabled', false) &&
+            get(appearance, 'background.target') === 'wrapper') {
+            onlyStyles.push('background');
+            onlyStyles.push('borderRadius');
+            onlyStyles.push('backgroundColor');
+        }
+        styleBuilder.only(onlyStyles);
+        const style = styleBuilder.build();
+        return {
+            id: `cf-text-wrapper-${id}`, // Convention for wrapper ID
+            style
+        };
+    }
+    getElementConfig() {
+        // we can have multiple elements depending on the appearance
+        const { text, id, appearance } = this.component; // Keep text and id for innerHTML and element id
+        const styleBuilder = new StyleBuilder(this.component);
+        const omitStyles = [
+            'left',
+            'top',
+            'position',
+            'justifyContent',
+            'alignItems',
+            'display',
+            'width',
+            'height'
+        ];
+        let addPadding = false;
+        if (get(appearance, 'background.enabled', false)) {
+            // omit background if target is wrapper
+            if (get(appearance, 'background.target') === 'wrapper') {
+                omitStyles.push('background');
+                omitStyles.push('borderRadius');
+                omitStyles.push('backgroundColor');
+            }
+            if (get(appearance, 'background.target') === 'element') {
+                addPadding = true;
+            }
+        }
+        styleBuilder.omit(omitStyles);
+        const style = styleBuilder.build();
+        if (addPadding && !style.padding) {
+            style.padding = '0.22em';
+        }
+        // Process text for HTML
+        const processedText = text ? wrapEmojis(text.replace(/<br>/g, '<br />')) : '';
+        const safeHtml = sanitizeText(processedText);
+        return {
+            id: `elem-${id}`,
+            innerHTML: safeHtml,
+            style
+            // dir: 'auto' is default from HtmlBuilder
+            // classList: ['con-el'] is default from HtmlBuilder
+        };
+    }
+    build() {
+        const htmlBuilder = new HtmlBuilder(this.document);
+        htmlBuilder.withWrapper(this.getWrapperConfig()).withElement(this.getElementConfig());
+        return htmlBuilder.build();
+    }
+    buildAndExtractStyles() {
+        const htmlBuilder = new HtmlBuilder(this.document);
+        htmlBuilder.withWrapper(this.getWrapperConfig()).withElement(this.getElementConfig());
+        return htmlBuilder.buildAndExtractStyles();
+    }
+}

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

@@ -0,0 +1,60 @@
+/**
+ * Enum of supported text shadow preset types.
+ */
+export declare enum TextEffectPresetName {
+    DEFAULT = "default",
+    CLASSIC = "classic",
+    EMERGING = "emerging",
+    GLOW = "glow",
+    TEXT = "text",
+    BOLD = "bold",
+    NEON = "neon",
+    ANAGLYPH = "anaglyph",
+    FIRE = "fire",
+    THREE_D = "3d",
+    FROSTY = "frosty",
+    INK = "ink",
+    RAINBOW = "rainbow",
+    OUTLINE = "outline",
+    STROKE = "stroke"
+}
+/**
+ * Configuration options for building a text shadow.
+ */
+interface TextShadowBuildConfig {
+    preset: string;
+    size: number;
+    color: string;
+    opacity: number;
+    textColor?: string;
+}
+/**
+ * Utility class for building CSS text-shadow values based on different presets.
+ */
+export declare class TextShadowBuilder {
+    /**
+     * Map of preset names to their corresponding shadow generation strategies.
+     */
+    private static strategies;
+    /**
+     * Helper method to create a funky shadow string for specific presets.
+     * @param toSize The maximum size for the shadow.
+     * @param color The shadow color.
+     * @returns A CSS text-shadow string.
+     */
+    private static funkyShadowString;
+    /**
+     * Builds a CSS text-shadow value based on the provided configuration.
+     * @param config The configuration for the text shadow.
+     * @returns A CSS text-shadow string or 'none' if size is <= 0.
+     */
+    static build(config: TextShadowBuildConfig): string;
+    /**
+     * Builds a CSS filter drop-shadow value by converting a text-shadow string.
+     * This is used to apply shadows to elements with transparent text, such as those with gradient fills.
+     * @param config The configuration for the text shadow.
+     * @returns A CSS filter string with one or more drop-shadow() functions, or 'none'.
+     */
+    static buildDropShadow(config: TextShadowBuildConfig): string;
+}
+export {};

package/dist/builders/html/TextShadowBuilder.js

@@ -0,0 +1,227 @@
+import tinycolor from 'tinycolor2';
+/**
+ * Enum of supported text shadow preset types.
+ */
+export var TextEffectPresetName;
+(function (TextEffectPresetName) {
+    TextEffectPresetName["DEFAULT"] = "default";
+    TextEffectPresetName["CLASSIC"] = "classic";
+    TextEffectPresetName["EMERGING"] = "emerging";
+    TextEffectPresetName["GLOW"] = "glow";
+    TextEffectPresetName["TEXT"] = "text";
+    TextEffectPresetName["BOLD"] = "bold";
+    TextEffectPresetName["NEON"] = "neon";
+    TextEffectPresetName["ANAGLYPH"] = "anaglyph";
+    TextEffectPresetName["FIRE"] = "fire";
+    TextEffectPresetName["THREE_D"] = "3d";
+    TextEffectPresetName["FROSTY"] = "frosty";
+    TextEffectPresetName["INK"] = "ink";
+    TextEffectPresetName["RAINBOW"] = "rainbow";
+    TextEffectPresetName["OUTLINE"] = "outline";
+    TextEffectPresetName["STROKE"] = "stroke";
+})(TextEffectPresetName || (TextEffectPresetName = {}));
+/**
+ * Utility class for building CSS text-shadow values based on different presets.
+ */
+export class TextShadowBuilder {
+    /**
+     * Map of preset names to their corresponding shadow generation strategies.
+     */
+    static strategies = {
+        [TextEffectPresetName.CLASSIC]: ({ size, shadowColor }) => {
+            return `0 0 ${size}em ${shadowColor}`;
+        },
+        [TextEffectPresetName.EMERGING]: ({ size, shadowColor, textColor }) => {
+            if (!textColor)
+                textColor = '#FFFFFF';
+            const c1 = tinycolor.mix(shadowColor, textColor, 10).toString('hex8');
+            const c2 = tinycolor.mix(shadowColor, textColor, 15).toString('hex8');
+            const c3 = tinycolor.mix(shadowColor, textColor, 30).toString('hex8');
+            const c4 = tinycolor.mix(shadowColor, textColor, 45).toString('hex8');
+            const c5 = tinycolor.mix(shadowColor, textColor, 60).toString('hex8');
+            const c6 = tinycolor.mix(shadowColor, textColor, 75).toString('hex8');
+            const c7 = tinycolor.mix(shadowColor, textColor, 90).toString('hex8');
+            return `0 ${(2 / 23) * size}em ${(2 / 23) * size}em ${c7}, ${(-2 / 23) * size}em ${(5 / 23) * size}em ${(1 / 23) * size}em ${c6}, ${(-4 / 23) * size}em ${(8 / 23) * size}em 0em ${c5}, ${(-6 / 23) * size}em ${(11 / 23) * size}em 0em ${c4}, ${(-8 / 23) * size}em ${(14 / 23) * size}em 0em ${c3}, ${(-10 / 23) * size}em ${(17 / 23) * size}em 0em ${c2}, ${(-12 / 23) * size}em ${(20 / 23) * size}em 0em ${c1}, ${(-14 / 23) * size}em ${size}em 0em ${shadowColor}`;
+        },
+        [TextEffectPresetName.GLOW]: ({ size, shadowColor }) => {
+            const shadowsBuffer = [];
+            const step = size / 7;
+            for (let i = 0; i < size; i += step) {
+                if (shadowsBuffer.length < 2) {
+                    shadowsBuffer.push(`0px 0px ${i}em #fff`);
+                }
+                else {
+                    shadowsBuffer.push(`0px 0px ${i}em ${shadowColor}`);
+                }
+            }
+            return shadowsBuffer.join(', ');
+        },
+        [TextEffectPresetName.TEXT]: ({ size, shadowColor }) => {
+            return `${size}em ${size}em 0 ${shadowColor}`;
+        },
+        [TextEffectPresetName.BOLD]: ({ size, shadowColor }) => {
+            return TextShadowBuilder.funkyShadowString(size, shadowColor);
+        },
+        [TextEffectPresetName.NEON]: ({ size, shadowColor }) => {
+            const shadows = [];
+            for (let i = 1; i <= 3; i++) {
+                shadows.push(`0 0 ${i * size}em ${shadowColor}, 0 0 ${(i * size) / 2}em ${shadowColor}`);
+            }
+            return shadows.join(', ');
+        },
+        [TextEffectPresetName.ANAGLYPH]: ({ size, shadowColor }) => {
+            // We maintain the opacity from the shadowColor which already includes it
+            const baseColor = tinycolor(shadowColor);
+            const opacity = baseColor.getAlpha();
+            const c2 = baseColor.clone().spin(120).setAlpha(opacity).toString('hex8');
+            return `${size}em ${size}em ${shadowColor}, -${size}em -${size}em ${c2}`;
+        },
+        [TextEffectPresetName.FIRE]: ({ size, shadowColor }) => {
+            return `0 0 ${size}em ${shadowColor}, 0 0 ${size / 2}em ${shadowColor}, 0 0 ${size / 4}em ${shadowColor}, 0 0 ${size / 8}em ${shadowColor}`;
+        },
+        [TextEffectPresetName.THREE_D]: ({ size, shadowColor }) => {
+            const baseColor = tinycolor(shadowColor);
+            const opacity = baseColor.getAlpha();
+            const depth = size * 10;
+            const shadows = [];
+            for (let i = 1; i <= depth; i++) {
+                const stepOpacity = opacity - i * (opacity / depth);
+                shadows.push(`${i * 0.01}em ${i * 0.01}em rgba(0, 0, 0, ${stepOpacity > 0 ? stepOpacity : 0})`);
+            }
+            return shadows.join(', ');
+        },
+        [TextEffectPresetName.RAINBOW]: ({ size, shadowColor }) => {
+            const baseColor = tinycolor(shadowColor);
+            const opacity = baseColor.getAlpha();
+            const shadows = [];
+            const colorSteps = 7;
+            const hueStep = 360 / colorSteps;
+            const offsetIncrement = size * 0.1;
+            const offsetStart = offsetIncrement;
+            for (let i = 0; i < colorSteps; i++) {
+                const hueShift = i * hueStep;
+                const rainbowColor = baseColor.clone().spin(hueShift).setAlpha(opacity).toString('hex8');
+                const offset = offsetStart + i * offsetIncrement;
+                shadows.push(`${offset}em ${offset}em 0 ${rainbowColor}`);
+            }
+            return shadows.join(', ');
+        },
+        [TextEffectPresetName.FROSTY]: ({ size, shadowColor }) => {
+            const baseColor = tinycolor(shadowColor);
+            const opacity = baseColor.getAlpha();
+            const frostEffect = tinycolor
+                .mix(shadowColor, '#FFFFFF', 50)
+                .setAlpha(opacity)
+                .toString('hex8');
+            const shadows = [];
+            for (let i = 1; i <= size * 5; i++) {
+                shadows.push(`0 0 ${i * 0.05}em ${frostEffect}`);
+            }
+            return shadows.join(', ');
+        },
+        [TextEffectPresetName.OUTLINE]: ({ size, shadowColor }) => {
+            const shadows = [];
+            const STEPS = 32; // Fixed number of steps for consistent quality
+            for (let i = 0; i < STEPS; i++) {
+                const angle = (i / STEPS) * 2 * Math.PI;
+                const x = Math.cos(angle) * size;
+                const y = Math.sin(angle) * size;
+                shadows.push(`${x}em ${y}em 0 ${shadowColor}`);
+            }
+            return shadows.join(', ');
+        },
+        [TextEffectPresetName.STROKE]: ({ size, shadowColor }) => {
+            // Stroke is essentially a thicker outline
+            return TextShadowBuilder.strategies[TextEffectPresetName.OUTLINE]({
+                size,
+                shadowColor
+            });
+        },
+        [TextEffectPresetName.INK]: ({ size, shadowColor }) => {
+            // Implementation for ink effect
+            const shadows = [];
+            const inkSteps = 5;
+            for (let i = 1; i <= inkSteps; i++) {
+                const offset = (i / inkSteps) * size;
+                shadows.push(`${offset}em ${offset}em 0 ${shadowColor}`);
+                shadows.push(`-${offset}em ${offset}em 0 ${shadowColor}`);
+                shadows.push(`${offset}em -${offset}em 0 ${shadowColor}`);
+                shadows.push(`-${offset}em -${offset}em 0 ${shadowColor}`);
+            }
+            return shadows.join(', ');
+        },
+        [TextEffectPresetName.DEFAULT]: ({ size, shadowColor }) => {
+            let lineColor = '#000000';
+            const parsedColor = tinycolor(shadowColor);
+            if (parsedColor.isValid() && parsedColor.isDark()) {
+                lineColor = '#FFFFFF';
+            }
+            return `0 0 ${size}em ${shadowColor}, 0.015em 0.015em 0.03em ${lineColor}`;
+        }
+    };
+    /**
+     * Helper method to create a funky shadow string for specific presets.
+     * @param toSize The maximum size for the shadow.
+     * @param color The shadow color.
+     * @returns A CSS text-shadow string.
+     */
+    static funkyShadowString(toSize, color) {
+        const shadows = [];
+        for (let i = -0.07; i <= toSize; i += 0.01) {
+            shadows.push(`${i}em ${i}em ${color}`);
+        }
+        return shadows.join(', ');
+    }
+    /**
+     * Builds a CSS text-shadow value based on the provided configuration.
+     * @param config The configuration for the text shadow.
+     * @returns A CSS text-shadow string or 'none' if size is <= 0.
+     */
+    static build(config) {
+        const { preset, size, color, opacity, textColor } = config;
+        // If size is less than or equal to 0, return 'none' (no shadow)
+        if (size <= 0) {
+            return 'none';
+        }
+        // Process the color with opacity
+        const colorObj = tinycolor(color);
+        const shadowColor = colorObj.setAlpha(opacity).toString('hex8');
+        // Get the appropriate strategy based on presetName
+        const strategy = TextShadowBuilder.strategies[preset];
+        // If no strategy is found, fall back to 'classic' or return 'none'
+        if (!strategy) {
+            console.warn(`TextShadowBuilder: Unknown preset name "${preset}". Falling back to "classic".`);
+            return TextShadowBuilder.strategies[TextEffectPresetName.CLASSIC]({
+                size,
+                shadowColor
+            });
+        }
+        // Execute the strategy with the processed params
+        return strategy({
+            size,
+            shadowColor,
+            textColor
+        });
+    }
+    /**
+     * Builds a CSS filter drop-shadow value by converting a text-shadow string.
+     * This is used to apply shadows to elements with transparent text, such as those with gradient fills.
+     * @param config The configuration for the text shadow.
+     * @returns A CSS filter string with one or more drop-shadow() functions, or 'none'.
+     */
+    static buildDropShadow(config) {
+        const textShadowString = this.build(config);
+        if (textShadowString === 'none' || !textShadowString) {
+            return 'none';
+        }
+        // Split the text-shadow string by commas, but be careful not to split inside `rgba()` or other color functions.
+        // A simple split by comma is usually sufficient here as the color functions are at the end.
+        const shadows = textShadowString.split(/,(?=\s*[\d-])/);
+        const dropShadows = shadows.map((shadow) => {
+            // Trim and wrap each individual shadow definition in its own drop-shadow() function.
+            return `drop-shadow(${shadow.trim()})`;
+        });
+        // Join the individual drop-shadow() functions with spaces for the final filter property.
+        return dropShadows.join(' ');
+    }
+}

package/dist/builders/html/processors/AppearanceStyleProcessor.d.ts

@@ -0,0 +1,5 @@
+import type { StyleProcessor } from '../StyleProcessor.js';
+import type { Appearance } from '../../..';
+export declare class AppearanceStyleProcessor implements StyleProcessor<Appearance | undefined> {
+    process(appearance: Appearance | undefined): Record<string, any>;
+}

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

@@ -0,0 +1,57 @@
+import { ColorTransformer } from '../../../transformers/ColorTransformer.js';
+import { get } from 'lodash-es';
+export class AppearanceStyleProcessor {
+    process(appearance) {
+        if (!appearance)
+            return {};
+        let styles = {
+            width: `${appearance.width}px`,
+            height: `${appearance.height}px`
+        };
+        // Width and height are usually set directly by HtmlBuilder on the wrapper,
+        // but if they were to be part of the inline style object, they'd go here.
+        // For now, assuming HtmlBuilder handles this for the primary dimensions.
+        // styles.width = `${appearance.width}px`;
+        // styles.height = `${appearance.height}px`;
+        if (appearance.opacity !== undefined && appearance.opacity !== 1) {
+            styles.opacity = appearance.opacity.toString();
+        }
+        const hasRotation = appearance.rotation && appearance.rotation !== 0;
+        const hasScale = (appearance.scaleX !== undefined && appearance.scaleX !== 1) ||
+            (appearance.scaleY !== undefined && appearance.scaleY !== 1);
+        if (hasRotation || hasScale) {
+            let transform = `translate(${appearance.x || 0}px, ${appearance.y || 0}px)`;
+            if (hasRotation)
+                transform += ` rotate(${appearance.rotation}deg)`;
+            if (hasScale) {
+                transform += ` scale(${appearance.scaleX ?? 1}, ${appearance.scaleY ?? 1})`;
+            }
+            styles.transform = transform;
+            // If the wrapper is already at (0,0) and this element is being transformed from that origin
+            styles.top = '0px';
+            styles.left = '0px';
+        }
+        else {
+            if (appearance.x !== undefined)
+                styles.left = `${appearance.x}px`;
+            if (appearance.y !== undefined)
+                styles.top = `${appearance.y}px`;
+        }
+        // Add alignment styles
+        if (appearance.horizontalAlign) {
+            styles.justifyContent = appearance.horizontalAlign;
+        }
+        if (appearance.verticalAlign) {
+            styles.alignItems = appearance.verticalAlign;
+        }
+        // Handle background
+        if (appearance.background && get(appearance.background, 'enabled')) {
+            const color = ColorTransformer.transform(get(appearance.background, 'color', '#000000'), 'background');
+            if (get(appearance, 'background.radius', 0) > 0) {
+                styles.borderRadius = `${get(appearance.background, 'radius')}em`;
+            }
+            styles = { ...styles, ...color };
+        }
+        return styles;
+    }
+}

package/dist/builders/html/processors/TextAppearanceStyleProcessor.d.ts

@@ -0,0 +1,5 @@
+import type { StyleProcessor } from '../StyleProcessor.js';
+import type { TextAppearance } from '../../..';
+export declare class TextAppearanceStyleProcessor implements StyleProcessor<TextAppearance | undefined> {
+    process(textAppearance: TextAppearance | undefined): Record<string, any>;
+}

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

@@ -0,0 +1,37 @@
+import { ColorTransformer } from '../../../transformers/ColorTransformer.js';
+export class TextAppearanceStyleProcessor {
+    process(textAppearance) {
+        let styles = {};
+        if (!textAppearance)
+            return styles;
+        if (textAppearance.fontFamily)
+            styles.fontFamily = textAppearance.fontFamily;
+        if (textAppearance.fontWeight)
+            styles.fontWeight = String(textAppearance.fontWeight);
+        if (textAppearance.textAlign)
+            styles.textAlign = textAppearance.textAlign;
+        const fontSize = textAppearance.fontSize;
+        if (fontSize) {
+            styles.fontSize =
+                typeof fontSize === 'number'
+                    ? `${fontSize}px`
+                    : `${fontSize.value}${fontSize.unit || 'px'}`;
+        }
+        const lineHeight = textAppearance.lineHeight;
+        if (lineHeight) {
+            styles.lineHeight = `${lineHeight.value}${lineHeight.unit || 'em'}`;
+        }
+        const letterSpacing = textAppearance.letterSpacing;
+        if (letterSpacing) {
+            styles.letterSpacing = `${letterSpacing.value}${letterSpacing.unit || 'px'}`;
+        }
+        if (textAppearance.color) {
+            const color = ColorTransformer.transform(textAppearance.color, 'text');
+            styles = { ...styles, ...color };
+        }
+        if (textAppearance.textTransform && textAppearance.textTransform !== 'none') {
+            styles.textTransform = textAppearance.textTransform;
+        }
+        return styles;
+    }
+}

package/dist/builders/html/processors/TextEffectsStyleProcessor.d.ts

@@ -0,0 +1,6 @@
+import type { StyleProcessor } from '../StyleProcessor.js';
+type ComponentEffectsMap = Record<string, any>;
+export declare class TextEffectsStyleProcessor implements StyleProcessor<ComponentEffectsMap | undefined> {
+    process(effectsMap: ComponentEffectsMap | undefined): Record<string, any>;
+}
+export {};

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

@@ -0,0 +1,68 @@
+import { z } from 'zod';
+import { TextEffectPresetName, TextShadowBuilder } from '../TextShadowBuilder.js';
+const GenericTextEffectShape = z.object({
+    enabled: z.boolean().optional(),
+    preset: z.nativeEnum(TextEffectPresetName).optional(),
+    size: z.number().optional(),
+    color: z.string().optional(),
+    opacity: z.number().optional()
+});
+export class TextEffectsStyleProcessor {
+    process(effectsMap) {
+        const styles = {};
+        if (!effectsMap)
+            return styles;
+        const shadowStrings = [];
+        // text-stroke
+        if (effectsMap.textOutline) {
+            const data = effectsMap.textOutline;
+            const parsedEffect = GenericTextEffectShape.safeParse(data);
+            if (parsedEffect.success &&
+                parsedEffect.data.enabled &&
+                parsedEffect.data.size &&
+                parsedEffect.data.size > 0) {
+                const data = parsedEffect.data;
+                const size = data.size || 0.3;
+                const color = data.color || '#000000';
+                const shadow = TextShadowBuilder.build({
+                    preset: TextEffectPresetName.OUTLINE,
+                    size,
+                    color,
+                    opacity: data.opacity || 1
+                });
+                if (shadow && shadow !== 'none') {
+                    shadowStrings.push(shadow);
+                }
+                // styles.webkitTextStroke = `${size}em ${color}`;
+                // styles.webkitTextFillColor = 'white';
+                // styles.paintOrder = 'stroke fill';
+            }
+        }
+        for (const effectName in effectsMap) {
+            const effect = effectsMap[effectName];
+            if (effect.type === 'textShadow') {
+                const parsedEffect = GenericTextEffectShape.safeParse(effect);
+                if (parsedEffect.success &&
+                    parsedEffect.data.enabled &&
+                    parsedEffect.data.size &&
+                    parsedEffect.data.size > 0) {
+                    const data = parsedEffect.data;
+                    const preset = data.preset || TextEffectPresetName.CLASSIC;
+                    const shadow = TextShadowBuilder.build({
+                        preset,
+                        size: data.size || 0.3,
+                        color: data.color || '#000000',
+                        opacity: data.opacity || 1
+                    });
+                    if (shadow && shadow !== 'none') {
+                        shadowStrings.push(shadow);
+                    }
+                }
+            }
+        }
+        if (shadowStrings.length > 0) {
+            styles.textShadow = shadowStrings.join(', ');
+        }
+        return styles;
+    }
+}

package/dist/commands/Command.d.ts

@@ -0,0 +1,6 @@
+export interface Command<T = void> {
+    execute(args?: unknown): Promise<T>;
+}
+export interface SyncCommand<T = void> {
+    execute(args?: unknown): T;
+}

package/dist/commands/Command.js

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

package/dist/commands/CommandRunner.d.ts

@@ -0,0 +1,28 @@
+import { CommandType } from './CommandTypes.js';
+import { PlayCommand } from './PlayCommand.js';
+import { PauseCommand } from './PauseCommand.js';
+import { SeekCommand } from './SeekCommand.js';
+import { UpdateComponentCommand } from './UpdateComponentCommand.js';
+import { RenderCommand } from './RenderCommand.js';
+import { ReplaceSourceOnTimeCommand } from './ReplaceSourceOnTimeCommand.js';
+import { RenderFrameCommand } from './RenderFrameCommand.js';
+export declare class CommandRunner {
+    private playCommand;
+    private pauseCommand;
+    private seekCommand;
+    private replaceSourceOnTimeCommand;
+    private renderFrameCommand;
+    private updateComponentCommand;
+    private renderCommand;
+    constructor(cradle: {
+        playCommand: PlayCommand;
+        pauseCommand: PauseCommand;
+        seekCommand: SeekCommand;
+        replaceSourceOnTimeCommand: ReplaceSourceOnTimeCommand;
+        renderFrameCommand: RenderFrameCommand;
+        updateComponentCommand: UpdateComponentCommand;
+        renderCommand: RenderCommand;
+    });
+    run<T = void>(commandType: CommandType, props?: unknown): Promise<T>;
+    runSync<T>(commandType: CommandType, props?: unknown): T;
+}