@gannochenko/staticstripes 0.0.22 → 0.0.24

package/src/html-project-parser.ts

@@ -1033,6 +1033,7 @@ export class HTMLProjectParser {
     let thumbOffset: number | undefined;
     let coverUrl: string | undefined;
     let videoUrl: string | undefined;
+    let locationId: string | undefined;
     const localTags: string[] = [];
 
     if ('children' in element && element.children) {
@@ -1106,6 +1107,21 @@ export class HTMLProjectParser {
               }
               break;
             }
+            case 'location': {
+              const id = childAttrs.get('id');
+              const city = childAttrs.get('city');
+              const country = childAttrs.get('country');
+
+              if (id) {
+                // Explicit location ID provided
+                locationId = id;
+              } else if (city && country) {
+                // Store search query for later resolution
+                // Format: "search:City, Country"
+                locationId = `search:${city}, ${country}`;
+              }
+              break;
+            }
           }
         }
       }
@@ -1131,6 +1147,7 @@ export class HTMLProjectParser {
         thumbOffset,
         coverUrl,
         videoUrl,
+        locationId,
       },
     };
   }
@@ -1615,26 +1632,44 @@ export class HTMLProjectParser {
     const container = this.extractFragmentContainer(element);
     const app = container ? undefined : this.extractFragmentApp(element);
 
-    // 5. Parse trimLeft from -trim-start property
-    const trimLeft = this.parseTrimStart(styles['-trim-start']);
-
-    // 5b. Parse trimRight from -trim-end property
-    const trimRight = this.parseTrimEnd(styles['-trim-end']);
-
-    // 6. Parse duration from -duration property
-    const duration = this.parseDurationProperty(
-      styles['-duration'],
-      assetName,
-      assets,
-      trimLeft,
-      trimRight,
-    );
-
-    // 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']);
+    // 4b. Parse data-timing attribute (short syntax) - takes precedence over CSS
+    const dataTiming = this.parseDataTiming(attrs.get('data-timing'));
+
+    // 5. Parse trimLeft from data-timing or -trim-start property
+    const trimLeft =
+      dataTiming.trimStart !== undefined
+        ? dataTiming.trimStart
+        : this.parseTrimStart(styles['-trim-start']);
+
+    // 5b. Parse trimRight from data-timing or -trim-end property
+    const trimRight =
+      dataTiming.trimEnd !== undefined
+        ? dataTiming.trimEnd
+        : this.parseTrimEnd(styles['-trim-end']);
+
+    // 6. Parse duration from data-timing or -duration property
+    const duration =
+      dataTiming.duration !== undefined
+        ? dataTiming.duration
+        : this.parseDurationProperty(
+            styles['-duration'],
+            assetName,
+            assets,
+            trimLeft,
+            trimRight,
+          );
+
+    // 7. Parse overlayLeft from data-timing or -offset-start property
+    const overlayLeft =
+      dataTiming.offsetStart !== undefined
+        ? dataTiming.offsetStart
+        : this.parseOffsetStart(styles['-offset-start']);
+
+    // 8. Parse overlayRight from data-timing or -offset-end property
+    const overlayRight =
+      dataTiming.offsetEnd !== undefined
+        ? dataTiming.offsetEnd
+        : this.parseOffsetEnd(styles['-offset-end']);
 
     // 9. Parse -overlay-start-z-index for overlayZIndex
     const overlayZIndex = this.parseZIndex(styles['-overlay-start-z-index']);
@@ -1658,10 +1693,16 @@ export class HTMLProjectParser {
     // 14. Parse -chromakey
     const chromakeyData = this.parseChromakeyProperty(styles['-chromakey']);
 
+    // 14b. Parse -object-fit-ken-burns
+    const kenBurnsData = this.parseKenBurnsProperty(styles['-object-fit-ken-burns']);
+
     // 15. Parse filter (for visual filters)
     const visualFilter = this.parseVisualFilterProperty(styles['filter']);
 
-    // 16. Extract timecode label from data-timecode attribute
+    // 16. Parse sound property (on/off)
+    const sound = this.parseSoundProperty(styles['-sound']);
+
+    // 17. Extract timecode label from data-timecode attribute
     const timecodeLabel = attrs.get('data-timecode') || undefined;
 
     return {
@@ -1692,6 +1733,17 @@ export class HTMLProjectParser {
       chromakeyBlend: chromakeyData.chromakeyBlend,
       chromakeySimilarity: chromakeyData.chromakeySimilarity,
       chromakeyColor: chromakeyData.chromakeyColor,
+      objectFitKenBurns: kenBurnsData.objectFitKenBurns,
+      objectFitKenBurnsZoom: kenBurnsData.objectFitKenBurnsZoom,
+      objectFitKenBurnsEffectDuration: kenBurnsData.objectFitKenBurnsEffectDuration,
+      objectFitKenBurnsEasing: kenBurnsData.objectFitKenBurnsEasing,
+      objectFitKenBurnsFocalX: kenBurnsData.objectFitKenBurnsFocalX,
+      objectFitKenBurnsFocalY: kenBurnsData.objectFitKenBurnsFocalY,
+      objectFitKenBurnsPanStartX: kenBurnsData.objectFitKenBurnsPanStartX,
+      objectFitKenBurnsPanStartY: kenBurnsData.objectFitKenBurnsPanStartY,
+      objectFitKenBurnsPanEndX: kenBurnsData.objectFitKenBurnsPanEndX,
+      objectFitKenBurnsPanEndY: kenBurnsData.objectFitKenBurnsPanEndY,
+      sound,
       ...(visualFilter && { visualFilter }), // Add visualFilter if present
       ...(container && { container }), // Add container if present
       ...(app && { app }), // Add app if present
@@ -1718,6 +1770,25 @@ export class HTMLProjectParser {
     return trimmed || undefined;
   }
 
+  /**
+   * Parses -sound property
+   * Can be: "on" (default) or "off"
+   * When "off", replaces audio stream with silence
+   */
+  private parseSoundProperty(sound: string | undefined): 'on' | 'off' {
+    if (!sound) {
+      return 'on'; // Default: use audio
+    }
+
+    const trimmed = sound.trim().toLowerCase();
+
+    if (trimmed === 'off') {
+      return 'off';
+    }
+
+    return 'on'; // Default for any other value
+  }
+
   /**
    * Extracts the first <container> child from a fragment element
    */
@@ -1919,7 +1990,7 @@ export class HTMLProjectParser {
     assets: Map<string, Asset>,
     trimLeft: number,
     trimRight: number,
-  ): number {
+  ): number | CompiledExpression {
     if (!duration || duration.trim() === 'auto') {
       // Auto: use asset duration minus trim-start and trim-end
       const asset = assets.get(assetName);
@@ -1929,9 +2000,16 @@ export class HTMLProjectParser {
       return Math.max(0, asset.duration - trimLeft - trimRight);
     }
 
+    const trimmed = duration.trim();
+
+    // Check if it's a calc() expression
+    if (trimmed.startsWith('calc(')) {
+      return parseValueLazy(trimmed) as CompiledExpression;
+    }
+
     // Handle percentage (e.g., "100%", "50%")
-    if (duration.endsWith('%')) {
-      const percentage = parseFloat(duration);
+    if (trimmed.endsWith('%')) {
+      const percentage = parseFloat(trimmed);
       if (isNaN(percentage)) {
         return 0;
       }
@@ -1946,12 +2024,12 @@ export class HTMLProjectParser {
     }
 
     // Handle time value (e.g., "5000ms", "5s")
-    return this.parseMilliseconds(duration);
+    return this.parseMilliseconds(trimmed);
   }
 
   /**
    * Parses time value into milliseconds
-   * Supports: "5s", "5000ms", "1.5s", etc.
+   * Supports: "5s", "5000ms", "1.5s", or raw numbers (defaults to milliseconds)
    */
   private parseMilliseconds(value: string | undefined): number {
     if (!value) {
@@ -1976,6 +2054,12 @@ export class HTMLProjectParser {
       }
     }
 
+    // Handle raw numbers (default to milliseconds)
+    const num = parseFloat(trimmed);
+    if (!isNaN(num)) {
+      return Math.round(num);
+    }
+
     return 0;
   }
 
@@ -2023,6 +2107,81 @@ export class HTMLProjectParser {
     return this.parseMilliseconds(trimmed);
   }
 
+  /**
+   * Parses data-timing attribute with short syntax
+   * Format: "ts=3000,te=5000,d=2000,os=1000,oe=7000"
+   * Where:
+   *   ts = -trim-start
+   *   te = -trim-end
+   *   d  = -duration
+   *   os = -offset-start
+   *   oe = -offset-end
+   * Values default to milliseconds if no unit specified
+   * Supports calc() expressions: ts=calc(url(#id.time.start))
+   */
+  private parseDataTiming(dataTiming: string | undefined): {
+    trimStart?: number;
+    trimEnd?: number;
+    duration?: number | CompiledExpression;
+    offsetStart?: number | CompiledExpression;
+    offsetEnd?: number | CompiledExpression;
+  } {
+    const result: {
+      trimStart?: number;
+      trimEnd?: number;
+      duration?: number | CompiledExpression;
+      offsetStart?: number | CompiledExpression;
+      offsetEnd?: number | CompiledExpression;
+    } = {};
+
+    if (!dataTiming) {
+      return result;
+    }
+
+    // Split by comma and parse each key-value pair
+    const pairs = dataTiming.split(',').map((pair) => pair.trim());
+
+    for (const pair of pairs) {
+      const [key, value] = pair.split('=').map((s) => s.trim());
+      if (!key || !value) {
+        continue;
+      }
+
+      // Parse value - check if it's a calc() expression or a simple value
+      let parsedValue: number | CompiledExpression;
+
+      if (value.startsWith('calc(')) {
+        // It's a calc() expression
+        parsedValue = parseValueLazy(value) as CompiledExpression;
+      } else {
+        // It's a simple time value - parse with parseMilliseconds
+        // which handles units like 's' and 'ms', defaulting to ms
+        parsedValue = this.parseMilliseconds(value);
+      }
+
+      // Map short names to result properties
+      switch (key) {
+        case 'ts':
+          result.trimStart = parsedValue as number;
+          break;
+        case 'te':
+          result.trimEnd = parsedValue as number;
+          break;
+        case 'd':
+          result.duration = parsedValue;
+          break;
+        case 'os':
+          result.offsetStart = parsedValue;
+          break;
+        case 'oe':
+          result.offsetEnd = parsedValue;
+          break;
+      }
+    }
+
+    return result;
+  }
+
   /**
    * Parses z-index values (-overlay-start-z-index, -overlay-end-z-index)
    */
@@ -2073,7 +2232,7 @@ export class HTMLProjectParser {
    *   - "cover"
    */
   private parseObjectFitProperty(objectFit: string | undefined): {
-    objectFit: 'cover' | 'contain';
+    objectFit: 'cover' | 'contain' | 'ken-burns';
     objectFitContain: 'ambient' | 'pillarbox';
     objectFitContainAmbientBlurStrength: number;
     objectFitContainAmbientBrightness: number;
@@ -2082,7 +2241,7 @@ export class HTMLProjectParser {
   } {
     // Defaults
     const defaults = {
-      objectFit: 'cover' as 'cover' | 'contain',
+      objectFit: 'cover' as 'cover' | 'contain' | 'ken-burns',
       objectFitContain: 'ambient' as 'ambient' | 'pillarbox',
       objectFitContainAmbientBlurStrength: 20,
       objectFitContainAmbientBrightness: -0.3,
@@ -2108,6 +2267,11 @@ export class HTMLProjectParser {
       return { ...defaults, objectFit: 'cover' };
     }
 
+    // Handle "ken-burns"
+    if (type === 'ken-burns') {
+      return { ...defaults, objectFit: 'ken-burns' };
+    }
+
     // Handle "contain" with sub-options
     if (type === 'contain') {
       const subType = parts[1];
@@ -2223,4 +2387,222 @@ export class HTMLProjectParser {
       chromakeyColor: color,
     };
   }
+
+  /**
+   * Parses -object-fit-ken-burns property
+   * Format:
+   *   Zoom effects: "<effect> <focal-x> <focal-y> <zoom%> <duration> [easing]"
+   *   Pan effects: "<effect> <zoom-factor> [easing]"
+   * Examples:
+   *   - "zoom-in 50% 50% 30% 1000ms ease-in-out" - zoom 30% over 1s
+   *   - "zoom-out 30% 30% 50% 2000ms ease-out" - zoom out 50% over 2s
+   *   - "pan-left 1.3 linear" - pan with 1.3x zoom
+   * Effects: zoom-in, zoom-out (require focal points + zoom% + duration)
+   *          pan-left, pan-right, pan-top, pan-bottom (require zoom factor only)
+   * Zoom: for zoom effects: percentage (30 = 30%), for pan: factor (1.3)
+   * Duration: effect duration in milliseconds (zoom effects only)
+   * Easing: linear, ease-in, ease-out, ease-in-out (default: linear)
+   */
+  private parseKenBurnsProperty(kenBurns: string | undefined): {
+    objectFitKenBurns: 'zoom-in' | 'zoom-out' | 'pan-left' | 'pan-right' | 'pan-top' | 'pan-bottom';
+    objectFitKenBurnsZoom: number;
+    objectFitKenBurnsEffectDuration: number;
+    objectFitKenBurnsEasing: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+    objectFitKenBurnsFocalX: number;
+    objectFitKenBurnsFocalY: number;
+    objectFitKenBurnsPanStartX: number;
+    objectFitKenBurnsPanStartY: number;
+    objectFitKenBurnsPanEndX: number;
+    objectFitKenBurnsPanEndY: number;
+  } {
+    // Defaults
+    const defaults = {
+      objectFitKenBurns: 'zoom-in' as 'zoom-in' | 'zoom-out' | 'pan-left' | 'pan-right' | 'pan-top' | 'pan-bottom',
+      objectFitKenBurnsZoom: 30, // 30% zoom
+      objectFitKenBurnsEffectDuration: 0, // 0 = use fragment duration
+      objectFitKenBurnsEasing: 'linear' as 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out',
+      objectFitKenBurnsFocalX: 50, // center (for zoom effects)
+      objectFitKenBurnsFocalY: 50, // center (for zoom effects)
+      objectFitKenBurnsPanStartX: 0, // left edge (for horizontal pan)
+      objectFitKenBurnsPanStartY: 0, // top edge (for vertical pan)
+      objectFitKenBurnsPanEndX: 100, // right edge (for horizontal pan)
+      objectFitKenBurnsPanEndY: 100, // bottom edge (for vertical pan)
+    };
+
+    if (!kenBurns) {
+      return defaults;
+    }
+
+    const trimmed = kenBurns.trim();
+    const parts = this.splitCssValue(trimmed);
+
+    if (parts.length === 0) {
+      return defaults;
+    }
+
+    // Parse effect (first part)
+    const effect = parts[0] as 'zoom-in' | 'zoom-out' | 'pan-left' | 'pan-right' | 'pan-top' | 'pan-bottom';
+    const validEffects = ['zoom-in', 'zoom-out', 'pan-left', 'pan-right', 'pan-top', 'pan-bottom'];
+    if (!validEffects.includes(effect)) {
+      return defaults;
+    }
+
+    let focalX = defaults.objectFitKenBurnsFocalX;
+    let focalY = defaults.objectFitKenBurnsFocalY;
+    let zoom = defaults.objectFitKenBurnsZoom;
+    let effectDuration = defaults.objectFitKenBurnsEffectDuration;
+    let easing = defaults.objectFitKenBurnsEasing;
+    let panStartX = defaults.objectFitKenBurnsPanStartX;
+    let panStartY = defaults.objectFitKenBurnsPanStartY;
+    let panEndX = defaults.objectFitKenBurnsPanEndX;
+    let panEndY = defaults.objectFitKenBurnsPanEndY;
+
+    const isZoomEffect = effect === 'zoom-in' || effect === 'zoom-out';
+    const isPanEffect = effect === 'pan-left' || effect === 'pan-right' || effect === 'pan-top' || effect === 'pan-bottom';
+
+    // Parse remaining parts based on effect type
+    let nextIndex = 1;
+
+    if (isZoomEffect) {
+      // Zoom effects: "<effect> <focal-x%> <focal-y%> <zoom%> <duration> [easing]"
+
+      // Parse focal points
+      if (parts.length >= 3 && parts[1].includes('%') && parts[2].includes('%')) {
+        const focalXStr = parts[1].split('%')[0];
+        const focalYStr = parts[2].split('%')[0];
+        const parsedX = parseFloat(focalXStr);
+        const parsedY = parseFloat(focalYStr);
+
+        if (!isNaN(parsedX) && !isNaN(parsedY)) {
+          focalX = Math.max(0, Math.min(100, parsedX));
+          focalY = Math.max(0, Math.min(100, parsedY));
+          nextIndex = 3;
+
+          // Check if parts[2] had a concatenated value after '%'
+          const remainder = parts[2].split('%')[1];
+          if (remainder && remainder.trim()) {
+            parts.splice(3, 0, remainder.trim());
+          }
+        }
+      }
+
+      // Parse zoom percentage (required)
+      if (parts.length > nextIndex && parts[nextIndex].includes('%')) {
+        const zoomStr = parts[nextIndex].split('%')[0];
+        const parsedZoom = parseFloat(zoomStr);
+        if (!isNaN(parsedZoom) && parsedZoom >= 0) {
+          zoom = parsedZoom; // Store as percentage (e.g., 30 for 30%)
+          nextIndex++;
+
+          // Check for concatenated value after '%'
+          const remainder = parts[nextIndex - 1].split('%')[1];
+          if (remainder && remainder.trim()) {
+            parts.splice(nextIndex, 0, remainder.trim());
+          }
+        }
+      }
+
+      // Parse effect duration (required)
+      if (parts.length > nextIndex) {
+        const durationStr = parts[nextIndex];
+        // Simple inline parser for "1000ms" or "1s" format
+        const match = durationStr.match(/^(\d+(?:\.\d+)?)(ms|s)$/);
+        if (match) {
+          const value = parseFloat(match[1]);
+          const parsedDuration = match[2] === 's' ? value * 1000 : value;
+          if (parsedDuration > 0) {
+            effectDuration = parsedDuration;
+            nextIndex++;
+          }
+        }
+      }
+
+      // Parse easing (optional)
+      if (parts.length > nextIndex) {
+        const easingStr = parts[nextIndex] as 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+        if (['linear', 'ease-in', 'ease-out', 'ease-in-out'].includes(easingStr)) {
+          easing = easingStr;
+        }
+      }
+    } else if (isPanEffect) {
+      // Pan effects: "<effect> <zoom%> <start%> <end%> <duration> [easing]"
+      // Example: pan-left 50% 20% 80% 2000ms ease-in
+
+      // Parse zoom percentage (required)
+      if (parts.length > nextIndex && parts[nextIndex].includes('%')) {
+        const zoomStr = parts[nextIndex].split('%')[0];
+        const parsedZoom = parseFloat(zoomStr);
+        if (!isNaN(parsedZoom) && parsedZoom >= 0) {
+          zoom = parsedZoom; // Store as percentage (e.g., 50 for 50%)
+          nextIndex++;
+        }
+      }
+
+      // Parse start position percentage (required)
+      if (parts.length > nextIndex && parts[nextIndex].includes('%')) {
+        const startStr = parts[nextIndex].split('%')[0];
+        const parsedStart = parseFloat(startStr);
+        if (!isNaN(parsedStart) && parsedStart >= 0 && parsedStart <= 100) {
+          // Store in appropriate variable based on pan direction
+          if (effect === 'pan-left' || effect === 'pan-right') {
+            panStartX = parsedStart;
+          } else {
+            panStartY = parsedStart;
+          }
+          nextIndex++;
+        }
+      }
+
+      // Parse end position percentage (required)
+      if (parts.length > nextIndex && parts[nextIndex].includes('%')) {
+        const endStr = parts[nextIndex].split('%')[0];
+        const parsedEnd = parseFloat(endStr);
+        if (!isNaN(parsedEnd) && parsedEnd >= 0 && parsedEnd <= 100) {
+          // Store in appropriate variable based on pan direction
+          if (effect === 'pan-left' || effect === 'pan-right') {
+            panEndX = parsedEnd;
+          } else {
+            panEndY = parsedEnd;
+          }
+          nextIndex++;
+        }
+      }
+
+      // Parse effect duration (required)
+      if (parts.length > nextIndex) {
+        const durationStr = parts[nextIndex];
+        // Simple inline parser for "1000ms" or "1s" format
+        const match = durationStr.match(/^(\d+(?:\.\d+)?)(ms|s)$/);
+        if (match) {
+          const value = parseFloat(match[1]);
+          const parsedDuration = match[2] === 's' ? value * 1000 : value;
+          if (parsedDuration > 0) {
+            effectDuration = parsedDuration;
+            nextIndex++;
+          }
+        }
+      }
+
+      // Parse easing (optional)
+      if (parts.length > nextIndex) {
+        const easingStr = parts[nextIndex] as 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+        if (['linear', 'ease-in', 'ease-out', 'ease-in-out'].includes(easingStr)) {
+          easing = easingStr;
+        }
+      }
+    }
+
+    return {
+      objectFitKenBurns: effect,
+      objectFitKenBurnsZoom: zoom,
+      objectFitKenBurnsEffectDuration: effectDuration,
+      objectFitKenBurnsEasing: easing,
+      objectFitKenBurnsFocalX: focalX,
+      objectFitKenBurnsFocalY: focalY,
+      objectFitKenBurnsPanStartX: panStartX,
+      objectFitKenBurnsPanStartY: panStartY,
+      objectFitKenBurnsPanEndX: panEndX,
+      objectFitKenBurnsPanEndY: panEndY,
+    };
+  }
 }

package/src/project.ts

@@ -5,6 +5,7 @@ import {
   FFmpegOption,
   Upload,
   AIProvider,
+  SequenceDebugInfo,
 } from './type';
 import { Label } from './ffmpeg';
 import { AssetManager } from './asset-manager';
@@ -13,11 +14,13 @@ import { FilterBuffer } from './stream';
 import { ExpressionContext, FragmentData } from './expression-parser';
 import { renderContainers } from './container-renderer';
 import { renderApps } from './app-renderer';
+import { buildAppsIfNeeded } from './app-builder';
 import { dirname } from 'path';
 
 export class Project {
   private assetManager: AssetManager;
   private expressionContext: ExpressionContext;
+  private sequencesDebugInfo: SequenceDebugInfo[] = [];
 
   constructor(
     private sequencesDefinitions: SequenceDefinition[],
@@ -46,6 +49,8 @@ export class Project {
 
     let buf = new FilterBuffer();
     let mainSequence: Sequence | null = null;
+    this.sequencesDebugInfo = []; // Reset debug info
+    let sequenceIndex = 0;
 
     this.sequencesDefinitions.forEach((sequenceDefinition) => {
       const seq = new Sequence(
@@ -61,6 +66,14 @@ export class Project {
 
       seq.build();
 
+      // Collect debug info
+      this.sequencesDebugInfo.push({
+        sequenceIndex,
+        totalDuration: seq.getTotalDuration(),
+        fragments: seq.getDebugInfo(),
+      });
+      sequenceIndex++;
+
       if (!mainSequence) {
         mainSequence = seq;
       } else {
@@ -95,6 +108,47 @@ export class Project {
     });
   }
 
+  public printDebugInfo() {
+    console.log('\n=== Debug: Sequences & Fragments Timeline ===\n');
+
+    if (this.sequencesDebugInfo.length === 0) {
+      console.log('No sequences built yet.\n');
+      return;
+    }
+
+    this.sequencesDebugInfo.forEach((seqInfo) => {
+      console.log(`\n📹 Sequence ${seqInfo.sequenceIndex}`);
+      console.log(`   Total Duration: ${Math.round(seqInfo.totalDuration)}ms`);
+      console.log(`   Fragments: ${seqInfo.fragments.length}\n`);
+
+      seqInfo.fragments.forEach((frag, index) => {
+        const status = frag.enabled ? '✓' : '✗';
+
+        // Show ID if it's meaningful (not auto-generated fragment_xxx)
+        const isAutoGeneratedId = frag.id.startsWith('fragment_');
+        const idDisplay = isAutoGeneratedId ? '' : ` id="${frag.id}"`;
+
+        console.log(`   ${status} [${index + 1}]${idDisplay}`);
+        console.log(`      Asset:      ${frag.assetName}`);
+        console.log(`      Start:      ${Math.round(frag.startTime)}ms`);
+        console.log(`      End:        ${Math.round(frag.endTime)}ms`);
+        console.log(`      Duration:   ${Math.round(frag.duration)}ms`);
+
+        // Only show non-zero values
+        if (Math.round(frag.trimLeft) > 0) {
+          console.log(`      Trim Left:  ${Math.round(frag.trimLeft)}ms`);
+        }
+        if (Math.round(frag.overlayLeft) > 0) {
+          console.log(`      Overlay:    ${Math.round(frag.overlayLeft)}ms`);
+        }
+
+        console.log('');
+      });
+    });
+
+    console.log('===========================================\n');
+  }
+
   public getAssetManager(): AssetManager {
     return this.assetManager;
   }
@@ -222,10 +276,12 @@ export class Project {
    * Renders all apps and creates virtual assets for them.
    * Apps must dispatch "sts-render-complete" on document when ready,
    * or rendering will fail after a 5-second timeout.
+   * @param forceAppBuild - If true, rebuilds apps even if output exists
    */
   public async renderApps(
     outputName: string,
     activeCacheKeys?: Set<string>,
+    forceAppBuild: boolean = false,
   ): Promise<void> {
     const output = this.getOutput(outputName);
     if (!output) {
@@ -245,6 +301,12 @@ export class Project {
     const apps = fragmentsWithApps.map((frag) => frag.app!);
     const projectDir = dirname(this.projectPath);
 
+    // Build apps if needed (checks for dst/dist directories with package.json)
+    // Deduplicate app sources to avoid building the same app multiple times
+    const appSources = apps.map((app) => app.src);
+    const uniqueAppSources = [...new Set(appSources)];
+    await buildAppsIfNeeded(uniqueAppSources, projectDir, forceAppBuild);
+
     const results = await renderApps(
       apps,
       output.resolution.width,