@meframe/core 0.0.1

package/dist/stages/compose/FilterProcessor.js

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

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

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

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

@@ -0,0 +1,38 @@
+import { TimeUs } from '../../model/types';
+import { CompositionModel } from '../../model';
+import { WorkerPool } from '../../worker/WorkerPool';
+import { ResourceLoader } from '../load/ResourceLoader';
+import { EventBus } from '../../event/EventBus';
+import { EventPayloadMap } from '../../event/events';
+import { CacheManager } from '../../cache/CacheManager';
+
+interface AudioDataMessage {
+    clipId: string;
+    audioData: AudioData;
+    clipStartUs: TimeUs;
+    clipDurationUs: TimeUs;
+}
+interface AudioSessionDeps {
+    cacheManager: CacheManager;
+    workers: WorkerPool;
+    resourceLoader: ResourceLoader;
+    eventBus: EventBus<EventPayloadMap>;
+    getModel: () => CompositionModel | null;
+    buildWorkerConfigs: () => any;
+}
+export declare class GlobalAudioSession {
+    private mixWindowUs;
+    private mixer;
+    private activeClips;
+    private deps;
+    constructor(deps: AudioSessionDeps);
+    onAudioData(message: AudioDataMessage): void;
+    ensureMixedPCM(startUs: TimeUs): Promise<AudioBuffer | null>;
+    activateAllAudioClips(): Promise<void>;
+    handleAudioStream(stream: ReadableStream<AudioData>, metadata: Record<string, any>): void;
+    reset(): void;
+    private setupAudioPipeline;
+    private alignToWindow;
+}
+export {};
+//# sourceMappingURL=GlobalAudioSession.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalAudioSession.d.ts","sourceRoot":"","sources":["../../../src/stages/compose/GlobalAudioSession.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,KAAK,EAAE,gBAAgB,EAAQ,MAAM,aAAa,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,SAAS,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,gBAAgB;IACxB,YAAY,EAAE,YAAY,CAAC;IAC3B,OAAO,EAAE,UAAU,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IACpC,QAAQ,EAAE,MAAM,gBAAgB,GAAG,IAAI,CAAC;IACxC,kBAAkB,EAAE,MAAM,GAAG,CAAC;CAC/B;AAED,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,KAAK,CAAoB;IACjC,OAAO,CAAC,WAAW,CAAqB;IACxC,OAAO,CAAC,IAAI,CAAmB;gBAEnB,IAAI,EAAE,gBAAgB;IAKlC,WAAW,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAKtC,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;IAwB5D,qBAAqB,IAAI,OAAO,CAAC,IAAI,CAAC;IAwB5C,iBAAiB,CAAC,MAAM,EAAE,cAAc,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI;IA+BzF,KAAK,IAAI,IAAI;YAKC,kBAAkB;IAiChC,OAAO,CAAC,aAAa;CAGtB"}

package/dist/stages/compose/GlobalAudioSession.js

@@ -0,0 +1,122 @@
+import { OfflineAudioMixer } from "./OfflineAudioMixer.js";
+import { MeframeEvent } from "../../event/events.js";
+class GlobalAudioSession {
+  mixWindowUs = 3e6;
+  mixer;
+  activeClips = /* @__PURE__ */ new Set();
+  deps;
+  constructor(deps) {
+    this.deps = deps;
+    this.mixer = new OfflineAudioMixer(deps.cacheManager, deps.getModel);
+  }
+  onAudioData(message) {
+    const { clipId, audioData, clipStartUs, clipDurationUs } = message;
+    this.deps.cacheManager.putClipAudioData(clipId, audioData, clipStartUs, clipDurationUs);
+  }
+  async ensureMixedPCM(startUs) {
+    const model = this.deps.getModel();
+    if (!model) {
+      return null;
+    }
+    const windowStartUs = this.alignToWindow(startUs);
+    const windowEndUs = windowStartUs + this.mixWindowUs;
+    const cached = this.deps.cacheManager.getMixedAudio(windowStartUs, windowEndUs);
+    if (cached) {
+      return cached;
+    }
+    try {
+      const mixedBuffer = await this.mixer.mix(windowStartUs, windowEndUs);
+      this.deps.cacheManager.putMixedAudio(windowStartUs, windowEndUs, mixedBuffer);
+      return mixedBuffer;
+    } catch (error) {
+      console.error("[GlobalAudioSession] Mix failed:", error);
+      return null;
+    }
+  }
+  async activateAllAudioClips() {
+    const model = this.deps.getModel();
+    if (!model) {
+      return;
+    }
+    const audioTracks = model.tracks.filter((track) => track.kind === "audio");
+    for (const track of audioTracks) {
+      for (const clip of track.clips) {
+        if (!this.activeClips.has(clip.id)) {
+          await this.setupAudioPipeline(clip);
+          this.activeClips.add(clip.id);
+          await this.deps.resourceLoader.fetch(clip.resourceId, {
+            priority: "high"
+          });
+          this.deps.eventBus.emit(MeframeEvent.ClipActivated, { clipId: clip.id });
+        }
+      }
+    }
+  }
+  handleAudioStream(stream, metadata) {
+    const clipId = metadata.clipId || "unknown";
+    const clipStartUs = metadata.clipStartUs ?? 0;
+    const clipDurationUs = metadata.clipDurationUs ?? 0;
+    const reader = stream.getReader();
+    const pump = async () => {
+      try {
+        const { done, value } = await reader.read();
+        if (done) {
+          reader.releaseLock();
+          return;
+        }
+        this.onAudioData({
+          clipId,
+          audioData: value,
+          clipStartUs,
+          clipDurationUs
+        });
+        await pump();
+      } catch (error) {
+        console.error("[GlobalAudioSession] Audio stream error:", error);
+        reader.releaseLock();
+      }
+    };
+    pump();
+  }
+  reset() {
+    this.deps.cacheManager.resetAudioCache();
+    this.activeClips.clear();
+  }
+  async setupAudioPipeline(clip) {
+    const { id: clipId, resourceId, startUs, durationUs } = clip;
+    const audioDemuxWorker = await this.deps.workers.get("audioDemux", resourceId, { lazy: true });
+    const decodeWorker = await this.deps.workers.get("decode");
+    const demuxToDecodeChannel = new MessageChannel();
+    await audioDemuxWorker.send(
+      "connect",
+      { direction: "downstream", port: demuxToDecodeChannel.port1, streamType: "audio", clipId },
+      { transfer: [demuxToDecodeChannel.port1] }
+    );
+    await decodeWorker.send(
+      "connect",
+      {
+        direction: "upstream",
+        port: demuxToDecodeChannel.port2,
+        streamType: "audio",
+        clipId,
+        clipStartUs: startUs || 0,
+        clipDurationUs: durationUs || 0
+      },
+      { transfer: [demuxToDecodeChannel.port2] }
+    );
+    const demuxConfig = this.deps.buildWorkerConfigs().audioDemux;
+    await audioDemuxWorker.send("configure", {
+      initial: true,
+      resourceId,
+      clipId,
+      config: demuxConfig
+    });
+  }
+  alignToWindow(timeUs) {
+    return Math.floor(timeUs / this.mixWindowUs) * this.mixWindowUs;
+  }
+}
+export {
+  GlobalAudioSession
+};
+//# sourceMappingURL=GlobalAudioSession.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalAudioSession.js","sources":["../../../src/stages/compose/GlobalAudioSession.ts"],"sourcesContent":["import type { TimeUs } from '../../model/types';\nimport { OfflineAudioMixer } from './OfflineAudioMixer';\nimport type { CompositionModel, Clip } from '../../model';\nimport type { WorkerPool } from '../../worker/WorkerPool';\nimport type { ResourceLoader } from '../load/ResourceLoader';\nimport type { EventBus } from '../../event/EventBus';\nimport type { EventPayloadMap } from '../../event/events';\nimport { MeframeEvent } from '../../event/events';\nimport type { CacheManager } from '../../cache/CacheManager';\n\ninterface AudioDataMessage {\n  clipId: string;\n  audioData: AudioData;\n  clipStartUs: TimeUs;\n  clipDurationUs: TimeUs;\n}\n\ninterface AudioSessionDeps {\n  cacheManager: CacheManager;\n  workers: WorkerPool;\n  resourceLoader: ResourceLoader;\n  eventBus: EventBus<EventPayloadMap>;\n  getModel: () => CompositionModel | null;\n  buildWorkerConfigs: () => any;\n}\n\nexport class GlobalAudioSession {\n  private mixWindowUs = 3_000_000;\n  private mixer: OfflineAudioMixer;\n  private activeClips = new Set<string>();\n  private deps: AudioSessionDeps;\n\n  constructor(deps: AudioSessionDeps) {\n    this.deps = deps;\n    this.mixer = new OfflineAudioMixer(deps.cacheManager, deps.getModel);\n  }\n\n  onAudioData(message: AudioDataMessage): void {\n    const { clipId, audioData, clipStartUs, clipDurationUs } = message;\n    this.deps.cacheManager.putClipAudioData(clipId, audioData, clipStartUs, clipDurationUs);\n  }\n\n  async ensureMixedPCM(startUs: TimeUs): Promise<AudioBuffer | null> {\n    const model = this.deps.getModel();\n    if (!model) {\n      return null;\n    }\n\n    const windowStartUs = this.alignToWindow(startUs);\n    const windowEndUs = windowStartUs + this.mixWindowUs;\n\n    const cached = this.deps.cacheManager.getMixedAudio(windowStartUs, windowEndUs);\n    if (cached) {\n      return cached;\n    }\n\n    try {\n      const mixedBuffer = await this.mixer.mix(windowStartUs, windowEndUs);\n      this.deps.cacheManager.putMixedAudio(windowStartUs, windowEndUs, mixedBuffer);\n      return mixedBuffer;\n    } catch (error) {\n      console.error('[GlobalAudioSession] Mix failed:', error);\n      return null;\n    }\n  }\n\n  async activateAllAudioClips(): Promise<void> {\n    const model = this.deps.getModel();\n    if (!model) {\n      return;\n    }\n\n    const audioTracks = model.tracks.filter((track) => track.kind === 'audio');\n\n    for (const track of audioTracks) {\n      for (const clip of track.clips) {\n        if (!this.activeClips.has(clip.id)) {\n          await this.setupAudioPipeline(clip);\n          this.activeClips.add(clip.id);\n\n          await this.deps.resourceLoader.fetch(clip.resourceId, {\n            priority: 'high',\n          });\n\n          this.deps.eventBus.emit(MeframeEvent.ClipActivated, { clipId: clip.id });\n        }\n      }\n    }\n  }\n\n  handleAudioStream(stream: ReadableStream<AudioData>, metadata: Record<string, any>): void {\n    const clipId = metadata.clipId || 'unknown';\n    const clipStartUs = metadata.clipStartUs ?? 0;\n    const clipDurationUs = metadata.clipDurationUs ?? 0;\n\n    const reader = stream.getReader();\n    const pump = async (): Promise<void> => {\n      try {\n        const { done, value } = await reader.read();\n        if (done) {\n          reader.releaseLock();\n          return;\n        }\n\n        this.onAudioData({\n          clipId,\n          audioData: value,\n          clipStartUs,\n          clipDurationUs,\n        });\n\n        await pump();\n      } catch (error) {\n        console.error('[GlobalAudioSession] Audio stream error:', error);\n        reader.releaseLock();\n      }\n    };\n\n    pump();\n  }\n\n  reset(): void {\n    this.deps.cacheManager.resetAudioCache();\n    this.activeClips.clear();\n  }\n\n  private async setupAudioPipeline(clip: Clip): Promise<void> {\n    const { id: clipId, resourceId, startUs, durationUs } = clip;\n    const audioDemuxWorker = await this.deps.workers.get('audioDemux', resourceId, { lazy: true });\n    const decodeWorker = await this.deps.workers.get('decode');\n\n    const demuxToDecodeChannel = new MessageChannel();\n    await audioDemuxWorker.send(\n      'connect',\n      { direction: 'downstream', port: demuxToDecodeChannel.port1, streamType: 'audio', clipId },\n      { transfer: [demuxToDecodeChannel.port1] }\n    );\n    await decodeWorker.send(\n      'connect',\n      {\n        direction: 'upstream',\n        port: demuxToDecodeChannel.port2,\n        streamType: 'audio',\n        clipId,\n        clipStartUs: startUs || 0,\n        clipDurationUs: durationUs || 0,\n      },\n      { transfer: [demuxToDecodeChannel.port2] }\n    );\n\n    const demuxConfig = this.deps.buildWorkerConfigs().audioDemux;\n    await audioDemuxWorker.send('configure', {\n      initial: true,\n      resourceId,\n      clipId,\n      config: demuxConfig,\n    });\n  }\n\n  private alignToWindow(timeUs: TimeUs): TimeUs {\n    return Math.floor(timeUs / this.mixWindowUs) * this.mixWindowUs;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,30 @@
+import { Layer } from './types';
+
+/**
+ * LayerRenderer - Handles rendering of individual layers
+ * Single responsibility: Draw a single layer to the canvas context
+ */
+export declare class LayerRenderer {
+    private ctx;
+    private width;
+    private height;
+    constructor(ctx: OffscreenCanvasRenderingContext2D, width: number, height: number);
+    private ensureHighQualityRendering;
+    /**
+     * Render a single layer with all its properties
+     */
+    renderLayer(layer: Layer): Promise<void>;
+    private applyTransform;
+    private renderVideoLayer;
+    private renderImageLayer;
+    private renderTextLayer;
+    /**
+     * Draw enhanced multi-layer stroke for better text visibility
+     */
+    private drawEnhancedStroke;
+    private calculateTextX;
+    private calculateTextY;
+    private applyMask;
+    updateDimensions(width: number, height: number): void;
+}
+//# sourceMappingURL=LayerRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayerRenderer.d.ts","sourceRoot":"","sources":["../../../src/stages/compose/LayerRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAA8D,MAAM,SAAS,CAAC;AAEjG;;;GAGG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,GAAG,CAAoC;IAC/C,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,MAAM,CAAS;gBAEX,GAAG,EAAE,iCAAiC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAOjF,OAAO,CAAC,0BAA0B;IAKlC;;OAEG;IACG,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAyC9C,OAAO,CAAC,cAAc;YAmBR,gBAAgB;YAuChB,gBAAgB;YAsChB,eAAe;IAkD7B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAwB1B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,SAAS;IAkBjB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;CAKtD"}

package/dist/stages/compose/LayerRenderer.js

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