@meframe/core 0.0.1

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';\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;\n  private width: number;\n  private height: number;\n\n  constructor(ctx: OffscreenCanvasRenderingContext2D, width: number, height: number) {\n    this.ctx = ctx;\n    this.width = width;\n    this.height = height;\n    this.ensureHighQualityRendering();\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        this.applyTransform(layer.transform);\n      }\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 applyTransform(transform: Transform2D): void {\n    const centerX = this.width * (transform.anchorX ?? 0.5);\n    const centerY = this.height * (transform.anchorY ?? 0.5);\n\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    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  }\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      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          this.width,\n          this.height\n        );\n      } else {\n        this.ctx.drawImage(source, 0, 0, this.width, this.height);\n      }\n    }\n  }\n\n  private async renderTextLayer(layer: TextLayer): Promise<void> {\n    const fontSize = layer.fontSize ?? 16;\n    const fontFamily = layer.fontFamily ?? 'sans-serif';\n    const fontWeight = layer.fontWeight ?? 'normal';\n    const fontStyle = layer.fontStyle ?? 'normal';\n\n    this.ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;\n    this.ctx.fillStyle = layer.color ?? '#000000';\n    this.ctx.textAlign = layer.textAlign ?? 'left';\n    this.ctx.textBaseline = layer.verticalAlign ?? 'top';\n\n    // Apply letter spacing if supported\n    if (layer.letterSpacing && typeof (this.ctx as any).letterSpacing !== 'undefined') {\n      (this.ctx as any).letterSpacing = `${layer.letterSpacing}px`;\n    }\n\n    // Ensure high-quality text rendering\n    this.ensureHighQualityRendering();\n\n    // Calculate position with sub-pixel adjustment for sharper rendering\n    const baseX = this.calculateTextX(layer.textAlign);\n    const baseY = this.calculateTextY(layer.verticalAlign, fontSize);\n    const x = Math.round(baseX) + 0.5;\n    const y = Math.round(baseY) + 0.5;\n\n    // Apply shadow before rendering text (if needed)\n    if (layer.shadow) {\n      this.ctx.shadowColor = layer.shadow.color;\n      this.ctx.shadowOffsetX = layer.shadow.offsetX;\n      this.ctx.shadowOffsetY = layer.shadow.offsetY;\n      this.ctx.shadowBlur = layer.shadow.blur;\n    }\n\n    // Render stroke with enhanced quality (multi-layer approach)\n    if (layer.strokeColor && layer.strokeWidth && layer.strokeWidth > 0) {\n      this.drawEnhancedStroke(layer.text, x, y, layer.strokeColor, layer.strokeWidth);\n    }\n\n    // Render fill text\n    this.ctx.fillText(layer.text, x, y);\n\n    // Reset shadow\n    if (layer.shadow) {\n      this.ctx.shadowColor = 'transparent';\n      this.ctx.shadowOffsetX = 0;\n      this.ctx.shadowOffsetY = 0;\n      this.ctx.shadowBlur = 0;\n    }\n  }\n\n  /**\n   * Draw enhanced multi-layer stroke for better text visibility\n   */\n  private drawEnhancedStroke(\n    text: string,\n    x: number,\n    y: number,\n    strokeColor: string,\n    strokeWidth: number\n  ): void {\n    this.ctx.save();\n\n    this.ctx.strokeStyle = strokeColor;\n    this.ctx.lineJoin = 'round';\n    this.ctx.lineCap = 'round';\n    this.ctx.miterLimit = 2;\n\n    // Multi-layer stroke for enhanced visibility without excessive thickness\n    const layers = [1.1, 1.0];\n    layers.forEach((multiplier) => {\n      this.ctx.lineWidth = strokeWidth * multiplier;\n      this.ctx.strokeText(text, x, y);\n    });\n\n    this.ctx.restore();\n  }\n\n  private calculateTextX(align?: 'left' | 'center' | 'right'): number {\n    switch (align) {\n      case 'center':\n        return this.width / 2;\n      case 'right':\n        return this.width;\n      default:\n        return 0;\n    }\n  }\n\n  private calculateTextY(align?: 'top' | 'middle' | 'bottom', fontSize: number = 16): number {\n    switch (align) {\n      case 'middle':\n        return this.height / 2;\n      case 'bottom':\n        // Place text at 85% height to avoid bottom edge, similar to SubtitleComposer's 70% position\n        return this.height * 0.85;\n      default:\n        return fontSize;\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/OfflineAudioMixer.d.ts

@@ -0,0 +1,14 @@
+import { TimeUs } from '../../model/types';
+import { CompositionModel } from '../../model';
+import { CacheManager } from '../../cache/CacheManager';
+
+export declare class OfflineAudioMixer {
+    private cacheManager;
+    private getModel;
+    private sampleRate;
+    private numberOfChannels;
+    constructor(cacheManager: CacheManager, getModel: () => CompositionModel | null);
+    mix(windowStartUs: TimeUs, windowEndUs: TimeUs): Promise<AudioBuffer>;
+    private getClipsInWindow;
+}
+//# sourceMappingURL=OfflineAudioMixer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OfflineAudioMixer.d.ts","sourceRoot":"","sources":["../../../src/stages/compose/OfflineAudioMixer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAS7D,qBAAa,iBAAiB;IAK1B,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,QAAQ;IALlB,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,gBAAgB,CAAK;gBAGnB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,MAAM,gBAAgB,GAAG,IAAI;IAG3C,GAAG,CAAC,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC;IA2C3E,OAAO,CAAC,gBAAgB;CA2BzB"}

package/dist/stages/compose/OfflineAudioMixer.js

@@ -0,0 +1,68 @@
+class OfflineAudioMixer {
+  constructor(cacheManager, getModel) {
+    this.cacheManager = cacheManager;
+    this.getModel = getModel;
+  }
+  sampleRate = 48e3;
+  numberOfChannels = 2;
+  async mix(windowStartUs, windowEndUs) {
+    const durationUs = windowEndUs - windowStartUs;
+    const frameCount = Math.ceil(durationUs / 1e6 * this.sampleRate);
+    const ctx = new OfflineAudioContext(this.numberOfChannels, frameCount, this.sampleRate);
+    const clips = this.getClipsInWindow(windowStartUs, windowEndUs);
+    for (const clip of clips) {
+      const pcmPlanes = this.cacheManager.getClipPCM(clip.clipId, windowStartUs, windowEndUs);
+      if (!pcmPlanes || pcmPlanes.length === 0) {
+        console.warn("[OfflineAudioMixer] Missing PCM for clip", clip.clipId);
+        continue;
+      }
+      const pcmFrameCount = pcmPlanes[0]?.length ?? 0;
+      const buffer = ctx.createBuffer(pcmPlanes.length, pcmFrameCount, this.sampleRate);
+      for (let channel = 0; channel < pcmPlanes.length; channel++) {
+        const plane = pcmPlanes[channel];
+        if (plane) {
+          buffer.copyToChannel(plane, channel);
+        }
+      }
+      const source = ctx.createBufferSource();
+      source.buffer = buffer;
+      const gainNode = ctx.createGain();
+      gainNode.gain.value = clip.volume;
+      source.connect(gainNode);
+      gainNode.connect(ctx.destination);
+      const relativeStartUs = Math.max(0, clip.startUs - windowStartUs);
+      const startTime = relativeStartUs / 1e6;
+      source.start(startTime);
+    }
+    const mixedBuffer = await ctx.startRendering();
+    return mixedBuffer;
+  }
+  getClipsInWindow(windowStartUs, windowEndUs) {
+    const clips = [];
+    const model = this.getModel();
+    if (!model) {
+      return clips;
+    }
+    for (const track of model.tracks) {
+      if (track.kind !== "audio") {
+        continue;
+      }
+      for (const clip of track.clips) {
+        const clipEndUs = clip.startUs + clip.durationUs;
+        if (clip.startUs < windowEndUs && clipEndUs > windowStartUs) {
+          clips.push({
+            clipId: clip.id,
+            startUs: clip.startUs,
+            durationUs: clip.durationUs,
+            volume: 1
+          });
+        }
+      }
+    }
+    return clips;
+  }
+}
+export {
+  OfflineAudioMixer
+};
+//# sourceMappingURL=OfflineAudioMixer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OfflineAudioMixer.js","sources":["../../../src/stages/compose/OfflineAudioMixer.ts"],"sourcesContent":["import type { TimeUs } from '../../model/types';\nimport type { CompositionModel } from '../../model';\nimport type { CacheManager } from '../../cache/CacheManager';\n\ninterface MixClipInfo {\n  clipId: string;\n  startUs: TimeUs;\n  durationUs: TimeUs;\n  volume: number;\n}\n\nexport class OfflineAudioMixer {\n  private sampleRate = 48_000;\n  private numberOfChannels = 2;\n\n  constructor(\n    private cacheManager: CacheManager,\n    private getModel: () => CompositionModel | null\n  ) {}\n\n  async mix(windowStartUs: TimeUs, windowEndUs: TimeUs): Promise<AudioBuffer> {\n    const durationUs = windowEndUs - windowStartUs;\n    const frameCount = Math.ceil((durationUs / 1_000_000) * this.sampleRate);\n\n    const ctx = new OfflineAudioContext(this.numberOfChannels, frameCount, this.sampleRate);\n\n    const clips = this.getClipsInWindow(windowStartUs, windowEndUs);\n\n    for (const clip of clips) {\n      const pcmPlanes = this.cacheManager.getClipPCM(clip.clipId, windowStartUs, windowEndUs);\n      if (!pcmPlanes || pcmPlanes.length === 0) {\n        console.warn('[OfflineAudioMixer] Missing PCM for clip', clip.clipId);\n        continue;\n      }\n\n      const pcmFrameCount = pcmPlanes[0]?.length ?? 0;\n      const buffer = ctx.createBuffer(pcmPlanes.length, pcmFrameCount, this.sampleRate);\n\n      for (let channel = 0; channel < pcmPlanes.length; channel++) {\n        const plane = pcmPlanes[channel];\n        if (plane) {\n          buffer.copyToChannel(plane as Float32Array<ArrayBuffer>, channel);\n        }\n      }\n\n      const source = ctx.createBufferSource();\n      source.buffer = buffer;\n\n      const gainNode = ctx.createGain();\n      gainNode.gain.value = clip.volume;\n\n      source.connect(gainNode);\n      gainNode.connect(ctx.destination);\n\n      const relativeStartUs = Math.max(0, clip.startUs - windowStartUs);\n      const startTime = relativeStartUs / 1_000_000;\n      source.start(startTime);\n    }\n\n    const mixedBuffer = await ctx.startRendering();\n    return mixedBuffer;\n  }\n\n  private getClipsInWindow(windowStartUs: TimeUs, windowEndUs: TimeUs): MixClipInfo[] {\n    const clips: MixClipInfo[] = [];\n    const model = this.getModel();\n    if (!model) {\n      return clips;\n    }\n\n    for (const track of model.tracks) {\n      if (track.kind !== 'audio') {\n        continue;\n      }\n\n      for (const clip of track.clips) {\n        const clipEndUs = clip.startUs + clip.durationUs;\n        if (clip.startUs < windowEndUs && clipEndUs > windowStartUs) {\n          clips.push({\n            clipId: clip.id,\n            startUs: clip.startUs,\n            durationUs: clip.durationUs,\n            volume: 1.0,\n          });\n        }\n      }\n    }\n\n    return clips;\n  }\n}\n"],"names":[],"mappings":"AAWO,MAAM,kBAAkB;AAAA,EAI7B,YACU,cACA,UACR;AAFQ,SAAA,eAAA;AACA,SAAA,WAAA;AAAA,EACP;AAAA,EANK,aAAa;AAAA,EACb,mBAAmB;AAAA,EAO3B,MAAM,IAAI,eAAuB,aAA2C;AAC1E,UAAM,aAAa,cAAc;AACjC,UAAM,aAAa,KAAK,KAAM,aAAa,MAAa,KAAK,UAAU;AAEvE,UAAM,MAAM,IAAI,oBAAoB,KAAK,kBAAkB,YAAY,KAAK,UAAU;AAEtF,UAAM,QAAQ,KAAK,iBAAiB,eAAe,WAAW;AAE9D,eAAW,QAAQ,OAAO;AACxB,YAAM,YAAY,KAAK,aAAa,WAAW,KAAK,QAAQ,eAAe,WAAW;AACtF,UAAI,CAAC,aAAa,UAAU,WAAW,GAAG;AACxC,gBAAQ,KAAK,4CAA4C,KAAK,MAAM;AACpE;AAAA,MACF;AAEA,YAAM,gBAAgB,UAAU,CAAC,GAAG,UAAU;AAC9C,YAAM,SAAS,IAAI,aAAa,UAAU,QAAQ,eAAe,KAAK,UAAU;AAEhF,eAAS,UAAU,GAAG,UAAU,UAAU,QAAQ,WAAW;AAC3D,cAAM,QAAQ,UAAU,OAAO;AAC/B,YAAI,OAAO;AACT,iBAAO,cAAc,OAAoC,OAAO;AAAA,QAClE;AAAA,MACF;AAEA,YAAM,SAAS,IAAI,mBAAA;AACnB,aAAO,SAAS;AAEhB,YAAM,WAAW,IAAI,WAAA;AACrB,eAAS,KAAK,QAAQ,KAAK;AAE3B,aAAO,QAAQ,QAAQ;AACvB,eAAS,QAAQ,IAAI,WAAW;AAEhC,YAAM,kBAAkB,KAAK,IAAI,GAAG,KAAK,UAAU,aAAa;AAChE,YAAM,YAAY,kBAAkB;AACpC,aAAO,MAAM,SAAS;AAAA,IACxB;AAEA,UAAM,cAAc,MAAM,IAAI,eAAA;AAC9B,WAAO;AAAA,EACT;AAAA,EAEQ,iBAAiB,eAAuB,aAAoC;AAClF,UAAM,QAAuB,CAAA;AAC7B,UAAM,QAAQ,KAAK,SAAA;AACnB,QAAI,CAAC,OAAO;AACV,aAAO;AAAA,IACT;AAEA,eAAW,SAAS,MAAM,QAAQ;AAChC,UAAI,MAAM,SAAS,SAAS;AAC1B;AAAA,MACF;AAEA,iBAAW,QAAQ,MAAM,OAAO;AAC9B,cAAM,YAAY,KAAK,UAAU,KAAK;AACtC,YAAI,KAAK,UAAU,eAAe,YAAY,eAAe;AAC3D,gBAAM,KAAK;AAAA,YACT,QAAQ,KAAK;AAAA,YACb,SAAS,KAAK;AAAA,YACd,YAAY,KAAK;AAAA,YACjB,QAAQ;AAAA,UAAA,CACT;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AACF;"}

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

@@ -0,0 +1,30 @@
+import { TransitionEffect } from './types';
+
+/**
+ * TransitionProcessor - Handles transition effects between frames/scenes
+ * Single responsibility: Apply transition transformations to canvas context
+ */
+export declare class TransitionProcessor {
+    private width;
+    private height;
+    constructor(width: number, height: number);
+    /**
+     * Apply transition effect to the canvas context
+     * Returns true if transition was applied, false if not needed
+     */
+    applyTransition(ctx: OffscreenCanvasRenderingContext2D, transition: TransitionEffect): boolean;
+    private calculateEasedProgress;
+    private applyFade;
+    private applySlide;
+    private applyWipe;
+    private applyZoom;
+    private applyRotate;
+    private applyDissolve;
+    /**
+     * Create a transition mask for advanced effects
+     */
+    createTransitionMask(transition: TransitionEffect, canvas: OffscreenCanvas): ImageData | null;
+    private calculateWipeAlpha;
+    updateDimensions(width: number, height: number): void;
+}
+//# sourceMappingURL=TransitionProcessor.d.ts.map

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

@@ -0,0 +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"}

package/dist/stages/compose/TransitionProcessor.js

@@ -0,0 +1,189 @@
+class TransitionProcessor {
+  width;
+  height;
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+  /**
+   * Apply transition effect to the canvas context
+   * Returns true if transition was applied, false if not needed
+   */
+  applyTransition(ctx, transition) {
+    if (!transition || transition.progress <= 0) return false;
+    const progress = this.calculateEasedProgress(transition.progress, transition.easing);
+    switch (transition.type) {
+      case "fade":
+        return this.applyFade(ctx, progress);
+      case "slide":
+        return this.applySlide(ctx, progress, transition.direction);
+      case "wipe":
+        return this.applyWipe(ctx, progress, transition.direction);
+      case "zoom":
+        return this.applyZoom(ctx, progress, transition.direction);
+      case "rotate":
+        return this.applyRotate(ctx, progress);
+      case "dissolve":
+        return this.applyDissolve(ctx, progress);
+      default:
+        return false;
+    }
+  }
+  calculateEasedProgress(progress, easing) {
+    switch (easing) {
+      case "ease-in":
+        return progress * progress;
+      case "ease-out":
+        return 1 - (1 - progress) * (1 - progress);
+      case "ease-in-out":
+        return progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
+      default:
+        return progress;
+    }
+  }
+  applyFade(ctx, progress) {
+    ctx.globalAlpha = progress;
+    return true;
+  }
+  applySlide(ctx, progress, direction) {
+    const distance = 1 - progress;
+    switch (direction) {
+      case "left":
+        ctx.translate(-this.width * distance, 0);
+        break;
+      case "right":
+        ctx.translate(this.width * distance, 0);
+        break;
+      case "up":
+        ctx.translate(0, -this.height * distance);
+        break;
+      case "down":
+        ctx.translate(0, this.height * distance);
+        break;
+      default:
+        ctx.translate(-this.width * distance, 0);
+    }
+    return true;
+  }
+  applyWipe(ctx, progress, direction) {
+    ctx.save();
+    ctx.beginPath();
+    switch (direction) {
+      case "left":
+        ctx.rect(0, 0, this.width * progress, this.height);
+        break;
+      case "right":
+        ctx.rect(this.width * (1 - progress), 0, this.width * progress, this.height);
+        break;
+      case "up":
+        ctx.rect(0, 0, this.width, this.height * progress);
+        break;
+      case "down":
+        ctx.rect(0, this.height * (1 - progress), this.width, this.height * progress);
+        break;
+      default:
+        ctx.rect(0, 0, this.width * progress, this.height);
+    }
+    ctx.clip();
+    return true;
+  }
+  applyZoom(ctx, progress, direction) {
+    const scale = direction === "out" ? 1 + (1 - progress) : progress;
+    const centerX = this.width / 2;
+    const centerY = this.height / 2;
+    ctx.translate(centerX, centerY);
+    ctx.scale(scale, scale);
+    ctx.translate(-centerX, -centerY);
+    if (direction === "out") {
+      ctx.globalAlpha = progress;
+    }
+    return true;
+  }
+  applyRotate(ctx, progress) {
+    const rotation = (1 - progress) * Math.PI * 2;
+    const centerX = this.width / 2;
+    const centerY = this.height / 2;
+    ctx.translate(centerX, centerY);
+    ctx.rotate(rotation);
+    ctx.translate(-centerX, -centerY);
+    return true;
+  }
+  applyDissolve(ctx, progress) {
+    ctx.globalAlpha = progress;
+    ctx.globalCompositeOperation = "multiply";
+    return true;
+  }
+  /**
+   * Create a transition mask for advanced effects
+   */
+  createTransitionMask(transition, canvas) {
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return null;
+    const imageData = ctx.createImageData(this.width, this.height);
+    const data = imageData.data;
+    const progress = this.calculateEasedProgress(transition.progress, transition.easing);
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
+        const index = (y * this.width + x) * 4;
+        let alpha = 255;
+        switch (transition.type) {
+          case "wipe":
+            alpha = this.calculateWipeAlpha(x, y, progress, transition.direction);
+            break;
+          case "dissolve":
+            alpha = Math.random() < progress ? 255 : 0;
+            break;
+          default:
+            alpha = Math.floor(255 * progress);
+        }
+        data[index] = 255;
+        data[index + 1] = 255;
+        data[index + 2] = 255;
+        data[index + 3] = alpha;
+      }
+    }
+    return imageData;
+  }
+  calculateWipeAlpha(x, y, progress, direction) {
+    let position = 0;
+    switch (direction) {
+      case "left":
+        position = x / this.width;
+        break;
+      case "right":
+        position = 1 - x / this.width;
+        break;
+      case "up":
+        position = y / this.height;
+        break;
+      case "down":
+        position = 1 - y / this.height;
+        break;
+      case "in": {
+        const cx = x - this.width / 2;
+        const cy = y - this.height / 2;
+        const maxDist = Math.sqrt(this.width * this.width + this.height * this.height) / 2;
+        position = Math.sqrt(cx * cx + cy * cy) / maxDist;
+        break;
+      }
+      case "out": {
+        const cx2 = x - this.width / 2;
+        const cy2 = y - this.height / 2;
+        const maxDist2 = Math.sqrt(this.width * this.width + this.height * this.height) / 2;
+        position = 1 - Math.sqrt(cx2 * cx2 + cy2 * cy2) / maxDist2;
+        break;
+      }
+      default:
+        position = x / this.width;
+    }
+    return position < progress ? 255 : 0;
+  }
+  updateDimensions(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+}
+export {
+  TransitionProcessor
+};
+//# sourceMappingURL=TransitionProcessor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransitionProcessor.js","sources":["../../../src/stages/compose/TransitionProcessor.ts"],"sourcesContent":["import type { TransitionEffect } from './types';\n\n/**\n * TransitionProcessor - Handles transition effects between frames/scenes\n * Single responsibility: Apply transition transformations to canvas context\n */\nexport class TransitionProcessor {\n  private width: number;\n  private height: number;\n\n  constructor(width: number, height: number) {\n    this.width = width;\n    this.height = height;\n  }\n\n  /**\n   * Apply transition effect to the canvas context\n   * Returns true if transition was applied, false if not needed\n   */\n  applyTransition(ctx: OffscreenCanvasRenderingContext2D, transition: TransitionEffect): boolean {\n    if (!transition || transition.progress <= 0) return false;\n\n    const progress = this.calculateEasedProgress(transition.progress, transition.easing);\n\n    switch (transition.type) {\n      case 'fade':\n        return this.applyFade(ctx, progress);\n      case 'slide':\n        return this.applySlide(ctx, progress, transition.direction);\n      case 'wipe':\n        return this.applyWipe(ctx, progress, transition.direction);\n      case 'zoom':\n        return this.applyZoom(ctx, progress, transition.direction);\n      case 'rotate':\n        return this.applyRotate(ctx, progress);\n      case 'dissolve':\n        return this.applyDissolve(ctx, progress);\n      default:\n        return false;\n    }\n  }\n\n  private calculateEasedProgress(\n    progress: number,\n    easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out'\n  ): number {\n    switch (easing) {\n      case 'ease-in':\n        return progress * progress;\n      case 'ease-out':\n        return 1 - (1 - progress) * (1 - progress);\n      case 'ease-in-out':\n        return progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;\n      default:\n        return progress;\n    }\n  }\n\n  private applyFade(ctx: OffscreenCanvasRenderingContext2D, progress: number): boolean {\n    ctx.globalAlpha = progress;\n    return true;\n  }\n\n  private applySlide(\n    ctx: OffscreenCanvasRenderingContext2D,\n    progress: number,\n    direction?: 'left' | 'right' | 'up' | 'down' | 'in' | 'out'\n  ): boolean {\n    const distance = 1 - progress;\n\n    switch (direction) {\n      case 'left':\n        ctx.translate(-this.width * distance, 0);\n        break;\n      case 'right':\n        ctx.translate(this.width * distance, 0);\n        break;\n      case 'up':\n        ctx.translate(0, -this.height * distance);\n        break;\n      case 'down':\n        ctx.translate(0, this.height * distance);\n        break;\n      default:\n        ctx.translate(-this.width * distance, 0);\n    }\n\n    return true;\n  }\n\n  private applyWipe(\n    ctx: OffscreenCanvasRenderingContext2D,\n    progress: number,\n    direction?: 'left' | 'right' | 'up' | 'down' | 'in' | 'out'\n  ): boolean {\n    ctx.save();\n    ctx.beginPath();\n\n    switch (direction) {\n      case 'left':\n        ctx.rect(0, 0, this.width * progress, this.height);\n        break;\n      case 'right':\n        ctx.rect(this.width * (1 - progress), 0, this.width * progress, this.height);\n        break;\n      case 'up':\n        ctx.rect(0, 0, this.width, this.height * progress);\n        break;\n      case 'down':\n        ctx.rect(0, this.height * (1 - progress), this.width, this.height * progress);\n        break;\n      default:\n        ctx.rect(0, 0, this.width * progress, this.height);\n    }\n\n    ctx.clip();\n    return true;\n  }\n\n  private applyZoom(\n    ctx: OffscreenCanvasRenderingContext2D,\n    progress: number,\n    direction?: 'left' | 'right' | 'up' | 'down' | 'in' | 'out'\n  ): boolean {\n    const scale = direction === 'out' ? 1 + (1 - progress) : progress;\n    const centerX = this.width / 2;\n    const centerY = this.height / 2;\n\n    ctx.translate(centerX, centerY);\n    ctx.scale(scale, scale);\n    ctx.translate(-centerX, -centerY);\n\n    if (direction === 'out') {\n      ctx.globalAlpha = progress;\n    }\n\n    return true;\n  }\n\n  private applyRotate(ctx: OffscreenCanvasRenderingContext2D, progress: number): boolean {\n    const rotation = (1 - progress) * Math.PI * 2;\n    const centerX = this.width / 2;\n    const centerY = this.height / 2;\n\n    ctx.translate(centerX, centerY);\n    ctx.rotate(rotation);\n    ctx.translate(-centerX, -centerY);\n\n    return true;\n  }\n\n  private applyDissolve(ctx: OffscreenCanvasRenderingContext2D, progress: number): boolean {\n    // Simple dissolve using alpha\n    ctx.globalAlpha = progress;\n    ctx.globalCompositeOperation = 'multiply';\n    return true;\n  }\n\n  /**\n   * Create a transition mask for advanced effects\n   */\n  createTransitionMask(transition: TransitionEffect, canvas: OffscreenCanvas): ImageData | null {\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return null;\n\n    const imageData = ctx.createImageData(this.width, this.height);\n    const data = imageData.data;\n    const progress = this.calculateEasedProgress(transition.progress, transition.easing);\n\n    // Generate gradient mask based on transition type\n    for (let y = 0; y < this.height; y++) {\n      for (let x = 0; x < this.width; x++) {\n        const index = (y * this.width + x) * 4;\n        let alpha = 255;\n\n        switch (transition.type) {\n          case 'wipe':\n            alpha = this.calculateWipeAlpha(x, y, progress, transition.direction);\n            break;\n          case 'dissolve':\n            // Random noise dissolve\n            alpha = Math.random() < progress ? 255 : 0;\n            break;\n          default:\n            alpha = Math.floor(255 * progress);\n        }\n\n        data[index] = 255; // R\n        data[index + 1] = 255; // G\n        data[index + 2] = 255; // B\n        data[index + 3] = alpha; // A\n      }\n    }\n\n    return imageData;\n  }\n\n  private calculateWipeAlpha(\n    x: number,\n    y: number,\n    progress: number,\n    direction?: 'left' | 'right' | 'up' | 'down' | 'in' | 'out'\n  ): number {\n    let position = 0;\n\n    switch (direction) {\n      case 'left':\n        position = x / this.width;\n        break;\n      case 'right':\n        position = 1 - x / this.width;\n        break;\n      case 'up':\n        position = y / this.height;\n        break;\n      case 'down':\n        position = 1 - y / this.height;\n        break;\n      case 'in': {\n        // Radial wipe from center\n        const cx = x - this.width / 2;\n        const cy = y - this.height / 2;\n        const maxDist = Math.sqrt(this.width * this.width + this.height * this.height) / 2;\n        position = Math.sqrt(cx * cx + cy * cy) / maxDist;\n        break;\n      }\n      case 'out': {\n        // Radial wipe to center\n        const cx2 = x - this.width / 2;\n        const cy2 = y - this.height / 2;\n        const maxDist2 = Math.sqrt(this.width * this.width + this.height * this.height) / 2;\n        position = 1 - Math.sqrt(cx2 * cx2 + cy2 * cy2) / maxDist2;\n        break;\n      }\n      default:\n        position = x / this.width;\n    }\n\n    return position < progress ? 255 : 0;\n  }\n\n  updateDimensions(width: number, height: number): void {\n    this.width = width;\n    this.height = height;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+import { VideoComposeConfig, ComposeRequest, ComposeResult, TransitionEffect } from './types';
+import { ClipInstructionSet } from './instructions';
+
+interface ComposeStreams {
+    composeStream: WritableStream<ComposeRequest>;
+    cacheStream: ReadableStream<VideoFrame>;
+}
+/**
+ * VideoComposer - Main visual composition orchestrator
+ */
+export declare class VideoComposer {
+    readonly config: Required<VideoComposeConfig>;
+    readonly canvas: OffscreenCanvas;
+    private ctx;
+    private layerRenderer;
+    private transitionProcessor;
+    private filterProcessor;
+    private timelineContext;
+    constructor(config: VideoComposeConfig);
+    private applyDefaults;
+    createStreams(_instruction?: ClipInstructionSet): ComposeStreams;
+    composeFrame(request: ComposeRequest): Promise<ComposeResult>;
+    composeTransition(fromRequest: ComposeRequest, toRequest: ComposeRequest, transition: TransitionEffect): Promise<ComposeResult>;
+    private clearCanvas;
+    private createOutputFrame;
+    updateConfig(config: Partial<VideoComposeConfig>): void;
+    dispose(): void;
+}
+export {};
+//# sourceMappingURL=VideoComposer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoComposer.d.ts","sourceRoot":"","sources":["../../../src/stages/compose/VideoComposer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAGjB,MAAM,SAAS,CAAC;AAKjB,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEpD,UAAU,cAAc;IACtB,aAAa,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IAC9C,WAAW,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,qBAAa,aAAa;IACxB,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IAC9C,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC;IAEjC,OAAO,CAAC,GAAG,CAAoC;IAC/C,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,mBAAmB,CAAsB;IACjD,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,eAAe,CAAyB;gBAEpC,MAAM,EAAE,kBAAkB;IAyBtC,OAAO,CAAC,aAAa;IAsBrB,aAAa,CAAC,YAAY,CAAC,EAAE,kBAAkB,GAAG,cAAc;IAqC1D,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC;IAkE7D,iBAAiB,CACrB,WAAW,EAAE,cAAc,EAC3B,SAAS,EAAE,cAAc,EACzB,UAAU,EAAE,gBAAgB,GAC3B,OAAO,CAAC,aAAa,CAAC;IAWzB,OAAO,CAAC,WAAW;YAaL,iBAAiB;IAW/B,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,IAAI;IAmBvD,OAAO,IAAI,IAAI;CAGhB"}

package/dist/stages/compose/VideoComposer.js

@@ -0,0 +1,186 @@
+import { frameDurationFromFps } from "../../utils/time-utils.js";
+import { LayerRenderer } from "./LayerRenderer.js";
+import { TransitionProcessor } from "./TransitionProcessor.js";
+import { FilterProcessor } from "./FilterProcessor.js";
+class VideoComposer {
+  config;
+  canvas;
+  ctx;
+  layerRenderer;
+  transitionProcessor;
+  filterProcessor;
+  timelineContext;
+  constructor(config) {
+    this.config = this.applyDefaults(config);
+    this.canvas = new OffscreenCanvas(this.config.width, this.config.height);
+    const ctx = this.canvas.getContext("2d", {
+      alpha: true,
+      desynchronized: true,
+      willReadFrequently: false,
+      colorSpace: "srgb"
+    });
+    if (!ctx) {
+      throw new Error("Failed to create 2D rendering context");
+    }
+    this.ctx = ctx;
+    this.ctx.imageSmoothingEnabled = this.config.enableSmoothing;
+    this.ctx.imageSmoothingQuality = "high";
+    this.layerRenderer = new LayerRenderer(ctx, this.config.width, this.config.height);
+    this.transitionProcessor = new TransitionProcessor(this.config.width, this.config.height);
+    this.filterProcessor = new FilterProcessor();
+    this.timelineContext = this.config.timeline;
+  }
+  applyDefaults(config) {
+    return {
+      width: config.width || 720,
+      height: config.height || 1280,
+      fps: config.fps || 30,
+      backgroundColor: config.backgroundColor ?? "#000",
+      renderer: config.renderer ?? "canvas2d",
+      enableSmoothing: config.enableSmoothing ?? true,
+      enableHardwareAcceleration: config.enableHardwareAcceleration ?? true,
+      revision: config.revision ?? 0,
+      inputHighWaterMark: config.inputHighWaterMark ?? 3,
+      outputHighWaterMark: config.outputHighWaterMark ?? 1,
+      maxLayers: config.maxLayers ?? 100,
+      timeline: config.timeline ?? {
+        clipId: "default",
+        trackId: "main",
+        clipStartUs: 0,
+        compositionFps: 30
+      }
+    };
+  }
+  createStreams(_instruction) {
+    if (_instruction?.baseConfig.timeline) {
+      this.timelineContext = _instruction.baseConfig.timeline;
+    }
+    const stream = new TransformStream(
+      {
+        transform: async (request, controller) => {
+          const result = await this.composeFrame(request);
+          controller.enqueue({
+            frame: result.frame,
+            metadata: result.metadata
+          });
+        },
+        flush: async (controller) => {
+          console.log("[VideoComposer] flush", controller.desiredSize);
+          this.filterProcessor.clearCache();
+        }
+      },
+      {
+        highWaterMark: this.config.inputHighWaterMark
+      },
+      {
+        highWaterMark: this.config.outputHighWaterMark
+      }
+    );
+    return {
+      composeStream: stream.writable,
+      cacheStream: stream.readable
+    };
+  }
+  async composeFrame(request) {
+    if (request.layers.length > this.config.maxLayers) {
+      throw new Error(`Too many layers: ${request.layers.length} > ${this.config.maxLayers}`);
+    }
+    this.clearCanvas();
+    if (request.transition) {
+      this.ctx.save();
+      this.transitionProcessor.applyTransition(this.ctx, request.transition);
+    }
+    for (const layer of request.layers) {
+      if (!layer.visible || layer.opacity <= 0) {
+        if (layer.type === "video") {
+          const vf = layer.videoFrame;
+          vf?.close?.();
+        }
+        continue;
+      }
+      try {
+        if (layer.filters && layer.filters.length > 0) {
+          this.ctx.save();
+          this.filterProcessor.applyFilters(this.ctx, layer.filters);
+        }
+        await this.layerRenderer.renderLayer(layer);
+        if (layer.filters && layer.filters.length > 0) {
+          this.ctx.restore();
+        }
+      } finally {
+        if (layer.type === "video") {
+          const vf = layer.videoFrame;
+          vf?.close?.();
+        }
+      }
+    }
+    if (request.transition) {
+      this.ctx.restore();
+    }
+    const frame = await this.createOutputFrame(request.timeUs);
+    const gopSerial = request.gopSerial;
+    const isKeyframe = request.isKeyframe;
+    return {
+      frame,
+      timeUs: request.timeUs,
+      metadata: {
+        layerCount: request.layers.length,
+        renderTime: 0,
+        gpuAccelerated: this.config.enableHardwareAcceleration && this.config.renderer !== "canvas2d",
+        ...typeof gopSerial === "number" && { gopSerial },
+        ...typeof isKeyframe === "boolean" && { isKeyframe }
+      }
+    };
+  }
+  async composeTransition(fromRequest, toRequest, transition) {
+    await this.composeFrame(fromRequest);
+    const toFrameRequest = {
+      ...toRequest,
+      transition
+    };
+    return this.composeFrame(toFrameRequest);
+  }
+  clearCanvas() {
+    if (this.config.backgroundColor) {
+      this.ctx.fillStyle = this.config.backgroundColor;
+      this.ctx.fillRect(0, 0, this.config.width, this.config.height);
+    } else {
+      this.ctx.clearRect(0, 0, this.config.width, this.config.height);
+    }
+  }
+  // private sortLayers(layers: Layer[]): Layer[] {
+  //   return [...layers].sort((a, b) => a.zIndex - b.zIndex);
+  // }
+  async createOutputFrame(timeUs) {
+    const duration = frameDurationFromFps(this.timelineContext.compositionFps);
+    const frame = new VideoFrame(this.canvas, {
+      timestamp: timeUs,
+      duration,
+      alpha: "discard",
+      visibleRect: { x: 0, y: 0, width: this.canvas.width, height: this.canvas.height }
+    });
+    return frame;
+  }
+  updateConfig(config) {
+    Object.assign(this.config, this.applyDefaults({ ...this.config, ...config }));
+    if (config.width || config.height) {
+      this.canvas.width = this.config.width;
+      this.canvas.height = this.config.height;
+      this.layerRenderer.updateDimensions(this.config.width, this.config.height);
+      this.transitionProcessor.updateDimensions(this.config.width, this.config.height);
+    }
+    if (config.enableSmoothing !== void 0) {
+      this.ctx.imageSmoothingEnabled = this.config.enableSmoothing;
+    }
+    if (config.timeline) {
+      this.timelineContext = config.timeline;
+    }
+  }
+  dispose() {
+    this.filterProcessor.clearCache();
+  }
+}
+export {
+  VideoComposer
+};
+//# sourceMappingURL=VideoComposer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoComposer.js","sources":["../../../src/stages/compose/VideoComposer.ts"],"sourcesContent":["import type {\n  VideoComposeConfig,\n  ComposeRequest,\n  ComposeResult,\n  TransitionEffect,\n  VideoLayer,\n  ComposeTimelineContext,\n} from './types';\nimport { frameDurationFromFps } from '../../utils/time-utils';\nimport { LayerRenderer } from './LayerRenderer';\nimport { TransitionProcessor } from './TransitionProcessor';\nimport { FilterProcessor } from './FilterProcessor';\nimport { ClipInstructionSet } from './instructions';\n\ninterface ComposeStreams {\n  composeStream: WritableStream<ComposeRequest>;\n  cacheStream: ReadableStream<VideoFrame>;\n}\n\n/**\n * VideoComposer - Main visual composition orchestrator\n */\nexport class VideoComposer {\n  readonly config: Required<VideoComposeConfig>;\n  readonly canvas: OffscreenCanvas;\n\n  private ctx: OffscreenCanvasRenderingContext2D;\n  private layerRenderer: LayerRenderer;\n  private transitionProcessor: TransitionProcessor;\n  private filterProcessor: FilterProcessor;\n  private timelineContext: ComposeTimelineContext;\n\n  constructor(config: VideoComposeConfig) {\n    this.config = this.applyDefaults(config);\n    this.canvas = new OffscreenCanvas(this.config.width, this.config.height);\n\n    const ctx = this.canvas.getContext('2d', {\n      alpha: true,\n      desynchronized: true,\n      willReadFrequently: false,\n      colorSpace: 'srgb',\n    });\n\n    if (!ctx) {\n      throw new Error('Failed to create 2D rendering context');\n    }\n\n    this.ctx = ctx;\n    this.ctx.imageSmoothingEnabled = this.config.enableSmoothing;\n    this.ctx.imageSmoothingQuality = 'high';\n\n    this.layerRenderer = new LayerRenderer(ctx, this.config.width, this.config.height);\n    this.transitionProcessor = new TransitionProcessor(this.config.width, this.config.height);\n    this.filterProcessor = new FilterProcessor();\n    this.timelineContext = this.config.timeline;\n  }\n\n  private applyDefaults(config: VideoComposeConfig): Required<VideoComposeConfig> {\n    return {\n      width: config.width || 720,\n      height: config.height || 1280,\n      fps: config.fps || 30,\n      backgroundColor: config.backgroundColor ?? '#000',\n      renderer: config.renderer ?? 'canvas2d',\n      enableSmoothing: config.enableSmoothing ?? true,\n      enableHardwareAcceleration: config.enableHardwareAcceleration ?? true,\n      revision: config.revision ?? 0,\n      inputHighWaterMark: config.inputHighWaterMark ?? 3,\n      outputHighWaterMark: config.outputHighWaterMark ?? 1,\n      maxLayers: config.maxLayers ?? 100,\n      timeline: config.timeline ?? {\n        clipId: 'default',\n        trackId: 'main',\n        clipStartUs: 0,\n        compositionFps: 30,\n      },\n    };\n  }\n\n  createStreams(_instruction?: ClipInstructionSet): ComposeStreams {\n    if (_instruction?.baseConfig.timeline) {\n      this.timelineContext = _instruction.baseConfig.timeline;\n    }\n\n    // Always create new streams for each clip\n    // ReadableStreams can only be consumed once\n    const stream = new TransformStream<ComposeRequest, any>(\n      {\n        transform: async (request, controller) => {\n          // console.log('[VideoComposer] transform', request, controller.desiredSize);\n          const result = await this.composeFrame(request);\n          controller.enqueue({\n            frame: result.frame,\n            metadata: result.metadata,\n          });\n        },\n\n        flush: async (controller) => {\n          console.log('[VideoComposer] flush', controller.desiredSize);\n          this.filterProcessor.clearCache();\n        },\n      },\n      {\n        highWaterMark: this.config.inputHighWaterMark,\n      },\n      {\n        highWaterMark: this.config.outputHighWaterMark,\n      }\n    );\n    // const [encodeStream, cacheStream] = stream.readable.tee();\n    return {\n      composeStream: stream.writable,\n      cacheStream: stream.readable,\n    };\n  }\n\n  async composeFrame(request: ComposeRequest): Promise<ComposeResult> {\n    if (request.layers.length > this.config.maxLayers) {\n      throw new Error(`Too many layers: ${request.layers.length} > ${this.config.maxLayers}`);\n    }\n\n    this.clearCanvas();\n    // const sortedLayers = this.sortLayers(request.layers);\n\n    if (request.transition) {\n      this.ctx.save();\n      this.transitionProcessor.applyTransition(this.ctx, request.transition);\n    }\n\n    for (const layer of request.layers) {\n      if (!layer.visible || layer.opacity <= 0) {\n        // Close video frame for invisible layers\n        if ((layer as any).type === 'video') {\n          const vf = (layer as VideoLayer).videoFrame;\n          vf?.close?.();\n        }\n        continue;\n      }\n\n      try {\n        if (layer.filters && layer.filters.length > 0) {\n          this.ctx.save();\n          this.filterProcessor.applyFilters(this.ctx, layer.filters);\n        }\n\n        await this.layerRenderer.renderLayer(layer);\n\n        if (layer.filters && layer.filters.length > 0) {\n          this.ctx.restore();\n        }\n      } finally {\n        // Always close video frame after rendering (or on error)\n        if ((layer as any).type === 'video') {\n          const vf = (layer as VideoLayer).videoFrame;\n          vf?.close?.();\n        }\n      }\n    }\n\n    if (request.transition) {\n      this.ctx.restore();\n    }\n\n    const frame = await this.createOutputFrame(request.timeUs);\n\n    const gopSerial = (request as any).gopSerial;\n    const isKeyframe = (request as any).isKeyframe;\n\n    return {\n      frame,\n      timeUs: request.timeUs,\n      metadata: {\n        layerCount: request.layers.length,\n        renderTime: 0,\n        gpuAccelerated:\n          this.config.enableHardwareAcceleration && this.config.renderer !== 'canvas2d',\n        ...(typeof gopSerial === 'number' && { gopSerial }),\n        ...(typeof isKeyframe === 'boolean' && { isKeyframe }),\n      },\n    };\n  }\n\n  async composeTransition(\n    fromRequest: ComposeRequest,\n    toRequest: ComposeRequest,\n    transition: TransitionEffect\n  ): Promise<ComposeResult> {\n    await this.composeFrame(fromRequest);\n\n    const toFrameRequest = {\n      ...toRequest,\n      transition,\n    };\n\n    return this.composeFrame(toFrameRequest);\n  }\n\n  private clearCanvas(): void {\n    if (this.config.backgroundColor) {\n      this.ctx.fillStyle = this.config.backgroundColor;\n      this.ctx.fillRect(0, 0, this.config.width, this.config.height);\n    } else {\n      this.ctx.clearRect(0, 0, this.config.width, this.config.height);\n    }\n  }\n\n  // private sortLayers(layers: Layer[]): Layer[] {\n  //   return [...layers].sort((a, b) => a.zIndex - b.zIndex);\n  // }\n\n  private async createOutputFrame(timeUs: number): Promise<VideoFrame> {\n    const duration = frameDurationFromFps(this.timelineContext.compositionFps);\n    const frame = new VideoFrame(this.canvas, {\n      timestamp: timeUs,\n      duration,\n      alpha: 'discard',\n      visibleRect: { x: 0, y: 0, width: this.canvas.width, height: this.canvas.height },\n    });\n    return frame;\n  }\n\n  updateConfig(config: Partial<VideoComposeConfig>): void {\n    Object.assign(this.config, this.applyDefaults({ ...this.config, ...config }));\n\n    if (config.width || config.height) {\n      this.canvas.width = this.config.width;\n      this.canvas.height = this.config.height;\n      this.layerRenderer.updateDimensions(this.config.width, this.config.height);\n      this.transitionProcessor.updateDimensions(this.config.width, this.config.height);\n    }\n\n    if (config.enableSmoothing !== undefined) {\n      this.ctx.imageSmoothingEnabled = this.config.enableSmoothing;\n    }\n\n    if (config.timeline) {\n      this.timelineContext = config.timeline;\n    }\n  }\n\n  dispose(): void {\n    this.filterProcessor.clearCache();\n  }\n}\n"],"names":[],"mappings":"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"}