kingkont 0.20.7 → 0.20.9

package/renderer/drawings.js

@@ -0,0 +1,259 @@
+// renderer/drawings.js — рисование стрелок на холсте.
+//
+// Юзерская команда: «стрелка это нода». Поэтому drag по холсту создаёт
+// обычную ноду `type:'drawing'` со своим bbox + points. Дальше всё что
+// можно делать с нодой работает «бесплатно»: select, drag, Backspace/×,
+// Cmd-Z (через pushHistory ДО мутации), сохранение в scene.json.
+//
+// 3 инструмента (toolbar [data-draw-tool="…"]):
+//   • pencil — тонкая серая линия
+//   • lead   — средне-чёрная
+//   • paint  — толстая жёлтая
+//
+// Хранение в node:
+//   { id, type:'drawing', tool, x, y, width, height, points: [[relX, relY],…] }
+// points в системе bbox (0,0 = node.x, node.y). При drag меняется только x/y.
+//
+// API (window.boardDrawings):
+//   setTool(name)          — включить/выключить режим
+//   renderInto(node, el)   — добавить <svg> внутрь node-элемента (зовёт board.js
+//                            из createNodeEl)
+//   smoothPath / arrowHead — экспортированы для возможной кастомизации.
+
+(function () {
+  const SVG_NS = 'http://www.w3.org/2000/svg';
+  const _draw = { tool: null, current: null };
+
+  function _state() { try { return state; } catch { return null; } }
+
+  function _canvasCoord(ev) {
+    const c = document.getElementById('canvas');
+    if (!c) return { x: ev.clientX, y: ev.clientY };
+    const r = c.getBoundingClientRect();
+    const sx = c.offsetWidth ? r.width / c.offsetWidth : 1;
+    const sy = c.offsetHeight ? r.height / c.offsetHeight : 1;
+    return { x: (ev.clientX - r.left) / (sx || 1), y: (ev.clientY - r.top) / (sy || 1) };
+  }
+
+  // Catmull-Rom → cubic bezier для мягких линий.
+  function smoothPath(pts) {
+    if (!pts || pts.length === 0) return '';
+    if (pts.length === 1) return `M ${pts[0][0]} ${pts[0][1]}`;
+    if (pts.length === 2) return `M ${pts[0][0]} ${pts[0][1]} L ${pts[1][0]} ${pts[1][1]}`;
+    let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
+    for (let i = 0; i < pts.length - 1; i++) {
+      const p0 = pts[i - 1] || pts[i];
+      const p1 = pts[i];
+      const p2 = pts[i + 1];
+      const p3 = pts[i + 2] || p2;
+      const c1x = p1[0] + (p2[0] - p0[0]) / 6;
+      const c1y = p1[1] + (p2[1] - p0[1]) / 6;
+      const c2x = p2[0] - (p3[0] - p1[0]) / 6;
+      const c2y = p2[1] - (p3[1] - p1[1]) / 6;
+      d += ` C ${c1x.toFixed(1)} ${c1y.toFixed(1)}, ${c2x.toFixed(1)} ${c2y.toFixed(1)}, ${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`;
+    }
+    return d;
+  }
+
+  function arrowHead(pts, size) {
+    if (!pts || pts.length < 2) return null;
+    const last = pts[pts.length - 1];
+    let prev = null;
+    for (let i = pts.length - 2; i >= 0; i--) {
+      if (Math.hypot(last[0] - pts[i][0], last[1] - pts[i][1]) > 12) { prev = pts[i]; break; }
+    }
+    if (!prev) prev = pts[0];
+    const ang = Math.atan2(last[1] - prev[1], last[0] - prev[0]);
+    const len = size || 14, w = (size || 14) * 0.55;
+    const ax = last[0] - len * Math.cos(ang);
+    const ay = last[1] - len * Math.sin(ang);
+    const lx = ax + w * Math.cos(ang + Math.PI / 2);
+    const ly = ay + w * Math.sin(ang + Math.PI / 2);
+    const rx = ax - w * Math.cos(ang + Math.PI / 2);
+    const ry = ay - w * Math.sin(ang + Math.PI / 2);
+    return `${last[0].toFixed(1)},${last[1].toFixed(1)} ${lx.toFixed(1)},${ly.toFixed(1)} ${rx.toFixed(1)},${ry.toFixed(1)}`;
+  }
+
+  function toolStyle(tool) {
+    return ({
+      pencil: { color: '#bbb', width: 1.5, opacity: 0.8, headSize: 10 },
+      lead:   { color: '#2b2b2b', width: 2.6, opacity: 0.92, headSize: 13 },
+      paint:  { color: '#e8b730', width: 5, opacity: 0.95, headSize: 18 },
+    })[tool] || { color: '#888', width: 2, opacity: 1, headSize: 12 };
+  }
+
+  // Рендер SVG внутрь node-элемента. Зовётся из board.js createNodeEl
+  // (когда node.type === 'drawing'). Идемпотентно — старый <svg.drawing-svg>
+  // удаляется перед вставкой нового.
+  function renderInto(node, el) {
+    const old = el.querySelector('svg.drawing-svg');
+    if (old) old.remove();
+    const w = node.width || 200, h = node.height || 100;
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('class', 'drawing-svg');
+    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+    svg.setAttribute('preserveAspectRatio', 'none');
+    svg.style.cssText = 'display:block;width:100%;height:100%;overflow:visible;pointer-events:none;';
+    const st = toolStyle(node.tool);
+    const color = node.color || st.color;
+    const line = document.createElementNS(SVG_NS, 'path');
+    line.setAttribute('class', 'line');
+    line.setAttribute('d', smoothPath(node.points || []));
+    line.setAttribute('fill', 'none');
+    line.setAttribute('stroke', color);
+    line.setAttribute('stroke-width', st.width);
+    line.setAttribute('stroke-opacity', st.opacity);
+    line.setAttribute('stroke-linecap', 'round');
+    line.setAttribute('stroke-linejoin', 'round');
+    svg.appendChild(line);
+    if (node.arrow !== false) {
+      const head = arrowHead(node.points || [], st.headSize);
+      if (head) {
+        const tri = document.createElementNS(SVG_NS, 'polygon');
+        tri.setAttribute('class', 'head');
+        tri.setAttribute('points', head);
+        tri.setAttribute('fill', color);
+        tri.setAttribute('opacity', st.opacity);
+        svg.appendChild(tri);
+      }
+    }
+    el.appendChild(svg);
+    return svg;
+  }
+
+  // === Temp-preview во время draw'а. SVG-overlay вне node-системы. ========
+  let _previewEl = null;
+  function _ensurePreview() {
+    let svg = document.getElementById('drawing-preview-svg');
+    if (svg) return svg;
+    const c = document.getElementById('canvas');
+    if (!c) return null;
+    svg = document.createElementNS(SVG_NS, 'svg');
+    svg.id = 'drawing-preview-svg';
+    svg.setAttribute('width', '6000');
+    svg.setAttribute('height', '4000');
+    svg.setAttribute('class', 'drawing-preview');
+    svg.style.cssText = 'position:absolute;left:0;top:0;pointer-events:none;z-index:1000;';
+    c.appendChild(svg);
+    return svg;
+  }
+  function _updatePreview(points, tool) {
+    const svg = _ensurePreview();
+    if (!svg) return;
+    if (_previewEl) _previewEl.remove();
+    const st = toolStyle(tool);
+    const g = document.createElementNS(SVG_NS, 'g');
+    const line = document.createElementNS(SVG_NS, 'path');
+    line.setAttribute('d', smoothPath(points));
+    line.setAttribute('fill', 'none');
+    line.setAttribute('stroke', st.color);
+    line.setAttribute('stroke-width', st.width);
+    line.setAttribute('stroke-opacity', st.opacity);
+    line.setAttribute('stroke-linecap', 'round');
+    line.setAttribute('stroke-linejoin', 'round');
+    g.appendChild(line);
+    const head = arrowHead(points, st.headSize);
+    if (head) {
+      const tri = document.createElementNS(SVG_NS, 'polygon');
+      tri.setAttribute('points', head);
+      tri.setAttribute('fill', st.color);
+      tri.setAttribute('opacity', st.opacity);
+      g.appendChild(tri);
+    }
+    svg.appendChild(g);
+    _previewEl = g;
+  }
+  function _clearPreview() {
+    if (_previewEl) { _previewEl.remove(); _previewEl = null; }
+  }
+
+  function setTool(tool) {
+    if (_draw.tool === tool) tool = null;
+    _draw.tool = tool;
+    const c = document.getElementById('canvas');
+    if (c) c.style.cursor = tool ? 'crosshair' : '';
+    document.querySelectorAll('[data-draw-tool]').forEach(b => {
+      b.classList.toggle('active', !!tool && b.dataset.drawTool === tool);
+    });
+  }
+
+  function _onMouseDown(e) {
+    if (!_draw.tool) return;
+    if (e.button !== 0) return;
+    if (e.target.closest('.node')) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const { x, y } = _canvasCoord(e);
+    _draw.current = { tool: _draw.tool, points: [[x, y]] };
+    _updatePreview(_draw.current.points, _draw.current.tool);
+    document.addEventListener('mousemove', _onMouseMove);
+    document.addEventListener('mouseup', _onMouseUp, { once: true });
+  }
+
+  function _onMouseMove(e) {
+    if (!_draw.current) return;
+    const { x, y } = _canvasCoord(e);
+    const last = _draw.current.points[_draw.current.points.length - 1];
+    if (Math.hypot(x - last[0], y - last[1]) < 1.5) return;
+    _draw.current.points.push([x, y]);
+    _updatePreview(_draw.current.points, _draw.current.tool);
+  }
+
+  async function _onMouseUp() {
+    document.removeEventListener('mousemove', _onMouseMove);
+    _clearPreview();
+    if (!_draw.current) return;
+    const pts = _draw.current.points;
+    const tool = _draw.current.tool;
+    _draw.current = null;
+    if (pts.length < 3) return;   // случайный клик → игнор
+    // BBox + relative-points + padding под линию и arrowhead.
+    const PAD = 22;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (const [x, y] of pts) {
+      if (x < minX) minX = x; if (x > maxX) maxX = x;
+      if (y < minY) minY = y; if (y > maxY) maxY = y;
+    }
+    const x = Math.round(minX - PAD);
+    const y = Math.round(minY - PAD);
+    const width = Math.round(maxX - minX + PAD * 2);
+    const height = Math.round(maxY - minY + PAD * 2);
+    const rel = pts.map(([px, py]) => [+(px - x).toFixed(1), +(py - y).toFixed(1)]);
+    const node = {
+      id: crypto.randomUUID(),
+      type: 'drawing',
+      tool, x, y, width, height, points: rel,
+    };
+    const board = _state()?.currentBoard;
+    if (!board) return;
+    // Snapshot ДО мутации → Cmd-Z вернёт состояние без этой ноды.
+    if (typeof window.pushHistory === 'function') {
+      window.pushHistory('Рисование стрелки');
+    }
+    board.metadata.nodes.push(node);
+    // Рендерим ноду без полного renderCanvas (быстрее).
+    if (typeof window.createNodeEl === 'function') {
+      const el = await window.createNodeEl(node);
+      const canvas = document.getElementById('canvas');
+      if (canvas) canvas.appendChild(el);
+    }
+    if (typeof window.scheduleSave === 'function') window.scheduleSave();
+  }
+
+  function _onKeyDown(e) {
+    if (e.key === 'Escape' && _draw.tool) setTool(null);
+  }
+
+  window.boardDrawings = { setTool, renderInto, smoothPath, arrowHead, toolStyle };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.getElementById('canvas');
+    if (canvas) canvas.addEventListener('mousedown', _onMouseDown, true);
+    document.addEventListener('keydown', _onKeyDown);
+    document.querySelectorAll('[data-draw-tool]').forEach(b => {
+      b.addEventListener('click', () => setTool(b.dataset.drawTool));
+    });
+    // 🗑 «Очистить» из старой версии больше нет — каждая стрелка теперь
+    // нода, удаляется через Backspace/× или Cmd-Z прямо после draw'а.
+  });
+})();

package/renderer/generate.js

@@ -7,14 +7,19 @@
 // важен: см. <script> теги внизу index.html.
 
 // =================== Add-menu (dblclick / ПКМ по пустому холсту) ===================
+// В view-only режиме (расшаренный/публичный шаблон) меню «создать ноду»
+// бессмысленно — юзер всё равно не может ничего сохранить. Не показываем.
+function _isViewOnly() { return document.body.classList.contains('view-only-mode'); }
 canvasWrap.addEventListener('dblclick', e => {
   if (!state.currentBoard) return;
+  if (_isViewOnly()) return;
   if (e.target.closest('.node, .conn, .resize-handle, .anchor')) return;
   if (e.target.closest('#addMenu, .modal')) return;
   showAddMenu(e.clientX, e.clientY);
 });
 canvasWrap.addEventListener('contextmenu', e => {
   if (!state.currentBoard) return;
+  if (_isViewOnly()) return;
   if (e.target.closest('.node, .conn, .resize-handle, .anchor, button, input, textarea, select')) return;
   if (e.target.closest('#addMenu, .modal')) return;
   e.preventDefault();
@@ -537,10 +542,17 @@ function _mimeFromFilename(name) {
   })[ext] || 'image/jpeg';
 }
 
+// Кэш URL'ов картинок-референсов: ключ = filename+size+mtime → CDN url.
+// Чтобы не перезаливать одну и ту же картинку при каждом text-gen.
+const _imageRefUploadCache = new Map();
+
 async function _imageRefToDataUrl(ref) {
   // Возвращает {url, size, mime} или {error}. Раньше тихо возвращал null
   // на любую ошибку → дебаг был невозможен (юзер видел «картинка не
   // подаётся», но в логах ничего).
+  // Большие картинки (>400KB) грузим в CDN через /api/upload вместо data URL —
+  // иначе base64-payload раздувает контекст модели и Claude возвращает
+  // «prompt too long: 215k tokens > 200k».
   try {
     if (!ref || !ref.file) return { error: 'no file in ref' };
     if (!ref.boardHandle || typeof ref.boardHandle.getDirectoryHandle !== 'function') {
@@ -555,9 +567,34 @@ async function _imageRefToDataUrl(ref) {
     const mime = file.type && file.type !== 'application/octet-stream'
       ? file.type
       : _mimeFromFilename(ref.file);
+
+    // Большая картинка → upload to CDN, возвращаем https-url. Кэшируем по
+    // size+mtime — повторные text-gen с той же нодой не перезагружают.
+    if (file.size > 400 * 1024) {
+      const cacheKey = `${ref.file}|${file.size}|${file.lastModified || 0}`;
+      let cdnUrl = _imageRefUploadCache.get(cacheKey);
+      if (!cdnUrl) {
+        const buf = await file.arrayBuffer();
+        const filename = ref.file.split('/').pop() || 'ref.jpg';
+        const r = await fetch('/api/upload', {
+          method: 'POST',
+          headers: { 'Content-Type': mime, 'X-File-Name': encodeURIComponent(filename) },
+          body: buf,
+        });
+        if (!r.ok) {
+          return { error: 'upload failed: HTTP ' + r.status };
+        }
+        const j = await r.json();
+        if (!j.url) return { error: 'upload вернул без url' };
+        cdnUrl = j.url;
+        _imageRefUploadCache.set(cacheKey, cdnUrl);
+      }
+      return { url: cdnUrl, size: file.size, mime };
+    }
+
+    // Маленькая картинка → data URL (1 round-trip меньше).
     let url;
     if (file.type === mime) {
-      // type уже правильный — FileReader даст правильный data URL.
       url = await new Promise((res, rej) => {
         const r = new FileReader();
         r.onload = () => res(r.result);
@@ -565,7 +602,6 @@ async function _imageRefToDataUrl(ref) {
         r.readAsDataURL(file);
       });
     } else {
-      // type пустой/неправильный — пересобираем Blob с явным type.
       const buf = await file.arrayBuffer();
       const blob = new Blob([buf], { type: mime });
       url = await new Promise((res, rej) => {
@@ -1931,7 +1967,7 @@ async function startGenerationJob(node, kind, prompt, mediaRefs, boardHandle, bK
     const submitTimer = setInterval(() => {
       if (state.jobs.get(node.id) !== job) return;
       const sec = Math.round((Date.now() - submitStart) / 1000);
-      logJob(node.id, `submit still pending... ${sec}s (KIE может тормозить)`);
+      logJob(node.id, `submit still pending... ${sec}s`);
       mutateNode(bKey, boardHandle, node.id, n => {
         n.generated = { ...(n.generated || {}), state: `submitting (${sec}s)` };
       }).catch(() => {});
@@ -2157,7 +2193,7 @@ async function pollJob(job, nodeId, bKey, boardHandle, kind) {
       return;
     }
     if (pd.status === 'error') {
-      logJob(nodeId, `KIE error: ${pd.error || 'unknown'}`);
+      logJob(nodeId, `provider error: ${pd.error || 'unknown'}`);
       throw new Error(pd.error || 'generation failed');
     }
     if (pd.state) {
@@ -2174,7 +2210,7 @@ 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...',
+    'uploading-refs': 'Загружаю референсы…',
     'submitting': 'Отправляю задачу...',
     'queued': 'В очереди...',
     'waiting': 'В очереди...',

package/renderer/notifyPanel.js

@@ -617,6 +617,9 @@
       ws.onclose = () => setTimeout(_connect, 5000);
       ws.onerror = () => {};
     }
-    _connect();
+    // /ws живёт только в Electron-server'е (lib/wsHub.js → server.js). В web
+    // job'ы запускаются client-side (web-shim → polling chatium API), push-канал
+    // не нужен. Без guard'а — постоянные failed-WSS попытки на kingkont.ru/ws.
+    if (!window.__KINGKONT_WEB__) _connect();
   });
 })();

package/renderer/settings.js

@@ -203,7 +203,7 @@ async function renderNodeBody(node, body) {
     wrap.className = 'gen-pending';
     const sp = document.createElement('div'); sp.className = 'spinner lg';
     const STATE_LABELS = {
-      'uploading-refs': 'Загружаю референсы в KIE...',
+      'uploading-refs': 'Загружаю референсы…',
       'submitting': 'Отправляю задачу...',
       'queued': 'В очереди...',
       'waiting': 'В очереди...',

package/renderer/state.js

@@ -159,23 +159,31 @@ window.bgJobEnd = bgJobEnd;
 window.bgJobsAll = bgJobsAll;
 
 // === SYSTEM NOTIFICATION (HTML5 Notification API) ===
-// Просим разрешение eagerly при старте приложения чтобы первое уведомление
-// уже работало (без race с первой генерацией).
+// Запрос разрешения ТОЛЬКО из user-gesture'а (Chrome иначе кидает
+// console.error: «Notification prompting can only be done from a user
+// gesture»). Привязываемся к первому click/keydown — он считается жестом.
 let _notifPermAsked = false;
 if (typeof Notification !== 'undefined' && Notification.permission === 'default') {
-  // Откладываем чуть-чуть — иначе диалог появляется до того как юзер увидел UI.
-  setTimeout(() => {
+  function _askNotifOnGesture() {
+    if (_notifPermAsked) return;
     _notifPermAsked = true;
-    Notification.requestPermission().catch(() => {});
-  }, 2000);
+    try { Notification.requestPermission().catch(() => {}); } catch {}
+    document.removeEventListener('click', _askNotifOnGesture);
+    document.removeEventListener('keydown', _askNotifOnGesture);
+  }
+  document.addEventListener('click', _askNotifOnGesture, { once: false });
+  document.addEventListener('keydown', _askNotifOnGesture, { once: false });
 }
 async function systemNotify(title, body, opts = {}) {
   if (typeof Notification === 'undefined') return null;
   let perm = Notification.permission;
-  if (perm === 'default' && !_notifPermAsked) {
-    _notifPermAsked = true;
-    try { perm = await Notification.requestPermission(); } catch {}
-  }
+  // Chrome требует чтобы requestPermission вызывался ТОЛЬКО из user-gesture'а
+  // (click/keydown handler). systemNotify часто зовут из фоновых событий
+  // (generation done, WS push) → запрос упадёт с console.error «Notification
+  // prompting can only be done from a user gesture». Без granted перм-а
+  // OS-нотификации не работают, но в notifyPanel событие УЖЕ добавлено.
+  // Если default — silently skip; запросим permission на первом «реальном»
+  // user-клике (см. _wireNotifPermPrompt ниже).
   if (perm !== 'granted') {
     // Без OS-нотификации — событие УЖЕ добавлено в notifyPanel через
     // showToast-wrapper (single-source-of-truth). Раньше тут был fallback

package/renderer/styles.css

@@ -171,7 +171,10 @@
   .sidebar-header .brand .sub.has-project {
     color: #fff; text-transform: none; letter-spacing: 0;
     font-size: 18px; font-weight: 600; line-height: 1.2;
-    word-break: break-word;
+    /* Всегда одна строка — иначе после загрузки имя проекта переносится
+       и шапка прыгает вверх-вниз. ellipsis даёт `…` если не помещается. */
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    min-width: 0;
   }
   /* Имя выбранной сцены спрятано в шапке (юзер: «название выбранной сцены
      скрывай»). Сама подсветка сцены остаётся в sidebar-list. */
@@ -492,6 +495,11 @@
   .welcome-recent-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    /* grid-auto-rows: max-content — иначе cards (у которых дети все
+       position:absolute → 0 intrinsic height) получают row-height ~18px,
+       и aspect-ratio:4/3 рисует контент за пределы трека. Соседние cards
+       визуально наезжают друг на друга — именно это юзер видел в Electron. */
+    grid-auto-rows: max-content;
     gap: 16px;
     overflow-y: auto; overflow-x: hidden;
     padding: 8px 52px 24px;
@@ -1054,6 +1062,82 @@
   .connections-layer .line { stroke: #6a8aaa; stroke-width: 2; fill: none; pointer-events: none; }
   .connections-layer .conn:hover .line { stroke: #f88; stroke-width: 3; }
   .connections-layer .temp-line { stroke: #6a8aaa; stroke-width: 2; stroke-dasharray: 6 4; fill: none; pointer-events: none; }
+  /* === Drawing-нода (стрелка). ============================================
+     `.drawing-node` — обычная .node, но без header/body/anchor (см.
+     createNodeEl branch). Прозрачный фон, без border'а в нормальном
+     состоянии — видна только SVG-линия. На select подсвечиваем bbox
+     стандартным outline'ом для консистентности с другими нодами. */
+  .node.drawing-node {
+    background: transparent; border: none; box-shadow: none; padding: 0;
+    overflow: visible; cursor: move;
+  }
+  .node.drawing-node .drawing-svg { display: block; width: 100%; height: 100%; }
+  .node.drawing-node.selected,
+  .node.drawing-node:hover {
+    outline: 1px dashed rgba(106,138,170,0.6); outline-offset: 2px;
+  }
+  .node.drawing-node.selected {
+    outline: 1.5px solid #4af; outline-offset: 2px;
+  }
+  /* Toolbar drawing-buttons: active — подсветка как «нажата». */
+  .toolbar [data-draw-tool] { font-size: 16px; padding: 4px 8px; }
+  .toolbar [data-draw-tool].active {
+    background: #3a5273; color: #fff; border-color: #4a6a9a;
+    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
+  }
+  .toolbar-sep { display: inline-block; width: 1px; height: 20px; background: #333; margin: 0 6px; vertical-align: middle; }
+
+  /* === Edit-affordances visibility ========================================
+     Юзер: «вид по умолчанию должен быть без элементов управления, они
+     должны появляться потом». Поэтому:
+       - .kk-edit-only по умолчанию СКРЫТО.
+       - body.edit-mode реstoreит дефолтный display.
+     edit-mode выставляется в cloudProjects.open() когда canModify=true.
+     Для view-only mode edit-mode НЕ выставляется → все edit-кнопки остаются
+     спрятанными, в toolbar показывается inline-баннер (.kk-view-only-banner).
+  */
+  .kk-edit-only { display: none !important; }
+  body.edit-mode .kk-edit-only { display: revert !important; }
+
+  /* === View-only mode (template-share / canModify=false) =================
+     Sidebar остаётся (юзер навигирует по сценам), но edit-секции уже скрыты
+     через .kk-edit-only выше. В toolbar показываем inline-banner вместо
+     отсутствующих edit-кнопок. */
+  .kk-view-only-banner { display: none; }
+  body.view-only-mode .kk-view-only-banner {
+    display: flex; align-items: center; gap: 14px;
+    flex: 1; min-width: 0;
+    padding: 4px 14px; margin: -4px 0;
+    background: linear-gradient(90deg,#3a5f8c,#4a8ad6);
+    color: #fff; border-radius: 6px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-size: 14px;
+  }
+  .kk-view-only-banner .kk-vo-label { opacity: 0.95; }
+  .kk-view-only-banner #viewOnlyCloneBtn {
+    padding: 6px 14px; background: #fff; color: #3a5f8c;
+    border: none; border-radius: 5px; cursor: pointer;
+    font-weight: 600; font-size: 13px;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+  }
+  .kk-view-only-banner #viewOnlyCloneBtn:hover { background: #f0f4fa; }
+  /* В view-only ноды некликабельны — без drag/edit/resize/anchor.
+     Картинки и видео по-прежнему кликабельны для fullscreen-просмотра. */
+  body.view-only-mode .node {
+    cursor: default !important; pointer-events: none;
+  }
+  body.view-only-mode .node img,
+  body.view-only-mode .node video { pointer-events: auto; cursor: zoom-in; }
+  body.view-only-mode .connections-layer .hit { pointer-events: none !important; }
+  /* Дополнительно прячем in-node edit-аффордансы (× delete, resize-handle,
+     anchor, draft-«Запустить» кнопки) — они генерятся JS'ом и не получают
+     .kk-edit-only автоматом. */
+  body.view-only-mode .node .node-header .delete,
+  body.view-only-mode .node .resize-handle,
+  body.view-only-mode .node .label-width-handle,
+  body.view-only-mode .node .anchor,
+  body.view-only-mode .node .gen-pending,
+  body.view-only-mode .node-footer { display: none !important; }
 
   /* Меню «что добавить» */
   .add-menu {

package/server.js

@@ -462,6 +462,33 @@ async function handleProjectDelete(res, id) {
   } catch (e) { sendError(res, e, 502); }
 }
 
+// Прокси /api/proj/<action> → https://kingkont.ru/proj_<action>. Использует
+// сохранённый Bearer-токен юзера (тот же что для всех chatium-вызовов).
+// Сохраняем method, query-string и тело, передаём response как есть.
+async function handleChatiumProjProxy(req, res, action, url) {
+  const s = getSettings();
+  if (!s.useChatium || !s.chatium?.token || !s.chatium?.base) {
+    return sendError(res, new Error('Войдите в KingKont — нет токена'), 401);
+  }
+  try {
+    const target = `${s.chatium.base.replace(/\/$/, '')}/app/spaces/server/api/proj_${action}${url.search || ''}`;
+    const init = {
+      method: req.method,
+      headers: {
+        'Authorization': `Bearer ${s.chatium.token}`,
+        'Content-Type': 'application/json',
+      },
+    };
+    if (req.method === 'POST' || req.method === 'PUT') {
+      init.body = JSON.stringify(await readJson(req));
+    }
+    const r = await fetch(target, init);
+    const text = await r.text();
+    res.writeHead(r.status, { 'Content-Type': r.headers.get('content-type') || 'application/json' });
+    res.end(text);
+  } catch (e) { sendError(res, e, 502); }
+}
+
 // ---- Project texts (.md контент text-нод). --------------------------------
 // Зачем отдельный API: см. lib/providers.js → CHATIUM_PATHS.projectTexts.
 
@@ -715,6 +742,14 @@ async function _requestHandler(req, res) {
         if (req.method === 'DELETE') return handleProjectDelete(res, decodeURIComponent(m[1]));
       }
     }
+    // Share-management endpoints. Прозрачный прокси на chatium /proj_*
+    // (новые TS-файлы — обход модульного кеша исходного projects.ts).
+    // Действия: setPublic / share / unshare / shares / clone / sharedWithMe.
+    {
+      const m = url.pathname.match(/^\/api\/proj\/(setPublic|share|unshare|shares|clone|sharedWithMe)$/);
+      if (m) return handleChatiumProjProxy(req, res, m[1], url);
+    }
+
     // Project texts (.md контент). Отдельная таблица на сервере; клиент
     // ссылается на записи по id из manifest'а board.texts[relPath] = textId.
     if (req.method === 'POST' && url.pathname === '/api/project-texts') return handleProjectTextCreate(req, res);