kingkont 0.8.7 → 0.9.0

package/renderer/settings.js

@@ -347,6 +347,15 @@ async function renderNodeBody(node, body) {
     if (nodeEl) { _mediaHydrationObserver.unobserve(nodeEl); nodeEl.__hydrate = null; }
 
     if (node.type === 'audio') {
+      // Промпт (текст TTS) виден всегда — даже после генерации. Юзер
+      // должен понимать что говорит голос без открытия Settings-modal'я.
+      const promptText = node.generated?.rawPrompt || node.generated?.prompt;
+      if (promptText) {
+        const pp = document.createElement('div');
+        pp.className = 'audio-prompt';
+        pp.textContent = promptText;
+        body.appendChild(pp);
+      }
       const fname = document.createElement('div');
       fname.className = 'filename';
       fname.textContent = node.file;
@@ -416,7 +425,20 @@ async function renderNodeBody(node, body) {
           // Раньше "metadata" грузил chunk для duration/dimensions с каждой ноды на selectBoard.
           media.preload = 'none';
         }
-        media.addEventListener('mousedown', e => e.stopPropagation());
+        // Click на media-элементе = выбрать ноду (как клик по header'у).
+        // НЕ делаем preventDefault — иначе сломаются нативные video-controls
+        // (play/pause/seek). stopPropagation чтобы не запустился rubber-band
+        // селектор холста.
+        media.addEventListener('mousedown', e => {
+          e.stopPropagation();
+          if (e.metaKey || e.ctrlKey || e.shiftKey) {
+            toggleSelection(node.id);
+          } else if (!state.selectedNodeIds.has(node.id)) {
+            clearSelection();
+            state.selectedNodeIds.add(node.id);
+          }
+          renderSelection();
+        });
         // Заменяем placeholder ИЛИ ранее показанный thumbnail
         const target = (nodeEl && nodeEl.__thumbEl && nodeEl.__thumbEl.parentNode)
                      ? nodeEl.__thumbEl
@@ -497,6 +519,23 @@ async function renderNodeBody(node, body) {
       playRow.appendChild(playBtn);
       body.appendChild(playRow);
     }
+  } else if (node.type === 'image' && !node.file && (node.generated?.rawPrompt || node.generated?.prompt)) {
+    // Fallback: image-нода с промптом, но без файла (ещё не генерилась
+    // и status != 'draft'). Показываем preview-блок чтобы юзер видел
+    // что собирается генерироваться.
+    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 = '🖼';
+    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);
+    body.appendChild(wrap);
   }
 }
 

package/renderer/state.js

@@ -455,6 +455,11 @@ function getFileType(file) {
 
 const state = {
   filmHandle: null,
+  // Облачный проект: id записи в t_spaces_server_projects_K1 (если открыт
+  // cloud-проект, иначе null). filmHandle всё равно валидный (cloudFs-shim).
+  cloudProjectId: null,
+  // Есть несохранённые изменения (показываем «•» возле «Сохранить на сервер»).
+  cloudDirty: false,
   currentBoard: null,   // { kind, name, key, handle, metadata, urls }
   genKind: 'image',
   imageModel: localStorage.getItem('imageModel') || 'nano-banana-2',  // 'nano-banana-2' | 'nano-banana-pro' | 'grok' | ...

package/renderer/styles.css

@@ -230,15 +230,18 @@
     margin-bottom: 14px; text-align: center;
     flex-shrink: 0;
   }
-  /* Recents в горизонтальную ленту со скроллом. Карточки фиксированной
-     ширины чтобы scroll работал предсказуемо. */
+  /* Recents — плитка (responsive grid). Карточки фиксированной ширины,
+     заполняют ряд слева направо, при нехватке места переносятся. Скроллится
+     вертикально, если карточек много. */
   .welcome-recent-grid {
-    display: flex; flex-direction: row; gap: 16px;
-    overflow-x: auto; overflow-y: hidden;
-    padding: 8px 32px 24px;
-    scroll-snap-type: x proximity;
-  }
-  .welcome-recent-grid::-webkit-scrollbar { height: 8px; }
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 16px;
+    overflow-y: auto; overflow-x: hidden;
+    padding: 8px 52px 24px;
+    align-content: start;
+  }
+  .welcome-recent-grid::-webkit-scrollbar { width: 8px; }
 
   /* === Глобальные dark-scrollbars === */
   /* Firefox */
@@ -257,8 +260,9 @@
     background: #232323; border: 1px solid #333; border-radius: 8px;
     overflow: hidden; cursor: pointer; transition: border-color 0.12s, transform 0.12s;
     display: flex; flex-direction: column;
-    width: 240px; flex-shrink: 0;
-    scroll-snap-align: start;
+    /* Grid-layout: ширина задаётся grid-column'ом (responsive),
+       fixed-width убран. position:relative нужен для absolute-расположенного × delete. */
+    position: relative;
   }
   /* Карточка «Открыть проект» — стилизована под обычную recent-карточку,
      но контент не превью, а большая иконка + надпись. */
@@ -284,6 +288,18 @@
     color: #444; font-size: 32px;
   }
   .welcome-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  /* ☁-бейдж в углу обложки облачного проекта. Делает cloud/folder-проекты
+     визуально различимыми в общем grid'е (без необходимости второго рядa). */
+  .welcome-card-thumb { position: relative; }
+  .welcome-card-cloud-badge {
+    position: absolute; right: 6px; bottom: 6px;
+    background: rgba(20, 30, 50, 0.85); color: #9cf;
+    border: 1px solid rgba(160, 200, 255, 0.35);
+    border-radius: 50%; width: 22px; height: 22px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 13px; line-height: 1;
+    backdrop-filter: blur(2px);
+  }
   .welcome-card-meta { padding: 8px 12px; }
   .welcome-card-name { font-size: 13px; color: #ddd; word-break: break-all; }
   .welcome-card-ts { font-size: 11px; color: #666; margin-top: 2px; }
@@ -731,8 +747,16 @@
   .fs-modal #fsClose {
     position: absolute; top: 16px; right: 16px;
     background: rgba(0,0,0,0.6); border: 1px solid #444; color: #fff;
-    font-size: 22px; line-height: 1; padding: 4px 12px; border-radius: 4px;
+    font-size: 22px; line-height: 1;
+    /* Увеличен hit-area: квадрат 40×40, центрированный «×». Раньше padding
+       был 4px 12px → размер ~30×30, и нижне-правые пиксели оказывались под
+       <img>/<video> в .fs-stage (одна стека, нет z-index). z-index:1100
+       гарантирует что × ВСЕГДА сверху всего внутри fs-modal. */
+    width: 40px; height: 40px;
+    display: flex; align-items: center; justify-content: center;
+    padding: 0; border-radius: 4px;
     cursor: pointer;
+    z-index: 1100;
   }
   .fs-modal #fsClose:hover { background: rgba(255,68,68,0.7); }
 
@@ -779,6 +803,7 @@
     font-size: 36px; line-height: 1; padding: 4px 14px; border-radius: 6px;
     cursor: pointer; user-select: none;
     transition: background 0.12s;
+    z-index: 1050;
   }
   .fs-modal .fs-nav:hover { background: rgba(0,0,0,0.85); }
   .fs-modal .fs-nav:disabled { opacity: 0.3; cursor: default; }
@@ -945,6 +970,44 @@
   .preview-panel .timeline-preview-img.hidden,
   .preview-panel .timeline-preview.hidden { display: none; }
 
+  /* Overlay-контролы поверх preview-стейджа. Видимы пока есть клипы.
+     Полу-прозрачный фон + лёгкий blur — читаемо поверх любой картинки.
+     Контейнер не переносит на новую строку (white-space:nowrap) даже на
+     узком preview — лучше горизонтальный скролл, чем разорванный таймер. */
+  .preview-controls {
+    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 14px; border-radius: 999px;
+    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.1);
+    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
+    z-index: 10; opacity: 0.45; transition: opacity 0.15s;
+    white-space: nowrap; flex-wrap: nowrap;
+    max-width: calc(100% - 16px);
+  }
+  .preview-stage:hover .preview-controls,
+  .preview-controls.is-playing { opacity: 1; }
+  .preview-controls.hidden { display: none; }
+  .preview-controls button {
+    background: transparent; border: none; color: #fff;
+    font-size: 24px; line-height: 1;
+    width: 32px; height: 32px;
+    display: flex; align-items: center; justify-content: center;
+    padding: 0; cursor: pointer; border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .preview-controls button:hover { background: rgba(255,255,255,0.15); }
+  .preview-controls .preview-time {
+    font-family: ui-monospace, 'SF Mono', monospace;
+    font-size: 15px; color: #fff;
+    min-width: 90px; text-align: center;
+    white-space: nowrap; flex-shrink: 0;
+  }
+  /* «×» закрытия — чуть тоньше play-кнопки чтобы не доминировал визуально. */
+  .preview-controls #previewCloseBtn {
+    font-size: 20px; opacity: 0.75;
+  }
+  .preview-controls #previewCloseBtn:hover { opacity: 1; background: rgba(255,68,68,0.55); }
+
   /* === Таймлайн (нижняя панель, full-width) === */
   .timeline-panel {
     border-top: 1px solid #333; background: #1c1c1c;
@@ -1237,8 +1300,20 @@
     background: #141414;
   }
   .gen-pending .prompt-preview {
-    font-size: 11px; color: #aaa; line-height: 1.4; text-align: center;
-    max-height: 60px; overflow-y: auto; word-break: break-word;
+    font-size: 12px; color: #bbb; line-height: 1.4; text-align: center;
+    /* Большой max-height — на нодах побольше виден весь промпт; на маленьких
+       — обрезается со скроллом. Раньше было 60px (~3 строки) — мало. */
+    max-height: 240px; overflow-y: auto; word-break: break-word;
+    width: 100%;
+  }
+  /* Промпт под filename аудио-ноды (постоянно — даже после генерации).
+     Для TTS юзеру важно видеть текст без открытия Settings-modal'я. */
+  .node-body .audio-prompt {
+    font-size: 11px; color: #aaa; line-height: 1.4;
+    margin: 4px 0 6px;
+    max-height: 80px; overflow-y: auto; word-break: break-word;
+    background: #1a1a1a; padding: 6px 8px; border-radius: 4px;
+    border: 1px solid #2a2a2a;
   }
   .gen-pending .state-text { font-size: 11px; color: #888; }
   .gen-error {
@@ -1248,15 +1323,20 @@
   }
   .gen-error button { margin-top: 8px; }
 
-  .empty {
+  /* Эта empty-overlay только для #emptyState (заглушка на пустом холсте).
+     Раньше селектор был `.empty` (глобально) — он ловил, например,
+     `.balance-info.empty` (модификатор «баланс=0») и делал её
+     position:absolute; inset:0 — pill растекалась во весь viewport.
+     Теперь специфично через id, конфликта нет. */
+  #emptyState {
     position: absolute; inset: 0;
     display: flex; align-items: center; justify-content: center;
     color: #666; font-size: 15px; flex-direction: column; gap: 14px;
     text-align: center; padding: 24px; pointer-events: none;
   }
-  .empty h3 { color: #aaa; font-size: 18px; }
-  .empty p { max-width: 420px; line-height: 1.6; }
-  .empty.hidden { display: none; }
+  #emptyState h3 { color: #aaa; font-size: 18px; }
+  #emptyState p { max-width: 420px; line-height: 1.6; }
+  #emptyState.hidden { display: none; }
 
   .unsupported { margin: auto; max-width: 540px; padding: 32px; background: #2a2a2a; border-radius: 12px; border: 1px solid #444; }
   .unsupported h1 { margin-bottom: 12px; }