@gannochenko/staticstripes 0.0.1

package/dist/html-project-parser.js

@@ -0,0 +1,954 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLProjectParser = void 0;
+const child_process_1 = require("child_process");
+const util_1 = require("util");
+const path_1 = require("path");
+const project_1 = require("./project");
+const expression_parser_1 = require("./expression-parser");
+const execFileAsync = (0, util_1.promisify)(child_process_1.execFile);
+class HTMLProjectParser {
+    html;
+    projectPath;
+    projectDir;
+    constructor(html, projectPath) {
+        this.html = html;
+        this.projectPath = projectPath;
+        this.projectDir = (0, path_1.dirname)(projectPath);
+    }
+    async parse() {
+        const assets = await this.processAssets();
+        const outputs = this.processOutputs();
+        const sequences = this.processSequences(assets);
+        const cssText = this.html.cssText;
+        return new project_1.Project(sequences, assets, outputs, cssText, this.projectPath);
+    }
+    /**
+     * Processes asset elements from the parsed HTML and builds an assets map
+     */
+    async processAssets() {
+        const result = [];
+        // Find all elements with class "asset" or data-asset attribute
+        const assetElements = this.findAssetElements();
+        for (const element of assetElements) {
+            const asset = await this.extractAssetFromElement(element);
+            if (asset) {
+                result.push(asset);
+            }
+        }
+        return result;
+    }
+    /**
+     * Finds all asset elements in the HTML
+     */
+    findAssetElements() {
+        const results = [];
+        const traverse = (node) => {
+            if ('tagName' in node) {
+                const element = node;
+                // Check if element is an <asset> tag
+                if (element.tagName === 'asset') {
+                    results.push(element);
+                }
+            }
+            if ('childNodes' in node && node.childNodes) {
+                for (const child of node.childNodes) {
+                    traverse(child);
+                }
+            }
+        };
+        traverse(this.html.ast);
+        return results;
+    }
+    /**
+     * Extracts asset information from an element
+     */
+    async extractAssetFromElement(element) {
+        const attrs = new Map(element.attrs.map((attr) => [attr.name, attr.value]));
+        // Extract name (required)
+        const name = attrs.get('data-name') || attrs.get('id');
+        if (!name) {
+            console.warn('Asset element missing data-name or id attribute');
+            return null;
+        }
+        // Extract path (required)
+        const relativePath = attrs.get('data-path') || attrs.get('src');
+        if (!relativePath) {
+            console.warn(`Asset "${name}" missing data-path or src attribute`);
+            return null;
+        }
+        // Resolve to absolute path
+        const absolutePath = (0, path_1.resolve)(this.projectDir, relativePath);
+        // Extract type (required)
+        let type;
+        const explicitType = attrs.get('data-type');
+        if (explicitType === 'video' ||
+            explicitType === 'image' ||
+            explicitType === 'audio') {
+            type = explicitType;
+        }
+        else {
+            // Infer from tag name or file extension
+            type = this.inferAssetType(element.tagName, relativePath);
+        }
+        // Get duration using ffprobe (in ms) - only for audio/video
+        const duration = await this.getAssetDuration(absolutePath, type);
+        // Get dimensions using ffprobe - for video and image
+        const { width, height } = await this.getAssetDimensions(absolutePath, type);
+        // Get rotation using ffprobe - for video and image
+        const rotation = await this.getAssetRotation(absolutePath, type);
+        // Check if asset has video stream
+        const hasVideo = await this.getHasVideo(absolutePath, type);
+        // Check if asset has audio stream
+        const hasAudio = await this.getHasAudio(absolutePath, type);
+        // Extract author (optional)
+        const author = attrs.get('data-author');
+        return {
+            name,
+            path: absolutePath,
+            type,
+            duration,
+            width,
+            height,
+            rotation,
+            hasVideo,
+            hasAudio,
+            ...(author && { author }),
+        };
+    }
+    /**
+     * Infers asset type from tag name or file path
+     */
+    inferAssetType(tagName, path) {
+        // Check tag name first
+        if (tagName === 'video')
+            return 'video';
+        if (tagName === 'img')
+            return 'image';
+        if (tagName === 'audio')
+            return 'audio';
+        // Check file extension
+        const ext = path.split('.').pop()?.toLowerCase() || '';
+        if (['mp4', 'mov', 'avi', 'mkv', 'webm'].includes(ext))
+            return 'video';
+        if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext))
+            return 'image';
+        if (['mp3', 'wav', 'ogg', 'aac', 'm4a'].includes(ext))
+            return 'audio';
+        // Default to video
+        return 'video';
+    }
+    /**
+     * Gets the duration of an asset file using ffprobe
+     * @param path - Path to the asset file
+     * @param type - Asset type (video, audio, or image)
+     * @returns Duration in milliseconds
+     */
+    async getAssetDuration(path, type) {
+        // Images don't have duration, skip ffprobe
+        if (type === 'image') {
+            return 0;
+        }
+        try {
+            const { stdout } = await execFileAsync('ffprobe', [
+                '-v',
+                'error',
+                '-show_entries',
+                'format=duration',
+                '-of',
+                'default=noprint_wrappers=1:nokey=1',
+                path,
+            ]);
+            const durationSeconds = parseFloat(stdout.trim());
+            if (isNaN(durationSeconds)) {
+                console.warn(`Could not parse duration for asset: ${path}`);
+                return 0;
+            }
+            return Math.round(durationSeconds * 1000);
+        }
+        catch (error) {
+            console.error(`Failed to get duration for asset: ${path}`, error);
+            return 0;
+        }
+    }
+    /**
+     * Gets the rotation of an asset file using ffprobe
+     * @param path - Path to the asset file
+     * @param type - Asset type (video, audio, or image)
+     * @returns Rotation in degrees (0, 90, 180, 270)
+     */
+    async getAssetRotation(path, type) {
+        // Audio files don't have rotation
+        if (type === 'audio') {
+            return 0;
+        }
+        try {
+            const { stdout } = await execFileAsync('ffprobe', [
+                '-v',
+                'error',
+                '-select_streams',
+                'v:0',
+                '-show_entries',
+                'stream_side_data=rotation',
+                '-of',
+                'default=noprint_wrappers=1:nokey=1',
+                path,
+            ]);
+            const rotation = parseInt(stdout.trim(), 10);
+            if (isNaN(rotation)) {
+                // No rotation metadata found
+                return 0;
+            }
+            // Normalize to 0, 90, 180, 270
+            const normalized = Math.abs(rotation) % 360;
+            return normalized;
+        }
+        catch (error) {
+            // No rotation metadata or error - default to 0
+            return 0;
+        }
+    }
+    /**
+     * Gets the dimensions of an asset file using ffprobe
+     * @param path - Path to the asset file
+     * @param type - Asset type (video, audio, or image)
+     * @returns Object with width and height in pixels
+     */
+    async getAssetDimensions(path, type) {
+        // Audio files don't have dimensions
+        if (type === 'audio') {
+            return { width: 0, height: 0 };
+        }
+        try {
+            const { stdout } = await execFileAsync('ffprobe', [
+                '-v',
+                'error',
+                '-select_streams',
+                'v:0',
+                '-show_entries',
+                'stream=width,height',
+                '-of',
+                'csv=s=x:p=0',
+                path,
+            ]);
+            const dimensions = stdout.trim();
+            const [widthStr, heightStr] = dimensions.split('x');
+            const width = parseInt(widthStr, 10);
+            const height = parseInt(heightStr, 10);
+            if (isNaN(width) || isNaN(height)) {
+                console.warn(`Could not parse dimensions for asset: ${path}`);
+                return { width: 0, height: 0 };
+            }
+            return { width, height };
+        }
+        catch (error) {
+            console.error(`Failed to get dimensions for asset: ${path}`, error);
+            return { width: 0, height: 0 };
+        }
+    }
+    /**
+     * Checks if an asset file has a video stream using ffprobe
+     * @param _path - Path to the asset file (unused for now, type-based check)
+     * @param type - Asset type (video, audio, or image)
+     * @returns True if the asset has a video stream
+     */
+    async getHasVideo(_path, type) {
+        // Audio files don't have video
+        if (type === 'audio') {
+            return false;
+        }
+        // Video and image files always have video
+        if (type === 'video' || type === 'image') {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Checks if an asset file has an audio stream using ffprobe
+     * @param path - Path to the asset file
+     * @param type - Asset type (video, audio, or image)
+     * @returns True if the asset has an audio stream
+     */
+    async getHasAudio(path, type) {
+        // Images don't have audio
+        if (type === 'image') {
+            return false;
+        }
+        // Audio files always have audio
+        if (type === 'audio') {
+            return true;
+        }
+        // For video, probe for audio stream
+        try {
+            const { stdout } = await execFileAsync('ffprobe', [
+                '-v',
+                'error',
+                '-select_streams',
+                'a:0',
+                '-show_entries',
+                'stream=codec_type',
+                '-of',
+                'default=noprint_wrappers=1:nokey=1',
+                path,
+            ]);
+            // If we get output, an audio stream exists
+            return stdout.trim() === 'audio';
+        }
+        catch (error) {
+            // No audio stream or error
+            return false;
+        }
+    }
+    /**
+     * Processes all output configurations from the parsed HTML
+     * Returns a map of output name => Output definition
+     */
+    processOutputs() {
+        const outputElements = this.findOutputElements();
+        const outputs = new Map();
+        // If no outputs found, create default
+        if (outputElements.length === 0) {
+            console.warn('No output elements found, using defaults');
+            const defaultOutput = {
+                name: 'output',
+                path: (0, path_1.resolve)(this.projectDir, './output/video.mp4'),
+                resolution: { width: 1920, height: 1080 },
+                fps: 30,
+            };
+            outputs.set(defaultOutput.name, defaultOutput);
+            return outputs;
+        }
+        // Process each output element
+        for (const element of outputElements) {
+            const attrs = new Map(element.attrs.map((attr) => [attr.name, attr.value]));
+            // Extract name
+            const name = attrs.get('name') || 'output';
+            // Extract and resolve path
+            const relativePath = attrs.get('path') || `./output/${name}.mp4`;
+            const path = (0, path_1.resolve)(this.projectDir, relativePath);
+            // Extract and parse resolution (format: "1920x1080")
+            const resolutionStr = attrs.get('resolution') || '1920x1080';
+            const [widthStr, heightStr] = resolutionStr.split('x');
+            const resolution = {
+                width: parseInt(widthStr, 10) || 1920,
+                height: parseInt(heightStr, 10) || 1080,
+            };
+            // Extract fps
+            const fpsStr = attrs.get('fps');
+            const fps = fpsStr ? parseInt(fpsStr, 10) : 30;
+            const output = {
+                name,
+                path,
+                resolution,
+                fps,
+            };
+            outputs.set(name, output);
+        }
+        return outputs;
+    }
+    /**
+     * Finds all output elements in the HTML
+     */
+    findOutputElements() {
+        const results = [];
+        const traverse = (node) => {
+            if ('tagName' in node) {
+                const element = node;
+                // Check if element is an <output> tag
+                if (element.tagName === 'output') {
+                    results.push(element);
+                }
+            }
+            if ('childNodes' in node && node.childNodes) {
+                for (const child of node.childNodes) {
+                    traverse(child);
+                }
+            }
+        };
+        traverse(this.html.ast);
+        return results;
+    }
+    /**
+     * Processes sequences and fragments from the parsed HTML
+     */
+    processSequences(assets) {
+        const sequenceElements = this.findSequenceElements();
+        const sequences = [];
+        const assetMap = new Map();
+        assets.forEach((ass) => assetMap.set(ass.name, ass));
+        for (const sequenceElement of sequenceElements) {
+            const fragmentElements = this.findFragmentChildren(sequenceElement);
+            const rawFragments = [];
+            for (const fragmentElement of fragmentElements) {
+                const fragment = this.processFragment(fragmentElement, assetMap);
+                if (fragment) {
+                    rawFragments.push(fragment);
+                }
+            }
+            // Normalize overlays: combine prev's overlayRight with current's overlayLeft
+            const fragments = rawFragments.map((frag, idx) => {
+                const { overlayRight, overlayZIndexRight, ...rest } = frag;
+                if (idx === 0) {
+                    // First fragment: keep overlayLeft as-is
+                    return rest;
+                }
+                const prevOverlayRight = rawFragments[idx - 1].overlayRight;
+                const prevOverlayZIndexRight = rawFragments[idx - 1].overlayZIndexRight;
+                // Sum up overlayLeft with previous overlayRight
+                let normalizedOverlayLeft;
+                if (typeof frag.overlayLeft === 'number' &&
+                    typeof prevOverlayRight === 'number') {
+                    normalizedOverlayLeft = frag.overlayLeft + prevOverlayRight;
+                }
+                else {
+                    // If either is an expression, create a new calc() expression
+                    const leftVal = typeof frag.overlayLeft === 'number'
+                        ? frag.overlayLeft.toString()
+                        : frag.overlayLeft.original;
+                    const rightVal = typeof prevOverlayRight === 'number'
+                        ? prevOverlayRight.toString()
+                        : prevOverlayRight.original;
+                    normalizedOverlayLeft = (0, expression_parser_1.parseValueLazy)(`calc(${leftVal} + ${rightVal})`);
+                }
+                // OverlayZIndexLeft from previous fragment's overlayZIndexRight (negated), if not already set
+                // Note: overlayZIndexRight is negated as per spec (e.g. 100 becomes -100)
+                const normalizedOverlayZIndex = frag.overlayZIndex !== 0
+                    ? frag.overlayZIndex
+                    : prevOverlayZIndexRight !== 0
+                        ? -prevOverlayZIndexRight
+                        : 0;
+                return {
+                    ...rest,
+                    overlayLeft: normalizedOverlayLeft,
+                    overlayZIndex: normalizedOverlayZIndex,
+                };
+            });
+            sequences.push({ fragments });
+        }
+        return sequences;
+    }
+    /**
+     * Finds all sequence elements that are direct children of <project>
+     */
+    findSequenceElements() {
+        // First find the <project> element
+        const projectElement = this.findProjectElement();
+        if (!projectElement) {
+            console.warn('No <project> element found');
+            return [];
+        }
+        // Get direct sequence children only
+        const sequences = [];
+        if ('childNodes' in projectElement && projectElement.childNodes) {
+            for (const child of projectElement.childNodes) {
+                if ('tagName' in child) {
+                    const element = child;
+                    if (element.tagName === 'sequence') {
+                        sequences.push(element);
+                    }
+                }
+            }
+        }
+        return sequences;
+    }
+    /**
+     * Finds the <project> root element
+     */
+    findProjectElement() {
+        const traverse = (node) => {
+            if ('tagName' in node) {
+                const element = node;
+                if (element.tagName === 'project') {
+                    return element;
+                }
+            }
+            if ('childNodes' in node && node.childNodes) {
+                for (const child of node.childNodes) {
+                    const result = traverse(child);
+                    if (result)
+                        return result;
+                }
+            }
+            return null;
+        };
+        return traverse(this.html.ast);
+    }
+    /**
+     * Finds all fragment descendants of a sequence element (not just direct children)
+     * Parse5 treats self-closing custom tags as opening tags, nesting subsequent elements
+     */
+    findFragmentChildren(sequenceElement) {
+        const fragments = [];
+        const traverse = (node) => {
+            if ('tagName' in node) {
+                const element = node;
+                if (element.tagName === 'fragment') {
+                    fragments.push(element);
+                }
+            }
+            if ('childNodes' in node && node.childNodes) {
+                for (const child of node.childNodes) {
+                    traverse(child);
+                }
+            }
+        };
+        // Start traversing from the sequence element's children
+        if ('childNodes' in sequenceElement && sequenceElement.childNodes) {
+            for (const child of sequenceElement.childNodes) {
+                traverse(child);
+            }
+        }
+        return fragments;
+    }
+    /**
+     * Processes a single fragment element according to Parser.md specification
+     * Returns fragment with temporary overlayRight and overlayZIndexRight for normalization
+     */
+    processFragment(element, assets) {
+        const attrs = new Map(element.attrs.map((attr) => [attr.name, attr.value]));
+        const styles = this.html.css.get(element) || {};
+        // 1. Extract fragment ID from id attribute or generate one
+        const id = attrs.get('id') || `fragment_${Math.random().toString(36).substring(2, 11)}`;
+        // 2. Extract assetName from attribute or CSS -asset property
+        const assetName = attrs.get('data-asset') || styles['-asset'] || '';
+        // 3. Check enabled flag from display property
+        const enabled = this.parseEnabled(styles['display']);
+        // 4. Extract container if present (first one only)
+        const container = this.extractFragmentContainer(element);
+        // 5. Parse trimLeft from -trim-start property
+        const trimLeft = this.parseTrimStart(styles['-trim-start']);
+        // 6. Parse duration from -duration property
+        const duration = this.parseDurationProperty(styles['-duration'], assetName, assets, trimLeft);
+        // 7. Parse -offset-start for overlayLeft (can be number or expression)
+        const overlayLeft = this.parseOffsetStart(styles['-offset-start']);
+        // 8. Parse -offset-end for overlayRight (temporary, will be normalized)
+        const overlayRight = this.parseOffsetEnd(styles['-offset-end']);
+        // 9. Parse -overlay-start-z-index for overlayZIndex
+        const overlayZIndex = this.parseZIndex(styles['-overlay-start-z-index']);
+        // 10. Parse -overlay-end-z-index for overlayZIndexRight (temporary)
+        const overlayZIndexRight = this.parseZIndex(styles['-overlay-end-z-index']);
+        // 11. Parse -transition-start
+        const transitionIn = this.parseTransitionProperty(styles['-transition-start']);
+        // 12. Parse -transition-end
+        const transitionOut = this.parseTransitionProperty(styles['-transition-end']);
+        // 13. Parse -object-fit
+        const objectFitData = this.parseObjectFitProperty(styles['-object-fit']);
+        // 14. Parse -chromakey
+        const chromakeyData = this.parseChromakeyProperty(styles['-chromakey']);
+        // 15. Parse filter (for visual filters)
+        const visualFilter = this.parseVisualFilterProperty(styles['filter']);
+        return {
+            id,
+            enabled,
+            assetName,
+            duration,
+            trimLeft,
+            overlayLeft,
+            overlayZIndex,
+            overlayRight, // Temporary, will be normalized
+            overlayZIndexRight, // Temporary, will be normalized
+            transitionIn: transitionIn.name,
+            transitionInDuration: transitionIn.duration,
+            transitionOut: transitionOut.name,
+            transitionOutDuration: transitionOut.duration,
+            objectFit: objectFitData.objectFit,
+            objectFitContain: objectFitData.objectFitContain,
+            objectFitContainAmbientBlurStrength: objectFitData.objectFitContainAmbientBlurStrength,
+            objectFitContainAmbientBrightness: objectFitData.objectFitContainAmbientBrightness,
+            objectFitContainAmbientSaturation: objectFitData.objectFitContainAmbientSaturation,
+            objectFitContainPillarboxColor: objectFitData.objectFitContainPillarboxColor,
+            chromakey: chromakeyData.chromakey,
+            chromakeyBlend: chromakeyData.chromakeyBlend,
+            chromakeySimilarity: chromakeyData.chromakeySimilarity,
+            chromakeyColor: chromakeyData.chromakeyColor,
+            ...(visualFilter && { visualFilter }), // Add visualFilter if present
+            ...(container && { container }), // Add container if present
+        };
+    }
+    /**
+     * Parses filter property (for visual filters)
+     * Format: "<filter-name>"
+     * Example: "instagram-nashville", "instagram-moon"
+     */
+    parseVisualFilterProperty(visualFilter) {
+        if (!visualFilter) {
+            return undefined;
+        }
+        const trimmed = visualFilter.trim();
+        // Return the filter name as-is
+        // Validation will happen in the Stream.filter() method
+        return trimmed || undefined;
+    }
+    /**
+     * Extracts the first <container> child from a fragment element
+     */
+    extractFragmentContainer(element) {
+        // Find first container child
+        if (!('childNodes' in element) || !element.childNodes) {
+            return undefined;
+        }
+        for (const child of element.childNodes) {
+            if ('tagName' in child && child.tagName === 'container') {
+                const containerElement = child;
+                // Get id attribute
+                const idAttr = containerElement.attrs.find((attr) => attr.name === 'id');
+                const id = idAttr?.value || `container_${Math.random().toString(36).substring(2, 11)}`;
+                // Get innerHTML (serialize all children)
+                const htmlContent = this.serializeElement(containerElement);
+                return {
+                    id,
+                    htmlContent,
+                };
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Serializes an element's children to HTML string
+     */
+    serializeElement(element) {
+        let html = '';
+        const traverse = (node) => {
+            if ('nodeName' in node && node.nodeName === '#text') {
+                // Text node
+                if ('value' in node && typeof node.value === 'string') {
+                    html += node.value;
+                }
+            }
+            else if ('tagName' in node) {
+                // Element node
+                const el = node;
+                html += `<${el.tagName}`;
+                // Add attributes
+                for (const attr of el.attrs) {
+                    html += ` ${attr.name}="${attr.value}"`;
+                }
+                html += '>';
+                // Process children
+                if ('childNodes' in el && el.childNodes) {
+                    for (const child of el.childNodes) {
+                        traverse(child);
+                    }
+                }
+                html += `</${el.tagName}>`;
+            }
+        };
+        // Serialize all children
+        if ('childNodes' in element && element.childNodes) {
+            for (const child of element.childNodes) {
+                traverse(child);
+            }
+        }
+        return html;
+    }
+    /**
+     * Splits a string by whitespace, handling CSS-tree's various number formatting quirks:
+     * - Recombines standalone minus signs: "- 0.1" → "-0.1"
+     * - Splits concatenated numbers: "25-0.1" → ["25", "-0.1"]
+     */
+    splitCssValue(value) {
+        const rawParts = value.split(/\s+/);
+        const parts = [];
+        for (let i = 0; i < rawParts.length; i++) {
+            const part = rawParts[i];
+            // Handle standalone minus sign followed by number
+            if (part === '-' && i + 1 < rawParts.length) {
+                parts.push('-' + rawParts[i + 1]);
+                i++; // skip next part
+                continue;
+            }
+            // Handle concatenated numbers like "25-0.1" → ["25", "-0.1"]
+            // Match: <number><minus><number>
+            const match = part.match(/^(\d+(?:\.\d+)?)(-.+)$/);
+            if (match) {
+                parts.push(match[1]); // first number
+                parts.push(match[2]); // negative number
+                continue;
+            }
+            parts.push(part);
+        }
+        return parts;
+    }
+    /**
+     * Parses the 'display' CSS property for the enabled flag
+     * display: none -> false, anything else -> true
+     */
+    parseEnabled(display) {
+        return display !== 'none';
+    }
+    /**
+     * Parses -trim-start property into trimLeft
+     * Cannot be negative
+     */
+    parseTrimStart(trimStart) {
+        if (!trimStart) {
+            return 0;
+        }
+        const value = this.parseMilliseconds(trimStart);
+        // Ensure non-negative as per spec
+        return Math.max(0, value);
+    }
+    /**
+     * Parses the -duration CSS property
+     * Can be: "auto", percentage (e.g. "100%", "50%"), or time value (e.g. "5000ms", "5s")
+     */
+    parseDurationProperty(duration, assetName, assets, trimLeft) {
+        if (!duration || duration.trim() === 'auto') {
+            // Auto: use asset duration minus trim-start
+            const asset = assets.get(assetName);
+            if (!asset) {
+                return 0;
+            }
+            return Math.max(0, asset.duration - trimLeft);
+        }
+        // Handle percentage (e.g., "100%", "50%")
+        if (duration.endsWith('%')) {
+            const percentage = parseFloat(duration);
+            if (isNaN(percentage)) {
+                return 0;
+            }
+            const asset = assets.get(assetName);
+            if (!asset) {
+                return 0;
+            }
+            // Calculate percentage of asset duration (don't include trim)
+            return Math.round((asset.duration * percentage) / 100);
+        }
+        // Handle time value (e.g., "5000ms", "5s")
+        return this.parseMilliseconds(duration);
+    }
+    /**
+     * Parses time value into milliseconds
+     * Supports: "5s", "5000ms", "1.5s", etc.
+     */
+    parseMilliseconds(value) {
+        if (!value) {
+            return 0;
+        }
+        const trimmed = value.trim();
+        // Handle milliseconds (e.g., "5000ms")
+        if (trimmed.endsWith('ms')) {
+            const ms = parseFloat(trimmed);
+            if (!isNaN(ms)) {
+                return Math.round(ms);
+            }
+        }
+        // Handle seconds (e.g., "5s", "1.5s")
+        if (trimmed.endsWith('s')) {
+            const seconds = parseFloat(trimmed);
+            if (!isNaN(seconds)) {
+                return Math.round(seconds * 1000);
+            }
+        }
+        return 0;
+    }
+    /**
+     * Parses -offset-start into overlayLeft
+     * Can be a time value or a calc() expression
+     */
+    parseOffsetStart(offsetStart) {
+        if (!offsetStart) {
+            return 0;
+        }
+        const trimmed = offsetStart.trim();
+        // Check if it's a calc() expression
+        if (trimmed.startsWith('calc(')) {
+            try {
+                return (0, expression_parser_1.parseValueLazy)(trimmed);
+            }
+            catch (error) {
+                console.error(`Failed to parse -offset-start expression: ${trimmed}`, error);
+                return 0;
+            }
+        }
+        // Otherwise parse as time value
+        return this.parseMilliseconds(trimmed);
+    }
+    /**
+     * Parses -offset-end into overlayRight (for next fragment)
+     * Can be a time value or a calc() expression
+     */
+    parseOffsetEnd(offsetEnd) {
+        if (!offsetEnd) {
+            return 0;
+        }
+        const trimmed = offsetEnd.trim();
+        // Check if it's a calc() expression
+        if (trimmed.startsWith('calc(')) {
+            try {
+                return (0, expression_parser_1.parseValueLazy)(trimmed);
+            }
+            catch (error) {
+                console.error(`Failed to parse -offset-end expression: ${trimmed}`, error);
+                return 0;
+            }
+        }
+        // Otherwise parse as time value
+        return this.parseMilliseconds(trimmed);
+    }
+    /**
+     * Parses z-index values (-overlay-start-z-index, -overlay-end-z-index)
+     */
+    parseZIndex(zIndex) {
+        if (!zIndex) {
+            return 0;
+        }
+        const parsed = parseInt(zIndex.trim(), 10);
+        return isNaN(parsed) ? 0 : parsed;
+    }
+    /**
+     * Parses -transition-start or -transition-end
+     * Format: "<transition-name> <duration>"
+     * Example: "fade-in 5s", "fade-out 500ms"
+     */
+    parseTransitionProperty(transition) {
+        if (!transition) {
+            return { name: '', duration: 0 };
+        }
+        const trimmed = transition.trim();
+        const parts = this.splitCssValue(trimmed);
+        if (parts.length === 0) {
+            return { name: '', duration: 0 };
+        }
+        // First part is transition name
+        const name = parts[0];
+        // Second part is duration (if present)
+        const duration = parts.length > 1 ? this.parseMilliseconds(parts[1]) : 0;
+        return { name, duration };
+    }
+    /**
+     * Parses -object-fit property
+     * Format: "<type> <settings>"
+     * Examples:
+     *   - "contain ambient 25 -0.1 0.7"
+     *   - "contain pillarbox #000000"
+     *   - "cover"
+     */
+    parseObjectFitProperty(objectFit) {
+        // Defaults
+        const defaults = {
+            objectFit: 'cover',
+            objectFitContain: 'ambient',
+            objectFitContainAmbientBlurStrength: 20,
+            objectFitContainAmbientBrightness: -0.3,
+            objectFitContainAmbientSaturation: 0.8,
+            objectFitContainPillarboxColor: '#000000',
+        };
+        if (!objectFit) {
+            return defaults;
+        }
+        const trimmed = objectFit.trim();
+        const parts = this.splitCssValue(trimmed);
+        if (parts.length === 0) {
+            return defaults;
+        }
+        const type = parts[0];
+        // Handle "cover"
+        if (type === 'cover') {
+            return { ...defaults, objectFit: 'cover' };
+        }
+        // Handle "contain" with sub-options
+        if (type === 'contain') {
+            const subType = parts[1];
+            // "contain ambient <blur> <brightness> <saturation>"
+            if (subType === 'ambient') {
+                const blur = parts[2] ? parseFloat(parts[2]) : defaults.objectFitContainAmbientBlurStrength;
+                const brightness = parts[3]
+                    ? parseFloat(parts[3])
+                    : defaults.objectFitContainAmbientBrightness;
+                const saturation = parts[4]
+                    ? parseFloat(parts[4])
+                    : defaults.objectFitContainAmbientSaturation;
+                return {
+                    ...defaults,
+                    objectFit: 'contain',
+                    objectFitContain: 'ambient',
+                    objectFitContainAmbientBlurStrength: isNaN(blur) ? defaults.objectFitContainAmbientBlurStrength : blur,
+                    objectFitContainAmbientBrightness: isNaN(brightness)
+                        ? defaults.objectFitContainAmbientBrightness
+                        : brightness,
+                    objectFitContainAmbientSaturation: isNaN(saturation)
+                        ? defaults.objectFitContainAmbientSaturation
+                        : saturation,
+                };
+            }
+            // "contain pillarbox <color>"
+            if (subType === 'pillarbox') {
+                const color = parts[2] || defaults.objectFitContainPillarboxColor;
+                return {
+                    ...defaults,
+                    objectFit: 'contain',
+                    objectFitContain: 'pillarbox',
+                    objectFitContainPillarboxColor: color,
+                };
+            }
+        }
+        // Default
+        return defaults;
+    }
+    /**
+     * Parses -chromakey property
+     * Format: "<blend> <similarity> <color>"
+     * Example: "0.1 0.3 #00FF00", "hard good #00FF00", "soft loose #123abc45"
+     * Blend: hard=0.0, smooth=0.1, soft=0.2
+     * Similarity: strict=0.1, good=0.3, forgiving=0.5, loose=0.7
+     */
+    parseChromakeyProperty(chromakey) {
+        // Defaults
+        const defaults = {
+            chromakey: false,
+            chromakeyBlend: 0,
+            chromakeySimilarity: 0,
+            chromakeyColor: '#00FF00',
+        };
+        if (!chromakey) {
+            return defaults;
+        }
+        const trimmed = chromakey.trim();
+        const parts = this.splitCssValue(trimmed);
+        if (parts.length < 3) {
+            // Need at least 3 parts
+            return defaults;
+        }
+        // Parse blend (can be number or canned constant)
+        let blend = parseFloat(parts[0]);
+        if (isNaN(blend)) {
+            // Try canned constant
+            const blendStr = parts[0].toLowerCase();
+            if (blendStr === 'hard')
+                blend = 0.0;
+            else if (blendStr === 'smooth')
+                blend = 0.1;
+            else if (blendStr === 'soft')
+                blend = 0.2;
+            else
+                blend = 0.0;
+        }
+        // Parse similarity (can be number or canned constant)
+        let similarity = parseFloat(parts[1]);
+        if (isNaN(similarity)) {
+            // Try canned constant
+            const similarityStr = parts[1].toLowerCase();
+            if (similarityStr === 'strict')
+                similarity = 0.1;
+            else if (similarityStr === 'good')
+                similarity = 0.3;
+            else if (similarityStr === 'forgiving')
+                similarity = 0.5;
+            else if (similarityStr === 'loose')
+                similarity = 0.7;
+            else
+                similarity = 0.3;
+        }
+        // Parse color
+        const color = parts[2] || defaults.chromakeyColor;
+        return {
+            chromakey: true, // If -chromakey is defined, it's enabled
+            chromakeyBlend: blend,
+            chromakeySimilarity: similarity,
+            chromakeyColor: color,
+        };
+    }
+}
+exports.HTMLProjectParser = HTMLProjectParser;
+//# sourceMappingURL=html-project-parser.js.map