kingkont 0.8.1 → 0.8.2

package/README.md

@@ -1,4 +1,4 @@
-# KingKont · Chatium
+# KingKont - редактор AI-видео
 
 Локальный нод-редактор сцен с AI-генерацией (картинки, видео, голос, SFX,
 музыка, текст). Каждая «сцена» — папка на диске с `scene.json`, файлы

package/index.html

@@ -37,7 +37,13 @@
   </div>
 
   <div class="sidebar-section flex">
-    <h3>Сцены <button id="newEpisode" disabled title="Создать сцену">+</button></h3>
+    <h3>
+      <span>Сцены</span>
+      <span style="display:flex; gap:4px;">
+        <button id="newEpisode" disabled title="Создать сцену">+</button>
+        <button id="openTemplates" title="Открыть библиотеку шаблонов" style="font-size:12px;">📚</button>
+      </span>
+    </h3>
     <div class="sidebar-list" id="episodeList"></div>
   </div>
   <div class="sidebar-footer">
@@ -232,6 +238,9 @@
   <button data-act="audio">🎙 Сгенерировать голос</button>
   <button data-act="image">🖼 Сгенерировать картинку</button>
   <button data-act="video">🎬 Сгенерировать видео</button>
+  <hr style="margin:4px 0; border:0; border-top:1px solid #333;">
+  <button data-act="save-template" title="Загрузить эту сцену как шаблон на сервер">💾 Сохранить сцену как шаблон</button>
+  <button data-act="save-project-template" title="Загрузить весь проект (все сцены/персонажи/локации) как шаблон">💾 Сохранить проект как шаблон</button>
 </div>
 
 <!-- ===== Settings modal (двойной клик на сгенерированную ноду) ===== -->
@@ -526,12 +535,37 @@
   <button id="fsClose" title="Закрыть (Esc)">×</button>
 </div>
 
+<!-- ===== Templates modal — список шаблонов с сервера Chatium ===== -->
+<div class="modal hidden" id="templatesModal">
+  <div class="modal-card" style="min-width: 600px; max-width: 90vw; max-height: 90vh;">
+    <div style="display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap;">
+      <h3 style="margin:0; flex:1;">Шаблоны</h3>
+      <button id="tplSaveCurrent" class="primary" title="Сохранить текущую сцену как шаблон">＋ Сцена</button>
+      <button id="tplSaveProject" class="primary" title="Сохранить весь проект (все сцены, персонажи, локации) как шаблон">＋ Проект</button>
+      <button id="tplRefresh" title="Обновить список">↻</button>
+      <button id="tplClose">×</button>
+    </div>
+    <div id="tplStatus" class="status" style="margin-bottom:8px;"></div>
+    <div id="tplList" style="display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow-y:auto;">
+      <div style="padding:24px; text-align:center; color:#888;">Загрузка…</div>
+    </div>
+    <!-- Прогресс при upload/download (показывается во время операций). -->
+    <div id="tplProgress" class="hidden" style="margin-top:12px; padding:10px; background:#1a1a1a; border:1px solid #333; border-radius:6px;">
+      <div id="tplProgressLabel" style="font-size:12px; color:#bbb; margin-bottom:6px;"></div>
+      <div style="width:100%; height:6px; background:#333; border-radius:3px; overflow:hidden;">
+        <div id="tplProgressBar" style="width:0; height:100%; background:#3a5a8a; transition:width 0.2s;"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script src="renderer/state.js"></script>
 <script src="renderer/board.js"></script>
 <script src="renderer/settings.js"></script>
 <script src="renderer/media.js"></script>
 <script src="renderer/generate.js"></script>
 <script src="renderer/timeline.js"></script>
+<script src="renderer/templates.js"></script>
 
 </body>
 </html>

package/lib/providers.js

@@ -21,6 +21,11 @@ const CHATIUM_PATHS = {
   balance: '/app/spaces/server/api/balance',
   transactions: '/app/spaces/server/api/transactions',
   uploadUrl: '/app/spaces/server/api/upload_url',
+  // Шаблоны сцен/персонажей/локаций. Хранят manifest (scene.json) и
+  // ссылки на CDN-файлы (загруженные через uploadUrl).
+  // Формат шаблона:
+  //   { id, name, kind, manifest, files: { 'frames/x.jpg': cdnUrl, ... }, createdAt }
+  templates:    '/app/spaces/server/api/templates',
 };
 
 const CHATIUM_CDN = 'https://fs.chatium.ru/get';
@@ -685,6 +690,69 @@ async function fetchTransactions(s) {
   return data;
 }
 
+// =============================================================================
+// PUBLIC API: templates (CRUD на Chatium-сервере).
+// =============================================================================
+// Шаблон — это сериализованная сцена/персонаж/локация: scene.json + ссылки на
+// все медиа-файлы (загружены в Chatium через uploadUrl, доступны по CDN).
+// При открытии шаблона client скачивает все файлы локально через handleProxy.
+
+function chatiumAuthHeaders(s) {
+  if (!s.useChatium || !s.chatium?.token || !s.chatium?.base) {
+    throw new Error('Войдите в KingKont для работы с шаблонами');
+  }
+  return { 'Authorization': `Bearer ${s.chatium.token}` };
+}
+
+async function listTemplates(s) {
+  const headers = chatiumAuthHeaders(s);
+  logCall('GET ', 'Chatium', chatiumBase(s) + CHATIUM_PATHS.templates);
+  const r = await fetch(chatiumBase(s) + CHATIUM_PATHS.templates, { headers });
+  const text = await r.text();
+  let d; try { d = JSON.parse(text); } catch { d = { raw: text }; }
+  if (!r.ok) throw new Error(d?.error || d?.reason || `HTTP ${r.status}`);
+  return d;
+}
+
+async function getTemplate(id, s) {
+  const headers = chatiumAuthHeaders(s);
+  // tilde-suffix: /templates~get?id=... (см. spaces/server/api/templates.ts)
+  const url = `${chatiumBase(s)}${CHATIUM_PATHS.templates}~get?id=${encodeURIComponent(id)}`;
+  logCall('GET ', 'Chatium', url);
+  const r = await fetch(url, { headers });
+  const text = await r.text();
+  let d; try { d = JSON.parse(text); } catch { d = { raw: text }; }
+  if (!r.ok) throw new Error(d?.error || d?.reason || `HTTP ${r.status}`);
+  return d;
+}
+
+async function createTemplate(body, s) {
+  const headers = { ...chatiumAuthHeaders(s), 'Content-Type': 'application/json' };
+  logCall('POST', 'Chatium', chatiumBase(s) + CHATIUM_PATHS.templates,
+    `name=${body?.name} files=${Object.keys(body?.files || {}).length}`);
+  const r = await fetch(chatiumBase(s) + CHATIUM_PATHS.templates, {
+    method: 'POST', headers, body: JSON.stringify(body),
+  });
+  const text = await r.text();
+  let d; try { d = JSON.parse(text); } catch { d = { raw: text }; }
+  if (!r.ok) throw new Error(d?.error || d?.reason || `HTTP ${r.status}`);
+  return d;
+}
+
+async function deleteTemplate(id, s) {
+  const headers = chatiumAuthHeaders(s);
+  // POST /templates~delete?id=... (Chatium-роутер не уважает HTTP DELETE
+  // в file-based routing, поэтому везде POST для side-effects).
+  const url = `${chatiumBase(s)}${CHATIUM_PATHS.templates}~delete?id=${encodeURIComponent(id)}`;
+  logCall('POST', 'Chatium', url);
+  const r = await fetch(url, { method: 'POST', headers });
+  if (!r.ok) {
+    const text = await r.text().catch(() => '');
+    throw new Error(text || `HTTP ${r.status}`);
+  }
+  return true;
+}
+
 async function listElevenVoices() {
   const key = process.env.ELEVENLABS_API_KEY;
   if (!key) throw new Error('ELEVENLABS_API_KEY не задан');
@@ -719,6 +787,11 @@ module.exports = {
   fetchBalances,
   fetchTransactions,
   listElevenVoices,
+  // Templates (CRUD на Chatium-сервере)
+  listTemplates,
+  getTemplate,
+  createTemplate,
+  deleteTemplate,
   // Constants (для server.js / тестов)
   KIE_IMAGE_MODELS,
   KIE_VIDEO_MODELS,

package/package.json

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

package/renderer/board.js

@@ -47,6 +47,11 @@ window.addEventListener('DOMContentLoaded', async () => {
   if (rqOpen) $('repliquesPanel').classList.remove('hidden');
   // Welcome-кнопка дублирует pickRoot click (с user-gesture от пользователя).
   $('welcomeOpen').addEventListener('click', () => $('pickRoot').click());
+  // Открытие окна шаблонов — доступно даже без проекта (юзер может посмотреть
+  // список, открытие конкретного шаблона потребует filmHandle).
+  $('openTemplates')?.addEventListener('click', () => {
+    if (typeof openTemplatesWindow === 'function') openTemplatesWindow();
+  });
   // Sidebar search — фильтрует персонажей/локации/сцены.
   $('sidebarSearch').addEventListener('input', e => {
     const q = e.target.value.trim().toLowerCase();
@@ -429,9 +434,54 @@ async function renderWelcomeRecents() {
   }
 }
 
-// Сгенерировать превью: первый image-нод любого board'а проекта,
+// Скопировать файл image-ноды в корень проекта как `.cover.<ext>`.
+// Используется как обложка проекта (welcome-recents, templates list).
+// Старые .cover.* удаляются — расширение может смениться.
+async function setProjectCoverFromNode(node) {
+  if (!state.filmHandle || !node?.file) throw new Error('нет проекта или файла');
+  const fh = await resolveBoardFile(state.currentBoard.handle, node.file);
+  const file = await fh.getFile();
+  // Удаляем существующие .cover.* (любое расширение).
+  for await (const [name] of state.filmHandle.entries()) {
+    if (name.startsWith('.cover.')) {
+      try { await state.filmHandle.removeEntry(name); } catch {}
+    }
+  }
+  const ext = (node.file.split('.').pop() || 'jpg').toLowerCase();
+  const coverName = `.cover.${ext}`;
+  const out = await state.filmHandle.getFileHandle(coverName, { create: true });
+  const w = await out.createWritable();
+  await w.write(file);
+  await w.close();
+  // Обновим recents-thumb асинхронно.
+  try {
+    const thumb = await generateProjectThumb(state.filmHandle);
+    if (thumb) await touchRecent(state.filmHandle, thumb);
+  } catch {}
+}
+
+// Возвращает .cover.<ext> File, если есть в корне проекта. Иначе null.
+async function readProjectCover(filmHandle) {
+  if (!filmHandle) return null;
+  try {
+    for await (const [name, h] of filmHandle.entries()) {
+      if (h.kind === 'file' && name.startsWith('.cover.')) {
+        return await h.getFile();
+      }
+    }
+  } catch {}
+  return null;
+}
+
+// Сгенерировать превью: сначала пытаемся .cover.* (явно выбранная юзером
+// обложка), иначе fallback на первый image-нод любого board'а.
 // resize в 320×180, JPEG. Возвращает Blob или null.
 async function generateProjectThumb(filmHandle) {
+  // Manual cover wins over auto-pick.
+  const cover = await readProjectCover(filmHandle);
+  if (cover) {
+    try { return await blobToThumbJpeg(cover, 320, 180); } catch {}
+  }
   try {
     // Собрать кандидатов: characters + locations + episodes (в этом приоритете).
     const candidates = [];
@@ -1546,6 +1596,12 @@ function clearCanvasKeepSvg() {
     if (child !== svg) child.remove();
   }
   if (canvas.firstChild !== svg) canvas.insertBefore(svg, canvas.firstChild);
+  // Чистим коннекторы внутри SVG (кроме временной линии drag'а). Иначе при
+  // закрытии проекта или открытии пустого холста на нём оставались bezier'ы
+  // от предыдущей сцены — нод нет, а линии висят.
+  for (const ch of [...svg.children]) {
+    if (!ch.classList.contains('temp-line')) ch.remove();
+  }
 }
 
 function showEmpty() {
@@ -1855,6 +1911,18 @@ function showNodeContextMenu(node, clientX, clientY) {
   if (node.type === 'image' || node.type === 'video' || node.type === 'audio') {
     add('➕ В таймлайн', () => addToTimeline(node));
   }
+  // Image-нода как обложка проекта — копируется в `<project>/.cover.<ext>`,
+  // оттуда подхватывается generateProjectThumb (для recents и шаблонов).
+  if (node.type === 'image' && node.file && state.filmHandle) {
+    add('📌 Сделать обложкой проекта', async () => {
+      try {
+        await setProjectCoverFromNode(node);
+        alert('Обложка проекта обновлена');
+      } catch (e) {
+        alert('Не удалось установить обложку: ' + (e?.message || e));
+      }
+    });
+  }
   // Локация: пометить картинку как location sheet
   if (node.type === 'image' && node.file && state.currentBoard?.kind === 'location') {
     const isSheet = state.currentBoard.metadata.location?.sheet === node.file;

package/renderer/generate.js

@@ -158,6 +158,24 @@ document.querySelectorAll('#addMenu button').forEach(btn => {
       state.addMenuPos = null;
       return;
     }
+    if (act === 'save-template') {
+      // Сохранение всей сцены как шаблона на Chatium-сервер.
+      // saveCurrentBoardAsTemplate сам откроет templates-модалку (для
+      // прогресс-бара) и обновит список после успешного upload'а.
+      state.addMenuPos = null;
+      if (typeof saveCurrentBoardAsTemplate === 'function') {
+        await saveCurrentBoardAsTemplate();
+      }
+      return;
+    }
+    if (act === 'save-project-template') {
+      // Сохранение ВСЕГО проекта (все boards) как одного шаблона.
+      state.addMenuPos = null;
+      if (typeof saveCurrentProjectAsTemplate === 'function') {
+        await saveCurrentProjectAsTemplate();
+      }
+      return;
+    }
     if (act === 'gen-text') {
       // открываем text-gen modal; если есть fromNode — подставляем @ref в промпт
       if (!await ensureApiKey('text')) return;

package/renderer/templates.js

@@ -0,0 +1,614 @@
+// renderer/templates.js — список / сохранение / открытие шаблонов сцен.
+//
+// Шаблон — это сериализованный board (scene + media), хранящийся на
+// Chatium-сервере. Структура шаблона на сервере:
+//   { id, name, kind, manifest, files: { 'frames/x.jpg': cdnUrl, ... }, createdAt }
+//
+// Где manifest = содержимое scene.json (ноды, connections, settings, …),
+// files = маппинг relPath → CDN-URL загруженного файла.
+//
+// Save flow (saveCurrentBoardAsTemplate):
+//   1. Собрать все файлы текущего board'а (рекурсивно через walkBoardFiles)
+//   2. POST /api/upload каждый файл → получить CDN-URL
+//   3. Прочитать scene.json
+//   4. POST /api/templates с {name, kind, manifest, files}
+//
+// Open flow (openTemplate):
+//   1. GET /api/templates/<id>
+//   2. Спросить юзера имя нового board'а
+//   3. Создать пустую папку под текущим filmHandle
+//   4. Скачать каждый файл из manifest.files (через /api/proxy?url=…)
+//   5. Записать scene.json
+//   6. selectBoard(новый board)
+
+const TPL_PROGRESS = {
+  el: () => document.getElementById('tplProgress'),
+  label: () => document.getElementById('tplProgressLabel'),
+  bar: () => document.getElementById('tplProgressBar'),
+  show(label) {
+    TPL_PROGRESS.el().classList.remove('hidden');
+    TPL_PROGRESS.label().textContent = label;
+    TPL_PROGRESS.bar().style.width = '0%';
+  },
+  update(done, total, label) {
+    if (label) TPL_PROGRESS.label().textContent = label;
+    const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+    TPL_PROGRESS.bar().style.width = pct + '%';
+  },
+  hide() { TPL_PROGRESS.el().classList.add('hidden'); },
+};
+
+function tplStatus(msg, isError) {
+  const el = document.getElementById('tplStatus');
+  if (!el) return;
+  el.textContent = msg || '';
+  el.className = 'status' + (isError ? ' error' : '');
+}
+
+// =================== Open templates window ===================
+async function openTemplatesWindow() {
+  const modal = document.getElementById('templatesModal');
+  if (!modal) return;
+  modal.classList.remove('hidden');
+  // Кнопка «＋ Сцена» доступна только если открыт board (currentBoard).
+  // Кнопка «＋ Проект» доступна если открыт film (filmHandle, без необходимости board'а).
+  const saveBtn = document.getElementById('tplSaveCurrent');
+  if (saveBtn) saveBtn.disabled = !state.currentBoard;
+  const saveProjBtn = document.getElementById('tplSaveProject');
+  if (saveProjBtn) saveProjBtn.disabled = !state.filmHandle;
+  await refreshTemplatesList();
+}
+
+document.getElementById('tplClose')?.addEventListener('click', () => {
+  document.getElementById('templatesModal')?.classList.add('hidden');
+});
+document.getElementById('tplRefresh')?.addEventListener('click', () => refreshTemplatesList());
+
+// =================== List templates ===================
+async function refreshTemplatesList() {
+  const list = document.getElementById('tplList');
+  if (!list) return;
+  list.innerHTML = '<div style="padding:24px; text-align:center; color:#888;">Загрузка…</div>';
+  tplStatus('');
+  try {
+    const r = await fetch('/api/templates');
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({}));
+      throw new Error(err.error || `HTTP ${r.status}`);
+    }
+    const data = await r.json();
+    const items = Array.isArray(data) ? data : (data.items || data.templates || []);
+    renderTemplatesList(items);
+  } catch (e) {
+    list.innerHTML = '';
+    tplStatus(`Ошибка: ${e.message}`, true);
+  }
+}
+
+function renderTemplatesList(items) {
+  const list = document.getElementById('tplList');
+  list.innerHTML = '';
+  if (!items.length) {
+    list.innerHTML = '<div style="padding:24px; text-align:center; color:#888;">Шаблонов пока нет. Сохрани текущую сцену как шаблон, чтобы появилась в списке.</div>';
+    return;
+  }
+  for (const t of items) {
+    const card = document.createElement('div');
+    card.style.cssText = 'display:flex; gap:12px; align-items:center; padding:10px 12px; background:#1a1a1a; border:1px solid #333; border-radius:6px;';
+
+    // Обложка — сразу слева. Если coverUrl нет, показываем placeholder.
+    const cover = document.createElement('div');
+    cover.style.cssText = 'width:80px; height:60px; flex-shrink:0; border-radius:4px; background:#0e0e0e; border:1px solid #2a2a2a; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#444; font-size:24px;';
+    if (t.coverUrl) {
+      const img = document.createElement('img');
+      img.style.cssText = 'width:100%; height:100%; object-fit:cover;';
+      img.src = '/api/proxy?url=' + encodeURIComponent(t.coverUrl);
+      img.draggable = false;
+      img.onerror = () => { cover.textContent = '🖼'; };
+      cover.appendChild(img);
+    } else {
+      cover.textContent = t.kind === 'project' ? '🎬' : '🎞';
+    }
+    card.appendChild(cover);
+
+    const info = document.createElement('div');
+    info.style.cssText = 'flex:1; min-width:0;';
+    const title = document.createElement('div');
+    title.style.cssText = 'font-size:14px; color:#e0e0e0; font-weight:500; word-break:break-word;';
+    title.textContent = t.name || 'без названия';
+    const meta = document.createElement('div');
+    meta.style.cssText = 'font-size:11px; color:#888; margin-top:4px;';
+    const kindLabel = ({ episode: 'сцена', character: 'персонаж', location: 'локация', project: '🎬 проект' }[t.kind] || t.kind || '—');
+    const filesCount = t.fileCount ?? Object.keys(t.files || {}).length;
+    const dateStr = t.createdAt ? new Date(t.createdAt).toLocaleString('ru-RU') : '';
+    meta.textContent = [kindLabel, filesCount ? `${filesCount} файл${filesCount === 1 ? '' : 'ов'}` : null, dateStr].filter(Boolean).join(' · ');
+    info.append(title, meta);
+
+    const isProject = t.kind === 'project';
+    const openBtn = document.createElement('button');
+    openBtn.className = 'primary';
+    openBtn.textContent = 'Открыть';
+    if (isProject) {
+      // Project-templates требуют выбор parent-папки через showDirectoryPicker
+      // — открываются всегда, независимо от того, есть ли filmHandle.
+      openBtn.disabled = false;
+      openBtn.title = 'Выбрать папку и развернуть в неё проект';
+      openBtn.addEventListener('click', () => openProjectTemplate(t.id, t.name));
+    } else {
+      openBtn.disabled = !state.filmHandle;
+      openBtn.title = state.filmHandle ? 'Скачать локально и открыть как новую сцену' : 'Сначала открой проект';
+      openBtn.addEventListener('click', () => openTemplate(t.id, t.name));
+    }
+
+    const delBtn = document.createElement('button');
+    delBtn.className = 'danger';
+    delBtn.textContent = '🗑';
+    delBtn.title = 'Удалить шаблон';
+    delBtn.addEventListener('click', () => deleteTemplateConfirm(t.id, t.name));
+
+    card.append(info, openBtn, delBtn);
+    list.appendChild(card);
+  }
+}
+
+// =================== Save current board as template ===================
+// Загружает .cover из проекта (если есть) на Chatium → возвращает CDN URL
+// или null. Используется для обоих типов template'ов (board и project).
+async function uploadProjectCoverIfAny() {
+  if (!state.filmHandle || typeof readProjectCover !== 'function') return null;
+  const cover = await readProjectCover(state.filmHandle);
+  if (!cover) return null;
+  const r = await fetch('/api/upload', {
+    method: 'POST',
+    headers: {
+      'Content-Type': cover.type || 'application/octet-stream',
+      'X-File-Name': encodeURIComponent('cover.' + (cover.type?.split('/')[1] || 'jpg')),
+    },
+    body: await cover.arrayBuffer(),
+  });
+  if (!r.ok) return null;
+  const { url } = await r.json();
+  return url;
+}
+
+async function saveCurrentBoardAsTemplate() {
+  if (!state.currentBoard) {
+    alert('Сначала открой сцену');
+    return;
+  }
+  const defaultName = state.currentBoard.name || 'Шаблон';
+  const name = await askName('Имя шаблона:', defaultName, defaultName, { okText: 'Сохранить' });
+  if (!name) return;
+
+  // Открываем модалку шаблонов — там лежат progress-bar и список,
+  // в который добавится новая запись после успешного upload'а.
+  // Если уже открыта — просто будет видно прогресс там же.
+  const modal = document.getElementById('templatesModal');
+  if (modal) modal.classList.remove('hidden');
+  // Загружаем актуальный список (пока юзер ждёт upload — видно что было).
+  refreshTemplatesList().catch(() => {});
+
+  const board = state.currentBoard;
+  TPL_PROGRESS.show('Сбор файлов…');
+  tplStatus('');
+
+  try {
+    // 1. Собрать все файлы board'а (рекурсивно).
+    const allFiles = await walkBoardFiles(board.handle);
+    // Исключаем scene.json — он уйдёт как manifest, не как файл.
+    const mediaFiles = allFiles.filter(f => f.relPath !== 'scene.json' && !f.relPath.startsWith('.thumbnails/'));
+
+    // 2. Прочитать manifest (scene.json).
+    let manifest = null;
+    try {
+      const sceneFh = await board.handle.getFileHandle('scene.json');
+      const sceneFile = await sceneFh.getFile();
+      manifest = JSON.parse(await sceneFile.text());
+    } catch (e) {
+      throw new Error('Не удалось прочитать scene.json: ' + e.message);
+    }
+
+    // 3. Загрузить все файлы на Chatium через /api/upload.
+    const fileMap = {}; // relPath → cdnUrl
+    let done = 0;
+    for (const f of mediaFiles) {
+      TPL_PROGRESS.update(done, mediaFiles.length, `Загрузка: ${f.relPath} (${done + 1}/${mediaFiles.length})`);
+      const blob = await f.fileHandle.getFile();
+      const r = await fetch('/api/upload', {
+        method: 'POST',
+        headers: {
+          'Content-Type': blob.type || 'application/octet-stream',
+          'X-File-Name': encodeURIComponent(f.relPath.split('/').pop()),
+        },
+        body: await blob.arrayBuffer(),
+      });
+      if (!r.ok) {
+        const err = await r.json().catch(() => ({}));
+        throw new Error(`upload ${f.relPath}: ${err.error || r.status}`);
+      }
+      const { url } = await r.json();
+      fileMap[f.relPath] = url;
+      done++;
+    }
+    TPL_PROGRESS.update(done, mediaFiles.length, 'Загрузка обложки…');
+    const coverUrl = await uploadProjectCoverIfAny();
+    TPL_PROGRESS.update(done, mediaFiles.length, 'Регистрация шаблона…');
+
+    // 4. Создать шаблон на сервере.
+    const r = await fetch('/api/templates', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name,
+        kind: board.kind,
+        manifest: { ...manifest, ...(coverUrl ? { coverUrl } : {}) },
+        files: fileMap,
+      }),
+    });
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({}));
+      throw new Error(err.error || `HTTP ${r.status}`);
+    }
+
+    TPL_PROGRESS.hide();
+    tplStatus(`Шаблон «${name}» сохранён (${mediaFiles.length} файл${mediaFiles.length === 1 ? '' : 'ов'})`);
+    await refreshTemplatesList();
+  } catch (e) {
+    TPL_PROGRESS.hide();
+    tplStatus('Ошибка сохранения: ' + e.message, true);
+    console.error('save template failed', e);
+  }
+}
+
+document.getElementById('tplSaveCurrent')?.addEventListener('click', saveCurrentBoardAsTemplate);
+document.getElementById('tplSaveProject')?.addEventListener('click', saveCurrentProjectAsTemplate);
+
+// =================== Save WHOLE PROJECT as template ===================
+// Шаблон проекта = массив board'ов { kind, name, manifest, files }, лежит
+// в поле `manifest.boards` записи на сервере (kind='project'). Поле `files`
+// в верхней структуре пустое — все файлы хранятся внутри boards[i].files.
+async function saveCurrentProjectAsTemplate() {
+  if (!state.filmHandle) {
+    alert('Сначала открой проект');
+    return;
+  }
+  const defaultName = state.filmHandle.name || 'Проект';
+  const name = await askName('Имя шаблона проекта:', defaultName, defaultName, { okText: 'Сохранить' });
+  if (!name) return;
+
+  const modal = document.getElementById('templatesModal');
+  if (modal) modal.classList.remove('hidden');
+  refreshTemplatesList().catch(() => {});
+
+  TPL_PROGRESS.show('Сбор board\'ов проекта…');
+  tplStatus('');
+
+  try {
+    // 1. Собираем все board'ы (characters / locations / episodes).
+    const allBoards = await collectProjectBoards(state.filmHandle);
+    if (!allBoards.length) {
+      throw new Error('В проекте нет ни одной сцены/персонажа/локации');
+    }
+
+    // 2. Считаем общее число файлов для прогресса.
+    const totalFiles = allBoards.reduce((sum, b) => sum + b.mediaFiles.length, 0);
+    let uploadedTotal = 0;
+
+    // 3. Для каждого board'а — читаем manifest, загружаем файлы, копим
+    //    структуру { kind, name, manifest, files: {relPath: cdnUrl} }.
+    const boardsPayload = [];
+    for (const b of allBoards) {
+      let manifest = {};
+      try {
+        const sceneFh = await b.handle.getFileHandle('scene.json');
+        manifest = JSON.parse(await (await sceneFh.getFile()).text());
+      } catch {
+        // Без scene.json пропускаем — это не board.
+        continue;
+      }
+      const filesMap = {};
+      for (const f of b.mediaFiles) {
+        TPL_PROGRESS.update(uploadedTotal, totalFiles,
+          `[${b.kind}/${b.name}] ${f.relPath} (${uploadedTotal + 1}/${totalFiles})`);
+        const blob = await f.fileHandle.getFile();
+        const r = await fetch('/api/upload', {
+          method: 'POST',
+          headers: {
+            'Content-Type': blob.type || 'application/octet-stream',
+            'X-File-Name': encodeURIComponent(f.relPath.split('/').pop()),
+          },
+          body: await blob.arrayBuffer(),
+        });
+        if (!r.ok) {
+          const err = await r.json().catch(() => ({}));
+          throw new Error(`upload ${b.name}/${f.relPath}: ${err.error || r.status}`);
+        }
+        const { url } = await r.json();
+        filesMap[f.relPath] = url;
+        uploadedTotal++;
+      }
+      boardsPayload.push({
+        kind: b.kind,
+        name: b.name,
+        manifest,
+        files: filesMap,
+      });
+    }
+
+    TPL_PROGRESS.update(uploadedTotal, totalFiles, 'Загрузка обложки…');
+    const coverUrl = await uploadProjectCoverIfAny();
+    TPL_PROGRESS.update(uploadedTotal, totalFiles, 'Регистрация шаблона проекта…');
+
+    // 4. POST /api/templates с kind='project' и manifest.boards = [...].
+    const r = await fetch('/api/templates', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        name,
+        kind: 'project',
+        manifest: {
+          boards: boardsPayload,
+          projectName: state.filmHandle.name,
+          ...(coverUrl ? { coverUrl } : {}),
+        },
+        files: {},  // всё внутри manifest.boards[i].files
+      }),
+    });
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({}));
+      throw new Error(err.error || `HTTP ${r.status}`);
+    }
+
+    TPL_PROGRESS.hide();
+    tplStatus(`Шаблон проекта «${name}» сохранён (${allBoards.length} board'ов, ${totalFiles} файл${totalFiles === 1 ? '' : 'ов'})`);
+    await refreshTemplatesList();
+  } catch (e) {
+    TPL_PROGRESS.hide();
+    tplStatus('Ошибка сохранения проекта: ' + e.message, true);
+    console.error('save project template failed', e);
+  }
+}
+
+// Собирает все board-папки из проекта: { kind, name, handle, mediaFiles[] }.
+async function collectProjectBoards(filmHandle) {
+  const out = [];
+
+  // _characters/* и _locations/*.
+  const subdirs = [
+    { dir: CHAR_DIR, kind: 'character' },
+    { dir: LOC_DIR,  kind: 'location' },
+  ];
+  for (const { dir, kind } of subdirs) {
+    try {
+      const root = await filmHandle.getDirectoryHandle(dir);
+      for await (const [name, h] of root.entries()) {
+        if (h.kind !== 'directory') continue;
+        if (name.startsWith('.') || name === '_deleted') continue;
+        out.push({ kind, name, handle: h, mediaFiles: await walkBoardFiles(h) });
+      }
+    } catch {}
+  }
+
+  // Эпизоды лежат в корне (любая папка кроме _* и .*).
+  for await (const [name, h] of filmHandle.entries()) {
+    if (h.kind !== 'directory') continue;
+    if (name.startsWith('_') || name.startsWith('.')) continue;
+    out.push({ kind: 'episode', name, handle: h, mediaFiles: await walkBoardFiles(h) });
+  }
+
+  // Фильтруем те, у которых нет scene.json (т.е. не наши board'ы).
+  const validBoards = [];
+  for (const b of out) {
+    try {
+      await b.handle.getFileHandle('scene.json');
+      // Исключаем scene.json и .thumbnails/ из mediaFiles — они либо
+      // manifest, либо генерятся клиентом.
+      b.mediaFiles = b.mediaFiles.filter(f =>
+        f.relPath !== 'scene.json' && !f.relPath.startsWith('.thumbnails/'));
+      validBoards.push(b);
+    } catch {}
+  }
+  return validBoards;
+}
+
+// =================== Open project template ===================
+// Просим юзера выбрать parent-папку. Создаём в ней новую папку с именем
+// проекта. Скачиваем все boards со всеми files. Открываем filmHandle.
+async function openProjectTemplate(templateId, suggestedName) {
+  if (typeof window.showDirectoryPicker !== 'function') {
+    alert('Браузер не поддерживает выбор папки. Открой проект через File-System-Access.');
+    return;
+  }
+
+  // 1. Парент-папка от юзера.
+  let parentHandle;
+  try {
+    parentHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
+  } catch (e) {
+    if (e.name === 'AbortError') return; // юзер закрыл диалог
+    alert('Не удалось выбрать папку: ' + e.message);
+    return;
+  }
+
+  // 2. Имя нового проекта.
+  const projectName = await askName(
+    'Имя нового проекта:',
+    suggestedName || 'Из шаблона',
+    suggestedName || '',
+    { okText: 'Создать и открыть' },
+  );
+  if (!projectName) return;
+
+  TPL_PROGRESS.show('Получение шаблона…');
+  tplStatus('');
+
+  try {
+    const r = await fetch(`/api/templates/${encodeURIComponent(templateId)}`);
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({}));
+      throw new Error(err.error || `HTTP ${r.status}`);
+    }
+    const tpl = await r.json();
+    const boards = tpl.manifest?.boards || [];
+    if (!boards.length) throw new Error('В шаблоне нет board\'ов');
+
+    // 3. Создаём корень проекта.
+    const filmHandle = await parentHandle.getDirectoryHandle(projectName, { create: true });
+
+    // 4. Считаем общее число файлов для прогресса.
+    let totalFiles = 0;
+    for (const b of boards) totalFiles += Object.keys(b.files || {}).length;
+    let downloadedTotal = 0;
+
+    // 5. Для каждого board'а — создаём папку, качаем файлы, пишем scene.json.
+    for (const b of boards) {
+      let parent = filmHandle;
+      if (b.kind === 'character') {
+        parent = await filmHandle.getDirectoryHandle(CHAR_DIR, { create: true });
+      } else if (b.kind === 'location') {
+        parent = await filmHandle.getDirectoryHandle(LOC_DIR, { create: true });
+      }
+      const boardHandle = await parent.getDirectoryHandle(b.name, { create: true });
+
+      const fileEntries = Object.entries(b.files || {});
+      for (const [relPath, cdnUrl] of fileEntries) {
+        TPL_PROGRESS.update(downloadedTotal, totalFiles,
+          `[${b.kind}/${b.name}] ${relPath} (${downloadedTotal + 1}/${totalFiles})`);
+        const proxyUrl = '/api/proxy?url=' + encodeURIComponent(cdnUrl);
+        const fr = await fetch(proxyUrl);
+        if (!fr.ok) throw new Error(`download ${b.name}/${relPath}: HTTP ${fr.status}`);
+        const buf = await fr.arrayBuffer();
+        await writeBoardFile(boardHandle, relPath, new Uint8Array(buf));
+        downloadedTotal++;
+      }
+      // scene.json — manifest board'а.
+      await writeBoardFile(boardHandle, 'scene.json', JSON.stringify(b.manifest || {}, null, 2));
+    }
+
+    // 6. Открываем созданный проект.
+    TPL_PROGRESS.update(totalFiles, totalFiles, 'Открытие проекта…');
+    await openFilm(filmHandle);
+
+    TPL_PROGRESS.hide();
+    document.getElementById('templatesModal').classList.add('hidden');
+    tplStatus('');
+  } catch (e) {
+    TPL_PROGRESS.hide();
+    tplStatus('Ошибка открытия проекта: ' + e.message, true);
+    console.error('open project template failed', e);
+  }
+}
+
+// =================== Open template (download all files + create board) ===================
+async function openTemplate(templateId, suggestedName) {
+  if (!state.filmHandle) { alert('Сначала открой проект'); return; }
+
+  // 1. Спросить имя нового board'а в текущем проекте.
+  const name = await askName(
+    'Имя для скачанной сцены:',
+    suggestedName || 'из шаблона',
+    suggestedName || '',
+    { okText: 'Скачать и открыть' },
+  );
+  if (!name) return;
+
+  TPL_PROGRESS.show('Получение шаблона…');
+  tplStatus('');
+
+  try {
+    // 2. Получить шаблон с сервера.
+    const r = await fetch(`/api/templates/${encodeURIComponent(templateId)}`);
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({}));
+      throw new Error(err.error || `HTTP ${r.status}`);
+    }
+    const tpl = await r.json();
+    const manifest = tpl.manifest || {};
+    const files = tpl.files || {};
+    const kind = tpl.kind || 'episode';
+
+    // 3. Создать пустую папку под нужный kind.
+    let parentHandle;
+    if (kind === 'character') {
+      parentHandle = await state.filmHandle.getDirectoryHandle(CHAR_DIR, { create: true });
+    } else if (kind === 'location') {
+      parentHandle = await state.filmHandle.getDirectoryHandle(LOC_DIR, { create: true });
+    } else {
+      parentHandle = state.filmHandle;
+    }
+    const boardHandle = await parentHandle.getDirectoryHandle(name, { create: true });
+
+    // 4. Скачать каждый файл из manifest.files.
+    const entries = Object.entries(files);
+    let done = 0;
+    for (const [relPath, cdnUrl] of entries) {
+      TPL_PROGRESS.update(done, entries.length, `Скачивание: ${relPath} (${done + 1}/${entries.length})`);
+      // Через /api/proxy чтобы обойти возможные CORS/auth-вопросы.
+      const proxyUrl = '/api/proxy?url=' + encodeURIComponent(cdnUrl);
+      const fr = await fetch(proxyUrl);
+      if (!fr.ok) throw new Error(`download ${relPath}: HTTP ${fr.status}`);
+      const buf = await fr.arrayBuffer();
+      await writeBoardFile(boardHandle, relPath, new Uint8Array(buf));
+      done++;
+    }
+
+    // 5. Записать scene.json (manifest).
+    TPL_PROGRESS.update(entries.length, entries.length, 'Создание сцены…');
+    await writeBoardFile(boardHandle, 'scene.json', JSON.stringify(manifest, null, 2));
+
+    // 6. Обновить sidebar и открыть board.
+    if (kind === 'character') await refreshCharacters();
+    else if (kind === 'location') await refreshLocations();
+    else await refreshEpisodes();
+    await selectBoard({ kind, name, handle: boardHandle });
+
+    TPL_PROGRESS.hide();
+    document.getElementById('templatesModal').classList.add('hidden');
+    tplStatus('');
+  } catch (e) {
+    TPL_PROGRESS.hide();
+    tplStatus('Ошибка открытия: ' + e.message, true);
+    console.error('open template failed', e);
+  }
+}
+
+// =================== Delete template ===================
+async function deleteTemplateConfirm(id, name) {
+  if (!confirm(`Удалить шаблон «${name}» с сервера? Действие необратимо.`)) return;
+  try {
+    const r = await fetch(`/api/templates/${encodeURIComponent(id)}`, { method: 'DELETE' });
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({}));
+      throw new Error(err.error || `HTTP ${r.status}`);
+    }
+    await refreshTemplatesList();
+    tplStatus(`Шаблон «${name}» удалён`);
+  } catch (e) {
+    tplStatus('Не удалось удалить: ' + e.message, true);
+  }
+}
+
+// =================== Helpers ===================
+// Рекурсивно собирает все файлы из board-папки. Возвращает массив
+// { relPath: 'frames/x.jpg', fileHandle: FileSystemFileHandle }.
+// Игнорирует _deleted/, .DS_Store и hidden-папки.
+async function walkBoardFiles(boardHandle) {
+  const out = [];
+  async function walk(dirHandle, prefix) {
+    for await (const [name, h] of dirHandle.entries()) {
+      // Скипаем системное и удалённое.
+      if (name.startsWith('.') || name === '_deleted') continue;
+      const relPath = prefix ? `${prefix}/${name}` : name;
+      if (h.kind === 'file') {
+        out.push({ relPath, fileHandle: h });
+      } else if (h.kind === 'directory') {
+        await walk(h, relPath);
+      }
+    }
+  }
+  await walk(boardHandle, '');
+  return out;
+}
+
+// Экспортируем глобально, чтобы board.js мог вызывать.
+window.openTemplatesWindow = openTemplatesWindow;

package/server.js

@@ -218,6 +218,33 @@ async function handleTransactions(res) {
   catch (e) { sendError(res, e, 502); }
 }
 
+// =============================================================================
+// Templates: тонкие proxy-роуты на Chatium-сервер.
+// =============================================================================
+async function handleTemplatesList(res) {
+  try { send(res, 200, await providers.listTemplates(getSettings())); }
+  catch (e) { sendError(res, e, 502); }
+}
+
+async function handleTemplateGet(res, id) {
+  try { send(res, 200, await providers.getTemplate(id, getSettings())); }
+  catch (e) { sendError(res, e, 502); }
+}
+
+async function handleTemplateCreate(req, res) {
+  try {
+    const body = await readJson(req);
+    send(res, 200, await providers.createTemplate(body, getSettings()));
+  } catch (e) { sendError(res, e, 502); }
+}
+
+async function handleTemplateDelete(res, id) {
+  try {
+    await providers.deleteTemplate(id, getSettings());
+    send(res, 200, { ok: true });
+  } catch (e) { sendError(res, e, 502); }
+}
+
 // =============================================================================
 // Static files (renderer assets).
 // =============================================================================
@@ -256,6 +283,16 @@ const server = createServer(async (req, res) => {
     if (req.method === 'GET'  && url.pathname === '/api/balance')  return handleBalance(res);
     if (req.method === 'GET'  && url.pathname === '/api/balance/all') return handleBalanceAll(res);
     if (req.method === 'GET'  && url.pathname === '/api/transactions') return handleTransactions(res);
+    // Templates routes — proxy на Chatium server (см. providers.listTemplates etc).
+    if (req.method === 'GET'  && url.pathname === '/api/templates')    return handleTemplatesList(res);
+    if (req.method === 'POST' && url.pathname === '/api/templates')    return handleTemplateCreate(req, res);
+    {
+      const m = url.pathname.match(/^\/api\/templates\/([^/]+)$/);
+      if (m) {
+        if (req.method === 'GET')    return handleTemplateGet(res, decodeURIComponent(m[1]));
+        if (req.method === 'DELETE') return handleTemplateDelete(res, decodeURIComponent(m[1]));
+      }
+    }
     if (req.method === 'GET') return serveStatic(res, url);
     send(res, 404, 'not found');
   } catch (e) {