kingkont 0.7.39 → 0.7.41

package/renderer/settings.js

@@ -0,0 +1,1128 @@
+// renderer/settings.js — Settings modal (двойной клик на ноду): preview, prompt edit, history, regenerate
+//
+// Этот модуль был выделен из index.html (раньше всё было в одном <script>
+// блоке на 9123 строки). Все модули загружаются как plain <script>
+// в одном глобальном scope — поэтому функции/переменные между файлами
+// видят друг друга по именам, без import/export. Порядок загрузки
+// важен: см. <script> теги внизу index.html.
+
+// =================== Settings modal ===================
+let settingsTargetNode = null;
+function showNodeSettings(node) {
+  if (!node.generated) return;
+  settingsTargetNode = node;
+  const g = node.generated;
+  const body = $('settingsBody');
+  const rows = [];
+  const row = (label, val, muted = false) =>
+    `<div class="settings-row"><div class="lbl">${label}</div><div class="val${muted ? ' muted' : ''}">${val}</div></div>`;
+  rows.push(row('Тип', g.kind === 'image' ? 'Картинка' : 'Видео'));
+  rows.push(row('Модель', g.model || '—'));
+  rows.push(row('Промпт (как ввёл)', escapeHtml(g.rawPrompt || '—'), !g.rawPrompt));
+  if (g.prompt && g.prompt !== g.rawPrompt) {
+    rows.push(row('Промпт после @-резолва', escapeHtml(g.prompt)));
+  }
+  if (g.refs?.length) {
+    const chips = g.refs.map(r =>
+      `<span class="chip">@${escapeHtml(r.name)} <span style="color:#888">(${r.type})</span></span>`
+    ).join('');
+    rows.push(`<div class="settings-row"><div class="lbl">Референсы</div><div class="chips">${chips}</div></div>`);
+  }
+  if (g.taskId) rows.push(row('Task ID', g.taskId));
+  if (g.state) rows.push(row('Состояние', g.state));
+  if (node.status === 'error') rows.push(row('Ошибка', escapeHtml(node.error || '—')));
+  body.innerHTML = rows.join('');
+  $('settingsModal').classList.remove('hidden');
+}
+
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"]/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;' }[c]));
+}
+
+$('settingsClose').addEventListener('click', () => {
+  $('settingsModal').classList.add('hidden');
+  settingsTargetNode = null;
+});
+
+$('settingsRegen').addEventListener('click', () => {
+  const node = settingsTargetNode;
+  $('settingsModal').classList.add('hidden');
+  settingsTargetNode = null;
+  if (!node?.generated) return;
+  regenerateNode(node);  // там редактируются ВСЕ поля (промпт, модель, голос)
+});
+
+async function renderNodeBody(node, body) {
+  body.innerHTML = '';
+  if (node.status === 'generating') {
+    const wrap = document.createElement('div');
+    wrap.className = 'gen-pending';
+    const sp = document.createElement('div'); sp.className = 'spinner lg';
+    const STATE_LABELS = {
+      'uploading-refs': 'Загружаю референсы в KIE...',
+      'submitting': 'Отправляю задачу...',
+      'queued': 'В очереди...',
+      'waiting': 'В очереди...',
+      'queuing': 'В очереди...',
+      'generating': 'Модель работает...',
+    };
+    const st = document.createElement('div'); st.className = 'state-text';
+    const sKey = node.generated?.state;
+    st.textContent = STATE_LABELS[sKey] || (sKey ? `Статус: ${sKey}` : 'Генерируется...');
+    const pp = document.createElement('div'); pp.className = 'prompt-preview';
+    pp.textContent = node.generated?.prompt || '';
+    wrap.append(sp, st, pp);
+
+    const btnRow = document.createElement('div');
+    btnRow.style.cssText = 'display:flex; gap:6px; margin-top:8px;';
+    const stopBtn = document.createElement('button');
+    stopBtn.textContent = '⏹ Остановить';
+    stopBtn.style.cssText = 'flex:1; font-size:11px; padding:4px;';
+    stopBtn.addEventListener('mousedown', e => e.stopPropagation());
+    stopBtn.addEventListener('click', e => { e.stopPropagation(); stopJob(node.id); });
+    const restartBtn = document.createElement('button');
+    restartBtn.textContent = '↻ Перезапустить';
+    restartBtn.style.cssText = 'flex:1; font-size:11px; padding:4px;';
+    restartBtn.addEventListener('mousedown', e => e.stopPropagation());
+    restartBtn.addEventListener('click', e => { e.stopPropagation(); restartJob(node.id); });
+    btnRow.appendChild(stopBtn);
+    btnRow.appendChild(restartBtn);
+    wrap.appendChild(btnRow);
+
+    body.appendChild(wrap);
+    return;
+  }
+  if (node.status === 'draft') {
+    const wrap = document.createElement('div');
+    wrap.className = 'gen-pending';
+    const ic = document.createElement('div');
+    ic.style.cssText = 'font-size:36px; opacity:0.7;';
+    ic.textContent = node.type === 'audio' ? '🎙'
+                   : node.type === 'video' ? '🎬'
+                   : node.type === 'image' ? '🖼' : '📝';
+    const st = document.createElement('div');
+    st.className = 'state-text';
+    st.textContent = 'Черновик: подведи входы и запусти';
+    const pp = document.createElement('div');
+    pp.className = 'prompt-preview';
+    pp.textContent = node.generated?.rawPrompt || node.generated?.prompt || '';
+    wrap.append(ic, st, pp);
+    const runBtn = document.createElement('button');
+    runBtn.textContent = '▶ Запустить генерацию';
+    runBtn.className = 'primary';
+    runBtn.style.cssText = 'margin-top:8px; font-size:12px; padding:6px 10px;';
+    runBtn.addEventListener('mousedown', e => e.stopPropagation());
+    runBtn.addEventListener('click', e => { e.stopPropagation(); regenerateNode(node); });
+    wrap.appendChild(runBtn);
+    body.appendChild(wrap);
+    return;
+  }
+  if (node.status === 'error') {
+    const wrap = document.createElement('div');
+    wrap.className = 'gen-error';
+    const errStr = String(node.error || '');
+    const errBlock = document.createElement('div');
+    // Делаем text selectable — для копирования при необходимости.
+    errBlock.style.cssText = 'user-select: text; -webkit-user-select: text; cursor: text; word-break: break-word; margin-bottom: 8px;';
+    errBlock.textContent = errStr || 'Ошибка генерации';
+    wrap.appendChild(errBlock);
+    // Кнопка «Скопировать» — для длинных server-ошибок.
+    if (errStr) {
+      const copyBtn = document.createElement('button');
+      copyBtn.textContent = '📋 Скопировать';
+      copyBtn.style.marginRight = '6px';
+      copyBtn.addEventListener('click', async e => {
+        e.stopPropagation();
+        try {
+          await navigator.clipboard.writeText(errStr);
+          const orig = copyBtn.textContent;
+          copyBtn.textContent = '✓ Скопировано';
+          setTimeout(() => { copyBtn.textContent = orig; }, 1500);
+        } catch {}
+      });
+      wrap.appendChild(copyBtn);
+    }
+    // Кнопка «Войти» — ТОЛЬКО когда сервер прислал 503 «Войдите в KingKont…»
+    // (т.е. реально auth-проблема, а не любая ошибка которая упоминает KingKont).
+    if (/Войдите в KingKont/i.test(errStr)) {
+      const loginBtn = document.createElement('button');
+      loginBtn.textContent = '🔑 Войти';
+      loginBtn.style.marginRight = '6px';
+      loginBtn.addEventListener('click', e => {
+        e.stopPropagation();
+        if (window.appSettings?.openSettingsWindow) {
+          window.appSettings.openSettingsWindow();
+        }
+      });
+      wrap.appendChild(loginBtn);
+    }
+    if (node.generated?.prompt) {
+      const retry = document.createElement('button');
+      retry.textContent = 'Повторить';
+      retry.addEventListener('click', e => {
+        e.stopPropagation();
+        node.status = 'generating';
+        node.error = undefined;
+        scheduleSave();
+        renderNodeBody(node, body);
+        const kind = node.generated.kind;
+        const bH = state.currentBoard.handle;
+        const bK = state.currentBoard.key;
+        if (kind === 'audio') {
+          runTTSJob(node, node.generated.prompt, bH, bK, node.generated.voiceId);
+        } else if (kind === 'text') {
+          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, bH, bK, 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, bH, bK, node.generated.modelKey);
+        }
+      });
+      wrap.appendChild(retry);
+    }
+    body.appendChild(wrap);
+    return;
+  }
+
+  if (node.type === 'text') {
+    const ta = document.createElement('textarea');
+    ta.value = node.text || '';
+    ta.placeholder = 'Текст ноды...';
+    ta.addEventListener('input', () => { node.text = ta.value; scheduleSave(); });
+    ta.addEventListener('mousedown', e => e.stopPropagation());
+    body.appendChild(ta);
+  } else if (['video','audio','image'].includes(node.type) && node.file) {
+    const nodeEl = body.closest('.node');
+    nodeEl?.classList.toggle('image-node', node.type === 'image');
+    nodeEl?.classList.toggle('video-node', node.type === 'video');
+    // Re-render: снимаем старого hydrate-наблюдателя, иначе он может
+    // повторно стрельнуть на старом placeholder который уже удалён.
+    if (nodeEl) { _mediaHydrationObserver.unobserve(nodeEl); nodeEl.__hydrate = null; }
+
+    if (node.type === 'audio') {
+      const fname = document.createElement('div');
+      fname.className = 'filename';
+      fname.textContent = node.file;
+      body.appendChild(fname);
+    }
+    // Lazy-инстанциация media через IntersectionObserver.
+    // Раньше при selectBoard для 50 нод синхронно вычитывали 50 файлов с диска
+    // (resolveBoardFile + getFile + createObjectURL) и вставляли <img>/<video>/<audio>
+    // — браузер сразу декодировал. Теперь только видимые (+rootMargin для plавного
+    // pre-load) реально материализуются.
+    const placeholder = document.createElement('div');
+    placeholder.className = 'media-placeholder';
+    placeholder.textContent = node.type === 'image' ? '🖼' : node.type === 'video' ? '🎬' : '🎙';
+    body.appendChild(placeholder);
+
+    // Для image/video — пробуем показать thumbnail сразу (если он сохранён на диске).
+    // Это асинхронно, но дешёво (5KB jpg vs 2MB исходный) — placeholder ОЧЕНЬ быстро
+    // заменяется на нормальное превью, не дожидаясь IntersectionObserver-а.
+    if ((node.type === 'image' || node.type === 'video') && state.currentBoard) {
+      const bHandle = state.currentBoard.handle;
+      const bKey = state.currentBoard.key;
+      loadThumbnailURL(bHandle, bKey, node.file).then(url => {
+        if (!url) return;
+        if (!placeholder.parentNode) return; // уже заменили на full-media
+        const thumb = document.createElement('img');
+        thumb.src = url;
+        thumb.className = 'media-thumb';
+        thumb.decoding = 'async';
+        thumb.draggable = false;
+        thumb.addEventListener('mousedown', e => e.stopPropagation());
+        placeholder.replaceWith(thumb);
+        // Сохраняем ссылку в nodeEl, чтобы при hydrate заменить на full
+        if (nodeEl) nodeEl.__thumbEl = thumb;
+      });
+    }
+
+    const hydrate = async () => {
+      try {
+        let url = state.currentBoard.urls[node.file];
+        if (!url) {
+          const fh = await resolveBoardFile(state.currentBoard.handle, node.file);
+          url = URL.createObjectURL(await fh.getFile());
+          state.currentBoard.urls[node.file] = url;
+        }
+        let media;
+        if (node.type === 'image') {
+          media = document.createElement('img');
+          media.src = url; media.alt = node.file; media.draggable = false;
+          media.decoding = 'async';
+        } else {
+          media = document.createElement(node.type);
+          media.src = url;
+          if (node.type === 'video') media.controls = true;
+          // preload="none" — заголовки video/audio НЕ читаются пока юзер не запустит play.
+          // Раньше "metadata" грузил chunk для duration/dimensions с каждой ноды на selectBoard.
+          media.preload = 'none';
+        }
+        media.addEventListener('mousedown', e => e.stopPropagation());
+        // Заменяем placeholder ИЛИ ранее показанный thumbnail
+        const target = (nodeEl && nodeEl.__thumbEl && nodeEl.__thumbEl.parentNode)
+                     ? nodeEl.__thumbEl
+                     : placeholder;
+        target.replaceWith(media);
+        if (nodeEl) nodeEl.__thumbEl = null;
+        // В фоне генерируем/обновляем thumbnail для следующего открытия проекта.
+        // Делаем lazy через rAF чтобы не задерживать первое отображение.
+        if (state.currentBoard && (node.type === 'image' || node.type === 'video')) {
+          const bH = state.currentBoard.handle, bK = state.currentBoard.key;
+          requestIdleCallback?.(() => generateThumbnailIfMissing(bH, bK, node, media))
+                             ?? setTimeout(() => generateThumbnailIfMissing(bH, bK, node, media), 1000);
+        }
+        return media;
+      } catch {
+        const m = document.createElement('div');
+        m.className = 'missing';
+        m.textContent = `Файл «${node.file}» не найден`;
+        const target = (nodeEl && nodeEl.__thumbEl && nodeEl.__thumbEl.parentNode) ? nodeEl.__thumbEl : placeholder;
+        target.replaceWith(m);
+        return null;
+      }
+    };
+
+    let mediaPromise = null;
+    const ensureMedia = () => mediaPromise || (mediaPromise = hydrate());
+    // Когда .node попадает в (расширенный) viewport — гидрируем фоном.
+    // Если юзер сразу нажал play — ensureMedia() вызовется через wire-handler.
+    if (nodeEl) {
+      _mediaHydrationObserver.observe(nodeEl);
+      nodeEl.__hydrate = ensureMedia;
+    }
+
+    if (node.type === 'video') {
+      const speedRow = document.createElement('div');
+      speedRow.className = 'audio-speed';
+      const savedRate = parseFloat(localStorage.getItem('mediaPlaybackRate') || '1');
+      for (const s of [0.5, 0.75, 1, 1.25, 1.5, 2]) {
+        const btn = document.createElement('button');
+        btn.textContent = s + '×';
+        if (s === savedRate) btn.classList.add('active');
+        btn.addEventListener('mousedown', e => e.stopPropagation());
+        btn.addEventListener('click', async e => {
+          e.stopPropagation();
+          const media = await ensureMedia();
+          if (!media) return;
+          media.playbackRate = s;
+          localStorage.setItem('mediaPlaybackRate', String(s));
+          speedRow.querySelectorAll('button').forEach(b => b.classList.remove('active'));
+          btn.classList.add('active');
+        });
+        speedRow.appendChild(btn);
+      }
+      body.appendChild(speedRow);
+    }
+    if (node.type === 'audio') {
+      const playRow = document.createElement('div');
+      playRow.style.cssText = 'margin-top: 6px;';
+      const playBtn = document.createElement('button');
+      playBtn.style.cssText = 'width: 100%; font-size: 14px; padding: 6px;';
+      playBtn.textContent = '▶ Play';
+      playBtn.addEventListener('mousedown', e => e.stopPropagation());
+      playBtn.addEventListener('click', async e => {
+        e.stopPropagation();
+        const media = await ensureMedia();
+        if (!media) return;
+        const sync = () => { playBtn.textContent = media.paused ? '▶ Play' : '⏸ Pause'; };
+        // Wire-up sync только при первом play (lazy).
+        if (!media.__wired) {
+          media.__wired = true;
+          media.addEventListener('play', sync);
+          media.addEventListener('pause', sync);
+          media.addEventListener('ended', sync);
+        }
+        if (media.paused) media.play().catch(()=>{}); else media.pause();
+        sync();
+      });
+      playRow.appendChild(playBtn);
+      body.appendChild(playRow);
+    }
+  }
+}
+
+function attachAnchor(node, el, anchor) {
+  anchor.addEventListener('mousedown', e => {
+    e.preventDefault();
+    e.stopPropagation();
+    anchor.classList.add('dragging');
+    const svg = $('connectionsSvg');
+    const tmp = document.createElementNS(SVG_NS, 'path');
+    tmp.setAttribute('class', 'temp-line');
+    svg.appendChild(tmp);
+
+    const start = nodeAnchorOut(node);
+    const update = (clientX, clientY) => {
+      const rect = canvas.getBoundingClientRect();
+      const x = (clientX - rect.left) / state.zoom;
+      const y = (clientY - rect.top)  / state.zoom;
+      tmp.setAttribute('d', bezierPath(start.x, start.y, x, y));
+    };
+    update(e.clientX, e.clientY);
+
+    const onMove = ev => update(ev.clientX, ev.clientY);
+    const onUp = ev => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      tmp.remove();
+      anchor.classList.remove('dragging');
+      // Куда отпустили?
+      const target = document.elementFromPoint(ev.clientX, ev.clientY);
+      const targetEl = target?.closest('.node');
+      if (targetEl && targetEl.dataset.id !== node.id) {
+        addConnection(node.id, targetEl.dataset.id);
+      } else {
+        // Пустое место — показать меню «что генерировать» с привязкой к node.
+        showAnchorDropMenu(node, ev.clientX, ev.clientY);
+      }
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+}
+
+// Показать addMenu рядом с курсором с привязкой к fromNode. Юзер выбирает
+// тип генерации; дальше тот же flow что openGenerateForRef, но с заранее
+// заданным kind.
+function showAnchorDropMenu(fromNode, clientX, clientY) {
+  state.pendingConnectionFrom = fromNode.id;
+  state.addMenuPos = { clientX, clientY };
+  state.anchorFromNode = fromNode;
+  const menu = $('addMenu');
+  positionFloatingMenu(menu, clientX, clientY);
+  // Закрытие при клике ВНЕ меню. Проверяем target — клики по пунктам пропускаем
+  // (иначе меню скрывается до того как click на кнопке успеет отработать).
+  setTimeout(() => document.addEventListener('mousedown', closeAddMenuOnOutside, true), 0);
+}
+function closeAddMenuOnOutside(e) {
+  const menu = $('addMenu');
+  if (menu.contains(e.target)) return; // клик по пункту — пусть кнопка сработает
+  document.removeEventListener('mousedown', closeAddMenuOnOutside, true);
+  menu.classList.add('hidden');
+  state.anchorFromNode = null;
+}
+
+async function openGenerateForRef(fromNode, clientX, clientY, forceKind) {
+  // forceKind — если из anchor-drop меню юзер выбрал конкретный тип.
+  if (forceKind) {
+    if (!await ensureApiKey(forceKind)) return;
+    state.genKind = forceKind;
+    document.querySelectorAll('#genModal [data-kind]').forEach(b =>
+      b.classList.toggle('active', b.dataset.kind === forceKind));
+    $('imageModelRow').style.display = forceKind === 'image' ? '' : 'none';
+
+    $('imageOptionsRow').style.display = forceKind === 'image' ? '' : 'none';
+    $('videoOptionsRow').style.display = forceKind === 'video' ? '' : 'none';
+
+    $('videoModelRow').style.display = forceKind === 'video' ? '' : 'none';
+    $('voiceRow').style.display      = forceKind === 'audio' ? '' : 'none';
+
+    $('ttsModelRow').style.display      = forceKind === 'audio' ? '' : 'none';
+    $('tonesRow').style.display      = forceKind === 'audio' ? '' : 'none';
+    const titleEl = $('genTitle');
+    if (titleEl) {
+      titleEl.textContent =
+        forceKind === 'image' ? 'Сгенерировать картинку' :
+        forceKind === 'video' ? 'Сгенерировать видео' :
+        forceKind === 'audio' ? 'Сгенерировать голос' : 'Сгенерировать ноду';
+    }
+    if (forceKind === 'audio') loadVoices();
+  }
+  state.pendingConnectionFrom = fromNode.id;
+  if (clientX != null) state.addMenuPos = { clientX, clientY };
+  $('genStatus').textContent = '';
+  $('genStatus').className = 'status';
+  $('genSubmit').disabled = false;
+
+  resetPicks();
+  // НЕ вызываем presetPicksForBoard() — иначе при вытягивании ноды из ноды
+  // на доске персонажа авто-подставится этот персонаж в picked-список,
+  // а юзер ожидает чистую форму (он явно не выбирал персонажа).
+  renderCharsPickChips();
+  renderLocPickSelect();
+  syncCharLocRows();
+
+  // Если источник — картинка/видео, кладём его в "Исходный кадр".
+  // Для VIDEO thumbnail НЕ показываем (юзер просил), только имя.
+  if ((fromNode.type === 'image' || fromNode.type === 'video') && fromNode.file) {
+    state.sourceRef = {
+      file: fromNode.file,
+      type: fromNode.type,
+      boardHandle: state.currentBoard.handle,
+      use: true,
+    };
+    if (fromNode.type === 'image') {
+      let thumbUrl = state.currentBoard.urls[fromNode.file];
+      if (!thumbUrl) {
+        try {
+          const fh = await resolveBoardFile(state.currentBoard.handle, fromNode.file);
+          thumbUrl = URL.createObjectURL(await fh.getFile());
+          state.currentBoard.urls[fromNode.file] = thumbUrl;
+        } catch {}
+      }
+      $('sourceRefThumb').src = thumbUrl || '';
+      $('sourceRefThumb').style.display = '';
+    } else {
+      // video — без thumbnail, чтобы не дёргать декодер видео ради превьюшки.
+      $('sourceRefThumb').src = '';
+      $('sourceRefThumb').style.display = 'none';
+    }
+    $('sourceRefName').textContent = fromNode.name || fromNode.file.split('/').pop();
+    applySourceRefVisuals();
+    $('genPrompt').value = '';
+  } else {
+    state.sourceRef = null;
+    $('genPrompt').value = '[@' + nodeRefKey(fromNode) + '] ';
+  }
+  syncSourceRefRow();
+
+  closeMentionPopup();
+  $('genModal').classList.remove('hidden');
+  setTimeout(() => {
+    const ta = $('genPrompt');
+    ta.focus();
+    ta.setSelectionRange(ta.value.length, ta.value.length);
+  }, 50);
+}
+
+function attachResize(el, node, handle) {
+  handle.addEventListener('mousedown', e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const startX = e.clientX, startY = e.clientY;
+    const startW = el.offsetWidth, startH = el.offsetHeight;
+    const onMove = ev => {
+      const w = Math.max(180, startW + (ev.clientX - startX) / state.zoom);
+      const h = Math.max(80,  startH + (ev.clientY - startY) / state.zoom);
+      node.width = w;
+      node.height = h;
+      el.style.width = w + 'px';
+      el.style.height = h + 'px';
+    };
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      scheduleSave();
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+}
+
+function attachDrag(el, node) {
+  const header = el.querySelector('.node-header');
+  header.addEventListener('mousedown', e => {
+    if (e.target.closest('.delete')) return;
+    // Multi-select c модификаторами — без drag
+    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      toggleSelection(node.id);
+      renderSelection();
+      return;
+    }
+    // Если кликнули по невыделенной — заменить выделение на эту одну
+    if (!state.selectedNodeIds.has(node.id)) {
+      clearSelection();
+      state.selectedNodeIds.add(node.id);
+      renderSelection();
+    }
+    e.preventDefault();
+    const startX = e.clientX, startY = e.clientY;
+    const origX = node.x, origY = node.y;
+    el.classList.add('selected');
+    canvas.appendChild(el);
+    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);
+    }
+
+    // Multi-drag: если выделено несколько нод и кликнули по одной из них —
+    // двигаем всю группу с одинаковым delta. dragTargets: { node, el, origX, origY }.
+    const isMulti = state.selectedNodeIds.size > 1 && state.selectedNodeIds.has(node.id);
+    const dragTargets = isMulti
+      ? arr.filter(n => state.selectedNodeIds.has(n.id)).map(n => ({
+          node: n,
+          el: canvas.querySelector(`.node[data-id="${n.id}"]`),
+          origX: n.x,
+          origY: n.y,
+        })).filter(t => t.el)
+      : [{ node, el, origX, origY }];
+    if (isMulti) {
+      for (const t of dragTargets) t.el.classList.add('selected');
+    }
+
+    let dragInitialized = false;     // снято на 1-м move ≥ 4px (избегаем «ложных» переносов)
+    let lastTimelineHover = null;    // {trackEl, time} — чтобы рисовать индикатор drop
+    let nodePosChanged = false;      // была ли реальная мутация node.x/y
+    const dropMarker = (() => {
+      const m = document.createElement('div');
+      m.style.cssText = 'position:absolute; top:0; bottom:0; width:2px; background:#5aa8ff; pointer-events:none; z-index:1000; box-shadow:0 0 6px #5aa8ff;';
+      m.style.display = 'none';
+      return m;
+    })();
+    const onMove = ev => {
+      const dx = ev.clientX - startX, dy = ev.clientY - startY;
+      if (!dragInitialized && Math.hypot(dx, dy) < 4) return;
+      dragInitialized = true;
+      // Проверяем — курсор над таймлайном?
+      const tlTrackEl = document.elementsFromPoint(ev.clientX, ev.clientY)
+        .find(n => n.classList?.contains('timeline-track'));
+      const isMedia = ['image','video','audio'].includes(node.type) && node.file;
+      // Drop-on-timeline для multi-drag не имеет смысла — отключаем.
+      if (tlTrackEl && isMedia && !isMulti) {
+        const kind = tlTrackEl.dataset.trackKind;
+        const compat = (kind === 'video' && (node.type === 'video' || node.type === 'image'))
+                    || (kind === 'audio' && node.type === 'audio');
+        if (compat) {
+          el.classList.add('dragging-to-timeline');
+          const clipsRow = tlTrackEl.querySelector('.track-clips');
+          if (clipsRow) {
+            const r = clipsRow.getBoundingClientRect();
+            const xLocal = ev.clientX - r.left;
+            clipsRow.appendChild(dropMarker);
+            dropMarker.style.left = Math.max(0, xLocal) + 'px';
+            dropMarker.style.display = 'block';
+            const time = Math.max(0, xLocal / state.timelineZoom);
+            lastTimelineHover = { track: kind, trackId: tlTrackEl.dataset.trackId, time };
+          }
+          // Возвращаем ноду на исходную позицию визуально
+          el.style.left = origX + 'px';
+          el.style.top  = origY + 'px';
+          return;
+        }
+      }
+      el.classList.remove('dragging-to-timeline');
+      dropMarker.style.display = 'none';
+      lastTimelineHover = null;
+      nodePosChanged = true;
+      const dxNode = (ev.clientX - startX) / state.zoom;
+      const dyNode = (ev.clientY - startY) / state.zoom;
+      for (const t of dragTargets) {
+        t.node.x = Math.max(0, t.origX + dxNode);
+        t.node.y = Math.max(0, t.origY + dyNode);
+        t.el.style.left = t.node.x + 'px';
+        t.el.style.top  = t.node.y + 'px';
+      }
+      renderConnections();
+    };
+    const onUp = async () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      for (const t of dragTargets) t.el.classList.remove('selected');
+      el.classList.remove('dragging-to-timeline');
+      dropMarker.remove();
+      if (lastTimelineHover) {
+        // Drop ноды как клипа на таймлайн
+        try {
+          pushHistory('Добавление клипа из ноды');
+          await addNodeToTimelineAt(node, lastTimelineHover.trackId, lastTimelineHover.time);
+        } catch (err) {
+          console.error('drop node→tl failed', err);
+          alert('Не удалось положить ноду на таймлайн: ' + (err?.message || err));
+        }
+        // Восстановить позицию ноды (мы её и не трогали, но на всякий случай)
+        node.x = origX; node.y = origY;
+        el.style.left = origX + 'px';
+        el.style.top  = origY + 'px';
+        return;
+      }
+      if (nodePosChanged) {
+        // Реальное перемещение по холсту — фиксируем в history (snapshot ДО был неявно
+        // нужен, но мы не хотим засорять историю каждым jitter'ом). Пишем после move:
+        // origX/origY это snapshot для "одной операции move".
+        // Используем patched approach: добавим мини-snapshot в past руками.
+        const h = _getHistory();
+        if (h) {
+          // Снимаем перед-snapshot (без позиции — нет; делаем дешёвый: меняем x/y у копии)
+          const before = captureScene();
+          // НО captureScene уже захватил уже-перемещённую позицию, поэтому "до" = текущая; не годится.
+          // Откатываемся к простому шагу: берём snapshot уже после, и при undo просто
+          // запоминаем дельту. Самое простое — захватить ДО мутации в onMove.
+          // Чтобы не усложнять — оставим перетаскивание ноды по холсту вне history (как было).
+        }
+        scheduleSave();
+      }
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  });
+}
+
+// Добавить ноду как клип в указанную дорожку с ripple-вставкой по времени
+async function addNodeToTimelineAt(node, trackId, time) {
+  const tl = getTimeline();
+  if (!tl) return;
+  const target = tl.tracks.find(t => t.id === trackId);
+  if (!target) return;
+  const newClip = {
+    id: crypto.randomUUID(),
+    nodeId: node.id,
+    type: node.type,
+    file: node.file,
+    name: node.name || (node.file || '').split('/').pop(),
+    duration: defaultClipDuration(node),
+    start: 0,
+  };
+  if (target.kind === 'video') {
+    target.clips.push(newClip);
+    rippleInsertClip(target, newClip, target, Math.max(0, +time || 0));
+  } else {
+    newClip.start = Math.max(0, +time || 0);
+    target.clips.push(newClip);
+  }
+  scheduleSave();
+  $('timelinePanel').classList.remove('hidden');
+  await renderTimeline();
+}
+
+async function deleteNode(node, el) {
+  const board = state.currentBoard;
+  if (!board) return;
+  const boardHandle = board.handle;
+  // Проверяем — есть ли нода в таймлайне; если да — спрашиваем подтверждение
+  let timelineRefs = 0;
+  if (board.metadata.timeline?.tracks) {
+    for (const t of board.metadata.timeline.tracks) {
+      for (const c of t.clips) {
+        if (c.nodeId === node.id || c.file === node.file) timelineRefs++;
+      }
+    }
+  }
+  if (timelineRefs > 0) {
+    const ok = confirm(`Эта нода используется в таймлайне (${timelineRefs} клип${timelineRefs === 1 ? '' : 'ов'}). Удалить вместе с клипами?`);
+    if (!ok) return;
+  }
+  // Snapshot ДО мутации — чтобы undo вернул всё как было.
+  const snap = captureScene();
+  const movedFiles = [];
+  if (node.file) {
+    if (board.urls[node.file]) { URL.revokeObjectURL(board.urls[node.file]); delete board.urls[node.file]; }
+    try {
+      const delDir = await boardHandle.getDirectoryHandle('_deleted', { create: true });
+      const srcFh = await resolveBoardFile(boardHandle, node.file);
+      const file = await srcFh.getFile();
+      const baseName = node.file.split('/').pop();
+      const movedFilename = await uniqueName(delDir, baseName);
+      await writeFile(delDir, movedFilename, file);
+      await removeBoardFile(boardHandle, node.file);
+      movedFiles.push({ originalPath: node.file, movedFilename });
+    } catch (e) { console.error('move to _deleted failed', e); }
+  }
+  // Удаляем клипы таймлайна, которые ссылаются на эту ноду / файл.
+  if (board.metadata.timeline?.tracks) {
+    let changed = false;
+    for (const t of board.metadata.timeline.tracks) {
+      const before = t.clips.length;
+      t.clips = t.clips.filter(c => c.nodeId !== node.id && c.file !== node.file);
+      if (t.clips.length !== before) changed = true;
+    }
+    if (changed && !$('timelinePanel').classList.contains('hidden')) renderTimeline();
+  }
+  board.metadata.nodes = board.metadata.nodes.filter(n => n.id !== node.id);
+  const removedConns = (board.metadata.connections || []).filter(c => c.from === node.id || c.to === node.id);
+  if (removedConns.length) {
+    board.metadata.connections = board.metadata.connections.filter(c => c.from !== node.id && c.to !== node.id);
+    renderConnections();
+  }
+  if (el) el.remove();
+  // Записываем history ПОСЛЕ — но snapshot был снят ДО мутации
+  const h = _getHistory();
+  if (h) {
+    h.past.push({ ts: Date.now(), label: 'Удаление ноды', snap, movedFiles });
+    if (h.past.length > MAX_HISTORY) h.past.shift();
+    h.future.length = 0;
+  }
+  scheduleSave();
+}
+
+// Удалить все выбранные ноды одним действием с поддержкой undo на уровне сцены
+async function deleteSelectedNodes() {
+  const board = state.currentBoard;
+  if (!board || !state.selectedNodeIds.size) return;
+  const ids = new Set(state.selectedNodeIds);
+  const nodesToDelete = board.metadata.nodes.filter(n => ids.has(n.id));
+  if (!nodesToDelete.length) return;
+
+  // Сколько клипов на таймлайне ссылается на эти ноды/файлы
+  let timelineRefs = 0;
+  if (board.metadata.timeline?.tracks) {
+    const filesSet = new Set(nodesToDelete.map(n => n.file).filter(Boolean));
+    for (const t of board.metadata.timeline.tracks) {
+      for (const c of t.clips) {
+        if (ids.has(c.nodeId) || (c.file && filesSet.has(c.file))) timelineRefs++;
+      }
+    }
+  }
+  if (timelineRefs > 0) {
+    const ok = confirm(`${nodesToDelete.length} нод. Используются в таймлайне (${timelineRefs} клип${timelineRefs === 1 ? '' : 'ов'}). Удалить вместе с клипами?`);
+    if (!ok) return;
+  } else if (nodesToDelete.length > 1) {
+    if (!confirm(`Удалить ${nodesToDelete.length} нод?`)) return;
+  }
+
+  // Снимок сцены ДО — для undo
+  const snapshot = JSON.stringify({
+    nodes: board.metadata.nodes,
+    connections: board.metadata.connections || [],
+    timeline: board.metadata.timeline || null,
+    character: board.metadata.character || null,
+    location: board.metadata.location || null,
+  });
+
+  // Перемещаем файлы в _deleted, фиксируем мэппинг для восстановления
+  const movedFiles = [];
+  for (const node of nodesToDelete) {
+    if (!node.file) continue;
+    if (board.urls[node.file]) {
+      URL.revokeObjectURL(board.urls[node.file]);
+      delete board.urls[node.file];
+    }
+    try {
+      const delDir = await board.handle.getDirectoryHandle('_deleted', { create: true });
+      const srcFh = await resolveBoardFile(board.handle, node.file);
+      const file = await srcFh.getFile();
+      const baseName = node.file.split('/').pop();
+      const movedFilename = await uniqueName(delDir, baseName);
+      await writeFile(delDir, movedFilename, file);
+      await removeBoardFile(board.handle, node.file);
+      movedFiles.push({ originalPath: node.file, movedFilename });
+    } catch (e) { console.error('move to _deleted failed', node.file, e); }
+  }
+
+  // Чистим nodes / connections / timeline-клипы
+  board.metadata.nodes = board.metadata.nodes.filter(n => !ids.has(n.id));
+  board.metadata.connections = (board.metadata.connections || [])
+    .filter(c => !ids.has(c.from) && !ids.has(c.to));
+  if (board.metadata.timeline?.tracks) {
+    const filesSet = new Set(nodesToDelete.map(n => n.file).filter(Boolean));
+    for (const t of board.metadata.timeline.tracks) {
+      t.clips = t.clips.filter(c => !ids.has(c.nodeId) && !(c.file && filesSet.has(c.file)));
+    }
+  }
+
+  // DOM cleanup
+  for (const id of ids) {
+    const el = canvas.querySelector(`.node[data-id="${id}"]`);
+    if (el) el.remove();
+  }
+  state.selectedNodeIds.clear();
+  renderConnections();
+  if (!$('timelinePanel').classList.contains('hidden')) renderTimeline();
+  scheduleSave();
+
+  // history записываем здесь — snapshot был снят ДО мутации
+  const h = _getHistory();
+  if (h) {
+    h.past.push({ ts: Date.now(), label: 'Удаление нод', snap: snapshot, movedFiles });
+    if (h.past.length > MAX_HISTORY) h.past.shift();
+    h.future.length = 0;
+  }
+}
+
+document.addEventListener('keydown', async e => {
+  const mod = e.metaKey || e.ctrlKey;
+  const tag = (e.target?.tagName || '').toLowerCase();
+  const inText = tag === 'textarea' || tag === 'input';
+
+  // Zoom shortcuts (работают даже в инпутах — это естественно)
+  if (mod && (e.key === '=' || e.key === '+')) { e.preventDefault(); applyZoom(state.zoom * 1.25); return; }
+  if (mod && e.key === '-')                    { e.preventDefault(); applyZoom(state.zoom / 1.25); return; }
+  if (mod && e.key === '0')                    { e.preventDefault(); applyZoom(1); return; }
+
+  // Undo (Cmd+Z) / Redo (Cmd+Shift+Z или Cmd+Y) — только не в текстовых полях
+  if (mod && e.key.toLowerCase() === 'z' && !e.shiftKey) {
+    if (inText) return;
+    e.preventDefault();
+    await undo();
+    return;
+  }
+  if (mod && ((e.key.toLowerCase() === 'z' && e.shiftKey) || e.key.toLowerCase() === 'y')) {
+    if (inText) return;
+    e.preventDefault();
+    await redo();
+    return;
+  }
+  // Backspace/Delete — удалить выделенные ноды холста или клипы таймлайна
+  if ((e.key === 'Backspace' || e.key === 'Delete') && !inText && !mod && state.currentBoard) {
+    if (state.selectedClipIds.size) {
+      e.preventDefault();
+      await deleteSelectedClips();
+      return;
+    }
+    if (state.selectedNodeIds.size) {
+      e.preventDefault();
+      await deleteSelectedNodes();
+      return;
+    }
+  }
+  // Cmd+G / Cmd+Shift+G — группировать / разгруппировать выделенные клипы таймлайна
+  if (mod && e.key.toLowerCase() === 'g' && !inText) {
+    const tl = state.currentBoard?.metadata?.timeline;
+    if (!tl?.tracks) return;
+    if (e.shiftKey) {
+      // Разгруппировать все группы среди выделения
+      if (!state.selectedClipIds.size) return;
+      e.preventDefault();
+      const groupsToBreak = new Set();
+      for (const id of state.selectedClipIds) {
+        const f = findClipById(tl, id);
+        if (f?.clip.groupId) groupsToBreak.add(f.clip.groupId);
+      }
+      for (const t of tl.tracks) {
+        for (const c of t.clips) {
+          if (c.groupId && groupsToBreak.has(c.groupId)) delete c.groupId;
+        }
+      }
+      scheduleSave();
+      renderTimeline();
+      return;
+    } else {
+      if (state.selectedClipIds.size < 2) return;
+      e.preventDefault();
+      const gid = crypto.randomUUID();
+      for (const id of state.selectedClipIds) {
+        const f = findClipById(tl, id);
+        if (f) f.clip.groupId = gid;
+      }
+      scheduleSave();
+      renderTimeline();
+      return;
+    }
+  }
+  // Cmd+C / Cmd+V — копировать/вставить ноды (включая между досками)
+  if (mod && e.key.toLowerCase() === 'c' && !e.shiftKey && !inText) {
+    // Приоритет: выделение на таймлайне → выделенные ноды на холсте
+    if (state.selectedClipIds.size) {
+      e.preventDefault();
+      await copyTimelineClipsToClipboard([...state.selectedClipIds]);
+      return;
+    }
+    if (state.selectedTrackIds.size) {
+      const tl = getTimeline();
+      const ids = [];
+      for (const t of (tl?.tracks || [])) {
+        if (state.selectedTrackIds.has(t.id)) for (const c of t.clips) ids.push(c.id);
+      }
+      if (ids.length) {
+        e.preventDefault();
+        await copyTimelineClipsToClipboard(ids);
+        return;
+      }
+    }
+    if (state.selectedNodeIds.size) {
+      e.preventDefault();
+      await copySelectedNodes();
+    }
+  }
+  if (mod && e.key.toLowerCase() === 'v' && !e.shiftKey && !inText && state.clipboard?.length) {
+    e.preventDefault();
+    // Если буфер содержит клипы и фокус на таймлайне → вставить туда
+    const tl = getTimeline();
+    const cb = state.clipboard;
+    const cbHasMedia = cb.some(it => ['image','video','audio'].includes(it.node?.type));
+    const focusOnTimeline = !!document.activeElement?.closest?.('#timelinePanel');
+    if (focusOnTimeline && tl?.tracks && cbHasMedia) {
+      const isAudio = cb.every(it => it.node?.type === 'audio');
+      const wantedKind = isAudio ? 'audio' : 'video';
+      const target = tl.tracks.find(t => t.kind === wantedKind) || tl.tracks[0];
+      if (target) {
+        pushHistory('Вставка на таймлайн');
+        await pasteClipboardToTimeline(target, state.playheadTime || 0);
+        return;
+      }
+    }
+    pushHistory('Вставка нод');
+    await pasteClipboardNodes();
+  }
+  // Cmd+X — вырезать (как copy + удалить)
+  if (mod && e.key.toLowerCase() === 'x' && !e.shiftKey && !inText) {
+    if (state.selectedClipIds.size) {
+      e.preventDefault();
+      await copyTimelineClipsToClipboard([...state.selectedClipIds]);
+      await deleteSelectedClips();
+      return;
+    }
+    if (state.selectedNodeIds.size) {
+      e.preventDefault();
+      await copySelectedNodes();
+      await deleteSelectedNodes();
+      return;
+    }
+  }
+});
+
+// Пробел в capture-фазе — обходит native space на <video controls>
+window.addEventListener('keydown', e => {
+  if (e.code !== 'Space' && e.key !== ' ') return;
+  if (e.metaKey || e.ctrlKey || e.altKey) return;
+  const tag = (e.target?.tagName || '').toLowerCase();
+  if (tag === 'textarea' || tag === 'input' || tag === 'select') return;
+  if (e.target.isContentEditable) return;
+  if ($('timelinePanel').classList.contains('hidden')) return;
+  e.preventDefault();
+  e.stopImmediatePropagation();
+  if (e.target.tagName === 'VIDEO') e.target.blur();
+  $('timelinePlay').click();
+}, true);
+
+async function copySelectedNodes() {
+  if (!state.currentBoard || !state.selectedNodeIds.size) return;
+  state.clipboard = [];
+  state.clipboardPasteCount = 0;     // сброс «накапливающего» сдвига
+  state.clipboardSourceBoardKey = state.currentBoard.key;
+  for (const id of state.selectedNodeIds) {
+    const n = state.currentBoard.metadata.nodes.find(x => x.id === id);
+    if (!n) continue;
+    let blob = null, textContent = null;
+    if (n.type === 'text') {
+      textContent = n.text || '';
+    } else if (n.file) {
+      try {
+        const fh = await resolveBoardFile(state.currentBoard.handle, n.file);
+        blob = await fh.getFile();
+      } catch {}
+    }
+    state.clipboard.push({ node: { ...n }, blob, textContent });
+  }
+  console.log(`Скопировано в буфер: ${state.clipboard.length} нод`);
+}
+
+// Скопировать одну ноду в буфер (для ПКМ → "Скопировать")
+async function copyNodeToClipboard(node) {
+  if (!state.currentBoard) return;
+  let blob = null, textContent = null;
+  if (node.type === 'text') {
+    textContent = node.text || '';
+  } else if (node.file) {
+    try {
+      const fh = await resolveBoardFile(state.currentBoard.handle, node.file);
+      blob = await fh.getFile();
+    } catch {}
+  }
+  state.clipboard = [{ node: { ...node }, blob, textContent }];
+  state.clipboardPasteCount = 0;
+  state.clipboardSourceBoardKey = state.currentBoard.key;
+  console.log(`В буфер: ${node.name || node.id}`);
+}
+
+// Заменить контент текущей ноды содержимым из буфера (текущее уходит в history)
+async function replaceNodeFromClipboard(node) {
+  if (!state.currentBoard || !state.clipboard?.length) return;
+  const item = state.clipboard[0];
+  const src = item.node;
+  // Текущее состояние ноды → history
+  if (!Array.isArray(node.history) || !node.history.length) {
+    node.history = [{
+      file: node.file,
+      generated: node.generated ? { ...node.generated } : undefined,
+      status: undefined, error: undefined,
+    }];
+    node.historyIndex = 0;
+  } else {
+    syncHistorySlot(node);
+  }
+  // Сохраняем файл из буфера в текущей доске
+  let newFile = null;
+  if (src.type === 'text') {
+    const dir = await getOrCreateBoardSubdir(state.currentBoard.handle, 'texts');
+    const baseName = await uniqueName(dir, (src.name || 'text') + '.md');
+    await writeFile(dir, baseName, item.textContent || '');
+    newFile = `texts/${baseName}`;
+    node.text = item.textContent || '';
+  } else if (item.blob) {
+    const sub = boardSubdirForType(src.type);
+    const baseName = src.file ? src.file.split('/').pop() : `replaced-${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 {
+    alert('В буфере нет файла для замены.');
+    return;
+  }
+  const oldFile = node.file;
+  node.type = src.type;
+  node.file = newFile;
+  node.generated = src.generated ? { ...src.generated } : undefined;
+  node.status = undefined;
+  node.error = undefined;
+  // Новая history-запись и переход на неё
+  node.history.push({
+    file: newFile,
+    generated: node.generated ? { ...node.generated } : undefined,
+    status: undefined, error: undefined,
+  });
+  node.historyIndex = node.history.length - 1;
+  // Обновить клипы таймлайна, ссылающиеся на ноду
+  if (oldFile !== newFile) syncTimelineClipsForNode(node);
+  scheduleSave();
+  await refreshNodeDOM(node.id);
+  refreshTimelineForNode(node.id);
+}
+
+async function pasteClipboardNodes() {
+  if (!state.currentBoard || !state.clipboard?.length) return;
+  const STEP = 30;
+  const newIds = [];
+
+  // Накапливающий сдвиг: каждый Cmd+V увеличивает offset на STEP — копии
+  // ложатся «лесенкой» вниз-вправо от оригинала, не друг на друга.
+  state.clipboardPasteCount = (state.clipboardPasteCount || 0) + 1;
+  const offset = STEP * state.clipboardPasteCount;
+
+  // Bbox оригиналов — нужен для cross-board paste, чтобы группа не теряла форму.
+  let minX = Infinity, minY = Infinity;
+  for (const it of state.clipboard) {
+    if (it.node.x < minX) minX = it.node.x;
+    if (it.node.y < minY) minY = it.node.y;
+  }
+
+  // Если paste идёт в ту же доску, где копировали — кладём рядом с оригиналами
+  // (oldX + offset, oldY + offset). При cross-board — переносим bbox в видимую область.
+  const sameBoard = state.clipboardSourceBoardKey === state.currentBoard.key;
+  const baseX = sameBoard ? offset
+    : (canvasWrap.scrollLeft / state.zoom + 80 - minX);
+  const baseY = sameBoard ? offset
+    : (canvasWrap.scrollTop  / state.zoom + 80 - minY);
+
+  for (const item of state.clipboard) {
+    const oldNode = item.node;
+    const id = crypto.randomUUID();
+    let newFile = null;
+    if (oldNode.type === 'text') {
+      const dir = await getOrCreateBoardSubdir(state.currentBoard.handle, 'texts');
+      const baseName = await uniqueName(dir, (oldNode.name || 'text') + '.md');
+      await writeFile(dir, baseName, item.textContent || '');
+      newFile = `texts/${baseName}`;
+    } else if (item.blob) {
+      const sub = boardSubdirForType(oldNode.type);
+      const baseName = oldNode.file ? oldNode.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;
+    }
+    const newNode = {
+      ...oldNode, id,
+      file: newFile,
+      x: oldNode.x + baseX,
+      y: oldNode.y + baseY,
+      // не копируем job-state и историю
+      status: undefined, error: undefined,
+      history: undefined, historyIndex: undefined,
+    };
+    if (oldNode.type === 'text') newNode.text = item.textContent || '';
+    state.currentBoard.metadata.nodes.push(newNode);
+    canvas.appendChild(await createNodeEl(newNode));
+    newIds.push(id);
+  }
+  clearSelection();
+  for (const id of newIds) state.selectedNodeIds.add(id);
+  renderSelection();
+  scheduleSave();
+}
+