@meframe/core 0.0.2 → 0.0.4

package/dist/stages/compose/LayerRenderer.js

@@ -1,215 +0,0 @@
-class LayerRenderer {
-  ctx;
-  width;
-  height;
-  constructor(ctx, width, height) {
-    this.ctx = ctx;
-    this.width = width;
-    this.height = height;
-    this.ensureHighQualityRendering();
-  }
-  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) {
-        this.applyTransform(layer.transform);
-      }
-      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();
-    }
-  }
-  applyTransform(transform) {
-    const centerX = this.width * (transform.anchorX ?? 0.5);
-    const centerY = this.height * (transform.anchorY ?? 0.5);
-    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);
-    }
-  }
-  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;
-      }
-      if (crop) {
-        this.ctx.drawImage(
-          source,
-          crop.x,
-          crop.y,
-          crop.width,
-          crop.height,
-          0,
-          0,
-          this.width,
-          this.height
-        );
-      } else {
-        this.ctx.drawImage(source, 0, 0, this.width, this.height);
-      }
-    }
-  }
-  async renderTextLayer(layer) {
-    const fontSize = layer.fontSize ?? 16;
-    const fontFamily = layer.fontFamily ?? "sans-serif";
-    const fontWeight = layer.fontWeight ?? "normal";
-    const fontStyle = layer.fontStyle ?? "normal";
-    this.ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
-    this.ctx.fillStyle = layer.color ?? "#000000";
-    this.ctx.textAlign = layer.textAlign ?? "left";
-    this.ctx.textBaseline = layer.verticalAlign ?? "top";
-    if (layer.letterSpacing && typeof this.ctx.letterSpacing !== "undefined") {
-      this.ctx.letterSpacing = `${layer.letterSpacing}px`;
-    }
-    this.ensureHighQualityRendering();
-    const baseX = this.calculateTextX(layer.textAlign);
-    const baseY = this.calculateTextY(layer.verticalAlign, fontSize);
-    const x = Math.round(baseX) + 0.5;
-    const y = Math.round(baseY) + 0.5;
-    if (layer.shadow) {
-      this.ctx.shadowColor = layer.shadow.color;
-      this.ctx.shadowOffsetX = layer.shadow.offsetX;
-      this.ctx.shadowOffsetY = layer.shadow.offsetY;
-      this.ctx.shadowBlur = layer.shadow.blur;
-    }
-    if (layer.strokeColor && layer.strokeWidth && layer.strokeWidth > 0) {
-      this.drawEnhancedStroke(layer.text, x, y, layer.strokeColor, layer.strokeWidth);
-    }
-    this.ctx.fillText(layer.text, x, y);
-    if (layer.shadow) {
-      this.ctx.shadowColor = "transparent";
-      this.ctx.shadowOffsetX = 0;
-      this.ctx.shadowOffsetY = 0;
-      this.ctx.shadowBlur = 0;
-    }
-  }
-  /**
-   * Draw enhanced multi-layer stroke for better text visibility
-   */
-  drawEnhancedStroke(text, x, y, strokeColor, strokeWidth) {
-    this.ctx.save();
-    this.ctx.strokeStyle = strokeColor;
-    this.ctx.lineJoin = "round";
-    this.ctx.lineCap = "round";
-    this.ctx.miterLimit = 2;
-    const layers = [1.1, 1];
-    layers.forEach((multiplier) => {
-      this.ctx.lineWidth = strokeWidth * multiplier;
-      this.ctx.strokeText(text, x, y);
-    });
-    this.ctx.restore();
-  }
-  calculateTextX(align) {
-    switch (align) {
-      case "center":
-        return this.width / 2;
-      case "right":
-        return this.width;
-      default:
-        return 0;
-    }
-  }
-  calculateTextY(align, fontSize = 16) {
-    switch (align) {
-      case "middle":
-        return this.height / 2;
-      case "bottom":
-        return this.height * 0.85;
-      default:
-        return fontSize;
-    }
-  }
-  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

@@ -1 +0,0 @@
-{"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/TransitionProcessor.js

@@ -1,189 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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":"AAMO,MAAM,oBAAoB;AAAA,EACvB;AAAA,EACA;AAAA,EAER,YAAY,OAAe,QAAgB;AACzC,SAAK,QAAQ;AACb,SAAK,SAAS;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,gBAAgB,KAAwC,YAAuC;AAC7F,QAAI,CAAC,cAAc,WAAW,YAAY,EAAG,QAAO;AAEpD,UAAM,WAAW,KAAK,uBAAuB,WAAW,UAAU,WAAW,MAAM;AAEnF,YAAQ,WAAW,MAAA;AAAA,MACjB,KAAK;AACH,eAAO,KAAK,UAAU,KAAK,QAAQ;AAAA,MACrC,KAAK;AACH,eAAO,KAAK,WAAW,KAAK,UAAU,WAAW,SAAS;AAAA,MAC5D,KAAK;AACH,eAAO,KAAK,UAAU,KAAK,UAAU,WAAW,SAAS;AAAA,MAC3D,KAAK;AACH,eAAO,KAAK,UAAU,KAAK,UAAU,WAAW,SAAS;AAAA,MAC3D,KAAK;AACH,eAAO,KAAK,YAAY,KAAK,QAAQ;AAAA,MACvC,KAAK;AACH,eAAO,KAAK,cAAc,KAAK,QAAQ;AAAA,MACzC;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,uBACN,UACA,QACQ;AACR,YAAQ,QAAA;AAAA,MACN,KAAK;AACH,eAAO,WAAW;AAAA,MACpB,KAAK;AACH,eAAO,KAAK,IAAI,aAAa,IAAI;AAAA,MACnC,KAAK;AACH,eAAO,WAAW,MAAM,IAAI,WAAW,WAAW,IAAI,KAAK,IAAI,KAAK,WAAW,GAAG,CAAC,IAAI;AAAA,MACzF;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,UAAU,KAAwC,UAA2B;AACnF,QAAI,cAAc;AAClB,WAAO;AAAA,EACT;AAAA,EAEQ,WACN,KACA,UACA,WACS;AACT,UAAM,WAAW,IAAI;AAErB,YAAQ,WAAA;AAAA,MACN,KAAK;AACH,YAAI,UAAU,CAAC,KAAK,QAAQ,UAAU,CAAC;AACvC;AAAA,MACF,KAAK;AACH,YAAI,UAAU,KAAK,QAAQ,UAAU,CAAC;AACtC;AAAA,MACF,KAAK;AACH,YAAI,UAAU,GAAG,CAAC,KAAK,SAAS,QAAQ;AACxC;AAAA,MACF,KAAK;AACH,YAAI,UAAU,GAAG,KAAK,SAAS,QAAQ;AACvC;AAAA,MACF;AACE,YAAI,UAAU,CAAC,KAAK,QAAQ,UAAU,CAAC;AAAA,IAAA;AAG3C,WAAO;AAAA,EACT;AAAA,EAEQ,UACN,KACA,UACA,WACS;AACT,QAAI,KAAA;AACJ,QAAI,UAAA;AAEJ,YAAQ,WAAA;AAAA,MACN,KAAK;AACH,YAAI,KAAK,GAAG,GAAG,KAAK,QAAQ,UAAU,KAAK,MAAM;AACjD;AAAA,MACF,KAAK;AACH,YAAI,KAAK,KAAK,SAAS,IAAI,WAAW,GAAG,KAAK,QAAQ,UAAU,KAAK,MAAM;AAC3E;AAAA,MACF,KAAK;AACH,YAAI,KAAK,GAAG,GAAG,KAAK,OAAO,KAAK,SAAS,QAAQ;AACjD;AAAA,MACF,KAAK;AACH,YAAI,KAAK,GAAG,KAAK,UAAU,IAAI,WAAW,KAAK,OAAO,KAAK,SAAS,QAAQ;AAC5E;AAAA,MACF;AACE,YAAI,KAAK,GAAG,GAAG,KAAK,QAAQ,UAAU,KAAK,MAAM;AAAA,IAAA;AAGrD,QAAI,KAAA;AACJ,WAAO;AAAA,EACT;AAAA,EAEQ,UACN,KACA,UACA,WACS;AACT,UAAM,QAAQ,cAAc,QAAQ,KAAK,IAAI,YAAY;AACzD,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,UAAU,KAAK,SAAS;AAE9B,QAAI,UAAU,SAAS,OAAO;AAC9B,QAAI,MAAM,OAAO,KAAK;AACtB,QAAI,UAAU,CAAC,SAAS,CAAC,OAAO;AAEhC,QAAI,cAAc,OAAO;AACvB,UAAI,cAAc;AAAA,IACpB;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,YAAY,KAAwC,UAA2B;AACrF,UAAM,YAAY,IAAI,YAAY,KAAK,KAAK;AAC5C,UAAM,UAAU,KAAK,QAAQ;AAC7B,UAAM,UAAU,KAAK,SAAS;AAE9B,QAAI,UAAU,SAAS,OAAO;AAC9B,QAAI,OAAO,QAAQ;AACnB,QAAI,UAAU,CAAC,SAAS,CAAC,OAAO;AAEhC,WAAO;AAAA,EACT;AAAA,EAEQ,cAAc,KAAwC,UAA2B;AAEvF,QAAI,cAAc;AAClB,QAAI,2BAA2B;AAC/B,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,qBAAqB,YAA8B,QAA2C;AAC5F,UAAM,MAAM,OAAO,WAAW,IAAI;AAClC,QAAI,CAAC,IAAK,QAAO;AAEjB,UAAM,YAAY,IAAI,gBAAgB,KAAK,OAAO,KAAK,MAAM;AAC7D,UAAM,OAAO,UAAU;AACvB,UAAM,WAAW,KAAK,uBAAuB,WAAW,UAAU,WAAW,MAAM;AAGnF,aAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,eAAS,IAAI,GAAG,IAAI,KAAK,OAAO,KAAK;AACnC,cAAM,SAAS,IAAI,KAAK,QAAQ,KAAK;AACrC,YAAI,QAAQ;AAEZ,gBAAQ,WAAW,MAAA;AAAA,UACjB,KAAK;AACH,oBAAQ,KAAK,mBAAmB,GAAG,GAAG,UAAU,WAAW,SAAS;AACpE;AAAA,UACF,KAAK;AAEH,oBAAQ,KAAK,OAAA,IAAW,WAAW,MAAM;AACzC;AAAA,UACF;AACE,oBAAQ,KAAK,MAAM,MAAM,QAAQ;AAAA,QAAA;AAGrC,aAAK,KAAK,IAAI;AACd,aAAK,QAAQ,CAAC,IAAI;AAClB,aAAK,QAAQ,CAAC,IAAI;AAClB,aAAK,QAAQ,CAAC,IAAI;AAAA,MACpB;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEQ,mBACN,GACA,GACA,UACA,WACQ;AACR,QAAI,WAAW;AAEf,YAAQ,WAAA;AAAA,MACN,KAAK;AACH,mBAAW,IAAI,KAAK;AACpB;AAAA,MACF,KAAK;AACH,mBAAW,IAAI,IAAI,KAAK;AACxB;AAAA,MACF,KAAK;AACH,mBAAW,IAAI,KAAK;AACpB;AAAA,MACF,KAAK;AACH,mBAAW,IAAI,IAAI,KAAK;AACxB;AAAA,MACF,KAAK,MAAM;AAET,cAAM,KAAK,IAAI,KAAK,QAAQ;AAC5B,cAAM,KAAK,IAAI,KAAK,SAAS;AAC7B,cAAM,UAAU,KAAK,KAAK,KAAK,QAAQ,KAAK,QAAQ,KAAK,SAAS,KAAK,MAAM,IAAI;AACjF,mBAAW,KAAK,KAAK,KAAK,KAAK,KAAK,EAAE,IAAI;AAC1C;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AAEV,cAAM,MAAM,IAAI,KAAK,QAAQ;AAC7B,cAAM,MAAM,IAAI,KAAK,SAAS;AAC9B,cAAM,WAAW,KAAK,KAAK,KAAK,QAAQ,KAAK,QAAQ,KAAK,SAAS,KAAK,MAAM,IAAI;AAClF,mBAAW,IAAI,KAAK,KAAK,MAAM,MAAM,MAAM,GAAG,IAAI;AAClD;AAAA,MACF;AAAA,MACA;AACE,mBAAW,IAAI,KAAK;AAAA,IAAA;AAGxB,WAAO,WAAW,WAAW,MAAM;AAAA,EACrC;AAAA,EAEA,iBAAiB,OAAe,QAAsB;AACpD,SAAK,QAAQ;AACb,SAAK,SAAS;AAAA,EAChB;AACF;"}

package/dist/stages/compose/VideoComposer.js

@@ -1,186 +0,0 @@
-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,
-        clipDurationUs: Infinity,
-        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 () => {
-          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

@@ -1 +0,0 @@
-{"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        clipDurationUs: Infinity,\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 () => {\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":";;;;AAsBO,MAAM,cAAc;AAAA,EAChB;AAAA,EACA;AAAA,EAED;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAER,YAAY,QAA4B;AACtC,SAAK,SAAS,KAAK,cAAc,MAAM;AACvC,SAAK,SAAS,IAAI,gBAAgB,KAAK,OAAO,OAAO,KAAK,OAAO,MAAM;AAEvE,UAAM,MAAM,KAAK,OAAO,WAAW,MAAM;AAAA,MACvC,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,oBAAoB;AAAA,MACpB,YAAY;AAAA,IAAA,CACb;AAED,QAAI,CAAC,KAAK;AACR,YAAM,IAAI,MAAM,uCAAuC;AAAA,IACzD;AAEA,SAAK,MAAM;AACX,SAAK,IAAI,wBAAwB,KAAK,OAAO;AAC7C,SAAK,IAAI,wBAAwB;AAEjC,SAAK,gBAAgB,IAAI,cAAc,KAAK,KAAK,OAAO,OAAO,KAAK,OAAO,MAAM;AACjF,SAAK,sBAAsB,IAAI,oBAAoB,KAAK,OAAO,OAAO,KAAK,OAAO,MAAM;AACxF,SAAK,kBAAkB,IAAI,gBAAA;AAC3B,SAAK,kBAAkB,KAAK,OAAO;AAAA,EACrC;AAAA,EAEQ,cAAc,QAA0D;AAC9E,WAAO;AAAA,MACL,OAAO,OAAO,SAAS;AAAA,MACvB,QAAQ,OAAO,UAAU;AAAA,MACzB,KAAK,OAAO,OAAO;AAAA,MACnB,iBAAiB,OAAO,mBAAmB;AAAA,MAC3C,UAAU,OAAO,YAAY;AAAA,MAC7B,iBAAiB,OAAO,mBAAmB;AAAA,MAC3C,4BAA4B,OAAO,8BAA8B;AAAA,MACjE,UAAU,OAAO,YAAY;AAAA,MAC7B,oBAAoB,OAAO,sBAAsB;AAAA,MACjD,qBAAqB,OAAO,uBAAuB;AAAA,MACnD,WAAW,OAAO,aAAa;AAAA,MAC/B,UAAU,OAAO,YAAY;AAAA,QAC3B,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,aAAa;AAAA,QACb,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,MAAA;AAAA,IAClB;AAAA,EAEJ;AAAA,EAEA,cAAc,cAAmD;AAC/D,QAAI,cAAc,WAAW,UAAU;AACrC,WAAK,kBAAkB,aAAa,WAAW;AAAA,IACjD;AAIA,UAAM,SAAS,IAAI;AAAA,MACjB;AAAA,QACE,WAAW,OAAO,SAAS,eAAe;AAExC,gBAAM,SAAS,MAAM,KAAK,aAAa,OAAO;AAC9C,qBAAW,QAAQ;AAAA,YACjB,OAAO,OAAO;AAAA,YACd,UAAU,OAAO;AAAA,UAAA,CAClB;AAAA,QACH;AAAA,QAEA,OAAO,YAAY;AACjB,eAAK,gBAAgB,WAAA;AAAA,QACvB;AAAA,MAAA;AAAA,MAEF;AAAA,QACE,eAAe,KAAK,OAAO;AAAA,MAAA;AAAA,MAE7B;AAAA,QACE,eAAe,KAAK,OAAO;AAAA,MAAA;AAAA,IAC7B;AAGF,WAAO;AAAA,MACL,eAAe,OAAO;AAAA,MACtB,aAAa,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EAEA,MAAM,aAAa,SAAiD;AAClE,QAAI,QAAQ,OAAO,SAAS,KAAK,OAAO,WAAW;AACjD,YAAM,IAAI,MAAM,oBAAoB,QAAQ,OAAO,MAAM,MAAM,KAAK,OAAO,SAAS,EAAE;AAAA,IACxF;AAEA,SAAK,YAAA;AAGL,QAAI,QAAQ,YAAY;AACtB,WAAK,IAAI,KAAA;AACT,WAAK,oBAAoB,gBAAgB,KAAK,KAAK,QAAQ,UAAU;AAAA,IACvE;AAEA,eAAW,SAAS,QAAQ,QAAQ;AAClC,UAAI,CAAC,MAAM,WAAW,MAAM,WAAW,GAAG;AAExC,YAAK,MAAc,SAAS,SAAS;AACnC,gBAAM,KAAM,MAAqB;AACjC,cAAI,QAAA;AAAA,QACN;AACA;AAAA,MACF;AAEA,UAAI;AACF,YAAI,MAAM,WAAW,MAAM,QAAQ,SAAS,GAAG;AAC7C,eAAK,IAAI,KAAA;AACT,eAAK,gBAAgB,aAAa,KAAK,KAAK,MAAM,OAAO;AAAA,QAC3D;AAEA,cAAM,KAAK,cAAc,YAAY,KAAK;AAE1C,YAAI,MAAM,WAAW,MAAM,QAAQ,SAAS,GAAG;AAC7C,eAAK,IAAI,QAAA;AAAA,QACX;AAAA,MACF,UAAA;AAEE,YAAK,MAAc,SAAS,SAAS;AACnC,gBAAM,KAAM,MAAqB;AACjC,cAAI,QAAA;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAEA,QAAI,QAAQ,YAAY;AACtB,WAAK,IAAI,QAAA;AAAA,IACX;AAEA,UAAM,QAAQ,MAAM,KAAK,kBAAkB,QAAQ,MAAM;AAEzD,UAAM,YAAa,QAAgB;AACnC,UAAM,aAAc,QAAgB;AAEpC,WAAO;AAAA,MACL;AAAA,MACA,QAAQ,QAAQ;AAAA,MAChB,UAAU;AAAA,QACR,YAAY,QAAQ,OAAO;AAAA,QAC3B,YAAY;AAAA,QACZ,gBACE,KAAK,OAAO,8BAA8B,KAAK,OAAO,aAAa;AAAA,QACrE,GAAI,OAAO,cAAc,YAAY,EAAE,UAAA;AAAA,QACvC,GAAI,OAAO,eAAe,aAAa,EAAE,WAAA;AAAA,MAAW;AAAA,IACtD;AAAA,EAEJ;AAAA,EAEA,MAAM,kBACJ,aACA,WACA,YACwB;AACxB,UAAM,KAAK,aAAa,WAAW;AAEnC,UAAM,iBAAiB;AAAA,MACrB,GAAG;AAAA,MACH;AAAA,IAAA;AAGF,WAAO,KAAK,aAAa,cAAc;AAAA,EACzC;AAAA,EAEQ,cAAoB;AAC1B,QAAI,KAAK,OAAO,iBAAiB;AAC/B,WAAK,IAAI,YAAY,KAAK,OAAO;AACjC,WAAK,IAAI,SAAS,GAAG,GAAG,KAAK,OAAO,OAAO,KAAK,OAAO,MAAM;AAAA,IAC/D,OAAO;AACL,WAAK,IAAI,UAAU,GAAG,GAAG,KAAK,OAAO,OAAO,KAAK,OAAO,MAAM;AAAA,IAChE;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAMA,MAAc,kBAAkB,QAAqC;AACnE,UAAM,WAAW,qBAAqB,KAAK,gBAAgB,cAAc;AACzE,UAAM,QAAQ,IAAI,WAAW,KAAK,QAAQ;AAAA,MACxC,WAAW;AAAA,MACX;AAAA,MACA,OAAO;AAAA,MACP,aAAa,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,KAAK,OAAO,OAAO,QAAQ,KAAK,OAAO,OAAA;AAAA,IAAO,CACjF;AACD,WAAO;AAAA,EACT;AAAA,EAEA,aAAa,QAA2C;AACtD,WAAO,OAAO,KAAK,QAAQ,KAAK,cAAc,EAAE,GAAG,KAAK,QAAQ,GAAG,OAAA,CAAQ,CAAC;AAE5E,QAAI,OAAO,SAAS,OAAO,QAAQ;AACjC,WAAK,OAAO,QAAQ,KAAK,OAAO;AAChC,WAAK,OAAO,SAAS,KAAK,OAAO;AACjC,WAAK,cAAc,iBAAiB,KAAK,OAAO,OAAO,KAAK,OAAO,MAAM;AACzE,WAAK,oBAAoB,iBAAiB,KAAK,OAAO,OAAO,KAAK,OAAO,MAAM;AAAA,IACjF;AAEA,QAAI,OAAO,oBAAoB,QAAW;AACxC,WAAK,IAAI,wBAAwB,KAAK,OAAO;AAAA,IAC/C;AAEA,QAAI,OAAO,UAAU;AACnB,WAAK,kBAAkB,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EAEA,UAAgB;AACd,SAAK,gBAAgB,WAAA;AAAA,EACvB;AACF;"}