@meframe/core 0.0.29 → 0.0.30-beta

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(\n    ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n    transition: TransitionEffect\n  ): 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(\n    ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n    progress: number\n  ): boolean {\n    ctx.globalAlpha = progress;\n    return true;\n  }\n\n  private applySlide(\n    ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\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 | CanvasRenderingContext2D,\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 | CanvasRenderingContext2D,\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(\n    ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n    progress: number\n  ): 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(\n    ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n    progress: number\n  ): 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

@@ -5,8 +5,10 @@ import { ClipInstructionSet } from './instructions';
  * VideoComposer - Main visual composition orchestrator
  */
 export declare class VideoComposer {
-    readonly config: Required<VideoComposeConfig>;
-    readonly canvas: OffscreenCanvas;
+    readonly config: Omit<Required<VideoComposeConfig>, 'externalCanvas'> & {
+        externalCanvas?: HTMLCanvasElement | OffscreenCanvas;
+    };
+    readonly canvas: OffscreenCanvas | HTMLCanvasElement;
     private ctx;
     private layerRenderer;
     private transitionProcessor;

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

@@ -1 +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;AAIjB,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AASpD;;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,CAAS;gBAEpB,MAAM,EAAE,kBAAkB;IAgCtC,OAAO,CAAC,aAAa;IAwBrB,aAAa,CAAC,YAAY,CAAC,EAAE,kBAAkB,GAAG,eAAe,CAAC,cAAc,EAAE,UAAU,CAAC;IA2BvF,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC;IAqD7D,iBAAiB,CACrB,WAAW,EAAE,cAAc,EAC3B,SAAS,EAAE,cAAc,EACzB,UAAU,EAAE,gBAAgB,GAC3B,OAAO,CAAC,aAAa,CAAC;IAWzB,OAAO,CAAC,WAAW;YAaL,iBAAiB;YAUjB,SAAS;IAkBvB,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,IAAI;IAuBvD,OAAO,IAAI,IAAI;CAGhB"}
+{"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;AAIjB,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAapD;;GAEG;AACH,qBAAa,aAAa;IACxB,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,GAAG;QACtE,cAAc,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;KACtD,CAAC;IACF,QAAQ,CAAC,MAAM,EAAE,eAAe,GAAG,iBAAiB,CAAC;IAErD,OAAO,CAAC,GAAG,CAA+D;IAC1E,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,mBAAmB,CAAsB;IACjD,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,eAAe,CAAS;gBAEpB,MAAM,EAAE,kBAAkB;IAyCtC,OAAO,CAAC,aAAa;IA8BrB,aAAa,CAAC,YAAY,CAAC,EAAE,kBAAkB,GAAG,eAAe,CAAC,cAAc,EAAE,UAAU,CAAC;IA6BvF,YAAY,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC;IA2E7D,iBAAiB,CACrB,WAAW,EAAE,cAAc,EAC3B,SAAS,EAAE,cAAc,EACzB,UAAU,EAAE,gBAAgB,GAC3B,OAAO,CAAC,aAAa,CAAC;IAWzB,OAAO,CAAC,WAAW;YAaL,iBAAiB;YAUjB,SAAS;IAkBvB,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,kBAAkB,CAAC,GAAG,IAAI;IAuBvD,OAAO,IAAI,IAAI;CAGhB"}

package/dist/stages/compose/VideoComposer.js

@@ -0,0 +1,229 @@
+import { LayerRenderer } from "./LayerRenderer.js";
+import { TransitionProcessor } from "./TransitionProcessor.js";
+import { FilterProcessor } from "./FilterProcessor.js";
+const closeLayerFrame = (layer) => {
+  if (layer.type === "video") {
+    const vf = layer.videoFrame;
+    if (vf?.close) {
+      vf.close();
+    }
+  }
+};
+class VideoComposer {
+  config;
+  canvas;
+  ctx;
+  layerRenderer;
+  transitionProcessor;
+  filterProcessor;
+  frameDurationUs;
+  // Cached frame duration
+  constructor(config) {
+    this.config = this.applyDefaults(config);
+    this.frameDurationUs = Math.round(1e6 / this.config.fps);
+    if (config.externalCanvas) {
+      this.canvas = config.externalCanvas;
+      this.ctx = this.canvas.getContext("2d", {
+        alpha: true,
+        desynchronized: true,
+        willReadFrequently: false,
+        colorSpace: "srgb"
+      });
+    } else {
+      this.canvas = new OffscreenCanvas(this.config.width, this.config.height);
+      this.ctx = this.canvas.getContext("2d", {
+        alpha: true,
+        desynchronized: true,
+        willReadFrequently: false,
+        colorSpace: "srgb"
+      });
+    }
+    if (!this.ctx) {
+      throw new Error("Failed to create 2D rendering context");
+    }
+    this.ctx.imageSmoothingEnabled = this.config.enableSmoothing;
+    this.loadFonts();
+    this.ctx.imageSmoothingQuality = "high";
+    this.layerRenderer = new LayerRenderer(
+      this.ctx,
+      this.config.width,
+      this.config.height,
+      this.config.fps
+    );
+    this.transitionProcessor = new TransitionProcessor(this.config.width, this.config.height);
+    this.filterProcessor = new FilterProcessor();
+  }
+  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
+      },
+      fonts: config.fonts ?? [],
+      externalCanvas: config.externalCanvas
+    };
+  }
+  createStreams(_instruction) {
+    const stream = new TransformStream(
+      {
+        transform: async (request, controller) => {
+          const result = await this.composeFrame(request);
+          if (result.frame) {
+            controller.enqueue(result.frame);
+          }
+        },
+        flush: async () => {
+          this.filterProcessor.clearCache();
+        }
+      },
+      {
+        highWaterMark: this.config.inputHighWaterMark
+      },
+      {
+        highWaterMark: this.config.outputHighWaterMark
+      }
+    );
+    return stream;
+  }
+  async composeFrame(request) {
+    if (request.layers.length > this.config.maxLayers) {
+      throw new Error(`Too many layers: ${request.layers.length} > ${this.config.maxLayers}`);
+    }
+    this.clearCanvas();
+    const frameDurationUs = 1e6 / this.config.fps;
+    const relativeFrame = Math.floor(request.timeUs / frameDurationUs);
+    this.layerRenderer.setCurrentFrame(relativeFrame);
+    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) {
+        closeLayerFrame(layer);
+        continue;
+      }
+      try {
+        if (layer.rcFrame) {
+          await layer.rcFrame.use(async (frame2) => {
+            layer.videoFrame = frame2;
+            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();
+            }
+          });
+        } else {
+          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();
+          }
+        }
+      } catch (error) {
+        console.error("[VideoComposer] composeFrame error: ", error);
+        closeLayerFrame(layer);
+      }
+    }
+    if (request.transition) {
+      this.ctx.restore();
+    }
+    let frame = null;
+    if (!this.config.externalCanvas) {
+      frame = await this.createOutputFrame(request.timeUs);
+    }
+    return {
+      frame,
+      timeUs: request.timeUs
+    };
+  }
+  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 frame = new VideoFrame(this.canvas, {
+      timestamp: timeUs,
+      duration: this.frameDurationUs,
+      // Use cached duration
+      alpha: "discard",
+      visibleRect: { x: 0, y: 0, width: this.canvas.width, height: this.canvas.height }
+    });
+    return frame;
+  }
+  async loadFonts() {
+    if (!this.config.fonts || this.config.fonts.length === 0) {
+      return;
+    }
+    for (const font of this.config.fonts) {
+      try {
+        const fontFace = new FontFace(font.family, `url(${font.url})`);
+        await fontFace.load();
+        if ("fonts" in self) {
+          self.fonts.add(fontFace);
+        }
+      } catch (error) {
+        console.warn(`[VideoComposer] Failed to load font ${font.family}:`, error);
+      }
+    }
+  }
+  updateConfig(config) {
+    Object.assign(this.config, this.applyDefaults({ ...this.config, ...config }));
+    if (config.fps !== void 0) {
+      this.frameDurationUs = Math.round(1e6 / this.config.fps);
+    }
+    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.fonts) {
+      this.loadFonts();
+    }
+  }
+  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  Layer,\n} from './types';\nimport { LayerRenderer } from './LayerRenderer';\nimport { TransitionProcessor } from './TransitionProcessor';\nimport { FilterProcessor } from './FilterProcessor';\nimport { ClipInstructionSet } from './instructions';\n\nconst closeLayerFrame = (layer: Layer) => {\n  if ((layer as any).type === 'video') {\n    // If layer has videoFrame, close it\n    const vf = (layer as VideoLayer).videoFrame;\n    if (vf?.close) {\n      vf.close();\n    }\n    // RcFrame should not be closed here as it's managed by CacheManager\n  }\n};\n\n/**\n * VideoComposer - Main visual composition orchestrator\n */\nexport class VideoComposer {\n  readonly config: Omit<Required<VideoComposeConfig>, 'externalCanvas'> & {\n    externalCanvas?: HTMLCanvasElement | OffscreenCanvas;\n  };\n  readonly canvas: OffscreenCanvas | HTMLCanvasElement;\n\n  private ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;\n  private layerRenderer: LayerRenderer;\n  private transitionProcessor: TransitionProcessor;\n  private filterProcessor: FilterProcessor;\n  private frameDurationUs: number; // Cached frame duration\n\n  constructor(config: VideoComposeConfig) {\n    this.config = this.applyDefaults(config);\n    this.frameDurationUs = Math.round(1_000_000 / this.config.fps); // Pre-calculate\n\n    if (config.externalCanvas) {\n      this.canvas = config.externalCanvas;\n      this.ctx = this.canvas.getContext('2d', {\n        alpha: true,\n        desynchronized: true,\n        willReadFrequently: false,\n        colorSpace: 'srgb',\n      }) as CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;\n    } else {\n      this.canvas = new OffscreenCanvas(this.config.width, this.config.height);\n      this.ctx = this.canvas.getContext('2d', {\n        alpha: true,\n        desynchronized: true,\n        willReadFrequently: false,\n        colorSpace: 'srgb',\n      }) as OffscreenCanvasRenderingContext2D;\n    }\n\n    if (!this.ctx) {\n      throw new Error('Failed to create 2D rendering context');\n    }\n\n    this.ctx.imageSmoothingEnabled = this.config.enableSmoothing;\n\n    this.loadFonts();\n    this.ctx.imageSmoothingQuality = 'high';\n\n    this.layerRenderer = new LayerRenderer(\n      this.ctx,\n      this.config.width,\n      this.config.height,\n      this.config.fps\n    );\n    this.transitionProcessor = new TransitionProcessor(this.config.width, this.config.height);\n    this.filterProcessor = new FilterProcessor();\n  }\n\n  private applyDefaults(config: VideoComposeConfig): Omit<\n    Required<VideoComposeConfig>,\n    'externalCanvas'\n  > & {\n    externalCanvas?: HTMLCanvasElement | OffscreenCanvas;\n  } {\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      fonts: config.fonts ?? [],\n      externalCanvas: config.externalCanvas,\n    };\n  }\n\n  createStreams(_instruction?: ClipInstructionSet): TransformStream<ComposeRequest, VideoFrame> {\n    // Always create new streams for each clip\n    // ReadableStreams can only be consumed once\n    const stream = new TransformStream<ComposeRequest, VideoFrame>(\n      {\n        transform: async (request, controller) => {\n          // console.log('[VideoComposer] transform', request, controller.desiredSize);\n          const result = await this.composeFrame(request);\n          if (result.frame) {\n            controller.enqueue(result.frame);\n          }\n          // setTimeout(() => {\n          //   result.frame.close();\n          // }, 1000);\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    return stream;\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\n    // Calculate current frame number for animations (relative to clip start)\n    const frameDurationUs = 1_000_000 / this.config.fps;\n    const relativeFrame = Math.floor(request.timeUs / frameDurationUs);\n    this.layerRenderer.setCurrentFrame(relativeFrame);\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        closeLayerFrame(layer);\n        continue;\n      }\n\n      try {\n        // If layer has RcFrame, use it within the rendering scope\n        if ((layer as any).rcFrame) {\n          await (layer as any).rcFrame.use(async (frame: VideoFrame) => {\n            // Set the cloned frame for this render cycle\n            (layer as VideoLayer).videoFrame = frame;\n\n            if (layer.filters && layer.filters.length > 0) {\n              this.ctx.save();\n              this.filterProcessor.applyFilters(this.ctx, layer.filters);\n            }\n            await this.layerRenderer.renderLayer(layer);\n\n            if (layer.filters && layer.filters.length > 0) {\n              this.ctx.restore();\n            }\n          });\n        } else {\n          // Regular layer without RcFrame\n          if (layer.filters && layer.filters.length > 0) {\n            this.ctx.save();\n            this.filterProcessor.applyFilters(this.ctx, layer.filters);\n          }\n          await this.layerRenderer.renderLayer(layer);\n\n          if (layer.filters && layer.filters.length > 0) {\n            this.ctx.restore();\n          }\n        }\n      } catch (error) {\n        console.error('[VideoComposer] composeFrame error: ', error);\n        // Always close video frame after rendering (or on error)\n        closeLayerFrame(layer);\n      }\n    }\n\n    if (request.transition) {\n      this.ctx.restore();\n    }\n\n    let frame: VideoFrame | null = null;\n    if (!this.config.externalCanvas) {\n      frame = await this.createOutputFrame(request.timeUs);\n    }\n\n    return {\n      frame,\n      timeUs: request.timeUs,\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 frame = new VideoFrame(this.canvas, {\n      timestamp: timeUs,\n      duration: this.frameDurationUs, // Use cached 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  private async loadFonts(): Promise<void> {\n    if (!this.config.fonts || this.config.fonts.length === 0) {\n      return;\n    }\n\n    for (const font of this.config.fonts) {\n      try {\n        const fontFace = new FontFace(font.family, `url(${font.url})`);\n        await fontFace.load();\n        if ('fonts' in self) {\n          (self as any).fonts.add(fontFace);\n        }\n      } catch (error) {\n        console.warn(`[VideoComposer] Failed to load font ${font.family}:`, error);\n      }\n    }\n  }\n\n  updateConfig(config: Partial<VideoComposeConfig>): void {\n    Object.assign(this.config, this.applyDefaults({ ...this.config, ...config }));\n\n    if (config.fps !== undefined) {\n      this.frameDurationUs = Math.round(1_000_000 / this.config.fps); // Update cached duration\n    }\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.fonts) {\n      this.loadFonts();\n    }\n  }\n\n  dispose(): void {\n    this.filterProcessor.clearCache();\n  }\n}\n"],"names":["frame"],"mappings":"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"}

package/dist/stages/compose/text-renderers/animation-utils.js

@@ -0,0 +1,76 @@
+function springEasing(frame, config) {
+  const { damping, mass, stiffness, overshootClamping = false } = config;
+  if (frame <= 0) return 0;
+  const zeta = damping / (2 * Math.sqrt(mass * stiffness));
+  const omega = Math.sqrt(stiffness / mass);
+  const t = frame / 60;
+  let value;
+  if (zeta < 1) {
+    const omegaD = omega * Math.sqrt(1 - zeta * zeta);
+    const A = 1;
+    const B = zeta * omega / omegaD;
+    value = 1 - Math.exp(-zeta * omega * t) * (A * Math.cos(omegaD * t) + B * Math.sin(omegaD * t));
+  } else if (zeta === 1) {
+    value = 1 - Math.exp(-omega * t) * (1 + omega * t);
+  } else {
+    const r1 = -omega * (zeta - Math.sqrt(zeta * zeta - 1));
+    const r2 = -omega * (zeta + Math.sqrt(zeta * zeta - 1));
+    const A = r2 / (r2 - r1);
+    const B = 1 - A;
+    value = 1 - A * Math.exp(r1 * t) - B * Math.exp(r2 * t);
+  }
+  if (overshootClamping && value > 1) {
+    return 1;
+  }
+  return Math.max(0, value);
+}
+function interpolate(value, inputRange, outputRange, options) {
+  const { extrapolateLeft = "extend", extrapolateRight = "extend" } = options || {};
+  const [inputMin, inputMax] = inputRange;
+  const [outputMin, outputMax] = outputRange;
+  if (value < inputMin) {
+    if (extrapolateLeft === "clamp") {
+      return outputMin;
+    }
+  }
+  if (value > inputMax) {
+    if (extrapolateRight === "clamp") {
+      return outputMax;
+    }
+  }
+  const inputDelta = inputMax - inputMin;
+  if (inputDelta === 0) {
+    return outputMin;
+  }
+  const progress = (value - inputMin) / inputDelta;
+  const outputDelta = outputMax - outputMin;
+  return outputMin + progress * outputDelta;
+}
+function parseRgb(color) {
+  const match = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+  if (match) {
+    return {
+      r: parseInt(match[1], 10),
+      g: parseInt(match[2], 10),
+      b: parseInt(match[3], 10)
+    };
+  }
+  return null;
+}
+function interpolateColor(color1, color2, progress) {
+  const rgb1 = parseRgb(color1);
+  const rgb2 = parseRgb(color2);
+  if (!rgb1 || !rgb2) {
+    return color1;
+  }
+  const r = Math.round(interpolate(progress, [0, 1], [rgb1.r, rgb2.r]));
+  const g = Math.round(interpolate(progress, [0, 1], [rgb1.g, rgb2.g]));
+  const b = Math.round(interpolate(progress, [0, 1], [rgb1.b, rgb2.b]));
+  return `rgb(${r}, ${g}, ${b})`;
+}
+export {
+  interpolate,
+  interpolateColor,
+  springEasing
+};
+//# sourceMappingURL=animation-utils.js.map

package/dist/stages/compose/text-renderers/animation-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation-utils.js","sources":["../../../../src/stages/compose/text-renderers/animation-utils.ts"],"sourcesContent":["export interface SpringConfig {\n  damping: number;\n  mass: number;\n  stiffness: number;\n  overshootClamping?: boolean;\n}\n\nexport function springEasing(frame: number, config: SpringConfig): number {\n  const { damping, mass, stiffness, overshootClamping = false } = config;\n\n  if (frame <= 0) return 0;\n\n  const zeta = damping / (2 * Math.sqrt(mass * stiffness));\n  const omega = Math.sqrt(stiffness / mass);\n  const t = frame / 60;\n\n  let value: number;\n\n  if (zeta < 1) {\n    const omegaD = omega * Math.sqrt(1 - zeta * zeta);\n    const A = 1;\n    const B = (zeta * omega) / omegaD;\n    value = 1 - Math.exp(-zeta * omega * t) * (A * Math.cos(omegaD * t) + B * Math.sin(omegaD * t));\n  } else if (zeta === 1) {\n    value = 1 - Math.exp(-omega * t) * (1 + omega * t);\n  } else {\n    const r1 = -omega * (zeta - Math.sqrt(zeta * zeta - 1));\n    const r2 = -omega * (zeta + Math.sqrt(zeta * zeta - 1));\n    const A = r2 / (r2 - r1);\n    const B = 1 - A;\n    value = 1 - A * Math.exp(r1 * t) - B * Math.exp(r2 * t);\n  }\n\n  if (overshootClamping && value > 1) {\n    return 1;\n  }\n\n  return Math.max(0, value);\n}\n\nexport function interpolate(\n  value: number,\n  inputRange: [number, number],\n  outputRange: [number, number],\n  options?: {\n    extrapolateLeft?: 'clamp' | 'extend';\n    extrapolateRight?: 'clamp' | 'extend';\n  }\n): number {\n  const { extrapolateLeft = 'extend', extrapolateRight = 'extend' } = options || {};\n\n  const [inputMin, inputMax] = inputRange;\n  const [outputMin, outputMax] = outputRange;\n\n  if (value < inputMin) {\n    if (extrapolateLeft === 'clamp') {\n      return outputMin;\n    }\n  }\n\n  if (value > inputMax) {\n    if (extrapolateRight === 'clamp') {\n      return outputMax;\n    }\n  }\n\n  const inputDelta = inputMax - inputMin;\n  if (inputDelta === 0) {\n    return outputMin;\n  }\n\n  const progress = (value - inputMin) / inputDelta;\n  const outputDelta = outputMax - outputMin;\n\n  return outputMin + progress * outputDelta;\n}\n\nfunction parseRgb(color: string): { r: number; g: number; b: number } | null {\n  const match = color.match(/rgb\\((\\d+),\\s*(\\d+),\\s*(\\d+)\\)/);\n  if (match) {\n    return {\n      r: parseInt(match[1]!, 10),\n      g: parseInt(match[2]!, 10),\n      b: parseInt(match[3]!, 10),\n    };\n  }\n  return null;\n}\n\nexport function interpolateColor(color1: string, color2: string, progress: number): string {\n  const rgb1 = parseRgb(color1);\n  const rgb2 = parseRgb(color2);\n\n  if (!rgb1 || !rgb2) {\n    return color1;\n  }\n\n  const r = Math.round(interpolate(progress, [0, 1], [rgb1.r, rgb2.r]));\n  const g = Math.round(interpolate(progress, [0, 1], [rgb1.g, rgb2.g]));\n  const b = Math.round(interpolate(progress, [0, 1], [rgb1.b, rgb2.b]));\n\n  return `rgb(${r}, ${g}, ${b})`;\n}\n\nexport type EasingFunction = (t: number) => number;\n\nexport const easingFunctions: Record<string, EasingFunction> = {\n  linear: (t) => t,\n  'ease-in': (t) => t * t,\n  'ease-out': (t) => t * (2 - t),\n  'ease-in-out': (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),\n};\n\nexport function calculateProgress(\n  frame: number,\n  startFrame: number,\n  duration: number,\n  easing: string = 'linear'\n): number {\n  if (frame < startFrame) return 0;\n  if (frame >= startFrame + duration) return 1;\n\n  const rawProgress = (frame - startFrame) / duration;\n  const easingFn = easingFunctions[easing] || easingFunctions.linear;\n  return easingFn!(rawProgress);\n}\n"],"names":[],"mappings":"AAOO,SAAS,aAAa,OAAe,QAA8B;AACxE,QAAM,EAAE,SAAS,MAAM,WAAW,oBAAoB,UAAU;AAEhE,MAAI,SAAS,EAAG,QAAO;AAEvB,QAAM,OAAO,WAAW,IAAI,KAAK,KAAK,OAAO,SAAS;AACtD,QAAM,QAAQ,KAAK,KAAK,YAAY,IAAI;AACxC,QAAM,IAAI,QAAQ;AAElB,MAAI;AAEJ,MAAI,OAAO,GAAG;AACZ,UAAM,SAAS,QAAQ,KAAK,KAAK,IAAI,OAAO,IAAI;AAChD,UAAM,IAAI;AACV,UAAM,IAAK,OAAO,QAAS;AAC3B,YAAQ,IAAI,KAAK,IAAI,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,KAAK,IAAI,SAAS,CAAC,IAAI,IAAI,KAAK,IAAI,SAAS,CAAC;AAAA,EAC/F,WAAW,SAAS,GAAG;AACrB,YAAQ,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,QAAQ;AAAA,EAClD,OAAO;AACL,UAAM,KAAK,CAAC,SAAS,OAAO,KAAK,KAAK,OAAO,OAAO,CAAC;AACrD,UAAM,KAAK,CAAC,SAAS,OAAO,KAAK,KAAK,OAAO,OAAO,CAAC;AACrD,UAAM,IAAI,MAAM,KAAK;AACrB,UAAM,IAAI,IAAI;AACd,YAAQ,IAAI,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,IAAI,KAAK,CAAC;AAAA,EACxD;AAEA,MAAI,qBAAqB,QAAQ,GAAG;AAClC,WAAO;AAAA,EACT;AAEA,SAAO,KAAK,IAAI,GAAG,KAAK;AAC1B;AAEO,SAAS,YACd,OACA,YACA,aACA,SAIQ;AACR,QAAM,EAAE,kBAAkB,UAAU,mBAAmB,SAAA,IAAa,WAAW,CAAA;AAE/E,QAAM,CAAC,UAAU,QAAQ,IAAI;AAC7B,QAAM,CAAC,WAAW,SAAS,IAAI;AAE/B,MAAI,QAAQ,UAAU;AACpB,QAAI,oBAAoB,SAAS;AAC/B,aAAO;AAAA,IACT;AAAA,EACF;AAEA,MAAI,QAAQ,UAAU;AACpB,QAAI,qBAAqB,SAAS;AAChC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,aAAa,WAAW;AAC9B,MAAI,eAAe,GAAG;AACpB,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,QAAQ,YAAY;AACtC,QAAM,cAAc,YAAY;AAEhC,SAAO,YAAY,WAAW;AAChC;AAEA,SAAS,SAAS,OAA2D;AAC3E,QAAM,QAAQ,MAAM,MAAM,gCAAgC;AAC1D,MAAI,OAAO;AACT,WAAO;AAAA,MACL,GAAG,SAAS,MAAM,CAAC,GAAI,EAAE;AAAA,MACzB,GAAG,SAAS,MAAM,CAAC,GAAI,EAAE;AAAA,MACzB,GAAG,SAAS,MAAM,CAAC,GAAI,EAAE;AAAA,IAAA;AAAA,EAE7B;AACA,SAAO;AACT;AAEO,SAAS,iBAAiB,QAAgB,QAAgB,UAA0B;AACzF,QAAM,OAAO,SAAS,MAAM;AAC5B,QAAM,OAAO,SAAS,MAAM;AAE5B,MAAI,CAAC,QAAQ,CAAC,MAAM;AAClB,WAAO;AAAA,EACT;AAEA,QAAM,IAAI,KAAK,MAAM,YAAY,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;AACpE,QAAM,IAAI,KAAK,MAAM,YAAY,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;AACpE,QAAM,IAAI,KAAK,MAAM,YAAY,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;AAEpE,SAAO,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AAC7B;"}

package/dist/stages/compose/text-renderers/basic-text-renderer.d.ts

@@ -1,5 +1,5 @@
 import { TextLayer } from '../types';
 
-export declare function renderBasicText(ctx: OffscreenCanvasRenderingContext2D, layer: TextLayer, canvasWidth: number, canvasHeight: number, _relativeFrame: number): void;
-export declare function renderTextWithEntrance(ctx: OffscreenCanvasRenderingContext2D, layer: TextLayer, canvasWidth: number, canvasHeight: number, relativeFrame: number): void;
+export declare function renderBasicText(ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D, layer: TextLayer, canvasWidth: number, canvasHeight: number, _relativeFrame: number): void;
+export declare function renderTextWithEntrance(ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D, layer: TextLayer, canvasWidth: number, canvasHeight: number, relativeFrame: number): void;
 //# sourceMappingURL=basic-text-renderer.d.ts.map

package/dist/stages/compose/text-renderers/basic-text-renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-text-renderer.d.ts","sourceRoot":"","sources":["../../../../src/stages/compose/text-renderers/basic-text-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA4C1C,wBAAgB,eAAe,CAC7B,GAAG,EAAE,iCAAiC,EACtC,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,GACrB,IAAI,CAwDN;AAED,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,iCAAiC,EACtC,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,GACpB,IAAI,CAsBN"}
+{"version":3,"file":"basic-text-renderer.d.ts","sourceRoot":"","sources":["../../../../src/stages/compose/text-renderers/basic-text-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA4C1C,wBAAgB,eAAe,CAC7B,GAAG,EAAE,iCAAiC,GAAG,wBAAwB,EACjE,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,MAAM,GACrB,IAAI,CAwDN;AAED,wBAAgB,sBAAsB,CACpC,GAAG,EAAE,iCAAiC,GAAG,wBAAwB,EACjE,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,GACpB,IAAI,CAsBN"}