kingkont 0.7.39 → 0.7.41

package/renderer/media.js

@@ -0,0 +1,1413 @@
+// renderer/media.js — Zoom, ffmpeg.wasm audio playback, thumbnails, history versioning, drag&drop, text+@-mentions, character/location settings
+//
+// Этот модуль был выделен из index.html (раньше всё было в одном <script>
+// блоке на 9123 строки). Все модули загружаются как plain <script>
+// в одном глобальном scope — поэтому функции/переменные между файлами
+// видят друг друга по именам, без import/export. Порядок загрузки
+// важен: см. <script> теги внизу index.html.
+
+// =================== Zoom ===================
+// Прямые стили вместо CSS-variable: var(--zoom) каскадился через .canvas-frame и .canvas,
+// заставляя Chrome делать full layout (partialLayout=false) на каждый wheel-tick.
+const _canvasFrame = $('canvasFrame');
+// Frame-size меняется ОТЛОЖЕННО (через debounce 200ms): width на canvasFrame —
+// layout-affecting свойство, его смена на каждом wheel-tick форсила 751ms Layout.
+// Транформ на canvas идёт через GPU (will-change: transform → composited),
+// scroll-bounds во время burst могут быть слегка off, на idle подстраиваются.
+let _frameSizeTimer = null;
+function applyZoomStyles(z) {
+  canvas.style.transform = `scale(${z})`;
+  clearTimeout(_frameSizeTimer);
+  _frameSizeTimer = setTimeout(() => {
+    _frameSizeTimer = null;
+    _canvasFrame.style.width  = (6000 * z) + 'px';
+    _canvasFrame.style.height = (4000 * z) + 'px';
+  }, 200);
+}
+function applyZoom(nextZoom, anchorClientX, anchorClientY) {
+  nextZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, nextZoom));
+  if (nextZoom === state.zoom) return;
+  const rect = canvasWrap.getBoundingClientRect();
+  // Если якорь не задан — берём центр видимой области
+  const ax = anchorClientX ?? (rect.left + rect.width / 2);
+  const ay = anchorClientY ?? (rect.top + rect.height / 2);
+  const visualX = canvasWrap.scrollLeft + (ax - rect.left);
+  const visualY = canvasWrap.scrollTop  + (ay - rect.top);
+  const contentX = visualX / state.zoom;
+  const contentY = visualY / state.zoom;
+  state.zoom = nextZoom;
+  applyZoomStyles(nextZoom);
+  canvasWrap.scrollLeft = contentX * nextZoom - (ax - rect.left);
+  canvasWrap.scrollTop  = contentY * nextZoom - (ay - rect.top);
+  $('zoomLabel').textContent = Math.round(nextZoom * 100) + '%';
+  scheduleViewSave();
+}
+
+// rAF-троттлинг zoom-через-колесо: трекпад/Magic Mouse шлют wheel @ 60-120Hz,
+// мы коалесцируем дельты в один applyZoom за кадр — иначе GPU-коммит не успевает.
+let _pendingZoom = null;
+canvasWrap.addEventListener('wheel', e => {
+  // Ctrl/Cmd + wheel  ИЛИ  тачпад-pinch (Chrome выставляет ctrlKey=true для pinch)
+  if (!(e.ctrlKey || e.metaKey)) return;
+  e.preventDefault();
+  if (_pendingZoom) {
+    _pendingZoom.factor *= Math.exp(-e.deltaY * 0.01);
+    _pendingZoom.x = e.clientX; _pendingZoom.y = e.clientY;
+    return;
+  }
+  _pendingZoom = { factor: Math.exp(-e.deltaY * 0.01), x: e.clientX, y: e.clientY };
+  requestAnimationFrame(() => {
+    const z = _pendingZoom; _pendingZoom = null;
+    applyZoom(state.zoom * z.factor, z.x, z.y);
+  });
+}, { passive: false });
+
+$('zoomIn').addEventListener('click',  () => applyZoom(state.zoom * 1.25));
+$('zoomOut').addEventListener('click', () => applyZoom(state.zoom / 1.25));
+$('zoomLabel').addEventListener('click', () => applyZoom(1));
+
+// Сохранение pan/zoom для текущей доски
+let viewSaveTimer = null;
+function scheduleViewSave() {
+  if (!state.currentBoard) return;
+  clearTimeout(viewSaveTimer);
+  viewSaveTimer = setTimeout(() => {
+    if (!state.currentBoard) return;
+    state.currentBoard.metadata.view = {
+      scrollLeft: canvasWrap.scrollLeft,
+      scrollTop:  canvasWrap.scrollTop,
+      zoom: state.zoom,
+    };
+    scheduleSave();
+  }, 400);
+}
+canvasWrap.addEventListener('scroll', scheduleViewSave);
+
+// =================== Скачивание аудио на выбранной скорости (ffmpeg.wasm atempo) ===================
+let ffmpegInstance = null;
+let ffmpegLoadingPromise = null;
+
+function loadScript(url) {
+  return new Promise((resolve, reject) => {
+    const s = document.createElement('script');
+    s.src = url; s.onload = resolve; s.onerror = () => reject(new Error('Не удалось загрузить ' + url));
+    document.head.appendChild(s);
+  });
+}
+
+async function ensureFFmpeg(onProgress) {
+  if (ffmpegInstance) return ffmpegInstance;
+  if (ffmpegLoadingPromise) return ffmpegLoadingPromise;
+  ffmpegLoadingPromise = (async () => {
+    onProgress?.('Загружаю ffmpeg...');
+    if (!window.FFmpegWASM) {
+      await loadScript('/vendor/ffmpeg/ffmpeg.js');
+    }
+    const ff = new window.FFmpegWASM.FFmpeg();
+    await ff.load({
+      coreURL: '/vendor/ffmpeg/ffmpeg-core.js',
+      wasmURL: '/vendor/ffmpeg/ffmpeg-core.wasm',
+    });
+    ffmpegInstance = ff;
+    return ff;
+  })();
+  return ffmpegLoadingPromise;
+}
+
+// atempo поддерживает 0.5..100; для значений вне диапазона цепляем
+function buildAtempoChain(speed) {
+  let s = speed;
+  const filters = [];
+  while (s < 0.5) { filters.push('atempo=0.5'); s /= 0.5; }
+  while (s > 2)   { filters.push('atempo=2.0'); s /= 2; }
+  filters.push(`atempo=${s.toFixed(4)}`);
+  return filters.join(',');
+}
+
+async function downloadAudioAtSpeed(file, filename, speed, onProgress) {
+  if (Math.abs(speed - 1) < 1e-6) {
+    triggerDownload(file, filename);
+    return;
+  }
+  const ff = await ensureFFmpeg(onProgress);
+  onProgress?.('Перекодирую...');
+  const inExt = (filename.split('.').pop() || 'mp3').toLowerCase();
+  const inName = 'in.' + inExt;
+  const outName = 'out.mp3';
+  await ff.writeFile(inName, new Uint8Array(await file.arrayBuffer()));
+  await ff.exec([
+    '-i', inName,
+    '-filter:a', buildAtempoChain(speed),
+    '-vn',
+    '-c:a', 'libmp3lame',
+    '-q:a', '2',
+    outName,
+  ]);
+  const data = await ff.readFile(outName);
+  const blob = new Blob([data.buffer], { type: 'audio/mpeg' });
+  const base = filename.replace(/\.[^.]+$/, '');
+  const speedStr = String(speed).replace('.', '_');
+  triggerDownload(blob, `${base}_${speedStr}x.mp3`);
+  await ff.deleteFile(inName).catch(() => {});
+  await ff.deleteFile(outName).catch(() => {});
+}
+
+function triggerDownload(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url; a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1500);
+}
+
+function findFreeSpot(w = 280, h = 320) {
+  const nodes = state.currentBoard?.metadata?.nodes || [];
+  const margin = 24;
+  const startX = canvasWrap.scrollLeft / state.zoom + 40;
+  const startY = canvasWrap.scrollTop  / state.zoom + 40;
+  const step = 60;
+  for (let y = startY; y < startY + 3000; y += step) {
+    for (let x = startX; x < startX + 3000; x += step) {
+      const overlaps = nodes.some(n => {
+        const nw = 320, nh = 360; // приближённая граница для произвольной ноды
+        return x < n.x + nw + margin && x + w + margin > n.x &&
+               y < n.y + nh + margin && y + h + margin > n.y;
+      });
+      if (!overlaps) return { x, y };
+    }
+  }
+  return { x: startX, y: startY };
+}
+
+// =================== Thumbnails ===================
+// Маленькая jpg-thumbnail для картинки/видео ноды. Хранится в <scene>/thumbs/.
+// Имя совпадает с исходным (frames/foo.png → thumbs/foo.png.jpg).
+// При selectBoard сразу показываем thumb как placeholder (мгновенно), full media
+// догружается lazy. На повторном открытии проекта эффект сильнее всего —
+// 50 нод × 5KB jpg декодятся миллисекунды против 50 × 2MB исходных.
+
+const THUMB_W = 320, THUMB_H = 240, THUMB_QUALITY = 0.7;
+
+// state: пути thumbnails, разрезолвенных в blob URL
+const _thumbUrls = new Map(); // `${boardKey}::${relPath}` -> objectURL
+
+function _thumbName(relPath) {
+  // frames/foo.png → foo.png.jpg
+  return relPath.split('/').pop() + '.jpg';
+}
+
+async function loadThumbnailURL(boardHandle, boardKey, relPath) {
+  const cacheKey = `${boardKey}::${relPath}`;
+  const cached = _thumbUrls.get(cacheKey);
+  if (cached) return cached;
+  try {
+    const dir = await boardHandle.getDirectoryHandle('thumbs');
+    const fh = await dir.getFileHandle(_thumbName(relPath));
+    const url = URL.createObjectURL(await fh.getFile());
+    _thumbUrls.set(cacheKey, url);
+    return url;
+  } catch { return null; }
+}
+
+// Генерирует и сохраняет thumbnail (если ещё нет). Вызывается ПОСЛЕ того как
+// full-media уже отображается — фоновая работа, не блокирует UI.
+async function generateThumbnailIfMissing(boardHandle, boardKey, node, mediaEl) {
+  if (!node.file || (node.type !== 'image' && node.type !== 'video')) return;
+  // Уже есть на диске?
+  try {
+    const dir = await boardHandle.getDirectoryHandle('thumbs');
+    await dir.getFileHandle(_thumbName(node.file));
+    return; // уже есть
+  } catch {}
+  try {
+    const c = document.createElement('canvas');
+    c.width = THUMB_W; c.height = THUMB_H;
+    const ctx = c.getContext('2d');
+    ctx.fillStyle = '#1a1a1a'; ctx.fillRect(0, 0, THUMB_W, THUMB_H);
+    let srcW, srcH, drawable;
+    if (node.type === 'image') {
+      if (!mediaEl.complete || !mediaEl.naturalWidth) {
+        await new Promise((r, rej) => { mediaEl.addEventListener('load', r, { once: true }); mediaEl.addEventListener('error', rej, { once: true }); });
+      }
+      drawable = mediaEl; srcW = mediaEl.naturalWidth; srcH = mediaEl.naturalHeight;
+    } else {
+      // video: ждём seek на ~0.3s для выбора симпатичного кадра
+      if (mediaEl.readyState < 2) {
+        mediaEl.preload = 'auto';
+        await new Promise((r, rej) => { mediaEl.addEventListener('loadeddata', r, { once: true }); mediaEl.addEventListener('error', rej, { once: true }); setTimeout(rej, 5000); });
+      }
+      try { mediaEl.currentTime = Math.min(0.3, (mediaEl.duration || 1) * 0.1); } catch {}
+      await new Promise(r => mediaEl.addEventListener('seeked', r, { once: true }));
+      drawable = mediaEl; srcW = mediaEl.videoWidth; srcH = mediaEl.videoHeight;
+    }
+    if (!srcW || !srcH) return;
+    // Letterbox fit
+    const scale = Math.min(THUMB_W / srcW, THUMB_H / srcH);
+    const dw = srcW * scale, dh = srcH * scale;
+    ctx.drawImage(drawable, (THUMB_W - dw) / 2, (THUMB_H - dh) / 2, dw, dh);
+    const blob = await new Promise(r => c.toBlob(r, 'image/jpeg', THUMB_QUALITY));
+    if (!blob) return;
+    const dir = await getOrCreateBoardSubdir(boardHandle, 'thumbs');
+    await writeFile(dir, _thumbName(node.file), blob);
+  } catch (e) { /* silent — это best-effort */ }
+}
+
+// Lazy media hydration: когда .node заходит в viewport (+ rootMargin запас на
+// плавный preload), вызывает свой __hydrate() — обычно ставит src на <img>/<video>/<audio>.
+// Без этого все 50+ медиа-файлов проекта читались с диска синхронно при selectBoard.
+//
+// Сериализация через rAF-очередь: если IntersectionObserver сообщит о 12 нодах
+// одновременно (например, при selectBoard все видимые сразу), мы не запускаем 12
+// параллельных hydrate'ов — браузер бы выпустил 12× loadedmetadata/canplay events
+// в один тик, и PrePaint walks paint-tree для всех сразу (видели 454ms в трейсе).
+// Гидрируем по 2 за rAF-кадр — нагрузка размазывается, паузы заметно меньше.
+const _hydrationQueue = [];
+let _hydrationRunning = false;
+function _drainHydration() {
+  _hydrationRunning = true;
+  // 2 hydrate-задачи за кадр — баланс между скоростью и плавностью.
+  for (let i = 0; i < 2 && _hydrationQueue.length; i++) {
+    const fn = _hydrationQueue.shift();
+    try { fn(); } catch (e) { console.warn("hydrate fail", e); }
+  }
+  if (_hydrationQueue.length) requestAnimationFrame(_drainHydration);
+  else _hydrationRunning = false;
+}
+function _enqueueHydration(fn) {
+  _hydrationQueue.push(fn);
+  if (!_hydrationRunning) requestAnimationFrame(_drainHydration);
+}
+const _mediaHydrationObserver = new IntersectionObserver((entries) => {
+  for (const e of entries) {
+    if (!e.isIntersecting) continue;
+    _mediaHydrationObserver.unobserve(e.target);
+    const target = e.target;
+    _enqueueHydration(() => target.__hydrate?.());
+  }
+}, { rootMargin: '400px' });
+
+let saveTimer = null;
+function scheduleSave() {
+  if (!state.currentBoard) return;
+  clearTimeout(saveTimer);
+  saveTimer = setTimeout(async () => {
+    saveTimer = null;
+    try { await saveBoardMetadata(state.currentBoard.handle, state.currentBoard.metadata); }
+    catch (e) { console.error('save failed', e); }
+  }, 300);
+}
+
+async function refreshNodeDOM(nodeId) {
+  if (!state.currentBoard) return;
+  const node = state.currentBoard.metadata.nodes.find(n => n.id === nodeId);
+  if (!node) return;
+  const el = canvas.querySelector(`.node[data-id="${nodeId}"]`);
+  if (!el) return;
+  const body = el.querySelector('.node-body');
+  await renderNodeBody(node, body);
+  const footer = el.querySelector('.node-footer');
+  if (footer) updateNodeFooter(node, footer);
+}
+
+// Если на таймлайне есть клипы, ссылающиеся на ноду — перерисовать таймлайн
+function refreshTimelineForNode(nodeId) {
+  const tl = state.currentBoard?.metadata?.timeline;
+  if (!tl?.tracks) return;
+  if ($('timelinePanel').classList.contains('hidden')) return;
+  const has = tl.tracks.some(t => t.clips?.some(c => c.nodeId === nodeId));
+  if (has) renderTimeline();
+}
+
+// Синхронизировать клипы таймлайна с актуальным файлом ноды (после регена)
+function syncTimelineClipsForNode(node) {
+  const tl = state.currentBoard?.metadata?.timeline;
+  if (!tl?.tracks || !node?.file) return false;
+  let changed = false;
+  for (const t of tl.tracks) {
+    for (const c of t.clips || []) {
+      if (c.nodeId !== node.id) continue;
+      c.file = node.file;
+      c.type = node.type;
+      c.name = node.name || node.file.split('/').pop();
+      c.trimStart = 0;
+      c.sourceDuration = undefined;
+      c._durationLoaded = false;
+      c.duration = undefined; // подхватится из metadata нового файла
+      changed = true;
+    }
+  }
+  return changed;
+}
+
+// =================== История версий + перегенерация ===================
+function syncHistorySlot(node) {
+  if (!Array.isArray(node.history) || !node.history.length) return;
+  const idx = Math.max(0, Math.min(node.history.length - 1, node.historyIndex ?? node.history.length - 1));
+  node.history[idx] = {
+    file: node.file, generated: node.generated,
+    status: node.status, error: node.error,
+  };
+}
+
+function updateNodeFooter(node, footer) {
+  footer.innerHTML = '';
+  const total = node.history?.length || 0;
+  const idx = total ? (node.historyIndex ?? total - 1) : 0;
+
+  const prev = document.createElement('button');
+  prev.textContent = '←'; prev.title = 'Предыдущая версия';
+  prev.disabled = total <= 1 || idx <= 0;
+  prev.addEventListener('click', e => { e.stopPropagation(); navigateHistory(node, -1); });
+  prev.addEventListener('mousedown', e => e.stopPropagation());
+
+  const regen = document.createElement('button');
+  regen.className = 'regen-btn'; regen.textContent = '↻'; regen.title = 'Перегенерировать';
+  regen.disabled = node.status === 'generating';
+  regen.addEventListener('click', e => { e.stopPropagation(); regenerateNode(node); });
+  regen.addEventListener('mousedown', e => e.stopPropagation());
+
+  const next = document.createElement('button');
+  next.textContent = '→'; next.title = 'Следующая версия';
+  next.disabled = !total || idx >= total - 1;
+  next.addEventListener('click', e => { e.stopPropagation(); navigateHistory(node, +1); });
+  next.addEventListener('mousedown', e => e.stopPropagation());
+
+  footer.appendChild(prev);
+  footer.appendChild(regen);
+  footer.appendChild(next);
+  if (total > 1) {
+    const pos = document.createElement('span');
+    pos.className = 'pos';
+    pos.textContent = `${idx + 1} / ${total}`;
+    footer.appendChild(pos);
+  }
+}
+
+async function navigateHistory(node, delta) {
+  if (!Array.isArray(node.history) || node.history.length < 2) return;
+  const idx = Math.max(0, Math.min(node.history.length - 1, (node.historyIndex ?? node.history.length - 1) + delta));
+  if (idx === node.historyIndex) return;
+  node.historyIndex = idx;
+  const v = node.history[idx];
+  node.file = v.file;
+  node.generated = v.generated;
+  node.status = v.status;
+  node.error = v.error;
+  await refreshNodeDOM(node.id);
+  scheduleSave();
+}
+
+async function stopJob(nodeId) {
+  logJob(nodeId, `stopped manually`);
+  const job = state.jobs.get(nodeId);
+  if (job) {
+    state.jobs.delete(nodeId);
+    updateJobsBadge();
+  }
+  const bKey = job?.boardKey || state.currentBoard?.key;
+  const bHandle = job?.boardHandle || state.currentBoard?.handle;
+  if (!bKey || !bHandle) return;
+  await mutateNode(bKey, bHandle, nodeId, n => {
+    n.status = 'error';
+    n.error = 'Остановлено вручную';
+  });
+}
+
+async function restartJob(nodeId) {
+  logJob(nodeId, `restart requested`);
+  // Сначала отменяем текущий поллинг
+  const job = state.jobs.get(nodeId);
+  const bKey = job?.boardKey || state.currentBoard?.key;
+  const bHandle = job?.boardHandle || state.currentBoard?.handle;
+  if (job) {
+    state.jobs.delete(nodeId);
+    updateJobsBadge();
+  }
+  if (!bKey || !bHandle) return;
+  // Найти ноду
+  let node;
+  if (state.currentBoard?.key === bKey) {
+    node = state.currentBoard.metadata.nodes.find(n => n.id === nodeId);
+  }
+  if (!node || !node.generated) return;
+  // Зафиксировать размеры ноды, чтобы spinner не схлопнул её
+  const elNode = canvas.querySelector(`.node[data-id="${nodeId}"]`);
+  if (elNode) {
+    if (!node.width)  node.width  = elNode.offsetWidth;
+    if (!node.height) node.height = elNode.offsetHeight;
+    elNode.style.width  = node.width  + 'px';
+    elNode.style.height = node.height + 'px';
+  }
+  // Сбрасываем taskId (чтобы прошёл заново через upload+submit) и стейт
+  node.generated = { ...node.generated, taskId: undefined, state: 'submitting' };
+  node.status = 'generating';
+  node.error = undefined;
+  syncHistorySlot(node);
+  scheduleSave();
+  await refreshNodeDOM(node.id);
+  // Запуск
+  const kind = node.generated.kind;
+  if (kind === 'audio') {
+    runTTSJob(node, node.generated.prompt, bHandle, bKey, node.generated.voiceId);
+  } else if (kind === 'text') {
+    // text → /api/text (OpenRouter / Chatium), а не /api/generate (KIE).
+    const imageRefs = (node.generated.refs || []).filter(r => r.type === 'image' && r.file);
+    const model = node.generated.model || node.generated.modelKey || 'anthropic/claude-sonnet-4';
+    runTextJob(node, node.generated.prompt, model, bHandle, bKey, imageRefs);
+  } else {
+    const refs = (node.generated.refs || []).map(r => ({ name: r.name, type: r.type, file: r.file }));
+    startGenerationJob(node, kind, node.generated.prompt, refs, bHandle, bKey, node.generated.modelKey);
+  }
+}
+
+async function regenerateNode(node) {
+  if (node.status === 'generating') return;
+  const g = node.generated || {};
+  // SFX / Music — отдельный flow, чтобы не путать с TTS-голосом.
+  if (g.subKind === 'sfx') {
+    state.sfxRegenerateTarget = node;
+    $('sfxPrompt').value = g.prompt || '';
+    $('sfxDuration').value = g.durationSeconds || '';
+    $('sfxStatus').textContent = ''; $('sfxStatus').className = 'status';
+    $('sfxSubmit').disabled = false;
+    $('sfxModal').classList.remove('hidden');
+    setTimeout(() => $('sfxPrompt').focus(), 30);
+    return;
+  }
+  if (g.subKind === 'music') {
+    state.musicRegenerateTarget = node;
+    $('musicPrompt').value = g.prompt || '';
+    $('musicDuration').value = g.durationMs ? (g.durationMs / 1000) : '';
+    $('musicStatus').textContent = ''; $('musicStatus').className = 'status';
+    $('musicSubmit').disabled = false;
+    $('musicModal').classList.remove('hidden');
+    setTimeout(() => $('musicPrompt').focus(), 30);
+    return;
+  }
+  // Открываем Generate-модалку с предзаполненными параметрами
+  // (или дефолтами, если нода была загружена, а не сгенерирована — текущий файл уйдёт в history)
+  state.regenerateTarget = node;
+  state.genKind = g.kind || node.type;
+
+  resetPicks();
+  presetPicksForBoard();
+  renderCharsPickChips();
+  renderLocPickSelect();
+  syncCharLocRows();
+
+  // Исходный кадр для regenerate:
+  // 1. Если нода была ВЫВЕДЕНА из другой ноды (node.generated.sourceRef есть)
+  //    — это связь с родительской нодой, её надо сохранить через regenerate
+  //    иначе модель сгенерирует не «вариацию из X», а просто новый по промпту.
+  // 2. Иначе video: текущий файл как референс (вариация первого кадра).
+  // 3. Иначе image: НЕ берём свою же картинку — модель просто скопирует.
+  if (node.generated?.sourceRef && node.generated.sourceRef.file) {
+    const sr = node.generated.sourceRef;
+    state.sourceRef = {
+      file: sr.file,
+      type: sr.type,
+      boardHandle: state.currentBoard.handle,
+      use: true,
+    };
+    if (sr.type === 'image') {
+      let thumbUrl = state.currentBoard.urls[sr.file];
+      if (!thumbUrl) {
+        try {
+          const fh = await resolveBoardFile(state.currentBoard.handle, sr.file);
+          thumbUrl = URL.createObjectURL(await fh.getFile());
+          state.currentBoard.urls[sr.file] = thumbUrl;
+        } catch {}
+      }
+      $('sourceRefThumb').src = thumbUrl || '';
+      $('sourceRefThumb').style.display = '';
+    } else {
+      $('sourceRefThumb').src = '';
+      $('sourceRefThumb').style.display = 'none';
+    }
+    $('sourceRefName').textContent = sr.file.split('/').pop();
+    applySourceRefVisuals();
+  } else if (node.file && node.type === 'video') {
+    state.sourceRef = {
+      file: node.file,
+      type: 'video',
+      boardHandle: state.currentBoard.handle,
+      use: true,
+    };
+    $('sourceRefThumb').src = '';
+    $('sourceRefThumb').style.display = 'none';
+    $('sourceRefName').textContent = node.name || node.file.split('/').pop();
+    applySourceRefVisuals();
+  } else {
+    state.sourceRef = null;
+  }
+  syncSourceRefRow();
+
+  document.querySelectorAll('#genModal [data-kind]').forEach(b =>
+    b.classList.toggle('active', b.dataset.kind === state.genKind));
+  $('imageModelRow').style.display = state.genKind === 'image' ? '' : 'none';
+
+  $('imageOptionsRow').style.display = state.genKind === 'image' ? '' : 'none';
+  $('videoOptionsRow').style.display = state.genKind === 'video' ? '' : 'none';
+
+  $('videoModelRow').style.display = state.genKind === 'video' ? '' : 'none';
+  $('voiceRow').style.display      = state.genKind === 'audio' ? '' : 'none';
+
+  $('ttsModelRow').style.display      = state.genKind === 'audio' ? '' : 'none';
+
+  if (g.modelKey && state.genKind === 'image') {
+    state.imageModel = g.modelKey;
+    document.querySelectorAll('#genModal [data-img-model]').forEach(b =>
+      b.classList.toggle('active', b.dataset.imgModel === g.modelKey));
+  }
+  if (state.genKind === 'image') {
+    if (g.aspectRatio) state.imageAspect = g.aspectRatio;
+    syncImageAspectActive();
+  }
+  // Видео: подставляем сохранённые duration/resolution/aspect для regenerate
+  if (state.genKind === 'video') {
+    if (g.duration) state.videoDuration = g.duration;
+    if (g.resolution) state.videoResolution = g.resolution;
+    if (g.aspectRatio) state.videoAspect = g.aspectRatio;
+    if (g.modelKey) state.videoModel = g.modelKey;
+    syncVideoOptionsActive();
+    syncVideoModelActive();
+  }
+  if (state.genKind === 'audio') {
+    if (g.ttsModel) state.ttsModel = g.ttsModel;
+    syncTtsModelActive();
+    if (state.ttsModel === 'elevenlabs/v3') await loadVoices();
+    if (g.voiceId) $('genVoice').value = g.voiceId;
+    state.activeTones = (g.tones || []).slice();
+    state.toneSuggestions = (g.tones || []).slice();
+    renderTones();
+    $('tonesRow').style.display = '';
+  }
+
+  $('genPrompt').value = g.rawPrompt || g.prompt || '';
+  $('genStatus').textContent = '';
+  $('genStatus').className = 'status';
+  $('genSubmit').disabled = false;
+  closeMentionPopup();
+  $('genModal').classList.remove('hidden');
+  setTimeout(() => {
+    const ta = $('genPrompt');
+    ta.focus();
+    ta.setSelectionRange(ta.value.length, ta.value.length);
+  }, 50);
+}
+
+async function regenerateInto(node, kind, rawPrompt, opts = {}) {
+  // Зафиксировать текущие размеры ноды, чтобы spinner не схлопнул её
+  const el = canvas.querySelector(`.node[data-id="${node.id}"]`);
+  if (el) {
+    if (!node.width)  node.width  = el.offsetWidth;
+    if (!node.height) node.height = el.offsetHeight;
+    el.style.width  = node.width  + 'px';
+    el.style.height = node.height + 'px';
+  }
+
+  // Сохраняем текущее в history
+  if (!Array.isArray(node.history) || !node.history.length) {
+    node.history = [{
+      file: node.file, generated: { ...node.generated },
+      status: undefined, error: undefined,
+    }];
+    node.historyIndex = 0;
+  } else {
+    syncHistorySlot(node);
+  }
+
+  let voiceId, voiceName, modelKey, refs;
+  let resolvedPrompt;
+  if (kind === 'audio') {
+    voiceId = $('genVoice').value || node.generated?.voiceId;
+    voiceName = $('genVoice').selectedOptions[0]?.textContent || '';
+    if (voiceId) localStorage.setItem('lastVoiceId', voiceId);
+    const resolvedRaw = (typeof resolveMentions === 'function')
+      ? resolveMentions(rawPrompt, []).trim()
+      : rawPrompt;
+    if (!resolvedRaw) {
+      alert('После раскрытия @-ссылок текст пустой. Проверь исходные ноды.');
+      return;
+    }
+    const tonePrefix = state.activeTones.map(t => `[${t}]`).join(' ');
+    resolvedPrompt = tonePrefix ? `${tonePrefix} ${resolvedRaw}` : resolvedRaw;
+  } else if (kind === 'text') {
+    // Текстовая модель: имя берём как есть (полный slug OpenRouter,
+    // напр. anthropic/claude-sonnet-4). Нет state.textModel — fallback
+    // на сохранённое в ноде или дефолт.
+    modelKey = node.generated?.modelKey || node.generated?.model || 'anthropic/claude-sonnet-4';
+    refs = gatherMediaRefs(rawPrompt);
+    if (opts.sourceRef && opts.sourceRef.file && opts.sourceRef.type === 'image') {
+      const sr = opts.sourceRef;
+      const dup = refs.some(r => r.file === sr.file && r.boardHandle === sr.boardHandle);
+      if (!dup) {
+        refs.unshift({
+          key: '__source__',
+          name: 'исходный кадр',
+          type: 'image',
+          file: sr.file,
+          boardHandle: sr.boardHandle,
+        });
+      }
+    }
+    for (const pr of (opts.pickedSheets || [])) {
+      if (refs.some(r => r.file === pr.file && r.boardHandle === pr.boardHandle)) continue;
+      refs.push(pr);
+    }
+    const missing = refs.filter(r => !r.file || r.status === 'generating');
+    if (missing.length) {
+      alert('Эти ноды ещё не готовы: ' + missing.map(m => '@' + (m.name || m.id)).join(', '));
+      return;
+    }
+    resolvedPrompt = resolveMentions(rawPrompt, refs);
+  } else {
+    modelKey = kind === 'image' ? state.imageModel : (state.videoModel || 'seedance-2');
+    refs = gatherMediaRefs(rawPrompt);
+    // Подмешиваем "исходный кадр" — текущий файл ноды как референс при редактировании
+    let sourceMarker = '';
+    if (opts.sourceRef && opts.sourceRef.file) {
+      const sr = opts.sourceRef;
+      const dup = refs.some(r => r.file === sr.file && r.boardHandle === sr.boardHandle);
+      if (!dup) {
+        const refType = sr.type === 'video' ? 'video' : 'image';
+        refs.unshift({
+          key: '__source__',
+          name: 'исходный кадр',
+          type: refType,
+          file: sr.file,
+          boardHandle: sr.boardHandle,
+        });
+        // Источник — первый реф своего типа: добавим маркер в промпт, чтобы модель учла его
+        sourceMarker = refType === 'video' ? '[video 1] ' : '[image 1] ';
+      }
+    }
+    // Подмешиваем sheet'ы выбранных персонажей и локации (если они ещё не в рефах)
+    for (const pr of (opts.pickedSheets || [])) {
+      if (refs.some(r => r.file === pr.file && r.boardHandle === pr.boardHandle)) continue;
+      refs.push(pr);
+    }
+    const missing = refs.filter(r => !r.file || r.status === 'generating');
+    if (missing.length) {
+      alert('Эти ноды ещё не готовы: ' + missing.map(m => '@' + (m.name || m.id)).join(', '));
+      return;
+    }
+    resolvedPrompt = resolveMentions(rawPrompt, refs);
+    if (sourceMarker) resolvedPrompt = sourceMarker + resolvedPrompt;
+  }
+
+  const modelId = kind === 'image'
+    ? ({ 'grok': 'grok-imagine/text-to-image',
+         'seedream': 'seedream/4.5-text-to-image',
+         'seedream-5-lite': 'seedream/5-lite-text-to-image',
+         'flux-schnell': 'flux/schnell',
+         'sdxl-lightning': 'sdxl/lightning',
+         'nano-banana-2': 'nano-banana-2' }[modelKey] || 'nano-banana-2')
+    : kind === 'video' ? ({
+        'seedance-2':       'bytedance/seedance-2',
+        'seedance-2-fast':  'bytedance/seedance-2-fast',
+        'kling-o1':         'kwaivgi/kling-o1',
+        'kling-3.0':        'kling-3.0/video',
+      }[modelKey] || 'bytedance/seedance-2')
+    : kind === 'text' ? modelKey      // полный slug OpenRouter
+    : 'eleven_v3';                     // audio
+
+  // sourceRef нужно сохранить через regenerate, иначе при следующем
+  // открытии modal'а связь с родительской нодой потеряется.
+  // Приоритет: то что юзер активно выбрал в UI (opts.sourceRef);
+  // если не выбирал — оставляем то что было раньше в node.generated.sourceRef.
+  const carryoverSourceRef = opts.sourceRef && opts.sourceRef.file
+    ? { file: opts.sourceRef.file, type: opts.sourceRef.type }
+    : (node.generated?.sourceRef || null);
+
+  const seedGen = kind === 'audio'
+    ? { kind, prompt: resolvedPrompt, rawPrompt, model: modelId, voiceId, voiceName,
+        ttsModel: state.ttsModel || node.generated?.ttsModel || 'qwen/qwen3-tts',
+        tones: [...state.activeTones], state: 'submitting' }
+    : { kind, prompt: resolvedPrompt, rawPrompt, modelKey, model: modelId,
+        refs: refs ? refs.map(r => ({ name: r.name, type: r.type, file: r.file })) : [],
+        ...(carryoverSourceRef ? { sourceRef: carryoverSourceRef } : {}),
+        state: 'submitting' };
+
+  // Для text-ноды сохраняем существующий .md-файл (runTextJob перезапишет
+  // его содержимое). Если файла ещё нет — создаём пустой texts/text_X.md
+  // здесь, иначе writeBoardFile упадёт на split('/') от undefined.
+  let preservedFile;
+  if (kind === 'text') {
+    if (node.file) {
+      preservedFile = node.file;
+    } else {
+      const dir = await getOrCreateBoardSubdir(state.currentBoard.handle, 'texts');
+      const mdName = await uniqueName(dir, 'text.md');
+      await writeFile(dir, mdName, '');
+      preservedFile = `texts/${mdName}`;
+    }
+  }
+
+  const newSlot = { file: preservedFile, generated: seedGen, status: 'generating', error: undefined };
+  node.history.push(newSlot);
+  node.historyIndex = node.history.length - 1;
+  node.type = kind;
+  node.file = preservedFile;  // для не-text undefined; для text — путь к .md
+  node.generated = newSlot.generated;
+  node.status = 'generating';
+  node.error = undefined;
+
+  scheduleSave();
+  await refreshNodeDOM(node.id);
+
+  const bHandle = state.currentBoard.handle;
+  const bKey = state.currentBoard.key;
+  if (kind === 'audio') {
+    runTTSJob(node, resolvedPrompt, bHandle, bKey, voiceId);
+  } else if (kind === 'text') {
+    runTextJob(node, resolvedPrompt, modelId, bHandle, bKey, refs);
+  } else {
+    startGenerationJob(node, kind, resolvedPrompt, refs, bHandle, bKey, modelKey);
+  }
+}
+
+// =================== Drag & drop ===================
+let dragCounter = 0;
+canvasWrap.addEventListener('dragenter', e => {
+  if (!state.currentBoard) return;
+  if (![...e.dataTransfer.types].includes('Files')) return;
+  dragCounter++;
+  canvasWrap.classList.add('drag-over');
+});
+canvasWrap.addEventListener('dragover', e => {
+  if (!state.currentBoard) return;
+  if (![...e.dataTransfer.types].includes('Files')) return;
+  e.preventDefault();
+});
+canvasWrap.addEventListener('dragleave', () => {
+  dragCounter--;
+  if (dragCounter <= 0) { dragCounter = 0; canvasWrap.classList.remove('drag-over'); }
+});
+canvasWrap.addEventListener('drop', async e => {
+  e.preventDefault();
+  dragCounter = 0;
+  canvasWrap.classList.remove('drag-over');
+  if (!state.currentBoard) return;
+  const rect = canvas.getBoundingClientRect();
+  const dropX = (e.clientX - rect.left) / state.zoom;
+  const dropY = (e.clientY - rect.top) / state.zoom;
+  let i = 0;
+  for (const file of e.dataTransfer.files) {
+    const type = getFileType(file);
+    if (!type) continue;
+    try {
+      const filename = await importToBoard(state.currentBoard.handle, file, type);
+      const node = {
+        id: crypto.randomUUID(),
+        type,
+        file: filename,
+        x: dropX + i*24, y: dropY + i*24,
+      };
+      if (type === 'text') {
+        try { node.text = await file.text(); } catch { node.text = ''; }
+      }
+      state.currentBoard.metadata.nodes.push(node);
+      canvas.appendChild(await createNodeEl(node));
+      i++;
+    } catch (err) { console.error(err); alert(`Не удалось импортировать ${file.name}: ${err.message}`); }
+  }
+  scheduleSave();
+});
+
+// =================== Текстовая нода ===================
+$('addText').addEventListener('click', async () => {
+  if (!state.currentBoard) return;
+  const dir = await getOrCreateBoardSubdir(state.currentBoard.handle, 'texts');
+  const mdName = await uniqueName(dir, 'text.md');
+  await writeFile(dir, mdName, '');
+  const node = {
+    id: crypto.randomUUID(),
+    type: 'text',
+    file: `texts/${mdName}`,
+    text: '',
+    x: canvasWrap.scrollLeft / state.zoom + 80, y: canvasWrap.scrollTop / state.zoom + 80,
+  };
+  state.currentBoard.metadata.nodes.push(node);
+  canvas.appendChild(await createNodeEl(node));
+  scheduleSave();
+});
+
+// =================== @-mentions: автокомплит и резолвер ===================
+// Ключ для @-ссылки: имя если есть, иначе uuid ноды
+function nodeRefKey(n) { return n.name || n.id; }
+
+// Только названные ноды — попадают в автокомплит
+function getReferenceableNodes() {
+  if (!state.currentBoard) return [];
+  return state.currentBoard.metadata.nodes.filter(n => n.name && n.id);
+}
+
+// Все варианты для @-popup с учётом kind генерации:
+// - локальные именованные ноды (фильтруются по типу)
+// - @<персонаж> (если у него есть characterSheet)
+// - @<персонаж>.<имя_картинки>
+function getMentionSuggestions(kind) {
+  if (!state.currentBoard) return [];
+  // Текстовые ноды разрешены везде: resolveMentions инлайнит их .md прямо в промпт.
+  const allowed = kind === 'image' ? ['image', 'text']
+                : kind === 'video' ? ['image', 'video', 'audio', 'text']
+                : ['text', 'image', 'video', 'audio'];
+  const out = [];
+  for (const n of state.currentBoard.metadata.nodes) {
+    if (!n.name || !n.id) continue;
+    if (!allowed.includes(n.type)) continue;
+    out.push({ key: n.name, label: n.name, type: n.type, scope: 'board' });
+  }
+  if (kind === 'image' || kind === 'video') {
+    for (const c of state.charactersInfo) {
+      // Чтобы не дублировать на собственной доске
+      if (state.currentBoard.kind === 'character' && state.currentBoard.name === c.name) continue;
+      if (c.characterSheet) {
+        out.push({ key: c.name, label: c.name + ' · sheet', type: 'image', scope: 'char-sheet' });
+      }
+      for (const img of (c.imageNodes || [])) {
+        out.push({
+          key: `${c.name}.${img.name}`,
+          label: `${c.name}.${img.name}`,
+          type: 'image', scope: 'char-image',
+        });
+      }
+    }
+  }
+  return out;
+}
+
+// Все ноды на доске, но искать в промпте можно и по id (для drag-drop безымянных)
+function getAllRefNodes() {
+  if (!state.currentBoard) return [];
+  return state.currentBoard.metadata.nodes.filter(n => n.id);
+}
+
+// Найти все @media-ноды в промпте — упорядоченные по первому появлению.
+// Возвращает [{key, name, type, file, boardHandle, charName?, firstIdx}, ...]
+function gatherMediaRefs(rawPrompt) {
+  const candidates = [];
+  for (const n of getAllRefNodes()) {
+    if (!['image','video','audio'].includes(n.type)) continue;
+    if (!n.file) continue;
+    candidates.push({
+      key: nodeRefKey(n),
+      name: n.name || n.id,
+      type: n.type,
+      file: n.file,
+      boardHandle: state.currentBoard.handle,
+    });
+  }
+  for (const c of state.charactersInfo) {
+    if (state.currentBoard?.kind === 'character' && state.currentBoard.name === c.name) continue;
+    if (c.characterSheet) {
+      candidates.push({
+        key: c.name, name: c.name, type: 'image',
+        file: c.characterSheet, boardHandle: c.handle, charName: c.name,
+      });
+    }
+    for (const img of (c.imageNodes || [])) {
+      candidates.push({
+        key: `${c.name}.${img.name}`, name: img.name, type: 'image',
+        file: img.file, boardHandle: c.handle, charName: c.name,
+      });
+    }
+  }
+  // Длинные ключи раньше — на этапе матчинга
+  candidates.sort((a, b) => b.key.length - a.key.length);
+  // Маскируем уже найденные позиции, чтобы @алиса.happy не «находил» @алиса повторно
+  let masked = rawPrompt;
+  const matched = [];
+  for (const c of candidates) {
+    // Поддерживаем обе формы: [@key] (новая) и @key (легаси)
+    const bracketed = '[@' + c.key + ']';
+    const bare = '@' + c.key;
+    let idx = masked.indexOf(bracketed);
+    if (idx < 0) idx = masked.indexOf(bare);
+    if (idx < 0) continue;
+    matched.push({ ...c, firstIdx: idx });
+    masked = masked.split(bracketed).join(''.repeat(bracketed.length));
+    masked = masked.split(bare).join(''.repeat(bare.length));
+  }
+  // Сортируем по позиции в исходном промпте
+  matched.sort((a, b) => a.firstIdx - b.firstIdx);
+  // Дедуп по ключу (на случай если дважды попало)
+  const seen = new Set();
+  const result = matched.filter(m => seen.has(m.key) ? false : (seen.add(m.key), true));
+  // Лог: сколько кандидатов и что попало в refs
+  console.log('[gatherMediaRefs]',
+    '\n  prompt:', JSON.stringify(rawPrompt),
+    '\n  candidates(', candidates.length, '):',
+    candidates.map(c => ({ key: c.key, type: c.type, file: c.file, char: c.charName || null, board: c.boardHandle?.name })),
+    '\n  matched(', result.length, '):',
+    result.map(r => ({ key: r.key, type: r.type, file: r.file, char: r.charName || null, board: r.boardHandle?.name })));
+  return result;
+}
+
+// Загрузка файла из папки доски на KIE -> публичный URL.
+// Кэшируем по filename+size+mtime (fingerprint).
+// Кэш живёт в файле <film>/_uploads.json (общий между сессиями и машинами).
+const uploadCache = new Map(); // key -> { url, expires }
+async function loadUploadCache() {
+  uploadCache.clear();
+  if (!state.filmHandle) return;
+  try {
+    const fh = await state.filmHandle.getFileHandle('_uploads.json');
+    const data = JSON.parse(await (await fh.getFile()).text());
+    const now = Date.now();
+    for (const [k, v] of Object.entries(data || {})) {
+      if (v && v.expires > now) uploadCache.set(k, v);
+    }
+  } catch {}
+}
+let _saveUploadTimer = null;
+function scheduleSaveUploadCache() {
+  if (_saveUploadTimer) clearTimeout(_saveUploadTimer);
+  _saveUploadTimer = setTimeout(saveUploadCache, 500);
+}
+async function saveUploadCache() {
+  _saveUploadTimer = null;
+  if (!state.filmHandle) return;
+  try {
+    const obj = {};
+    const now = Date.now();
+    for (const [k, v] of uploadCache.entries()) {
+      if (v.expires > now) obj[k] = v;
+    }
+    const fh = await state.filmHandle.getFileHandle('_uploads.json', { create: true });
+    const w = await fh.createWritable();
+    await w.write(JSON.stringify(obj, null, 2));
+    await w.close();
+  } catch (e) { console.error('save upload cache failed', e); }
+}
+
+async function uploadBoardFile(boardHandle, boardKey, filename) {
+  const t0 = Date.now();
+  console.log('[uploadBoardFile] →', { board: boardKey, file: filename, boardName: boardHandle?.name });
+  const fh = await resolveBoardFile(boardHandle, filename);
+  const file = await fh.getFile();
+  const fingerprint = `${file.size}.${file.lastModified || 0}`;
+  const cacheKey = `${boardKey}::${filename}::${fingerprint}`;
+  const now = Date.now();
+  const cached = uploadCache.get(cacheKey);
+  if (cached && cached.expires > now) {
+    console.log('[uploadBoardFile] ✓ cache HIT', { file: filename, size: file.size, mime: file.type, url: cached.url });
+    return cached.url;
+  }
+  console.log('[uploadBoardFile] cache MISS — uploading', { file: filename, size: file.size, mime: file.type });
+  const r = await fetch('/api/upload', {
+    method: 'POST',
+    headers: {
+      'Content-Type': file.type || 'application/octet-stream',
+      'X-File-Name': encodeURIComponent(file.name),
+    },
+    body: file,
+  });
+  const data = await r.json();
+  if (!r.ok || data.error) {
+    console.log('[uploadBoardFile] ✗ FAIL', { status: r.status, error: data.error });
+    throw new Error(data.error || `upload ${r.status}`);
+  }
+  uploadCache.set(cacheKey, { url: data.url, expires: now + 2.5 * 24 * 3600 * 1000 });
+  scheduleSaveUploadCache();
+  console.log('[uploadBoardFile] ✓ uploaded in', Date.now() - t0, 'ms', { file: filename, url: data.url, kieFilename: data.fileName, kieSize: data.size });
+  return data.url;
+}
+
+// Превращает @-ссылки в семантически нейтральные позиционные маркеры,
+// привязанные к индексам image_input/reference_*_urls.
+// mediaRefs — результат gatherMediaRefs (в порядке появления).
+function resolveMentions(text, mediaRefs) {
+  const ops = [];
+  // Текстовые ноды: инлайним содержимое .md
+  for (const n of (state.currentBoard?.metadata?.nodes || [])) {
+    if (n.type === 'text' && n.id) {
+      ops.push({ key: nodeRefKey(n), replace: n.text || '' });
+    }
+  }
+  // Медиа: маркер [image N] / [video N] / [audio N], где N — позиция в массиве рефов того же типа
+  let imgI = 1, vidI = 1, audI = 1;
+  for (const r of (mediaRefs || [])) {
+    let marker;
+    if (r.type === 'image')      marker = `[image ${imgI++}]`;
+    else if (r.type === 'video') marker = `[video ${vidI++}]`;
+    else if (r.type === 'audio') marker = `[audio ${audI++}]`;
+    else marker = '';
+    ops.push({ key: r.key, replace: marker });
+  }
+  // Длинные ключи раньше
+  ops.sort((a, b) => b.key.length - a.key.length);
+  let out = text;
+  // Сначала заменяем форму [@key] (новую), потом легаси @key
+  for (const op of ops) {
+    out = out.split('[@' + op.key + ']').join(op.replace);
+  }
+  for (const op of ops) {
+    out = out.split('@' + op.key).join(op.replace);
+  }
+  out = out.replace(/[ \t]+/g, ' ').replace(/\s+([.,!?;:])/g, '$1').trim();
+  return out;
+}
+
+const mentionState = { open: false, anchor: 0, items: [], selected: 0 };
+
+function updateMentionPopup() {
+  const ta = $('genPrompt');
+  const cursor = ta.selectionStart;
+  const before = ta.value.slice(0, cursor);
+  // @@ — только персонажи; @... — обычный popup; [@... — обычный popup
+  const mDouble = before.match(/@@([^\s@\]]*)$/);
+  const m = mDouble || before.match(/(\[?)@([^\s@\]]*)$/);
+  const popup = $('mentionPopup');
+  if (!m) { closeMentionPopup(); return; }
+  const isCharOnly = !!mDouble;
+  const query = (mDouble ? mDouble[1] : m[2]).toLowerCase();
+
+  const dotIdx = query.indexOf('.');
+  let items = [];
+
+  if (dotIdx >= 0) {
+    // Уже выбран персонаж — показываем только его картинки
+    const charName = query.slice(0, dotIdx);
+    const imgQuery = query.slice(dotIdx + 1);
+    const c = state.charactersInfo.find(x => x.name.toLowerCase() === charName);
+    if (c) {
+      for (const img of (c.imageNodes || [])) {
+        if (!imgQuery || img.name.toLowerCase().includes(imgQuery)) {
+          items.push({
+            key: `${c.name}.${img.name}`,
+            label: img.name,
+            type: 'image',
+            scope: 'char-image',
+            charName: c.name,
+          });
+        }
+      }
+    }
+  } else if (isCharOnly) {
+    // @@ — только персонажи
+    for (const c of state.charactersInfo) {
+      if (state.currentBoard?.kind === 'character' && state.currentBoard.name === c.name) continue;
+      const hasImages = (c.imageNodes || []).length > 0;
+      items.push({
+        key: c.name,
+        label: c.name + (hasImages && c.characterSheet ? '' : (hasImages ? ' …' : (c.characterSheet ? ' · sheet' : ''))),
+        type: 'image',
+        scope: 'char',
+        hasImages, hasSheet: !!c.characterSheet,
+      });
+    }
+    items = items.filter(s => s.key.toLowerCase().includes(query)).slice(0, 16);
+  } else {
+    // Верхний уровень: локальные именованные ноды + персонажи (одна запись на персонажа)
+    // Текстовые ноды разрешены везде — resolveMentions инлайнит их .md в промпт.
+    const allowed = state.genKind === 'image' ? ['image', 'text']
+                  : state.genKind === 'video' ? ['image', 'video', 'audio', 'text']
+                  : ['text', 'image', 'video', 'audio'];
+    for (const n of state.currentBoard.metadata.nodes) {
+      if (!n.name || !n.id) continue;
+      if (!allowed.includes(n.type)) continue;
+      items.push({ key: n.name, label: n.name, type: n.type, scope: 'board' });
+    }
+    if (state.genKind === 'image' || state.genKind === 'video') {
+      for (const c of state.charactersInfo) {
+        if (state.currentBoard?.kind === 'character' && state.currentBoard.name === c.name) continue;
+        const hasImages = (c.imageNodes || []).length > 0;
+        if (c.characterSheet || hasImages) {
+          items.push({
+            key: c.name,
+            label: c.name + (hasImages && c.characterSheet ? '' : (hasImages ? ' …' : ' · sheet')),
+            type: 'image',
+            scope: 'char',
+            hasImages, hasSheet: !!c.characterSheet,
+          });
+        }
+      }
+    }
+    items = items.filter(s => s.key.toLowerCase().includes(query)).slice(0, 16);
+  }
+
+  mentionState.open = true;
+  mentionState.anchor = cursor - m[0].length;
+  mentionState.items = items;
+  mentionState.selected = 0;
+  popup.innerHTML = '';
+  if (!items.length) {
+    const e = document.createElement('div');
+    e.className = 'empty-msg';
+    e.textContent = dotIdx >= 0 ? 'У персонажа нет картинок с таким именем' : 'Нет совпадений';
+    popup.appendChild(e);
+  } else {
+    items.forEach((s, i) => {
+      const it = document.createElement('div');
+      it.className = 'mit' + (i === 0 ? ' selected' : '');
+      it.dataset.idx = i;
+      const t = document.createElement('span');
+      t.className = `mtype ${s.type}`;
+      t.textContent = s.scope === 'char' ? 'персонаж'
+                    : s.scope === 'char-image' ? `персонаж·${s.charName}`
+                    : s.type;
+      const nm = document.createElement('span');
+      nm.textContent = s.label;
+      it.append(t, nm);
+      it.addEventListener('mousedown', e => { e.preventDefault(); selectMention(i); });
+      popup.appendChild(it);
+    });
+  }
+  popup.classList.remove('hidden');
+}
+
+function closeMentionPopup() {
+  mentionState.open = false;
+  $('mentionPopup').classList.add('hidden');
+}
+
+function selectMention(idx = mentionState.selected) {
+  if (!mentionState.open) return;
+  const item = mentionState.items[idx];
+  if (!item) { closeMentionPopup(); return; }
+  const ta = $('genPrompt');
+  const cursor = ta.selectionStart;
+  const before = ta.value.slice(0, mentionState.anchor);
+  const after  = ta.value.slice(cursor);
+  // Если выбрали персонажа и у него есть картинки — авто-drill: оставляем @name. для дальнейшего ввода
+  let insert;
+  let reopen = false;
+  if (item.scope === 'char' && item.hasImages) {
+    insert = '[@' + item.key + '.';
+    reopen = true;
+  } else {
+    insert = '[@' + (item.key || item.name) + '] ';
+  }
+  ta.value = before + insert + after;
+  const newPos = (before + insert).length;
+  ta.setSelectionRange(newPos, newPos);
+  ta.focus();
+  if (reopen) setTimeout(updateMentionPopup, 0);
+  else closeMentionPopup();
+}
+
+function highlightMention(idx) {
+  const popup = $('mentionPopup');
+  popup.querySelectorAll('.mit').forEach(el => el.classList.remove('selected'));
+  const target = popup.querySelector(`.mit[data-idx="${idx}"]`);
+  if (target) {
+    target.classList.add('selected');
+    target.scrollIntoView({ block: 'nearest' });
+  }
+  mentionState.selected = idx;
+}
+
+$('genPrompt').addEventListener('input', updateMentionPopup);
+$('genPrompt').addEventListener('keyup', e => {
+  if (['ArrowUp','ArrowDown','Enter','Tab','Escape'].includes(e.key)) return;
+  updateMentionPopup();
+});
+$('genPrompt').addEventListener('keydown', e => {
+  if (!mentionState.open) return;
+  if (e.key === 'Escape') { e.preventDefault(); closeMentionPopup(); }
+  else if (e.key === 'ArrowDown') { e.preventDefault(); highlightMention(Math.min(mentionState.selected + 1, mentionState.items.length - 1)); }
+  else if (e.key === 'ArrowUp')   { e.preventDefault(); highlightMention(Math.max(mentionState.selected - 1, 0)); }
+  else if (e.key === 'Enter' || e.key === 'Tab') {
+    if (mentionState.items.length) { e.preventDefault(); selectMention(); }
+  }
+});
+
+// =================== Character settings ===================
+async function loadAllCharactersInfo() {
+  if (!state.filmHandle) return;
+  const chars = await listCharacters(state.filmHandle);
+  const info = [];
+  for (const c of chars) {
+    try {
+      const meta = await loadBoardMetadata(c.handle);
+      const imageNodes = meta.nodes
+        .filter(n => n.type === 'image' && n.file && n.name)
+        .map(n => ({ name: n.name, file: n.file, id: n.id }));
+      info.push({
+        name: c.name,
+        handle: c.handle,
+        ...(meta.character || {}),
+        imageNodes,
+      });
+    } catch {}
+  }
+  state.charactersInfo = info;
+}
+
+// Запомнить тоны для персонажа: дополнить commonTones новыми + сохранить lastTones
+async function rememberCharTones(charNameOrVoiceId, tones) {
+  if (!Array.isArray(tones) || !tones.length || !state.filmHandle) return;
+  const cleaned = tones.map(t => (t || '').trim()).filter(Boolean);
+  if (!cleaned.length) return;
+  let charInfo = state.charactersInfo.find(c => c.name === charNameOrVoiceId);
+  if (!charInfo) charInfo = state.charactersInfo.find(c => c.voice === charNameOrVoiceId);
+  if (!charInfo) return;
+  try {
+    const meta = await loadBoardMetadata(charInfo.handle);
+    const ch = meta.character || {};
+    const existing = Array.isArray(ch.commonTones) ? [...ch.commonTones] : [];
+    const seen = new Set(existing);
+    let added = 0;
+    for (const t of cleaned) if (!seen.has(t)) { existing.push(t); seen.add(t); added++; }
+    ch.commonTones = existing;
+    ch.lastTones = cleaned;
+    meta.character = ch;
+    await saveBoardMetadata(charInfo.handle, {
+      nodes: meta.nodes, connections: meta.connections,
+      view: meta.view, character: meta.character,
+      location: meta.location, timeline: meta.timeline,
+    });
+    charInfo.commonTones = existing;
+    charInfo.lastTones = cleaned;
+    if (added) console.log(`[tones] +${added} → ${charInfo.name}: ${cleaned.join(', ')}`);
+  } catch (e) { console.warn('rememberCharTones failed', e); }
+}
+
+// =================== Locations ===================
+async function loadAllLocationsInfo() {
+  if (!state.filmHandle) return;
+  const locs = await listLocations(state.filmHandle);
+  const info = [];
+  for (const l of locs) {
+    try {
+      const meta = await loadBoardMetadata(l.handle);
+      const imageNodes = meta.nodes
+        .filter(n => n.type === 'image' && n.file && n.name)
+        .map(n => ({ name: n.name, file: n.file, id: n.id }));
+      info.push({
+        name: l.name,
+        handle: l.handle,
+        sheet: meta.location?.sheet || null,
+        imageNodes,
+      });
+    } catch {}
+  }
+  state.locationsInfo = info;
+}
+
+function getImageNodesOnBoard() {
+  if (!state.currentBoard) return [];
+  return state.currentBoard.metadata.nodes
+    .filter(n => n.type === 'image' && n.file)
+    .map(n => ({ name: n.name || n.file, file: n.file, id: n.id }));
+}
+
+async function openCharacterSettings() {
+  if (!state.currentBoard || state.currentBoard.kind !== 'character') return;
+  await loadVoices();
+  const ch = state.currentBoard.metadata.character || {};
+  $('charName').value = state.currentBoard.name;
+  // Voices
+  const voiceSel = $('charVoice');
+  voiceSel.innerHTML = '<option value="">— не выбран —</option>';
+  const genVoiceOpts = $('genVoice').options;
+  for (let i = 0; i < genVoiceOpts.length; i++) {
+    const opt = document.createElement('option');
+    opt.value = genVoiceOpts[i].value;
+    opt.textContent = genVoiceOpts[i].textContent;
+    voiceSel.appendChild(opt);
+  }
+  voiceSel.value = ch.voice || '';
+  // Tones
+  $('charTone').value = ch.tone || '';
+  $('charCommonTones').value = (ch.commonTones || []).join('\n');
+  // Image dropdowns
+  const imgs = getImageNodesOnBoard();
+  for (const selId of ['charAvatar', 'charSheet']) {
+    const sel = $(selId);
+    sel.innerHTML = '<option value="">— не выбран —</option>';
+    for (const im of imgs) {
+      const opt = document.createElement('option');
+      opt.value = im.file;
+      opt.textContent = im.name;
+      sel.appendChild(opt);
+    }
+  }
+  $('charAvatar').value = ch.avatar || '';
+  $('charSheet').value  = ch.characterSheet || '';
+  $('characterModal').classList.remove('hidden');
+}
+
+$('charSettingsBtn').addEventListener('click', openCharacterSettings);
+$('charClose').addEventListener('click', () => $('characterModal').classList.add('hidden'));
+
+$('charSettingsSave').addEventListener('click', async () => {
+  if (!state.currentBoard) return;
+  const voiceSel = $('charVoice');
+  const voiceName = voiceSel.selectedOptions[0]?.textContent || '';
+  const ch = {
+    voice: voiceSel.value || null,
+    voiceName: voiceSel.value ? voiceName : null,
+    tone: $('charTone').value.trim() || null,
+    commonTones: $('charCommonTones').value.split('\n').map(s => s.trim()).filter(Boolean),
+    avatar: $('charAvatar').value || null,
+    characterSheet: $('charSheet').value || null,
+  };
+  state.currentBoard.metadata.character = ch;
+
+  // Переименование папки персонажа если имя поменяли
+  const oldName = state.currentBoard.name;
+  const newName = $('charName').value.trim();
+  if (newName && newName !== oldName) {
+    try {
+      // Сначала сохранить текущие метаданные в старую папку
+      await saveBoardMetadata(state.currentBoard.handle, state.currentBoard.metadata);
+      const charsRoot = await state.filmHandle.getDirectoryHandle(CHAR_DIR);
+      const finalName = await uniqueSubdirName(charsRoot, newName);
+      await moveDirectory(charsRoot, oldName, charsRoot, finalName);
+      const newHandle = await charsRoot.getDirectoryHandle(finalName);
+      state.currentBoard.name = finalName;
+      state.currentBoard.handle = newHandle;
+      state.currentBoard.key = boardKey('character', finalName);
+      $('path').textContent = `${state.filmHandle.name} / ${finalName}`;
+      localStorage.setItem(`lastBoard:${state.filmHandle.name}`,
+        JSON.stringify({ kind: 'character', name: finalName }));
+      await refreshSidebar();
+    } catch (e) {
+      alert('Не удалось переименовать: ' + e.message);
+    }
+  } else {
+    scheduleSave();
+  }
+
+  $('characterModal').classList.add('hidden');
+  await loadAllCharactersInfo();
+});
+
+$('charSheetGenerate').addEventListener('click', async () => {
+  if (!state.currentBoard) return;
+  let imgs = getImageNodesOnBoard();
+  // Если есть выделенные image-ноды — берём только их
+  if (state.selectedNodeIds.size) {
+    const selectedImgs = imgs.filter(im => state.selectedNodeIds.has(im.id));
+    if (selectedImgs.length) imgs = selectedImgs;
+  }
+  if (!imgs.length) { alert('На доске нет картинок для референса'); return; }
+  const refs = imgs.map(im => ({
+    name: im.name, type: 'image', file: im.file, id: im.id,
+  }));
+  const prompt = 'Character sheet of the character: front view, side view, three-quarter view, back view, key facial expressions and full-body poses, neutral background, consistent style and proportions';
+  const spot = findFreeSpot();
+  const node = {
+    id: crypto.randomUUID(),
+    type: 'image',
+    name: 'character-sheet',
+    x: spot.x, y: spot.y,
+    status: 'generating',
+    generated: {
+      kind: 'image', prompt, rawPrompt: prompt,
+      modelKey: 'nano-banana-2', model: 'nano-banana-2',
+      refs: refs.map(r => ({ name: r.name, type: r.type, file: r.file })),
+    },
+  };
+  state.currentBoard.metadata.nodes.push(node);
+  canvas.appendChild(await createNodeEl(node));
+  scheduleSave();
+  $('characterModal').classList.add('hidden');
+  startGenerationJob(node, 'image', prompt, refs, state.currentBoard.handle, state.currentBoard.key, 'nano-banana-2');
+});
+