@meframe/core 0.0.28 → 0.0.30-beta

package/dist/stages/compose/FilterProcessor.js

@@ -0,0 +1,226 @@
+class FilterProcessor {
+  filterCache = /* @__PURE__ */ new Map();
+  /**
+   * Apply filters to canvas context
+   * Combines multiple filters into a single CSS filter string for performance
+   */
+  applyFilters(ctx, filters) {
+    if (!filters || filters.length === 0) {
+      ctx.filter = "none";
+      return;
+    }
+    const cacheKey = this.generateCacheKey(filters);
+    let filterString = this.filterCache.get(cacheKey);
+    if (!filterString) {
+      filterString = this.buildFilterString(filters);
+      this.filterCache.set(cacheKey, filterString);
+    }
+    ctx.filter = filterString;
+  }
+  /**
+   * Build CSS filter string from filter array
+   */
+  buildFilterString(filters) {
+    const filterStrings = [];
+    for (const filter of filters) {
+      const filterStr = this.buildSingleFilter(filter);
+      if (filterStr) {
+        filterStrings.push(filterStr);
+      }
+    }
+    return filterStrings.length > 0 ? filterStrings.join(" ") : "none";
+  }
+  buildSingleFilter(filter) {
+    switch (filter.type) {
+      case "blur":
+        return `blur(${filter.value ?? 0}px)`;
+      case "brightness":
+        return `brightness(${filter.value ?? 1})`;
+      case "contrast":
+        return `contrast(${filter.value ?? 1})`;
+      case "grayscale":
+        return `grayscale(${filter.value ?? 0})`;
+      case "hue-rotate":
+        return `hue-rotate(${filter.value ?? 0}deg)`;
+      case "saturate":
+        return `saturate(${filter.value ?? 1})`;
+      case "sepia":
+        return `sepia(${filter.value ?? 0})`;
+      case "custom":
+        return this.buildCustomFilter(filter);
+      default:
+        console.warn(`Unknown filter type: ${filter.type}`);
+        return null;
+    }
+  }
+  /**
+   * Build custom filter from params
+   */
+  buildCustomFilter(filter) {
+    if (!filter.params) return null;
+    const { type, ...params } = filter.params;
+    switch (type) {
+      case "drop-shadow":
+        return `drop-shadow(${params.offsetX}px ${params.offsetY}px ${params.blur}px ${params.color})`;
+      case "opacity":
+        return `opacity(${params.value})`;
+      case "invert":
+        return `invert(${params.value})`;
+      default:
+        return null;
+    }
+  }
+  /**
+   * Apply color matrix transformation for advanced effects
+   * This allows for more complex color manipulations than CSS filters
+   */
+  applyColorMatrix(imageData, matrix) {
+    if (matrix.length !== 20) {
+      throw new Error("Color matrix must have 20 values (4x5 matrix)");
+    }
+    const data = imageData.data;
+    const length = data.length;
+    for (let i = 0; i < length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+      const a = data[i + 3];
+      const m = matrix;
+      data[i] = this.clamp(r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255);
+      data[i + 1] = this.clamp(r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255);
+      data[i + 2] = this.clamp(r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255);
+      data[i + 3] = this.clamp(r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255);
+    }
+    return imageData;
+  }
+  /**
+   * Predefined color matrices for common effects
+   */
+  getPresetMatrix(preset) {
+    switch (preset) {
+      case "vintage":
+        return [
+          0.393,
+          0.769,
+          0.189,
+          0,
+          0,
+          0.349,
+          0.686,
+          0.168,
+          0,
+          0,
+          0.272,
+          0.534,
+          0.131,
+          0,
+          0,
+          0,
+          0,
+          0,
+          1,
+          0
+        ];
+      case "noir":
+        return [
+          0.25,
+          0.25,
+          0.25,
+          0,
+          0,
+          0.25,
+          0.25,
+          0.25,
+          0,
+          0,
+          0.25,
+          0.25,
+          0.25,
+          0,
+          0,
+          0,
+          0,
+          0,
+          1,
+          0
+        ];
+      case "cool":
+        return [0.8, 0, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 0, 1, 0];
+      case "warm":
+        return [1.2, 0, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 0, 1, 0];
+      default:
+        return null;
+    }
+  }
+  /**
+   * Apply Gaussian blur manually (for cases where CSS filter is not enough)
+   */
+  applyGaussianBlur(imageData, radius) {
+    const output = new ImageData(
+      new Uint8ClampedArray(imageData.data),
+      imageData.width,
+      imageData.height
+    );
+    const width = imageData.width;
+    const height = imageData.height;
+    const data = imageData.data;
+    const outData = output.data;
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        let r = 0, g = 0, b = 0, a = 0;
+        let count = 0;
+        for (let dx = -radius; dx <= radius; dx++) {
+          const nx = Math.min(Math.max(x + dx, 0), width - 1);
+          const idx2 = (y * width + nx) * 4;
+          r += data[idx2];
+          g += data[idx2 + 1];
+          b += data[idx2 + 2];
+          a += data[idx2 + 3];
+          count++;
+        }
+        const idx = (y * width + x) * 4;
+        outData[idx] = r / count;
+        outData[idx + 1] = g / count;
+        outData[idx + 2] = b / count;
+        outData[idx + 3] = a / count;
+      }
+    }
+    for (let x = 0; x < width; x++) {
+      for (let y = 0; y < height; y++) {
+        let r = 0, g = 0, b = 0, a = 0;
+        let count = 0;
+        for (let dy = -radius; dy <= radius; dy++) {
+          const ny = Math.min(Math.max(y + dy, 0), height - 1);
+          const idx2 = (ny * width + x) * 4;
+          r += outData[idx2];
+          g += outData[idx2 + 1];
+          b += outData[idx2 + 2];
+          a += outData[idx2 + 3];
+          count++;
+        }
+        const idx = (y * width + x) * 4;
+        data[idx] = r / count;
+        data[idx + 1] = g / count;
+        data[idx + 2] = b / count;
+        data[idx + 3] = a / count;
+      }
+    }
+    return imageData;
+  }
+  clamp(value) {
+    return Math.min(255, Math.max(0, Math.round(value)));
+  }
+  generateCacheKey(filters) {
+    return filters.map((f) => `${f.type}:${f.value ?? "default"}`).join("|");
+  }
+  clearCache() {
+    this.filterCache.clear();
+  }
+  getCacheSize() {
+    return this.filterCache.size;
+  }
+}
+export {
+  FilterProcessor
+};
+//# sourceMappingURL=FilterProcessor.js.map

package/dist/stages/compose/FilterProcessor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterProcessor.js","sources":["../../../src/stages/compose/FilterProcessor.ts"],"sourcesContent":["import type { VisualFilter } from './types';\n\n/**\n * FilterProcessor - Handles visual filters and effects\n * Single responsibility: Apply CSS filters and custom shader effects\n */\nexport class FilterProcessor {\n  private filterCache = new Map<string, string>();\n\n  /**\n   * Apply filters to canvas context\n   * Combines multiple filters into a single CSS filter string for performance\n   */\n  applyFilters(\n    ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n    filters: VisualFilter[]\n  ): void {\n    if (!filters || filters.length === 0) {\n      ctx.filter = 'none';\n      return;\n    }\n\n    // Generate cache key\n    const cacheKey = this.generateCacheKey(filters);\n\n    // Check cache\n    let filterString = this.filterCache.get(cacheKey);\n\n    if (!filterString) {\n      filterString = this.buildFilterString(filters);\n      this.filterCache.set(cacheKey, filterString);\n    }\n\n    ctx.filter = filterString;\n  }\n\n  /**\n   * Build CSS filter string from filter array\n   */\n  private buildFilterString(filters: VisualFilter[]): string {\n    const filterStrings: string[] = [];\n\n    for (const filter of filters) {\n      const filterStr = this.buildSingleFilter(filter);\n      if (filterStr) {\n        filterStrings.push(filterStr);\n      }\n    }\n\n    return filterStrings.length > 0 ? filterStrings.join(' ') : 'none';\n  }\n\n  private buildSingleFilter(filter: VisualFilter): string | null {\n    switch (filter.type) {\n      case 'blur':\n        return `blur(${filter.value ?? 0}px)`;\n\n      case 'brightness':\n        return `brightness(${filter.value ?? 1})`;\n\n      case 'contrast':\n        return `contrast(${filter.value ?? 1})`;\n\n      case 'grayscale':\n        return `grayscale(${filter.value ?? 0})`;\n\n      case 'hue-rotate':\n        return `hue-rotate(${filter.value ?? 0}deg)`;\n\n      case 'saturate':\n        return `saturate(${filter.value ?? 1})`;\n\n      case 'sepia':\n        return `sepia(${filter.value ?? 0})`;\n\n      case 'custom':\n        return this.buildCustomFilter(filter);\n\n      default:\n        console.warn(`Unknown filter type: ${filter.type}`);\n        return null;\n    }\n  }\n\n  /**\n   * Build custom filter from params\n   */\n  private buildCustomFilter(filter: VisualFilter): string | null {\n    if (!filter.params) return null;\n\n    const { type, ...params } = filter.params;\n\n    switch (type) {\n      case 'drop-shadow':\n        return `drop-shadow(${params.offsetX}px ${params.offsetY}px ${params.blur}px ${params.color})`;\n\n      case 'opacity':\n        return `opacity(${params.value})`;\n\n      case 'invert':\n        return `invert(${params.value})`;\n\n      default:\n        return null;\n    }\n  }\n\n  /**\n   * Apply color matrix transformation for advanced effects\n   * This allows for more complex color manipulations than CSS filters\n   */\n  applyColorMatrix(imageData: ImageData, matrix: number[]): ImageData {\n    if (matrix.length !== 20) {\n      throw new Error('Color matrix must have 20 values (4x5 matrix)');\n    }\n\n    const data = imageData.data;\n    const length = data.length;\n\n    for (let i = 0; i < length; i += 4) {\n      const r = data[i]!;\n      const g = data[i + 1]!;\n      const b = data[i + 2]!;\n      const a = data[i + 3]!;\n      const m = matrix;\n\n      // Apply matrix transformation\n      data[i] = this.clamp(r * m[0]! + g * m[1]! + b * m[2]! + a * m[3]! + m[4]! * 255);\n      data[i + 1] = this.clamp(r * m[5]! + g * m[6]! + b * m[7]! + a * m[8]! + m[9]! * 255);\n      data[i + 2] = this.clamp(r * m[10]! + g * m[11]! + b * m[12]! + a * m[13]! + m[14]! * 255);\n      data[i + 3] = this.clamp(r * m[15]! + g * m[16]! + b * m[17]! + a * m[18]! + m[19]! * 255);\n    }\n\n    return imageData;\n  }\n\n  /**\n   * Predefined color matrices for common effects\n   */\n  getPresetMatrix(preset: string): number[] | null {\n    switch (preset) {\n      case 'vintage':\n        return [\n          0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0,\n          1, 0,\n        ];\n\n      case 'noir':\n        return [\n          0.25, 0.25, 0.25, 0, 0, 0.25, 0.25, 0.25, 0, 0, 0.25, 0.25, 0.25, 0, 0, 0, 0, 0, 1, 0,\n        ];\n\n      case 'cool':\n        return [0.8, 0, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 0, 1, 0];\n\n      case 'warm':\n        return [1.2, 0, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 0, 1, 0];\n\n      default:\n        return null;\n    }\n  }\n\n  /**\n   * Apply Gaussian blur manually (for cases where CSS filter is not enough)\n   */\n  applyGaussianBlur(imageData: ImageData, radius: number): ImageData {\n    // Simplified box blur approximation of Gaussian blur\n    const output = new ImageData(\n      new Uint8ClampedArray(imageData.data),\n      imageData.width,\n      imageData.height\n    );\n\n    const width = imageData.width;\n    const height = imageData.height;\n    const data = imageData.data;\n    const outData = output.data;\n\n    // Horizontal pass\n    for (let y = 0; y < height; y++) {\n      for (let x = 0; x < width; x++) {\n        let r = 0,\n          g = 0,\n          b = 0,\n          a = 0;\n        let count = 0;\n\n        for (let dx = -radius; dx <= radius; dx++) {\n          const nx = Math.min(Math.max(x + dx, 0), width - 1);\n          const idx = (y * width + nx) * 4;\n          r += data[idx]!;\n          g += data[idx + 1]!;\n          b += data[idx + 2]!;\n          a += data[idx + 3]!;\n          count++;\n        }\n\n        const idx = (y * width + x) * 4;\n        outData[idx] = r / count;\n        outData[idx + 1] = g / count;\n        outData[idx + 2] = b / count;\n        outData[idx + 3] = a / count;\n      }\n    }\n\n    // Vertical pass\n    for (let x = 0; x < width; x++) {\n      for (let y = 0; y < height; y++) {\n        let r = 0,\n          g = 0,\n          b = 0,\n          a = 0;\n        let count = 0;\n\n        for (let dy = -radius; dy <= radius; dy++) {\n          const ny = Math.min(Math.max(y + dy, 0), height - 1);\n          const idx = (ny * width + x) * 4;\n          r += outData[idx]!;\n          g += outData[idx + 1]!;\n          b += outData[idx + 2]!;\n          a += outData[idx + 3]!;\n          count++;\n        }\n\n        const idx = (y * width + x) * 4;\n        data[idx] = r / count;\n        data[idx + 1] = g / count;\n        data[idx + 2] = b / count;\n        data[idx + 3] = a / count;\n      }\n    }\n\n    return imageData;\n  }\n\n  private clamp(value: number): number {\n    return Math.min(255, Math.max(0, Math.round(value)));\n  }\n\n  private generateCacheKey(filters: VisualFilter[]): string {\n    return filters.map((f) => `${f.type}:${f.value ?? 'default'}`).join('|');\n  }\n\n  clearCache(): void {\n    this.filterCache.clear();\n  }\n\n  getCacheSize(): number {\n    return this.filterCache.size;\n  }\n}\n"],"names":["idx"],"mappings":"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"}

package/dist/stages/compose/FrameRateConverter.d.ts

@@ -0,0 +1,68 @@
+import { TimeUs } from '../../model/types';
+
+/**
+ * FrameRateConverter - Converts VFR (Variable Frame Rate) to CFR (Constant Frame Rate)
+ *
+ * Receives VideoFrames with irregular timestamps from decoder (VFR)
+ * and outputs VideoFrames with regular timestamps based on target fps (CFR).
+ *
+ * Algorithm:
+ * - Generate target frame sequence: t = 0, 33333, 66666, ... µs (for 30fps)
+ * - For each target time t, find the closest source frame
+ * - Output new frame with standardized timestamp t
+ * - Close source frames after use to prevent memory leaks
+ *
+ * Scenarios:
+ * - Downsampling (60fps→30fps): Skip every other frame
+ * - Upsampling (24fps→30fps): Duplicate some frames
+ * - Same rate (30fps→30fps): Normalize timestamps
+ */
+export declare class FrameRateConverter {
+    private readonly clipDurationUs;
+    private readonly frameDurationUs;
+    private targetFrameIndex;
+    private targetFrameTimeUs;
+    private sourceFrameBuffer;
+    constructor(targetFps: number, clipDurationUs: TimeUs);
+    /**
+     * Create a TransformStream that converts VFR frames to CFR frames
+     */
+    createStream(): TransformStream<VideoFrame, VideoFrame>;
+    private sourceFrameCount;
+    private outputFrameCount;
+    /**
+     * Process incoming source frame and output target frames
+     */
+    private processSourceFrame;
+    /**
+     * Flush remaining target frames at end of stream
+     */
+    private flushRemainingFrames;
+    /**
+     * Find the source frame closest to target time
+     */
+    private findClosestFrame;
+    /**
+     * Check if we should wait for next source frame before outputting
+     * Returns true if:
+     * - We only have 1 frame in buffer
+     * - The closest frame is before target time
+     * - We might get a better match from next frame
+     */
+    private shouldWaitForNextFrame;
+    /**
+     * Clean up source frames that are no longer needed
+     * Keep frames that might be needed for future target frames
+     */
+    private cleanupOldFrames;
+    /**
+     * Get current conversion state (for debugging)
+     */
+    getState(): {
+        targetFrameIndex: number;
+        targetFrameTimeUs: TimeUs;
+        bufferSize: number;
+        frameDurationUs: number;
+    };
+}
+//# sourceMappingURL=FrameRateConverter.d.ts.map

package/dist/stages/compose/FrameRateConverter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameRateConverter.d.ts","sourceRoot":"","sources":["../../../src/stages/compose/FrameRateConverter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAS;IACxC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAS;IAGzC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,iBAAiB,CAAa;IACtC,OAAO,CAAC,iBAAiB,CAAoB;gBAEjC,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM;IAYrD;;OAEG;IACH,YAAY,IAAI,eAAe,CAAC,UAAU,EAAE,UAAU,CAAC;IAqBvD,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,gBAAgB,CAAK;IAE7B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAgD1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IA6C5B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAmBxB;;;;;;OAMG;IACH,OAAO,CAAC,sBAAsB;IAa9B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAyCxB;;OAEG;IACH,QAAQ,IAAI;QACV,gBAAgB,EAAE,MAAM,CAAC;QACzB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,UAAU,EAAE,MAAM,CAAC;QACnB,eAAe,EAAE,MAAM,CAAC;KACzB;CAQF"}

package/dist/stages/compose/LayerRenderer.d.ts

@@ -10,7 +10,7 @@ export declare class LayerRenderer {
     private height;
     private currentFrame;
     private fps;
-    constructor(ctx: OffscreenCanvasRenderingContext2D, width: number, height: number, fps?: number);
+    constructor(ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D, width: number, height: number, fps?: number);
     setCurrentFrame(frame: number): void;
     private ensureHighQualityRendering;
     /**

package/dist/stages/compose/LayerRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayerRenderer.d.ts","sourceRoot":"","sources":["../../../src/stages/compose/LayerRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAA8D,MAAM,SAAS,CAAC;AAMjG;;;GAGG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,GAAG,CAAoC;IAC/C,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,GAAG,CAAc;gBAGvB,GAAG,EAAE,iCAAiC,EACtC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,GAAG,GAAE,MAAW;IASlB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIpC,OAAO,CAAC,0BAA0B;IAKlC;;OAEG;IACG,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IA0C9C,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,kBAAkB;IA+C1B,OAAO,CAAC,cAAc;YA2BR,gBAAgB;YAwChB,gBAAgB;YAiFhB,eAAe;IAuC7B,OAAO,CAAC,SAAS;IAkBjB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CAKtD"}
+{"version":3,"file":"LayerRenderer.d.ts","sourceRoot":"","sources":["../../../src/stages/compose/LayerRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAA8D,MAAM,SAAS,CAAC;AAMjG;;;GAGG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,GAAG,CAA+D;IAC1E,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,GAAG,CAAc;gBAGvB,GAAG,EAAE,iCAAiC,GAAG,wBAAwB,EACjE,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,GAAG,GAAE,MAAW;IASlB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIpC,OAAO,CAAC,0BAA0B;IAKlC;;OAEG;IACG,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IA0C9C,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,kBAAkB;IA+C1B,OAAO,CAAC,cAAc;YA2BR,gBAAgB;YAwChB,gBAAgB;YAiFhB,eAAe;IAuC7B,OAAO,CAAC,SAAS;IAkBjB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CAKtD"}

package/dist/stages/compose/LayerRenderer.js

@@ -0,0 +1,270 @@
+import { renderBasicText, renderTextWithEntrance } from "./text-renderers/basic-text-renderer.js";
+import { renderWordByWord } from "./text-renderers/word-by-word-renderer.js";
+import { renderCharacterKTV } from "./text-renderers/character-ktv-renderer.js";
+import { renderWordByWordFancy } from "./text-renderers/word-fancy-renderer.js";
+class LayerRenderer {
+  ctx;
+  width;
+  height;
+  currentFrame = 0;
+  fps = 30;
+  constructor(ctx, width, height, fps = 30) {
+    this.ctx = ctx;
+    this.width = width;
+    this.height = height;
+    this.fps = fps;
+    this.ensureHighQualityRendering();
+  }
+  setCurrentFrame(frame) {
+    this.currentFrame = frame;
+  }
+  ensureHighQualityRendering() {
+    this.ctx.imageSmoothingEnabled = true;
+    this.ctx.imageSmoothingQuality = "high";
+  }
+  /**
+   * Render a single layer with all its properties
+   */
+  async renderLayer(layer) {
+    if (!layer.visible || layer.opacity <= 0) return;
+    this.ctx.save();
+    try {
+      this.ensureHighQualityRendering();
+      this.ctx.globalAlpha = layer.opacity;
+      if (layer.blendMode) {
+        this.ctx.globalCompositeOperation = layer.blendMode;
+      }
+      if (layer.transform) {
+        const layerDimensions = this.getLayerDimensions(layer);
+        this.applyTransform(layer.transform, layerDimensions);
+      }
+      switch (layer.type) {
+        case "video":
+          await this.renderVideoLayer(layer);
+          break;
+        case "image":
+          await this.renderImageLayer(layer);
+          break;
+        case "text":
+          await this.renderTextLayer(layer);
+          break;
+      }
+      if (layer.mask) {
+        this.applyMask(layer.mask);
+      }
+    } finally {
+      this.ctx.restore();
+    }
+  }
+  parseDimension(value, canvasSize) {
+    if (value === void 0) return void 0;
+    if (typeof value === "number") return value;
+    const strValue = value;
+    if (strValue.includes("%")) {
+      const numValue = parseFloat(strValue);
+      return isNaN(numValue) ? void 0 : numValue / 100 * canvasSize;
+    }
+    const parsed = parseFloat(strValue);
+    return isNaN(parsed) ? void 0 : parsed;
+  }
+  getLayerDimensions(layer) {
+    if (layer.type === "image") {
+      const imageLayer = layer;
+      if (imageLayer.source) {
+        const imgWidth = imageLayer.source.width;
+        const imgHeight = imageLayer.source.height;
+        const isAttachment = !!imageLayer.attachmentId;
+        if (isAttachment) {
+          const targetWidthRaw = imageLayer.targetWidth;
+          const targetHeightRaw = imageLayer.targetHeight;
+          const targetWidth = this.parseDimension(targetWidthRaw, this.width);
+          const targetHeight = this.parseDimension(targetHeightRaw, this.height);
+          if (targetWidth && targetHeight) {
+            return { width: targetWidth, height: targetHeight };
+          } else if (targetWidth) {
+            return {
+              width: targetWidth,
+              height: imgHeight / imgWidth * targetWidth
+            };
+          } else if (targetHeight) {
+            return {
+              width: imgWidth / imgHeight * targetHeight,
+              height: targetHeight
+            };
+          }
+        }
+        return { width: imgWidth, height: imgHeight };
+      }
+    } else if (layer.type === "video") {
+      const videoLayer = layer;
+      const videoFrame = videoLayer.videoFrame;
+      return {
+        width: videoFrame.displayWidth || videoFrame.codedWidth,
+        height: videoFrame.displayHeight || videoFrame.codedHeight
+      };
+    }
+    return { width: this.width, height: this.height };
+  }
+  applyTransform(transform, layerDimensions) {
+    const anchorX = transform.anchorX ?? 0.5;
+    const anchorY = transform.anchorY ?? 0.5;
+    const centerX = layerDimensions.width * anchorX;
+    const centerY = layerDimensions.height * anchorY;
+    this.ctx.translate(transform.x + centerX, transform.y + centerY);
+    if (transform.rotation) {
+      this.ctx.rotate(transform.rotation);
+    }
+    this.ctx.scale(transform.scaleX, transform.scaleY);
+    if (transform.skewX || transform.skewY) {
+      this.ctx.transform(1, transform.skewY ?? 0, transform.skewX ?? 0, 1, 0, 0);
+    }
+    this.ctx.translate(-centerX, -centerY);
+  }
+  async renderVideoLayer(layer) {
+    const { videoFrame, crop } = layer;
+    const videoWidth = videoFrame.displayWidth || videoFrame.codedWidth;
+    const videoHeight = videoFrame.displayHeight || videoFrame.codedHeight;
+    const scaleX = this.width / videoWidth;
+    const scaleY = this.height / videoHeight;
+    const scale = Math.min(scaleX, scaleY);
+    const renderWidth = Math.round(videoWidth * scale);
+    const renderHeight = Math.round(videoHeight * scale);
+    const renderX = Math.round((this.width - renderWidth) / 2);
+    const renderY = Math.round((this.height - renderHeight) / 2);
+    if (crop) {
+      this.ctx.drawImage(
+        videoFrame,
+        crop.x,
+        crop.y,
+        crop.width,
+        crop.height,
+        renderX,
+        renderY,
+        renderWidth,
+        renderHeight
+      );
+    } else {
+      this.ctx.drawImage(videoFrame, renderX, renderY, renderWidth, renderHeight);
+    }
+    videoFrame.close();
+  }
+  async renderImageLayer(layer) {
+    const { source, crop } = layer;
+    if (source instanceof ImageData) {
+      if (crop) {
+        const tempCanvas = new OffscreenCanvas(crop.width, crop.height);
+        const tempCtx = tempCanvas.getContext("2d");
+        tempCtx.putImageData(source, -crop.x, -crop.y);
+        this.ctx.drawImage(tempCanvas, 0, 0, this.width, this.height);
+      } else {
+        this.ctx.putImageData(source, 0, 0);
+      }
+    } else {
+      if (!source) {
+        return;
+      }
+      const isAttachment = !!layer.attachmentId;
+      const imgWidth = source.width;
+      const imgHeight = source.height;
+      let renderWidth;
+      let renderHeight;
+      if (isAttachment) {
+        const targetWidthRaw = layer.targetWidth;
+        const targetHeightRaw = layer.targetHeight;
+        const targetWidth = this.parseDimension(targetWidthRaw, this.width);
+        const targetHeight = this.parseDimension(targetHeightRaw, this.height);
+        if (targetWidth && targetHeight) {
+          renderWidth = targetWidth;
+          renderHeight = targetHeight;
+        } else if (targetWidth) {
+          renderWidth = targetWidth;
+          renderHeight = imgHeight / imgWidth * targetWidth;
+        } else if (targetHeight) {
+          renderHeight = targetHeight;
+          renderWidth = imgWidth / imgHeight * targetHeight;
+        } else {
+          renderWidth = imgWidth;
+          renderHeight = imgHeight;
+        }
+      } else {
+        renderWidth = this.width;
+        renderHeight = this.height;
+      }
+      if (crop) {
+        this.ctx.drawImage(
+          source,
+          crop.x,
+          crop.y,
+          crop.width,
+          crop.height,
+          0,
+          0,
+          renderWidth,
+          renderHeight
+        );
+      } else {
+        this.ctx.drawImage(source, 0, 0, renderWidth, renderHeight);
+      }
+    }
+  }
+  async renderTextLayer(layer) {
+    const animationType = layer.animation?.type;
+    const hasWordTimings = layer.wordTimings && layer.wordTimings.length > 0;
+    const needsWordTimings = ["wordByWord", "characterKTV", "wordByWordFancy"].includes(
+      animationType || ""
+    );
+    if (needsWordTimings && !hasWordTimings) {
+      renderBasicText(this.ctx, layer, this.width, this.height, this.currentFrame);
+      return;
+    }
+    switch (animationType) {
+      case "wordByWord":
+        renderWordByWord(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);
+        break;
+      case "characterKTV":
+        renderCharacterKTV(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);
+        break;
+      case "wordByWordFancy":
+        renderWordByWordFancy(
+          this.ctx,
+          layer,
+          this.width,
+          this.height,
+          this.currentFrame,
+          this.fps
+        );
+        break;
+      case "fade":
+        renderTextWithEntrance(this.ctx, layer, this.width, this.height, this.currentFrame);
+        break;
+      default:
+        renderBasicText(this.ctx, layer, this.width, this.height, this.currentFrame);
+        break;
+    }
+  }
+  applyMask(mask) {
+    this.ctx.globalCompositeOperation = mask.invert ? "source-out" : "destination-in";
+    if (mask.source) {
+      this.ctx.drawImage(mask.source, 0, 0, this.width, this.height);
+    } else if (mask.shape === "circle") {
+      this.ctx.beginPath();
+      this.ctx.arc(
+        this.width / 2,
+        this.height / 2,
+        Math.min(this.width, this.height) / 2,
+        0,
+        Math.PI * 2
+      );
+      this.ctx.fill();
+    }
+  }
+  updateDimensions(width, height) {
+    this.width = width;
+    this.height = height;
+    this.ensureHighQualityRendering();
+  }
+}
+export {
+  LayerRenderer
+};
+//# sourceMappingURL=LayerRenderer.js.map

package/dist/stages/compose/LayerRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerRenderer.js","sources":["../../../src/stages/compose/LayerRenderer.ts"],"sourcesContent":["import type { Layer, VideoLayer, ImageLayer, TextLayer, Transform2D, MaskConfig } from './types';\nimport { renderBasicText, renderTextWithEntrance } from './text-renderers/basic-text-renderer';\nimport { renderWordByWord } from './text-renderers/word-by-word-renderer';\nimport { renderCharacterKTV } from './text-renderers/character-ktv-renderer';\nimport { renderWordByWordFancy } from './text-renderers/word-fancy-renderer';\n\n/**\n * LayerRenderer - Handles rendering of individual layers\n * Single responsibility: Draw a single layer to the canvas context\n */\nexport class LayerRenderer {\n  private ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;\n  private width: number;\n  private height: number;\n  private currentFrame: number = 0;\n  private fps: number = 30;\n\n  constructor(\n    ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n    width: number,\n    height: number,\n    fps: number = 30\n  ) {\n    this.ctx = ctx;\n    this.width = width;\n    this.height = height;\n    this.fps = fps;\n    this.ensureHighQualityRendering();\n  }\n\n  setCurrentFrame(frame: number): void {\n    this.currentFrame = frame;\n  }\n\n  private ensureHighQualityRendering(): void {\n    this.ctx.imageSmoothingEnabled = true;\n    this.ctx.imageSmoothingQuality = 'high';\n  }\n\n  /**\n   * Render a single layer with all its properties\n   */\n  async renderLayer(layer: Layer): Promise<void> {\n    if (!layer.visible || layer.opacity <= 0) return;\n\n    this.ctx.save();\n\n    try {\n      this.ensureHighQualityRendering();\n\n      // Apply layer properties\n      this.ctx.globalAlpha = layer.opacity;\n\n      if (layer.blendMode) {\n        this.ctx.globalCompositeOperation = layer.blendMode;\n      }\n\n      if (layer.transform) {\n        // Get layer dimensions for transform anchor calculation\n        const layerDimensions = this.getLayerDimensions(layer);\n        this.applyTransform(layer.transform, layerDimensions);\n      }\n      // Render based on layer type\n      switch (layer.type) {\n        case 'video':\n          await this.renderVideoLayer(layer as VideoLayer);\n          break;\n        case 'image':\n          await this.renderImageLayer(layer as ImageLayer);\n          break;\n        case 'text':\n          await this.renderTextLayer(layer as TextLayer);\n          break;\n      }\n\n      // Apply mask if present\n      if (layer.mask) {\n        this.applyMask(layer.mask);\n      }\n    } finally {\n      this.ctx.restore();\n    }\n  }\n\n  private parseDimension(\n    value: number | string | undefined,\n    canvasSize: number\n  ): number | undefined {\n    if (value === undefined) return undefined;\n    if (typeof value === 'number') return value;\n\n    // value is string at this point\n    const strValue = value as string;\n\n    // Parse percentage string like \"5%\"\n    if (strValue.includes('%')) {\n      const numValue = parseFloat(strValue);\n      return isNaN(numValue) ? undefined : (numValue / 100) * canvasSize;\n    }\n\n    // Parse as pixel value\n    const parsed = parseFloat(strValue);\n    return isNaN(parsed) ? undefined : parsed;\n  }\n\n  private getLayerDimensions(layer: Layer): { width: number; height: number } {\n    if (layer.type === 'image') {\n      const imageLayer = layer as ImageLayer;\n      if (imageLayer.source) {\n        const imgWidth = imageLayer.source.width;\n        const imgHeight = imageLayer.source.height;\n\n        // For attachment layers with target dimensions, calculate rendered size\n        const isAttachment = !!imageLayer.attachmentId;\n        if (isAttachment) {\n          const targetWidthRaw = (imageLayer as any).targetWidth;\n          const targetHeightRaw = (imageLayer as any).targetHeight;\n\n          // Parse dimensions (supports both pixels and percentages)\n          const targetWidth = this.parseDimension(targetWidthRaw, this.width);\n          const targetHeight = this.parseDimension(targetHeightRaw, this.height);\n\n          if (targetWidth && targetHeight) {\n            return { width: targetWidth, height: targetHeight };\n          } else if (targetWidth) {\n            return {\n              width: targetWidth,\n              height: (imgHeight / imgWidth) * targetWidth,\n            };\n          } else if (targetHeight) {\n            return {\n              width: (imgWidth / imgHeight) * targetHeight,\n              height: targetHeight,\n            };\n          }\n        }\n\n        // No scaling, return original dimensions\n        return { width: imgWidth, height: imgHeight };\n      }\n    } else if (layer.type === 'video') {\n      const videoLayer = layer as VideoLayer;\n      const videoFrame = videoLayer.videoFrame;\n      return {\n        width: videoFrame.displayWidth || videoFrame.codedWidth,\n        height: videoFrame.displayHeight || videoFrame.codedHeight,\n      };\n    }\n    // Default to canvas dimensions\n    return { width: this.width, height: this.height };\n  }\n\n  private applyTransform(\n    transform: Transform2D,\n    layerDimensions: { width: number; height: number }\n  ): void {\n    // Use layer dimensions (not canvas dimensions) for anchor calculation\n    const anchorX = transform.anchorX ?? 0.5;\n    const anchorY = transform.anchorY ?? 0.5;\n    const centerX = layerDimensions.width * anchorX;\n    const centerY = layerDimensions.height * anchorY;\n\n    // Move to the layer position + anchor offset\n    this.ctx.translate(transform.x + centerX, transform.y + centerY);\n\n    if (transform.rotation) {\n      this.ctx.rotate(transform.rotation);\n    }\n\n    this.ctx.scale(transform.scaleX, transform.scaleY);\n\n    if (transform.skewX || transform.skewY) {\n      this.ctx.transform(1, transform.skewY ?? 0, transform.skewX ?? 0, 1, 0, 0);\n    }\n\n    // Move back by anchor offset\n    this.ctx.translate(-centerX, -centerY);\n  }\n\n  private async renderVideoLayer(layer: VideoLayer): Promise<void> {\n    const { videoFrame, crop } = layer;\n\n    // Get video dimensions\n    const videoWidth = videoFrame.displayWidth || videoFrame.codedWidth;\n    const videoHeight = videoFrame.displayHeight || videoFrame.codedHeight;\n\n    // Calculate scaling to fit (contain mode - preserve aspect ratio)\n    const scaleX = this.width / videoWidth;\n    const scaleY = this.height / videoHeight;\n\n    // Use the smaller scale to ensure entire video fits\n    const scale = Math.min(scaleX, scaleY);\n\n    // Calculate final render dimensions\n    const renderWidth = Math.round(videoWidth * scale);\n    const renderHeight = Math.round(videoHeight * scale);\n\n    // Center the video\n    const renderX = Math.round((this.width - renderWidth) / 2);\n    const renderY = Math.round((this.height - renderHeight) / 2);\n\n    if (crop) {\n      this.ctx.drawImage(\n        videoFrame,\n        crop.x,\n        crop.y,\n        crop.width,\n        crop.height,\n        renderX,\n        renderY,\n        renderWidth,\n        renderHeight\n      );\n    } else {\n      this.ctx.drawImage(videoFrame, renderX, renderY, renderWidth, renderHeight);\n    }\n    videoFrame.close();\n  }\n\n  private async renderImageLayer(layer: ImageLayer): Promise<void> {\n    const { source, crop } = layer;\n\n    // Handle ImageData by putting it on canvas first\n    if (source instanceof ImageData) {\n      if (crop) {\n        // For ImageData with crop, we need to extract the cropped region\n        const tempCanvas = new OffscreenCanvas(crop.width, crop.height);\n        const tempCtx = tempCanvas.getContext('2d')!;\n        tempCtx.putImageData(source, -crop.x, -crop.y);\n        this.ctx.drawImage(tempCanvas, 0, 0, this.width, this.height);\n      } else {\n        // Put ImageData directly\n        this.ctx.putImageData(source, 0, 0);\n      }\n    } else {\n      // ImageBitmap can be drawn directly\n      if (!source) {\n        return;\n      }\n\n      // Determine if this is an attachment layer (has attachmentId)\n      // Attachment images use original size (or targetWidth/targetHeight if specified)\n      // Main track images fill canvas\n      const isAttachment = !!layer.attachmentId;\n      const imgWidth = source.width;\n      const imgHeight = source.height;\n\n      let renderWidth: number;\n      let renderHeight: number;\n\n      if (isAttachment) {\n        const targetWidthRaw = (layer as any).targetWidth;\n        const targetHeightRaw = (layer as any).targetHeight;\n\n        // Parse dimensions (supports both pixels and percentages)\n        const targetWidth = this.parseDimension(targetWidthRaw, this.width);\n        const targetHeight = this.parseDimension(targetHeightRaw, this.height);\n\n        if (targetWidth && targetHeight) {\n          // Both specified, use as-is\n          renderWidth = targetWidth;\n          renderHeight = targetHeight;\n        } else if (targetWidth) {\n          // Only width specified, maintain aspect ratio\n          renderWidth = targetWidth;\n          renderHeight = (imgHeight / imgWidth) * targetWidth;\n        } else if (targetHeight) {\n          // Only height specified, maintain aspect ratio\n          renderHeight = targetHeight;\n          renderWidth = (imgWidth / imgHeight) * targetHeight;\n        } else {\n          // No target size, use original\n          renderWidth = imgWidth;\n          renderHeight = imgHeight;\n        }\n      } else {\n        // Main track images fill canvas\n        renderWidth = this.width;\n        renderHeight = this.height;\n      }\n\n      if (crop) {\n        this.ctx.drawImage(\n          source,\n          crop.x,\n          crop.y,\n          crop.width,\n          crop.height,\n          0,\n          0,\n          renderWidth,\n          renderHeight\n        );\n      } else {\n        // Draw at appropriate size based on layer type\n        this.ctx.drawImage(source, 0, 0, renderWidth, renderHeight);\n      }\n    }\n  }\n\n  private async renderTextLayer(layer: TextLayer): Promise<void> {\n    const animationType = layer.animation?.type;\n    const hasWordTimings = layer.wordTimings && layer.wordTimings.length > 0;\n\n    const needsWordTimings = ['wordByWord', 'characterKTV', 'wordByWordFancy'].includes(\n      animationType || ''\n    );\n\n    if (needsWordTimings && !hasWordTimings) {\n      renderBasicText(this.ctx, layer, this.width, this.height, this.currentFrame);\n      return;\n    }\n\n    switch (animationType) {\n      case 'wordByWord':\n        renderWordByWord(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);\n        break;\n      case 'characterKTV':\n        renderCharacterKTV(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);\n        break;\n      case 'wordByWordFancy':\n        renderWordByWordFancy(\n          this.ctx,\n          layer,\n          this.width,\n          this.height,\n          this.currentFrame,\n          this.fps\n        );\n        break;\n      case 'fade':\n        renderTextWithEntrance(this.ctx, layer, this.width, this.height, this.currentFrame);\n        break;\n      default:\n        renderBasicText(this.ctx, layer, this.width, this.height, this.currentFrame);\n        break;\n    }\n  }\n\n  private applyMask(mask: MaskConfig): void {\n    this.ctx.globalCompositeOperation = mask.invert ? 'source-out' : 'destination-in';\n\n    if (mask.source) {\n      this.ctx.drawImage(mask.source, 0, 0, this.width, this.height);\n    } else if (mask.shape === 'circle') {\n      this.ctx.beginPath();\n      this.ctx.arc(\n        this.width / 2,\n        this.height / 2,\n        Math.min(this.width, this.height) / 2,\n        0,\n        Math.PI * 2\n      );\n      this.ctx.fill();\n    }\n  }\n\n  updateDimensions(width: number, height: number): void {\n    this.width = width;\n    this.height = height;\n    this.ensureHighQualityRendering();\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/stages/compose/TransitionProcessor.d.ts

@@ -12,7 +12,7 @@ export declare class TransitionProcessor {
      * Apply transition effect to the canvas context
      * Returns true if transition was applied, false if not needed
      */
-    applyTransition(ctx: OffscreenCanvasRenderingContext2D, transition: TransitionEffect): boolean;
+    applyTransition(ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D, transition: TransitionEffect): boolean;
     private calculateEasedProgress;
     private applyFade;
     private applySlide;

package/dist/stages/compose/TransitionProcessor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TransitionProcessor.d.ts","sourceRoot":"","sources":["../../../src/stages/compose/TransitionProcessor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;GAGG;AACH,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,MAAM,CAAS;gBAEX,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAKzC;;;OAGG;IACH,eAAe,CAAC,GAAG,EAAE,iCAAiC,EAAE,UAAU,EAAE,gBAAgB,GAAG,OAAO;IAuB9F,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,SAAS;IA6BjB,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,aAAa;IAOrB;;OAEG;IACH,oBAAoB,CAAC,UAAU,EAAE,gBAAgB,EAAE,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI;IAoC7F,OAAO,CAAC,kBAAkB;IA4C1B,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CAItD"}
+{"version":3,"file":"TransitionProcessor.d.ts","sourceRoot":"","sources":["../../../src/stages/compose/TransitionProcessor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;GAGG;AACH,qBAAa,mBAAmB;IAC9B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,MAAM,CAAS;gBAEX,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAKzC;;;OAGG;IACH,eAAe,CACb,GAAG,EAAE,iCAAiC,GAAG,wBAAwB,EACjE,UAAU,EAAE,gBAAgB,GAC3B,OAAO;IAuBV,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,SAAS;IA6BjB,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,aAAa;IAUrB;;OAEG;IACH,oBAAoB,CAAC,UAAU,EAAE,gBAAgB,EAAE,MAAM,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI;IAoC7F,OAAO,CAAC,kBAAkB;IA4C1B,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CAItD"}