@meframe/core 0.0.1 → 0.0.3

package/dist/workers/stages/compose/video-compose.worker.js

@@ -0,0 +1,1209 @@
+import { W as WorkerChannel, a as WorkerMessageType, b as WorkerState } from "../../WorkerChannel.js";
+const MICROSECONDS_PER_SECOND = 1e6;
+const DEFAULT_FPS = 30;
+function normalizeFps(value) {
+  if (!Number.isFinite(value) || value <= 0) {
+    return DEFAULT_FPS;
+  }
+  return value;
+}
+function frameDurationFromFps(fps) {
+  const normalized = normalizeFps(fps);
+  const duration = MICROSECONDS_PER_SECOND / normalized;
+  return Math.max(Math.round(duration), 1);
+}
+function frameIndexFromTimestamp(baseTimestampUs, timestampUs, fps, strategy = "nearest") {
+  const frameDurationUs = frameDurationFromFps(fps);
+  if (frameDurationUs <= 0) {
+    return 0;
+  }
+  const delta = timestampUs - baseTimestampUs;
+  const rawIndex = delta / frameDurationUs;
+  if (!Number.isFinite(rawIndex)) {
+    return 0;
+  }
+  switch (strategy) {
+    case "floor":
+      return Math.floor(rawIndex);
+    case "ceil":
+      return Math.ceil(rawIndex);
+    default:
+      return Math.round(rawIndex);
+  }
+}
+function quantizeTimestampToFrame(timestampUs, baseTimestampUs, fps, strategy = "nearest") {
+  const frameDurationUs = frameDurationFromFps(fps);
+  const index = frameIndexFromTimestamp(baseTimestampUs, timestampUs, fps, strategy);
+  return baseTimestampUs + index * frameDurationUs;
+}
+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();
+  }
+}
+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;
+  }
+}
+class FilterProcessor {
+  filterCache = /* @__PURE__ */ new Map();
+  /**
+   * Apply filters to canvas context
+   * Combines multiple filters into a single CSS filter string for performance
+   */
+  applyFilters(ctx, filters) {
+    if (!filters || filters.length === 0) {
+      ctx.filter = "none";
+      return;
+    }
+    const cacheKey = this.generateCacheKey(filters);
+    let filterString = this.filterCache.get(cacheKey);
+    if (!filterString) {
+      filterString = this.buildFilterString(filters);
+      this.filterCache.set(cacheKey, filterString);
+    }
+    ctx.filter = filterString;
+  }
+  /**
+   * Build CSS filter string from filter array
+   */
+  buildFilterString(filters) {
+    const filterStrings = [];
+    for (const filter of filters) {
+      const filterStr = this.buildSingleFilter(filter);
+      if (filterStr) {
+        filterStrings.push(filterStr);
+      }
+    }
+    return filterStrings.length > 0 ? filterStrings.join(" ") : "none";
+  }
+  buildSingleFilter(filter) {
+    switch (filter.type) {
+      case "blur":
+        return `blur(${filter.value ?? 0}px)`;
+      case "brightness":
+        return `brightness(${filter.value ?? 1})`;
+      case "contrast":
+        return `contrast(${filter.value ?? 1})`;
+      case "grayscale":
+        return `grayscale(${filter.value ?? 0})`;
+      case "hue-rotate":
+        return `hue-rotate(${filter.value ?? 0}deg)`;
+      case "saturate":
+        return `saturate(${filter.value ?? 1})`;
+      case "sepia":
+        return `sepia(${filter.value ?? 0})`;
+      case "custom":
+        return this.buildCustomFilter(filter);
+      default:
+        console.warn(`Unknown filter type: ${filter.type}`);
+        return null;
+    }
+  }
+  /**
+   * Build custom filter from params
+   */
+  buildCustomFilter(filter) {
+    if (!filter.params) return null;
+    const { type, ...params } = filter.params;
+    switch (type) {
+      case "drop-shadow":
+        return `drop-shadow(${params.offsetX}px ${params.offsetY}px ${params.blur}px ${params.color})`;
+      case "opacity":
+        return `opacity(${params.value})`;
+      case "invert":
+        return `invert(${params.value})`;
+      default:
+        return null;
+    }
+  }
+  /**
+   * Apply color matrix transformation for advanced effects
+   * This allows for more complex color manipulations than CSS filters
+   */
+  applyColorMatrix(imageData, matrix) {
+    if (matrix.length !== 20) {
+      throw new Error("Color matrix must have 20 values (4x5 matrix)");
+    }
+    const data = imageData.data;
+    const length = data.length;
+    for (let i = 0; i < length; i += 4) {
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+      const a = data[i + 3];
+      const m = matrix;
+      data[i] = this.clamp(r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255);
+      data[i + 1] = this.clamp(r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255);
+      data[i + 2] = this.clamp(r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255);
+      data[i + 3] = this.clamp(r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255);
+    }
+    return imageData;
+  }
+  /**
+   * Predefined color matrices for common effects
+   */
+  getPresetMatrix(preset) {
+    switch (preset) {
+      case "vintage":
+        return [
+          0.393,
+          0.769,
+          0.189,
+          0,
+          0,
+          0.349,
+          0.686,
+          0.168,
+          0,
+          0,
+          0.272,
+          0.534,
+          0.131,
+          0,
+          0,
+          0,
+          0,
+          0,
+          1,
+          0
+        ];
+      case "noir":
+        return [
+          0.25,
+          0.25,
+          0.25,
+          0,
+          0,
+          0.25,
+          0.25,
+          0.25,
+          0,
+          0,
+          0.25,
+          0.25,
+          0.25,
+          0,
+          0,
+          0,
+          0,
+          0,
+          1,
+          0
+        ];
+      case "cool":
+        return [0.8, 0, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 0, 1, 0];
+      case "warm":
+        return [1.2, 0, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 0, 1, 0];
+      default:
+        return null;
+    }
+  }
+  /**
+   * Apply Gaussian blur manually (for cases where CSS filter is not enough)
+   */
+  applyGaussianBlur(imageData, radius) {
+    const output = new ImageData(
+      new Uint8ClampedArray(imageData.data),
+      imageData.width,
+      imageData.height
+    );
+    const width = imageData.width;
+    const height = imageData.height;
+    const data = imageData.data;
+    const outData = output.data;
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        let r = 0, g = 0, b = 0, a = 0;
+        let count = 0;
+        for (let dx = -radius; dx <= radius; dx++) {
+          const nx = Math.min(Math.max(x + dx, 0), width - 1);
+          const idx2 = (y * width + nx) * 4;
+          r += data[idx2];
+          g += data[idx2 + 1];
+          b += data[idx2 + 2];
+          a += data[idx2 + 3];
+          count++;
+        }
+        const idx = (y * width + x) * 4;
+        outData[idx] = r / count;
+        outData[idx + 1] = g / count;
+        outData[idx + 2] = b / count;
+        outData[idx + 3] = a / count;
+      }
+    }
+    for (let x = 0; x < width; x++) {
+      for (let y = 0; y < height; y++) {
+        let r = 0, g = 0, b = 0, a = 0;
+        let count = 0;
+        for (let dy = -radius; dy <= radius; dy++) {
+          const ny = Math.min(Math.max(y + dy, 0), height - 1);
+          const idx2 = (ny * width + x) * 4;
+          r += outData[idx2];
+          g += outData[idx2 + 1];
+          b += outData[idx2 + 2];
+          a += outData[idx2 + 3];
+          count++;
+        }
+        const idx = (y * width + x) * 4;
+        data[idx] = r / count;
+        data[idx + 1] = g / count;
+        data[idx + 2] = b / count;
+        data[idx + 3] = a / count;
+      }
+    }
+    return imageData;
+  }
+  clamp(value) {
+    return Math.min(255, Math.max(0, Math.round(value)));
+  }
+  generateCacheKey(filters) {
+    return filters.map((f) => `${f.type}:${f.value ?? "default"}`).join("|");
+  }
+  clearCache() {
+    this.filterCache.clear();
+  }
+  getCacheSize() {
+    return this.filterCache.size;
+  }
+}
+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();
+  }
+}
+function resolveActiveLayers(layers, timestamp, _frame) {
+  return layers.filter((layer) => {
+    if (layer.status !== "ready") {
+      return false;
+    }
+    return layer.activeRanges.some(
+      (range) => timestamp >= range.startUs && timestamp < range.endUs
+    );
+  });
+}
+function materializeLayer(layer, frame) {
+  const baseLayer = {
+    id: layer.layerId,
+    type: layer.type,
+    zIndex: layer.zIndex ?? 0,
+    visible: true,
+    opacity: layer.opacity ?? 1
+  };
+  if (layer.type === "video") {
+    return {
+      ...baseLayer,
+      type: "video",
+      videoFrame: frame
+    };
+  }
+  if (layer.type === "text") {
+    const payload = layer.payload;
+    return {
+      ...baseLayer,
+      type: "text",
+      text: payload.text,
+      fontFamily: payload.fontFamily,
+      fontSize: payload.fontSize,
+      fontWeight: payload.fontWeight,
+      color: payload.color,
+      strokeColor: payload.strokeColor,
+      strokeWidth: payload.strokeWidth,
+      lineHeight: payload.lineHeight,
+      textAlign: payload.align,
+      verticalAlign: "bottom"
+      // Subtitles positioned at bottom
+    };
+  }
+  if (layer.type === "image") {
+    const payload = layer.payload;
+    const source = payload.bitmapHandle ?? null;
+    if (source) {
+      return {
+        ...baseLayer,
+        type: "image",
+        source
+      };
+    }
+  }
+  return baseLayer;
+}
+class VideoComposeWorker {
+  channel;
+  composer = null;
+  composeStream = null;
+  downstreamPorts = /* @__PURE__ */ new Map();
+  upstreamPorts = /* @__PURE__ */ new Map();
+  instructionRegistry = /* @__PURE__ */ new Map();
+  pendingReplay = /* @__PURE__ */ new Map();
+  streamState = /* @__PURE__ */ new Map();
+  constructor() {
+    this.channel = new WorkerChannel(self, {
+      name: "VideoComposeWorker",
+      timeout: 3e4
+    });
+    this.setupHandlers();
+  }
+  setupHandlers() {
+    this.channel.registerHandler("configure", this.handleConfigure.bind(this));
+    this.channel.registerHandler("connect", this.handleConnect.bind(this));
+    this.channel.registerHandler("flush", this.handleFlush.bind(this));
+    this.channel.registerHandler("get_stats", this.handleGetStats.bind(this));
+    this.channel.registerHandler("install_instructions", this.handleInstallInstructions.bind(this));
+    this.channel.registerHandler("sync_clip", this.handleSyncClip.bind(this));
+    this.channel.registerHandler("dispose_clip", this.handleDisposeClip.bind(this));
+    this.channel.registerHandler(WorkerMessageType.Dispose, this.handleDispose.bind(this));
+  }
+  /**
+   * Unified connect handler used by stream pipeline
+   */
+  async handleConnect(payload) {
+    const { port, direction, clipId = "default" } = payload;
+    if (direction === "upstream") {
+      this.upstreamPorts.set(clipId, port);
+      const channel = new WorkerChannel(port, {
+        name: "VideoCompose-Decode",
+        timeout: 3e4
+      });
+      channel.receiveStream(this.handleReceiveStream.bind(this));
+    }
+    if (direction === "downstream") {
+      this.downstreamPorts.set(clipId, port);
+    }
+    return { success: true };
+  }
+  /**
+   * Configure composer
+   * According to docs/impl/14-config, only reinitialize when initial=true
+   */
+  async handleConfigure(payload) {
+    const { config, initial } = payload;
+    const hasValidDimensions = config.width > 0 && config.height > 0;
+    const hasValidFps = config.fps > 0;
+    if (!hasValidDimensions || !hasValidFps) {
+      throw new Error(
+        `VideoComposeWorker: invalid canvas config width=${config.width}, height=${config.height}, fps=${config.fps}`
+      );
+    }
+    if (initial) {
+      this.channel.state = WorkerState.Ready;
+    }
+    if (initial || !this.composer) {
+      if (this.composer) {
+        this.composer.dispose();
+        this.composeStream = null;
+      }
+      this.composer = new VideoComposer(config);
+    } else {
+      this.composer.updateConfig(config);
+    }
+    this.channel.notify("configured", {
+      config: this.composer.config,
+      initialized: initial || false
+    });
+    return {
+      success: true,
+      config: this.composer.config
+    };
+  }
+  async handleReceiveStream(stream, metadata) {
+    const { clipId = "default" } = metadata || {};
+    if (!this.composer) {
+      console.error("[VideoComposeWorker] Composer not configured");
+      return;
+    }
+    const instruction = this.instructionRegistry.get(clipId);
+    if (!instruction) {
+      console.warn("[VideoComposeWorker] No instructions for clip", clipId);
+      return;
+    }
+    const filteredStream = stream.pipeThrough(
+      new TransformStream({
+        transform: (wrappedFrame, controller) => {
+          try {
+            const frame = wrappedFrame.frame || wrappedFrame;
+            const gopSerial = wrappedFrame.gopSerial;
+            const isKeyframe = wrappedFrame.isKeyframe;
+            const timestamp = frame.timestamp ?? 0;
+            if (this.shouldSkipFrame(clipId, timestamp)) {
+              frame.close();
+              return;
+            }
+            const request = this.buildComposeRequest(clipId, instruction, frame, timestamp);
+            if (!request) {
+              frame.close();
+              return;
+            }
+            request.gopSerial = gopSerial;
+            request.isKeyframe = isKeyframe;
+            controller.enqueue(request);
+          } catch (error) {
+            const frame = wrappedFrame.frame || wrappedFrame;
+            frame?.close?.();
+            throw error;
+          }
+        }
+      })
+    );
+    const { composeStream, cacheStream } = this.composer.createStreams();
+    this.channel.sendStream(cacheStream, metadata);
+    filteredStream.pipeTo(composeStream).catch((error) => {
+      console.error("[VideoComposeWorker] compose stream error", clipId, error);
+    });
+  }
+  // private handleGetStream(): ReadableStream<VideoFrame> | undefined {
+  //   return this.composer?.createStreams()?.cacheStream;
+  // }
+  /**
+   * Flush the composition pipeline
+   */
+  async handleFlush() {
+    try {
+      this.channel.notify("flush_complete", {});
+      return { success: true };
+    } catch (error) {
+      throw {
+        code: "FLUSH_ERROR",
+        message: error.message
+      };
+    }
+  }
+  /**
+   * Get composer statistics
+   */
+  async handleGetStats() {
+    return {
+      configured: this.composer !== null,
+      config: this.composer?.config,
+      streaming: this.composeStream !== null
+    };
+  }
+  /**
+   * Dispose worker and cleanup resources
+   */
+  async handleDispose() {
+    if (this.composer) {
+      this.composer.dispose();
+      this.composer = null;
+    }
+    this.composeStream = null;
+    this.downstreamPorts.get("default")?.close();
+    this.upstreamPorts.get("default")?.close();
+    this.downstreamPorts.clear();
+    this.upstreamPorts.clear();
+    this.channel.state = WorkerState.Disposed;
+    return { success: true };
+  }
+  async handleInstallInstructions(data) {
+    const { clipId, revision } = data;
+    const current = this.instructionRegistry.get(clipId);
+    if (current && current.revision > revision) {
+      return { success: false };
+    }
+    this.instructionRegistry.set(clipId, data);
+    return { success: true };
+  }
+  async handleSyncClip(payload) {
+    const { clipId, revision, range } = payload;
+    const current = this.instructionRegistry.get(clipId);
+    if (!current || current.revision > revision) {
+      return { success: false };
+    }
+    this.pendingReplay.set(clipId, { ...range, revision });
+    this.channel.notify("sync_ack", { clipId, revision });
+    return { success: true };
+  }
+  async handleDisposeClip(payload) {
+    const { clipId } = payload;
+    this.instructionRegistry.delete(clipId);
+    this.pendingReplay.delete(clipId);
+    this.downstreamPorts.get(clipId)?.close();
+    this.upstreamPorts.get(clipId)?.close();
+    this.downstreamPorts.delete(clipId);
+    this.upstreamPorts.delete(clipId);
+    return { success: true };
+  }
+  /**
+   * Check if frame should be skipped (outside dirty range)
+   * Returns true if frame is NOT in the dirty range and should use cached version
+   */
+  shouldSkipFrame(clipId, timestamp) {
+    const dirtyRange = this.pendingReplay.get(clipId);
+    if (!dirtyRange) {
+      return false;
+    }
+    if (timestamp >= dirtyRange.startUs && timestamp <= dirtyRange.endUs) {
+      return false;
+    }
+    if (timestamp > dirtyRange.endUs) {
+      this.pendingReplay.delete(clipId);
+    }
+    return true;
+  }
+  buildComposeRequest(clipId, instruction, frame, _timestamp) {
+    const normalizedTime = this.computeTimelineTimestamp(clipId, frame, instruction.baseConfig);
+    const clipStartUs = instruction.baseConfig.timeline?.clipStartUs ?? 0;
+    const clipDurationUs = instruction.baseConfig.timeline?.clipDurationUs ?? Infinity;
+    const clipEndUs = clipStartUs + clipDurationUs;
+    if (normalizedTime < clipStartUs || normalizedTime >= clipEndUs) {
+      return null;
+    }
+    const clipRelativeTime = normalizedTime - clipStartUs;
+    const activeLayers = resolveActiveLayers(instruction.layers, clipRelativeTime);
+    if (!activeLayers.length) {
+      return null;
+    }
+    const layers = activeLayers.map((layer) => materializeLayer(layer, frame));
+    return {
+      timeUs: normalizedTime,
+      layers,
+      transition: VideoComposeWorker.buildTransition(
+        instruction.transitions,
+        clipRelativeTime,
+        instruction.baseConfig.timeline
+      )
+    };
+  }
+  static buildTransition(transitions, timeUs, _timeline) {
+    const entry = transitions.find((transition) => {
+      const { startUs, endUs } = transition.range;
+      return timeUs >= startUs && timeUs < endUs;
+    });
+    if (!entry) {
+      return void 0;
+    }
+    const durationUs = entry.range.endUs - entry.range.startUs;
+    const progress = durationUs > 0 ? (timeUs - entry.range.startUs) / durationUs : 0;
+    return {
+      type: entry.params.type,
+      progress: Math.min(Math.max(progress, 0), 1),
+      easing: entry.params.easing,
+      params: entry.params.payload,
+      direction: entry.params.payload?.direction
+    };
+  }
+  computeTimelineTimestamp(clipId, frame, config) {
+    const key = clipId;
+    let state = this.streamState.get(key);
+    if (!state) {
+      state = {
+        baseTimestamp: null,
+        lastSourceTimestamp: null,
+        nextFrameIndex: 0
+      };
+      this.streamState.set(key, state);
+    }
+    const timeline = config.timeline;
+    if (!timeline) {
+      const ts = frame.timestamp ?? 0;
+      state.lastSourceTimestamp = frame.timestamp ?? null;
+      return ts;
+    }
+    const { clipStartUs, compositionFps } = timeline;
+    const sourceTimestamp = frame.timestamp ?? null;
+    if (sourceTimestamp !== null && state.lastSourceTimestamp !== null && sourceTimestamp < state.lastSourceTimestamp) {
+      state.baseTimestamp = null;
+      state.nextFrameIndex = 0;
+    }
+    if (state.baseTimestamp === null) {
+      state.baseTimestamp = sourceTimestamp ?? 0;
+      state.nextFrameIndex = 0;
+      if (state.baseTimestamp > 1e3) {
+        console.warn(
+          `[VideoComposeWorker] First frame timestamp is ${state.baseTimestamp}us, expected ~0. Check MP4Demuxer normalization.`
+        );
+      }
+    }
+    const frameDuration = frameDurationFromFps(compositionFps);
+    let frameIndex = state.nextFrameIndex;
+    if (sourceTimestamp !== null) {
+      const approxIndex = frameIndexFromTimestamp(
+        state.baseTimestamp,
+        sourceTimestamp,
+        compositionFps,
+        "nearest"
+      );
+      frameIndex = Math.max(frameIndex, approxIndex);
+    }
+    const rawTimeline = clipStartUs + frameIndex * frameDuration;
+    const timelineTime = quantizeTimestampToFrame(
+      rawTimeline,
+      clipStartUs,
+      compositionFps,
+      "nearest"
+    );
+    state.nextFrameIndex = frameIndex + 1;
+    state.lastSourceTimestamp = sourceTimestamp;
+    return timelineTime;
+  }
+}
+const worker = new VideoComposeWorker();
+self.addEventListener("beforeunload", () => {
+  worker["handleDispose"]();
+});
+const videoCompose_worker = null;
+export {
+  VideoComposeWorker,
+  videoCompose_worker as default
+};
+//# sourceMappingURL=video-compose.worker.js.map