kingkont 0.7.39 → 0.7.40

package/renderer/timeline.js

@@ -0,0 +1,2836 @@
+// renderer/timeline.js — Timeline (CapCut-style), Web Audio engine, replicas, native preview panel
+//
+// Этот модуль был выделен из index.html (раньше всё было в одном <script>
+// блоке на 9123 строки). Все модули загружаются как plain <script>
+// в одном глобальном scope — поэтому функции/переменные между файлами
+// видят друг друга по именам, без import/export. Порядок загрузки
+// важен: см. <script> теги внизу index.html.
+
+// =================== Таймлайн (CapCut-style) ===================
+function defaultTimeline() {
+  return {
+    tracks: [
+      { id: crypto.randomUUID(), name: 'Видео',   kind: 'video', clips: [] },
+      { id: crypto.randomUUID(), name: 'Голос',   kind: 'audio', clips: [] },
+      { id: crypto.randomUUID(), name: 'Эффекты', kind: 'audio', clips: [] },
+      { id: crypto.randomUUID(), name: 'Аудио',   kind: 'audio', clips: [] },
+    ],
+  };
+}
+
+function getTimeline() {
+  if (!state.currentBoard) return null;
+  let tl = state.currentBoard.metadata.timeline;
+  // Миграция: старый плоский массив → 3 дорожки
+  if (Array.isArray(tl)) {
+    const migrated = defaultTimeline();
+    for (const c of tl) {
+      const targetKind = c.type === 'audio' ? 'audio' : 'video';
+      const t = migrated.tracks.find(x => x.kind === targetKind);
+      if (t) t.clips.push(c);
+    }
+    state.currentBoard.metadata.timeline = migrated;
+    tl = migrated;
+    scheduleSave();
+  } else if (!tl || typeof tl !== 'object' || !Array.isArray(tl.tracks)) {
+    tl = defaultTimeline();
+    state.currentBoard.metadata.timeline = tl;
+  }
+  return tl;
+}
+
+function defaultClipDuration(node) {
+  if (node.type === 'image') return 3;
+  return 5;
+}
+
+function findClipById(tl, clipId) {
+  for (const t of tl.tracks) {
+    const i = t.clips.findIndex(c => c.id === clipId);
+    if (i >= 0) return { track: t, idx: i, clip: t.clips[i] };
+  }
+  return null;
+}
+
+// === Снимок таймлайна для undo (вызывать ДО мутации) ===
+function pushTimelineUndo(label = 'Изменение таймлайна') {
+  pushHistory(label);
+}
+
+// Разрезать клип на 2 части в timelineTime (timeline-секундах). Возвращает true если успешно.
+function splitClipAt(clip, track, timelineTime) {
+  const start = +clip.start || 0;
+  const dur = +clip.duration || 0;
+  if (dur <= 0) return false;
+  const inClip = timelineTime - start;
+  // не режем у самых краёв (минимум 0.05с с каждой стороны)
+  if (inClip <= 0.05 || inClip >= dur - 0.05) return false;
+  const right = {
+    ...clip,
+    id: crypto.randomUUID(),
+    start: +(start + inClip).toFixed(3),
+    duration: +(dur - inClip).toFixed(3),
+    trimStart: +((+clip.trimStart || 0) + inClip).toFixed(3),
+    _durationLoaded: clip._durationLoaded,
+    sourceDuration: clip.sourceDuration,
+    nodeId: clip.nodeId, // обе половинки ссылаются на ту же ноду — удобно для регенерации
+  };
+  // group: если был — оставим обе половинки в группе
+  // (right уже наследует groupId через ...clip)
+  clip.duration = +inClip.toFixed(3);
+  const idx = track.clips.findIndex(c => c.id === clip.id);
+  track.clips.splice(idx + 1, 0, right);
+  return true;
+}
+
+// === Группы клипов: вернуть всех членов группы (без указанного) ===
+function getGroupSiblings(groupId, tl, excludeId) {
+  if (!groupId || !tl?.tracks) return [];
+  const out = [];
+  for (const t of tl.tracks) {
+    for (const c of t.clips) {
+      if (c.id !== excludeId && c.groupId === groupId) out.push(c);
+    }
+  }
+  return out;
+}
+function getGroupClips(groupId, tl) {
+  return getGroupSiblings(groupId, tl, null);
+}
+
+// Drop клипа на холст: если есть привязанная нода — переносим её, иначе создаём.
+// pushHistory вызван снаружи.
+async function dropClipOnCanvas(clip, clientX, clientY) {
+  if (!state.currentBoard) return;
+  const rect = canvas.getBoundingClientRect();
+  const x = Math.max(0, (clientX - rect.left) / state.zoom - 140);
+  const y = Math.max(0, (clientY - rect.top)  / state.zoom - 80);
+  let node = clip.nodeId
+    ? state.currentBoard.metadata.nodes.find(n => n.id === clip.nodeId)
+    : null;
+  if (node) {
+    node.x = x; node.y = y;
+    const el = canvas.querySelector(`.node[data-id="${node.id}"]`);
+    if (el) {
+      el.style.left = x + 'px';
+      el.style.top  = y + 'px';
+      // Поднимаем z-order
+      const arr = state.currentBoard.metadata.nodes;
+      const idx = arr.indexOf(node);
+      if (idx >= 0 && idx < arr.length - 1) { arr.splice(idx, 1); arr.push(node); }
+      canvas.appendChild(el);
+    } else {
+      // ноды нет в DOM (не отрисована) — добавляем
+      canvas.appendChild(await createNodeEl(node));
+    }
+    clearSelection();
+    state.selectedNodeIds.add(node.id);
+    renderSelection();
+    renderConnections();
+    scheduleSave();
+    return;
+  }
+  // Нет привязки — создадим ноду из клипа
+  node = {
+    id: crypto.randomUUID(),
+    type: clip.type,
+    file: clip.file,
+    name: clip.name || (clip.file || '').split('/').pop(),
+    x, y,
+  };
+  state.currentBoard.metadata.nodes.push(node);
+  canvas.appendChild(await createNodeEl(node));
+  clip.nodeId = node.id; // привязали клип к новой ноде
+  clearSelection();
+  state.selectedNodeIds.add(node.id);
+  renderSelection();
+  scheduleSave();
+}
+
+// Удалить выделенные клипы (с history). Файл-ноды на холсте остаются — клип это
+// просто ссылка на файл/ноду, удаление клипа не трогает источник.
+async function deleteSelectedClips() {
+  const tl = getTimeline();
+  if (!tl?.tracks || !state.selectedClipIds.size) return;
+  const ids = new Set(state.selectedClipIds);
+  pushHistory('Удаление клипов');
+  for (const t of tl.tracks) {
+    t.clips = t.clips.filter(c => !ids.has(c.id));
+  }
+  state.selectedClipIds.clear();
+  scheduleSave();
+  await renderTimeline();
+}
+
+// === Выделение клипов и дорожек на таймлайне ===
+function clearTimelineSelection() {
+  state.selectedClipIds.clear();
+  state.selectedTrackIds.clear();
+  applyTimelineSelectionVisuals();
+}
+function applyTimelineSelectionVisuals() {
+  const tracksEl = $('timelineTracks');
+  if (!tracksEl) return;
+  for (const el of tracksEl.querySelectorAll('.timeline-clip')) {
+    el.classList.toggle('selected', state.selectedClipIds.has(el.dataset.id));
+  }
+  for (const el of tracksEl.querySelectorAll('.timeline-track')) {
+    el.classList.toggle('selected', state.selectedTrackIds.has(el.dataset.trackId));
+  }
+}
+function selectClipById(clipId, additive) {
+  const tl = state.currentBoard?.metadata?.timeline;
+  // Если клип в группе — оперируем всей группой как единым целым
+  let ids = [clipId];
+  if (tl?.tracks) {
+    const clip = tl.tracks.flatMap(t => t.clips).find(c => c.id === clipId);
+    if (clip?.groupId) {
+      ids = tl.tracks.flatMap(t => t.clips).filter(c => c.groupId === clip.groupId).map(c => c.id);
+    }
+  }
+  if (!additive) {
+    state.selectedClipIds.clear();
+    state.selectedTrackIds.clear();
+  } else {
+    state.selectedTrackIds.clear();
+  }
+  const allSelected = ids.every(id => state.selectedClipIds.has(id));
+  for (const id of ids) {
+    if (allSelected) state.selectedClipIds.delete(id);
+    else state.selectedClipIds.add(id);
+  }
+  applyTimelineSelectionVisuals();
+}
+function selectTrackById(trackId, additive) {
+  if (!additive) {
+    state.selectedTrackIds.clear();
+    state.selectedClipIds.clear();
+  } else {
+    state.selectedClipIds.clear();
+  }
+  if (state.selectedTrackIds.has(trackId)) state.selectedTrackIds.delete(trackId);
+  else state.selectedTrackIds.add(trackId);
+  applyTimelineSelectionVisuals();
+}
+
+// Скопировать клипы (по списку id) в state.clipboard в формате {node, blob}
+async function copyTimelineClipsToClipboard(clipIds) {
+  if (!state.currentBoard || !clipIds?.length) return 0;
+  const tl = getTimeline();
+  if (!tl) return 0;
+  const items = [];
+  for (const id of clipIds) {
+    const found = findClipById(tl, id);
+    if (!found) continue;
+    const clip = found.clip;
+    if (!clip.file) continue;
+    let blob = null;
+    try {
+      const fh = await resolveBoardFile(state.currentBoard.handle, clip.file);
+      blob = await fh.getFile();
+    } catch (e) { console.warn('clip blob load failed', clip.file, e); }
+    if (!blob) continue;
+    items.push({
+      node: {
+        id: crypto.randomUUID(),
+        type: clip.type,
+        file: clip.file,
+        name: clip.name,
+      },
+      blob,
+    });
+  }
+  if (!items.length) return 0;
+  state.clipboard = items;
+  console.log(`Скопировано в буфер с таймлайна: ${items.length}`);
+  return items.length;
+}
+
+// Перепаковать клипы дорожки последовательно (без зазоров)
+function restackTrack(track) {
+  let cum = 0;
+  for (const c of track.clips) {
+    c.start = cum;
+    cum += +c.duration || 0;
+  }
+}
+
+// Ripple-insert: вставить clip в targetTrack по позиции proposedStart, сдвинув соседей
+function rippleInsertClip(targetTrack, clip, sourceTrack, proposedStart) {
+  // Удаляем clip из его текущего места (в обоих track'ах на всякий случай)
+  if (sourceTrack !== targetTrack) {
+    sourceTrack.clips = sourceTrack.clips.filter(c => c.id !== clip.id);
+  }
+  targetTrack.clips = targetTrack.clips.filter(c => c.id !== clip.id);
+  targetTrack.clips.sort((a, b) => (+a.start || 0) - (+b.start || 0));
+  // Точка вставки — по середине клипов: куда ближе, туда и попадаем
+  let insertAt = targetTrack.clips.length;
+  for (let i = 0; i < targetTrack.clips.length; i++) {
+    const c = targetTrack.clips[i];
+    const mid = (+c.start || 0) + (+c.duration || 0) / 2;
+    if (proposedStart < mid) { insertAt = i; break; }
+  }
+  targetTrack.clips.splice(insertAt, 0, clip);
+  restackTrack(targetTrack);
+  if (sourceTrack !== targetTrack) restackTrack(sourceTrack);
+}
+
+// Вставить элементы буфера на дорожку таймлайна, начиная с dropTime
+async function pasteClipboardToTimeline(track, dropTime) {
+  if (!state.currentBoard || !state.clipboard?.length) return;
+  const items = state.clipboard.filter(it => {
+    if (it.node.type === 'text') return false;
+    if (!it.blob && !it.node.file) return false;
+    return track.kind === 'video'
+      ? (it.node.type === 'video' || it.node.type === 'image')
+      : it.node.type === 'audio';
+  });
+  if (!items.length) return;
+  let cursor = Math.max(0, dropTime || 0);
+  for (const item of items) {
+    const src = item.node;
+    let newFile;
+    if (item.blob) {
+      const sub = boardSubdirForType(src.type);
+      const baseName = src.file ? src.file.split('/').pop() : `pasted-${Date.now()}`;
+      const dir = sub ? await getOrCreateBoardSubdir(state.currentBoard.handle, sub) : state.currentBoard.handle;
+      const newName = await uniqueName(dir, baseName);
+      await writeFile(dir, newName, item.blob);
+      newFile = sub ? `${sub}/${newName}` : newName;
+    } else {
+      newFile = src.file;
+    }
+    const newClip = {
+      id: crypto.randomUUID(),
+      nodeId: null,
+      type: src.type,
+      file: newFile,
+      name: src.name || newFile.split('/').pop(),
+      duration: src.type === 'image' ? 3 : 5,
+      start: 0,
+    };
+    if (track.kind === 'video') {
+      track.clips.push(newClip);
+      rippleInsertClip(track, newClip, track, cursor);
+      cursor = (newClip.start || 0) + (newClip.duration || 5);
+    } else {
+      newClip.start = cursor;
+      track.clips.push(newClip);
+      cursor += newClip.duration || 5;
+    }
+  }
+  scheduleSave();
+  await renderTimeline();
+}
+
+// Открыть gen-модалку для генерации аудио в нужной точке таймлайна
+async function openGenAudioForTimeline(charInfo, track, time) {
+  state.timelineGenTarget = { trackId: track.id, time: Math.max(0, +time || 0), charName: charInfo.name };
+  state.genKind = 'audio';
+  state.regenerateTarget = null;
+  state.sourceRef = null;
+  state.pendingConnectionFrom = null;
+  // UI таблиц/строк
+  document.querySelectorAll('#genModal [data-kind]').forEach(b =>
+    b.classList.toggle('active', b.dataset.kind === 'audio'));
+  $('imageModelRow').style.display = 'none';
+
+  $('imageOptionsRow').style.display = 'none';
+  $('videoOptionsRow').style.display = 'none';
+
+  $('videoModelRow').style.display = 'none';
+  $('voiceRow').style.display = '';
+
+  $('ttsModelRow').style.display = '';
+  $('tonesRow').style.display = '';
+  $('sourceRefRow').style.display = 'none';
+  $('charsPickRow').style.display = 'none';
+  $('locPickRow').style.display = 'none';
+  resetPicks();
+  await loadVoices();
+  if (charInfo.voice) $('genVoice').value = charInfo.voice;
+  state.toneSuggestions = (charInfo.commonTones || []).slice();
+  // Активные тоны: обычный тон (если задан) → последние использованные → пусто
+  if (charInfo.tone) state.activeTones = [charInfo.tone];
+  else if (Array.isArray(charInfo.lastTones) && charInfo.lastTones.length) state.activeTones = [...charInfo.lastTones];
+  else state.activeTones = [];
+  renderTones();
+  $('genPrompt').value = '';
+  $('genPrompt').setAttribute('placeholder', `Что должен сказать ${charInfo.name}...`);
+  $('genStatus').textContent = '';
+  $('genStatus').className = 'status';
+  $('genSubmit').disabled = false;
+  closeMentionPopup();
+  $('genModal').classList.remove('hidden');
+  setTimeout(() => $('genPrompt').focus(), 50);
+}
+
+// Меню после ПКМ-drag: Копировать / Заменить
+function showRightDragMenu(clientX, clientY, ctx) {
+  const menu = $('nodeMenu');
+  menu.innerHTML = '';
+  const add = (label, fn, opts = {}) => {
+    const b = document.createElement('button');
+    b.textContent = label;
+    if (opts.disabled) { b.disabled = true; b.style.opacity = '0.4'; }
+    if (opts.danger) b.style.color = '#f88';
+    b.addEventListener('click', () => { menu.classList.add('hidden'); fn(); });
+    menu.appendChild(b);
+  };
+  add('⎘ Копировать сюда', () => doRightDragAction({ ...ctx, action: 'copy' }));
+  add('⇄ Заменить', () => doRightDragAction({ ...ctx, action: 'replace' }), { disabled: !ctx.victimId });
+  add('Отмена', () => {});
+  positionFloatingMenu(menu, clientX, clientY);
+  setTimeout(() => document.addEventListener('mousedown', closeNodeMenu, { once: true }), 0);
+}
+
+function doRightDragAction(ctx) {
+  const { sourceClip, sourceTrack, targetTrack, victimId, dropTime, action } = ctx;
+  if (action === 'copy') {
+    const dup = { ...sourceClip, id: crypto.randomUUID(), _durationLoaded: false };
+    if (targetTrack.kind === 'video') {
+      targetTrack.clips.push(dup);
+      rippleInsertClip(targetTrack, dup, targetTrack, dropTime);
+    } else {
+      dup.start = Math.max(0, dropTime);
+      targetTrack.clips.push(dup);
+    }
+  } else if (action === 'replace') {
+    if (!victimId) return;
+    replaceClipInTrack(targetTrack, sourceClip, sourceTrack, victimId);
+  }
+  scheduleSave();
+  renderTimeline();
+}
+
+// Replace: заменить клип victimId в targetTrack на clip
+function replaceClipInTrack(targetTrack, clip, sourceTrack, victimId) {
+  if (clip.id === victimId) return;
+  // Убираем clip из исходного места
+  if (sourceTrack !== targetTrack) {
+    sourceTrack.clips = sourceTrack.clips.filter(c => c.id !== clip.id);
+  }
+  // В target: убираем clip-двойник (если он там был), затем заменяем victim
+  targetTrack.clips = targetTrack.clips.filter(c => c.id !== clip.id);
+  const victimIdx = targetTrack.clips.findIndex(c => c.id === victimId);
+  if (victimIdx < 0) {
+    targetTrack.clips.push(clip);
+  } else {
+    targetTrack.clips.splice(victimIdx, 1, clip);
+  }
+  restackTrack(targetTrack);
+  if (sourceTrack !== targetTrack) restackTrack(sourceTrack);
+}
+
+async function addToTimeline(node) {
+  if (!state.currentBoard) return;
+  if (!['image', 'video', 'audio'].includes(node.type) || !node.file) return;
+  const tl = getTimeline();
+  const wantedKind = node.type === 'audio' ? 'audio' : 'video';
+  // Audio с subKind подбираем профильную дорожку по имени:
+  // sfx → «Эффекты», music → «Музыка», обычный голос → «Голос»/«Аудио».
+  const subKind = node.generated?.subKind;
+  const nameMatch = (track, kw) => kw.test((track.name || '').toLowerCase());
+  let target = null;
+  if (wantedKind === 'audio') {
+    if (subKind === 'sfx') {
+      target = tl.tracks.find(t => t.kind === 'audio' && nameMatch(t, /эффект|sfx|sound|fx/i));
+    } else if (subKind === 'music') {
+      target = tl.tracks.find(t => t.kind === 'audio' && nameMatch(t, /музык|music|саунд/i));
+    } else {
+      // Голос / реплика — предпочитаем дорожку с «голос/voice/speech/диалог».
+      target = tl.tracks.find(t => t.kind === 'audio' && nameMatch(t, /голос|voice|speech|диалог|реплик/i));
+    }
+  }
+  if (!target) target = tl.tracks.find(t => t.kind === wantedKind) || tl.tracks[0];
+  if (!target) {
+    alert('Нет дорожек. Создай хотя бы одну.');
+    return;
+  }
+  const trackEnd = target.clips.reduce((m, c) =>
+    Math.max(m, (+c.start || 0) + (+c.duration || 0)), 0);
+  target.clips.push({
+    id: crypto.randomUUID(),
+    nodeId: node.id, type: node.type, file: node.file,
+    name: node.name || node.file.split('/').pop(),
+    duration: defaultClipDuration(node),
+    start: trackEnd,
+  });
+  scheduleSave();
+  $('timelinePanel').classList.remove('hidden');
+  await renderTimeline();
+}
+
+function addTrack(name = 'Новая', kind = 'audio') {
+  const tl = getTimeline();
+  tl.tracks.push({ id: crypto.randomUUID(), name, kind, clips: [] });
+  scheduleSave();
+  renderTimeline();
+}
+
+function removeTrack(trackId) {
+  const tl = getTimeline();
+  const t = tl.tracks.find(x => x.id === trackId);
+  if (!t) return;
+  if (t.clips.length && !confirm(`Удалить дорожку "${t.name}" (${t.clips.length} клип(ов))?`)) return;
+  tl.tracks = tl.tracks.filter(x => x.id !== trackId);
+  scheduleSave();
+  renderTimeline();
+}
+
+function moveClipToTrack(clipId, targetTrackId, beforeClipId = null) {
+  const tl = getTimeline();
+  const found = findClipById(tl, clipId);
+  if (!found) return;
+  const target = tl.tracks.find(x => x.id === targetTrackId);
+  if (!target) return;
+  if (found.track.id === targetTrackId && !beforeClipId) return;
+  // удаляем из старой дорожки
+  found.track.clips.splice(found.idx, 1);
+  // вставка
+  if (beforeClipId) {
+    const i = target.clips.findIndex(c => c.id === beforeClipId);
+    if (i >= 0) target.clips.splice(i, 0, found.clip);
+    else target.clips.push(found.clip);
+  } else {
+    target.clips.push(found.clip);
+  }
+  scheduleSave();
+  renderTimeline();
+}
+
+// Snap-магнит: ближайшая «интересная» точка времени для прилипания
+const SNAP_PX = 8;
+function getSnapTargets(tl, excludeClipId) {
+  const t = [0];
+  for (const tr of tl.tracks) {
+    for (const c of tr.clips) {
+      if (c.id === excludeClipId) continue;
+      const s = +c.start || 0, d = +c.duration || 0;
+      t.push(s, s + d);
+    }
+  }
+  if (typeof state.playheadTime === 'number') t.push(state.playheadTime);
+  return t;
+}
+function snapTime(time, targets, zoom) {
+  let best = time, bestDist = Infinity;
+  for (const tg of targets) {
+    const d = Math.abs((time - tg) * zoom);
+    if (d < SNAP_PX && d < bestDist) { best = tg; bestDist = d; }
+  }
+  return best;
+}
+
+function attachClipTrim(el, clip, handle, side) {
+  handle.addEventListener('mousedown', e => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    handle.classList.add('active');
+    const startX = e.clientX;
+    const origStart = +clip.start || 0;
+    const origDuration = +clip.duration || 1;
+    const origTrim = +clip.trimStart || 0;
+    const onMove = ev => {
+      const tl = state.currentBoard?.metadata?.timeline;
+      const targets = tl ? getSnapTargets(tl, clip.id) : [0];
+      const dt = (ev.clientX - startX) / state.timelineZoom;
+      // Максимально допустимая длительность клипа: для media — sourceDuration - trimStart
+      // для image — без ограничений (картинка timeless)
+      const maxDur = (clip.type === 'image' || !clip.sourceDuration)
+        ? Infinity
+        : Math.max(0.1, clip.sourceDuration - (+clip.trimStart || 0));
+      if (side === 'right') {
+        let tentativeEnd = origStart + origDuration + dt;
+        tentativeEnd = snapTime(tentativeEnd, targets, state.timelineZoom);
+        let newDur = Math.max(0.1, tentativeEnd - origStart);
+        if (clip.type !== 'image' && clip.sourceDuration) {
+          const cap = clip.sourceDuration - (+clip.trimStart || 0);
+          if (newDur > cap) newDur = cap;
+        }
+        clip.duration = newDur;
+        el.style.width = (newDur * state.timelineZoom) + 'px';
+      } else {
+        // Левая ручка: одновременно сокращаем длительность и сдвигаем start (+ trimStart для media)
+        let newStartUnclamped = origStart + dt;
+        newStartUnclamped = snapTime(newStartUnclamped, targets, state.timelineZoom);
+        let trimDelta = newStartUnclamped - origStart;
+        if (origTrim + trimDelta < 0) trimDelta = -origTrim;
+        if (origDuration - trimDelta < 0.1) trimDelta = origDuration - 0.1;
+        const newDur = origDuration - trimDelta;
+        const newStart = Math.max(0, origStart + trimDelta);
+        const newTrim = (clip.type === 'image') ? 0 : Math.max(0, origTrim + trimDelta);
+        clip.duration = newDur;
+        clip.start = newStart;
+        clip.trimStart = newTrim;
+        el.style.left  = (newStart * state.timelineZoom) + 'px';
+        el.style.width = (newDur   * state.timelineZoom) + 'px';
+      }
+    };
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      handle.classList.remove('active');
+      scheduleSave();
+      renderTimeline();
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+}
+
+// Стабильный цвет для группы — для подсветки полосой сверху
+function colorForGroup(id) {
+  let h = 0;
+  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) | 0;
+  return `hsl(${Math.abs(h) % 360}, 60%, 55%)`;
+}
+
+async function renderTimelineClip(clip, track, tl) {
+  const el = document.createElement('div');
+  el.className = 'timeline-clip';
+  if (clip.disabled) el.classList.add('disabled');
+  if (clip.groupId) {
+    el.classList.add('grouped');
+    el.dataset.groupId = clip.groupId;
+    el.style.setProperty('--group-color', colorForGroup(clip.groupId));
+  }
+  el.dataset.id = clip.id;
+  el.dataset.trackId = track.id;
+  el.style.position = 'absolute';
+  el.style.left = ((+clip.start || 0) * state.timelineZoom) + 'px';
+  el.style.top = '4px';
+  el.style.bottom = '4px';
+  el.style.width = Math.max(40, (+clip.duration || 1) * state.timelineZoom) + 'px';
+
+  // Trim handles (как в Adobe Premiere)
+  const lh = document.createElement('div');
+  lh.className = 'clip-handle left';
+  lh.title = 'Обрезать спереди';
+  el.appendChild(lh);
+  attachClipTrim(el, clip, lh, 'left');
+  const rh = document.createElement('div');
+  rh.className = 'clip-handle right';
+  rh.title = 'Обрезать сзади';
+  el.appendChild(rh);
+  attachClipTrim(el, clip, rh, 'right');
+
+  const typeLbl = document.createElement('span');
+  typeLbl.className = 'clip-type';
+  typeLbl.textContent = clip.type;
+  el.appendChild(typeLbl);
+
+  let fileMissing = false;
+  if (clip.type === 'image' || clip.type === 'video') {
+    try {
+      const url = await getOrCreateClipURL(clip);
+      const m = getOrCreateClipMedia(clip, url);
+      // переиспользуем элемент: он сохраняет загруженные кадры/буферы и не моргает при rerender
+      if (m.parentElement) m.parentElement.removeChild(m);
+      el.appendChild(m);
+    } catch { fileMissing = true; }
+  } else if (clip.type === 'audio') {
+    try { await getOrCreateClipURL(clip); }
+    catch { fileMissing = true; }
+  }
+  if (fileMissing) {
+    el.style.borderColor = '#e07a6a';
+    el.style.background = '#2a1818';
+    el.title = `Файл не найден: ${clip.file}`;
+    const w = document.createElement('div');
+    w.style.cssText = 'font-size:10px; color:#e07a6a; padding:2px;';
+    w.textContent = '⚠ файл отсутствует';
+    el.appendChild(w);
+  }
+
+  const nameEl = document.createElement('div');
+  nameEl.className = 'clip-name';
+  nameEl.textContent = clip.name;
+  el.appendChild(nameEl);
+
+  const durRow = document.createElement('div');
+  durRow.className = 'clip-dur';
+  const durInp = document.createElement('input');
+  durInp.type = 'number'; durInp.min = '0.1'; durInp.step = '0.1';
+  durInp.value = clip.duration;
+  durInp.addEventListener('mousedown', e => e.stopPropagation());
+  durInp.addEventListener('change', () => {
+    clip.duration = Math.max(0.1, parseFloat(durInp.value) || 0);
+    scheduleSave();
+    renderTimeline();
+  });
+  durRow.appendChild(durInp);
+  durRow.appendChild(document.createTextNode('сек'));
+  el.appendChild(durRow);
+
+  el.addEventListener('contextmenu', e => {
+    if (e.target.closest('input, .clip-handle')) return;
+    e.preventDefault();
+    e.stopPropagation();
+    showClipContextMenu(clip, track, tl, e.clientX, e.clientY);
+  });
+
+  // Статус исходной ноды (генерация/ошибка) — поверх клипа
+  if (clip.nodeId) {
+    const srcNode = state.currentBoard?.metadata?.nodes?.find(n => n.id === clip.nodeId);
+    if (srcNode?.status === 'generating') {
+      el.classList.add('is-generating');
+      const ov = document.createElement('div');
+      ov.className = 'clip-status';
+      const sp = document.createElement('div'); sp.className = 'spinner';
+      const tx = document.createElement('span');
+      const sKey = srcNode.generated?.state;
+      const STATE_LABELS = {
+        'uploading-refs': 'загрузка референсов...',
+        'submitting': 'отправка задачи...',
+        'queued': 'в очереди...',
+        'waiting': 'в очереди...',
+        'queuing': 'в очереди...',
+        'generating': 'генерация...',
+      };
+      tx.textContent = STATE_LABELS[sKey] || (sKey ? sKey : 'генерация...');
+      ov.append(sp, tx);
+      el.appendChild(ov);
+    } else if (srcNode?.status === 'error') {
+      el.classList.add('is-error');
+      const ov = document.createElement('div');
+      ov.className = 'clip-status error';
+      ov.textContent = '⚠ ' + (srcNode.error || 'ошибка');
+      el.appendChild(ov);
+    }
+  }
+
+  // Двойной клик по аудио/картинке → перегенерация исходной ноды
+  // Если у клипа нет привязанной ноды — создадим её на лету
+  if (clip.type === 'image' || clip.type === 'audio') {
+    el.addEventListener('dblclick', async e => {
+      if (e.target.closest('input, .clip-handle')) return;
+      e.preventDefault();
+      e.stopPropagation();
+      let node = clip.nodeId
+        ? state.currentBoard?.metadata?.nodes?.find(n => n.id === clip.nodeId)
+        : null;
+      if (!node) {
+        // Создаём ноду из клипа: тип/файл/имя берём из клипа, кладём в свободное место холста
+        if (!state.currentBoard) return;
+        const spot = findFreeSpot();
+        node = {
+          id: crypto.randomUUID(),
+          type: clip.type,
+          file: clip.file,
+          name: clip.name || (clip.file || '').split('/').pop(),
+          x: spot.x, y: spot.y,
+        };
+        state.currentBoard.metadata.nodes.push(node);
+        canvas.appendChild(await createNodeEl(node));
+        clip.nodeId = node.id;
+        scheduleSave();
+      }
+      if (node.status === 'generating') return;
+      regenerateNode(node);
+    });
+  }
+
+  // ПКМ-drag: перенос с выбором действия (Копировать / Заменить)
+  el.addEventListener('mousedown', e => {
+    if (e.button !== 2) return;
+    if (e.target.closest('input, button, .clip-x, .clip-handle')) return;
+    const startX = e.clientX, startY = e.clientY;
+    let dragged = false;
+    let ghost = null;
+    let lastVictim = null;
+    const clearVictim = () => {
+      if (lastVictim) { lastVictim.classList.remove('replace-target'); lastVictim = null; }
+    };
+    const onMove = ev => {
+      const dx = ev.clientX - startX, dy = ev.clientY - startY;
+      if (!dragged && Math.hypot(dx, dy) < 6) return;
+      if (!dragged) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      dragged = true;
+      if (!ghost) {
+        ghost = document.createElement('div');
+        ghost.style.cssText = 'position:fixed; pointer-events:none; z-index:2000; background:rgba(106,138,170,0.35); border:2px dashed #6a8aaa; border-radius:4px;';
+        document.body.appendChild(ghost);
+      }
+      const w = el.offsetWidth, h = el.offsetHeight;
+      ghost.style.left = (ev.clientX - w / 2) + 'px';
+      ghost.style.top  = (ev.clientY - h / 2) + 'px';
+      ghost.style.width = w + 'px';
+      ghost.style.height = h + 'px';
+      // Подсветка возможной жертвы (для "Заменить")
+      const victimEl = document.elementsFromPoint(ev.clientX, ev.clientY)
+        .find(n => n.classList?.contains('timeline-clip') && n.dataset.id !== clip.id);
+      if (victimEl !== lastVictim) {
+        clearVictim();
+        if (victimEl) { victimEl.classList.add('replace-target'); lastVictim = victimEl; }
+      }
+    };
+    const onUp = ev => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      if (ghost) { ghost.remove(); ghost = null; }
+      clearVictim();
+      if (!dragged) return;
+      // Нашли target-track + опц. жертву и время дропа
+      const targetTrackEl = document.elementsFromPoint(ev.clientX, ev.clientY)
+        .find(n => n.classList?.contains('timeline-track'));
+      if (!targetTrackEl) return;
+      const targetTrack = tl.tracks.find(t => t.id === targetTrackEl.dataset.trackId);
+      if (!targetTrack) return;
+      const compatible = (targetTrack.kind === 'video' && (clip.type === 'video' || clip.type === 'image'))
+                      || (targetTrack.kind === 'audio' && clip.type === 'audio');
+      if (!compatible) { alert('Несовместимая дорожка для этого клипа.'); return; }
+      const victimEl = document.elementsFromPoint(ev.clientX, ev.clientY)
+        .find(n => n.classList?.contains('timeline-clip') && n.dataset.id !== clip.id);
+      const victimId = victimEl?.dataset?.id || null;
+      const clipsRow = targetTrackEl.querySelector('.track-clips');
+      const rect = clipsRow?.getBoundingClientRect();
+      const dropTime = rect ? Math.max(0, (ev.clientX - rect.left) / state.timelineZoom) : 0;
+      showRightDragMenu(ev.clientX, ev.clientY, {
+        sourceClip: clip, sourceTrack: track,
+        targetTrack, victimId, dropTime,
+      });
+    };
+    // Подавить нативное contextmenu, если был drag
+    const onCtxOnce = ev => {
+      if (dragged) { ev.preventDefault(); ev.stopPropagation(); ev.stopImmediatePropagation(); }
+      window.removeEventListener('contextmenu', onCtxOnce, true);
+    };
+    window.addEventListener('contextmenu', onCtxOnce, true);
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+
+  // Pointer-based перетаскивание: меняет clip.start (плавный offset) и опц. кросс-track
+  el.addEventListener('mousedown', e => {
+    if (e.button !== 0) return;
+    if (e.target.closest('input, button, .clip-x, .clip-handle')) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const startX = e.clientX, startY = e.clientY;
+    const origStart = +clip.start || 0;
+    let dragged = false;
+    let currentStart = origStart;
+    let placeholder = null;
+    // Сгруппированные клипы: запоминаем siblings для синхронного перемещения
+    const groupSiblings = clip.groupId ? getGroupSiblings(clip.groupId, tl, clip.id).map(s => ({
+      clip: s,
+      origStart: +s.start || 0,
+      el: document.querySelector(`.timeline-clip[data-id="${s.id}"]`),
+    })).filter(s => s.el) : [];
+    const showPlaceholder = (targetClipsEl) => {
+      if (!placeholder) {
+        placeholder = document.createElement('div');
+        placeholder.className = 'timeline-clip-placeholder';
+        if (clip.type === 'audio') placeholder.classList.add('audio');
+      }
+      if (placeholder.parentElement !== targetClipsEl) {
+        placeholder.remove();
+        targetClipsEl.appendChild(placeholder);
+      }
+      placeholder.style.left = (currentStart * state.timelineZoom) + 'px';
+      placeholder.style.width = ((+clip.duration || 1) * state.timelineZoom) + 'px';
+    };
+    const removePlaceholder = () => {
+      if (placeholder) { placeholder.remove(); placeholder = null; }
+    };
+    let lastVictimEl = null;
+    const clearVictim = () => {
+      if (lastVictimEl) { lastVictimEl.classList.remove('replace-target'); lastVictimEl = null; }
+    };
+    const onMove = ev => {
+      const dx = ev.clientX - startX, dy = ev.clientY - startY;
+      if (!dragged && Math.hypot(dx, dy) < 4) return;
+      dragged = true;
+      el.classList.add('dragging');
+      let proposed = Math.max(0, origStart + dx / state.timelineZoom);
+      // Snap-магнит: пытаемся прилипнуть началом или концом клипа к соседям/playhead/0
+      const targets = getSnapTargets(tl, clip.id);
+      const dur = +clip.duration || 0;
+      const snappedStart = snapTime(proposed, targets, state.timelineZoom);
+      const snappedEnd   = snapTime(proposed + dur, targets, state.timelineZoom) - dur;
+      const ds = Math.abs(snappedStart - proposed) * state.timelineZoom;
+      const de = Math.abs(snappedEnd   - proposed) * state.timelineZoom;
+      if (ds < SNAP_PX && ds <= de) proposed = snappedStart;
+      else if (de < SNAP_PX) proposed = snappedEnd;
+      currentStart = Math.max(0, proposed);
+      el.style.left = (currentStart * state.timelineZoom) + 'px';
+      // Группа: двигаем siblings синхронно по той же дельте
+      if (groupSiblings.length) {
+        const delta = currentStart - origStart;
+        for (const s of groupSiblings) {
+          const ns = Math.max(0, s.origStart + delta);
+          if (s.el) s.el.style.left = (ns * state.timelineZoom) + 'px';
+        }
+      }
+      // Placeholder в целевой дорожке
+      const targetTrackEl = document.elementsFromPoint(ev.clientX, ev.clientY)
+        .find(n => n.classList?.contains('timeline-track'));
+      if (!targetTrackEl) { removePlaceholder(); clearVictim(); return; }
+      const targetKind = targetTrackEl.dataset.trackKind;
+      const compat = (targetKind === 'video' && (clip.type === 'video' || clip.type === 'image'))
+                  || (targetKind === 'audio' && clip.type === 'audio');
+      if (!compat) { removePlaceholder(); clearVictim(); return; }
+      const targetClipsEl = targetTrackEl.querySelector('.track-clips');
+      if (targetClipsEl) showPlaceholder(targetClipsEl);
+      // Подсветка режима replace: видео-дорожка + Cmd/Ctrl + курсор над чужим клипом
+      const cmdHeld = ev.metaKey || ev.ctrlKey;
+      const isReplace = cmdHeld && targetKind === 'video' && !clip.groupId;
+      let victimEl = null;
+      if (isReplace) {
+        victimEl = document.elementsFromPoint(ev.clientX, ev.clientY)
+          .find(n => n.classList?.contains('timeline-clip') && n.dataset.id !== clip.id);
+      }
+      if (victimEl !== lastVictimEl) {
+        clearVictim();
+        if (victimEl) { victimEl.classList.add('replace-target'); lastVictimEl = victimEl; }
+      }
+      if (placeholder) placeholder.classList.toggle('replace', !!(isReplace && victimEl));
+    };
+    const onUp = async ev => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      el.classList.remove('dragging');
+      removePlaceholder();
+      clearVictim();
+      if (!dragged) {
+        // Это клик по клипу — выделение (Cmd/Shift = добавить)
+        const additive = ev.metaKey || ev.ctrlKey || ev.shiftKey;
+        selectClipById(clip.id, additive);
+        return;
+      }
+      // Drop над холстом → создаём ноду из клипа (или фокусируем существующую).
+      const overCanvas = document.elementsFromPoint(ev.clientX, ev.clientY)
+        .some(n => n === canvasWrap || n === canvas || n.classList?.contains('canvas-frame'));
+      const overTrack = document.elementsFromPoint(ev.clientX, ev.clientY)
+        .some(n => n.classList?.contains('timeline-track'));
+      if (overCanvas && !overTrack) {
+        try {
+          pushHistory('Drag клипа на холст');
+          await dropClipOnCanvas(clip, ev.clientX, ev.clientY);
+        } catch (err) {
+          console.error('drop clip→canvas', err);
+        }
+        // позиция клипа на таймлайне не должна меняться — рендерим как было
+        renderTimeline();
+        return;
+      }
+      const targetTrackEl = document.elementsFromPoint(ev.clientX, ev.clientY)
+        .find(n => n.classList?.contains('timeline-track'));
+      const targetTrackId = targetTrackEl?.dataset?.trackId || track.id;
+      const targetTrack = tl.tracks.find(t => t.id === targetTrackId) || track;
+      const compatible =
+        (targetTrack.kind === 'video' && (clip.type === 'video' || clip.type === 'image')) ||
+        (targetTrack.kind === 'audio' && clip.type === 'audio');
+      if (!compatible) { renderTimeline(); return; }
+
+      // Сгруппированные клипы: ripple-insert если ведущим тащим видео-клип на той же видео-дорожке,
+      // siblings (аудио) — на ту же дельту. Иначе — free-form sync drag.
+      if (clip.groupId) {
+        const isVideoLeader = track.kind === 'video'
+          && (clip.type === 'video' || clip.type === 'image')
+          && targetTrack.id === track.id;
+        if (isVideoLeader) {
+          rippleInsertClip(targetTrack, clip, track, currentStart);
+          const delta = (+clip.start || 0) - origStart;
+          for (const s of groupSiblings) {
+            s.clip.start = Math.max(0, s.origStart + delta);
+          }
+        } else {
+          // free-form sync (например, ведущий — аудио, или drag в другую дорожку)
+          const delta = currentStart - origStart;
+          clip.start = currentStart;
+          for (const s of groupSiblings) {
+            s.clip.start = Math.max(0, s.origStart + delta);
+          }
+        }
+        scheduleSave();
+        renderTimeline();
+        return;
+      }
+
+      // Видео: stack-режим. По умолчанию — ripple-insert.
+      // С Cmd/Ctrl — заменяем клип, на который попали.
+      if (targetTrack.kind === 'video') {
+        const cmdHeld = ev.metaKey || ev.ctrlKey;
+        if (cmdHeld) {
+          const victimEl = document.elementsFromPoint(ev.clientX, ev.clientY)
+            .find(n => n.classList?.contains('timeline-clip'));
+          const victimId = victimEl?.dataset?.id;
+          if (victimId && victimId !== clip.id) {
+            replaceClipInTrack(targetTrack, clip, track, victimId);
+            scheduleSave(); renderTimeline(); return;
+          }
+          // нет жертвы — падаем в обычный ripple-insert
+        }
+        rippleInsertClip(targetTrack, clip, track, currentStart);
+        scheduleSave(); renderTimeline(); return;
+      }
+
+      // Audio: свободная позиция (как и было)
+      clip.start = currentStart;
+      if (targetTrack.id !== track.id) {
+        track.clips = track.clips.filter(c => c.id !== clip.id);
+        targetTrack.clips.push(clip);
+      }
+      scheduleSave();
+      renderTimeline();
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+  return el;
+}
+
+async function renderTimeline() {
+  const tl = getTimeline();
+  const tracksEl = $('timelineTracks');
+  if (!tracksEl) return;
+  tracksEl.innerHTML = '';
+  // Гарантируем clip.start у всех клипов (sequential по умолчанию), сортируем по start
+  for (const t of tl.tracks) {
+    let cum = 0;
+    for (let i = 0; i < t.clips.length; i++) {
+      const c = t.clips[i];
+      if (typeof c.start !== 'number' || !isFinite(c.start)) c.start = cum;
+      cum = Math.max(cum, c.start + (+c.duration || 0));
+    }
+    t.clips.sort((a, b) => (a.start || 0) - (b.start || 0));
+  }
+  let videoTotal = 0;
+  // Общая длина = max(end of any clip)
+  let maxDur = 0;
+  for (const t of tl.tracks) {
+    for (const c of t.clips) {
+      const end = (+c.start || 0) + (+c.duration || 0);
+      if (end > maxDur) maxDur = end;
+    }
+  }
+  // Линейка
+  const ruler = document.createElement('div');
+  ruler.className = 'timeline-ruler';
+  const rulerContent = document.createElement('div');
+  rulerContent.className = 'ruler-content';
+  rulerContent.style.width = (maxDur * state.timelineZoom + 138) + 'px';
+  // Шаг тиков зависит от zoom
+  const step = state.timelineZoom >= 80 ? 1 : state.timelineZoom >= 40 ? 2 : state.timelineZoom >= 20 ? 5 : 10;
+  for (let s = 0; s <= maxDur; s += step) {
+    const tick = document.createElement('div');
+    tick.className = 'tick';
+    tick.style.left = (s * state.timelineZoom) + 'px';
+    tick.textContent = s + 's';
+    rulerContent.appendChild(tick);
+  }
+  ruler.appendChild(rulerContent);
+  tracksEl.appendChild(ruler);
+
+  $('tlZoomLabel').textContent = Math.round(state.timelineZoom);
+  for (const track of tl.tracks) {
+    const trackEl = document.createElement('div');
+    trackEl.className = 'timeline-track';
+    trackEl.dataset.trackId = track.id;
+    trackEl.dataset.trackKind = track.kind;
+    trackEl.addEventListener('contextmenu', e => {
+      // Не перехватываем ПКМ на инпутах и на самих клипах (у них своё меню)
+      if (e.target.closest('input, textarea')) return;
+      if (e.target.closest('.timeline-clip')) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const clipsRow = trackEl.querySelector('.track-clips');
+      const rect = clipsRow?.getBoundingClientRect();
+      const dropTime = rect ? Math.max(0, (e.clientX - rect.left) / state.timelineZoom) : 0;
+      showTrackContextMenu(track, e.clientX, e.clientY, { dropTime });
+    });
+
+    // Header (meta)
+    const meta = document.createElement('div');
+    meta.className = 'track-meta';
+    // Клик по track-meta — выделить дорожку (Cmd/Shift = добавить к выделению)
+    meta.addEventListener('click', e => {
+      if (e.target.closest('input, button')) return;
+      const additive = e.metaKey || e.ctrlKey || e.shiftKey;
+      selectTrackById(track.id, additive);
+    });
+    const kindLbl = document.createElement('div');
+    kindLbl.className = 'track-kind';
+    kindLbl.textContent = (track.kind === 'video' ? '🎬 ' : '🔊 ') + track.kind;
+    meta.appendChild(kindLbl);
+    const nameInp = document.createElement('input');
+    nameInp.className = 'track-name';
+    nameInp.value = track.name;
+    nameInp.addEventListener('mousedown', e => e.stopPropagation());
+    nameInp.addEventListener('change', () => {
+      track.name = nameInp.value.trim() || track.name;
+      scheduleSave();
+    });
+    meta.appendChild(nameInp);
+    let trackDur = 0;
+    for (const c of track.clips) {
+      const end = (+c.start || 0) + (+c.duration || 0);
+      if (end > trackDur) trackDur = end;
+    }
+    if (track.kind === 'video') videoTotal = Math.max(videoTotal, trackDur);
+    const durLbl = document.createElement('div');
+    durLbl.className = 'track-kind';
+    durLbl.style.color = '#888';
+    durLbl.textContent = trackDur > 0 ? `${trackDur.toFixed(1)} сек` : '— пусто —';
+    meta.appendChild(durLbl);
+    const actions = document.createElement('div');
+    actions.className = 'track-actions';
+    const delBtn = document.createElement('button');
+    delBtn.textContent = 'удалить';
+    delBtn.title = 'Удалить дорожку';
+    delBtn.addEventListener('click', () => removeTrack(track.id));
+    actions.appendChild(delBtn);
+    meta.appendChild(actions);
+    trackEl.appendChild(meta);
+
+    // Clips
+    const clipsRow = document.createElement('div');
+    clipsRow.className = 'track-clips';
+    clipsRow.dataset.trackId = track.id;
+    // Все track-clips имеют одинаковую ширину = maxDur*zoom (треки выравниваются по концу)
+    clipsRow.style.width = (maxDur * state.timelineZoom) + 'px';
+    clipsRow.style.minWidth = (maxDur * state.timelineZoom) + 'px';
+    for (const clip of track.clips) {
+      clipsRow.appendChild(await renderTimelineClip(clip, track, tl));
+    }
+    // Двойной клик на пустом месте аудио-дорожки → меню реплик персонажей
+    if (track.kind === 'audio') {
+      clipsRow.addEventListener('dblclick', e => {
+        if (e.target.closest('.timeline-clip')) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const rect = clipsRow.getBoundingClientRect();
+        const time = Math.max(0, (e.clientX - rect.left) / state.timelineZoom);
+        showCharSelectMenu(track, time, e.clientX, e.clientY);
+      });
+    }
+    // Drop zone (на пустую дорожку или в конец)
+    clipsRow.addEventListener('dragover', e => {
+      if (!e.dataTransfer.types.includes('text/x-clip-id')) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+    });
+    clipsRow.addEventListener('drop', e => {
+      const fromId = e.dataTransfer.getData('text/x-clip-id');
+      if (!fromId) return;
+      // Не наседать на конкретный clip — drop в конец дорожки
+      if (e.target === clipsRow) {
+        e.preventDefault();
+        moveClipToTrack(fromId, track.id, null);
+      }
+    });
+    trackEl.appendChild(clipsRow);
+    tracksEl.appendChild(trackEl);
+  }
+  $('timelineDuration').textContent = videoTotal > 0 ? `${videoTotal.toFixed(1)} сек` : '';
+
+  // Playhead
+  const ph = document.createElement('div');
+  ph.className = 'timeline-playhead';
+  ph.id = 'timelinePlayhead';
+  const handle = document.createElement('div');
+  handle.className = 'ph-handle';
+  ph.appendChild(handle);
+  positionPlayhead(ph);
+  attachPlayheadDrag(handle, ph);
+  tracksEl.appendChild(ph);
+  attachTimelineClickToSeek();
+
+  // Подгружаем точные длительности видео/аудио из metadata
+  let durationsChanged = false;
+  for (const track of tl.tracks) {
+    for (const clip of track.clips) {
+      if ((clip.type === 'video' || clip.type === 'audio') && !clip._durationLoaded) {
+        try {
+          const url = await getOrCreateClipURL(clip);
+          const m = document.createElement(clip.type);
+          m.preload = 'metadata'; m.src = url; m.muted = true;
+          await new Promise(r => { m.addEventListener('loadedmetadata', r, { once: true }); m.addEventListener('error', r, { once: true }); });
+          if (m.duration && isFinite(m.duration)) {
+            const oldDur = clip.duration;
+            clip.sourceDuration = +m.duration.toFixed(3);
+            if (!clip._durationLoaded) {
+              const maxDur = clip.sourceDuration - (+clip.trimStart || 0);
+              if (!clip.duration || clip.duration > maxDur) clip.duration = +maxDur.toFixed(2);
+            }
+            clip._durationLoaded = true;
+            if (clip.duration !== oldDur) {
+              durationsChanged = true;
+              const clipEl = tracksEl.querySelector(`.timeline-clip[data-id="${clip.id}"]`);
+              if (clipEl) {
+                clipEl.style.width = Math.max(40, clip.duration * state.timelineZoom) + 'px';
+              }
+            }
+          }
+        } catch {}
+      }
+    }
+  }
+  if (durationsChanged) scheduleSave();
+  // Подчистим выделение от устаревших id и применим визуал
+  const validClipIds = new Set();
+  const validTrackIds = new Set();
+  for (const t of tl.tracks) {
+    validTrackIds.add(t.id);
+    for (const c of t.clips) validClipIds.add(c.id);
+  }
+  for (const id of [...state.selectedClipIds]) if (!validClipIds.has(id)) state.selectedClipIds.delete(id);
+  for (const id of [...state.selectedTrackIds]) if (!validTrackIds.has(id)) state.selectedTrackIds.delete(id);
+  applyTimelineSelectionVisuals();
+  pruneClipMediaCache(validClipIds);
+}
+
+// === Web Audio: sample-accurate audio engine ===
+let audioCtx = null;
+function getAudioCtx() {
+  if (!audioCtx) {
+    const Ctor = window.AudioContext || window.webkitAudioContext;
+    audioCtx = new Ctor();
+  }
+  return audioCtx;
+}
+const _audioBufferCache = new Map();
+async function getOrDecodeAudioBuffer(clip) {
+  const key = `${state.currentBoard.key}::${clip.file}`;
+  if (_audioBufferCache.has(key)) return _audioBufferCache.get(key);
+  const fh = await resolveBoardFile(state.currentBoard.handle, clip.file);
+  const ab = await (await fh.getFile()).arrayBuffer();
+  const buf = await getAudioCtx().decodeAudioData(ab.slice(0));
+  _audioBufferCache.set(key, buf);
+  return buf;
+}
+
+// Кэш HTML-элементов <img>/<video> для клипов: сохраняет загруженные кадры и не моргает при rerender
+const _clipMediaCache = new Map(); // `${clipId}::${file}` -> HTMLElement
+function getOrCreateClipMedia(clip, url) {
+  const key = `${clip.id}::${clip.file}`;
+  let m = _clipMediaCache.get(key);
+  if (m && m.tagName.toLowerCase() === clip.type) return m;
+  if (m) { try { m.src = ''; } catch {} }
+  m = clip.type === 'image' ? document.createElement('img') : document.createElement('video');
+  m.src = url;
+  if (clip.type === 'image') m.decoding = 'async';
+  if (clip.type === 'video') { m.preload = 'metadata'; m.muted = true; m.disablePictureInPicture = true; }
+  _clipMediaCache.set(key, m);
+  return m;
+}
+function pruneClipMediaCache(validClipIds) {
+  for (const [key, el] of [..._clipMediaCache.entries()]) {
+    const id = key.split('::')[0];
+    if (validClipIds.has(id)) continue;
+    try { el.src = ''; } catch {}
+    if (el.parentElement) el.parentElement.removeChild(el);
+    _clipMediaCache.delete(key);
+  }
+}
+
+const _clipURLCache = new Map();
+async function getOrCreateClipURL(clip) {
+  const key = `${state.currentBoard.key}::${clip.file}`;
+  if (_clipURLCache.has(key)) return _clipURLCache.get(key);
+  const fh = await resolveBoardFile(state.currentBoard.handle, clip.file);
+  const url = URL.createObjectURL(await fh.getFile());
+  _clipURLCache.set(key, url);
+  return url;
+}
+
+async function removeFromTimeline(clipId) {
+  const tl = getTimeline();
+  const found = findClipById(tl, clipId);
+  if (!found) return;
+  found.track.clips.splice(found.idx, 1);
+  scheduleSave();
+  await renderTimeline();
+}
+
+function setPanelsVisible(timeline, preview) {
+  $('timelinePanel').classList.toggle('hidden', !timeline);
+  // Превью теперь не скрывается, а сворачивается в полоску
+  setPreviewCollapsed(!preview);
+  localStorage.setItem('timelineOpen', timeline ? '1' : '0');
+  localStorage.setItem('previewOpen', preview ? '1' : '0');
+}
+
+// === Зафиксированная панель превью: свернуть/развернуть + горизонтальный resize ===
+function setPreviewCollapsed(collapsed) {
+  const panel = $('previewPanel');
+  panel.classList.toggle('collapsed', !!collapsed);
+  document.body.classList.toggle('preview-collapsed', !!collapsed);
+  localStorage.setItem('previewCollapsed', collapsed ? '1' : '0');
+}
+
+function applyPreviewState() {
+  const savedW = parseInt(localStorage.getItem('previewWidth') || '', 10);
+  if (savedW && savedW >= 280 && savedW <= window.innerWidth * 0.7) {
+    document.documentElement.style.setProperty('--preview-w', savedW + 'px');
+  }
+  // По умолчанию превью свёрнуто (если пользователь явно не разворачивал — '0').
+  const collapsed = localStorage.getItem('previewCollapsed') !== '0';
+  setPreviewCollapsed(collapsed);
+}
+
+(function initPreviewControls() {
+  const panel = $('previewPanel');
+  const header = $('previewHeader');
+  const toggle = $('previewToggle');
+  const handle = $('previewResize');
+
+  // Клик по кнопке-стрелке — свернуть/развернуть
+  toggle.addEventListener('click', e => {
+    e.stopPropagation();
+    setPreviewCollapsed(!panel.classList.contains('collapsed'));
+  });
+  // Клик в любую точку header'а в свернутом состоянии — развернуть
+  header.addEventListener('click', e => {
+    if (e.target === toggle) return;
+    if (panel.classList.contains('collapsed')) setPreviewCollapsed(false);
+  });
+
+  // Resize за левый край
+  let resizing = null;
+  handle.addEventListener('mousedown', e => {
+    if (panel.classList.contains('collapsed')) return;
+    e.preventDefault();
+    resizing = { startX: e.clientX, startW: panel.getBoundingClientRect().width };
+    document.body.style.cursor = 'ew-resize';
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+  function onMove(e) {
+    if (!resizing) return;
+    const dx = resizing.startX - e.clientX; // тянем влево → ширина растёт
+    const min = 280, max = Math.floor(window.innerWidth * 0.7);
+    const w = Math.max(min, Math.min(max, resizing.startW + dx));
+    document.documentElement.style.setProperty('--preview-w', w + 'px');
+  }
+  function onUp() {
+    if (!resizing) return;
+    resizing = null;
+    document.body.style.cursor = '';
+    document.removeEventListener('mousemove', onMove);
+    document.removeEventListener('mouseup', onUp);
+    const w = panel.getBoundingClientRect().width;
+    localStorage.setItem('previewWidth', String(Math.round(w)));
+  }
+
+  applyPreviewState();
+})();
+
+$('timelineBtn').addEventListener('click', () => {
+  const willShow = $('timelinePanel').classList.contains('hidden');
+  setPanelsVisible(willShow, willShow);
+  if (willShow && state.currentBoard) {
+    renderTimeline();
+    scheduleUpdatePreview();
+  }
+});
+
+
+$('timelineClear').addEventListener('click', () => {
+  if (!state.currentBoard) return;
+  if (!confirm('Очистить все дорожки таймлайна?')) return;
+  state.currentBoard.metadata.timeline = defaultTimeline();
+  scheduleSave();
+  renderTimeline();
+});
+
+// === Playhead ===
+const META_WIDTH = 138; // ширина sticky-meta столбца + padding
+function positionPlayhead(phEl) {
+  if (!phEl) phEl = $('timelinePlayhead');
+  if (!phEl) return;
+  // Считаем maxDur — клампим playhead, чтобы не уезжал в бесконечность
+  const tl = state.currentBoard?.metadata?.timeline;
+  let maxDur = 0;
+  if (tl?.tracks) {
+    for (const tr of tl.tracks) {
+      for (const c of tr.clips) {
+        const end = (+c.start || 0) + (+c.duration || 0);
+        if (end > maxDur) maxDur = end;
+      }
+    }
+  }
+  const raw = state.playheadTime || 0;
+  if (maxDur > 0 && raw > maxDur) state.playheadTime = maxDur;
+  const t = Math.max(0, Math.min(maxDur || raw, state.playheadTime || 0));
+  phEl.style.left = (META_WIDTH + t * state.timelineZoom) + 'px';
+  $('timelinePlayheadInfo').textContent = `${t.toFixed(1)} с`;
+}
+
+function setPlayheadTime(t) {
+  state.playheadTime = Math.max(0, t);
+  positionPlayhead();
+  // Persist в scene.json
+  if (state.currentBoard?.metadata) {
+    const tl = getTimeline();
+    if (tl) {
+      tl.playhead = state.playheadTime;
+      scheduleSave();
+    }
+  }
+  if (!_playStop) scheduleUpdatePreview();
+}
+
+let _previewUpdateRaf = null;
+function scheduleUpdatePreview() {
+  if (_previewUpdateRaf) return;
+  _previewUpdateRaf = requestAnimationFrame(() => {
+    _previewUpdateRaf = null;
+    updatePreviewToPlayhead().catch(e => console.error(e));
+  });
+}
+
+let _previewLoadingId = 0;
+async function updatePreviewToPlayhead() {
+  const tl = getTimeline();
+  if (!tl) return;
+  const videoTrack = tl.tracks.find(t => t.kind === 'video' && t.clips.length);
+  const preview = $('timelinePreview');
+  const previewImg = $('timelinePreviewImg');
+  if (!videoTrack) {
+    preview.classList.add('hidden');
+    previewImg.classList.add('hidden');
+    return;
+  }
+  let elapsed = 0;
+  let foundClip = null, foundOffset = 0;
+  for (const clip of videoTrack.clips) {
+    const dur = +clip.duration || 1;
+    if (state.playheadTime < elapsed + dur) {
+      foundClip = clip;
+      foundOffset = state.playheadTime - elapsed;
+      break;
+    }
+    elapsed += dur;
+  }
+  if (!foundClip) {
+    // За пределами — показываем последний кадр
+    foundClip = videoTrack.clips[videoTrack.clips.length - 1];
+    foundOffset = (+foundClip.duration || 1);
+  }
+  const url = await getOrCreateClipURL(foundClip);
+  const myId = ++_previewLoadingId;
+  if (foundClip.type === 'image') {
+    preview.classList.add('hidden');
+    preview.pause();
+    if (previewImg.src !== url) previewImg.src = url;
+    previewImg.classList.remove('hidden');
+  } else {
+    previewImg.classList.add('hidden');
+    preview.classList.remove('hidden');
+    if (preview.dataset.clipId !== foundClip.id) {
+      preview.src = url;
+      preview.dataset.clipId = foundClip.id;
+      await new Promise(res => {
+        preview.addEventListener('loadedmetadata', res, { once: true });
+        preview.addEventListener('error', res, { once: true });
+      });
+    }
+    if (myId !== _previewLoadingId) return; // другой кадр уже запросили
+    try { preview.currentTime = Math.max(0, Math.min(preview.duration || 0, foundOffset)); } catch {}
+    preview.pause();
+  }
+}
+
+function stopTimelinePlayback() {
+  if (typeof _playStop === 'function' && _playStop) {
+    _playStop();
+    _playStop = null;
+    $('timelinePlay').textContent = '▶';
+  }
+}
+
+function attachPlayheadDrag(handle, phEl) {
+  handle.addEventListener('mousedown', e => {
+    e.preventDefault();
+    e.stopPropagation();
+    stopTimelinePlayback();
+    const tracksEl = $('timelineTracks');
+    const rect = tracksEl.getBoundingClientRect();
+    const onMove = ev => {
+      const localX = ev.clientX - rect.left + tracksEl.scrollLeft - META_WIDTH;
+      const t = Math.max(0, localX / state.timelineZoom);
+      setPlayheadTime(t);
+    };
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+}
+
+// === Zoom ===
+// Зум таймлайна: меняем только размеры/позиции существующего DOM,
+// не пересоздаём video/img элементы (они дорогие). При первом зуме до renderTimeline
+// делаем полный рендер.
+let _zoomTarget = null;
+let _zoomFrame = null;
+function setTimelineZoom(z) {
+  const newZ = Math.max(5, Math.min(400, z));
+  if (Math.abs(newZ - state.timelineZoom) < 0.001) return;
+  _zoomTarget = newZ;
+  if (_zoomFrame) return;
+  _zoomFrame = requestAnimationFrame(() => {
+    _zoomFrame = null;
+    if (_zoomTarget == null) return;
+    state.timelineZoom = _zoomTarget;
+    _zoomTarget = null;
+    localStorage.setItem('timelineZoom', String(state.timelineZoom));
+    if (!applyTimelineZoom()) renderTimeline();
+  });
+}
+
+// Переразложить таймлайн под новый zoom без пересоздания элементов.
+// Возвращает false, если DOM ещё не построен (тогда нужен renderTimeline).
+function applyTimelineZoom() {
+  const tl = state.currentBoard?.metadata?.timeline;
+  const tracksEl = $('timelineTracks');
+  if (!tl || !tracksEl || !tracksEl.children.length) return false;
+
+  let maxDur = 0;
+  for (const t of tl.tracks) for (const c of t.clips) {
+    const end = (+c.start || 0) + (+c.duration || 0);
+    if (end > maxDur) maxDur = end;
+  }
+
+  const z = state.timelineZoom;
+  $('tlZoomLabel').textContent = Math.round(z);
+
+  // Линейка: ширина + перерисовать тики (шаг зависит от zoom)
+  const rulerContent = tracksEl.querySelector('.ruler-content');
+  if (rulerContent) {
+    rulerContent.style.width = (maxDur * z + 138) + 'px';
+    rulerContent.innerHTML = '';
+    const step = z >= 80 ? 1 : z >= 40 ? 2 : z >= 20 ? 5 : 10;
+    for (let s = 0; s <= maxDur; s += step) {
+      const tick = document.createElement('div');
+      tick.className = 'tick';
+      tick.style.left = (s * z) + 'px';
+      tick.textContent = s + 's';
+      rulerContent.appendChild(tick);
+    }
+  }
+
+  // Ширина строк клипов
+  for (const trackEl of tracksEl.querySelectorAll('.timeline-track')) {
+    const clipsRow = trackEl.querySelector('.track-clips');
+    if (clipsRow) {
+      const w = (maxDur * z) + 'px';
+      clipsRow.style.width = w;
+      clipsRow.style.minWidth = w;
+    }
+  }
+
+  // Каждый клип: left + width
+  for (const t of tl.tracks) {
+    for (const c of t.clips) {
+      const el = tracksEl.querySelector(`.timeline-clip[data-id="${c.id}"]`);
+      if (!el) continue;
+      el.style.left  = ((+c.start || 0) * z) + 'px';
+      el.style.width = Math.max(40, (+c.duration || 1) * z) + 'px';
+    }
+  }
+
+  positionPlayhead();
+  return true;
+}
+
+$('tlZoomIn').addEventListener('click', () => setTimelineZoom(state.timelineZoom * 1.25));
+$('tlZoomOut').addEventListener('click', () => setTimelineZoom(state.timelineZoom / 1.25));
+$('tlZoomLabel').addEventListener('click', () => setTimelineZoom(50));
+
+// Cmd/Ctrl + wheel внутри таймлайна — зум
+document.addEventListener('wheel', e => {
+  if (!(e.ctrlKey || e.metaKey)) return;
+  if (!e.target.closest('#timelinePanel')) return;
+  e.preventDefault();
+  const factor = Math.exp(-e.deltaY * 0.005);
+  setTimelineZoom(state.timelineZoom * factor);
+}, { passive: false });
+
+// Клик по линейке/треку — установить playhead в эту позицию
+function attachTimelineClickToSeek() {
+  const tracksEl = $('timelineTracks');
+  if (!tracksEl || tracksEl.dataset.seekBound) return;
+  tracksEl.dataset.seekBound = '1';
+  const handler = e => {
+    if (e.target.closest('.track-meta, button, input, .ph-handle, .clip-handle')) return;
+    const onClip = e.target.closest('.timeline-clip');
+    // Во время воспроизведения — клик в любое место (включая клип) останавливает и сикает
+    const playing = !!_playStop;
+    if (onClip && !playing) return;
+    const rect = tracksEl.getBoundingClientRect();
+    const localX = e.clientX - rect.left + tracksEl.scrollLeft - META_WIDTH;
+    if (localX < 0) return;
+    if (playing) stopTimelinePlayback();
+    setPlayheadTime(localX / state.timelineZoom);
+  };
+  // capture-фаза, чтобы перехватить клик до того, как clip остановит распространение
+  tracksEl.addEventListener('click', handler, true);
+}
+
+// =================== Реплики персонажей ===================
+async function saveCharacterReplicas(charInfo, replicas) {
+  const meta = await loadBoardMetadata(charInfo.handle);
+  if (!meta.character) meta.character = {};
+  meta.character.replicas = replicas;
+  await saveBoardMetadata(charInfo.handle, {
+    nodes: meta.nodes, connections: meta.connections,
+    view: meta.view, character: meta.character, timeline: meta.timeline,
+  });
+  charInfo.replicas = replicas;
+}
+
+// Генерируем аудио для реплики, кэшируем в папке персонажа: <char>/audio/replica-<id>.mp3
+async function generateReplicaCached(charInfo, replica) {
+  if (!charInfo.voice) throw new Error('У персонажа не задан голос — задай через ⚙ Настройки персонажа');
+  const text = replica.text || '';
+  if (!text.trim()) throw new Error('Пустая реплика');
+  // Применяем обычный тон персонажа, если он задан и в тексте ещё нет [tag] в начале
+  const finalText = charInfo.tone && !/^\s*\[/.test(text)
+    ? `[${charInfo.tone}] ${text}`
+    : text;
+  const r = await fetch('/api/tts', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ text: finalText, voiceId: charInfo.voice, modelId: 'eleven_v3' }),
+  });
+  console.log(`[replica TTS] via ${r.headers.get('x-provider') || '?'}`);
+  if (!r.ok) {
+    const t = await r.text().catch(() => '');
+    throw new Error(t || `HTTP ${r.status}`);
+  }
+  const blob = await r.blob();
+  const dir = await getOrCreateBoardSubdir(charInfo.handle, 'audio');
+  const fname = `replica-${replica.id}.mp3`;
+  await writeFile(dir, fname, blob);
+  replica.file = `audio/${fname}`;
+  replica.cachedText = text;
+  replica.generatedAt = Date.now();
+  await saveCharacterReplicas(charInfo, charInfo.replicas);
+  return blob;
+}
+
+// Получить blob: если есть свежий кэш → читаем из папки персонажа, иначе генерируем
+async function getReplicaBlob(charInfo, replica) {
+  const text = replica.text || '';
+  if (replica.file && replica.cachedText === text) {
+    try {
+      const fh = await resolveBoardFile(charInfo.handle, replica.file);
+      return await fh.getFile();
+    } catch {}
+  }
+  await generateReplicaCached(charInfo, replica);
+  const fh = await resolveBoardFile(charInfo.handle, replica.file);
+  return await fh.getFile();
+}
+
+async function copyReplicaToCurrentBoard(charInfo, replica) {
+  // Берём кэш (или генерим), копируем в текущую доску audio/
+  const blob = await getReplicaBlob(charInfo, replica);
+  const dir = await getOrCreateBoardSubdir(state.currentBoard.handle, 'audio');
+  const slug = slugifyPrompt(replica.text) || 'replica';
+  const baseName = await uniqueName(dir, `${charInfo.name}-${slug}.mp3`);
+  await writeFile(dir, baseName, blob);
+  return { file: `audio/${baseName}`, slug };
+}
+
+async function replicaToBoard(charInfo, replica, statusEl) {
+  if (!state.currentBoard) return;
+  statusEl.classList.remove('error');
+  statusEl.textContent = '⏳ Копирую...';
+  try {
+    const { file, slug } = await copyReplicaToCurrentBoard(charInfo, replica);
+    const node = {
+      id: crypto.randomUUID(),
+      type: 'audio',
+      name: slug,
+      file,
+      x: canvasWrap.scrollLeft / state.zoom + 80,
+      y: canvasWrap.scrollTop / state.zoom + 80,
+      generated: {
+        kind: 'audio', prompt: replica.text, rawPrompt: replica.text,
+        model: 'eleven_v3', voiceId: charInfo.voice, voiceName: charInfo.voiceName || '',
+        replica: { charName: charInfo.name, replicaId: replica.id },
+      },
+    };
+    state.currentBoard.metadata.nodes.push(node);
+    canvas.appendChild(await createNodeEl(node));
+    scheduleSave();
+    statusEl.textContent = '✓ На доске';
+  } catch (e) {
+    statusEl.classList.add('error');
+    statusEl.textContent = e.message;
+  }
+}
+
+async function replicaToTimeline(charInfo, replica, statusEl) {
+  if (!state.currentBoard) return;
+  statusEl.classList.remove('error');
+  statusEl.textContent = '⏳ Копирую...';
+  try {
+    const { file, slug } = await copyReplicaToCurrentBoard(charInfo, replica);
+    const tl = getTimeline();
+    let track = tl.tracks.find(t => t.kind === 'audio');
+    if (!track) {
+      track = { id: crypto.randomUUID(), name: 'Аудио', kind: 'audio', clips: [] };
+      tl.tracks.push(track);
+    }
+    const trackEnd = track.clips.reduce((m, c) =>
+      Math.max(m, (+c.start || 0) + (+c.duration || 0)), 0);
+    track.clips.push({
+      id: crypto.randomUUID(), nodeId: null, type: 'audio', file,
+      name: slug, duration: 5, start: trackEnd,
+    });
+    scheduleSave();
+    if (!$('timelinePanel').classList.contains('hidden')) renderTimeline();
+    statusEl.textContent = '✓ В таймлайне';
+  } catch (e) {
+    statusEl.classList.add('error');
+    statusEl.textContent = e.message;
+  }
+}
+
+const _replicaURLs = new Map(); // replica.id -> blob URL для аудио-плеера
+
+async function getReplicaPreviewURL(charInfo, replica) {
+  if (!replica.file) return null;
+  // В ключ включаем generatedAt + актуальный fingerprint файла (size+mtime) — иначе после
+  // перегенерации Chrome возвращает ERR_UPLOAD_FILE_CHANGED для старого blob URL.
+  let fingerprint = '';
+  let file = null;
+  try {
+    const fh = await resolveBoardFile(charInfo.handle, replica.file);
+    file = await fh.getFile();
+    fingerprint = `${file.size}.${file.lastModified || 0}`;
+  } catch { return null; }
+  const cacheKey = `${charInfo.name}::${replica.id}::${replica.generatedAt || 0}::${fingerprint}`;
+  if (_replicaURLs.has(cacheKey)) return _replicaURLs.get(cacheKey);
+  // Освобождаем все старые URL этой реплики (они могли стать невалидными после регена файла)
+  for (const [k, u] of [..._replicaURLs.entries()]) {
+    if (k.startsWith(`${charInfo.name}::${replica.id}::`)) {
+      URL.revokeObjectURL(u);
+      _replicaURLs.delete(k);
+    }
+  }
+  const url = URL.createObjectURL(file);
+  _replicaURLs.set(cacheKey, url);
+  return url;
+}
+
+const _replicaGenTimers = new Map(); // replica.id -> debounce timer
+
+function scheduleReplicaRegen(charInfo, replica, statusEl, audioEl) {
+  if (_replicaGenTimers.has(replica.id)) clearTimeout(_replicaGenTimers.get(replica.id));
+  const t = setTimeout(async () => {
+    _replicaGenTimers.delete(replica.id);
+    if (!replica.text || !replica.text.trim()) return;
+    if (replica.cachedText === replica.text) return;
+    statusEl.classList.remove('error');
+    statusEl.textContent = '⏳ Генерирую...';
+    try {
+      await generateReplicaCached(charInfo, replica);
+      const url = await getReplicaPreviewURL(charInfo, replica);
+      if (url && audioEl) audioEl.src = url;
+      statusEl.textContent = `✓ ${new Date().toLocaleTimeString()}`;
+    } catch (e) {
+      statusEl.classList.add('error');
+      statusEl.textContent = e.message;
+    }
+  }, 800);
+  _replicaGenTimers.set(replica.id, t);
+}
+
+let _replicaPlayer = null; // <audio> для проигрывания текущей реплики
+let _selectedReplicaId = null;
+
+async function renderRepliquesList(charInfo) {
+  const list = $('repliquesList');
+  list.innerHTML = '';
+  const all = charInfo.replicas || [];
+  const query = ($('repliquesSearch')?.value || '').trim().toLowerCase();
+  const replicas = query
+    ? all.filter(r => (r.text || '').toLowerCase().includes(query))
+    : all;
+  if (!replicas.length) {
+    const empty = document.createElement('div');
+    empty.style.cssText = 'color:#888; padding:12px; text-align:center;';
+    empty.textContent = all.length === 0
+      ? 'Пока нет реплик. Нажми «+ Добавить реплику».'
+      : 'Ничего не найдено по запросу.';
+    list.appendChild(empty);
+    renderRepliqueActions(charInfo);
+    return;
+  }
+
+  // Если выделение протухло — выберем первую
+  if (!replicas.some(r => r.id === _selectedReplicaId)) {
+    _selectedReplicaId = replicas[0].id;
+  }
+
+  for (const replica of replicas) {
+    const row = document.createElement('div');
+    row.className = 'replique-row';
+    if (replica.id === _selectedReplicaId) row.classList.add('selected');
+    row.dataset.id = replica.id;
+
+    const playBtn = document.createElement('button');
+    playBtn.className = 'play-btn';
+    playBtn.textContent = '▶';
+    playBtn.title = 'Прослушать (если есть кэш)';
+    playBtn.disabled = !replica.file;
+    if (!replica.file) playBtn.style.opacity = '0.3';
+    playBtn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      // Toggle: если этот же играет — стоп
+      if (_replicaPlayer && !_replicaPlayer.paused && playBtn.classList.contains('playing')) {
+        _replicaPlayer.pause();
+        playBtn.classList.remove('playing');
+        playBtn.textContent = '▶';
+        return;
+      }
+      // Стопаем все другие play-btn
+      list.querySelectorAll('.play-btn.playing').forEach(b => {
+        b.classList.remove('playing'); b.textContent = '▶';
+      });
+      try {
+        const url = await getReplicaPreviewURL(charInfo, replica);
+        if (!url) return;
+        if (!_replicaPlayer) _replicaPlayer = new Audio();
+        _replicaPlayer.src = url;
+        _replicaPlayer.currentTime = 0;
+        playBtn.classList.add('playing');
+        playBtn.textContent = '■';
+        _replicaPlayer.onended = () => {
+          playBtn.classList.remove('playing'); playBtn.textContent = '▶';
+        };
+        await _replicaPlayer.play();
+      } catch (err) { console.error(err); }
+    });
+
+    const ta = document.createElement('textarea');
+    ta.value = replica.text || '';
+    ta.placeholder = 'Текст реплики ([whispers], [excited]...)';
+    ta.addEventListener('input', () => {
+      replica.text = ta.value;
+      renderRepliqueActions(charInfo);
+    });
+    ta.addEventListener('change', async () => {
+      replica.text = ta.value;
+      await saveCharacterReplicas(charInfo, charInfo.replicas);
+    });
+    ta.addEventListener('focus', () => selectReplicaRow(replica.id, charInfo));
+
+    const status = document.createElement('div');
+    status.className = 'replique-status';
+    if (replica.file && replica.cachedText === replica.text) {
+      status.textContent = `✓ ${new Date(replica.generatedAt || 0).toLocaleTimeString()}`;
+    }
+
+    row.appendChild(playBtn);
+    row.appendChild(ta);
+    row.appendChild(status);
+    row.addEventListener('click', () => selectReplicaRow(replica.id, charInfo));
+    list.appendChild(row);
+  }
+  renderRepliqueActions(charInfo);
+}
+
+function selectReplicaRow(id, charInfo) {
+  _selectedReplicaId = id;
+  document.querySelectorAll('#repliquesList .replique-row').forEach(r => {
+    r.classList.toggle('selected', r.dataset.id === id);
+  });
+  renderRepliqueActions(charInfo);
+}
+
+function getSelectedReplica(charInfo) {
+  return (charInfo.replicas || []).find(r => r.id === _selectedReplicaId);
+}
+
+function renderRepliqueActions(charInfo) {
+  let bar = document.getElementById('repliquesActionBar');
+  if (!bar) {
+    bar = document.createElement('div');
+    bar.id = 'repliquesActionBar';
+    bar.className = 'replique-actions';
+    $('repliquesList').after(bar);
+  }
+  bar.innerHTML = '';
+  const replica = getSelectedReplica(charInfo);
+  if (!replica) {
+    bar.style.display = 'none';
+    return;
+  }
+  bar.style.display = '';
+
+  const status = document.createElement('div');
+  status.className = 'replique-status';
+  status.style.flex = '1 1 100%';
+
+  const ready = !!replica.file && replica.cachedText === replica.text;
+  const genBtn = document.createElement('button');
+  genBtn.className = 'primary';
+  genBtn.textContent = ready ? '🎙 Перегенерировать' : '🎙 Сгенерировать';
+  genBtn.addEventListener('click', async () => {
+    genBtn.disabled = true;
+    genBtn.textContent = '⏳ TTS...';
+    status.classList.remove('error');
+    try {
+      await generateReplicaCached(charInfo, replica);
+      status.textContent = `✓ ${new Date().toLocaleTimeString()}`;
+      renderRepliquesList(charInfo);
+    } catch (e) {
+      status.classList.add('error');
+      status.textContent = e.message;
+      genBtn.disabled = false;
+      genBtn.textContent = ready ? '🎙 Перегенерировать' : '🎙 Сгенерировать';
+    }
+  });
+
+  const toBoardBtn = document.createElement('button');
+  toBoardBtn.textContent = '→ На доску';
+  toBoardBtn.addEventListener('click', () => replicaToBoard(charInfo, replica, status));
+
+  const toTlBtn = document.createElement('button');
+  toTlBtn.textContent = '→ В таймлайн';
+  toTlBtn.addEventListener('click', () => replicaToTimelineWithContext(charInfo, replica, status));
+
+  const delBtn = document.createElement('button');
+  delBtn.className = 'danger';
+  delBtn.textContent = '🗑 Удалить';
+  delBtn.style.flex = '0 0 auto';
+  delBtn.addEventListener('click', async () => {
+    if (!confirm('Удалить реплику?')) return;
+    charInfo.replicas = (charInfo.replicas || []).filter(r => r.id !== replica.id);
+    if (replica.file) {
+      try { await removeBoardFile(charInfo.handle, replica.file); } catch {}
+    }
+    await saveCharacterReplicas(charInfo, charInfo.replicas);
+    _selectedReplicaId = null;
+    renderRepliquesList(charInfo);
+  });
+
+  bar.appendChild(genBtn);
+  bar.appendChild(toBoardBtn);
+  bar.appendChild(toTlBtn);
+  bar.appendChild(delBtn);
+  bar.appendChild(status);
+}
+
+// Контекст для → В таймлайн (когда вызвано из dblclick таймлайна)
+state.timelineDropContext = null;
+async function replicaToTimelineWithContext(charInfo, replica, statusEl) {
+  const ctx = state.timelineDropContext;
+  if (ctx && Date.now() - ctx.ts < 60_000) {
+    // Используем сохранённый контекст: trackId + time
+    const tl = getTimeline();
+    const track = tl.tracks.find(t => t.id === ctx.trackId);
+    if (track) {
+      try {
+        statusEl.textContent = '⏳ Копирую...';
+        const blob = await getReplicaBlob(charInfo, replica);
+        const dir = await getOrCreateBoardSubdir(state.currentBoard.handle, 'audio');
+        const slug = slugifyPrompt(replica.text) || 'replica';
+        const baseName = await uniqueName(dir, `${charInfo.name}-${slug}.mp3`);
+        await writeFile(dir, baseName, blob);
+        track.clips.push({
+          id: crypto.randomUUID(), nodeId: null, type: 'audio',
+          file: `audio/${baseName}`, name: slug, duration: 5,
+          start: Math.max(0, ctx.time),
+        });
+        scheduleSave();
+        if (!$('timelinePanel').classList.contains('hidden')) renderTimeline();
+        statusEl.textContent = '✓ В таймлайне';
+        state.timelineDropContext = null;
+        return;
+      } catch (e) {
+        statusEl.classList.add('error');
+        statusEl.textContent = e.message;
+        return;
+      }
+    }
+  }
+  // Fallback: стандартный replicaToTimeline (в конец первой audio-дорожки)
+  return replicaToTimeline(charInfo, replica, statusEl);
+}
+
+function getSelectedReplicaChar() {
+  const id = $('repliquesChar').value;
+  return state.charactersInfo.find(c => c.name === id);
+}
+
+// Открыть панель реплик и предвыбрать заданного персонажа (или последнего).
+async function openRepliquesFor(charName) {
+  const panel = $('repliquesPanel');
+  await loadAllCharactersInfo();
+  const sel = $('repliquesChar');
+  sel.innerHTML = '';
+  if (!state.charactersInfo.length) return;
+  for (const c of state.charactersInfo) {
+    const opt = document.createElement('option');
+    opt.value = c.name;
+    const voice = c.voiceName ? ` (${c.voiceName.split(' — ')[0]})` : '';
+    opt.textContent = c.name + voice + (c.voice ? '' : ' — голос не задан');
+    sel.appendChild(opt);
+  }
+  if (charName && state.charactersInfo.some(c => c.name === charName)) sel.value = charName;
+  else {
+    const last = localStorage.getItem('lastReplicaChar');
+    if (last && state.charactersInfo.some(c => c.name === last)) sel.value = last;
+  }
+  const ch = getSelectedReplicaChar();
+  if (ch) renderRepliquesList(ch);
+  panel.classList.remove('hidden');
+  localStorage.setItem('repliquesOpen', '1');
+}
+
+$('repliquesBtn').addEventListener('click', async () => {
+  const panel = $('repliquesPanel');
+  if (!panel.classList.contains('hidden')) {
+    panel.classList.add('hidden');
+    localStorage.setItem('repliquesOpen', '0');
+    return;
+  }
+  await loadAllCharactersInfo();
+  const sel = $('repliquesChar');
+  sel.innerHTML = '';
+  if (!state.charactersInfo.length) {
+    alert('Сначала создай хотя бы одного персонажа.');
+    return;
+  }
+  for (const c of state.charactersInfo) {
+    const opt = document.createElement('option');
+    opt.value = c.name;
+    const voice = c.voiceName ? ` (${c.voiceName.split(' — ')[0]})` : '';
+    opt.textContent = c.name + voice + (c.voice ? '' : ' — голос не задан');
+    sel.appendChild(opt);
+  }
+  const last = localStorage.getItem('lastReplicaChar');
+  if (last && state.charactersInfo.some(c => c.name === last)) sel.value = last;
+  const ch = getSelectedReplicaChar();
+  if (ch) renderRepliquesList(ch);
+  panel.classList.remove('hidden');
+  localStorage.setItem('repliquesOpen', '1');
+});
+
+$('repliquesChar').addEventListener('change', () => {
+  const ch = getSelectedReplicaChar();
+  if (!ch) return;
+  localStorage.setItem('lastReplicaChar', ch.name);
+  $('repliquesSearch').value = '';
+  renderRepliquesList(ch);
+});
+
+$('repliquesSearch').addEventListener('input', () => {
+  const ch = getSelectedReplicaChar();
+  if (ch) renderRepliquesList(ch);
+});
+
+$('repliqueAdd').addEventListener('click', async () => {
+  const ch = getSelectedReplicaChar();
+  if (!ch) return;
+  if (!Array.isArray(ch.replicas)) ch.replicas = [];
+  const newReplica = { id: crypto.randomUUID(), text: '' };
+  ch.replicas.unshift(newReplica);  // в начало списка для удобства
+  await saveCharacterReplicas(ch, ch.replicas);
+  $('repliquesSearch').value = '';
+  await renderRepliquesList(ch);
+  // Автофокус на textarea новой реплики
+  const firstRow = $('repliquesList').querySelector('.replique-row');
+  const ta = firstRow?.querySelector('textarea');
+  if (ta) ta.focus();
+});
+
+$('repliquesClose').addEventListener('click', () => {
+  $('repliquesPanel').classList.add('hidden');
+  localStorage.setItem('repliquesOpen', '0');
+});
+
+// Меню выбора персонажа для вставки реплики на таймлайн
+function showCharSelectMenu(track, time, clientX, clientY) {
+  const menu = $('nodeMenu');
+  menu.innerHTML = '';
+  const add = (label, fn, opts = {}) => {
+    const b = document.createElement('button');
+    b.textContent = label;
+    if (opts.disabled) { b.disabled = true; b.style.opacity = '0.5'; }
+    b.addEventListener('click', () => fn());
+    menu.appendChild(b);
+  };
+  // Свободная генерация — без привязки к персонажу.
+  add('🎙 Свободно (без персонажа)', () => {
+    state.timelineGenTarget = { trackId: track.id, time: Math.max(0, +time || 0), charName: null };
+    openGenModal('audio');
+  });
+  add('—', () => {}, { disabled: true });
+  add('💬 Реплики персонажей:', () => {}, { disabled: true });
+  const withReplicas = state.charactersInfo.filter(c => (c.replicas?.length || 0) > 0 && c.voice);
+  if (!withReplicas.length) {
+    add('— ни у кого нет записанных реплик с голосом —', () => {}, { disabled: true });
+  } else {
+    for (const c of withReplicas) {
+      add(`👤 ${c.name} (${c.replicas.length})`, () => showCharReplicaMenu(c, track, time, clientX, clientY));
+    }
+  }
+  positionFloatingMenu(menu, clientX, clientY);
+  setTimeout(() => document.addEventListener('mousedown', closeNodeMenu, { once: true }), 0);
+}
+
+function showCharReplicaMenu(charInfo, track, time, clientX, clientY) {
+  const menu = $('nodeMenu');
+  menu.innerHTML = '';
+  const back = document.createElement('button');
+  back.textContent = '◀ Назад';
+  back.addEventListener('click', () => showCharSelectMenu(track, time, clientX, clientY));
+  menu.appendChild(back);
+  const title = document.createElement('button');
+  title.textContent = `👤 ${charInfo.name}`;
+  title.disabled = true; title.style.opacity = '0.6';
+  menu.appendChild(title);
+  // 🎙 Сгенерировать новую реплику — открывает gen-модалку с привязкой к этой точке таймлайна
+  const genBtn = document.createElement('button');
+  genBtn.textContent = '🎙 Сгенерировать';
+  genBtn.addEventListener('click', () => {
+    menu.classList.add('hidden');
+    openGenAudioForTimeline(charInfo, track, time);
+  });
+  menu.appendChild(genBtn);
+  for (const r of charInfo.replicas || []) {
+    const b = document.createElement('button');
+    const txt = (r.text || '(пусто)').slice(0, 80);
+    b.textContent = `💬 ${txt}${(r.text || '').length > 80 ? '…' : ''}`;
+    b.style.maxWidth = '360px';
+    b.addEventListener('click', async () => {
+      menu.classList.add('hidden');
+      await insertReplicaAtTime(charInfo, r, track, time);
+    });
+    menu.appendChild(b);
+  }
+  positionFloatingMenu(menu, clientX, clientY);
+}
+
+async function insertReplicaAtTime(charInfo, replica, track, time) {
+  try {
+    const blob = await getReplicaBlob(charInfo, replica);
+    const dir = await getOrCreateBoardSubdir(state.currentBoard.handle, 'audio');
+    const slug = slugifyPrompt(replica.text) || 'replica';
+    const baseName = await uniqueName(dir, `${charInfo.name}-${slug}.mp3`);
+    await writeFile(dir, baseName, blob);
+    track.clips.push({
+      id: crypto.randomUUID(),
+      nodeId: null, type: 'audio',
+      file: `audio/${baseName}`,
+      name: slug,
+      duration: 5,  // обновится после loadedmetadata
+      start: Math.max(0, time),
+    });
+    scheduleSave();
+    renderTimeline();
+  } catch (e) {
+    alert('Не удалось вставить реплику: ' + (e?.message || e));
+  }
+}
+
+function showClipContextMenu(clip, track, tl, clientX, clientY) {
+  const menu = $('nodeMenu');
+  menu.innerHTML = '';
+  const add = (label, fn, opts = {}) => {
+    const b = document.createElement('button');
+    b.textContent = label;
+    if (opts.danger) b.style.color = '#f88';
+    if (opts.disabled) { b.disabled = true; b.style.opacity = '0.5'; }
+    b.addEventListener('click', () => { menu.classList.add('hidden'); fn(); });
+    menu.appendChild(b);
+  };
+  const title = `${clip.type === 'audio' ? '🔊' : clip.type === 'video' ? '🎬' : '🖼'} ${clip.name || ''}`;
+  add(title, () => {}, { disabled: true });
+  // Если клип не выделен — выделим его перед действиями (чтобы "Скопировать" работал на этот клип)
+  const selIds = state.selectedClipIds.has(clip.id) && state.selectedClipIds.size > 1
+    ? [...state.selectedClipIds]
+    : [clip.id];
+  // Группа: создать / разгруппировать
+  if (selIds.length > 1) {
+    add(`🔗 Группировать (${selIds.length})`, () => {
+      const gid = crypto.randomUUID();
+      for (const id of selIds) {
+        const f = findClipById(tl, id);
+        if (f) f.clip.groupId = gid;
+      }
+      scheduleSave();
+      renderTimeline();
+    });
+  }
+  if (clip.groupId) {
+    const groupSize = getGroupClips(clip.groupId, tl).length;
+    add(`🔓 Разгруппировать (${groupSize})`, () => {
+      const gid = clip.groupId;
+      for (const t of tl.tracks) {
+        for (const c of t.clips) {
+          if (c.groupId === gid) delete c.groupId;
+        }
+      }
+      scheduleSave();
+      renderTimeline();
+    });
+  }
+
+  // Разрезать клип в точке playhead (если playhead внутри этого клипа)
+  const ph = state.playheadTime || 0;
+  const cs = +clip.start || 0;
+  const cd = +clip.duration || 0;
+  const canSplit = ph > cs + 0.05 && ph < cs + cd - 0.05 && cd > 0.1;
+  add('✂ Разрезать у playhead', async () => {
+    pushTimelineUndo('Разрезать клип');
+    const ok = splitClipAt(clip, track, ph);
+    if (!ok) {
+      // Откат — снимаем последнюю запись истории, мутации не было
+      const h = _getHistory(); if (h && h.past.length) h.past.pop();
+      alert('Не удалось разрезать в этой точке.');
+      return;
+    }
+    scheduleSave();
+    renderTimeline();
+  }, { disabled: !canSplit });
+
+  // Включить / отключить клип (skip при playback)
+  const allDisabled = selIds.every(id => {
+    const f = findClipById(tl, id); return f && f.clip.disabled;
+  });
+  const toggleLbl = allDisabled
+    ? (selIds.length > 1 ? `👁 Включить (${selIds.length})` : '👁 Включить')
+    : (selIds.length > 1 ? `🚫 Отключить (${selIds.length})` : '🚫 Отключить');
+  add(toggleLbl, () => {
+    for (const id of selIds) {
+      const f = findClipById(tl, id);
+      if (f) f.clip.disabled = !allDisabled;
+    }
+    scheduleSave();
+    renderTimeline();
+  });
+  const copyLbl = selIds.length > 1 ? `⎘ Скопировать (${selIds.length})` : '⎘ Скопировать';
+  add(copyLbl, async () => {
+    const n = await copyTimelineClipsToClipboard(selIds);
+    if (!n) alert('Не удалось скопировать в буфер.');
+  });
+  const cutLbl = selIds.length > 1 ? `✂ Вырезать (${selIds.length})` : '✂ Вырезать';
+  add(cutLbl, async () => {
+    const n = await copyTimelineClipsToClipboard(selIds);
+    if (!n) { alert('Не удалось скопировать в буфер.'); return; }
+    // Удаляем все вырезанные клипы
+    for (const id of selIds) await removeFromTimeline(id);
+    state.selectedClipIds.clear();
+    applyTimelineSelectionVisuals();
+  });
+  // Вставить из буфера — на ту же дорожку, прямо на позицию этого клипа (ripple для видео)
+  const compatPaste = (state.clipboard || []).filter(it => {
+    if (it.node.type === 'text') return false;
+    if (!it.blob && !it.node.file) return false;
+    return track.kind === 'video'
+      ? (it.node.type === 'video' || it.node.type === 'image')
+      : it.node.type === 'audio';
+  });
+  add('📥 Вставить из буфера' + (compatPaste.length > 1 ? ` (${compatPaste.length})` : ''),
+    () => pasteClipboardToTimeline(track, +clip.start || 0),
+    { disabled: !compatPaste.length });
+  add('🗑 Удалить с таймлайна', () => removeFromTimeline(clip.id), { danger: true });
+  if ((+clip.trimStart || 0) > 0 || +clip.duration !== undefined) {
+    add('↺ Сбросить trim', () => {
+      clip.trimStart = 0;
+      // Длительность не сбрасываем — user может задать вручную
+      scheduleSave();
+      renderTimeline();
+    });
+  }
+  add('⎘ Дублировать', () => {
+    const trackEnd = track.clips.reduce((m, c) =>
+      Math.max(m, (+c.start || 0) + (+c.duration || 0)), 0);
+    track.clips.push({
+      ...clip, id: crypto.randomUUID(),
+      start: trackEnd,
+    });
+    scheduleSave();
+    renderTimeline();
+  });
+  positionFloatingMenu(menu, clientX, clientY);
+  setTimeout(() => document.addEventListener('mousedown', closeNodeMenu, { once: true }), 0);
+}
+
+function showTrackContextMenu(track, clientX, clientY, opts = {}) {
+  const menu = $('nodeMenu');
+  menu.innerHTML = '';
+  const add = (label, fn, mopts = {}) => {
+    const b = document.createElement('button');
+    b.textContent = label;
+    if (mopts.danger) b.style.color = '#f88';
+    if (mopts.disabled) { b.disabled = true; b.style.opacity = '0.4'; b.style.cursor = 'default'; }
+    b.addEventListener('click', () => { if (b.disabled) return; menu.classList.add('hidden'); fn(); });
+    menu.appendChild(b);
+  };
+  const icon = track.kind === 'video' ? '🎬' : '🔊';
+  add(`${icon} ${track.name}`, () => {}, {});
+  menu.children[0].disabled = true;
+  menu.children[0].style.opacity = '0.5';
+  menu.children[0].style.pointerEvents = 'none';
+
+  // Аудио-дорожка: сгенерировать реплику от любого персонажа в эту точку времени
+  if (track.kind === 'audio') {
+    const chars = state.charactersInfo.filter(c => c.voice);
+    if (chars.length) {
+      add('🎙 Сгенерировать реплику:', () => {}, { disabled: true });
+      for (const c of chars) {
+        add(`  👤 ${c.name}`, () => openGenAudioForTimeline(c, track, opts.dropTime || 0));
+      }
+    } else {
+      add('🎙 Реплика — нет персонажей с голосом', () => {}, { disabled: true });
+    }
+  }
+
+  // Скопировать клипы дорожки в буфер
+  add(`⎘ Скопировать клипы дорожки${track.clips.length ? ' (' + track.clips.length + ')' : ''}`,
+    async () => {
+      const ids = track.clips.map(c => c.id);
+      const n = await copyTimelineClipsToClipboard(ids);
+      if (!n) alert('На дорожке нет клипов с файлами.');
+    },
+    { disabled: !track.clips.length });
+  add(`✂ Вырезать клипы дорожки${track.clips.length ? ' (' + track.clips.length + ')' : ''}`,
+    async () => {
+      const ids = track.clips.map(c => c.id);
+      const n = await copyTimelineClipsToClipboard(ids);
+      if (!n) { alert('На дорожке нет клипов с файлами.'); return; }
+      track.clips = [];
+      scheduleSave();
+      renderTimeline();
+    },
+    { disabled: !track.clips.length });
+
+  // Вставить из буфера — если есть совместимые элементы
+  const compatItems = (state.clipboard || []).filter(it => {
+    if (it.node.type === 'text') return false;
+    if (!it.blob && !it.node.file) return false;
+    return track.kind === 'video'
+      ? (it.node.type === 'video' || it.node.type === 'image')
+      : it.node.type === 'audio';
+  });
+  add('📥 Вставить из буфера' + (compatItems.length > 1 ? ` (${compatItems.length})` : ''),
+    () => pasteClipboardToTimeline(track, opts.dropTime || 0),
+    { disabled: !compatItems.length });
+
+  add('🗑 Удалить дорожку', () => removeTrack(track.id), { danger: true });
+  if (track.clips.length) {
+    add('⌫ Очистить клипы', () => {
+      if (!confirm(`Очистить клипы дорожки «${track.name}»?`)) return;
+      track.clips = [];
+      scheduleSave();
+      renderTimeline();
+    });
+  }
+  positionFloatingMenu(menu, clientX, clientY);
+  setTimeout(() => document.addEventListener('mousedown', closeNodeMenu, { once: true }), 0);
+}
+
+$('addVideoTrack').addEventListener('click', () => {
+  const tl = getTimeline();
+  const n = tl.tracks.filter(t => t.kind === 'video').length;
+  addTrack(n === 0 ? 'Видео' : `Видео ${n + 1}`, 'video');
+});
+$('addAudioTrack').addEventListener('click', () => {
+  const tl = getTimeline();
+  const n = tl.tracks.filter(t => t.kind === 'audio').length;
+  addTrack(n === 0 ? 'Аудио' : (n === 1 ? 'Музыка' : `Аудио ${n + 1}`), 'audio');
+});
+
+// === Воспроизведение последовательности (Web Audio + video element) ===
+// Аудио-движок: AudioContext является источником истины для времени.
+// Видео-элемент пока используется для рендера видео-клипов; sync с аудио-clock.
+let _playStop = null;
+$('timelinePlay').addEventListener('click', async () => {
+  if (_playStop) { _playStop(); _playStop = null; $('timelinePlay').textContent = '▶'; return; }
+  const tl = getTimeline();
+  const videoTrack = tl.tracks.find(t => t.kind === 'video' && t.clips.length);
+  const audioTracks = tl.tracks.filter(t => t.kind === 'audio' && t.clips.length);
+  if (!videoTrack && !audioTracks.length) { alert('Нет клипов в дорожках'); return; }
+  // Развернуть превью при старте воспроизведения
+  setPreviewCollapsed(false);
+  localStorage.setItem('previewOpen', '1');
+  $('timelinePlay').textContent = '⏹';
+  const preview = $('timelinePreview');
+  const previewImg = $('timelinePreviewImg');
+  if (videoTrack) preview.classList.remove('hidden');
+  else { preview.classList.add('hidden'); previewImg.classList.add('hidden'); }
+
+  // Резюмируем AudioContext в click-gesture (autoplay policy)
+  const ctx = getAudioCtx();
+  if (ctx.state === 'suspended') { try { await ctx.resume(); } catch {} }
+
+  const startTime = state.playheadTime || 0;
+  let cancelled = false;
+  const sources = [];
+  const timers = [];
+
+  _playStop = () => {
+    cancelled = true;
+    // Превью со стоп-кадром: только пауза, без сброса src
+    try { preview.pause(); } catch {}
+    for (const s of sources) { try { s.stop(); } catch {} }
+    for (const t of timers) clearTimeout(t);
+  };
+
+  // Параллельно декодируем аудио-буферы (sample-accurate scheduling требует AudioBuffer'ов заранее)
+  const audioPlan = [];
+  for (const track of audioTracks) {
+    for (const clip of track.clips) {
+      if (clip.disabled) continue;
+      const cs = +clip.start || 0;
+      const cd = +clip.duration || 1;
+      if (cs + cd <= startTime) continue;
+      audioPlan.push({ clip, cs, cd });
+    }
+  }
+  await Promise.all(audioPlan.map(async p => {
+    try { p.buf = await getOrDecodeAudioBuffer(p.clip); }
+    catch (e) { console.warn('audio decode failed:', p.clip.file, e); }
+  }));
+  if (cancelled) return;
+
+  // Пре-резолвим URL для видео внутри gesture
+  if (videoTrack) {
+    for (const c of videoTrack.clips) {
+      try { await getOrCreateClipURL(c); } catch {}
+    }
+  }
+
+  // Стартовое время в audio clock (с небольшим запасом чтобы успеть назначить все source'ы)
+  const playStartCtxTime = ctx.currentTime + 0.05;
+  // Удобный конвертер: timeline-секунды → audio clock
+  const tlToCtx = (t) => playStartCtxTime + Math.max(0, t - startTime);
+
+  // Запускаем аудио сэмпл-точно
+  for (const p of audioPlan) {
+    if (!p.buf) continue;
+    const offsetIn   = Math.max(0, startTime - p.cs);
+    const remain     = Math.max(0, p.cd - offsetIn);
+    if (remain <= 0) continue;
+    const audioOffset = (+p.clip.trimStart || 0) + offsetIn;
+    if (audioOffset >= p.buf.duration) continue;
+    const playableDur = Math.min(remain, p.buf.duration - audioOffset);
+    const src = ctx.createBufferSource();
+    src.buffer = p.buf;
+    src.connect(ctx.destination);
+    try { src.start(tlToCtx(p.cs), audioOffset, playableDur); sources.push(src); }
+    catch (e) { console.warn('audio start failed:', e); }
+  }
+
+  preview.muted = audioTracks.length > 0;
+
+  // Считаем maxDur для остановки в конце таймлайна
+  let maxDur = 0;
+  for (const t of tl.tracks) {
+    for (const c of t.clips) {
+      const end = (+c.start || 0) + (+c.duration || 0);
+      if (end > maxDur) maxDur = end;
+    }
+  }
+
+  // Playhead ticker от audio clock — синхронен с аудио-планом
+  const phRaf = () => {
+    if (cancelled) return;
+    const newT = startTime + Math.max(0, ctx.currentTime - playStartCtxTime);
+    state.playheadTime = newT;
+    positionPlayhead();
+    if (maxDur > 0 && newT >= maxDur) {
+      if (_playStop) _playStop();
+      return;
+    }
+    requestAnimationFrame(phRaf);
+  };
+  requestAnimationFrame(phRaf);
+
+  // Помощник: ждём до достижения timeline-времени targetT (по audio clock)
+  const waitUntilTL = (targetT) => new Promise(res => {
+    const check = () => {
+      if (cancelled) return res();
+      const nowT = startTime + Math.max(0, ctx.currentTime - playStartCtxTime);
+      if (nowT >= targetT) return res();
+      const ms = Math.max(15, (targetT - nowT) * 1000);
+      timers.push(setTimeout(check, Math.min(ms, 60)));
+    };
+    check();
+  });
+
+  // Видео — последовательно по clip.start, тайминг привязан к audio clock
+  if (videoTrack) {
+    const videoClips = [...videoTrack.clips].sort((a, b) => (+a.start || 0) - (+b.start || 0));
+    let lastVideoEnd = 0;
+    for (const c of videoClips) {
+      const e = (+c.start || 0) + (+c.duration || 0);
+      if (e > lastVideoEnd) lastVideoEnd = e;
+    }
+    for (const clip of videoClips) {
+      if (cancelled) break;
+      if (clip.disabled) continue;
+      const cs = +clip.start || 0;
+      const cd = +clip.duration || 1;
+      const ce = cs + cd;
+      if (ce <= startTime) continue;
+      // Дождаться времени начала клипа (если playhead ещё до него)
+      if (cs > startTime) {
+        preview.classList.add('hidden');
+        previewImg.classList.add('hidden');
+        await waitUntilTL(cs);
+        if (cancelled) break;
+      }
+      // Текущая позиция внутри клипа
+      const nowTL = startTime + Math.max(0, ctx.currentTime - playStartCtxTime);
+      const offsetIn = Math.max(0, nowTL - cs);
+      let url;
+      try { url = await getOrCreateClipURL(clip); }
+      catch { continue; }
+      try {
+        if (clip.type === 'image') {
+          preview.classList.add('hidden'); preview.pause();
+          previewImg.src = url;
+          previewImg.classList.remove('hidden');
+          await waitUntilTL(ce);
+        } else {
+          previewImg.classList.add('hidden');
+          preview.classList.remove('hidden');
+          preview.src = url;
+          await new Promise(res => {
+            preview.addEventListener('canplay', res, { once: true });
+            preview.addEventListener('error', res, { once: true });
+          });
+          preview.currentTime = (+clip.trimStart || 0) + offsetIn;
+          try { await preview.play(); } catch {}
+          await waitUntilTL(ce);
+          try { preview.pause(); } catch {}
+        }
+      } catch (e) { console.error('play clip failed', e); }
+    }
+    // После последнего видео-клипа аудио на других дорожках может ещё идти —
+    // дожидаемся maxDur (или ручного стопа), чтобы _playStop оставался активен и пользователь мог остановить.
+    if (!cancelled && maxDur > lastVideoEnd) {
+      preview.classList.add('hidden');
+      previewImg.classList.add('hidden');
+      await waitUntilTL(maxDur);
+    }
+  } else {
+    // Только аудио — ждём до конца таймлайна (rAF-ticker сам остановит на maxDur)
+    await waitUntilTL(maxDur);
+  }
+
+  // Натуральный конец проигрывания
+  try { preview.pause(); } catch {}
+  for (const s of sources) { try { s.stop(); } catch {} }
+  for (const t of timers) clearTimeout(t);
+  $('timelinePlay').textContent = '▶';
+  _playStop = null;
+});
+
+function waitMs(ms, cancelFn) {
+  return new Promise(res => {
+    const start = Date.now();
+    const t = setInterval(() => {
+      if (cancelFn?.() || Date.now() - start >= ms) { clearInterval(t); res(); }
+    }, 100);
+  });
+}
+
+// === Экспорт в один mp4 через ffmpeg.wasm (мульти-track) ===
+$('timelineExport').addEventListener('click', async () => {
+  const tl = getTimeline();
+  const videoTrack = tl.tracks.find(t => t.kind === 'video' && t.clips.length);
+  if (!videoTrack) { alert('Нет клипов в видео-дорожке'); return; }
+  const audioTracks = tl.tracks.filter(t => t.kind === 'audio' && t.clips.length);
+  const status = $('timelineStatus');
+  status.classList.remove('error');
+  const setStatus = (m) => { status.textContent = m; };
+  const cleanupNames = [];
+  const W = 1280, H = 720;
+  try {
+    setStatus('Загружаю ffmpeg...');
+    const ff = await ensureFFmpeg(setStatus);
+
+    // 1) Видео-дорожка: каждый клип → silent mp4 segment
+    setStatus('Готовлю видео-клипы...');
+    const videoSegments = [];
+    let videoTotalDur = 0;
+    for (let i = 0; i < videoTrack.clips.length; i++) {
+      const clip = videoTrack.clips[i];
+      setStatus(`Видео ${i+1}/${videoTrack.clips.length}: ${clip.name}`);
+      const file = await (await resolveBoardFile(state.currentBoard.handle, clip.file)).getFile();
+      const inExt = (clip.file.split('.').pop() || 'bin').toLowerCase();
+      const inName = `vin${i}.${inExt}`;
+      const segName = `vseg${i}.mp4`;
+      await ff.writeFile(inName, new Uint8Array(await file.arrayBuffer()));
+      const dur = Math.max(0.1, +clip.duration || 1);
+      videoTotalDur += dur;
+      const durS = String(dur);
+      const trim = Math.max(0, +clip.trimStart || 0);
+      const vfilter = `scale=${W}:${H}:force_original_aspect_ratio=decrease,pad=${W}:${H}:(ow-iw)/2:(oh-ih)/2:color=black,setsar=1`;
+      if (clip.type === 'image') {
+        await ff.exec(['-loop', '1', '-t', durS, '-i', inName,
+          '-vf', vfilter, '-r', '30', '-c:v', 'libx264', '-pix_fmt', 'yuv420p',
+          '-preset', 'ultrafast', '-t', durS, '-an', segName]);
+      } else {
+        const args = trim > 0 ? ['-ss', String(trim), '-i', inName, '-t', durS]
+                              : ['-i', inName, '-t', durS];
+        args.push('-vf', vfilter, '-r', '30', '-c:v', 'libx264', '-pix_fmt', 'yuv420p',
+          '-preset', 'ultrafast', '-an', segName);
+        await ff.exec(args);
+      }
+      videoSegments.push(segName);
+      cleanupNames.push(segName);
+      await ff.deleteFile(inName).catch(() => {});
+    }
+    // Concat видео
+    setStatus('Сшиваю видео-дорожку...');
+    const vList = videoSegments.map(s => `file '${s}'`).join('\n');
+    await ff.writeFile('vlist.txt', new TextEncoder().encode(vList));
+    cleanupNames.push('vlist.txt');
+    await ff.exec(['-f', 'concat', '-safe', '0', '-i', 'vlist.txt', '-c', 'copy', 'video.mp4']);
+    cleanupNames.push('video.mp4');
+
+    // 2) Аудио-дорожки: каждая → wav, обрезанная/удлиненная до videoTotalDur
+    const trackAudioFiles = [];
+    for (let ti = 0; ti < audioTracks.length; ti++) {
+      const tr = audioTracks[ti];
+      setStatus(`Аудио "${tr.name}"...`);
+      // Render each clip → wav segment
+      const audSegs = [];
+      for (let i = 0; i < tr.clips.length; i++) {
+        const clip = tr.clips[i];
+        const file = await (await resolveBoardFile(state.currentBoard.handle, clip.file)).getFile();
+        const inExt = (clip.file.split('.').pop() || 'bin').toLowerCase();
+        const inName = `at${ti}_${i}.${inExt}`;
+        const segName = `at${ti}_${i}.wav`;
+        await ff.writeFile(inName, new Uint8Array(await file.arrayBuffer()));
+        const dur = Math.max(0.1, +clip.duration || 1);
+        const durS = String(dur);
+        const trim = Math.max(0, +clip.trimStart || 0);
+        const aArgs = trim > 0 ? ['-ss', String(trim), '-i', inName, '-t', durS]
+                               : ['-i', inName, '-t', durS];
+        aArgs.push('-ar', '44100', '-ac', '2', '-c:a', 'pcm_s16le', segName);
+        await ff.exec(aArgs);
+        audSegs.push(segName);
+        cleanupNames.push(segName);
+        await ff.deleteFile(inName).catch(() => {});
+      }
+      // Concat all clips into single track WAV
+      const aList = audSegs.map(s => `file '${s}'`).join('\n');
+      const listName = `alist_${ti}.txt`;
+      await ff.writeFile(listName, new TextEncoder().encode(aList));
+      cleanupNames.push(listName);
+      const concatName = `atrack_${ti}_raw.wav`;
+      await ff.exec(['-f', 'concat', '-safe', '0', '-i', listName, '-c', 'copy', concatName]);
+      cleanupNames.push(concatName);
+      // Pad/cut to videoTotalDur
+      const finalName = `atrack_${ti}.wav`;
+      await ff.exec(['-i', concatName,
+        '-af', `apad=whole_dur=${videoTotalDur},atrim=0:${videoTotalDur}`,
+        '-ar', '44100', '-ac', '2', '-c:a', 'pcm_s16le', finalName]);
+      cleanupNames.push(finalName);
+      trackAudioFiles.push(finalName);
+    }
+
+    // 3) Финальная сборка: video + mix всех audio
+    setStatus('Финальная сборка...');
+    const finalName = 'output.mp4';
+    if (trackAudioFiles.length === 0) {
+      await ff.exec(['-i', 'video.mp4', '-c', 'copy', finalName]);
+    } else if (trackAudioFiles.length === 1) {
+      await ff.exec(['-i', 'video.mp4', '-i', trackAudioFiles[0],
+        '-c:v', 'copy', '-c:a', 'aac', '-b:a', '192k',
+        '-map', '0:v', '-map', '1:a', '-shortest', finalName]);
+    } else {
+      const args = ['-i', 'video.mp4'];
+      for (const a of trackAudioFiles) args.push('-i', a);
+      const audioInputs = trackAudioFiles.map((_, i) => `[${i + 1}:a]`).join('');
+      const filter = `${audioInputs}amix=inputs=${trackAudioFiles.length}:duration=longest:dropout_transition=0[aout]`;
+      args.push('-filter_complex', filter,
+        '-map', '0:v', '-map', '[aout]',
+        '-c:v', 'copy', '-c:a', 'aac', '-b:a', '192k',
+        '-shortest', finalName);
+      await ff.exec(args);
+    }
+    cleanupNames.push(finalName);
+
+    const data = await ff.readFile(finalName);
+    const blob = new Blob([data.buffer], { type: 'video/mp4' });
+    triggerDownload(blob, `${state.currentBoard.name}_timeline.mp4`);
+    setStatus('Готово ✓');
+  } catch (e) {
+    console.error('timeline export failed:', e);
+    status.classList.add('error');
+    setStatus('Ошибка: ' + (e?.message || e));
+  } finally {
+    // Cleanup
+    if (ffmpegInstance) {
+      for (const n of cleanupNames) await ffmpegInstance.deleteFile(n).catch(() => {});
+    }
+  }
+});
+
+// =================== Native preview (опционально) ===================
+// Доступно только в Electron, где preload пробросил window.nativePlayer.
+// При включении: спавним python+mpv, шлём ему текущую видео-дорожку
+// и зеркалим play/pause/seek. Веб-превью на это время прячем и мьютим.
+// Аудио продолжает играть существующий Web Audio движок — он мастер по времени.
+(() => {
+  if (!window.nativePlayer) return;
+  const btn = document.getElementById('timelineNative');
+  if (!btn) return;
+  btn.style.display = '';
+
+  let ws = null;
+  let enabled = false;
+  let lastClipsSig = '';
+  let lastSentTime = -1;
+  let lastSentPlaying = false;
+  let pollT = null;
+  let mo = null;
+
+  function setBtnState() {
+    btn.style.background = enabled ? '#3a5a8a' : '';
+    btn.style.borderColor = enabled ? '#4a6a9a' : '';
+    btn.title = enabled ? 'Нативный плеер: вкл (клик — выкл)' : 'Нативный плеер (mpv): выкл';
+  }
+
+  async function buildClips() {
+    const tl = (typeof getTimeline === 'function') ? getTimeline() : null;
+    if (!tl || !state.currentBoard?.handle) return [];
+    const videoTrack = tl.tracks.find(t => t.kind === 'video' && t.clips.length);
+    if (!videoTrack) return [];
+    const out = [];
+    for (const clip of videoTrack.clips) {
+      if (clip.disabled) continue;
+      try {
+        const fh = await resolveBoardFile(state.currentBoard.handle, clip.file);
+        const file = await fh.getFile();
+        const path = window.nativePlayer.pathForFile(file);
+        if (!path) continue;
+        out.push({
+          path,
+          kind: clip.type === 'image' ? 'image' : 'video',
+          trimStart: +clip.trimStart || 0,
+          duration: +clip.duration || 1,
+        });
+      } catch (e) { console.warn('[native] resolve clip', clip.file, e); }
+    }
+    return out;
+  }
+
+  async function syncTimeline(force) {
+    if (!enabled || !ws || ws.readyState !== 1) return;
+    const clips = await buildClips();
+    const sig = JSON.stringify(clips);
+    if (!force && sig === lastClipsSig) return;
+    lastClipsSig = sig;
+    ws.send(JSON.stringify({ type: 'setTimeline', clips }));
+    ws.send(JSON.stringify({ type: 'seek', time: state.playheadTime || 0 }));
+    lastSentTime = state.playheadTime || 0;
+  }
+
+  function muteWebPreview() {
+    // Нативный плеер активен → веб-превью не должно ни играть, ни звучать.
+    const v = document.getElementById('timelinePreview');
+    if (v) {
+      v.classList.add('hidden');
+      v.muted = true;
+      try { v.pause(); } catch {}
+    }
+    document.getElementById('timelinePreviewImg')?.classList.add('hidden');
+  }
+
+  function startPoll() {
+    if (pollT) return;
+    pollT = setInterval(() => {
+      if (!enabled || !ws || ws.readyState !== 1) return;
+      muteWebPreview();
+      const playing = !!(typeof _playStop !== 'undefined' && _playStop);
+      const t = state.playheadTime || 0;
+      if (playing !== lastSentPlaying) {
+        ws.send(JSON.stringify({ type: playing ? 'play' : 'pause', time: t }));
+        lastSentPlaying = playing;
+        lastSentTime = t;
+      } else if (Math.abs(t - lastSentTime) > 0.05) {
+        ws.send(JSON.stringify({ type: playing ? 'sync' : 'seek', time: t }));
+        lastSentTime = t;
+      }
+    }, 100);
+  }
+  function stopPoll() { if (pollT) { clearInterval(pollT); pollT = null; } }
+
+  async function enable() {
+    if (enabled) return;
+    btn.disabled = true;
+    try {
+      const { url } = await window.nativePlayer.start();
+      ws = new WebSocket(url);
+      await new Promise((res, rej) => {
+        const ok = () => { cleanup(); res(); };
+        const bad = () => { cleanup(); rej(new Error('WebSocket failed')); };
+        const cleanup = () => {
+          ws.removeEventListener('open', ok);
+          ws.removeEventListener('error', bad);
+        };
+        ws.addEventListener('open', ok);
+        ws.addEventListener('error', bad);
+      });
+      ws.addEventListener('message', e => {
+        try {
+          const m = JSON.parse(e.data);
+          if (m.type === 'error') console.error('[native]', m.message);
+        } catch {}
+      });
+      ws.addEventListener('close', () => { if (enabled) disable(true); });
+      enabled = true;
+      lastClipsSig = ''; lastSentTime = -1; lastSentPlaying = false;
+      muteWebPreview();
+      await syncTimeline(true);
+      startPoll();
+      // Пересинк на изменения DOM трэков (клипы добавили/двигнули/обрезали).
+      const tracksEl = document.getElementById('timelineTracks');
+      if (tracksEl) {
+        mo = new MutationObserver(() => {
+          syncTimeline().catch(err => console.warn('[native]', err));
+        });
+        mo.observe(tracksEl, { childList: true, subtree: true, attributes: true });
+      }
+    } catch (e) {
+      alert('Нативный плеер не запустился:\n' + (e?.message || e));
+      if (ws) { try { ws.close(); } catch {} }
+      ws = null; enabled = false;
+    } finally {
+      btn.disabled = false;
+      setBtnState();
+    }
+  }
+
+  function disable(silent) {
+    enabled = false;
+    stopPoll();
+    if (mo) { mo.disconnect(); mo = null; }
+    if (ws) { try { ws.close(); } catch {} ws = null; }
+    window.nativePlayer.stop().catch(() => {});
+    setBtnState();
+    if (!silent && typeof scheduleUpdatePreview === 'function') {
+      // Вернуть веб-превью к жизни.
+      const v = document.getElementById('timelinePreview');
+      if (v) v.muted = false;
+      scheduleUpdatePreview();
+    }
+  }
+
+  btn.addEventListener('click', () => enabled ? disable() : enable());
+  setBtnState();
+})();