visualfries 0.1.0

package/dist/animations/animationBuilder.js

@@ -0,0 +1,255 @@
+import { AnimationSetup } from './AnimationSetup.js';
+import { get } from 'lodash-es';
+import { v4 as uuidv4 } from 'uuid';
+export class AnimationBuilder {
+    animationContext;
+    engineAdaptor;
+    mainTimeline;
+    labels = new Set();
+    constructor(animationContext, engineAdaptor) {
+        this.animationContext = animationContext;
+        this.engineAdaptor = engineAdaptor;
+        const revertAfterComplete = get(this.animationContext.preset.preset, 'revertAfterComplete', false);
+        this.mainTimeline = this.engineAdaptor.createTimeline({
+            // duration: this.animationContext.preset.duration,
+            revertAfterComplete
+        });
+    }
+    build() {
+        this.processSetupSteps();
+        const hasItems = this.buildTimelineItems();
+        // No more repositionOutLabelsIfNeeded() since we position correctly from the start
+        return hasItems ? this.mainTimeline : null;
+    }
+    processSetupSteps() {
+        const setupProcessor = new AnimationSetup(this.animationContext, this.engineAdaptor);
+        setupProcessor.process();
+    }
+    ensureItemHasId(item) {
+        if (!item.id) {
+            item.id = uuidv4();
+        }
+    }
+    buildTimelineItems() {
+        const timelineItems = this.animationContext.preset.getTimelineItems();
+        let hasSequenceItems = false;
+        for (let i = 0; i < timelineItems.length; i++) {
+            const item = timelineItems[i];
+            this.ensureItemHasId(item);
+            const targets = this.resolveTargets(item.target);
+            if (!this.isValidTargets(targets)) {
+                console.warn(`AnimationBuilder: No targets found for query "${item.target}" in item ID "${item.id || 'untitled'}". Skipping.`);
+                continue;
+            }
+            this.addSequenceItemToTimeline(item, i === 0, targets);
+            hasSequenceItems = true;
+        }
+        return hasSequenceItems;
+    }
+    isValidTargets(targets) {
+        return targets !== null && !(Array.isArray(targets) && targets.length === 0);
+    }
+    addSequenceItemToTimeline(item, isFirstItem, targets) {
+        // Always build the child timeline first to get real duration
+        const childTimeline = this.processTweens(item, targets);
+        const duration = this.engineAdaptor.totalDuration(childTimeline);
+        // Now calculate position with duration information available
+        const resolvedPosition = this.calculatePosition(item.position, item.id, isFirstItem, duration);
+        // Add label if needed
+        this.addItemLabelIfNeeded(item, resolvedPosition);
+        // Add child timeline at calculated position
+        this.mainTimeline.add(childTimeline, resolvedPosition.value);
+    }
+    addItemLabelIfNeeded(item, resolvedPosition) {
+        if (item.id && resolvedPosition.value !== undefined && !this.labels.has(item.id)) {
+            this.engineAdaptor.addLabel(this.mainTimeline, item.id, resolvedPosition.value);
+            this.labels.add(item.id);
+        }
+    }
+    processTweens(item, targets) {
+        const tweenTL = this.engineAdaptor.createTimeline();
+        item.tweens.forEach((tweenDef, tweenIndex) => {
+            const resolvedVars = this.resolveTweenVars(tweenDef.vars);
+            const tweenPosition = tweenIndex === 0 ? 0 : '>'; // Always start first tween at 0
+            const tweenFinalPosition = tweenDef.position || tweenPosition;
+            const resolvedPosition = this.calculatePosition(tweenFinalPosition, undefined, tweenIndex === 0, 0);
+            this.engineAdaptor.addTween(tweenTL, targets, tweenDef.method, resolvedVars, resolvedPosition.value);
+        });
+        return tweenTL;
+    }
+    resolveTargets(targetQuery) {
+        return targetQuery
+            ? this.animationContext.getElement(targetQuery)
+            : this.animationContext.rootElement;
+    }
+    resolveTweenVars(vars) {
+        const resolved = {};
+        for (const [key, valueDefinition] of Object.entries(vars)) {
+            if (key === 'from' && this.isObject(valueDefinition)) {
+                resolved.from = this.resolveTweenVars(valueDefinition);
+                continue;
+            }
+            if (key === 'stagger' && valueDefinition) {
+                resolved.stagger = this.engineAdaptor.resolveStagger(valueDefinition, this.animationContext, typeof resolved.duration === 'number' ? resolved.duration : undefined);
+                continue;
+            }
+            // merge textShadow with animation shadow to preserve effects as expected
+            if (key === 'textShadow') {
+                const hasOriginalShadow = this.animationContext.getData('textShadow') &&
+                    this.animationContext.getData('textShadow') !== 'none' &&
+                    this.animationContext.getData('textShadow') !== '';
+                const hasAnimationShadow = valueDefinition && valueDefinition !== 'none' && valueDefinition !== '';
+                if (hasOriginalShadow && hasAnimationShadow) {
+                    // merge shadows
+                    resolved.textShadow = `${this.animationContext.getData('textShadow')}, ${valueDefinition}`;
+                }
+                else {
+                    resolved.textShadow = valueDefinition;
+                }
+                continue;
+            }
+            resolved[key] = this.resolveValue(valueDefinition, key);
+        }
+        return resolved;
+    }
+    isObject(value) {
+        return typeof value === 'object' && value !== null;
+    }
+    resolveValue(valueDefinition, key) {
+        if (!this.isObject(valueDefinition)) {
+            return valueDefinition;
+        }
+        if (this.isFromDataValue(valueDefinition)) {
+            return this.resolveFromDataValue(valueDefinition, key);
+        }
+        if (this.isByIndexValue(valueDefinition)) {
+            return this.resolveByIndexValue(valueDefinition, key);
+        }
+        return valueDefinition;
+    }
+    isFromDataValue(value) {
+        return 'fromData' in value && !('type' in value && value.type === 'byIndex');
+    }
+    isByIndexValue(value) {
+        return value.type === 'byIndex' && 'expression' in value;
+    }
+    resolveFromDataValue(dataDef, key) {
+        const referencedData = this.animationContext.getData(dataDef.fromData);
+        if (referencedData === undefined) {
+            console.warn(`AnimationBuilder: dataKey "${dataDef.fromData}" for property "${key}" not found. Using fallbackValue if provided.`);
+            return dataDef.fallbackValue;
+        }
+        if (Array.isArray(referencedData)) {
+            return this.createArrayAccessFunction(referencedData, dataDef);
+        }
+        return referencedData;
+    }
+    createArrayAccessFunction(valuesArray, dataDef) {
+        const mode = dataDef.mode || 'cycle';
+        const fallback = dataDef.fallbackValue;
+        const arrayClone = [...valuesArray];
+        return (i) => {
+            if (arrayClone.length === 0)
+                return fallback;
+            if (i < arrayClone.length)
+                return arrayClone[i];
+            switch (mode) {
+                case 'cycle':
+                    return arrayClone[i % arrayClone.length];
+                case 'clamp':
+                    return arrayClone[arrayClone.length - 1];
+                default:
+                    return fallback;
+            }
+        };
+    }
+    resolveByIndexValue(dynamicValueDef, key) {
+        const expr = dynamicValueDef.expression;
+        const dataContext = this.animationContext.getAllData();
+        try {
+            const boundExpressionFunc = new Function('index', 'data', `return (${expr})`);
+            return (i) => {
+                try {
+                    return boundExpressionFunc(i, dataContext);
+                }
+                catch (e) {
+                    console.warn(`AnimationBuilder: Error executing byIndex expression for '${key}': ${expr}. Index: ${i}. Using fallback.`, e);
+                    return dynamicValueDef.fallbackValue;
+                }
+            };
+        }
+        catch (e) {
+            console.warn(`AnimationBuilder: Error creating function for byIndex expression '${expr}' for '${key}'. Using fallback.`, e);
+            return () => dynamicValueDef.fallbackValue;
+        }
+    }
+    calculatePosition(positionDef, itemId, isFirstItem, duration) {
+        if (positionDef === undefined) {
+            return { value: isFirstItem ? 0 : '>' };
+        }
+        if (typeof positionDef === 'string') {
+            return this.resolveStringPosition(positionDef, duration);
+        }
+        if (typeof positionDef === 'object') {
+            return this.resolveObjectPosition(positionDef);
+        }
+        if (typeof positionDef === 'number') {
+            return { value: positionDef };
+        }
+        return { value: 0 };
+    }
+    resolveStringPosition(positionDef, duration) {
+        switch (positionDef) {
+            case 'in':
+                return { value: 0 };
+            case 'out': {
+                const componentDuration = this.animationContext.getAnimationTargetDuration();
+                if (componentDuration !== undefined) {
+                    const correctOutPosition = Math.max(0, componentDuration - duration);
+                    return { value: correctOutPosition };
+                }
+                else {
+                    console.warn('AnimationBuilder: Cannot position "out" animation - no component duration available');
+                    return { value: '>' };
+                }
+            }
+            default:
+                return { value: positionDef };
+        }
+    }
+    resolveObjectPosition(positionDef) {
+        const { anchor, anchorPoint, alignTween = 'start', offset = '0s' } = positionDef;
+        const baseTime = this.resolveAnchor(anchor, anchorPoint);
+        if (baseTime === undefined) {
+            console.warn(`AnimationBuilder: Could not resolve anchor "${anchor}" for position.`);
+            return { value: 0 };
+        }
+        if (alignTween === 'end' || alignTween === 'center') {
+            console.warn(`AnimationBuilder: alignTween "${alignTween}" requires knowing the duration of the current animation block. This is advanced and may not be fully supported.`);
+        }
+        return { value: this.buildPositionString(baseTime, offset) };
+    }
+    resolveAnchor(anchor, anchorPoint) {
+        switch (anchor) {
+            case 'componentStart':
+                return 0;
+            case 'componentCenter': {
+                const cd = this.animationContext.getDuration();
+                return cd !== undefined ? cd / 2 : undefined;
+            }
+            case 'componentEnd':
+                return this.animationContext.endAnchor;
+            default:
+                return anchorPoint === 'end' ? `${anchor}.end` : anchor;
+        }
+    }
+    buildPositionString(baseTime, offset) {
+        if (offset === '0s' || offset === '0') {
+            return `${baseTime}`;
+        }
+        if (offset.startsWith('+') || offset.startsWith('-')) {
+            return `${baseTime}${offset}`;
+        }
+        return `${baseTime}+=${offset}`;
+    }
+}

package/dist/animations/animationPreset.d.ts

@@ -0,0 +1,7 @@
+import { type AnimationPreset as AnimationPresetData, type AnimationPresetInput, type AnimationSequenceItem } from '..';
+export declare class AnimationPreset {
+    preset: AnimationPresetData;
+    constructor(presetJson: AnimationPresetInput);
+    get duration(): number;
+    getTimelineItems(): AnimationSequenceItem[];
+}

package/dist/animations/animationPreset.js

@@ -0,0 +1,31 @@
+import { AnimationPresetShape } from '..';
+import { get } from 'lodash-es';
+export class AnimationPreset {
+    preset;
+    constructor(presetJson) {
+        const parsedPreset = AnimationPresetShape.safeParse(presetJson);
+        if (!parsedPreset.success) {
+            console.error('Invalid preset JSON', presetJson);
+            throw new Error('Invalid preset JSON');
+        }
+        this.preset = parsedPreset.data;
+    }
+    get duration() {
+        if (this.preset.duration) {
+            return Math.max(0.5, this.preset.duration);
+        }
+        const offset = Math.min(0.5, get(this.preset, 'startAt', 0.5));
+        const timeline = this.getTimelineItems();
+        let durations = 0;
+        if (timeline.length > 0) {
+            durations = timeline
+                .map((item) => item.tweens.map((tween) => typeof tween.vars.duration === 'number' ? tween.vars.duration : 0.5))
+                .reduce((acc, curr) => acc + curr.map((d) => d || 0.5).reduce((acc, curr) => acc + curr, 0), 0);
+        }
+        durations = parseFloat(durations.toFixed(2));
+        return durations + offset;
+    }
+    getTimelineItems() {
+        return this.preset.timeline;
+    }
+}

package/dist/animations/builders/AnimationPresetFactory.d.ts

@@ -0,0 +1,43 @@
+import type { AnimationPreset, AnimationSequenceItem, SetupStep, TweenVars } from '../..';
+export declare class AnimationPresetFactory {
+    static create(id: string): PresetComposer;
+    static from(preset: AnimationPreset): PresetComposer;
+}
+declare class PresetComposer {
+    private _id;
+    private _data;
+    private _setup;
+    private _timeline;
+    private _description?;
+    constructor(id: string);
+    withData(data: Record<string, any>): PresetComposer;
+    withSetup(setup: SetupStep[]): PresetComposer;
+    withTimeline(timeline: AnimationSequenceItem[]): PresetComposer;
+    withDescription(description: string): PresetComposer;
+    resetTimeline(): PresetComposer;
+    timeline(): TimelineComposer;
+    build(): AnimationPreset;
+}
+declare class TimelineComposer {
+    private _presetComposer;
+    private _timeline;
+    constructor(presetComposer: PresetComposer, existingTimeline?: any[]);
+    target(targetQuery: string): TargetComposer;
+    get timeline(): any[];
+    updateTimeline(): PresetComposer;
+    build(): AnimationPreset;
+}
+declare class TargetComposer {
+    private _timelineComposer;
+    private _timelineIndex;
+    private _timeline;
+    constructor(timelineComposer: TimelineComposer, timelineIndex: number);
+    to(vars: TweenVars, position?: string | number): TargetComposer;
+    from(vars: TweenVars, position?: string | number): TargetComposer;
+    fromTo(vars: TweenVars, position?: string | number): TargetComposer;
+    set(vars: TweenVars, position?: string | number): TargetComposer;
+    position(pos: string | number): TargetComposer;
+    timeline(): TimelineComposer;
+    build(): AnimationPreset;
+}
+export {};

package/dist/animations/builders/AnimationPresetFactory.js

@@ -0,0 +1,139 @@
+export class AnimationPresetFactory {
+    static create(id) {
+        return new PresetComposer(id);
+    }
+    static from(preset) {
+        // Create a new composer initialized with all properties from the existing preset
+        const composer = new PresetComposer(preset.id).withData(preset.data || {});
+        // Copy the setup steps if they exist
+        if (preset.setup && preset.setup.length > 0) {
+            composer.withSetup([...preset.setup]);
+        }
+        // Copy the timeline if it exists
+        if (preset.timeline && preset.timeline.length > 0) {
+            composer.withTimeline([...preset.timeline]);
+        }
+        // Copy any other properties we might want to preserve
+        if (preset.description) {
+            composer.withDescription(preset.description);
+        }
+        return composer;
+    }
+}
+class PresetComposer {
+    _id;
+    _data = {};
+    _setup = [];
+    _timeline = [];
+    _description;
+    constructor(id) {
+        this._id = id;
+        // Initialize with default preset or empty structure
+    }
+    withData(data) {
+        this._data = { ...this._data, ...data };
+        return this;
+    }
+    withSetup(setup) {
+        this._setup = [...setup];
+        return this;
+    }
+    withTimeline(timeline) {
+        this._timeline = [...timeline];
+        return this;
+    }
+    withDescription(description) {
+        this._description = description;
+        return this;
+    }
+    // Reset the timeline to start fresh
+    resetTimeline() {
+        this._timeline = [];
+        return this;
+    }
+    timeline() {
+        return new TimelineComposer(this, this._timeline);
+    }
+    build() {
+        // Construct and return the final animation preset
+        return {
+            id: this._id,
+            ...(this._description ? { description: this._description } : {}),
+            data: this._data,
+            setup: this._setup,
+            timeline: this._timeline
+        };
+    }
+}
+class TimelineComposer {
+    _presetComposer;
+    _timeline = [];
+    constructor(presetComposer, existingTimeline = []) {
+        this._presetComposer = presetComposer;
+        this._timeline = [...existingTimeline];
+    }
+    target(targetQuery) {
+        // Create a new sequence item for this target
+        const sequenceItem = {
+            target: targetQuery,
+            tweens: []
+        };
+        // Add it to the timeline
+        this._timeline.push(sequenceItem);
+        return new TargetComposer(this, this._timeline.length - 1);
+    }
+    // Public getter for timeline access
+    get timeline() {
+        return this._timeline;
+    }
+    // Allow updating the preset composer with the current timeline
+    updateTimeline() {
+        return this._presetComposer.withTimeline(this._timeline);
+    }
+    build() {
+        // Update the timeline before building
+        return this.updateTimeline().build();
+    }
+}
+class TargetComposer {
+    _timelineComposer;
+    _timelineIndex;
+    _timeline;
+    constructor(timelineComposer, timelineIndex) {
+        this._timelineComposer = timelineComposer;
+        this._timelineIndex = timelineIndex;
+        this._timeline = timelineComposer.timeline;
+    }
+    to(vars, position) {
+        this._timeline[this._timelineIndex].tweens.push({ method: 'to', vars, position });
+        return this;
+    }
+    from(vars, position) {
+        this._timeline[this._timelineIndex].tweens.push({ method: 'from', vars, position });
+        return this;
+    }
+    fromTo(vars, position) {
+        if (!vars.from) {
+            throw new Error('from is required for fromTo');
+        }
+        this._timeline[this._timelineIndex].tweens.push({ method: 'fromTo', vars, position });
+        return this;
+    }
+    set(vars, position) {
+        this._timeline[this._timelineIndex].tweens.push({ method: 'set', vars, position });
+        return this;
+    }
+    // Set the position of this timeline item
+    position(pos) {
+        this._timeline[this._timelineIndex].position = pos;
+        return this;
+    }
+    // Return to timeline context
+    timeline() {
+        return this._timelineComposer;
+    }
+    // Build the final preset
+    build() {
+        return this.timeline().build();
+    }
+}

package/dist/animations/builders/LineHighlighterAnimationBuilder.d.ts

@@ -0,0 +1,16 @@
+import type { Animation } from '../..';
+import type { ComponentData } from '../..';
+import type { SplitTextCache } from '../SplitTextCache.js';
+export declare class LineHighlighterAnimationBuilder {
+    static build(data: ComponentData, target: HTMLElement, animationData: Record<string, any>, splitTextCache: SplitTextCache): Animation[];
+    private static createLineHighlightAnimations;
+    private static prepareHighlightStyles;
+    private static createHighlightAnimation;
+    private static createUnhighlightAnimation;
+    private static createBackgroundHighlightAnimation;
+    private static generateBackgroundElementId;
+    private static createBackgroundElement;
+    private static getBackgroundConfig;
+    private static initializeBackgroundElement;
+    private static buildBackgroundAnimation;
+}

package/dist/animations/builders/LineHighlighterAnimationBuilder.js

@@ -0,0 +1,183 @@
+import { get } from 'lodash-es';
+import { linesHighlighter } from '../presets/lines.js'; // Assuming this exists
+import { AnimationPresetFactory } from './AnimationPresetFactory.js';
+import { ColorTransformer } from '../../transformers/ColorTransformer.js';
+export class LineHighlighterAnimationBuilder {
+    static build(data, target, animationData, splitTextCache) {
+        if (data.type !== 'TEXT') {
+            return [];
+        }
+        const activeLine = get(data, 'appearance.text.activeLine', null);
+        if (!activeLine || !activeLine.enabled) {
+            return [];
+        }
+        const config = {
+            activeLine,
+            data,
+            animationData,
+            target,
+            splitTextCache
+        };
+        return this.createLineHighlightAnimations(config);
+    }
+    static createLineHighlightAnimations(config) {
+        const animations = [];
+        const styles = this.prepareHighlightStyles(config);
+        // Create main highlight animation
+        const highlightAnimation = this.createHighlightAnimation(config.data.id, styles.highlight, config.animationData);
+        animations.push(highlightAnimation);
+        // Create unhighlight animation if needed
+        const unhighlightAnimation = this.createUnhighlightAnimation(config.data.id, styles.original, config.animationData);
+        if (unhighlightAnimation) {
+            animations.push(unhighlightAnimation);
+        }
+        // Create background highlight animation if needed
+        const backgroundAnimation = this.createBackgroundHighlightAnimation(config);
+        if (backgroundAnimation) {
+            animations.push(backgroundAnimation);
+        }
+        return animations;
+    }
+    static prepareHighlightStyles(config) {
+        const { activeLine, data } = config;
+        const highlightStyles = ColorTransformer.transform(activeLine.color, 'background');
+        const originalStyles = ColorTransformer.transform(data.appearance.text?.color, 'background');
+        // Handle font weight if specified
+        if (get(activeLine, 'fontWeight', undefined)) {
+            highlightStyles.fontWeight = activeLine.fontWeight;
+            originalStyles.fontWeight = data.appearance.text?.fontWeight ?? 'normal';
+        }
+        return {
+            highlight: highlightStyles,
+            original: originalStyles
+        };
+    }
+    static createHighlightAnimation(componentId, styles, animationData) {
+        const animation = AnimationPresetFactory.from(linesHighlighter)
+            .resetTimeline()
+            .timeline()
+            .target('lines')
+            .to({
+            ...styles,
+            stagger: { type: 'fromData', dataKey: 'lineStartTimes' } // Use line timing data
+        })
+            .build();
+        return {
+            id: `lines-highlight-${componentId}`,
+            name: 'Lines Highlight',
+            animation,
+            startAt: 0
+        };
+    }
+    static createUnhighlightAnimation(componentId, originalStyles, animationData) {
+        if (!animationData.lineUnhighlightTimes) {
+            return null;
+        }
+        const animation = AnimationPresetFactory.from(linesHighlighter)
+            .resetTimeline()
+            .timeline()
+            .target('lines')
+            .to({
+            ...originalStyles,
+            stagger: { type: 'fromData', dataKey: 'lineUnhighlightTimes' }
+        })
+            .build();
+        return {
+            id: `lines-highlight-${componentId}-unhighlight`,
+            name: 'Lines Unhighlight',
+            animation,
+            startAt: 0
+        };
+    }
+    static createBackgroundHighlightAnimation(config) {
+        const { activeLine, target, splitTextCache, data, animationData } = config;
+        if (!activeLine.backgroundColor) {
+            return null;
+        }
+        const lines = splitTextCache.getSplitText(target, 'lines');
+        if (!lines?.length) {
+            return null;
+        }
+        const bgHighlighter = this.createBackgroundElement(target, data.id);
+        const backgroundConfig = this.getBackgroundConfig(activeLine);
+        const bgStyles = ColorTransformer.transform(activeLine.backgroundColor, 'background');
+        this.initializeBackgroundElement(bgHighlighter, lines[0], backgroundConfig, bgStyles);
+        const animation = this.buildBackgroundAnimation(data.id, bgHighlighter.id, lines, animationData, backgroundConfig, bgStyles);
+        return {
+            id: `lines-background-highlight-${data.id}`,
+            name: 'Lines Background Highlight',
+            animation,
+            startAt: 0
+        };
+    }
+    static generateBackgroundElementId(componentId) {
+        return `highlighter-bg-lines-${componentId}`;
+    }
+    static createBackgroundElement(target, componentId) {
+        const bgHighlighter = document.createElement('div');
+        bgHighlighter.id = this.generateBackgroundElementId(componentId);
+        bgHighlighter.style.position = 'absolute';
+        bgHighlighter.style.pointerEvents = 'none';
+        target.prepend(bgHighlighter);
+        return bgHighlighter;
+    }
+    static getBackgroundConfig(activeLine) {
+        return {
+            paddingX: get(activeLine, 'backgroundPaddingX', 25),
+            paddingY: get(activeLine, 'backgroundPaddingY', 10),
+            borderRadius: get(activeLine, 'backgroundBorderRadius', 10)
+        };
+    }
+    static initializeBackgroundElement(bgHighlighter, firstLine, config, bgStyles) {
+        const { paddingX, paddingY, borderRadius } = config;
+        bgHighlighter.style.left = `${firstLine.offsetLeft - paddingX}px`;
+        bgHighlighter.style.top = `${firstLine.offsetTop - paddingY}px`;
+        bgHighlighter.style.width = `${firstLine.clientWidth + 2 * paddingX}px`;
+        bgHighlighter.style.height = `${firstLine.clientHeight + 2 * paddingY}px`;
+        bgHighlighter.style.borderRadius = `${borderRadius}px`;
+        bgHighlighter.style.opacity = '1';
+        if (bgStyles) {
+            Object.entries(bgStyles).forEach(([key, value]) => {
+                // Check if key is a valid writable style property
+                if (key in bgHighlighter.style) {
+                    bgHighlighter.style[key] = String(value);
+                }
+                else {
+                    // For custom properties or CSS variables, use setProperty
+                    bgHighlighter.style.setProperty(key, String(value));
+                }
+            });
+        }
+    }
+    static buildBackgroundAnimation(componentId, backgroundElementId, lines, animationData, backgroundConfig, bgStyles) {
+        const presetComposer = AnimationPresetFactory.create(`lines-bg-highlight-anim-${componentId}`);
+        const timelineComposer = presetComposer.timeline();
+        const targetComposer = timelineComposer.target(`#${backgroundElementId}`);
+        const lineStartTimes = animationData.lineStartTimes ?? []; // Use line timing data
+        if (lineStartTimes.length <= 1) {
+            return timelineComposer.build();
+        }
+        const { paddingX, paddingY, borderRadius } = backgroundConfig;
+        for (let i = 0; i < lineStartTimes.length; i++) {
+            const currentLine = lines[i];
+            if (!currentLine) {
+                console.warn(`LineHighlighter: Line element at index ${i} is missing.`);
+                continue;
+            }
+            const startTime = parseFloat(lineStartTimes[i].toFixed(3));
+            targetComposer
+                .to({
+                borderRadius: `${borderRadius}px`,
+                left: currentLine.offsetLeft - paddingX,
+                top: currentLine.offsetTop - paddingY,
+                width: currentLine.clientWidth + 2 * paddingX,
+                height: currentLine.clientHeight + 2 * paddingY,
+                duration: 0.15,
+                ease: 'power1.out',
+                ...bgStyles
+            }, startTime)
+                .position(0);
+        }
+        return timelineComposer.build();
+    }
+}