kingkont 0.8.7 → 0.9.0

package/renderer/timeline.js

@@ -1129,6 +1129,10 @@ async function renderTimeline() {
     tracksEl.appendChild(trackEl);
   }
   $('timelineDuration').textContent = videoTotal > 0 ? `${videoTotal.toFixed(1)} сек` : '';
+  // Запоминаем total для preview-overlay (его updatePreviewControls читает).
+  _lastTimelineTotal = videoTotal;
+  updatePreviewControls();
+  updateTimelineAspectLabel();
 
   // Playhead
   const ph = document.createElement('div');
@@ -1324,7 +1328,11 @@ function applyPreviewState() {
 
 $('timelineBtn').addEventListener('click', () => {
   const willShow = $('timelinePanel').classList.contains('hidden');
-  setPanelsVisible(willShow, willShow);
+  // Открываем ТОЛЬКО таймлайн (preview не разворачиваем — появится автоматически
+  // при ▶ Play). Закрываем — закрываем таймлайн, preview оставляем как есть
+  // (юзер мог свернуть/развернуть его сам).
+  $('timelinePanel').classList.toggle('hidden', !willShow);
+  localStorage.setItem('timelineOpen', willShow ? '1' : '0');
   if (willShow && state.currentBoard) {
     renderTimeline();
     scheduleUpdatePreview();
@@ -1333,15 +1341,40 @@ $('timelineBtn').addEventListener('click', () => {
 
 // Кнопка ×  на самом таймлайне — закрывает панель (то же что повторный
 // клик на #timelineBtn). Дублирует чтобы не приходилось целиться в
-// маленькую кнопку в верхнем тулбаре.
+// маленькую кнопку в верхнем тулбаре. Также останавливает playback и
+// сворачивает preview (юзер ожидает что закрытие таймлайна = закрытие
+// всего связанного UI).
 $('timelineClose')?.addEventListener('click', () => {
   if (!$('timelinePanel').classList.contains('hidden')) {
     $('timelineBtn').click();
   }
+  // Stop playback и свернуть preview-панель тоже.
+  stopTimelinePlayback();
+  setPreviewCollapsed(true);
+  updatePreviewControls();
 });
 
 
+// «⋯» — меню скрытых/опасных действий таймлайна. Открывается на click,
+// закрывается на click outside.
+$('timelineMore')?.addEventListener('click', e => {
+  e.stopPropagation();
+  const menu = $('timelineMoreMenu');
+  const willShow = menu.classList.contains('hidden');
+  menu.classList.toggle('hidden', !willShow);
+  if (willShow) {
+    setTimeout(() => {
+      document.addEventListener('mousedown', function onOutside(ev) {
+        if (menu.contains(ev.target) || ev.target.id === 'timelineMore') return;
+        document.removeEventListener('mousedown', onOutside);
+        menu.classList.add('hidden');
+      });
+    }, 0);
+  }
+});
+
 $('timelineClear').addEventListener('click', () => {
+  $('timelineMoreMenu')?.classList.add('hidden');
   if (!state.currentBoard) return;
   if (!confirm('Очистить все дорожки таймлайна?')) return;
   state.currentBoard.metadata.timeline = defaultTimeline();
@@ -1384,6 +1417,54 @@ function setPlayheadTime(t) {
     }
   }
   if (!_playStop) scheduleUpdatePreview();
+  updatePreviewControls();
+}
+
+// Aspect-ratio сцены → разрешение для ffmpeg-экспорта. Стараемся попасть
+// в стандартные «720p-эквиваленты» по короткой стороне ~720 (× round-up
+// до чётных пикселей — h264 требует even).
+function aspectToExportDimensions(aspectStr) {
+  const map = {
+    '16:9': { W: 1280, H: 720 },
+    '9:16': { W: 720,  H: 1280 },
+    '1:1':  { W: 1080, H: 1080 },
+    '4:3':  { W: 1280, H: 960 },
+    '3:4':  { W: 960,  H: 1280 },
+    '21:9': { W: 1680, H: 720 },
+    '3:2':  { W: 1200, H: 800 },
+    '2:3':  { W: 800,  H: 1200 },
+  };
+  return map[aspectStr] || map['16:9'];   // дефолт если поле пустое/незнакомое
+}
+
+// Aspect-label сцены в заголовке таймлайна — обновляется при render'е.
+function updateTimelineAspectLabel() {
+  const el = document.getElementById('timelineAspect');
+  if (!el) return;
+  const ratio = state.currentBoard?.metadata?.settings?.aspectRatio;
+  el.textContent = ratio ? `▭ ${ratio}` : '';
+}
+
+// Обновляет overlay-контролы превью: кнопка play/pause + время "X / Y с".
+// Y берём из `_lastTimelineTotal` (вычислено в renderTimeline).
+let _lastTimelineTotal = 0;
+function updatePreviewControls() {
+  const ctl = document.getElementById('previewControls');
+  if (!ctl) return;
+  const tl = getTimeline();
+  const hasClips = !!(tl?.tracks?.some(t => t.clips?.length));
+  ctl.classList.toggle('hidden', !hasClips);
+  if (!hasClips) return;
+  const playing = !!_playStop;
+  ctl.classList.toggle('is-playing', playing);
+  const btn = document.getElementById('previewPlayBtn');
+  if (btn) btn.textContent = playing ? '⏸' : '▶';
+  const info = document.getElementById('previewTimeInfo');
+  if (info) {
+    const cur = (state.playheadTime || 0).toFixed(1);
+    const tot = (_lastTimelineTotal || 0).toFixed(1);
+    info.textContent = `${cur} / ${tot} с`;
+  }
 }
 
 let _previewUpdateRaf = null;
@@ -1455,6 +1536,42 @@ function stopTimelinePlayback() {
   }
 }
 
+// Сброс UI таймлайна и превью при переключении board'а / закрытии проекта.
+// Без этого `<video>` и `<img>` превью держат src от прошлой сцены — юзер
+// видит фрейм старой сцены пока не нажмёт ▶/scrub. Также сбрасывает плейхед,
+// чистит контент дорожек и свёртывает preview-overlay.
+function resetTimelineUI() {
+  // 1) Stop playback (если шёл).
+  stopTimelinePlayback();
+  // 2) Сбрасываем preview-source.
+  const v = document.getElementById('timelinePreview');
+  if (v) {
+    try { v.pause(); } catch {}
+    v.removeAttribute('src');
+    try { v.load(); } catch {}        // освободить decoder, очистить frame
+    v.classList.add('hidden');
+  }
+  const img = document.getElementById('timelinePreviewImg');
+  if (img) {
+    img.removeAttribute('src');
+    img.classList.add('hidden');
+  }
+  // 3) Чистим overlay-контролы (no clips → hidden).
+  const ctl = document.getElementById('previewControls');
+  if (ctl) ctl.classList.add('hidden');
+  // 4) Чистим контент tracks внутри панели (на случай если новый
+  //    renderTimeline не запустится — например доска без таймлайна).
+  const tracksEl = document.getElementById('timelineTracks');
+  if (tracksEl) tracksEl.innerHTML = '';
+  const dur = document.getElementById('timelineDuration');
+  if (dur) dur.textContent = '';
+  const phInfo = document.getElementById('timelinePlayheadInfo');
+  if (phInfo) phInfo.textContent = '0.0 с';
+  // 5) Сбрасываем плейхед (новый board подставит свой из scene.json).
+  state.playheadTime = 0;
+}
+window.resetTimelineUI = resetTimelineUI;
+
 function attachPlayheadDrag(handle, phEl) {
   handle.addEventListener('mousedown', e => {
     e.preventDefault();
@@ -2346,6 +2463,24 @@ function showTrackContextMenu(track, clientX, clientY, opts = {}) {
   setTimeout(() => document.addEventListener('mousedown', closeNodeMenu, { once: true }), 0);
 }
 
+// Кнопка play/pause в overlay-е превью — дублирует клик по #timelinePlay,
+// логика playback живёт там.
+$('previewPlayBtn')?.addEventListener('click', e => {
+  e.stopPropagation();
+  $('timelinePlay').click();
+  // Тут же обновляем UI чтобы overlay переключился в playing-state.
+  setTimeout(updatePreviewControls, 0);
+});
+
+// «×» в overlay — сворачивает preview-панель в полоску. Если идёт
+// playback — сначала останавливаем (иначе остаётся непонятное состояние).
+$('previewCloseBtn')?.addEventListener('click', e => {
+  e.stopPropagation();
+  if (_playStop) { _playStop(); _playStop = null; $('timelinePlay').textContent = '▶'; }
+  setPreviewCollapsed(true);
+  updatePreviewControls();
+});
+
 $('addVideoTrack').addEventListener('click', () => {
   const tl = getTimeline();
   const n = tl.tracks.filter(t => t.kind === 'video').length;
@@ -2362,7 +2497,7 @@ $('addAudioTrack').addEventListener('click', () => {
 // Видео-элемент пока используется для рендера видео-клипов; sync с аудио-clock.
 let _playStop = null;
 $('timelinePlay').addEventListener('click', async () => {
-  if (_playStop) { _playStop(); _playStop = null; $('timelinePlay').textContent = '▶'; return; }
+  if (_playStop) { _playStop(); _playStop = null; $('timelinePlay').textContent = '▶'; updatePreviewControls(); return; }
   const tl = getTimeline();
   const videoTrack = tl.tracks.find(t => t.kind === 'video' && t.clips.length);
   const audioTracks = tl.tracks.filter(t => t.kind === 'audio' && t.clips.length);
@@ -2455,6 +2590,7 @@ $('timelinePlay').addEventListener('click', async () => {
     const newT = startTime + Math.max(0, ctx.currentTime - playStartCtxTime);
     state.playheadTime = newT;
     positionPlayhead();
+    updatePreviewControls();   // обновить «X / Y с» в overlay-е превью
     if (maxDur > 0 && newT >= maxDur) {
       if (_playStop) _playStop();
       return;
@@ -2542,6 +2678,7 @@ $('timelinePlay').addEventListener('click', async () => {
   for (const t of timers) clearTimeout(t);
   $('timelinePlay').textContent = '▶';
   _playStop = null;
+  updatePreviewControls();
 });
 
 function waitMs(ms, cancelFn) {
@@ -2563,9 +2700,11 @@ $('timelineExport').addEventListener('click', async () => {
   status.classList.remove('error');
   const setStatus = (m) => { status.textContent = m; };
   const cleanupNames = [];
-  const W = 1280, H = 720;
+  // Берём разрешение из scene aspectRatio. Дефолт 16:9 если не задан.
+  const aspectStr = state.currentBoard?.metadata?.settings?.aspectRatio || '16:9';
+  const { W, H } = aspectToExportDimensions(aspectStr);
   try {
-    setStatus('Загружаю ffmpeg...');
+    setStatus(`Загружаю ffmpeg... (${W}×${H} для ${aspectStr})`);
     const ff = await ensureFFmpeg(setStatus);
 
     // 1) Видео-дорожка: каждый клип → silent mp4 segment
@@ -2674,8 +2813,11 @@ $('timelineExport').addEventListener('click', async () => {
 
     const data = await ff.readFile(finalName);
     const blob = new Blob([data.buffer], { type: 'video/mp4' });
-    triggerDownload(blob, `${state.currentBoard.name}_timeline.mp4`);
-    setStatus('Готово ✓');
+    // Включаем aspect в имя файла — удобно когда юзер экспортит сцену
+    // в нескольких форматах подряд (16:9 для YouTube, 9:16 для shorts).
+    const aspectInName = aspectStr.replace(':', 'x');
+    triggerDownload(blob, `${state.currentBoard.name}_timeline_${aspectInName}.mp4`);
+    setStatus(`Готово ✓ (${W}×${H})`);
   } catch (e) {
     console.error('timeline export failed:', e);
     status.classList.add('error');

package/server.js

@@ -133,7 +133,15 @@ async function handleProxy(res, url) {
 
   const r = await fetch(target);
   if (!r.ok) return send(res, r.status, { error: `upstream ${r.status}` });
-  const headers = { 'Content-Type': r.headers.get('content-type') || 'application/octet-stream' };
+  const headers = {
+    'Content-Type': r.headers.get('content-type') || 'application/octet-stream',
+    // CDN-обложки и медиа адресуемы по hash в URL — содержимое
+    // immutable. Разрешаем браузеру кэшировать, чтобы welcome не
+    // перезагружал обложки облачных проектов на каждый рендер.
+    // (Глобальный default 'no-store' выставляется в send(); тут
+    //  переопределяем.)
+    'Cache-Control': 'public, max-age=86400, immutable',
+  };
   const len = r.headers.get('content-length');
   if (len) headers['Content-Length'] = len;
   res.writeHead(200, headers);
@@ -245,6 +253,48 @@ async function handleTemplateDelete(res, id) {
   } catch (e) { sendError(res, e, 502); }
 }
 
+async function handleTemplateUpdate(req, res, id) {
+  try {
+    const body = await readJson(req);
+    send(res, 200, await providers.updateTemplate(id, body, getSettings()));
+  } catch (e) { sendError(res, e, 502); }
+}
+
+// =============================================================================
+// Cloud projects: тонкие proxy-роуты на Chatium-сервер.
+// (Зеркальный код templates — но для редактируемых проектов.)
+// =============================================================================
+async function handleProjectsList(res) {
+  try { send(res, 200, await providers.listProjects(getSettings())); }
+  catch (e) { sendError(res, e, 502); }
+}
+
+async function handleProjectGet(res, id) {
+  try { send(res, 200, await providers.getProject(id, getSettings())); }
+  catch (e) { sendError(res, e, 502); }
+}
+
+async function handleProjectCreate(req, res) {
+  try {
+    const body = await readJson(req);
+    send(res, 200, await providers.createProject(body, getSettings()));
+  } catch (e) { sendError(res, e, 502); }
+}
+
+async function handleProjectUpdate(req, res, id) {
+  try {
+    const body = await readJson(req);
+    send(res, 200, await providers.updateProject(id, body, getSettings()));
+  } catch (e) { sendError(res, e, 502); }
+}
+
+async function handleProjectDelete(res, id) {
+  try {
+    await providers.deleteProject(id, getSettings());
+    send(res, 200, { ok: true });
+  } catch (e) { sendError(res, e, 502); }
+}
+
 // =============================================================================
 // Static files (renderer assets).
 // =============================================================================
@@ -290,9 +340,21 @@ const server = createServer(async (req, res) => {
       const m = url.pathname.match(/^\/api\/templates\/([^/]+)$/);
       if (m) {
         if (req.method === 'GET')    return handleTemplateGet(res, decodeURIComponent(m[1]));
+        if (req.method === 'POST')   return handleTemplateUpdate(req, res, decodeURIComponent(m[1]));
         if (req.method === 'DELETE') return handleTemplateDelete(res, decodeURIComponent(m[1]));
       }
     }
+    // Cloud-projects routes — зеркало templates, но для редактируемых проектов.
+    if (req.method === 'GET'  && url.pathname === '/api/projects')     return handleProjectsList(res);
+    if (req.method === 'POST' && url.pathname === '/api/projects')     return handleProjectCreate(req, res);
+    {
+      const m = url.pathname.match(/^\/api\/projects\/([^/]+)$/);
+      if (m) {
+        if (req.method === 'GET')    return handleProjectGet(res, decodeURIComponent(m[1]));
+        if (req.method === 'POST')   return handleProjectUpdate(req, res, decodeURIComponent(m[1]));
+        if (req.method === 'DELETE') return handleProjectDelete(res, decodeURIComponent(m[1]));
+      }
+    }
     if (req.method === 'GET') return serveStatic(res, url);
     send(res, 404, 'not found');
   } catch (e) {

package/skill/SKILL.md

@@ -132,6 +132,115 @@ Backward-compat: если в scene.json остался старый формат
 `settings.defaultPrompts: { image: "..." }` — CLI и UI конвертируют
 его в массив на лету; следующее сохранение перепишет в новый формат.
 
+#### Когда заполнять defaultPrompts по умолчанию
+
+Если юзер описывает сцену **как кадр фильма/сериала/последовательности** —
+сразу при создании сцены пропиши в `defaultPrompts` визуальный стиль кадров.
+Это сэкономит юзеру тонну ручного ввода и сохранит консистентность всех
+генераций в сцене.
+
+Что добавлять (зависит от описания):
+
+- **Технические характеристики камеры**: «35mm film», «70mm IMAX», «shot
+  on Arri Alexa», «handheld camera», «steadicam», «drone shot», «macro
+  lens», «anamorphic lens (cinematic widescreen with horizontal lens
+  flares)».
+- **Освещение**: «natural daylight», «golden hour», «overcast soft
+  lighting», «harsh midday sun», «cinematic three-point lighting»,
+  «practical sources only», «moody low-key lighting», «high-key bright»,
+  «neon accents».
+- **Композиция и план**: «wide establishing shot», «medium close-up»,
+  «extreme close-up», «over-the-shoulder», «Dutch angle», «symmetrical
+  Wes-Anderson framing», «rule of thirds».
+- **Цветовая палитра / grading**: «teal and orange», «desaturated muted
+  tones», «vintage Kodachrome», «cold blue tint», «warm sepia», «black
+  and white high contrast».
+- **Жанровый/режиссёрский референс**: «in the style of Christopher
+  Nolan», «Wes Anderson aesthetic», «David Fincher dark moody», «Wong
+  Kar-wai dreamy slow-motion», «Roger Deakins cinematography»,
+  «Studio Ghibli animation style», «1970s grindhouse film grain».
+- **Период/эпоха**: «1990s film aesthetic», «retro VHS look»,
+  «contemporary photoreal», «futuristic cyberpunk neon».
+- **Атмосфера**: «foggy atmosphere», «dust particles in the air»,
+  «volumetric god rays», «slight motion blur», «shallow depth of field
+  with bokeh».
+
+Пример: юзер сказал «давай сцену про детектива в нуар-фильме 50-х в
+дождливом Нью-Йорке».
+
+Создай сцену, и сразу после `add-board` добавь в `scene.json →
+settings.defaultPrompts`:
+
+```json
+[
+  { "id": "...", "text": "1950s film noir aesthetic, black and white high contrast, dramatic shadows", "kinds": ["image","video"], "enabled": true },
+  { "id": "...", "text": "rainy New York street, wet asphalt reflecting neon signs, foggy atmosphere", "kinds": ["image","video"], "enabled": true },
+  { "id": "...", "text": "anamorphic lens, shallow depth of field, cinematic composition", "kinds": ["image","video"], "enabled": true }
+]
+```
+
+Раздели на 2-4 prompt'а (а не один длинный) — юзер потом сможет временно
+выключить какой-то один в gen-modal'е (например прохладную палитру для
+конкретной картинки, оставив остальное).
+
+После создания сцены **сообщи юзеру** что defaultPrompts настроены, и
+покажи текстом что именно — чтобы он мог поправить.
+
+#### Раскадровка: разноси повторяющееся в @-ссылки или defaultPrompts
+
+Когда юзер просит **раскадровку** (storyboard) — серию кадров одной
+сцены/эпизода — **не дублируй общие части в каждый промпт**. Вместо
+повторения извлекай их одним из двух способов:
+
+**1. Persistent описания → отдельные ноды (text/image) + @-ссылки.**
+
+Если в каждом кадре повторяется один и тот же **персонаж, локация,
+объект, реквизит** — заведи отдельную text/image-ноду и в промптах
+кадров ссылайся на неё через `@имя`. CLI и UI резолвят `[@имя]` в
+полный текст ноды (или прикладывают image как референс) на этапе
+генерации.
+
+Пример. Юзер просит раскадровку «детектив идёт по улице, видит труп,
+звонит партнёру». Не пиши в каждый промпт «молодой детектив в потрёпанном
+сером плаще с блокнотом, тёмные волосы, усталое лицо». Вместо:
+
+```bash
+# Сначала — text-нода с описанием персонажа.
+kingkont add-node <project> <board> --kind=text --name="Анна-детектив" \
+  --text="Молодая женщина-следователь лет 30, потрёпанный серый плащ, \
+тёмные волосы собраны в хвост, усталое лицо, в руках блокнот."
+
+# Потом каждый кадр — короткий промпт с @-ссылкой:
+kingkont gen <project> <board> --kind=image --name="кадр-1" \
+  --prompt="[@Анна-детектив] идёт вдоль кирпичной стены, ночь, дождь" \
+  --refs="@Анна-детектив"
+
+kingkont gen <project> <board> --kind=image --name="кадр-2" \
+  --prompt="[@Анна-детектив] склоняется над телом, освещение от уличного фонаря" \
+  --refs="@Анна-детектив"
+```
+
+Это даёт **визуальную консистентность** (модель видит то же описание),
+плюс если юзер захочет уточнить персонажа — поправит ОДНУ ноду, не все
+кадры.
+
+**2. Universal стиль/съёмка → defaultPrompts сцены.**
+
+Если повторяется НЕ конкретный объект, а **как мы снимаем эту сцену**
+(освещение, камера, цветокор, жанр) — кладёшь в `settings.defaultPrompts`
+(см. раздел выше про defaultPrompts). Каждый кадр потом не нуждается в
+этих словах — они автоматически префиксуются ко всем генерациям.
+
+Чек-лист при раскадровке:
+
+- [ ] Персонажи / локации / реквизит описаны как text/image-ноды → ссылки `@`
+- [ ] Стиль съёмки (камера / свет / палитра / жанр) → `settings.defaultPrompts`
+- [ ] Промпт КАДРА содержит ТОЛЬКО что отличает его от других — действие,
+      ракурс, момент в кадре
+
+Если соблюсти оба правила — типичный кадр умещается в одну фразу
+(«[@Анна-детектив] открывает дверь»), и вся сцена выглядит цельно.
+
 ## ⚠️ Text-ноды — генерируй САМ, не через `kingkont gen --kind=text`
 
 Ты — Claude. Когда юзер просит «напиши диалог», «придумай реплику»,