@aicut/core 0.1.0

package/dist/index.cjs

@@ -0,0 +1,3344 @@
+'use strict';
+
+// src/events.ts
+var EventBus = class {
+  listeners = /* @__PURE__ */ new Map();
+  on(event, handler) {
+    let set = this.listeners.get(event);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(event, set);
+    }
+    set.add(handler);
+    return () => this.off(event, handler);
+  }
+  off(event, handler) {
+    this.listeners.get(event)?.delete(handler);
+  }
+  emit(event, payload) {
+    const set = this.listeners.get(event);
+    if (!set) return;
+    for (const h of set) {
+      try {
+        h(payload);
+      } catch (err) {
+        console.error("[aicut] event handler threw", event, err);
+      }
+    }
+  }
+  clear() {
+    this.listeners.clear();
+  }
+};
+
+// src/history.ts
+var HistoryStack = class {
+  undoStack = [];
+  redoStack = [];
+  limit;
+  constructor(limit = 50) {
+    this.limit = limit;
+  }
+  /** Call BEFORE applying a mutation. */
+  push(previous) {
+    this.undoStack.push(clone(previous));
+    if (this.undoStack.length > this.limit) this.undoStack.shift();
+    this.redoStack.length = 0;
+  }
+  canUndo() {
+    return this.undoStack.length > 0;
+  }
+  canRedo() {
+    return this.redoStack.length > 0;
+  }
+  /** Returns the project to restore, or null if nothing to undo. */
+  undo(current) {
+    const prev = this.undoStack.pop();
+    if (!prev) return null;
+    this.redoStack.push(clone(current));
+    return prev;
+  }
+  redo(current) {
+    const next = this.redoStack.pop();
+    if (!next) return null;
+    this.undoStack.push(clone(current));
+    return next;
+  }
+  clear() {
+    this.undoStack.length = 0;
+    this.redoStack.length = 0;
+  }
+};
+function clone(p) {
+  return JSON.parse(JSON.stringify(p));
+}
+
+// src/ids.ts
+function createId(prefix = "id") {
+  const rand = Math.random().toString(36).slice(2, 8);
+  const t = Date.now().toString(36).slice(-4);
+  return `${prefix}_${t}${rand}`;
+}
+
+// src/model.ts
+function createEmptyProject() {
+  return {
+    version: 1,
+    sources: [],
+    tracks: [{ id: createId("track"), kind: "video", clips: [] }]
+  };
+}
+function clipDuration(c) {
+  return c.out - c.in;
+}
+function clipEnd(c) {
+  return c.start + clipDuration(c);
+}
+function trackEnd(track) {
+  let max = 0;
+  for (const c of track.clips) {
+    const end = clipEnd(c);
+    if (end > max) max = end;
+  }
+  return max;
+}
+function findClipContaining(track, timeMs) {
+  for (const c of track.clips) {
+    if (timeMs >= c.start && timeMs < clipEnd(c)) return c;
+  }
+  return null;
+}
+function findTrackOfClip(project, clipId) {
+  for (const t of project.tracks) {
+    if (t.clips.some((c) => c.id === clipId)) return t;
+  }
+  return null;
+}
+function normalizeProject(project) {
+  const sources = project.sources.map((s) => ({ ...s }));
+  const tracks = project.tracks.map((t) => {
+    const clips = t.clips.filter((c) => c.out > c.in).map((c) => ({ ...c, id: c.id || createId("clip") })).sort((a, b) => a.start - b.start);
+    return { ...t, id: t.id || createId("track"), clips };
+  });
+  return { version: 1, sources, tracks };
+}
+function splitClipAt(clip, localOffset) {
+  const sourceLen = clip.out - clip.in;
+  if (localOffset <= 0 || localOffset >= sourceLen) return null;
+  const left = { ...clip, out: clip.in + localOffset };
+  const right = {
+    ...clip,
+    id: createId("clip"),
+    in: clip.in + localOffset,
+    start: clip.start + localOffset
+  };
+  return [left, right];
+}
+function projectDuration(project) {
+  let max = 0;
+  for (const t of project.tracks) {
+    const e = trackEnd(t);
+    if (e > max) max = e;
+  }
+  return max;
+}
+
+// src/timeline/layout.ts
+var TRACK_HEIGHT = 56;
+var RULER_HEIGHT = 24;
+var HEADER_WIDTH = 96;
+var HANDLE_PX = 8;
+var CLIP_INSET = 6;
+var SCALE_MIN = 10;
+var SCALE_MAX = 400;
+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);
+}
+function contentWidth(project, pxPerSec) {
+  let max = 0;
+  for (const t of project.tracks) {
+    for (const c of t.clips) {
+      const end = c.start + (c.out - c.in);
+      if (end > max) max = end;
+    }
+  }
+  return max / 1e3 * pxPerSec;
+}
+function trackY(index) {
+  return RULER_HEIGHT + index * 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 (idx < 0 || idx >= trackCount) return -1;
+  return idx;
+}
+function xToMs(x, pxPerSec, scrollLeft, showHeader) {
+  const base = showHeader ? HEADER_WIDTH : 0;
+  return Math.max(0, (x - base + scrollLeft) / pxPerSec * 1e3);
+}
+function niceTickSeconds(targetSec) {
+  if (targetSec <= 0) return 1;
+  const exp = Math.floor(Math.log10(targetSec));
+  const base = targetSec / Math.pow(10, exp);
+  let nice;
+  if (base < 1.5) nice = 1;
+  else if (base < 3) nice = 2;
+  else if (base < 7) nice = 5;
+  else nice = 10;
+  return nice * Math.pow(10, exp);
+}
+function formatRulerLabel(sec) {
+  if (sec < 60) return `${Math.round(sec * 10) / 10}s`;
+  const m = Math.floor(sec / 60);
+  const s = Math.round(sec - m * 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function clampScale(s) {
+  return Math.max(SCALE_MIN, Math.min(SCALE_MAX, s));
+}
+function snapTargets(project, playheadMs, ignoreClipId) {
+  const arr = [0, playheadMs];
+  for (const t of project.tracks) {
+    for (const c of t.clips) {
+      if (c.id === ignoreClipId) continue;
+      arr.push(c.start, c.start + (c.out - c.in));
+    }
+  }
+  return arr;
+}
+function wouldOverlap(track, clipId, start, end) {
+  for (const c of track.clips) {
+    if (c.id === clipId) continue;
+    const cEnd = c.start + (c.out - c.in);
+    if (start < cEnd && end > c.start) return true;
+  }
+  return false;
+}
+function findClip(project, clipId) {
+  for (let i = 0; i < project.tracks.length; i++) {
+    const t = project.tracks[i];
+    const c = t.clips.find((c2) => c2.id === clipId);
+    if (c) return { track: t, clip: c, trackIndex: i };
+  }
+  return null;
+}
+function uncoveredIntervals(project) {
+  const intervals = [];
+  for (const t of project.tracks) {
+    if (t.kind !== "video") continue;
+    for (const c of t.clips) {
+      const end = c.start + (c.out - c.in);
+      if (end > c.start) intervals.push([c.start, end]);
+    }
+  }
+  if (intervals.length === 0) return [];
+  intervals.sort((a, b) => a[0] - b[0]);
+  const merged = [];
+  for (const [s, e] of intervals) {
+    const last = merged[merged.length - 1];
+    if (last && s <= last[1]) last[1] = Math.max(last[1], e);
+    else merged.push([s, e]);
+  }
+  const gaps = [];
+  let cursor = 0;
+  for (const [s, e] of merged) {
+    if (s > cursor) gaps.push([cursor, s]);
+    cursor = e;
+  }
+  return gaps;
+}
+
+// src/playback.ts
+var PlaybackEngine = class {
+  host;
+  mount;
+  videos = /* @__PURE__ */ new Map();
+  project;
+  currentClipId = null;
+  playing = false;
+  timeMs = 0;
+  rafHandle = null;
+  lastFrameTs = 0;
+  /** Public event hooks — set by Editor. */
+  onTimeUpdate;
+  onEnded;
+  onError;
+  onReady;
+  onSourceMetadata;
+  constructor(host, project) {
+    this.host = host;
+    this.project = project;
+    this.mount = document.createElement("div");
+    this.mount.className = "aicut-preview";
+    this.host.appendChild(this.mount);
+    this.syncSources();
+  }
+  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;
+    let 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.startTickLoop();
+  }
+  pause() {
+    if (!this.playing) return;
+    this.playing = false;
+    this.stopTickLoop();
+    if (this.currentClipId) {
+      const clip = this.clipById(this.currentClipId);
+      if (clip) {
+        const v = this.videos.get(clip.sourceId);
+        v?.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();
+      v.remove();
+    }
+    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();
+        v.remove();
+        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;
+      v.style.position = "absolute";
+      v.style.inset = "0";
+      v.style.width = "100%";
+      v.style.height = "100%";
+      v.style.objectFit = "contain";
+      v.style.visibility = "hidden";
+      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.mount.appendChild(v);
+      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) {
+        const v = this.videos.get(prev.sourceId);
+        if (v) {
+          v.pause();
+          v.style.visibility = "hidden";
+        }
+      }
+    }
+    this.currentClipId = clip ? clip.id : null;
+    if (clip) {
+      const v = this.videos.get(clip.sourceId);
+      if (v) v.style.visibility = "visible";
+    }
+  }
+  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;
+  }
+  /**
+   * Find the clip whose timeline range contains `timeMs`, searching
+   * across ALL video tracks. If multiple tracks have a clip at this
+   * moment, the lowest-index track wins (matches the "Track 1 is
+   * background" convention used in the auto-split UX — overlapping
+   * placements would have created a new track on top, but here we
+   * fall back to the underlying clip).
+   */
+  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;
+  }
+  /** Earliest clip starting at-or-after `timeMs` across all video tracks. */
+  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;
+  }
+  /** Max clip end across all video tracks. */
+  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;
+  }
+  startTickLoop() {
+    this.lastFrameTs = performance.now();
+    const tick = (now) => {
+      if (!this.playing) return;
+      const dtMs = now - this.lastFrameTs;
+      this.lastFrameTs = now;
+      this.advance(dtMs);
+      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);
+  }
+};
+
+// src/theme.ts
+var THEME_VARS = {
+  brand: "--color-brand",
+  secondary: "--color-secondary",
+  surface: "--color-surface",
+  dark: "--color-dark",
+  muted: "--color-muted",
+  card: "--color-card",
+  success: "--color-success",
+  warning: "--color-warning",
+  info: "--color-info",
+  error: "--color-error",
+  controlsBg: "--aicut-controls-bg",
+  controlsBorder: "--aicut-controls-border",
+  controlsText: "--aicut-controls-text",
+  controlsHover: "--aicut-controls-hover",
+  controlsActive: "--aicut-controls-active",
+  previewBg: "--aicut-preview-bg",
+  radiusSm: "--aicut-radius-sm",
+  radiusMd: "--aicut-radius-md",
+  radiusLg: "--aicut-radius-lg"
+};
+function applyTheme(root, theme) {
+  if (!theme) return;
+  for (const key of Object.keys(theme)) {
+    const cssVar = THEME_VARS[key];
+    const value = theme[key];
+    if (cssVar && value) root.style.setProperty(cssVar, value);
+  }
+}
+
+// src/i18n.ts
+var localeEn = {
+  undo: "Undo",
+  redo: "Redo",
+  split: "Split",
+  trimLeft: "Trim left edge",
+  trimRight: "Trim right edge",
+  speedComingSoon: "Speed (coming soon)",
+  playPause: "Play / Pause (Space)",
+  fullscreen: "Fullscreen preview",
+  snap: "Snap",
+  snapOnTitle: "Turn off snap",
+  snapOffTitle: "Turn on snap",
+  zoomOut: "Zoom out",
+  zoomIn: "Zoom in",
+  reset: "Reset edits (keep sources)",
+  exitFullscreen: "Exit fullscreen",
+  exitFullscreenTitle: "Exit fullscreen (Esc)",
+  newTrack: "+ New track",
+  videoTrackLabel: "Video {n}",
+  audioTrackLabel: "Audio {n}"
+};
+var localeZh = {
+  undo: "\u64A4\u9500",
+  redo: "\u91CD\u505A",
+  split: "\u5206\u5272",
+  trimLeft: "\u5411\u5DE6\u88C1\u526A",
+  trimRight: "\u5411\u53F3\u88C1\u526A",
+  speedComingSoon: "\u53D8\u901F\uFF08\u5373\u5C06\u5230\u6765\uFF09",
+  playPause: "\u64AD\u653E / \u6682\u505C (Space)",
+  fullscreen: "\u5168\u5C4F\u9884\u89C8",
+  snap: "\u5438\u9644",
+  snapOnTitle: "\u5173\u95ED\u5438\u9644",
+  snapOffTitle: "\u5F00\u542F\u5438\u9644",
+  zoomOut: "\u7F29\u5C0F",
+  zoomIn: "\u653E\u5927",
+  reset: "\u91CD\u7F6E\u7F16\u8F91\uFF08\u4FDD\u7559\u89C6\u9891\u6E90\uFF09",
+  exitFullscreen: "\u9000\u51FA\u5168\u5C4F",
+  exitFullscreenTitle: "\u9000\u51FA\u5168\u5C4F (Esc)",
+  newTrack: "+ \u65B0\u8F68\u9053",
+  videoTrackLabel: "\u89C6\u9891 {n}",
+  audioTrackLabel: "\u97F3\u9891 {n}"
+};
+function mergeLocale(partial) {
+  return partial ? { ...localeEn, ...partial } : localeEn;
+}
+function formatLabel(template, vars) {
+  return template.replace(
+    /\{(\w+)\}/g,
+    (_, k) => k in vars ? String(vars[k]) : `{${k}}`
+  );
+}
+
+// src/ui/thumbnails.ts
+var THUMB_HEIGHT = 44;
+var THUMB_WIDTH = Math.round(THUMB_HEIGHT * (16 / 9));
+var BUCKET_MS = 250;
+var ThumbnailRibbon = class {
+  host;
+  sources = /* @__PURE__ */ new Map();
+  onUpdate;
+  static get THUMB_HEIGHT() {
+    return THUMB_HEIGHT;
+  }
+  static get THUMB_WIDTH() {
+    return THUMB_WIDTH;
+  }
+  constructor(host, onUpdate) {
+    this.host = host;
+    this.onUpdate = onUpdate;
+  }
+  syncSources(sources) {
+    const wanted = new Set(sources.map((s) => s.id));
+    for (const [id, st] of this.sources) {
+      if (!wanted.has(id)) {
+        st.video.remove();
+        for (const bmp of st.cache.values()) bmp.close();
+        this.sources.delete(id);
+      }
+    }
+    for (const src of sources) {
+      if (src.kind !== "video") continue;
+      if (this.sources.has(src.id)) continue;
+      const v = document.createElement("video");
+      v.src = src.url;
+      v.preload = "auto";
+      v.muted = true;
+      v.playsInline = true;
+      v.style.position = "absolute";
+      v.style.left = "-9999px";
+      v.style.top = "-9999px";
+      v.style.width = "160px";
+      v.style.height = "90px";
+      this.host.appendChild(v);
+      const ready = new Promise((resolve) => {
+        if (v.readyState >= 1) resolve();
+        else v.addEventListener("loadedmetadata", () => resolve(), { once: true });
+      });
+      this.sources.set(src.id, {
+        video: v,
+        cache: /* @__PURE__ */ new Map(),
+        inflight: /* @__PURE__ */ new Set(),
+        ready,
+        queue: [],
+        busy: false
+      });
+    }
+  }
+  /**
+   * 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.
+   */
+  paintStrip(ctx, sourceId, sourceInMs, sourceOutMs, pxWidth) {
+    ctx.clearRect(0, 0, pxWidth, THUMB_HEIGHT);
+    const st = this.sources.get(sourceId);
+    if (!st) return;
+    if (sourceOutMs <= sourceInMs || pxWidth <= 0) return;
+    const count = Math.max(1, Math.ceil(pxWidth / THUMB_WIDTH));
+    const spanMs = sourceOutMs - sourceInMs;
+    for (let i = 0; i < count; i++) {
+      const tMs = sourceInMs + spanMs * i / count;
+      const bucket = Math.round(tMs / BUCKET_MS) * BUCKET_MS;
+      const bmp = st.cache.get(bucket);
+      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);
+      } else {
+        ctx.fillStyle = "rgba(255,255,255,0.04)";
+        ctx.fillRect(x, 0, w, THUMB_HEIGHT);
+        this.enqueue(st, bucket);
+      }
+    }
+  }
+  destroy() {
+    for (const st of this.sources.values()) {
+      st.video.remove();
+      for (const bmp of st.cache.values()) bmp.close();
+    }
+    this.sources.clear();
+  }
+  // ---- internals ------------------------------------------------------
+  enqueue(st, bucketMs) {
+    if (st.cache.has(bucketMs) || st.inflight.has(bucketMs)) return;
+    st.inflight.add(bucketMs);
+    st.queue.push(bucketMs);
+    void this.drain(st);
+  }
+  async drain(st) {
+    if (st.busy) return;
+    st.busy = true;
+    try {
+      await st.ready;
+      while (st.queue.length > 0) {
+        const t = st.queue.shift();
+        try {
+          const bmp = await this.extractFrame(st.video, t);
+          st.cache.set(t, bmp);
+        } catch {
+        } finally {
+          st.inflight.delete(t);
+        }
+        this.onUpdate();
+      }
+    } finally {
+      st.busy = false;
+    }
+  }
+  extractFrame(video, timeMs) {
+    const targetSec = Math.max(
+      0,
+      Math.min((video.duration || Infinity) - 0.05, timeMs / 1e3)
+    );
+    return new Promise((resolve, reject) => {
+      const onSeeked = () => {
+        try {
+          const cnv = document.createElement("canvas");
+          cnv.width = THUMB_WIDTH;
+          cnv.height = THUMB_HEIGHT;
+          const cx = cnv.getContext("2d");
+          if (!cx) return reject(new Error("no 2d ctx"));
+          cx.drawImage(video, 0, 0, THUMB_WIDTH, THUMB_HEIGHT);
+          createImageBitmap(cnv).then(resolve, reject);
+        } catch (e) {
+          reject(e);
+        }
+      };
+      video.addEventListener("seeked", onSeeked, { once: true });
+      try {
+        video.currentTime = targetSec;
+      } catch (e) {
+        video.removeEventListener("seeked", onSeeked);
+        reject(e);
+      }
+    });
+  }
+};
+
+// src/ui/format.ts
+function fmtClock(ms) {
+  const total = Math.max(0, Math.round(ms / 1e3));
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${pad2(m)}:${pad2(s)}`;
+}
+function fmtClockMs(ms) {
+  const total = Math.max(0, Math.round(ms));
+  const m = Math.floor(total / 6e4);
+  const s = Math.floor(total % 6e4 / 1e3);
+  const r = total % 1e3;
+  return `${pad2(m)}:${pad2(s)}.${pad3(r)}`;
+}
+var pad2 = (n) => n < 10 ? `0${n}` : `${n}`;
+var pad3 = (n) => n.toString().padStart(3, "0");
+
+// src/timeline/draw.ts
+function drawAll(ctx, state, style, thumbs) {
+  const { viewportWidth: W, viewportHeight: H } = state;
+  ctx.fillStyle = style.bg;
+  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;
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(baseX, RULER_HEIGHT, trackAreaW, trackAreaH);
+  ctx.clip();
+  ctx.translate(0, -state.scrollTop);
+  drawTracks(ctx, state, style, thumbs);
+  if (state.isDragging) {
+    drawPhantomRow(ctx, state.project.tracks.length, baseX, state, style);
+  }
+  if (state.dragGhost) drawDragGhost(ctx, state, style, thumbs);
+  ctx.restore();
+  if (state.showHeader) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, RULER_HEIGHT, HEADER_WIDTH, trackAreaH);
+    ctx.clip();
+    ctx.translate(0, -state.scrollTop);
+    drawHeaders(ctx, state, style);
+    ctx.restore();
+  }
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(baseX, 0, trackAreaW, RULER_HEIGHT);
+  ctx.clip();
+  drawRuler(ctx, state, style);
+  ctx.restore();
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(baseX, 0, trackAreaW, H - SCROLLBAR_THICKNESS);
+  ctx.clip();
+  drawCoverageGaps(ctx, state);
+  ctx.restore();
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(baseX, 0, trackAreaW, H - SCROLLBAR_THICKNESS);
+  ctx.clip();
+  drawSnapGuide(ctx, state, style);
+  drawPlayhead(ctx, state, style);
+  ctx.restore();
+  drawScrollbarV(ctx, state, style);
+  drawScrollbarH(ctx, state, style);
+}
+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;
+  for (const [s, e] of gaps) {
+    const x1 = Math.max(
+      baseX,
+      baseX + s / 1e3 * state.pxPerSec - state.scrollLeft
+    );
+    const x2 = Math.min(
+      state.viewportWidth,
+      baseX + e / 1e3 * state.pxPerSec - state.scrollLeft
+    );
+    if (x2 <= x1) continue;
+    ctx.fillStyle = "rgba(250, 167, 0, 0.35)";
+    ctx.fillRect(x1, 0, x2 - x1, RULER_HEIGHT);
+    ctx.fillStyle = "rgba(250, 167, 0, 0.12)";
+    ctx.fillRect(x1, 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.stroke();
+    ctx.restore();
+  }
+}
+function drawDragGhost(ctx, state, style, thumbs) {
+  const ghost = state.dragGhost;
+  let real = null;
+  for (const t of state.project.tracks) {
+    const c = t.clips.find((c2) => c2.id === ghost.clipId);
+    if (c) {
+      real = c;
+      break;
+    }
+  }
+  if (!real) return;
+  const baseX = state.showHeader ? HEADER_WIDTH : 0;
+  const widthPx = Math.max(2, (real.out - real.in) / 1e3 * state.pxPerSec);
+  const startX = baseX + ghost.ghostStart / 1e3 * state.pxPerSec - state.scrollLeft;
+  const overlap = ghost.wouldOverlap;
+  drawDropOutline(
+    ctx,
+    startX,
+    overlap ? state.project.tracks.length : ghost.ghostTrackIndex,
+    widthPx,
+    style.info,
+    overlap
+  );
+  ctx.save();
+  ctx.globalAlpha = 0.85;
+  drawClipAt(
+    ctx,
+    real,
+    overlap ? state.project.tracks.length : ghost.ghostTrackIndex,
+    ghost.ghostStart,
+    state.project.sources,
+    state,
+    style,
+    thumbs,
+    /* dim = */
+    false,
+    /* warn = */
+    overlap
+  );
+  ctx.restore();
+}
+function drawDropOutline(ctx, startX, trackIndex, widthPx, color, emphasized) {
+  const y = trackY(trackIndex) + CLIP_INSET - 1;
+  const h = TRACK_HEIGHT - CLIP_INSET * 2 + 2;
+  ctx.save();
+  if (emphasized) {
+    ctx.shadowColor = withAlpha(color, 0.45);
+    ctx.shadowBlur = 6;
+  }
+  ctx.strokeStyle = withAlpha(color, emphasized ? 0.9 : 0.7);
+  ctx.lineWidth = 1;
+  roundRect(ctx, startX - 0.5, y, widthPx + 1, h, 6);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawPhantomRow(ctx, trackIndex, baseX, state, style) {
+  const y = trackY(trackIndex);
+  const w = state.viewportWidth - baseX;
+  ctx.save();
+  ctx.fillStyle = withAlpha(style.info, 0.04);
+  ctx.fillRect(baseX, y, w, 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.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.restore();
+}
+function drawRuler(ctx, state, style) {
+  const { pxPerSec, scrollLeft, viewportWidth: W } = state;
+  const baseX = state.showHeader ? HEADER_WIDTH : 0;
+  const rulerW = W - baseX;
+  ctx.fillStyle = style.bg;
+  ctx.fillRect(baseX, 0, rulerW, 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.stroke();
+  const minPx = 80;
+  const tickSec = niceTickSeconds(minPx / pxPerSec);
+  const subSec = tickSec / 5;
+  const firstVisibleSec = Math.max(0, scrollLeft / pxPerSec - subSec);
+  const lastVisibleSec = (scrollLeft + rulerW) / pxPerSec + subSec;
+  ctx.textBaseline = "bottom";
+  ctx.font = "10px system-ui, -apple-system, sans-serif";
+  const startStep = Math.floor(firstVisibleSec / subSec);
+  const endStep = Math.ceil(lastVisibleSec / subSec);
+  for (let i = startStep; i <= endStep; i++) {
+    const s = i * subSec;
+    if (s < 0) continue;
+    const x = baseX + s * pxPerSec - scrollLeft;
+    if (x < baseX || x > W) continue;
+    const isMajor = Math.abs(s / tickSec % 1) < 1e-3;
+    ctx.strokeStyle = isMajor ? withAlpha(style.text, 0.5) : withAlpha(style.text, 0.25);
+    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.stroke();
+    if (isMajor) {
+      ctx.fillStyle = withAlpha(style.textMuted, 0.85);
+      ctx.fillText(formatRulerLabel(s), x + 3, RULER_HEIGHT - 12);
+    }
+  }
+}
+function drawTracks(ctx, state, style, thumbs) {
+  const { project } = state;
+  for (let ti = 0; ti < project.tracks.length; ti++) {
+    drawTrackRow(ctx, ti, project.tracks[ti], project.sources, state, style, thumbs);
+  }
+}
+function drawTrackRow(ctx, trackIndex, track, sources, state, style, thumbs) {
+  const { viewportWidth: W } = state;
+  const baseX = state.showHeader ? HEADER_WIDTH : 0;
+  const y = trackY(trackIndex);
+  ctx.fillStyle = style.trackBg;
+  ctx.fillRect(baseX, y, W - baseX, 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.stroke();
+  if (state.dropTargetTrackIndex === trackIndex) {
+    ctx.strokeStyle = withAlpha(style.info, 0.45);
+    ctx.lineWidth = 1;
+    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.stroke();
+  }
+  for (const clip of track.clips) {
+    const dim = state.dragGhost?.clipId === clip.id;
+    drawClipAt(
+      ctx,
+      clip,
+      trackIndex,
+      clip.start,
+      sources,
+      state,
+      style,
+      thumbs,
+      dim,
+      false
+    );
+  }
+}
+function drawClipAt(ctx, clip, trackIndex, startMs, sources, state, style, thumbs, dim, warn) {
+  const { pxPerSec, scrollLeft } = state;
+  const baseX = state.showHeader ? HEADER_WIDTH : 0;
+  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;
+  if (startX + widthPx < baseX || startX > state.viewportWidth) return;
+  ctx.save();
+  if (dim) ctx.globalAlpha = 0.3;
+  const grad = ctx.createLinearGradient(0, y, 0, y + h);
+  if (warn) {
+    grad.addColorStop(0, "rgba(250, 175, 70, 0.7)");
+    grad.addColorStop(1, "rgba(240, 145, 50, 0.62)");
+  } else {
+    grad.addColorStop(0, withAlpha(style.brand, 0.8));
+    grad.addColorStop(1, withAlpha(style.brandTo, 0.7));
+  }
+  ctx.fillStyle = grad;
+  roundRect(ctx, startX, y, widthPx, h, 6);
+  ctx.fill();
+  ctx.save();
+  roundRect(ctx, startX, y, widthPx, h, 6);
+  ctx.clip();
+  ctx.translate(startX, y);
+  thumbs.paintStrip(ctx, clip.sourceId, clip.in, clip.out, widthPx);
+  ctx.restore();
+  ctx.strokeStyle = "rgba(255,255,255,0.2)";
+  ctx.lineWidth = 1;
+  roundRect(ctx, startX + 0.5, y + 0.5, widthPx - 1, h - 1, 6);
+  ctx.stroke();
+  const src = sources.find((s) => s.id === clip.sourceId);
+  const label = src?.name ?? src?.url.split("/").pop() ?? clip.id;
+  ctx.font = "11px system-ui, -apple-system, sans-serif";
+  ctx.textBaseline = "top";
+  ctx.fillStyle = "rgba(0,0,0,0.6)";
+  ctx.fillText(label, startX + 9, y + 5);
+  ctx.fillStyle = "#fff";
+  ctx.fillText(label, startX + 8, y + 4);
+  if (!dim && state.selectedClipId === clip.id) {
+    ctx.strokeStyle = style.selectedRing;
+    ctx.lineWidth = 2;
+    roundRect(ctx, startX - 1, y - 1, widthPx + 2, h + 2, 7);
+    ctx.stroke();
+  }
+  const showHandles = !dim && (state.selectedClipId === clip.id || state.hoveredClipId === clip.id);
+  if (showHandles) {
+    ctx.fillStyle = "rgba(255,255,255,0.75)";
+    ctx.fillRect(startX + 2, y + 12, 2, h - 24);
+    ctx.fillRect(startX + widthPx - 4, y + 12, 2, h - 24);
+  }
+  ctx.restore();
+}
+function drawHeaders(ctx, state, style) {
+  ctx.fillStyle = style.bg;
+  ctx.fillRect(0, 0, HEADER_WIDTH, state.viewportHeight);
+  ctx.strokeStyle = style.border;
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(HEADER_WIDTH - 0.5, 0);
+  ctx.lineTo(HEADER_WIDTH - 0.5, state.viewportHeight);
+  ctx.stroke();
+  ctx.textBaseline = "middle";
+  ctx.font = "11px system-ui, -apple-system, sans-serif";
+  for (let i = 0; i < state.project.tracks.length; i++) {
+    const t = state.project.tracks[i];
+    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.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);
+    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;
+      ctx.save();
+      if (hovered) {
+        ctx.fillStyle = withAlpha(style.text, 0.1);
+        roundRect(ctx, btnLeft, btnTop, btnSize, btnSize, 5);
+        ctx.fill();
+      }
+      ctx.strokeStyle = withAlpha(style.text, hovered ? 0.85 : 0.4);
+      ctx.lineWidth = 1.4;
+      const pad = 5;
+      ctx.beginPath();
+      ctx.moveTo(btnLeft + pad, btnTop + pad);
+      ctx.lineTo(btnLeft + btnSize - pad, btnTop + btnSize - pad);
+      ctx.moveTo(btnLeft + btnSize - pad, btnTop + pad);
+      ctx.lineTo(btnLeft + pad, btnTop + btnSize - pad);
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+}
+function drawPlayhead(ctx, state, style) {
+  const baseX = state.showHeader ? HEADER_WIDTH : 0;
+  const x = baseX + state.timeMs / 1e3 * state.pxPerSec - state.scrollLeft;
+  if (x < baseX - 2 || x > state.viewportWidth + 2) return;
+  ctx.strokeStyle = style.playhead;
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(x, 0);
+  ctx.lineTo(x, state.viewportHeight);
+  ctx.stroke();
+  const label = fmtClockMs(state.timeMs);
+  ctx.font = "10px system-ui, -apple-system, sans-serif";
+  const padX = 6;
+  const w = ctx.measureText(label).width + padX * 2;
+  const h = 14;
+  const bx = x - w / 2;
+  const by = 2;
+  ctx.fillStyle = style.playhead;
+  roundRect(ctx, bx, by, w, h, 4);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.moveTo(x - 4, by + h);
+  ctx.lineTo(x + 4, by + h);
+  ctx.lineTo(x, by + h + 4);
+  ctx.closePath();
+  ctx.fill();
+  ctx.fillStyle = "#fff";
+  ctx.textBaseline = "middle";
+  ctx.fillText(label, bx + padX, by + h / 2);
+}
+function drawSnapGuide(ctx, state, style) {
+  if (state.snapX == null) return;
+  ctx.strokeStyle = style.info;
+  ctx.lineWidth = 1;
+  ctx.setLineDash([3, 3]);
+  ctx.beginPath();
+  ctx.moveTo(state.snapX + 0.5, 0);
+  ctx.lineTo(state.snapX + 0.5, state.viewportHeight);
+  ctx.stroke();
+  ctx.setLineDash([]);
+}
+function drawScrollbarV(ctx, state, style) {
+  if (state.scrollbarOpacityY <= 0.01) return;
+  const visibleH = state.viewportHeight - 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 trackLen = visibleH - SCROLLBAR_INSET * 2;
+  const thumbLen = Math.max(
+    SCROLLBAR_MIN_THUMB,
+    trackLen * (visibleH / contentH)
+  );
+  const maxScroll = contentH - visibleH;
+  const thumbY = trackY0 + (maxScroll > 0 ? state.scrollTop / maxScroll * (trackLen - thumbLen) : 0);
+  paintScrollbar(
+    ctx,
+    style,
+    trackX,
+    trackY0,
+    SCROLLBAR_THICKNESS - SCROLLBAR_INSET * 2,
+    trackLen,
+    thumbY - trackY0,
+    thumbLen,
+    state.scrollbarOpacityY,
+    state.scrollbarActiveY,
+    "v"
+  );
+}
+function drawScrollbarH(ctx, state, style) {
+  if (state.scrollbarOpacityX <= 0.01) return;
+  const baseX = state.showHeader ? HEADER_WIDTH : 0;
+  const visibleW = state.viewportWidth - baseX - SCROLLBAR_THICKNESS;
+  const contentW = contentWidth(state.project, state.pxPerSec);
+  if (contentW <= visibleW) return;
+  const trackY0 = state.viewportHeight - SCROLLBAR_THICKNESS + SCROLLBAR_INSET;
+  const trackX0 = baseX + SCROLLBAR_INSET;
+  const trackLen = visibleW - SCROLLBAR_INSET * 2;
+  const thumbLen = Math.max(
+    SCROLLBAR_MIN_THUMB,
+    trackLen * (visibleW / contentW)
+  );
+  const maxScroll = contentW - visibleW;
+  const thumbX = trackX0 + (maxScroll > 0 ? state.scrollLeft / maxScroll * (trackLen - thumbLen) : 0);
+  paintScrollbar(
+    ctx,
+    style,
+    trackX0,
+    trackY0,
+    trackLen,
+    SCROLLBAR_THICKNESS - SCROLLBAR_INSET * 2,
+    thumbX - trackX0,
+    thumbLen,
+    state.scrollbarOpacityX,
+    state.scrollbarActiveX,
+    "h"
+  );
+}
+function paintScrollbar(ctx, style, trackX, trackY0, trackW, trackH, thumbOffset, thumbLen, opacity, active, axis) {
+  ctx.save();
+  ctx.globalAlpha = opacity;
+  ctx.fillStyle = withAlpha(style.text, 0.06);
+  roundRect(ctx, trackX, trackY0, trackW, trackH, Math.min(trackW, trackH) / 2);
+  ctx.fill();
+  ctx.fillStyle = active ? withAlpha(style.info, 0.85) : withAlpha(style.text, 0.4);
+  if (axis === "v") {
+    roundRect(ctx, trackX, trackY0 + thumbOffset, trackW, thumbLen, trackW / 2);
+  } else {
+    roundRect(ctx, trackX + thumbOffset, trackY0, thumbLen, trackH, trackH / 2);
+  }
+  ctx.fill();
+  ctx.restore();
+}
+function roundRect(ctx, x, y, w, h, r) {
+  const rr = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + rr, y);
+  ctx.lineTo(x + w - rr, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + rr);
+  ctx.lineTo(x + w, y + h - rr);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - rr, y + h);
+  ctx.lineTo(x + rr, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - rr);
+  ctx.lineTo(x, y + rr);
+  ctx.quadraticCurveTo(x, y, x + rr, y);
+  ctx.closePath();
+}
+function withAlpha(color, alpha) {
+  const c = parseColor(color);
+  if (!c) return color;
+  return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${alpha})`;
+}
+function parseColor(s) {
+  if (s.startsWith("#")) {
+    const hex = s.slice(1);
+    if (hex.length === 3) {
+      return [
+        parseInt(hex[0] + hex[0], 16),
+        parseInt(hex[1] + hex[1], 16),
+        parseInt(hex[2] + hex[2], 16)
+      ];
+    }
+    if (hex.length === 6) {
+      return [
+        parseInt(hex.slice(0, 2), 16),
+        parseInt(hex.slice(2, 4), 16),
+        parseInt(hex.slice(4, 6), 16)
+      ];
+    }
+  }
+  const m = s.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (m) return [Number(m[1]), Number(m[2]), Number(m[3])];
+  return null;
+}
+
+// src/timeline/hit.ts
+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 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) {
+    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);
+    if (y >= thumbY && y <= thumbY + thumbLen) {
+      return { kind: "scrollbar-thumb-v", thumbY, thumbLen };
+    }
+    return { kind: "scrollbar-track-v", before: y < thumbY };
+  }
+  const visibleW = ctx.viewportWidth - baseX - SCROLLBAR_THICKNESS;
+  const contentW = contentWidth(ctx.project, ctx.pxPerSec);
+  if (contentW > visibleW && y >= ctx.viewportHeight - SCROLLBAR_THICKNESS && y < ctx.viewportHeight && x >= baseX && x < ctx.viewportWidth - SCROLLBAR_THICKNESS) {
+    const trackLen = visibleW - SCROLLBAR_INSET * 2;
+    const thumbLen = Math.max(
+      SCROLLBAR_MIN_THUMB,
+      trackLen * (visibleW / contentW)
+    );
+    const maxScroll = contentW - visibleW;
+    const thumbX = baseX + SCROLLBAR_INSET + (maxScroll > 0 ? ctx.scrollLeft / maxScroll * (trackLen - thumbLen) : 0);
+    if (x >= thumbX && x <= thumbX + thumbLen) {
+      return { kind: "scrollbar-thumb-h", thumbX, thumbLen };
+    }
+    return { kind: "scrollbar-track-h", before: x < thumbX };
+  }
+  if (ctx.showHeader && x < HEADER_WIDTH && y >= 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;
+        if (x >= btnLeft && x <= btnLeft + btnSize && y >= btnTop && y <= btnTop + btnSize) {
+          return { kind: "header-delete", trackIndex: ti2 };
+        }
+      }
+      return { kind: "header", trackIndex: ti2 };
+    }
+    return { kind: "outside" };
+  }
+  if (y < 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];
+  const ms = xToMs(x, ctx.pxPerSec, ctx.scrollLeft, ctx.showHeader);
+  for (const clip of track.clips) {
+    const start = clip.start;
+    const end = clip.start + (clip.out - clip.in);
+    const startX = msToXLocal(start, ctx);
+    const endX = msToXLocal(end, ctx);
+    if (x >= startX - HANDLE_PX && x <= startX + HANDLE_PX) {
+      return { kind: "clip-handle-left", trackIndex: ti, clipId: clip.id };
+    }
+    if (x >= endX - HANDLE_PX && x <= endX + HANDLE_PX) {
+      return { kind: "clip-handle-right", trackIndex: ti, clipId: clip.id };
+    }
+    if (ms >= start && ms < end) {
+      return { kind: "clip", trackIndex: ti, clipId: clip.id };
+    }
+  }
+  return { kind: "track-empty", trackIndex: ti };
+}
+function msToXLocal(ms, ctx) {
+  const base = ctx.showHeader ? HEADER_WIDTH : 0;
+  return base + ms / 1e3 * ctx.pxPerSec - ctx.scrollLeft;
+}
+
+// src/timeline/index.ts
+var SNAP_PX = 8;
+var DEFAULT_SCALE = 80;
+var WHEEL_ZOOM_RATE = 0.012;
+var SCROLLBAR_FADE_HOLD_MS = 800;
+var SCROLLBAR_FADE_OUT_MS = 400;
+var Timeline = class _Timeline {
+  root;
+  opts;
+  canvas;
+  ctx;
+  thumbs;
+  hiddenHost;
+  toolbarEl = null;
+  /**
+   * Public flex slot at the left of the top toolbar. `null` when
+   * `toolbar` is disabled. Hosts append their own elements (e.g. a
+   * size/aspect dropdown). React/Vue wrappers portal children here.
+   */
+  toolbarLeft = null;
+  /** Right-side counterpart — conventionally used for export/save. */
+  toolbarRight = null;
+  project;
+  pxPerSec;
+  timeMs;
+  selectedClipId;
+  snapEnabled;
+  showHeader;
+  readOnly;
+  autoFitEnabled;
+  locale;
+  scrollLeft = 0;
+  scrollTop = 0;
+  viewportWidth = 0;
+  viewportHeight = 0;
+  /**
+   * `Date.now()` of the last interaction with each scrollbar (scroll
+   * change OR hover OR drag). Drives the macOS-style fade — bars are
+   * fully opaque for SCROLLBAR_FADE_HOLD_MS after activity, then ease
+   * out over the next SCROLLBAR_FADE_OUT_MS.
+   */
+  lastScrollInteractY = 0;
+  lastScrollInteractX = 0;
+  hoverScrollbarY = false;
+  hoverScrollbarX = false;
+  /** When set, pointer is dragging a scrollbar thumb. */
+  scrollbarDrag = null;
+  hoveredClipId = null;
+  hoveredTrackIndex = null;
+  hoverCursor = "default";
+  dropTargetTrackIndex = null;
+  snapX = null;
+  drag = null;
+  /**
+   * In-flight ghost of the clip being dragged. Decoupled from the
+   * project data so the data stays clean and undo-able only commits
+   * on release. Has both the proposed `start` (X) and `trackIndex`
+   * (Y), so the rendered ghost follows the cursor across tracks.
+   */
+  dragGhost = null;
+  /**
+   * Most recent local pointer coords during a move drag — used by the
+   * edge-autoscroll loop to re-run drop-target resolution between
+   * pointermove events while scrollTop ticks under a stationary cursor.
+   */
+  lastDragPointerX = 0;
+  lastDragPointerY = 0;
+  dragScrollRafPending = false;
+  rafPending = false;
+  hasAutoFitted = false;
+  resizeObs = null;
+  destroyed = false;
+  static create(opts) {
+    return new _Timeline(opts);
+  }
+  constructor(opts) {
+    this.opts = opts;
+    this.root = opts.container;
+    this.project = normalizeProject(opts.project);
+    this.pxPerSec = clampScale(opts.pxPerSec ?? DEFAULT_SCALE);
+    this.timeMs = opts.time ?? 0;
+    this.selectedClipId = opts.selectedClipId ?? null;
+    this.snapEnabled = opts.snap !== false;
+    this.showHeader = opts.showHeader !== false;
+    this.readOnly = opts.readOnly === true;
+    this.autoFitEnabled = opts.autoFit !== false;
+    this.locale = mergeLocale(opts.locale);
+    this.root.classList.add("aicut-timeline-canvas");
+    this.root.innerHTML = "";
+    this.root.style.position = this.root.style.position || "relative";
+    if (opts.toolbar) {
+      this.root.style.display = "flex";
+      this.root.style.flexDirection = "column";
+      const bar = document.createElement("div");
+      bar.className = "aicut-timeline-toolbar";
+      const left = document.createElement("div");
+      left.className = "aicut-timeline-toolbar-left";
+      const right = document.createElement("div");
+      right.className = "aicut-timeline-toolbar-right";
+      bar.appendChild(left);
+      bar.appendChild(right);
+      this.root.appendChild(bar);
+      this.toolbarEl = bar;
+      this.toolbarLeft = left;
+      this.toolbarRight = right;
+    }
+    this.canvas = document.createElement("canvas");
+    this.canvas.style.display = "block";
+    this.canvas.style.width = "100%";
+    if (opts.toolbar) {
+      this.canvas.style.flex = "1 1 0";
+      this.canvas.style.minHeight = "0";
+    } else {
+      this.canvas.style.height = "100%";
+    }
+    this.canvas.style.touchAction = "none";
+    this.root.appendChild(this.canvas);
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) throw new Error("2d context unavailable");
+    this.ctx = ctx;
+    this.hiddenHost = document.createElement("div");
+    this.hiddenHost.style.position = "absolute";
+    this.hiddenHost.style.overflow = "hidden";
+    this.hiddenHost.style.width = "0";
+    this.hiddenHost.style.height = "0";
+    this.hiddenHost.style.pointerEvents = "none";
+    this.root.appendChild(this.hiddenHost);
+    this.thumbs = new ThumbnailRibbon(
+      this.hiddenHost,
+      () => this.scheduleRender()
+    );
+    this.thumbs.syncSources(this.project.sources);
+    this.attachPointer();
+    this.attachWheel();
+    this.attachResize();
+    this.resizeCanvas();
+    this.scheduleRender();
+  }
+  // ---- public API -----------------------------------------------------
+  /**
+   * Sync the project data. Does NOT reset the auto-fit latch — that's
+   * what caused the editor-side zoom feedback loop: every Editor
+   * mutation called `ui.render() → timeline.setProject()` which used
+   * to reset auto-fit, refit on the next frame, emit a new scale,
+   * which re-rendered… and round we went. Callers that genuinely
+   * want a re-fit (e.g. when the host swaps to a brand-new project)
+   * should call `refit()` explicitly.
+   */
+  setProject(p) {
+    this.project = normalizeProject(p);
+    this.thumbs.syncSources(this.project.sources);
+    this.scheduleRender();
+  }
+  /** Force a re-fit on the next render. */
+  refit() {
+    if (!this.autoFitEnabled) return;
+    this.hasAutoFitted = false;
+    this.scheduleRender();
+  }
+  getProject() {
+    return JSON.parse(JSON.stringify(this.project));
+  }
+  setTime(timeMs) {
+    this.timeMs = Math.max(0, timeMs);
+    this.scheduleRender();
+  }
+  getTime() {
+    return this.timeMs;
+  }
+  setScale(pxPerSec) {
+    const next = clampScale(pxPerSec);
+    if (next === this.pxPerSec) return;
+    this.pxPerSec = next;
+    this.hasAutoFitted = true;
+    this.scheduleRender();
+  }
+  getScale() {
+    return this.pxPerSec;
+  }
+  setSelection(id) {
+    if (id === this.selectedClipId) return;
+    this.selectedClipId = id;
+    this.scheduleRender();
+  }
+  getSelection() {
+    return this.selectedClipId;
+  }
+  setSnap(snap) {
+    this.snapEnabled = snap;
+  }
+  getSnap() {
+    return this.snapEnabled;
+  }
+  setLocale(locale) {
+    this.locale = mergeLocale(locale);
+    this.scheduleRender();
+  }
+  /** Fit the project's full duration into the current viewport width. */
+  fitToWindow() {
+    const fit = this.computeFitScale();
+    if (fit == null) return;
+    this.pxPerSec = fit;
+    this.hasAutoFitted = true;
+    this.scrollLeft = 0;
+    this.opts.onScaleChange?.(this.pxPerSec);
+    this.scheduleRender();
+  }
+  /**
+   * Test/debug introspection — pixel coordinates of every visible clip,
+   * the playhead, and the headers. Because clips are canvas-painted
+   * there are no DOM nodes to query in e2e; tests use this instead.
+   * Exposed publicly so React/Vue wrappers can forward it to a ref.
+   */
+  getDebugInfo() {
+    const baseX = this.showHeader ? HEADER_WIDTH : 0;
+    const clips = [];
+    for (let ti = 0; ti < this.project.tracks.length; ti++) {
+      const t = this.project.tracks[ti];
+      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;
+        clips.push({
+          id: c.id,
+          trackIndex: ti,
+          x,
+          width,
+          y,
+          height: TRACK_HEIGHT - 12
+        });
+      }
+    }
+    return {
+      pxPerSec: this.pxPerSec,
+      scrollLeft: this.scrollLeft,
+      viewportWidth: this.viewportWidth,
+      viewportHeight: this.viewportHeight,
+      playheadX: baseX + this.timeMs / 1e3 * this.pxPerSec - this.scrollLeft,
+      clips
+    };
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.resizeObs?.disconnect();
+    this.thumbs.destroy();
+    this.root.innerHTML = "";
+    this.root.classList.remove("aicut-timeline-canvas");
+    if (this.opts.toolbar) {
+      this.root.style.display = "";
+      this.root.style.flexDirection = "";
+    }
+  }
+  // ---- size / layout --------------------------------------------------
+  resizeCanvas() {
+    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
+    );
+    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() {
+    const baseX = this.showHeader ? HEADER_WIDTH : 0;
+    const w = this.viewportWidth - baseX - 24;
+    const dur = projectDuration(this.project);
+    if (w <= 0 || dur <= 0) return null;
+    return clampScale(w / (dur / 1e3));
+  }
+  maxScrollLeft() {
+    const baseX = this.showHeader ? HEADER_WIDTH : 0;
+    const visibleW = this.viewportWidth - baseX - SCROLLBAR_THICKNESS;
+    const cw = contentWidth(this.project, this.pxPerSec);
+    return Math.max(0, cw - visibleW + 24);
+  }
+  maxScrollTop() {
+    const visibleH = this.viewportHeight - RULER_HEIGHT - SCROLLBAR_THICKNESS;
+    const ch = contentHeight(this.project.tracks, this.drag?.kind === "move");
+    return Math.max(0, ch - visibleH);
+  }
+  clampScroll() {
+    this.scrollLeft = Math.max(0, Math.min(this.scrollLeft, this.maxScrollLeft()));
+    this.scrollTop = Math.max(0, Math.min(this.scrollTop, this.maxScrollTop()));
+  }
+  /**
+   * Scrollbar opacity = full for SCROLLBAR_FADE_HOLD_MS after last
+   * interaction, then linearly fades to 0 over SCROLLBAR_FADE_OUT_MS.
+   * Hovering or actively dragging the bar pins opacity at 1. Returns
+   * 0 if the bar isn't needed (content fits).
+   */
+  scrollbarOpacity(axis) {
+    if (axis === "v" && this.maxScrollTop() <= 0) return 0;
+    if (axis === "h" && this.maxScrollLeft() <= 0) return 0;
+    if (axis === "v" && (this.hoverScrollbarY || this.scrollbarDrag?.axis === "v") || axis === "h" && (this.hoverScrollbarX || this.scrollbarDrag?.axis === "h")) {
+      return 1;
+    }
+    const last = axis === "v" ? this.lastScrollInteractY : this.lastScrollInteractX;
+    const elapsed = Date.now() - last;
+    if (elapsed < SCROLLBAR_FADE_HOLD_MS) return 1;
+    const fade = elapsed - SCROLLBAR_FADE_HOLD_MS;
+    if (fade >= SCROLLBAR_FADE_OUT_MS) return 0;
+    return 1 - fade / SCROLLBAR_FADE_OUT_MS;
+  }
+  /** Mark a scrollbar axis as just-touched so its fade timer restarts. */
+  touchScrollbar(axis) {
+    if (axis === "v") this.lastScrollInteractY = Date.now();
+    else this.lastScrollInteractX = Date.now();
+    this.scheduleRender();
+  }
+  // ---- rendering ------------------------------------------------------
+  scheduleRender() {
+    if (this.rafPending) return;
+    this.rafPending = true;
+    requestAnimationFrame(() => {
+      this.rafPending = false;
+      if (this.destroyed) return;
+      this.maybeAutoFit();
+      this.resizeCanvas();
+      this.clampScroll();
+      drawAll(
+        this.ctx,
+        this.buildDrawState(),
+        this.readStyle(),
+        this.thumbs
+      );
+      this.canvas.style.cursor = this.hoverCursor;
+      this.maybeContinueFade();
+    });
+  }
+  /**
+   * Keep the raf loop alive while a scrollbar is still in its HOLD or
+   * fade-out window. Without this, opacity is sampled once and the
+   * bar would freeze at whatever value it had at the last input event
+   * instead of smoothly fading out. Skipped when a bar is pinned
+   * (hover or active drag) since opacity is constant there.
+   */
+  maybeContinueFade() {
+    const total = SCROLLBAR_FADE_HOLD_MS + SCROLLBAR_FADE_OUT_MS;
+    const now = Date.now();
+    const needV = this.maxScrollTop() > 0 && !this.hoverScrollbarY && this.scrollbarDrag?.axis !== "v" && now - this.lastScrollInteractY < total;
+    const needH = this.maxScrollLeft() > 0 && !this.hoverScrollbarX && this.scrollbarDrag?.axis !== "h" && now - this.lastScrollInteractX < total;
+    if (needV || needH) this.scheduleRender();
+  }
+  maybeAutoFit() {
+    if (!this.autoFitEnabled || this.hasAutoFitted) return;
+    if (projectDuration(this.project) <= 0) return;
+    const fit = this.computeFitScale();
+    if (fit == null) return;
+    this.hasAutoFitted = true;
+    if (Math.abs(fit - this.pxPerSec) > 0.5) {
+      this.pxPerSec = fit;
+      this.opts.onScaleChange?.(fit);
+    }
+  }
+  buildDrawState() {
+    return {
+      project: this.project,
+      pxPerSec: this.pxPerSec,
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      timeMs: this.timeMs,
+      selectedClipId: this.selectedClipId,
+      hoveredClipId: this.hoveredClipId,
+      hoveredTrackIndex: this.hoveredTrackIndex,
+      dropTargetTrackIndex: this.dropTargetTrackIndex,
+      isDragging: this.drag?.kind === "move",
+      snapX: this.snapX,
+      showHeader: this.showHeader,
+      viewportWidth: this.viewportWidth,
+      viewportHeight: this.viewportHeight,
+      dragGhost: this.dragGhost,
+      scrollbarOpacityY: this.scrollbarOpacity("v"),
+      scrollbarOpacityX: this.scrollbarOpacity("h"),
+      scrollbarActiveY: this.scrollbarDrag?.axis === "v",
+      scrollbarActiveX: this.scrollbarDrag?.axis === "h",
+      locale: this.locale
+    };
+  }
+  readStyle() {
+    const cs = getComputedStyle(this.root);
+    const v = (name, fallback) => cs.getPropertyValue(name).trim() || fallback;
+    return {
+      bg: v("--aicut-controls-bg", "#1f1f22"),
+      border: v("--aicut-controls-border", "rgba(255,255,255,0.08)"),
+      // Pass the resolved text color straight through — draw.ts'
+      // withAlpha can adjust it for tick / muted variants.
+      text: v("--aicut-controls-text", "rgba(255,255,255,0.85)"),
+      textMuted: v("--color-muted", "#999999"),
+      trackBg: "rgba(255,255,255,0.06)",
+      brand: v("--color-brand", "#ff3386"),
+      brandTo: v("--color-secondary", "#9a31f4"),
+      info: v("--color-info", "#1077ff"),
+      clipText: "#fff",
+      selectedRing: v("--color-info", "#1077ff"),
+      playhead: v("--color-brand", "#ff3386")
+    };
+  }
+  // ---- pointer / wheel ------------------------------------------------
+  attachPointer() {
+    this.canvas.addEventListener("pointerdown", (e) => this.onPointerDown(e));
+    this.canvas.addEventListener("pointermove", (e) => this.onPointerMove(e));
+    this.canvas.addEventListener("pointerup", (e) => this.onPointerUp(e));
+    this.canvas.addEventListener("pointercancel", (e) => this.onPointerUp(e));
+    this.canvas.addEventListener("pointerleave", () => {
+      if (!this.drag && !this.scrollbarDrag) {
+        this.hoveredClipId = null;
+        this.hoverCursor = "default";
+        this.hoverScrollbarY = false;
+        this.hoverScrollbarX = false;
+        this.scheduleRender();
+      }
+    });
+  }
+  onPointerDown(e) {
+    const { x, y } = this.localCoords(e);
+    const target = this.hitTarget(x, y);
+    this.canvas.setPointerCapture(e.pointerId);
+    if (target.kind === "scrollbar-thumb-v") {
+      this.scrollbarDrag = {
+        axis: "v",
+        pointerStart: y,
+        scrollStart: this.scrollTop
+      };
+      this.touchScrollbar("v");
+      return;
+    }
+    if (target.kind === "scrollbar-thumb-h") {
+      this.scrollbarDrag = {
+        axis: "h",
+        pointerStart: x,
+        scrollStart: this.scrollLeft
+      };
+      this.touchScrollbar("h");
+      return;
+    }
+    if (target.kind === "scrollbar-track-v") {
+      const page = Math.max(
+        TRACK_HEIGHT,
+        this.viewportHeight - RULER_HEIGHT - SCROLLBAR_THICKNESS
+      );
+      this.scrollTop += target.before ? -page : page;
+      this.clampScroll();
+      this.touchScrollbar("v");
+      return;
+    }
+    if (target.kind === "scrollbar-track-h") {
+      const baseX = this.showHeader ? HEADER_WIDTH : 0;
+      const page = Math.max(
+        80,
+        this.viewportWidth - baseX - SCROLLBAR_THICKNESS
+      );
+      this.scrollLeft += target.before ? -page : page;
+      this.clampScroll();
+      this.touchScrollbar("h");
+      return;
+    }
+    if (this.readOnly) {
+      if (target.kind === "ruler" || target.kind === "clip" || target.kind === "clip-handle-left" || target.kind === "clip-handle-right" || target.kind === "track-empty") {
+        this.drag = { kind: "scrub" };
+        const ms = this.applySnap(
+          xToMs(x, this.pxPerSec, this.scrollLeft, this.showHeader),
+          null
+        );
+        this.timeMs = ms;
+        this.opts.onSeek?.(ms);
+        this.scheduleRender();
+      }
+      return;
+    }
+    if (target.kind === "header-delete") {
+      const t = this.project.tracks[target.trackIndex];
+      if (t) this.opts.onDeleteTrack?.(t.id);
+      return;
+    }
+    if (target.kind === "header") return;
+    if (target.kind === "ruler") {
+      this.drag = { kind: "scrub" };
+      const ms = this.applySnap(
+        xToMs(x, this.pxPerSec, this.scrollLeft, this.showHeader),
+        null
+      );
+      this.timeMs = ms;
+      this.opts.onSeek?.(ms);
+      this.scheduleRender();
+      return;
+    }
+    if (target.kind === "clip") {
+      const found = findClip(this.project, target.clipId);
+      if (!found) return;
+      this.selectedClipId = target.clipId;
+      this.opts.onSelectClip?.(target.clipId);
+      this.drag = {
+        kind: "move",
+        clipId: target.clipId,
+        trackIndex: target.trackIndex,
+        pointerStartX: x,
+        pointerStartY: y,
+        originalStart: found.clip.start
+      };
+      this.scheduleRender();
+      return;
+    }
+    if (target.kind === "clip-handle-left" || target.kind === "clip-handle-right") {
+      const found = findClip(this.project, target.clipId);
+      if (!found) return;
+      this.selectedClipId = target.clipId;
+      this.opts.onSelectClip?.(target.clipId);
+      this.drag = {
+        kind: target.kind === "clip-handle-left" ? "trim-left" : "trim-right",
+        clipId: target.clipId,
+        trackIndex: target.trackIndex,
+        pointerStartX: x,
+        originalStart: found.clip.start,
+        originalIn: found.clip.in,
+        originalOut: found.clip.out
+      };
+      this.scheduleRender();
+      return;
+    }
+    if (target.kind === "track-empty") {
+      this.selectedClipId = null;
+      this.opts.onSelectClip?.(null);
+      const ms = this.applySnap(
+        xToMs(x, this.pxPerSec, this.scrollLeft, this.showHeader),
+        null
+      );
+      this.timeMs = ms;
+      this.opts.onSeek?.(ms);
+      this.drag = { kind: "scrub" };
+      this.scheduleRender();
+      return;
+    }
+  }
+  onPointerMove(e) {
+    const { x, y } = this.localCoords(e);
+    if (this.scrollbarDrag) {
+      if (this.scrollbarDrag.axis === "v") {
+        const visibleH = this.viewportHeight - RULER_HEIGHT - SCROLLBAR_THICKNESS;
+        const contentH = contentHeight(
+          this.project.tracks,
+          this.drag?.kind === "move"
+        );
+        const trackLen = visibleH - SCROLLBAR_INSET * 2;
+        const thumbLen = Math.max(
+          SCROLLBAR_MIN_THUMB,
+          trackLen * (visibleH / contentH)
+        );
+        const maxScroll = Math.max(0, contentH - visibleH);
+        const free = Math.max(1, trackLen - thumbLen);
+        const ratio = maxScroll / free;
+        this.scrollTop = this.scrollbarDrag.scrollStart + (y - this.scrollbarDrag.pointerStart) * ratio;
+      } else {
+        const baseX = this.showHeader ? HEADER_WIDTH : 0;
+        const visibleW = this.viewportWidth - baseX - SCROLLBAR_THICKNESS;
+        const contentW = contentWidth(this.project, this.pxPerSec);
+        const trackLen = visibleW - SCROLLBAR_INSET * 2;
+        const thumbLen = Math.max(
+          SCROLLBAR_MIN_THUMB,
+          trackLen * (visibleW / contentW)
+        );
+        const maxScroll = Math.max(0, contentW - visibleW);
+        const free = Math.max(1, trackLen - thumbLen);
+        const ratio = maxScroll / free;
+        this.scrollLeft = this.scrollbarDrag.scrollStart + (x - this.scrollbarDrag.pointerStart) * ratio;
+      }
+      this.clampScroll();
+      this.touchScrollbar(this.scrollbarDrag.axis);
+      return;
+    }
+    if (!this.drag) {
+      const target = this.hitTarget(x, y);
+      let nextHover = null;
+      let nextHoverTrack = null;
+      let cursor = "default";
+      let onScrollbarV = false;
+      let onScrollbarH = false;
+      if (target.kind === "clip") {
+        nextHover = target.clipId;
+        nextHoverTrack = target.trackIndex;
+        cursor = this.readOnly ? "pointer" : "grab";
+      } else if (target.kind === "clip-handle-left" || target.kind === "clip-handle-right") {
+        nextHover = target.clipId;
+        nextHoverTrack = target.trackIndex;
+        cursor = "ew-resize";
+      } else if (target.kind === "ruler") {
+        cursor = "ew-resize";
+      } else if (target.kind === "track-empty") {
+        nextHoverTrack = target.trackIndex;
+        cursor = "crosshair";
+      } else if (target.kind === "header") {
+        nextHoverTrack = target.trackIndex;
+        cursor = "default";
+      } else if (target.kind === "header-delete") {
+        nextHoverTrack = target.trackIndex;
+        cursor = "pointer";
+      } else if (target.kind === "scrollbar-thumb-v" || target.kind === "scrollbar-track-v") {
+        onScrollbarV = true;
+        cursor = "default";
+      } else if (target.kind === "scrollbar-thumb-h" || target.kind === "scrollbar-track-h") {
+        onScrollbarH = true;
+        cursor = "default";
+      }
+      const hoverChanged = onScrollbarV !== this.hoverScrollbarY || onScrollbarH !== this.hoverScrollbarX;
+      if (nextHover !== this.hoveredClipId || nextHoverTrack !== this.hoveredTrackIndex || cursor !== this.hoverCursor || hoverChanged) {
+        this.hoveredClipId = nextHover;
+        this.hoveredTrackIndex = nextHoverTrack;
+        this.hoverCursor = cursor;
+        this.hoverScrollbarY = onScrollbarV;
+        this.hoverScrollbarX = onScrollbarH;
+        this.scheduleRender();
+      }
+      return;
+    }
+    if (this.drag.kind === "scrub") {
+      const ms = this.applySnap(
+        xToMs(x, this.pxPerSec, this.scrollLeft, this.showHeader),
+        null
+      );
+      this.timeMs = ms;
+      this.opts.onSeek?.(ms);
+      this.scheduleRender();
+      return;
+    }
+    if (this.drag.kind === "move") {
+      this.lastDragPointerX = x;
+      this.lastDragPointerY = y;
+      this.processMoveDrag(x, y);
+      this.scheduleRender();
+      this.maybeStartDragAutoScroll();
+      return;
+    }
+    if (this.drag.kind === "trim-left" || this.drag.kind === "trim-right") {
+      const dxPx = x - this.drag.pointerStartX;
+      const dxMs = dxPx / this.pxPerSec * 1e3;
+      const found = findClip(this.project, this.drag.clipId);
+      if (!found) return;
+      const c = found.clip;
+      if (this.drag.kind === "trim-left") {
+        let nextStart = Math.max(0, this.drag.originalStart + dxMs);
+        nextStart = this.applySnap(nextStart, this.drag.clipId);
+        const delta = nextStart - this.drag.originalStart;
+        const nextIn = Math.max(
+          0,
+          Math.min(this.drag.originalIn + delta, this.drag.originalOut - 50)
+        );
+        const adjStart = this.drag.originalStart + (nextIn - this.drag.originalIn);
+        c.in = nextIn;
+        c.start = adjStart;
+      } else {
+        const nextOut = Math.max(
+          this.drag.originalIn + 50,
+          this.drag.originalOut + dxMs
+        );
+        c.out = nextOut;
+      }
+      this.scheduleRender();
+      return;
+    }
+  }
+  /**
+   * Update dragGhost + dropTargetTrackIndex for the in-flight move
+   * drag, given the current viewport pointer position. Pulled out of
+   * onPointerMove so the edge-autoscroll loop can re-run it on each
+   * tick — autoscroll moves scrollTop under a stationary cursor, and
+   * the ghost must follow the new row under that cursor.
+   */
+  processMoveDrag(x, y) {
+    if (!this.drag || this.drag.kind !== "move") return;
+    const drag = this.drag;
+    const dxPx = x - drag.pointerStartX;
+    const dxMs = dxPx / this.pxPerSec * 1e3;
+    let nextStart = Math.max(0, drag.originalStart + dxMs);
+    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 intendedTrackIndex = onPhantom ? phantomIdx : tiRaw >= 0 ? tiRaw : drag.trackIndex;
+    let ghostTrackIndex = intendedTrackIndex;
+    let overlap = false;
+    if (onPhantom) {
+      ghostTrackIndex = phantomIdx;
+      overlap = true;
+    } else if (this.opts.resolveDrop) {
+      const r = this.opts.resolveDrop(drag.clipId, {
+        start: nextStart,
+        intendedTrackIndex
+      });
+      ghostTrackIndex = r.trackIndex;
+      overlap = r.wouldCreateNew;
+    } else {
+      const found = findClip(this.project, drag.clipId);
+      const dur = found ? found.clip.out - found.clip.in : 0;
+      const targetTrack = this.project.tracks[intendedTrackIndex];
+      overlap = targetTrack ? wouldOverlap(targetTrack, drag.clipId, nextStart, nextStart + dur) : false;
+    }
+    this.dragGhost = {
+      clipId: drag.clipId,
+      ghostStart: nextStart,
+      ghostTrackIndex,
+      wouldOverlap: overlap
+    };
+    this.dropTargetTrackIndex = ghostTrackIndex !== drag.trackIndex ? ghostTrackIndex : null;
+  }
+  /**
+   * Px-per-frame scroll speed when the pointer is in a vertical edge
+   * zone of the track region. Returns 0 outside the zone. Speed ramps
+   * linearly from 0 at the zone's inner edge to ~16 px/frame at the
+   * outer edge, so brushing the edge gives a gentle nudge and parking
+   * deep at it gives a brisk auto-scroll.
+   */
+  dragScrollSpeedY() {
+    if (!this.drag || this.drag.kind !== "move") return 0;
+    const y = this.lastDragPointerY;
+    const top = RULER_HEIGHT;
+    const bottom = this.viewportHeight - SCROLLBAR_THICKNESS;
+    const zone = 36;
+    const maxSpeed = 16;
+    if (y >= top && y < top + zone) {
+      if (this.scrollTop <= 0) return 0;
+      const depth = (top + zone - y) / zone;
+      return -Math.max(2, maxSpeed * depth);
+    }
+    if (y <= bottom && y > bottom - zone) {
+      if (this.scrollTop >= this.maxScrollTop()) return 0;
+      const depth = (y - (bottom - zone)) / zone;
+      return Math.max(2, maxSpeed * depth);
+    }
+    return 0;
+  }
+  /**
+   * Drive vertical auto-scroll while the user holds a clip near the
+   * top/bottom edge of the track area. Self-stopping — exits the loop
+   * once the pointer leaves the zone, the drag ends, or scroll bottoms
+   * out at the clamp.
+   */
+  maybeStartDragAutoScroll() {
+    if (this.dragScrollRafPending) return;
+    if (this.dragScrollSpeedY() === 0) return;
+    this.dragScrollRafPending = true;
+    requestAnimationFrame(() => {
+      this.dragScrollRafPending = false;
+      if (this.destroyed) return;
+      const speed = this.dragScrollSpeedY();
+      if (speed === 0 || !this.drag || this.drag.kind !== "move") return;
+      this.scrollTop += speed;
+      this.clampScroll();
+      this.touchScrollbar("v");
+      this.processMoveDrag(this.lastDragPointerX, this.lastDragPointerY);
+      this.scheduleRender();
+      this.maybeStartDragAutoScroll();
+    });
+  }
+  onPointerUp(_e) {
+    if (this.scrollbarDrag) {
+      const axis = this.scrollbarDrag.axis;
+      this.scrollbarDrag = null;
+      this.touchScrollbar(axis);
+      return;
+    }
+    if (!this.drag) return;
+    const drag = this.drag;
+    const ghost = this.dragGhost;
+    this.drag = null;
+    this.dragGhost = null;
+    this.dropTargetTrackIndex = null;
+    this.snapX = null;
+    if (drag.kind === "move") {
+      if (ghost) {
+        const isPhantom = ghost.ghostTrackIndex >= this.project.tracks.length;
+        const finalTrackId = isPhantom ? void 0 : ghost.ghostTrackIndex !== drag.trackIndex ? this.project.tracks[ghost.ghostTrackIndex]?.id : void 0;
+        this.opts.onMoveClip?.(drag.clipId, {
+          start: ghost.ghostStart,
+          trackId: finalTrackId,
+          // Phantom row drop is the user explicitly asking for a new
+          // track — bypass the editor's smart routing in that case
+          // (which would otherwise route back to the source track and
+          // make the gesture a no-op).
+          newTrack: isPhantom
+        });
+        this.opts.onChange?.(this.getProject());
+      }
+    } else if (drag.kind === "trim-left" || drag.kind === "trim-right") {
+      const found = findClip(this.project, drag.clipId);
+      if (found) {
+        this.opts.onResizeClip?.(drag.clipId, {
+          in: found.clip.in,
+          out: found.clip.out,
+          start: found.clip.start
+        });
+        this.opts.onChange?.(this.getProject());
+      }
+    }
+    this.scheduleRender();
+  }
+  attachWheel() {
+    this.canvas.addEventListener(
+      "wheel",
+      (e) => {
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          const rect = this.canvas.getBoundingClientRect();
+          const cursorX = e.clientX - rect.left;
+          const anchorMs = xToMs(
+            cursorX,
+            this.pxPerSec,
+            this.scrollLeft,
+            this.showHeader
+          );
+          const dy = Math.max(-50, Math.min(50, e.deltaY));
+          const factor = Math.exp(-dy * WHEEL_ZOOM_RATE);
+          const next = clampScale(this.pxPerSec * factor);
+          if (Math.abs(next - this.pxPerSec) < 0.01) return;
+          this.pxPerSec = next;
+          this.hasAutoFitted = true;
+          const baseX = this.showHeader ? HEADER_WIDTH : 0;
+          this.scrollLeft = anchorMs / 1e3 * this.pxPerSec - (cursorX - baseX);
+          this.clampScroll();
+          this.touchScrollbar("h");
+          this.opts.onScaleChange?.(this.pxPerSec);
+          this.scheduleRender();
+          return;
+        }
+        const horizDominant = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+        if (horizDominant) {
+          if (e.deltaX === 0) return;
+          e.preventDefault();
+          this.scrollLeft += e.deltaX;
+          this.clampScroll();
+          this.touchScrollbar("h");
+          this.scheduleRender();
+          return;
+        }
+        if (e.deltaY === 0) return;
+        e.preventDefault();
+        if (this.maxScrollTop() > 0) {
+          this.scrollTop += e.deltaY;
+          this.clampScroll();
+          this.touchScrollbar("v");
+        } else {
+          this.scrollLeft += e.deltaY;
+          this.clampScroll();
+          this.touchScrollbar("h");
+        }
+        this.scheduleRender();
+      },
+      { passive: false }
+    );
+  }
+  attachResize() {
+    if (typeof ResizeObserver === "undefined") return;
+    this.resizeObs = new ResizeObserver(() => {
+      this.resizeCanvas();
+      if (!this.hasAutoFitted && this.autoFitEnabled) {
+        const fit = this.computeFitScale();
+        if (fit != null) {
+          this.pxPerSec = fit;
+          this.opts.onScaleChange?.(fit);
+        }
+      }
+      this.scheduleRender();
+    });
+    this.resizeObs.observe(this.root);
+  }
+  // ---- helpers --------------------------------------------------------
+  localCoords(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }
+  hitTarget(x, y) {
+    return hitTest(x, y, {
+      project: this.project,
+      pxPerSec: this.pxPerSec,
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      showHeader: this.showHeader,
+      viewportWidth: this.viewportWidth,
+      viewportHeight: this.viewportHeight,
+      isDragging: this.drag?.kind === "move"
+    });
+  }
+  trackIndexAtY(y) {
+    return trackIndexAt(y, this.project.tracks.length, this.scrollTop);
+  }
+  applySnap(ms, ignoreClipId) {
+    if (!this.snapEnabled) {
+      this.snapX = null;
+      return ms;
+    }
+    const tolMs = Math.max(20, SNAP_PX / this.pxPerSec * 1e3);
+    const targets = snapTargets(this.project, this.timeMs, ignoreClipId);
+    let best = ms;
+    let bestDist = tolMs;
+    for (const t of targets) {
+      const d = Math.abs(t - ms);
+      if (d < bestDist) {
+        bestDist = d;
+        best = t;
+      }
+    }
+    if (best !== ms) {
+      const baseX = this.showHeader ? HEADER_WIDTH : 0;
+      this.snapX = baseX + best / 1e3 * this.pxPerSec - this.scrollLeft;
+    } else {
+      this.snapX = null;
+    }
+    return best;
+  }
+};
+
+// src/ui/icons.ts
+var wrap = (path) => `<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">${path}</svg>`;
+var ICONS = {
+  undo: wrap(
+    `<g transform="translate(1 1)"><path d="M5.66577 1.38721L2.85034 4.20264H9.64624C11.8471 4.20264 13.6313 5.98724 13.6316 8.18799C13.6315 10.3889 11.8472 12.1733 9.64624 12.1733H7.19116V11.1235H9.64624C11.2673 11.1235 12.5817 9.80904 12.5818 8.18799C12.5815 6.56714 11.2672 5.25342 9.64624 5.25342H2.85034L5.66577 8.06885L4.92358 8.81201L0.8396 4.72803L4.92358 0.644043L5.66577 1.38721Z" fill="currentColor"/></g>`
+  ),
+  redo: wrap(
+    `<g transform="translate(1 1)"><path d="M8.55005 2.04655L11.3659 4.86239L4.56982 4.86239C2.36897 4.86251 0.584578 6.64687 0.584473 8.84774C0.584646 11.0485 2.36901 12.833 4.56982 12.8331L7.0245 12.8331L7.0245 11.7832H4.56982C2.94891 11.7831 1.63453 10.4686 1.63436 8.84774C1.63446 7.22677 2.94886 5.91297 4.56982 5.91284H11.3659L8.55005 8.72811L9.29289 9.47095L13.3768 5.38761L9.29289 1.30371L8.55005 2.04655Z" fill="currentColor"/></g>`
+  ),
+  split: wrap(
+    `<g transform="translate(1 1)"><path d="M5.7168 12.7754H1.75V11.7246H4.68164V2.27539H1.75V1.22461H5.7168V12.7754ZM12.25 2.27539H9.31836V11.7246H12.25V12.7754H8.2832V1.22461H12.25V2.27539Z" fill="currentColor"/></g>`
+  ),
+  trimLeft: wrap(
+    `<g transform="translate(1 1)"><path d="M2.7998 12.7754H1.75V11.7246H2.7998V12.7754ZM4.25781 12.7754H3.20801V11.7246H4.25781V12.7754ZM5.7168 12.7754H4.66699V11.7246H5.7168V12.7754ZM12.25 2.27539H9.31836V11.7246H12.25V12.7754H8.2832V1.22461H12.25V2.27539ZM5.7168 11.0254H4.66699V9.97461H5.7168V11.0254ZM5.7168 9.27539H4.66699V8.22461H5.7168V9.27539ZM5.7168 7.52539H4.66699V6.47461H5.7168V7.52539ZM5.7168 5.77539H4.66699V4.72461H5.7168V5.77539ZM5.7168 4.02539H4.66699V2.97461H5.7168V4.02539ZM2.7998 2.27539H1.75V1.22461H2.7998V2.27539ZM4.25781 2.27539H3.20801V1.22461H4.25781V2.27539ZM5.7168 2.27539H4.66699V1.22461H5.7168V2.27539Z" fill="currentColor"/></g>`
+  ),
+  trimRight: wrap(
+    `<g transform="translate(1 1)"><path d="M5.7168 12.7754H1.75V11.7246H4.68164V2.27539H1.75V1.22461H5.7168V12.7754ZM9.33301 12.7754H8.2832V11.7246H9.33301V12.7754ZM10.792 12.7754H9.74219V11.7246H10.792V12.7754ZM12.25 12.7754H11.2002V11.7246H12.25V12.7754ZM9.33301 11.0254H8.2832V9.97461H9.33301V11.0254ZM9.33301 9.27539H8.2832V8.22461H9.33301V9.27539ZM9.33301 7.52539H8.2832V6.47461H9.33301V7.52539ZM9.33301 5.77539H8.2832V4.72461H9.33301V5.77539ZM9.33301 4.02539H8.2832V2.97461H9.33301V4.02539ZM9.33301 2.27539H8.2832V1.22461H9.33301V2.27539ZM10.792 2.27539H9.74219V1.22461H10.792V2.27539ZM12.25 2.27539H11.2002V1.22461H12.25V2.27539Z" fill="currentColor"/></g>`
+  ),
+  speed: wrap(
+    `<g transform="translate(1 1)"><path d="M7.00175 0.595229C7.32353 0.596316 7.58439 0.858333 7.58378 1.18019C7.583 1.50212 7.32071 1.76265 6.99882 1.76222C6.45361 1.76108 5.90722 1.8449 5.38065 2.01417C4.23393 2.38294 3.24874 3.13519 2.59061 4.14406C1.93249 5.15302 1.64169 6.35801 1.76639 7.55617C1.89121 8.75413 2.4235 9.87343 3.27518 10.7251C4.12694 11.5767 5.24613 12.1092 6.44413 12.2339C7.6422 12.3585 8.84735 12.0678 9.85624 11.4097C10.8649 10.7516 11.6173 9.76618 11.9861 8.61964C12.5967 6.72047 12.1219 5.04361 11.0633 3.76124L8.57792 6.24757C8.68682 6.4756 8.74974 6.72999 8.74979 6.99953C8.74979 7.9659 7.96612 8.74933 6.99979 8.74953C6.03345 8.74934 5.24979 7.96591 5.24979 6.99953C5.24997 6.03329 6.03356 5.24971 6.99979 5.24953C7.26941 5.24958 7.52464 5.31244 7.75272 5.4214L10.6707 2.50441L10.7137 2.46535C10.8174 2.38043 10.9485 2.33351 11.0838 2.33351C11.2382 2.33369 11.3867 2.39519 11.4959 2.50441C13.0855 4.09426 13.9307 6.38102 13.0965 8.97609C12.6458 10.3776 11.726 11.5819 10.493 12.3862C9.25989 13.1905 7.7873 13.5464 6.32303 13.3941C4.8588 13.2416 3.49099 12.5903 2.44999 11.5493C1.40904 10.5083 0.757676 9.14058 0.605261 7.67628C0.452904 6.21196 0.808759 4.73947 1.61307 3.50636C2.41742 2.27338 3.62178 1.35455 5.02323 0.903823C5.66695 0.696861 6.33524 0.593807 7.00175 0.595229Z" fill="currentColor"/></g>`
+  ),
+  play: wrap(
+    // Triangle bbox center at viewBox x=9.4 vs viewBox center 8 — the
+    // raw path leans right. Optical centering: translate by half the
+    // bbox offset (-0.7) so the centroid stays near 7.5 (slight left
+    // of center, which the eye accepts as balanced for a right-pointing
+    // triangle) while the bbox is no longer obviously off to one side.
+    `<g transform="translate(-0.7 0)"><path d="M4.66699 2.64248C4.66717 1.82358 5.59736 1.35167 6.25781 1.83584L13.5674 7.19619C14.1117 7.59579 14.1118 8.40897 13.5674 8.8085L6.25781 14.1688C5.59734 14.6528 4.6671 14.1811 4.66699 13.3622V2.64248Z" fill="currentColor"/></g>`
+  ),
+  pause: wrap(
+    `<path d="M4 3h2.5v10H4V3zm5.5 0H12v10H9.5V3z" fill="currentColor"/>`
+  ),
+  fullscreen: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 00-2 2v3"/><path d="M21 8V5a2 2 0 00-2-2h-3"/><path d="M3 16v3a2 2 0 002 2h3"/><path d="M16 21h3a2 2 0 002-2v-3"/></svg>`,
+  snap: `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path fill="currentColor" d="M8.275.783a5.07 5.07 0 0 1 4.929 4.927 5.07 5.07 0 0 1-1.311 3.542l-3.937 3.95a.526.526 0 0 1-.744 0l-2.334-2.334a.525.525 0 0 1 .001-.743l2.55-2.538a.5.5 0 0 1 .171-.17l.976-.97a.723.723 0 0 0-1.01-1.008L3.87 9.12a.526.526 0 0 1-.743 0L.795 6.784a.526.526 0 0 1 0-.742l3.937-3.95.022-.02a5.07 5.07 0 0 1 3.52-1.29m-2.281 9.715 1.588 1.589 1.884-1.889-1.583-1.583zm2.253-8.666a4.02 4.02 0 0 0-2.785 1.017l-.936.939 1.602 1.603.729-.726.052-.045a1.776 1.776 0 0 1 2.33.154 1.775 1.775 0 0 1 .155 2.332 1 1 0 0 1-.046.053l-.72.716 1.58 1.58.924-.929a4.019 4.019 0 0 0-2.885-6.694M1.909 6.413 3.5 8.005 5.384 6.13l-1.6-1.6z"/></svg>`,
+  zoomOut: `<svg width="14" height="14" viewBox="0 0 20.2618 20.2564" fill="none" aria-hidden="true"><path d="M9 0C13.9706 0 18 4.02944 18 9C18 11.1612 17.2374 13.1438 15.9678 14.6953L19.998 18.7197C20.3494 19.071 20.3498 19.6404 19.999 19.9922C19.6476 20.3441 19.0775 20.3446 18.7256 19.9932L14.6953 15.9678C13.1438 17.2374 11.1612 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 1.7998C5.02355 1.7998 1.7998 5.02355 1.7998 9C1.7998 12.9765 5.02355 16.2002 9 16.2002C12.9765 16.2002 16.2002 12.9765 16.2002 9C16.2002 5.02355 12.9765 1.7998 9 1.7998ZM12.5996 8.09961C13.0969 8.09961 13.5 8.50273 13.5 9C13.5 9.49727 13.0969 9.90039 12.5996 9.90039H5.40039C4.90312 9.90039 4.5 9.49727 4.5 9C4.5 8.50273 4.90312 8.09961 5.40039 8.09961H12.5996Z" fill="currentColor"/></svg>`,
+  zoomIn: `<svg width="14" height="14" viewBox="0 0 20.2613 20.2565" fill="none" aria-hidden="true"><path d="M9 0C13.9705 6.59711e-05 18 4.02948 18 9C18 11.1612 17.2374 13.1438 15.9678 14.6953L19.9971 18.7197C20.3489 19.0711 20.3494 19.6403 19.998 19.9922C19.6466 20.3441 19.0765 20.3446 18.7246 19.9932L14.6953 15.9678C13.1438 17.2374 11.1611 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 1.7998C5.02355 1.7998 1.7998 5.02355 1.7998 9C1.7998 12.9765 5.02355 16.2002 9 16.2002C12.9764 16.2001 16.2002 12.9764 16.2002 9C16.2002 5.02359 12.9764 1.79987 9 1.7998ZM8.99512 4.50488C9.49233 4.50495 9.89551 4.90804 9.89551 5.40527V8.09961H12.5996C13.0968 8.09968 13.5 8.50277 13.5 9C13.5 9.49723 13.0968 9.90032 12.5996 9.90039H9.89551V12.6045C9.89551 13.1017 9.49233 13.5048 8.99512 13.5049C8.49785 13.5049 8.09473 13.1018 8.09473 12.6045V9.90039H5.40039C4.90312 9.90039 4.5 9.49727 4.5 9C4.5 8.50273 4.90312 8.09961 5.40039 8.09961H8.09473V5.40527C8.09473 4.908 8.49785 4.50488 8.99512 4.50488Z" fill="currentColor"/></svg>`,
+  export: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`,
+  addTrack: wrap(
+    `<g transform="translate(2 2)"><rect x="0" y="1.5" width="12" height="2.5" rx="0.5" fill="currentColor"/><rect x="0" y="8" width="12" height="2.5" rx="0.5" fill="currentColor" opacity="0.55"/><circle cx="10" cy="10" r="3.4" fill="currentColor"/><rect x="9.4" y="8.5" width="1.2" height="3" rx="0.4" fill="#fff"/><rect x="8.5" y="9.4" width="3" height="1.2" rx="0.4" fill="#fff"/></g>`
+  ),
+  trash: wrap(
+    `<g transform="translate(1 1)" fill="currentColor"><path d="M5 1.25h4v.9H13v1.05H1V2.15h4v-.9zM2.4 4.1h9.2l-.65 8.9c-.04.55-.5.96-1.05.96H4.1c-.55 0-1.01-.41-1.05-.96L2.4 4.1zm2.3 1.7l.35 7.1h1l-.35-7.1h-1zm2.65 0v7.1h1V5.8h-1zm2.3 0l-.35 7.1h1l.35-7.1h-1z"/></g>`
+  ),
+  /** Counter-clockwise circular arrow — "reset to initial layout". */
+  reset: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>`
+};
+
+// src/ui/toolbar.ts
+var SCALE_MIN2 = 10;
+var SCALE_MAX2 = 400;
+var Toolbar = class {
+  root;
+  cb;
+  locale;
+  /**
+   * Bookend slots reserved for host-supplied controls. The library
+   * paints nothing into either — hosts (React/Vue wrappers or plain
+   * JS) append their own buttons / dropdowns. `extrasLeft` sits at
+   * the very start of the toolbar; `extrasRight` at the very end.
+   * Empty by default and visually hidden (no separator) until they
+   * actually contain children.
+   */
+  extrasLeft;
+  extrasRight;
+  undoBtn;
+  redoBtn;
+  splitBtn;
+  trimLeftBtn;
+  trimRightBtn;
+  playBtn;
+  playIcon;
+  timeLabel;
+  durationLabel;
+  fullscreenBtn;
+  snapBtn;
+  zoomOutBtn;
+  zoomSlider;
+  zoomInBtn;
+  resetBtn;
+  lastState = null;
+  constructor(host, cb, locale) {
+    this.cb = cb;
+    this.locale = locale;
+    this.root = document.createElement("div");
+    this.root.className = "aicut-toolbar";
+    this.root.setAttribute("data-testid", "aicut-toolbar");
+    this.extrasLeft = mkGroup("aicut-toolbar-extras aicut-toolbar-extras-left");
+    this.extrasRight = mkGroup("aicut-toolbar-extras aicut-toolbar-extras-right");
+    const left = mkGroup("aicut-toolbar-left");
+    this.undoBtn = mkIconButton("undo", locale.undo, () => cb.onUndo(), "aicut-undo");
+    this.redoBtn = mkIconButton("redo", locale.redo, () => cb.onRedo(), "aicut-redo");
+    this.splitBtn = mkIconButton("split", locale.split, () => cb.onSplit(), "aicut-split");
+    this.trimLeftBtn = mkIconButton("trimLeft", locale.trimLeft, () => cb.onTrimLeft(), "aicut-trim-left");
+    this.trimRightBtn = mkIconButton("trimRight", locale.trimRight, () => cb.onTrimRight(), "aicut-trim-right");
+    const speedBtn = mkIconButton("speed", locale.speedComingSoon, () => void 0, "aicut-speed");
+    speedBtn.disabled = true;
+    left.append(this.undoBtn, this.redoBtn, this.splitBtn, this.trimLeftBtn, this.trimRightBtn, speedBtn);
+    const center = mkGroup("aicut-toolbar-center");
+    this.timeLabel = mkSpan("aicut-time-current", "00:00", "aicut-time-current");
+    this.playBtn = document.createElement("button");
+    this.playBtn.type = "button";
+    this.playBtn.className = "aicut-play-btn";
+    this.playBtn.title = locale.playPause;
+    this.playBtn.setAttribute("data-testid", "aicut-play");
+    this.playIcon = document.createElement("span");
+    this.playIcon.innerHTML = ICONS.play;
+    this.playBtn.appendChild(this.playIcon);
+    this.playBtn.addEventListener("click", () => cb.onPlayToggle());
+    this.durationLabel = mkSpan("aicut-time-total", "00:00", "aicut-time-total");
+    this.fullscreenBtn = mkIconButton("fullscreen", locale.fullscreen, () => cb.onFullscreen(), "aicut-fullscreen");
+    center.append(this.timeLabel, this.playBtn, this.durationLabel, this.fullscreenBtn);
+    const right = mkGroup("aicut-toolbar-right");
+    this.snapBtn = mkIconButton("snap", locale.snap, () => cb.onSnapToggle(), "aicut-snap");
+    this.zoomOutBtn = mkIconButton("zoomOut", locale.zoomOut, () => this.nudgeZoom(-1), "aicut-zoom-out");
+    this.zoomSlider = document.createElement("input");
+    this.zoomSlider.type = "range";
+    this.zoomSlider.min = "0";
+    this.zoomSlider.max = "100";
+    this.zoomSlider.className = "aicut-zoom-slider";
+    this.zoomSlider.setAttribute("data-testid", "aicut-zoom-slider");
+    this.zoomSlider.addEventListener("input", () => {
+      const ratio = Number(this.zoomSlider.value) / 100;
+      cb.onScaleChange(sliderToScale(ratio));
+    });
+    this.zoomInBtn = mkIconButton("zoomIn", locale.zoomIn, () => this.nudgeZoom(1), "aicut-zoom-in");
+    this.resetBtn = mkIconButton("reset", locale.reset, () => cb.onReset(), "aicut-reset");
+    right.append(this.snapBtn, this.zoomOutBtn, this.zoomSlider, this.zoomInBtn, this.resetBtn);
+    this.root.append(this.extrasLeft, left, center, right, this.extrasRight);
+    host.appendChild(this.root);
+  }
+  get element() {
+    return this.root;
+  }
+  /**
+   * Idempotent render. Critically: only mutates DOM when a state
+   * field actually changed. Without this, `playIcon.innerHTML = ICONS`
+   * re-parsed the SVG every playback tick (~60Hz) — and replacing the
+   * element between a user's mousedown and mouseup meant the browser
+   * never fired `click` (the two events landed on different element
+   * identities). That manifested as "needs 3 clicks to pause".
+   *
+   * Rule of thumb here: any `innerHTML =` / element rebuild MUST be
+   * behind a "did the input change" guard. Plain `.disabled` /
+   * `.textContent` writes are idempotent in browsers and safe to set
+   * unconditionally, but we still diff them for cheap CPU.
+   */
+  render(state) {
+    if (!this.lastState || this.lastState.time !== state.time) {
+      this.timeLabel.textContent = fmtClock(state.time);
+    }
+    if (!this.lastState || this.lastState.duration !== state.duration) {
+      this.durationLabel.textContent = fmtClock(state.duration);
+    }
+    if (!this.lastState || this.lastState.playing !== state.playing) {
+      this.playIcon.innerHTML = state.playing ? ICONS.pause : ICONS.play;
+      this.playBtn.setAttribute(
+        "data-state",
+        state.playing ? "playing" : "paused"
+      );
+    }
+    if (!this.lastState || this.lastState.canUndo !== state.canUndo) {
+      this.undoBtn.disabled = !state.canUndo;
+    }
+    if (!this.lastState || this.lastState.canRedo !== state.canRedo) {
+      this.redoBtn.disabled = !state.canRedo;
+    }
+    if (!this.lastState || this.lastState.canSplit !== state.canSplit) {
+      this.splitBtn.disabled = !state.canSplit;
+    }
+    if (!this.lastState || this.lastState.canTrim !== state.canTrim) {
+      this.trimLeftBtn.disabled = !state.canTrim;
+      this.trimRightBtn.disabled = !state.canTrim;
+    }
+    if (!this.lastState || this.lastState.snap !== state.snap) {
+      this.snapBtn.setAttribute("aria-pressed", state.snap ? "true" : "false");
+      this.snapBtn.classList.toggle("aicut-toggle-on", state.snap);
+      this.snapBtn.title = state.snap ? this.locale.snapOnTitle : this.locale.snapOffTitle;
+    }
+    if (!this.lastState || this.lastState.pxPerSec !== state.pxPerSec) {
+      const ratio = scaleToSlider(state.pxPerSec);
+      const nextVal = String(Math.round(ratio * 100));
+      if (this.zoomSlider.value !== nextVal) this.zoomSlider.value = nextVal;
+      this.zoomSlider.style.setProperty(
+        "--aicut-zoom-fill",
+        `${Math.round(ratio * 100)}%`
+      );
+    }
+    this.lastState = { ...state };
+  }
+  destroy() {
+    this.root.remove();
+  }
+  /**
+   * Apply a new locale to all already-mounted controls. Re-uses the
+   * same DOM elements (so event listeners and pointer-capture state
+   * stay intact) — only writes `title` / `aria-label`. Snap toggle
+   * title is then refreshed via the next render pass.
+   */
+  setLocale(locale) {
+    this.locale = locale;
+    const applyTitle = (el, title) => {
+      if (!el) return;
+      el.title = title;
+      el.setAttribute("aria-label", title);
+    };
+    applyTitle(this.undoBtn, locale.undo);
+    applyTitle(this.redoBtn, locale.redo);
+    applyTitle(this.splitBtn, locale.split);
+    applyTitle(this.trimLeftBtn, locale.trimLeft);
+    applyTitle(this.trimRightBtn, locale.trimRight);
+    applyTitle(this.playBtn, locale.playPause);
+    applyTitle(this.fullscreenBtn, locale.fullscreen);
+    applyTitle(this.snapBtn, locale.snap);
+    applyTitle(this.zoomOutBtn, locale.zoomOut);
+    applyTitle(this.zoomInBtn, locale.zoomIn);
+    applyTitle(this.resetBtn, locale.reset);
+    if (this.lastState) {
+      this.snapBtn.title = this.lastState.snap ? locale.snapOnTitle : locale.snapOffTitle;
+    }
+  }
+  nudgeZoom(dir) {
+    const cur = Number(this.zoomSlider.value);
+    const next = Math.max(0, Math.min(100, cur + dir * 8));
+    this.zoomSlider.value = String(next);
+    this.cb.onScaleChange(sliderToScale(next / 100));
+  }
+};
+function mkGroup(cls) {
+  const d = document.createElement("div");
+  d.className = cls;
+  return d;
+}
+function mkSpan(cls, text, testId) {
+  const s = document.createElement("span");
+  s.className = cls;
+  s.textContent = text;
+  if (testId) s.setAttribute("data-testid", testId);
+  return s;
+}
+function mkIconButton(icon, title, onClick, testId) {
+  const b = document.createElement("button");
+  b.type = "button";
+  b.className = "aicut-icon-btn";
+  b.title = title;
+  b.setAttribute("aria-label", title);
+  b.innerHTML = ICONS[icon];
+  if (testId) b.setAttribute("data-testid", testId);
+  b.addEventListener("click", onClick);
+  return b;
+}
+function sliderToScale(ratio) {
+  const lo = Math.log(SCALE_MIN2);
+  const hi = Math.log(SCALE_MAX2);
+  return Math.exp(lo + (hi - lo) * ratio);
+}
+function scaleToSlider(scale) {
+  const lo = Math.log(SCALE_MIN2);
+  const hi = Math.log(SCALE_MAX2);
+  return (Math.log(Math.max(SCALE_MIN2, Math.min(SCALE_MAX2, scale))) - lo) / (hi - lo);
+}
+
+// src/ui/index.ts
+var EditorUI = class {
+  root;
+  editor;
+  preview;
+  fullscreenExitBtn;
+  toolbar;
+  timelineHost;
+  timeline;
+  fullscreen = false;
+  onDocKeydown = null;
+  constructor(root, editor, cb) {
+    this.root = root;
+    this.editor = editor;
+    const locale = editor.getLocale();
+    root.classList.add("aicut-root");
+    root.innerHTML = "";
+    this.preview = document.createElement("div");
+    this.preview.className = "aicut-preview-host";
+    this.preview.setAttribute("data-testid", "aicut-preview");
+    root.appendChild(this.preview);
+    this.fullscreenExitBtn = document.createElement("button");
+    this.fullscreenExitBtn.type = "button";
+    this.fullscreenExitBtn.className = "aicut-fullscreen-exit";
+    this.fullscreenExitBtn.title = locale.exitFullscreenTitle;
+    this.fullscreenExitBtn.setAttribute("data-testid", "aicut-fullscreen-exit");
+    this.fullscreenExitBtn.textContent = locale.exitFullscreen;
+    this.fullscreenExitBtn.addEventListener(
+      "click",
+      () => this.setFullscreen(false)
+    );
+    this.preview.appendChild(this.fullscreenExitBtn);
+    this.toolbar = new Toolbar(root, cb, locale);
+    this.timelineHost = document.createElement("div");
+    this.timelineHost.className = "aicut-timeline";
+    this.timelineHost.setAttribute("data-testid", "aicut-timeline");
+    root.appendChild(this.timelineHost);
+    this.timeline = Timeline.create({
+      container: this.timelineHost,
+      project: editor.getProject(),
+      pxPerSec: editor.getScale(),
+      time: editor.getTime(),
+      selectedClipId: editor.getSelection(),
+      snap: editor.getSnap(),
+      autoFit: true,
+      locale,
+      onSeek: cb.onSeek,
+      onSelectClip: cb.onSelectClip,
+      onMoveClip: cb.onMoveClip,
+      onResizeClip: cb.onResizeClip,
+      onScaleChange: cb.onScaleChange,
+      onDeleteTrack: (trackId) => editor.removeTrack(trackId),
+      // Mirror the editor's smart routing into the drag preview so
+      // the ghost lands on the same row the commit will pick.
+      resolveDrop: (clipId, intent) => {
+        const proj = editor.getProject();
+        const intendedTrack = proj.tracks[intent.intendedTrackIndex];
+        const pred = editor.previewMoveTarget(
+          clipId,
+          intent.start,
+          intendedTrack?.id
+        );
+        if (!pred) {
+          return {
+            trackIndex: intent.intendedTrackIndex,
+            wouldCreateNew: false
+          };
+        }
+        return {
+          trackIndex: pred.trackIndex,
+          wouldCreateNew: pred.wouldCreateNew
+        };
+      }
+    });
+    this.attachKeyboard(cb);
+  }
+  // ---- fullscreen -----------------------------------------------------
+  isFullscreen() {
+    return this.fullscreen;
+  }
+  toggleFullscreen() {
+    this.setFullscreen(!this.fullscreen);
+  }
+  setFullscreen(on) {
+    if (on === this.fullscreen) return;
+    this.fullscreen = on;
+    this.root.classList.toggle("aicut-fullscreen", on);
+    if (on) {
+      this.onDocKeydown = (e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          this.setFullscreen(false);
+        }
+      };
+      document.addEventListener("keydown", this.onDocKeydown);
+    } else if (this.onDocKeydown) {
+      document.removeEventListener("keydown", this.onDocKeydown);
+      this.onDocKeydown = null;
+    }
+  }
+  get previewHost() {
+    return this.preview;
+  }
+  /** Host-extensible slot at the very left of the top toolbar. */
+  get toolbarLeft() {
+    return this.toolbar.extrasLeft;
+  }
+  /** Host-extensible slot at the very right of the top toolbar. */
+  get toolbarRight() {
+    return this.toolbar.extrasRight;
+  }
+  /** Public for e2e — read-back of timeline canvas state (no DOM clips). */
+  getTimelineDebug() {
+    return this.timeline.getDebugInfo();
+  }
+  /** Full sync from editor state. Idempotent. */
+  render() {
+    const project = this.editor.getProject();
+    const time = this.editor.getTime();
+    const duration = this.editor.getDuration();
+    const selectedClipId = this.editor.getSelection();
+    const pxPerSec = this.editor.getScale();
+    const snap = this.editor.getSnap();
+    this.toolbar.render({
+      playing: this.editor.isPlaying(),
+      time,
+      duration,
+      canUndo: this.editor.canUndo(),
+      canRedo: this.editor.canRedo(),
+      canSplit: this.canSplitAt(time),
+      canTrim: this.canTrimAt(time, selectedClipId),
+      snap,
+      pxPerSec
+    });
+    this.timeline.setProject(project);
+    this.timeline.setTime(time);
+    this.timeline.setScale(pxPerSec);
+    this.timeline.setSelection(selectedClipId);
+    this.timeline.setSnap(snap);
+  }
+  /** Playback-fast path: nudge playhead + toolbar time label only. */
+  onTimeTick(timeMs) {
+    this.timeline.setTime(timeMs);
+    this.toolbar.render({
+      playing: this.editor.isPlaying(),
+      time: timeMs,
+      duration: this.editor.getDuration(),
+      canUndo: this.editor.canUndo(),
+      canRedo: this.editor.canRedo(),
+      canSplit: this.canSplitAt(timeMs),
+      canTrim: this.canTrimAt(timeMs, this.editor.getSelection()),
+      snap: this.editor.getSnap(),
+      pxPerSec: this.editor.getScale()
+    });
+  }
+  /** Explicit re-fit — Editor calls this when a brand-new project replaces the current one. */
+  resetAutoFit() {
+    this.timeline.refit();
+  }
+  setLocale(locale) {
+    this.toolbar.setLocale(locale);
+    this.fullscreenExitBtn.title = locale.exitFullscreenTitle;
+    this.fullscreenExitBtn.textContent = locale.exitFullscreen;
+    this.timeline.setLocale(locale);
+    this.render();
+  }
+  destroy() {
+    if (this.onDocKeydown) {
+      document.removeEventListener("keydown", this.onDocKeydown);
+      this.onDocKeydown = null;
+    }
+    this.toolbar.destroy();
+    this.timeline.destroy();
+    this.root.innerHTML = "";
+    this.root.classList.remove("aicut-root", "aicut-fullscreen");
+  }
+  // ---- helpers --------------------------------------------------------
+  canSplitAt(timeMs) {
+    const project = this.editor.getProject();
+    for (const t of project.tracks) {
+      for (const c of t.clips) {
+        if (timeMs > c.start && timeMs < c.start + clipDuration(c)) return true;
+      }
+    }
+    return false;
+  }
+  canTrimAt(timeMs, selectedClipId) {
+    const project = this.editor.getProject();
+    if (selectedClipId) {
+      const trk = findTrackOfClip(project, selectedClipId);
+      const cl = trk?.clips.find((c) => c.id === selectedClipId);
+      if (cl && timeMs > cl.start && timeMs < cl.start + clipDuration(cl)) {
+        return true;
+      }
+    }
+    for (const t of project.tracks) {
+      const cl = findClipContaining(t, timeMs);
+      if (cl) return true;
+    }
+    return false;
+  }
+  attachKeyboard(cb) {
+    this.root.tabIndex = 0;
+    this.root.addEventListener("keydown", (e) => {
+      const target = e.target;
+      if (target && ["INPUT", "TEXTAREA"].includes(target.tagName)) return;
+      if (e.code === "Space") {
+        e.preventDefault();
+        cb.onPlayToggle();
+      } else if (e.code === "KeyK") {
+        e.preventDefault();
+        cb.onSplit();
+      } else if (e.code === "KeyQ") {
+        e.preventDefault();
+        cb.onTrimLeft();
+      } else if (e.code === "KeyW") {
+        e.preventDefault();
+        cb.onTrimRight();
+      } else if ((e.metaKey || e.ctrlKey) && e.code === "KeyZ") {
+        e.preventDefault();
+        if (e.shiftKey) cb.onRedo();
+        else cb.onUndo();
+      } else if (e.code === "Delete" || e.code === "Backspace") {
+        const sel = this.editor.getSelection();
+        if (sel) {
+          e.preventDefault();
+          cb.onDeleteClip(sel);
+        }
+      }
+    });
+  }
+};
+
+// src/editor.ts
+var DEFAULT_PX_PER_SEC = 80;
+var MIN_PX_PER_SEC = 10;
+var MAX_PX_PER_SEC = 400;
+var SNAP_PX2 = 8;
+var Editor = class _Editor {
+  container;
+  project;
+  engine;
+  ui;
+  bus = new EventBus();
+  history = new HistoryStack();
+  selectedClipId = null;
+  pxPerSec;
+  snap;
+  locale;
+  destroyed = false;
+  constructor(opts) {
+    this.container = opts.container;
+    this.project = normalizeProject(opts.project ?? createEmptyProject());
+    this.pxPerSec = clampScale2(opts.initialScale ?? DEFAULT_PX_PER_SEC);
+    this.snap = opts.initialSnap !== false;
+    this.locale = mergeLocale(opts.locale);
+    applyTheme(this.container, opts.theme);
+    this.ui = new EditorUI(this.container, this, {
+      onPlayToggle: () => this.togglePlay(),
+      onSplit: () => this.split(),
+      onTrimLeft: () => this.trimLeft(),
+      onTrimRight: () => this.trimRight(),
+      onUndo: () => this.undo(),
+      onRedo: () => this.redo(),
+      onReset: () => this.reset(),
+      onFullscreen: () => this.ui.toggleFullscreen(),
+      onSnapToggle: () => this.setSnap(!this.snap),
+      onScaleChange: (s) => this.setScale(s),
+      onSeek: (t) => this.seek(t),
+      onSelectClip: (id) => this.setSelection(id),
+      onDeleteClip: (id) => this.removeClip(id),
+      onMoveClip: (id, opts2) => this.moveClip(id, opts2),
+      onResizeClip: (id, edits) => this.resizeClip(id, edits)
+    });
+    this.engine = new PlaybackEngine(this.ui.previewHost, this.project);
+    this.engine.onTimeUpdate = (ms) => {
+      this.bus.emit("time", { timeMs: ms });
+      this.ui.onTimeTick(ms);
+    };
+    this.engine.onEnded = () => this.bus.emit("pause", void 0);
+    this.engine.onError = (err) => this.bus.emit("error", { error: err });
+    this.engine.onReady = () => this.bus.emit("ready", { sourceId: null });
+    this.engine.onSourceMetadata = (sourceId, durMs) => this.handleSourceMetadata(sourceId, durMs);
+    if (opts.initialTime) this.engine.seek(opts.initialTime);
+    this.ui.render();
+  }
+  static create(opts) {
+    return new _Editor(opts);
+  }
+  get toolbarLeft() {
+    return this.ui.toolbarLeft;
+  }
+  get toolbarRight() {
+    return this.ui.toolbarRight;
+  }
+  // ---- playback -------------------------------------------------------
+  play() {
+    this.engine.play();
+    this.bus.emit("play", void 0);
+    this.ui.render();
+  }
+  pause() {
+    this.engine.pause();
+    this.bus.emit("pause", void 0);
+    this.ui.render();
+  }
+  togglePlay() {
+    if (this.engine.isPlaying()) this.pause();
+    else this.play();
+  }
+  seek(timeMs) {
+    this.engine.seek(timeMs);
+    this.ui.render();
+  }
+  getTime() {
+    return this.engine?.getTime() ?? 0;
+  }
+  getDuration() {
+    return projectDuration(this.project);
+  }
+  isPlaying() {
+    return this.engine?.isPlaying() ?? false;
+  }
+  /**
+   * In-tab "fullscreen" — covers the browser viewport via fixed
+   * positioning, NOT the OS Fullscreen API. This is what the reference
+   * UI calls "全屏预览": the user stays in their tab, no browser
+   * permission prompt, ESC exits. Browser fullscreen would also work
+   * but is heavier UX and gets blocked in iframes.
+   */
+  async enterFullscreen() {
+    this.ui.setFullscreen(true);
+  }
+  async exitFullscreen() {
+    this.ui.setFullscreen(false);
+  }
+  isFullscreen() {
+    return this.ui.isFullscreen();
+  }
+  // ---- editing --------------------------------------------------------
+  /**
+   * Split the clip at `timeMs` (or playhead). Returns the two new clip ids
+   * or null if there's no clip to split at that time.
+   */
+  split(timeMs) {
+    const t = timeMs ?? this.engine.getTime();
+    let target = null;
+    if (this.selectedClipId) {
+      const trk = findTrackOfClip(this.project, this.selectedClipId);
+      const cl = trk?.clips.find((c) => c.id === this.selectedClipId) ?? null;
+      if (trk && cl && t > cl.start && t < clipEnd(cl)) target = { track: trk, clip: cl };
+    }
+    if (!target) {
+      for (const trk of this.project.tracks) {
+        const cl = findClipContaining(trk, t);
+        if (cl && t > cl.start && t < clipEnd(cl)) {
+          target = { track: trk, clip: cl };
+          break;
+        }
+      }
+    }
+    if (!target) return null;
+    const split = splitClipAt(target.clip, t - target.clip.start);
+    if (!split) return null;
+    this.pushHistory();
+    const [left, right] = split;
+    target.track.clips = target.track.clips.filter((c) => c.id !== target.clip.id).concat(left, right).sort((a, b) => a.start - b.start);
+    this.afterMutation();
+    return [left.id, right.id];
+  }
+  cut(timeMs) {
+    return this.split(timeMs);
+  }
+  trimLeft(timeMs) {
+    const t = timeMs ?? this.engine.getTime();
+    const target = this.resolveTrimTarget(t);
+    if (!target) return false;
+    const { clip } = target;
+    const delta = t - clip.start;
+    if (delta <= 0 || delta >= clipDuration(clip)) return false;
+    this.pushHistory();
+    const oldStart = clip.start;
+    clip.in += delta;
+    clip.start += delta;
+    const gapStart = oldStart;
+    const gapEnd = clip.start;
+    let covered = false;
+    outer: for (const trk of this.project.tracks) {
+      for (const c of trk.clips) {
+        if (c.id === clip.id) continue;
+        const cEnd = c.start + clipDuration(c);
+        if (c.start < gapEnd && cEnd > gapStart) {
+          covered = true;
+          break outer;
+        }
+      }
+    }
+    if (!covered) {
+      clip.start = gapStart;
+      for (const trk of this.project.tracks) {
+        for (const c of trk.clips) {
+          if (c.id === clip.id) continue;
+          if (c.start >= gapEnd) c.start -= delta;
+        }
+        trk.clips.sort((a, b) => a.start - b.start);
+      }
+    }
+    this.afterMutation();
+    return true;
+  }
+  trimRight(timeMs) {
+    const t = timeMs ?? this.engine.getTime();
+    const target = this.resolveTrimTarget(t);
+    if (!target) return false;
+    const { clip } = target;
+    const delta = clipEnd(clip) - t;
+    if (delta <= 0 || delta >= clipDuration(clip)) return false;
+    this.pushHistory();
+    clip.out -= delta;
+    this.afterMutation();
+    return true;
+  }
+  removeClip(clipId) {
+    let removed = false;
+    const before = JSON.stringify(this.project);
+    for (const t of this.project.tracks) {
+      const len = t.clips.length;
+      t.clips = t.clips.filter((c) => c.id !== clipId);
+      if (t.clips.length !== len) removed = true;
+    }
+    if (!removed) return false;
+    this.history.push(JSON.parse(before));
+    if (this.selectedClipId === clipId) {
+      this.selectedClipId = null;
+      this.bus.emit("selectionChange", { clipId: null });
+    }
+    this.afterMutation();
+    return true;
+  }
+  setClipSpeed(clipId, speed) {
+    if (!Number.isFinite(speed) || speed <= 0) return false;
+    const trk = findTrackOfClip(this.project, clipId);
+    const cl = trk?.clips.find((c) => c.id === clipId);
+    if (!trk || !cl) return false;
+    this.pushHistory();
+    cl.speed = speed === 1 ? void 0 : speed;
+    this.afterMutation();
+    return true;
+  }
+  // ---- tracks ---------------------------------------------------------
+  addTrack(kind) {
+    this.pushHistory();
+    const t = { id: createId("track"), kind, clips: [] };
+    this.project.tracks.push(t);
+    this.afterMutation();
+    return t;
+  }
+  removeTrack(trackId) {
+    const idx = this.project.tracks.findIndex((t) => t.id === trackId);
+    if (idx < 0) return false;
+    this.pushHistory();
+    this.project.tracks.splice(idx, 1);
+    this.afterMutation();
+    return true;
+  }
+  /**
+   * Pure prediction of where a `moveClip(...)` would land — same smart
+   * routing as the real move (intended → source → other → new track),
+   * just no mutation, no history. Lets the Timeline preview the
+   * ACTUAL outcome of a drop so the ghost stops lying about new
+   * tracks that won't get created.
+   */
+  previewMoveTarget(clipId, start, intendedTrackId) {
+    const fromTrack = findTrackOfClip(this.project, clipId);
+    const clip = fromTrack?.clips.find((c) => c.id === clipId);
+    if (!fromTrack || !clip) return null;
+    const nextStart = Math.max(0, start);
+    const nextEnd = nextStart + clipDuration(clip);
+    const intended = intendedTrackId ? this.project.tracks.find((t) => t.id === intendedTrackId) : fromTrack;
+    const candidates = [];
+    const seen = /* @__PURE__ */ new Set();
+    const push = (t) => {
+      if (!t || seen.has(t.id)) return;
+      seen.add(t.id);
+      candidates.push(t);
+    };
+    push(intended);
+    push(fromTrack);
+    for (const t of this.project.tracks) {
+      if (t.kind === fromTrack.kind) push(t);
+    }
+    for (const c of candidates) {
+      if (!wouldOverlap(c, clipId, nextStart, nextEnd)) {
+        const idx = this.project.tracks.indexOf(c);
+        return { trackIndex: idx, trackId: c.id, wouldCreateNew: false };
+      }
+    }
+    return {
+      trackIndex: this.project.tracks.length,
+      trackId: "",
+      wouldCreateNew: true
+    };
+  }
+  moveClip(clipId, opts) {
+    const fromTrack = findTrackOfClip(this.project, clipId);
+    const clip = fromTrack?.clips.find((c) => c.id === clipId);
+    if (!fromTrack || !clip) return false;
+    const nextStart = Math.max(0, opts.start ?? clip.start);
+    const nextEnd = nextStart + clipDuration(clip);
+    if (opts.newTrack) {
+      this.pushHistory();
+      const created = this.appendTrack({ kind: fromTrack.kind });
+      clip.start = nextStart;
+      fromTrack.clips = fromTrack.clips.filter((c) => c.id !== clipId);
+      created.clips.push(clip);
+      if (fromTrack.clips.length === 0 && this.project.tracks.filter((t) => t.kind === fromTrack.kind).length > 1) {
+        this.project.tracks = this.project.tracks.filter(
+          (t) => t.id !== fromTrack.id
+        );
+      }
+      this.afterMutation();
+      return true;
+    }
+    const intended = opts.trackId ? this.project.tracks.find((t) => t.id === opts.trackId) : fromTrack;
+    if (!intended) return false;
+    this.pushHistory();
+    const candidates = [];
+    const seen = /* @__PURE__ */ new Set();
+    const push = (t) => {
+      if (!t || seen.has(t.id)) return;
+      seen.add(t.id);
+      candidates.push(t);
+    };
+    push(intended);
+    push(fromTrack);
+    for (const t of this.project.tracks) {
+      if (t.kind === fromTrack.kind) push(t);
+    }
+    let targetTrack = null;
+    for (const c of candidates) {
+      if (!wouldOverlap(c, clipId, nextStart, nextEnd)) {
+        targetTrack = c;
+        break;
+      }
+    }
+    if (!targetTrack) {
+      targetTrack = this.appendTrack({ kind: fromTrack.kind });
+    }
+    clip.start = nextStart;
+    if (targetTrack !== fromTrack) {
+      fromTrack.clips = fromTrack.clips.filter((c) => c.id !== clipId);
+      targetTrack.clips.push(clip);
+    }
+    targetTrack.clips.sort((a, b) => a.start - b.start);
+    if (fromTrack !== targetTrack && fromTrack.clips.length === 0 && this.project.tracks.filter((t) => t.kind === fromTrack.kind).length > 1) {
+      this.project.tracks = this.project.tracks.filter(
+        (t) => t.id !== fromTrack.id
+      );
+    }
+    this.afterMutation();
+    return true;
+  }
+  resizeClip(clipId, edits) {
+    const trk = findTrackOfClip(this.project, clipId);
+    const cl = trk?.clips.find((c) => c.id === clipId);
+    if (!trk || !cl) return false;
+    const next = { ...cl, ...edits };
+    if (next.out <= next.in) return false;
+    if (next.start < 0) return false;
+    this.pushHistory();
+    Object.assign(cl, next);
+    trk.clips.sort((a, b) => a.start - b.start);
+    this.afterMutation();
+    return true;
+  }
+  addSource(source, opts = {}) {
+    const src = { ...source, id: source.id || createId("src") };
+    this.pushHistory();
+    this.project.sources.push(src);
+    const append = opts.appendClip !== false;
+    if (append && src.kind === "video") {
+      const track = this.project.tracks.find((t) => t.kind === "video") ?? this.appendTrack({ kind: "video" });
+      const start = trackEnd(track);
+      track.clips.push({
+        id: createId("clip"),
+        sourceId: src.id,
+        in: 0,
+        out: src.duration ?? 0,
+        start
+      });
+    }
+    this.afterMutation();
+    return src;
+  }
+  // ---- project --------------------------------------------------------
+  setProject(project) {
+    this.pushHistory();
+    this.project = normalizeProject(project);
+    this.engine.setProject(this.project);
+    this.bus.emit("change", { project: this.getProject() });
+    this.emitHistory();
+    this.ui.resetAutoFit();
+    this.ui.render();
+  }
+  getProject() {
+    return JSON.parse(JSON.stringify(this.project));
+  }
+  /**
+   * Restore the "fresh import" state: same media library, single
+   * default video track, one full-length clip per video source laid
+   * end-to-end. This mirrors the initial layout a host would get
+   * after dropping their videos in, so "reset" feels like "start
+   * over without re-importing" rather than "wipe everything".
+   *
+   * Goes through the regular history stack — ⌘Z brings the previous
+   * edit back. Sources without a known duration are skipped (they'd
+   * render as zero-width clips, which is worse than absent).
+   */
+  reset() {
+    const sources = this.project.sources.map((s) => ({ ...s }));
+    const trackId = createId("track");
+    const clips = [];
+    let start = 0;
+    for (const src of sources) {
+      if (src.kind !== "video") continue;
+      const dur = src.duration;
+      if (!dur || dur <= 0) continue;
+      clips.push({
+        id: createId("clip"),
+        sourceId: src.id,
+        in: 0,
+        out: dur,
+        start
+      });
+      start += dur;
+    }
+    this.setProject({
+      version: 1,
+      sources,
+      tracks: [{ id: trackId, kind: "video", clips }]
+    });
+  }
+  setTheme(theme) {
+    applyTheme(this.container, theme);
+    this.ui.render();
+  }
+  setLocale(locale) {
+    this.locale = mergeLocale(locale);
+    this.ui.setLocale(this.locale);
+  }
+  /** Internal — UI reads the resolved locale here on each render. */
+  getLocale() {
+    return this.locale;
+  }
+  requestExport() {
+    this.bus.emit("export", { project: this.getProject() });
+  }
+  // ---- viewport -------------------------------------------------------
+  getScale() {
+    return this.pxPerSec;
+  }
+  setScale(pxPerSec) {
+    const next = clampScale2(pxPerSec);
+    if (next === this.pxPerSec) return;
+    this.pxPerSec = next;
+    this.bus.emit("scaleChange", { pxPerSec: next });
+    this.ui.render();
+  }
+  getSnap() {
+    return this.snap;
+  }
+  setSnap(snap) {
+    if (snap === this.snap) return;
+    this.snap = snap;
+    this.bus.emit("snapChange", { snap });
+    this.ui.render();
+  }
+  /** Snap a candidate ms to the nearest snappable surface within SNAP_PX. */
+  snapMs(timeMs, ignoreClipId) {
+    if (!this.snap) return timeMs;
+    const snapTol = Math.max(20, SNAP_PX2 / this.pxPerSec * 1e3);
+    const targets = [0, this.engine.getTime()];
+    for (const t of this.project.tracks) {
+      for (const c of t.clips) {
+        if (c.id === ignoreClipId) continue;
+        targets.push(c.start, clipEnd(c));
+      }
+    }
+    let best = timeMs;
+    let bestDist = snapTol;
+    for (const t of targets) {
+      const d = Math.abs(t - timeMs);
+      if (d < bestDist) {
+        bestDist = d;
+        best = t;
+      }
+    }
+    return best;
+  }
+  // ---- selection ------------------------------------------------------
+  getSelection() {
+    return this.selectedClipId;
+  }
+  setSelection(clipId) {
+    if (clipId === this.selectedClipId) return;
+    this.selectedClipId = clipId;
+    this.bus.emit("selectionChange", { clipId });
+    this.ui.render();
+  }
+  // ---- history --------------------------------------------------------
+  canUndo() {
+    return this.history.canUndo();
+  }
+  canRedo() {
+    return this.history.canRedo();
+  }
+  undo() {
+    const prev = this.history.undo(this.project);
+    if (!prev) return false;
+    this.project = prev;
+    this.engine.setProject(this.project);
+    this.bus.emit("change", { project: this.getProject() });
+    this.emitHistory();
+    this.ui.render();
+    return true;
+  }
+  redo() {
+    const next = this.history.redo(this.project);
+    if (!next) return false;
+    this.project = next;
+    this.engine.setProject(this.project);
+    this.bus.emit("change", { project: this.getProject() });
+    this.emitHistory();
+    this.ui.render();
+    return true;
+  }
+  // ---- events ---------------------------------------------------------
+  on(event, handler) {
+    return this.bus.on(event, handler);
+  }
+  off(event, handler) {
+    this.bus.off(event, handler);
+  }
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.engine.destroy();
+    this.ui.destroy();
+    this.bus.clear();
+    this.history.clear();
+  }
+  // ---- internals ------------------------------------------------------
+  appendTrack(opts) {
+    const t = { id: createId("track"), kind: opts.kind, clips: [] };
+    this.project.tracks.push(t);
+    return t;
+  }
+  resolveTrimTarget(timeMs) {
+    if (this.selectedClipId) {
+      const trk = findTrackOfClip(this.project, this.selectedClipId);
+      const cl = trk?.clips.find((c) => c.id === this.selectedClipId);
+      if (trk && cl && timeMs >= cl.start && timeMs <= clipEnd(cl)) {
+        return { track: trk, clip: cl };
+      }
+    }
+    for (const trk of this.project.tracks) {
+      const cl = findClipContaining(trk, timeMs);
+      if (cl) return { track: trk, clip: cl };
+    }
+    return null;
+  }
+  pushHistory() {
+    this.history.push(this.project);
+    this.emitHistory();
+  }
+  emitHistory() {
+    this.bus.emit("historyChange", {
+      canUndo: this.history.canUndo(),
+      canRedo: this.history.canRedo()
+    });
+  }
+  afterMutation() {
+    this.engine.setProject(this.project);
+    this.bus.emit("change", { project: this.getProject() });
+    this.ui.render();
+  }
+  handleSourceMetadata(sourceId, durMs) {
+    const src = this.project.sources.find((s) => s.id === sourceId);
+    let mutated = false;
+    if (src && !src.duration) {
+      src.duration = durMs;
+      mutated = true;
+    }
+    for (const t of this.project.tracks) {
+      for (const c of t.clips) {
+        if (c.sourceId === sourceId && c.out === 0) {
+          c.out = durMs;
+          mutated = true;
+        }
+      }
+    }
+    this.bus.emit("ready", { sourceId });
+    if (mutated) {
+      this.engine.setProject(this.project);
+      this.bus.emit("change", { project: this.getProject() });
+      this.ui.render();
+    }
+  }
+};
+function clampScale2(s) {
+  return Math.max(MIN_PX_PER_SEC, Math.min(MAX_PX_PER_SEC, s));
+}
+
+exports.Editor = Editor;
+exports.HEADER_WIDTH = HEADER_WIDTH;
+exports.RULER_HEIGHT = RULER_HEIGHT;
+exports.TRACK_HEIGHT = TRACK_HEIGHT;
+exports.Timeline = Timeline;
+exports.createEmptyProject = createEmptyProject;
+exports.createId = createId;
+exports.formatLabel = formatLabel;
+exports.localeEn = localeEn;
+exports.localeZh = localeZh;
+exports.mergeLocale = mergeLocale;
+exports.normalizeProject = normalizeProject;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map