kingkont 0.6.0 → 0.6.2

package/README.md

@@ -82,3 +82,4 @@ npm install
 npm start              # обычный dev-запуск Electron
 npm run dist           # собрать .dmg (mac) / .exe (win) / .AppImage (linux)
 ```
+# kingkont

package/index.html

@@ -200,18 +200,26 @@
 
   .canvas-wrap {
     flex: 1; position: relative; overflow: auto; background: #181818;
+    /* Точечный паттерн фиксированного размера: при зуме НЕ ререндерим весь фон.
+       Раньше background-size = 24px * --zoom — каждый wheel-tick инвалидировал
+       весь видимый фон, GPU-коммит занимал сотни мс. */
     background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
-    background-size: calc(24px * var(--zoom, 1)) calc(24px * var(--zoom, 1));
-    --zoom: 1;
+    background-size: 24px 24px;
   }
   .canvas-frame {
     position: relative;
-    width: calc(6000px * var(--zoom, 1));
-    height: calc(4000px * var(--zoom, 1));
+    width: 6000px; height: 4000px;
   }
   .canvas {
     position: absolute; left: 0; top: 0; width: 6000px; height: 4000px;
-    transform: scale(var(--zoom, 1)); transform-origin: 0 0;
+    transform-origin: 0 0;
+    /* `will-change: transform` — постоянная промоция в композитный слой.
+       Trade-off: hover/scroll иногда вызывают re-raster плитки (~200ms
+       коммиты), НО зум через transform идёт через GPU без layout/paint
+       на main-thread. Без will-change зум форсит full re-raster и layout
+       на каждый wheel-tick (видели 751ms Layout + 2900ms commits в трейсе).
+       Dynamic will-change (toggle on/off) — ещё хуже из-за promotion churn. */
+    will-change: transform;
   }
   .canvas-wrap.drag-over::after {
     content: 'Отпусти, чтобы импортировать';
@@ -225,11 +233,20 @@
   .node {
     position: absolute; width: 280px; background: #2a2a2a;
     border: 1px solid #444; border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.4); user-select: none;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.5); user-select: none;
     display: flex; flex-direction: column;
-    transition: opacity 0.12s ease, box-shadow 0.12s ease;
-    /* Stacking context: anchor/name-row остаются внутри ноды и не лезут
-       поверх соседей. z-order между нодами — по DOM order (drag поднимает). */
+    /* `content-visibility: auto` пропускает layout/style/paint для offscreen-нод
+       (на холсте 6000×4000 видимы единицы из сотен — это огромная экономия).
+       С будет работать паре `contain-intrinsic-size` — Chrome использует это
+       вместо реального измерения для skip-нод.
+       НЕ ставим явный `contain: paint` или просто `contain: layout style` —
+       первый плодит paint-property-tree (PrePaint >1s на зуме), второй не
+       изолирует размер и Chrome всё равно гоняет layout-walk через все ноды
+       в каждом frame (482ms layout с dirty=4 из 1446 в трейсе).
+       `isolation: isolate` — стекинг-контекст для .anchor (z-index:5),
+       чтобы он не пробивал поверх соседних нод. */
+    content-visibility: auto;
+    contain-intrinsic-size: 280px 200px;
     isolation: isolate;
   }
   .node.dragging-to-timeline {
@@ -480,7 +497,10 @@
   .content-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }
   /* === Зафиксированная панель превью на правой стороне === */
   :root { --preview-w: 420px; --preview-collapsed: 36px; }
-  body { padding-right: var(--preview-w); transition: padding-right 0.18s ease; }
+  /* БЕЗ transition на padding-right/width: оба не композируются,
+     анимация прогоняла full-tree layout ~470ms каждый кадр × 11 кадров =
+     1+ секунды затыка при collapse-toggle. Snap-collapse — мгновенно. */
+  body { padding-right: var(--preview-w); }
   body.preview-collapsed { padding-right: var(--preview-collapsed); }
   .preview-panel {
     position: fixed; top: 0; right: 0; bottom: 0;
@@ -488,7 +508,6 @@
     background: #1c1c1c; border-left: 1px solid #333;
     z-index: 40; overflow: hidden;
     display: flex; flex-direction: column;
-    transition: width 0.18s ease;
   }
   .preview-panel.collapsed { width: var(--preview-collapsed); }
   .preview-resize-handle {
@@ -803,6 +822,22 @@
   }
   .node.image-node .node-body { padding: 0; overflow: hidden; border-radius: 0 0 8px 8px; }
   .node.image-node .node-body img { width: 100%; height: auto; display: block; }
+  /* Placeholder отображается до lazy-гидрации media — на оффскрин-нодах
+     не дёргаем диск/декод. Размером совпадает с типичной картинкой/видео. */
+  .media-placeholder {
+    display: flex; align-items: center; justify-content: center;
+    min-height: 140px; font-size: 32px; opacity: 0.35;
+    background: #1e1e1e; border-radius: 4px;
+  }
+  .node.image-node .media-placeholder,
+  .node.video-node .media-placeholder { min-height: 200px; border-radius: 0; }
+  /* Thumbnail отображается до загрузки full media — мгновенный визуальный feedback. */
+  .media-thumb {
+    width: 100%; height: auto; display: block;
+    image-rendering: -webkit-optimize-contrast; /* slight crispness for upscaled thumb */
+  }
+  .node.image-node .media-thumb,
+  .node.video-node .media-thumb { display: block; }
   .node-body textarea {
     width: 100%; min-height: 100px; background: #1e1e1e; color: #e0e0e0;
     border: 1px solid #383838; border-radius: 4px; padding: 8px;
@@ -928,7 +963,7 @@
     <div class="brand">
       <img src="assets/logo-square.svg" alt="" draggable="false">
       <div style="min-width:0; flex:1;">
-        <div class="title">King Kont · Chatium</div>
+        <div class="title">KingKont</div>
         <div class="sub" id="brandSub">Видео-редактор</div>
         <div class="board" id="brandBoard" style="display:none;"></div>
       </div>
@@ -965,7 +1000,7 @@
 <div class="welcome" id="welcome">
   <div class="welcome-inner">
     <img class="welcome-logo" src="assets/logo-square.svg" alt="" draggable="false">
-    <h1 class="welcome-title">King Kont · Chatium</h1>
+    <h1 class="welcome-title">KingKont</h1>
     <div class="welcome-sub">Видео-редактор</div>
     <button id="welcomeOpen" class="welcome-open primary">Открыть проект</button>
     <div class="welcome-recent" id="welcomeRecent" style="display:none;">
@@ -2648,6 +2683,9 @@ async function selectBoard(board) {
   for (const url of _clipURLCache.values()) URL.revokeObjectURL(url);
   _clipURLCache.clear();
   _audioBufferCache.clear();
+  // Thumbnails — тоже revoke предыдущей доски (иначе утечка blob URLs)
+  for (const url of _thumbUrls.values()) URL.revokeObjectURL(url);
+  _thumbUrls.clear();
   // Восстанавливаем playhead из scene.json (если был сохранён)
   const tlMeta = state.currentBoard.metadata.timeline;
   state.playheadTime = (tlMeta && typeof tlMeta.playhead === 'number') ? tlMeta.playhead : 0;
@@ -2662,14 +2700,14 @@ async function selectBoard(board) {
   if (view) {
     if (typeof view.zoom === 'number') {
       state.zoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, view.zoom));
-      canvasWrap.style.setProperty('--zoom', state.zoom);
+      applyZoomStyles(state.zoom);
       $('zoomLabel').textContent = Math.round(state.zoom * 100) + '%';
     }
     if (typeof view.scrollLeft === 'number') canvasWrap.scrollLeft = view.scrollLeft;
     if (typeof view.scrollTop  === 'number') canvasWrap.scrollTop  = view.scrollTop;
   } else {
     state.zoom = 1;
-    canvasWrap.style.setProperty('--zoom', 1);
+    applyZoomStyles(1);
     $('zoomLabel').textContent = '100%';
     canvasWrap.scrollLeft = 0;
     canvasWrap.scrollTop = 0;
@@ -2729,16 +2767,24 @@ function bezierPath(x1, y1, x2, y2) {
   return `M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`;
 }
 
+// БЕЗ чтения offsetWidth/Height из DOM:
+// - offsetWidth/Height на content-visibility:auto-элементе ФОРСИТ материализацию
+//   (Chrome обязан посчитать реальные размеры → теряем весь смысл оффскрин-кулинга,
+//   selectBoard 338ms layout с dirty=45 of 784 — все 784 объекта пробуждались)
+// - Используем кэш в n.width/n.height; обновляется ResizeObserver'ом ниже.
+// Дефолт по типу — на первый рендер пока размер не измерен.
+function _defaultH(n) {
+  if (n.type === 'text') return n.height || 120;
+  if (n.type === 'audio') return n.height || 110;
+  if (n.type === 'image') return n.height || 220;
+  if (n.type === 'video') return n.height || 220;
+  return n.height || 80;
+}
 function nodeAnchorOut(n) {
-  const el = canvas.querySelector(`.node[data-id="${n.id}"]`);
-  const w = el ? el.offsetWidth  : (n.width  || 280);
-  const h = el ? el.offsetHeight : (n.height || 60);
-  return { x: n.x + w, y: n.y + h / 2 };
+  return { x: n.x + (n.width || 280), y: n.y + _defaultH(n) / 2 };
 }
 function nodeAnchorIn(n) {
-  const el = canvas.querySelector(`.node[data-id="${n.id}"]`);
-  const h = el ? el.offsetHeight : (n.height || 60);
-  return { x: n.x, y: n.y + h / 2 };
+  return { x: n.x, y: n.y + _defaultH(n) / 2 };
 }
 
 function renderConnections() {
@@ -3236,6 +3282,9 @@ async function renderNodeBody(node, body) {
     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');
@@ -3243,70 +3292,138 @@ async function renderNodeBody(node, body) {
       fname.textContent = node.file;
       body.appendChild(fname);
     }
-    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;
-      } else {
-        media = document.createElement(node.type);
-        media.src = url;
-        if (node.type === 'video') media.controls = true;
-        media.preload = 'metadata';
-      }
-      media.addEventListener('mousedown', e => e.stopPropagation());
-      body.appendChild(media);
-
-      if (node.type === 'video') {
-        const speedRow = document.createElement('div');
-        speedRow.className = 'audio-speed';
-        const savedRate = parseFloat(localStorage.getItem('mediaPlaybackRate') || '1');
-        media.playbackRate = savedRate;
-        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', e => {
-            e.stopPropagation();
-            media.playbackRate = s;
-            localStorage.setItem('mediaPlaybackRate', String(s));
-            speedRow.querySelectorAll('button').forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
-          });
-          speedRow.appendChild(btn);
+    // 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);
         }
-        body.appendChild(speedRow);
+        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;
       }
-      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;';
-        const sync = () => { playBtn.textContent = media.paused ? '▶ Play' : '⏸ Pause'; };
-        sync();
-        playBtn.addEventListener('mousedown', e => e.stopPropagation());
-        playBtn.addEventListener('click', e => {
+    };
+
+    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();
-          if (media.paused) media.play().catch(()=>{}); else media.pause();
+          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');
         });
-        media.addEventListener('play', sync);
-        media.addEventListener('pause', sync);
-        media.addEventListener('ended', sync);
-        playRow.appendChild(playBtn);
-        body.appendChild(playRow);
+        speedRow.appendChild(btn);
       }
-    } catch {
-      const m = document.createElement('div');
-      m.className = 'missing';
-      m.textContent = `Файл «${node.file}» не найден`;
-      body.appendChild(m);
+      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);
     }
   }
 }
@@ -4059,6 +4176,23 @@ async function pasteClipboardNodes() {
 }
 
 // =================== 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;
@@ -4071,19 +4205,30 @@ function applyZoom(nextZoom, anchorClientX, anchorClientY) {
   const contentX = visualX / state.zoom;
   const contentY = visualY / state.zoom;
   state.zoom = nextZoom;
-  canvasWrap.style.setProperty('--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();
-  const factor = Math.exp(-e.deltaY * 0.01);
-  applyZoom(state.zoom * factor, e.clientX, e.clientY);
+  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));
@@ -4205,6 +4350,113 @@ function findFreeSpot(w = 280, h = 320) {
   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;
@@ -6596,6 +6848,23 @@ async function pollJob(job, nodeId, bKey, boardHandle, kind) {
   }
 }
 
+// Обновляет .state-text внутри node-body не перерисовывая всё тело —
+// для частых state-only тиков ("submitting (5s)" → "(10s)") DOM-rebuild дорог.
+function updateNodeStateText(nodeId, stateKey) {
+  const root = canvas.querySelector(`.node[data-id="${nodeId}"] .gen-pending .state-text`);
+  if (!root) return false;
+  const LABELS = {
+    'uploading-refs': 'Загружаю референсы в KIE...',
+    'submitting': 'Отправляю задачу...',
+    'queued': 'В очереди...',
+    'waiting': 'В очереди...',
+    'queuing': 'В очереди...',
+    'generating': 'Модель работает...',
+  };
+  root.textContent = LABELS[stateKey] || (stateKey ? `Статус: ${stateKey}` : 'Генерируется...');
+  return true;
+}
+
 // Обновление ноды (на любой доске): меняем in-memory state если эта доска текущая,
 // иначе грузим metadata, патчим и пишем; всегда сохраняем на диск; если нода видна — обновляем DOM.
 async function mutateNode(bKey, boardHandle, nodeId, mutator) {
@@ -6604,15 +6873,25 @@ async function mutateNode(bKey, boardHandle, nodeId, mutator) {
     const node = state.currentBoard.metadata.nodes.find(n => n.id === nodeId);
     if (node) {
       const fileBefore = node.file;
+      const statusBefore = node.status;
+      const stateBefore = node.generated?.state;
       mutator(node);
+      const fileChanged = node.file !== fileBefore;
+      const statusChanged = node.status !== statusBefore;
+      const stateOnly = !statusChanged && !fileChanged && node.generated?.state !== stateBefore;
       // Если файл сменился (после регена) — подхватить новый файл в клипах таймлайна
-      if (node.file && node.file !== fileBefore) {
+      if (fileChanged && node.file) {
         syncTimelineClipsForNode(node);
       }
       syncHistorySlot(node);
-      await saveBoardMetadata(boardHandle, state.currentBoard.metadata);
+      scheduleSave();
+      // Частый кейс: меняется только текст статуса генерации. Точечно обновляем .state-text,
+      // не перестраивая всё тело ноды и не дёргая таймлайн.
+      if (stateOnly && updateNodeStateText(nodeId, node.generated?.state)) {
+        return;
+      }
       await refreshNodeDOM(nodeId);
-      refreshTimelineForNode(nodeId);
+      if (fileChanged || statusChanged) refreshTimelineForNode(nodeId);
       return;
     }
   }
@@ -7842,6 +8121,7 @@ function getOrCreateClipMedia(clip, url) {
   if (m) { try { m.src = ''; } catch {} }
   m = clip.type === 'image' ? document.createElement('img') : document.createElement('video');
   m.src = url;
+  if (clip.type === 'image') m.decoding = 'async';
   if (clip.type === 'video') { m.preload = 'metadata'; m.muted = true; m.disablePictureInPicture = true; }
   _clipMediaCache.set(key, m);
   return m;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kingkont",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "KingKont · Chatium — нод-редактор сцен с AI-генерацией (картинки/видео/голос/SFX/музыка/текст)",
   "main": "main.js",
   "bin": {