@kolbo/mcp 1.103.0 → 1.104.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolbo/mcp",
-  "version": "1.103.0",
+  "version": "1.104.0",
   "description": "Kolbo AI MCP Server - Generate images, videos, music, speech, and sound effects from Claude Code",
   "main": "src/index.js",
   "bin": {

package/src/apps/html.js

@@ -62,7 +62,8 @@ var ICONS = {
   chevronDown: _svg('<path d="M6 9l6 6 6-6"/>'),
   chevronLeft: _svg('<path d="M15 18l-6-6 6-6"/>'),
   chevronRight: _svg('<path d="M9 18l6-6-6-6"/>'),
-  chevronUp: _svg('<path d="M18 15l-6-6-6 6"/>')
+  chevronUp: _svg('<path d="M18 15l-6-6-6 6"/>'),
+  expand: _svg('<path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/>')
 };
 // Media-kind → icon (accepts model kind / media_type strings).
 function kindIcon(kind) {
@@ -141,9 +142,12 @@ function monogram(name) {
   var ch = String(name || '').replace(/^[@#]+/, '').trim().charAt(0) || '?';
   return '<span class="k-mono-icon">' + esc(ch.toUpperCase()) + '</span>';
 }
-// In-widget preview overlay — every card (generation chips, media grid, list
-// rows) uses this so a DNA / reference / library thumb opens a popup in Kolbo
-// Code, Claude Code, Codex, and any other host. Host fullscreen is not required.
+// In-widget lightbox — every card (generation results, chips, media grid, list
+// rows) opens media here. It shows inside the card at once, then asks the host
+// for fullscreen: granted, it fills the host viewport; refused or unanswered,
+// the in-card popup still works (a click never depends on the host answering).
+// Any [data-peek] node opens it through ONE delegated listener, and the
+// lightbox pages through the other [data-peek] items in the same #stage.
 function ensurePeek() {
   if (el('peek')) return el('peek');
   var card = document.querySelector('.k-card') || document.body;
@@ -151,55 +155,116 @@ function ensurePeek() {
   box.id = 'peek';
   box.className = 'k-peek';
   box.hidden = true;
-  box.innerHTML = '<button type="button" class="k-peek-close" id="peek-close" aria-label="Close"></button>'
-    + '<img id="peek-img" alt="">'
-    + '<video id="peek-video" muted playsinline controls></video>'
-    + '<div class="k-peek-cap" id="peek-cap"></div>';
+  box.innerHTML = '<div class="k-peek-bar"><span class="k-peek-cap" id="peek-cap"></span>'
+    + '<span class="k-peek-count" id="peek-count"></span>'
+    + '<button type="button" class="k-peek-btn" id="peek-dl" aria-label="Download"></button>'
+    + '<button type="button" class="k-peek-btn" id="peek-close" aria-label="Close"></button></div>'
+    + '<div class="k-peek-stage" id="peek-stage"><img id="peek-img" alt="">'
+    // nofullscreen: host iframes are never granted allow="fullscreen", so the
+    // native button is always greyed out. The lightbox IS the fullscreen view.
+    + '<video id="peek-video" playsinline controls controlslist="nofullscreen"></video></div>'
+    + '<button type="button" class="k-peek-nav prev" id="peek-prev" aria-label="Previous"></button>'
+    + '<button type="button" class="k-peek-nav next" id="peek-next" aria-label="Next"></button>';
   card.appendChild(box);
   el('peek-close').innerHTML = ICONS.x;
+  el('peek-dl').innerHTML = ICONS.download;
+  el('peek-prev').innerHTML = ICONS.chevronLeft;
+  el('peek-next').innerHTML = ICONS.chevronRight;
   el('peek-close').onclick = function (e) { e.stopPropagation(); closePeek(); };
-  box.onclick = function (e) { if (e.target === box) closePeek(); };
+  el('peek-prev').onclick = function (e) { e.stopPropagation(); stepPeek(-1); };
+  el('peek-next').onclick = function (e) { e.stopPropagation(); stepPeek(1); };
+  el('peek-dl').onclick = function (e) {
+    e.stopPropagation();
+    var it = peekList[peekIndex];
+    if (it) window.kolbo.openLink(downloadUrl(it.dl || it.url));
+  };
+  box.onclick = function (e) { if (e.target === box || e.target === el('peek-stage')) closePeek(); };
   return box;
 }
 function peekAttrs(url, kind, cap) {
   if (!url) return '';
   return ' data-peek="' + esc(url) + '" data-peek-kind="' + esc(kind || 'image') + '" data-peek-cap="' + esc(cap || '') + '"';
 }
-function bindPeekHits(root) {
-  if (!root) return;
-  Array.prototype.forEach.call(root.querySelectorAll('[data-peek]'), function (node) {
-    node.onclick = function (e) {
-      e.preventDefault();
-      e.stopPropagation();
-      openPeek(node.getAttribute('data-peek'), node.getAttribute('data-peek-kind'), node.getAttribute('data-peek-cap'));
-    };
-  });
+function peekItem(node) {
+  return {
+    url: node.getAttribute('data-peek'),
+    kind: node.getAttribute('data-peek-kind') || 'image',
+    cap: node.getAttribute('data-peek-cap') || '',
+    dl: node.getAttribute('data-peek-dl') || ''
+  };
 }
-// Whether THIS peek took the iframe fullscreen (vs. opening inside a card the
-// user had already fullscreened) — only then does closing it hand the mode back.
+document.addEventListener('click', function (e) {
+  var node = e.target && e.target.closest && e.target.closest('[data-peek]');
+  if (!node || node.closest('#peek')) return;
+  // A control INSIDE a previewable tile (download, use, a player) keeps its own job.
+  var ctl = e.target.closest('button, a, audio, video[controls]');
+  if (ctl && ctl !== node && node.contains(ctl)) return;
+  e.preventDefault();
+  e.stopPropagation();
+  var scope = node.closest('#stage') || node.parentNode;
+  var seen = {};
+  var list = [];
+  Array.prototype.forEach.call(scope.querySelectorAll('[data-peek]'), function (n) {
+    var it = peekItem(n);
+    if (!it.url || seen[it.url]) return;
+    seen[it.url] = 1;
+    list.push(it);
+  });
+  var at = peekItem(node);
+  openPeek(at.url, at.kind, at.cap, { list: list, time: +node.getAttribute('data-peek-time') || 0 });
+}, true);
+var peekList = [];
+var peekIndex = 0;
+// Whether THIS peek took the iframe fullscreen — only then does closing it
+// hand the display mode back.
 var peekWentFullscreen = false;
-function openPeek(url, kind, cap) {
-  if (!url) return;
-  var box = ensurePeek();
+function showPeekItem(time) {
+  var it = peekList[peekIndex];
   var img = el('peek-img');
   var vid = el('peek-video');
-  var video = kind === 'video';
-  if (video) { vid.setAttribute('src', url); img.removeAttribute('src'); }
-  else { img.setAttribute('src', url); vid.removeAttribute('src'); }
-  el('peek-cap').textContent = cap || '';
+  if (it.kind === 'video') {
+    img.removeAttribute('src');
+    vid.setAttribute('src', it.url);
+    if (time) vid.addEventListener('loadedmetadata', function () { try { vid.currentTime = time; } catch (e) {} }, { once: true });
+    var p = vid.play && vid.play();
+    if (p && p.catch) p.catch(function () {});
+  } else {
+    try { vid.pause(); } catch (e) {}
+    vid.removeAttribute('src');
+    img.setAttribute('src', it.url);
+  }
+  el('peek-cap').textContent = it.cap || '';
+  var many = peekList.length > 1;
+  el('peek-count').textContent = many ? (peekIndex + 1) + ' / ' + peekList.length : '';
+  el('peek-prev').hidden = !many;
+  el('peek-next').hidden = !many;
+}
+function stepPeek(d) {
+  var box = el('peek');
+  if (!box || box.hidden || peekList.length < 2) return;
+  peekIndex = (peekIndex + d + peekList.length) % peekList.length;
+  showPeekItem(0);
+}
+function openPeek(url, kind, cap, opts) {
+  if (!url) return;
+  opts = opts || {};
+  var box = ensurePeek();
+  peekList = [{ url: url, kind: kind || 'image', cap: cap || '' }];
+  peekIndex = 0;
+  (opts.list || []).forEach(function (it, i) { if (it.url === url) { peekList = opts.list; peekIndex = i; } });
+  // Pause inline players so two soundtracks never overlap.
+  Array.prototype.forEach.call(document.querySelectorAll('video'), function (v) {
+    if (v.id !== 'peek-video') { try { v.pause(); } catch (e) {} }
+  });
+  showPeekItem(opts.time || 0);
   box.hidden = false;
+  document.documentElement.classList.add('k-peek-open');
   if (window.kolbo && window.kolbo.notifySize) window.kolbo.notifySize();
-  // Go big when the host allows it: the overlay is ALREADY visible inside the
-  // card, so a host that refuses fullscreen (or never answers the request)
-  // still shows the preview — the failure mode is "smaller", never "nothing".
-  // Skip the request when the card itself is fullscreen; the overlay covers it.
-  if (!window.kolbo || !window.kolbo.requestDisplayMode) return;
-  if (document.documentElement.classList.contains('k-fullscreen')) return;
+  if (peekWentFullscreen || !window.kolbo || !window.kolbo.requestDisplayMode) return;
   try {
     window.kolbo.requestDisplayMode('fullscreen').then(function (res) {
-      // The user may have closed the peek before the host answered — hand the
-      // grant straight back instead of fullscreening an empty card.
       if (!(res && res.mode === 'fullscreen')) return;
+      // Closed before the host answered — hand the grant straight back.
       if (box.hidden) { window.kolbo.requestDisplayMode('inline').catch(function () {}); return; }
       peekWentFullscreen = true;
       document.documentElement.classList.add('k-peek-fs');
@@ -207,22 +272,69 @@ function openPeek(url, kind, cap) {
     }).catch(function () {});
   } catch (e) {}
 }
-function closePeek() {
+function closePeek(hostExited) {
   var box = el('peek');
   if (!box || box.hidden) return;
   box.hidden = true;
+  document.documentElement.classList.remove('k-peek-open');
   el('peek-img').removeAttribute('src');
   var vid = el('peek-video');
   if (vid) { try { vid.pause(); } catch (e) {} vid.removeAttribute('src'); }
   if (peekWentFullscreen) {
     peekWentFullscreen = false;
     document.documentElement.classList.remove('k-peek-fs');
-    try { window.kolbo.requestDisplayMode('inline').catch(function () {}); } catch (e) {}
+    if (hostExited !== true) { try { window.kolbo.requestDisplayMode('inline').catch(function () {}); } catch (e) {} }
     if (window.kolbo.setFullscreen) window.kolbo.setFullscreen(false);
   }
   if (window.kolbo && window.kolbo.notifySize) window.kolbo.notifySize();
 }
-document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closePeek(); });
+// The host's own exit control (claude.ai's fullscreen X / Esc) drops the card
+// back to inline without asking us — close the lightbox along with it.
+window.kolbo.onThemeChange(function (ctx) {
+  if (peekWentFullscreen && ctx && ctx.displayMode && ctx.displayMode !== 'fullscreen') closePeek(true);
+});
+document.addEventListener('keydown', function (e) {
+  if (e.key === 'Escape') closePeek();
+  else if (e.key === 'ArrowLeft') stepPeek(-1);
+  else if (e.key === 'ArrowRight') stepPeek(1);
+});
+// Every inline <video controls> gets an Expand button (and double-click) that
+// opens the lightbox at the current time; the native fullscreen button is
+// hidden because the host iframe can never honour it. A MutationObserver
+// covers every render path (results, batch/status grids, scenes, media-grid
+// play swap) with no per-widget wiring.
+function wireVideoExpand(root) {
+  if (!root || !root.querySelectorAll) return;
+  var vids = root.tagName === 'VIDEO' ? [root] : root.querySelectorAll('video[controls]');
+  Array.prototype.forEach.call(vids, function (v) {
+    if (v.id === 'peek-video' || !v.controls || v.getAttribute('data-expand') || !v.parentNode) return;
+    var src = v.getAttribute('src');
+    if (!src) return;
+    v.setAttribute('data-expand', '1');
+    v.setAttribute('controlslist', 'nofullscreen');
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'k-vexpand';
+    b.title = 'Expand';
+    b.setAttribute('aria-label', 'Expand video');
+    b.innerHTML = ICONS.expand;
+    b.setAttribute('data-peek', src);
+    b.setAttribute('data-peek-kind', 'video');
+    var holder = v.parentNode.closest && v.parentNode.closest('[title]');
+    if (holder) b.setAttribute('data-peek-cap', holder.getAttribute('title'));
+    // Resume where the inline player was.
+    function mark() { b.setAttribute('data-peek-time', String(v.currentTime || 0)); }
+    b.addEventListener('pointerdown', mark);
+    b.addEventListener('keydown', mark);
+    v.addEventListener('dblclick', function (e) { e.preventDefault(); mark(); b.click(); });
+    v.parentNode.insertBefore(b, v.nextSibling);
+  });
+}
+if (window.MutationObserver) {
+  new MutationObserver(function (muts) {
+    muts.forEach(function (m) { Array.prototype.forEach.call(m.addedNodes, wireVideoExpand); });
+  }).observe(document.documentElement, { childList: true, subtree: true });
+}
 // Pull structuredContent out of a tools/call result (host bridge shape).
 function structured(res) {
   if (!res) return null;

package/src/apps/theme.js

@@ -85,7 +85,7 @@ body {
 .k-prompt { color: var(--text-muted); font-size: 12.5px; margin-bottom: 4px; word-break: break-word;
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
   user-select: text; -webkit-user-select: text; cursor: text; }
-.k-prompt.expanded { -webkit-line-clamp: unset; white-space: pre-wrap; }
+.k-prompt.expanded { -webkit-line-clamp: unset; white-space: pre-wrap; }
 .k-text-tools { display: flex; gap: 2px; justify-content: flex-end; margin: 0 0 10px; }
 .k-text-btn {
   display: inline-flex; align-items: center; gap: 4px;
@@ -138,27 +138,58 @@ body {
 .k-peek-hit { cursor: zoom-in; }
 .k-peek {
   position: absolute; inset: 0; z-index: 20;
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: 10px; padding: 28px 16px 16px;
-  background: rgba(8, 10, 16, 0.92);
+  display: flex; flex-direction: column;
+  background: rgba(6, 8, 12, 0.96);
 }
 .k-peek[hidden] { display: none !important; }
-.k-peek img, .k-peek video {
-  display: none; max-width: 100%; max-height: min(360px, 70vh);
-  border-radius: 10px; object-fit: contain; background: #000;
+/* An inline lightbox needs room: a short card (one list row, a 3-tile grid)
+   used to clip the media to a sliver. The card grows while it is open and
+   notifySize() asks the host for the height. */
+html.k-peek-open .k-card { min-height: 460px; }
+.k-peek-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; min-height: 44px; }
+.k-peek-cap { flex: 1; min-width: 0; font-size: 12.5px; color: rgba(255,255,255,0.78);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.k-peek-count { flex: none; font-size: 11.5px; color: rgba(255,255,255,0.55); font-family: 'JetBrains Mono', ui-monospace, monospace; }
+.k-peek-btn {
+  flex: none; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
+  background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; font-size: 15px;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.k-peek-btn:hover { background: var(--brand); border-color: var(--brand); }
+/* min-height:0 + max 100% on BOTH axes: the media is contained in whatever box
+   the lightbox has, never cropped and never overflowing it. */
+.k-peek-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 12px 12px; }
+.k-peek-stage img, .k-peek-stage video {
+  display: none; max-width: 100%; max-height: 100%; width: auto; height: auto;
+  object-fit: contain; border-radius: 8px; background: #000;
 }
-.k-peek img[src], .k-peek video[src] { display: block; }
-.k-peek-close {
-  position: absolute; top: 8px; right: 8px;
-  width: 28px; height: 28px; border: 0; border-radius: 999px;
-  background: var(--surface-2); color: var(--text); cursor: pointer;
+.k-peek-stage img[src], .k-peek-stage video[src] { display: block; }
+.k-peek-stage video[src] { width: 100%; height: 100%; }
+.k-peek-nav {
+  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
+  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px;
+  background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; font-size: 20px;
   display: inline-flex; align-items: center; justify-content: center;
 }
-.k-peek-cap { font-size: 12px; color: var(--text-muted); text-align: center; max-width: 100%; word-break: break-word; }
-/* Peek granted host fullscreen: the overlay owns the whole viewport, not the card. */
+.k-peek-nav[hidden] { display: none; }
+.k-peek-nav:hover { background: var(--brand); border-color: var(--brand); }
+.k-peek-nav.prev { left: 10px; }
+.k-peek-nav.next { right: 10px; }
+/* Host granted fullscreen: the lightbox owns the whole viewport, not the card. */
 html.k-peek-fs, html.k-peek-fs body { height: 100%; overflow: hidden; }
 html.k-peek-fs .k-peek { position: fixed; inset: 0; z-index: 50; }
-html.k-peek-fs .k-peek img, html.k-peek-fs .k-peek video { max-height: calc(100vh - 72px); }
+html.k-peek-fs .k-card { min-height: 0; }
+/* Expand button on every inline video — replaces the native fullscreen button,
+   which a host iframe without allow="fullscreen" always greys out. */
+.k-vexpand {
+  position: absolute; top: 8px; left: 8px; z-index: 3;
+  width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18);
+  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 14px; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+.k-vexpand:hover { background: var(--brand); border-color: var(--brand); }
+/* Recent Chromium still draws the native button despite controlslist. */
+video::-webkit-media-controls-fullscreen-button { display: none !important; }
 /* ---- Plans / upgrade card ---- */
 .k-plan-toggle { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px;
   background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
@@ -293,21 +324,6 @@ html.k-peek-fs .k-peek img, html.k-peek-fs .k-peek video { max-height: calc(100v
   border-radius: 12px; background: #000; border: 1px solid var(--border); cursor: zoom-in; }
 .k-viewer video { cursor: default; }
 
-/* ---- Fullscreen (ui/request-display-mode granted) ----
-   position:fixed pins the card to the iframe viewport regardless of document
-   flow/host sizing quirks — the media physically cannot exceed the screen. */
-html.k-fullscreen, html.k-fullscreen body { height: 100%; overflow: hidden; }
-html.k-fullscreen .k-card { position: fixed; inset: 0; display: flex; flex-direction: column; border-radius: 0; }
-html.k-fullscreen .k-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
-html.k-fullscreen .k-prompt, html.k-fullscreen .k-chips { flex: none; }
-html.k-fullscreen #stage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
-html.k-fullscreen .k-viewer { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
-html.k-fullscreen .k-viewer img, html.k-fullscreen .k-viewer video {
-  max-height: 100%; max-width: 100%; height: auto;
-  width: auto; margin: 0 auto; cursor: zoom-out; object-fit: contain; }
-html.k-fullscreen .k-thumbs { flex: none; }
-html.k-fullscreen .k-thumbs .k-thumb { width: 56px; height: 56px; }
-html.k-fullscreen .k-actions { flex: none; padding-top: 8px; }
 .k-expand-hint { display: none; }
 .k-thumbs { display: flex; gap: 6px; margin: 10px 0 2px; }
 .k-thumbs .k-thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; cursor: pointer;

package/src/apps/widgets/generation.js

@@ -335,7 +335,6 @@ function renderChips(sc) {
   if (sc.count > 1) h += chip('×' + sc.count);
   h += referenceHTML(sc);
   el('chips').innerHTML = h;
-  bindPeekHits(el('chips'));
 }
 
 var REF_VIDEO_RE = /\\.(mp4|mov|webm|mkv|avi|m4v)(\\?|#|$)/i;
@@ -920,13 +919,6 @@ function renderImages(sc, urls) {
     else renderLinks(urls);
     window.kolbo.notifySize();
   };
-  // Click → expand into an in-Claude fullscreen viewer (all actions stay
-  // available); click again (or Exit) collapses back. Hosts that refuse
-  // fullscreen fall back to opening the original in a new tab.
-  setTimeout(function () {
-    var img = el('main-img');
-    if (img) img.onclick = toggleFullscreen;
-  }, 0);
   var thumbs = '';
   if (urls.length > 1) {
     thumbs = '<div class="k-thumbs">' + urls.map(function (u, i) {
@@ -935,6 +927,10 @@ function renderImages(sc, urls) {
   }
   el('stage').innerHTML = viewer + thumbs;
   wireDlButtons(el('stage'));
+  // Click → lightbox (host fullscreen when granted), paging through every result.
+  el('main-img').onclick = function () {
+    openPeek(state.urls[selected], 'image', '', { list: state.urls.map(function (u) { return { url: u, kind: 'image' }; }) });
+  };
   Array.prototype.forEach.call(el('stage').querySelectorAll('.k-thumb'), function (t) {
     t.onclick = function () {
       selected = +t.getAttribute('data-i');
@@ -1094,20 +1090,11 @@ function renderBatchGrid(sc) {
         (it.label ? ' title="' + esc(it.label) + '"' : '') + '>' +
         (it.type === 'video'
           ? '<video class="k-cell-fill" src="' + esc(it.url) + '" controls playsinline preload="metadata"></video>'
-          : '<img class="k-cell-fill" src="' + esc(it.url) + '" alt="" loading="lazy" style="cursor:zoom-in">') +
+          : '<img class="k-cell-fill k-peek-hit" src="' + esc(it.url) + '" alt="" loading="lazy"' + peekAttrs(it.url, 'image', it.label) + '>') +
         (it.label ? '<span class="k-skel-cap" title="' + esc(it.label) + '">' + esc(it.label) + '</span>' : '') +
         dlBtnHTML(it.url) + '</div>';
     }).join('') + '</div>';
   wireDlButtons(el('stage'));
-  // In-widget popup, not the host round-trip focusMedia() uses — a batch grid
-  // tile has no visible full-size image otherwise, so a host that never resolves
-  // requestDisplayMode() (or drops window.open after the async round trip eats
-  // the click's user-activation window) leaves the click doing nothing at all.
-  Array.prototype.forEach.call(el('stage').querySelectorAll('[data-focus]'), function (cell) {
-    var it = items[+cell.getAttribute('data-focus')];
-    if (it.type !== 'image') return; // <video controls> owns its own clicks
-    cell.onclick = function () { openPeek(it.url, 'image', it.label); };
-  });
   renderActions(sc);
   window.kolbo.notifySize();
 }
@@ -1142,7 +1129,7 @@ function renderStatusGrid(sc) {
             ? '<video class="k-cell-fill" src="' + esc(it.url) + '" controls playsinline preload="metadata"></video>'
             : it.kind === 'audio'
               ? '<div class="k-cell-fill" style="display:flex;align-items:center;justify-content:center">' + ICONS.sound + '</div>'
-              : '<img class="k-cell-fill" src="' + esc(it.url) + '" alt="" loading="lazy" style="cursor:zoom-in">') +
+              : '<img class="k-cell-fill k-peek-hit" src="' + esc(it.url) + '" alt="" loading="lazy"' + peekAttrs(it.url, 'image', it.title) + '>') +
           cap + dlBtnHTML(it.url) + '</div>';
       }
       var failed = it.state === 'failed' || it.state === 'cancelled';
@@ -1152,11 +1139,6 @@ function renderStatusGrid(sc) {
       return '<div class="k-skel square">' + badge + cap + '</div>';
     }).join('') + '</div>';
   wireDlButtons(el('stage'));
-  Array.prototype.forEach.call(el('stage').querySelectorAll('[data-focus]'), function (cell) {
-    var it = items[+cell.getAttribute('data-focus')];
-    if (it.kind !== 'image') return; // <video controls> owns its own clicks
-    cell.onclick = function () { openPeek(it.url, 'image', it.title); };
-  });
   renderActions(sc);
   window.kolbo.notifySize();
 }
@@ -1182,8 +1164,9 @@ function renderScenes(sc) {
   makeExpandable(el('scene-cap'), it.label);
   wireDlButtons(el('stage'));
   if (it.type === 'image') {
-    var main = el('scene-main');
-    if (main) main.onclick = function () { focusMedia(it.url); };
+    el('scene-main').onclick = function () {
+      openPeek(it.url, 'image', it.label, { list: items.map(function (x) { return { url: x.url, kind: x.type === 'video' ? 'video' : 'image', cap: x.label }; }) });
+    };
   }
   Array.prototype.forEach.call(el('stage').querySelectorAll('.k-thumb'), function (t) {
     t.onclick = function () { selected = +t.getAttribute('data-i'); renderScenes(sc); window.kolbo.notifySize(); };
@@ -1191,27 +1174,6 @@ function renderScenes(sc) {
   renderActions(sc);
 }
 
-// Fullscreen a single item out of a multi-item grid (Creative Director
-// scenes). Exit restores the grid.
-function focusMedia(url) {
-  window.kolbo.requestDisplayMode('fullscreen').then(function (res) {
-    if (!(res && res.mode === 'fullscreen')) return window.kolbo.openLink(url);
-    isFullscreen = true;
-    el('stage').innerHTML = '<div class="k-viewer"><img id="focus-img" src="' + esc(url) + '" alt="" style="cursor:zoom-out">' + dlBtnHTML(url) + '</div>';
-    wireDlButtons(el('stage'));
-    el('focus-img').onclick = exitFocus;
-    applyFullscreen(true, exitFocus);
-    window.kolbo.notifySize();
-  }).catch(function () { window.kolbo.openLink(url); });
-}
-function exitFocus() {
-  window.kolbo.requestDisplayMode('inline').catch(function () {});
-  isFullscreen = false;
-  applyFullscreen(false);
-  renderResult(state); // restore whichever multi-item view we came from
-  window.kolbo.notifySize();
-}
-
 function renderError(msg) {
   clearTimeout(pollTimer);
 
@@ -1241,38 +1203,6 @@ function renderTrackingIssue(msg) {
   window.kolbo.notifySize();
 }
 
-/* ---------- fullscreen viewer ---------- */
-var isFullscreen = false;
-function toggleFullscreen() {
-  var want = isFullscreen ? 'inline' : 'fullscreen';
-  window.kolbo.requestDisplayMode(want).then(function (res) {
-    var granted = res && res.mode;
-    if (granted === 'fullscreen') { isFullscreen = true; applyFullscreen(true); }
-    else if (granted === 'inline' || isFullscreen) { isFullscreen = false; applyFullscreen(false); }
-    else if (!isFullscreen) {
-      // Host refused fullscreen — degrade to opening the original file.
-      window.kolbo.openLink(state.urls && state.urls[selected]);
-    }
-  }).catch(function () {
-    if (!isFullscreen) window.kolbo.openLink(state.urls && state.urls[selected]);
-  });
-}
-function applyFullscreen(on, exitHandler) {
-  document.documentElement.classList.toggle('k-fullscreen', on);
-  if (window.kolbo.setFullscreen) window.kolbo.setFullscreen(on);
-  var c = el('phase-chip');
-  if (on) {
-    c.style.display = '';
-    c.innerHTML = ICONS.x + ' ' + esc('Exit');
-    c.style.cursor = 'pointer';
-    c.onclick = exitHandler || toggleFullscreen;
-  } else {
-    c.style.display = 'none';
-    c.onclick = null;
-    c.style.cursor = '';
-  }
-  window.kolbo.notifySize();
-}
 
 function setPhaseChip(text, spinning) {
   var c = el('phase-chip');

package/src/apps/widgets/list.js

@@ -151,7 +151,6 @@ function itemHTML(item) {
 
 function wire() {
   var stage = el('stage');
-  bindPeekHits(stage);
   Array.prototype.forEach.call(stage.querySelectorAll('[data-open]'), function (b) {
     b.onclick = function (e) {
       e.stopPropagation();

package/src/apps/widgets/mediaGrid.js

@@ -180,7 +180,6 @@ function audioRowHTML(item) {
 
 function wire() {
   var stage = el('stage');
-  bindPeekHits(stage);
   Array.prototype.forEach.call(stage.querySelectorAll('.k-tile, .k-audio-row'), function (c) {
     c.onclick = function (e) {
       if (e.target && e.target.closest && e.target.closest('[data-peek],[data-use],[data-dl],[data-video-play]')) return;