@aicut/core 0.4.3 → 0.5.0

package/dist/index.cjs

@@ -144,18 +144,26 @@ function projectDuration(project) {
 }
 
 // src/timeline/layout.ts
-var TRACK_HEIGHT = 56;
-var RULER_HEIGHT = 24;
+exports.TRACK_HEIGHT = 56;
+exports.RULER_HEIGHT = 24;
 var HEADER_WIDTH = 96;
 var HANDLE_PX = 8;
 var CLIP_INSET = 6;
 var SCALE_MIN = 10;
 var SCALE_MAX = 400;
+function setTimelineMetrics(opts) {
+  if (opts.trackHeight != null && opts.trackHeight > 0) {
+    exports.TRACK_HEIGHT = Math.round(opts.trackHeight);
+  }
+  if (opts.rulerHeight != null && opts.rulerHeight > 0) {
+    exports.RULER_HEIGHT = Math.round(opts.rulerHeight);
+  }
+}
 var SCROLLBAR_THICKNESS = 10;
 var SCROLLBAR_MIN_THUMB = 24;
 var SCROLLBAR_INSET = 2;
 function contentHeight(tracks, isDragging) {
-  return tracks.length * TRACK_HEIGHT + (isDragging ? TRACK_HEIGHT : 0);
+  return tracks.length * exports.TRACK_HEIGHT + (isDragging ? exports.TRACK_HEIGHT : 0);
 }
 function contentWidth(project, pxPerSec) {
   let max = 0;
@@ -168,12 +176,12 @@ function contentWidth(project, pxPerSec) {
   return max / 1e3 * pxPerSec;
 }
 function trackY(index) {
-  return RULER_HEIGHT + index * TRACK_HEIGHT;
+  return exports.RULER_HEIGHT + index * exports.TRACK_HEIGHT;
 }
 function trackIndexAt(y, trackCount, scrollTop = 0) {
-  if (y < RULER_HEIGHT) return -1;
-  const contentY = y - RULER_HEIGHT + scrollTop;
-  const idx = Math.floor(contentY / TRACK_HEIGHT);
+  if (y < exports.RULER_HEIGHT) return -1;
+  const contentY = y - exports.RULER_HEIGHT + scrollTop;
+  const idx = Math.floor(contentY / exports.TRACK_HEIGHT);
   if (idx < 0 || idx >= trackCount) return -1;
   return idx;
 }
@@ -253,8 +261,8 @@ function uncoveredIntervals(project) {
   return gaps;
 }
 
-// src/playback.ts
-var PlaybackEngine = class {
+// src/playback/html-video.ts
+var HtmlVideoEngine = class {
   host;
   mount;
   videos = /* @__PURE__ */ new Map();
@@ -270,9 +278,9 @@ var PlaybackEngine = class {
   onError;
   onReady;
   onSourceMetadata;
-  constructor(host, project) {
-    this.host = host;
-    this.project = project;
+  constructor(opts) {
+    this.host = opts.host;
+    this.project = opts.project;
     this.mount = document.createElement("div");
     this.mount.className = "aicut-preview";
     this.host.appendChild(this.mount);
@@ -514,6 +522,328 @@ var PlaybackEngine = class {
     this.onTimeUpdate?.(this.timeMs);
   }
 };
+var htmlVideoEngineFactory = (opts) => new HtmlVideoEngine(opts);
+
+// src/playback/canvas-compositor.ts
+var CanvasCompositorEngine = class {
+  host;
+  mount;
+  canvas;
+  ctx;
+  /** Only created when constructed with `debug: true`. */
+  badge = null;
+  videos = /* @__PURE__ */ new Map();
+  project;
+  currentClipId = null;
+  playing = false;
+  timeMs = 0;
+  rafHandle = null;
+  lastFrameTs = 0;
+  paintedFrames = 0;
+  onTimeUpdate;
+  onEnded;
+  onError;
+  onReady;
+  onSourceMetadata;
+  constructor(opts) {
+    this.host = opts.host;
+    this.project = opts.project;
+    this.mount = document.createElement("div");
+    this.mount.className = "aicut-preview aicut-preview--canvas";
+    Object.assign(this.mount.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%"
+    });
+    this.canvas = document.createElement("canvas");
+    Object.assign(this.canvas.style, {
+      position: "absolute",
+      inset: "0",
+      width: "100%",
+      height: "100%",
+      // Stretch with letterboxing handled by the draw loop.
+      objectFit: "contain",
+      // Black until the first frame is drawn so the swap from the
+      // previous engine doesn't flash the host background.
+      background: "#000"
+    });
+    this.mount.appendChild(this.canvas);
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) throw new Error("CanvasCompositorEngine: 2d context unavailable");
+    this.ctx = ctx;
+    if (opts.debug) {
+      const badge = document.createElement("div");
+      badge.className = "aicut-preview__badge";
+      Object.assign(badge.style, {
+        position: "absolute",
+        top: "8px",
+        left: "8px",
+        padding: "4px 8px",
+        borderRadius: "6px",
+        background: "rgba(0, 0, 0, 0.55)",
+        color: "rgba(255, 255, 255, 0.92)",
+        font: "11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace",
+        pointerEvents: "none",
+        zIndex: "2",
+        letterSpacing: "0.02em"
+      });
+      badge.textContent = "engine: canvas compositor";
+      this.mount.appendChild(badge);
+      this.badge = badge;
+    }
+    this.host.appendChild(this.mount);
+    this.syncSources();
+    this.resizeCanvas();
+    this.startTickLoop();
+  }
+  setProject(next) {
+    this.project = next;
+    this.syncSources();
+    const clip = this.clipAtTime(this.timeMs);
+    if (!clip) {
+      this.timeMs = 0;
+      this.activate(null);
+      this.onTimeUpdate?.(0);
+    } else {
+      this.activate(clip);
+      this.seekVideoToClipOffset(clip, this.timeMs - clip.start);
+    }
+  }
+  play() {
+    if (this.playing) return;
+    if (this.totalDuration() <= 0) return;
+    const clip = this.clipAtTime(this.timeMs) ?? this.nextClipAfterTime(this.timeMs);
+    if (!clip) return;
+    if (this.timeMs < clip.start) this.timeMs = clip.start;
+    this.activate(clip);
+    this.seekVideoToClipOffset(clip, this.timeMs - clip.start);
+    const v = this.videos.get(clip.sourceId);
+    if (!v) return;
+    void v.play().catch((err) => this.onError?.(err));
+    this.playing = true;
+    this.lastFrameTs = performance.now();
+  }
+  pause() {
+    if (!this.playing) return;
+    this.playing = false;
+    if (this.currentClipId) {
+      const clip = this.clipById(this.currentClipId);
+      if (clip) this.videos.get(clip.sourceId)?.pause();
+    }
+  }
+  isPlaying() {
+    return this.playing;
+  }
+  getTime() {
+    return this.timeMs;
+  }
+  seek(timeMs) {
+    const total = this.totalDuration();
+    if (total <= 0) {
+      this.timeMs = 0;
+      return;
+    }
+    const clamped = Math.max(0, Math.min(timeMs, total));
+    this.timeMs = clamped;
+    const clip = this.clipAtTime(clamped);
+    if (clip) {
+      this.activate(clip);
+      this.seekVideoToClipOffset(clip, clamped - clip.start);
+    } else {
+      this.activate(null);
+    }
+    this.onTimeUpdate?.(clamped);
+  }
+  destroy() {
+    this.stopTickLoop();
+    for (const v of this.videos.values()) {
+      v.pause();
+      v.removeAttribute("src");
+      v.load();
+    }
+    this.videos.clear();
+    this.mount.remove();
+  }
+  // --- internals -------------------------------------------------------
+  syncSources() {
+    const wanted = new Set(this.project.sources.map((s) => s.id));
+    for (const [id, v] of this.videos) {
+      if (!wanted.has(id)) {
+        v.pause();
+        this.videos.delete(id);
+      }
+    }
+    for (const src of this.project.sources) {
+      if (src.kind !== "video") continue;
+      if (this.videos.has(src.id)) continue;
+      const v = document.createElement("video");
+      v.preload = "auto";
+      v.playsInline = true;
+      v.muted = false;
+      v.src = src.url;
+      const sourceId = src.id;
+      v.addEventListener(
+        "error",
+        () => this.onError?.(new Error(`Failed to load ${src.url}`))
+      );
+      v.addEventListener("loadedmetadata", () => {
+        this.onReady?.();
+        const durMs = Math.round(v.duration * 1e3);
+        if (Number.isFinite(durMs) && durMs > 0) {
+          this.onSourceMetadata?.(sourceId, durMs);
+        }
+      });
+      this.videos.set(src.id, v);
+    }
+  }
+  activate(clip) {
+    if (clip?.id === this.currentClipId) return;
+    if (this.currentClipId) {
+      const prev = this.clipById(this.currentClipId);
+      if (prev) this.videos.get(prev.sourceId)?.pause();
+    }
+    this.currentClipId = clip ? clip.id : null;
+  }
+  seekVideoToClipOffset(clip, offsetMs) {
+    const v = this.videos.get(clip.sourceId);
+    if (!v) return;
+    const target = (clip.in + Math.max(0, offsetMs)) / 1e3;
+    if (Math.abs(v.currentTime - target) > 0.05) {
+      v.currentTime = target;
+    }
+  }
+  clipById(id) {
+    for (const t of this.project.tracks) {
+      for (const c of t.clips) if (c.id === id) return c;
+    }
+    return null;
+  }
+  clipAtTime(timeMs) {
+    for (const t of this.project.tracks) {
+      if (t.kind !== "video") continue;
+      for (const c of t.clips) {
+        if (timeMs >= c.start && timeMs < c.start + (c.out - c.in)) return c;
+      }
+    }
+    return null;
+  }
+  nextClipAfterTime(timeMs) {
+    let best = null;
+    for (const t of this.project.tracks) {
+      if (t.kind !== "video") continue;
+      for (const c of t.clips) {
+        if (c.start >= timeMs && (!best || c.start < best.start)) best = c;
+      }
+    }
+    return best;
+  }
+  totalDuration() {
+    let max = 0;
+    for (const t of this.project.tracks) {
+      if (t.kind !== "video") continue;
+      for (const c of t.clips) {
+        const e = c.start + (c.out - c.in);
+        if (e > max) max = e;
+      }
+    }
+    return max;
+  }
+  resizeCanvas() {
+    const rect = this.mount.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    const w = Math.max(1, Math.floor(rect.width * dpr));
+    const h = Math.max(1, Math.floor(rect.height * dpr));
+    if (this.canvas.width !== w || this.canvas.height !== h) {
+      this.canvas.width = w;
+      this.canvas.height = h;
+    }
+  }
+  startTickLoop() {
+    this.lastFrameTs = performance.now();
+    const tick = (now) => {
+      this.resizeCanvas();
+      if (this.playing) {
+        const dtMs = now - this.lastFrameTs;
+        this.lastFrameTs = now;
+        this.advance(dtMs);
+      }
+      this.paint();
+      this.rafHandle = requestAnimationFrame(tick);
+    };
+    this.rafHandle = requestAnimationFrame(tick);
+  }
+  stopTickLoop() {
+    if (this.rafHandle != null) {
+      cancelAnimationFrame(this.rafHandle);
+      this.rafHandle = null;
+    }
+  }
+  advance(dtMs) {
+    if (this.project.tracks.length === 0) return;
+    this.timeMs += dtMs;
+    const totalDur = this.totalDuration();
+    if (this.timeMs >= totalDur) {
+      this.timeMs = totalDur;
+      this.onTimeUpdate?.(this.timeMs);
+      this.pause();
+      this.onEnded?.();
+      return;
+    }
+    const clip = this.clipAtTime(this.timeMs);
+    if (!clip) {
+      const next = this.nextClipAfterTime(this.timeMs);
+      if (next) {
+        this.timeMs = next.start;
+        this.activate(next);
+        this.seekVideoToClipOffset(next, 0);
+        const v = this.videos.get(next.sourceId);
+        if (v) void v.play().catch((err) => this.onError?.(err));
+      } else {
+        this.pause();
+        this.onEnded?.();
+        return;
+      }
+    } else if (clip.id !== this.currentClipId) {
+      this.activate(clip);
+      this.seekVideoToClipOffset(clip, this.timeMs - clip.start);
+      const v = this.videos.get(clip.sourceId);
+      if (v) void v.play().catch((err) => this.onError?.(err));
+    }
+    this.onTimeUpdate?.(this.timeMs);
+  }
+  /**
+   * One paint per rAF — clears the canvas, draws the current active
+   * video frame letterboxed to fit, then refreshes the HUD. Done
+   * unconditionally (not just on `playing`) so the HUD frame counter
+   * and the seek preview both update when paused.
+   */
+  paint() {
+    const cw = this.canvas.width;
+    const ch = this.canvas.height;
+    this.ctx.clearRect(0, 0, cw, ch);
+    const clip = this.currentClipId ? this.clipById(this.currentClipId) : null;
+    const v = clip ? this.videos.get(clip.sourceId) : null;
+    if (v && v.videoWidth > 0 && v.videoHeight > 0) {
+      const vw = v.videoWidth;
+      const vh = v.videoHeight;
+      const scale = Math.min(cw / vw, ch / vh);
+      const dw = vw * scale;
+      const dh = vh * scale;
+      const dx = (cw - dw) / 2;
+      const dy = (ch - dh) / 2;
+      this.ctx.drawImage(v, dx, dy, dw, dh);
+      this.paintedFrames += 1;
+    }
+    this.updateBadge();
+  }
+  updateBadge() {
+    if (!this.badge) return;
+    const sec = (this.timeMs / 1e3).toFixed(2);
+    this.badge.textContent = `engine: canvas compositor \u2022 t=${sec}s \u2022 frames painted: ${this.paintedFrames}`;
+  }
+};
+var canvasCompositorEngineFactory = (opts) => new CanvasCompositorEngine(opts);
 
 // src/theme.ts
 var THEME_VARS = {
@@ -657,11 +987,19 @@ var ThumbnailRibbon = class {
   /**
    * Paint thumbnails for the clip's visible window onto `ctx`. The
    * canvas is the per-clip strip — width = clip's px width, height =
-   * THUMB_HEIGHT. Source-time range derives from the clip's `in/out`
-   * and the px range we're drawing into.
+   * `pxHeight` (defaults to the cached `THUMB_HEIGHT`). Source-time
+   * range derives from the clip's `in/out` and the px range we're
+   * drawing into.
+   *
+   * `pxHeight` lets the caller stretch thumbs to fill a taller clip
+   * body when `trackHeight` is configured above the default. Aspect
+   * ratio is already broken per-thumb (we slice variable widths from a
+   * fixed-aspect cached bitmap), so stretching height too is fine — it
+   * preserves the "filmstrip" look without leaving an empty bottom
+   * band of the brand gradient showing through.
    */
-  paintStrip(ctx, sourceId, sourceInMs, sourceOutMs, pxWidth) {
-    ctx.clearRect(0, 0, pxWidth, THUMB_HEIGHT);
+  paintStrip(ctx, sourceId, sourceInMs, sourceOutMs, pxWidth, pxHeight = THUMB_HEIGHT) {
+    ctx.clearRect(0, 0, pxWidth, pxHeight);
     const st = this.sources.get(sourceId);
     if (!st) return;
     if (sourceOutMs <= sourceInMs || pxWidth <= 0) return;
@@ -674,10 +1012,10 @@ var ThumbnailRibbon = class {
       const x = Math.round(i * pxWidth / count);
       const w = Math.round((i + 1) * pxWidth / count) - x;
       if (bmp) {
-        ctx.drawImage(bmp, x, 0, w, THUMB_HEIGHT);
+        ctx.drawImage(bmp, x, 0, w, pxHeight);
       } else {
         ctx.fillStyle = "rgba(255,255,255,0.04)";
-        ctx.fillRect(x, 0, w, THUMB_HEIGHT);
+        ctx.fillRect(x, 0, w, pxHeight);
         this.enqueue(st, bucket);
       }
     }
@@ -770,10 +1108,10 @@ function drawAll(ctx, state, style, thumbs) {
   ctx.fillRect(0, 0, W, H);
   const baseX = state.showHeader ? HEADER_WIDTH : 0;
   const trackAreaW = W - baseX - SCROLLBAR_THICKNESS;
-  const trackAreaH = H - RULER_HEIGHT - SCROLLBAR_THICKNESS;
+  const trackAreaH = H - exports.RULER_HEIGHT - SCROLLBAR_THICKNESS;
   ctx.save();
   ctx.beginPath();
-  ctx.rect(baseX, RULER_HEIGHT, trackAreaW, trackAreaH);
+  ctx.rect(baseX, exports.RULER_HEIGHT, trackAreaW, trackAreaH);
   ctx.clip();
   ctx.translate(0, -state.scrollTop);
   drawTracks(ctx, state, style, thumbs);
@@ -785,7 +1123,7 @@ function drawAll(ctx, state, style, thumbs) {
   if (state.showHeader) {
     ctx.save();
     ctx.beginPath();
-    ctx.rect(0, RULER_HEIGHT, HEADER_WIDTH, trackAreaH);
+    ctx.rect(0, exports.RULER_HEIGHT, HEADER_WIDTH, trackAreaH);
     ctx.clip();
     ctx.translate(0, -state.scrollTop);
     drawHeaders(ctx, state, style);
@@ -793,7 +1131,7 @@ function drawAll(ctx, state, style, thumbs) {
   }
   ctx.save();
   ctx.beginPath();
-  ctx.rect(baseX, 0, trackAreaW, RULER_HEIGHT);
+  ctx.rect(baseX, 0, trackAreaW, exports.RULER_HEIGHT);
   ctx.clip();
   drawRuler(ctx, state, style);
   ctx.restore();
@@ -817,7 +1155,7 @@ function drawCoverageGaps(ctx, state, style) {
   const gaps = uncoveredIntervals(state.project);
   if (gaps.length === 0) return;
   const baseX = state.showHeader ? HEADER_WIDTH : 0;
-  const trackStackH = state.viewportHeight - RULER_HEIGHT - SCROLLBAR_THICKNESS;
+  const trackStackH = state.viewportHeight - exports.RULER_HEIGHT - SCROLLBAR_THICKNESS;
   for (const [s, e] of gaps) {
     const x1 = Math.max(
       baseX,
@@ -829,16 +1167,16 @@ function drawCoverageGaps(ctx, state, style) {
     );
     if (x2 <= x1) continue;
     ctx.fillStyle = "rgba(250, 167, 0, 0.35)";
-    ctx.fillRect(x1, 0, x2 - x1, RULER_HEIGHT);
+    ctx.fillRect(x1, 0, x2 - x1, exports.RULER_HEIGHT);
     ctx.fillStyle = "rgba(250, 167, 0, 0.12)";
-    ctx.fillRect(x1, RULER_HEIGHT, x2 - x1, trackStackH);
+    ctx.fillRect(x1, exports.RULER_HEIGHT, x2 - x1, trackStackH);
     ctx.save();
     ctx.strokeStyle = "rgba(250, 167, 0, 0.6)";
     ctx.lineWidth = 1;
     ctx.beginPath();
     for (let hx = Math.floor(x1); hx < x2; hx += 6) {
-      ctx.moveTo(hx, RULER_HEIGHT - 1);
-      ctx.lineTo(hx + 6, RULER_HEIGHT - 7);
+      ctx.moveTo(hx, exports.RULER_HEIGHT - 1);
+      ctx.lineTo(hx + 6, exports.RULER_HEIGHT - 7);
     }
     ctx.stroke();
     ctx.restore();
@@ -887,7 +1225,7 @@ function drawDragGhost(ctx, state, style, thumbs) {
 }
 function drawDropOutline(ctx, startX, trackIndex, widthPx, color, emphasized) {
   const y = trackY(trackIndex) + CLIP_INSET - 1;
-  const h = TRACK_HEIGHT - CLIP_INSET * 2 + 2;
+  const h = exports.TRACK_HEIGHT - CLIP_INSET * 2 + 2;
   ctx.save();
   if (emphasized) {
     ctx.shadowColor = withAlpha(color, 0.45);
@@ -904,22 +1242,22 @@ function drawPhantomRow(ctx, trackIndex, baseX, state, style) {
   const w = state.viewportWidth - baseX;
   ctx.save();
   ctx.fillStyle = withAlpha(style.info, 0.04);
-  ctx.fillRect(baseX, y, w, TRACK_HEIGHT);
+  ctx.fillRect(baseX, y, w, exports.TRACK_HEIGHT);
   ctx.strokeStyle = withAlpha(style.info, 0.35);
   ctx.lineWidth = 1;
   ctx.setLineDash([3, 4]);
   ctx.beginPath();
   ctx.moveTo(baseX, y + 0.5);
   ctx.lineTo(baseX + w, y + 0.5);
-  ctx.moveTo(baseX, y + TRACK_HEIGHT - 0.5);
-  ctx.lineTo(baseX + w, y + TRACK_HEIGHT - 0.5);
+  ctx.moveTo(baseX, y + exports.TRACK_HEIGHT - 0.5);
+  ctx.lineTo(baseX + w, y + exports.TRACK_HEIGHT - 0.5);
   ctx.stroke();
   ctx.setLineDash([]);
   if (state.showHeader) {
     ctx.fillStyle = withAlpha(style.info, 0.7);
     ctx.font = "10px system-ui, -apple-system, sans-serif";
     ctx.textBaseline = "middle";
-    ctx.fillText(state.locale.newTrack, 12, y + TRACK_HEIGHT / 2);
+    ctx.fillText(state.locale.newTrack, 12, y + exports.TRACK_HEIGHT / 2);
   }
   ctx.restore();
 }
@@ -928,12 +1266,12 @@ function drawRuler(ctx, state, style) {
   const baseX = state.showHeader ? HEADER_WIDTH : 0;
   const rulerW = W - baseX;
   ctx.fillStyle = style.bg;
-  ctx.fillRect(baseX, 0, rulerW, RULER_HEIGHT);
+  ctx.fillRect(baseX, 0, rulerW, exports.RULER_HEIGHT);
   ctx.strokeStyle = style.border;
   ctx.lineWidth = 1;
   ctx.beginPath();
-  ctx.moveTo(baseX, RULER_HEIGHT - 0.5);
-  ctx.lineTo(W, RULER_HEIGHT - 0.5);
+  ctx.moveTo(baseX, exports.RULER_HEIGHT - 0.5);
+  ctx.lineTo(W, exports.RULER_HEIGHT - 0.5);
   ctx.stroke();
   const minPx = 80;
   const tickSec = niceTickSeconds(minPx / pxPerSec);
@@ -954,12 +1292,12 @@ function drawRuler(ctx, state, style) {
     ctx.lineWidth = 1;
     const h = isMajor ? 10 : 6;
     ctx.beginPath();
-    ctx.moveTo(x + 0.5, RULER_HEIGHT - h);
-    ctx.lineTo(x + 0.5, RULER_HEIGHT - 1);
+    ctx.moveTo(x + 0.5, exports.RULER_HEIGHT - h);
+    ctx.lineTo(x + 0.5, exports.RULER_HEIGHT - 1);
     ctx.stroke();
     if (isMajor) {
       ctx.fillStyle = withAlpha(style.textMuted, 0.85);
-      ctx.fillText(formatRulerLabel(s), x + 3, RULER_HEIGHT - 12);
+      ctx.fillText(formatRulerLabel(s), x + 3, exports.RULER_HEIGHT - 12);
     }
   }
 }
@@ -974,12 +1312,12 @@ function drawTrackRow(ctx, trackIndex, track, sources, state, style, thumbs) {
   const baseX = state.showHeader ? HEADER_WIDTH : 0;
   const y = trackY(trackIndex);
   ctx.fillStyle = style.trackBg;
-  ctx.fillRect(baseX, y, W - baseX, TRACK_HEIGHT);
+  ctx.fillRect(baseX, y, W - baseX, exports.TRACK_HEIGHT);
   ctx.strokeStyle = style.border;
   ctx.lineWidth = 1;
   ctx.beginPath();
-  ctx.moveTo(baseX, y + TRACK_HEIGHT - 0.5);
-  ctx.lineTo(W, y + TRACK_HEIGHT - 0.5);
+  ctx.moveTo(baseX, y + exports.TRACK_HEIGHT - 0.5);
+  ctx.lineTo(W, y + exports.TRACK_HEIGHT - 0.5);
   ctx.stroke();
   if (state.dropTargetTrackIndex === trackIndex) {
     ctx.strokeStyle = withAlpha(style.info, 0.45);
@@ -987,8 +1325,8 @@ function drawTrackRow(ctx, trackIndex, track, sources, state, style, thumbs) {
     ctx.beginPath();
     ctx.moveTo(baseX, y + 0.5);
     ctx.lineTo(W, y + 0.5);
-    ctx.moveTo(baseX, y + TRACK_HEIGHT - 0.5);
-    ctx.lineTo(W, y + TRACK_HEIGHT - 0.5);
+    ctx.moveTo(baseX, y + exports.TRACK_HEIGHT - 0.5);
+    ctx.lineTo(W, y + exports.TRACK_HEIGHT - 0.5);
     ctx.stroke();
   }
   for (const clip of track.clips) {
@@ -1013,7 +1351,7 @@ function drawClipAt(ctx, clip, trackIndex, startMs, sources, state, style, thumb
   const startX = baseX + startMs / 1e3 * pxPerSec - scrollLeft;
   const widthPx = Math.max(2, (clip.out - clip.in) / 1e3 * pxPerSec);
   const y = trackY(trackIndex) + CLIP_INSET;
-  const h = TRACK_HEIGHT - CLIP_INSET * 2;
+  const h = exports.TRACK_HEIGHT - CLIP_INSET * 2;
   if (startX + widthPx < baseX || startX > state.viewportWidth) return;
   ctx.save();
   if (dim) ctx.globalAlpha = 0.3;
@@ -1032,7 +1370,7 @@ function drawClipAt(ctx, clip, trackIndex, startMs, sources, state, style, thumb
   roundRect(ctx, startX, y, widthPx, h, 6);
   ctx.clip();
   ctx.translate(startX, y);
-  thumbs.paintStrip(ctx, clip.sourceId, clip.in, clip.out, widthPx);
+  thumbs.paintStrip(ctx, clip.sourceId, clip.in, clip.out, widthPx, h);
   ctx.restore();
   ctx.strokeStyle = "rgba(255,255,255,0.2)";
   ctx.lineWidth = 1;
@@ -1076,18 +1414,18 @@ function drawHeaders(ctx, state, style) {
     const y = trackY(i);
     ctx.strokeStyle = style.border;
     ctx.beginPath();
-    ctx.moveTo(0, y + TRACK_HEIGHT - 0.5);
-    ctx.lineTo(HEADER_WIDTH, y + TRACK_HEIGHT - 0.5);
+    ctx.moveTo(0, y + exports.TRACK_HEIGHT - 0.5);
+    ctx.lineTo(HEADER_WIDTH, y + exports.TRACK_HEIGHT - 0.5);
     ctx.stroke();
     ctx.fillStyle = withAlpha(style.text, 0.7);
     const template = t.kind === "video" ? state.locale.videoTrackLabel : state.locale.audioTrackLabel;
     const label = formatLabel(template, { n: i + 1 });
-    ctx.fillText(label, 12, y + TRACK_HEIGHT / 2);
+    ctx.fillText(label, 12, y + exports.TRACK_HEIGHT / 2);
     if (t.clips.length === 0) {
       const hovered = state.hoveredTrackIndex === i;
       const btnSize = 18;
       const btnLeft = HEADER_WIDTH - btnSize - 6;
-      const btnTop = y + (TRACK_HEIGHT - btnSize) / 2;
+      const btnTop = y + (exports.TRACK_HEIGHT - btnSize) / 2;
       ctx.save();
       if (hovered) {
         ctx.fillStyle = withAlpha(style.text, 0.1);
@@ -1150,11 +1488,11 @@ function drawSnapGuide(ctx, state, style) {
 }
 function drawScrollbarV(ctx, state, style) {
   if (state.scrollbarOpacityY <= 0.01) return;
-  const visibleH = state.viewportHeight - RULER_HEIGHT - SCROLLBAR_THICKNESS;
+  const visibleH = state.viewportHeight - exports.RULER_HEIGHT - SCROLLBAR_THICKNESS;
   const contentH = contentHeight(state.project.tracks, state.isDragging);
   if (contentH <= visibleH) return;
   const trackX = state.viewportWidth - SCROLLBAR_THICKNESS + SCROLLBAR_INSET;
-  const trackY0 = RULER_HEIGHT + SCROLLBAR_INSET;
+  const trackY0 = exports.RULER_HEIGHT + SCROLLBAR_INSET;
   const trackLen = visibleH - SCROLLBAR_INSET * 2;
   const thumbLen = Math.max(
     SCROLLBAR_MIN_THUMB,
@@ -1266,16 +1604,16 @@ function parseColor(s) {
 function hitTest(x, y, ctx) {
   if (y < 0 || x < 0) return { kind: "outside" };
   const baseX = ctx.showHeader ? HEADER_WIDTH : 0;
-  const visibleH = ctx.viewportHeight - RULER_HEIGHT - SCROLLBAR_THICKNESS;
+  const visibleH = ctx.viewportHeight - exports.RULER_HEIGHT - SCROLLBAR_THICKNESS;
   const contentH = contentHeight(ctx.project.tracks, ctx.isDragging);
-  if (contentH > visibleH && x >= ctx.viewportWidth - SCROLLBAR_THICKNESS && x < ctx.viewportWidth && y >= RULER_HEIGHT && y < ctx.viewportHeight - SCROLLBAR_THICKNESS) {
+  if (contentH > visibleH && x >= ctx.viewportWidth - SCROLLBAR_THICKNESS && x < ctx.viewportWidth && y >= exports.RULER_HEIGHT && y < ctx.viewportHeight - SCROLLBAR_THICKNESS) {
     const trackLen = visibleH - SCROLLBAR_INSET * 2;
     const thumbLen = Math.max(
       SCROLLBAR_MIN_THUMB,
       trackLen * (visibleH / contentH)
     );
     const maxScroll = contentH - visibleH;
-    const thumbY = RULER_HEIGHT + SCROLLBAR_INSET + (maxScroll > 0 ? ctx.scrollTop / maxScroll * (trackLen - thumbLen) : 0);
+    const thumbY = exports.RULER_HEIGHT + SCROLLBAR_INSET + (maxScroll > 0 ? ctx.scrollTop / maxScroll * (trackLen - thumbLen) : 0);
     if (y >= thumbY && y <= thumbY + thumbLen) {
       return { kind: "scrollbar-thumb-v", thumbY, thumbLen };
     }
@@ -1296,14 +1634,14 @@ function hitTest(x, y, ctx) {
     }
     return { kind: "scrollbar-track-h", before: x < thumbX };
   }
-  if (ctx.showHeader && x < HEADER_WIDTH && y >= RULER_HEIGHT) {
+  if (ctx.showHeader && x < HEADER_WIDTH && y >= exports.RULER_HEIGHT) {
     const ti2 = trackIndexAt(y, ctx.project.tracks.length, ctx.scrollTop);
     if (ti2 >= 0) {
       const track2 = ctx.project.tracks[ti2];
       if (track2.clips.length === 0) {
         const btnSize = 18;
         const btnLeft = HEADER_WIDTH - btnSize - 6;
-        const btnTop = RULER_HEIGHT + ti2 * 56 + (56 - btnSize) / 2 - ctx.scrollTop;
+        const btnTop = exports.RULER_HEIGHT + ti2 * exports.TRACK_HEIGHT + (exports.TRACK_HEIGHT - btnSize) / 2 - ctx.scrollTop;
         if (x >= btnLeft && x <= btnLeft + btnSize && y >= btnTop && y <= btnTop + btnSize) {
           return { kind: "header-delete", trackIndex: ti2 };
         }
@@ -1312,7 +1650,7 @@ function hitTest(x, y, ctx) {
     }
     return { kind: "outside" };
   }
-  if (y < RULER_HEIGHT) return { kind: "ruler" };
+  if (y < exports.RULER_HEIGHT) return { kind: "ruler" };
   const ti = trackIndexAt(y, ctx.project.tracks.length, ctx.scrollTop);
   if (ti < 0) return { kind: "outside" };
   const track = ctx.project.tracks[ti];
@@ -1560,14 +1898,14 @@ var Timeline = class _Timeline {
       for (const c of t.clips) {
         const x = baseX + c.start / 1e3 * this.pxPerSec - this.scrollLeft;
         const width = (c.out - c.in) / 1e3 * this.pxPerSec;
-        const y = RULER_HEIGHT + ti * TRACK_HEIGHT + 6;
+        const y = exports.RULER_HEIGHT + ti * exports.TRACK_HEIGHT + 6;
         clips.push({
           id: c.id,
           trackIndex: ti,
           x,
           width,
           y,
-          height: TRACK_HEIGHT - 12
+          height: exports.TRACK_HEIGHT - 12
         });
       }
     }
@@ -1597,13 +1935,12 @@ var Timeline = class _Timeline {
     const rect = this.canvas.getBoundingClientRect();
     this.viewportWidth = Math.max(1, Math.floor(rect.width));
     this.viewportHeight = Math.max(
-      Math.floor(rect.height) || RULER_HEIGHT + TRACK_HEIGHT + SCROLLBAR_THICKNESS,
-      RULER_HEIGHT + TRACK_HEIGHT + SCROLLBAR_THICKNESS
+      Math.floor(rect.height) || exports.RULER_HEIGHT + exports.TRACK_HEIGHT + SCROLLBAR_THICKNESS,
+      exports.RULER_HEIGHT + exports.TRACK_HEIGHT + SCROLLBAR_THICKNESS
     );
     const dpr = window.devicePixelRatio || 1;
     this.canvas.width = Math.floor(this.viewportWidth * dpr);
     this.canvas.height = Math.floor(this.viewportHeight * dpr);
-    this.canvas.style.height = `${this.viewportHeight}px`;
     this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
   }
   computeFitScale() {
@@ -1620,7 +1957,7 @@ var Timeline = class _Timeline {
     return Math.max(0, cw - visibleW + 24);
   }
   maxScrollTop() {
-    const visibleH = this.viewportHeight - RULER_HEIGHT - SCROLLBAR_THICKNESS;
+    const visibleH = this.viewportHeight - exports.RULER_HEIGHT - SCROLLBAR_THICKNESS;
     const ch = contentHeight(this.project.tracks, this.drag?.kind === "move");
     return Math.max(0, ch - visibleH);
   }
@@ -1781,8 +2118,8 @@ var Timeline = class _Timeline {
     }
     if (target.kind === "scrollbar-track-v") {
       const page = Math.max(
-        TRACK_HEIGHT,
-        this.viewportHeight - RULER_HEIGHT - SCROLLBAR_THICKNESS
+        exports.TRACK_HEIGHT,
+        this.viewportHeight - exports.RULER_HEIGHT - SCROLLBAR_THICKNESS
       );
       this.scrollTop += target.before ? -page : page;
       this.clampScroll();
@@ -1881,7 +2218,7 @@ var Timeline = class _Timeline {
     const { x, y } = this.localCoords(e);
     if (this.scrollbarDrag) {
       if (this.scrollbarDrag.axis === "v") {
-        const visibleH = this.viewportHeight - RULER_HEIGHT - SCROLLBAR_THICKNESS;
+        const visibleH = this.viewportHeight - exports.RULER_HEIGHT - SCROLLBAR_THICKNESS;
         const contentH = contentHeight(
           this.project.tracks,
           this.drag?.kind === "move"
@@ -2019,8 +2356,9 @@ var Timeline = class _Timeline {
     nextStart = this.applySnap(nextStart, drag.clipId);
     const tiRaw = this.trackIndexAtY(y);
     const phantomIdx = this.project.tracks.length;
-    const phantomScreenY = RULER_HEIGHT + phantomIdx * TRACK_HEIGHT - this.scrollTop;
-    const onPhantom = y >= phantomScreenY && y < phantomScreenY + TRACK_HEIGHT;
+    const phantomScreenY = exports.RULER_HEIGHT + phantomIdx * exports.TRACK_HEIGHT - this.scrollTop;
+    const viewportBottom = this.viewportHeight - SCROLLBAR_THICKNESS;
+    const onPhantom = y >= phantomScreenY && y < Math.max(phantomScreenY + exports.TRACK_HEIGHT, viewportBottom);
     const intendedTrackIndex = onPhantom ? phantomIdx : tiRaw >= 0 ? tiRaw : drag.trackIndex;
     let ghostTrackIndex = intendedTrackIndex;
     let overlap = false;
@@ -2058,7 +2396,7 @@ var Timeline = class _Timeline {
   dragScrollSpeedY() {
     if (!this.drag || this.drag.kind !== "move") return 0;
     const y = this.lastDragPointerY;
-    const top = RULER_HEIGHT;
+    const top = exports.RULER_HEIGHT;
     const bottom = this.viewportHeight - SCROLLBAR_THICKNESS;
     const zone = 36;
     const maxSpeed = 16;
@@ -2785,7 +3123,19 @@ var Editor = class _Editor {
     this.pxPerSec = clampScale2(opts.initialScale ?? DEFAULT_PX_PER_SEC);
     this.snap = opts.initialSnap !== false;
     this.locale = mergeLocale(opts.locale);
+    if (opts.trackHeight != null || opts.rulerHeight != null) {
+      setTimelineMetrics({
+        ...opts.trackHeight != null ? { trackHeight: opts.trackHeight } : {},
+        ...opts.rulerHeight != null ? { rulerHeight: opts.rulerHeight } : {}
+      });
+    }
     applyTheme(this.container, opts.theme);
+    if (opts.timelineHeight != null && opts.timelineHeight > 0) {
+      this.container.style.setProperty(
+        "--aicut-timeline-height",
+        `${Math.round(opts.timelineHeight)}px`
+      );
+    }
     this.ui = new EditorUI(this.container, this, {
       onPlayToggle: () => this.togglePlay(),
       onSplit: () => this.split(),
@@ -2803,7 +3153,11 @@ var Editor = class _Editor {
       onMoveClip: (id, opts2) => this.moveClip(id, opts2),
       onResizeClip: (id, edits) => this.resizeClip(id, edits)
     });
-    this.engine = new PlaybackEngine(this.ui.previewHost, this.project);
+    const engineFactory = opts.playbackEngine ?? ((o) => new HtmlVideoEngine(o));
+    this.engine = engineFactory({
+      host: this.ui.previewHost,
+      project: this.project
+    });
     this.engine.onTimeUpdate = (ms) => {
       this.bus.emit("time", { timeMs: ms });
       this.ui.onTimeTick(ms);
@@ -3348,17 +3702,20 @@ function clampScale2(s) {
   return Math.max(MIN_PX_PER_SEC, Math.min(MAX_PX_PER_SEC, s));
 }
 
+exports.CanvasCompositorEngine = CanvasCompositorEngine;
 exports.Editor = Editor;
 exports.HEADER_WIDTH = HEADER_WIDTH;
-exports.RULER_HEIGHT = RULER_HEIGHT;
-exports.TRACK_HEIGHT = TRACK_HEIGHT;
+exports.HtmlVideoEngine = HtmlVideoEngine;
 exports.Timeline = Timeline;
+exports.canvasCompositorEngineFactory = canvasCompositorEngineFactory;
 exports.createEmptyProject = createEmptyProject;
 exports.createId = createId;
 exports.formatLabel = formatLabel;
+exports.htmlVideoEngineFactory = htmlVideoEngineFactory;
 exports.localeEn = localeEn;
 exports.localeZh = localeZh;
 exports.mergeLocale = mergeLocale;
 exports.normalizeProject = normalizeProject;
+exports.setTimelineMetrics = setTimelineMetrics;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map